@comicrelief/component-library 8.54.0 → 8.55.0

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

@@ -0,0 +1,251 @@
+import React, {
+  useState, useEffect, useCallback, useMemo
+} from 'react';
+import PropTypes from 'prop-types';
+
+import Link from '../../../Atoms/Link/Link';
+import Text from '../../../Atoms/Text/Text';
+import BurgerMenu from '../Burger/BurgerMenu';
+import Icon from '../../../Atoms/SocialIcons/Icon/Icon';
+import { breakpointValues2026 } from '../../../../theme/shared/breakpoints2026';
+import {
+  NavHelperNew, NavHelperPrimary, MoreNavPreProcessNew, getColumnLinks
+} from '../../../../utils/navHelper';
+import { InternalLinkHelper } from '../../../../utils/internalLinkHelper';
+import allowListed from '../../../../utils/allowListed';
+import PrimaryNavItem from './PrimaryNavItem';
+import searchIcon from '../assets/search-icon.svg';
+import prependBaseUrl from '../../../../utils/urlHelper';
+
+import {
+  Navigation,
+  PrimaryMenuWrapper,
+  PrimaryMenu,
+  DonateButtonMobileModalWrapper,
+  SearchWrapperMobile,
+  SearchLinkMobile,
+  SearchIconWrapperMobile
+} from './Navs.style';
+
+const Navs = ({
+  navItems = {},
+  characterLimit,
+  isMenuOpen,
+  setIsMenuOpen,
+  devMode = false,
+  onSubMenuChange = () => {},
+  onTertiaryMenuChange = () => {}
+}) => {
+  const { headerPageGroups } = navItems;
+  const [openedSubMenu, setOpenedSubMenu] = useState({});
+  const [isNotDesktop, setIsNotDesktop] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return window.innerWidth < breakpointValues2026.L;
+    }
+    return false;
+  });
+  const [processedItems, setProcessedItems] = useState(null);
+  const [isTertiaryOpen, setIsTertiaryOpen] = 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 = useCallback(() => {
+    setOpenedSubMenu({});
+  }, []);
+
+  // Handle tertiary menu changes from PrimaryNavItem
+  const handleTertiaryMenuChange = useCallback((isOpen, parentName, closeFunction) => {
+    setIsTertiaryOpen(isOpen);
+    onTertiaryMenuChange(isOpen && isNotDesktop, parentName, closeFunction);
+  }, [isNotDesktop, onTertiaryMenuChange]);
+
+  // Notify parent when submenu state changes, passing close function
+  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:
+  useMemo(() => {
+    if (!headerPageGroups) return;
+    // Divide up nav items accordingly
+    const theseItems = MoreNavPreProcessNew(headerPageGroups, characterLimit);
+    setProcessedItems(theseItems);
+  }, [headerPageGroups, characterLimit]);
+
+  // Custom function to let us update the nav dynamically:
+  const screenResizeNav = useCallback(() => {
+    // Grab the current width:
+    const currentScreenWidth = typeof window !== 'undefined' ? window.innerWidth : null;
+
+    // Compare to our breakpoint:
+    const isCurrentlyNotDesktop = currentScreenWidth < 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:
+  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 (
+    <>
+      <Navigation
+        data-testid="Nav"
+        aria-label="main-menu"
+        isMenuOpen={isMenuOpen}
+        role="navigation"
+        id="main-nav"
+      >
+        {/* Unseen accessibility aid */}
+        <Text id="main-menu" tag="h2">Main navigation</Text>
+
+        <PrimaryMenuWrapper data-testid="PrimaryMenuWrapper">
+
+          {/* Only render once we've processed the menu items: */}
+          {processedItems && (
+          // First level of the navigation (ul tag): Parent
+          <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 = NavHelperPrimary(group);
+              const relNoopener = (!allowListed(thisUrl) && 'noopener') || undefined;
+              /* Get all column links for submenu */
+              const columnLinks = getColumnLinks(group);
+              const hasSubMenu = columnLinks.length > 0;
+              const hasPopUp = hasSubMenu ? 'true' : null;
+              thisUrl = 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 (
+                // Secondary Menu is nested inside PrimaryNavItem
+                <PrimaryNavItem
+                  thisID={thisID}
+                  key={group.id}
+                  index={index}
+                  hasSubMenu={hasSubMenu}
+                  openedSubMenu={openedSubMenu}
+                  toggleSubMenu={toggleSubMenu}
+                  hasPopUp={hasPopUp}
+                  isNotDesktop={isNotDesktop}
+                  thisUrl={thisUrl}
+                  group={group}
+                  navHelperNew={NavHelperNew}
+                  internalLinkHelper={InternalLinkHelper}
+                  relNoopener={relNoopener}
+                  devMode={devMode}
+                  onTertiaryMenuChange={handleTertiaryMenuChange}
+                  isTertiaryOpenGlobal={isTertiaryOpen}
+                  isSubMenuOpenGlobal={isSubMenuOpen}
+                />
+              );
+            })}
+
+            {/* Hide search on mobile when secondary or tertiary modals are open */}
+            {!isSubMenuOpen && !isTertiaryOpen && (
+              <SearchWrapperMobile>
+                <SearchLinkMobile href={prependBaseUrl('/search', devMode)}>
+                  Search
+                  <SearchIconWrapperMobile data-testid="SearchIconWrapperMobile">
+                    <Icon
+                      icon={searchIcon}
+                      title="Search"
+                      target="self"
+                      role="button"
+                      href={prependBaseUrl('/search', devMode)}
+                      brand="comicrelief"
+                      tabIndex="0"
+                      id="search"
+                      isHeader
+                    />
+                  </SearchIconWrapperMobile>
+                </SearchLinkMobile>
+              </SearchWrapperMobile>
+            )}
+
+          </PrimaryMenu>
+          )}
+        </PrimaryMenuWrapper>
+
+        {isMenuOpen && !isTertiaryOpen && (
+          <DonateButtonMobileModalWrapper data-testid="donate-button--mobile">
+            <Link
+              color="red"
+              type="button"
+              href="https://donation.comicrelief.com/"
+            >
+              Donate
+            </Link>
+          </DonateButtonMobileModalWrapper>
+        )}
+      </Navigation>
+
+      <BurgerMenu
+        data-testid="BurgerMenu"
+        toggle={toggleBurgerMenu}
+        isMenuOpen={isMenuOpen}
+      />
+    </>
+  );
+};
+
+Navs.propTypes = {
+  navItems: PropTypes.objectOf(PropTypes.shape),
+  characterLimit: PropTypes.number,
+  isMenuOpen: PropTypes.bool,
+  setIsMenuOpen: PropTypes.func,
+  devMode: PropTypes.bool,
+  onSubMenuChange: PropTypes.func,
+  onTertiaryMenuChange: PropTypes.func
+};
+
+export default Navs;

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

