@axos-web-dev/shared-components 1.0.99-feature-toasts → 1.0.99-feature-toasts.3
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/ImageBillboard/ImageBillboard.interface.d.ts +3 -0
- package/dist/ImageBillboard/ImageBillboardSet.d.ts +1 -1
- package/dist/ImageBillboard/ImageBillboardSet.js +29 -20
- package/dist/ImageLink/ImageLink.js +2 -2
- package/dist/ImageToast/ImageToast.css.d.ts +0 -1
- package/dist/ImageToast/ImageToast.css.js +4 -6
- package/dist/ImageToast/index.js +1 -1
- package/dist/SetContainer/SetContainer.js +2 -2
- package/dist/assets/ImageToast/ImageToast.css +7 -11
- package/package.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { BulletItemProps } from '../BulletItem';
|
|
2
2
|
import { ChevronProps } from '../Chevron/Chevron.interface';
|
|
3
3
|
import { QuaternaryTypes } from '../utils/variant.types';
|
|
4
|
+
import { IconBillboardProps } from '../IconBillboard/IconBillboard.interface';
|
|
4
5
|
import { ReactNode } from 'react';
|
|
5
6
|
|
|
6
7
|
export interface ImageBillboardSetProps {
|
|
@@ -49,4 +50,6 @@ export interface ImageBillboardInterface {
|
|
|
49
50
|
internalName?: string;
|
|
50
51
|
exitIntent?: boolean;
|
|
51
52
|
layout?: ImageBillboardSetProps["layout"];
|
|
53
|
+
toast?: IconBillboardProps[];
|
|
54
|
+
toastAlignment?: string;
|
|
52
55
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ImageBillboardInterface } from './ImageBillboard.interface';
|
|
2
2
|
|
|
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;
|
|
3
|
+
export declare const ImageBillboard: ({ id, bodyCopy, bordered, bullets, callToActionRow, exitIntent, eyebrow, headline, image, video, imagePlacement: position, internalName, set, textImageLineOneSmall, textImageLineThreeSmall, textImageLineTwoBig, variant, toast, toastAlignment, }: ImageBillboardInterface) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -23,6 +23,7 @@ import "next/script.js";
|
|
|
23
23
|
import { VideoTile } from "../VideoTile/VideoTile.js";
|
|
24
24
|
/* empty css */
|
|
25
25
|
/* empty css */
|
|
26
|
+
import { ToastWrapper, ImageToast } from "../ImageToast/index.js";
|
|
26
27
|
const ImageBillboard = ({
|
|
27
28
|
id,
|
|
28
29
|
bodyCopy,
|
|
@@ -40,7 +41,9 @@ const ImageBillboard = ({
|
|
|
40
41
|
textImageLineOneSmall,
|
|
41
42
|
textImageLineThreeSmall,
|
|
42
43
|
textImageLineTwoBig,
|
|
43
|
-
variant
|
|
44
|
+
variant,
|
|
45
|
+
toast,
|
|
46
|
+
toastAlignment
|
|
44
47
|
}) => {
|
|
45
48
|
const billboard_variant = getVariant(variant);
|
|
46
49
|
position = position?.toLocaleLowerCase();
|
|
@@ -98,7 +101,7 @@ const ImageBillboard = ({
|
|
|
98
101
|
image?.imageType === "Image" ? image_based : ""
|
|
99
102
|
),
|
|
100
103
|
children: [
|
|
101
|
-
/* @__PURE__ */ jsx("div", { className: `${billboard_img} flex`, children: image && image.src ? /* @__PURE__ */ jsx(Fragment, { children: image?.imageType === "Image" ? /* @__PURE__ */
|
|
104
|
+
/* @__PURE__ */ jsx("div", { className: `${billboard_img} flex`, children: image && image.src ? /* @__PURE__ */ jsx(Fragment, { children: image?.imageType === "Image" ? /* @__PURE__ */ jsxs(
|
|
102
105
|
"div",
|
|
103
106
|
{
|
|
104
107
|
role: "presentation",
|
|
@@ -109,25 +112,31 @@ const ImageBillboard = ({
|
|
|
109
112
|
image_inner_wrapper
|
|
110
113
|
),
|
|
111
114
|
style: image?.imageBackgroundColor ? { background: image?.imageBackgroundColor } : {},
|
|
112
|
-
children:
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
{
|
|
126
|
-
src: image?.src,
|
|
127
|
-
alt: image?.alt ?? "",
|
|
128
|
-
className: is_bg_img
|
|
115
|
+
children: [
|
|
116
|
+
/* @__PURE__ */ jsx(
|
|
117
|
+
OptimizeImage,
|
|
118
|
+
{
|
|
119
|
+
src: image?.src,
|
|
120
|
+
alt: image?.alt ?? "",
|
|
121
|
+
className: "img_fluid",
|
|
122
|
+
height: image?.height,
|
|
123
|
+
width: image?.width
|
|
124
|
+
}
|
|
125
|
+
),
|
|
126
|
+
toast && toast.length > 0 && /* @__PURE__ */ jsx(ToastWrapper, { alignment: toastAlignment ?? "Bottom Left", children: toast.map((toastItem) => /* @__PURE__ */ jsx(ImageToast, { ...toastItem }, toastItem.id)) })
|
|
127
|
+
]
|
|
129
128
|
}
|
|
130
|
-
)
|
|
129
|
+
) : /* @__PURE__ */ jsxs("div", { className: image_background, role: "presentation", children: [
|
|
130
|
+
/* @__PURE__ */ jsx(
|
|
131
|
+
OptimizeImage,
|
|
132
|
+
{
|
|
133
|
+
src: image?.src,
|
|
134
|
+
alt: image?.alt ?? "",
|
|
135
|
+
className: is_bg_img
|
|
136
|
+
}
|
|
137
|
+
),
|
|
138
|
+
toast && toast.length > 0 && /* @__PURE__ */ jsx(ToastWrapper, { alignment: toastAlignment ?? "Bottom Left", children: toast.map((toastItem) => /* @__PURE__ */ jsx(ImageToast, { ...toastItem }, toastItem.id)) })
|
|
139
|
+
] }) }) : video && video.videoId ? /* @__PURE__ */ jsx("div", { className: image_background, role: "presentation", children: /* @__PURE__ */ jsx(
|
|
131
140
|
VideoTile,
|
|
132
141
|
{
|
|
133
142
|
id: "video-tile",
|
|
@@ -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/
|
|
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/ImageToast/ImageToast.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 */
|
|
@@ -82,6 +82,7 @@ import { imageLinkContainer } from "../SetContainer/SetContainer.css.js";
|
|
|
82
82
|
import "../ImageBillboard/ImageBillboard.css.js";
|
|
83
83
|
import "next/script.js";
|
|
84
84
|
/* empty css */
|
|
85
|
+
/* empty css */
|
|
85
86
|
/* empty css */
|
|
86
87
|
/* empty css */
|
|
87
88
|
/* empty css */
|
|
@@ -121,7 +122,6 @@ import "../StepItemSet/StepItemSet.css.js";
|
|
|
121
122
|
/* empty css */
|
|
122
123
|
import "../HeroBanner/LargeBanner.css.js";
|
|
123
124
|
import "../HeroBanner/SelectionBanner.css.js";
|
|
124
|
-
/* empty css */
|
|
125
125
|
const ImageLink = ({ id, image, targetUrl, children }) => {
|
|
126
126
|
const withTargeturl = targetUrl !== void 0 ? /* @__PURE__ */ jsx(Hyperlink, { targetUrl, children: /* @__PURE__ */ jsx(
|
|
127
127
|
"img",
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import '../assets/ImageToast/ImageToast.css';/* empty css */
|
|
2
2
|
var toast_section = "xtgeqb0";
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var top_right = "xtgeqb5";
|
|
3
|
+
var bottom_left = "xtgeqb1";
|
|
4
|
+
var bottom_right = "xtgeqb2";
|
|
5
|
+
var top_left = "xtgeqb3";
|
|
6
|
+
var top_right = "xtgeqb4";
|
|
8
7
|
export {
|
|
9
8
|
bottom_left,
|
|
10
9
|
bottom_right,
|
|
11
|
-
toast_inview,
|
|
12
10
|
toast_section,
|
|
13
11
|
top_left,
|
|
14
12
|
top_right
|
package/dist/ImageToast/index.js
CHANGED
|
@@ -171,7 +171,7 @@ const ToastWrapper = ({
|
|
|
171
171
|
"aria-atomic": "true",
|
|
172
172
|
initial: { opacity: 0, transform: "translate3d(10px,0,0) scale(0.6)" },
|
|
173
173
|
whileInView: { opacity: 1, transform: "translate3d(0,0,0) scale(1)" },
|
|
174
|
-
viewport: { once: true },
|
|
174
|
+
viewport: { once: true, amount: 0.8 },
|
|
175
175
|
children
|
|
176
176
|
}
|
|
177
177
|
);
|
|
@@ -4,7 +4,7 @@ import "../icons/ArrowIcon/ArrowIcon.css.js";
|
|
|
4
4
|
import SvgAxosX from "../icons/AxosX/index.js";
|
|
5
5
|
import SvgComponent from "../icons/AxosX/Blue.js";
|
|
6
6
|
import "../icons/CheckIcon/CheckIcon.css.js";
|
|
7
|
-
import '../assets/
|
|
7
|
+
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/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/ImageToast/ImageToast.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/Modal/Modal.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 */
|
|
8
8
|
/* empty css */
|
|
9
9
|
/* empty css */
|
|
10
10
|
/* empty css */
|
|
@@ -88,6 +88,7 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
|
|
|
88
88
|
import "../ImageBillboard/ImageBillboard.css.js";
|
|
89
89
|
import "next/script.js";
|
|
90
90
|
/* empty css */
|
|
91
|
+
/* empty css */
|
|
91
92
|
/* empty css */
|
|
92
93
|
/* empty css */
|
|
93
94
|
/* empty css */
|
|
@@ -125,7 +126,6 @@ import "../StepItemSet/StepItemSet.css.js";
|
|
|
125
126
|
/* empty css */
|
|
126
127
|
import "../HeroBanner/LargeBanner.css.js";
|
|
127
128
|
import "../HeroBanner/SelectionBanner.css.js";
|
|
128
|
-
/* empty css */
|
|
129
129
|
import { getNumOfColumns } from "../utils/getNumber.js";
|
|
130
130
|
const SetContainer = ({
|
|
131
131
|
id,
|
|
@@ -3,31 +3,27 @@
|
|
|
3
3
|
filter: drop-shadow(11px 11px 2px rgba(0,0,0,.2));
|
|
4
4
|
max-width: 80%;
|
|
5
5
|
position: absolute;
|
|
6
|
-
width: auto;
|
|
7
|
-
will-change: opacity, transform;
|
|
8
|
-
transition-property: opacity, transform;
|
|
9
|
-
transition-duration: 0.5s;
|
|
10
6
|
transition-delay: .5s;
|
|
7
|
+
transition-duration: 0.5s;
|
|
8
|
+
transition-property: opacity, transform;
|
|
11
9
|
transition-timing-function: cubic-bezier(.175,.885,.32,1.275);
|
|
10
|
+
width: auto;
|
|
11
|
+
will-change: opacity, transform;
|
|
12
12
|
z-index: 1;
|
|
13
13
|
}
|
|
14
14
|
.xtgeqb1 {
|
|
15
|
-
opacity: 1;
|
|
16
|
-
transform: translate3d(0,0,0) scale(1);
|
|
17
|
-
}
|
|
18
|
-
.xtgeqb2 {
|
|
19
15
|
bottom: 13%;
|
|
20
16
|
left: 16px;
|
|
21
17
|
}
|
|
22
|
-
.
|
|
18
|
+
.xtgeqb2 {
|
|
23
19
|
bottom: 13%;
|
|
24
20
|
right: 16px;
|
|
25
21
|
}
|
|
26
|
-
.
|
|
22
|
+
.xtgeqb3 {
|
|
27
23
|
top: 13%;
|
|
28
24
|
left: 16px;
|
|
29
25
|
}
|
|
30
|
-
.
|
|
26
|
+
.xtgeqb4 {
|
|
31
27
|
top: 13%;
|
|
32
28
|
right: 16px;
|
|
33
29
|
}
|
package/package.json
CHANGED