refactor(components): split Layout component in smaller components

The previous component was too long and hardly readable. So I splitted
it in different part and added tests.

1 files changed, 91 insertions, 0 deletions

diff --git a/src/components/templates/layout/site-header/site-branding.tsx b/src/components/templates/layout/site-header/site-branding.tsx
new file mode 100644
index 0000000..f5a845d
--- /dev/null
+++ b/src/components/templates/layout/site-header/site-branding.tsx
@@ -0,0 +1,91 @@
+import NextImage from 'next/image';
+import {
+  type CSSProperties,
+  forwardRef,
+  type ForwardRefRenderFunction,
+} from 'react';
+import { useIntl } from 'react-intl';
+import { CONFIG } from '../../../../utils/config';
+import { ROUTES } from '../../../../utils/constants';
+import { Heading, Logo } from '../../../atoms';
+import { Branding, FlippingLogo, type BrandingProps } from '../../../molecules';
+import styles from './site-header.module.scss';
+
+const brandingTitleStyles = {
+  '--typing-animation': 'blink 0.7s ease-in-out 0s 2, typing 4.3s linear 0s 1',
+} as CSSProperties;
+
+const brandingBaselineStyles = {
+  '--typing-animation':
+    'hide-text 4.25s linear 0s 1, blink 0.8s ease-in-out 4.25s 2, typing 3.8s linear 4.25s 1',
+} as CSSProperties;
+
+export type SiteBrandingProps = Omit<
+  BrandingProps,
+  'baseline' | 'logo' | 'name' | 'url'
+> & {
+  isHome?: boolean;
+};
+
+const SiteBrandingWithRef: ForwardRefRenderFunction<
+  HTMLDivElement,
+  SiteBrandingProps
+> = ({ isHome = false, ...props }, ref) => {
+  const intl = useIntl();
+  const photoAltText = intl.formatMessage(
+    {
+      defaultMessage: '{website} picture',
+      description: 'SiteBranding: photo alternative text',
+      id: 'dDwm38',
+    },
+    { website: CONFIG.name }
+  );
+  const logoTitle = intl.formatMessage(
+    {
+      defaultMessage: '{website} logo',
+      description: 'SiteBranding: logo title',
+      id: 'Vrw5/h',
+    },
+    { website: CONFIG.name }
+  );
+
+  return (
+    <Branding
+      {...props}
+      baseline={
+        <div className={styles.baseline} style={brandingBaselineStyles}>
+          {CONFIG.baseline}
+        </div>
+      }
+      logo={
+        <FlippingLogo
+          back={<Logo heading={logoTitle} />}
+          className={styles.logo}
+          front={
+            <NextImage
+              alt={photoAltText}
+              height={120}
+              // eslint-disable-next-line react/jsx-no-literals
+              src="/armand-philippot.jpg"
+              width={120}
+            />
+          }
+        />
+      }
+      name={
+        <Heading
+          className={styles.title}
+          isFake={!isHome}
+          level={1}
+          style={brandingTitleStyles}
+        >
+          {CONFIG.name}
+        </Heading>
+      }
+      ref={ref}
+      url={ROUTES.HOME}
+    />
+  );
+};
+
+export const SiteBranding = forwardRef(SiteBrandingWithRef);