@comicrelief/component-library 8.54.0 → 8.55.0

package/dist/components/Organisms/Header2026/Header2026.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pageLinksPropTypes = exports.default = void 0;
+require("../../../utils/remove-extra-styles-in-preview.css");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _LogoNav = _interopRequireDefault(require("../../Atoms/LogoNav2026/_LogoNav2026"));
+var _Navs = _interopRequireDefault(require("./Navs/Navs"));
+var _Link = _interopRequireDefault(require("../../Atoms/Link/Link"));
+var _Header = require("./Header2026.style");
+var _searchIcon = _interopRequireDefault(require("./assets/search-icon.svg"));
+var _chevronIcon = _interopRequireDefault(require("./assets/chevron-icon.svg"));
+var _Icon = _interopRequireDefault(require("../../Atoms/SocialIcons/Icon/Icon"));
+var _urlHelper = _interopRequireDefault(require("../../../utils/urlHelper"));
+var _breakpoints = require("../../../theme/shared/breakpoints2026");
+const Header2026 = _ref => {
+  let {
+    data = {},
+    characterLimit = 60,
+    devMode = false,
+    ...rest
+  } = _ref;
+  const [isMenuOpen, setIsMenuOpen] = (0, _react.useState)(false);
+  const [isSubMenuOpen, setIsSubMenuOpen] = (0, _react.useState)(false);
+  const [isTertiaryMenuOpen, setIsTertiaryMenuOpen] = (0, _react.useState)(false);
+  const [tertiaryParentName, setTertiaryParentName] = (0, _react.useState)(null);
+  const closeSubMenusRef = (0, _react.useRef)(null);
+  const closeTertiaryRef = (0, _react.useRef)(null);
+  const handleSubMenuChange = (0, _react.useCallback)((isOpen, closeFunction) => {
+    setIsSubMenuOpen(isOpen);
+    closeSubMenusRef.current = closeFunction;
+  }, []);
+  const handleTertiaryMenuChange = (0, _react.useCallback)((isOpen, parentName, closeFunction) => {
+    setIsTertiaryMenuOpen(isOpen);
+    setTertiaryParentName(parentName);
+    closeTertiaryRef.current = closeFunction;
+  }, []);
+
+  // Prevent body scroll when mobile menu is open
+  (0, _react.useEffect)(() => {
+    document.body.style.overflow = isMenuOpen ? 'hidden' : '';
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isMenuOpen]);
+
+  // Reset mobile nav state when resizing to desktop
+  (0, _react.useEffect)(() => {
+    let timeoutId;
+    const handleResize = () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        if (window.innerWidth >= _breakpoints.breakpointValues2026.L) {
+          setIsMenuOpen(false);
+          setIsSubMenuOpen(false);
+          setIsTertiaryMenuOpen(false);
+          setTertiaryParentName(null);
+        }
+      }, 150);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      clearTimeout(timeoutId);
+    };
+  }, []);
+  const handleBackClick = () => {
+    if (isTertiaryMenuOpen && closeTertiaryRef.current) {
+      closeTertiaryRef.current();
+      setIsTertiaryMenuOpen(false);
+      setTertiaryParentName(null);
+    } else if (closeSubMenusRef.current) {
+      closeSubMenusRef.current();
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Header.MobileMenuOverlay, {
+    isVisible: isMenuOpen
+  }), /*#__PURE__*/_react.default.createElement(_Header.Header2026Wrapper, Object.assign({
+    "data-testid": "Header2026Wrapper",
+    role: "banner"
+  }, rest), /*#__PURE__*/_react.default.createElement(_Header.InnerWrapper, {
+    "data-testid": "InnerWrapper"
+  }, isSubMenuOpen || isTertiaryMenuOpen ? /*#__PURE__*/_react.default.createElement(_Header.MobileBackHeader, {
+    "data-testid": "MobileBackHeader",
+    onClick: handleBackClick,
+    type: "button",
+    "aria-label": isTertiaryMenuOpen ? `Go back to ${tertiaryParentName}` : 'Go back to main menu'
+  }, /*#__PURE__*/_react.default.createElement(_Header.BackChevron, null, /*#__PURE__*/_react.default.createElement("img", {
+    src: _chevronIcon.default,
+    alt: "chevron icon"
+  })), isTertiaryMenuOpen ? tertiaryParentName : 'Main menu') : /*#__PURE__*/_react.default.createElement(_Header.Brand, {
+    "data-testid": "Brand"
+  }, /*#__PURE__*/_react.default.createElement(_LogoNav.default, {
+    "data-testid": "LogoNav2026"
+  })), /*#__PURE__*/_react.default.createElement(_Navs.default, {
+    "data-testid": "Navs",
+    navItems: data,
+    characterLimit: characterLimit,
+    isMenuOpen: isMenuOpen,
+    setIsMenuOpen: setIsMenuOpen,
+    devMode: devMode,
+    onSubMenuChange: handleSubMenuChange,
+    onTertiaryMenuChange: handleTertiaryMenuChange
+  }), /*#__PURE__*/_react.default.createElement(_Header.ButtonsAndIcons, {
+    "data-testid": "ButtonsAndIcons"
+  }, /*#__PURE__*/_react.default.createElement(_Header.SearchIconWrapperDesktop, {
+    "data-testid": "SearchIconWrapperDesktop"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _searchIcon.default,
+    title: "Search",
+    target: "self",
+    role: "button",
+    href: (0, _urlHelper.default)('/search', devMode),
+    brand: "comicrelief",
+    tabIndex: "0",
+    id: "search"
+  })), !isMenuOpen && /*#__PURE__*/_react.default.createElement(_Header.DonateButtonTopBarWrapper, {
+    "data-testid": "DonateButtonTopBarWrapper"
+  }, /*#__PURE__*/_react.default.createElement(_Link.default, {
+    color: "red",
+    type: "button",
+    href: "https://donation.comicrelief.com/"
+  }, "Donate"))))));
+};
+const pageLinksPropTypes = exports.pageLinksPropTypes = _propTypes.default.arrayOf(_propTypes.default.shape({
+  pageName: _propTypes.default.string.isRequired,
+  pageUrlIfExternal: _propTypes.default.string,
+  pageLevel: _propTypes.default.bool.isRequired,
+  pageSelector: _propTypes.default.shape({
+    title: _propTypes.default.string,
+    path: _propTypes.default.string,
+    header_page_link: _propTypes.default.arrayOf(_propTypes.default.shape({
+      pageName: _propTypes.default.string.isRequired,
+      pageSelector: _propTypes.default.shape({
+        path: _propTypes.default.string.isRequired,
+        title: _propTypes.default.string.isRequired
+      }).isRequired,
+      pageUrlIfExternal: _propTypes.default.string,
+      pageLevel: _propTypes.default.bool.isRequired
+    }))
+  })
+}));
+var _default = exports.default = Header2026;

