OPHJOD-1210: Refactor Footer to use built in logos

lib/components/Footer/Footer.stories.tsx

@@ -70,18 +70,6 @@ const items: FooterProps['items'] = [
   },
 ];
 
-const logos: FooterProps['logos'] = [
-  <a key="1" href="/logo1">
-    Logo 1
-  </a>,
-  <a key="2" href="/logo2">
-    Logo 2
-  </a>,
-  <a key="3" href="/logo3">
-    Logo 3
-  </a>,
-];
-
 const copyright = '© JOD 2024. Kaikki oikeudet pidätetään.';
 
 export const Light: Story = {
@@ -99,7 +87,7 @@ export const Light: Story = {
   },
   args: {
     items,
-    logos,
+    language: 'fi',
     copyright,
   },
 };
@@ -123,7 +111,7 @@ export const Dark: Story = {
   },
   args: {
     items,
-    logos,
+    language: 'fi',
     copyright,
     variant: 'dark',
   },
@@ -151,7 +139,7 @@ export const MobileDark: Story = {
   },
   args: {
     items,
-    logos,
+    language: 'fi',
     copyright,
     variant: 'dark',
   },

lib/components/Footer/Footer.test.tsx

@@ -10,21 +10,16 @@ describe('Footer', () => {
     { key: 'item2', component: () => <div>Item 2</div> },
     { key: 'item3', component: () => <div>Item 3</div> },
   ];
-  const mockLogos = [<div key="logo1">Logo 1</div>, <div key="logo2">Logo 2</div>];
   const mockCopyright = '© 2024';
 
   it('renders footer with light variant', () => {
-    const { container } = render(
-      <Footer items={mockItems} variant="light" logos={mockLogos} copyright={mockCopyright} />,
-    );
+    const { container } = render(<Footer items={mockItems} variant="light" language="fi" copyright={mockCopyright} />);
     expect(container.firstChild).toHaveClass('ds-bg-white ds-text-black');
     expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders footer with dark variant', () => {
-    const { container } = render(
-      <Footer items={mockItems} variant="dark" logos={mockLogos} copyright={mockCopyright} />,
-    );
+    const { container } = render(<Footer items={mockItems} variant="dark" language="fi" copyright={mockCopyright} />);
     expect(container.firstChild).toHaveClass('ds-bg-black ds-text-white');
     expect(container.firstChild).toMatchSnapshot();
   });
@@ -40,15 +35,6 @@ describe('Footer', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it('renders logos', () => {
-    const { container } = render(<Footer logos={mockLogos} variant="light" />);
-    const logo1 = screen.getByText('Logo 1');
-    const logo2 = screen.getByText('Logo 2');
-    expect(logo1).toBeInTheDocument();
-    expect(logo2).toBeInTheDocument();
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
   it('renders copyright', () => {
     const { container } = render(<Footer variant="light" copyright={mockCopyright} />);
     const copyright = screen.getByText('© 2024');

lib/components/Footer/Footer.tsx

@@ -1,13 +1,27 @@
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
+import {
+  LogoEuEn,
+  LogoEuFi,
+  LogoEuSv,
+  LogoKehaEn,
+  LogoKehaFi,
+  LogoKehaSv,
+  LogoOkmEn,
+  LogoOkmFiSv,
+  LogoOphEn,
+  LogoOphFiSv,
+  LogoTemEn,
+  LogoTemFiSv,
+} from './logos';
 
 export interface FooterProps {
   /** Navigation items */
   items?: {
     key: React.Key;
     component: React.ComponentType<{ className: string }>;
   }[];
-  /** Collection of logos */
-  logos?: React.ReactNode;
+  /** Language of the logos */
+  language?: string;
   /** Copyright text */
   copyright?: string;
   /** Variant of the footer */
@@ -20,9 +34,68 @@ export interface FooterProps {
  * This component is a footer that displays navigation items, logos, and a copyright.
  */
 export const Footer = forwardRef<HTMLDivElement, FooterProps>(function Footer(
-  { items, logos, copyright, variant = 'light', className = '' }: FooterProps,
+  { items, language, copyright, variant = 'light', className = '' }: FooterProps,
   ref,
 ) {
+  const logos = React.useMemo(() => {
+    switch (language) {
+      case 'sv':
+        return [
+          <div key="LogoEuSv" className="flex">
+            <LogoEuSv className="h-10 max-w-full" />
+          </div>,
+          <div key="LogoOkmFiSv" className="flex">
+            <LogoOkmFiSv className="h-10 max-w-full" />
+          </div>,
+          <div key="LogoTemFiSv" className="flex">
+            <LogoTemFiSv className="h-10 max-w-full" />
+          </div>,
+          <div key="LogoKehaSv" className="flex">
+            <LogoKehaSv className="h-10 max-w-full" />
+          </div>,
+          <div key="LogoOphFiSv" className="flex">
+            <LogoOphFiSv className="h-10 max-w-full" />
+          </div>,
+        ];
+      case 'en':
+        return [
+          <div key="LogoEuEn" className="flex">
+            <LogoEuEn className="h-10 max-w-full" />
+          </div>,
+          <div key="LogoOkmEn" className="flex">
+            <LogoOkmEn className="h-10 max-w-full" />
+          </div>,
+          <div key="LogoTemEn" className="flex">
+            <LogoTemEn className="h-10 max-w-full" />
+          </div>,
+          <div key="LogoKehaEn" className="flex">
+            <LogoKehaEn className="h-10 max-w-full" />
+          </div>,
+          <div key="LogoOphEn" className="flex">
+            <LogoOphEn className="h-10 max-w-full" />
+          </div>,
+        ];
+      default:
+        return [
+          <div key="LogoEuFi" className="flex">
+            <LogoEuFi className="h-10 max-w-full" />
+          </div>,
+          <div key="LogoOkmFiSv" className="flex">
+            <LogoOkmFiSv className="h-10 max-w-full" />
+          </div>,
+          <div key="LogoTemFiSv" className="flex">
+            <LogoTemFiSv className="h-10 max-w-full" />
+          </div>,
+          <div key="LogoKehaFi" className="flex">
+            <LogoKehaFi className="h-10 max-w-full" />
+          </div>,
+          <div key="LogoOphFiSv" className="flex">
+            <LogoOphFiSv className="h-10 max-w-full" />
+          </div>,
+        ];
+    }
+  }, [language]);
+
   return (
     <footer
       ref={ref}
@@ -38,7 +111,7 @@ export const Footer = forwardRef<HTMLDivElement, FooterProps>(function Footer(
             ))}
           </ul>
         )}
-        {logos}
+        <div className="ds-px-5 sm:ds-px-0 ds-grid sm:ds-grid-cols-3 ds-gap-6 sm:ds-gap-9 ds-items-center">{logos}</div>
         {copyright && <div className="ds-mt-9 ds-flex ds-justify-end ds-px-5 sm:ds-px-0">{copyright}</div>}
       </div>
     </footer>