uikit-react-public 0.40.0 → 0.40.2

package/lib/components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Footer > snapshot: footer links provided 1`] = `
 <footer
-  class="ucl-uikit-footer css-aro7ng"
+  class="ucl-uikit-footer css-mq639a"
   data-testid="ucl-uikit-footer"
 >
   <div
@@ -15,7 +15,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
       class="css-1h8jsb3"
     >
       <svg
-        class="css-lo1jj5"
+        class="css-2wjlk2"
         fill="currentColor"
         height="40"
         viewBox="0 0 157 40"
@@ -34,7 +34,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
       >
         <a
           aria-label="Facebook"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.facebook.com/uclofficial/"
           target="_blank"
@@ -60,7 +60,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="Flickr"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.flickr.com/groups/ucl/"
           target="_blank"
@@ -86,7 +86,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="TikTok"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.tiktok.com/@uclofficial"
           target="_blank"
@@ -112,7 +112,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="YouTube"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.youtube.com/ucltv"
           target="_blank"
@@ -138,7 +138,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="SoundCloud"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://soundcloud.com/uclsound"
           target="_blank"
@@ -166,7 +166,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="X social media platform"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://x.com/ucl"
           target="_blank"
@@ -192,7 +192,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="Instagram"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.instagram.com/ucl/"
           target="_blank"
@@ -227,7 +227,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
       role="separator"
     />
     <div
-      class="css-1qgjvo4"
+      class="css-1ah386p"
     >
       <span
         class="css-13yf1i2"
@@ -252,7 +252,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
       class="css-1k5afze"
     >
       <a
-        class="css-o22h86"
+        class="css-16lix8i"
         href="https://dictionary.cambridge.org/dictionary/english/disclaimer"
         rel="noopener noreferrer"
         target="_blank"
@@ -260,7 +260,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         Disclaimer
       </a>
       <a
-        class="css-o22h86"
+        class="css-16lix8i"
         href="https://www.legislation.gov.uk/ukpga/2000/36/contents"
         rel="noopener noreferrer"
         target="_blank"
@@ -268,7 +268,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         Freedom of Information
       </a>
       <a
-        class="css-o22h86"
+        class="css-16lix8i"
         href="https://developer.mozilla.org/en-US/docs/Web/Accessibility"
         rel="noopener noreferrer"
         target="_blank"
@@ -276,7 +276,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         Accessibility
       </a>
       <a
-        class="css-o22h86"
+        class="css-16lix8i"
         href="https://en.wikipedia.org/wiki/HTTP_cookie"
         rel="noopener noreferrer"
         target="_blank"
@@ -284,7 +284,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         Cookies
       </a>
       <a
-        class="css-o22h86"
+        class="css-16lix8i"
         href="https://dictionary.cambridge.org/dictionary/english/privacy"
         rel="noopener noreferrer"
         target="_blank"
@@ -292,7 +292,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         Privacy
       </a>
       <a
-        class="css-o22h86"
+        class="css-16lix8i"
         href="https://modern-slavery-statement-registry.service.gov.uk/"
         rel="noopener noreferrer"
         target="_blank"
@@ -306,7 +306,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
 
 exports[`Footer > snapshot: nav links 1`] = `
 <footer
-  class="ucl-uikit-footer css-aro7ng"
+  class="ucl-uikit-footer css-mq639a"
   data-testid="ucl-uikit-footer"
 >
   <div
@@ -325,14 +325,14 @@ exports[`Footer > snapshot: nav links 1`] = `
           Category 1
         </h3>
         <a
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-1w73vrx"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-nsraf"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
           Item 1
         </a>
         <a
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-1w73vrx"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-nsraf"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
@@ -349,14 +349,14 @@ exports[`Footer > snapshot: nav links 1`] = `
           Category 2
         </h3>
         <a
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-1w73vrx"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-nsraf"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
           Item 1
         </a>
         <a
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-1w73vrx"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-nsraf"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
@@ -368,7 +368,7 @@ exports[`Footer > snapshot: nav links 1`] = `
       class="css-1h8jsb3"
     >
       <svg
-        class="css-lo1jj5"
+        class="css-2wjlk2"
         fill="currentColor"
         height="40"
         viewBox="0 0 157 40"
