fix: update logo component and add common logo props

Author: hamza14khan

packages/react/ds/src/footer/footer.stories.tsx

@@ -9,19 +9,18 @@ const meta: Meta<typeof Footer> = {
   argTypes: {
     primarySlot: {
       control: 'object',
-      description: 'Primary navigation links - typically main site sections',
+      description: 'Primary slot - typically main site sections',
     },
     secondarySlot: {
       control: 'object',
-      description:
-        'Secondary navigation links - typically department/org specific links',
+      description: 'Secondary slot - typically department/org specific links',
     },
     utilitySlot: {
       control: 'object',
       description:
-        'Utility links - typically copyright, privacy policy, accessibility, etc.',
+        'Utility stot - typically copyright, privacy policy, accessibility, etc.',
     },
-    logoComponent: {
+    logo: {
       control: 'object',
       description: 'Optional custom logo component',
     },
@@ -41,8 +40,9 @@ type Story = StoryObj<typeof Footer>;
 
 export const CompleteFooter: Story = {
   args: {
+    dataTestid: 'gi-footer',
     primarySlot: (
-      <div className="!gi-ml-0 !gi-mr-0 gi-grid-responsive">
+      <div className="gi-grid-responsive">
         <div className="gi-col-span-4 md:gi-col-span-4 lg:gi-col-span-3">
           <SectionBreak color="gi-border-gray-100" size="md" />
           <h3 className="gi-heading-sm gi-mb-4">Services</h3>

packages/react/ds/src/footer/footer.test.tsx

@@ -7,7 +7,9 @@ describe('Footer', () => {
     render(<Footer {...props} />);
 
   it('should render the footer with default props', () => {
-    renderFooter({});
+    renderFooter({
+      dataTestid: 'govie-footer',
+    });
 
     const footer = screen.getByRole('contentinfo');
     expect(footer).toBeInTheDocument();
@@ -23,24 +25,6 @@ describe('Footer', () => {
     expect(footer).toHaveClass('gi-footer custom-class');
   });
 
-  it('should render with custom logo component', () => {
-    const CustomLogo = () => <div data-testid="custom-logo">Custom Logo</div>;
-    renderFooter({ logoComponent: <CustomLogo /> });
-
-    expect(screen.getByTestId('custom-logo')).toBeInTheDocument();
-  });
-
-  it('should render primary slot when provided', () => {
-    const primaryContent = (
-      <div data-testid="primary-content">Primary Content</div>
-    );
-    renderFooter({ primarySlot: primaryContent });
-
-    const primaryNav = screen.getByLabelText('Primary footer navigation');
-    expect(primaryNav).toBeInTheDocument();
-    expect(screen.getByTestId('primary-content')).toBeInTheDocument();
-  });
-
   it('should not render primary nav when primarySlot is not provided', () => {
     renderFooter({});
 

packages/react/ds/src/footer/footer.tsx

@@ -1,25 +1,70 @@
+'use client';
 import { ReactNode } from 'react';
 import GovieLogoHarpWithText from '../assets/logos/gov-of-ireland/harp-gold-text-green.js';
+import GovieLogoHarp from '../assets/logos/harp/harp-white.js';
 import { SectionBreak } from '../section-break/section-break.js';
+import Anchor from '../primitives/anchor.js';
+import { LogoProps } from '../common/types.js';
+import { renderToStaticMarkup } from 'react-dom/server';
 
 export type FooterProps = {
   primarySlot?: ReactNode;
   secondarySlot?: ReactNode;
   utilitySlot?: ReactNode;
-  logoComponent?: ReactNode;
+  logo?: LogoProps;
   className?: string;
   dataTestid?: string;
 } & React.HTMLAttributes<HTMLDivElement>;
 
+function getLogo({ logo }: FooterProps) {
+  const svgMobileString = btoa(renderToStaticMarkup(<GovieLogoHarp />));
+  const svgDataUriMobile = `data:image/svg+xml;base64,${svgMobileString}`;
+  const svgDesktopString = btoa(
+    renderToStaticMarkup(<GovieLogoHarpWithText />),
+  );
+  const svgDataUriDesktop = `data:image/svg+xml;base64,${svgDesktopString}`;
+
+  return (
+    <picture>
+      <source
+        srcSet={logo?.imageLarge || svgDataUriDesktop}
+        media="(min-width: 640px)"
+      />
+      <img
+        className={'gi-h-10 sm:gi-h-14'}
+        src={logo?.imageSmall || svgDataUriMobile}
+        alt={logo?.alt || 'Gov.ie logo'}
+      />
+    </picture>
+  );
+}
+
 export function Footer({
   primarySlot,
   secondarySlot,
   utilitySlot,
-  logoComponent = <GovieLogoHarpWithText />,
+  logo,
   className = '',
   dataTestid,
   ...props
 }: FooterProps) {
+  const renderLogo = () => {
+    return (
+      <>
+        {logo?.href && (
+          <Anchor
+            href={logo.href}
+            aria-label="Go to the home page"
+            data-testid={`logo-link`}
+            external={logo.external}
+          >
+            {getLogo({ logo })}
+          </Anchor>
+        )}
+        {!logo?.href && getLogo({ logo })}
+      </>
+    );
+  };
   return (
     <footer
       className={`gi-footer ${className}`}
@@ -47,13 +92,11 @@ export function Footer({
             aria-label="Secondary footer navigation"
           >
             <div className="gi-footer-secondary-content">{secondarySlot}</div>
-            <div className="gi-footer-logo">{logoComponent}</div>
+            <div className="gi-footer-logo">{renderLogo()}</div>
           </div>
         )}
 
-        {!secondarySlot && (
-          <div className="gi-footer-logo">{logoComponent}</div>
-        )}
+        {!secondarySlot && <div className="gi-footer-logo">{renderLogo()}</div>}
       </div>
       {utilitySlot && (
         <div className="gi-footer-utility" aria-label="Utility links">

packages/react/ds/src/header/types.ts

@@ -1,3 +1,4 @@
+import { LogoProps } from '../common/types.js';
 import { DrawerPosition } from '../drawer/drawer.js';
 import { IconId } from '../icon/icon.js';
 
@@ -57,13 +58,7 @@ export type HeaderItem = CommonProps & ConditionalProps;
 
 export type HeaderProps = {
   title?: string;
-  logo?: {
-    imageSmall?: string;
-    imageLarge?: string;
-    href?: string;
-    external?: boolean;
-    alt?: string;
-  };
+  logo?: LogoProps;
   addDefaultMobileMenu?: boolean;
   mobileMenuLabel?: string;
   items?: HeaderItem[];