@axos-web-dev/shared-components 0.0.12 → 0.0.13

package/dist/Button/Button.d.ts

@@ -17,8 +17,8 @@ export type ButtonAsLink = ButtonBase & Omit<AnchorHTMLAttributes<HTMLAnchorElem
 export type ButtonProps = ButtonAsButton | ButtonAsLink;
 export declare const Button: ({ as, children, color, size, disabled, rounded, targetUrl, id, newTab, action, className, }: ButtonProps & ButtonVariants) => import("react").DetailedReactHTMLElement<{
     className: string;
-    href: string | undefined;
+    href: string;
     id: string | undefined;
     target: string;
-    onClick: (() => void) | undefined;
+    onClick: (e: React.MouseEvent<Element, MouseEvent>) => void;
 }, HTMLElement>;

package/dist/Button/Button.js

@@ -1,3 +1,7 @@
+"use client";
+import { useGlobalContext } from "../Modal/contextApi/store.js";
+import { findMoreAxosDomains } from "../utils/allowedAxosDomains.js";
+import { validateLink } from "../utils/validateExternalLinks.js";
 import clsx from "clsx";
 import { createElement } from "react";
 import { button } from "./Button.css.js";
@@ -14,14 +18,26 @@ const Button = ({
   action,
   className
 }) => {
+  const { setTargetLinkUrl, setOpenModal } = useGlobalContext();
+  const onClick = (e) => {
+    if (targetUrl) {
+      const external_link = validateLink(targetUrl);
+      if (external_link) {
+        e.nativeEvent.stopImmediatePropagation();
+        e.preventDefault();
+        setOpenModal(external_link);
+        setTargetLinkUrl(targetUrl);
+      }
+    }
+  };
   return createElement(
     as,
     {
       className: clsx(button({ color, size, disabled, rounded }), className),
-      href: targetUrl,
+      href: findMoreAxosDomains(targetUrl),
       id,
       target: newTab ? "_blank" : "_self",
-      onClick: action
+      onClick: action ?? onClick
     },
     children
   );

package/dist/Chevron/index.js

@@ -1,11 +1,50 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import SvgArrowIcon from "../icons/ArrowIcon/index.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                */
 /* empty css                                   */
 /* empty css                                                    */
+import "../Accordion/Accordion.js";
+import "../Accordion/Accordion.css.js";
+import "../AlertBanner/AlertBanner.css.js";
+import { useGlobalContext } from "../Modal/contextApi/store.js";
+import { findMoreAxosDomains } from "../utils/allowedAxosDomains.js";
 import { getVariant } from "../utils/getVariant.js";
+import { validateLink } from "../utils/validateExternalLinks.js";
+import "clsx";
+import "react";
+import "../Button/Button.css.js";
+import "react-use";
+/* empty css                                                */
+import "../IconBillboard/IconBillboard.css.js";
+/* empty css                                          */
+/* empty css                                          */
+/* empty css                                                    */
+import "../Carousel/index.js";
+/* empty css                                                                    */
+import "../HeroBanner/HeroBanner.css.js";
+import "../ContentBanner/ContentBanner.css.js";
+/* empty css                                              */
+import "../FaqAccordion/index.js";
+import "../FooterDisclosure/FooterDisclosure.css.js";
+import "../Forms/Forms.css.js";
+import "../Forms/SalesforceFieldsForm.js";
+import "@hookform/resolvers/zod";
+import "../Input/index.js";
+import "react-hook-form";
+/* empty css                                              */
+import "../ImageBillboard/ImageBillboard.css.js";
 import { chevron_wrapper, chevron } from "./Chevron.css.js";
+/* empty css                                */
+/* empty css                                                      */
+/* empty css                                                         */
+/* empty css                                                    */
+import "../Table/Table.css.js";
+/* empty css                                        */
+import "next/script.js";
+/* empty css                                        */
+/* empty css                                              */
 const Chevron = ({
   children,
   variant,
@@ -14,13 +53,26 @@ const Chevron = ({
   className
 }) => {
   variant = getVariant(variant);
+  const { setTargetLinkUrl, setOpenModal } = useGlobalContext();
+  const onClick = (e) => {
+    if (targetUrl) {
+      const external_link = validateLink(targetUrl);
+      if (external_link) {
+        e.nativeEvent.stopImmediatePropagation();
+        e.preventDefault();
+        setOpenModal(external_link);
+        setTargetLinkUrl(targetUrl);
+      }
+    }
+  };
   return /* @__PURE__ */ jsxs("span", { className: `sc__btn ${chevron_wrapper}`, children: [
     /* @__PURE__ */ jsx(
       "a",
       {
         id,
-        href: targetUrl,
+        href: findMoreAxosDomains(targetUrl),
         className: `${chevron({ variant })} ${className ? className : ""}`,
+        onClick,
         children
       }
     ),

package/dist/Forms/Forms.css.d.ts

@@ -88,3 +88,4 @@ export declare const disclosureForm: import("@vanilla-extract/recipes").RuntimeF
         };
     };
 }>;
+export declare const form: string;

package/dist/Forms/Forms.css.js

@@ -9,9 +9,11 @@ var headerForm = createRuntimeFn({ defaultClassName: "tfms6a6", variantClassName
 var formWrapper = createRuntimeFn({ defaultClassName: "tfms6ab", variantClassNames: { variant: { primary: "tfms6ac", secondary: "tfms6ad", tertiary: "tfms6ae", quaternary: "tfms6af" } }, defaultVariants: {}, compoundVariants: [] });
 var actions = "tfms6ag";
 var disclosureForm = createRuntimeFn({ defaultClassName: "tfms6ah", variantClassNames: { variant: { primary: "tfms6ai", secondary: "tfms6aj", tertiary: "tfms6ak", quaternary: "tfms6al" } }, defaultVariants: {}, compoundVariants: [] });
+var form = "tfms6am";
 export {
   actions,
   disclosureForm,
+  form,
   formContainer,
   formWrapper,
   headerForm,

package/dist/Forms/ScheduleCall.js

@@ -16,7 +16,7 @@ import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
 import { useForm, FormProvider } from "react-hook-form";
 import * as z from "zod";
-import { formContainer, iconForm, headerForm, formWrapper, disclosureForm, actions } from "./Forms.css.js";
+import { formContainer, iconForm, headerForm, form, formWrapper, disclosureForm, actions } from "./Forms.css.js";
 import { SalesforceSchema } from "./SalesforceFieldsForm.js";
 const ScheduleCall = ({
   icon = false,
@@ -59,7 +59,7 @@ const ScheduleCall = ({
   return /* @__PURE__ */ jsx("section", { className: clsx(formContainer({ variant })), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
     icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: /* @__PURE__ */ jsx(SvgAxosX, {}) }),
     /* @__PURE__ */ jsx("div", { className: clsx("header_2 text_center", headerForm({ variant })), children: headline }),
-    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit(submitForm), children: [
+    /* @__PURE__ */ jsxs("form", { className: form, onSubmit: handleSubmit(submitForm), children: [
       /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
         /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
           Input,

package/dist/Forms/index.js

@@ -1,4 +1,4 @@
-import { actions, disclosureForm, formContainer, formWrapper, headerForm, iconForm } from "./Forms.css.js";
+import { actions, disclosureForm, form, formContainer, formWrapper, headerForm, iconForm } from "./Forms.css.js";
 import { RenderWebForm, renderSwitch } from "./RenderForm.js";
 import { SalesforceFieldsForm, SalesforceSchema } from "./SalesforceFieldsForm.js";
 import { ScheduleCall } from "./ScheduleCall.js";
@@ -9,6 +9,7 @@ export {
   ScheduleCall,
   actions,
   disclosureForm,
+  form,
   formContainer,
   formWrapper,
   headerForm,

package/dist/Hyperlink/index.js

@@ -1,16 +1,73 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
+import "../Accordion/Accordion.js";
+import "../Accordion/Accordion.css.js";
+import "../icons/CheckIcon/CheckIcon.css.js";
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                                    */
+import "../Chevron/Chevron.css.js";
+import "../AlertBanner/AlertBanner.css.js";
+import { useGlobalContext } from "../Modal/contextApi/store.js";
+import { findMoreAxosDomains } from "../utils/allowedAxosDomains.js";
+import { validateLink } from "../utils/validateExternalLinks.js";
+import "clsx";
+import "react";
+import "../Button/Button.css.js";
+import "react-use";
+/* empty css                                                */
+import "../IconBillboard/IconBillboard.css.js";
+/* empty css                                          */
+/* empty css                                          */
+/* empty css                                                    */
+import "../Carousel/index.js";
+/* empty css                                                                    */
+import "../HeroBanner/HeroBanner.css.js";
+import "../ContentBanner/ContentBanner.css.js";
+/* empty css                                              */
+import "../FaqAccordion/index.js";
+import "../FooterDisclosure/FooterDisclosure.css.js";
+import "../Forms/Forms.css.js";
+import "../Forms/SalesforceFieldsForm.js";
+import "@hookform/resolvers/zod";
+import "../Input/index.js";
+import "react-hook-form";
+/* empty css                                              */
+import "../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                */
+/* empty css                                                      */
+/* empty css                                                         */
+/* empty css                                                    */
+import "../Table/Table.css.js";
+/* empty css                                        */
+import "next/script.js";
+/* empty css                                        */
+/* empty css                                              */
 const Hyperlink = ({
   children,
   targetUrl,
   id,
   className
 }) => {
+  const { setTargetLinkUrl, setOpenModal } = useGlobalContext();
+  const onClick = (e) => {
+    if (targetUrl) {
+      const external_link = validateLink(targetUrl);
+      if (external_link) {
+        e.nativeEvent.stopImmediatePropagation();
+        e.preventDefault();
+        setOpenModal(external_link);
+        setTargetLinkUrl(targetUrl);
+      }
+    }
+  };
   return /* @__PURE__ */ jsx(
     "a",
     {
       id: id ? id : "",
-      href: targetUrl,
+      href: findMoreAxosDomains(targetUrl),
       className: `${className ? className : ""}`,
+      onClick,
       children
     }
   );

package/dist/Input/Input.css.js

@@ -1,10 +1,5 @@
 /* empty css                                */
-/* empty css                                */
 /* empty css                                   */
-/* empty css                                          */
-/* empty css                                  */
-/* empty css                                              */
-/* empty css                                                    */
 /* empty css                         */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var icon = createRuntimeFn({ defaultClassName: "_18du0la0", variantClassNames: { size: { small: "_18du0la1", medium: "_18du0la2", large: "_18du0la3" } }, defaultVariants: {}, compoundVariants: [] });

package/dist/MainHTML/index.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { axosTheme } from "../themes/axos.css.js";
 import { premierTheme } from "../themes/premier.css.js";
 const MainHTML = ({ theme = "Axos", children }) => {
-  return /* @__PURE__ */ jsx("main", { className: theme === "Premier" ? premierTheme : axosTheme, children });
+  return /* @__PURE__ */ jsx("body", { className: theme === "Premier" ? premierTheme : axosTheme, children: /* @__PURE__ */ jsx("main", { children }, "main-body") });
 };
 export {
   MainHTML

package/dist/Modal/Modal.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { ModalProps } from "./Modal.interface";
+export declare const Modal: FC<ModalProps>;

package/dist/Modal/Modal.js

@@ -0,0 +1,95 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { chevron } from "../Chevron/Chevron.css.js";
+import "../Accordion/Accordion.js";
+import "../Accordion/Accordion.css.js";
+import "../icons/CheckIcon/CheckIcon.css.js";
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                                    */
+import "../AlertBanner/AlertBanner.css.js";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
+/* empty css                                                */
+import "../IconBillboard/IconBillboard.css.js";
+/* empty css                                          */
+/* empty css                                          */
+import "clsx";
+/* empty css                                                    */
+import "../Carousel/index.js";
+/* empty css                                                                    */
+import "../HeroBanner/HeroBanner.css.js";
+import "../ContentBanner/ContentBanner.css.js";
+/* empty css                                              */
+import "../FaqAccordion/index.js";
+import "../FooterDisclosure/FooterDisclosure.css.js";
+import "../Forms/Forms.css.js";
+import "../Forms/SalesforceFieldsForm.js";
+import "@hookform/resolvers/zod";
+import "../Input/index.js";
+import "react-hook-form";
+/* empty css                                              */
+import "../ImageBillboard/ImageBillboard.css.js";
+import "./contextApi/store.js";
+/* empty css                                                      */
+/* empty css                                                         */
+/* empty css                                                    */
+import "../Table/Table.css.js";
+/* empty css                                        */
+import "next/script.js";
+/* empty css                                        */
+/* empty css                                              */
+import { modal, modal_dialog, modal_content, modal_header, modal_title, modal_subtitle, solid, modal_body, site_link, modal_footer } from "./Modal.css.js";
+const Modal = ({
+  headline,
+  bodyCopy,
+  body,
+  onAccept,
+  onCancel
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { id: "speedbump", tabIndex: -1, role: "dialog", className: modal, children: /* @__PURE__ */ jsx("div", { className: `${modal_dialog} rounded`, children: /* @__PURE__ */ jsxs("div", { className: `${modal_content} rounded`, children: [
+    /* @__PURE__ */ jsxs("div", { className: `${modal_header} text_center`, children: [
+      /* @__PURE__ */ jsx("h2", { className: `${modal_title} header_3`, children: headline }),
+      /* @__PURE__ */ jsx("p", { className: `${modal_subtitle} p_16 mb_0 push_up`, children: bodyCopy })
+    ] }),
+    /* @__PURE__ */ jsx("hr", { className: solid }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${modal_body} text-center flex flex_col center middle mx_auto`,
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "p_16", children: "You will now be redirected to:" }),
+          /* @__PURE__ */ jsx("p", { id: "insert-url", className: site_link, children: body })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("hr", { className: solid }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${modal_footer} flex center middle push_up_24`,
+        style: { marginInline: "auto", width: "max-content" },
+        children: [
+          /* @__PURE__ */ jsx(Button, { color: "primary", action: onAccept, children: "Continue" }),
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              style: { textDecoration: "none", padding: "8px 48px" },
+              role: "button",
+              className: `sc__btn ${chevron({ variant: "primary" })}`,
+              "aria-label": "Close",
+              title: "Go Back",
+              id: "close",
+              onClick: onCancel,
+              children: "Close"
+            }
+          )
+        ]
+      }
+    )
+  ] }) }) }) });
+};
+export {
+  Modal
+};

package/dist/Modal/contextApi/store.d.ts

@@ -0,0 +1,10 @@
+import { Dispatch, PropsWithChildren, SetStateAction } from "react";
+export interface ContextProps {
+    targetLinkUrl: string;
+    setTargetLinkUrl: Dispatch<SetStateAction<string>>;
+    openModal: boolean;
+    setOpenModal: Dispatch<SetStateAction<boolean>>;
+}
+export declare const GlobalContext: import("react").Context<ContextProps>;
+export declare const GlobalContextProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const useGlobalContext: () => ContextProps;

package/dist/Modal/contextApi/store.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Modal } from "../Modal.js";
+import { shortUrl } from "../../utils/validateExternalLinks.js";
+import { createContext, useState, useContext } from "react";
+import { createPortal } from "react-dom";
+const GlobalContext = createContext({
+  targetLinkUrl: "",
+  setTargetLinkUrl: () => "",
+  openModal: false,
+  setOpenModal: () => false
+});
+const GlobalContextProvider = ({ children }) => {
+  const [targetLinkUrl, setTargetLinkUrl] = useState("");
+  const [openModal, setOpenModal] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    GlobalContext.Provider,
+    {
+      value: {
+        targetLinkUrl,
+        setTargetLinkUrl,
+        openModal,
+        setOpenModal
+      },
+      children: [
+        children,
+        openModal ? createPortal(
+          /* @__PURE__ */ jsx(
+            Modal,
+            {
+              headline: "You're continuing to another website",
+              bodyCopy: `Axos Bank does not endorse the information,
+               content, presentation or accuracy of any other 
+               website and claims no responsibility for it.`,
+              body: shortUrl(targetLinkUrl),
+              onCancel: () => setOpenModal(false),
+              onAccept: () => {
+                window.open(targetLinkUrl, "_blank", "noreferrer");
+                setOpenModal(false);
+              }
+            }
+          ),
+          document.body,
+          "GlobalSpeedBump"
+        ) : null
+      ]
+    }
+  );
+};
+const useGlobalContext = () => useContext(GlobalContext);
+export {
+  GlobalContext,
+  GlobalContextProvider,
+  useGlobalContext
+};

package/dist/Modal/index.d.ts

@@ -1,3 +1,2 @@
-import { FC } from "react";
-import { ModalProps } from "./Modal.interface";
-export declare const Modal: FC<ModalProps>;
+export * from "./Modal";
+export * from "./contextApi/store";

package/dist/Modal/index.js

@@ -1,96 +1,9 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { chevron } from "../Chevron/Chevron.css.js";
-import "../Accordion/Accordion.js";
-import "../Accordion/Accordion.css.js";
-import "../icons/CheckIcon/CheckIcon.css.js";
-/* empty css                                */
-/* empty css                                   */
-/* empty css                                                    */
-import "../AlertBanner/AlertBanner.css.js";
-import { Button } from "../Button/Button.js";
-import "../Button/Button.css.js";
-import "react";
-import "react-use";
-/* empty css                                                */
-import "../IconBillboard/IconBillboard.css.js";
-/* empty css                                          */
-/* empty css                                          */
-import "clsx";
-/* empty css                                                    */
-import "../Carousel/index.js";
-/* empty css                                                                    */
-import "../HeroBanner/HeroBanner.css.js";
-import "../ContentBanner/ContentBanner.css.js";
-/* empty css                                              */
-import "../FaqAccordion/index.js";
-import "../FooterDisclosure/FooterDisclosure.css.js";
-import "../Forms/Forms.css.js";
-import "../Forms/SalesforceFieldsForm.js";
-import "@hookform/resolvers/zod";
-import "../Input/index.js";
-import "react-hook-form";
-/* empty css                                              */
-import "../ImageBillboard/ImageBillboard.css.js";
-/* empty css                                                      */
-import "../NavigationMenu/AxosAdvisor/NavBar.module.js";
-/* empty css                                                         */
-import "../NavigationMenu/AxosFiduciary/NavBar.module.js";
-/* empty css                                                    */
-import "../Table/Table.css.js";
-/* empty css                                        */
-import "next/script.js";
-/* empty css                                        */
-/* empty css                                              */
-import { modal, modal_dialog, modal_content, modal_header, modal_title, modal_subtitle, solid, modal_body, site_link, modal_footer } from "./Modal.css.js";
-const Modal = ({
-  headline,
-  bodyCopy,
-  body,
-  onAccept,
-  onCancel
-}) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { id: "speedbump", tabIndex: -1, role: "dialog", className: modal, children: /* @__PURE__ */ jsx("div", { className: `${modal_dialog} rounded`, children: /* @__PURE__ */ jsxs("div", { className: `${modal_content} rounded`, children: [
-    /* @__PURE__ */ jsxs("div", { className: `${modal_header} text_center`, children: [
-      /* @__PURE__ */ jsx("h2", { className: `${modal_title} header_3`, children: headline }),
-      /* @__PURE__ */ jsx("p", { className: `${modal_subtitle} p_16 mb_0 push_up`, children: bodyCopy })
-    ] }),
-    /* @__PURE__ */ jsx("hr", { className: solid }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `${modal_body} text-center flex flex_col center middle mx_auto`,
-        children: [
-          /* @__PURE__ */ jsx("p", { className: "p_16", children: "You will now be redirected to:" }),
-          /* @__PURE__ */ jsx("p", { id: "insert-url", className: site_link, children: body })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("hr", { className: solid }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `${modal_footer} flex center middle push_up_24`,
-        style: { marginInline: "auto", width: "max-content" },
-        children: [
-          /* @__PURE__ */ jsx(Button, { color: "primary", action: () => onAccept, children: "Continue" }),
-          /* @__PURE__ */ jsx(
-            "a",
-            {
-              style: { textDecoration: "none", padding: "8px 48px" },
-              role: "button",
-              className: `sc__btn ${chevron({ variant: "primary" })}`,
-              "aria-label": "Close",
-              title: "Go Back",
-              id: "close",
-              onClick: () => onCancel,
-              children: "Close"
-            }
-          )
-        ]
-      }
-    )
-  ] }) }) }) });
-};
+"use client";
+import { Modal } from "./Modal.js";
+import { GlobalContext, GlobalContextProvider, useGlobalContext } from "./contextApi/store.js";
 export {
-  Modal
+  GlobalContext,
+  GlobalContextProvider,
+  Modal,
+  useGlobalContext
 };

package/dist/NavigationMenu/AxosAdvisor/NavBar.css.d.ts

@@ -1 +1,2 @@
 export declare const Sign_in_btn: string;
+export declare const expand: string;

package/dist/NavigationMenu/AxosAdvisor/NavBar.css.js

@@ -2,6 +2,8 @@
 /* empty css                                      */
 /* empty css                          */
 var Sign_in_btn = "dg9gpl0";
+var expand = "dg9gpl1";
 export {
-  Sign_in_btn
+  Sign_in_btn,
+  expand
 };

package/dist/NavigationMenu/AxosAdvisor/SubNavBar.js

@@ -9,25 +9,6 @@ import { sub_nav, absoule, dd_media, dd_media_btn } from "./SubNavbar.css.js";
 function SubNavBar() {
   const subNav1 = useRef(null);
   const [isMouseOver, setIsMouseOver] = useState(false);
-  const allDropDowns = document.querySelectorAll("[id*='dd_'] > a");
-  allDropDowns.forEach((elem) => {
-    elem.addEventListener("click", function(event) {
-      const node = event.target.parentNode.lastChild.classList.contains(
-        "expand"
-      ) instanceof Element;
-      switch (node) {
-        case true:
-          event.target.parentNode.lastChild.classList.remove("expand");
-          break;
-        case false:
-          const prevRadio = document.querySelector(".expand");
-          if (prevRadio)
-            prevRadio.classList.remove("expand");
-          event.target.parentNode.lastChild.classList.add("expand");
-          break;
-      }
-    });
-  });
   const mouseOver = () => {
     setIsMouseOver(true);
   };