package/dist/components/Organisms/Header2026/Header2026.md

@@ -0,0 +1,14 @@
+# Header 2026 - Comic Relief
+
+#### Dev Mode - prepends `https://www.comicrelief.com` to page links
+
+```js
+import mockData from './mockData/mockData.json';
+
+const headerMenuNode = mockData.data.allContentfulHeaderMenu.edges[0].node;
+
+<Header2026
+  data={headerMenuNode}
+  devMode
+/>;
+```

package/dist/components/Organisms/Header2026/Header2026.style.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchIconWrapperDesktop = exports.MobileMenuOverlay = exports.MobileBackHeader = exports.InnerWrapper = exports.Header2026Wrapper = exports.DonateButtonTopBarWrapper = exports.ButtonsAndIcons = exports.Brand = exports.BackChevron = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
+var _containers = _interopRequireDefault(require("../../../theme/shared/containers"));
+var _animations = require("../../../theme/shared/animations");
+const Header2026Wrapper = exports.Header2026Wrapper = _styledComponents.default.header.withConfig({
+  displayName: "Header2026style__Header2026Wrapper",
+  componentId: "sc-1do20kd-0"
+})(["position:relative;z-index:2;background-color:", ";border:1px solid ", ";box-shadow:0 5px 20px 0 rgba(0,0,0,0.05);border-radius:16px;@media ", "{height:66px;margin-top:18px;&:has(li:hover),&:has(li:focus-within){border-radius:16px 16px 0 0;}}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.color('white');
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.color('grey_light');
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.breakpoints2026('L');
+});
+const InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Header2026style__InnerWrapper",
+  componentId: "sc-1do20kd-1"
+})(["display:flex;align-items:center;height:100%;cursor:pointer;max-width:", ";padding:10px;position:relative;z-index:2;@media ", "{padding:10px 16px 10px 14px;}@media ", "{padding:10px 16px;}@media ", "{margin:0 auto;gap:24px;}"], _containers.default.large, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.breakpoints2026('S');
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.breakpoints2026('M');
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.breakpoints2026('L');
+});
+
+// size of "Comic Relief" logo is set with props on LogoLinked2026
+const Brand = exports.Brand = _styledComponents.default.div.withConfig({
+  displayName: "Header2026style__Brand",
+  componentId: "sc-1do20kd-2"
+})(["", ";margin-right:auto;display:flex;align-items:center;a{border:0;color:transparent;:hover{border:0;}}@media ", "{margin-right:0}"], (0, _zIndex.default)('high'), _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.breakpoints2026('L');
+});
+const ButtonsAndIcons = exports.ButtonsAndIcons = _styledComponents.default.div.withConfig({
+  displayName: "Header2026style__ButtonsAndIcons",
+  componentId: "sc-1do20kd-3"
+})(["margin-left:auto;display:flex;"]);
+const DonateButtonTopBarWrapper = exports.DonateButtonTopBarWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Header2026style__DonateButtonTopBarWrapper",
+  componentId: "sc-1do20kd-4"
+})(["display:flex;justify-content:center;a{", ";padding:8px;border-radius:8px;font-family:Montserrat;font-size:0.875rem;width:100%;height:inherit;transition:width 0.4s cubic-bezier(0.5,1.5,0.5,0.80);&:hover,&:focus{width:100%;box-shadow:0 5px 20px 0 rgba(0,0,0,0.05);", ";}@media ", "{padding:8px 12px;}@media ", "{font-size:1rem;padding:10px 16px;}}"], _animations.pulseOutAnimation, _animations.pulseInAnimation, _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.breakpoints2026('S');
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.breakpoints2026('L');
+});
+const SearchIconWrapperDesktop = exports.SearchIconWrapperDesktop = _styledComponents.default.div.withConfig({
+  displayName: "Header2026style__SearchIconWrapperDesktop",
+  componentId: "sc-1do20kd-5"
+})(["display:none;@media ", "{position:relative;display:flex;align-items:center;width:auto;margin-right:0px;right:0px;background-color:", ";img{margin-right:24px;width:18px;height:18px;transition:transform 0.2s ease;transform-origin:center;}a{overflow:visible;display:block;}&:hover img,&:focus-within img{transform:scale(1.33);}}"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.breakpoints2026('L');
+}, _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.color('white');
+});
+const MobileBackHeader = exports.MobileBackHeader = _styledComponents.default.button.withConfig({
+  displayName: "Header2026style__MobileBackHeader",
+  componentId: "sc-1do20kd-6"
+})(["display:flex;align-items:center;gap:12px;background:transparent;border:none;padding:0;cursor:pointer;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal;color:", ";@media ", "{display:none;}"], _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.color('black');
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.breakpoints2026('L');
+});
+const BackChevron = exports.BackChevron = _styledComponents.default.span.withConfig({
+  displayName: "Header2026style__BackChevron",
+  componentId: "sc-1do20kd-7"
+})(["display:flex;align-items:center;justify-content:center;width:8px;transform:rotate(180deg);img{width:100%;height:auto;display:block;}"]);
+const MobileMenuOverlay = exports.MobileMenuOverlay = _styledComponents.default.div.withConfig({
+  displayName: "Header2026style__MobileMenuOverlay",
+  componentId: "sc-1do20kd-8"
+})(["display:", ";position:fixed;top:0;left:0;right:0;bottom:0;background-color:", ";z-index:1;@media ", "{display:none;}"], _ref14 => {
+  let {
+    isVisible
+  } = _ref14;
+  return isVisible ? 'block' : 'none';
+}, _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.color('grey_medium');
+}, _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.breakpoints2026('L');
+});

