@arc-ui/community-components 3.13.0 → 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 +18 -16
- package/CHANGELOG.md +18 -0
- package/lib/ArticleCarousel/ArticleCarousel.cjs +1 -1
- package/lib/ArticleCarousel/ArticleCarousel.mjs +1 -1
- package/lib/ArticleSidebar/ArticleSidebar.cjs +15 -9
- package/lib/ArticleSidebar/ArticleSidebar.mjs +16 -10
- 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 +309 -180
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +75 -2
- package/lib/index.d.mts +75 -2
- package/lib/index.mjs +306 -182
- package/lib/index.mjs.map +1 -1
- package/lib/styles.css +1 -1
- package/package.json +14 -14
- package/src/components/ArticleSidebar/ArticleSidebar.tsx +24 -10
- 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,36 +3811,41 @@ 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.
|
|
3837
3837
|
*/
|
|
3838
3838
|
var ArticleSidebar = function (_a) {
|
|
3839
3839
|
var _b;
|
|
3840
|
-
var author = _a.author, aboutSection = _a.aboutSection, topics = _a.topics, share = _a.share, additionalContent = _a.additionalContent, linkSection = _a.linkSection, props = __rest(_a, ["author", "aboutSection", "topics", "share", "additionalContent", "linkSection"]);
|
|
3840
|
+
var author = _a.author, aboutSection = _a.aboutSection, topics = _a.topics, share = _a.share, additionalContent = _a.additionalContent, linkSection = _a.linkSection, providedUrl = _a.url, props = __rest(_a, ["author", "aboutSection", "topics", "share", "additionalContent", "linkSection", "url"]);
|
|
3841
3841
|
var id = React.useId();
|
|
3842
3842
|
var _c = React.useState(false), showToast = _c[0], setShowToast = _c[1];
|
|
3843
|
-
var
|
|
3843
|
+
var _d = React.useState(""), clientUrl = _d[0], setClientUrl = _d[1];
|
|
3844
|
+
React.useEffect(function () {
|
|
3845
|
+
if (!providedUrl)
|
|
3846
|
+
setClientUrl(window.location.href);
|
|
3847
|
+
}, [providedUrl]);
|
|
3848
|
+
var url = providedUrl !== null && providedUrl !== void 0 ? providedUrl : clientUrl;
|
|
3844
3849
|
var copyTextToClipBoard = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
3845
3850
|
return __generator(this, function (_a) {
|
|
3846
3851
|
switch (_a.label) {
|
|
@@ -3861,14 +3866,14 @@ var ArticleSidebar = function (_a) {
|
|
|
3861
3866
|
ariaLabel: share.clipboardAriaLabel || "Copy url to clipboard",
|
|
3862
3867
|
},
|
|
3863
3868
|
{
|
|
3864
|
-
href: "mailto:?subject=".concat(share.articleTitle, "&body=").concat(url),
|
|
3869
|
+
href: "mailto:?subject=".concat(encodeURIComponent(share.articleTitle), "&body=").concat(encodeURIComponent(url)),
|
|
3865
3870
|
icon: BtIconEmailUnread,
|
|
3866
3871
|
ariaLabel: share.emailAriaLabel || "Share by email",
|
|
3867
3872
|
}
|
|
3868
3873
|
], (share.linkedin
|
|
3869
3874
|
? [
|
|
3870
3875
|
{
|
|
3871
|
-
href: "https://www.linkedin.com/sharing/share-offsite/?url=".concat(url),
|
|
3876
|
+
href: "https://www.linkedin.com/sharing/share-offsite/?url=".concat(encodeURIComponent(url)),
|
|
3872
3877
|
icon: ArcIconSocialLinkedin,
|
|
3873
3878
|
ariaLabel: share.linkedInAriaLabel || "Share on LinkedIn",
|
|
3874
3879
|
},
|
|
@@ -3876,17 +3881,18 @@ var ArticleSidebar = function (_a) {
|
|
|
3876
3881
|
: []), true), (share.x
|
|
3877
3882
|
? [
|
|
3878
3883
|
{
|
|
3879
|
-
href: "https://twitter.com/intent/tweet?url=".concat(url),
|
|
3884
|
+
href: "https://twitter.com/intent/tweet?url=".concat(encodeURIComponent(url)),
|
|
3880
3885
|
icon: ArcIconSocialX,
|
|
3881
3886
|
ariaLabel: share.xAriaLabel || "Share on x",
|
|
3882
3887
|
},
|
|
3883
3888
|
]
|
|
3884
3889
|
: []), true) : [];
|
|
3885
3890
|
var hasTopContent = Boolean(author || aboutSection || additionalContent);
|
|
3886
|
-
var
|
|
3891
|
+
var showShare = share && url;
|
|
3892
|
+
var hasBottomContent = Boolean(linkSection || topics || showShare);
|
|
3887
3893
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3888
3894
|
React.createElement("div", { className: classNames((_b = {},
|
|
3889
|
-
_b[styles$
|
|
3895
|
+
_b[styles$j.textContent] = hasTopContent,
|
|
3890
3896
|
_b)) },
|
|
3891
3897
|
author && (React.createElement(React.Fragment, null,
|
|
3892
3898
|
React.createElement(Author, __assign({}, author, { avatar: __assign(__assign({}, author.avatar), { size: "xl" }) })))),
|
|
@@ -3897,7 +3903,7 @@ var ArticleSidebar = function (_a) {
|
|
|
3897
3903
|
React.createElement(Text.Text, { size: "s" }, aboutSection.content))),
|
|
3898
3904
|
additionalContent && (React.createElement(React.Fragment, null,
|
|
3899
3905
|
(author || aboutSection) && React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
3900
|
-
React.createElement("div", { className: styles$
|
|
3906
|
+
React.createElement("div", { className: styles$j.additionalContentContainer }, additionalContent.map(function (_a) {
|
|
3901
3907
|
var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content;
|
|
3902
3908
|
return (React.createElement("div", { key: "".concat(id, "-").concat(heading) },
|
|
3903
3909
|
React.createElement(Heading.Heading, { level: headingLevel, size: "xxs" }, heading),
|
|
@@ -3911,33 +3917,33 @@ var ArticleSidebar = function (_a) {
|
|
|
3911
3917
|
React.createElement(Heading.Heading, { level: linkSection.headingLevel }, linkSection.heading),
|
|
3912
3918
|
linkSection.links.map(function (_a) {
|
|
3913
3919
|
var text = _a.text, url = _a.url, ariaLabel = _a.ariaLabel;
|
|
3914
|
-
return (React.createElement(React.Fragment,
|
|
3920
|
+
return (React.createElement(React.Fragment, { key: "".concat(id, "-").concat(url) },
|
|
3915
3921
|
React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
|
|
3916
|
-
React.createElement("div",
|
|
3922
|
+
React.createElement("div", null,
|
|
3917
3923
|
React.createElement(Link.Link, { "aria-label": ariaLabel, size: "s", href: url }, text))));
|
|
3918
3924
|
}))),
|
|
3919
3925
|
topics && (React.createElement(React.Fragment, null,
|
|
3920
3926
|
linkSection && React.createElement(VerticalSpace.VerticalSpace, { size: "32" }),
|
|
3921
3927
|
React.createElement(Heading.Heading, { level: topics.headingLevel }, topics.heading),
|
|
3922
3928
|
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
3923
|
-
React.createElement("div", { className: styles$
|
|
3924
|
-
|
|
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
|
+
showShare && (React.createElement(React.Fragment, null,
|
|
3925
3931
|
(linkSection || topics) && (React.createElement("div", { "data-testid": "links-topics-content-rule" },
|
|
3926
3932
|
React.createElement(VerticalSpace.VerticalSpace, { size: "32" }),
|
|
3927
3933
|
React.createElement(Rule.Rule, null),
|
|
3928
3934
|
React.createElement(VerticalSpace.VerticalSpace, { size: "32" }))),
|
|
3929
3935
|
React.createElement(Heading.Heading, { level: share.headingLevel }, share.heading),
|
|
3930
3936
|
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
3931
|
-
React.createElement("div", { className: styles$
|
|
3937
|
+
React.createElement("div", { className: styles$j.shareButtonContainer }, shareButtons.map(function (_a) {
|
|
3932
3938
|
var isButton = _a.isButton, ariaLabel = _a.ariaLabel, href = _a.href, icon = _a.icon, onClick = _a.onClick;
|
|
3933
|
-
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 },
|
|
3934
3940
|
React.createElement(Icon.Icon, { icon: icon, size: 24 })));
|
|
3935
3941
|
})))),
|
|
3936
3942
|
React.createElement(Toast.Toast, null,
|
|
3937
3943
|
React.createElement(Toast.ToastNotification, { status: "success", title: "Copied to clipboard", isOpen: showToast, onOpenChange: function () { return setShowToast(false); } }))));
|
|
3938
3944
|
};
|
|
3939
3945
|
|
|
3940
|
-
var styles$
|
|
3946
|
+
var styles$i = {"product-navigation-grid":"ProductNavigation-module_product-navigation-grid__RzFq8","productNavigation-skipLink":"ProductNavigation-module_productNavigation-skipLink__fy8ZJ"};
|
|
3941
3947
|
|
|
3942
3948
|
/**
|
|
3943
3949
|
* Use `ProductNavigation` to give a collection of product information cards collected within a grid that has optional show/hide capability
|
|
@@ -3983,7 +3989,7 @@ var ProductNavigation = function (_a) {
|
|
|
3983
3989
|
var isMinWidthArcBreakpointS = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
|
|
3984
3990
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3985
3991
|
React.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "ProductNavigation-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content, image: image }),
|
|
3986
|
-
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) {
|
|
3987
3993
|
var _a;
|
|
3988
3994
|
return (React.createElement("li", { key: "displayList-".concat(i), tabIndex: -1, ref: i === skipLinkCard ? cardRef : undefined, "data-cy": "list-item-".concat(i) },
|
|
3989
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" }))));
|
|
@@ -3995,7 +4001,7 @@ var ProductNavigation = function (_a) {
|
|
|
3995
4001
|
!hideLessButton && (React.createElement(ButtonV2.ButtonV2, { label: displayList.length < productList.length
|
|
3996
4002
|
? "Show more"
|
|
3997
4003
|
: "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
|
|
3998
|
-
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 },
|
|
3999
4005
|
React.createElement(ButtonV2.ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true }))),
|
|
4000
4006
|
React.createElement(VisuallyHidden.VisuallyHidden, null,
|
|
4001
4007
|
React.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
|
|
@@ -4007,18 +4013,18 @@ var ProductNavigation = function (_a) {
|
|
|
4007
4013
|
"."))))))));
|
|
4008
4014
|
};
|
|
4009
4015
|
|
|
4010
|
-
var styles$
|
|
4016
|
+
var styles$h = {"container":"ContentInfoWidget-module_container__yaS-8","text":"ContentInfoWidget-module_text__O1BdZ","icon":"ContentInfoWidget-module_icon__LEww1"};
|
|
4011
4017
|
|
|
4012
4018
|
var ContentInfoWidget = function (_a) {
|
|
4013
4019
|
var text = _a.text, icon = _a.icon, props = __rest(_a, ["text", "icon"]);
|
|
4014
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4015
|
-
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 },
|
|
4016
4022
|
React.createElement(Icon.Icon, { size: 20, icon: icon })),
|
|
4017
|
-
React.createElement("div", { className: styles$
|
|
4023
|
+
React.createElement("div", { className: styles$h.text },
|
|
4018
4024
|
React.createElement(Text.Text, { size: "xs", tone: "muted" }, text))));
|
|
4019
4025
|
};
|
|
4020
4026
|
|
|
4021
|
-
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"};
|
|
4022
4028
|
|
|
4023
4029
|
var ActionTile = function (_a) {
|
|
4024
4030
|
var _b, _c;
|
|
@@ -4026,51 +4032,51 @@ var ActionTile = function (_a) {
|
|
|
4026
4032
|
var displayIcon = isActive && activeIcon ? activeIcon : icon;
|
|
4027
4033
|
var iconSize = isCompact ? 40 : 48;
|
|
4028
4034
|
var content = (React.createElement(React.Fragment, null,
|
|
4029
|
-
React.createElement("div", { className: classNames(styles$
|
|
4030
|
-
_b[styles$
|
|
4035
|
+
React.createElement("div", { className: classNames(styles$g["action-tile-content"], (_b = {},
|
|
4036
|
+
_b[styles$g["action-tile-content--without-icon"]] = !displayIcon,
|
|
4031
4037
|
_b)) },
|
|
4032
|
-
displayIcon && (React.createElement("div", { className: styles$
|
|
4038
|
+
displayIcon && (React.createElement("div", { className: styles$g["action-tile-icon"] },
|
|
4033
4039
|
React.createElement(Icon.Icon, { icon: displayIcon, size: iconSize }))),
|
|
4034
|
-
React.createElement("span", { className: styles$
|
|
4035
|
-
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"] },
|
|
4036
4042
|
React.createElement(Icon.Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
|
|
4037
|
-
return (React.createElement("button", __assign({ type: "button", className: classNames(styles$
|
|
4038
|
-
_c[styles$
|
|
4039
|
-
_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,
|
|
4040
4046
|
_c)), onClick: onClick, "aria-pressed": isActive }, filterAttrs(props)), content));
|
|
4041
4047
|
};
|
|
4042
4048
|
|
|
4043
|
-
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"};
|
|
4044
4050
|
|
|
4045
4051
|
var LinkTile = function (_a) {
|
|
4046
4052
|
var _b;
|
|
4047
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"]);
|
|
4048
4054
|
var Component = href ? "a" : "div";
|
|
4049
4055
|
var linkProps = href ? { href: href } : {};
|
|
4050
|
-
return (React.createElement(Component, __assign({ className: classNames(styles$
|
|
4051
|
-
_b[styles$
|
|
4052
|
-
_b), className) }, linkProps, props), text && (React.createElement("div", { className: styles$
|
|
4053
|
-
React.createElement("span", { className: styles$
|
|
4054
|
-
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"] },
|
|
4055
4061
|
React.createElement(Icon.Icon, { icon: BtIconArrowAltRight, size: 32 })))))));
|
|
4056
4062
|
};
|
|
4057
4063
|
|
|
4058
|
-
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"};
|
|
4059
4065
|
|
|
4060
4066
|
var InlineLinkGroup = function (_a) {
|
|
4061
|
-
var label = _a.label, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, links = _a.links, props = __rest(_a, ["label", "headingLevel", "links"]);
|
|
4062
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4063
|
-
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"] },
|
|
4064
4070
|
React.createElement(Heading.Heading, { level: headingLevel, size: "xxs", fontStyle: "overline" }, label))),
|
|
4065
|
-
React.createElement("ul", { className: styles$
|
|
4066
|
-
React.createElement("li", { className: styles$
|
|
4067
|
-
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),
|
|
4068
4074
|
React.createElement(Icon.Icon, { icon: BtIconArrowAltRight, size: 24, color: "brand" })),
|
|
4069
|
-
index < links.length - 1 && (React.createElement("li", { className: styles$
|
|
4070
|
-
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"] }))))); }))));
|
|
4071
4077
|
};
|
|
4072
4078
|
|
|
4073
|
-
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"};
|
|
4074
4080
|
|
|
4075
4081
|
/** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
|
|
4076
4082
|
var ThumbnailSignpost = function (_a) {
|
|
@@ -4078,20 +4084,20 @@ var ThumbnailSignpost = function (_a) {
|
|
|
4078
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"]);
|
|
4079
4085
|
var surface = React.useContext(Surface.SurfaceContext).surface;
|
|
4080
4086
|
var isDarkSurface = surface === "dark";
|
|
4081
|
-
return (React.createElement("div", __assign({ className: classNames(styles$
|
|
4082
|
-
_b[styles$
|
|
4083
|
-
_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,
|
|
4084
4090
|
_b)), onClick: onClick, "aria-label": title, tabIndex: onClick ? 0 : -1 }, (onClick && { role: "button" }), filterAttrs(props)),
|
|
4085
|
-
img && (React.createElement("div", { className: styles$
|
|
4091
|
+
img && (React.createElement("div", { className: styles$d.image },
|
|
4086
4092
|
React.createElement(Image$2.Image, __assign({}, img)))),
|
|
4087
|
-
React.createElement("div", { className: styles$
|
|
4088
|
-
React.createElement("span", { className: styles$
|
|
4093
|
+
React.createElement("div", { className: styles$d.content },
|
|
4094
|
+
React.createElement("span", { className: styles$d.heading }, title),
|
|
4089
4095
|
React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
|
|
4090
4096
|
text,
|
|
4091
4097
|
buttonLabel && onClick && (React.createElement(React.Fragment, null,
|
|
4092
4098
|
React.createElement(VerticalSpace.VerticalSpace, { size: "32" }),
|
|
4093
|
-
React.createElement("div", { className: styles$
|
|
4094
|
-
React.createElement("span", { className: styles$
|
|
4099
|
+
React.createElement("div", { className: styles$d.thumbnailButton },
|
|
4100
|
+
React.createElement("span", { className: styles$d.buttonIcon, role: "img", style: {
|
|
4095
4101
|
height: 24,
|
|
4096
4102
|
width: 24,
|
|
4097
4103
|
maskImage: "url(\"".concat(BtIconArrowRightFill, "\")"),
|
|
@@ -4100,54 +4106,62 @@ var ThumbnailSignpost = function (_a) {
|
|
|
4100
4106
|
React.createElement(Heading.Heading, { size: "xxs" }, buttonLabel)))))));
|
|
4101
4107
|
};
|
|
4102
4108
|
|
|
4103
|
-
var styles$
|
|
4109
|
+
var styles$c = {"PromoListingThumbnailSignpost":"PromoListingThumbnailSignpost-module_PromoListingThumbnailSignpost__0HTPV","list":"PromoListingThumbnailSignpost-module_list__E9l0E"};
|
|
4104
4110
|
|
|
4105
4111
|
/**
|
|
4106
4112
|
* Use `PromoListingThumbnailSignpost` to give supporting information about a page or proposition in the form of the ThumbnailSignposts components.
|
|
4107
4113
|
*/
|
|
4108
4114
|
var PromoListingThumbnailSignpost = function (_a) {
|
|
4109
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"]);
|
|
4110
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4116
|
+
return (React.createElement("div", __assign({ className: styles$c.PromoListingThumbnailSignpost }, filterAttrs(props)),
|
|
4111
4117
|
React.createElement(SectionHeading, { isPadded: isPadded, "data-testid": "PromoListingThumbnailSignpost-header", heading: heading, headingLevel: headingLevel, content: content, isHeadingWordWrap: isHeadingWordWrap }),
|
|
4112
|
-
React.createElement("ul", { className: styles$
|
|
4118
|
+
React.createElement("ul", { className: styles$c.list }, thumbnailList.map(function (thumbnail, index) { return (React.createElement("li", { key: index },
|
|
4113
4119
|
React.createElement(ThumbnailSignpost, __assign({}, thumbnail)))); }))));
|
|
4114
4120
|
};
|
|
4115
4121
|
|
|
4116
|
-
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"};
|
|
4117
4123
|
|
|
4118
4124
|
var VideoCardPlayIcon = function (_a) {
|
|
4119
4125
|
var _b = _a.size, size = _b === void 0 ? "l" : _b;
|
|
4120
|
-
return (React.createElement("div", { className: classNames(styles$
|
|
4121
|
-
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 },
|
|
4122
4128
|
React.createElement(Icon.Icon, { icon: ArcIconPlay }))));
|
|
4123
4129
|
};
|
|
4124
4130
|
|
|
4125
|
-
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"};
|
|
4126
4132
|
|
|
4127
4133
|
var VideoCardPlayer = function (_a) {
|
|
4128
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"]);
|
|
4129
4135
|
var _b = React.useState(false), isClient = _b[0], setIsClient = _b[1];
|
|
4136
|
+
var playerWrapperRef = React.useRef(null);
|
|
4130
4137
|
React.useEffect(function () {
|
|
4131
4138
|
setIsClient(true);
|
|
4132
4139
|
}, []);
|
|
4133
|
-
var
|
|
4134
|
-
|
|
4135
|
-
|
|
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))),
|
|
4136
4150
|
children));
|
|
4137
4151
|
};
|
|
4138
4152
|
|
|
4139
|
-
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"};
|
|
4140
4154
|
|
|
4141
4155
|
var VideoCardThumbnail = function (_a) {
|
|
4142
4156
|
var orientation = _a.orientation, contentVisibility = _a.contentVisibility, src = _a.src, children = _a.children;
|
|
4143
|
-
var content = React.createElement("div", { className: styles$
|
|
4144
|
-
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)));
|
|
4145
4159
|
};
|
|
4146
4160
|
|
|
4147
|
-
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"};
|
|
4148
4162
|
|
|
4149
4163
|
var VideoHeroCardContent = function (_a) {
|
|
4150
|
-
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;
|
|
4151
4165
|
var id = React.useId();
|
|
4152
4166
|
var metaItems = [
|
|
4153
4167
|
{ icon: BtIconCalendar, text: videoDate },
|
|
@@ -4158,17 +4172,17 @@ var VideoHeroCardContent = function (_a) {
|
|
|
4158
4172
|
},
|
|
4159
4173
|
];
|
|
4160
4174
|
var hasMeta = metaItems.some(function (meta) { return Boolean(meta.text); });
|
|
4161
|
-
return (React.createElement("div", { className: styles$
|
|
4162
|
-
React.createElement("div", { className: classNames(styles$
|
|
4163
|
-
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),
|
|
4164
4178
|
React.createElement(VerticalSpace.VerticalSpace, { size: "8", sizeM: "4" }),
|
|
4165
|
-
React.createElement(Heading.Heading, { level:
|
|
4179
|
+
React.createElement(Heading.Heading, { level: titleLevel, isWordWrap: false, size: "xl" }, title),
|
|
4166
4180
|
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
4167
4181
|
React.createElement(Text.Text, null, description)),
|
|
4168
4182
|
hasMeta && (React.createElement(React.Fragment, null,
|
|
4169
4183
|
React.createElement(VerticalSpace.VerticalSpace, { size: "32", sizeS: "16" }),
|
|
4170
|
-
React.createElement("div", { className: classNames(styles$
|
|
4171
|
-
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 },
|
|
4172
4186
|
React.createElement(Icon.Icon, { icon: meta.icon, size: 20 }),
|
|
4173
4187
|
React.createElement(Text.Text, { size: "xs" }, meta.text)));
|
|
4174
4188
|
}))))));
|
|
@@ -4186,12 +4200,12 @@ var VideoPortraitCard = function (_a) {
|
|
|
4186
4200
|
var thumbnail = _a.thumbnail, player = _a.player, props = __rest(_a, ["thumbnail", "player"]);
|
|
4187
4201
|
return (React.createElement(VideoCardPlayer, __assign({ thumbnail: thumbnail && (React.createElement(VideoCardThumbnail, { orientation: "portrait", src: thumbnail.img },
|
|
4188
4202
|
React.createElement(Surface.Surface, { isTransparent: true, background: "dark-black" },
|
|
4189
|
-
React.createElement(Heading.Heading, { fontStyle: "overline" }, thumbnail.label),
|
|
4203
|
+
React.createElement(Heading.Heading, { fontStyle: "overline", level: thumbnail.labelLevel }, thumbnail.label),
|
|
4190
4204
|
React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
|
|
4191
|
-
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)));
|
|
4192
4206
|
};
|
|
4193
4207
|
|
|
4194
|
-
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"};
|
|
4195
4209
|
|
|
4196
4210
|
/**
|
|
4197
4211
|
* Renders either an InformationCard or a contained MediaCard based on the card type.
|
|
@@ -4215,11 +4229,11 @@ var renderBusinessSegmentSwitcherCarousel = function (_a) {
|
|
|
4215
4229
|
xs: { itemsPerSlide: 1 },
|
|
4216
4230
|
s: { itemsPerSlide: 2 },
|
|
4217
4231
|
} },
|
|
4218
|
-
React.createElement("div", { className: styles$
|
|
4219
|
-
React.createElement("div", { className: styles$
|
|
4220
|
-
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 },
|
|
4221
4235
|
React.createElement(InformationCard.InformationCard, __assign({}, content.card3)))),
|
|
4222
|
-
React.createElement("div", { className: styles$
|
|
4236
|
+
React.createElement("div", { className: styles$7.cardWrapper },
|
|
4223
4237
|
React.createElement(TypographyCard.TypographyCard, { heading: "All ".concat(label, " solutions"), label: content.card4.label, url: content.card4.url }))));
|
|
4224
4238
|
};
|
|
4225
4239
|
|
|
@@ -4232,8 +4246,8 @@ var BusinessSegmentSwitcher = function (_a) {
|
|
|
4232
4246
|
var tabs = _a.tabs, defaultValue = _a.defaultValue, props = __rest(_a, ["tabs", "defaultValue"]);
|
|
4233
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 : "";
|
|
4234
4248
|
var _d = React.useState(initialTab), selectedTab = _d[0], setSelectedTab = _d[1];
|
|
4235
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4236
|
-
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 },
|
|
4237
4251
|
React.createElement(ContentSwitcher.ContentSwitcher, { value: selectedTab, onValueChange: function (value) { return setSelectedTab(value); } },
|
|
4238
4252
|
React.createElement(ContentSwitcher.ContentSwitcherList, { isInset: true }, tabs.map(function (_a, index) {
|
|
4239
4253
|
var label = _a.label, value = _a.value;
|
|
@@ -4242,42 +4256,42 @@ var BusinessSegmentSwitcher = function (_a) {
|
|
|
4242
4256
|
tabs.map(function (_a, index) {
|
|
4243
4257
|
var value = _a.value, content = _a.content, label = _a.label;
|
|
4244
4258
|
return (React.createElement(ContentSwitcher.ContentSwitcherContent, { value: value, key: "".concat(index, "-").concat(value), hidden: value !== selectedTab },
|
|
4245
|
-
React.createElement("div", { className: styles$
|
|
4246
|
-
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 })),
|
|
4247
4261
|
renderCard(content.card1),
|
|
4248
4262
|
renderCard(content.card2),
|
|
4249
|
-
React.createElement("div", { className: styles$
|
|
4263
|
+
React.createElement("div", { className: styles$7.cardCol },
|
|
4250
4264
|
content.card3 && React.createElement(InformationCard.InformationCard, __assign({}, content.card3)),
|
|
4251
4265
|
React.createElement("div", null,
|
|
4252
4266
|
React.createElement(TypographyCard.TypographyCard, { heading: content.card4.heading ||
|
|
4253
4267
|
"All ".concat(label.toLowerCase(), " solutions"), text: content.card4.text, label: content.card4.label, url: content.card4.url, onClick: content.card4.onClick }))))));
|
|
4254
4268
|
}))),
|
|
4255
|
-
React.createElement("div", { className: styles$
|
|
4269
|
+
React.createElement("div", { className: styles$7.businessSegmentSwitcherMobile },
|
|
4256
4270
|
React.createElement(ContentSwitcherDropdown.ContentSwitcherDropdown, { isInset: true, value: selectedTab, tabs: tabs, isFluid: true, onValueChange: function (value) { return setSelectedTab(value); } }, tabs.map(function (_a, index) {
|
|
4257
4271
|
var value = _a.value, content = _a.content, label = _a.label;
|
|
4258
4272
|
return (React.createElement(ContentSwitcherDropdown.ContentSwitcherDropdownContent, { value: value, key: "".concat(index, "-").concat(value) },
|
|
4259
|
-
React.createElement("div", { className: styles$
|
|
4273
|
+
React.createElement("div", { className: styles$7.contentWrapper }, renderBusinessSegmentSwitcherCarousel({ content: content, label: label }))));
|
|
4260
4274
|
})))));
|
|
4261
4275
|
};
|
|
4262
4276
|
|
|
4263
|
-
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"};
|
|
4264
4278
|
|
|
4265
4279
|
var PartnerLogoSubgroup = function (_a) {
|
|
4266
4280
|
var subheading = _a.subheading, text = _a.text, headingLevel = _a.headingLevel, logos = _a.logos, _b = _a.tileHeight, tileHeight = _b === void 0 ? 72 : _b;
|
|
4267
4281
|
var hasHeader = subheading || text;
|
|
4268
4282
|
var id = React.useId();
|
|
4269
4283
|
return (React.createElement(React.Fragment, null,
|
|
4270
|
-
hasHeader && (React.createElement("div", { className: styles$
|
|
4284
|
+
hasHeader && (React.createElement("div", { className: styles$6.subgroupHeader },
|
|
4271
4285
|
React.createElement(Columns.Columns, { isGutterless: true },
|
|
4272
4286
|
React.createElement(Columns.ColumnsCol, { spanL: 9, spanXL: 8 },
|
|
4273
4287
|
subheading && (React.createElement(Heading.Heading, { level: headingLevel, size: "s", isResponsive: false }, subheading)),
|
|
4274
4288
|
subheading && text && React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
|
|
4275
4289
|
text && (React.createElement(Text.Text, { size: "m", tone: "supporting" }, text)))))),
|
|
4276
|
-
React.createElement("div", { className: styles$
|
|
4277
|
-
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 }))); }))));
|
|
4278
4292
|
};
|
|
4279
4293
|
|
|
4280
|
-
var styles = {"subgroupList":"PartnerBrandLogos-module_subgroupList__4e1kv"};
|
|
4294
|
+
var styles$5 = {"subgroupList":"PartnerBrandLogos-module_subgroupList__4e1kv"};
|
|
4281
4295
|
|
|
4282
4296
|
var getSubheadingLevel = function (parentLevel, subLevel) {
|
|
4283
4297
|
return subLevel !== null && subLevel !== void 0 ? subLevel : String(Math.min(Number(parentLevel) + 1, 6));
|
|
@@ -4301,10 +4315,120 @@ var PartnerBrandLogos = function (_a) {
|
|
|
4301
4315
|
React.createElement(VerticalSpace.VerticalSpace, __assign({}, rulerTopPadding)),
|
|
4302
4316
|
React.createElement(Rule.Rule, null),
|
|
4303
4317
|
React.createElement(VerticalSpace.VerticalSpace, __assign({}, rulerBottomPadding)),
|
|
4304
|
-
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) },
|
|
4305
4319
|
React.createElement(PartnerLogoSubgroup, { subheading: subgroup.subheading, text: subgroup.text, headingLevel: getSubheadingLevel(headingLevel, subgroup.subheadingLevel), logos: subgroup.logos, tileHeight: subgroup.tileHeight }))); }))));
|
|
4306
4320
|
};
|
|
4307
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
|
+
|
|
4308
4432
|
exports.Accordion = Accordion;
|
|
4309
4433
|
exports.ActionTile = ActionTile;
|
|
4310
4434
|
exports.ArticleCarousel = ArticleCarousel;
|
|
@@ -4322,6 +4446,11 @@ exports.Highlights = Highlights;
|
|
|
4322
4446
|
exports.InlineLinkGroup = InlineLinkGroup;
|
|
4323
4447
|
exports.LinkTile = LinkTile;
|
|
4324
4448
|
exports.PartnerBrandLogos = PartnerBrandLogos;
|
|
4449
|
+
exports.ProductCard = ProductCard;
|
|
4450
|
+
exports.ProductCardBenefits = ProductCardBenefits;
|
|
4451
|
+
exports.ProductCardGrid = ProductCardGrid;
|
|
4452
|
+
exports.ProductCardPrice = ProductCardPrice;
|
|
4453
|
+
exports.ProductCardPriceIncrease = ProductCardPriceIncrease;
|
|
4325
4454
|
exports.ProductNavigation = ProductNavigation;
|
|
4326
4455
|
exports.PromoListing = PromoListing;
|
|
4327
4456
|
exports.PromoListingThumbnailSignpost = PromoListingThumbnailSignpost;
|