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

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

diff --git a/src/components/molecules/images/responsive-image.stories.tsx b/src/components/molecules/images/responsive-image.stories.tsx
deleted file mode 100644
index cc6b088..0000000
--- a/src/components/molecules/images/responsive-image.stories.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ResponsiveImage } from './responsive-image';
-
-/**
- * ResponsiveImage - Storybook Meta
- */
-export default {
-  title: 'Molecules/Images/ResponsiveImage',
-  component: ResponsiveImage,
-  args: {
-    withBorders: false,
-  },
-  argTypes: {
-    alt: {
-      control: {
-        type: 'text',
-      },
-      description: 'An alternative text.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    caption: {
-      control: {
-        type: 'text',
-      },
-      description: 'A figure caption.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the image wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    height: {
-      control: {
-        type: 'number',
-      },
-      description: 'The image height.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    src: {
-      control: {
-        type: 'text',
-      },
-      description: 'The image source.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    target: {
-      control: {
-        type: 'text',
-      },
-      description: 'A link target.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    width: {
-      control: {
-        type: 'number',
-      },
-      description: 'The image width.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    withBorders: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Add borders around the image.',
-      table: {
-        category: 'Styles',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof ResponsiveImage>;
-
-const Template: ComponentStory<typeof ResponsiveImage> = (args) => (
-  <ResponsiveImage {...args} />
-);
-
-/**
- * Responsive Image Stories - Default
- */
-export const Default = Template.bind({});
-Default.args = {
-  alt: 'An example',
-  src: 'http://placeimg.com/640/480/transport',
-  width: 640,
-  height: 480,
-};
-
-/**
- * Responsive Image Stories - With borders
- */
-export const WithBorders = Template.bind({});
-WithBorders.args = {
-  alt: 'An example',
-  src: 'http://placeimg.com/640/480/transport',
-  width: 640,
-  height: 480,
-  withBorders: true,
-};
-
-/**
- * Responsive Image Stories - With link
- */
-export const WithLink = Template.bind({});
-WithLink.args = {
-  alt: 'An example',
-  src: 'http://placeimg.com/640/480/transport',
-  width: 640,
-  height: 480,
-  target: '#',
-};
-
-/**
- * Responsive Image Stories - With link and borders
- */
-export const WithLinkAndBorders = Template.bind({});
-WithLinkAndBorders.args = {
-  alt: 'An example',
-  src: 'http://placeimg.com/640/480/transport',
-  width: 640,
-  height: 480,
-  target: '#',
-  withBorders: true,
-};
-
-/**
- * Responsive Image Stories - With caption
- */
-export const WithCaption = Template.bind({});
-WithCaption.args = {
-  alt: 'An example',
-  src: 'http://placeimg.com/640/480/transport',
-  width: 640,
-  height: 480,
-  caption: 'Omnis nulla labore',
-};
-
-/**
- * Responsive Image Stories - With caption and borders
- */
-export const WithCaptionAndBorders = Template.bind({});
-WithCaptionAndBorders.args = {
-  alt: 'An example',
-  src: 'http://placeimg.com/640/480/transport',
-  width: 640,
-  height: 480,
-  caption: 'Omnis nulla labore',
-  withBorders: true,
-};
-
-/**
- * Responsive Image Stories - With caption and link
- */
-export const WithCaptionAndLink = Template.bind({});
-WithCaptionAndLink.args = {
-  alt: 'An example',
-  src: 'http://placeimg.com/640/480/transport',
-  width: 640,
-  height: 480,
-  caption: 'Omnis nulla labore',
-  target: '#',
-};
-
-/**
- * Responsive Image Stories - With caption, link and borders
- */
-export const WithCaptionLinkAndBorders = Template.bind({});
-WithCaptionLinkAndBorders.args = {
-  alt: 'An example',
-  src: 'http://placeimg.com/640/480/transport',
-  width: 640,
-  height: 480,
-  caption: 'Omnis nulla labore',
-  target: '#',
-  withBorders: true,
-};
-- 
cgit v1.2.3