@axos-web-dev/shared-components 2.0.0-dev.2 → 2.0.0-dev.2-nav-0

package/dist/NavigationMenu/SignInNavButton.js

@@ -109,10 +109,10 @@ import "next/navigation.js";
 /* empty css                                         */
 /* empty css                                              */
 /* empty css                                                 */
-import "next/link.js";
 import { main_nav_link, highlight, Sign_in_btn, signin_subheader } from "./AxosBank/NavBar.css.js";
 import styles from "./AxosBank/NavBar.module.js";
-import { getNavItems } from "./AxosBank/NavData.js";
+import "next/link.js";
+import "./AxosBank/Menu.js";
 /* empty css                                      */
 /* empty css                                       */
 /* empty css                                   */
@@ -130,6 +130,7 @@ import "../StepItemSet/StepItemSet.css.js";
 /* empty css                                                  */
 /* empty css                                                */
 /* empty css                                              */
+import { getNavItems } from "./AxosBank/NavData.js";
 const SignInNavButton = () => {
   const { resolveUrl } = useGlobalContext();
   const navItems = getNavItems(resolveUrl);

package/dist/NavigationMenu/utils.d.ts

@@ -0,0 +1,465 @@
+export interface Logo {
+    id: string;
+    url: string;
+    alt: string;
+}
+export interface NavItem {
+    id: string;
+    url: string;
+    label: string;
+    descriptiveTextAriaLabel?: string;
+    icon?: string | undefined;
+    ariaLabel?: string | undefined;
+    target?: any;
+}
+export interface NavItems extends NavItem {
+    items?: NavItems[];
+    subItems?: NavItems[];
+    menuItems?: Menu;
+    hasMenu?: boolean;
+    rightSide?: boolean | undefined;
+    dropdown?: boolean | undefined;
+    displayInNavigation?: boolean | undefined;
+}
+export interface SubNavItems extends NavItem {
+    subItems: (NavItems | NavItem | undefined)[];
+    menuItems?: Menu;
+    hasMenu?: boolean;
+    dropdown: boolean | undefined;
+    rightSide?: boolean | undefined;
+    displayInNavigation?: boolean | undefined;
+}
+export interface Navigation {
+    subNavBar?: SubNavItems[];
+    logo?: Logo;
+    quickLinks: NavItem[];
+}
+export interface Menu {
+    target: Record<string, unknown>;
+    heading: string;
+    bannerHeading: string;
+    bannerDescription: string;
+    helpAndSupportLink?: string;
+    bannerImage: {
+        fields: {
+            title: string;
+            file: {
+                url: string;
+                details: {
+                    size: number;
+                    image: {
+                        width: number;
+                        height: number;
+                    };
+                };
+                fileName: string;
+                contentType: string;
+            };
+        };
+    };
+    bannerCta: {
+        id: string;
+        label: string;
+        url: string;
+        ariaLabel: string;
+    };
+    subItems?: NavItems[];
+}
+export interface PrimaryMenu {
+    sys: {
+        id: string;
+        contentType: {
+            sys: {
+                id: "primaryNavigation";
+            };
+        };
+    };
+    fields: {
+        display: string;
+        displayInNavigation: boolean;
+        rightSide: boolean;
+        dropdown: boolean;
+        target: {
+            sys: {
+                id: string;
+                contentType: {
+                    sys: {
+                        id: string;
+                    };
+                };
+            };
+            fields: {
+                displayText: string;
+                targetUrl: string;
+                descriptiveTextAriaLabel: string;
+                icon: {
+                    fields: {
+                        image: {
+                            fields: {
+                                file: {
+                                    url: string;
+                                };
+                            };
+                        };
+                    };
+                };
+            };
+        };
+        children: Array<PrimaryChildrens>;
+    };
+}
+export interface QuickLink {
+    sys: {
+        id: string;
+        contentType: {
+            sys: {
+                id: string;
+            };
+        };
+    };
+    fields: {
+        displayText: string;
+        targetUrl: string;
+        descriptiveTextAriaLabel: string;
+        icon: {
+            fields: {
+                image: {
+                    fields: {
+                        file: {
+                            url: string;
+                        };
+                    };
+                };
+            };
+        };
+    };
+}
+export interface HyperLinkType {
+    sys: {
+        id: string;
+        contentType: {
+            sys: {
+                id: "hyperlink";
+            };
+        };
+    };
+    fields: {
+        displayText: string;
+        targetUrl: string;
+        descriptiveTextAriaLabel: string;
+    };
+}
+export interface CallToActionType {
+    sys: {
+        id: string;
+        contentType: {
+            sys: {
+                id: "hyperlink";
+            };
+        };
+    };
+    fields: {
+        displayText: string;
+        targetUrl: string;
+        descriptiveTextAriaLabel: string;
+        icon: {
+            fields: {
+                image: {
+                    fields: {
+                        file: {
+                            url: string;
+                        };
+                    };
+                };
+            };
+        };
+    };
+}
+export interface TertiaryMenu {
+    sys: {
+        id: string;
+        contentType: {
+            sys: {
+                id: "tertiaryNavigation";
+            };
+        };
+    };
+    fields: {
+        displayText?: string;
+        target: CallToActionType;
+        descriptiveTextAriaLabel?: string;
+        children: Array<HyperLinkType>;
+        targetUrl?: string;
+        icon: {
+            fields: {
+                file: {
+                    url: string;
+                };
+            };
+        };
+    };
+}
+export interface SecondaryMenu {
+    sys: {
+        id: string;
+        contentType: {
+            sys: {
+                id: "secondaryNavigation";
+            };
+        };
+    };
+    fields: {
+        display: string;
+        target: HyperLinkType;
+        children: Array<TertiaryMenu>;
+        heading: string;
+        bannerHeading: string;
+        bannerDescription: string;
+        helpAndSupportLink?: string;
+        bannerImage: {
+            fields: {
+                title: string;
+                file: {
+                    url: string;
+                    details: {
+                        size: number;
+                        image: {
+                            width: number;
+                            height: number;
+                        };
+                    };
+                    fileName: string;
+                    contentType: string;
+                };
+            };
+        };
+        bannerCtaLinks?: Array<{
+            sys: {
+                id: string;
+                type: string;
+            };
+            fields: {
+                displayText: string;
+                targetUrl: string;
+                descriptiveTextAriaLabel: string;
+            };
+        }>;
+    };
+}
+type PrimaryChildrens = SecondaryMenu | HyperLinkType;
+export interface MenuObject {
+    sys: {
+        id: string;
+        contentType: {
+            sys: {
+                id: string;
+            };
+        };
+    };
+    fields: {
+        label: string;
+        description: string;
+        display: string;
+        target: Array<{
+            sys: {
+                id: string;
+                contentType: {
+                    sys: {
+                        id: string;
+                    };
+                };
+            };
+            fields: {
+                displayText: string;
+                targetUrl: string;
+                descriptiveTextAriaLabel: string;
+            };
+        }>;
+        logo: {
+            sys: {
+                id: string;
+                type: string;
+            };
+            fields: {
+                title: string;
+                image: {
+                    fields: {
+                        file: {
+                            url: string;
+                        };
+                    };
+                };
+            };
+        };
+        quickLinks: Array<{
+            sys: {
+                id: string;
+                contentType: {
+                    sys: {
+                        id: string;
+                    };
+                };
+            };
+            fields: {
+                displayText: string;
+                targetUrl: string;
+                descriptiveTextAriaLabel: string;
+                icon: {
+                    fields: {
+                        image: {
+                            fields: {
+                                file: {
+                                    url: string;
+                                };
+                            };
+                        };
+                    };
+                };
+            };
+        }>;
+        children: PrimaryMenu[];
+    };
+}
+export declare const getFirstLevelMenuItems: (menuData: MenuObject) => ({
+    id: string;
+    label: string;
+    url: string;
+    descriptiveTextAriaLabel: string;
+    rightSide: boolean;
+    dropdown: boolean;
+} | {
+    id?: undefined;
+    label?: undefined;
+    url?: undefined;
+    descriptiveTextAriaLabel?: undefined;
+    rightSide?: undefined;
+    dropdown?: undefined;
+})[];
+export declare const getLogo: (menuData: MenuObject) => {
+    id: string;
+    url: string;
+    alt: string;
+};
+export declare const getQuickLinks: (menuData: MenuObject) => NavItem[];
+export declare const extractChildrenTargets: (children: PrimaryChildrens[]) => (NavItem | {
+    id: string;
+    label: string;
+    url: string;
+    hasMenu: boolean;
+    descriptiveTextAriaLabel: string;
+    menuItems: {
+        target: {
+            displayText: string;
+            targetUrl: string;
+            descriptiveTextAriaLabel: string;
+            id: string;
+        };
+        heading: string;
+        bannerHeading: string;
+        bannerDescription: string;
+        helpAndSupportLink: string | undefined;
+        bannerImage: {
+            fields: {
+                title: string;
+                file: {
+                    url: string;
+                    details: {
+                        size: number;
+                        image: {
+                            width: number;
+                            height: number;
+                        };
+                    };
+                    fileName: string;
+                    contentType: string;
+                };
+            };
+        };
+        bannerCta: {
+            id: string;
+            label: string;
+            url: string;
+            ariaLabel: string;
+        }[] | undefined;
+        subItems: {
+            items: {
+                id: string;
+                label: string;
+                descriptiveTextAriaLabel: string;
+                url: string;
+                icon: string;
+            }[];
+            id: string;
+            label: string;
+            icon: string;
+            descrictiveTextAriaLabel: string;
+            url: string;
+        }[];
+    };
+} | undefined)[];
+export declare const getNavMenuItems: (menuData: MenuObject) => {
+    id: string;
+    label: string;
+    url: string;
+    descriptiveTextAriaLabel: string;
+    dropdown: boolean;
+    rightSide: boolean;
+    displayInNavigation: boolean;
+    subItems: (NavItem | {
+        id: string;
+        label: string;
+        url: string;
+        hasMenu: boolean;
+        descriptiveTextAriaLabel: string;
+        menuItems: {
+            target: {
+                displayText: string;
+                targetUrl: string;
+                descriptiveTextAriaLabel: string;
+                id: string;
+            };
+            heading: string;
+            bannerHeading: string;
+            bannerDescription: string;
+            helpAndSupportLink: string | undefined;
+            bannerImage: {
+                fields: {
+                    title: string;
+                    file: {
+                        url: string;
+                        details: {
+                            size: number;
+                            image: {
+                                width: number;
+                                height: number;
+                            };
+                        };
+                        fileName: string;
+                        contentType: string;
+                    };
+                };
+            };
+            bannerCta: {
+                id: string;
+                label: string;
+                url: string;
+                ariaLabel: string;
+            }[] | undefined;
+            subItems: {
+                items: {
+                    id: string;
+                    label: string;
+                    descriptiveTextAriaLabel: string;
+                    url: string;
+                    icon: string;
+                }[];
+                id: string;
+                label: string;
+                icon: string;
+                descrictiveTextAriaLabel: string;
+                url: string;
+            }[];
+        };
+    } | undefined)[];
+}[];
+export {};

package/dist/NavigationMenu/utils.js

@@ -0,0 +1,112 @@
+const getFirstLevelMenuItems = (menuData) => {
+  if (!menuData.fields?.children) return [];
+  return menuData.fields?.children?.map(
+    ({ fields, sys }) => fields?.target !== void 0 ? {
+      id: sys.id || sys.id,
+      label: fields.target.fields.displayText,
+      url: fields.target.fields.targetUrl,
+      descriptiveTextAriaLabel: fields?.target.fields.descriptiveTextAriaLabel,
+      rightSide: !!fields.rightSide,
+      dropdown: fields?.dropdown
+    } : {}
+  );
+};
+const getLogo = (menuData) => {
+  const { fields } = menuData;
+  return {
+    id: fields?.logo?.sys?.id,
+    url: fields?.logo?.fields?.image?.fields?.file?.url,
+    alt: fields?.logo?.fields?.title
+  };
+};
+const transformPrimaryNavigation = (item) => {
+  const { sys, fields } = item;
+  return {
+    id: sys.id,
+    label: fields.display,
+    url: fields?.target?.fields?.targetUrl,
+    hasMenu: fields.children && fields.children.length > 0,
+    descriptiveTextAriaLabel: fields.target?.fields.descriptiveTextAriaLabel,
+    menuItems: {
+      target: { id: fields.target?.sys?.id, ...fields?.target?.fields },
+      heading: fields.heading,
+      bannerHeading: fields.bannerHeading,
+      bannerDescription: fields.bannerDescription,
+      helpAndSupportLink: fields.helpAndSupportLink,
+      bannerImage: fields?.bannerImage,
+      bannerCta: fields?.bannerCtaLinks?.map(({ sys: sys2, fields: fields2 }) => ({
+        id: sys2.id,
+        label: fields2.displayText,
+        url: fields2.targetUrl,
+        ariaLabel: fields2.descriptiveTextAriaLabel
+      })),
+      subItems: fields?.children?.length > 0 ? fields.children?.map(({ fields: menuFields, sys: menuSys }) => {
+        const target = {
+          id: menuSys.id,
+          label: menuFields?.target?.fields?.displayText ?? menuFields?.displayText,
+          icon: menuFields?.icon?.fields?.file?.url,
+          descrictiveTextAriaLabel: menuFields?.target?.fields?.descriptiveTextAriaLabel ?? menuFields.descriptiveTextAriaLabel,
+          url: menuFields?.target?.fields?.targetUrl ?? menuFields.targetUrl
+        };
+        const items = menuFields?.children?.map((item2) => {
+          return {
+            id: item2.sys.id,
+            label: item2.fields.displayText,
+            descriptiveTextAriaLabel: item2.fields.descriptiveTextAriaLabel,
+            url: item2.fields.targetUrl,
+            icon: menuFields?.icon?.fields?.file?.url
+          };
+        });
+        return {
+          ...target,
+          items
+        };
+      }) : []
+    }
+  };
+};
+const getQuickLinks = (menuData) => {
+  return menuData?.fields?.quickLinks?.map(({ fields, sys }) => ({
+    id: sys.id,
+    label: fields?.displayText,
+    url: fields?.targetUrl,
+    ariaLabel: fields?.descriptiveTextAriaLabel ?? "",
+    icon: fields?.icon?.fields?.image?.fields?.file?.url
+  }));
+};
+const extractChildrenTargets = (children) => {
+  if (!children) return [];
+  return children?.map((child) => {
+    if (child?.sys?.contentType?.sys?.id === "secondaryNavigation") {
+      return transformPrimaryNavigation(child);
+    }
+    if (child?.sys?.contentType?.sys?.id === "hyperlink") {
+      const { fields, sys } = child;
+      return {
+        id: sys.id,
+        label: fields?.displayText,
+        url: fields?.targetUrl,
+        descriptiveTextAriaLabel: fields?.descriptiveTextAriaLabel
+      };
+    }
+  });
+};
+const getNavMenuItems = (menuData) => {
+  return menuData?.fields?.children?.map(({ fields, sys }) => ({
+    id: sys.id,
+    label: fields.target?.fields?.displayText,
+    url: fields.target?.fields?.targetUrl,
+    descriptiveTextAriaLabel: fields.target?.fields?.descriptiveTextAriaLabel ?? "",
+    dropdown: fields?.dropdown,
+    rightSide: fields?.rightSide ?? false,
+    displayInNavigation: fields?.displayInNavigation,
+    subItems: extractChildrenTargets(fields.children)
+  }));
+};
+export {
+  extractChildrenTargets,
+  getFirstLevelMenuItems,
+  getLogo,
+  getNavMenuItems,
+  getQuickLinks
+};

package/dist/PageNavItem/PageNavItem.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { getVariant } from "../utils/getVariant.js";
-import { pn_link, pn_btn } from "./PageNavItem.css.js";
+import { pn_btn, pn_link } from "./PageNavItem.css.js";
 const PageNavItem = ({
   id,
   addClassName,

package/dist/SetContainer/SetContainer.js

@@ -81,7 +81,7 @@ import "../Chatbot/authenticate.js";
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
-import { setcontainer_section_text, inline_container, set_container_cols, set_container, isolate_container } from "./SetContainer.css.js";
+import { setcontainer_section_text, set_container_cols, inline_container, set_container, isolate_container } from "./SetContainer.css.js";
 import "../Tab/Tab.css.js";
 import "../icons/Star/Star.css.js";
 import { heroSupertag } from "../HeroBanner/HeroBanner.css.js";
@@ -108,8 +108,9 @@ import "next/navigation.js";
 /* empty css                                                         */
 /* empty css                                                              */
 /* empty css                                                                 */
-import "next/link.js";
 /* empty css                                                   */
+import "next/link.js";
+import "../NavigationMenu/AxosBank/Menu.js";
 /* empty css                                                      */
 /* empty css                                                       */
 /* empty css                                                   */

package/dist/SocialMediaBar/iconsRepository.js

@@ -105,8 +105,9 @@ import "next/navigation.js";
 /* empty css                                                         */
 /* empty css                                                              */
 /* empty css                                                                 */
-import "next/link.js";
 /* empty css                                                   */
+import "next/link.js";
+import "../NavigationMenu/AxosBank/Menu.js";
 /* empty css                                                      */
 /* empty css                                                       */
 /* empty css                                                   */

package/dist/StepItem/StepItem.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { getVariant } from "../utils/getVariant.js";
-import { li, point, step_num, line_points, bullet_details, bs_topic, bs_copy } from "./StepItem.css.js";
+import { li, line_points, point, step_num, bullet_details, bs_topic, bs_copy } from "./StepItem.css.js";
 const StepItem = ({
   id,
   counter,

package/dist/StepItemSet/StepItemSet.js

@@ -16,7 +16,7 @@ import '../assets/VideoTile/VideoTile.css';import '../assets/themes/victorie.css
 /* empty css                               */
 /* empty css                                    */
 /* empty css                                        */
-import { bs_wrapper, svg_logo, modifier, sec_title, sec_subtitle, tablet_col, bs_image, bs_video, steps_wrapper, ol, ul, bs_btns, bs_add_details, bs_section } from "./StepItemSet.css.js";
+import { bs_section, bs_wrapper, svg_logo, modifier, sec_title, sec_subtitle, tablet_col, bs_image, bs_video, steps_wrapper, ol, ul, bs_btns, bs_add_details } from "./StepItemSet.css.js";
 const StepItemSet = ({
   id,
   variant: fullVariant = "primary",

package/dist/Table/Table.js

@@ -11,7 +11,7 @@ import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/Downl
 /* empty css                                                */
 import { getVariant } from "../utils/getVariant.js";
 import { createElement } from "react";
-import { table, highlight_first_row, highlight_last_row, alternate_color_rows, apy_table, tableWrapper, td, th, table_section, table_container_text, table_headline, table_description_text, table_container } from "./Table.css.js";
+import { table_section, table_container_text, table_headline, table_description_text, table_container, table, highlight_first_row, highlight_last_row, alternate_color_rows, apy_table, tableWrapper, td, th } from "./Table.css.js";
 const TableContainer = ({
   tableTitle,
   tableBody,

package/dist/Topic/Topic.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { topic_container, topic_columns, topic_header, topic_item } from "./Topic.css.js";
+import { topic_container, topic_header, topic_columns, topic_item } from "./Topic.css.js";
 const Topic = ({ children }) => {
   return /* @__PURE__ */ jsx("div", { className: clsx(topic_container), children });
 };

package/dist/VideoTile/VideoTile.js

@@ -111,8 +111,9 @@ import "next/navigation.js";
 /* empty css                                                         */
 /* empty css                                                              */
 /* empty css                                                                 */
-import "next/link.js";
 /* empty css                                                   */
+import "next/link.js";
+import "../NavigationMenu/AxosBank/Menu.js";
 /* empty css                                                      */
 /* empty css                                                       */
 /* empty css                                                   */