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.
---
 .../molecules/images/responsive-image.tsx          | 91 ----------------------
 1 file changed, 91 deletions(-)
 delete mode 100644 src/components/molecules/images/responsive-image.tsx

(limited to 'src/components/molecules/images/responsive-image.tsx')

diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx
deleted file mode 100644
index 85c0c46..0000000
--- a/src/components/molecules/images/responsive-image.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import Image, { type ImageProps } from 'next/image';
-import { FC, ReactNode } from 'react';
-import { Link, type LinkProps } from '../../atoms';
-import styles from './responsive-image.module.scss';
-
-export type ResponsiveImageProps = Omit<
-  ImageProps,
-  'alt' | 'width' | 'height'
-> & {
-  /**
-   * An alternative text.
-   */
-  alt: string;
-  /**
-   * A figure caption.
-   */
-  caption?: ReactNode;
-  /**
-   * Set additional classnames to the figure wrapper.
-   */
-  className?: string;
-  /**
-   * The image height.
-   */
-  height: number | `${number}`;
-  /**
-   * A link target.
-   */
-  target?: LinkProps['href'];
-  /**
-   * The image width.
-   */
-  width: number | `${number}`;
-  /**
-   * Wrap the image with borders.
-   */
-  withBorders?: boolean;
-};
-
-/**
- * ResponsiveImage component
- *
- * Render a responsive image wrapped in a figure element.
- */
-export const ResponsiveImage: FC<ResponsiveImageProps> = ({
-  alt,
-  caption,
-  className = '',
-  target,
-  title,
-  withBorders,
-  ...props
-}) => {
-  const bordersModifier = withBorders ? styles['wrapper--has-borders'] : '';
-  const linkModifier = target
-    ? styles['wrapper--has-link']
-    : styles['wrapper--no-link'];
-  const figureClass = `${styles.wrapper} ${bordersModifier} ${linkModifier} ${className}`;
-
-  return (
-    <figure aria-label={caption ? undefined : title} className={figureClass}>
-      {target ? (
-        <Link href={target} className={styles.link}>
-          <Image
-            {...props}
-            alt={alt}
-            className={styles.img}
-            sizes="100vw"
-            title={title}
-          />
-          {caption && (
-            <figcaption className={styles.caption}>{caption}</figcaption>
-          )}
-        </Link>
-      ) : (
-        <>
-          <Image
-            {...props}
-            alt={alt}
-            className={styles.img}
-            sizes="100vw"
-            title={title}
-          />
-          {caption && (
-            <figcaption className={styles.caption}>{caption}</figcaption>
-          )}
-        </>
-      )}
-    </figure>
-  );
-};
-- 
cgit v1.2.3