@windstream/react-shared-components 0.0.28 → 0.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

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

@@ -27,15 +27,15 @@ export const Footer: React.FC<FooterProps> = ({
             <div key={`footer-link-group-${index}`}>
               <div className="site-links-group" key={`link-group-${index}`}>
                 <div>{link?.title}</div>
-                <div className="flex flex-col">
-                  {link?.itemsCollection?.items?.map(
+                <ul className="flex flex-col">
+                  {link?.items?.items?.map(
                     (site: any, _index: number) => (
-                      <div className="pt-3" key={`site-links-${_index}`}>
+                      <li className="pt-3" key={`site-links-${_index}`}>
                         <Button {...site} />
-                      </div>
+                      </li>
                     )
                   )}
-                </div>
+                </ul>
               </div>
               <div
                 className={

package/src/contentful/blocks/navigation/Navigation.stories.tsx

@@ -16,7 +16,7 @@ const meta: Meta<typeof Navigation> = {
       },
     },
   },
-  args: { fields: {} },
+  args: {},
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

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

@@ -1,11 +1,55 @@
+import { LinkGroups } from "./link-groups.tsx";
 import { NavigationProps } from "./types";
-
-import { Text } from "@shared/components/text";
-
-export const Navigation: React.FC<{ fields: NavigationProps }> = ({
-  fields,
+import React from "react";
+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 <Text>Navigation</Text>;
+  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;

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

@@ -0,0 +1,64 @@
+import React from "react";
+import {
+  Button,
+  ButtonProps as ContentfulButtonProps,
+} from "@shared/contentful";
+
+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 LinkGroups: React.FC<LinkGroupsProps> = ({ link }) => {
+  if (!link) return null;
+
+  // Single button
+  if (isButton(link)) {
+    const key = "submenu-link-btn";
+    return (
+      <ul>
+        <li key={key} className="submenu-link">
+          <Button {...link} linkVariant="unstyled" />
+        </li>
+      </ul>
+    );
+  }
+
+  // Group
+  const { anchorId, title, items } = link;
+  const subMenu = Array.isArray(items?.items) ? items!.items! : [];
+
+  const RenderSubMenu: React.FC<{ items: ContentfulButtonProps[] }> = ({
+    items,
+  }) => (
+    <ul>
+      {items.map((site, index) => {
+        const key = `submenu-link-${index}`;
+        return (
+          <li key={key} className="submenu-link">
+            <Button {...site} linkVariant="unstyled" />
+          </li>
+        );
+      })}
+    </ul>
+  );
+
+  return (
+    <div id={anchorId ?? undefined}>
+      <div>{title ?? null}</div>
+      {subMenu.length > 0 && <RenderSubMenu items={subMenu} />}
+    </div>
+  );
+};

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

@@ -1 +1,21 @@
-export type NavigationProps = {};
+export type NavigationProps = {
+    primaryNavigationLogo?: string;
+    primaryNavigationLinks?: Array<any>;
+    supportNavigationLinks?: Array<any>;
+    utilityNavigationLinks?: Array<any>;
+    accountNavigationLinks?: Array<any>;
+    searchBarIcon?: string;
+    searchBarPlaceholder?: string;
+    navigationBackgroundColor?: string;
+    utilityNavBackgroundColor?: string;
+    utilityNavLinkColor?: string;
+    callNowCtaText?: string;
+    callNowCtaIcon?: string;
+    displaySearchBar?: boolean;
+    displayCallNowCta?: boolean;
+    displayUtilityNavigation?: boolean;
+    showCallButton?: boolean;
+    showMobileSliderMenu?: boolean;
+    showCallNowCtaInMainNav?: boolean;
+    maxWidth?: boolean;
+};