From d75b9a1e150ab211c1052fb49bede9bd16320aca Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sat, 7 Oct 2023 18:44:14 +0200
Subject: feat(components): add a generic Flip component

The flipping animation is used at several places so it makes sense to
use a single component to handle the animation. It will avoid styles
duplication.
---
 .../molecules/layout/branding.stories.tsx          | 26 ++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

(limited to 'src/components/molecules/layout/branding.stories.tsx')

diff --git a/src/components/molecules/layout/branding.stories.tsx b/src/components/molecules/layout/branding.stories.tsx
index 04844e2..7ff88c9 100644
--- a/src/components/molecules/layout/branding.stories.tsx
+++ b/src/components/molecules/layout/branding.stories.tsx
@@ -1,4 +1,6 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import NextImage from 'next/image';
+import { Logo } from '../../atoms';
 import { Branding } from './branding';
 
 /**
@@ -82,8 +84,16 @@ const Template: ComponentStory<typeof Branding> = (args) => (
  */
 export const Default = Template.bind({});
 Default.args = {
+  logo: <Logo heading="A logo example" />,
+  photo: (
+    <NextImage
+      alt="A photo example"
+      height={200}
+      src="https://picsum.photos/200"
+      width={200}
+    />
+  ),
   title: 'Website title',
-  photo: 'http://placeimg.com/640/480',
 };
 
 /**
@@ -91,7 +101,15 @@ Default.args = {
  */
 export const WithBaseline = Template.bind({});
 WithBaseline.args = {
-  title: 'Website title',
   baseline: 'Maiores corporis qui',
-  photo: 'http://placeimg.com/640/480',
+  logo: <Logo heading="A logo example" />,
+  photo: (
+    <NextImage
+      alt="A photo example"
+      height={200}
+      src="https://picsum.photos/200"
+      width={200}
+    />
+  ),
+  title: 'Website title',
 };
-- 
cgit v1.2.3