@arc-ui/community-components 3.13.1 → 3.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +17 -15
- package/CHANGELOG.md +11 -0
- package/lib/ArticleCarousel/ArticleCarousel.cjs +1 -1
- package/lib/ArticleCarousel/ArticleCarousel.mjs +1 -1
- package/lib/CopyLead/CopyLead.cjs +1 -1
- package/lib/CopyLead/CopyLead.mjs +1 -1
- package/lib/FeaturePost/FeaturePost.cjs +1 -1
- package/lib/FeaturePost/FeaturePost.mjs +1 -1
- package/lib/InlineLinkGroup/InlineLinkGroup.cjs +2 -2
- package/lib/InlineLinkGroup/InlineLinkGroup.mjs +2 -2
- package/lib/ProductCard/ProductCard.cjs +77 -0
- package/lib/ProductCard/ProductCard.mjs +72 -0
- package/lib/ProductCard/styles.css +1 -0
- package/lib/ProductCardGrid/ProductCardGrid.cjs +69 -0
- package/lib/ProductCardGrid/ProductCardGrid.mjs +67 -0
- package/lib/ProductNavigation/ProductNavigation.cjs +1 -1
- package/lib/ProductNavigation/ProductNavigation.mjs +1 -1
- package/lib/PromoListing/PromoListing.cjs +1 -1
- package/lib/PromoListing/PromoListing.mjs +1 -1
- package/lib/Summary/Summary.cjs +1 -1
- package/lib/Summary/Summary.mjs +1 -1
- package/lib/VideoHeroCard/VideoHeroCard.cjs +4 -4
- package/lib/VideoHeroCard/VideoHeroCard.mjs +4 -4
- package/lib/VideoPortraitCard/VideoPortraitCard.cjs +3 -3
- package/lib/VideoPortraitCard/VideoPortraitCard.mjs +3 -3
- package/lib/_shared/cjs/{VideoCardThumbnail-BM3GwyWR.cjs → VideoCardThumbnail-DhdbNf5c.cjs} +10 -2
- package/lib/_shared/cjs/{index.es-DcJ01c8P.cjs → index.es-5qmN4ppJ.cjs} +1 -1
- package/lib/_shared/esm/{VideoCardThumbnail-K6eHIeAM.mjs → VideoCardThumbnail-B8JS-s6O.mjs} +10 -2
- package/lib/_shared/esm/{index.es-C76rXaZz.mjs → index.es-Cis5MKaa.mjs} +1 -1
- package/lib/index.cjs +294 -171
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +70 -2
- package/lib/index.d.mts +70 -2
- package/lib/index.mjs +291 -173
- package/lib/index.mjs.map +1 -1
- package/lib/styles.css +1 -1
- package/package.json +13 -13
- package/src/components/InlineLinkGroup/InlineLinkGroup.tsx +4 -0
- package/src/components/ProductCard/ProductCard.module.css +49 -0
- package/src/components/ProductCard/ProductCard.tsx +113 -0
- package/src/components/ProductCard/ProductCardBenefits/ProductCardBenefits.module.css +14 -0
- package/src/components/ProductCard/ProductCardBenefits/ProductCardBenefits.tsx +42 -0
- package/src/components/ProductCard/ProductCardBenefits/index.ts +4 -0
- package/src/components/ProductCard/ProductCardPrice/ProductCardPrice.module.css +5 -0
- package/src/components/ProductCard/ProductCardPrice/ProductCardPrice.tsx +37 -0
- package/src/components/ProductCard/ProductCardPrice/index.ts +4 -0
- package/src/components/ProductCard/ProductCardPriceIncrease/ProductCardPriceIncrease.module.css +25 -0
- package/src/components/ProductCard/ProductCardPriceIncrease/ProductCardPriceIncrease.tsx +39 -0
- package/src/components/ProductCard/ProductCardPriceIncrease/index.ts +4 -0
- package/src/components/ProductCard/index.ts +13 -0
- package/src/components/ProductCardGrid/ProductCardGrid.tsx +162 -0
- package/src/components/ProductCardGrid/components/CardGrid/CardGrid.module.css +34 -0
- package/src/components/ProductCardGrid/components/CardGrid/CardGrid.tsx +44 -0
- package/src/components/ProductCardGrid/components/CardGrid/index.ts +1 -0
- package/src/components/ProductCardGrid/index.ts +5 -0
- package/src/components/VideoHeroCard/components/VideoHeroCardContent/VideoHeroCardContent.tsx +9 -3
- package/src/components/VideoPortraitCard/VideoPortraitCard.tsx +11 -3
- package/src/components/index.ts +2 -0
- package/src/internal/VideoCardPlayer/VideoCardPlayer.module.css +5 -2
- package/src/internal/VideoCardPlayer/VideoCardPlayer.tsx +16 -1
- package/versions.json +1 -1
package/lib/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useEffect, useId, Suspense, useRef, useContext } from 'react';
|
|
1
|
+
import React, { useState, useEffect, useId, Suspense, useRef, useContext, useCallback } from 'react';
|
|
2
2
|
import { NavigationHeaderAction } from '@arc-ui/components/NavigationHeader';
|
|
3
3
|
import { Popover } from '@arc-ui/components/Popover';
|
|
4
4
|
import { Icon } from '@arc-ui/components/Icon';
|
|
@@ -255,7 +255,7 @@ var filterAttrs = function (props) {
|
|
|
255
255
|
const BtIconCrossAlt =
|
|
256
256
|
"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";
|
|
257
257
|
|
|
258
|
-
var styles$
|
|
258
|
+
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"};
|
|
259
259
|
|
|
260
260
|
var HeaderBarNotification = function (_a) {
|
|
261
261
|
var _b;
|
|
@@ -274,33 +274,33 @@ var HeaderBarNotification = function (_a) {
|
|
|
274
274
|
localStorage.setItem(localStorageId, "true");
|
|
275
275
|
setShowNotification(false);
|
|
276
276
|
};
|
|
277
|
-
return (React.createElement(Popover, __assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, asChild: true, onOpenAutoFocus: function (e) { return e.preventDefault(); }, className: classNames(styles$
|
|
278
|
-
React.createElement("div", { className: styles$
|
|
279
|
-
(image || icon) && (React.createElement("div", { className: styles$
|
|
277
|
+
return (React.createElement(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 },
|
|
278
|
+
React.createElement("div", { className: styles$A.content },
|
|
279
|
+
(image || icon) && (React.createElement("div", { className: styles$A.image },
|
|
280
280
|
image && (React.createElement(Image$2, { src: image, alt: heading, fit: "cover", width: 55 })),
|
|
281
281
|
icon && React.createElement(Icon, { icon: icon, size: 35 }))),
|
|
282
|
-
React.createElement("div", { className: styles$
|
|
282
|
+
React.createElement("div", { className: styles$A.details },
|
|
283
283
|
tagline && (React.createElement(Text, { size: "m", tone: "muted" }, tagline)),
|
|
284
284
|
React.createElement(Heading, { size: "s", level: "3" }, heading),
|
|
285
285
|
children)),
|
|
286
286
|
button && (React.createElement(ButtonV2, { onClick: button.handleClick, label: button.text, buttonStyle: "secondary", isFullWidth: true })),
|
|
287
|
-
React.createElement("div", { className: styles$
|
|
287
|
+
React.createElement("div", { className: styles$A.closeButtonContainer },
|
|
288
288
|
React.createElement(Tooltip, { side: "bottom", title: "Dismiss Notification", asChild: true },
|
|
289
289
|
React.createElement(ButtonV2, { "data-testid": localStorageId, buttonStyle: "tertiary", "aria-label": "Close ".concat(notificationId, " popup"), onClick: handleClosePopup, icon: BtIconCrossAlt })))) }, filterAttrs(props)),
|
|
290
290
|
React.createElement(NavigationHeaderAction, __assign({ isAttention: true }, headerActionProps))));
|
|
291
291
|
};
|
|
292
292
|
|
|
293
|
-
var styles$
|
|
293
|
+
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"};
|
|
294
294
|
|
|
295
295
|
var AccordionHeading = function (_a) {
|
|
296
296
|
var _b, _c;
|
|
297
297
|
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"]);
|
|
298
298
|
return (React.createElement("div", __assign({ className: classNames((_b = {},
|
|
299
|
-
_b[styles$
|
|
300
|
-
_b[styles$
|
|
301
|
-
_b[styles$
|
|
299
|
+
_b[styles$z["accordion-header"]] = true,
|
|
300
|
+
_b[styles$z["accordion-header--padded"]] = isPadded,
|
|
301
|
+
_b[styles$z["accordion-header--headingSizeM"]] = headingSize === "m",
|
|
302
302
|
_b)) }, filterAttrs(props)),
|
|
303
|
-
React.createElement("div", { className: classNames((_c = {}, _c[styles$
|
|
303
|
+
React.createElement("div", { className: classNames((_c = {}, _c[styles$z["accordion-header--hasImage"]] = image, _c)) },
|
|
304
304
|
image && (React.createElement("div", null,
|
|
305
305
|
React.createElement(Image$2, __assign({}, image, { width: 68, fit: "cover" })))),
|
|
306
306
|
React.createElement(Heading, { level: headingLevel, id: id, size: headingSize }, heading)),
|
|
@@ -309,25 +309,25 @@ var AccordionHeading = function (_a) {
|
|
|
309
309
|
React.createElement(Text, { size: "l", elementType: "p" }, content)))));
|
|
310
310
|
};
|
|
311
311
|
|
|
312
|
-
var styles$
|
|
312
|
+
var styles$y = {"AccordionDisclosureListItem":"AccordionDisclosureList-module_AccordionDisclosureListItem__p8LIT"};
|
|
313
313
|
|
|
314
314
|
var AccordionDisclosureList = function (_a) {
|
|
315
315
|
var disclosureList = _a.disclosureList;
|
|
316
316
|
return (React.createElement("ul", null, disclosureList.map(function (_a) {
|
|
317
317
|
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"]);
|
|
318
|
-
return (React.createElement("li", { key: id, className: styles$
|
|
318
|
+
return (React.createElement("li", { key: id, className: styles$y.AccordionDisclosureListItem, id: id },
|
|
319
319
|
React.createElement(Disclosure, __assign({ summary: summary, isOpen: isOpen, indentDetails: indentDetails, headingLevel: headingLevel }, filterAttrs(props)), children)));
|
|
320
320
|
})));
|
|
321
321
|
};
|
|
322
322
|
|
|
323
|
-
var styles$
|
|
323
|
+
var styles$x = {"Accordion":"Accordion-module_Accordion__LsXTU"};
|
|
324
324
|
|
|
325
325
|
/**
|
|
326
326
|
* Use the `Accordion` component to package together a title, content and a number of disclosure components into one section (maximum 10).
|
|
327
327
|
*/
|
|
328
328
|
var Accordion = function (_a) {
|
|
329
329
|
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"]);
|
|
330
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
330
|
+
return (React.createElement("div", __assign({ className: styles$x.Accordion }, filterAttrs(props)),
|
|
331
331
|
React.createElement(AccordionHeading, { isPadded: true, id: id, "data-testid": "Accordion-header", heading: heading, headingLevel: headingLevel, headingSize: headingSize, content: content }),
|
|
332
332
|
React.createElement(AccordionDisclosureList, { disclosureList: disclosureList })));
|
|
333
333
|
};
|
|
@@ -986,7 +986,7 @@ function requireDebounce () {
|
|
|
986
986
|
var debounceExports = requireDebounce();
|
|
987
987
|
var debounce = /*@__PURE__*/getDefaultExportFromCjs(debounceExports);
|
|
988
988
|
|
|
989
|
-
var styles$
|
|
989
|
+
var styles$w = {"sectionHeading--hasImage":"SectionHeading-module_sectionHeading--hasImage__qaz6n","sectionHeading--isCentered":"SectionHeading-module_sectionHeading--isCentered__i0fR8","sectionHeading-content":"SectionHeading-module_sectionHeading-content__ufB6w"};
|
|
990
990
|
|
|
991
991
|
var SectionHeading = function (_a) {
|
|
992
992
|
var _b, _c;
|
|
@@ -994,14 +994,14 @@ var SectionHeading = function (_a) {
|
|
|
994
994
|
return (React.createElement(Columns, null,
|
|
995
995
|
React.createElement(ColumnsCol, { spanM: isPadded ? 9 : 12 },
|
|
996
996
|
React.createElement("div", __assign({ className: classNames((_b = {},
|
|
997
|
-
_b[styles$
|
|
997
|
+
_b[styles$w["sectionHeading--isCentered"]] = isCentered,
|
|
998
998
|
_b)) }, filterAttrs(props)),
|
|
999
999
|
React.createElement("div", { className: classNames((_c = {},
|
|
1000
|
-
_c[styles$
|
|
1000
|
+
_c[styles$w["sectionHeading--hasImage"]] = image,
|
|
1001
1001
|
_c)) },
|
|
1002
1002
|
image && React.createElement(Image$2, __assign({}, image, { width: 68, fit: "cover" })),
|
|
1003
1003
|
React.createElement(Heading, { level: headingLevel, id: id, size: "xl", isWordWrap: isHeadingWordWrap }, heading)),
|
|
1004
|
-
content && (React.createElement("div", { className: styles$
|
|
1004
|
+
content && (React.createElement("div", { className: styles$w["sectionHeading-content"] },
|
|
1005
1005
|
React.createElement(VerticalSpace, { size: "24" }),
|
|
1006
1006
|
React.createElement(Text, { size: "l", elementType: "p" }, content))),
|
|
1007
1007
|
React.createElement(VerticalSpace, { size: "40" })))));
|
|
@@ -1009,7 +1009,7 @@ var SectionHeading = function (_a) {
|
|
|
1009
1009
|
|
|
1010
1010
|
/**
|
|
1011
1011
|
* Do not edit directly
|
|
1012
|
-
* Generated on Thu,
|
|
1012
|
+
* Generated on Thu, 20 Aug 2026 14:34:09 GMT
|
|
1013
1013
|
*/
|
|
1014
1014
|
var ArcSizeBreakpointsXs = "320px";
|
|
1015
1015
|
var ArcSizeBreakpointsS = "636px";
|
|
@@ -1036,7 +1036,7 @@ var ArcBreakpoints = {
|
|
|
1036
1036
|
xs: parseInt(ArcSizeBreakpointsXs, 10),
|
|
1037
1037
|
};
|
|
1038
1038
|
|
|
1039
|
-
var styles$
|
|
1039
|
+
var styles$v = {"carouselWrapper":"ArticleCarousel-module_carouselWrapper__3mmGu","cardWrapperCarousel":"ArticleCarousel-module_cardWrapperCarousel__v3jv1","lastCard":"ArticleCarousel-module_lastCard__my93x"};
|
|
1040
1040
|
|
|
1041
1041
|
/**
|
|
1042
1042
|
* Use `ArticleCarousel` to give supporting information about a page or proposition in the form of the `Carousel` containing only `MediaCard` components.
|
|
@@ -1066,17 +1066,17 @@ var ArticleCarousel = function (_a) {
|
|
|
1066
1066
|
}, [minHeights, checkMinHeight]);
|
|
1067
1067
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
1068
1068
|
React.createElement(SectionHeading, { isPadded: isPadded, id: id, "data-testid": "ArticleCarousel-header", heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content, isCentered: isCentered }),
|
|
1069
|
-
React.createElement("div", { className: styles$
|
|
1069
|
+
React.createElement("div", { className: styles$v.carouselWrapper },
|
|
1070
1070
|
React.createElement(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) {
|
|
1071
1071
|
var _a;
|
|
1072
|
-
return (React.createElement("div", { key: "".concat(componentId), className: classNames(styles$
|
|
1073
|
-
_a[styles$
|
|
1072
|
+
return (React.createElement("div", { key: "".concat(componentId), className: classNames(styles$v.carouselSlide, styles$v.cardWrapperCarousel, (_a = {},
|
|
1073
|
+
_a[styles$v.lastCard] = i === cards.length - 1,
|
|
1074
1074
|
_a)) },
|
|
1075
1075
|
React.createElement(MediaCard, __assign({ isContained: cardsContained, minHeight: minimumHeight }, card))));
|
|
1076
1076
|
})))));
|
|
1077
1077
|
};
|
|
1078
1078
|
|
|
1079
|
-
var styles$
|
|
1079
|
+
var styles$u = {"authorContent":"Author-module_authorContent__TBY7b","largeAvatar":"Author-module_largeAvatar__Vco03"};
|
|
1080
1080
|
|
|
1081
1081
|
var Author = function (_a) {
|
|
1082
1082
|
var name = _a.name, title = _a.title, _b = _a.avatar, avatar = _b === void 0 ? {} : _b, props = __rest(_a, ["name", "title", "avatar"]);
|
|
@@ -1087,10 +1087,10 @@ var Author = function (_a) {
|
|
|
1087
1087
|
React.createElement(Grid, { isFluid: true, isGutterless: true },
|
|
1088
1088
|
React.createElement(GridRow, { align: "center" },
|
|
1089
1089
|
React.createElement(GridCol, { xs: isLargeAvatar ? 12 : "auto" },
|
|
1090
|
-
React.createElement("div", { className: isLargeAvatar ? styles$
|
|
1090
|
+
React.createElement("div", { className: isLargeAvatar ? styles$u.largeAvatar : undefined },
|
|
1091
1091
|
React.createElement(Avatar, __assign({}, avatar)))),
|
|
1092
1092
|
React.createElement(GridCol, null,
|
|
1093
|
-
React.createElement("div", { className: "".concat(!isLargeAvatar && styles$
|
|
1093
|
+
React.createElement("div", { className: "".concat(!isLargeAvatar && styles$u.authorContent), "data-testid": "authorContent" },
|
|
1094
1094
|
React.createElement(Heading, { size: "xs" }, name),
|
|
1095
1095
|
React.createElement(Text, { size: "s" }, title)))))));
|
|
1096
1096
|
};
|
|
@@ -1105,35 +1105,35 @@ var MultiLineText = function (_a) {
|
|
|
1105
1105
|
React.createElement(Text, __assign({}, textProps), paragraph))); })));
|
|
1106
1106
|
};
|
|
1107
1107
|
|
|
1108
|
-
var styles$
|
|
1108
|
+
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"};
|
|
1109
1109
|
|
|
1110
1110
|
var MediaContent$1 = function (_a) {
|
|
1111
1111
|
var heading = _a.heading, id = _a.id, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content;
|
|
1112
|
-
return (React.createElement("div", { className: styles$
|
|
1112
|
+
return (React.createElement("div", { className: styles$t.mediaContainer },
|
|
1113
1113
|
React.createElement(Heading, { id: id, level: headingLevel, isWordWrap: isHeadingWordWrap, size: "xl" }, heading),
|
|
1114
|
-
content && (React.createElement("div", { className: styles$
|
|
1114
|
+
content && (React.createElement("div", { className: styles$t.content },
|
|
1115
1115
|
React.createElement(VerticalSpace, { size: "24" }),
|
|
1116
1116
|
React.createElement(MultiLineText, { text: content, size: "l" })))));
|
|
1117
1117
|
};
|
|
1118
1118
|
|
|
1119
1119
|
var Image$1 = function (_a) {
|
|
1120
1120
|
var sources = _a.sources, props = __rest(_a, ["sources"]);
|
|
1121
|
-
return (React.createElement("div", { className: styles$
|
|
1121
|
+
return (React.createElement("div", { className: styles$t.imgWrapper },
|
|
1122
1122
|
React.createElement(Image$2, __assign({ fadeOnLoad: true }, props), sources &&
|
|
1123
1123
|
sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))));
|
|
1124
1124
|
};
|
|
1125
1125
|
|
|
1126
1126
|
var IconList = function (_a) {
|
|
1127
1127
|
var listItems = _a.listItems, isLgScreen = _a.isLgScreen, _b = _a.headingLevel, headingLevel = _b === void 0 ? "3" : _b;
|
|
1128
|
-
return (React.createElement("ul", { className: styles$
|
|
1128
|
+
return (React.createElement("ul", { className: styles$t.list }, listItems.map(function (_a) {
|
|
1129
1129
|
var _b;
|
|
1130
1130
|
var icon = _a.icon, heading = _a.heading, text = _a.text;
|
|
1131
|
-
return (React.createElement("li", { key: heading, className: classNames(styles$
|
|
1132
|
-
_b[styles$
|
|
1131
|
+
return (React.createElement("li", { key: heading, className: classNames(styles$t.listItem, (_b = {},
|
|
1132
|
+
_b[styles$t.listItemCentered] = !text,
|
|
1133
1133
|
_b)) },
|
|
1134
|
-
React.createElement("div", { className: styles$
|
|
1134
|
+
React.createElement("div", { className: styles$t.listItemIconContainer },
|
|
1135
1135
|
React.createElement(Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
|
|
1136
|
-
React.createElement("div", { className: styles$
|
|
1136
|
+
React.createElement("div", { className: styles$t.listItemTextContainer },
|
|
1137
1137
|
React.createElement(Heading, { level: headingLevel, size: "s" }, heading),
|
|
1138
1138
|
text && (React.createElement(React.Fragment, null,
|
|
1139
1139
|
React.createElement(VerticalSpace, { size: "8", sizeL: "16" }),
|
|
@@ -1141,20 +1141,20 @@ var IconList = function (_a) {
|
|
|
1141
1141
|
})));
|
|
1142
1142
|
};
|
|
1143
1143
|
|
|
1144
|
-
var Button = function (props) { return (React.createElement("div", { className: styles$
|
|
1144
|
+
var Button = function (props) { return (React.createElement("div", { className: styles$t.buttonContainer },
|
|
1145
1145
|
React.createElement(ButtonV2, __assign({ isFullWidth: true, buttonStyle: "secondary" }, props)))); };
|
|
1146
1146
|
|
|
1147
1147
|
var Container = function (_a) {
|
|
1148
1148
|
var _b;
|
|
1149
1149
|
var children = _a.children, isReverseOrder = _a.isReverseOrder, type = _a.type, alignment = _a.alignment;
|
|
1150
|
-
return (React.createElement("div", { "data-testid": "copy-lead-container", className: classNames(styles$
|
|
1151
|
-
_b[styles$
|
|
1150
|
+
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 = {},
|
|
1151
|
+
_b[styles$t["container--reverse"]] = isReverseOrder,
|
|
1152
1152
|
_b)) }, children));
|
|
1153
1153
|
};
|
|
1154
1154
|
|
|
1155
1155
|
var Column = function (_a) {
|
|
1156
1156
|
var children = _a.children;
|
|
1157
|
-
return (React.createElement("div", { className: styles$
|
|
1157
|
+
return (React.createElement("div", { className: styles$t.col }, children));
|
|
1158
1158
|
};
|
|
1159
1159
|
|
|
1160
1160
|
var getListHeadingLevel$1 = function (level) {
|
|
@@ -1222,7 +1222,7 @@ var CopyLead = function (_a) {
|
|
|
1222
1222
|
return null;
|
|
1223
1223
|
};
|
|
1224
1224
|
|
|
1225
|
-
var styles$
|
|
1225
|
+
var styles$s = {"downloadList-below":"DownloadList-module_downloadList-below__21q6i","downloadList-right":"DownloadList-module_downloadList-right__mHYHL"};
|
|
1226
1226
|
|
|
1227
1227
|
var DownloadList = function (_a) {
|
|
1228
1228
|
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"]);
|
|
@@ -1232,12 +1232,12 @@ var DownloadList = function (_a) {
|
|
|
1232
1232
|
" ",
|
|
1233
1233
|
React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
|
|
1234
1234
|
React.createElement(ColumnsCol, { spanL: alignment === "right" ? 6 : 8, spanM: 9, spanS: 12 },
|
|
1235
|
-
React.createElement("div", { className: styles$
|
|
1235
|
+
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) },
|
|
1236
1236
|
React.createElement(Download, __assign({}, downloadProps)),
|
|
1237
1237
|
i !== downloads.length - 1 && React.createElement(VerticalSpace, { size: "16" }))); }))))));
|
|
1238
1238
|
};
|
|
1239
1239
|
|
|
1240
|
-
var styles$
|
|
1240
|
+
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"};
|
|
1241
1241
|
|
|
1242
1242
|
var scrollToSectionFocusFirstElement = function (item) {
|
|
1243
1243
|
var _a, _b, _c, _d, _e;
|
|
@@ -1251,23 +1251,23 @@ var scrollToSectionFocusFirstElement = function (item) {
|
|
|
1251
1251
|
var FAQs = function (_a) {
|
|
1252
1252
|
var _b;
|
|
1253
1253
|
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"]);
|
|
1254
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
1254
|
+
return (React.createElement("div", __assign({ className: styles$r.FAQs }, filterAttrs(props)),
|
|
1255
1255
|
React.createElement(SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, content: content, image: image, headingLevel: headingLevel, isPadded: isPadded }),
|
|
1256
|
-
type === "listWithLinks" && (React.createElement("div", { className: styles$
|
|
1257
|
-
React.createElement("div", { className: styles$
|
|
1256
|
+
type === "listWithLinks" && (React.createElement("div", { className: styles$r.linkListSection },
|
|
1257
|
+
React.createElement("div", { className: styles$r.linkListTitle },
|
|
1258
1258
|
React.createElement(Heading, { size: "xs" }, linkListHeading)),
|
|
1259
1259
|
React.createElement("ul", { className: classNames((_b = {},
|
|
1260
|
-
_b[styles$
|
|
1261
|
-
_b[styles$
|
|
1260
|
+
_b[styles$r.linkList] = true,
|
|
1261
|
+
_b[styles$r["linkList--padded"]] = isPadded,
|
|
1262
1262
|
_b)) }, accordionData.map(function (item) {
|
|
1263
1263
|
var _a;
|
|
1264
|
-
return (React.createElement("li", { className: styles$
|
|
1264
|
+
return (React.createElement("li", { className: styles$r.linkListItem, key: item.heading },
|
|
1265
1265
|
React.createElement(Link, { title: item.heading, href: "#".concat(item.id), onClick: function (e) {
|
|
1266
1266
|
e.preventDefault();
|
|
1267
1267
|
scrollToSectionFocusFirstElement(item);
|
|
1268
1268
|
} }, (_a = item.altLinkTitle) !== null && _a !== void 0 ? _a : item.heading)));
|
|
1269
1269
|
})))),
|
|
1270
|
-
type !== "tabs" && accordionData && (React.createElement("ul", { className: styles$
|
|
1270
|
+
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 },
|
|
1271
1271
|
React.createElement(Accordion, { id: item.id, heading: item.heading, headingLevel: item.headingLevel, content: item.content, disclosureList: item.disclosureList, headingSize: "m" }),
|
|
1272
1272
|
React.createElement(VerticalSpace, { size: "48", sizeL: "64" }))); }))),
|
|
1273
1273
|
type === "tabs" && (React.createElement(Tabs, { defaultValue: accordionData[0].heading },
|
|
@@ -3464,12 +3464,12 @@ function cleanEscapedString(input) {
|
|
|
3464
3464
|
return matched[1].replace(doubleQuoteRegExp, "'");
|
|
3465
3465
|
}
|
|
3466
3466
|
|
|
3467
|
-
var styles$
|
|
3467
|
+
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"};
|
|
3468
3468
|
|
|
3469
3469
|
var Image = function (_a) {
|
|
3470
3470
|
var sources = _a.sources, title = _a.title, description = _a.description, props = __rest(_a, ["sources", "title", "description"]);
|
|
3471
3471
|
return (React.createElement(React.Fragment, null,
|
|
3472
|
-
React.createElement("div", { className: styles$
|
|
3472
|
+
React.createElement("div", { className: styles$q.imgWrapper },
|
|
3473
3473
|
React.createElement(Image$2, __assign({ fadeOnLoad: true }, props), sources &&
|
|
3474
3474
|
sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))),
|
|
3475
3475
|
title && (React.createElement(React.Fragment, null,
|
|
@@ -3507,17 +3507,17 @@ var FeaturePost = function (_a) {
|
|
|
3507
3507
|
var _b;
|
|
3508
3508
|
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"]);
|
|
3509
3509
|
var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
|
|
3510
|
-
return (React.createElement("div", __assign({ "data-testid": "feature-post", className: classNames(styles$
|
|
3511
|
-
_b[styles$
|
|
3510
|
+
return (React.createElement("div", __assign({ "data-testid": "feature-post", className: classNames(styles$q.featurePost, (_b = {},
|
|
3511
|
+
_b[styles$q.featurePostReversed] = isReverseOrder,
|
|
3512
3512
|
_b)) }, filterAttrs(props)),
|
|
3513
|
-
React.createElement("div", { className: styles$
|
|
3514
|
-
React.createElement("div", { className: styles$
|
|
3513
|
+
React.createElement("div", { className: styles$q.col },
|
|
3514
|
+
React.createElement("div", { className: styles$q.contentContainer },
|
|
3515
3515
|
label && (React.createElement(Grid, { isGutterless: true, isFluid: true },
|
|
3516
3516
|
React.createElement(GridRow, { align: "baseline" },
|
|
3517
3517
|
React.createElement(GridCol, { xs: 12, m: "auto" },
|
|
3518
3518
|
React.createElement(Heading, { size: "xxs", fontStyle: "overline" }, label.text)),
|
|
3519
3519
|
React.createElement(GridCol, { xs: 12, m: "auto" },
|
|
3520
|
-
React.createElement("div", { className: styles$
|
|
3520
|
+
React.createElement("div", { className: styles$q.labelDate },
|
|
3521
3521
|
React.createElement(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)))))),
|
|
3522
3522
|
React.createElement(VerticalSpace, { size: "24" }))),
|
|
3523
3523
|
React.createElement(Heading, { id: id, level: headingLevel, isWordWrap: isHeadingWordWrap, size: "xl" }, heading),
|
|
@@ -3539,10 +3539,10 @@ var FeaturePost = function (_a) {
|
|
|
3539
3539
|
footer.appStore && (React.createElement(GridCol, { xs: 12, s: "auto" },
|
|
3540
3540
|
React.createElement(AppButton, { type: "apple-app-store", screenReaderText: footer.appStore.screenReaderText, url: footer.appStore.url }))),
|
|
3541
3541
|
footer.googlePlay && (React.createElement(GridCol, { xs: 12, s: "auto" },
|
|
3542
|
-
React.createElement("div", { className: styles$
|
|
3542
|
+
React.createElement("div", { className: styles$q.googlePlayButtonWrapper },
|
|
3543
3543
|
React.createElement(AppButton, { type: "google-play", screenReaderText: footer.googlePlay.screenReaderText, url: footer.googlePlay.url })))))))))),
|
|
3544
|
-
isMinWidthArcBreakpointM && (React.createElement("div", { className: styles$
|
|
3545
|
-
React.createElement("div", { "data-testid": "desktop-img", className: styles$
|
|
3544
|
+
isMinWidthArcBreakpointM && (React.createElement("div", { className: styles$q.col },
|
|
3545
|
+
React.createElement("div", { "data-testid": "desktop-img", className: styles$q.imgContainer },
|
|
3546
3546
|
React.createElement(MediaContent, { image: image, video: video }))))));
|
|
3547
3547
|
};
|
|
3548
3548
|
|
|
@@ -3554,7 +3554,7 @@ var FeaturePost = function (_a) {
|
|
|
3554
3554
|
const BtIconArrowRightFill =
|
|
3555
3555
|
"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";
|
|
3556
3556
|
|
|
3557
|
-
var styles$
|
|
3557
|
+
var styles$p = {"highlights":"Highlights-module_highlights__Hf7Zq","highlightItem":"Highlights-module_highlightItem__-N6le","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
|
|
3558
3558
|
|
|
3559
3559
|
var getListHeadingLevel = function (level) {
|
|
3560
3560
|
var nextLevel = Math.min(parseInt(level) + 1, 6);
|
|
@@ -3564,8 +3564,8 @@ var getListHeadingLevel = function (level) {
|
|
|
3564
3564
|
var HighlightItem = function (_a) {
|
|
3565
3565
|
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"]);
|
|
3566
3566
|
var listHeadingLevel = getListHeadingLevel(headingLevel || "2");
|
|
3567
|
-
return (React.createElement("div", __assign({ "data-testid": "highlight-item-container", className: styles$
|
|
3568
|
-
icon && (React.createElement("div", { className: styles$
|
|
3567
|
+
return (React.createElement("div", __assign({ "data-testid": "highlight-item-container", className: styles$p.highlightItem }, filterAttrs(props)),
|
|
3568
|
+
icon && (React.createElement("div", { className: styles$p.Icon },
|
|
3569
3569
|
React.createElement(Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
|
|
3570
3570
|
React.createElement(VerticalSpace, { size: "16" }),
|
|
3571
3571
|
React.createElement(Heading, { level: listHeadingLevel, size: "m" }, heading),
|
|
@@ -3578,7 +3578,7 @@ var HighlightItem = function (_a) {
|
|
|
3578
3578
|
var HighlightList = function (_a) {
|
|
3579
3579
|
var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel, props = __rest(_a, ["listItems", "columns", "isSmallIcon", "headingLevel"]);
|
|
3580
3580
|
var id = useId();
|
|
3581
|
-
return (React.createElement("div", __assign({ "data-testid": "highlights-list", className: classNames(styles$
|
|
3581
|
+
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) {
|
|
3582
3582
|
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, itemProps = __rest(_a, ["icon", "heading", "text", "link"]);
|
|
3583
3583
|
return (React.createElement(HighlightItem, __assign({ key: "highlight-".concat(id, "-").concat(i), icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon, headingLevel: headingLevel }, itemProps)));
|
|
3584
3584
|
})));
|
|
@@ -3605,7 +3605,7 @@ var Highlights = function (_a) {
|
|
|
3605
3605
|
: undefined, iconPosition: (_d = cta.iconPosition) !== null && _d !== void 0 ? _d : "beforeText" })))));
|
|
3606
3606
|
};
|
|
3607
3607
|
|
|
3608
|
-
var styles$
|
|
3608
|
+
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"};
|
|
3609
3609
|
|
|
3610
3610
|
/**
|
|
3611
3611
|
* Do not edit directly
|
|
@@ -3723,7 +3723,7 @@ var PromoListing = function (_a) {
|
|
|
3723
3723
|
var CardComponent = CARD_COMPONENTS[card.type];
|
|
3724
3724
|
return React.createElement(CardComponent, __assign({}, card, commonProps));
|
|
3725
3725
|
};
|
|
3726
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
3726
|
+
return (React.createElement("div", __assign({ className: styles$o.PromoListing }, filterAttrs(props)),
|
|
3727
3727
|
overlineLabel && (React.createElement(React.Fragment, null,
|
|
3728
3728
|
React.createElement(Heading, { level: overlineHeadingLevel, fontStyle: "overline" }, overlineLabel),
|
|
3729
3729
|
React.createElement(VerticalSpace, { size: "12" }))),
|
|
@@ -3731,44 +3731,44 @@ var PromoListing = function (_a) {
|
|
|
3731
3731
|
button.label && (React.createElement(React.Fragment, null,
|
|
3732
3732
|
React.createElement(ButtonV2, __assign({}, button, { icon: button.buttonStyle == "compact" ? BtIconArrowRightFill : undefined, size: "m" })),
|
|
3733
3733
|
React.createElement(VerticalSpace, { size: "40" }))),
|
|
3734
|
-
isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles$
|
|
3735
|
-
React.createElement(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$
|
|
3736
|
-
React.createElement("div", { "data-testid": "promoList-card".concat(index), className: styles$
|
|
3734
|
+
isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles$o.CarouselWrapper },
|
|
3735
|
+
React.createElement(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) },
|
|
3736
|
+
React.createElement("div", { "data-testid": "promoList-card".concat(index), className: styles$o.cardWrapper }, getCard(card)))); })))));
|
|
3737
3737
|
};
|
|
3738
3738
|
|
|
3739
|
-
var styles$
|
|
3739
|
+
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"};
|
|
3740
3740
|
|
|
3741
3741
|
/**
|
|
3742
3742
|
* 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.*/
|
|
3743
3743
|
var Quote = function (_a) {
|
|
3744
3744
|
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"]);
|
|
3745
3745
|
return (React.createElement("div", __assign({ className: "community-component--quote", "data-testid": "quote-test" }, filterAttrs(props)),
|
|
3746
|
-
React.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles$
|
|
3747
|
-
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles$
|
|
3746
|
+
React.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles$n.blockQuote, styles$n["quote".concat(styling)]), cite: citeUrl },
|
|
3747
|
+
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles$n.quoteIcon, "aria-hidden": "true" },
|
|
3748
3748
|
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" })),
|
|
3749
|
-
React.createElement("p", { className: styles$
|
|
3749
|
+
React.createElement("p", { className: styles$n.quoteContent }, content)),
|
|
3750
3750
|
author && React.createElement(Author, __assign({}, author))));
|
|
3751
3751
|
};
|
|
3752
3752
|
|
|
3753
|
-
var styles$
|
|
3753
|
+
var styles$m = {"ruleContainer":"Summary-module_ruleContainer__ydWlG","row":"Summary-module_row__SKV--"};
|
|
3754
3754
|
|
|
3755
3755
|
var Summary = function (_a) {
|
|
3756
3756
|
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"]);
|
|
3757
3757
|
var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
|
|
3758
3758
|
return (React.createElement(Box, __assign({ isBorderRadius: true }, (!noBorder ? { borderWidth: "thin" } : { elevationLevel: "1" }), { padding: "24" }, filterAttrs(props)),
|
|
3759
|
-
React.createElement("div", { className: styles$
|
|
3759
|
+
React.createElement("div", { className: styles$m.row }, content.map(function (_a, i) {
|
|
3760
3760
|
var heading = _a.heading, text = _a.text;
|
|
3761
3761
|
return (React.createElement(React.Fragment, null,
|
|
3762
|
-
React.createElement("div", { className: styles$
|
|
3762
|
+
React.createElement("div", { className: styles$m.col },
|
|
3763
3763
|
React.createElement(Heading, { size: "s", level: headingLevel }, heading),
|
|
3764
3764
|
React.createElement(VerticalSpace, { size: "8" }),
|
|
3765
3765
|
React.createElement(Text, { size: "s" }, text)),
|
|
3766
|
-
i !== content.length - 1 && (React.createElement("div", { className: styles$
|
|
3766
|
+
i !== content.length - 1 && (React.createElement("div", { className: styles$m.ruleContainer },
|
|
3767
3767
|
React.createElement(Rule, { orientation: isMinWidthArcBreakpointM ? "vertical" : "horizontal" })))));
|
|
3768
3768
|
}))));
|
|
3769
3769
|
};
|
|
3770
3770
|
|
|
3771
|
-
var styles$
|
|
3771
|
+
var styles$l = {"list":"Statistics-module_list__BI-eQ","mutedText":"Statistics-module_mutedText__MR1JM"};
|
|
3772
3772
|
|
|
3773
3773
|
var getLinkProps = function (link) {
|
|
3774
3774
|
return link.openInNewTab
|
|
@@ -3786,7 +3786,7 @@ var Statistics = function (_a) {
|
|
|
3786
3786
|
React.createElement(ColumnsCol, { spanM: 9 },
|
|
3787
3787
|
React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
|
|
3788
3788
|
React.createElement(ColumnsCol, { spanL: 9 },
|
|
3789
|
-
React.createElement("ul", { className: styles$
|
|
3789
|
+
React.createElement("ul", { className: styles$l.list }, statistics.map(function (_a, i) {
|
|
3790
3790
|
var stat = _a.stat, copy = _a.copy, link = _a.link, source = _a.source, sourceUrl = _a.sourceUrl;
|
|
3791
3791
|
return (React.createElement("li", { key: "statistic-".concat(componentId, "-").concat(i) },
|
|
3792
3792
|
i !== 0 && (React.createElement(React.Fragment, null,
|
|
@@ -3796,7 +3796,7 @@ var Statistics = function (_a) {
|
|
|
3796
3796
|
React.createElement(Columns, null,
|
|
3797
3797
|
React.createElement(ColumnsCol, { spanS: 6, spanM: 8 },
|
|
3798
3798
|
React.createElement(Align, { vertical: "center" },
|
|
3799
|
-
React.createElement("div", { className: styles$
|
|
3799
|
+
React.createElement("div", { className: styles$l.statWrapper },
|
|
3800
3800
|
React.createElement(Heading, { color: "brand", size: "xxl" }, stat),
|
|
3801
3801
|
React.createElement(Hidden, { s: true, m: true, l: true, xl: true, xxl: true },
|
|
3802
3802
|
React.createElement(VerticalSpace, { size: "12" }))))),
|
|
@@ -3809,26 +3809,26 @@ var Statistics = function (_a) {
|
|
|
3809
3809
|
source && (React.createElement(React.Fragment, null,
|
|
3810
3810
|
React.createElement(VerticalSpace, { size: "12" }),
|
|
3811
3811
|
React.createElement(Text, { size: "xs" },
|
|
3812
|
-
React.createElement("span", { className: styles$
|
|
3812
|
+
React.createElement("span", { className: styles$l.mutedText }, source)))),
|
|
3813
3813
|
sourceUrl && (React.createElement(Text, { size: "xs" },
|
|
3814
|
-
React.createElement("a", { className: styles$
|
|
3814
|
+
React.createElement("a", { className: styles$l.mutedText, href: sourceUrl }, sourceUrl))))))));
|
|
3815
3815
|
})))));
|
|
3816
3816
|
};
|
|
3817
3817
|
|
|
3818
|
-
var styles$
|
|
3818
|
+
var styles$k = {"bannerWithTabsHeadingCentered":"BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO"};
|
|
3819
3819
|
|
|
3820
3820
|
var BannerWithTabs = function (_a) {
|
|
3821
3821
|
var _b;
|
|
3822
3822
|
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"]);
|
|
3823
3823
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3824
3824
|
React.createElement("div", { className: classNames((_b = {},
|
|
3825
|
-
_b[styles$
|
|
3825
|
+
_b[styles$k.bannerWithTabsHeadingCentered] = alignTypography === "center",
|
|
3826
3826
|
_b)) },
|
|
3827
3827
|
React.createElement(SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, headingLevel: headingLevel, content: content, isPadded: alignTypography === "left" ? true : false })),
|
|
3828
3828
|
React.createElement(TabbedBanner, { minHeight: minHeight, minHeightM: minHeightM, tabs: tabs, defaultValue: defaultValue })));
|
|
3829
3829
|
};
|
|
3830
3830
|
|
|
3831
|
-
var styles$
|
|
3831
|
+
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"};
|
|
3832
3832
|
|
|
3833
3833
|
/**
|
|
3834
3834
|
* Use `ArticleSidebar` to provide additional information about the article.
|
|
@@ -3890,7 +3890,7 @@ var ArticleSidebar = function (_a) {
|
|
|
3890
3890
|
var hasBottomContent = Boolean(linkSection || topics || showShare);
|
|
3891
3891
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3892
3892
|
React.createElement("div", { className: classNames((_b = {},
|
|
3893
|
-
_b[styles$
|
|
3893
|
+
_b[styles$j.textContent] = hasTopContent,
|
|
3894
3894
|
_b)) },
|
|
3895
3895
|
author && (React.createElement(React.Fragment, null,
|
|
3896
3896
|
React.createElement(Author, __assign({}, author, { avatar: __assign(__assign({}, author.avatar), { size: "xl" }) })))),
|
|
@@ -3901,7 +3901,7 @@ var ArticleSidebar = function (_a) {
|
|
|
3901
3901
|
React.createElement(Text, { size: "s" }, aboutSection.content))),
|
|
3902
3902
|
additionalContent && (React.createElement(React.Fragment, null,
|
|
3903
3903
|
(author || aboutSection) && React.createElement(VerticalSpace, { size: "16" }),
|
|
3904
|
-
React.createElement("div", { className: styles$
|
|
3904
|
+
React.createElement("div", { className: styles$j.additionalContentContainer }, additionalContent.map(function (_a) {
|
|
3905
3905
|
var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content;
|
|
3906
3906
|
return (React.createElement("div", { key: "".concat(id, "-").concat(heading) },
|
|
3907
3907
|
React.createElement(Heading, { level: headingLevel, size: "xxs" }, heading),
|
|
@@ -3924,7 +3924,7 @@ var ArticleSidebar = function (_a) {
|
|
|
3924
3924
|
linkSection && React.createElement(VerticalSpace, { size: "32" }),
|
|
3925
3925
|
React.createElement(Heading, { level: topics.headingLevel }, topics.heading),
|
|
3926
3926
|
React.createElement(VerticalSpace, { size: "16" }),
|
|
3927
|
-
React.createElement("div", { className: styles$
|
|
3927
|
+
React.createElement("div", { className: styles$j.tagGroup }, topics.tags.map(function (tag) { return (React.createElement(Tag, __assign({ key: "".concat(id, "-").concat(tag.title) }, tag))); })))),
|
|
3928
3928
|
showShare && (React.createElement(React.Fragment, null,
|
|
3929
3929
|
(linkSection || topics) && (React.createElement("div", { "data-testid": "links-topics-content-rule" },
|
|
3930
3930
|
React.createElement(VerticalSpace, { size: "32" }),
|
|
@@ -3932,16 +3932,16 @@ var ArticleSidebar = function (_a) {
|
|
|
3932
3932
|
React.createElement(VerticalSpace, { size: "32" }))),
|
|
3933
3933
|
React.createElement(Heading, { level: share.headingLevel }, share.heading),
|
|
3934
3934
|
React.createElement(VerticalSpace, { size: "16" }),
|
|
3935
|
-
React.createElement("div", { className: styles$
|
|
3935
|
+
React.createElement("div", { className: styles$j.shareButtonContainer }, shareButtons.map(function (_a) {
|
|
3936
3936
|
var isButton = _a.isButton, ariaLabel = _a.ariaLabel, href = _a.href, icon = _a.icon, onClick = _a.onClick;
|
|
3937
|
-
return (React.createElement("a", { key: "".concat(id, "-").concat(ariaLabel), role: isButton ? "button" : undefined, target: "_blank", rel: "noreferrer", className: styles$
|
|
3937
|
+
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 },
|
|
3938
3938
|
React.createElement(Icon, { icon: icon, size: 24 })));
|
|
3939
3939
|
})))),
|
|
3940
3940
|
React.createElement(Toast, null,
|
|
3941
3941
|
React.createElement(ToastNotification, { status: "success", title: "Copied to clipboard", isOpen: showToast, onOpenChange: function () { return setShowToast(false); } }))));
|
|
3942
3942
|
};
|
|
3943
3943
|
|
|
3944
|
-
var styles$
|
|
3944
|
+
var styles$i = {"product-navigation-grid":"ProductNavigation-module_product-navigation-grid__RzFq8","productNavigation-skipLink":"ProductNavigation-module_productNavigation-skipLink__fy8ZJ"};
|
|
3945
3945
|
|
|
3946
3946
|
/**
|
|
3947
3947
|
* Use `ProductNavigation` to give a collection of product information cards collected within a grid that has optional show/hide capability
|
|
@@ -3987,7 +3987,7 @@ var ProductNavigation = function (_a) {
|
|
|
3987
3987
|
var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
|
|
3988
3988
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3989
3989
|
React.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "ProductNavigation-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content, image: image }),
|
|
3990
|
-
React.createElement("ul", { className: classNames(styles$
|
|
3990
|
+
React.createElement("ul", { className: classNames(styles$i["product-navigation-grid"]) }, displayList === null || displayList === void 0 ? void 0 : displayList.map(function (cardProps, i) {
|
|
3991
3991
|
var _a;
|
|
3992
3992
|
return (React.createElement("li", { key: "displayList-".concat(i), tabIndex: -1, ref: i === skipLinkCard ? cardRef : undefined, "data-cy": "list-item-".concat(i) },
|
|
3993
3993
|
React.createElement(InformationCard, __assign({}, cardProps, { minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : cardProps.minHeight, headingLevel: (_a = cardProps.headingLevel) !== null && _a !== void 0 ? _a : "2" }))));
|
|
@@ -3999,7 +3999,7 @@ var ProductNavigation = function (_a) {
|
|
|
3999
3999
|
!hideLessButton && (React.createElement(ButtonV2, { label: displayList.length < productList.length
|
|
4000
4000
|
? "Show more"
|
|
4001
4001
|
: "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
|
|
4002
|
-
displaySkipButton && displayList.length > cardsToDisplay && (React.createElement("div", { id: "skip-link", className: classNames(styles$
|
|
4002
|
+
displaySkipButton && displayList.length > cardsToDisplay && (React.createElement("div", { id: "skip-link", className: classNames(styles$i["productNavigation-skipLink"]), tabIndex: -1 },
|
|
4003
4003
|
React.createElement(ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true }))),
|
|
4004
4004
|
React.createElement(VisuallyHidden, null,
|
|
4005
4005
|
React.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
|
|
@@ -4011,18 +4011,18 @@ var ProductNavigation = function (_a) {
|
|
|
4011
4011
|
"."))))))));
|
|
4012
4012
|
};
|
|
4013
4013
|
|
|
4014
|
-
var styles$
|
|
4014
|
+
var styles$h = {"container":"ContentInfoWidget-module_container__yaS-8","text":"ContentInfoWidget-module_text__O1BdZ","icon":"ContentInfoWidget-module_icon__LEww1"};
|
|
4015
4015
|
|
|
4016
4016
|
var ContentInfoWidget = function (_a) {
|
|
4017
4017
|
var text = _a.text, icon = _a.icon, props = __rest(_a, ["text", "icon"]);
|
|
4018
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4019
|
-
React.createElement("div", { className: styles$
|
|
4018
|
+
return (React.createElement("div", __assign({ className: styles$h.container }, filterAttrs(props)),
|
|
4019
|
+
React.createElement("div", { className: styles$h.icon },
|
|
4020
4020
|
React.createElement(Icon, { size: 20, icon: icon })),
|
|
4021
|
-
React.createElement("div", { className: styles$
|
|
4021
|
+
React.createElement("div", { className: styles$h.text },
|
|
4022
4022
|
React.createElement(Text, { size: "xs", tone: "muted" }, text))));
|
|
4023
4023
|
};
|
|
4024
4024
|
|
|
4025
|
-
var styles$
|
|
4025
|
+
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"};
|
|
4026
4026
|
|
|
4027
4027
|
var ActionTile = function (_a) {
|
|
4028
4028
|
var _b, _c;
|
|
@@ -4030,51 +4030,51 @@ var ActionTile = function (_a) {
|
|
|
4030
4030
|
var displayIcon = isActive && activeIcon ? activeIcon : icon;
|
|
4031
4031
|
var iconSize = isCompact ? 40 : 48;
|
|
4032
4032
|
var content = (React.createElement(React.Fragment, null,
|
|
4033
|
-
React.createElement("div", { className: classNames(styles$
|
|
4034
|
-
_b[styles$
|
|
4033
|
+
React.createElement("div", { className: classNames(styles$g["action-tile-content"], (_b = {},
|
|
4034
|
+
_b[styles$g["action-tile-content--without-icon"]] = !displayIcon,
|
|
4035
4035
|
_b)) },
|
|
4036
|
-
displayIcon && (React.createElement("div", { className: styles$
|
|
4036
|
+
displayIcon && (React.createElement("div", { className: styles$g["action-tile-icon"] },
|
|
4037
4037
|
React.createElement(Icon, { icon: displayIcon, size: iconSize }))),
|
|
4038
|
-
React.createElement("span", { className: styles$
|
|
4039
|
-
isActive && (React.createElement("div", { className: styles$
|
|
4038
|
+
React.createElement("span", { className: styles$g["action-tile-heading"] }, heading)),
|
|
4039
|
+
isActive && (React.createElement("div", { className: styles$g["action-tile-tick"] },
|
|
4040
4040
|
React.createElement(Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
|
|
4041
|
-
return (React.createElement("button", __assign({ type: "button", className: classNames(styles$
|
|
4042
|
-
_c[styles$
|
|
4043
|
-
_c[styles$
|
|
4041
|
+
return (React.createElement("button", __assign({ type: "button", className: classNames(styles$g["action-tile"], (_c = {},
|
|
4042
|
+
_c[styles$g["action-tile--active"]] = isActive,
|
|
4043
|
+
_c[styles$g["action-tile--compact"]] = isCompact,
|
|
4044
4044
|
_c)), onClick: onClick, "aria-pressed": isActive }, filterAttrs(props)), content));
|
|
4045
4045
|
};
|
|
4046
4046
|
|
|
4047
|
-
var styles$
|
|
4047
|
+
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"};
|
|
4048
4048
|
|
|
4049
4049
|
var LinkTile = function (_a) {
|
|
4050
4050
|
var _b;
|
|
4051
4051
|
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"]);
|
|
4052
4052
|
var Component = href ? "a" : "div";
|
|
4053
4053
|
var linkProps = href ? { href: href } : {};
|
|
4054
|
-
return (React.createElement(Component, __assign({ className: classNames(styles$
|
|
4055
|
-
_b[styles$
|
|
4056
|
-
_b), className) }, linkProps, props), text && (React.createElement("div", { className: styles$
|
|
4057
|
-
React.createElement("span", { className: styles$
|
|
4058
|
-
showIcon && (React.createElement("span", { className: styles$
|
|
4054
|
+
return (React.createElement(Component, __assign({ className: classNames(styles$f["link-tile"], (_b = {},
|
|
4055
|
+
_b[styles$f["link-tile--neutral"]] = tone === "neutral",
|
|
4056
|
+
_b), className) }, linkProps, props), text && (React.createElement("div", { className: styles$f["link-tile-content"] },
|
|
4057
|
+
React.createElement("span", { className: styles$f["link-tile-text"] }, text),
|
|
4058
|
+
showIcon && (React.createElement("span", { className: styles$f["link-tile-icon"] },
|
|
4059
4059
|
React.createElement(Icon, { icon: BtIconArrowAltRight, size: 32 })))))));
|
|
4060
4060
|
};
|
|
4061
4061
|
|
|
4062
|
-
var styles$
|
|
4062
|
+
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"};
|
|
4063
4063
|
|
|
4064
4064
|
var InlineLinkGroup = function (_a) {
|
|
4065
|
-
var label = _a.label, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, links = _a.links, props = __rest(_a, ["label", "headingLevel", "links"]);
|
|
4066
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4067
|
-
label && (React.createElement("div", { className: styles$
|
|
4065
|
+
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"]);
|
|
4066
|
+
return (React.createElement("div", __assign({ className: styles$e["quick-help"] }, filterAttrs(props)),
|
|
4067
|
+
label && (React.createElement("div", { className: styles$e["quick-help-label"] },
|
|
4068
4068
|
React.createElement(Heading, { level: headingLevel, size: "xxs", fontStyle: "overline" }, label))),
|
|
4069
|
-
React.createElement("ul", { className: styles$
|
|
4070
|
-
React.createElement("li", { className: styles$
|
|
4071
|
-
React.createElement(Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel }, link.label),
|
|
4069
|
+
React.createElement("ul", { className: styles$e["quick-help-container"] }, links.map(function (link, index) { return (React.createElement(React.Fragment, { key: index },
|
|
4070
|
+
React.createElement("li", { className: styles$e["quick-help-item"] },
|
|
4071
|
+
React.createElement(Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel, isImplied: isImplied }, link.label),
|
|
4072
4072
|
React.createElement(Icon, { icon: BtIconArrowAltRight, size: 24, color: "brand" })),
|
|
4073
|
-
index < links.length - 1 && (React.createElement("li", { className: styles$
|
|
4074
|
-
React.createElement("div", { className: styles$
|
|
4073
|
+
index < links.length - 1 && (React.createElement("li", { className: styles$e["quick-help-separator"], "aria-hidden": "true" },
|
|
4074
|
+
React.createElement("div", { className: styles$e["quick-help-separator-line"] }))))); }))));
|
|
4075
4075
|
};
|
|
4076
4076
|
|
|
4077
|
-
var styles$
|
|
4077
|
+
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"};
|
|
4078
4078
|
|
|
4079
4079
|
/** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
|
|
4080
4080
|
var ThumbnailSignpost = function (_a) {
|
|
@@ -4082,20 +4082,20 @@ var ThumbnailSignpost = function (_a) {
|
|
|
4082
4082
|
var text = _a.text, title = _a.title, img = _a.img, onClick = _a.onClick, buttonLabel = _a.buttonLabel, props = __rest(_a, ["text", "title", "img", "onClick", "buttonLabel"]);
|
|
4083
4083
|
var surface = useContext(SurfaceContext).surface;
|
|
4084
4084
|
var isDarkSurface = surface === "dark";
|
|
4085
|
-
return (React.createElement("div", __assign({ className: classNames(styles$
|
|
4086
|
-
_b[styles$
|
|
4087
|
-
_b[styles$
|
|
4085
|
+
return (React.createElement("div", __assign({ className: classNames(styles$d.thumbnailSignpost, (_b = {},
|
|
4086
|
+
_b[styles$d.isLink] = onClick,
|
|
4087
|
+
_b[styles$d.onDarkSurface] = isDarkSurface,
|
|
4088
4088
|
_b)), onClick: onClick, "aria-label": title, tabIndex: onClick ? 0 : -1 }, (onClick && { role: "button" }), filterAttrs(props)),
|
|
4089
|
-
img && (React.createElement("div", { className: styles$
|
|
4089
|
+
img && (React.createElement("div", { className: styles$d.image },
|
|
4090
4090
|
React.createElement(Image$2, __assign({}, img)))),
|
|
4091
|
-
React.createElement("div", { className: styles$
|
|
4092
|
-
React.createElement("span", { className: styles$
|
|
4091
|
+
React.createElement("div", { className: styles$d.content },
|
|
4092
|
+
React.createElement("span", { className: styles$d.heading }, title),
|
|
4093
4093
|
React.createElement(VerticalSpace, { size: "8" }),
|
|
4094
4094
|
text,
|
|
4095
4095
|
buttonLabel && onClick && (React.createElement(React.Fragment, null,
|
|
4096
4096
|
React.createElement(VerticalSpace, { size: "32" }),
|
|
4097
|
-
React.createElement("div", { className: styles$
|
|
4098
|
-
React.createElement("span", { className: styles$
|
|
4097
|
+
React.createElement("div", { className: styles$d.thumbnailButton },
|
|
4098
|
+
React.createElement("span", { className: styles$d.buttonIcon, role: "img", style: {
|
|
4099
4099
|
height: 24,
|
|
4100
4100
|
width: 24,
|
|
4101
4101
|
maskImage: "url(\"".concat(BtIconArrowRightFill, "\")"),
|
|
@@ -4104,54 +4104,62 @@ var ThumbnailSignpost = function (_a) {
|
|
|
4104
4104
|
React.createElement(Heading, { size: "xxs" }, buttonLabel)))))));
|
|
4105
4105
|
};
|
|
4106
4106
|
|
|
4107
|
-
var styles$
|
|
4107
|
+
var styles$c = {"PromoListingThumbnailSignpost":"PromoListingThumbnailSignpost-module_PromoListingThumbnailSignpost__0HTPV","list":"PromoListingThumbnailSignpost-module_list__E9l0E"};
|
|
4108
4108
|
|
|
4109
4109
|
/**
|
|
4110
4110
|
* Use `PromoListingThumbnailSignpost` to give supporting information about a page or proposition in the form of the ThumbnailSignposts components.
|
|
4111
4111
|
*/
|
|
4112
4112
|
var PromoListingThumbnailSignpost = function (_a) {
|
|
4113
4113
|
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"]);
|
|
4114
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4114
|
+
return (React.createElement("div", __assign({ className: styles$c.PromoListingThumbnailSignpost }, filterAttrs(props)),
|
|
4115
4115
|
React.createElement(SectionHeading, { isPadded: isPadded, "data-testid": "PromoListingThumbnailSignpost-header", heading: heading, headingLevel: headingLevel, content: content, isHeadingWordWrap: isHeadingWordWrap }),
|
|
4116
|
-
React.createElement("ul", { className: styles$
|
|
4116
|
+
React.createElement("ul", { className: styles$c.list }, thumbnailList.map(function (thumbnail, index) { return (React.createElement("li", { key: index },
|
|
4117
4117
|
React.createElement(ThumbnailSignpost, __assign({}, thumbnail)))); }))));
|
|
4118
4118
|
};
|
|
4119
4119
|
|
|
4120
|
-
var styles$
|
|
4120
|
+
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"};
|
|
4121
4121
|
|
|
4122
4122
|
var VideoCardPlayIcon = function (_a) {
|
|
4123
4123
|
var _b = _a.size, size = _b === void 0 ? "l" : _b;
|
|
4124
|
-
return (React.createElement("div", { className: classNames(styles$
|
|
4125
|
-
React.createElement("div", { className: styles$
|
|
4124
|
+
return (React.createElement("div", { className: classNames(styles$b.playIconContainer, styles$b["playIconContainer--".concat(size)]) },
|
|
4125
|
+
React.createElement("div", { className: styles$b.playIcon },
|
|
4126
4126
|
React.createElement(Icon, { icon: ArcIconPlay }))));
|
|
4127
4127
|
};
|
|
4128
4128
|
|
|
4129
|
-
var styles$
|
|
4129
|
+
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"};
|
|
4130
4130
|
|
|
4131
4131
|
var VideoCardPlayer = function (_a) {
|
|
4132
4132
|
var thumbnail = _a.thumbnail, playIconSize = _a.playIconSize, orientation = _a.orientation, children = _a.children, player = _a.player, props = __rest(_a, ["thumbnail", "playIconSize", "orientation", "children", "player"]);
|
|
4133
4133
|
var _b = useState(false), isClient = _b[0], setIsClient = _b[1];
|
|
4134
|
+
var playerWrapperRef = useRef(null);
|
|
4134
4135
|
useEffect(function () {
|
|
4135
4136
|
setIsClient(true);
|
|
4136
4137
|
}, []);
|
|
4137
|
-
var
|
|
4138
|
-
|
|
4139
|
-
|
|
4138
|
+
var handleClickPreview = useCallback(function () {
|
|
4139
|
+
// Restore focus to the player wrapper after preview is clicked.
|
|
4140
|
+
requestAnimationFrame(function () {
|
|
4141
|
+
var _a;
|
|
4142
|
+
(_a = playerWrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
4143
|
+
});
|
|
4144
|
+
}, []);
|
|
4145
|
+
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 });
|
|
4146
|
+
return (React.createElement("div", __assign({ className: styles$a.container }, filterAttrs(props)),
|
|
4147
|
+
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))),
|
|
4140
4148
|
children));
|
|
4141
4149
|
};
|
|
4142
4150
|
|
|
4143
|
-
var styles$
|
|
4151
|
+
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"};
|
|
4144
4152
|
|
|
4145
4153
|
var VideoCardThumbnail = function (_a) {
|
|
4146
4154
|
var orientation = _a.orientation, contentVisibility = _a.contentVisibility, src = _a.src, children = _a.children;
|
|
4147
|
-
var content = React.createElement("div", { className: styles$
|
|
4148
|
-
return (React.createElement("div", { className: classNames(styles$
|
|
4155
|
+
var content = React.createElement("div", { className: styles$9.thumbnailContent }, children);
|
|
4156
|
+
return (React.createElement("div", { className: classNames(styles$9.thumbnail, styles$9["thumbnail--".concat(orientation)]), style: { backgroundImage: "url(".concat(src, ")") } }, contentVisibility ? (React.createElement(Visible, __assign({}, contentVisibility), content)) : (content)));
|
|
4149
4157
|
};
|
|
4150
4158
|
|
|
4151
|
-
var styles$
|
|
4159
|
+
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"};
|
|
4152
4160
|
|
|
4153
4161
|
var VideoHeroCardContent = function (_a) {
|
|
4154
|
-
var title = _a.title, label = _a.label, description = _a.description, videoDate = _a.videoDate, duration = _a.duration, background = _a.background, subtitleAvailabilityText = _a.subtitleAvailabilityText;
|
|
4162
|
+
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;
|
|
4155
4163
|
var id = useId();
|
|
4156
4164
|
var metaItems = [
|
|
4157
4165
|
{ icon: BtIconCalendar, text: videoDate },
|
|
@@ -4162,17 +4170,17 @@ var VideoHeroCardContent = function (_a) {
|
|
|
4162
4170
|
},
|
|
4163
4171
|
];
|
|
4164
4172
|
var hasMeta = metaItems.some(function (meta) { return Boolean(meta.text); });
|
|
4165
|
-
return (React.createElement("div", { className: styles$
|
|
4166
|
-
React.createElement("div", { className: classNames(styles$
|
|
4167
|
-
React.createElement(Heading, { fontStyle: "overline" }, label),
|
|
4173
|
+
return (React.createElement("div", { className: styles$8["".concat(background, "Background")] },
|
|
4174
|
+
React.createElement("div", { className: classNames(styles$8.mainText, styles$8["mainText--".concat(background, "Background")]) },
|
|
4175
|
+
React.createElement(Heading, { level: labelLevel, fontStyle: "overline" }, label),
|
|
4168
4176
|
React.createElement(VerticalSpace, { size: "8", sizeM: "4" }),
|
|
4169
|
-
React.createElement(Heading, { level:
|
|
4177
|
+
React.createElement(Heading, { level: titleLevel, isWordWrap: false, size: "xl" }, title),
|
|
4170
4178
|
React.createElement(VerticalSpace, { size: "16" }),
|
|
4171
4179
|
React.createElement(Text, null, description)),
|
|
4172
4180
|
hasMeta && (React.createElement(React.Fragment, null,
|
|
4173
4181
|
React.createElement(VerticalSpace, { size: "32", sizeS: "16" }),
|
|
4174
|
-
React.createElement("div", { className: classNames(styles$
|
|
4175
|
-
return meta.text && (React.createElement("div", { key: "".concat(id, "-stat-").concat(i), className: styles$
|
|
4182
|
+
React.createElement("div", { className: classNames(styles$8.statContainer, styles$8["statContainer--".concat(background, "Background")]) }, metaItems.map(function (meta, i) {
|
|
4183
|
+
return meta.text && (React.createElement("div", { key: "".concat(id, "-stat-").concat(i), className: styles$8.stat },
|
|
4176
4184
|
React.createElement(Icon, { icon: meta.icon, size: 20 }),
|
|
4177
4185
|
React.createElement(Text, { size: "xs" }, meta.text)));
|
|
4178
4186
|
}))))));
|
|
@@ -4190,12 +4198,12 @@ var VideoPortraitCard = function (_a) {
|
|
|
4190
4198
|
var thumbnail = _a.thumbnail, player = _a.player, props = __rest(_a, ["thumbnail", "player"]);
|
|
4191
4199
|
return (React.createElement(VideoCardPlayer, __assign({ thumbnail: thumbnail && (React.createElement(VideoCardThumbnail, { orientation: "portrait", src: thumbnail.img },
|
|
4192
4200
|
React.createElement(Surface, { isTransparent: true, background: "dark-black" },
|
|
4193
|
-
React.createElement(Heading, { fontStyle: "overline" }, thumbnail.label),
|
|
4201
|
+
React.createElement(Heading, { fontStyle: "overline", level: thumbnail.labelLevel }, thumbnail.label),
|
|
4194
4202
|
React.createElement(VerticalSpace, { size: "8" }),
|
|
4195
|
-
React.createElement(Heading, { level:
|
|
4203
|
+
React.createElement(Heading, { level: thumbnail.titleLevel, isWordWrap: false, size: "xs" }, thumbnail.title)))), orientation: "portrait", player: player, playIconSize: "s" }, props)));
|
|
4196
4204
|
};
|
|
4197
4205
|
|
|
4198
|
-
var styles$
|
|
4206
|
+
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"};
|
|
4199
4207
|
|
|
4200
4208
|
/**
|
|
4201
4209
|
* Renders either an InformationCard or a contained MediaCard based on the card type.
|
|
@@ -4219,11 +4227,11 @@ var renderBusinessSegmentSwitcherCarousel = function (_a) {
|
|
|
4219
4227
|
xs: { itemsPerSlide: 1 },
|
|
4220
4228
|
s: { itemsPerSlide: 2 },
|
|
4221
4229
|
} },
|
|
4222
|
-
React.createElement("div", { className: styles$
|
|
4223
|
-
React.createElement("div", { className: styles$
|
|
4224
|
-
content.card3 && (React.createElement("div", { className: styles$
|
|
4230
|
+
React.createElement("div", { className: styles$7.cardWrapper }, renderCard(content.card1)),
|
|
4231
|
+
React.createElement("div", { className: styles$7.cardWrapper }, renderCard(content.card2)),
|
|
4232
|
+
content.card3 && (React.createElement("div", { className: styles$7.cardWrapper },
|
|
4225
4233
|
React.createElement(InformationCard, __assign({}, content.card3)))),
|
|
4226
|
-
React.createElement("div", { className: styles$
|
|
4234
|
+
React.createElement("div", { className: styles$7.cardWrapper },
|
|
4227
4235
|
React.createElement(TypographyCard, { heading: "All ".concat(label, " solutions"), label: content.card4.label, url: content.card4.url }))));
|
|
4228
4236
|
};
|
|
4229
4237
|
|
|
@@ -4236,8 +4244,8 @@ var BusinessSegmentSwitcher = function (_a) {
|
|
|
4236
4244
|
var tabs = _a.tabs, defaultValue = _a.defaultValue, props = __rest(_a, ["tabs", "defaultValue"]);
|
|
4237
4245
|
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 : "";
|
|
4238
4246
|
var _d = useState(initialTab), selectedTab = _d[0], setSelectedTab = _d[1];
|
|
4239
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4240
|
-
React.createElement("div", { className: styles$
|
|
4247
|
+
return (React.createElement("div", __assign({ className: styles$7.businessSegmentSwitcher }, filterAttrs(props)),
|
|
4248
|
+
React.createElement("div", { className: styles$7.businessSegmentSwitcherDesktop },
|
|
4241
4249
|
React.createElement(ContentSwitcher, { value: selectedTab, onValueChange: function (value) { return setSelectedTab(value); } },
|
|
4242
4250
|
React.createElement(ContentSwitcherList, { isInset: true }, tabs.map(function (_a, index) {
|
|
4243
4251
|
var label = _a.label, value = _a.value;
|
|
@@ -4246,42 +4254,42 @@ var BusinessSegmentSwitcher = function (_a) {
|
|
|
4246
4254
|
tabs.map(function (_a, index) {
|
|
4247
4255
|
var value = _a.value, content = _a.content, label = _a.label;
|
|
4248
4256
|
return (React.createElement(ContentSwitcherContent, { value: value, key: "".concat(index, "-").concat(value), hidden: value !== selectedTab },
|
|
4249
|
-
React.createElement("div", { className: styles$
|
|
4250
|
-
React.createElement("div", { className: styles$
|
|
4257
|
+
React.createElement("div", { className: styles$7.contentWrapper },
|
|
4258
|
+
React.createElement("div", { className: styles$7.desktopCarousel }, renderBusinessSegmentSwitcherCarousel({ content: content, label: label })),
|
|
4251
4259
|
renderCard(content.card1),
|
|
4252
4260
|
renderCard(content.card2),
|
|
4253
|
-
React.createElement("div", { className: styles$
|
|
4261
|
+
React.createElement("div", { className: styles$7.cardCol },
|
|
4254
4262
|
content.card3 && React.createElement(InformationCard, __assign({}, content.card3)),
|
|
4255
4263
|
React.createElement("div", null,
|
|
4256
4264
|
React.createElement(TypographyCard, { heading: content.card4.heading ||
|
|
4257
4265
|
"All ".concat(label.toLowerCase(), " solutions"), text: content.card4.text, label: content.card4.label, url: content.card4.url, onClick: content.card4.onClick }))))));
|
|
4258
4266
|
}))),
|
|
4259
|
-
React.createElement("div", { className: styles$
|
|
4267
|
+
React.createElement("div", { className: styles$7.businessSegmentSwitcherMobile },
|
|
4260
4268
|
React.createElement(ContentSwitcherDropdown, { isInset: true, value: selectedTab, tabs: tabs, isFluid: true, onValueChange: function (value) { return setSelectedTab(value); } }, tabs.map(function (_a, index) {
|
|
4261
4269
|
var value = _a.value, content = _a.content, label = _a.label;
|
|
4262
4270
|
return (React.createElement(ContentSwitcherDropdownContent, { value: value, key: "".concat(index, "-").concat(value) },
|
|
4263
|
-
React.createElement("div", { className: styles$
|
|
4271
|
+
React.createElement("div", { className: styles$7.contentWrapper }, renderBusinessSegmentSwitcherCarousel({ content: content, label: label }))));
|
|
4264
4272
|
})))));
|
|
4265
4273
|
};
|
|
4266
4274
|
|
|
4267
|
-
var styles$
|
|
4275
|
+
var styles$6 = {"subgroupHeader":"PartnerLogoSubgroup-module_subgroupHeader__rXAai","logoGroup":"PartnerLogoSubgroup-module_logoGroup__RYsTN","logoWrapper":"PartnerLogoSubgroup-module_logoWrapper__tyxVI","logoImage":"PartnerLogoSubgroup-module_logoImage__h7DJd"};
|
|
4268
4276
|
|
|
4269
4277
|
var PartnerLogoSubgroup = function (_a) {
|
|
4270
4278
|
var subheading = _a.subheading, text = _a.text, headingLevel = _a.headingLevel, logos = _a.logos, _b = _a.tileHeight, tileHeight = _b === void 0 ? 72 : _b;
|
|
4271
4279
|
var hasHeader = subheading || text;
|
|
4272
4280
|
var id = useId();
|
|
4273
4281
|
return (React.createElement(React.Fragment, null,
|
|
4274
|
-
hasHeader && (React.createElement("div", { className: styles$
|
|
4282
|
+
hasHeader && (React.createElement("div", { className: styles$6.subgroupHeader },
|
|
4275
4283
|
React.createElement(Columns, { isGutterless: true },
|
|
4276
4284
|
React.createElement(ColumnsCol, { spanL: 9, spanXL: 8 },
|
|
4277
4285
|
subheading && (React.createElement(Heading, { level: headingLevel, size: "s", isResponsive: false }, subheading)),
|
|
4278
4286
|
subheading && text && React.createElement(VerticalSpace, { size: "8" }),
|
|
4279
4287
|
text && (React.createElement(Text, { size: "m", tone: "supporting" }, text)))))),
|
|
4280
|
-
React.createElement("div", { className: styles$
|
|
4281
|
-
React.createElement("img", { src: logo.src, alt: logo.alt, className: styles$
|
|
4288
|
+
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 } },
|
|
4289
|
+
React.createElement("img", { src: logo.src, alt: logo.alt, className: styles$6.logoImage }))); }))));
|
|
4282
4290
|
};
|
|
4283
4291
|
|
|
4284
|
-
var styles = {"subgroupList":"PartnerBrandLogos-module_subgroupList__4e1kv"};
|
|
4292
|
+
var styles$5 = {"subgroupList":"PartnerBrandLogos-module_subgroupList__4e1kv"};
|
|
4285
4293
|
|
|
4286
4294
|
var getSubheadingLevel = function (parentLevel, subLevel) {
|
|
4287
4295
|
return subLevel !== null && subLevel !== void 0 ? subLevel : String(Math.min(Number(parentLevel) + 1, 6));
|
|
@@ -4305,9 +4313,119 @@ var PartnerBrandLogos = function (_a) {
|
|
|
4305
4313
|
React.createElement(VerticalSpace, __assign({}, rulerTopPadding)),
|
|
4306
4314
|
React.createElement(Rule, null),
|
|
4307
4315
|
React.createElement(VerticalSpace, __assign({}, rulerBottomPadding)),
|
|
4308
|
-
React.createElement("ul", { className: styles.subgroupList }, subgroups.map(function (subgroup, i) { return (React.createElement("li", { key: "subgroup-".concat(componentId, "-").concat(i) },
|
|
4316
|
+
React.createElement("ul", { className: styles$5.subgroupList }, subgroups.map(function (subgroup, i) { return (React.createElement("li", { key: "subgroup-".concat(componentId, "-").concat(i) },
|
|
4309
4317
|
React.createElement(PartnerLogoSubgroup, { subheading: subgroup.subheading, text: subgroup.text, headingLevel: getSubheadingLevel(headingLevel, subgroup.subheadingLevel), logos: subgroup.logos, tileHeight: subgroup.tileHeight }))); }))));
|
|
4310
4318
|
};
|
|
4311
4319
|
|
|
4312
|
-
|
|
4320
|
+
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"};
|
|
4321
|
+
|
|
4322
|
+
var ProductCard = function (_a) {
|
|
4323
|
+
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"]);
|
|
4324
|
+
var headingId = useId();
|
|
4325
|
+
return (React.createElement("div", __assign({ className: styles$4.productCard }, filterAttrs(props), { role: "group", "aria-labelledby": headingId }),
|
|
4326
|
+
React.createElement("div", { className: styles$4.productCardTop },
|
|
4327
|
+
promoted && (React.createElement("div", { className: styles$4.productCardPromoted },
|
|
4328
|
+
React.createElement(Surface, { background: promoted.background, paddingVertical: "16", paddingHorizontal: "24" },
|
|
4329
|
+
React.createElement(VisuallyHidden, null, "Promotional offer. "),
|
|
4330
|
+
React.createElement(Text, { size: "s" }, promoted.content)))),
|
|
4331
|
+
React.createElement("div", { className: styles$4.productCardTopSection },
|
|
4332
|
+
React.createElement(Heading, { id: headingId, size: "m", level: headingLevel, color: "brand" }, heading),
|
|
4333
|
+
React.createElement(VerticalSpace, { size: "16" }),
|
|
4334
|
+
topSlot)),
|
|
4335
|
+
React.createElement("div", { className: styles$4.productCardBottom },
|
|
4336
|
+
divider ? (React.createElement("div", { className: styles$4.divider },
|
|
4337
|
+
React.createElement(Rule, null))) : (React.createElement(VerticalSpace, { size: "16" })),
|
|
4338
|
+
bottomSlot,
|
|
4339
|
+
React.createElement(VerticalSpace, { size: "24" }),
|
|
4340
|
+
React.createElement("div", { className: styles$4.ctaWrapper },
|
|
4341
|
+
React.createElement(ButtonV2, __assign({ label: "Explore ".concat(heading), buttonStyle: "secondary", isFullWidth: true }, button))))));
|
|
4342
|
+
};
|
|
4343
|
+
|
|
4344
|
+
var styles$3 = {"benefitList":"ProductCardBenefits-module_benefitList__Qb1io","benefitItem":"ProductCardBenefits-module_benefitItem__nJqa6"};
|
|
4345
|
+
|
|
4346
|
+
var ProductCardBenefits = function (_a) {
|
|
4347
|
+
var _b = _a.heading, heading = _b === void 0 ? "Includes:" : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "4" : _c, benefits = _a.benefits;
|
|
4348
|
+
return (React.createElement(React.Fragment, null,
|
|
4349
|
+
React.createElement(Heading, { size: "xs", level: headingLevel }, heading),
|
|
4350
|
+
React.createElement(VerticalSpace, { size: "12" }),
|
|
4351
|
+
React.createElement("ul", { className: styles$3.benefitList }, benefits.map(function (benefit, index) { return (React.createElement("li", { key: index, className: styles$3.benefitItem },
|
|
4352
|
+
React.createElement(Icon, { icon: benefit.icon, color: "brand", size: 24 }),
|
|
4353
|
+
benefit.benefit)); }))));
|
|
4354
|
+
};
|
|
4355
|
+
|
|
4356
|
+
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"};
|
|
4357
|
+
|
|
4358
|
+
var ProductCardPriceIncrease = function (_a) {
|
|
4359
|
+
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;
|
|
4360
|
+
return (React.createElement(React.Fragment, null,
|
|
4361
|
+
React.createElement(VerticalSpace, { size: "16" }),
|
|
4362
|
+
React.createElement(Heading, { size: "xs", level: headingLevel }, heading),
|
|
4363
|
+
React.createElement(VerticalSpace, { size: "12" }),
|
|
4364
|
+
React.createElement("div", { className: styles$2.priceIncreaseWrapper },
|
|
4365
|
+
React.createElement("div", { className: styles$2.priceIncreaseBorder }),
|
|
4366
|
+
React.createElement("ul", { className: styles$2.priceIncreaseList }, items.map(function (item, index) { return (React.createElement("li", { key: index, className: styles$2.priceIncreaseItem }, item)); })))));
|
|
4367
|
+
};
|
|
4368
|
+
|
|
4369
|
+
var styles$1 = {"productCardPrice":"ProductCardPrice-module_productCardPrice__6k4kU"};
|
|
4370
|
+
|
|
4371
|
+
var ProductCardPrice = function (_a) {
|
|
4372
|
+
var prefix = _a.prefix, value = _a.value, suffix = _a.suffix;
|
|
4373
|
+
return (React.createElement("div", { className: styles$1.productCardPrice },
|
|
4374
|
+
prefix && (React.createElement(Text, { tone: "muted", size: "s" }, prefix)),
|
|
4375
|
+
React.createElement(Heading, { color: "brand", size: "m" }, value),
|
|
4376
|
+
suffix && (React.createElement(Text, { tone: "muted", size: "s" }, suffix))));
|
|
4377
|
+
};
|
|
4378
|
+
|
|
4379
|
+
var styles = {"cardGrid":"CardGrid-module_cardGrid__b6S6h","cardGridItem":"CardGrid-module_cardGridItem__xy0D3"};
|
|
4380
|
+
|
|
4381
|
+
var CardGrid = function (_a) {
|
|
4382
|
+
var cards = _a.cards, cardsRevealed = _a.cardsRevealed, fourthCardRef = _a.fourthCardRef, props = __rest(_a, ["cards", "cardsRevealed", "fourthCardRef"]);
|
|
4383
|
+
return (React.createElement(React.Fragment, null,
|
|
4384
|
+
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)); })),
|
|
4385
|
+
React.createElement(VerticalSpace, { size: "24", sizeXL: "32" })));
|
|
4386
|
+
};
|
|
4387
|
+
|
|
4388
|
+
var ProductCardGrid = function (_a) {
|
|
4389
|
+
var _b, _c, _d, _e, _f;
|
|
4390
|
+
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"]);
|
|
4391
|
+
var _j = useState(expanded), cardsRevealed = _j[0], setCardsRevealed = _j[1];
|
|
4392
|
+
var _k = 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];
|
|
4393
|
+
var fourthCardRef = useRef(null);
|
|
4394
|
+
var cardContext = useId();
|
|
4395
|
+
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;
|
|
4396
|
+
var hasMoreCards = ((_d = activeCards === null || activeCards === void 0 ? void 0 : activeCards.length) !== null && _d !== void 0 ? _d : 0) > 3;
|
|
4397
|
+
var remainingCards = Math.max(((_e = activeCards === null || activeCards === void 0 ? void 0 : activeCards.length) !== null && _e !== void 0 ? _e : 0) - 3, 0);
|
|
4398
|
+
var showMore = function () {
|
|
4399
|
+
setCardsRevealed(true);
|
|
4400
|
+
setTimeout(function () {
|
|
4401
|
+
var _a;
|
|
4402
|
+
(_a = fourthCardRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
4403
|
+
}, 0);
|
|
4404
|
+
};
|
|
4405
|
+
var showLess = function () {
|
|
4406
|
+
setCardsRevealed(false);
|
|
4407
|
+
};
|
|
4408
|
+
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
4409
|
+
React.createElement(SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, content: content, headingLevel: headingLevel, isPadded: true }),
|
|
4410
|
+
tabs && !hideTabs && (React.createElement(Tabs, { defaultValue: (_f = tabs[0]) === null || _f === void 0 ? void 0 : _f.value, onValueChange: function (value) {
|
|
4411
|
+
setActiveTab(value);
|
|
4412
|
+
} },
|
|
4413
|
+
React.createElement(TabsList, { type: "standard" }, tabs.map(function (tab) { return (React.createElement(TabsItem, { key: tab.value, label: tab.label, value: tab.value, icon: tab.icon, iconActive: tab.iconActive })); })),
|
|
4414
|
+
tabs.map(function (tab) { return (React.createElement(TabsContent, { key: tab.value, value: tab.value },
|
|
4415
|
+
React.createElement(VerticalSpace, { size: "24", sizeL: "32" }),
|
|
4416
|
+
React.createElement(CardGrid, { cards: tab.cards, cardsRevealed: cardsRevealed, fourthCardRef: tab.value === activeTab ? fourthCardRef : { current: null } }))); }))),
|
|
4417
|
+
(tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 && hideTabs && (React.createElement(React.Fragment, null,
|
|
4418
|
+
React.createElement(CardGrid, { cards: tabs[0].cards, cardsRevealed: cardsRevealed, fourthCardRef: fourthCardRef }))),
|
|
4419
|
+
!expanded && hasMoreCards && (React.createElement(React.Fragment, null,
|
|
4420
|
+
React.createElement(Rule, null),
|
|
4421
|
+
React.createElement("span", { id: cardContext, style: { display: "none" } }, remainingCards === 1
|
|
4422
|
+
? "".concat(remainingCards, " card")
|
|
4423
|
+
: "".concat(remainingCards, " cards")),
|
|
4424
|
+
React.createElement(Align, { horizontal: "center" },
|
|
4425
|
+
React.createElement(VerticalSpace, { size: "16" }),
|
|
4426
|
+
!cardsRevealed && (React.createElement(ButtonV2, { label: "Show more", buttonStyle: "secondary", onClick: showMore, "aria-describedby": cardContext })),
|
|
4427
|
+
cardsRevealed && (React.createElement(ButtonV2, { label: "Show less", buttonStyle: "secondary", onClick: showLess, "aria-describedby": cardContext })))))));
|
|
4428
|
+
};
|
|
4429
|
+
|
|
4430
|
+
export { Accordion, ActionTile, ArticleCarousel, ArticleSidebar, Author, BannerWithTabs, BusinessSegmentSwitcher, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, HeaderBarNotification, Highlights, InlineLinkGroup, LinkTile, PartnerBrandLogos, ProductCard, ProductCardBenefits, ProductCardGrid, ProductCardPrice, ProductCardPriceIncrease, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost, VideoHeroCard, VideoPortraitCard };
|
|
4313
4431
|
//# sourceMappingURL=index.mjs.map
|