@comicrelief/component-library 8.54.1 → 8.55.1

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');
+});

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

@@ -0,0 +1,227 @@
+"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 _chevronIcon = _interopRequireDefault(require("../assets/chevron-icon.svg"));
+var _urlHelper = _interopRequireDefault(require("../../../../utils/urlHelper"));
+var _PrimaryNavItem = require("./PrimaryNavItem.style");
+// Helper to group tertiary links (pageLevel: false)
+// so that they sit under their parent secondary links (pageLevel: true)
+const groupTertiaryLinks = links => {
+  if (!links) return {};
+  const groups = {};
+  let currentSecondaryId = null;
+  links.forEach(link => {
+    if (link.pageLevel) {
+      currentSecondaryId = link.id;
+      groups[currentSecondaryId] = [];
+    } else if (currentSecondaryId) {
+      groups[currentSecondaryId].push(link);
+    }
+  });
+  return groups;
+};
+const PrimaryNavItem = _ref => {
+  let {
+    thisID,
+    relNoopener,
+    hasSubMenu,
+    index,
+    openedSubMenu,
+    isNotDesktop,
+    hasPopUp,
+    thisUrl,
+    toggleSubMenu,
+    group,
+    navHelperNew,
+    internalLinkHelper,
+    devMode = false,
+    onTertiaryMenuChange,
+    isTertiaryOpenGlobal = false,
+    isSubMenuOpenGlobal = false,
+    ...rest
+  } = _ref;
+  const [openTertiaryMenu, setOpenTertiaryMenu] = (0, _react.useState)(null);
+  const handleTertiaryToggle = (e, linkId) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const isOpening = openTertiaryMenu !== linkId;
+    setOpenTertiaryMenu(isOpening ? linkId : null);
+    if (onTertiaryMenuChange) {
+      onTertiaryMenuChange(isOpening, isOpening ? group.primaryPageName : null, () => {
+        setOpenTertiaryMenu(null);
+        onTertiaryMenuChange(false, null, null);
+      });
+    }
+  };
+
+  // Reset tertiary menu state when the secondary submenu closes
+  (0, _react.useEffect)(() => {
+    if (!openedSubMenu[thisID]) {
+      setOpenTertiaryMenu(null);
+    }
+  }, [openedSubMenu, thisID]);
+
+  // Collect all column links into a single array for iteration
+  const allColumnLinks = (0, _react.useMemo)(() => [group.column1PageLinks, group.column2PageLinks, group.column3PageLinks], [group.column1PageLinks, group.column2PageLinks, group.column3PageLinks]);
+
+  // Group tertiary links for all columns (run once per data change)
+  const tertiaryGroups = (0, _react.useMemo)(() => allColumnLinks.reduce((acc, links) => ({
+    ...acc,
+    ...groupTertiaryLinks(links)
+  }), {}), [allColumnLinks]);
+
+  // All links flattened (run once per data change)
+  const allLinks = (0, _react.useMemo)(() => allColumnLinks.flatMap(links => links || []), [allColumnLinks]);
+
+  // Check if a secondary link has tertiary children
+  const hasTertiaryChildren = linkId => {
+    var _tertiaryGroups$linkI;
+    return ((_tertiaryGroups$linkI = tertiaryGroups[linkId]) === null || _tertiaryGroups$linkI === void 0 ? void 0 : _tertiaryGroups$linkI.length) > 0;
+  };
+
+  // Get the currently active tertiary menu data
+  const activeTertiaryLinks = tertiaryGroups[openTertiaryMenu] || [];
+
+  // Find the parent link (pageLevel: true) for the currently open tertiary menu
+  const activeParentLink = (0, _react.useMemo)(() => openTertiaryMenu ? allLinks.find(link => link.id === openTertiaryMenu) : null, [openTertiaryMenu, allLinks]);
+
+  // Pre-process URLs for all links (run once per data change)
+  const processedLinkUrls = (0, _react.useMemo)(() => {
+    const urls = {};
+    allLinks.forEach(link => {
+      urls[link.id] = internalLinkHelper(navHelperNew(link));
+    });
+    return urls;
+  }, [allLinks, navHelperNew, internalLinkHelper]);
+
+  // Helper to render a column's links
+  const renderColumnLinks = (links, ColumnComponent) => {
+    if (!links) return null;
+    return links.map(child => {
+      // On mobile, only show secondary links (pageLevel: true)
+      // Tertiary links (pageLevel: false) will be shown in the third modal
+      if (isNotDesktop && !child.pageLevel) {
+        return null;
+      }
+      const linkId = child.id;
+      const hasChildren = hasTertiaryChildren(linkId);
+      return /*#__PURE__*/_react.default.createElement(ColumnComponent, {
+        key: child.id,
+        $isSecondary: child.pageLevel
+      }, hasChildren && isNotDesktop ? /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.SecondaryNavLinkWithChildren, {
+        href: "#",
+        inline: true,
+        role: "menuitem",
+        onClick: e => handleTertiaryToggle(e, linkId),
+        $isSecondary: child.pageLevel
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, null, child.pageName), /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.SecondaryChevronWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
+        src: _chevronIcon.default,
+        alt: "chevron icon"
+      }))) : /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.SecondaryNavLink, {
+        href: (0, _urlHelper.default)(processedLinkUrls[linkId], devMode),
+        inline: true,
+        role: "menuitem",
+        $isSecondary: child.pageLevel
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, null, child.pageName)));
+    });
+  };
+
+  // Determine what to render for the primary nav link
+  const renderPrimaryLink = () => {
+    // Mobile: Hide NavLink when secondary or tertiary menu is open
+    if (isNotDesktop) {
+      if (isTertiaryOpenGlobal || isSubMenuOpenGlobal) {
+        return null;
+      }
+      return /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.NavLink, {
+        "data-testid": "NavLink",
+        href: hasPopUp ? '#' : (0, _urlHelper.default)(thisUrl, devMode),
+        inline: true,
+        rel: relNoopener,
+        "aria-expanded": !!openedSubMenu[thisID],
+        "aria-haspopup": hasPopUp,
+        onClick: hasPopUp ? e => toggleSubMenu(e, thisID) : null,
+        role: "button",
+        isExpanded: !!openedSubMenu[thisID]
+      }, group.primaryPageName, hasSubMenu && /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.ChevronWrapper, {
+        "data-testid": "ChevronWrapper"
+      }, /*#__PURE__*/_react.default.createElement("img", {
+        src: _chevronIcon.default,
+        alt: "chevron icon"
+      })));
+    }
+
+    // Desktop: Always show StyledText with DesktopNavLink
+    return /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.StyledText, {
+      "data-testid": "StyledText"
+    }, /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.DesktopNavLink, Object.assign({
+      "data-testid": "DesktopNavLink",
+      href: (0, _urlHelper.default)(thisUrl, devMode),
+      inline: true,
+      rel: relNoopener,
+      "aria-haspopup": hasPopUp,
+      hasSubMenu: hasSubMenu
+    }, rest), group.primaryPageName, hasSubMenu && /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.ChevronWrapper, {
+      "data-testid": "ChevronWrapper"
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      src: _chevronIcon.default,
+      alt: "chevron down icon"
+    }))));
+  };
+  return /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.StyledNavItem, {
+    "data-testid": "StyledNavItem",
+    role: "none",
+    index: index,
+    isSubMenuOpen: !!openedSubMenu,
+    isTertiaryOpen: isTertiaryOpenGlobal
+  }, renderPrimaryLink(), hasSubMenu && /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.SecondaryNavMenu, {
+    role: "list",
+    isSubMenuOpen: !!openedSubMenu[thisID],
+    isTertiaryOpen: isTertiaryOpenGlobal
+  }, isNotDesktop && /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.SecondaryMenuPrimaryLink, null, /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.SecondaryMenuPrimaryLinkAnchor, {
+    href: (0, _urlHelper.default)(thisUrl, devMode),
+    inline: true,
+    role: "menuitem"
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, group.primaryPageName))), allColumnLinks.map((links, colIndex) => {
+    var _group$column3PageCar;
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      _react.default.createElement(_PrimaryNavItem.ColumnWrapper, {
+        key: colIndex
+      }, colIndex === 2 && !isNotDesktop && ((_group$column3PageCar = group.column3PageCards) === null || _group$column3PageCar === void 0 ? void 0 : _group$column3PageCar.length) > 0 ? group.column3PageCards.map(card => {
+        var _card$image;
+        return /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.NavCard, {
+          key: card.id,
+          href: (0, _urlHelper.default)(card.primaryPageUrlIfExternal || '', devMode)
+        }, ((_card$image = card.image) === null || _card$image === void 0 ? void 0 : _card$image.url) && /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.NavCardImage, null, /*#__PURE__*/_react.default.createElement("img", {
+          src: card.image.url,
+          alt: card.image.title || card.pageName
+        })), /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.NavCardContent, null, /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.NavCardTitle, null, card.pageName), card.pageDescription && /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.NavCardDescription, null, card.pageDescription)));
+      }) : renderColumnLinks(links, _PrimaryNavItem.SecondaryNavItem))
+    );
+  })), hasSubMenu && isNotDesktop && /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.TertiaryNavMenu, {
+    isOpen: openTertiaryMenu !== null
+  }, activeParentLink && /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.TertiaryNavItem, {
+    $isParent: true
+  }, /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.TertiaryNavLink, {
+    href: (0, _urlHelper.default)(processedLinkUrls[activeParentLink.id], devMode),
+    inline: true,
+    role: "menuitem",
+    $isParent: true
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, activeParentLink.pageName))), activeTertiaryLinks.map(tertiaryLink => /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.TertiaryNavItem, {
+    key: tertiaryLink.id
+  }, /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.TertiaryNavLink, {
+    href: (0, _urlHelper.default)(processedLinkUrls[tertiaryLink.id], devMode),
+    inline: true,
+    role: "menuitem"
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, tertiaryLink.pageName))))));
+};
+var _default = exports.default = PrimaryNavItem;