refactor(components): replace ResponsiveImage with Figure component

The styles applied to ResponsiveImage are related to the figure and
figcaption elements. Those elements could be use with other contents
than images. So I extracted them in a Figure component. The
ResponsiveImage component is no longer useful: the consumer should use
the Image component from `next` and wrap it in a link if needed.

1 files changed, 32 insertions, 0 deletions

diff --git a/src/components/atoms/figure/figure.test.tsx b/src/components/atoms/figure/figure.test.tsx
new file mode 100644
index 0000000..90a07c7
--- /dev/null
+++ b/src/components/atoms/figure/figure.test.tsx
@@ -0,0 +1,32 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { Figure } from './figure';
+
+describe('Figure', () => {
+  it('renders the figure contents', () => {
+    const body = 'tempora et quis';
+
+    render(<Figure>{body}</Figure>);
+
+    expect(rtlScreen.getByRole('figure')).toHaveTextContent(body);
+  });
+
+  it('can render its contents with a caption', () => {
+    const body = 'tempora et quis';
+    const caption = 'velit dolores magnam';
+
+    render(<Figure caption={caption}>{body}</Figure>);
+
+    expect(rtlScreen.getByRole('figure', { name: caption })).toHaveTextContent(
+      body
+    );
+  });
+
+  it('can style the figure with borders', () => {
+    const body = 'tempora et quis';
+
+    render(<Figure hasBorders>{body}</Figure>);
+
+    expect(rtlScreen.getByRole('figure')).toHaveClass('wrapper--has-borders');
+  });
+});