refactor(components): rewrite Branding component

The component should only be responsible of the layout for the logo,
the name and the optional baseline. Also, the homepage url could
be different from `/` so the consumer should give the right url.

2 files changed, 16 insertions, 21 deletions

diff --git a/src/components/organisms/layout/site-header.stories.tsx b/src/components/organisms/layout/site-header.stories.tsx
index 2b57263..e69ebfd 100644
--- a/src/components/organisms/layout/site-header.stories.tsx
+++ b/src/components/organisms/layout/site-header.stories.tsx
@@ -1,6 +1,6 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import NextImage from 'next/image';
-import { Logo } from '../../atoms';
+import { Heading } from '../../atoms';
 import { SiteHeader as SiteHeaderComponent } from './site-header';
 
 /**
@@ -149,15 +149,14 @@ const nav = [
  */
 export const SiteHeader = Template.bind({});
 SiteHeader.args = {
-  logo: <Logo />,
   nav,
-  photo: (
+  logo: (
     <NextImage
-      alt="A photo"
-      height={200}
-      src="https://picsum.photos/200"
-      width={200}
+      alt="A logo"
+      height={100}
+      src="https://picsum.photos/100"
+      width={100}
     />
   ),
-  title: 'Website title',
+  name: <Heading level={1}>Website title</Heading>,
 };
diff --git a/src/components/organisms/layout/site-header.test.tsx b/src/components/organisms/layout/site-header.test.tsx
index dc0e00d..fa1b7be 100644
--- a/src/components/organisms/layout/site-header.test.tsx
+++ b/src/components/organisms/layout/site-header.test.tsx
@@ -1,7 +1,6 @@
 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 = [
@@ -18,20 +17,18 @@ describe('SiteHeader', () => {
     render(
       <SiteHeader
         ackeeStorageKey="ackee-tracking"
-        isHome={true}
-        logo={<Logo />}
-        motionStorageKey="reduced-motion"
-        nav={nav}
-        photo={
+        logo={
           <NextImage
-            alt="A photo"
+            alt="A logo"
             height={200}
             src="https://picsum.photos/200"
             width={200}
           />
         }
+        motionStorageKey="reduced-motion"
+        name={<h1>{title}</h1>}
+        nav={nav}
         searchPage="#"
-        title={title}
       />
     );
     expect(
@@ -43,10 +40,7 @@ describe('SiteHeader', () => {
     render(
       <SiteHeader
         ackeeStorageKey="ackee-tracking"
-        logo={<Logo />}
-        motionStorageKey="reduced-motion"
-        nav={nav}
-        photo={
+        logo={
           <NextImage
             alt="A photo"
             height={200}
@@ -54,8 +48,10 @@ describe('SiteHeader', () => {
             width={200}
           />
         }
+        motionStorageKey="reduced-motion"
+        name={<div>{title}</div>}
+        nav={nav}
         searchPage="#"
-        title={title}
       />
     );
     expect(rtlScreen.getByRole('navigation')).toBeInTheDocument();