@thecb/components 11.2.13 → 11.2.14-beta.0

package/package.json

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

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

@@ -0,0 +1,258 @@
+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

@@ -0,0 +1,138 @@
+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;

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

@@ -4,33 +4,20 @@ 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: {
-    left: "-100vw",
-    right: "100vw",
+    x: "-100vw",
     transition: {
-      right: {
-        ease: "easeOut",
-        duration: 500
-      },
-      left: {
-        ease: "easeOut",
-        duration: 500
-      }
+      ease: "easeOut",
+      duration: 0.5
     }
   },
   visible: {
-    left: "0",
-    right: "0",
+    x: "0",
     transition: {
-      left: {
-        ease: "easeIn",
-        duration: 500
-      },
-      right: {
-        ease: "easeIn",
-        duration: 500
-      }
+      ease: "easeIn",
+      duration: 0.5
     }
   }
 };
@@ -38,6 +25,8 @@ const menuVariants = {
 const ImposterMenu = styled(Motion)`
   position: fixed;
   top: ${({ headerSize }) => headerSize};
+  left: 0;
+  right: 0;
 `;
 
 const NavMenuMobile = ({
@@ -58,7 +47,11 @@ const NavMenuMobile = ({
       <Box
         width="100vw"
         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

@@ -0,0 +1,9 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as NavMenuMobileStories from './NavMenuMobile.stories.js';
+
+<Meta of={NavMenuMobileStories} />
+
+<Title />
+
+<Story />

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

@@ -0,0 +1,124 @@
+import React, { useState } from "react";
+import NavMenuMobile from "./NavMenuMobile";
+// import { Box, Button } from "../../layouts";
+import { Box } from "../../atoms/layouts";
+import { ButtonWithAction } from "../../atoms";
+
+import { fallbackValues } from "./NavMenu.theme";
+
+export default {
+  title: "Molecules/NavMenuMobile",
+  component: NavMenuMobile,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  args: {
+    id: "nav-menu-mobile",
+    menuContent: (
+      <Box>
+        <p>Menu Item 1</p>
+        <p>Menu Item 2</p>
+        <p>Menu Item 3</p>
+      </Box>
+    ),
+    visible: false,
+    headerSize: "72px",
+    themeValues: fallbackValues
+  },
+  argTypes: {
+    id: {
+      description: "Unique identifier for the menu",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "nav-menu-mobile" }
+      }
+    },
+    menuContent: {
+      description: "Content to display inside the menu",
+      table: {
+        type: { summary: "ReactNode" },
+        defaultValue: { summary: "undefined" }
+      }
+    },
+    visible: {
+      description: "Whether the menu is visible",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    headerSize: {
+      description: "Height of the header, used to position the menu",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "72px" }
+      }
+    },
+    themeValues: {
+      description: "Theme values for styling the menu",
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: "fallbackValues" }
+      }
+    }
+  }
+};
+
+export const ProfileMenu = {
+  args: {
+    id: "profile-menu",
+    menuContent: (
+      <Box>
+        <p>Profile Item 1</p>
+        <p>Profile Item 2</p>
+        <p>Profile Item 3</p>
+      </Box>
+    ),
+    visible: false,
+    headerSize: "72px",
+    themeValues: fallbackValues
+  },
+  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);
+    };
+
+    return (
+      <Box>
+        <ButtonWithAction onClick={toggleMenu}>
+          {visible ? "Hide Menu" : "Show Menu"}
+        </ButtonWithAction>
+        <NavMenuMobile {...args} visible={visible} />
+      </Box>
+    );
+  }
+};