@axos-web-dev/shared-components 1.0.8 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Article/Article.js +1 -7
- package/dist/Calculators/ApyCalculator/index.js +3 -2
- package/dist/Calculators/AxosOneCalculator/index.js +12 -4
- package/dist/ExecutiveBio/ExecutiveBio.js +7 -1
- package/dist/ImageBillboard/ImageBillboardSet.js +1 -7
- package/dist/Insight/Featured/Featured.js +52 -45
- package/dist/NavigationMenu/AxosBank/NavBar.module.js +53 -53
- package/dist/NavigationMenu/AxosBank/SubNavBar.js +9 -3
- package/dist/assets/NavigationMenu/AxosBank/NavBar.css.css +661 -661
- package/package.json +1 -1
package/dist/Article/Article.js
CHANGED
|
@@ -25,13 +25,7 @@ const Article = ({
|
|
|
25
25
|
/* @__PURE__ */ jsx("div", { className: ant_img, role: "presentation", children: /* @__PURE__ */ jsxs("picture", { children: [
|
|
26
26
|
/* @__PURE__ */ jsx("source", { srcSet: `${image?.src}?fm=avif`, type: "image/avif" }),
|
|
27
27
|
/* @__PURE__ */ jsx("source", { srcSet: `${image?.src}?fm=webp`, type: "image/webp" }),
|
|
28
|
-
/* @__PURE__ */ jsx(
|
|
29
|
-
LazyImage,
|
|
30
|
-
{
|
|
31
|
-
src: `${image?.src}?q=85`,
|
|
32
|
-
alt: image?.alt ?? ""
|
|
33
|
-
}
|
|
34
|
-
)
|
|
28
|
+
/* @__PURE__ */ jsx(LazyImage, { src: `${image?.src}?q=85`, alt: image?.alt ?? "" })
|
|
35
29
|
] }) }),
|
|
36
30
|
/* @__PURE__ */ jsxs("div", { className: `${ant_content} flex flex_col between`, children: [
|
|
37
31
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
@@ -16,9 +16,10 @@ const ApyCalculator = ({
|
|
|
16
16
|
variant
|
|
17
17
|
}) => {
|
|
18
18
|
const calculator_variant = getVariant(variant);
|
|
19
|
+
const AXOS_ONE_APY = +process.env.NEXT_PUBLIC_AXOS_ONE_APY;
|
|
19
20
|
const [initialDeposit, setInititalDeposit] = useState(1e3);
|
|
20
|
-
const [APR, setAPR] = useState(
|
|
21
|
-
const [APY, setAPY] = useState(
|
|
21
|
+
const [APR, setAPR] = useState(AXOS_ONE_APY - 0.11);
|
|
22
|
+
const [APY, setAPY] = useState(AXOS_ONE_APY);
|
|
22
23
|
const [months, setMonths] = useState(12);
|
|
23
24
|
const [compounding, setCompounding] = useState(360);
|
|
24
25
|
const [monthlyDeposits, setMonthlyDeposits] = useState(100);
|
|
@@ -27,9 +27,10 @@ const AxosOneCalculator = ({
|
|
|
27
27
|
variant
|
|
28
28
|
}) => {
|
|
29
29
|
const calc_variant = getVariant(variant);
|
|
30
|
+
const AXOS_ONE_APY = +process.env.NEXT_PUBLIC_AXOS_ONE_APY;
|
|
30
31
|
const [balance, setBalance] = useState(1e4);
|
|
31
|
-
const [axbAPY, _setAxbAPY] = useState(
|
|
32
|
-
const [axbEarning, setAxbEarning] = useState(
|
|
32
|
+
const [axbAPY, _setAxbAPY] = useState(AXOS_ONE_APY);
|
|
33
|
+
const [axbEarning, setAxbEarning] = useState(AXOS_ONE_APY * 100);
|
|
33
34
|
const [chaseAPY, _setChaseAPY] = useState(0.01);
|
|
34
35
|
const [chaseEarning, setChaseEarning] = useState(1);
|
|
35
36
|
const [bofaAPY, _setBofaAPY] = useState(0.01);
|
|
@@ -45,7 +46,7 @@ const AxosOneCalculator = ({
|
|
|
45
46
|
setBalance(newValue);
|
|
46
47
|
return newValue;
|
|
47
48
|
};
|
|
48
|
-
const
|
|
49
|
+
const calculateBalance = (amount) => {
|
|
49
50
|
setAxbEarning(axbAPY / 100 * amount);
|
|
50
51
|
setChaseEarning(chaseAPY / 100 * amount);
|
|
51
52
|
setBofaEarning(bofaAPY / 100 * amount);
|
|
@@ -91,7 +92,14 @@ const AxosOneCalculator = ({
|
|
|
91
92
|
{
|
|
92
93
|
className: ax1_calculator_button,
|
|
93
94
|
size: "large",
|
|
94
|
-
action: () =>
|
|
95
|
+
action: () => calculateBalance(balance),
|
|
96
|
+
tabIndex: 0,
|
|
97
|
+
role: "button",
|
|
98
|
+
onKeyDown: (event) => {
|
|
99
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
100
|
+
calculateBalance(balance);
|
|
101
|
+
}
|
|
102
|
+
},
|
|
95
103
|
children: "Calculate"
|
|
96
104
|
}
|
|
97
105
|
)
|
|
@@ -162,7 +162,13 @@ const ExecutiveBio = ({
|
|
|
162
162
|
type: "image/webp"
|
|
163
163
|
}
|
|
164
164
|
),
|
|
165
|
-
/* @__PURE__ */ jsx(
|
|
165
|
+
/* @__PURE__ */ jsx(
|
|
166
|
+
LazyImage,
|
|
167
|
+
{
|
|
168
|
+
src: `${executiveHeadshot?.src}?q=85`,
|
|
169
|
+
alt: ""
|
|
170
|
+
}
|
|
171
|
+
)
|
|
166
172
|
] }) }) }) }),
|
|
167
173
|
/* @__PURE__ */ jsxs("div", { className: `${description} flex_col between`, children: [
|
|
168
174
|
/* @__PURE__ */ jsxs("div", { className: person, children: [
|
|
@@ -67,13 +67,7 @@ const ImageBillboard = ({
|
|
|
67
67
|
/* @__PURE__ */ jsx("div", { className: `${billboard_img} flex`, children: image ? /* @__PURE__ */ jsx("div", { className: image_background, role: "presentation", children: /* @__PURE__ */ jsxs("picture", { children: [
|
|
68
68
|
/* @__PURE__ */ jsx("source", { srcSet: `${image?.src}?fm=avif`, type: "image/avif" }),
|
|
69
69
|
/* @__PURE__ */ jsx("source", { srcSet: `${image?.src}?fm=webp`, type: "image/webp" }),
|
|
70
|
-
/* @__PURE__ */ jsx(
|
|
71
|
-
LazyImage,
|
|
72
|
-
{
|
|
73
|
-
src: `${image?.src}?q=85`,
|
|
74
|
-
alt: image?.alt ?? ""
|
|
75
|
-
}
|
|
76
|
-
)
|
|
70
|
+
/* @__PURE__ */ jsx(LazyImage, { src: `${image?.src}?q=85`, alt: image?.alt ?? "" })
|
|
77
71
|
] }) }) : /* @__PURE__ */ jsx(
|
|
78
72
|
"div",
|
|
79
73
|
{
|
|
@@ -153,52 +153,59 @@ const Featured = (props) => {
|
|
|
153
153
|
children: /* @__PURE__ */ jsxs("div", { className: clsx("containment"), children: [
|
|
154
154
|
headline && /* @__PURE__ */ jsx("h2", { className: clsx(featured_title), children: headline }),
|
|
155
155
|
/* @__PURE__ */ jsxs("div", { className: clsx(featured_grid), children: [
|
|
156
|
-
/* @__PURE__ */ jsxs(
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
type: "image/webp"
|
|
170
|
-
}
|
|
171
|
-
),
|
|
172
|
-
/* @__PURE__ */ jsx(
|
|
173
|
-
Image,
|
|
174
|
-
{
|
|
175
|
-
src: `https:${main?.image?.url}?q=85`,
|
|
176
|
-
className: clsx(featured_maingrid_img),
|
|
177
|
-
width: 703,
|
|
178
|
-
height: 340,
|
|
179
|
-
priority: true,
|
|
180
|
-
alt: ""
|
|
181
|
-
}
|
|
182
|
-
)
|
|
183
|
-
] }),
|
|
184
|
-
/* @__PURE__ */ jsxs("div", { className: clsx(featured_maingrid_item), children: [
|
|
185
|
-
/* @__PURE__ */ jsx(
|
|
186
|
-
"h2",
|
|
187
|
-
{
|
|
188
|
-
className: clsx(
|
|
189
|
-
title({ variant: "primary" }),
|
|
190
|
-
featured_maingrid_title
|
|
156
|
+
/* @__PURE__ */ jsxs(
|
|
157
|
+
"a",
|
|
158
|
+
{
|
|
159
|
+
href: main?.url,
|
|
160
|
+
className: clsx(featured_maingrid, featured_hero),
|
|
161
|
+
children: [
|
|
162
|
+
/* @__PURE__ */ jsxs("picture", { children: [
|
|
163
|
+
/* @__PURE__ */ jsx(
|
|
164
|
+
"source",
|
|
165
|
+
{
|
|
166
|
+
srcSet: `https:${main?.image?.url}?fm=avif`,
|
|
167
|
+
type: "image/avif"
|
|
168
|
+
}
|
|
191
169
|
),
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
170
|
+
/* @__PURE__ */ jsx(
|
|
171
|
+
"source",
|
|
172
|
+
{
|
|
173
|
+
srcSet: `https:${main?.image?.url}?fm=webp`,
|
|
174
|
+
type: "image/webp"
|
|
175
|
+
}
|
|
176
|
+
),
|
|
177
|
+
/* @__PURE__ */ jsx(
|
|
178
|
+
Image,
|
|
179
|
+
{
|
|
180
|
+
src: `https:${main?.image?.url}?q=85`,
|
|
181
|
+
className: clsx(featured_maingrid_img),
|
|
182
|
+
width: 703,
|
|
183
|
+
height: 340,
|
|
184
|
+
priority: true,
|
|
185
|
+
alt: ""
|
|
186
|
+
}
|
|
187
|
+
)
|
|
188
|
+
] }),
|
|
189
|
+
/* @__PURE__ */ jsxs("div", { className: clsx(featured_maingrid_item), children: [
|
|
190
|
+
/* @__PURE__ */ jsx(
|
|
191
|
+
"h2",
|
|
192
|
+
{
|
|
193
|
+
className: clsx(
|
|
194
|
+
title({ variant: "primary" }),
|
|
195
|
+
featured_maingrid_title
|
|
196
|
+
),
|
|
197
|
+
children: main?.title ?? ""
|
|
198
|
+
}
|
|
199
|
+
),
|
|
200
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
201
|
+
/* @__PURE__ */ jsx(ClockIcon, { className: clsx(featured_center_vertical) }),
|
|
202
|
+
" ",
|
|
203
|
+
/* @__PURE__ */ jsx("span", { className: clsx(featured_center_vertical), children: (main?.readingTime ?? "") + " minutes" })
|
|
204
|
+
] })
|
|
205
|
+
] })
|
|
206
|
+
]
|
|
207
|
+
}
|
|
208
|
+
),
|
|
202
209
|
/* @__PURE__ */ jsx("div", { className: clsx(featured_subgrid), children: restFeatured.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
203
210
|
/* @__PURE__ */ jsx(
|
|
204
211
|
FeaturedItem,
|
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
import '../../assets/NavigationMenu/AxosBank/NavBar.css.css';const header = "
|
|
2
|
-
const wrapper = "
|
|
3
|
-
const header_main_row = "
|
|
4
|
-
const mobile_header = "
|
|
5
|
-
const logo_wrap = "
|
|
6
|
-
const primary_links = "
|
|
7
|
-
const main_nav_link = "
|
|
8
|
-
const sub_nav_link = "
|
|
9
|
-
const signin_wrap = "
|
|
10
|
-
const signin_btn = "
|
|
11
|
-
const header_sub_row = "
|
|
12
|
-
const signin_dropdown = "
|
|
13
|
-
const shadow = "
|
|
14
|
-
const signin_header = "
|
|
15
|
-
const signin_subheader = "
|
|
16
|
-
const opacity = "
|
|
17
|
-
const fadeInDown = "
|
|
18
|
-
const signin_footer = "
|
|
19
|
-
const open = "
|
|
20
|
-
const dd_wrapper = "
|
|
21
|
-
const dd_media = "
|
|
22
|
-
const dd_media_img = "
|
|
23
|
-
const dd_site_navs = "
|
|
24
|
-
const dd_media_header = "
|
|
25
|
-
const mt_8 = "
|
|
26
|
-
const mt_16 = "
|
|
27
|
-
const ml_8 = "
|
|
28
|
-
const dd_media_cta = "
|
|
29
|
-
const reversed_row = "
|
|
30
|
-
const headline = "
|
|
31
|
-
const nav_anchor = "
|
|
32
|
-
const headline_cta = "
|
|
33
|
-
const site_lists = "
|
|
34
|
-
const hamburger = "
|
|
35
|
-
const mobile_only = "
|
|
36
|
-
const mobile_logo = "
|
|
37
|
-
const highlight = "
|
|
38
|
-
const mobile_nav = "
|
|
39
|
-
const mobile_opened = "
|
|
40
|
-
const mobile_nav_item = "
|
|
41
|
-
const has_dropdown = "
|
|
42
|
-
const icon_wrap = "
|
|
43
|
-
const mobile_footer = "
|
|
44
|
-
const mobile_footer_content = "
|
|
45
|
-
const mobile_footer_media = "
|
|
46
|
-
const footer_cta = "
|
|
47
|
-
const inner_wrapper = "
|
|
48
|
-
const btn = "
|
|
49
|
-
const sub_menu = "
|
|
50
|
-
const main = "
|
|
51
|
-
const dd_footer = "
|
|
52
|
-
const skip_btn = "
|
|
53
|
-
const desktop_only = "
|
|
1
|
+
import '../../assets/NavigationMenu/AxosBank/NavBar.css.css';const header = "_header_1bt29_1";
|
|
2
|
+
const wrapper = "_wrapper_1bt29_5";
|
|
3
|
+
const header_main_row = "_header_main_row_1bt29_11";
|
|
4
|
+
const mobile_header = "_mobile_header_1bt29_12";
|
|
5
|
+
const logo_wrap = "_logo_wrap_1bt29_18";
|
|
6
|
+
const primary_links = "_primary_links_1bt29_22";
|
|
7
|
+
const main_nav_link = "_main_nav_link_1bt29_26";
|
|
8
|
+
const sub_nav_link = "_sub_nav_link_1bt29_44";
|
|
9
|
+
const signin_wrap = "_signin_wrap_1bt29_46";
|
|
10
|
+
const signin_btn = "_signin_btn_1bt29_47";
|
|
11
|
+
const header_sub_row = "_header_sub_row_1bt29_84";
|
|
12
|
+
const signin_dropdown = "_signin_dropdown_1bt29_116";
|
|
13
|
+
const shadow = "_shadow_1bt29_126";
|
|
14
|
+
const signin_header = "_signin_header_1bt29_136";
|
|
15
|
+
const signin_subheader = "_signin_subheader_1bt29_143";
|
|
16
|
+
const opacity = "_opacity_1bt29_165";
|
|
17
|
+
const fadeInDown = "_fadeInDown_1bt29_1";
|
|
18
|
+
const signin_footer = "_signin_footer_1bt29_171";
|
|
19
|
+
const open = "_open_1bt29_192";
|
|
20
|
+
const dd_wrapper = "_dd_wrapper_1bt29_204";
|
|
21
|
+
const dd_media = "_dd_media_1bt29_213";
|
|
22
|
+
const dd_media_img = "_dd_media_img_1bt29_218";
|
|
23
|
+
const dd_site_navs = "_dd_site_navs_1bt29_222";
|
|
24
|
+
const dd_media_header = "_dd_media_header_1bt29_229";
|
|
25
|
+
const mt_8 = "_mt_8_1bt29_239";
|
|
26
|
+
const mt_16 = "_mt_16_1bt29_243";
|
|
27
|
+
const ml_8 = "_ml_8_1bt29_247";
|
|
28
|
+
const dd_media_cta = "_dd_media_cta_1bt29_251";
|
|
29
|
+
const reversed_row = "_reversed_row_1bt29_283";
|
|
30
|
+
const headline = "_headline_1bt29_293";
|
|
31
|
+
const nav_anchor = "_nav_anchor_1bt29_301";
|
|
32
|
+
const headline_cta = "_headline_cta_1bt29_309";
|
|
33
|
+
const site_lists = "_site_lists_1bt29_324";
|
|
34
|
+
const hamburger = "_hamburger_1bt29_362";
|
|
35
|
+
const mobile_only = "_mobile_only_1bt29_376";
|
|
36
|
+
const mobile_logo = "_mobile_logo_1bt29_382";
|
|
37
|
+
const highlight = "_highlight_1bt29_387";
|
|
38
|
+
const mobile_nav = "_mobile_nav_1bt29_413";
|
|
39
|
+
const mobile_opened = "_mobile_opened_1bt29_424";
|
|
40
|
+
const mobile_nav_item = "_mobile_nav_item_1bt29_432";
|
|
41
|
+
const has_dropdown = "_has_dropdown_1bt29_447";
|
|
42
|
+
const icon_wrap = "_icon_wrap_1bt29_463";
|
|
43
|
+
const mobile_footer = "_mobile_footer_1bt29_468";
|
|
44
|
+
const mobile_footer_content = "_mobile_footer_content_1bt29_473";
|
|
45
|
+
const mobile_footer_media = "_mobile_footer_media_1bt29_488";
|
|
46
|
+
const footer_cta = "_footer_cta_1bt29_494";
|
|
47
|
+
const inner_wrapper = "_inner_wrapper_1bt29_522";
|
|
48
|
+
const btn = "_btn_1bt29_527";
|
|
49
|
+
const sub_menu = "_sub_menu_1bt29_532";
|
|
50
|
+
const main = "_main_1bt29_26";
|
|
51
|
+
const dd_footer = "_dd_footer_1bt29_557";
|
|
52
|
+
const skip_btn = "_skip_btn_1bt29_565";
|
|
53
|
+
const desktop_only = "_desktop_only_1bt29_610";
|
|
54
54
|
const styles = {
|
|
55
55
|
header,
|
|
56
56
|
wrapper,
|
|
@@ -119,6 +119,7 @@ function SubNavBar() {
|
|
|
119
119
|
const [hoveredLink, setHoveredLink] = useState(void 0);
|
|
120
120
|
const handleMouseEnter = (link) => setHoveredLink(link);
|
|
121
121
|
const handleMouseLeave = () => setHoveredLink(void 0);
|
|
122
|
+
const AXOS_ONE_APY = +process.env.NEXT_PUBLIC_AXOS_ONE_APY;
|
|
122
123
|
const containerRef = useRef(null);
|
|
123
124
|
const [isClient, setIsClient] = useState(false);
|
|
124
125
|
const support = subNavItems.support;
|
|
@@ -138,7 +139,8 @@ function SubNavBar() {
|
|
|
138
139
|
"/invest",
|
|
139
140
|
"/tools"
|
|
140
141
|
];
|
|
141
|
-
if (!subNavPaths.some((el) => pathname?.includes(el) || isHomepage))
|
|
142
|
+
if (!subNavPaths.some((el) => pathname?.includes(el) || isHomepage))
|
|
143
|
+
return null;
|
|
142
144
|
useEffect(() => {
|
|
143
145
|
setIsClient(true);
|
|
144
146
|
}, []);
|
|
@@ -732,7 +734,11 @@ function SubNavBar() {
|
|
|
732
734
|
children: [
|
|
733
735
|
/* @__PURE__ */ jsxs("div", { className: styles.dd_media_header, children: [
|
|
734
736
|
/* @__PURE__ */ jsx("p", { role: "heading", children: "Introducing Axos ONE" }),
|
|
735
|
-
/* @__PURE__ */
|
|
737
|
+
/* @__PURE__ */ jsxs("p", { className: styles.mt_8, children: [
|
|
738
|
+
"Explore the benefits of our newest account bundle with up to ",
|
|
739
|
+
AXOS_ONE_APY,
|
|
740
|
+
"% APY on Savings, up to 0.51% on Checking, plus early paydays and no maintenance fees."
|
|
741
|
+
] })
|
|
736
742
|
] }),
|
|
737
743
|
/* @__PURE__ */ jsx(
|
|
738
744
|
"div",
|
|
@@ -741,7 +747,7 @@ function SubNavBar() {
|
|
|
741
747
|
children: /* @__PURE__ */ jsx(
|
|
742
748
|
Image,
|
|
743
749
|
{
|
|
744
|
-
src: `https://images.axos.com/o9ov1v03uwqk/
|
|
750
|
+
src: `https://images.axos.com/o9ov1v03uwqk/17Q3IVqKwSGO9cMqFUWF4o/056f0174df9933f3963b215072bfe76b/axos-one-nav.png`,
|
|
745
751
|
alt: "",
|
|
746
752
|
width: 233,
|
|
747
753
|
height: 233
|