@axos-web-dev/shared-components 1.0.8 → 1.0.9-9.dev.1

package/dist/NavigationMenu/AxosBank/MobileMenu/MobileMenu.js

@@ -0,0 +1,345 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { usePathname } from "next/navigation.js";
+import Link from "next/link.js";
+import { menuData, getQuickLinks } from "./MobileNavData.js";
+import styles from "./MobileMenu.module.js";
+const slideVariants = {
+  enter: (direction) => ({
+    x: direction === "forward" ? "100%" : "-100%",
+    opacity: 0,
+    position: "absolute"
+  }),
+  center: {
+    x: 0,
+    opacity: 1,
+    position: "relative",
+    transition: { duration: 0.3, ease: "easeInOut" }
+  },
+  exit: (direction) => ({
+    x: direction === "forward" ? "-100%" : "100%",
+    opacity: 0,
+    position: "absolute"
+  })
+};
+const MobileDrawerMenu = () => {
+  const pathname = usePathname();
+  const [queryString, setQueryString] = useState("");
+  const [open, setOpen] = useState(false);
+  const [stack, setStack] = useState([
+    { title: "Main Menu", items: menuData }
+  ]);
+  const [hasOpenedOnce, setHasOpenedOnce] = useState(false);
+  const [direction, setDirection] = useState("forward");
+  const [quickLinks, setQuickLinks] = useState([]);
+  const drawerRef = useRef(null);
+  const currentLevel = stack[stack.length - 1];
+  const prevLevel = stack[stack.length - 2];
+  useEffect(() => {
+    if (!pathname) return;
+    const pathnameParts = "/" + pathname.split("/")[1];
+    const links = getQuickLinks(pathnameParts);
+    setQuickLinks(links);
+  }, [pathname]);
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const search = window.location.search;
+      if (search.startsWith("?")) {
+        setQueryString(search.slice(1));
+      }
+    }
+  }, []);
+  const handleClick = (key) => {
+    const item = currentLevel.items[key];
+    if (typeof item === "object") {
+      setDirection("forward");
+      setStack((prev) => [...prev, { title: key, items: item }]);
+    }
+  };
+  const handleBack = () => {
+    if (stack.length > 1) {
+      setDirection("backward");
+      setStack((prev) => prev.slice(0, -1));
+    }
+  };
+  const handleToggle = () => {
+    setOpen((prev) => {
+      const isOpening = !prev;
+      if (isOpening && !hasOpenedOnce) {
+        setHasOpenedOnce(true);
+        setStack([{ title: "Menu", items: menuData }]);
+      }
+      return isOpening;
+    });
+  };
+  const handleOutsideClick = (e) => {
+    if (drawerRef.current && !drawerRef.current.contains(e.target)) {
+      setOpen(false);
+    }
+  };
+  useEffect(() => {
+    if (open) {
+      document.addEventListener("mousedown", handleOutsideClick);
+    } else {
+      document.removeEventListener("mousedown", handleOutsideClick);
+    }
+    return () => document.removeEventListener("mousedown", handleOutsideClick);
+  }, [open]);
+  useEffect(() => {
+    const onEsc = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    if (open) {
+      document.addEventListener("keydown", onEsc);
+    }
+    return () => document.removeEventListener("keydown", onEsc);
+  }, [open]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: handleToggle,
+        className: `${styles.hamburger} flex_col`,
+        "aria-label": "open navigation menu",
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: 24,
+            height: 24,
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M22.5 15.75V17.25H1.5V15.75H22.5ZM22.5 11.25V12.75H1.5V11.25H22.5ZM22.5 6.75V8.25H1.5V6.75H22.5Z",
+                fill: "#4A5560"
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: styles.overlay,
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        children: /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            className: `${styles.drawer} flex_col`,
+            ref: drawerRef,
+            initial: { x: "100%" },
+            animate: { x: 0 },
+            exit: { x: "100%" },
+            transition: { type: "tween", duration: 0.3 },
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "menu-level",
+            "aria-describedby": "menu-description",
+            children: [
+              /* @__PURE__ */ jsx("p", { id: "menu-description", className: styles.sr_only, children: "Use tab to navigate this menu. Press Escape to close." }),
+              /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+                stack.length > 1 ? /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: handleBack,
+                    className: styles.back,
+                    "aria-label": "return to previous menu",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          width: 15,
+                          height: 12,
+                          viewBox: "0 0 20 12",
+                          fill: "none",
+                          xmlns: "http://www.w3.org/2000/svg",
+                          style: { marginRight: 8, transform: "rotate(90deg)" },
+                          children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M0.46875 1.76574L9.99908 11.2961L19.5294 1.76574L18.4687 0.705078L9.99908 9.17491L1.52941 0.705078L0.46875 1.76574Z",
+                              fill: "#2F5B88"
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: styles.prevlevel, children: prevLevel.title })
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: window.location.href.split("/")[3] === "invest" ? "/invest" : "/",
+                    "aria-label": "return to home page",
+                    children: /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: "https://www.axos.com/images/1sBwCIn5mqOg5DK2uXDJPc/axb_mobile_logo.png",
+                        alt: "",
+                        width: 86,
+                        height: 19
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: `${styles.close} flex_col`,
+                    "aria-label": "close navigation menu",
+                    onClick: handleToggle,
+                    children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "24",
+                        height: "24",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            d: "M20.2812 2.65625L21.3419 3.71691L13.0602 11.9982L21.3419 20.2812L20.2812 21.3419L11.9982 13.0602L3.71691 21.3419L2.65625 20.2812L10.9377 11.9982L2.65625 3.71691L3.71691 2.65625L11.9982 10.9377L20.2812 2.65625Z",
+                            fill: "#4A5560"
+                          }
+                        )
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: styles.levelContainer, children: /* @__PURE__ */ jsxs("div", { className: "bg_white", children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: `${styles.level} flex middle`,
+                    "aria-label": "current menu level",
+                    children: [
+                      /* @__PURE__ */ jsx("h2", { className: styles.levelTitle, id: "menu-level", children: currentLevel.title }),
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          width: 15,
+                          height: 12,
+                          viewBox: "0 0 20 12",
+                          fill: "none",
+                          xmlns: "http://www.w3.org/2000/svg",
+                          style: { marginLeft: 12 },
+                          children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M0.46875 1.76574L9.99908 11.2961L19.5294 1.76574L18.4687 0.705078L9.99908 9.17491L1.52941 0.705078L0.46875 1.76574Z",
+                              fill: "white"
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("nav", { "aria-label": "main navigation menu", children: /* @__PURE__ */ jsx(
+                  AnimatePresence,
+                  {
+                    custom: direction,
+                    mode: "sync",
+                    initial: false,
+                    children: /* @__PURE__ */ jsx(
+                      motion.ul,
+                      {
+                        className: styles.menu,
+                        custom: direction,
+                        variants: slideVariants,
+                        initial: "enter",
+                        animate: "center",
+                        exit: "exit",
+                        transition: { duration: 0.3, ease: "linear" },
+                        children: Object.entries(currentLevel.items).map(
+                          ([key, value]) => {
+                            const hasChildren = typeof value === "object";
+                            return /* @__PURE__ */ jsx("li", { children: hasChildren ? /* @__PURE__ */ jsxs(
+                              "button",
+                              {
+                                className: styles.menuItem,
+                                onClick: () => handleClick(key),
+                                "aria-label": `open submenu for ${key}`,
+                                children: [
+                                  /* @__PURE__ */ jsx("span", { children: key }),
+                                  /* @__PURE__ */ jsx("span", { className: styles.chevron, children: /* @__PURE__ */ jsx(
+                                    "svg",
+                                    {
+                                      className: styles.chevronIcon,
+                                      width: 12,
+                                      height: 20,
+                                      viewBox: "0 0 12 20",
+                                      fill: "none",
+                                      xmlns: "http://www.w3.org/2000/svg",
+                                      children: /* @__PURE__ */ jsx(
+                                        "path",
+                                        {
+                                          d: "M1.76378 0.46875L11.2941 9.99908L1.76378 19.5294L0.703125 18.4687L9.17295 9.99908L0.703125 1.52941L1.76378 0.46875Z",
+                                          fill: "#4A5560"
+                                        }
+                                      )
+                                    }
+                                  ) })
+                                ]
+                              }
+                            ) : /* @__PURE__ */ jsx(
+                              Link,
+                              {
+                                href: value + (queryString && !value.includes("?") ? `?${queryString}` : ""),
+                                className: styles.menuItem,
+                                children: /* @__PURE__ */ jsx("span", { children: key })
+                              }
+                            ) }, key);
+                          }
+                        )
+                      },
+                      currentLevel.title
+                    )
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { className: `${styles.quickLinks} flex middle between`, children: quickLinks.map((link) => /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: link.url + (queryString && !link.url.includes("?") ? `?${queryString}` : ""),
+                    className: `${styles.quickLink} flex_col middle`,
+                    "aria-label": `Visit ${link.title} page`,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: link.icon,
+                          alt: "",
+                          height: 20,
+                          width: 20,
+                          loading: "lazy"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { children: link.title })
+                    ]
+                  },
+                  link.title
+                )) })
+              ] }) })
+            ]
+          }
+        )
+      }
+    ) })
+  ] });
+};
+export {
+  MobileDrawerMenu as default
+};

