@comicrelief/component-library 8.12.0 → 8.13.0

package/dist/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.js

@@ -0,0 +1,175 @@
+"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 _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
+var _BurgerMenu = _interopRequireDefault(require("../Burger/BurgerMenu"));
+var _MoreNav = _interopRequireDefault(require("./MoreNav"));
+var _allBreakpoints = require("../../../../theme/shared/allBreakpoints");
+var _navHelper = require("../../../../utils/navHelper");
+var _internalLinkHelper = require("../../../../utils/internalLinkHelper");
+var _allowListed = _interopRequireDefault(require("../../../../utils/allowListed"));
+var _HeaderNavItem = _interopRequireDefault(require("./HeaderNavItem2025"));
+var _HeaderNav = require("./HeaderNav2025.style");
+const HeaderNav2025 = _ref => {
+  let {
+    navItems = {},
+    metaIcons,
+    donateButton = null,
+    characterLimit
+  } = _ref;
+  const {
+    menuGroups
+  } = navItems;
+  const [isExpandable, setIsExpandable] = (0, _react.useState)(false);
+  const [openedSubMenu, setOpenedSubMenu] = (0, _react.useState)({});
+  const [isNotDesktop, setIsNotDesktop] = (0, _react.useState)(null);
+  const [processedItems, setProcessedItems] = (0, _react.useState)(null);
+  const [showMoreNav, setShowMoreNav] = (0, _react.useState)(false);
+  let theseGroups = null;
+  const toggleBurgerMenu = e => {
+    e.preventDefault();
+    setIsExpandable(!isExpandable);
+
+    // If we've just closed the nav, collapse any open submenus:
+    if (isExpandable) {
+      setOpenedSubMenu({});
+    }
+  };
+
+  // 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.useEffect)(() => {
+    // Divide up nav items accordingly and determine breakpoint,
+    // assigned as local vars since useState won't be ready in time below:
+    const theseItems = (0, _navHelper.MoreNavPreProcess)(menuGroups, characterLimit);
+    const notDesktop = window.innerWidth < _allBreakpoints.breakpointValues.Nav;
+    setProcessedItems(theseItems);
+    setIsNotDesktop(notDesktop);
+
+    // Use these flags to detemine if we render the More nav or not:
+    setShowMoreNav(!notDesktop && theseItems.moreNavGroups.length);
+  }, [menuGroups, characterLimit]);
+
+  // Attach eventListener on mount and after potential changes
+  // to showMoreNav triggered by a window resize:
+  (0, _react.useEffect)(() => {
+    if (processedItems && showMoreNav) {
+      document.getElementById('more-nav-ul').addEventListener('mouseleave', resetMoreNavMouse);
+    }
+  }, [processedItems, showMoreNav]);
+
+  // 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 < _allBreakpoints.breakpointValues.Nav;
+
+    // Only if the screen size has *changed*, update the state:
+    if (currentScreenWidth !== null && isNotDesktop !== isCurrentlyNotDesktop) {
+      // If we've changed from desktop to not, remove any previously-attached MoreNav event
+      // listeners, BEFORE we update the flag that'd remove the elements from the DOM:
+      if (isCurrentlyNotDesktop) {
+        document.getElementById('more-nav-ul').removeEventListener('mouseleave', resetMoreNavMouse);
+      }
+
+      // Update our desktop flag to prevent any further calls:
+      setIsNotDesktop(isCurrentlyNotDesktop);
+
+      // And since we've changed breakpoints, use these flags
+      // to determine if we should render the More nav or not,
+      setShowMoreNav(Boolean(!isCurrentlyNotDesktop && processedItems.moreNavGroups));
+    }
+  }, [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 menu groups, Desktop ('Nav' breakpoint and up)
+  // uses the divided-up versions:
+  if (processedItems) theseGroups = isNotDesktop ? menuGroups : processedItems.standardGroups;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_HeaderNav.Nav, {
+    "aria-label": "main-menu",
+    isExpandable: isExpandable,
+    role: "navigation",
+    id: "main-nav"
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    id: "main-menu",
+    tag: "h2"
+  }, "Main navigation"), processedItems &&
+  /*#__PURE__*/
+  // First level of the navigation (ul tag): Parent
+  _react.default.createElement(_HeaderNav.NavMenu, {
+    role: "menubar"
+  }, theseGroups.map((group, index) => {
+    /* Grab the first links properties to use for our parent/button */
+    const thisFirstChild = group.links[0];
+    const thisID = group.id;
+    /* Determine which field represents our url path */
+    let thisUrl = (0, _navHelper.NavHelper)(thisFirstChild);
+    const relNoopener = !(0, _allowListed.default)(thisUrl) && 'noopener' || null;
+    const hasSubMenu = group.links && group.links.length > 1;
+    const hasPopUp = hasSubMenu ? 'true' : null;
+    thisUrl = (0, _internalLinkHelper.InternalLinkHelper)(thisUrl);
+
+    // Renders the first menugroup item to act as the parent; a button for the dropdown
+    // on mobile, a clickable LINK on desktop but hover to reveal the submenu:
+    return /*#__PURE__*/_react.default.createElement(_HeaderNavItem.default, {
+      thisID: thisID,
+      key: "".concat(thisID, "--item"),
+      index: index,
+      hasSubMenu: hasSubMenu,
+      openedSubMenu: openedSubMenu,
+      toggleSubMenu: toggleSubMenu,
+      hasPopUp: hasPopUp,
+      isNotDesktop: isNotDesktop,
+      thisUrl: thisUrl,
+      group: group,
+      thisFirstChild: thisFirstChild,
+      navHelper: _navHelper.NavHelper,
+      internalLinkHelper: _internalLinkHelper.InternalLinkHelper,
+      relNoopener: relNoopener
+    });
+  }), showMoreNav && /*#__PURE__*/_react.default.createElement(_MoreNav.default, {
+    processedItems: processedItems,
+    openedSubMenu: openedSubMenu,
+    toggleSubMenu: toggleSubMenu,
+    navHelper: _navHelper.NavHelper,
+    allowListed: _allowListed.default,
+    internalLinkHelper: _internalLinkHelper.InternalLinkHelper
+  })), /*#__PURE__*/_react.default.createElement(_HeaderNav.NavMetaIcons, {
+    isHeader: true,
+    "data-testid": "meta-icons--mobile"
+  }, metaIcons), /*#__PURE__*/_react.default.createElement(_HeaderNav.DonateButtonWrapperBottom, {
+    "data-testid": "donate-button--mobile"
+  }, donateButton)), /*#__PURE__*/_react.default.createElement(_BurgerMenu.default, {
+    toggle: toggleBurgerMenu,
+    isExpandable: isExpandable
+  }, "Open"));
+};
+var _default = exports.default = HeaderNav2025;

