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