@@ -387,7 +387,7 @@ exports[`Footer > snapshot: nav links 1`] = `
       >
         <a
           aria-label="Facebook"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.facebook.com/uclofficial/"
           target="_blank"
@@ -413,7 +413,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="Flickr"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.flickr.com/groups/ucl/"
           target="_blank"
@@ -439,7 +439,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="TikTok"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.tiktok.com/@uclofficial"
           target="_blank"
@@ -465,7 +465,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="YouTube"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.youtube.com/ucltv"
           target="_blank"
@@ -491,7 +491,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="SoundCloud"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://soundcloud.com/uclsound"
           target="_blank"
@@ -519,7 +519,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="X social media platform"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://x.com/ucl"
           target="_blank"
@@ -545,7 +545,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="Instagram"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.instagram.com/ucl/"
           target="_blank"
@@ -580,7 +580,7 @@ exports[`Footer > snapshot: nav links 1`] = `
       role="separator"
     />
     <div
-      class="css-1qgjvo4"
+      class="css-1ah386p"
     >
       <span
         class="css-13yf1i2"
@@ -605,7 +605,7 @@ exports[`Footer > snapshot: nav links 1`] = `
       class="css-1k5afze"
     >
       <a
-        class="css-o22h86"
+        class="css-16lix8i"
         href="https://www.ucl.ac.uk/legal-services/disclaimer"
         rel="noopener noreferrer"
         target="_blank"
@@ -613,7 +613,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         Disclaimer
       </a>
       <a
-        class="css-o22h86"
+        class="css-16lix8i"
         href="https://www.ucl.ac.uk/foi"
         rel="noopener noreferrer"
         target="_blank"
@@ -621,7 +621,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         Freedom of Information
       </a>
       <a
-        class="css-o22h86"
+        class="css-16lix8i"
         href="https://www.ucl.ac.uk/accessibility"
         rel="noopener noreferrer"
         target="_blank"
@@ -629,7 +629,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         Accessibility
       </a>
       <a
-        class="css-o22h86"
+        class="css-16lix8i"
         href="https://www.ucl.ac.uk/legal-services/privacy/cookie-policy"
         rel="noopener noreferrer"
         target="_blank"
@@ -637,7 +637,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         Cookies
       </a>
       <a
-        class="css-o22h86"
+        class="css-16lix8i"
         href="https://www.ucl.ac.uk/legal-services/privacy"
         rel="noopener noreferrer"
         target="_blank"
@@ -645,7 +645,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         Privacy
       </a>
       <a
-        class="css-o22h86"
+        class="css-16lix8i"
         href="https://www.ucl.ac.uk/commercial-procurement/modern-day-slavery-statement"
         rel="noopener noreferrer"
         target="_blank"
@@ -659,7 +659,7 @@ exports[`Footer > snapshot: nav links 1`] = `
 
 exports[`Footer > snapshot: no nav links 1`] = `
 <footer
-  class="ucl-uikit-footer css-aro7ng"
+  class="ucl-uikit-footer css-mq639a"
   data-testid="ucl-uikit-footer"
 >
   <div
@@ -672,7 +672,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
       class="css-1h8jsb3"
     >
       <svg
-        class="css-lo1jj5"
+        class="css-2wjlk2"
         fill="currentColor"
         height="40"
         viewBox="0 0 157 40"
@@ -691,7 +691,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
       >
         <a
           aria-label="Facebook"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.facebook.com/uclofficial/"
           target="_blank"
@@ -717,7 +717,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="Flickr"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.flickr.com/groups/ucl/"
           target="_blank"
@@ -743,7 +743,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="TikTok"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.tiktok.com/@uclofficial"
           target="_blank"
@@ -769,7 +769,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="YouTube"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.youtube.com/ucltv"
           target="_blank"
@@ -795,7 +795,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="SoundCloud"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://soundcloud.com/uclsound"
           target="_blank"
@@ -823,7 +823,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="X social media platform"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://x.com/ucl"
           target="_blank"
@@ -849,7 +849,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="Instagram"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-cwywro"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-jzc7ug"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.instagram.com/ucl/"
           target="_blank"
@@ -884,7 +884,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
       role="separator"
     />
     <div
-      class="css-1qgjvo4"
+      class="css-1ah386p"
     >
       <span
         class="css-13yf1i2"
@@ -909,7 +909,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
       class="css-1k5afze"
     >
       <a
-        class="css-o22h86"
+        class="css-16lix8i"
         href="https://www.ucl.ac.uk/legal-services/disclaimer"
         rel="noopener noreferrer"
         target="_blank"
@@ -917,7 +917,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         Disclaimer
       </a>
       <a
-        class="css-o22h86"
+        class="css-16lix8i"
         href="https://www.ucl.ac.uk/foi"
         rel="noopener noreferrer"
         target="_blank"
@@ -925,7 +925,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         Freedom of Information
       </a>
       <a
-        class="css-o22h86"
+        class="css-16lix8i"
         href="https://www.ucl.ac.uk/accessibility"
         rel="noopener noreferrer"
         target="_blank"
@@ -933,7 +933,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         Accessibility
       </a>
       <a
-        class="css-o22h86"
+        class="css-16lix8i"
         href="https://www.ucl.ac.uk/legal-services/privacy/cookie-policy"
         rel="noopener noreferrer"
         target="_blank"
@@ -941,7 +941,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         Cookies
       </a>
       <a
-        class="css-o22h86"
+        class="css-16lix8i"
         href="https://www.ucl.ac.uk/legal-services/privacy"
         rel="noopener noreferrer"
         target="_blank"
@@ -949,7 +949,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         Privacy
       </a>
       <a
-        class="css-o22h86"
+        class="css-16lix8i"
         href="https://www.ucl.ac.uk/commercial-procurement/modern-day-slavery-statement"
         rel="noopener noreferrer"
         target="_blank"

package/lib/components/Header/Header.tsx

@@ -1,9 +1,10 @@
 import { memo, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
-import { useTheme } from '../..';
+import { themes, useTheme } from '../../theme';
 import UclLogo from '../UclLogo/UclLogo';
 import HeaderMenu from './HeaderMenu';
 import Link from '../Link';
+import HeaderNew from '../HeaderNew';
 
 export const NAME = 'ucl-uikit-header';
 export const HEADER_DESKTOP_HEIGHT_PX = 72;
@@ -12,17 +13,19 @@ export const DEFAULT_Z_INDEX = 3;
 
 export interface HeaderProps extends HTMLAttributes<HTMLElement> {
   title?: string;
+  /** @deprecated Only used by the default-theme legacy Header. */
   fixed?: boolean;
   titleAs?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
   titleClassName?: string;
   titleProps?: Record<string, unknown>;
   homeLinkHref?: string;
   homeLinkProps?: Record<string, unknown>;
+  /** @deprecated Use `homeLinkProps={{ 'aria-label': '...' }}` instead. */
   homeLinkAriaLabel?: string;
   testId?: string;
 }
 
-const Header = ({
+const LegacyHeader = ({
   title,
   fixed = false,
   titleAs = 'div',
@@ -40,14 +43,14 @@ const Header = ({
   const headerTitle = theme.typography.heading.lg.md;
 
   const baseStyle = css`
