Move logo to design system

src/components/Header/Header.tsx

@@ -5,7 +5,7 @@ import Box from '../Box';
 import VisuallyHidden from '../VisuallyHidden';
 import { Media } from '../Media';
 import Icon from '../../design-system/components/Icon';
-import Logo from '../Logo';
+import Logo from '../../design-system/components/Logo';
 
 import MainMenu from './MainMenu';
 import { useMapState } from '../MapState';

src/components/PageLoading.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Box from './Box';
 import Spacer from './Spacer';
 import Text from './Text';
-import Logo from './Logo';
+import Logo from '../design-system/components/Logo';
 
 const PageLoading = () => (
   <Box

src/design-system/components/Logo/Logo.css

@@ -0,0 +1,3 @@
+.logo {
+    width: 154px;
+}

src/design-system/components/Logo/Logo.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import Logo from './Logo';
+
+export default {
+  title: 'Design-System/Logo',
+  component: Logo,
+  tags: ['autodocs'],
+} as Meta;
+
+export const Default: StoryObj<typeof Logo> = {
+  render: () => {
+    return <Logo />;
+  },
+};

src/components/Logo/Logo.tsx → src/design-system/components/Logo/Logo.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
-
-import Image from 'next/legacy/image';
-import Box from '../Box';
-import logo from '../../../public/logo.svg';
+import Image from 'next/image';
+import logo from '../../../../public/logo.svg';
 
 const Logo = React.forwardRef<HTMLDivElement>((props, ref) => (
-  <Box width="154px" ref={ref}>
+  <div className="logo" ref={ref}>
     <Image
       src={logo}
       alt="The Great British Toilet Map"
@@ -14,7 +12,7 @@ const Logo = React.forwardRef<HTMLDivElement>((props, ref) => (
       priority={true}
       {...props}
     />
-  </Box>
+  </div>
 ));
 
 // eslint-disable-next-line functional/immutable-data

src/design-system/components/stylesheet.css

@@ -6,6 +6,7 @@
 @import 'src/design-system/components/Switch/Switch.css';
 @import 'src/design-system/components/TextArea/TextArea.css';
 @import 'src/design-system/components/Drawer/Drawer.css';
+@import 'src/design-system/components/Logo/Logo.css';
 
 /* Leaflet Marker Cluster custom styles */
 .leaflet-marker-icon.marker-cluster {