@axos-web-dev/shared-components 1.0.77 → 1.0.78-buydown-patch.1
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/ATMLocator/ATMLocator.js +3 -3
- package/dist/Auth/ErrorAlert.js +3 -3
- package/dist/Auth/SignInPassword.js +9 -5
- package/dist/Button/Button.css.d.ts +13 -0
- package/dist/Button/Button.css.js +1 -1
- package/dist/Button/Button.js +3 -3
- package/dist/Calculators/ApyCalculator/index.js +18 -11
- package/dist/Calculators/AxosOneCalculator/index.js +6 -6
- package/dist/Calculators/BuyDownCalculator/index.js +1 -1
- package/dist/Calculators/Calculator.js +4 -4
- package/dist/Carousel/index.js +11 -11
- package/dist/Chevron/index.js +3 -3
- package/dist/Comparison/Comparison.css.d.ts +1 -0
- package/dist/Comparison/Comparison.css.js +3 -1
- package/dist/Comparison/Comparison.js +9 -9
- package/dist/Comparison/index.js +2 -1
- package/dist/ExecutiveBio/ExecutiveBio.js +3 -3
- package/dist/FaqAccordion/index.js +3 -3
- package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js +3 -3
- package/dist/Forms/ApplyNow.js +3 -3
- package/dist/Forms/ContactUsBusiness.d.ts +1 -1
- package/dist/Forms/ContactUsBusiness.js +8 -8
- package/dist/Forms/ContactUsBusinessNameEmail.d.ts +9 -0
- package/dist/Forms/ContactUsBusinessNameEmail.js +272 -0
- package/dist/Forms/ContactUsNMLSId.js +3 -3
- package/dist/Forms/CraPublicFile.js +3 -3
- package/dist/Forms/EmailOnly.js +3 -3
- package/dist/Forms/FormEnums.js +58 -5
- package/dist/Forms/MortgageRate/MortgageRateForm.js +3 -3
- package/dist/Forms/MortgageRate/MortgageRateWatch.js +3 -3
- package/dist/Forms/SuccesForm.js +4 -4
- package/dist/Forms/index.d.ts +2 -1
- package/dist/Forms/index.js +3 -1
- package/dist/Hyperlink/index.js +3 -3
- package/dist/IconBillboard/IconBillboard.css.d.ts +1 -0
- package/dist/IconBillboard/IconBillboard.css.js +2 -0
- package/dist/IconBillboard/IconBillboard.d.ts +1 -2
- package/dist/IconBillboard/IconBillboard.js +30 -85
- package/dist/IconBillboard/index.js +3 -3
- package/dist/IconBillboard/sections/CallToActionSection.d.ts +12 -0
- package/dist/IconBillboard/sections/CallToActionSection.js +101 -0
- package/dist/IconBillboard/sections/HeaderSection.d.ts +11 -0
- package/dist/IconBillboard/sections/HeaderSection.js +23 -0
- package/dist/IconBillboard/sections/IconSection.d.ts +7 -0
- package/dist/IconBillboard/sections/IconSection.js +18 -0
- package/dist/IconBillboard/sections/ItemsSection.d.ts +11 -0
- package/dist/IconBillboard/sections/ItemsSection.js +11 -0
- package/dist/IconBillboard/sections/LayoutSection.d.ts +8 -0
- package/dist/IconBillboard/sections/LayoutSection.js +6 -0
- package/dist/ImageBillboard/ImageBillboard.css.d.ts +13 -0
- package/dist/ImageBillboard/ImageBillboard.css.js +47 -21
- package/dist/ImageBillboard/ImageBillboard.interface.d.ts +19 -2
- package/dist/ImageBillboard/ImageBillboardSet.d.ts +1 -1
- package/dist/ImageBillboard/ImageBillboardSet.js +83 -15
- package/dist/ImageBillboard/index.js +14 -1
- package/dist/ImageLink/ImageLink.js +3 -3
- package/dist/ImageLink/ImageLinkSet.js +6 -6
- package/dist/ImageLink/index.js +3 -3
- package/dist/Insight/Featured/CategorySelector.js +4 -4
- package/dist/Insight/Featured/Featured.js +11 -11
- package/dist/Insight/Featured/Header.js +10 -10
- package/dist/Modal/Modal.js +3 -3
- package/dist/NavigationMenu/AxosALTS/NavData.js +3 -3
- package/dist/NavigationMenu/AxosALTS/index.js +3 -3
- package/dist/NavigationMenu/AxosAdvisor/SubNavBar.js +3 -10
- package/dist/NavigationMenu/AxosAdvisor/index.js +3 -11
- package/dist/NavigationMenu/AxosBank/MobileMenu/MobileNavData.d.ts +4 -1
- package/dist/NavigationMenu/AxosBank/MobileMenu/MobileNavData.js +11 -6
- package/dist/NavigationMenu/AxosBank/NavData.js +3 -3
- package/dist/NavigationMenu/AxosBank/SubNavBar.js +53 -21
- package/dist/NavigationMenu/AxosBank/index.js +3 -3
- package/dist/NavigationMenu/LaVictoire/NavData.js +3 -3
- package/dist/NavigationMenu/LaVictoire/index.js +3 -3
- package/dist/NavigationMenu/NavDataJson.d.ts +2 -0
- package/dist/NavigationMenu/NavDataJson.js +308 -0
- package/dist/NavigationMenu/Navbar.d.ts +5 -0
- package/dist/NavigationMenu/Navbar.js +329 -0
- package/dist/NavigationMenu/SignInNavButton.d.ts +1 -0
- package/dist/NavigationMenu/SignInNavButton.js +362 -0
- package/dist/SetContainer/SetContainer.d.ts +1 -1
- package/dist/SetContainer/SetContainer.js +11 -7
- package/dist/SocialMediaBar/iconsRepository.js +3 -3
- package/dist/VideoTile/VideoTile.interface.d.ts +4 -3
- package/dist/VideoTile/VideoTile.js +182 -28
- package/dist/VideoWrapper/index.js +4 -4
- package/dist/assets/Button/Button.css +31 -16
- package/dist/assets/Calculators/AxosOneCalculator/BalanceAPYCalculator.css +5 -0
- package/dist/assets/Calculators/SummitApyCalculator/BalanceAPYCalculator.css +8 -0
- package/dist/assets/CallToActionBar/CallToActionBar.css +4 -0
- package/dist/assets/Comparison/Comparison.css +9 -2
- package/dist/assets/HeroBanner/HeroBanner.css +1 -1
- package/dist/assets/IconBillboard/IconBillboard.css +34 -2
- package/dist/assets/ImageBillboard/ImageBillboard.css +243 -63
- package/dist/assets/SetContainer/SetContainer.css +0 -1
- package/dist/assets/utils/optimizeImage/optimizeImage.css.css +8 -9
- package/dist/main.js +22 -6
- package/dist/utils/optimizeImage/OptimizeImage.d.ts +2 -2
- package/dist/utils/optimizeImage/OptimizeImage.js +1 -1
- package/dist/utils/optimizeImage/optimizeImage.module.js +3 -3
- package/package.json +1 -1
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Button } from "../../Button/Button.js";
|
|
4
|
+
import "../../Button/Button.css.js";
|
|
5
|
+
import { useMemo } from "react";
|
|
6
|
+
import "react-use";
|
|
7
|
+
import { buttons } from "../IconBillboard.css.js";
|
|
8
|
+
import { Chevron } from "../../Chevron/index.js";
|
|
9
|
+
import { getVariant } from "../../utils/getVariant.js";
|
|
10
|
+
const useFullClick = (callToActionRow) => {
|
|
11
|
+
return useMemo(() => {
|
|
12
|
+
let chevronCount = 0;
|
|
13
|
+
let buttonCount = 0;
|
|
14
|
+
let chevronUrl;
|
|
15
|
+
let chevronText;
|
|
16
|
+
if (callToActionRow && callToActionRow.length > 0) {
|
|
17
|
+
callToActionRow.forEach((cta) => {
|
|
18
|
+
if (cta.type === "Button") {
|
|
19
|
+
buttonCount++;
|
|
20
|
+
} else {
|
|
21
|
+
chevronCount++;
|
|
22
|
+
chevronUrl = cta.targetUrl;
|
|
23
|
+
chevronText = cta.displayText;
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
const isClickable = chevronCount === 1 && buttonCount === 0 && typeof chevronUrl === "string" && chevronUrl.length > 0;
|
|
28
|
+
const handleClick = (e) => {
|
|
29
|
+
if (!isClickable) return;
|
|
30
|
+
const linkEl = e.currentTarget.querySelector("a");
|
|
31
|
+
if (linkEl && linkEl instanceof HTMLAnchorElement) {
|
|
32
|
+
window.location.href = linkEl.href;
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
return {
|
|
36
|
+
isClickable,
|
|
37
|
+
handleClick,
|
|
38
|
+
chevronText
|
|
39
|
+
};
|
|
40
|
+
}, [callToActionRow]);
|
|
41
|
+
};
|
|
42
|
+
const CallToActionSection = ({
|
|
43
|
+
callToActionRow
|
|
44
|
+
}) => {
|
|
45
|
+
if (!Array.isArray(callToActionRow) || callToActionRow.length === 0) {
|
|
46
|
+
return null;
|
|
47
|
+
}
|
|
48
|
+
return /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(
|
|
49
|
+
({
|
|
50
|
+
id,
|
|
51
|
+
variant,
|
|
52
|
+
displayText,
|
|
53
|
+
targetUrl,
|
|
54
|
+
type,
|
|
55
|
+
marketingIntersitial,
|
|
56
|
+
newTab,
|
|
57
|
+
...rest
|
|
58
|
+
}) => type === "Button" ? rest.as == "button" ? /* @__PURE__ */ jsx(
|
|
59
|
+
Button,
|
|
60
|
+
{
|
|
61
|
+
targetUrl,
|
|
62
|
+
color: getVariant(variant),
|
|
63
|
+
size: "medium",
|
|
64
|
+
rounded: "medium",
|
|
65
|
+
marketingIntersitial,
|
|
66
|
+
newTab,
|
|
67
|
+
as: "button",
|
|
68
|
+
type: "button",
|
|
69
|
+
action: rest?.onClick,
|
|
70
|
+
children: displayText
|
|
71
|
+
},
|
|
72
|
+
id
|
|
73
|
+
) : /* @__PURE__ */ jsx(
|
|
74
|
+
Button,
|
|
75
|
+
{
|
|
76
|
+
targetUrl,
|
|
77
|
+
color: getVariant(variant),
|
|
78
|
+
size: "medium",
|
|
79
|
+
rounded: "medium",
|
|
80
|
+
marketingIntersitial,
|
|
81
|
+
newTab,
|
|
82
|
+
children: displayText
|
|
83
|
+
},
|
|
84
|
+
id
|
|
85
|
+
) : /* @__PURE__ */ jsx(
|
|
86
|
+
Chevron,
|
|
87
|
+
{
|
|
88
|
+
targetUrl,
|
|
89
|
+
variant: getVariant(variant),
|
|
90
|
+
marketingIntersitial,
|
|
91
|
+
newTab,
|
|
92
|
+
children: displayText
|
|
93
|
+
},
|
|
94
|
+
id
|
|
95
|
+
)
|
|
96
|
+
) });
|
|
97
|
+
};
|
|
98
|
+
export {
|
|
99
|
+
CallToActionSection,
|
|
100
|
+
useFullClick
|
|
101
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode, Ref } from 'react';
|
|
2
|
+
import { QuaternaryTypes } from '../../utils';
|
|
3
|
+
|
|
4
|
+
export interface HeaderSectionProps {
|
|
5
|
+
body?: ReactNode | undefined;
|
|
6
|
+
headingLevel: "h2" | "h3";
|
|
7
|
+
headingRef: Ref<HTMLHeadingElement>;
|
|
8
|
+
headline?: ReactNode | undefined;
|
|
9
|
+
variant: QuaternaryTypes;
|
|
10
|
+
}
|
|
11
|
+
export declare const HeaderSection: ({ body, headingLevel, headingRef, headline, variant, }: HeaderSectionProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { headerIconBillboard, title } from "../IconBillboard.css.js";
|
|
4
|
+
const HeaderSection = ({
|
|
5
|
+
body,
|
|
6
|
+
headingLevel,
|
|
7
|
+
headingRef,
|
|
8
|
+
headline,
|
|
9
|
+
variant
|
|
10
|
+
}) => /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
|
|
11
|
+
headline && React.createElement(
|
|
12
|
+
headingLevel,
|
|
13
|
+
{
|
|
14
|
+
ref: headingRef,
|
|
15
|
+
className: `${title({ variant })}`
|
|
16
|
+
},
|
|
17
|
+
headline
|
|
18
|
+
),
|
|
19
|
+
body && /* @__PURE__ */ jsx("div", { children: body })
|
|
20
|
+
] });
|
|
21
|
+
export {
|
|
22
|
+
HeaderSection
|
|
23
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { billboard_icon } from "../IconBillboard.css.js";
|
|
3
|
+
const IconSection = ({ icon }) => {
|
|
4
|
+
if (!icon) return null;
|
|
5
|
+
return /* @__PURE__ */ jsx("div", { className: billboard_icon, role: "presentation", children: /* @__PURE__ */ jsx(
|
|
6
|
+
"img",
|
|
7
|
+
{
|
|
8
|
+
src: icon?.src,
|
|
9
|
+
alt: icon?.alt ?? "",
|
|
10
|
+
className: "img_fluid",
|
|
11
|
+
height: icon?.height,
|
|
12
|
+
width: icon?.width
|
|
13
|
+
}
|
|
14
|
+
) });
|
|
15
|
+
};
|
|
16
|
+
export {
|
|
17
|
+
IconSection
|
|
18
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { QuaternaryTypes } from '../../utils';
|
|
3
|
+
|
|
4
|
+
export interface ItemsSectionProps {
|
|
5
|
+
items?: {
|
|
6
|
+
id: string;
|
|
7
|
+
content: ReactNode;
|
|
8
|
+
}[];
|
|
9
|
+
variant: QuaternaryTypes;
|
|
10
|
+
}
|
|
11
|
+
export declare const ItemsSection: ({ items, variant }: ItemsSectionProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import { list } from "../IconBillboard.css.js";
|
|
4
|
+
import { BulletItem } from "../../BulletItem/BulletItem.js";
|
|
5
|
+
const ItemsSection = ({ items, variant }) => {
|
|
6
|
+
if (!items || items.length === 0) return null;
|
|
7
|
+
return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: clsx(list, "list_unstyled"), children: items.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, variant, children: item.content }, item.id)) }) });
|
|
8
|
+
};
|
|
9
|
+
export {
|
|
10
|
+
ItemsSection
|
|
11
|
+
};
|
|
@@ -145,6 +145,7 @@ export declare const header: import('@vanilla-extract/recipes').RuntimeFn<{
|
|
|
145
145
|
}>;
|
|
146
146
|
export declare const billboard_container: string;
|
|
147
147
|
export declare const billboard_img: string;
|
|
148
|
+
export declare const is_bg_img: string;
|
|
148
149
|
export declare const billboard_body: string;
|
|
149
150
|
export declare const billboard_header_section: string;
|
|
150
151
|
export declare const billboard_ctas: string;
|
|
@@ -156,6 +157,8 @@ export declare const section_text_ImageBillboard: string;
|
|
|
156
157
|
export declare const billboard_image: string;
|
|
157
158
|
export declare const mh_330: string;
|
|
158
159
|
export declare const image_background: string;
|
|
160
|
+
export declare const image_inner_wrapper: string;
|
|
161
|
+
export declare const image_based: string;
|
|
159
162
|
export declare const rate_container: string;
|
|
160
163
|
export declare const rate_pad: string;
|
|
161
164
|
export declare const up_to: string;
|
|
@@ -163,6 +166,16 @@ export declare const rate_billboard: string;
|
|
|
163
166
|
export declare const apy_billboard: string;
|
|
164
167
|
export declare const body_copy: string;
|
|
165
168
|
export declare const sub_bullets: string;
|
|
169
|
+
export declare const top_left: string;
|
|
170
|
+
export declare const top_center: string;
|
|
171
|
+
export declare const top_right: string;
|
|
172
|
+
export declare const center_left: string;
|
|
173
|
+
export declare const center_right: string;
|
|
174
|
+
export declare const center_center: string;
|
|
175
|
+
export declare const bottom_left: string;
|
|
176
|
+
export declare const bottom_right: string;
|
|
177
|
+
export declare const bottom_center: string;
|
|
178
|
+
export declare const remove_padding: string;
|
|
166
179
|
export declare const exit_intent_backdrop: string;
|
|
167
180
|
export declare const exit_intent: string;
|
|
168
181
|
export declare const modal_close_button: string;
|
|
@@ -11,27 +11,40 @@ var supertag = createRuntimeFn({ defaultClassName: "_1m7m2a8", variantClassNames
|
|
|
11
11
|
var header = createRuntimeFn({ defaultClassName: "_1m7m2ad", variantClassNames: { variant: { primary: "_1m7m2ae", secondary: "_1m7m2af", tertiary: "_1m7m2ag", quaternary: "_1m7m2ah" } }, defaultVariants: {}, compoundVariants: [] });
|
|
12
12
|
var billboard_container = "_1m7m2ai";
|
|
13
13
|
var billboard_img = "_1m7m2aj";
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var
|
|
18
|
-
var
|
|
19
|
-
var
|
|
20
|
-
var
|
|
21
|
-
var
|
|
22
|
-
var
|
|
23
|
-
var
|
|
24
|
-
var
|
|
25
|
-
var
|
|
26
|
-
var
|
|
27
|
-
var
|
|
28
|
-
var
|
|
29
|
-
var
|
|
30
|
-
var
|
|
31
|
-
var
|
|
32
|
-
var
|
|
33
|
-
var
|
|
34
|
-
var
|
|
14
|
+
var is_bg_img = "_1m7m2ak";
|
|
15
|
+
var billboard_body = "_1m7m2al";
|
|
16
|
+
var billboard_header_section = "_1m7m2am";
|
|
17
|
+
var billboard_ctas = "_1m7m2an";
|
|
18
|
+
var body = "_1m7m2ao";
|
|
19
|
+
var single_container = "_1m7m2ap";
|
|
20
|
+
var two_inline = "_1m7m2aq";
|
|
21
|
+
var three_inline = "_1m7m2ar";
|
|
22
|
+
var section_text_ImageBillboard = "_1m7m2as";
|
|
23
|
+
var billboard_image = "_1m7m2at";
|
|
24
|
+
var mh_330 = "_1m7m2au";
|
|
25
|
+
var image_background = "_1m7m2av";
|
|
26
|
+
var image_inner_wrapper = "_1m7m2aw";
|
|
27
|
+
var image_based = "_1m7m2ax";
|
|
28
|
+
var rate_container = "_1m7m2ay";
|
|
29
|
+
var rate_pad = "_1m7m2az";
|
|
30
|
+
var up_to = "_1m7m2a10";
|
|
31
|
+
var rate_billboard = "_1m7m2a11";
|
|
32
|
+
var apy_billboard = "_1m7m2a12";
|
|
33
|
+
var body_copy = "_1m7m2a13";
|
|
34
|
+
var sub_bullets = "_1m7m2a14";
|
|
35
|
+
var top_left = "_1m7m2a15";
|
|
36
|
+
var top_center = "_1m7m2a16";
|
|
37
|
+
var top_right = "_1m7m2a17";
|
|
38
|
+
var center_left = "_1m7m2a18";
|
|
39
|
+
var center_right = "_1m7m2a19";
|
|
40
|
+
var center_center = "_1m7m2a1a";
|
|
41
|
+
var bottom_left = "_1m7m2a1b";
|
|
42
|
+
var bottom_right = "_1m7m2a1c";
|
|
43
|
+
var bottom_center = "_1m7m2a1d";
|
|
44
|
+
var remove_padding = "_1m7m2a1e";
|
|
45
|
+
var exit_intent_backdrop = "_1m7m2a1f";
|
|
46
|
+
var exit_intent = "_1m7m2a1g";
|
|
47
|
+
var modal_close_button = "_1m7m2a1h";
|
|
35
48
|
export {
|
|
36
49
|
apy_billboard,
|
|
37
50
|
billboard,
|
|
@@ -43,21 +56,34 @@ export {
|
|
|
43
56
|
billboard_img,
|
|
44
57
|
body,
|
|
45
58
|
body_copy,
|
|
59
|
+
bottom_center,
|
|
60
|
+
bottom_left,
|
|
61
|
+
bottom_right,
|
|
62
|
+
center_center,
|
|
63
|
+
center_left,
|
|
64
|
+
center_right,
|
|
46
65
|
exit_intent,
|
|
47
66
|
exit_intent_backdrop,
|
|
48
67
|
header,
|
|
49
68
|
imagePlacement,
|
|
50
69
|
image_background,
|
|
70
|
+
image_based,
|
|
71
|
+
image_inner_wrapper,
|
|
72
|
+
is_bg_img,
|
|
51
73
|
mh_330,
|
|
52
74
|
modal_close_button,
|
|
53
75
|
rate_billboard,
|
|
54
76
|
rate_container,
|
|
55
77
|
rate_pad,
|
|
78
|
+
remove_padding,
|
|
56
79
|
section_text_ImageBillboard,
|
|
57
80
|
single_container,
|
|
58
81
|
sub_bullets,
|
|
59
82
|
supertag,
|
|
60
83
|
three_inline,
|
|
84
|
+
top_center,
|
|
85
|
+
top_left,
|
|
86
|
+
top_right,
|
|
61
87
|
two_inline,
|
|
62
88
|
up_to
|
|
63
89
|
};
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { BulletItemProps } from '../BulletItem';
|
|
2
2
|
import { ChevronProps } from '../Chevron/Chevron.interface';
|
|
3
|
-
import { ImageInterface } from '../IconBillboard';
|
|
4
3
|
import { QuaternaryTypes } from '../utils/variant.types';
|
|
5
4
|
import { ReactNode } from 'react';
|
|
6
5
|
|
|
@@ -13,6 +12,22 @@ export interface ImageBillboardSetProps {
|
|
|
13
12
|
variant: QuaternaryTypes;
|
|
14
13
|
set?: boolean;
|
|
15
14
|
bordered?: boolean;
|
|
15
|
+
layout?: "Inline" | "Stacked";
|
|
16
|
+
}
|
|
17
|
+
export interface BillboardImageInterface {
|
|
18
|
+
src: string;
|
|
19
|
+
alt?: string;
|
|
20
|
+
imageType?: "Image" | "Background Image";
|
|
21
|
+
imageAlignment?: string;
|
|
22
|
+
imageBackgroundColor?: string;
|
|
23
|
+
height?: string | number;
|
|
24
|
+
width?: string | number;
|
|
25
|
+
}
|
|
26
|
+
export interface BillboardVideoInterface {
|
|
27
|
+
videoId: string;
|
|
28
|
+
videoPlayer: string;
|
|
29
|
+
thubnailImage: string;
|
|
30
|
+
transcript?: string;
|
|
16
31
|
}
|
|
17
32
|
export interface ImageBillboardInterface {
|
|
18
33
|
id: string;
|
|
@@ -24,7 +39,8 @@ export interface ImageBillboardInterface {
|
|
|
24
39
|
variant: QuaternaryTypes;
|
|
25
40
|
eyebrow: string | ReactNode;
|
|
26
41
|
bullets: BulletItemProps[];
|
|
27
|
-
image?:
|
|
42
|
+
image?: BillboardImageInterface;
|
|
43
|
+
video?: BillboardVideoInterface;
|
|
28
44
|
callToActionRow: ChevronProps[];
|
|
29
45
|
set?: boolean;
|
|
30
46
|
textImageLineOneSmall?: ReactNode | string;
|
|
@@ -32,4 +48,5 @@ export interface ImageBillboardInterface {
|
|
|
32
48
|
textImageLineThreeSmall?: ReactNode | string;
|
|
33
49
|
internalName?: string;
|
|
34
50
|
exitIntent?: boolean;
|
|
51
|
+
layout?: ImageBillboardSetProps["layout"];
|
|
35
52
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ImageBillboardInterface } from './ImageBillboard.interface';
|
|
2
2
|
|
|
3
|
-
export declare const ImageBillboard: ({ id,
|
|
3
|
+
export declare const ImageBillboard: ({ id, bodyCopy, bordered, bullets, callToActionRow, exitIntent, eyebrow, headline, image, video, imagePlacement: position, internalName, set, textImageLineOneSmall, textImageLineThreeSmall, textImageLineTwoBig, variant, }: ImageBillboardInterface) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { useRef, useState, useEffect, createElement } from "react";
|
|
4
4
|
import { Button } from "../Button/Button.js";
|
|
5
5
|
import "../Button/Button.css.js";
|
|
@@ -8,7 +8,7 @@ import { Chevron } from "../Chevron/index.js";
|
|
|
8
8
|
import "../icons/ArrowIcon/ArrowIcon.css.js";
|
|
9
9
|
import "../icons/CheckIcon/CheckIcon.css.js";
|
|
10
10
|
import SvgCheckIcon from "../icons/CheckIcon/index.js";
|
|
11
|
-
import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css */
|
|
11
|
+
import '../assets/VideoTile/VideoTile.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css */
|
|
12
12
|
/* empty css */
|
|
13
13
|
/* empty css */
|
|
14
14
|
/* empty css */
|
|
@@ -18,24 +18,29 @@ import { OptimizeImage } from "../utils/optimizeImage/OptimizeImage.js";
|
|
|
18
18
|
import { useExitIntentModal } from "./ExitIntentModal/useExitIntentModal.js";
|
|
19
19
|
import { ModalWrapper } from "./ExitIntentModal/ModalWrapper.js";
|
|
20
20
|
import clsx from "clsx";
|
|
21
|
-
import { billboard_img, image_background, up_to, rate_billboard, apy_billboard, rate_pad, rate_container, body, billboard_body, billboard_header_section, supertag, header, body_copy, sub_bullets, billboard_ctas, billboard, imagePlacement } from "./ImageBillboard.css.js";
|
|
21
|
+
import { billboard_img, center_center, remove_padding, image_inner_wrapper, image_background, is_bg_img, up_to, rate_billboard, apy_billboard, rate_pad, rate_container, body, billboard_body, billboard_header_section, supertag, header, body_copy, sub_bullets, billboard_ctas, billboard, imagePlacement, image_based, bottom_right, bottom_center, bottom_left, center_right, center_left, top_right, top_center, top_left } from "./ImageBillboard.css.js";
|
|
22
|
+
import "next/script.js";
|
|
23
|
+
import { VideoTile } from "../VideoTile/VideoTile.js";
|
|
24
|
+
/* empty css */
|
|
25
|
+
/* empty css */
|
|
22
26
|
const ImageBillboard = ({
|
|
23
27
|
id,
|
|
24
|
-
variant,
|
|
25
|
-
headline,
|
|
26
28
|
bodyCopy,
|
|
27
29
|
bordered = false,
|
|
28
30
|
bullets,
|
|
29
31
|
callToActionRow,
|
|
32
|
+
exitIntent = false,
|
|
30
33
|
eyebrow,
|
|
34
|
+
headline,
|
|
31
35
|
image,
|
|
36
|
+
video,
|
|
32
37
|
imagePlacement: position = "left",
|
|
38
|
+
internalName,
|
|
33
39
|
set,
|
|
34
40
|
textImageLineOneSmall,
|
|
35
|
-
textImageLineTwoBig,
|
|
36
41
|
textImageLineThreeSmall,
|
|
37
|
-
|
|
38
|
-
|
|
42
|
+
textImageLineTwoBig,
|
|
43
|
+
variant
|
|
39
44
|
}) => {
|
|
40
45
|
const billboard_variant = getVariant(variant);
|
|
41
46
|
position = position?.toLocaleLowerCase();
|
|
@@ -48,29 +53,92 @@ const ImageBillboard = ({
|
|
|
48
53
|
if (headingRef.current) {
|
|
49
54
|
const section = headingRef.current.closest("section");
|
|
50
55
|
if (section) {
|
|
51
|
-
const existingH2 = section.querySelector("h2.
|
|
56
|
+
const existingH2 = section.querySelector("h2._1r4ovbuj");
|
|
52
57
|
if (existingH2) {
|
|
53
58
|
setHeadingLevel("h3");
|
|
54
59
|
}
|
|
55
60
|
}
|
|
56
61
|
}
|
|
57
62
|
}, []);
|
|
63
|
+
const imgAlignment = (alignment) => {
|
|
64
|
+
switch (alignment) {
|
|
65
|
+
case "Top Left":
|
|
66
|
+
return top_left;
|
|
67
|
+
case "Top Center":
|
|
68
|
+
return top_center;
|
|
69
|
+
case "Top Right":
|
|
70
|
+
return top_right;
|
|
71
|
+
case "Center Left":
|
|
72
|
+
return center_left;
|
|
73
|
+
case "Center Center":
|
|
74
|
+
return center_center;
|
|
75
|
+
case "Center Right":
|
|
76
|
+
return center_right;
|
|
77
|
+
case "Bottom Left":
|
|
78
|
+
return bottom_left;
|
|
79
|
+
case "Bottom Center":
|
|
80
|
+
return bottom_center;
|
|
81
|
+
case "Bottom Right":
|
|
82
|
+
return bottom_right;
|
|
83
|
+
default:
|
|
84
|
+
return center_center;
|
|
85
|
+
}
|
|
86
|
+
};
|
|
58
87
|
const renderBillboard = () => /* @__PURE__ */ jsxs(
|
|
59
88
|
"div",
|
|
60
89
|
{
|
|
61
90
|
id: internalName?.replace(/ /g, "-") ?? id,
|
|
62
91
|
className: clsx(
|
|
63
|
-
"billboard",
|
|
64
|
-
"containment",
|
|
92
|
+
"billboard rounded flex",
|
|
65
93
|
billboard({ variant: billboard_variant }),
|
|
66
|
-
`rounded flex`,
|
|
67
94
|
bordered && billboard_variant === "primary" ? "bordered" : "",
|
|
68
95
|
imagePlacement({ position: position?.toLowerCase() }),
|
|
69
|
-
|
|
70
|
-
|
|
96
|
+
position === "right" && "reversed",
|
|
97
|
+
set ? "" : "containment",
|
|
98
|
+
image?.imageType === "Image" ? image_based : ""
|
|
71
99
|
),
|
|
72
100
|
children: [
|
|
73
|
-
/* @__PURE__ */ jsx("div", { className: `${billboard_img} flex`, children: image ? /* @__PURE__ */ jsx(
|
|
101
|
+
/* @__PURE__ */ jsx("div", { className: `${billboard_img} flex`, children: image && image.src ? /* @__PURE__ */ jsx(Fragment, { children: image?.imageType === "Image" ? /* @__PURE__ */ jsx(
|
|
102
|
+
"div",
|
|
103
|
+
{
|
|
104
|
+
role: "presentation",
|
|
105
|
+
className: clsx(
|
|
106
|
+
"rounded overflow_hidden flex",
|
|
107
|
+
imgAlignment(image?.imageAlignment ?? center_center),
|
|
108
|
+
image?.imageBackgroundColor === "transparent" ? remove_padding : "",
|
|
109
|
+
image_inner_wrapper
|
|
110
|
+
),
|
|
111
|
+
style: image?.imageBackgroundColor ? { background: image?.imageBackgroundColor } : {},
|
|
112
|
+
children: /* @__PURE__ */ jsx(
|
|
113
|
+
OptimizeImage,
|
|
114
|
+
{
|
|
115
|
+
src: image?.src,
|
|
116
|
+
alt: image?.alt ?? "",
|
|
117
|
+
className: "img_fluid",
|
|
118
|
+
height: image?.height,
|
|
119
|
+
width: image?.width
|
|
120
|
+
}
|
|
121
|
+
)
|
|
122
|
+
}
|
|
123
|
+
) : /* @__PURE__ */ jsx("div", { className: image_background, role: "presentation", children: /* @__PURE__ */ jsx(
|
|
124
|
+
OptimizeImage,
|
|
125
|
+
{
|
|
126
|
+
src: image?.src,
|
|
127
|
+
alt: image?.alt ?? "",
|
|
128
|
+
className: is_bg_img
|
|
129
|
+
}
|
|
130
|
+
) }) }) : video && video.videoId ? /* @__PURE__ */ jsx("div", { className: image_background, role: "presentation", children: /* @__PURE__ */ jsx(
|
|
131
|
+
VideoTile,
|
|
132
|
+
{
|
|
133
|
+
id: "video-tile",
|
|
134
|
+
videoId: video.videoId,
|
|
135
|
+
videoPlayer: video.videoPlayer,
|
|
136
|
+
thumbnailImage: video.thubnailImage,
|
|
137
|
+
displayType: "inline",
|
|
138
|
+
transcript: video.transcript,
|
|
139
|
+
enableModal: true
|
|
140
|
+
}
|
|
141
|
+
) }) : /* @__PURE__ */ jsx(
|
|
74
142
|
"div",
|
|
75
143
|
{
|
|
76
144
|
className: clsx(
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ImageBillboardSet } from "./ImageBillboard.js";
|
|
2
|
-
import { apy_billboard, billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_image, billboard_img, body, body_copy, exit_intent, exit_intent_backdrop, header, imagePlacement, image_background, mh_330, modal_close_button, rate_billboard, rate_container, rate_pad, section_text_ImageBillboard, single_container, sub_bullets, supertag, three_inline, two_inline, up_to } from "./ImageBillboard.css.js";
|
|
2
|
+
import { apy_billboard, billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_image, billboard_img, body, body_copy, bottom_center, bottom_left, bottom_right, center_center, center_left, center_right, exit_intent, exit_intent_backdrop, header, imagePlacement, image_background, image_based, image_inner_wrapper, is_bg_img, mh_330, modal_close_button, rate_billboard, rate_container, rate_pad, remove_padding, section_text_ImageBillboard, single_container, sub_bullets, supertag, three_inline, top_center, top_left, top_right, two_inline, up_to } from "./ImageBillboard.css.js";
|
|
3
3
|
import { ImageBillboard } from "./ImageBillboardSet.js";
|
|
4
4
|
export {
|
|
5
5
|
ImageBillboard,
|
|
@@ -14,21 +14,34 @@ export {
|
|
|
14
14
|
billboard_img,
|
|
15
15
|
body,
|
|
16
16
|
body_copy,
|
|
17
|
+
bottom_center,
|
|
18
|
+
bottom_left,
|
|
19
|
+
bottom_right,
|
|
20
|
+
center_center,
|
|
21
|
+
center_left,
|
|
22
|
+
center_right,
|
|
17
23
|
exit_intent,
|
|
18
24
|
exit_intent_backdrop,
|
|
19
25
|
header,
|
|
20
26
|
imagePlacement,
|
|
21
27
|
image_background,
|
|
28
|
+
image_based,
|
|
29
|
+
image_inner_wrapper,
|
|
30
|
+
is_bg_img,
|
|
22
31
|
mh_330,
|
|
23
32
|
modal_close_button,
|
|
24
33
|
rate_billboard,
|
|
25
34
|
rate_container,
|
|
26
35
|
rate_pad,
|
|
36
|
+
remove_padding,
|
|
27
37
|
section_text_ImageBillboard,
|
|
28
38
|
single_container,
|
|
29
39
|
sub_bullets,
|
|
30
40
|
supertag,
|
|
31
41
|
three_inline,
|
|
42
|
+
top_center,
|
|
43
|
+
top_left,
|
|
44
|
+
top_right,
|
|
32
45
|
two_inline,
|
|
33
46
|
up_to
|
|
34
47
|
};
|
|
@@ -3,7 +3,7 @@ import { Hyperlink } from "../Hyperlink/index.js";
|
|
|
3
3
|
import "../IconBillboard/IconBillboard.css.js";
|
|
4
4
|
import "../icons/ArrowIcon/ArrowIcon.css.js";
|
|
5
5
|
import "../icons/CheckIcon/CheckIcon.css.js";
|
|
6
|
-
import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/
|
|
6
|
+
import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar.css';import '../assets/NavigationMenu/AxosALTS/NavBar.css';import '../assets/NavigationMenu/AxosClearing/NavBar.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar.css';import '../assets/Modal/Modal.css';import '../assets/Insight/Insight.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/VideoTile/VideoTile.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css */
|
|
7
7
|
/* empty css */
|
|
8
8
|
/* empty css */
|
|
9
9
|
/* empty css */
|
|
@@ -79,6 +79,8 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
|
|
|
79
79
|
/* empty css */
|
|
80
80
|
import { imageLinkContainer } from "../SetContainer/SetContainer.css.js";
|
|
81
81
|
import "../ImageBillboard/ImageBillboard.css.js";
|
|
82
|
+
import "next/script.js";
|
|
83
|
+
/* empty css */
|
|
82
84
|
/* empty css */
|
|
83
85
|
/* empty css */
|
|
84
86
|
/* empty css */
|
|
@@ -115,8 +117,6 @@ import "../StepItemSet/StepItemSet.css.js";
|
|
|
115
117
|
/* empty css */
|
|
116
118
|
/* empty css */
|
|
117
119
|
/* empty css */
|
|
118
|
-
import "next/script.js";
|
|
119
|
-
/* empty css */
|
|
120
120
|
/* empty css */
|
|
121
121
|
import "../HeroBanner/LargeBanner.css.js";
|
|
122
122
|
import "../HeroBanner/SelectionBanner.css.js";
|