-    background-color: ${theme.colour.surface.default};
+    background-color: ${theme.color.neutral.white};
     font-synthesis: none;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     position: relative;
-    background-color: ${theme.colour.surface.inverseBrandPrimary};
-    color: ${theme.colour.text.brandInverse};
+    background-color: ${theme.color.neutral.grey90};
+    color: ${theme.color.text.inverted};
     display: flex;
     justify-content: center;
     align-items: center;
@@ -159,15 +162,77 @@ const Header = ({
   );
 };
 
+const Header = ({
+  title,
+  titleAs = 'div',
+  titleClassName,
+  titleProps,
+  homeLinkHref,
+  homeLinkProps,
+  homeLinkAriaLabel,
+  testId = NAME,
+  className,
+  children,
+  fixed,
+  ...props
+}: HeaderProps) => {
+  const [theme] = useTheme();
+
+  if (theme === themes.default) {
+    return (
+      <LegacyHeader
+        title={title}
+        fixed={fixed}
+        titleAs={titleAs}
+        titleClassName={titleClassName}
+        titleProps={titleProps}
+        homeLinkHref={homeLinkHref}
+        homeLinkProps={homeLinkProps}
+        homeLinkAriaLabel={homeLinkAriaLabel}
+        testId={testId}
+        className={className}
+        {...props}
+      >
+        {children}
+      </LegacyHeader>
+    );
+  }
+
+  const resolvedHomeLinkProps =
+    homeLinkAriaLabel && !homeLinkProps?.['aria-label']
+      ? { ...homeLinkProps, 'aria-label': homeLinkAriaLabel }
+      : homeLinkProps;
+
+  return (
+    <HeaderNew
+      title={title ?? ''}
+      titleAs={titleAs}
+      titleClassName={titleClassName}
+      titleProps={titleProps}
+      homeLinkHref={homeLinkHref}
+      homeLinkProps={resolvedHomeLinkProps}
+      testId={testId}
+      className={className}
+      {...props}
+    >
+      {children}
+    </HeaderNew>
+  );
+};
+
 const MemoAppHeader = memo(Header);
 
 export interface IHeaderSubComponents {
   Menu: typeof HeaderMenu;
+  MenuContainer: (typeof HeaderNew)['MenuContainer'];
+  Item: (typeof HeaderNew)['Item'];
 }
 
 const HeaderWithSubComponents = MemoAppHeader as typeof MemoAppHeader &
   IHeaderSubComponents;
 
 HeaderWithSubComponents.Menu = HeaderMenu;