package/dist/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.style.js

@@ -0,0 +1,308 @@
+"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.SubNavMenu = exports.SubNavLink = exports.SubNavItem = exports.StyledText = exports.NavMetaIcons = exports.NavMenu = exports.NavLink = exports.NavItem = exports.Nav = exports.DonateButtonWrapperBottom = exports.DesktopNavLink = exports.ChevronWrapper = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Link = _interopRequireDefault(require("../../../Atoms/Link/Link"));
+var _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hideVisually"));
+var _zIndex = _interopRequireDefault(require("../../../../theme/shared/zIndex"));
+var _arrowRight = _interopRequireDefault(require("./arrow-right.png"));
+var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
+const transitionDuration = 0.2;
+const NavLinkClass = (0, _styledComponents.default)(_Link.default).withConfig({
+  displayName: "HeaderNav2025style__NavLinkClass",
+  componentId: "sc-xflhtq-0"
+})(["display:inline-block;border:0;padding:25px;line-height:1rem;height:auto;font-weight:700;width:100%;color:", ";transition:color ", "s ease;:hover,:focus,:focus-within{border:0;}@media ", "{:hover,:focus{color:", ";background-color:", ";font-weight:inherit;}:focus-within{background-color:", ";&:hover{background-color:", ";}}}> div{height:auto;transition:transform 0.35s cubic-bezier(0.41,1.64,0.41,0.8);", "}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.color('black');
+}, transitionDuration, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.allBreakpoints('M');
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.color('red');
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.color('grey_extra_light');
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.color('white');
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.color('grey_extra_light');
+}, _ref7 => {
+  let {
+    isExpanded
+  } = _ref7;
+  return isExpanded && (0, _styledComponents.css)(["transform:rotate(-180deg);"]);
+});
+
+/**
+ * Navigation menu
+ */
+const Nav = exports.Nav = _styledComponents.default.nav.withConfig({
+  displayName: "HeaderNav2025style__Nav",
+  componentId: "sc-xflhtq-1"
+})(["display:", ";width:100%;position:absolute;top:75px;left:0;", ";background-color:", ";box-shadow:0px 20px 20px 5px rgba(0,0,0,0.25);@media ", "{width:50%;right:0;left:inherit;box-shadow:-20px 15px 20px 0px rgba(0,0,0,0.25);}@media ", "{", ";position:relative;top:0;display:block;margin:0;width:auto;height:100%;box-shadow:none;}@media ", "{margin:0 10px;}> h2{", ";}"], _ref8 => {
+  let {
+    isExpandable
+  } = _ref8;
+  return isExpandable ? 'block' : 'none';
+}, (0, _zIndex.default)('higher'), _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.color('white');
+}, _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.allBreakpoints('M');
+}, _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.allBreakpoints('Nav');
+}, (0, _zIndex.default)('medium'), _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.allBreakpoints('NavWide');
+}, _hideVisually.default);
+
+/**
+ * Sub Navigation Menu (second level)
+ */
+const SubNavMenu = exports.SubNavMenu = _styledComponents.default.ul.withConfig({
+  displayName: "HeaderNav2025style__SubNavMenu",
+  componentId: "sc-xflhtq-2"
+})(["visibility:", ";display:", ";padding:0;position:relative;list-style:none outside;left:0;top:0;flex-direction:column;justify-content:center;align-items:center;background-color:", ";overflow:hidden;border-top:1px solid ", ";@media ", "{display:flex;width:330px;height:auto;padding:0;position:absolute;top:86px;left:-5px;border-radius:0 0 25px 25px;transition:opacity ", "s ease;opacity:0;box-shadow:0px 20px 20px 5px rgba(0,0,0,0.25);}"], _ref13 => {
+  let {
+    isSubMenuOpen
+  } = _ref13;
+  return isSubMenuOpen ? 'visible' : 'hidden';
+}, _ref14 => {
+  let {
+    isSubMenuOpen
+  } = _ref14;
+  return isSubMenuOpen ? 'flex' : 'none';
+}, _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.color('white');
+}, _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.color('grey_medium');
+}, _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.allBreakpoints('Nav');
+}, transitionDuration);
+
+/**
+ * Sub Menu list items
+ */
+const SubNavItem = exports.SubNavItem = _styledComponents.default.li.withConfig({
+  displayName: "HeaderNav2025style__SubNavItem",
+  componentId: "sc-xflhtq-3"
+})(["padding:0;height:100%;width:100%;border-top:1px solid ", ";;position:relative;transition:background-color ", "s ease;&:first-of-type{border-top:none;}span{font-weight:100;}"], _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.color('grey_medium');
+}, transitionDuration);
+
+/**
+ * Sub menu link item
+ */
+const SubNavLink = exports.SubNavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
+  displayName: "HeaderNav2025style__SubNavLink",
+  componentId: "sc-xflhtq-4"
+})(["padding:20px 25px 22px 42px;color:", ";height:auto;position:relative;"], _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.color('black');
+});
+
+/**
+ * Navigation Menu (first level)
+ */
+const NavMenu = exports.NavMenu = _styledComponents.default.ul.withConfig({
+  displayName: "HeaderNav2025style__NavMenu",
+  componentId: "sc-xflhtq-5"
+})(["background-color:", ";list-style:none outside;padding:0;margin:0;@media ", "{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;background-color:", ";}"], _ref20 => {
+  let {
+    theme
+  } = _ref20;
+  return theme.color('white');
+}, _ref21 => {
+  let {
+    theme
+  } = _ref21;
+  return theme.allBreakpoints('Nav');
+}, _ref22 => {
+  let {
+    theme
+  } = _ref22;
+  return theme.color('white');
+});
+
+/**
+ * Menu item link
+ */
+const NavLink = exports.NavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
+  displayName: "HeaderNav2025style__NavLink",
+  componentId: "sc-xflhtq-6"
+})(["display:flex;gap:4px;font-family:", ";", " @media ", "{padding:10px 0px 10px 0;height:auto;", " :hover,:focus-within,:focus{+ ", "{display:flex;opacity:1;}}}@media ", "{", "}"], _ref23 => {
+  let {
+    theme
+  } = _ref23;
+  return theme.fontFamilies(theme.font.regular);
+}, _ref24 => {
+  let {
+    isExpanded,
+    theme
+  } = _ref24;
+  return isExpanded && (0, _styledComponents.css)(["&,&:hover,&:focus-within,&:focus{color:", ";}"], theme.color('red'));
+}, _ref25 => {
+  let {
+    theme
+  } = _ref25;
+  return theme.allBreakpoints('Nav');
+}, _ref26 => {
+  let {
+    hasSubMenu
+  } = _ref26;
+  return hasSubMenu && (0, _styledComponents.css)(["padding:10px 14px 10px 0;"]);
+}, SubNavMenu, _ref27 => {
+  let {
+    theme
+  } = _ref27;
+  return theme.allBreakpoints('NavWide');
+}, _ref28 => {
+  let {
+    hasSubMenu
+  } = _ref28;
+  return hasSubMenu && (0, _styledComponents.css)(["padding:10px 16px 10px 0;"]);
+});
+const DesktopNavLink = exports.DesktopNavLink = (0, _styledComponents.default)(NavLink).withConfig({
+  displayName: "HeaderNav2025style__DesktopNavLink",
+  componentId: "sc-xflhtq-7"
+})(["&,&:hover,&:focus,&:focus-within{background-color:", ";}"], _ref29 => {
+  let {
+    theme
+  } = _ref29;
+  return theme.color('white');
+});
+
+/**
+ * Menu list items
+ */
+const NavItem = exports.NavItem = _styledComponents.default.li.withConfig({
+  displayName: "HeaderNav2025style__NavItem",
+  componentId: "sc-xflhtq-8"
+})(["", ";position:relative;font-weight:700;border-bottom:1px solid ", ";li{span{border-bottom:none;padding-bottom:0;}:hover,:focus,:focus-within{span{border-bottom:none;padding-bottom:0;}}}span > a > div{transition:transform 0.35s cubic-bezier(0.41,1.64,0.41,0.8);}:hover,:focus,:focus-within{li{span{border-bottom:none;padding-bottom:0;}}span > a{color:", ";> div{transform:rotate(-180deg);img{filter:invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);}}}}@media ", "{margin:0 22px 0 0;padding:25px 0px;border-bottom:none;:hover,:focus,:focus-within{> ", ",:focus-within > ", "{visibility:visible;opacity:1;display:flex;}}:hover,:focus,:focus-within{background-color:transparent;", ";span{border-bottom:2px solid ", ";padding-bottom:2px;}", "{display:flex;opacity:1;visibility:visible;flex-direction:column;}}}@media ", "{margin:0 20px 0 0;}"], (0, _zIndex.default)('medium'), _ref30 => {
+  let {
+    theme
+  } = _ref30;
+  return theme.color('grey_medium');
+}, _ref31 => {
+  let {
+    theme
+  } = _ref31;
+  return theme.color('red');
+}, _ref32 => {
+  let {
+    theme
+  } = _ref32;
+  return theme.allBreakpoints('Nav');
+}, SubNavMenu, SubNavMenu, (0, _zIndex.default)('high'), _ref33 => {
+  let {
+    theme
+  } = _ref33;
+  return theme.color('black');
+}, SubNavMenu, _ref34 => {
+  let {
+    theme
+  } = _ref34;
+  return theme.allBreakpoints('NavWide');
+});
+const ChevronWrapper = exports.ChevronWrapper = _styledComponents.default.div.withConfig({
+  displayName: "HeaderNav2025style__ChevronWrapper",
+  componentId: "sc-xflhtq-9"
+})(["width:16px;position:absolute;top:20px;right:22px;height:16px;img{width:100%;display:block;height:auto;}@media ", "{position:absolute;top:10px;right:0;width:10px;}"], _ref35 => {
+  let {
+    theme
+  } = _ref35;
+  return theme.allBreakpoints('Nav');
+});
+
+// This represents the 'non-desktop'/mobile nav icons:
+const NavMetaIcons = exports.NavMetaIcons = _styledComponents.default.div.withConfig({
+  displayName: "HeaderNav2025style__NavMetaIcons",
+  componentId: "sc-xflhtq-10"
+})(["width:auto;display:flex;align-items:center;flex-direction:column;background-color:inherit;> div{height:60px;width:100%;display:flex;border-bottom:1px solid ", ";> a{height:inherit;width:100%;padding:15px 20px;position:relative;&:after{position:absolute;right:20px;top:50%;transform:translateY(-50%);content:\"\";width:20px;height:20px;background-image:url(", ");background-size:100%;background-repeat:no-repeat;}img{padding:5px;height:35px;width:35px;}span{transition:color 0.15s ease-out;}@media ", "{&:focus,&:hover{span{color:", ";}}}}&:first-child{margin-top:20px;}}@media ", "{display:none;}"], _ref36 => {
+  let {
+    theme
+  } = _ref36;
+  return theme.color('grey_medium');
+}, _arrowRight.default, _ref37 => {
+  let {
+    theme
+  } = _ref37;
+  return theme.allBreakpoints('M');
+}, _ref38 => {
+  let {
+    theme
+  } = _ref38;
+  return theme.color('red');
+}, _ref39 => {
+  let {
+    theme
+  } = _ref39;
+  return theme.allBreakpoints('Nav');
+});
+const StyledText = exports.StyledText = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "HeaderNav2025style__StyledText",
+  componentId: "sc-xflhtq-11"
+})(["@media ", "{font-size:15px;}@media ", "{font-size:1rem;}"], _ref40 => {
+  let {
+    theme
+  } = _ref40;
+  return theme.allBreakpoints('Nav');
+}, _ref41 => {
+  let {
+    theme
+  } = _ref41;
+  return theme.allBreakpoints('NavWide');
+});
+const DonateButtonWrapperBottom = exports.DonateButtonWrapperBottom = _styledComponents.default.div.withConfig({
+  displayName: "HeaderNav2025style__DonateButtonWrapperBottom",
+  componentId: "sc-xflhtq-12"
+})(["display:flex;justify-content:center;padding:35px 20px;background-color:inherit;a{width:calc(100% - 10px);transition:width 0.35s cubic-bezier(0.5,1.5,0.5,0.9);&:hover,&:focus{width:100%;box-shadow:rgba(0,0,0,0.1) 0 0 20px 0;}}@media ", "{display:none;}"], _ref42 => {
+  let {
+    theme
+  } = _ref42;
+  return theme.allBreakpoints('Nav');
+});