@@ -0,0 +1,168 @@
+import styled from 'styled-components';
+
+import Link from '../../../Atoms/Link/Link';
+import hideVisually from '../../../../theme/shared/hideVisually';
+import zIndex from '../../../../theme/shared/zIndex';
+
+const Navigation = styled.nav`
+  display: ${({ isMenuOpen }) => (isMenuOpen ? 'block' : 'none')};
+  width: 100%;
+  position: absolute;
+  top: 75px;
+  left: 0;
+  ${zIndex('higher')};
+
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    ${zIndex('medium')};
+    position: static;
+    top: 0;
+    display: block;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    box-shadow: none;
+  }
+
+  // Accessibility aid
+  > h2 {
+    ${hideVisually};
+  }
+`;
+
+const PrimaryMenuWrapper = styled.div`
+  background-color: ${({ theme }) => theme.color('white')};
+  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05);
+  border-radius: 16px;
+  overflow: hidden;
+  position: static;
+
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    box-shadow: none;
+    border-radius: 0;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: visible;
+  }
+`;
+
+const PrimaryMenu = styled.ul`
+  background-color: transparent;
+  list-style: none outside;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  position: relative
+  border: 1px solid green;
+
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    position: static;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 24px;
+    width: 100%;
+    height: 100%;
+    background-color: ${({ theme }) => theme.color('white')};
+  }
+
+`;
+
+const DonateButtonMobileModalWrapper = styled.div`
+  display: block;
+  background-color: inherit;
+  margin-top: 48px;
+  width: 100%;
+
+  // Donate button
+  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);
+    }
+  }
+
+  // Hide the 'Nav'-embedded version of the button when the nav
+  // goes FULL DESKTOP, leaving just the 'Header'-embedded example
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    display: none;
+  }
+`;
+
+const SearchWrapperMobile = styled.div`
+  display: block;
+  width: 100%;
+  border-top: 1px solid ${({ theme }) => theme.color('grey_medium')};
+
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    display: none;
+  }
+`;
+
+const SearchLinkMobile = styled(Link)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 25px;
+  width: 100%;
+  text-decoration: none;
+  font-family: Montserrat;
+  font-weight: 600;
+  color: ${({ theme }) => theme.color('black')};
+  transition: color 0.2s ease;
+  outline-offset: -3px;
+
+  &:hover,
+  &:focus {
+    color: ${({ theme }) => theme.color('red')};
+    background-color: ${({ theme }) => theme.color('grey_extra_light')};
+  }
+`;
+
+const SearchIconWrapperMobile = styled.div`
+  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 ${({ theme }) => theme.breakpoints2026('L')} {
+    display: none;
+  }
+`;
+
+export {
+  Navigation,
+  PrimaryMenuWrapper,
+  PrimaryMenu,
+  DonateButtonMobileModalWrapper,
+  SearchWrapperMobile,
+  SearchLinkMobile,
+  SearchIconWrapperMobile
+};