From 15522ec9146f6f1956620355c44dea2a6a75b67c Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 9 Oct 2023 18:26:23 +0200
Subject: 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.
---
 .../organisms/images/gallery.stories.tsx           | 23 ++++++++++++-----
 src/components/organisms/images/gallery.test.tsx   | 30 ++++++++++++----------
 src/components/organisms/images/gallery.tsx        |  5 ++--
 3 files changed, 35 insertions(+), 23 deletions(-)

(limited to 'src/components/organisms/images')

diff --git a/src/components/organisms/images/gallery.stories.tsx b/src/components/organisms/images/gallery.stories.tsx
index 5005ed8..016b18e 100644
--- a/src/components/organisms/images/gallery.stories.tsx
+++ b/src/components/organisms/images/gallery.stories.tsx
@@ -1,5 +1,6 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ResponsiveImage } from '../../molecules';
+import NextImage from 'next/image';
+import { Figure } from '../../atoms';
 import { Gallery } from './gallery';
 
 /**
@@ -13,7 +14,7 @@ export default {
       control: {
         type: null,
       },
-      description: 'Two or more ResponsiveImage component.',
+      description: 'Two or more images.',
       type: {
         name: 'function',
         required: true,
@@ -37,16 +38,24 @@ export default {
 const image = {
   alt: 'Modi provident omnis',
   height: 480,
-  src: 'http://picsum.photos/640/480',
+  src: 'https://picsum.photos/640/480',
   width: 640,
 };
 
 const Template: ComponentStory<typeof Gallery> = (args) => (
   <Gallery {...args}>
-    <ResponsiveImage {...image} />
-    <ResponsiveImage {...image} />
-    <ResponsiveImage {...image} />
-    <ResponsiveImage {...image} />
+    <Figure>
+      <NextImage {...image} />
+    </Figure>
+    <Figure>
+      <NextImage {...image} />
+    </Figure>
+    <Figure>
+      <NextImage {...image} />
+    </Figure>
+    <Figure>
+      <NextImage {...image} />
+    </Figure>
   </Gallery>
 );
 
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`
+    );
   });
 });
diff --git a/src/components/organisms/images/gallery.tsx b/src/components/organisms/images/gallery.tsx
index b35acfe..2f17130 100644
--- a/src/components/organisms/images/gallery.tsx
+++ b/src/components/organisms/images/gallery.tsx
@@ -1,6 +1,5 @@
 import { Children, type FC, type ReactElement } from 'react';
 import { List, ListItem } from '../../atoms';
-import type { ResponsiveImageProps } from '../../molecules';
 import styles from './gallery.module.scss';
 
 // eslint-disable-next-line @typescript-eslint/no-magic-numbers
@@ -8,9 +7,9 @@ export type GalleryColumn = 2 | 3 | 4;
 
 export type GalleryProps = {
   /**
-   * The images using ResponsiveImage component.
+   * The images.
    */
-  children: ReactElement<ResponsiveImageProps>[];
+  children: ReactElement[];
   /**
    * The columns count.
    */
-- 
cgit v1.2.3