package/dist/components/Organisms/Header2025/HeaderNav2025/HeaderNavItem2025.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
+var _HeaderNav = require("./HeaderNav2025.style");
+var _MenuGroupIcon = _interopRequireDefault(require("./Menu-Group-Icon.svg"));
+const HeaderNavItem2025 = _ref => {
+  let {
+    thisID,
+    relNoopener,
+    hasSubMenu,
+    index,
+    openedSubMenu,
+    isNotDesktop,
+    hasPopUp,
+    thisUrl,
+    toggleSubMenu,
+    group,
+    thisFirstChild,
+    navHelper,
+    internalLinkHelper,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_HeaderNav.NavItem, {
+    role: "none",
+    key: "".concat(index, "-").concat(thisID, "--item"),
+    index: index,
+    isSubMenuOpen: !!openedSubMenu
+  }, isNotDesktop ? /*#__PURE__*/_react.default.createElement(_HeaderNav.NavLink, {
+    href: hasPopUp ? '#' : thisUrl,
+    inline: true,
+    rel: relNoopener,
+    "aria-expanded": !!openedSubMenu[thisID],
+    "aria-haspopup": hasPopUp,
+    onClick: hasPopUp ? e => toggleSubMenu(e, thisID) : null,
+    role: "button",
+    key: "".concat(index, "-").concat(thisID, "--link"),
+    isExpanded: !!openedSubMenu[thisID]
+  }, thisFirstChild.title, hasSubMenu && /*#__PURE__*/_react.default.createElement(_HeaderNav.ChevronWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
+    src: _MenuGroupIcon.default,
+    alt: "chevron down icon"
+  }))) : /*#__PURE__*/_react.default.createElement(_HeaderNav.StyledText, null, /*#__PURE__*/_react.default.createElement(_HeaderNav.DesktopNavLink, Object.assign({
+    href: thisUrl,
+    inline: true,
+    rel: relNoopener,
+    "aria-haspopup": hasPopUp,
+    key: "".concat(index, "-").concat(thisID),
+    hasSubMenu: hasSubMenu
+  }, rest), thisFirstChild.title, hasSubMenu && /*#__PURE__*/_react.default.createElement(_HeaderNav.ChevronWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
+    src: _MenuGroupIcon.default,
+    alt: "chevron down icon"
+  })))), hasSubMenu && /*#__PURE__*/_react.default.createElement(_HeaderNav.SubNavMenu, {
+    role: "list",
+    isSubMenuOpen: !!openedSubMenu[thisID],
+    key: "".concat(index, "-").concat(thisID, "--sub-item")
+  }, group.links.map((child, childIndex) => {
+    let thisSubUrl = navHelper(child);
+    thisSubUrl = internalLinkHelper(thisSubUrl);
+
+    // Skip the very first child on desktop, since
+    // we've already made a 'button' version above:
+    if (childIndex === 0 && !isNotDesktop) return null;
+
+    // Otherwise, render out as usual:
+    return /*#__PURE__*/_react.default.createElement(_HeaderNav.SubNavItem, {
+      key: "".concat(index, "-").concat(thisSubUrl)
+    }, /*#__PURE__*/_react.default.createElement(_HeaderNav.SubNavLink, {
+      href: thisSubUrl,
+      inline: true,
+      role: "menuitem"
+    }, /*#__PURE__*/_react.default.createElement(_Text.default, null, child.title)));
+  })));
+};
+var _default = exports.default = HeaderNavItem2025;

