refactor(storybook): reorganize design system

Add more stories for each components and change some components
categories for better organization.

6 files changed, 270 insertions, 9 deletions

diff --git a/src/components/molecules/images/flipping-logo.module.scss b/src/components/molecules/images/flipping-logo.module.scss
new file mode 100644
index 0000000..89b9499
--- /dev/null
+++ b/src/components/molecules/images/flipping-logo.module.scss
@@ -0,0 +1,59 @@
+@use "@styles/abstracts/functions" as fun;
+
+.logo {
+  width: var(--logo-size, fun.convert-px(100));
+  height: var(--logo-size, fun.convert-px(100));
+  position: relative;
+  border-radius: 50%;
+  transform-style: preserve-3d;
+  transition: all 0.6s linear 0s;
+
+  &__front,
+  &__back {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    backface-visibility: hidden;
+    background: var(--color-bg);
+    border: fun.convert-px(2) solid var(--color-primary-dark);
+    border-radius: 50%;
+    transition: all 0.6s linear 0s;
+
+    svg,
+    img {
+      // !important is required to override next/image styles...
+      padding: fun.convert-px(2) !important;
+      border-radius: 50%;
+    }
+  }
+
+  &__front {
+    box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0
+        var(--color-shadow-light),
+      fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0
+        var(--color-shadow-light);
+  }
+
+  &__back {
+    transform: rotateY(180deg);
+  }
+
+  &:hover {
+    transform: rotateY(180deg);
+  }
+
+  &:hover & {
+    &__front {
+      box-shadow: none;
+    }
+
+    &__back {
+      box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0
+          var(--color-shadow-light),
+        fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0
+          var(--color-shadow-light);
+    }
+  }
+}
diff --git a/src/components/molecules/images/flipping-logo.stories.tsx b/src/components/molecules/images/flipping-logo.stories.tsx
new file mode 100644
index 0000000..40a4c49
--- /dev/null
+++ b/src/components/molecules/images/flipping-logo.stories.tsx
@@ -0,0 +1,75 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import FlippingLogoComponent from './flipping-logo';
+
+/**
+ * FlippingLogo - Storybook Meta
+ */
+export default {
+  title: 'Molecules/Images',
+  component: FlippingLogoComponent,
+  argTypes: {
+    altText: {
+      control: {
+        type: 'text',
+      },
+      description: 'Photo alternative text.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the logo wrapper.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    logoTitle: {
+      control: {
+        type: 'text',
+      },
+      description: 'An accessible name for the logo.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    photo: {
+      control: {
+        type: 'text',
+      },
+      description: 'Photo url.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    unoptimized: { table: { disable: true } },
+  },
+} as ComponentMeta<typeof FlippingLogoComponent>;
+
+const Template: ComponentStory<typeof FlippingLogoComponent> = (args) => (
+  <FlippingLogoComponent {...args} />
+);
+
+/**
+ * Images Stories - Flipping Logo
+ */
+export const FlippingLogo = Template.bind({});
+FlippingLogo.args = {
+  altText: 'Website picture',
+  logoTitle: 'Website logo',
+  photo: 'http://placeimg.com/640/480',
+  // @ts-ignore - Needed because of the placeholder image.
+  unoptimized: true,
+};
diff --git a/src/components/molecules/images/flipping-logo.test.tsx b/src/components/molecules/images/flipping-logo.test.tsx
new file mode 100644
index 0000000..806fdbe
--- /dev/null
+++ b/src/components/molecules/images/flipping-logo.test.tsx
@@ -0,0 +1,25 @@
+import { render, screen } from '@test-utils';
+import FlippingLogo from './flipping-logo';
+
+describe('FlippingLogo', () => {
+  it('renders a photo', () => {
+    render(
+      <FlippingLogo
+        altText="Alternative text"
+        photo="http://placeimg.com/640/480"
+      />
+    );
+    expect(screen.getByAltText('Alternative text')).toBeInTheDocument();
+  });
+
+  it('renders a logo', () => {
+    render(
+      <FlippingLogo
+        altText="Alternative text"
+        logoTitle="A logo title"
+        photo="http://placeimg.com/640/480"
+      />
+    );
+    expect(screen.getByTitle('A logo title')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/molecules/images/flipping-logo.tsx b/src/components/molecules/images/flipping-logo.tsx
new file mode 100644
index 0000000..0d31fa3
--- /dev/null
+++ b/src/components/molecules/images/flipping-logo.tsx
@@ -0,0 +1,55 @@
+import Logo, { type LogoProps } from '@components/atoms/images/logo';
+import Image from 'next/image';
+import { FC } from 'react';
+import styles from './flipping-logo.module.scss';
+
+export type FlippingLogoProps = {
+  /**
+   * Set additional classnames to the logo wrapper.
+   */
+  className?: string;
+  /**
+   * Photo alternative text.
+   */
+  altText: string;
+  /**
+   * Logo image title.
+   */
+  logoTitle?: LogoProps['title'];
+  /**
+   * Photo url.
+   */
+  photo: string;
+};
+
+/**
+ * FlippingLogo component
+ *
+ * Render a logo and a photo with a flipping effect.
+ */
+const FlippingLogo: FC<FlippingLogoProps> = ({
+  className = '',
+  altText,
+  logoTitle,
+  photo,
+  ...props
+}) => {
+  return (
+    <div className={`${styles.logo} ${className}`}>
+      <div className={styles.logo__front}>
+        <Image
+          src={photo}
+          alt={altText}
+          layout="fill"
+          objectFit="cover"
+          {...props}
+        />
+      </div>
+      <div className={styles.logo__back}>
+        <Logo title={logoTitle} />
+      </div>
+    </div>
+  );
+};
+
+export default FlippingLogo;
diff --git a/src/components/molecules/images/responsive-image.module.scss b/src/components/molecules/images/responsive-image.module.scss
index 83e8d10..3566421 100644
--- a/src/components/molecules/images/responsive-image.module.scss
+++ b/src/components/molecules/images/responsive-image.module.scss
@@ -5,7 +5,7 @@
   flex-flow: column;
   width: 100%;
   max-width: max-content;
-  margin: var(--spacing-sm) auto;
+  margin: 0;
   position: relative;
   text-align: center;
 }
diff --git a/src/components/molecules/images/responsive-image.stories.tsx b/src/components/molecules/images/responsive-image.stories.tsx
index f9c1d2b..a1f5295 100644
--- a/src/components/molecules/images/responsive-image.stories.tsx
+++ b/src/components/molecules/images/responsive-image.stories.tsx
@@ -1,9 +1,12 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ResponsiveImageComponent from './responsive-image';
+import ResponsiveImage from './responsive-image';
 
+/**
+ * ResponsiveImage - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Images',
-  component: ResponsiveImageComponent,
+  title: 'Molecules/Images/ResponsiveImage',
+  component: ResponsiveImage,
   argTypes: {
     alt: {
       control: {
@@ -72,16 +75,60 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof ResponsiveImageComponent>;
+} as ComponentMeta<typeof ResponsiveImage>;
 
-const Template: ComponentStory<typeof ResponsiveImageComponent> = (args) => (
-  <ResponsiveImageComponent {...args} />
+const Template: ComponentStory<typeof ResponsiveImage> = (args) => (
+  <ResponsiveImage {...args} />
 );
 
-export const ResponsiveImage = Template.bind({});
-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,
+  unoptimized: 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,
+  unoptimized: true,
+  target: '#',
+};
+
+/**
+ * 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',
+  unoptimized: 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: '#',
+  unoptimized: true,
 };