@arc-ui/community-components 3.13.1 → 3.14.0
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/.turbo/turbo-build.log +17 -15
- package/CHANGELOG.md +11 -0
- package/lib/ArticleCarousel/ArticleCarousel.cjs +1 -1
- package/lib/ArticleCarousel/ArticleCarousel.mjs +1 -1
- package/lib/CopyLead/CopyLead.cjs +1 -1
- package/lib/CopyLead/CopyLead.mjs +1 -1
- package/lib/FeaturePost/FeaturePost.cjs +1 -1
- package/lib/FeaturePost/FeaturePost.mjs +1 -1
- package/lib/InlineLinkGroup/InlineLinkGroup.cjs +2 -2
- package/lib/InlineLinkGroup/InlineLinkGroup.mjs +2 -2
- package/lib/ProductCard/ProductCard.cjs +77 -0
- package/lib/ProductCard/ProductCard.mjs +72 -0
- package/lib/ProductCard/styles.css +1 -0
- package/lib/ProductCardGrid/ProductCardGrid.cjs +69 -0
- package/lib/ProductCardGrid/ProductCardGrid.mjs +67 -0
- package/lib/ProductNavigation/ProductNavigation.cjs +1 -1
- package/lib/ProductNavigation/ProductNavigation.mjs +1 -1
- package/lib/PromoListing/PromoListing.cjs +1 -1
- package/lib/PromoListing/PromoListing.mjs +1 -1
- package/lib/Summary/Summary.cjs +1 -1
- package/lib/Summary/Summary.mjs +1 -1
- package/lib/VideoHeroCard/VideoHeroCard.cjs +4 -4
- package/lib/VideoHeroCard/VideoHeroCard.mjs +4 -4
- package/lib/VideoPortraitCard/VideoPortraitCard.cjs +3 -3
- package/lib/VideoPortraitCard/VideoPortraitCard.mjs +3 -3
- package/lib/_shared/cjs/{VideoCardThumbnail-BM3GwyWR.cjs → VideoCardThumbnail-DhdbNf5c.cjs} +10 -2
- package/lib/_shared/cjs/{index.es-DcJ01c8P.cjs → index.es-5qmN4ppJ.cjs} +1 -1
- package/lib/_shared/esm/{VideoCardThumbnail-K6eHIeAM.mjs → VideoCardThumbnail-B8JS-s6O.mjs} +10 -2
- package/lib/_shared/esm/{index.es-C76rXaZz.mjs → index.es-Cis5MKaa.mjs} +1 -1
- package/lib/index.cjs +294 -171
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +70 -2
- package/lib/index.d.mts +70 -2
- package/lib/index.mjs +291 -173
- package/lib/index.mjs.map +1 -1
- package/lib/styles.css +1 -1
- package/package.json +13 -13
- package/src/components/InlineLinkGroup/InlineLinkGroup.tsx +4 -0
- package/src/components/ProductCard/ProductCard.module.css +49 -0
- package/src/components/ProductCard/ProductCard.tsx +113 -0
- package/src/components/ProductCard/ProductCardBenefits/ProductCardBenefits.module.css +14 -0
- package/src/components/ProductCard/ProductCardBenefits/ProductCardBenefits.tsx +42 -0
- package/src/components/ProductCard/ProductCardBenefits/index.ts +4 -0
- package/src/components/ProductCard/ProductCardPrice/ProductCardPrice.module.css +5 -0
- package/src/components/ProductCard/ProductCardPrice/ProductCardPrice.tsx +37 -0
- package/src/components/ProductCard/ProductCardPrice/index.ts +4 -0
- package/src/components/ProductCard/ProductCardPriceIncrease/ProductCardPriceIncrease.module.css +25 -0
- package/src/components/ProductCard/ProductCardPriceIncrease/ProductCardPriceIncrease.tsx +39 -0
- package/src/components/ProductCard/ProductCardPriceIncrease/index.ts +4 -0
- package/src/components/ProductCard/index.ts +13 -0
- package/src/components/ProductCardGrid/ProductCardGrid.tsx +162 -0
- package/src/components/ProductCardGrid/components/CardGrid/CardGrid.module.css +34 -0
- package/src/components/ProductCardGrid/components/CardGrid/CardGrid.tsx +44 -0
- package/src/components/ProductCardGrid/components/CardGrid/index.ts +1 -0
- package/src/components/ProductCardGrid/index.ts +5 -0
- package/src/components/VideoHeroCard/components/VideoHeroCardContent/VideoHeroCardContent.tsx +9 -3
- package/src/components/VideoPortraitCard/VideoPortraitCard.tsx +11 -3
- package/src/components/index.ts +2 -0
- package/src/internal/VideoCardPlayer/VideoCardPlayer.module.css +5 -2
- package/src/internal/VideoCardPlayer/VideoCardPlayer.tsx +16 -1
- package/versions.json +1 -1
package/lib/index.cjs
CHANGED
|
@@ -257,7 +257,7 @@ var filterAttrs = function (props) {
|
|
|
257
257
|
const BtIconCrossAlt =
|
|
258
258
|
"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m16.707 16.02 4.482-4.494a.5.5 0 1 0-.707-.706l-4.48 4.493-4.482-4.493a.5.5 0 1 0-.707.706l4.483 4.494-4.483 4.494a.5.5 0 1 0 .707.706l4.481-4.493 4.481 4.493a.5.5 0 1 0 .707-.706Z'/%3e%3c/svg%3e";
|
|
259
259
|
|
|
260
|
-
var styles$
|
|
260
|
+
var styles$A = {"popupNotification":"HeaderBarNotification-module_popupNotification__HAxod","hiddenByDefault":"HeaderBarNotification-module_hiddenByDefault__JHbUy","s":"HeaderBarNotification-module_s__HofMM","m":"HeaderBarNotification-module_m__ZUdjq","l":"HeaderBarNotification-module_l__wlZ1Z","xl":"HeaderBarNotification-module_xl__z7DBP","container":"HeaderBarNotification-module_container__18nau","content":"HeaderBarNotification-module_content__SUo-l","image":"HeaderBarNotification-module_image__uV-nD","details":"HeaderBarNotification-module_details__S5Rrx","closeButtonContainer":"HeaderBarNotification-module_closeButtonContainer__b1UDI"};
|
|
261
261
|
|
|
262
262
|
var HeaderBarNotification = function (_a) {
|
|
263
263
|
var _b;
|
|
@@ -276,33 +276,33 @@ var HeaderBarNotification = function (_a) {
|
|
|
276
276
|
localStorage.setItem(localStorageId, "true");
|
|
277
277
|
setShowNotification(false);
|
|
278
278
|
};
|
|
279
|
-
return (React.createElement(Popover.Popover, __assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, asChild: true, onOpenAutoFocus: function (e) { return e.preventDefault(); }, className: classNames(styles$
|
|
280
|
-
React.createElement("div", { className: styles$
|
|
281
|
-
(image || icon) && (React.createElement("div", { className: styles$
|
|
279
|
+
return (React.createElement(Popover.Popover, __assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, asChild: true, onOpenAutoFocus: function (e) { return e.preventDefault(); }, className: classNames(styles$A.popupNotification, (_b = {}, _b[styles$A.hiddenByDefault] = showAtSize, _b), showAtSize === null || showAtSize === void 0 ? void 0 : showAtSize.map(function (s) { return styles$A[s]; })), content: React.createElement("div", { className: styles$A.container },
|
|
280
|
+
React.createElement("div", { className: styles$A.content },
|
|
281
|
+
(image || icon) && (React.createElement("div", { className: styles$A.image },
|
|
282
282
|
image && (React.createElement(Image$2.Image, { src: image, alt: heading, fit: "cover", width: 55 })),
|
|
283
283
|
icon && React.createElement(Icon.Icon, { icon: icon, size: 35 }))),
|
|
284
|
-
React.createElement("div", { className: styles$
|
|
284
|
+
React.createElement("div", { className: styles$A.details },
|
|
285
285
|
tagline && (React.createElement(Text.Text, { size: "m", tone: "muted" }, tagline)),
|
|
286
286
|
React.createElement(Heading.Heading, { size: "s", level: "3" }, heading),
|
|
287
287
|
children)),
|
|
288
288
|
button && (React.createElement(ButtonV2.ButtonV2, { onClick: button.handleClick, label: button.text, buttonStyle: "secondary", isFullWidth: true })),
|
|
289
|
-
React.createElement("div", { className: styles$
|
|
289
|
+
React.createElement("div", { className: styles$A.closeButtonContainer },
|
|
290
290
|
React.createElement(Tooltip.Tooltip, { side: "bottom", title: "Dismiss Notification", asChild: true },
|
|
291
291
|
React.createElement(ButtonV2.ButtonV2, { "data-testid": localStorageId, buttonStyle: "tertiary", "aria-label": "Close ".concat(notificationId, " popup"), onClick: handleClosePopup, icon: BtIconCrossAlt })))) }, filterAttrs(props)),
|
|
292
292
|
React.createElement(NavigationHeader.NavigationHeaderAction, __assign({ isAttention: true }, headerActionProps))));
|
|
293
293
|
};
|
|
294
294
|
|
|
295
|
-
var styles$
|
|
295
|
+
var styles$z = {"accordion-header":"AccordionHeading-module_accordion-header__8s12f","accordion-header--hasImage":"AccordionHeading-module_accordion-header--hasImage__wbDjW","accordion-header--padded":"AccordionHeading-module_accordion-header--padded__me1JY","accordion-header--headingSizeM":"AccordionHeading-module_accordion-header--headingSizeM__amLfy"};
|
|
296
296
|
|
|
297
297
|
var AccordionHeading = function (_a) {
|
|
298
298
|
var _b, _c;
|
|
299
299
|
var heading = _a.heading, content = _a.content, id = _a.id, _d = _a.isPadded, isPadded = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.headingSize, headingSize = _f === void 0 ? "xl" : _f, image = _a.image, props = __rest(_a, ["heading", "content", "id", "isPadded", "headingLevel", "headingSize", "image"]);
|
|
300
300
|
return (React.createElement("div", __assign({ className: classNames((_b = {},
|
|
301
|
-
_b[styles$
|
|
302
|
-
_b[styles$
|
|
303
|
-
_b[styles$
|
|
301
|
+
_b[styles$z["accordion-header"]] = true,
|
|
302
|
+
_b[styles$z["accordion-header--padded"]] = isPadded,
|
|
303
|
+
_b[styles$z["accordion-header--headingSizeM"]] = headingSize === "m",
|
|
304
304
|
_b)) }, filterAttrs(props)),
|
|
305
|
-
React.createElement("div", { className: classNames((_c = {}, _c[styles$
|
|
305
|
+
React.createElement("div", { className: classNames((_c = {}, _c[styles$z["accordion-header--hasImage"]] = image, _c)) },
|
|
306
306
|
image && (React.createElement("div", null,
|
|
307
307
|
React.createElement(Image$2.Image, __assign({}, image, { width: 68, fit: "cover" })))),
|
|
308
308
|
React.createElement(Heading.Heading, { level: headingLevel, id: id, size: headingSize }, heading)),
|
|
@@ -311,25 +311,25 @@ var AccordionHeading = function (_a) {
|
|
|
311
311
|
React.createElement(Text.Text, { size: "l", elementType: "p" }, content)))));
|
|
312
312
|
};
|
|
313
313
|
|
|
314
|
-
var styles$
|
|
314
|
+
var styles$y = {"AccordionDisclosureListItem":"AccordionDisclosureList-module_AccordionDisclosureListItem__p8LIT"};
|
|
315
315
|
|
|
316
316
|
var AccordionDisclosureList = function (_a) {
|
|
317
317
|
var disclosureList = _a.disclosureList;
|
|
318
318
|
return (React.createElement("ul", null, disclosureList.map(function (_a) {
|
|
319
319
|
var children = _a.children, summary = _a.summary, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.indentDetails, indentDetails = _c === void 0 ? false : _c, headingLevel = _a.headingLevel, id = _a.id, props = __rest(_a, ["children", "summary", "isOpen", "indentDetails", "headingLevel", "id"]);
|
|
320
|
-
return (React.createElement("li", { key: id, className: styles$
|
|
320
|
+
return (React.createElement("li", { key: id, className: styles$y.AccordionDisclosureListItem, id: id },
|
|
321
321
|
React.createElement(Disclosure.Disclosure, __assign({ summary: summary, isOpen: isOpen, indentDetails: indentDetails, headingLevel: headingLevel }, filterAttrs(props)), children)));
|
|
322
322
|
})));
|
|
323
323
|
};
|
|
324
324
|
|
|
325
|
-
var styles$
|
|
325
|
+
var styles$x = {"Accordion":"Accordion-module_Accordion__LsXTU"};
|
|
326
326
|
|
|
327
327
|
/**
|
|
328
328
|
* Use the `Accordion` component to package together a title, content and a number of disclosure components into one section (maximum 10).
|
|
329
329
|
*/
|
|
330
330
|
var Accordion = function (_a) {
|
|
331
331
|
var heading = _a.heading, headingLevel = _a.headingLevel, headingSize = _a.headingSize, content = _a.content, id = _a.id, disclosureList = _a.disclosureList, props = __rest(_a, ["heading", "headingLevel", "headingSize", "content", "id", "disclosureList"]);
|
|
332
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
332
|
+
return (React.createElement("div", __assign({ className: styles$x.Accordion }, filterAttrs(props)),
|
|
333
333
|
React.createElement(AccordionHeading, { isPadded: true, id: id, "data-testid": "Accordion-header", heading: heading, headingLevel: headingLevel, headingSize: headingSize, content: content }),
|
|
334
334
|
React.createElement(AccordionDisclosureList, { disclosureList: disclosureList })));
|
|
335
335
|
};
|
|
@@ -988,7 +988,7 @@ function requireDebounce () {
|
|
|
988
988
|
var debounceExports = requireDebounce();
|
|
989
989
|
var debounce = /*@__PURE__*/getDefaultExportFromCjs(debounceExports);
|
|
990
990
|
|
|
991
|
-
var styles$
|
|
991
|
+
var styles$w = {"sectionHeading--hasImage":"SectionHeading-module_sectionHeading--hasImage__qaz6n","sectionHeading--isCentered":"SectionHeading-module_sectionHeading--isCentered__i0fR8","sectionHeading-content":"SectionHeading-module_sectionHeading-content__ufB6w"};
|
|
992
992
|
|
|
993
993
|
var SectionHeading = function (_a) {
|
|
994
994
|
var _b, _c;
|
|
@@ -996,14 +996,14 @@ var SectionHeading = function (_a) {
|
|
|
996
996
|
return (React.createElement(Columns.Columns, null,
|
|
997
997
|
React.createElement(Columns.ColumnsCol, { spanM: isPadded ? 9 : 12 },
|
|
998
998
|
React.createElement("div", __assign({ className: classNames((_b = {},
|
|
999
|
-
_b[styles$
|
|
999
|
+
_b[styles$w["sectionHeading--isCentered"]] = isCentered,
|
|
1000
1000
|
_b)) }, filterAttrs(props)),
|
|
1001
1001
|
React.createElement("div", { className: classNames((_c = {},
|
|
1002
|
-
_c[styles$
|
|
1002
|
+
_c[styles$w["sectionHeading--hasImage"]] = image,
|
|
1003
1003
|
_c)) },
|
|
1004
1004
|
image && React.createElement(Image$2.Image, __assign({}, image, { width: 68, fit: "cover" })),
|
|
1005
1005
|
React.createElement(Heading.Heading, { level: headingLevel, id: id, size: "xl", isWordWrap: isHeadingWordWrap }, heading)),
|
|
1006
|
-
content && (React.createElement("div", { className: styles$
|
|
1006
|
+
content && (React.createElement("div", { className: styles$w["sectionHeading-content"] },
|
|
1007
1007
|
React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
|
|
1008
1008
|
React.createElement(Text.Text, { size: "l", elementType: "p" }, content))),
|
|
1009
1009
|
React.createElement(VerticalSpace.VerticalSpace, { size: "40" })))));
|
|
@@ -1011,7 +1011,7 @@ var SectionHeading = function (_a) {
|
|
|
1011
1011
|
|
|
1012
1012
|
/**
|
|
1013
1013
|
* Do not edit directly
|
|
1014
|
-
* Generated on Thu,
|
|
1014
|
+
* Generated on Thu, 20 Aug 2026 14:34:09 GMT
|
|
1015
1015
|
*/
|
|
1016
1016
|
var ArcSizeBreakpointsXs = "320px";
|
|
1017
1017
|
var ArcSizeBreakpointsS = "636px";
|
|
@@ -1038,7 +1038,7 @@ var ArcBreakpoints = {
|
|
|
1038
1038
|
xs: parseInt(ArcSizeBreakpointsXs, 10),
|
|
1039
1039
|
};
|
|
1040
1040
|
|
|
1041
|
-
var styles$
|
|
1041
|
+
var styles$v = {"carouselWrapper":"ArticleCarousel-module_carouselWrapper__3mmGu","cardWrapperCarousel":"ArticleCarousel-module_cardWrapperCarousel__v3jv1","lastCard":"ArticleCarousel-module_lastCard__my93x"};
|
|
1042
1042
|
|
|
1043
1043
|
/**
|
|
1044
1044
|
* Use `ArticleCarousel` to give supporting information about a page or proposition in the form of the `Carousel` containing only `MediaCard` components.
|
|
@@ -1068,17 +1068,17 @@ var ArticleCarousel = function (_a) {
|
|
|
1068
1068
|
}, [minHeights, checkMinHeight]);
|
|
1069
1069
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
1070
1070
|
React.createElement(SectionHeading, { isPadded: isPadded, id: id, "data-testid": "ArticleCarousel-header", heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content, isCentered: isCentered }),
|
|
1071
|
-
React.createElement("div", { className: styles$
|
|
1071
|
+
React.createElement("div", { className: styles$v.carouselWrapper },
|
|
1072
1072
|
React.createElement(Carousel.Carousel, { overflow: isMinWidthArcBreakpointL ? "hidden" : "visible", itemsPerSlide: isMinWidthArcBreakpointL ? 3 : 1, itemsToScroll: isMinWidthArcBreakpointL ? 3 : 1, behavior: isMinWidthArcBreakpointL ? "default" : "adaptive", withGutter: isMinWidthArcBreakpointL ? true : false }, cards.map(function (card, i) {
|
|
1073
1073
|
var _a;
|
|
1074
|
-
return (React.createElement("div", { key: "".concat(componentId), className: classNames(styles$
|
|
1075
|
-
_a[styles$
|
|
1074
|
+
return (React.createElement("div", { key: "".concat(componentId), className: classNames(styles$v.carouselSlide, styles$v.cardWrapperCarousel, (_a = {},
|
|
1075
|
+
_a[styles$v.lastCard] = i === cards.length - 1,
|
|
1076
1076
|
_a)) },
|
|
1077
1077
|
React.createElement(MediaCard.MediaCard, __assign({ isContained: cardsContained, minHeight: minimumHeight }, card))));
|
|
1078
1078
|
})))));
|
|
1079
1079
|
};
|
|
1080
1080
|
|
|
1081
|
-
var styles$
|
|
1081
|
+
var styles$u = {"authorContent":"Author-module_authorContent__TBY7b","largeAvatar":"Author-module_largeAvatar__Vco03"};
|
|
1082
1082
|
|
|
1083
1083
|
var Author = function (_a) {
|
|
1084
1084
|
var name = _a.name, title = _a.title, _b = _a.avatar, avatar = _b === void 0 ? {} : _b, props = __rest(_a, ["name", "title", "avatar"]);
|
|
@@ -1089,10 +1089,10 @@ var Author = function (_a) {
|
|
|
1089
1089
|
React.createElement(Grid.Grid, { isFluid: true, isGutterless: true },
|
|
1090
1090
|
React.createElement(Grid.GridRow, { align: "center" },
|
|
1091
1091
|
React.createElement(Grid.GridCol, { xs: isLargeAvatar ? 12 : "auto" },
|
|
1092
|
-
React.createElement("div", { className: isLargeAvatar ? styles$
|
|
1092
|
+
React.createElement("div", { className: isLargeAvatar ? styles$u.largeAvatar : undefined },
|
|
1093
1093
|
React.createElement(Avatar.Avatar, __assign({}, avatar)))),
|
|
1094
1094
|
React.createElement(Grid.GridCol, null,
|
|
1095
|
-
React.createElement("div", { className: "".concat(!isLargeAvatar && styles$
|
|
1095
|
+
React.createElement("div", { className: "".concat(!isLargeAvatar && styles$u.authorContent), "data-testid": "authorContent" },
|
|
1096
1096
|
React.createElement(Heading.Heading, { size: "xs" }, name),
|
|
1097
1097
|
React.createElement(Text.Text, { size: "s" }, title)))))));
|
|
1098
1098
|
};
|
|
@@ -1107,35 +1107,35 @@ var MultiLineText = function (_a) {
|
|
|
1107
1107
|
React.createElement(Text.Text, __assign({}, textProps), paragraph))); })));
|
|
1108
1108
|
};
|
|
1109
1109
|
|
|
1110
|
-
var styles$
|
|
1110
|
+
var styles$t = {"buttonContainer":"CopyLead-module_buttonContainer__3OaRG","col":"CopyLead-module_col__0Da5H","container":"CopyLead-module_container__I91ym","container--content":"CopyLead-module_container--content__e8LxG","container--media":"CopyLead-module_container--media__QcMWi","container--align-center":"CopyLead-module_container--align-center__Fh1Sd","container--align-top":"CopyLead-module_container--align-top__UIXOZ","list":"CopyLead-module_list__arnJd","listItem":"CopyLead-module_listItem__NscHE","listItemCentered":"CopyLead-module_listItemCentered__Kwdab","listItemIconContainer":"CopyLead-module_listItemIconContainer__dgnhJ","listItemTextContainer":"CopyLead-module_listItemTextContainer__Dl9lw","imgWrapper":"CopyLead-module_imgWrapper__HYP3w","mediaContainer":"CopyLead-module_mediaContainer__PxTnm","content":"CopyLead-module_content__Bja1D","container--reverse":"CopyLead-module_container--reverse__Gq9u8"};
|
|
1111
1111
|
|
|
1112
1112
|
var MediaContent$1 = function (_a) {
|
|
1113
1113
|
var heading = _a.heading, id = _a.id, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content;
|
|
1114
|
-
return (React.createElement("div", { className: styles$
|
|
1114
|
+
return (React.createElement("div", { className: styles$t.mediaContainer },
|
|
1115
1115
|
React.createElement(Heading.Heading, { id: id, level: headingLevel, isWordWrap: isHeadingWordWrap, size: "xl" }, heading),
|
|
1116
|
-
content && (React.createElement("div", { className: styles$
|
|
1116
|
+
content && (React.createElement("div", { className: styles$t.content },
|
|
1117
1117
|
React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
|
|
1118
1118
|
React.createElement(MultiLineText, { text: content, size: "l" })))));
|
|
1119
1119
|
};
|
|
1120
1120
|
|
|
1121
1121
|
var Image$1 = function (_a) {
|
|
1122
1122
|
var sources = _a.sources, props = __rest(_a, ["sources"]);
|
|
1123
|
-
return (React.createElement("div", { className: styles$
|
|
1123
|
+
return (React.createElement("div", { className: styles$t.imgWrapper },
|
|
1124
1124
|
React.createElement(Image$2.Image, __assign({ fadeOnLoad: true }, props), sources &&
|
|
1125
1125
|
sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))));
|
|
1126
1126
|
};
|
|
1127
1127
|
|
|
1128
1128
|
var IconList = function (_a) {
|
|
1129
1129
|
var listItems = _a.listItems, isLgScreen = _a.isLgScreen, _b = _a.headingLevel, headingLevel = _b === void 0 ? "3" : _b;
|
|
1130
|
-
return (React.createElement("ul", { className: styles$
|
|
1130
|
+
return (React.createElement("ul", { className: styles$t.list }, listItems.map(function (_a) {
|
|
1131
1131
|
var _b;
|
|
1132
1132
|
var icon = _a.icon, heading = _a.heading, text = _a.text;
|
|
1133
|
-
return (React.createElement("li", { key: heading, className: classNames(styles$
|
|
1134
|
-
_b[styles$
|
|
1133
|
+
return (React.createElement("li", { key: heading, className: classNames(styles$t.listItem, (_b = {},
|
|
1134
|
+
_b[styles$t.listItemCentered] = !text,
|
|
1135
1135
|
_b)) },
|
|
1136
|
-
React.createElement("div", { className: styles$
|
|
1136
|
+
React.createElement("div", { className: styles$t.listItemIconContainer },
|
|
1137
1137
|
React.createElement(Icon.Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
|
|
1138
|
-
React.createElement("div", { className: styles$
|
|
1138
|
+
React.createElement("div", { className: styles$t.listItemTextContainer },
|
|
1139
1139
|
React.createElement(Heading.Heading, { level: headingLevel, size: "s" }, heading),
|
|
1140
1140
|
text && (React.createElement(React.Fragment, null,
|
|
1141
1141
|
React.createElement(VerticalSpace.VerticalSpace, { size: "8", sizeL: "16" }),
|
|
@@ -1143,20 +1143,20 @@ var IconList = function (_a) {
|
|
|
1143
1143
|
})));
|
|
1144
1144
|
};
|
|
1145
1145
|
|
|
1146
|
-
var Button = function (props) { return (React.createElement("div", { className: styles$
|
|
1146
|
+
var Button = function (props) { return (React.createElement("div", { className: styles$t.buttonContainer },
|
|
1147
1147
|
React.createElement(ButtonV2.ButtonV2, __assign({ isFullWidth: true, buttonStyle: "secondary" }, props)))); };
|
|
1148
1148
|
|
|
1149
1149
|
var Container = function (_a) {
|
|
1150
1150
|
var _b;
|
|
1151
1151
|
var children = _a.children, isReverseOrder = _a.isReverseOrder, type = _a.type, alignment = _a.alignment;
|
|
1152
|
-
return (React.createElement("div", { "data-testid": "copy-lead-container", className: classNames(styles$
|
|
1153
|
-
_b[styles$
|
|
1152
|
+
return (React.createElement("div", { "data-testid": "copy-lead-container", className: classNames(styles$t.container, styles$t["container--".concat(type)], styles$t["container--align-".concat(alignment)], (_b = {},
|
|
1153
|
+
_b[styles$t["container--reverse"]] = isReverseOrder,
|
|
1154
1154
|
_b)) }, children));
|
|
1155
1155
|
};
|
|
1156
1156
|
|
|
1157
1157
|
var Column = function (_a) {
|
|
1158
1158
|
var children = _a.children;
|
|
1159
|
-
return (React.createElement("div", { className: styles$
|
|
1159
|
+
return (React.createElement("div", { className: styles$t.col }, children));
|
|
1160
1160
|
};
|
|
1161
1161
|
|
|
1162
1162
|
var getListHeadingLevel$1 = function (level) {
|
|
@@ -1224,7 +1224,7 @@ var CopyLead = function (_a) {
|
|
|
1224
1224
|
return null;
|
|
1225
1225
|
};
|
|
1226
1226
|
|
|
1227
|
-
var styles$
|
|
1227
|
+
var styles$s = {"downloadList-below":"DownloadList-module_downloadList-below__21q6i","downloadList-right":"DownloadList-module_downloadList-right__mHYHL"};
|
|
1228
1228
|
|
|
1229
1229
|
var DownloadList = function (_a) {
|
|
1230
1230
|
var heading = _a.heading, id = _a.id, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, downloads = _a.downloads, _c = _a.alignment, alignment = _c === void 0 ? "below" : _c, props = __rest(_a, ["heading", "id", "headingLevel", "isHeadingWordWrap", "content", "downloads", "alignment"]);
|
|
@@ -1234,12 +1234,12 @@ var DownloadList = function (_a) {
|
|
|
1234
1234
|
" ",
|
|
1235
1235
|
React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
|
|
1236
1236
|
React.createElement(Columns.ColumnsCol, { spanL: alignment === "right" ? 6 : 8, spanM: 9, spanS: 12 },
|
|
1237
|
-
React.createElement("div", { className: styles$
|
|
1237
|
+
React.createElement("div", { className: styles$s["downloadList-".concat(alignment)] }, downloads.map(function (downloadProps, i) { return (React.createElement(React.Fragment, { key: "download-".concat(i, "-").concat(downloadProps.name) },
|
|
1238
1238
|
React.createElement(Download.Download, __assign({}, downloadProps)),
|
|
1239
1239
|
i !== downloads.length - 1 && React.createElement(VerticalSpace.VerticalSpace, { size: "16" }))); }))))));
|
|
1240
1240
|
};
|
|
1241
1241
|
|
|
1242
|
-
var styles$
|
|
1242
|
+
var styles$r = {"FAQs":"FAQs-module_FAQs__FtQr4","linkListSection":"FAQs-module_linkListSection__RdQkU","linkListTitle":"FAQs-module_linkListTitle__RVni3","linkList":"FAQs-module_linkList__dPyXj","linkListItem":"FAQs-module_linkListItem__S83CL","linkList--padded":"FAQs-module_linkList--padded__8Paxc"};
|
|
1243
1243
|
|
|
1244
1244
|
var scrollToSectionFocusFirstElement = function (item) {
|
|
1245
1245
|
var _a, _b, _c, _d, _e;
|
|
@@ -1253,23 +1253,23 @@ var scrollToSectionFocusFirstElement = function (item) {
|
|
|
1253
1253
|
var FAQs = function (_a) {
|
|
1254
1254
|
var _b;
|
|
1255
1255
|
var heading = _a.heading, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, id = _a.id, _c = _a.isPadded, isPadded = _c === void 0 ? false : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, image = _a.image, type = _a.type, _e = _a.linkListHeading, linkListHeading = _e === void 0 ? "Skip to section" : _e, accordionData = _a.accordionData, props = __rest(_a, ["heading", "isHeadingWordWrap", "content", "id", "isPadded", "headingLevel", "image", "type", "linkListHeading", "accordionData"]);
|
|
1256
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
1256
|
+
return (React.createElement("div", __assign({ className: styles$r.FAQs }, filterAttrs(props)),
|
|
1257
1257
|
React.createElement(SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, content: content, image: image, headingLevel: headingLevel, isPadded: isPadded }),
|
|
1258
|
-
type === "listWithLinks" && (React.createElement("div", { className: styles$
|
|
1259
|
-
React.createElement("div", { className: styles$
|
|
1258
|
+
type === "listWithLinks" && (React.createElement("div", { className: styles$r.linkListSection },
|
|
1259
|
+
React.createElement("div", { className: styles$r.linkListTitle },
|
|
1260
1260
|
React.createElement(Heading.Heading, { size: "xs" }, linkListHeading)),
|
|
1261
1261
|
React.createElement("ul", { className: classNames((_b = {},
|
|
1262
|
-
_b[styles$
|
|
1263
|
-
_b[styles$
|
|
1262
|
+
_b[styles$r.linkList] = true,
|
|
1263
|
+
_b[styles$r["linkList--padded"]] = isPadded,
|
|
1264
1264
|
_b)) }, accordionData.map(function (item) {
|
|
1265
1265
|
var _a;
|
|
1266
|
-
return (React.createElement("li", { className: styles$
|
|
1266
|
+
return (React.createElement("li", { className: styles$r.linkListItem, key: item.heading },
|
|
1267
1267
|
React.createElement(Link.Link, { title: item.heading, href: "#".concat(item.id), onClick: function (e) {
|
|
1268
1268
|
e.preventDefault();
|
|
1269
1269
|
scrollToSectionFocusFirstElement(item);
|
|
1270
1270
|
} }, (_a = item.altLinkTitle) !== null && _a !== void 0 ? _a : item.heading)));
|
|
1271
1271
|
})))),
|
|
1272
|
-
type !== "tabs" && accordionData && (React.createElement("ul", { className: styles$
|
|
1272
|
+
type !== "tabs" && accordionData && (React.createElement("ul", { className: styles$r.accordionList }, accordionData.map(function (item) { return (React.createElement("li", { className: styles$r.accordionListItem, key: item.id },
|
|
1273
1273
|
React.createElement(Accordion, { id: item.id, heading: item.heading, headingLevel: item.headingLevel, content: item.content, disclosureList: item.disclosureList, headingSize: "m" }),
|
|
1274
1274
|
React.createElement(VerticalSpace.VerticalSpace, { size: "48", sizeL: "64" }))); }))),
|
|
1275
1275
|
type === "tabs" && (React.createElement(Tabs.Tabs, { defaultValue: accordionData[0].heading },
|
|
@@ -3466,12 +3466,12 @@ function cleanEscapedString(input) {
|
|
|
3466
3466
|
return matched[1].replace(doubleQuoteRegExp, "'");
|
|
3467
3467
|
}
|
|
3468
3468
|
|
|
3469
|
-
var styles$
|
|
3469
|
+
var styles$q = {"labelDate":"FeaturePost-module_labelDate__NXOgY","googlePlayButtonWrapper":"FeaturePost-module_googlePlayButtonWrapper__GI-ag","imgWrapper":"FeaturePost-module_imgWrapper__r6omd","featurePost":"FeaturePost-module_featurePost__9jY21","featurePostReversed":"FeaturePost-module_featurePostReversed__WQRXm","contentContainer":"FeaturePost-module_contentContainer__kdus7","col":"FeaturePost-module_col__eW8gY"};
|
|
3470
3470
|
|
|
3471
3471
|
var Image = function (_a) {
|
|
3472
3472
|
var sources = _a.sources, title = _a.title, description = _a.description, props = __rest(_a, ["sources", "title", "description"]);
|
|
3473
3473
|
return (React.createElement(React.Fragment, null,
|
|
3474
|
-
React.createElement("div", { className: styles$
|
|
3474
|
+
React.createElement("div", { className: styles$q.imgWrapper },
|
|
3475
3475
|
React.createElement(Image$2.Image, __assign({ fadeOnLoad: true }, props), sources &&
|
|
3476
3476
|
sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))),
|
|
3477
3477
|
title && (React.createElement(React.Fragment, null,
|
|
@@ -3509,17 +3509,17 @@ var FeaturePost = function (_a) {
|
|
|
3509
3509
|
var _b;
|
|
3510
3510
|
var heading = _a.heading, id = _a.id, _c = _a.headingLevel, headingLevel = _c === void 0 ? "2" : _c, label = _a.label, image = _a.image, content = _a.content, footer = _a.footer, video = _a.video, isHeadingWordWrap = _a.isHeadingWordWrap, _d = _a.isReverseOrder, isReverseOrder = _d === void 0 ? false : _d, props = __rest(_a, ["heading", "id", "headingLevel", "label", "image", "content", "footer", "video", "isHeadingWordWrap", "isReverseOrder"]);
|
|
3511
3511
|
var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
|
|
3512
|
-
return (React.createElement("div", __assign({ "data-testid": "feature-post", className: classNames(styles$
|
|
3513
|
-
_b[styles$
|
|
3512
|
+
return (React.createElement("div", __assign({ "data-testid": "feature-post", className: classNames(styles$q.featurePost, (_b = {},
|
|
3513
|
+
_b[styles$q.featurePostReversed] = isReverseOrder,
|
|
3514
3514
|
_b)) }, filterAttrs(props)),
|
|
3515
|
-
React.createElement("div", { className: styles$
|
|
3516
|
-
React.createElement("div", { className: styles$
|
|
3515
|
+
React.createElement("div", { className: styles$q.col },
|
|
3516
|
+
React.createElement("div", { className: styles$q.contentContainer },
|
|
3517
3517
|
label && (React.createElement(Grid.Grid, { isGutterless: true, isFluid: true },
|
|
3518
3518
|
React.createElement(Grid.GridRow, { align: "baseline" },
|
|
3519
3519
|
React.createElement(Grid.GridCol, { xs: 12, m: "auto" },
|
|
3520
3520
|
React.createElement(Heading.Heading, { size: "xxs", fontStyle: "overline" }, label.text)),
|
|
3521
3521
|
React.createElement(Grid.GridCol, { xs: 12, m: "auto" },
|
|
3522
|
-
React.createElement("div", { className: styles$
|
|
3522
|
+
React.createElement("div", { className: styles$q.labelDate },
|
|
3523
3523
|
React.createElement(Text.Text, { size: "xs", tone: "muted" }, isDate(label.date) ? (React.createElement("time", { dateTime: format(label.date, "yyyy-MM-dd") }, format(label.date, "d MMMM yyyy"))) : (React.createElement("span", null, label.date)))))),
|
|
3524
3524
|
React.createElement(VerticalSpace.VerticalSpace, { size: "24" }))),
|
|
3525
3525
|
React.createElement(Heading.Heading, { id: id, level: headingLevel, isWordWrap: isHeadingWordWrap, size: "xl" }, heading),
|
|
@@ -3541,10 +3541,10 @@ var FeaturePost = function (_a) {
|
|
|
3541
3541
|
footer.appStore && (React.createElement(Grid.GridCol, { xs: 12, s: "auto" },
|
|
3542
3542
|
React.createElement(AppButton.AppButton, { type: "apple-app-store", screenReaderText: footer.appStore.screenReaderText, url: footer.appStore.url }))),
|
|
3543
3543
|
footer.googlePlay && (React.createElement(Grid.GridCol, { xs: 12, s: "auto" },
|
|
3544
|
-
React.createElement("div", { className: styles$
|
|
3544
|
+
React.createElement("div", { className: styles$q.googlePlayButtonWrapper },
|
|
3545
3545
|
React.createElement(AppButton.AppButton, { type: "google-play", screenReaderText: footer.googlePlay.screenReaderText, url: footer.googlePlay.url })))))))))),
|
|
3546
|
-
isMinWidthArcBreakpointM && (React.createElement("div", { className: styles$
|
|
3547
|
-
React.createElement("div", { "data-testid": "desktop-img", className: styles$
|
|
3546
|
+
isMinWidthArcBreakpointM && (React.createElement("div", { className: styles$q.col },
|
|
3547
|
+
React.createElement("div", { "data-testid": "desktop-img", className: styles$q.imgContainer },
|
|
3548
3548
|
React.createElement(MediaContent, { image: image, video: video }))))));
|
|
3549
3549
|
};
|
|
3550
3550
|
|
|
@@ -3556,7 +3556,7 @@ var FeaturePost = function (_a) {
|
|
|
3556
3556
|
const BtIconArrowRightFill =
|
|
3557
3557
|
"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M2 16A14 14 0 1 0 16 2 14 14 0 0 0 2 16m16.854-4.354L23.207 16l-4.354 4.354a.5.5 0 0 1-.707-.707l3.147-3.147H9.5a.5.5 0 0 1 0-1h11.793l-3.146-3.146a.5.5 0 0 1 .707-.707'/%3e%3c/svg%3e";
|
|
3558
3558
|
|
|
3559
|
-
var styles$
|
|
3559
|
+
var styles$p = {"highlights":"Highlights-module_highlights__Hf7Zq","highlightItem":"Highlights-module_highlightItem__-N6le","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
|
|
3560
3560
|
|
|
3561
3561
|
var getListHeadingLevel = function (level) {
|
|
3562
3562
|
var nextLevel = Math.min(parseInt(level) + 1, 6);
|
|
@@ -3566,8 +3566,8 @@ var getListHeadingLevel = function (level) {
|
|
|
3566
3566
|
var HighlightItem = function (_a) {
|
|
3567
3567
|
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel, props = __rest(_a, ["icon", "heading", "text", "link", "isSmallIcon", "headingLevel"]);
|
|
3568
3568
|
var listHeadingLevel = getListHeadingLevel(headingLevel || "2");
|
|
3569
|
-
return (React.createElement("div", __assign({ "data-testid": "highlight-item-container", className: styles$
|
|
3570
|
-
icon && (React.createElement("div", { className: styles$
|
|
3569
|
+
return (React.createElement("div", __assign({ "data-testid": "highlight-item-container", className: styles$p.highlightItem }, filterAttrs(props)),
|
|
3570
|
+
icon && (React.createElement("div", { className: styles$p.Icon },
|
|
3571
3571
|
React.createElement(Icon.Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
|
|
3572
3572
|
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
3573
3573
|
React.createElement(Heading.Heading, { level: listHeadingLevel, size: "m" }, heading),
|
|
@@ -3580,7 +3580,7 @@ var HighlightItem = function (_a) {
|
|
|
3580
3580
|
var HighlightList = function (_a) {
|
|
3581
3581
|
var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel, props = __rest(_a, ["listItems", "columns", "isSmallIcon", "headingLevel"]);
|
|
3582
3582
|
var id = React.useId();
|
|
3583
|
-
return (React.createElement("div", __assign({ "data-testid": "highlights-list", className: classNames(styles$
|
|
3583
|
+
return (React.createElement("div", __assign({ "data-testid": "highlights-list", className: classNames(styles$p.highlights, styles$p["highlights".concat(columns, "Column")]) }, filterAttrs(props)), listItems.map(function (_a, i) {
|
|
3584
3584
|
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, itemProps = __rest(_a, ["icon", "heading", "text", "link"]);
|
|
3585
3585
|
return (React.createElement(HighlightItem, __assign({ key: "highlight-".concat(id, "-").concat(i), icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon, headingLevel: headingLevel }, itemProps)));
|
|
3586
3586
|
})));
|
|
@@ -3607,7 +3607,7 @@ var Highlights = function (_a) {
|
|
|
3607
3607
|
: undefined, iconPosition: (_d = cta.iconPosition) !== null && _d !== void 0 ? _d : "beforeText" })))));
|
|
3608
3608
|
};
|
|
3609
3609
|
|
|
3610
|
-
var styles$
|
|
3610
|
+
var styles$o = {"PromoListing":"PromoListing-module_PromoListing__6ensv","CarouselWrapper":"PromoListing-module_CarouselWrapper__iYwWp","carouselSlide":"PromoListing-module_carouselSlide__AMTPF","cardGrid":"PromoListing-module_cardGrid__llf73","cardWrapper":"PromoListing-module_cardWrapper__I4iwh","cardWrapperCarousel":"PromoListing-module_cardWrapperCarousel__t-2qM","columns-3":"PromoListing-module_columns-3__y6jWS","columns-2":"PromoListing-module_columns-2__GRFxb"};
|
|
3611
3611
|
|
|
3612
3612
|
/**
|
|
3613
3613
|
* Do not edit directly
|
|
@@ -3725,7 +3725,7 @@ var PromoListing = function (_a) {
|
|
|
3725
3725
|
var CardComponent = CARD_COMPONENTS[card.type];
|
|
3726
3726
|
return React.createElement(CardComponent, __assign({}, card, commonProps));
|
|
3727
3727
|
};
|
|
3728
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
3728
|
+
return (React.createElement("div", __assign({ className: styles$o.PromoListing }, filterAttrs(props)),
|
|
3729
3729
|
overlineLabel && (React.createElement(React.Fragment, null,
|
|
3730
3730
|
React.createElement(Heading.Heading, { level: overlineHeadingLevel, fontStyle: "overline" }, overlineLabel),
|
|
3731
3731
|
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }))),
|
|
@@ -3733,44 +3733,44 @@ var PromoListing = function (_a) {
|
|
|
3733
3733
|
button.label && (React.createElement(React.Fragment, null,
|
|
3734
3734
|
React.createElement(ButtonV2.ButtonV2, __assign({}, button, { icon: button.buttonStyle == "compact" ? BtIconArrowRightFill : undefined, size: "m" })),
|
|
3735
3735
|
React.createElement(VerticalSpace.VerticalSpace, { size: "40" }))),
|
|
3736
|
-
isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles$
|
|
3737
|
-
React.createElement(Carousel.Carousel, { overflow: "visible", itemsPerSlide: 1, behavior: "adaptive", withGutter: false }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, i) { return (React.createElement("div", { key: "promolist-carousel-card-".concat(componentId, "-").concat(i), className: (styles$
|
|
3738
|
-
React.createElement("div", { "data-testid": "promoList-card".concat(index), className: styles$
|
|
3736
|
+
isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles$o.CarouselWrapper },
|
|
3737
|
+
React.createElement(Carousel.Carousel, { overflow: "visible", itemsPerSlide: 1, behavior: "adaptive", withGutter: false }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, i) { return (React.createElement("div", { key: "promolist-carousel-card-".concat(componentId, "-").concat(i), className: (styles$o.cardWrapperCarousel) }, getCard(card))); })))) : (React.createElement("ul", { className: classNames(styles$o.cardGrid, styles$o["columns-".concat(columns)]) }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, index) { return (React.createElement("li", { key: "promolist-card--".concat(componentId, "-").concat(index) },
|
|
3738
|
+
React.createElement("div", { "data-testid": "promoList-card".concat(index), className: styles$o.cardWrapper }, getCard(card)))); })))));
|
|
3739
3739
|
};
|
|
3740
3740
|
|
|
3741
|
-
var styles$
|
|
3741
|
+
var styles$n = {"blockQuote":"Quote-module_blockQuote__STj-z","quoteContent":"Quote-module_quoteContent__kWc51","quoteDefault":"Quote-module_quoteDefault__tU5db","quoteSecondary":"Quote-module_quoteSecondary__3Rk3f","quoteIcon":"Quote-module_quoteIcon__HK1TV"};
|
|
3742
3742
|
|
|
3743
3743
|
/**
|
|
3744
3744
|
* Use `Quote` where a quote or testimonial from an existing customer or stakeholder would help build trust and credibility with potential new customers. It's commonly used on product pages where customers would learn about a product or service that we offer.*/
|
|
3745
3745
|
var Quote = function (_a) {
|
|
3746
3746
|
var author = _a.author, _b = _a.styling, styling = _b === void 0 ? "Default" : _b, content = _a.content, citeUrl = _a.citeUrl, props = __rest(_a, ["author", "styling", "content", "citeUrl"]);
|
|
3747
3747
|
return (React.createElement("div", __assign({ className: "community-component--quote", "data-testid": "quote-test" }, filterAttrs(props)),
|
|
3748
|
-
React.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles$
|
|
3749
|
-
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles$
|
|
3748
|
+
React.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles$n.blockQuote, styles$n["quote".concat(styling)]), cite: citeUrl },
|
|
3749
|
+
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles$n.quoteIcon, "aria-hidden": "true" },
|
|
3750
3750
|
React.createElement("path", { d: "M21.8085 76.4706C15.9574 76.4706 10.8156 74.2732 6.38298 69.8783C2.12766 65.4834 0 58.979 0 50.3651C0 40.5206 3.10284 31.1156 9.30851 22.1501C15.6915 13.1846 25.3546 5.80122 38.2979 0L44.1489 11.3387C37.4113 14.3272 31.7376 18.0189 27.1277 22.4138C22.5177 26.6329 19.6809 31.4672 18.617 36.9168C19.8582 36.741 21.0106 36.6531 22.0745 36.6531C27.7482 36.6531 32.4468 38.499 36.1702 42.1907C40.0709 45.8824 42.0213 50.7167 42.0213 56.6937C42.0213 62.4949 39.9823 67.2414 35.9043 70.9331C32.0035 74.6247 27.305 76.4706 21.8085 76.4706ZM77.6596 76.4706C71.8085 76.4706 66.6667 74.2732 62.234 69.8783C57.9787 65.4834 55.8511 58.979 55.8511 50.3651C55.8511 40.5206 58.9539 31.1156 65.1596 22.1501C71.5425 13.1846 81.2057 5.80122 94.1489 0L100 11.3387C93.2624 14.3272 87.5886 18.0189 82.9787 22.4138C78.3688 26.6329 75.5319 31.4672 74.4681 36.9168C75.7092 36.741 76.8617 36.6531 77.9255 36.6531C83.5993 36.6531 88.2979 38.499 92.0213 42.1907C95.922 45.8824 97.8723 50.7167 97.8723 56.6937C97.8723 62.4949 95.8333 67.2414 91.7553 70.9331C87.8546 74.6247 83.156 76.4706 77.6596 76.4706Z" })),
|
|
3751
|
-
React.createElement("p", { className: styles$
|
|
3751
|
+
React.createElement("p", { className: styles$n.quoteContent }, content)),
|
|
3752
3752
|
author && React.createElement(Author, __assign({}, author))));
|
|
3753
3753
|
};
|
|
3754
3754
|
|
|
3755
|
-
var styles$
|
|
3755
|
+
var styles$m = {"ruleContainer":"Summary-module_ruleContainer__ydWlG","row":"Summary-module_row__SKV--"};
|
|
3756
3756
|
|
|
3757
3757
|
var Summary = function (_a) {
|
|
3758
3758
|
var content = _a.content, _b = _a.noBorder, noBorder = _b === void 0 ? false : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "3" : _c, props = __rest(_a, ["content", "noBorder", "headingLevel"]);
|
|
3759
3759
|
var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
|
|
3760
3760
|
return (React.createElement(Box.Box, __assign({ isBorderRadius: true }, (!noBorder ? { borderWidth: "thin" } : { elevationLevel: "1" }), { padding: "24" }, filterAttrs(props)),
|
|
3761
|
-
React.createElement("div", { className: styles$
|
|
3761
|
+
React.createElement("div", { className: styles$m.row }, content.map(function (_a, i) {
|
|
3762
3762
|
var heading = _a.heading, text = _a.text;
|
|
3763
3763
|
return (React.createElement(React.Fragment, null,
|
|
3764
|
-
React.createElement("div", { className: styles$
|
|
3764
|
+
React.createElement("div", { className: styles$m.col },
|
|
3765
3765
|
React.createElement(Heading.Heading, { size: "s", level: headingLevel }, heading),
|
|
3766
3766
|
React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
|
|
3767
3767
|
React.createElement(Text.Text, { size: "s" }, text)),
|
|
3768
|
-
i !== content.length - 1 && (React.createElement("div", { className: styles$
|
|
3768
|
+
i !== content.length - 1 && (React.createElement("div", { className: styles$m.ruleContainer },
|
|
3769
3769
|
React.createElement(Rule.Rule, { orientation: isMinWidthArcBreakpointM ? "vertical" : "horizontal" })))));
|
|
3770
3770
|
}))));
|
|
3771
3771
|
};
|
|
3772
3772
|
|
|
3773
|
-
var styles$
|
|
3773
|
+
var styles$l = {"list":"Statistics-module_list__BI-eQ","mutedText":"Statistics-module_mutedText__MR1JM"};
|
|
3774
3774
|
|
|
3775
3775
|
var getLinkProps = function (link) {
|
|
3776
3776
|
return link.openInNewTab
|
|
@@ -3788,7 +3788,7 @@ var Statistics = function (_a) {
|
|
|
3788
3788
|
React.createElement(Columns.ColumnsCol, { spanM: 9 },
|
|
3789
3789
|
React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
|
|
3790
3790
|
React.createElement(Columns.ColumnsCol, { spanL: 9 },
|
|
3791
|
-
React.createElement("ul", { className: styles$
|
|
3791
|
+
React.createElement("ul", { className: styles$l.list }, statistics.map(function (_a, i) {
|
|
3792
3792
|
var stat = _a.stat, copy = _a.copy, link = _a.link, source = _a.source, sourceUrl = _a.sourceUrl;
|
|
3793
3793
|
return (React.createElement("li", { key: "statistic-".concat(componentId, "-").concat(i) },
|
|
3794
3794
|
i !== 0 && (React.createElement(React.Fragment, null,
|
|
@@ -3798,7 +3798,7 @@ var Statistics = function (_a) {
|
|
|
3798
3798
|
React.createElement(Columns.Columns, null,
|
|
3799
3799
|
React.createElement(Columns.ColumnsCol, { spanS: 6, spanM: 8 },
|
|
3800
3800
|
React.createElement(Align.Align, { vertical: "center" },
|
|
3801
|
-
React.createElement("div", { className: styles$
|
|
3801
|
+
React.createElement("div", { className: styles$l.statWrapper },
|
|
3802
3802
|
React.createElement(Heading.Heading, { color: "brand", size: "xxl" }, stat),
|
|
3803
3803
|
React.createElement(Hidden.Hidden, { s: true, m: true, l: true, xl: true, xxl: true },
|
|
3804
3804
|
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }))))),
|
|
@@ -3811,26 +3811,26 @@ var Statistics = function (_a) {
|
|
|
3811
3811
|
source && (React.createElement(React.Fragment, null,
|
|
3812
3812
|
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
|
|
3813
3813
|
React.createElement(Text.Text, { size: "xs" },
|
|
3814
|
-
React.createElement("span", { className: styles$
|
|
3814
|
+
React.createElement("span", { className: styles$l.mutedText }, source)))),
|
|
3815
3815
|
sourceUrl && (React.createElement(Text.Text, { size: "xs" },
|
|
3816
|
-
React.createElement("a", { className: styles$
|
|
3816
|
+
React.createElement("a", { className: styles$l.mutedText, href: sourceUrl }, sourceUrl))))))));
|
|
3817
3817
|
})))));
|
|
3818
3818
|
};
|
|
3819
3819
|
|
|
3820
|
-
var styles$
|
|
3820
|
+
var styles$k = {"bannerWithTabsHeadingCentered":"BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO"};
|
|
3821
3821
|
|
|
3822
3822
|
var BannerWithTabs = function (_a) {
|
|
3823
3823
|
var _b;
|
|
3824
3824
|
var tabs = _a.tabs, defaultValue = _a.defaultValue, heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, _c = _a.alignTypography, alignTypography = _c === void 0 ? "left" : _c, minHeight = _a.minHeight, minHeightM = _a.minHeightM, props = __rest(_a, ["tabs", "defaultValue", "heading", "headingLevel", "content", "id", "isHeadingWordWrap", "alignTypography", "minHeight", "minHeightM"]);
|
|
3825
3825
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3826
3826
|
React.createElement("div", { className: classNames((_b = {},
|
|
3827
|
-
_b[styles$
|
|
3827
|
+
_b[styles$k.bannerWithTabsHeadingCentered] = alignTypography === "center",
|
|
3828
3828
|
_b)) },
|
|
3829
3829
|
React.createElement(SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, headingLevel: headingLevel, content: content, isPadded: alignTypography === "left" ? true : false })),
|
|
3830
3830
|
React.createElement(TabbedBanner.TabbedBanner, { minHeight: minHeight, minHeightM: minHeightM, tabs: tabs, defaultValue: defaultValue })));
|
|
3831
3831
|
};
|
|
3832
3832
|
|
|
3833
|
-
var styles$
|
|
3833
|
+
var styles$j = {"tagGroup":"ArticleSidebar-module_tagGroup__rIPQc","textContent":"ArticleSidebar-module_textContent__3nCfG","additionalContentContainer":"ArticleSidebar-module_additionalContentContainer__91L4n","shareButtonContainer":"ArticleSidebar-module_shareButtonContainer__iAfHL","shareButton":"ArticleSidebar-module_shareButton__rb-1E"};
|
|
3834
3834
|
|
|
3835
3835
|
/**
|
|
3836
3836
|
* Use `ArticleSidebar` to provide additional information about the article.
|
|
@@ -3892,7 +3892,7 @@ var ArticleSidebar = function (_a) {
|
|
|
3892
3892
|
var hasBottomContent = Boolean(linkSection || topics || showShare);
|
|
3893
3893
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3894
3894
|
React.createElement("div", { className: classNames((_b = {},
|
|
3895
|
-
_b[styles$
|
|
3895
|
+
_b[styles$j.textContent] = hasTopContent,
|
|
3896
3896
|
_b)) },
|
|
3897
3897
|
author && (React.createElement(React.Fragment, null,
|
|
3898
3898
|
React.createElement(Author, __assign({}, author, { avatar: __assign(__assign({}, author.avatar), { size: "xl" }) })))),
|
|
@@ -3903,7 +3903,7 @@ var ArticleSidebar = function (_a) {
|
|
|
3903
3903
|
React.createElement(Text.Text, { size: "s" }, aboutSection.content))),
|
|
3904
3904
|
additionalContent && (React.createElement(React.Fragment, null,
|
|
3905
3905
|
(author || aboutSection) && React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
3906
|
-
React.createElement("div", { className: styles$
|
|
3906
|
+
React.createElement("div", { className: styles$j.additionalContentContainer }, additionalContent.map(function (_a) {
|
|
3907
3907
|
var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content;
|
|
3908
3908
|
return (React.createElement("div", { key: "".concat(id, "-").concat(heading) },
|
|
3909
3909
|
React.createElement(Heading.Heading, { level: headingLevel, size: "xxs" }, heading),
|
|
@@ -3926,7 +3926,7 @@ var ArticleSidebar = function (_a) {
|
|
|
3926
3926
|
linkSection && React.createElement(VerticalSpace.VerticalSpace, { size: "32" }),
|
|
3927
3927
|
React.createElement(Heading.Heading, { level: topics.headingLevel }, topics.heading),
|
|
3928
3928
|
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
3929
|
-
React.createElement("div", { className: styles$
|
|
3929
|
+
React.createElement("div", { className: styles$j.tagGroup }, topics.tags.map(function (tag) { return (React.createElement(Tag.Tag, __assign({ key: "".concat(id, "-").concat(tag.title) }, tag))); })))),
|
|
3930
3930
|
showShare && (React.createElement(React.Fragment, null,
|
|
3931
3931
|
(linkSection || topics) && (React.createElement("div", { "data-testid": "links-topics-content-rule" },
|
|
3932
3932
|
React.createElement(VerticalSpace.VerticalSpace, { size: "32" }),
|
|
@@ -3934,16 +3934,16 @@ var ArticleSidebar = function (_a) {
|
|
|
3934
3934
|
React.createElement(VerticalSpace.VerticalSpace, { size: "32" }))),
|
|
3935
3935
|
React.createElement(Heading.Heading, { level: share.headingLevel }, share.heading),
|
|
3936
3936
|
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
3937
|
-
React.createElement("div", { className: styles$
|
|
3937
|
+
React.createElement("div", { className: styles$j.shareButtonContainer }, shareButtons.map(function (_a) {
|
|
3938
3938
|
var isButton = _a.isButton, ariaLabel = _a.ariaLabel, href = _a.href, icon = _a.icon, onClick = _a.onClick;
|
|
3939
|
-
return (React.createElement("a", { key: "".concat(id, "-").concat(ariaLabel), role: isButton ? "button" : undefined, target: "_blank", rel: "noreferrer", className: styles$
|
|
3939
|
+
return (React.createElement("a", { key: "".concat(id, "-").concat(ariaLabel), role: isButton ? "button" : undefined, target: "_blank", rel: "noreferrer", className: styles$j.shareButton, "aria-label": ariaLabel, href: href, onClick: isButton ? onClick : undefined },
|
|
3940
3940
|
React.createElement(Icon.Icon, { icon: icon, size: 24 })));
|
|
3941
3941
|
})))),
|
|
3942
3942
|
React.createElement(Toast.Toast, null,
|
|
3943
3943
|
React.createElement(Toast.ToastNotification, { status: "success", title: "Copied to clipboard", isOpen: showToast, onOpenChange: function () { return setShowToast(false); } }))));
|
|
3944
3944
|
};
|
|
3945
3945
|
|
|
3946
|
-
var styles$
|
|
3946
|
+
var styles$i = {"product-navigation-grid":"ProductNavigation-module_product-navigation-grid__RzFq8","productNavigation-skipLink":"ProductNavigation-module_productNavigation-skipLink__fy8ZJ"};
|
|
3947
3947
|
|
|
3948
3948
|
/**
|
|
3949
3949
|
* Use `ProductNavigation` to give a collection of product information cards collected within a grid that has optional show/hide capability
|
|
@@ -3989,7 +3989,7 @@ var ProductNavigation = function (_a) {
|
|
|
3989
3989
|
var isMinWidthArcBreakpointS = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
|
|
3990
3990
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3991
3991
|
React.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "ProductNavigation-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content, image: image }),
|
|
3992
|
-
React.createElement("ul", { className: classNames(styles$
|
|
3992
|
+
React.createElement("ul", { className: classNames(styles$i["product-navigation-grid"]) }, displayList === null || displayList === void 0 ? void 0 : displayList.map(function (cardProps, i) {
|
|
3993
3993
|
var _a;
|
|
3994
3994
|
return (React.createElement("li", { key: "displayList-".concat(i), tabIndex: -1, ref: i === skipLinkCard ? cardRef : undefined, "data-cy": "list-item-".concat(i) },
|
|
3995
3995
|
React.createElement(InformationCard.InformationCard, __assign({}, cardProps, { minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : cardProps.minHeight, headingLevel: (_a = cardProps.headingLevel) !== null && _a !== void 0 ? _a : "2" }))));
|
|
@@ -4001,7 +4001,7 @@ var ProductNavigation = function (_a) {
|
|
|
4001
4001
|
!hideLessButton && (React.createElement(ButtonV2.ButtonV2, { label: displayList.length < productList.length
|
|
4002
4002
|
? "Show more"
|
|
4003
4003
|
: "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
|
|
4004
|
-
displaySkipButton && displayList.length > cardsToDisplay && (React.createElement("div", { id: "skip-link", className: classNames(styles$
|
|
4004
|
+
displaySkipButton && displayList.length > cardsToDisplay && (React.createElement("div", { id: "skip-link", className: classNames(styles$i["productNavigation-skipLink"]), tabIndex: -1 },
|
|
4005
4005
|
React.createElement(ButtonV2.ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true }))),
|
|
4006
4006
|
React.createElement(VisuallyHidden.VisuallyHidden, null,
|
|
4007
4007
|
React.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
|
|
@@ -4013,18 +4013,18 @@ var ProductNavigation = function (_a) {
|
|
|
4013
4013
|
"."))))))));
|
|
4014
4014
|
};
|
|
4015
4015
|
|
|
4016
|
-
var styles$
|
|
4016
|
+
var styles$h = {"container":"ContentInfoWidget-module_container__yaS-8","text":"ContentInfoWidget-module_text__O1BdZ","icon":"ContentInfoWidget-module_icon__LEww1"};
|
|
4017
4017
|
|
|
4018
4018
|
var ContentInfoWidget = function (_a) {
|
|
4019
4019
|
var text = _a.text, icon = _a.icon, props = __rest(_a, ["text", "icon"]);
|
|
4020
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4021
|
-
React.createElement("div", { className: styles$
|
|
4020
|
+
return (React.createElement("div", __assign({ className: styles$h.container }, filterAttrs(props)),
|
|
4021
|
+
React.createElement("div", { className: styles$h.icon },
|
|
4022
4022
|
React.createElement(Icon.Icon, { size: 20, icon: icon })),
|
|
4023
|
-
React.createElement("div", { className: styles$
|
|
4023
|
+
React.createElement("div", { className: styles$h.text },
|
|
4024
4024
|
React.createElement(Text.Text, { size: "xs", tone: "muted" }, text))));
|
|
4025
4025
|
};
|
|
4026
4026
|
|
|
4027
|
-
var styles$
|
|
4027
|
+
var styles$g = {"action-tile":"ActionTile-module_action-tile__JPwGb","action-tile-content":"ActionTile-module_action-tile-content__ZkgHc","action-tile-content--without-icon":"ActionTile-module_action-tile-content--without-icon__7F5xj","action-tile-icon":"ActionTile-module_action-tile-icon__PY1EN","action-tile-heading":"ActionTile-module_action-tile-heading__Uxdu9","action-tile--compact":"ActionTile-module_action-tile--compact__wq5Aa","action-tile--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
|
|
4028
4028
|
|
|
4029
4029
|
var ActionTile = function (_a) {
|
|
4030
4030
|
var _b, _c;
|
|
@@ -4032,51 +4032,51 @@ var ActionTile = function (_a) {
|
|
|
4032
4032
|
var displayIcon = isActive && activeIcon ? activeIcon : icon;
|
|
4033
4033
|
var iconSize = isCompact ? 40 : 48;
|
|
4034
4034
|
var content = (React.createElement(React.Fragment, null,
|
|
4035
|
-
React.createElement("div", { className: classNames(styles$
|
|
4036
|
-
_b[styles$
|
|
4035
|
+
React.createElement("div", { className: classNames(styles$g["action-tile-content"], (_b = {},
|
|
4036
|
+
_b[styles$g["action-tile-content--without-icon"]] = !displayIcon,
|
|
4037
4037
|
_b)) },
|
|
4038
|
-
displayIcon && (React.createElement("div", { className: styles$
|
|
4038
|
+
displayIcon && (React.createElement("div", { className: styles$g["action-tile-icon"] },
|
|
4039
4039
|
React.createElement(Icon.Icon, { icon: displayIcon, size: iconSize }))),
|
|
4040
|
-
React.createElement("span", { className: styles$
|
|
4041
|
-
isActive && (React.createElement("div", { className: styles$
|
|
4040
|
+
React.createElement("span", { className: styles$g["action-tile-heading"] }, heading)),
|
|
4041
|
+
isActive && (React.createElement("div", { className: styles$g["action-tile-tick"] },
|
|
4042
4042
|
React.createElement(Icon.Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
|
|
4043
|
-
return (React.createElement("button", __assign({ type: "button", className: classNames(styles$
|
|
4044
|
-
_c[styles$
|
|
4045
|
-
_c[styles$
|
|
4043
|
+
return (React.createElement("button", __assign({ type: "button", className: classNames(styles$g["action-tile"], (_c = {},
|
|
4044
|
+
_c[styles$g["action-tile--active"]] = isActive,
|
|
4045
|
+
_c[styles$g["action-tile--compact"]] = isCompact,
|
|
4046
4046
|
_c)), onClick: onClick, "aria-pressed": isActive }, filterAttrs(props)), content));
|
|
4047
4047
|
};
|
|
4048
4048
|
|
|
4049
|
-
var styles$
|
|
4049
|
+
var styles$f = {"link-tile":"LinkTile-module_link-tile__xVUP3","link-tile-content":"LinkTile-module_link-tile-content__H-QN8","link-tile-icon":"LinkTile-module_link-tile-icon__kTMfH","link-tile-text":"LinkTile-module_link-tile-text__0K6zf","link-tile--neutral":"LinkTile-module_link-tile--neutral__T2z5x"};
|
|
4050
4050
|
|
|
4051
4051
|
var LinkTile = function (_a) {
|
|
4052
4052
|
var _b;
|
|
4053
4053
|
var text = _a.text, href = _a.href, _c = _a.showIcon, showIcon = _c === void 0 ? true : _c, _d = _a.tone, tone = _d === void 0 ? "brand" : _d, className = _a.className, props = __rest(_a, ["text", "href", "showIcon", "tone", "className"]);
|
|
4054
4054
|
var Component = href ? "a" : "div";
|
|
4055
4055
|
var linkProps = href ? { href: href } : {};
|
|
4056
|
-
return (React.createElement(Component, __assign({ className: classNames(styles$
|
|
4057
|
-
_b[styles$
|
|
4058
|
-
_b), className) }, linkProps, props), text && (React.createElement("div", { className: styles$
|
|
4059
|
-
React.createElement("span", { className: styles$
|
|
4060
|
-
showIcon && (React.createElement("span", { className: styles$
|
|
4056
|
+
return (React.createElement(Component, __assign({ className: classNames(styles$f["link-tile"], (_b = {},
|
|
4057
|
+
_b[styles$f["link-tile--neutral"]] = tone === "neutral",
|
|
4058
|
+
_b), className) }, linkProps, props), text && (React.createElement("div", { className: styles$f["link-tile-content"] },
|
|
4059
|
+
React.createElement("span", { className: styles$f["link-tile-text"] }, text),
|
|
4060
|
+
showIcon && (React.createElement("span", { className: styles$f["link-tile-icon"] },
|
|
4061
4061
|
React.createElement(Icon.Icon, { icon: BtIconArrowAltRight, size: 32 })))))));
|
|
4062
4062
|
};
|
|
4063
4063
|
|
|
4064
|
-
var styles$
|
|
4064
|
+
var styles$e = {"quick-help":"InlineLinkGroup-module_quick-help__cMTpB","quick-help-label":"InlineLinkGroup-module_quick-help-label__VLKen","quick-help-container":"InlineLinkGroup-module_quick-help-container__IStTk","quick-help-item":"InlineLinkGroup-module_quick-help-item__QTIMl","quick-help-separator":"InlineLinkGroup-module_quick-help-separator__qJE0q","quick-help-separator-line":"InlineLinkGroup-module_quick-help-separator-line__VbCVI"};
|
|
4065
4065
|
|
|
4066
4066
|
var InlineLinkGroup = function (_a) {
|
|
4067
|
-
var label = _a.label, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, links = _a.links, props = __rest(_a, ["label", "headingLevel", "links"]);
|
|
4068
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4069
|
-
label && (React.createElement("div", { className: styles$
|
|
4067
|
+
var label = _a.label, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, links = _a.links, _c = _a.isImplied, isImplied = _c === void 0 ? false : _c, props = __rest(_a, ["label", "headingLevel", "links", "isImplied"]);
|
|
4068
|
+
return (React.createElement("div", __assign({ className: styles$e["quick-help"] }, filterAttrs(props)),
|
|
4069
|
+
label && (React.createElement("div", { className: styles$e["quick-help-label"] },
|
|
4070
4070
|
React.createElement(Heading.Heading, { level: headingLevel, size: "xxs", fontStyle: "overline" }, label))),
|
|
4071
|
-
React.createElement("ul", { className: styles$
|
|
4072
|
-
React.createElement("li", { className: styles$
|
|
4073
|
-
React.createElement(Link.Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel }, link.label),
|
|
4071
|
+
React.createElement("ul", { className: styles$e["quick-help-container"] }, links.map(function (link, index) { return (React.createElement(React.Fragment, { key: index },
|
|
4072
|
+
React.createElement("li", { className: styles$e["quick-help-item"] },
|
|
4073
|
+
React.createElement(Link.Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel, isImplied: isImplied }, link.label),
|
|
4074
4074
|
React.createElement(Icon.Icon, { icon: BtIconArrowAltRight, size: 24, color: "brand" })),
|
|
4075
|
-
index < links.length - 1 && (React.createElement("li", { className: styles$
|
|
4076
|
-
React.createElement("div", { className: styles$
|
|
4075
|
+
index < links.length - 1 && (React.createElement("li", { className: styles$e["quick-help-separator"], "aria-hidden": "true" },
|
|
4076
|
+
React.createElement("div", { className: styles$e["quick-help-separator-line"] }))))); }))));
|
|
4077
4077
|
};
|
|
4078
4078
|
|
|
4079
|
-
var styles$
|
|
4079
|
+
var styles$d = {"thumbnailSignpost":"ThumbnailSignpost-module_thumbnailSignpost__Yf26b","isLink":"ThumbnailSignpost-module_isLink__FucdG","onDarkSurface":"ThumbnailSignpost-module_onDarkSurface__F2jUk","content":"ThumbnailSignpost-module_content__XG9oj","heading":"ThumbnailSignpost-module_heading__mTrpJ","image":"ThumbnailSignpost-module_image__syGZj","thumbnailButton":"ThumbnailSignpost-module_thumbnailButton__Nn-NR","buttonIcon":"ThumbnailSignpost-module_buttonIcon__ydmza"};
|
|
4080
4080
|
|
|
4081
4081
|
/** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
|
|
4082
4082
|
var ThumbnailSignpost = function (_a) {
|
|
@@ -4084,20 +4084,20 @@ var ThumbnailSignpost = function (_a) {
|
|
|
4084
4084
|
var text = _a.text, title = _a.title, img = _a.img, onClick = _a.onClick, buttonLabel = _a.buttonLabel, props = __rest(_a, ["text", "title", "img", "onClick", "buttonLabel"]);
|
|
4085
4085
|
var surface = React.useContext(Surface.SurfaceContext).surface;
|
|
4086
4086
|
var isDarkSurface = surface === "dark";
|
|
4087
|
-
return (React.createElement("div", __assign({ className: classNames(styles$
|
|
4088
|
-
_b[styles$
|
|
4089
|
-
_b[styles$
|
|
4087
|
+
return (React.createElement("div", __assign({ className: classNames(styles$d.thumbnailSignpost, (_b = {},
|
|
4088
|
+
_b[styles$d.isLink] = onClick,
|
|
4089
|
+
_b[styles$d.onDarkSurface] = isDarkSurface,
|
|
4090
4090
|
_b)), onClick: onClick, "aria-label": title, tabIndex: onClick ? 0 : -1 }, (onClick && { role: "button" }), filterAttrs(props)),
|
|
4091
|
-
img && (React.createElement("div", { className: styles$
|
|
4091
|
+
img && (React.createElement("div", { className: styles$d.image },
|
|
4092
4092
|
React.createElement(Image$2.Image, __assign({}, img)))),
|
|
4093
|
-
React.createElement("div", { className: styles$
|
|
4094
|
-
React.createElement("span", { className: styles$
|
|
4093
|
+
React.createElement("div", { className: styles$d.content },
|
|
4094
|
+
React.createElement("span", { className: styles$d.heading }, title),
|
|
4095
4095
|
React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
|
|
4096
4096
|
text,
|
|
4097
4097
|
buttonLabel && onClick && (React.createElement(React.Fragment, null,
|
|
4098
4098
|
React.createElement(VerticalSpace.VerticalSpace, { size: "32" }),
|
|
4099
|
-
React.createElement("div", { className: styles$
|
|
4100
|
-
React.createElement("span", { className: styles$
|
|
4099
|
+
React.createElement("div", { className: styles$d.thumbnailButton },
|
|
4100
|
+
React.createElement("span", { className: styles$d.buttonIcon, role: "img", style: {
|
|
4101
4101
|
height: 24,
|
|
4102
4102
|
width: 24,
|
|
4103
4103
|
maskImage: "url(\"".concat(BtIconArrowRightFill, "\")"),
|
|
@@ -4106,54 +4106,62 @@ var ThumbnailSignpost = function (_a) {
|
|
|
4106
4106
|
React.createElement(Heading.Heading, { size: "xxs" }, buttonLabel)))))));
|
|
4107
4107
|
};
|
|
4108
4108
|
|
|
4109
|
-
var styles$
|
|
4109
|
+
var styles$c = {"PromoListingThumbnailSignpost":"PromoListingThumbnailSignpost-module_PromoListingThumbnailSignpost__0HTPV","list":"PromoListingThumbnailSignpost-module_list__E9l0E"};
|
|
4110
4110
|
|
|
4111
4111
|
/**
|
|
4112
4112
|
* Use `PromoListingThumbnailSignpost` to give supporting information about a page or proposition in the form of the ThumbnailSignposts components.
|
|
4113
4113
|
*/
|
|
4114
4114
|
var PromoListingThumbnailSignpost = function (_a) {
|
|
4115
4115
|
var _b = _a.isPadded, isPadded = _b === void 0 ? true : _b, heading = _a.heading, content = _a.content, headingLevel = _a.headingLevel, thumbnailList = _a.thumbnailList, isHeadingWordWrap = _a.isHeadingWordWrap, props = __rest(_a, ["isPadded", "heading", "content", "headingLevel", "thumbnailList", "isHeadingWordWrap"]);
|
|
4116
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4116
|
+
return (React.createElement("div", __assign({ className: styles$c.PromoListingThumbnailSignpost }, filterAttrs(props)),
|
|
4117
4117
|
React.createElement(SectionHeading, { isPadded: isPadded, "data-testid": "PromoListingThumbnailSignpost-header", heading: heading, headingLevel: headingLevel, content: content, isHeadingWordWrap: isHeadingWordWrap }),
|
|
4118
|
-
React.createElement("ul", { className: styles$
|
|
4118
|
+
React.createElement("ul", { className: styles$c.list }, thumbnailList.map(function (thumbnail, index) { return (React.createElement("li", { key: index },
|
|
4119
4119
|
React.createElement(ThumbnailSignpost, __assign({}, thumbnail)))); }))));
|
|
4120
4120
|
};
|
|
4121
4121
|
|
|
4122
|
-
var styles$
|
|
4122
|
+
var styles$b = {"playIconContainer":"VideoCardPlayIcon-module_playIconContainer__ZqZP3","playIconContainer--s":"VideoCardPlayIcon-module_playIconContainer--s__ETbOZ","playIconContainer--l":"VideoCardPlayIcon-module_playIconContainer--l__OGccg","playIcon":"VideoCardPlayIcon-module_playIcon__kzito"};
|
|
4123
4123
|
|
|
4124
4124
|
var VideoCardPlayIcon = function (_a) {
|
|
4125
4125
|
var _b = _a.size, size = _b === void 0 ? "l" : _b;
|
|
4126
|
-
return (React.createElement("div", { className: classNames(styles$
|
|
4127
|
-
React.createElement("div", { className: styles$
|
|
4126
|
+
return (React.createElement("div", { className: classNames(styles$b.playIconContainer, styles$b["playIconContainer--".concat(size)]) },
|
|
4127
|
+
React.createElement("div", { className: styles$b.playIcon },
|
|
4128
4128
|
React.createElement(Icon.Icon, { icon: ArcIconPlay }))));
|
|
4129
4129
|
};
|
|
4130
4130
|
|
|
4131
|
-
var styles$
|
|
4131
|
+
var styles$a = {"container":"VideoCardPlayer-module_container__G-Uta","player":"VideoCardPlayer-module_player__BgueT","playerWrapper":"VideoCardPlayer-module_playerWrapper__UcH1q","playerWrapper--landscape":"VideoCardPlayer-module_playerWrapper--landscape__shKv-","playerWrapper--portrait":"VideoCardPlayer-module_playerWrapper--portrait__7bKAr"};
|
|
4132
4132
|
|
|
4133
4133
|
var VideoCardPlayer = function (_a) {
|
|
4134
4134
|
var thumbnail = _a.thumbnail, playIconSize = _a.playIconSize, orientation = _a.orientation, children = _a.children, player = _a.player, props = __rest(_a, ["thumbnail", "playIconSize", "orientation", "children", "player"]);
|
|
4135
4135
|
var _b = React.useState(false), isClient = _b[0], setIsClient = _b[1];
|
|
4136
|
+
var playerWrapperRef = React.useRef(null);
|
|
4136
4137
|
React.useEffect(function () {
|
|
4137
4138
|
setIsClient(true);
|
|
4138
4139
|
}, []);
|
|
4139
|
-
var
|
|
4140
|
-
|
|
4141
|
-
|
|
4140
|
+
var handleClickPreview = React.useCallback(function () {
|
|
4141
|
+
// Restore focus to the player wrapper after preview is clicked.
|
|
4142
|
+
requestAnimationFrame(function () {
|
|
4143
|
+
var _a;
|
|
4144
|
+
(_a = playerWrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
4145
|
+
});
|
|
4146
|
+
}, []);
|
|
4147
|
+
var playerProps = __assign(__assign({}, player), { light: thumbnail, playIcon: React.createElement(VideoCardPlayIcon, { size: playIconSize }), muted: !thumbnail, playing: true, controls: true, className: styles$a.player, width: "100%", height: "100%", onClickPreview: handleClickPreview });
|
|
4148
|
+
return (React.createElement("div", __assign({ className: styles$a.container }, filterAttrs(props)),
|
|
4149
|
+
React.createElement("div", { ref: playerWrapperRef, "data-testid": "arc-video-card", role: "button", tabIndex: -1, className: classNames(styles$a.playerWrapper, styles$a["playerWrapper--".concat(orientation)]) }, isClient && React.createElement(ReactPlayer, __assign({}, playerProps))),
|
|
4142
4150
|
children));
|
|
4143
4151
|
};
|
|
4144
4152
|
|
|
4145
|
-
var styles$
|
|
4153
|
+
var styles$9 = {"thumbnail":"VideoCardThumbnail-module_thumbnail__Yamk0","thumbnail--landscape":"VideoCardThumbnail-module_thumbnail--landscape__FmnLk","thumbnail--portrait":"VideoCardThumbnail-module_thumbnail--portrait__FZS93","thumbnailContent":"VideoCardThumbnail-module_thumbnailContent__cHham"};
|
|
4146
4154
|
|
|
4147
4155
|
var VideoCardThumbnail = function (_a) {
|
|
4148
4156
|
var orientation = _a.orientation, contentVisibility = _a.contentVisibility, src = _a.src, children = _a.children;
|
|
4149
|
-
var content = React.createElement("div", { className: styles$
|
|
4150
|
-
return (React.createElement("div", { className: classNames(styles$
|
|
4157
|
+
var content = React.createElement("div", { className: styles$9.thumbnailContent }, children);
|
|
4158
|
+
return (React.createElement("div", { className: classNames(styles$9.thumbnail, styles$9["thumbnail--".concat(orientation)]), style: { backgroundImage: "url(".concat(src, ")") } }, contentVisibility ? (React.createElement(Visible.Visible, __assign({}, contentVisibility), content)) : (content)));
|
|
4151
4159
|
};
|
|
4152
4160
|
|
|
4153
|
-
var styles$
|
|
4161
|
+
var styles$8 = {"mainText--lightBackground":"VideoHeroCardContent-module_mainText--lightBackground__nGl6W","statContainer--lightBackground":"VideoHeroCardContent-module_statContainer--lightBackground__7hXAf","statContainer--darkBackground":"VideoHeroCardContent-module_statContainer--darkBackground__X3-r2","mainText--darkBackground":"VideoHeroCardContent-module_mainText--darkBackground__Pfizt","statContainer":"VideoHeroCardContent-module_statContainer__q21g9","stat":"VideoHeroCardContent-module_stat__iIcoq"};
|
|
4154
4162
|
|
|
4155
4163
|
var VideoHeroCardContent = function (_a) {
|
|
4156
|
-
var title = _a.title, label = _a.label, description = _a.description, videoDate = _a.videoDate, duration = _a.duration, background = _a.background, subtitleAvailabilityText = _a.subtitleAvailabilityText;
|
|
4164
|
+
var title = _a.title, label = _a.label, _b = _a.titleLevel, titleLevel = _b === void 0 ? "3" : _b, labelLevel = _a.labelLevel, description = _a.description, videoDate = _a.videoDate, duration = _a.duration, background = _a.background, subtitleAvailabilityText = _a.subtitleAvailabilityText;
|
|
4157
4165
|
var id = React.useId();
|
|
4158
4166
|
var metaItems = [
|
|
4159
4167
|
{ icon: BtIconCalendar, text: videoDate },
|
|
@@ -4164,17 +4172,17 @@ var VideoHeroCardContent = function (_a) {
|
|
|
4164
4172
|
},
|
|
4165
4173
|
];
|
|
4166
4174
|
var hasMeta = metaItems.some(function (meta) { return Boolean(meta.text); });
|
|
4167
|
-
return (React.createElement("div", { className: styles$
|
|
4168
|
-
React.createElement("div", { className: classNames(styles$
|
|
4169
|
-
React.createElement(Heading.Heading, { fontStyle: "overline" }, label),
|
|
4175
|
+
return (React.createElement("div", { className: styles$8["".concat(background, "Background")] },
|
|
4176
|
+
React.createElement("div", { className: classNames(styles$8.mainText, styles$8["mainText--".concat(background, "Background")]) },
|
|
4177
|
+
React.createElement(Heading.Heading, { level: labelLevel, fontStyle: "overline" }, label),
|
|
4170
4178
|
React.createElement(VerticalSpace.VerticalSpace, { size: "8", sizeM: "4" }),
|
|
4171
|
-
React.createElement(Heading.Heading, { level:
|
|
4179
|
+
React.createElement(Heading.Heading, { level: titleLevel, isWordWrap: false, size: "xl" }, title),
|
|
4172
4180
|
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
4173
4181
|
React.createElement(Text.Text, null, description)),
|
|
4174
4182
|
hasMeta && (React.createElement(React.Fragment, null,
|
|
4175
4183
|
React.createElement(VerticalSpace.VerticalSpace, { size: "32", sizeS: "16" }),
|
|
4176
|
-
React.createElement("div", { className: classNames(styles$
|
|
4177
|
-
return meta.text && (React.createElement("div", { key: "".concat(id, "-stat-").concat(i), className: styles$
|
|
4184
|
+
React.createElement("div", { className: classNames(styles$8.statContainer, styles$8["statContainer--".concat(background, "Background")]) }, metaItems.map(function (meta, i) {
|
|
4185
|
+
return meta.text && (React.createElement("div", { key: "".concat(id, "-stat-").concat(i), className: styles$8.stat },
|
|
4178
4186
|
React.createElement(Icon.Icon, { icon: meta.icon, size: 20 }),
|
|
4179
4187
|
React.createElement(Text.Text, { size: "xs" }, meta.text)));
|
|
4180
4188
|
}))))));
|
|
@@ -4192,12 +4200,12 @@ var VideoPortraitCard = function (_a) {
|
|
|
4192
4200
|
var thumbnail = _a.thumbnail, player = _a.player, props = __rest(_a, ["thumbnail", "player"]);
|
|
4193
4201
|
return (React.createElement(VideoCardPlayer, __assign({ thumbnail: thumbnail && (React.createElement(VideoCardThumbnail, { orientation: "portrait", src: thumbnail.img },
|
|
4194
4202
|
React.createElement(Surface.Surface, { isTransparent: true, background: "dark-black" },
|
|
4195
|
-
React.createElement(Heading.Heading, { fontStyle: "overline" }, thumbnail.label),
|
|
4203
|
+
React.createElement(Heading.Heading, { fontStyle: "overline", level: thumbnail.labelLevel }, thumbnail.label),
|
|
4196
4204
|
React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
|
|
4197
|
-
React.createElement(Heading.Heading, { level:
|
|
4205
|
+
React.createElement(Heading.Heading, { level: thumbnail.titleLevel, isWordWrap: false, size: "xs" }, thumbnail.title)))), orientation: "portrait", player: player, playIconSize: "s" }, props)));
|
|
4198
4206
|
};
|
|
4199
4207
|
|
|
4200
|
-
var styles$
|
|
4208
|
+
var styles$7 = {"contentWrapper":"BusinessSegmentSwitcher-module_contentWrapper__YKEjS","cardWrapper":"BusinessSegmentSwitcher-module_cardWrapper__eGDJ-","cardCol":"BusinessSegmentSwitcher-module_cardCol__jsySH","businessSegmentSwitcherDesktop":"BusinessSegmentSwitcher-module_businessSegmentSwitcherDesktop__oBvzS","businessSegmentSwitcher":"BusinessSegmentSwitcher-module_businessSegmentSwitcher__Sae5K","desktopCarousel":"BusinessSegmentSwitcher-module_desktopCarousel__xW3HN","businessSegmentSwitcherMobile":"BusinessSegmentSwitcher-module_businessSegmentSwitcherMobile__PSFyi"};
|
|
4201
4209
|
|
|
4202
4210
|
/**
|
|
4203
4211
|
* Renders either an InformationCard or a contained MediaCard based on the card type.
|
|
@@ -4221,11 +4229,11 @@ var renderBusinessSegmentSwitcherCarousel = function (_a) {
|
|
|
4221
4229
|
xs: { itemsPerSlide: 1 },
|
|
4222
4230
|
s: { itemsPerSlide: 2 },
|
|
4223
4231
|
} },
|
|
4224
|
-
React.createElement("div", { className: styles$
|
|
4225
|
-
React.createElement("div", { className: styles$
|
|
4226
|
-
content.card3 && (React.createElement("div", { className: styles$
|
|
4232
|
+
React.createElement("div", { className: styles$7.cardWrapper }, renderCard(content.card1)),
|
|
4233
|
+
React.createElement("div", { className: styles$7.cardWrapper }, renderCard(content.card2)),
|
|
4234
|
+
content.card3 && (React.createElement("div", { className: styles$7.cardWrapper },
|
|
4227
4235
|
React.createElement(InformationCard.InformationCard, __assign({}, content.card3)))),
|
|
4228
|
-
React.createElement("div", { className: styles$
|
|
4236
|
+
React.createElement("div", { className: styles$7.cardWrapper },
|
|
4229
4237
|
React.createElement(TypographyCard.TypographyCard, { heading: "All ".concat(label, " solutions"), label: content.card4.label, url: content.card4.url }))));
|
|
4230
4238
|
};
|
|
4231
4239
|
|
|
@@ -4238,8 +4246,8 @@ var BusinessSegmentSwitcher = function (_a) {
|
|
|
4238
4246
|
var tabs = _a.tabs, defaultValue = _a.defaultValue, props = __rest(_a, ["tabs", "defaultValue"]);
|
|
4239
4247
|
var initialTab = (_c = defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_b = tabs[0]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : "";
|
|
4240
4248
|
var _d = React.useState(initialTab), selectedTab = _d[0], setSelectedTab = _d[1];
|
|
4241
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4242
|
-
React.createElement("div", { className: styles$
|
|
4249
|
+
return (React.createElement("div", __assign({ className: styles$7.businessSegmentSwitcher }, filterAttrs(props)),
|
|
4250
|
+
React.createElement("div", { className: styles$7.businessSegmentSwitcherDesktop },
|
|
4243
4251
|
React.createElement(ContentSwitcher.ContentSwitcher, { value: selectedTab, onValueChange: function (value) { return setSelectedTab(value); } },
|
|
4244
4252
|
React.createElement(ContentSwitcher.ContentSwitcherList, { isInset: true }, tabs.map(function (_a, index) {
|
|
4245
4253
|
var label = _a.label, value = _a.value;
|
|
@@ -4248,42 +4256,42 @@ var BusinessSegmentSwitcher = function (_a) {
|
|
|
4248
4256
|
tabs.map(function (_a, index) {
|
|
4249
4257
|
var value = _a.value, content = _a.content, label = _a.label;
|
|
4250
4258
|
return (React.createElement(ContentSwitcher.ContentSwitcherContent, { value: value, key: "".concat(index, "-").concat(value), hidden: value !== selectedTab },
|
|
4251
|
-
React.createElement("div", { className: styles$
|
|
4252
|
-
React.createElement("div", { className: styles$
|
|
4259
|
+
React.createElement("div", { className: styles$7.contentWrapper },
|
|
4260
|
+
React.createElement("div", { className: styles$7.desktopCarousel }, renderBusinessSegmentSwitcherCarousel({ content: content, label: label })),
|
|
4253
4261
|
renderCard(content.card1),
|
|
4254
4262
|
renderCard(content.card2),
|
|
4255
|
-
React.createElement("div", { className: styles$
|
|
4263
|
+
React.createElement("div", { className: styles$7.cardCol },
|
|
4256
4264
|
content.card3 && React.createElement(InformationCard.InformationCard, __assign({}, content.card3)),
|
|
4257
4265
|
React.createElement("div", null,
|
|
4258
4266
|
React.createElement(TypographyCard.TypographyCard, { heading: content.card4.heading ||
|
|
4259
4267
|
"All ".concat(label.toLowerCase(), " solutions"), text: content.card4.text, label: content.card4.label, url: content.card4.url, onClick: content.card4.onClick }))))));
|
|
4260
4268
|
}))),
|
|
4261
|
-
React.createElement("div", { className: styles$
|
|
4269
|
+
React.createElement("div", { className: styles$7.businessSegmentSwitcherMobile },
|
|
4262
4270
|
React.createElement(ContentSwitcherDropdown.ContentSwitcherDropdown, { isInset: true, value: selectedTab, tabs: tabs, isFluid: true, onValueChange: function (value) { return setSelectedTab(value); } }, tabs.map(function (_a, index) {
|
|
4263
4271
|
var value = _a.value, content = _a.content, label = _a.label;
|
|
4264
4272
|
return (React.createElement(ContentSwitcherDropdown.ContentSwitcherDropdownContent, { value: value, key: "".concat(index, "-").concat(value) },
|
|
4265
|
-
React.createElement("div", { className: styles$
|
|
4273
|
+
React.createElement("div", { className: styles$7.contentWrapper }, renderBusinessSegmentSwitcherCarousel({ content: content, label: label }))));
|
|
4266
4274
|
})))));
|
|
4267
4275
|
};
|
|
4268
4276
|
|
|
4269
|
-
var styles$
|
|
4277
|
+
var styles$6 = {"subgroupHeader":"PartnerLogoSubgroup-module_subgroupHeader__rXAai","logoGroup":"PartnerLogoSubgroup-module_logoGroup__RYsTN","logoWrapper":"PartnerLogoSubgroup-module_logoWrapper__tyxVI","logoImage":"PartnerLogoSubgroup-module_logoImage__h7DJd"};
|
|
4270
4278
|
|
|
4271
4279
|
var PartnerLogoSubgroup = function (_a) {
|
|
4272
4280
|
var subheading = _a.subheading, text = _a.text, headingLevel = _a.headingLevel, logos = _a.logos, _b = _a.tileHeight, tileHeight = _b === void 0 ? 72 : _b;
|
|
4273
4281
|
var hasHeader = subheading || text;
|
|
4274
4282
|
var id = React.useId();
|
|
4275
4283
|
return (React.createElement(React.Fragment, null,
|
|
4276
|
-
hasHeader && (React.createElement("div", { className: styles$
|
|
4284
|
+
hasHeader && (React.createElement("div", { className: styles$6.subgroupHeader },
|
|
4277
4285
|
React.createElement(Columns.Columns, { isGutterless: true },
|
|
4278
4286
|
React.createElement(Columns.ColumnsCol, { spanL: 9, spanXL: 8 },
|
|
4279
4287
|
subheading && (React.createElement(Heading.Heading, { level: headingLevel, size: "s", isResponsive: false }, subheading)),
|
|
4280
4288
|
subheading && text && React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
|
|
4281
4289
|
text && (React.createElement(Text.Text, { size: "m", tone: "supporting" }, text)))))),
|
|
4282
|
-
React.createElement("div", { className: styles$
|
|
4283
|
-
React.createElement("img", { src: logo.src, alt: logo.alt, className: styles$
|
|
4290
|
+
React.createElement("div", { className: styles$6.logoGroup }, logos.map(function (logo, j) { return (React.createElement("div", { key: "".concat(id, "-logo-").concat(j), className: styles$6.logoWrapper, style: { height: tileHeight } },
|
|
4291
|
+
React.createElement("img", { src: logo.src, alt: logo.alt, className: styles$6.logoImage }))); }))));
|
|
4284
4292
|
};
|
|
4285
4293
|
|
|
4286
|
-
var styles = {"subgroupList":"PartnerBrandLogos-module_subgroupList__4e1kv"};
|
|
4294
|
+
var styles$5 = {"subgroupList":"PartnerBrandLogos-module_subgroupList__4e1kv"};
|
|
4287
4295
|
|
|
4288
4296
|
var getSubheadingLevel = function (parentLevel, subLevel) {
|
|
4289
4297
|
return subLevel !== null && subLevel !== void 0 ? subLevel : String(Math.min(Number(parentLevel) + 1, 6));
|
|
@@ -4307,10 +4315,120 @@ var PartnerBrandLogos = function (_a) {
|
|
|
4307
4315
|
React.createElement(VerticalSpace.VerticalSpace, __assign({}, rulerTopPadding)),
|
|
4308
4316
|
React.createElement(Rule.Rule, null),
|
|
4309
4317
|
React.createElement(VerticalSpace.VerticalSpace, __assign({}, rulerBottomPadding)),
|
|
4310
|
-
React.createElement("ul", { className: styles.subgroupList }, subgroups.map(function (subgroup, i) { return (React.createElement("li", { key: "subgroup-".concat(componentId, "-").concat(i) },
|
|
4318
|
+
React.createElement("ul", { className: styles$5.subgroupList }, subgroups.map(function (subgroup, i) { return (React.createElement("li", { key: "subgroup-".concat(componentId, "-").concat(i) },
|
|
4311
4319
|
React.createElement(PartnerLogoSubgroup, { subheading: subgroup.subheading, text: subgroup.text, headingLevel: getSubheadingLevel(headingLevel, subgroup.subheadingLevel), logos: subgroup.logos, tileHeight: subgroup.tileHeight }))); }))));
|
|
4312
4320
|
};
|
|
4313
4321
|
|
|
4322
|
+
var styles$4 = {"productCard":"ProductCard-module_productCard__4-BqH","productCardPromoted":"ProductCard-module_productCardPromoted__7cxo-","productCardTopSection":"ProductCard-module_productCardTopSection__8ukd-","divider":"ProductCard-module_divider__rF6XX","productCardBottom":"ProductCard-module_productCardBottom__XvXan","ctaWrapper":"ProductCard-module_ctaWrapper__bJfHv"};
|
|
4323
|
+
|
|
4324
|
+
var ProductCard = function (_a) {
|
|
4325
|
+
var heading = _a.heading, headingLevel = _a.headingLevel, topSlot = _a.topSlot, _b = _a.divider, divider = _b === void 0 ? true : _b, bottomSlot = _a.bottomSlot, promoted = _a.promoted, button = _a.button, props = __rest(_a, ["heading", "headingLevel", "topSlot", "divider", "bottomSlot", "promoted", "button"]);
|
|
4326
|
+
var headingId = React.useId();
|
|
4327
|
+
return (React.createElement("div", __assign({ className: styles$4.productCard }, filterAttrs(props), { role: "group", "aria-labelledby": headingId }),
|
|
4328
|
+
React.createElement("div", { className: styles$4.productCardTop },
|
|
4329
|
+
promoted && (React.createElement("div", { className: styles$4.productCardPromoted },
|
|
4330
|
+
React.createElement(Surface.Surface, { background: promoted.background, paddingVertical: "16", paddingHorizontal: "24" },
|
|
4331
|
+
React.createElement(VisuallyHidden.VisuallyHidden, null, "Promotional offer. "),
|
|
4332
|
+
React.createElement(Text.Text, { size: "s" }, promoted.content)))),
|
|
4333
|
+
React.createElement("div", { className: styles$4.productCardTopSection },
|
|
4334
|
+
React.createElement(Heading.Heading, { id: headingId, size: "m", level: headingLevel, color: "brand" }, heading),
|
|
4335
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
4336
|
+
topSlot)),
|
|
4337
|
+
React.createElement("div", { className: styles$4.productCardBottom },
|
|
4338
|
+
divider ? (React.createElement("div", { className: styles$4.divider },
|
|
4339
|
+
React.createElement(Rule.Rule, null))) : (React.createElement(VerticalSpace.VerticalSpace, { size: "16" })),
|
|
4340
|
+
bottomSlot,
|
|
4341
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
|
|
4342
|
+
React.createElement("div", { className: styles$4.ctaWrapper },
|
|
4343
|
+
React.createElement(ButtonV2.ButtonV2, __assign({ label: "Explore ".concat(heading), buttonStyle: "secondary", isFullWidth: true }, button))))));
|
|
4344
|
+
};
|
|
4345
|
+
|
|
4346
|
+
var styles$3 = {"benefitList":"ProductCardBenefits-module_benefitList__Qb1io","benefitItem":"ProductCardBenefits-module_benefitItem__nJqa6"};
|
|
4347
|
+
|
|
4348
|
+
var ProductCardBenefits = function (_a) {
|
|
4349
|
+
var _b = _a.heading, heading = _b === void 0 ? "Includes:" : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "4" : _c, benefits = _a.benefits;
|
|
4350
|
+
return (React.createElement(React.Fragment, null,
|
|
4351
|
+
React.createElement(Heading.Heading, { size: "xs", level: headingLevel }, heading),
|
|
4352
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
|
|
4353
|
+
React.createElement("ul", { className: styles$3.benefitList }, benefits.map(function (benefit, index) { return (React.createElement("li", { key: index, className: styles$3.benefitItem },
|
|
4354
|
+
React.createElement(Icon.Icon, { icon: benefit.icon, color: "brand", size: 24 }),
|
|
4355
|
+
benefit.benefit)); }))));
|
|
4356
|
+
};
|
|
4357
|
+
|
|
4358
|
+
var styles$2 = {"priceIncreaseWrapper":"ProductCardPriceIncrease-module_priceIncreaseWrapper__Psknf","priceIncreaseBorder":"ProductCardPriceIncrease-module_priceIncreaseBorder__NC2eA","priceIncreaseList":"ProductCardPriceIncrease-module_priceIncreaseList__qsmOQ","priceIncreaseItem":"ProductCardPriceIncrease-module_priceIncreaseItem__f-x-D"};
|
|
4359
|
+
|
|
4360
|
+
var ProductCardPriceIncrease = function (_a) {
|
|
4361
|
+
var _b = _a.heading, heading = _b === void 0 ? "Price increasing to" : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "4" : _c, _d = _a.items, items = _d === void 0 ? [] : _d;
|
|
4362
|
+
return (React.createElement(React.Fragment, null,
|
|
4363
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
4364
|
+
React.createElement(Heading.Heading, { size: "xs", level: headingLevel }, heading),
|
|
4365
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
|
|
4366
|
+
React.createElement("div", { className: styles$2.priceIncreaseWrapper },
|
|
4367
|
+
React.createElement("div", { className: styles$2.priceIncreaseBorder }),
|
|
4368
|
+
React.createElement("ul", { className: styles$2.priceIncreaseList }, items.map(function (item, index) { return (React.createElement("li", { key: index, className: styles$2.priceIncreaseItem }, item)); })))));
|
|
4369
|
+
};
|
|
4370
|
+
|
|
4371
|
+
var styles$1 = {"productCardPrice":"ProductCardPrice-module_productCardPrice__6k4kU"};
|
|
4372
|
+
|
|
4373
|
+
var ProductCardPrice = function (_a) {
|
|
4374
|
+
var prefix = _a.prefix, value = _a.value, suffix = _a.suffix;
|
|
4375
|
+
return (React.createElement("div", { className: styles$1.productCardPrice },
|
|
4376
|
+
prefix && (React.createElement(Text.Text, { tone: "muted", size: "s" }, prefix)),
|
|
4377
|
+
React.createElement(Heading.Heading, { color: "brand", size: "m" }, value),
|
|
4378
|
+
suffix && (React.createElement(Text.Text, { tone: "muted", size: "s" }, suffix))));
|
|
4379
|
+
};
|
|
4380
|
+
|
|
4381
|
+
var styles = {"cardGrid":"CardGrid-module_cardGrid__b6S6h","cardGridItem":"CardGrid-module_cardGridItem__xy0D3"};
|
|
4382
|
+
|
|
4383
|
+
var CardGrid = function (_a) {
|
|
4384
|
+
var cards = _a.cards, cardsRevealed = _a.cardsRevealed, fourthCardRef = _a.fourthCardRef, props = __rest(_a, ["cards", "cardsRevealed", "fourthCardRef"]);
|
|
4385
|
+
return (React.createElement(React.Fragment, null,
|
|
4386
|
+
React.createElement("ul", __assign({ className: styles.cardGrid }, filterAttrs(props)), (cardsRevealed ? cards : cards.slice(0, 3)).map(function (card, index) { return (React.createElement("li", { key: "card-".concat(index), className: styles.cardGridItem, ref: index === 3 ? fourthCardRef : undefined, tabIndex: -1 }, card)); })),
|
|
4387
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "24", sizeXL: "32" })));
|
|
4388
|
+
};
|
|
4389
|
+
|
|
4390
|
+
var ProductCardGrid = function (_a) {
|
|
4391
|
+
var _b, _c, _d, _e, _f;
|
|
4392
|
+
var id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, heading = _a.heading, content = _a.content, headingLevel = _a.headingLevel, tabs = _a.tabs, _g = _a.expanded, expanded = _g === void 0 ? true : _g, _h = _a.hideTabs, hideTabs = _h === void 0 ? false : _h, props = __rest(_a, ["id", "isHeadingWordWrap", "heading", "content", "headingLevel", "tabs", "expanded", "hideTabs"]);
|
|
4393
|
+
var _j = React.useState(expanded), cardsRevealed = _j[0], setCardsRevealed = _j[1];
|
|
4394
|
+
var _k = React.useState((_b = tabs === null || tabs === void 0 ? void 0 : tabs[0]) === null || _b === void 0 ? void 0 : _b.value), activeTab = _k[0], setActiveTab = _k[1];
|
|
4395
|
+
var fourthCardRef = React.useRef(null);
|
|
4396
|
+
var cardContext = React.useId();
|
|
4397
|
+
var activeCards = (_c = tabs === null || tabs === void 0 ? void 0 : tabs.find(function (tab) { return tab.value === activeTab; })) === null || _c === void 0 ? void 0 : _c.cards;
|
|
4398
|
+
var hasMoreCards = ((_d = activeCards === null || activeCards === void 0 ? void 0 : activeCards.length) !== null && _d !== void 0 ? _d : 0) > 3;
|
|
4399
|
+
var remainingCards = Math.max(((_e = activeCards === null || activeCards === void 0 ? void 0 : activeCards.length) !== null && _e !== void 0 ? _e : 0) - 3, 0);
|
|
4400
|
+
var showMore = function () {
|
|
4401
|
+
setCardsRevealed(true);
|
|
4402
|
+
setTimeout(function () {
|
|
4403
|
+
var _a;
|
|
4404
|
+
(_a = fourthCardRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
4405
|
+
}, 0);
|
|
4406
|
+
};
|
|
4407
|
+
var showLess = function () {
|
|
4408
|
+
setCardsRevealed(false);
|
|
4409
|
+
};
|
|
4410
|
+
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
4411
|
+
React.createElement(SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, content: content, headingLevel: headingLevel, isPadded: true }),
|
|
4412
|
+
tabs && !hideTabs && (React.createElement(Tabs.Tabs, { defaultValue: (_f = tabs[0]) === null || _f === void 0 ? void 0 : _f.value, onValueChange: function (value) {
|
|
4413
|
+
setActiveTab(value);
|
|
4414
|
+
} },
|
|
4415
|
+
React.createElement(Tabs.TabsList, { type: "standard" }, tabs.map(function (tab) { return (React.createElement(Tabs.TabsItem, { key: tab.value, label: tab.label, value: tab.value, icon: tab.icon, iconActive: tab.iconActive })); })),
|
|
4416
|
+
tabs.map(function (tab) { return (React.createElement(Tabs.TabsContent, { key: tab.value, value: tab.value },
|
|
4417
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "24", sizeL: "32" }),
|
|
4418
|
+
React.createElement(CardGrid, { cards: tab.cards, cardsRevealed: cardsRevealed, fourthCardRef: tab.value === activeTab ? fourthCardRef : { current: null } }))); }))),
|
|
4419
|
+
(tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 && hideTabs && (React.createElement(React.Fragment, null,
|
|
4420
|
+
React.createElement(CardGrid, { cards: tabs[0].cards, cardsRevealed: cardsRevealed, fourthCardRef: fourthCardRef }))),
|
|
4421
|
+
!expanded && hasMoreCards && (React.createElement(React.Fragment, null,
|
|
4422
|
+
React.createElement(Rule.Rule, null),
|
|
4423
|
+
React.createElement("span", { id: cardContext, style: { display: "none" } }, remainingCards === 1
|
|
4424
|
+
? "".concat(remainingCards, " card")
|
|
4425
|
+
: "".concat(remainingCards, " cards")),
|
|
4426
|
+
React.createElement(Align.Align, { horizontal: "center" },
|
|
4427
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
4428
|
+
!cardsRevealed && (React.createElement(ButtonV2.ButtonV2, { label: "Show more", buttonStyle: "secondary", onClick: showMore, "aria-describedby": cardContext })),
|
|
4429
|
+
cardsRevealed && (React.createElement(ButtonV2.ButtonV2, { label: "Show less", buttonStyle: "secondary", onClick: showLess, "aria-describedby": cardContext })))))));
|
|
4430
|
+
};
|
|
4431
|
+
|
|
4314
4432
|
exports.Accordion = Accordion;
|
|
4315
4433
|
exports.ActionTile = ActionTile;
|
|
4316
4434
|
exports.ArticleCarousel = ArticleCarousel;
|
|
@@ -4328,6 +4446,11 @@ exports.Highlights = Highlights;
|
|
|
4328
4446
|
exports.InlineLinkGroup = InlineLinkGroup;
|
|
4329
4447
|
exports.LinkTile = LinkTile;
|
|
4330
4448
|
exports.PartnerBrandLogos = PartnerBrandLogos;
|
|
4449
|
+
exports.ProductCard = ProductCard;
|
|
4450
|
+
exports.ProductCardBenefits = ProductCardBenefits;
|
|
4451
|
+
exports.ProductCardGrid = ProductCardGrid;
|
|
4452
|
+
exports.ProductCardPrice = ProductCardPrice;
|
|
4453
|
+
exports.ProductCardPriceIncrease = ProductCardPriceIncrease;
|
|
4331
4454
|
exports.ProductNavigation = ProductNavigation;
|
|
4332
4455
|
exports.PromoListing = PromoListing;
|
|
4333
4456
|
exports.PromoListingThumbnailSignpost = PromoListingThumbnailSignpost;
|