package/dist/NavigationMenu/AxosBank/MobileMenu/MobileMenu.module.js

@@ -0,0 +1,53 @@
+import '../../../assets/NavigationMenu/AxosBank/MobileMenu/MobileMenu.css.css';const overlay = "_overlay_1s2qa_1";
+const drawer = "_drawer_1s2qa_9";
+const hamburger = "_hamburger_1s2qa_29";
+const header = "_header_1s2qa_40";
+const back = "_back_1s2qa_51";
+const close = "_close_1s2qa_62";
+const levelContainer = "_levelContainer_1s2qa_69";
+const level = "_level_1s2qa_69";
+const levelTitle = "_levelTitle_1s2qa_85";
+const menu = "_menu_1s2qa_90";
+const menuItem = "_menuItem_1s2qa_110";
+const chevron = "_chevron_1s2qa_126";
+const chevronIcon = "_chevronIcon_1s2qa_131";
+const quickLinks = "_quickLinks_1s2qa_142";
+const quickLink = "_quickLink_1s2qa_142";
+const sr_only = "_sr_only_1s2qa_166";
+const styles = {
+  overlay,
+  drawer,
+  hamburger,
+  header,
+  back,
+  close,
+  levelContainer,
+  level,
+  levelTitle,
+  menu,
+  menuItem,
+  chevron,
+  chevronIcon,
+  quickLinks,
+  quickLink,
+  sr_only
+};
+export {
+  back,
+  chevron,
+  chevronIcon,
+  close,
+  styles as default,
+  drawer,
+  hamburger,
+  header,
+  level,
+  levelContainer,
+  levelTitle,
+  menu,
+  menuItem,
+  overlay,
+  quickLink,
+  quickLinks,
+  sr_only
+};