package/dist/components/Organisms/Header2026/Navs/Navs.js

@@ -0,0 +1,209 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Link = _interopRequireDefault(require("../../../Atoms/Link/Link"));
+var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
+var _BurgerMenu = _interopRequireDefault(require("../Burger/BurgerMenu"));
+var _Icon = _interopRequireDefault(require("../../../Atoms/SocialIcons/Icon/Icon"));
+var _breakpoints = require("../../../../theme/shared/breakpoints2026");
+var _navHelper = require("../../../../utils/navHelper");
+var _internalLinkHelper = require("../../../../utils/internalLinkHelper");
+var _allowListed = _interopRequireDefault(require("../../../../utils/allowListed"));
+var _PrimaryNavItem = _interopRequireDefault(require("./PrimaryNavItem"));
+var _searchIcon = _interopRequireDefault(require("../assets/search-icon.svg"));
+var _urlHelper = _interopRequireDefault(require("../../../../utils/urlHelper"));
+var _Navs = require("./Navs.style");
+const Navs = _ref => {
+  let {
+    navItems = {},
+    characterLimit,
+    isMenuOpen,
+    setIsMenuOpen,
+    devMode = false,
+    onSubMenuChange = () => {},
+    onTertiaryMenuChange = () => {}
+  } = _ref;
+  const {
+    headerPageGroups
+  } = navItems;
+  const [openedSubMenu, setOpenedSubMenu] = (0, _react.useState)({});
+  const [isNotDesktop, setIsNotDesktop] = (0, _react.useState)(() => {
+    if (typeof window !== 'undefined') {
+      return window.innerWidth < _breakpoints.breakpointValues2026.L;
+    }
+    return false;
+  });
+  const [processedItems, setProcessedItems] = (0, _react.useState)(null);
+  const [isTertiaryOpen, setIsTertiaryOpen] = (0, _react.useState)(false);
+  let theseGroups = null;
+
+  // Check if any submenu is currently open
+  const isSubMenuOpen = Object.values(openedSubMenu).some(v => v);
+
+  // Close all submenus (used by back button in header)
+  const closeSubMenus = (0, _react.useCallback)(() => {
+    setOpenedSubMenu({});
+  }, []);
+
+  // Handle tertiary menu changes from PrimaryNavItem
+  const handleTertiaryMenuChange = (0, _react.useCallback)((isOpen, parentName, closeFunction) => {
+    setIsTertiaryOpen(isOpen);
+    onTertiaryMenuChange(isOpen && isNotDesktop, parentName, closeFunction);
+  }, [isNotDesktop, onTertiaryMenuChange]);
+
+  // Notify parent when submenu state changes, passing close function
+  (0, _react.useEffect)(() => {
+    onSubMenuChange(isSubMenuOpen && isNotDesktop, closeSubMenus);
+  }, [isSubMenuOpen, isNotDesktop, onSubMenuChange, closeSubMenus]);
+  const toggleBurgerMenu = e => {
+    e.preventDefault();
+    setIsMenuOpen(!isMenuOpen);
+
+    // If we've just closed the nav, collapse any open submenus and reset tertiary state:
+    if (isMenuOpen) {
+      setOpenedSubMenu({});
+      setIsTertiaryOpen(false);
+      onTertiaryMenuChange(false, null, null);
+    }
+  };
+
+  // Toggle the open/not-open value of the specific submenu passed
+  const toggleSubMenu = (e, item) => {
+    e.preventDefault();
+    setOpenedSubMenu({
+      [item]: !openedSubMenu[item]
+    });
+  };
+
+  // Called by eventHandler to reset the nav on a specific mouse interaction
+  const resetMoreNavMouse = () => {
+    // Remove active 'opened' state for any open More Nav submenus
+    setOpenedSubMenu({});
+    // And also remove the focus state so the 'focus-within' nav rules don't apply:
+    document.activeElement.blur();
+  };
+
+  // Process the nav items on initial mount:
+  (0, _react.useMemo)(() => {
+    if (!headerPageGroups) return;
+    // Divide up nav items accordingly
+    const theseItems = (0, _navHelper.MoreNavPreProcessNew)(headerPageGroups, characterLimit);
+    setProcessedItems(theseItems);
+  }, [headerPageGroups, characterLimit]);
+
+  // Custom function to let us update the nav dynamically:
+  const screenResizeNav = (0, _react.useCallback)(() => {
+    // Grab the current width:
+    const currentScreenWidth = typeof window !== 'undefined' ? window.innerWidth : null;
+
+    // Compare to our breakpoint:
+    const isCurrentlyNotDesktop = currentScreenWidth < _breakpoints.breakpointValues2026.L;
+
+    // Only if the screen size has *changed*, update the state:
+    if (currentScreenWidth !== null && isNotDesktop !== isCurrentlyNotDesktop) {
+      // listeners, BEFORE we update the flag that'd remove the elements from the DOM:
+      if (isCurrentlyNotDesktop && processedItems.moreNavGroups.length) {
+        document.getElementById('more-nav-ul').removeEventListener('mouseleave', resetMoreNavMouse);
+      }
+
+      // Update our desktop flag to prevent any further calls:
+      setIsNotDesktop(isCurrentlyNotDesktop);
+    }
+  }, [isNotDesktop, processedItems]);
+
+  // Hook into browser's own onresize event to call our custom wrapper function:
+  (0, _react.useEffect)(() => {
+    if (typeof window !== 'undefined') window.onresize = screenResizeNav;
+  }, [screenResizeNav]);
+
+  // Once we've processed the items, assign according to breakpoint; sub-desktop 'Nav'
+  // breakpoints use 'raw' unprocessed header page groups, Desktop ('Nav' breakpoint and up)
+  // uses the divided-up versions:
+  if (processedItems) theseGroups = isNotDesktop ? headerPageGroups : processedItems.standardGroups;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Navs.Navigation, {
+    "data-testid": "Nav",
+    "aria-label": "main-menu",
+    isMenuOpen: isMenuOpen,
+    role: "navigation",
+    id: "main-nav"
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    id: "main-menu",
+    tag: "h2"
+  }, "Main navigation"), /*#__PURE__*/_react.default.createElement(_Navs.PrimaryMenuWrapper, {
+    "data-testid": "PrimaryMenuWrapper"
+  }, processedItems &&
+  /*#__PURE__*/
+  // First level of the navigation (ul tag): Parent
+  _react.default.createElement(_Navs.PrimaryMenu, {
+    "data-testid": "PrimaryMenu",
+    role: "menubar"
+  }, theseGroups.map((group, index) => {
+    /* Generate an ID from the primary page name */
+    const thisID = group.primaryPageName.toLowerCase().replace(/\s+/g, '-');
+    /* Determine which field represents our url path */
+    let thisUrl = (0, _navHelper.NavHelperPrimary)(group);
+    const relNoopener = !(0, _allowListed.default)(thisUrl) && 'noopener' || undefined;
+    /* Get all column links for submenu */
+    const columnLinks = (0, _navHelper.getColumnLinks)(group);
+    const hasSubMenu = columnLinks.length > 0;
+    const hasPopUp = hasSubMenu ? 'true' : null;
+    thisUrl = (0, _internalLinkHelper.InternalLinkHelper)(thisUrl);
+
+    // Renders the primary page as the parent; a button for the dropdown
+    // on mobile, a clickable LINK on desktop but hover to reveal the submenu:
+    return (
+      /*#__PURE__*/
+      // Secondary Menu is nested inside PrimaryNavItem
+      _react.default.createElement(_PrimaryNavItem.default, {
+        thisID: thisID,
+        key: group.id,
+        index: index,
+        hasSubMenu: hasSubMenu,
+        openedSubMenu: openedSubMenu,
+        toggleSubMenu: toggleSubMenu,
+        hasPopUp: hasPopUp,
+        isNotDesktop: isNotDesktop,
+        thisUrl: thisUrl,
+        group: group,
+        navHelperNew: _navHelper.NavHelperNew,
+        internalLinkHelper: _internalLinkHelper.InternalLinkHelper,
+        relNoopener: relNoopener,
+        devMode: devMode,
+        onTertiaryMenuChange: handleTertiaryMenuChange,
+        isTertiaryOpenGlobal: isTertiaryOpen,
+        isSubMenuOpenGlobal: isSubMenuOpen
+      })
+    );
+  }), !isSubMenuOpen && !isTertiaryOpen && /*#__PURE__*/_react.default.createElement(_Navs.SearchWrapperMobile, null, /*#__PURE__*/_react.default.createElement(_Navs.SearchLinkMobile, {
+    href: (0, _urlHelper.default)('/search', devMode)
+  }, "Search", /*#__PURE__*/_react.default.createElement(_Navs.SearchIconWrapperMobile, {
+    "data-testid": "SearchIconWrapperMobile"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _searchIcon.default,
+    title: "Search",
+    target: "self",
+    role: "button",
+    href: (0, _urlHelper.default)('/search', devMode),
+    brand: "comicrelief",
+    tabIndex: "0",
+    id: "search",
+    isHeader: true
+  })))))), isMenuOpen && !isTertiaryOpen && /*#__PURE__*/_react.default.createElement(_Navs.DonateButtonMobileModalWrapper, {
+    "data-testid": "donate-button--mobile"
+  }, /*#__PURE__*/_react.default.createElement(_Link.default, {
+    color: "red",
+    type: "button",
+    href: "https://donation.comicrelief.com/"
+  }, "Donate"))), /*#__PURE__*/_react.default.createElement(_BurgerMenu.default, {
+    "data-testid": "BurgerMenu",
+    toggle: toggleBurgerMenu,
+    isMenuOpen: isMenuOpen
+  }));
+};
+var _default = exports.default = Navs;

