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.

4 files changed, 37 insertions, 13 deletions

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}
       />
diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx
index a09bdae..6a33aff 100644
--- a/src/components/organisms/toolbar/search.tsx
+++ b/src/components/organisms/toolbar/search.tsx
@@ -62,13 +62,12 @@ const SearchWithRef: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
         value="open"
       />
       <FlippingLabel
-        aria-label={label}
         className={sharedStyles.label}
         htmlFor="search-button"
+        icon={<Icon aria-hidden={true} shape="magnifying-glass" size="lg" />}
         isActive={isActive}
-      >
-        <Icon aria-hidden={true} shape="magnifying-glass" size="lg" />
-      </FlippingLabel>
+        label={label}
+      />
       <SearchModal
         className={`${sharedStyles.modal} ${searchStyles.modal} ${className}`}
         ref={searchInputRef}
diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index 53634d8..b7625aa 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -54,13 +54,12 @@ const SettingsWithRef: ForwardRefRenderFunction<
         value="open"
       />
       <FlippingLabel
-        aria-label={label}
         className={styles.label}
         htmlFor="settings-button"
+        icon={<Icon aria-hidden={true} shape="cog" size="lg" />}
         isActive={isActive}
-      >
-        <Icon aria-hidden={true} shape="cog" size="lg" />
-      </FlippingLabel>
+        label={label}
+      />
       <SettingsModal
         ackeeStorageKey={ackeeStorageKey}
         className={`${styles.modal} ${className}`}