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, 17 insertions, 13 deletions

diff --git a/src/components/organisms/images/gallery.test.tsx b/src/components/organisms/images/gallery.test.tsx
index ea39348..bffc3b2 100644
--- a/src/components/organisms/images/gallery.test.tsx
+++ b/src/components/organisms/images/gallery.test.tsx
@@ -1,6 +1,6 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { ResponsiveImage } from '../../molecules';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import NextImage from 'next/image';
 import { Gallery } from './gallery';
 
 const columns = 3;
@@ -8,7 +8,7 @@ const columns = 3;
 const image = {
   alt: 'Modi provident omnis',
   height: 480,
-  src: 'http://placeimg.com/640/480/fashion',
+  src: 'http://picsum.photos/640/480',
   width: 640,
 };
 
@@ -16,24 +16,28 @@ describe('Gallery', () => {
   it('renders the correct number of items', () => {
     render(
       <Gallery columns={columns}>
-        <ResponsiveImage {...image} />
-        <ResponsiveImage {...image} />
-        <ResponsiveImage {...image} />
-        <ResponsiveImage {...image} />
+        <NextImage {...image} />
+        <NextImage {...image} />
+        <NextImage {...image} />
+        <NextImage {...image} />
       </Gallery>
     );
-    expect(screen.getAllByRole('listitem')).toHaveLength(4);
+
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    expect(rtlScreen.getAllByRole('listitem')).toHaveLength(4);
   });
 
   it('renders the right number of columns', () => {
     render(
       <Gallery columns={columns}>
-        <ResponsiveImage {...image} />
-        <ResponsiveImage {...image} />
-        <ResponsiveImage {...image} />
-        <ResponsiveImage {...image} />
+        <NextImage {...image} />
+        <NextImage {...image} />
+        <NextImage {...image} />
+        <NextImage {...image} />
       </Gallery>
     );
-    expect(screen.getByRole('list')).toHaveClass(`wrapper--${columns}-columns`);
+    expect(rtlScreen.getByRole('list')).toHaveClass(
+      `wrapper--${columns}-columns`
+    );
   });
 });