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

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
+};