package/dist/components/Organisms/Header2026/Navs/Navs.style.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchWrapperMobile = exports.SearchLinkMobile = exports.SearchIconWrapperMobile = exports.PrimaryMenuWrapper = exports.PrimaryMenu = exports.Navigation = exports.DonateButtonMobileModalWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Link = _interopRequireDefault(require("../../../Atoms/Link/Link"));
+var _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hideVisually"));
+var _zIndex = _interopRequireDefault(require("../../../../theme/shared/zIndex"));
+const Navigation = exports.Navigation = _styledComponents.default.nav.withConfig({
+  displayName: "Navsstyle__Navigation",
+  componentId: "sc-1hd9a50-0"
+})(["display:", ";width:100%;position:absolute;top:75px;left:0;", ";@media ", "{", ";position:static;top:0;display:block;margin:0;width:100%;height:100%;box-shadow:none;}> h2{", ";}"], _ref => {
+  let {
+    isMenuOpen
+  } = _ref;
+  return isMenuOpen ? 'block' : 'none';
+}, (0, _zIndex.default)('higher'), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.breakpoints2026('L');
+}, (0, _zIndex.default)('medium'), _hideVisually.default);
+const PrimaryMenuWrapper = exports.PrimaryMenuWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Navsstyle__PrimaryMenuWrapper",
+  componentId: "sc-1hd9a50-1"
+})(["background-color:", ";box-shadow:0 5px 20px 0 rgba(0,0,0,0.05);border-radius:16px;overflow:hidden;position:static;@media ", "{box-shadow:none;border-radius:0;height:100%;display:flex;justify-content:center;align-items:center;overflow:visible;}"], _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.color('white');
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.breakpoints2026('L');
+});
+const PrimaryMenu = exports.PrimaryMenu = _styledComponents.default.ul.withConfig({
+  displayName: "Navsstyle__PrimaryMenu",
+  componentId: "sc-1hd9a50-2"
+})(["background-color:transparent;list-style:none outside;padding:0;margin:0;width:100%;height:100%;position:relative border:1px solid green;@media ", "{position:static;display:flex;justify-content:center;align-items:center;gap:24px;width:100%;height:100%;background-color:", ";}"], _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.breakpoints2026('L');
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.color('white');
+});
+const DonateButtonMobileModalWrapper = exports.DonateButtonMobileModalWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Navsstyle__DonateButtonMobileModalWrapper",
+  componentId: "sc-1hd9a50-3"
+})(["display:block;background-color:inherit;margin-top:48px;width:100%;a{box-sizing:border-box;display:block;text-align:center;border-radius:16px;width:100%;margin:0;font-family:Montserrat;height:auto;padding:18px 0;&:hover,&:focus{width:100%;box-shadow:0 5px 20px 0 rgba(0,0,0,0.05);}}@media ", "{display:none;}"], _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.breakpoints2026('L');
+});
+const SearchWrapperMobile = exports.SearchWrapperMobile = _styledComponents.default.div.withConfig({
+  displayName: "Navsstyle__SearchWrapperMobile",
+  componentId: "sc-1hd9a50-4"
+})(["display:block;width:100%;border-top:1px solid ", ";@media ", "{display:none;}"], _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.color('grey_medium');
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.breakpoints2026('L');
+});
+const SearchLinkMobile = exports.SearchLinkMobile = (0, _styledComponents.default)(_Link.default).withConfig({
+  displayName: "Navsstyle__SearchLinkMobile",
+  componentId: "sc-1hd9a50-5"
+})(["display:flex;align-items:center;justify-content:space-between;padding:25px;width:100%;text-decoration:none;font-family:Montserrat;font-weight:600;color:", ";transition:color 0.2s ease;outline-offset:-3px;&:hover,&:focus{color:", ";background-color:", ";}"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.color('black');
+}, _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.color('red');
+}, _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.color('grey_extra_light');
+});
+const SearchIconWrapperMobile = exports.SearchIconWrapperMobile = _styledComponents.default.div.withConfig({
+  displayName: "Navsstyle__SearchIconWrapperMobile",
+  componentId: "sc-1hd9a50-6"
+})(["overflow:visible;img{width:18px;height:18px;transition:transform 0.2s ease;transform-origin:center;}a{overflow:visible;display:block;}&:hover img,&:focus-within img{transform:scale(1.33);}@media ", "{display:none;}"], _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.breakpoints2026('L');
+});