@windstream/react-shared-components 0.0.62 → 0.0.64

package/src/contentful/blocks/modal/Modal.stories.tsx

@@ -1,23 +1,23 @@
-import { Modal } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Modal> = {
-  title: "Contentful Blocks/Modal",
-  component: Modal,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component: "Contentful modal block.",
-      },
-    },
-  },
-  args: { fields: {} },
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+import { Modal } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Modal> = {
+  title: "Contentful Blocks/Modal",
+  component: Modal,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful modal block.",
+      },
+    },
+  },
+  args: { fields: {} },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

package/src/contentful/blocks/modal/index.tsx

@@ -1,12 +1,12 @@
-import { ModalProps } from "./types";
-
-import { Text } from "@shared/components/text";
-
-export const Modal: React.FC<{ fields: ModalProps }> = ({ fields }) => {
-  return (
-    <div>
-      <Text>Modal Block</Text>
-    </div>
-  );
-};
-export default Modal;
+import { ModalProps } from "./types";
+
+import { Text } from "@shared/components/text";
+
+export const Modal: React.FC<{ fields: ModalProps }> = ({ fields }) => {
+  return (
+    <div>
+      <Text>Modal Block</Text>
+    </div>
+  );
+};
+export default Modal;

package/src/contentful/blocks/modal/types.ts

@@ -1 +1 @@
-export type ModalProps = {};
+export type ModalProps = {};

package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx

@@ -0,0 +1,111 @@
+import React, { CSSProperties } from "react";
+
+import { Button as CoreButton } from "@shared/components/button";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Text } from "@shared/components/text";
+import { Button } from "@shared/contentful/blocks/button";
+import { ButtonProps as ContentfulButtonProps } from "@shared/contentful/blocks/button/types";
+import { useOutsideClick } from "@shared/hooks/use-outside-click";
+import { cx } from "@shared/utils";
+
+type ComponentButtonGroup = {
+  anchorId?: string | null;
+  title?: string | null;
+  items?: { items?: ContentfulButtonProps[] | null } | null;
+};
+
+type Link = ContentfulButtonProps | ComponentButtonGroup;
+
+type LinkGroupsProps = {
+  link?: Link;
+  anchorName: string;
+};
+
+const isButton = (link: Link): link is ContentfulButtonProps => {
+  // If your group never has `href`, this is a simple and effective guard
+  return typeof (link as ContentfulButtonProps).href === "string";
+};
+
+export const DesktopLinkGroups: React.FC<LinkGroupsProps> = ({
+  link,
+  anchorName,
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const ref = React.useRef<HTMLDivElement>(null);
+  useOutsideClick(ref, () => setIsOpen(false));
+
+  if (!link) return null;
+
+  // Single button
+  if (isButton(link)) {
+    return (
+      <Button
+        key={`submenu-link-btn-${link.anchorId}`}
+        {...link}
+        linkClassName="body3 flex items-center text-text-link h-full"
+        linkVariant="unstyled"
+      />
+    );
+  }
+
+  // Group
+  const { anchorId, title, items } = link;
+  const subMenu = Array.isArray(items?.items) ? items!.items! : [];
+  const fullAnchorName = `--link-anchor-${anchorName}`;
+
+  return (
+    <div
+      className="relative h-full"
+      style={{ anchorName: fullAnchorName } as CSSProperties}
+      ref={ref}
+    >
+      <CoreButton
+        onClick={() => setIsOpen(prev => !prev)}
+        aria-expanded={isOpen}
+        className="group body3 flex h-full items-center"
+        key={anchorId}
+      >
+        <Text as="span" className="group-hover:underline">
+          {title ?? null}
+        </Text>
+        <MaterialIcon
+          weight="700"
+          className="text-icon-info group-hover:opacity-50"
+          name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+        />
+      </CoreButton>
+
+      <div
+        className={cx(
+          "fixed z-10 min-w-44 rounded-xl bg-bg shadow-lg",
+          "transition-[opacity,transform] ease-out",
+          isOpen && subMenu.length > 0
+            ? "pointer-events-auto translate-y-0 opacity-100 duration-75"
+            : "pointer-events-none -translate-y-2 opacity-0 duration-0"
+        )}
+        style={
+          {
+            positionAnchor: fullAnchorName,
+            top: "anchor(bottom)",
+            right: "anchor(right)",
+          } as CSSProperties
+        }
+      >
+        <ul className="flex flex-col gap-2 py-2">
+          {subMenu.map((site, index) => {
+            return (
+              <li key={`submenu-link-${index}`} className="submenu-link">
+                <Button
+                  {...site}
+                  linkVariant="unstyled"
+                  linkClassName="body3 px-4 hover:bg-bg-surface-hover flex items-center w-full h-11 text-text-link"
+                />
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+};

package/src/contentful/blocks/navigation/index.tsx

@@ -1,56 +1,366 @@
-import React from "react";
-import { LinkGroups } from "./link-groups.tsx";
-import { NavigationProps } from "./types";
-
-export const Navigation: React.FC<NavigationProps> = ({
-  // accountNavigationLinks,
-  // callNowCtaIcon,
-  // callNowCtaText,
-  // displayCallNowCta,
-  // displaySearchBar,
-  // displayUtilityNavigation,
-  // navigationBackgroundColor,
-  primaryNavigationLinks,
-  // primaryNavigationLogo,
-  // searchBarIcon,
-  // searchBarPlaceholder,
-  // showCallButton,
-  // showCallNowCtaInMainNav,
-  // showMobileSliderMenu,
-  // supportNavigationLinks,
-  // utilityNavBackgroundColor,
-  // utilityNavLinkColor,
-  utilityNavigationLinks,
-  maxWidth = true,
-}) => {
-  return (
-    <div className="component-container">
-      <div className={`menu-container ${maxWidth ? "mx-auto max-w-120" : ""}`}>
-        <div className="utility-container">
-          <ul className="flex">
-            {utilityNavigationLinks?.map((links, index) => {
-              return (
-                <li key={`main-menu-items-${index}`}>
-                  <LinkGroups link={links} />
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-        <div className="main-nav-container">
-          <ul className="flex">
-            {primaryNavigationLinks?.map((links, index) => {
-              return (
-                <li key={`main-menu-items-${index}`}>
-                  <LinkGroups link={links} />
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-        <div></div>
-      </div>
-    </div>
-  );
-};
-export default Navigation;
+import React, { FormEvent } from "react";
+import { DesktopLinkGroups } from "./desktop-link-groups.tsx";
+import { MobileLinkGroups } from "./mobile-link-groups.tsx";
+import { NavigationProps } from "./types";
+
+import { Button } from "@shared/components/button";
+import { CallButton } from "@shared/components/call-button";
+import { Input } from "@shared/components/input";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { NextImage } from "@shared/components/next-image";
+import { Text } from "@shared/components/text";
+import { Button as ContentfulButton } from "@shared/contentful/blocks/button";
+import { cx } from "@shared/utils";
+
+export const Navigation: React.FC<NavigationProps> = props => {
+  const {
+    primaryNavigationLinks,
+    utilityNavigationLinks,
+    checkPlansJSX,
+    primaryNavigationLogo,
+    accountNavigationLinks,
+    supportNavigationLinks,
+    searchBarIcon,
+    onSearch = () => {},
+  } = props;
+  return (
+    <div className="component-container">
+      <nav className={`menu-container`}>
+        <div className="utility-container hidden lg:block lg:border-b lg:px-2">
+          <div className="mx-auto flex max-w-120 justify-between">
+            <ul className="flex gap-5" aria-label="Utility Navigation">
+              {utilityNavigationLinks?.map((links, index) => {
+                return (
+                  <li key={`main-menu-items-${index}`}>
+                    <ContentfulButton
+                      linkClassName={cx(
+                        "footnote flex items-center w-full h-11 text-text-link",
+                        index === 1 && "label4"
+                      )}
+                      linkVariant="unstyled"
+                      {...(Object.fromEntries(
+                        Object.entries(links).filter(([_, v]) => v !== null)
+                      ) as any)}
+                    />
+                  </li>
+                );
+              })}
+            </ul>
+            <div className="flex items-center gap-10">
+              <CallButton href="tel:1234567890">
+                <Text className="body3">(123) 456-7890</Text>
+              </CallButton>
+              {accountNavigationLinks?.map((links, index) => {
+                return (
+                  <DesktopLinkGroups
+                    key={`my-account-${index}`}
+                    anchorName={`my-account-${index}`}
+                    link={links}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        </div>
+        <div className="main-nav-container" aria-label="Main Navigation">
+          <div className="mobile-nav-section flex h-14 items-center justify-between px-5 py-[10px] lg:hidden">
+            <div>
+              <NextImage
+                src={
+                  typeof primaryNavigationLogo === "string"
+                    ? primaryNavigationLogo
+                    : primaryNavigationLogo?.url || ""
+                }
+                alt="Kinetic business logo"
+                width={76.5}
+                height={24}
+              />
+            </div>
+            <div className="flex items-center gap-6">
+              <CallButton href="tel:1234567890">
+                <Text as="span" className="footnote">
+                  (123) 456-7890
+                </Text>
+              </CallButton>
+              <MobileMenu {...props} />
+            </div>
+          </div>
+
+          <div className="desktop-nav-section hidden lg:block lg:border-b lg:px-2">
+            <div className="mx-auto flex h-14 max-w-120 items-center justify-between">
+              <div className="flex h-full">
+                <NextImage
+                  src={
+                    typeof primaryNavigationLogo === "string"
+                      ? primaryNavigationLogo
+                      : primaryNavigationLogo?.url || ""
+                  }
+                  alt="Kinetic business logo"
+                  width={76.5}
+                  height={24}
+                  className="mr-14"
+                />
+
+                <div className="flex h-full items-center gap-5">
+                  {primaryNavigationLinks?.map((links, index) => {
+                    return (
+                      <DesktopLinkGroups
+                        key={`main-menu-${index}`}
+                        anchorName={`main-menu-${index}`}
+                        link={links}
+                      />
+                    );
+                  })}
+                </div>
+              </div>
+              <div className="flex h-full items-center gap-10">
+                <DesktopSearchInput
+                  searchBarIconURL={
+                    typeof searchBarIcon === "string"
+                      ? searchBarIcon
+                      : searchBarIcon?.url || ""
+                  }
+                  onSearch={onSearch}
+                />
+                {supportNavigationLinks?.map((links, index) => {
+                  return (
+                    <DesktopLinkGroups
+                      key={`support-menu-${index}`}
+                      anchorName={`support-menu-${index}`}
+                      link={links}
+                    />
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      {checkPlansJSX && <div className="md:hidden">{checkPlansJSX}</div>}
+    </div>
+  );
+};
+
+const MobileMenu = (props: NavigationProps) => {
+  const { primaryNavigationLinks, utilityNavigationLinks } = props;
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    if (isOpen) document.body.style.overflowY = "hidden";
+    else document.body.style.overflowY = "unset";
+
+    const element = document.getElementById("drawer-items");
+    if (!element) return;
+
+    const focusableEls = element.querySelectorAll(".focus-item");
+    const firstFocusableEl = focusableEls[0];
+    const lastFocusableEl = focusableEls[focusableEls.length - 1];
+
+    const handleKeyDown = (e: {
+      key: string;
+      keyCode: number;
+      shiftKey: any;
+      preventDefault: () => void;
+    }) => {
+      const isTabPressed = e.key === "Tab" || e.keyCode === 9;
+
+      if (!isTabPressed) return;
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstFocusableEl) {
+          (lastFocusableEl as HTMLButtonElement).focus?.();
+          e.preventDefault();
+        }
+      } else {
+        if (document.activeElement === lastFocusableEl) {
+          (firstFocusableEl as HTMLButtonElement).focus?.();
+          e.preventDefault();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.body.style.overflowY = "unset";
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen]);
+
+  const closeMenu = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <div>
+      <Button className="flex" onClick={() => setIsOpen(true)}>
+        <MaterialIcon name="menu" />
+      </Button>
+      {isOpen ? (
+        <div className="fixed bottom-0 left-0 right-0 top-0 z-[90] h-full w-full bg-scrim-bg-modal"></div>
+      ) : null}
+
+      <div
+        className={cx(
+          "fixed bottom-0 right-0 top-0",
+          "z-[100] h-full bg-bg px-0 py-4",
+          "transition-all duration-300 ease-in-out",
+          "block",
+          isOpen ? "right-0" : "-right-96"
+        )}
+        id="mobile-menu-overlay"
+      >
+        <div id="drawer-items" className="flex h-full flex-col gap-3">
+          <div className="flex items-center justify-between px-4">
+            <div>
+              <CallButton href="tel:1234567890">(123) 456-7890</CallButton>
+            </div>
+            <div>
+              <Button onClick={closeMenu} className="focus-item flex">
+                <MaterialIcon name="close" />
+              </Button>
+            </div>
+          </div>
+          <MobileSearchInput
+            closeMenu={closeMenu}
+            isMenuOpen={isOpen}
+            searchBarIconURL={
+              typeof props.searchBarIcon === "string"
+                ? props.searchBarIcon
+                : props.searchBarIcon?.url || ""
+            }
+            onSearch={props.onSearch || (() => {})}
+          />
+          <div className="flex-grow overflow-y-auto">
+            <ul className="mt-2 flex flex-col gap-2">
+              {primaryNavigationLinks?.map((links, index) => {
+                return (
+                  <li key={`main-menu-items-${index}`}>
+                    <MobileLinkGroups link={links} />
+                  </li>
+                );
+              })}
+            </ul>
+
+            <ul className="mt-2 flex gap-5 bg-bg-fill-info px-4">
+              {utilityNavigationLinks?.map((link, index) => {
+                return (
+                  <li key={`main-menu-items-${index}`}>
+                    <ContentfulButton
+                      key={`submenu-link-btn-${link.anchorId}`}
+                      {...(Object.fromEntries(
+                        Object.entries(link).filter(([_, v]) => v !== null)
+                      ) as any)}
+                      linkClassName={cx(
+                        "footnote flex items-center w-full h-11 text-text-link",
+                        index === 1 && "label4"
+                      )}
+                      linkVariant="unstyled"
+                    />
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const MobileSearchInput = (props: {
+  closeMenu: () => void;
+  onSearch: (query: string) => void;
+  isMenuOpen: boolean;
+  searchBarIconURL: string;
+}) => {
+  const { closeMenu, onSearch, isMenuOpen, searchBarIconURL } = props;
+  const [searchValue, setSearchValue] = React.useState("");
+  const searchInputRef = React.useRef<HTMLInputElement>(null);
+
+  const redirectToSearchResults = (e: FormEvent<HTMLFormElement> | any) => {
+    closeMenu();
+    e.preventDefault();
+    onSearch(searchValue);
+  };
+
+  React.useEffect(() => {
+    if (!isMenuOpen) {
+      setSearchValue("");
+    }
+  }, [isMenuOpen]);
+
+  return (
+    <form
+      name="searchForm"
+      className="flex border-b border-t transition-colors focus-within:border-border-focus"
+      onSubmit={redirectToSearchResults}
+    >
+      <NextImage
+        src={searchBarIconURL}
+        width={32}
+        height={32}
+        alt="Search icon"
+        role="button"
+        className="ml-2"
+        onClick={redirectToSearchResults}
+      />
+      <div className="flex-grow">
+        <Input
+          ref={searchInputRef}
+          className={"h-[34px] rounded-none text-body3 font-medium leading-6"}
+          name="search"
+          placeholder="Search..."
+          value={searchValue}
+          onChange={e => setSearchValue(e.target.value)}
+          autoComplete="off"
+          containerClassName="h-[46px] px-4 pl-0 rounded-none flex-grow border-none"
+        />
+      </div>
+    </form>
+  );
+};
+
+const DesktopSearchInput = (props: {
+  searchBarIconURL: string;
+  onSearch: (query: string) => void;
+}) => {
+  const { searchBarIconURL, onSearch } = props;
+  const [searchValue, setSearchValue] = React.useState("");
+  const searchInputRef = React.useRef<HTMLInputElement>(null);
+
+  const redirectToSearchResults = (e: FormEvent<HTMLFormElement> | any) => {
+    e.preventDefault();
+    onSearch(searchValue);
+  };
+
+  return (
+    <form
+      name="searchForm"
+      className="flex h-9 w-60 rounded-full border transition-colors focus-within:border-border-focus"
+      onSubmit={redirectToSearchResults}
+    >
+      <NextImage
+        src={searchBarIconURL}
+        width={32}
+        height={32}
+        alt="Search icon"
+        role="button"
+        onClick={redirectToSearchResults}
+      />
+      <Input
+        ref={searchInputRef}
+        className={"rounded-full p-0 text-body3 font-medium leading-6"}
+        name="search"
+        placeholder="Search..."
+        value={searchValue}
+        onChange={e => setSearchValue(e.target.value)}
+        autoComplete="off"
+        containerClassName="px-0 h-full border-none rounded-full"
+      />
+    </form>
+  );
+};

package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+
+import { Button as CoreButton } from "@shared/components/button";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Button } from "@shared/contentful/blocks/button";
+import { ButtonProps as ContentfulButtonProps } from "@shared/contentful/blocks/button/types";
+
+type ComponentButtonGroup = {
+  anchorId?: string | null;
+  title?: string | null;
+  items?: { items?: ContentfulButtonProps[] | null } | null;
+};
+
+type Link = ContentfulButtonProps | ComponentButtonGroup;
+
+type LinkGroupsProps = {
+  link?: Link;
+};
+
+const isButton = (link: Link): link is ContentfulButtonProps => {
+  // If your group never has `href`, this is a simple and effective guard
+  return typeof (link as ContentfulButtonProps).href === "string";
+};
+
+export const MobileLinkGroups: React.FC<LinkGroupsProps> = ({ link }) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  if (!link) return null;
+
+  // Single button
+  if (isButton(link)) {
+    return (
+      <Button
+        key={`submenu-link-btn-${link.anchorId}`}
+        {...link}
+        linkClassName="label3 flex items-center w-full h-11 px-4 text-text-link"
+        linkVariant="unstyled"
+      />
+    );
+  }
+
+  // Group
+  const { anchorId, title, items } = link;
+  const subMenu = Array.isArray(items?.items) ? items!.items! : [];
+
+  return (
+    <>
+      <CoreButton
+        onClick={() => setIsOpen(prev => !prev)}
+        aria-expanded={isOpen}
+        className="label3 flex h-11 w-full items-center px-4"
+        key={anchorId}
+      >
+        {title ?? null}
+        <MaterialIcon
+          weight="700"
+          name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+        />
+      </CoreButton>
+      {isOpen && subMenu.length > 0 && <RenderSubMenu items={subMenu} />}
+    </>
+  );
+};
+
+const RenderSubMenu: React.FC<{ items: ContentfulButtonProps[] }> = ({
+  items,
+}) => (
+  <ul key={`submenu-${items.length}`} className="flex flex-col gap-2">
+    {items.map((site, index) => {
+      return (
+        <li key={`submenu-link-${index}`} className="submenu-link">
+          <Button
+            {...site}
+            linkVariant="unstyled"
+            linkClassName="body3 pl-8 pr-4 flex items-center w-full h-11 text-text-link"
+          />
+        </li>
+      );
+    })}
+  </ul>
+);