@comicrelief/component-library 8.54.0 → 8.55.0

package/src/components/Organisms/Header2026/Navs/PrimaryNavItem.style.js

@@ -0,0 +1,658 @@
+import styled, { css } from 'styled-components';
+
+import Link from '../../../Atoms/Link/Link';
+import zIndex from '../../../../theme/shared/zIndex';
+import Text from '../../../Atoms/Text/Text';
+import arrowIcon from '../assets/arrow-icon.svg';
+
+const transitionDuration = 0.2;
+
+const NavLinkClass = styled(Link)`
+  display: inline-block;
+  border: 0;
+  padding: 20px 25px;
+  line-height: 1rem;
+  height: auto;
+  font-weight: 600;
+  width: 100%;
+  color: ${({ theme }) => theme.color('black')};
+  transition: color ${transitionDuration}s ease;
+  text-decoration: none;
+  outline-offset: -3px;
+
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    outline-offset: 0;
+  }
+
+  :hover,
+  :focus,
+  :focus-within {
+    border: 0;
+  }
+
+  :hover,
+  :focus {
+    color: ${({ theme }) => theme.color('red')};
+    background-color: ${({ theme }) => theme.color('grey_extra_light')};
+    font-weight: 600;
+  }
+
+  :focus-within {
+    // Reset the colour of a parent...
+    background-color: ${({ theme }) => theme.color('white')};
+
+    // ...unless it's also being hovered
+    &:hover {
+      background-color: ${({ theme }) => theme.color('grey_extra_light')};
+    }
+  }
+`;
+
+const SecondaryNavMenu = styled.ul`
+  display: flex;
+  padding: 0;
+  list-style: none outside;
+  left: 0;
+  top: 0;
+
+  position: absolute;
+  width: 100%;
+  ${zIndex('higher')};
+
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ theme }) => theme.color('white')};
+  border-top: 1px solid ${({ theme }) => theme.color('grey_medium')};
+
+  /* Mobile slide-in animation */
+  transform: ${({ isSubMenuOpen }) => (isSubMenuOpen ? 'translateX(0)' : 'translateX(100%)')};
+  transition: transform 0.15s ease-out;
+  visibility: ${({ isSubMenuOpen }) => (isSubMenuOpen ? 'visible' : 'hidden')};
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05);
+
+  /* Remove border from first item only on mobile */
+  > div:first-of-type > li:first-of-type {
+    border-top: none;
+  }
+
+  /* When tertiary menu is open, hide the entire secondary menu on mobile */
+  ${({ isTertiaryOpen }) => isTertiaryOpen && css`
+    display: none;
+  `}
+
+  /* First link rounded corners to match menu */
+  > li:first-of-type > a {
+    border-radius: 16px 16px 0 0;
+  }
+
+  /* Last link rounded corners to match menu */
+  > div:last-of-type > li:last-of-type > a {
+    border-radius: 0 0 16px 16px;
+  }
+
+  // DESKTOP:
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    background-color: ${({ theme }) => theme.color('white')};
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    width: 100%;
+    height: auto;
+    padding: 8px 0 0 0;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    border-radius: 0 0 25px 25px;
+    overflow: visible;
+    transition: opacity 0.4s linear, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    transform: scaleY(0);
+    transform-origin: top;
+    opacity: 0;
+    visibility: hidden;
+    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05);
+    align-items: stretch;
+
+    // Invisible bridge above dropdown to maintain hover state
+    &::before {
+      content: '';
+      position: absolute;
+      top: -20px;
+      left: 0;
+      width: 100%;
+      height: 20px;
+      background: transparent;
+    }
+  }
+`;
+
+const ColumnWrapper = styled.div`
+  display: contents;
+
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    border-right: 1px solid ${({ theme }) => theme.color('grey_medium')};
+    opacity: 0;
+    transform: translateY(-10px);
+    transition: opacity 0.3s ease-out 0.15s, transform 0.3s ease-out 0.15s;
+    overflow: hidden;
+    padding-top: 3px;
+
+    &:last-of-type {
+      border-right: none;
+    }
+  }
+`;
+
+const SecondaryNavItem = styled.li`
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  border-top: 1px solid ${({ theme }) => theme.color('grey_medium')};
+  position: relative;
+  transition: background-color ${transitionDuration}s ease;
+
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    height: auto;
+    border-top: none;
+
+    span {
+      font-weight: ${({ $isSecondary }) => ($isSecondary ? 700 : 500)};
+    }
+
+    ${({ $isSecondary }) => $isSecondary && css`
+      border-top: 1px solid ${({ theme }) => theme.color('grey_medium')};
+      margin-top: 8px;
+      padding-top: 8px;
+
+      &:first-of-type {
+        border-top: none;
+        margin-top: 0;
+        padding-top: 0;
+      }
+    `}
+  }
+`;
+
+const SecondaryNavLink = styled(NavLinkClass)`
+  padding: 20px 25px 20px 42px;
+  color: ${({ theme }) => theme.color('black')};
+  height: auto;
+  position: relative;
+
+  span {
+    font-weight: 600;
+  }
+
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    padding: 12px 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 1rem;
+    transform: translateX(0);
+    transition: transform 0.35s cubic-bezier(0.34, 2.12, 0.64, 1);
+
+    span {
+      font-size: 1rem;
+      font-weight: ${({ $isSecondary }) => ($isSecondary ? 700 : 500)};
+    }
+
+    &:hover:not(:focus-visible) {
+      background-color: transparent;
+      transform: translateX(5px);
+      transition: transform 0.35s cubic-bezier(0.34, 2.12, 0.64, 1);
+    }
+
+    &:focus-visible {
+      background-color: transparent;
+      transform: translateX(0);
+    }
+
+    &::after {
+      content: '';
+      width: 12px;
+      height: 12px;
+      mask-image: url(${arrowIcon});
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      mask-position: center;
+      -webkit-mask-image: url(${arrowIcon});
+      -webkit-mask-size: contain;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: center;
+      background-color: ${({ theme }) => theme.color('red')};
+      opacity: 0;
+      transition: opacity 0.15s ease-out;
+    }
+
+    &:hover::after,
+    &:focus::after {
+      opacity: 1;
+    }
+  }
+
+`;
+
+const NavLink = styled(NavLinkClass)`
+  font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)};
+
+  ${({ isExpanded, theme }) => (isExpanded && css`
+    &,
+    &:hover,
+    &:focus-within,
+    &:focus {
+      color: ${theme.color('red')};
+    }
+  `)}
+
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    height: auto;
+
+    :hover, :focus-within, :focus {
+      + ${SecondaryNavMenu} {
+      display: flex;
+      opacity: 1;
+    }}
+
+    ${({ hasSubMenu }) => (hasSubMenu && css`
+      padding: 10px 16px 10px 0;
+    `)}
+  }
+`;
+
+const DesktopNavLink = styled(NavLink)`
+  &,
+  &:hover,
+  &:focus,
+  &:focus-within {
+    background-color: ${({ theme }) => theme.color('white')};
+  }
+`;
+
+const StyledNavItem = styled.li`
+  ${zIndex('medium')};
+  position: static;
+  font-weight: 700;
+  border-top: 1px solid ${({ theme }) => theme.color('grey_medium')};
+
+  &:first-of-type {
+    border-top: none;
+
+    /* First link rounded corners to match menu */
+    > a {
+      border-radius: 16px 16px 0 0;
+    }
+  }
+
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    border-top: none;
+
+    &:first-of-type > a {
+      border-radius: 0;
+    }
+  }
+
+  li {
+    span {
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+
+    :hover,
+    :focus,
+    :focus-within {
+      span {
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+    }
+  }
+
+  // Chevron icon:
+  span > a > div {
+    opacity: 1;
+    transition: opacity 0.3s ease-out;
+  }
+
+  :hover,
+  :focus,
+  :focus-within {
+    li {
+      span {
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+    }
+
+    // Chevron icon colour:
+    span > a {
+      color: ${({ theme }) => theme.color('red')};
+      > div {
+        opacity: 1;
+        img {
+          filter: invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);
+        }
+      }
+    }
+  }
+
+
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+
+    // Chevron icon rotation - desktop only:
+    :hover,
+    :focus,
+    :focus-within {
+      span > a > div {
+        transform: rotate(-180deg);
+      }
+    }
+    height: 100%;
+    display: flex;
+    align-items: center;
+    border-bottom: none;
+    position: static;
+
+    :hover,
+    :focus,
+    :focus-within {
+      > ${SecondaryNavMenu}, :focus-within > ${SecondaryNavMenu} {
+        visibility: visible;
+        opacity: 1;
+        display: grid;
+        transform: scaleY(1);
+
+        ${ColumnWrapper} {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    }
+
+    // Base state for span with pseudo-element border at bottom of header
+    > span {
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -14px;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: ${({ theme }) => theme.color('red')};
+        transform: scaleX(0);
+        transform-origin: center;
+        transition: transform 0.3s ease-out;
+      }
+    }
+
+    :hover,
+    :focus,
+    :focus-within {
+      background-color: transparent;
+      ${zIndex('high')};
+
+      > span::after {
+        transform: scaleX(1);
+        transition: transform 0.15s ease-out;
+      }
+    }
+  }
+`;
+
+const ChevronWrapper = styled.div`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 30px;
+  width: 8px;
+
+  img {
+    width: 100%;
+    display: block;
+    height: auto;
+    @media ${({ theme }) => theme.breakpoints2026('L')} {
+      transform: rotate(90deg);
+      filter: brightness(0);
+    }
+  }
+
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    top: 12px;
+    transform: none;
+    right: 0;
+    width: 7px;
+  }
+`;
+
+const StyledText = styled(Text)`
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    font-size: 1rem;
+  }
+`;
+
+/**
+ * Tertiary Navigation Menu (3rd level) - separate sibling to SecondaryNavMenu
+ */
+const TertiaryNavMenu = styled.ul`
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  list-style: none outside;
+  width: 100%;
+  ${zIndex('higher')};
+
+  background-color: ${({ theme }) => theme.color('white')};
+
+  /* When closed: absolute and off-screen. When open: relative for dynamic height */
+  position: ${({ isOpen }) => (isOpen ? 'relative' : 'absolute')};
+  left: 0;
+  top: 0;
+
+  /* Mobile slide-in animation */
+  transform: ${({ isOpen }) => (isOpen ? 'translateX(0)' : 'translateX(100%)')};
+  transition: transform 0.15s ease-out;
+  visibility: ${({ isOpen }) => (isOpen ? 'visible' : 'hidden')};
+  border-radius: 16px;
+  overflow: hidden;
+  border-top: 1px solid ${({ theme }) => theme.color('grey_medium')};
+  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05);
+
+  /* First link rounded corners to match menu */
+  > li:first-of-type > a {
+    border-radius: 16px 16px 0 0;
+  }
+
+  /* Last link rounded corners to match menu */
+  > li:last-of-type > a {
+    border-radius: 0 0 16px 16px;
+  }
+
+  // hide on desktop
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    display: none;
+  }
+`;
+
+/**
+ * Tertiary Nav Item
+ */
+const TertiaryNavItem = styled.li`
+  padding: 0;
+  height: auto;
+  width: 100%;
+  flex: 0 0 auto;
+  border-top: 1px solid ${({ theme }) => theme.color('grey_medium')};
+  position: relative;
+  transition: background-color ${transitionDuration}s ease;
+
+  &:first-of-type {
+    border-top: none;
+  }
+
+
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    span {
+      font-weight: 100;
+    }
+  }
+`;
+
+/**
+ * Tertiary menu link item
+ */
+const TertiaryNavLink = styled(NavLinkClass)`
+  padding: 20px 25px 20px 42px;
+  color: ${({ theme }) => theme.color('black')};
+  height: auto;
+  position: relative;
+
+  span {
+    font-weight: ${({ $isParent }) => ($isParent ? 600 : 500)};
+  }
+`;
+
+/**
+ * Secondary link with nested children - adds chevron styling
+ */
+const SecondaryNavLinkWithChildren = styled(SecondaryNavLink)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 30px;
+`;
+
+/**
+ * Chevron for secondary nav items with children
+ */
+const SecondaryChevronWrapper = styled.div`
+  width: 8px;
+  flex-shrink: 0;
+
+  img {
+    width: 100%;
+    display: block;
+    height: auto;
+  }
+`;
+
+/**
+ * Nav Card for column 3 (desktop only)
+ */
+const NavCard = styled.a`
+  display: none;
+
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 12px;
+    text-decoration: none;
+    color: ${({ theme }) => theme.color('black')};
+    padding: 16px 20px;
+    outline-offset: -3px;
+    transform: translateX(0);
+    transition: transform 0.35s cubic-bezier(0.34, 2.12, 0.64, 1);
+
+    &:hover:not(:focus-visible) {
+      transform: translateX(5px);
+    }
+
+    &:focus-visible {
+      transform: translateX(0);
+    }
+  }
+`;
+
+const NavCardImage = styled.div`
+  flex-shrink: 0;
+  width: 80px;
+  height: 80px;
+  border-radius: 6px;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+`;
+
+const NavCardContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+
+const NavCardTitle = styled.span`
+  display: block;
+  font-family: Montserrat, sans-serif;
+  font-weight: 700;
+  font-size: 16px;
+  margin-bottom: 4px;
+  color: ${({ theme }) => theme.color('black')};
+`;
+
+const NavCardDescription = styled.span`
+  display: block;
+  font-family: Montserrat, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  color: ${({ theme }) => theme.color('grey_dark')};
+  line-height: 1.4;
+`;
+
+/**
+ * Primary link shown at top of secondary menu (mobile only)
+ */
+const SecondaryMenuPrimaryLink = styled.li`
+  padding: 0;
+  width: 100%;
+  border-bottom: 1px solid ${({ theme }) => theme.color('grey_medium')};
+  display: block;
+
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    display: none;
+  }
+`;
+
+const SecondaryMenuPrimaryLinkAnchor = styled(NavLinkClass)`
+  padding: 20px 25px 20px 42px;
+  color: ${({ theme }) => theme.color('black')};
+  height: auto;
+  position: relative;
+
+  span {
+    font-weight: 600;
+  }
+`;
+
+export {
+  StyledNavItem,
+  NavLink,
+  DesktopNavLink,
+  SecondaryNavMenu,
+  SecondaryNavItem,
+  SecondaryNavLink,
+  SecondaryNavLinkWithChildren,
+  SecondaryChevronWrapper,
+  ChevronWrapper,
+  StyledText,
+  ColumnWrapper,
+  TertiaryNavMenu,
+  TertiaryNavItem,
+  TertiaryNavLink,
+  NavCard,
+  NavCardImage,
+  NavCardContent,
+  NavCardTitle,
+  NavCardDescription,
+  SecondaryMenuPrimaryLink,
+  SecondaryMenuPrimaryLinkAnchor
+};

package/src/components/Organisms/Header2026/Navs/arrow.svg

@@ -0,0 +1,6 @@
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 96 96"
+  >
+    <path transform="rotate(-180 47.998626708984375,48.00019836425781) " id="arrow" d="m90.871,50.776c-0.016,0.016 -0.026,0.036 -0.043,0.052l-32,32c-0.781,0.781 -1.804,1.172 -2.828,1.172s-2.047,-0.391 -2.829,-1.171a4,4 0 0 1 0,-5.657l25.172,-25.172l-70.343,0a4,4 0 0 1 0,-8l70.343,0l-25.172,-25.171a4,4 0 0 1 5.657,-5.657l32,32c0.016,0.016 0.027,0.036 0.043,0.052c0.167,0.172 0.321,0.357 0.455,0.557c0.069,0.104 0.118,0.216 0.176,0.325c0.065,0.121 0.138,0.236 0.191,0.364c0.057,0.137 0.09,0.279 0.13,0.42c0.032,0.109 0.074,0.214 0.097,0.327a4.017,4.017 0 0 1 0,1.568c-0.023,0.113 -0.065,0.217 -0.097,0.327c-0.041,0.141 -0.074,0.283 -0.13,0.42c-0.053,0.128 -0.126,0.243 -0.191,0.364c-0.059,0.109 -0.107,0.221 -0.176,0.325a4.035,4.035 0 0 1 -0.455,0.555z" />
+</svg>

package/src/components/Organisms/Header2026/Navs/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
+</svg>

package/src/components/Organisms/Header2026/assets/arrow-icon.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.90332 1.9823C3.07723 0.742637 4.69728 -0.657921 5.80469 0.338745L9.93164 4.05261C10.4907 4.55574 10.4906 5.43223 9.93164 5.93542L5.80469 9.65027C4.69721 10.647 3.07684 9.24546 3.90332 8.00574L5.06641 6.26062H1.26758C0.56802 6.26062 6.11573e-08 5.69358 0 4.99402C0.000188457 4.29478 0.567384 3.72768 1.2666 3.72742H5.06641L3.90332 1.9823Z" fill="black"/>
+</svg>

package/src/components/Organisms/Header2026/assets/chevron-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 11" fill="none">
+  <path d="M6.40115 4.14768C6.97328 4.66259 6.97328 5.55972 6.40115 6.07463L2.1777 9.87573C1.04437 10.8957 -0.613719 9.46189 0.232052 8.19324L1.80744 5.83015C2.09771 5.39475 2.09771 4.82752 1.80744 4.39212L0.232089 2.02909C-0.613683 0.760435 1.04442 -0.673391 2.17774 0.346605L6.40115 4.14768Z" fill="black"/>
+</svg>

package/src/components/Organisms/Header2026/assets/search-icon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <g clip-path="url(#clip0_4311_2166)">
+    <path d="M16.776 13.413C16.3074 12.9444 14.8304 11.8539 13.3639 11.0094C13.348 11.0333 13.3322 11.0571 13.3162 11.0836C14.9707 8.41798 14.6451 4.86827 12.3289 2.5521C9.62889 -0.145255 5.2533 -0.145255 2.5533 2.5521C-0.146696 5.25474 -0.144049 9.62768 2.5533 12.3277C4.8483 14.6201 8.35036 14.9668 11.008 13.3627C11.773 14.6915 12.8874 16.2507 13.4142 16.7774C14.3407 17.7039 15.8495 17.7012 16.776 16.7748C17.7024 15.8456 17.7024 14.3421 16.776 13.413ZM10.5077 10.5065C8.81363 12.198 6.07127 12.198 4.37715 10.5039C2.68568 8.81239 2.68304 6.07004 4.37715 4.37592C6.06862 2.68445 8.81363 2.68445 10.5051 4.37592C12.1992 6.07004 12.1992 8.81504 10.5077 10.5065Z" fill="black"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_4311_2166">
+      <rect width="18" height="18" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/components/Organisms/Header2026/header2026.test.js

@@ -0,0 +1,22 @@
+// import React from 'react';
+import 'jest-styled-components';
+// import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
+// import Header from './Header';
+
+// import data from './data/data';
+// import Link from '../../Atoms/Link/Link';
+
+it('renders correctly', () => {
+  // const tree = renderWithTheme(
+  //   <Header
+  //     navItems={data}
+  //     metaIcons={
+  //       <Link color="green" type="button" href="/donation">
+  //         Donate
+  //       </Link>
+  //     }
+  //   />
+  // ).toJSON();
+
+  // expect(tree).toMatchSnapshot();
+});