@thecb/components 11.2.14-beta.0 → 11.2.14-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.2.14-beta.0",
+  "version": "11.2.14-beta.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/nav-menu/NavMenuMobile.js

@@ -4,7 +4,6 @@ import { Box, Motion } from "../../atoms/layouts";
 import { fallbackValues } from "./NavMenu.theme.js";
 import { themeComponent } from "../../../util/themeUtils";
 
-// Use transforms (x) rather than left/right
 const menuVariants = {
   invisible: {
     x: "-100vw",
@@ -23,17 +22,23 @@ const menuVariants = {
 };
 
 const ImposterMenu = styled(Motion)`
+  /* Overlay starts below the header */
   position: fixed;
-  top: ${({ headerSize }) => headerSize};
+  // This isn't working top: ${({ headerSize }) => headerSize};
+  top: 74px;
   left: 0;
   right: 0;
+  bottom: 0;
+  /* Dim background for everything below the navbar */
+  background: ${({ themeValues }) =>
+    themeValues?.overlayColor || "rgba(0, 0, 0, 0.5)"};
 `;
 
 const NavMenuMobile = ({
   id,
   menuContent = [],
   visible = false,
-  headerSize = "72px",
+  headerSize = "74px",
   themeValues
 }) => {
   return (
@@ -43,15 +48,17 @@ const NavMenuMobile = ({
       initial="invisible"
       animate={visible ? "visible" : "invisible"}
       headerSize={headerSize}
+      themeValues={themeValues}
     >
+      {/*
+        The Box is the “menu” portion.
+        It’s narrower, but the parent ImposterMenu is full-screen & gray.
+      */}
       <Box
-        width="100vw"
+        width="100%"
+        maxWidth="400px"
         padding="1rem 0.5rem"
-        extraStyles={`
-          position: relative;
-          max-width: 400px;
-          height: calc(100vh - 72px);
-        `}
+        extraStyles={`position: relative; max-width: 400px; height: calc(100vh - 72px);`}
         background={themeValues.backgroundColor}
       >
         {menuContent}

package/src/components/molecules/nav-menu/NavMenuMobile.mdx

@@ -2,8 +2,20 @@ import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
 
 import * as NavMenuMobileStories from './NavMenuMobile.stories.js';
 
+<Story />
+
 <Meta of={NavMenuMobileStories} />
 
 <Title />
 
-<Story />
+The `NavMenuMobile` component is a responsive navigation menu designed specifically for mobile devices. It provides a clean and accessible interface for navigating through application sections. The menu can be toggled open or closed and supports customizable content and themes.
+
+<Controls />
+
+
+### Features
+
+- **Customizable Content**: The `menuContent` prop allows you to define the content displayed inside the menu.
+- **Theming**: The component supports theming via the `themeValues` prop, enabling you to style the menu to match your application's design system.
+- **Visibility Control**: The `visible` prop determines whether the menu is displayed, making it easy to toggle programmatically.
+- **Header Positioning**: The `headerSize` prop ensures the menu is positioned correctly relative to the header.

package/src/components/molecules/nav-menu/NavMenuMobile.stories.js

@@ -1,9 +1,7 @@
 import React, { useState } from "react";
 import NavMenuMobile from "./NavMenuMobile";
-// import { Box, Button } from "../../layouts";
-import { Box } from "../../atoms/layouts";
-import { ButtonWithAction } from "../../atoms";
-
+import { Box, Cluster } from "../../atoms/layouts";
+import { HamburgerButton } from "../../atoms";
 import { fallbackValues } from "./NavMenu.theme";
 
 export default {
@@ -24,7 +22,7 @@ export default {
       </Box>
     ),
     visible: false,
-    headerSize: "72px",
+    headerSize: "74px",
     themeValues: fallbackValues
   },
   argTypes: {
@@ -53,7 +51,7 @@ export default {
       description: "Height of the header, used to position the menu",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "72px" }
+        defaultValue: { summary: "74px" }
       }
     },
     themeValues: {
@@ -66,59 +64,37 @@ export default {
   }
 };
 
-export const ProfileMenu = {
+export const BasicMenu = {
   args: {
-    id: "profile-menu",
+    id: "basic-menu",
+    headerSize: "74px",
+    themeValues: fallbackValues,
     menuContent: (
-      <Box>
-        <p>Profile Item 1</p>
-        <p>Profile Item 2</p>
-        <p>Profile Item 3</p>
-      </Box>
-    ),
-    visible: false,
-    headerSize: "72px",
-    themeValues: fallbackValues
+      <>
+        <p>Nav Item 1</p>
+        <p>Nav Item 2</p>
+        <p>Nav Item 3</p>
+      </>
+    )
   },
   render: args => {
-    const [visible, setVisible] = useState(false);
-
-    const toggleMenu = () => {
-      setVisible(prev => !prev);
-    };
-
-    return (
-      <Box>
-        <ButtonWithAction onClick={toggleMenu}>
-          {visible ? "Hide Menu" : "Show Menu"}
-        </ButtonWithAction>
-        <NavMenuMobile {...args} visible={visible} />
-      </Box>
-    );
-  }
-};
-
-export const DefaultMenu = {
-  args: {
-    visible: true
-  }
-};
-
-export const InteractiveMenu = {
-  render: args => {
-    const [visible, setVisible] = useState(false);
-
-    const toggleMenu = () => {
-      setVisible(prev => !prev);
-    };
-
+    const [navMenuOpen, setNavMenuOpen] = useState(false);
     return (
-      <Box>
-        <ButtonWithAction onClick={toggleMenu}>
-          {visible ? "Hide Menu" : "Show Menu"}
-        </ButtonWithAction>
-        <NavMenuMobile {...args} visible={visible} />
-      </Box>
+      <>
+        <Cluster
+          extraStyles="width: 100%; height: 100vh;"
+          justify="center"
+          align="center"
+        >
+          <HamburgerButton
+            isActive={navMenuOpen}
+            onClick={() => setNavMenuOpen(!navMenuOpen)}
+            activeColor={args.themeValues.backgroundColor.profile}
+            inactiveColor={args.themeValues.backgroundColor.profile}
+          />
+        </Cluster>
+        <NavMenuMobile {...args} visible={navMenuOpen} />
+      </>
     );
   }
 };

package/src/components/molecules/nav-menu/LinkMenu.js

@@ -1,258 +0,0 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState
-} from "react";
-import { test } from "ramda";
-import {
-  Box,
-  Cluster,
-  constants,
-  Stack,
-  Paragraph,
-  ExternalLink,
-  InternalLink,
-  Switcher,
-  withWindowSize
-} from "@thecb/components";
-import { ThemeContext } from "styled-components";
-import { URL_TEST } from "../../../constants/regex_constants";
-import HeaderItem from "./HeaderItem";
-import RightArrowIcon from "../../icons/RightArrowIcon";
-import NavLabel from "./NavLabel";
-import NavLink, { NavLinkLevels } from "./NavLink";
-import { getCallToActionInfo } from "../../../util/dataAdapters";
-
-const KEY_ARROW_DOWN = 40;
-const KEY_ARROW_UP = 38;
-const KEY_TAB = 9;
-
-const Link = ({ url, id, onSetRef, children }) => {
-  return test(URL_TEST, url) ? (
-    <ExternalLink href={url} ref={element => onSetRef(id, element)}>
-      {children}
-    </ExternalLink>
-  ) : (
-    <InternalLink to={url} ref={element => onSetRef(id, element)}>
-      {children}
-    </InternalLink>
-  );
-};
-
-const LinkMenu = ({
-  link,
-  onChangeMenu,
-  hamburgerMenuStyle,
-  kbNavUsed,
-  themeValues
-}) => {
-  const { isMobile } = useContext(ThemeContext);
-  const linkElements = useRef({});
-  const [focusLink, setFocusLink] = useState(-1);
-
-  const setElementFocus = key => {
-    if (kbNavUsed) {
-      linkElements.current[key].focus();
-    }
-  };
-
-  const handleSetRef = useCallback((id, element) => {
-    return (linkElements.current[id] = element);
-  }, []);
-
-  useEffect(() => {
-    const ref1Key = Object.keys(linkElements.current)[0];
-    setElementFocus(ref1Key);
-    setFocusLink(0);
-  }, []);
-
-  const SmallLink = ({ text, showArrow = false }) => (
-    <Cluster justify="flex-start" align="center">
-      <Paragraph variant={isMobile ? "p" : "pS"} color={themeValues.linkColor}>
-        {text}
-      </Paragraph>
-      {showArrow && <RightArrowIcon size={18} color={themeValues.linkColor} />}
-    </Cluster>
-  );
-
-  const handleKeyDown = event => {
-    switch (event.keyCode) {
-      case KEY_TAB:
-        event.preventDefault();
-        onChangeMenu(event.shiftKey ? "previous" : "next");
-        break;
-      case KEY_ARROW_DOWN:
-      case KEY_ARROW_UP:
-        event.preventDefault();
-        const increment = event.keyCode === KEY_ARROW_DOWN ? 1 : -1;
-        const length = Object.keys(linkElements.current).length;
-        const newFocus = (focusLink + (increment % length) + length) % length;
-        const newFocusKey = Object.keys(linkElements.current)[newFocus];
-        setFocusLink(newFocus);
-        setElementFocus(newFocusKey);
-        break;
-      default:
-        break;
-    }
-  };
-
-  const renderSubLinkSectionName = subLink => {
-    const { ctaUrl: subLinkUrl } = getCallToActionInfo(
-      subLink.callToActionLink,
-      "",
-      subLink.nameUrl
-    );
-    if (hamburgerMenuStyle) {
-      return subLinkUrl ? (
-        <NavLink
-          url={subLinkUrl}
-          label={subLink.name}
-          themeValues={themeValues}
-          navLevel={NavLinkLevels.SUB_MENU}
-        />
-      ) : (
-        <NavLabel text={subLink.name} themeValues={themeValues} navLevel={1} />
-      );
-    } else {
-      return subLinkUrl ? (
-        <Link url={subLinkUrl} id={subLink.id} onSetRef={handleSetRef}>
-          <HeaderItem
-            name={subLink?.name}
-            showArrow={!hamburgerMenuStyle}
-            themeValues={themeValues}
-          />
-        </Link>
-      ) : (
-        <HeaderItem
-          name={subLink?.name}
-          showArrow={false}
-          themeValues={themeValues}
-        />
-      );
-    }
-  };
-
-  const renderSubLinkLink = (smallLink, index) => {
-    if (hamburgerMenuStyle) {
-      return (
-        <NavLink
-          key={`navlink-${index}`}
-          url={smallLink.externalUrl}
-          label={smallLink.text}
-          themeValues={themeValues}
-          navLevel={NavLinkLevels.DETAIL}
-        />
-      );
-    } else {
-      return (
-        <Box padding={"0"} key={`link-${index}`}>
-          <Link
-            url={smallLink.externalUrl}
-            id={smallLink.id}
-            onSetRef={handleSetRef}
-          >
-            <SmallLink text={smallLink.text} />
-          </Link>
-        </Box>
-      );
-    }
-  };
-
-  const { ctaUrl } = getCallToActionInfo(
-    link.callToActionLink,
-    "",
-    link.nameUrl
-  );
-
-  return (
-    <Box
-      padding={hamburgerMenuStyle ? "16px 0" : "0"}
-      background={
-        hamburgerMenuStyle ? constants.colors.ATHENS_GREY : "transparent"
-      }
-      onKeyDown={handleKeyDown}
-      extraStyles={
-        hamburgerMenuStyle ? "margin-left: 16px; margin-right: 16px;" : ""
-      }
-    >
-      <Switcher breakpoint="45rem" largeChild="1" largeChildSize="2">
-        {hamburgerMenuStyle ? (
-          <Box padding={hamburgerMenuStyle ? "0 16px 16px" : 0}>
-            <Paragraph variant="pS" color={constants.colors.CHARADE_GREY}>
-              {link?.description}
-            </Paragraph>
-          </Box>
-        ) : (
-          <Box key="title-desc" padding={"0 16px 0 4px"}>
-            <Stack childGap="8px">
-              <Box padding="0">
-                {ctaUrl ? (
-                  <Box padding="0">
-                    <Link url={ctaUrl} id={link.id} onSetRef={handleSetRef}>
-                      <HeaderItem
-                        name={link?.name}
-                        showArrow={!hamburgerMenuStyle}
-                        themeValues={themeValues}
-                      />
-                    </Link>
-                  </Box>
-                ) : (
-                  <HeaderItem
-                    name={link?.name}
-                    showArrow={ctaUrl !== ""}
-                    themeValues={themeValues}
-                  />
-                )}
-              </Box>
-              <Box padding={"16px 24px 16px 0"}>
-                <Paragraph variant="pS">{link?.description}</Paragraph>
-              </Box>
-            </Stack>
-          </Box>
-        )}
-        {link?.linkLists?.map((subLink, index) => (
-          <Box
-            padding={hamburgerMenuStyle ? "0" : "0 24px"}
-            key={`subLink-${index}`}
-          >
-            <Stack childGap={"1rem"}>
-              {renderSubLinkSectionName(subLink)}
-              {subLink?.links?.map((smallLink, index) =>
-                renderSubLinkLink(smallLink, index)
-              )}
-            </Stack>
-          </Box>
-        ))}
-        <Box padding={hamburgerMenuStyle ? "16px 0" : "0 24px"}>
-          <Stack childGap={"1rem"}>
-            <Box padding={"0"}>
-              {hamburgerMenuStyle ? (
-                <NavLabel
-                  text={"Featured Services"}
-                  themeValues={themeValues}
-                  navLevel={1}
-                />
-              ) : (
-                <HeaderItem
-                  name="Featured Services"
-                  showArrow={false}
-                  themeValues={themeValues}
-                  color={themeValues.linkColor}
-                  weight={constants.fontWeights.FONT_WEIGHT_SEMIBOLD}
-                  variant="p"
-                />
-              )}
-            </Box>
-            {link?.featuredLinks?.links?.map((featuredLink, index) =>
-              renderSubLinkLink(featuredLink, index)
-            )}
-          </Stack>
-        </Box>
-      </Switcher>
-    </Box>
-  );
-};
-
-export default withWindowSize(LinkMenu);

package/src/components/molecules/nav-menu/NavLinks.js

@@ -1,138 +0,0 @@
-import React, { useContext } from "react";
-import { Box, Cover, Heading, Motion, withWindowSize } from "@thecb/components";
-import { ThemeContext } from "styled-components";
-import LinkMenu from "./LinkMenu";
-import HamburgerNavSection from "./HamburgerNavSection";
-import { borderWrapper } from "./style";
-
-const NavLinks = ({
-  navigation,
-  hamburgerMenuStyle,
-  themeValues,
-  navMenuOpen,
-  hamburgerOpenSection,
-  selectedNavMenu,
-  setSearchMenuOpen,
-  setSelectedMenu,
-  setNavMenuOpen,
-  setIsAnimating,
-  setKeyboardNavUsed,
-  setHamburgerOpenSection
-}) => {
-  const { isMobile } = useContext(ThemeContext);
-  const selectMenu = (index, kbNavUsed) => {
-    setKeyboardNavUsed(kbNavUsed);
-    if (navMenuOpen !== true) {
-      setSearchMenuOpen(false);
-      setSelectedMenu(index);
-      setNavMenuOpen(true);
-      setIsAnimating(true);
-      setTimeout(() => {
-        setIsAnimating(false);
-      }, 600);
-    } else if (selectedNavMenu !== index) {
-      setSelectedMenu(index);
-      setSearchMenuOpen(false);
-    }
-  };
-
-  return (
-    <>
-      {navigation?.sections?.map((link, index) => {
-        debugger;
-        return (
-          <Box
-            padding="0"
-            key={`nav-link-${index}`}
-            extraStyles={!hamburgerMenuStyle && `height: 102px;`}
-          >
-            <Cover
-              singleChild
-              minHeight={isMobile ? "0%" : "100%"}
-              key={`section-${index}`}
-            >
-              {hamburgerMenuStyle ? (
-                <HamburgerNavSection
-                  link={link}
-                  toggleSection={() => {
-                    link?.id === hamburgerOpenSection
-                      ? setHamburgerOpenSection("")
-                      : setHamburgerOpenSection(link?.id);
-                  }}
-                  isOpen={hamburgerOpenSection === link?.id}
-                  name={link?.name}
-                  themeValues={themeValues}
-                >
-                  <Motion
-                    padding="0"
-                    transition={{ duration: 0.3 }}
-                    positionTransition
-                    extraStyles={`transform-origin: 100% 0;`}
-                  >
-                    <LinkMenu
-                      key={link.id}
-                      link={link}
-                      hamburgerMenuStyle={hamburgerMenuStyle}
-                      themeValues={themeValues}
-                      kbNavUsed={false}
-                      onChangeMenu={() => {
-                        setNavMenuOpen(false);
-                        setSelectedMenu(100);
-                      }}
-                    />
-                  </Motion>
-                </HamburgerNavSection>
-              ) : (
-                <Box
-                  padding="0"
-                  as="button"
-                  background="transparent"
-                  tabIndex="0"
-                  onClick={() => {
-                    setSearchMenuOpen(false);
-                    setSelectedMenu(index);
-                    setNavMenuOpen(!navMenuOpen);
-                    setIsAnimating(true);
-                    setTimeout(() => {
-                      setIsAnimating(false);
-                    }, 600);
-                  }}
-                  onMouseEnter={() => selectMenu(index, false)}
-                  onFocus={() => selectMenu(index, true)}
-                >
-                  <Box padding="0 1.5rem">
-                    <Heading
-                      variant="h6"
-                      color={isMobile ? "#FFFFFF" : themeValues.linkColor}
-                      extraStyles={
-                        isMobile ? "font-size: 14px;" : `font-size: 16px;`
-                      }
-                    >
-                      {link?.name}
-                    </Heading>
-                  </Box>
-                </Box>
-              )}
-              {!hamburgerMenuStyle && (
-                <Motion
-                  padding="0"
-                  minWidth="100%"
-                  variants={borderWrapper}
-                  animate={navMenuOpen ? "open" : "closed"}
-                  layoutTransition
-                  extraStyles={`border-bottom: 3px solid ${
-                    selectedNavMenu === index
-                      ? `${themeValues.linkColor}`
-                      : `transparent`
-                  }`}
-                />
-              )}
-            </Cover>
-          </Box>
-        );
-      })}
-    </>
-  );
-};
-
-export default NavLinks;