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.
---
 src/components/molecules/layout/card.fixture.ts  | 19 +++++++++++++++++++
 src/components/molecules/layout/card.fixture.tsx | 19 -------------------
 src/components/molecules/layout/card.module.scss |  1 +
 src/components/molecules/layout/card.tsx         | 11 ++++++-----
 4 files changed, 26 insertions(+), 24 deletions(-)
 create mode 100644 src/components/molecules/layout/card.fixture.ts
 delete mode 100644 src/components/molecules/layout/card.fixture.tsx

(limited to 'src/components/molecules/layout')

diff --git a/src/components/molecules/layout/card.fixture.ts b/src/components/molecules/layout/card.fixture.ts
new file mode 100644
index 0000000..01fe2e9
--- /dev/null
+++ b/src/components/molecules/layout/card.fixture.ts
@@ -0,0 +1,19 @@
+export const cover = {
+  alt: 'A picture',
+  height: 480,
+  src: 'https://picsum.photos/640/480',
+  width: 640,
+};
+
+export const id = 'nam';
+
+export const meta = {
+  author: 'Possimus',
+  thematics: ['Autem', 'Eos'],
+};
+
+export const tagline = 'Ut rerum incidunt';
+
+export const title = 'Alias qui porro';
+
+export const url = '/an-existing-url';
diff --git a/src/components/molecules/layout/card.fixture.tsx b/src/components/molecules/layout/card.fixture.tsx
deleted file mode 100644
index f96cc43..0000000
--- a/src/components/molecules/layout/card.fixture.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-export const cover = {
-  alt: 'A picture',
-  height: 480,
-  src: 'http://placeimg.com/640/480',
-  width: 640,
-};
-
-export const id = 'nam';
-
-export const meta = {
-  author: 'Possimus',
-  thematics: ['Autem', 'Eos'],
-};
-
-export const tagline = 'Ut rerum incidunt';
-
-export const title = 'Alias qui porro';
-
-export const url = '/an-existing-url';
diff --git a/src/components/molecules/layout/card.module.scss b/src/components/molecules/layout/card.module.scss
index 31f6a4b..7a06508 100644
--- a/src/components/molecules/layout/card.module.scss
+++ b/src/components/molecules/layout/card.module.scss
@@ -20,6 +20,7 @@
   .cover {
     place-content: center;
     height: fun.convert-px(150);
+    object-fit: scale-down;
     margin: auto;
     border-bottom: fun.convert-px(1) solid var(--color-border);
   }
diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx
index c9e7a90..c316100 100644
--- a/src/components/molecules/layout/card.tsx
+++ b/src/components/molecules/layout/card.tsx
@@ -1,7 +1,6 @@
+import NextImage, { type ImageProps as NextImageProps } from 'next/image';
 import type { FC } from 'react';
-import type { Image as Img } from '../../../types';
-import { ButtonLink, Heading, type HeadingLevel } from '../../atoms';
-import { ResponsiveImage } from '../images';
+import { ButtonLink, Figure, Heading, type HeadingLevel } from '../../atoms';
 import styles from './card.module.scss';
 import { Meta, type MetaData } from './meta';
 
@@ -13,7 +12,7 @@ export type CardProps = {
   /**
    * The card cover.
    */
-  cover?: Img;
+  cover?: Pick<NextImageProps, 'alt' | 'src' | 'title' | 'width' | 'height'>;
   /**
    * The card id.
    */
@@ -63,7 +62,9 @@ export const Card: FC<CardProps> = ({
       <article className={styles.article}>
         <header className={styles.header}>
           {cover ? (
-            <ResponsiveImage {...cover} className={styles.cover} />
+            <Figure>
+              <NextImage {...cover} className={styles.cover} />
+            </Figure>
           ) : null}
           <Heading className={styles.title} id={headingId} level={titleLevel}>
             {title}
-- 
cgit v1.2.3