package/dist/NavigationMenu/AxosBank/MobileMenu/MobileNavData.d.ts

@@ -0,0 +1,272 @@
+export declare const menuData: {
+    Personal: {
+        "Personal Home": string;
+        Bank: {
+            "Bank Home": string;
+            Checking: {
+                "Checking Accounts Home": string;
+                "Axos ONE\u00AE Checking": string;
+                "Rewards Checking": string;
+                "Essential Checking": string;
+                "First Checking": string;
+                "CashBack Checking": string;
+                "Golden Checking": string;
+            };
+            Savings: {
+                "Savings Accounts Home": string;
+                "Axos ONE\u00AE Savings": string;
+                "Summit Savings": string;
+                "First Savings": string;
+            };
+            "Certificates of Deposits": string;
+            Premier: {
+                "Premier Home": string;
+                "Private Client": string;
+                "InsureGuard+": string;
+                "Trust Accounts": string;
+            };
+            "ATM Locator": string;
+            "Refer-a-Friend": string;
+            Insights: string;
+        };
+        Borrow: {
+            "Borrow Home": string;
+            Mortgages: {
+                "Mortgages Home": string;
+                "Buying a Home": string;
+                "Mortgage Refinance": string;
+                "Get Pre-qualified": string;
+                "Get a Rate Quote": string;
+                "Apply Now": string;
+                "Mortgage Services": string;
+                "Make a Payment": string;
+            };
+            "Personal Loans": {
+                "Personal Loans Home": string;
+                "Learn More": string;
+                "Apply Now": string;
+                "Make a Payment": string;
+                "Debt Consolidation Loans": string;
+                "Home Improvement Loans": string;
+                "Major Purchases Loans": string;
+            };
+            "Auto Loans": {
+                "Auto Loans Home": string;
+                "Auto Purchase Loans": string;
+                "Auto Refinance Loans": string;
+                "Auto Payment Calculator": string;
+                "Manage My Loan": string;
+            };
+            "Marine Loans": {
+                "Marine Loans Home": string;
+                "Find The Right Loan": string;
+                "Apply Now": string;
+                "Contact Us": string;
+            };
+        };
+        Invest: {
+            "Invest Home": string;
+            "Managed Portfolios": {
+                "Managed Portfolios Home": string;
+                "Investing Details": string;
+            };
+            "Self Directed Trading": {
+                "Self Directed Trading Home": string;
+                "Axos Elite Investing": string;
+                "Stocks & ETFs": string;
+                "Margin Tradings": string;
+                "Options Trading": string;
+            };
+            Retirement: string;
+            Support: string;
+            Insights: string;
+        };
+        Plan: {
+            "Plan Home": string;
+            "Axos Mobile App": {
+                "Axos Mobile App Home": string;
+                "Download the App": string;
+                "Mobile App Features": string;
+            };
+            "Financial Tools": {
+                "Financial Tools Home": string;
+                Calculators: string;
+                "Credit Score Monitoring": string;
+                "Personal Finance Manager": string;
+                "Additional Tools": string;
+                "Fund Your Account": string;
+            };
+            "Education & Insights": {
+                "Education & Insights Home": string;
+                "Banking Insights": string;
+                "Investing Insights": string;
+                "Investing Podcast": string;
+            };
+        };
+    };
+    Business: {
+        "Business Home": string;
+        "Small Business Banking": {
+            "Small Business Home": string;
+            Checking: {
+                "Small Business Checking Home": string;
+                "Basic Business Checking": string;
+                "Business Interest Checking": string;
+            };
+            Savings: {
+                "Small Business Savings Home": string;
+                "Business Money Market": string;
+                "Business Premium Savings": string;
+                "Business Savings": string;
+                "Non-Profit Money Market": string;
+                "Business CDs": string;
+            };
+            Bundles: {
+                "Axos Business Bundle": string;
+            };
+            Services: {
+                "Services Home": string;
+                "Merchant Services": string;
+                "Payroll Services": string;
+                "SBA Loans": string;
+                "Treasury Management": string;
+                "Insured Cash Sweep": string;
+                "Digital Banking": string;
+            };
+            Solutions: {
+                "Solutions Home": string;
+                "New Business": string;
+                "Nonprofit Banking": string;
+            };
+            "Other Resources": {
+                "Business Support": string;
+                FAQ: string;
+                "ATM Locator": string;
+                Calculators: string;
+            };
+            Insights: string;
+        };
+        "Commercial Banking": {
+            "Commercial Banking Home": string;
+            "Solutions By Industry": {
+                "Commercial Banking Home": string;
+                "Third Party Payment Processors": string;
+                "HOA Banking & Lending": string;
+                "HOAs & Property Management": string;
+                "1031 Exchange Qualified Intermediaries": string;
+                "Title & Escrow": string;
+                "Global Fiduciary Banking": string;
+                "Fiduciary Services": string;
+                "Business Management Banking": string;
+                "Hedge Funds & Alternative Fund Banking Solutions": string;
+                "Middle Market": string;
+                "Technology & Life Sciences Banking": string;
+            };
+            Services: {
+                "Commercial Banking Services Home": string;
+                "Analyzed Business Checking": string;
+                "Merchant Services": string;
+                "Treasury Management": string;
+                "IntraFi\u00AE Network Deposits\u2120": string;
+            };
+            "Other Resources": {
+                "Business Support": string;
+                Calculators: string;
+            };
+        };
+        "Commercial Lending": {
+            "Commercial Lending Home": string;
+            "Credit and Financial": {
+                "Credit and Financial Lending Home": string;
+                "Commercial Lines of Credit": string;
+                "Commercial Term Loans": string;
+                "Equipment Finance": string;
+            };
+            "Commercial Lending": {
+                "Commercial Lending Home": string;
+                "Commercial Real Estate Bridge & Construction Lending": string;
+                "HOA Lending": string;
+                "Lender Finance": string;
+                "Residential Warehouse Lending": string;
+                "Small Balance Commercial Real Estate": string;
+                "Leveraged Finance": string;
+                "Marine Dealer Floorplan Finance": string;
+                "Premium Finance": string;
+            };
+            "Other Resources": {
+                "Business Support": string;
+                "Commercial Portal": string;
+                Calculators: string;
+            };
+        };
+    };
+    Partners: {
+        "Partners Home": string;
+        "Marine Dealer Floorplan Finance": string;
+        "Wholesale Lending": {
+            "Wholesale & Correspondent Lending": {
+                "WCPL Home": string;
+                "Resources & Support": string;
+                "Register a Loan": string;
+                "Quick Pricer": string;
+                "Meet the Team": string;
+            };
+        };
+        "Financial Advisors": string;
+        "Dealer Services": {
+            "Dealer Services": {
+                "Dealer Services Home": string;
+                "Request More Information": string;
+            };
+        };
+        "Strategic Partners": string;
+    };
+    Support: {
+        "Customer Support Home": string;
+        "Personal Support": string;
+        "Business Support": string;
+        "Partner Support": string;
+    };
+    "About Us": {
+        "About Us Home": string;
+        "Axos Financial": string;
+        History: string;
+        "Awards & Recognitions": string;
+        "Executive Team": string;
+        "Press & News": string;
+    };
+    Legal: {
+        "Legal Home": string;
+        "Business Disclosures": string;
+        "HELOC Disclosures": string;
+        "Home Equity Loan Disclosure": string;
+        "Privacy Policy": string;
+        "FDIC Notice": string;
+        "EHL Notice": string;
+        "SAFE Act": string;
+    };
+    "Log in": {
+        Personal: {
+            "Personal Banking Home": string;
+            "Account Login": string;
+            "Make a Payment": string;
+        };
+        Business: {
+            "Business Banking Home": string;
+            "Business Banking Login": string;
+            "MWA Business Login": string;
+            "Commercial Portal": string;
+        };
+        Partners: {
+            "Partners Home": string;
+            "Wholesale and Correspondent": string;
+            "Advisor Login": string;
+        };
+    };
+    "Return to Application": string;
+};
+export declare const getQuickLinks: (pathname: string) => {
+    icon: string;
+    title: string;
+    url: string;
+}[];