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.
---
 .../organisms/layout/site-header.stories.tsx       | 12 ++++++++++-
 .../organisms/layout/site-header.test.tsx          | 24 ++++++++++++++++++----
 2 files changed, 31 insertions(+), 5 deletions(-)

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

diff --git a/src/components/organisms/layout/site-header.stories.tsx b/src/components/organisms/layout/site-header.stories.tsx
index 56f1689..2b57263 100644
--- a/src/components/organisms/layout/site-header.stories.tsx
+++ b/src/components/organisms/layout/site-header.stories.tsx
@@ -1,4 +1,6 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import NextImage from 'next/image';
+import { Logo } from '../../atoms';
 import { SiteHeader as SiteHeaderComponent } from './site-header';
 
 /**
@@ -147,7 +149,15 @@ const nav = [
  */
 export const SiteHeader = Template.bind({});
 SiteHeader.args = {
+  logo: <Logo />,
   nav,
-  photo: 'http://placeimg.com/640/480/people',
+  photo: (
+    <NextImage
+      alt="A photo"
+      height={200}
+      src="https://picsum.photos/200"
+      width={200}
+    />
+  ),
   title: 'Website title',
 };
diff --git a/src/components/organisms/layout/site-header.test.tsx b/src/components/organisms/layout/site-header.test.tsx
index e75f99f..dc0e00d 100644
--- a/src/components/organisms/layout/site-header.test.tsx
+++ b/src/components/organisms/layout/site-header.test.tsx
@@ -1,5 +1,7 @@
 import { describe, expect, it } from '@jest/globals';
+import NextImage from 'next/image';
 import { render, screen as rtlScreen } from '../../../../tests/utils';
+import { Logo } from '../../atoms';
 import { SiteHeader } from './site-header';
 
 const nav = [
@@ -9,8 +11,6 @@ const nav = [
   { id: 'contact-link', href: '#', label: 'Contact' },
 ];
 
-const photo = 'http://placeimg.com/640/480/nightlife';
-
 const title = 'Assumenda quis quod';
 
 describe('SiteHeader', () => {
@@ -19,9 +19,17 @@ describe('SiteHeader', () => {
       <SiteHeader
         ackeeStorageKey="ackee-tracking"
         isHome={true}
+        logo={<Logo />}
         motionStorageKey="reduced-motion"
         nav={nav}
-        photo={photo}
+        photo={
+          <NextImage
+            alt="A photo"
+            height={200}
+            src="https://picsum.photos/200"
+            width={200}
+          />
+        }
         searchPage="#"
         title={title}
       />
@@ -35,9 +43,17 @@ describe('SiteHeader', () => {
     render(
       <SiteHeader
         ackeeStorageKey="ackee-tracking"
+        logo={<Logo />}
         motionStorageKey="reduced-motion"
         nav={nav}
-        photo={photo}
+        photo={
+          <NextImage
+            alt="A photo"
+            height={200}
+            src="https://picsum.photos/200"
+            width={200}
+          />
+        }
         searchPage="#"
         title={title}
       />
-- 
cgit v1.2.3