avada-components-seoon 2.1.1 → 2.1.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/components/CrossAppBanner/BannerCard.d.ts +1 -0
- package/dist/components/CrossAppBanner/BannerCard.d.ts.map +1 -1
- package/dist/components/CrossAppBanner/BannerCard.js +3 -2
- package/dist/components/CrossAppBanner/BannerCard.js.map +1 -1
- package/dist/components/CrossAppBanner/BannerCarousel.js +2 -2
- package/dist/components/CrossAppBanner/BannerCarousel.js.map +1 -1
- package/dist/components/CrossAppBanner/index.scss +7 -12
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerCard.d.ts","sourceRoot":"","sources":["../../../src/components/CrossAppBanner/BannerCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,aAAa,EAA0B,MAAM,gCAAgC,CAAC;AACvF,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,aAAa,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"BannerCard.d.ts","sourceRoot":"","sources":["../../../src/components/CrossAppBanner/BannerCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,aAAa,EAA0B,MAAM,gCAAgC,CAAC;AACvF,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,aAAa,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqCvD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAIhD,CAAC"}
|
|
@@ -8,13 +8,14 @@ import { resolveLocalizedString } from '../../hooks/useFetchBannerData';
|
|
|
8
8
|
* The card without its own AppProvider, so a caller rendering several of them
|
|
9
9
|
* (BannerCarousel) can wrap the whole set in a single provider.
|
|
10
10
|
*/
|
|
11
|
-
export const BannerCardContent = ({ app, appId, isOutsideApp = false, onDismiss, onInstallClick, locale = 'en', }) => {
|
|
11
|
+
export const BannerCardContent = ({ app, appId, isOutsideApp = false, onDismiss, onInstallClick, locale = 'en', withCard = true, }) => {
|
|
12
12
|
const handleInstallClick = () => {
|
|
13
13
|
const url = isOutsideApp ? `${app.url}&utm_source=${getUTMParams(window.location.origin)}` : app.url;
|
|
14
14
|
window.open(`${url}&search_id=${uuidV4()}`);
|
|
15
15
|
onInstallClick?.();
|
|
16
16
|
};
|
|
17
|
-
|
|
17
|
+
const content = (_jsxs("div", { className: "AC-CrossAppBanner", children: [_jsx("div", { className: "AC-CrossAppBanner__Thumbnail", children: _jsx(Thumbnail, { size: "small", source: app.image, alt: "" }) }), _jsxs("div", { className: "AC-CrossAppBanner__Content", children: [_jsx(Text, { variant: "headingMd", as: "strong", children: resolveLocalizedString(app.title, locale) }), _jsx("br", {}), _jsx("div", { dangerouslySetInnerHTML: { __html: resolveLocalizedString(app.description, locale) } })] }), _jsx("div", { className: "AC-CrossAppBanner__Install", children: _jsx(Button, { onClick: handleInstallClick, children: resolveLocalizedString(app.actionLabel, locale) }) }), _jsx("div", { className: "AC-CrossAppBanner__Close", children: _jsx(Button, { icon: XIcon, variant: "tertiary", onClick: () => onDismiss(appId) }) })] }));
|
|
18
|
+
return withCard ? _jsx(LegacyCard, { sectioned: true, children: content }) : content;
|
|
18
19
|
};
|
|
19
20
|
export const BannerCard = props => (_jsx(AppProvider, { i18n: {}, children: _jsx(BannerCardContent, { ...props }) }));
|
|
20
21
|
//# sourceMappingURL=BannerCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerCard.js","sourceRoot":"","sources":["../../../src/components/CrossAppBanner/BannerCard.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAa,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC/F,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAiB,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"BannerCard.js","sourceRoot":"","sources":["../../../src/components/CrossAppBanner/BannerCard.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAa,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC/F,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAiB,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAavF;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAA8B,CAAC,EAC3D,GAAG,EACH,KAAK,EACL,YAAY,GAAG,KAAK,EACpB,SAAS,EACT,cAAc,EACd,MAAM,GAAG,IAAI,EACb,QAAQ,GAAG,IAAI,GAChB,EAAE,EAAE;IACH,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,MAAM,GAAG,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,eAAe,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;QACrG,MAAM,CAAC,IAAI,CAAC,GAAG,GAAG,cAAc,MAAM,EAAE,EAAE,CAAC,CAAC;QAC5C,cAAc,EAAE,EAAE,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,CACd,eAAK,SAAS,EAAC,mBAAmB,aAChC,cAAK,SAAS,EAAC,8BAA8B,YAC3C,KAAC,SAAS,IAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,GAAG,CAAC,KAAK,EAAE,GAAG,EAAC,EAAE,GAAG,GAChD,EACN,eAAK,SAAS,EAAC,4BAA4B,aACzC,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAC,QAAQ,YAClC,sBAAsB,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GACrC,EACP,cAAM,EACN,cAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,sBAAsB,CAAC,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE,GAAI,IACzF,EACN,cAAK,SAAS,EAAC,4BAA4B,YACzC,KAAC,MAAM,IAAC,OAAO,EAAE,kBAAkB,YAAG,sBAAsB,CAAC,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,GAAU,GAC3F,EACN,cAAK,SAAS,EAAC,0BAA0B,YACvC,KAAC,MAAM,IAAC,IAAI,EAAE,KAA4B,EAAE,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,GAAI,GAC9F,IACF,CACP,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,KAAC,UAAU,IAAC,SAAS,kBAAE,OAAO,GAAc,CAAC,CAAC,CAAC,OAAO,CAAC;AAC3E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAA8B,KAAK,CAAC,EAAE,CAAC,CAC5D,KAAC,WAAW,IAAC,IAAI,EAAE,EAAE,YACnB,KAAC,iBAAiB,OAAK,KAAK,GAAI,GACpB,CACf,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useState } from 'react';
|
|
3
|
-
import { AppProvider } from '@shopify/polaris';
|
|
3
|
+
import { AppProvider, LegacyCard } from '@shopify/polaris';
|
|
4
4
|
import { BannerCardContent } from './BannerCard';
|
|
5
5
|
const DEFAULT_AUTOPLAY_SPEED = 5000;
|
|
6
6
|
/**
|
|
@@ -25,6 +25,6 @@ export const BannerCarousel = ({ items, onDismiss, onInstallClick, locale = 'en'
|
|
|
25
25
|
}, [total, isPaused, autoPlaySpeed]);
|
|
26
26
|
if (!total)
|
|
27
27
|
return null;
|
|
28
|
-
return (_jsx(AppProvider, { i18n: {}, children:
|
|
28
|
+
return (_jsx(AppProvider, { i18n: {}, children: _jsx("div", { className: "AC-CrossAppBannerCarousel", "aria-roledescription": "carousel", onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), onFocus: () => setIsPaused(true), onBlur: () => setIsPaused(false), children: _jsxs(LegacyCard, { sectioned: true, children: [_jsx("div", { className: "AC-CrossAppBannerCarousel__Stage", children: items.map((item, slideIndex) => (_jsx("div", { className: "AC-CrossAppBannerCarousel__Slide", "data-active": slideIndex === activeIndex, "aria-hidden": slideIndex !== activeIndex, children: _jsx(BannerCardContent, { app: item.app, appId: item.appId, isOutsideApp: item.isOutsideApp, onDismiss: onDismiss, onInstallClick: onInstallClick, locale: locale, withCard: false }) }, item.app.key))) }), total > 1 && (_jsx("div", { className: "AC-CrossAppBannerCarousel__Nav", children: _jsx("div", { className: "AC-CrossAppBannerCarousel__Dots", role: "tablist", children: items.map((item, dotIndex) => (_jsx("button", { type: "button", role: "tab", className: "AC-CrossAppBannerCarousel__Dot", "aria-selected": dotIndex === activeIndex, "aria-label": `Banner ${dotIndex + 1}`, onClick: () => setIndex(dotIndex) }, item.app.key))) }) }))] }) }) }));
|
|
29
29
|
};
|
|
30
30
|
//# sourceMappingURL=BannerCarousel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerCarousel.js","sourceRoot":"","sources":["../../../src/components/CrossAppBanner/BannerCarousel.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"BannerCarousel.js","sourceRoot":"","sources":["../../../src/components/CrossAppBanner/BannerCarousel.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAI3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAkBjD,MAAM,sBAAsB,GAAG,IAAI,CAAC;AAEpC;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC5D,KAAK,EACL,SAAS,EACT,cAAc,EACd,MAAM,GAAG,IAAI,EACb,aAAa,GAAG,sBAAsB,GACvC,EAAE,EAAE;IACH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;IAC3B,MAAM,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE3D,iFAAiF;IACjF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5D,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,GAAG,CAAC,IAAI,QAAQ;YAAE,OAAO,SAAS,CAAC;QAE5C,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,aAAa,CAAC,CAAC;QAC5F,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAErC,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IAExB,OAAO,CACL,KAAC,WAAW,IAAC,IAAI,EAAE,EAAE,YACnB,cACE,SAAS,EAAC,2BAA2B,0BAChB,UAAU,EAC/B,YAAY,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EACrC,YAAY,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EACtC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,YAEhC,MAAC,UAAU,IAAC,SAAS,mBACnB,cAAK,SAAS,EAAC,kCAAkC,YAC9C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,UAAU,EAAE,EAAE,CAAC,CAC/B,cAEE,SAAS,EAAC,kCAAkC,iBAC/B,UAAU,KAAK,WAAW,iBAC1B,UAAU,KAAK,WAAW,YAEvC,KAAC,iBAAiB,IAChB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,KAAK,GACf,IAbG,IAAI,CAAC,GAAG,CAAC,GAAG,CAcb,CACP,CAAC,GACE,EAEL,KAAK,GAAG,CAAC,IAAI,CACZ,cAAK,SAAS,EAAC,gCAAgC,YAC7C,cAAK,SAAS,EAAC,iCAAiC,EAAC,IAAI,EAAC,SAAS,YAC5D,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,CAC7B,iBAEE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,EACV,SAAS,EAAC,gCAAgC,mBAC3B,QAAQ,KAAK,WAAW,gBAC3B,UAAU,QAAQ,GAAG,CAAC,EAAE,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAN5B,IAAI,CAAC,GAAG,CAAC,GAAG,CAOjB,CACH,CAAC,GACE,GACF,CACP,IACU,GACT,GACM,CACf,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
display: flex;
|
|
4
4
|
gap: 16px;
|
|
5
5
|
align-items: center;
|
|
6
|
+
// keeps the absolutely positioned close button clear of the install button on short cards
|
|
7
|
+
padding-right: 24px;
|
|
6
8
|
|
|
7
9
|
&.audit {
|
|
8
10
|
.AC-CrossAppBanner__Thumbnail {
|
|
@@ -43,29 +45,30 @@
|
|
|
43
45
|
|
|
44
46
|
@media screen and (max-width: 425px) {
|
|
45
47
|
flex-direction: column;
|
|
48
|
+
padding-right: 0;
|
|
46
49
|
}
|
|
47
50
|
}
|
|
48
51
|
|
|
49
52
|
.AC-CrossAppBannerCarousel {
|
|
50
53
|
position: relative;
|
|
51
54
|
|
|
55
|
+
// Every slide stacks in one grid cell, so the stage keeps the height of the tallest
|
|
56
|
+
// banner instead of resizing to each one as it fades in and shifting the page below.
|
|
52
57
|
&__Stage {
|
|
53
|
-
|
|
58
|
+
display: grid;
|
|
54
59
|
}
|
|
55
60
|
|
|
56
61
|
&__Slide {
|
|
62
|
+
grid-area: 1 / 1;
|
|
57
63
|
// visibility (not just opacity) so an inactive slide keeps its buttons out of the tab order
|
|
58
64
|
transition: opacity 300ms ease, visibility 0s linear 300ms;
|
|
59
65
|
|
|
60
66
|
&[data-active='false'] {
|
|
61
|
-
position: absolute;
|
|
62
|
-
inset: 0;
|
|
63
67
|
opacity: 0;
|
|
64
68
|
visibility: hidden;
|
|
65
69
|
}
|
|
66
70
|
|
|
67
71
|
&[data-active='true'] {
|
|
68
|
-
position: relative;
|
|
69
72
|
opacity: 1;
|
|
70
73
|
visibility: visible;
|
|
71
74
|
transition-delay: 0s;
|
|
@@ -76,7 +79,6 @@
|
|
|
76
79
|
display: flex;
|
|
77
80
|
align-items: center;
|
|
78
81
|
justify-content: center;
|
|
79
|
-
gap: 10px;
|
|
80
82
|
padding-top: 12px;
|
|
81
83
|
}
|
|
82
84
|
|
|
@@ -112,13 +114,6 @@
|
|
|
112
114
|
}
|
|
113
115
|
}
|
|
114
116
|
|
|
115
|
-
&__Counter {
|
|
116
|
-
font-size: 12px;
|
|
117
|
-
line-height: 16px;
|
|
118
|
-
color: var(--p-color-text-secondary, #616161);
|
|
119
|
-
font-variant-numeric: tabular-nums;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
117
|
@media (prefers-reduced-motion: reduce) {
|
|
123
118
|
&__Slide {
|
|
124
119
|
transition: none;
|