+HeaderWithSubComponents.MenuContainer = HeaderNew.MenuContainer;
+HeaderWithSubComponents.Item = HeaderNew.Item;
 
 export default HeaderWithSubComponents;

package/lib/components/Header/__tests__/Header.test.tsx

@@ -39,4 +39,54 @@ describe('Header', () => {
     expect(link).toBeInTheDocument();
     expect(link.getAttribute('href')).toBe('/');
   });
+
+  test('uses the legacy header for the default theme', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Header title='LIDS'>
+          <Header.Menu testId='legacy-header-menu'>Menu</Header.Menu>
+        </Header>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByTestId('legacy-header-menu')).toBeInTheDocument();
+    expect(
+      renderResult.container.querySelector('.ucl-uikit-header__border')
+    ).not.toBeInTheDocument();
+  });
+
+  test('uses the new header for light and dark themes', () => {
+    const renderResult = render(
+      <ThemeContextProvider theme='light'>
+        <Header title='LIDS'>
+          <Header.MenuContainer>
+            <Header.Item testId='new-header-item'>Item</Header.Item>
+          </Header.MenuContainer>
+        </Header>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByTestId('new-header-item')).toHaveClass(
+      'ucl-uikit-header__item'
+    );
+    expect(
+      renderResult.container.querySelector('.ucl-uikit-header__border')
+    ).toBeInTheDocument();
+  });
+
+  test('maps the deprecated homeLinkAriaLabel prop to the new header link props', () => {
+    render(
+      <ThemeContextProvider theme='dark'>
+        <Header
+          title='LIDS'
+          homeLinkHref='/'
+          homeLinkAriaLabel='Go home'
+        />
+      </ThemeContextProvider>
+    );
+
+    const link = screen.getByLabelText('Go home');
+    expect(link).toBeInTheDocument();
+    expect(link.getAttribute('href')).toBe('/');
+  });
 });

package/lib/components/Header/__tests__/__snapshots__/Header.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Header > snapshot: variant=avatar 1`] = `
 <header
-  class="ucl-uikit-header css-ijdzc5"
+  class="ucl-uikit-header css-ig7wqy"
   data-testid="ucl-uikit-header"
 >
   <svg
@@ -30,7 +30,7 @@ exports[`Header > snapshot: variant=avatar 1`] = `
 
 exports[`Header > snapshot: variant=breadcrumbs 1`] = `
 <header
-  class="ucl-uikit-header css-ijdzc5"
+  class="ucl-uikit-header css-ig7wqy"
   data-testid="ucl-uikit-header"
 >
   <svg

package/lib/components/HeaderDraft/HeaderBottomBreadcrumbs.tsx

@@ -17,10 +17,10 @@ const HeaderBottomBreadcrumbs = ({
   const [theme] = useTheme();
 
   const baseStyle = css`
-    color: ${theme.colour.text.default};
+    color: ${theme.color.text.primary};
     padding: ${theme.padding.p16} 60px;
     box-sizing: border-box;
-    border-bottom: 1px solid ${theme.colour.border.subtle};
+    border-bottom: 1px solid ${theme.color.neutral.grey15};
     font-size: ${theme.font.size.f14};
   `;