package/dist/components/Organisms/Header2025/HeaderNav2025/Menu-Group-Icon.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="24" viewBox="0 0 14 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 16.5002C6.744 16.5002 6.48849 16.4027 6.29299 16.2072L0.29288 10.207C-0.0976268 9.81649 -0.0976268 9.18347 0.29288 8.79296C0.683387 8.40245 1.3164 8.40245 1.70691 8.79296L7 14.0856L12.2931 8.79296C12.6836 8.40245 13.3166 8.40245 13.7071 8.79296C14.0976 9.18347 14.0976 9.81649 13.7071 10.207L7.70701 16.2072C7.51151 16.4027 7.256 16.5002 7 16.5002Z" fill="#222222"/>
+</svg>

package/dist/components/Organisms/Header2025/HeaderNav2025/MoreNav.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
+var _HeaderNav = require("./HeaderNav2025.style");
+var _MenuGroupIcon = _interopRequireDefault(require("./Menu-Group-Icon.svg"));
+var _MoreNav = require("./MoreNav.style");
+const MoreNav = _ref => {
+  let {
+    processedItems,
+    openedSubMenu,
+    toggleSubMenu,
+    navHelper,
+    allowListed,
+    internalLinkHelper
+  } = _ref;
+  const handleNestedLinkClick = (e, childID, hasPopUp) => {
+    if (hasPopUp) {
+      // Toggle the state for this item:
+      toggleSubMenu(e, childID);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_MoreNav.MoreNavItem, {
+    id: "more-nav"
+  }, /*#__PURE__*/_react.default.createElement(_MoreNav.MoreNavLabel
+  // Used to target focus/blur handlers
+  , {
+    id: "more-nav-label"
+    // Ensure we can tab to this normally non-foccusable element:
+    ,
+    tabIndex: "0"
+    // Shrug off any click-fire focus events to not mess with other events:
+    ,
+    onClick: e => e.target.blur(),
+    "aria-haspopup": "true"
+  }, "More", /*#__PURE__*/_react.default.createElement(_HeaderNav.ChevronWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
+    src: _MenuGroupIcon.default,
+    alt: "Chevron icon"
+  }))), /*#__PURE__*/_react.default.createElement(_MoreNav.MoreSubNavMenu, {
+    role: "list",
+    id: "more-nav-ul",
+    key: "more-nav-ul"
+  }, processedItems.moreNavGroups.map(child => {
+    /* Grab the first links properties to use for our parent/button */
+    const thisFirstChild = child.links[0];
+    let thisUrl = navHelper(thisFirstChild);
+    const relNoopener = !allowListed(thisUrl) && 'noopener' || null;
+    const hasSubMenu = child.links && child.links.length > 1;
+    const hasPopUp = hasSubMenu ? 'true' : null;
+    thisUrl = internalLinkHelper(thisUrl);
+    return /*#__PURE__*/_react.default.createElement(_MoreNav.MoreSubNavItem, {
+      key: child.title
+    }, /*#__PURE__*/_react.default.createElement(_MoreNav.MoreNavNestedLink, {
+      href: hasPopUp ? '#' : thisUrl,
+      inline: true,
+      rel: relNoopener,
+      "aria-haspopup": hasPopUp,
+      role: hasPopUp ? 'button' : 'link',
+      onClick: e => handleNestedLinkClick(e, child.id, hasPopUp),
+      isSubMenuOpen: Boolean(openedSubMenu[child.id]),
+      "aria-expanded": Boolean(openedSubMenu[child.id])
+    }, thisFirstChild.title, hasSubMenu && /*#__PURE__*/_react.default.createElement(_HeaderNav.ChevronWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
+      src: _MenuGroupIcon.default,
+      alt: "Chevron icon"
+    }))), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasSubMenu && /*#__PURE__*/_react.default.createElement(_MoreNav.MoreNestedSubNavMenu, {
+      role: "list",
+      isSubMenuOpen: Boolean(openedSubMenu[child.id])
+    }, child.links.map(subChild => {
+      const thisSubUrl = navHelper(subChild);
+      return (
+        /*#__PURE__*/
+        // 'More Nav' sub item:
+        _react.default.createElement(_MoreNav.MoreSubNavItem, {
+          key: thisSubUrl
+        }, /*#__PURE__*/_react.default.createElement(_MoreNav.MoreSubNavLink, {
+          href: thisSubUrl,
+          inline: true,
+          role: "menuitem"
+          // Allows us to avoid using the 'display:none'
+          // approach so we can animate properly:
+          ,
+          tabIndex: openedSubMenu[child.id] ? '0' : '-1'
+        }, /*#__PURE__*/_react.default.createElement(_Text.default, null, subChild.title)))
+      );
+    }))));
+  })));
+};
+var _default = exports.default = MoreNav;