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.

2 files changed, 18 insertions, 16 deletions

diff --git a/src/components/organisms/widgets/image-widget.module.scss b/src/components/organisms/widgets/image-widget.module.scss
index 2174d5b..25de03e 100644
--- a/src/components/organisms/widgets/image-widget.module.scss
+++ b/src/components/organisms/widgets/image-widget.module.scss
@@ -4,6 +4,7 @@
   --scale-up: 1.02;
   --scale-down: 0.98;
 
+  width: fit-content;
   margin: 0;
   padding: fun.convert-px(5);
   border: fun.convert-px(1) solid var(--color-border);
diff --git a/src/components/organisms/widgets/image-widget.tsx b/src/components/organisms/widgets/image-widget.tsx
index 07c4b11..5de8dd8 100644
--- a/src/components/organisms/widgets/image-widget.tsx
+++ b/src/components/organisms/widgets/image-widget.tsx
@@ -1,18 +1,12 @@
+import NextImage, { type ImageProps as NextImageProps } from 'next/image';
 import type { FC } from 'react';
-import {
-  ResponsiveImage,
-  type ResponsiveImageProps,
-  Collapsible,
-  type CollapsibleProps,
-} from '../../molecules';
+import { Figure, Link, type FigureProps } from '../../atoms';
+import { Collapsible, type CollapsibleProps } from '../../molecules';
 import styles from './image-widget.module.scss';
 
 export type Alignment = 'left' | 'center' | 'right';
 
-export type Image = Pick<
-  ResponsiveImageProps,
-  'alt' | 'height' | 'src' | 'width'
->;
+export type Image = Pick<NextImageProps, 'alt' | 'height' | 'src' | 'width'>;
 
 export type ImageWidgetProps = Omit<
   CollapsibleProps,
@@ -25,7 +19,7 @@ export type ImageWidgetProps = Omit<
   /**
    * Add a caption to the image.
    */
-  description?: ResponsiveImageProps['caption'];
+  description?: FigureProps['caption'];
   /**
    * An object describing the image.
    */
@@ -37,7 +31,7 @@ export type ImageWidgetProps = Omit<
   /**
    * Add a link to the image.
    */
-  url?: ResponsiveImageProps['target'];
+  url?: string;
 };
 
 /**
@@ -62,12 +56,19 @@ export const ImageWidget: FC<ImageWidgetProps> = ({
       {...props}
       className={`${styles[alignmentClass]} ${className}`}
     >
-      <ResponsiveImage
-        {...image}
+      <Figure
         caption={description}
         className={`${styles.figure} ${imageClassName}`}
-        target={url}
-      />
+        hasBorders
+      >
+        {url ? (
+          <Link href={url}>
+            <NextImage {...image} />
+          </Link>
+        ) : (
+          <NextImage {...image} />
+        )}
+      </Figure>
     </Collapsible>
   );
 };