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.

5 files changed, 24 insertions, 24 deletions

diff --git a/src/components/organisms/layout/overview.stories.tsx b/src/components/organisms/layout/overview.stories.tsx
index be6db72..8f56d3a 100644
--- a/src/components/organisms/layout/overview.stories.tsx
+++ b/src/components/organisms/layout/overview.stories.tsx
@@ -1,5 +1,5 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Overview, OverviewMeta } from './overview';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Overview, type OverviewMeta } from './overview';
 
 /**
  * Overview - Storybook Meta
@@ -50,7 +50,7 @@ const Template: ComponentStory<typeof Overview> = (args) => (
 const cover = {
   alt: 'picture',
   height: 480,
-  src: 'http://placeimg.com/640/480/cats',
+  src: 'https://picsum.photos/640/480',
   width: 640,
 };
 
diff --git a/src/components/organisms/layout/overview.tsx b/src/components/organisms/layout/overview.tsx
index bb319c4..8af58ec 100644
--- a/src/components/organisms/layout/overview.tsx
+++ b/src/components/organisms/layout/overview.tsx
@@ -1,10 +1,7 @@
+import NextImage, { type ImageProps as NextImageProps } from 'next/image';
 import type { FC } from 'react';
-import {
-  Meta,
-  type MetaData,
-  ResponsiveImage,
-  type ResponsiveImageProps,
-} from '../../molecules';
+import { Figure } from '../../atoms';
+import { Meta, type MetaData } from '../../molecules';
 import styles from './overview.module.scss';
 
 export type OverviewMeta = Pick<
@@ -25,7 +22,7 @@ export type OverviewProps = {
   /**
    * The overview cover.
    */
-  cover?: Pick<ResponsiveImageProps, 'alt' | 'src' | 'width' | 'height'>;
+  cover?: Pick<NextImageProps, 'alt' | 'src' | 'width' | 'height'>;
   /**
    * The overview meta.
    */
@@ -47,7 +44,11 @@ export const Overview: FC<OverviewProps> = ({
 
   return (
     <div className={`${styles.wrapper} ${className}`}>
-      {cover ? <ResponsiveImage className={styles.cover} {...cover} /> : null}
+      {cover ? (
+        <Figure>
+          <NextImage {...cover} className={styles.cover} />
+        </Figure>
+      ) : null}
       <Meta
         className={`${styles.meta} ${metaModifier}`}
         data={{ ...remainingMeta, technologies }}
diff --git a/src/components/organisms/layout/summary.fixture.tsx b/src/components/organisms/layout/summary.fixture.ts
index bb3ebcb..6f90b4a 100644
--- a/src/components/organisms/layout/summary.fixture.tsx
+++ b/src/components/organisms/layout/summary.fixture.ts
@@ -1,9 +1,9 @@
-import { type SummaryMeta } from './summary';
+import type { SummaryMeta } from './summary';
 
 export const cover = {
   alt: 'A cover',
   height: 480,
-  src: 'http://placeimg.com/640/480',
+  src: 'https://picsum.photos/640/480',
   width: 640,
 };
 
diff --git a/src/components/organisms/layout/summary.module.scss b/src/components/organisms/layout/summary.module.scss
index b6cb4f4..9dc1a69 100644
--- a/src/components/organisms/layout/summary.module.scss
+++ b/src/components/organisms/layout/summary.module.scss
@@ -46,6 +46,7 @@
   height: fun.convert-px(100);
   max-width: 100%;
   border: fun.convert-px(1) solid var(--color-border);
+  object-fit: scale-down;
 
   @include mix.media("screen") {
     @include mix.dimensions("sm") {
diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx
index e21e4c7..fa3dfe5 100644
--- a/src/components/organisms/layout/summary.tsx
+++ b/src/components/organisms/layout/summary.tsx
@@ -1,3 +1,4 @@
+import NextImage, { type ImageProps as NextImageProps } from 'next/image';
 import type { FC, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
 import type { Article, Meta as MetaType } from '../../../types';
@@ -8,19 +9,12 @@ import {
   type HeadingLevel,
   Icon,
   Link,
+  Figure,
 } from '../../atoms';
-import {
-  Meta,
-  type MetaData,
-  ResponsiveImage,
-  type ResponsiveImageProps,
-} from '../../molecules';
+import { Meta, type MetaData } from '../../molecules';
 import styles from './summary.module.scss';
 
-export type Cover = Pick<
-  ResponsiveImageProps,
-  'alt' | 'src' | 'width' | 'height'
->;
+export type Cover = Pick<NextImageProps, 'alt' | 'src' | 'width' | 'height'>;
 
 export type SummaryMeta = Pick<
   MetaType<'article'>,
@@ -108,7 +102,11 @@ export const Summary: FC<SummaryProps> = ({
 
   return (
     <article className={styles.wrapper}>
-      {cover ? <ResponsiveImage className={styles.cover} {...cover} /> : null}
+      {cover ? (
+        <Figure>
+          <NextImage {...cover} className={styles.cover} />
+        </Figure>
+      ) : null}
       <header className={styles.header}>
         <Link href={url} className={styles.link}>
           <Heading level={titleLevel} className={styles.title}>