@axos-web-dev/shared-components 0.0.111 → 0.0.112

package/dist/NavigationMenu/AxosClearing/index.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { Button } from "../../Button/Button.js";
 import "../../Button/Button.css.js";
 import { useState, useRef, useEffect } from "react";
-import "react-use";
+import { useClickAway } from "react-use";
 import clsx from "clsx";
 import { NavItem } from "../NavItem/index.js";
 import { expand } from "./NavBar.css.js";
@@ -11,18 +11,22 @@ import styles from "./NavBar.module.js";
 import { navItems } from "./NavData.js";
 import SubNavBar from "./SubNavBar.js";
 function NavBar() {
+  const [isOpenSignIn, setisOpenSignIn] = useState(false);
   const [isOpenMobile, setisOpenMobile] = useState(false);
   const [activeIndex, setActiveIndex] = useState();
   const [lastNavItem, setLastNavItem] = useState();
   const ref = useRef(null);
+  const toggle = () => setisOpenSignIn(!isOpenSignIn);
   const mobileToggle = () => setisOpenMobile(!isOpenMobile);
   const handleClick = (index) => setActiveIndex(index);
   const [isOpenProducts1, setisOpenProducts1] = useState(false);
   const [isOpenProducts2, setisOpenProducts2] = useState(false);
   const [isOpenProducts3, setisOpenProducts3] = useState(false);
+  const [isOpenProducts4, setisOpenProducts4] = useState(false);
   const toggleProducts1 = () => setisOpenProducts1(!isOpenProducts1);
   const toggleProducts2 = () => setisOpenProducts2(!isOpenProducts2);
   const toggleProducts3 = () => setisOpenProducts3(!isOpenProducts3);
+  const toggleProducts4 = () => setisOpenProducts4(!isOpenProducts4);
   const getActiveIndex = () => {
     const pathname = "/" + location.pathname.split("/")[1];
     const index = navItems.findIndex(
@@ -36,6 +40,11 @@ function NavBar() {
   useEffect(() => {
     setLastNavItem(navItems[navItems.length - 1]);
   }, []);
+  useClickAway(ref, (e) => {
+    if (e?.target?.tagName !== "A") {
+      setisOpenSignIn(false);
+    }
+  });
   return /* @__PURE__ */ jsxs("header", { id: "header", children: [
     /* @__PURE__ */ jsx("div", { className: `${styles.header} bg_white`, children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsxs("div", { className: `${styles.header_main_row} flex_row between middle`, children: [
       /* @__PURE__ */ jsx("div", { className: `${styles.desktop_only} flex_row middle`, children: /* @__PURE__ */ jsxs("div", { className: `${styles.main_nav} flex_row middle`, children: [
@@ -89,7 +98,7 @@ function NavBar() {
           )
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: `${styles.mobile_only} ${styles.mobile_logo}`, children: /* @__PURE__ */ jsx("a", { href: "/", "aria-label": "return to axos bank homepage", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: `${styles.mobile_only} ${styles.mobile_logo}`, children: /* @__PURE__ */ jsx("a", { href: "/", "aria-label": "return to axos clearing homepage", children: /* @__PURE__ */ jsx(
         "img",
         {
           src: "https://images.axos.com/o9ov1v03uwqk/1KWdk4xENAS8hmQRQWhviO/05df12996a96400c057b0066b4cf250f/axos-clearing-logo.svg",
@@ -123,16 +132,18 @@ function NavBar() {
                   styles.signin_btn,
                   "flex_row",
                   "center",
-                  "middle"
+                  "middle",
+                  isOpenSignIn ? styles.open : ""
                 ),
                 as: "button",
                 type: "button",
                 color: "primary",
                 id: "signIn",
+                action: toggle,
                 size: "small",
-                targetUrl: "/contact-us",
+                "aria-controls": "signin-drop-menu",
                 children: [
-                  /* @__PURE__ */ jsx("span", { children: "Get in Touch" }),
+                  /* @__PURE__ */ jsx("span", { children: "Sign In" }),
                   /* @__PURE__ */ jsx(
                     "svg",
                     {
@@ -152,6 +163,39 @@ function NavBar() {
                   )
                 ]
               }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `${styles.signin_dropdown} ${styles.shadow} rounded bg_white`,
+                children: /* @__PURE__ */ jsx("div", { className: styles.opacity, children: /* @__PURE__ */ jsxs(
+                  "ul",
+                  {
+                    className: "list_unstyled",
+                    role: "menu",
+                    "aria-expanded": isOpenSignIn,
+                    id: "signin-drop-menu",
+                    children: [
+                      /* @__PURE__ */ jsx("li", { className: styles.signin_subheader, children: /* @__PURE__ */ jsx(
+                        "a",
+                        {
+                          href: `https://connect.axosclearing.com/`,
+                          role: "menuitem",
+                          children: "Axos Connection"
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx("li", { className: styles.signin_subheader, children: /* @__PURE__ */ jsx(
+                        "a",
+                        {
+                          href: `https://axosclearing.fisglobal.com/investor/axos`,
+                          role: "menuitem",
+                          children: "Investor Access"
+                        }
+                      ) })
+                    ]
+                  }
+                ) })
+              }
             )
           ]
         }
@@ -435,14 +479,70 @@ function NavBar() {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, children: /* @__PURE__ */ jsx(
-              "a",
+            /* @__PURE__ */ jsxs(
+              "li",
               {
-                href: "https://connect.axosclearing.com/",
-                className: `flex_row between ${styles.btn}`,
-                children: "Sign In"
+                className: `${styles.mobile_nav_item} ${styles.has_dropdown}`,
+                id: "dd_4",
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "a",
+                    {
+                      href: "#",
+                      onClick: toggleProducts4,
+                      role: "button",
+                      className: clsx("flex_row", "between"),
+                      children: [
+                        "Sign In",
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: clsx(
+                              styles.icon_wrap,
+                              isOpenProducts4 && styles.open
+                            ),
+                            children: /* @__PURE__ */ jsx(
+                              "svg",
+                              {
+                                xmlns: "http://www.w3.org/2000/svg",
+                                width: "24",
+                                height: "24",
+                                viewBox: "0 0 24 24",
+                                fill: "none",
+                                children: /* @__PURE__ */ jsx(
+                                  "path",
+                                  {
+                                    d: "M2.46875 7.76574L11.9991 17.2961L21.5294 7.76574L20.4687 6.70508L11.9991 15.1749L3.52941 6.70508L2.46875 7.76574Z",
+                                    fill: "#4A5560"
+                                  }
+                                )
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: clsx(styles.sub_menu, isOpenProducts4 && expand),
+                      children: [
+                        /* @__PURE__ */ jsx("a", { href: "https://connect.axosclearing.com/", role: "menuitem", children: "Axos Connection" }),
+                        /* @__PURE__ */ jsx(
+                          "a",
+                          {
+                            href: "https://axosclearing.fisglobal.com/investor/axos",
+                            role: "menuitem",
+                            children: "Investor Access"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
               }
-            ) })
+            )
           ] }) }),
           /* @__PURE__ */ jsx("div", { className: styles.mobile_footer, children: /* @__PURE__ */ jsxs("div", { className: "flex_row between", children: [
             /* @__PURE__ */ jsxs(
@@ -451,7 +551,14 @@ function NavBar() {
                 className: `${styles.mobile_footer_content} flex_col between`,
                 children: [
                   /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("strong", { children: "Get in Touch" }) }),
-                  /* @__PURE__ */ jsx("div", { className: styles.footer_cta, children: /* @__PURE__ */ jsx(Button, { color: "primary", targetUrl: "/contact-us", children: "Contact Us" }) })
+                  /* @__PURE__ */ jsx("div", { className: styles.footer_cta, children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      color: "primary",
+                      targetUrl: "/axos-advantage/contact-us",
+                      children: "Contact Us"
+                    }
+                  ) })
                 ]
               }
             ),

package/dist/SetContainer/SetContainer.js

@@ -75,6 +75,7 @@ import "../Modal/contextApi/store.js";
 /* empty css                                                                  */
 /* empty css                                                                     */
 /* empty css                                                       */
+import "../NavigationMenu/AxosBank/NavData.js";
 import "next/image.js";
 import "next/link.js";
 import "next/navigation.js";

package/dist/assets/HeroBanner/HeroBanner.css

@@ -5,6 +5,7 @@
 }
 ._1ye8k3f2 {
   background: var(--_1073cm81);
+  border-bottom: 1px solid #d4d4d4;
   color: var(--_1073cm82);
 }
 ._1ye8k3f3 {

package/dist/assets/Input/DatePicker.css

@@ -0,0 +1,95 @@
+.react-date-picker {
+  width: 100%;
+}
+.react-date-picker__wrapper {
+  border: none !important;
+}
+.react-calendar__month-view__weekdays__weekday {
+  width: 45px;
+  height: 22px;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--main-font-family);
+  font-weight: 500;
+  letter-spacing: 0.2px;
+  justify-content: center;
+}
+.react-calendar__month-view__weekdays__weekday {
+  font-size: 12px;
+  line-height: 16;
+  color: #2F5B88;
+}
+.react-calendar__month-view__weekdays__weekday > abbr {
+  text-decoration: none;
+}
+.react-calendar__month-view__days__day {
+  width: 49px;
+  height: 49px;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.react-calendar__month-view__days__day > abbr {
+  font-family: var(--main-font-family) !important;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+  color: #051A3F;
+}
+.react-date-picker__inputGroup__input, .react-date-picker__inputGroup__divider {
+  color: #5E6A74 !important;
+}
+.react-date-picker__clear-button {
+  display: none;
+}
+.react-calendar__navigation__label__labelText {
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 36px;
+  letter-spacing: 0.2px;
+  color: #1E3860;
+  font-family: var(--header-font-family);
+}
+.react-datepicker-popper {
+  transform: translateY(40px)!important;
+}
+.react-calendar__month-view__days__day--neighboringMonth {
+  background-color: #F4F4F4 !important;
+  opacity: 50%;
+}
+.react-calendar__month-view__days__day--neighboringMonth > abbr {
+  color: #5E6A74;
+}
+.react-calendar__tile--active > abbr {
+  color: white;
+}
+.react-calendar {
+  border: 12px solid #FFFFFF4D !important;
+  border-radius: 4px;
+}
+.react-calendar__navigation__prev2-button, .react-calendar__navigation__next2-button {
+  display: none;
+}
+.react-date-picker__calendar {
+  max-width: 100% !important;
+}
+.react-date-picker__inputGroup__input:focus-visible {
+  outline: none;
+}
+.react-date-picker__inputGroup__input:invalid {
+  background: transparent !important;
+}
+@media screen and (max-width:320px) {
+  .react-calendar__month-view__weekdays__weekday {
+    width: 43.5px;
+  }
+  .react-calendar__month-view__days__day {
+    width: 43.5px;
+  }
+}
+@media screen and (max-width:400px) {
+  .react-calendar__navigation .react-calendar__navigation__prev-button, .react-calendar__navigation .react-calendar__navigation__next-button {
+    min-width: auto;
+  }
+}

package/dist/assets/Input/InputDate.css

@@ -0,0 +1,39 @@
+.skzved0 {
+  position: relative;
+}
+.skzved1 {
+  position: relative;
+  top: 5px;
+  left: 5px;
+}
+.skzved2 {
+  width: 100px;
+  padding-left: 5px;
+  padding-right: 5px;
+  line-height: 28px;
+  font-size: 14pt;
+}
+.skzved3 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.skzved4 {
+  display: block;
+  background: #FFFFFF;
+  width: 300px;
+  border: solid 1px #CCCCCC;
+  margin: 10px auto;
+  box-shadow: 0 0 15px 0 #C0C0C0;
+  font-size: 1.3rem;
+  text-align: center;
+  z-index: 999;
+}
+.skzved4 .skzved5 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #FFFFFF;
+  cursor: default;
+  font-weight: bold;
+}