@arc-ui/community-components 3.4.0 → 3.6.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 +37 -37
- package/CHANGELOG.md +20 -0
- package/lib/Accordion/Accordion.cjs +3 -2
- package/lib/Accordion/Accordion.mjs +3 -2
- package/lib/ActionTile/ActionTile.cjs +7 -5
- package/lib/ActionTile/ActionTile.mjs +6 -4
- package/lib/ActionTile/styles.css +1 -1
- package/lib/ArticleSidebar/ArticleSidebar.cjs +10 -9
- package/lib/ArticleSidebar/ArticleSidebar.mjs +3 -2
- package/lib/Author/Author.cjs +3 -2
- package/lib/Author/Author.mjs +3 -2
- package/lib/BannerWithTabs/BannerWithTabs.cjs +6 -5
- package/lib/BannerWithTabs/BannerWithTabs.mjs +5 -4
- package/lib/BusinessSegmentSwitcher/BusinessSegmentSwitcher.cjs +81 -0
- package/lib/BusinessSegmentSwitcher/BusinessSegmentSwitcher.mjs +79 -0
- package/lib/BusinessSegmentSwitcher/styles.css +1 -0
- package/lib/ContentInfoWidget/ContentInfoWidget.cjs +4 -3
- package/lib/ContentInfoWidget/ContentInfoWidget.mjs +2 -1
- package/lib/CopyLead/CopyLead.cjs +17 -16
- package/lib/CopyLead/CopyLead.mjs +3 -2
- package/lib/DownloadList/DownloadList.cjs +6 -5
- package/lib/DownloadList/DownloadList.mjs +3 -2
- package/lib/FAQs/FAQs.cjs +6 -5
- package/lib/FAQs/FAQs.mjs +4 -3
- package/lib/FeaturePost/FeaturePost.cjs +12 -11
- package/lib/FeaturePost/FeaturePost.mjs +3 -2
- package/lib/Highlights/Highlights.cjs +12 -11
- package/lib/Highlights/Highlights.mjs +4 -3
- package/lib/InlineLinkGroup/InlineLinkGroup.cjs +4 -3
- package/lib/InlineLinkGroup/InlineLinkGroup.mjs +2 -1
- package/lib/LinkTile/LinkTile.cjs +3 -3
- package/lib/LinkTile/LinkTile.mjs +2 -2
- package/lib/LinkTile/styles.css +1 -1
- package/lib/ProductNavigation/ProductNavigation.cjs +6 -5
- package/lib/ProductNavigation/ProductNavigation.mjs +3 -2
- package/lib/PromoListing/PromoListing.cjs +7 -6
- package/lib/PromoListing/PromoListing.mjs +3 -2
- package/lib/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.cjs +7 -6
- package/lib/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.mjs +4 -3
- package/lib/Quote/Quote.cjs +6 -5
- package/lib/Quote/Quote.mjs +3 -2
- package/lib/SectionHeading/SectionHeading.cjs +3 -2
- package/lib/SectionHeading/SectionHeading.mjs +3 -2
- package/lib/Statistics/Statistics.cjs +6 -5
- package/lib/Statistics/Statistics.mjs +3 -2
- package/lib/Summary/Summary.cjs +4 -3
- package/lib/Summary/Summary.mjs +2 -1
- package/lib/ThumbnailSignpost/ThumbnailSignpost.cjs +3 -2
- package/lib/ThumbnailSignpost/ThumbnailSignpost.mjs +3 -2
- package/lib/VideoHeroCard/VideoHeroCard.cjs +7 -6
- package/lib/VideoHeroCard/VideoHeroCard.mjs +3 -2
- package/lib/VideoPortraitCard/VideoPortraitCard.cjs +5 -4
- package/lib/VideoPortraitCard/VideoPortraitCard.mjs +3 -2
- package/lib/_shared/cjs/{Accordion-QqDoB3pY.cjs → Accordion-DfNGOjTm.cjs} +9 -8
- package/lib/_shared/cjs/{Author-aL8YXi7C.cjs → Author-D4dKNQem.cjs} +5 -4
- package/lib/_shared/cjs/{SectionHeading-Dj-dJfv3.cjs → SectionHeading-DeSFM0HV.cjs} +5 -4
- package/lib/_shared/cjs/{ThumbnailSignpost-SBnrGooA.cjs → ThumbnailSignpost-GkOiwt-Z.cjs} +5 -4
- package/lib/_shared/cjs/{VideoCardThumbnail-BqYgpk0u.cjs → VideoCardThumbnail-N5iC-cAU.cjs} +7 -6
- package/lib/_shared/cjs/filter-attrs-BizjMsy0.cjs +27 -0
- package/lib/_shared/cjs/{filter-attrs-C26zOt4_.cjs → tslib.es6-BxB9I209.cjs} +0 -25
- package/lib/_shared/esm/{Accordion-DtU7jbCv.mjs → Accordion-DSRlkcXi.mjs} +2 -1
- package/lib/_shared/esm/{Author-CJQFrQM9.mjs → Author-CLMgH9ES.mjs} +2 -1
- package/lib/_shared/esm/{SectionHeading-BskdQ2Tt.mjs → SectionHeading-DSwsdNSp.mjs} +2 -1
- package/lib/_shared/esm/{ThumbnailSignpost-CBSdQiHw.mjs → ThumbnailSignpost-BtaHAB0h.mjs} +2 -1
- package/lib/_shared/esm/{VideoCardThumbnail-VfOKmPCv.mjs → VideoCardThumbnail-Tbh7Xi-X.mjs} +2 -1
- package/lib/_shared/esm/filter-attrs-DZ7RCEZm.mjs +25 -0
- package/lib/_shared/esm/{filter-attrs-D-1kWaCP.mjs → tslib.es6-BVXMhEem.mjs} +1 -25
- package/lib/index.cjs +207 -135
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +66 -4
- package/lib/index.d.mts +66 -4
- package/lib/index.mjs +207 -136
- package/lib/index.mjs.map +1 -1
- package/lib/styles.css +1 -1
- package/package.json +4 -4
- package/src/components/ActionTile/ActionTile.module.css +1 -0
- package/src/components/ActionTile/ActionTile.tsx +11 -3
- package/src/components/BannerWithTabs/BannerWithTabs.tsx +7 -0
- package/src/components/BusinessSegmentSwitcher/BusinessSegmentSwitcher.module.css +92 -0
- package/src/components/BusinessSegmentSwitcher/BusinessSegmentSwitcher.tsx +119 -0
- package/src/components/BusinessSegmentSwitcher/helpers/renderBusinessSegmentSwitcherCarousel.tsx +45 -0
- package/src/components/BusinessSegmentSwitcher/helpers/renderCard.tsx +17 -0
- package/src/components/BusinessSegmentSwitcher/index.ts +9 -0
- package/src/components/BusinessSegmentSwitcher/types/types.ts +45 -0
- package/src/components/Highlights/Highlights.tsx +2 -1
- package/src/components/LinkTile/LinkTile.module.css +8 -4
- package/src/components/LinkTile/LinkTile.tsx +1 -2
- package/src/components/index.ts +1 -0
- package/versions.json +1 -1
package/lib/index.cjs
CHANGED
|
@@ -33,6 +33,8 @@ var Visible = require('@arc-ui/components/Visible');
|
|
|
33
33
|
var Spacing = require('@arc-ui/components/Spacing');
|
|
34
34
|
var ReactPlayer = require('react-player');
|
|
35
35
|
var Surface = require('@arc-ui/components/Surface');
|
|
36
|
+
var ContentSwitcher = require('@arc-ui/components/ContentSwitcher');
|
|
37
|
+
var ContentSwitcherDropdown = require('@arc-ui/components/ContentSwitcherDropdown');
|
|
36
38
|
|
|
37
39
|
/******************************************************************************
|
|
38
40
|
Copyright (c) Microsoft Corporation.
|
|
@@ -242,17 +244,17 @@ function requireClassnames () {
|
|
|
242
244
|
var classnamesExports = requireClassnames();
|
|
243
245
|
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
244
246
|
|
|
245
|
-
var styles$
|
|
247
|
+
var styles$r = {"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"};
|
|
246
248
|
|
|
247
249
|
var AccordionHeading = function (_a) {
|
|
248
250
|
var _b, _c;
|
|
249
251
|
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"]);
|
|
250
252
|
return (React.createElement("div", __assign({ className: classNames((_b = {},
|
|
251
|
-
_b[styles$
|
|
252
|
-
_b[styles$
|
|
253
|
-
_b[styles$
|
|
253
|
+
_b[styles$r["accordion-header"]] = true,
|
|
254
|
+
_b[styles$r["accordion-header--padded"]] = isPadded,
|
|
255
|
+
_b[styles$r["accordion-header--headingSizeM"]] = headingSize === "m",
|
|
254
256
|
_b)) }, filterAttrs(props)),
|
|
255
|
-
React.createElement("div", { className: classNames((_c = {}, _c[styles$
|
|
257
|
+
React.createElement("div", { className: classNames((_c = {}, _c[styles$r["accordion-header--hasImage"]] = image, _c)) },
|
|
256
258
|
image && (React.createElement("div", null,
|
|
257
259
|
React.createElement(Image$2.Image, __assign({}, image, { width: 68, fit: "cover" })))),
|
|
258
260
|
React.createElement(Heading.Heading, { level: headingLevel, id: id, size: headingSize }, heading)),
|
|
@@ -261,30 +263,30 @@ var AccordionHeading = function (_a) {
|
|
|
261
263
|
React.createElement(Text.Text, { size: "l", elementType: "p" }, content)))));
|
|
262
264
|
};
|
|
263
265
|
|
|
264
|
-
var styles$
|
|
266
|
+
var styles$q = {"AccordionDisclosureListItem":"AccordionDisclosureList-module_AccordionDisclosureListItem__p8LIT"};
|
|
265
267
|
|
|
266
268
|
var AccordionDisclosureList = function (_a) {
|
|
267
269
|
var disclosureList = _a.disclosureList;
|
|
268
270
|
return (React.createElement("ul", null, disclosureList.map(function (_a) {
|
|
269
271
|
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"]);
|
|
270
|
-
return (React.createElement("li", { key: id, className: styles$
|
|
272
|
+
return (React.createElement("li", { key: id, className: styles$q.AccordionDisclosureListItem, id: id },
|
|
271
273
|
React.createElement(Disclosure.Disclosure, __assign({ summary: summary, isOpen: isOpen, indentDetails: indentDetails, headingLevel: headingLevel }, filterAttrs(props)), children)));
|
|
272
274
|
})));
|
|
273
275
|
};
|
|
274
276
|
|
|
275
|
-
var styles$
|
|
277
|
+
var styles$p = {"Accordion":"Accordion-module_Accordion__LsXTU"};
|
|
276
278
|
|
|
277
279
|
/**
|
|
278
280
|
* Use the `Accordion` component to package together a title, content and a number of disclosure components into one section (maximum 10).
|
|
279
281
|
*/
|
|
280
282
|
var Accordion = function (_a) {
|
|
281
283
|
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"]);
|
|
282
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
284
|
+
return (React.createElement("div", __assign({ className: styles$p.Accordion }, filterAttrs(props)),
|
|
283
285
|
React.createElement(AccordionHeading, { isPadded: true, id: id, "data-testid": "Accordion-header", heading: heading, headingLevel: headingLevel, headingSize: headingSize, content: content }),
|
|
284
286
|
React.createElement(AccordionDisclosureList, { disclosureList: disclosureList })));
|
|
285
287
|
};
|
|
286
288
|
|
|
287
|
-
var styles$
|
|
289
|
+
var styles$o = {"authorContent":"Author-module_authorContent__TBY7b","largeAvatar":"Author-module_largeAvatar__Vco03"};
|
|
288
290
|
|
|
289
291
|
var Author = function (_a) {
|
|
290
292
|
var name = _a.name, title = _a.title, _b = _a.avatar, avatar = _b === void 0 ? {} : _b, props = __rest(_a, ["name", "title", "avatar"]);
|
|
@@ -295,10 +297,10 @@ var Author = function (_a) {
|
|
|
295
297
|
React.createElement(Grid.Grid, { isFluid: true, isGutterless: true },
|
|
296
298
|
React.createElement(Grid.GridRow, { align: "center" },
|
|
297
299
|
React.createElement(Grid.GridCol, { xs: isLargeAvatar ? 12 : "auto" },
|
|
298
|
-
React.createElement("div", { className: isLargeAvatar ? styles$
|
|
300
|
+
React.createElement("div", { className: isLargeAvatar ? styles$o.largeAvatar : undefined },
|
|
299
301
|
React.createElement(Avatar.Avatar, __assign({}, avatar)))),
|
|
300
302
|
React.createElement(Grid.GridCol, null,
|
|
301
|
-
React.createElement("div", { className: "".concat(!isLargeAvatar && styles$
|
|
303
|
+
React.createElement("div", { className: "".concat(!isLargeAvatar && styles$o.authorContent), "data-testid": "authorContent" },
|
|
302
304
|
React.createElement(Heading.Heading, { size: "xs" }, name),
|
|
303
305
|
React.createElement(Text.Text, { size: "s" }, title)))))));
|
|
304
306
|
};
|
|
@@ -322,35 +324,35 @@ var MultiLineText = function (_a) {
|
|
|
322
324
|
React.createElement(Text.Text, __assign({}, textProps), paragraph))); })));
|
|
323
325
|
};
|
|
324
326
|
|
|
325
|
-
var styles$
|
|
327
|
+
var styles$n = {"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"};
|
|
326
328
|
|
|
327
329
|
var MediaContent$1 = function (_a) {
|
|
328
330
|
var heading = _a.heading, id = _a.id, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content;
|
|
329
|
-
return (React.createElement("div", { className: styles$
|
|
331
|
+
return (React.createElement("div", { className: styles$n.mediaContainer },
|
|
330
332
|
React.createElement(Heading.Heading, { id: id, level: headingLevel, isWordWrap: isHeadingWordWrap, size: "xl" }, heading),
|
|
331
|
-
content && (React.createElement("div", { className: styles$
|
|
333
|
+
content && (React.createElement("div", { className: styles$n.content },
|
|
332
334
|
React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
|
|
333
335
|
React.createElement(MultiLineText, { text: content, size: "l" })))));
|
|
334
336
|
};
|
|
335
337
|
|
|
336
338
|
var Image$1 = function (_a) {
|
|
337
339
|
var sources = _a.sources, props = __rest(_a, ["sources"]);
|
|
338
|
-
return (React.createElement("div", { className: styles$
|
|
340
|
+
return (React.createElement("div", { className: styles$n.imgWrapper },
|
|
339
341
|
React.createElement(Image$2.Image, __assign({ fadeOnLoad: true }, props), sources &&
|
|
340
342
|
sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))));
|
|
341
343
|
};
|
|
342
344
|
|
|
343
345
|
var IconList = function (_a) {
|
|
344
346
|
var listItems = _a.listItems, isLgScreen = _a.isLgScreen, _b = _a.headingLevel, headingLevel = _b === void 0 ? "3" : _b;
|
|
345
|
-
return (React.createElement("ul", { className: styles$
|
|
347
|
+
return (React.createElement("ul", { className: styles$n.list }, listItems.map(function (_a) {
|
|
346
348
|
var _b;
|
|
347
349
|
var icon = _a.icon, heading = _a.heading, text = _a.text;
|
|
348
|
-
return (React.createElement("li", { key: heading, className: classNames(styles$
|
|
349
|
-
_b[styles$
|
|
350
|
+
return (React.createElement("li", { key: heading, className: classNames(styles$n.listItem, (_b = {},
|
|
351
|
+
_b[styles$n.listItemCentered] = !text,
|
|
350
352
|
_b)) },
|
|
351
|
-
React.createElement("div", { className: styles$
|
|
353
|
+
React.createElement("div", { className: styles$n.listItemIconContainer },
|
|
352
354
|
React.createElement(Icon.Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
|
|
353
|
-
React.createElement("div", { className: styles$
|
|
355
|
+
React.createElement("div", { className: styles$n.listItemTextContainer },
|
|
354
356
|
React.createElement(Heading.Heading, { level: headingLevel, size: "s" }, heading),
|
|
355
357
|
text && (React.createElement(React.Fragment, null,
|
|
356
358
|
React.createElement(VerticalSpace.VerticalSpace, { size: "8", sizeL: "16" }),
|
|
@@ -358,20 +360,20 @@ var IconList = function (_a) {
|
|
|
358
360
|
})));
|
|
359
361
|
};
|
|
360
362
|
|
|
361
|
-
var Button = function (props) { return (React.createElement("div", { className: styles$
|
|
363
|
+
var Button = function (props) { return (React.createElement("div", { className: styles$n.buttonContainer },
|
|
362
364
|
React.createElement(ButtonV2.ButtonV2, __assign({ isFullWidth: true, buttonStyle: "secondary" }, props)))); };
|
|
363
365
|
|
|
364
366
|
var Container = function (_a) {
|
|
365
367
|
var _b;
|
|
366
368
|
var children = _a.children, isReverseOrder = _a.isReverseOrder, type = _a.type, alignment = _a.alignment;
|
|
367
|
-
return (React.createElement("div", { "data-testid": "copy-lead-container", className: classNames(styles$
|
|
368
|
-
_b[styles$
|
|
369
|
+
return (React.createElement("div", { "data-testid": "copy-lead-container", className: classNames(styles$n.container, styles$n["container--".concat(type)], styles$n["container--align-".concat(alignment)], (_b = {},
|
|
370
|
+
_b[styles$n["container--reverse"]] = isReverseOrder,
|
|
369
371
|
_b)) }, children));
|
|
370
372
|
};
|
|
371
373
|
|
|
372
374
|
var Column = function (_a) {
|
|
373
375
|
var children = _a.children;
|
|
374
|
-
return (React.createElement("div", { className: styles$
|
|
376
|
+
return (React.createElement("div", { className: styles$n.col }, children));
|
|
375
377
|
};
|
|
376
378
|
|
|
377
379
|
var getListHeadingLevel$1 = function (level) {
|
|
@@ -411,16 +413,16 @@ var MediaTemplate = function (_a) {
|
|
|
411
413
|
image && !video && React.createElement(Image$1, __assign({}, image))))));
|
|
412
414
|
};
|
|
413
415
|
|
|
414
|
-
var styles$
|
|
416
|
+
var styles$m = {"section-header":"SectionHeading-module_section-header__iB07I","section-header--hasImage":"SectionHeading-module_section-header--hasImage__Ka3T7","section-header--padded":"SectionHeading-module_section-header--padded__0FXP2"};
|
|
415
417
|
|
|
416
418
|
var SectionHeading = function (_a) {
|
|
417
419
|
var _b, _c;
|
|
418
420
|
var heading = _a.heading, content = _a.content, id = _a.id, image = _a.image, isHeadingWordWrap = _a.isHeadingWordWrap, _d = _a.isPadded, isPadded = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, props = __rest(_a, ["heading", "content", "id", "image", "isHeadingWordWrap", "isPadded", "headingLevel"]);
|
|
419
421
|
return (React.createElement("div", __assign({ className: classNames((_b = {},
|
|
420
|
-
_b[styles$
|
|
421
|
-
_b[styles$
|
|
422
|
+
_b[styles$m["section-header"]] = true,
|
|
423
|
+
_b[styles$m["section-header--padded"]] = isPadded,
|
|
422
424
|
_b)) }, filterAttrs(props)),
|
|
423
|
-
React.createElement("div", { className: classNames((_c = {}, _c[styles$
|
|
425
|
+
React.createElement("div", { className: classNames((_c = {}, _c[styles$m["section-header--hasImage"]] = image, _c)) },
|
|
424
426
|
image && (React.createElement("div", null,
|
|
425
427
|
React.createElement(Image$2.Image, __assign({}, image, { width: 68, fit: "cover" })))),
|
|
426
428
|
React.createElement(Heading.Heading, { level: headingLevel, id: id, size: "xl", isWordWrap: isHeadingWordWrap }, heading)),
|
|
@@ -457,12 +459,12 @@ var CopyLead = function (_a) {
|
|
|
457
459
|
return null;
|
|
458
460
|
};
|
|
459
461
|
|
|
460
|
-
var styles$
|
|
462
|
+
var styles$l = {"headingContainer":"DownloadList-module_headingContainer__PNio8"};
|
|
461
463
|
|
|
462
464
|
var DownloadList = function (_a) {
|
|
463
465
|
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, props = __rest(_a, ["heading", "id", "headingLevel", "isHeadingWordWrap", "content", "downloads"]);
|
|
464
466
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
465
|
-
React.createElement("div", { className: styles$
|
|
467
|
+
React.createElement("div", { className: styles$l.headingContainer },
|
|
466
468
|
React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
|
|
467
469
|
React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
|
|
468
470
|
downloads.map(function (downloadProps, i) { return (React.createElement(React.Fragment, { key: "download-".concat(i) },
|
|
@@ -470,7 +472,7 @@ var DownloadList = function (_a) {
|
|
|
470
472
|
i !== downloads.length - 1 && React.createElement(VerticalSpace.VerticalSpace, { size: "16" }))); })));
|
|
471
473
|
};
|
|
472
474
|
|
|
473
|
-
var styles$
|
|
475
|
+
var styles$k = {"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"};
|
|
474
476
|
|
|
475
477
|
var scrollToSectionFocusFirstElement = function (item) {
|
|
476
478
|
var _a, _b, _c, _d, _e;
|
|
@@ -484,23 +486,23 @@ var scrollToSectionFocusFirstElement = function (item) {
|
|
|
484
486
|
var FAQs = function (_a) {
|
|
485
487
|
var _b;
|
|
486
488
|
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"]);
|
|
487
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
489
|
+
return (React.createElement("div", __assign({ className: styles$k.FAQs }, filterAttrs(props)),
|
|
488
490
|
React.createElement(SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, content: content, image: image, headingLevel: headingLevel, isPadded: isPadded }),
|
|
489
|
-
type === "listWithLinks" && (React.createElement("div", { className: styles$
|
|
490
|
-
React.createElement("div", { className: styles$
|
|
491
|
+
type === "listWithLinks" && (React.createElement("div", { className: styles$k.linkListSection },
|
|
492
|
+
React.createElement("div", { className: styles$k.linkListTitle },
|
|
491
493
|
React.createElement(Heading.Heading, { size: "xs" }, linkListHeading)),
|
|
492
494
|
React.createElement("ul", { className: classNames((_b = {},
|
|
493
|
-
_b[styles$
|
|
494
|
-
_b[styles$
|
|
495
|
+
_b[styles$k.linkList] = true,
|
|
496
|
+
_b[styles$k["linkList--padded"]] = isPadded,
|
|
495
497
|
_b)) }, accordionData.map(function (item) {
|
|
496
498
|
var _a;
|
|
497
|
-
return (React.createElement("li", { className: styles$
|
|
499
|
+
return (React.createElement("li", { className: styles$k.linkListItem, key: item.heading },
|
|
498
500
|
React.createElement(Link.Link, { title: item.heading, href: "#".concat(item.id), onClick: function (e) {
|
|
499
501
|
e.preventDefault();
|
|
500
502
|
scrollToSectionFocusFirstElement(item);
|
|
501
503
|
} }, (_a = item.altLinkTitle) !== null && _a !== void 0 ? _a : item.heading)));
|
|
502
504
|
})))),
|
|
503
|
-
type !== "tabs" && accordionData && (React.createElement("ul", { className: styles$
|
|
505
|
+
type !== "tabs" && accordionData && (React.createElement("ul", { className: styles$k.accordionList }, accordionData.map(function (item) { return (React.createElement("li", { className: styles$k.accordionListItem, key: item.id },
|
|
504
506
|
React.createElement(Accordion, { id: item.id, heading: item.heading, headingLevel: item.headingLevel, content: item.content, disclosureList: item.disclosureList, headingSize: "m" }),
|
|
505
507
|
React.createElement(VerticalSpace.VerticalSpace, { size: "48", sizeL: "64" }))); }))),
|
|
506
508
|
type === "tabs" && (React.createElement(Tabs.Tabs, { defaultValue: accordionData[0].heading },
|
|
@@ -2697,12 +2699,12 @@ function cleanEscapedString(input) {
|
|
|
2697
2699
|
return matched[1].replace(doubleQuoteRegExp, "'");
|
|
2698
2700
|
}
|
|
2699
2701
|
|
|
2700
|
-
var styles$
|
|
2702
|
+
var styles$j = {"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"};
|
|
2701
2703
|
|
|
2702
2704
|
var Image = function (_a) {
|
|
2703
2705
|
var sources = _a.sources, title = _a.title, description = _a.description, props = __rest(_a, ["sources", "title", "description"]);
|
|
2704
2706
|
return (React.createElement(React.Fragment, null,
|
|
2705
|
-
React.createElement("div", { className: styles$
|
|
2707
|
+
React.createElement("div", { className: styles$j.imgWrapper },
|
|
2706
2708
|
React.createElement(Image$2.Image, __assign({ fadeOnLoad: true }, props), sources &&
|
|
2707
2709
|
sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))),
|
|
2708
2710
|
title && (React.createElement(React.Fragment, null,
|
|
@@ -2740,17 +2742,17 @@ var FeaturePost = function (_a) {
|
|
|
2740
2742
|
var _b;
|
|
2741
2743
|
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"]);
|
|
2742
2744
|
var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
|
|
2743
|
-
return (React.createElement("div", __assign({ "data-testid": "feature-post", className: classNames(styles$
|
|
2744
|
-
_b[styles$
|
|
2745
|
+
return (React.createElement("div", __assign({ "data-testid": "feature-post", className: classNames(styles$j.featurePost, (_b = {},
|
|
2746
|
+
_b[styles$j.featurePostReversed] = isReverseOrder,
|
|
2745
2747
|
_b)) }, filterAttrs(props)),
|
|
2746
|
-
React.createElement("div", { className: styles$
|
|
2747
|
-
React.createElement("div", { className: styles$
|
|
2748
|
+
React.createElement("div", { className: styles$j.col },
|
|
2749
|
+
React.createElement("div", { className: styles$j.contentContainer },
|
|
2748
2750
|
label && (React.createElement(Grid.Grid, { isGutterless: true, isFluid: true },
|
|
2749
2751
|
React.createElement(Grid.GridRow, { align: "baseline" },
|
|
2750
2752
|
React.createElement(Grid.GridCol, { xs: 12, m: "auto" },
|
|
2751
2753
|
React.createElement(Heading.Heading, { size: "xxs", fontStyle: "overline" }, label.text)),
|
|
2752
2754
|
React.createElement(Grid.GridCol, { xs: 12, m: "auto" },
|
|
2753
|
-
React.createElement("div", { className: styles$
|
|
2755
|
+
React.createElement("div", { className: styles$j.labelDate },
|
|
2754
2756
|
React.createElement(Text.Text, { size: "xs", tone: "muted" }, isDate(label.date) ? (React.createElement("time", { dateTime: format(label.date, "yyyy-MM-dd") }, format(label.date, "d MMMM yyyy"))) : (React.createElement("span", null, label.date)))))),
|
|
2755
2757
|
React.createElement(VerticalSpace.VerticalSpace, { size: "24" }))),
|
|
2756
2758
|
React.createElement(Heading.Heading, { id: id, level: headingLevel, isWordWrap: isHeadingWordWrap, size: "xl" }, heading),
|
|
@@ -2772,10 +2774,10 @@ var FeaturePost = function (_a) {
|
|
|
2772
2774
|
footer.appStore && (React.createElement(Grid.GridCol, { xs: 12, s: "auto" },
|
|
2773
2775
|
React.createElement(AppButton.AppButton, { type: "apple-app-store", screenReaderText: footer.appStore.screenReaderText, url: footer.appStore.url }))),
|
|
2774
2776
|
footer.googlePlay && (React.createElement(Grid.GridCol, { xs: 12, s: "auto" },
|
|
2775
|
-
React.createElement("div", { className: styles$
|
|
2777
|
+
React.createElement("div", { className: styles$j.googlePlayButtonWrapper },
|
|
2776
2778
|
React.createElement(AppButton.AppButton, { type: "google-play", screenReaderText: footer.googlePlay.screenReaderText, url: footer.googlePlay.url })))))))))),
|
|
2777
|
-
isMinWidthArcBreakpointM && (React.createElement("div", { className: styles$
|
|
2778
|
-
React.createElement("div", { "data-testid": "desktop-img", className: styles$
|
|
2779
|
+
isMinWidthArcBreakpointM && (React.createElement("div", { className: styles$j.col },
|
|
2780
|
+
React.createElement("div", { "data-testid": "desktop-img", className: styles$j.imgContainer },
|
|
2779
2781
|
React.createElement(MediaContent, { image: image, video: video }))))));
|
|
2780
2782
|
};
|
|
2781
2783
|
|
|
@@ -2787,7 +2789,7 @@ var FeaturePost = function (_a) {
|
|
|
2787
2789
|
const BtIconArrowRightFill =
|
|
2788
2790
|
"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";
|
|
2789
2791
|
|
|
2790
|
-
var styles$
|
|
2792
|
+
var styles$i = {"highlights":"Highlights-module_highlights__Hf7Zq","highlightItem":"Highlights-module_highlightItem__-N6le","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
|
|
2791
2793
|
|
|
2792
2794
|
var getListHeadingLevel = function (level) {
|
|
2793
2795
|
var nextLevel = Math.min(parseInt(level) + 1, 6);
|
|
@@ -2797,8 +2799,8 @@ var getListHeadingLevel = function (level) {
|
|
|
2797
2799
|
var HighlightItem = function (_a) {
|
|
2798
2800
|
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"]);
|
|
2799
2801
|
var listHeadingLevel = getListHeadingLevel(headingLevel || "2");
|
|
2800
|
-
return (React.createElement("div", __assign({ "data-testid": "highlight-item-container", className: styles$
|
|
2801
|
-
icon && (React.createElement("div", { className: styles$
|
|
2802
|
+
return (React.createElement("div", __assign({ "data-testid": "highlight-item-container", className: styles$i.highlightItem }, filterAttrs(props)),
|
|
2803
|
+
icon && (React.createElement("div", { className: styles$i.Icon },
|
|
2802
2804
|
React.createElement(Icon.Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
|
|
2803
2805
|
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
2804
2806
|
React.createElement(Heading.Heading, { level: listHeadingLevel, size: "m" }, heading),
|
|
@@ -2811,7 +2813,7 @@ var HighlightItem = function (_a) {
|
|
|
2811
2813
|
var HighlightList = function (_a) {
|
|
2812
2814
|
var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel, props = __rest(_a, ["listItems", "columns", "isSmallIcon", "headingLevel"]);
|
|
2813
2815
|
var id = React.useId();
|
|
2814
|
-
return (React.createElement("div", __assign({ "data-testid": "highlights-list", className: classNames(styles$
|
|
2816
|
+
return (React.createElement("div", __assign({ "data-testid": "highlights-list", className: classNames(styles$i.highlights, styles$i["highlights".concat(columns, "Column")]) }, filterAttrs(props)), listItems.map(function (_a, i) {
|
|
2815
2817
|
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, itemProps = __rest(_a, ["icon", "heading", "text", "link"]);
|
|
2816
2818
|
return (React.createElement(HighlightItem, __assign({ key: "highlight-".concat(id, "-").concat(i), icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon, headingLevel: headingLevel }, itemProps)));
|
|
2817
2819
|
})));
|
|
@@ -2831,14 +2833,14 @@ var Highlights = function (_a) {
|
|
|
2831
2833
|
React.createElement(HighlightList, { listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs, headingLevel: headingLevel }),
|
|
2832
2834
|
cta && (React.createElement(React.Fragment, null,
|
|
2833
2835
|
React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
|
|
2834
|
-
React.createElement(ButtonV2.ButtonV2, { label: cta.label, href: cta.href, onClick: cta.onClick, size: "m", ariaLabel: cta.ariaLabel, buttonStyle: cta.buttonStyle, icon: cta.buttonStyle === "compact"
|
|
2836
|
+
React.createElement(ButtonV2.ButtonV2, { label: cta.label, href: cta.href, onClick: cta.onClick, target: cta.target, size: "m", ariaLabel: cta.ariaLabel, buttonStyle: cta.buttonStyle, icon: cta.buttonStyle === "compact"
|
|
2835
2837
|
? ((_b = cta.icon) !== null && _b !== void 0 ? _b : BtIconArrowRightFill)
|
|
2836
2838
|
: undefined, iconActive: cta.buttonStyle === "compact"
|
|
2837
2839
|
? ((_c = cta.iconActive) !== null && _c !== void 0 ? _c : BtIconArrowRightFill)
|
|
2838
2840
|
: undefined, iconPosition: (_d = cta.iconPosition) !== null && _d !== void 0 ? _d : "beforeText" })))));
|
|
2839
2841
|
};
|
|
2840
2842
|
|
|
2841
|
-
var styles$
|
|
2843
|
+
var styles$h = {"PromoListing":"PromoListing-module_PromoListing__6ensv","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"};
|
|
2842
2844
|
|
|
2843
2845
|
/**
|
|
2844
2846
|
* Do not edit directly
|
|
@@ -2956,7 +2958,7 @@ var PromoListing = function (_a) {
|
|
|
2956
2958
|
var CardComponent = CARD_COMPONENTS[card.type];
|
|
2957
2959
|
return React.createElement(CardComponent, __assign({}, card, commonProps));
|
|
2958
2960
|
};
|
|
2959
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
2961
|
+
return (React.createElement("div", __assign({ className: styles$h.PromoListing }, filterAttrs(props)),
|
|
2960
2962
|
overlineLabel && (React.createElement(React.Fragment, null,
|
|
2961
2963
|
React.createElement(Heading.Heading, { level: overlineHeadingLevel, fontStyle: "overline" }, overlineLabel),
|
|
2962
2964
|
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }))),
|
|
@@ -2964,44 +2966,44 @@ var PromoListing = function (_a) {
|
|
|
2964
2966
|
button.label && (React.createElement(React.Fragment, null,
|
|
2965
2967
|
React.createElement(ButtonV2.ButtonV2, __assign({}, button, { icon: button.buttonStyle == "compact" ? BtIconArrowRightFill : undefined, size: "m" })),
|
|
2966
2968
|
React.createElement(VerticalSpace.VerticalSpace, { size: "40" }))),
|
|
2967
|
-
isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles$
|
|
2968
|
-
React.createElement(Carousel.Carousel, { overflow: "visible", itemsPerSlide: 1, behavior: "adaptive", withGutter: false }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, i) { return (React.createElement("div", { key: "promolist-carousel-card-".concat(componentId, "-").concat(i), className: (styles$
|
|
2969
|
-
React.createElement("div", { "data-testid": "promoList-card".concat(index), className: styles$
|
|
2969
|
+
isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles$h.promolistingCarouselWrapper },
|
|
2970
|
+
React.createElement(Carousel.Carousel, { overflow: "visible", itemsPerSlide: 1, behavior: "adaptive", withGutter: false }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, i) { return (React.createElement("div", { key: "promolist-carousel-card-".concat(componentId, "-").concat(i), className: (styles$h.cardWrapperCarousel) }, getCard(card))); })))) : (React.createElement("ul", { className: classNames(styles$h.cardGrid, styles$h["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) },
|
|
2971
|
+
React.createElement("div", { "data-testid": "promoList-card".concat(index), className: styles$h.cardWrapper }, getCard(card)))); })))));
|
|
2970
2972
|
};
|
|
2971
2973
|
|
|
2972
|
-
var styles$
|
|
2974
|
+
var styles$g = {"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"};
|
|
2973
2975
|
|
|
2974
2976
|
/**
|
|
2975
2977
|
* 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.*/
|
|
2976
2978
|
var Quote = function (_a) {
|
|
2977
2979
|
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"]);
|
|
2978
2980
|
return (React.createElement("div", __assign({ className: "community-component--quote", "data-testid": "quote-test" }, filterAttrs(props)),
|
|
2979
|
-
React.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles$
|
|
2980
|
-
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles$
|
|
2981
|
+
React.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles$g.blockQuote, styles$g["quote".concat(styling)]), cite: citeUrl },
|
|
2982
|
+
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles$g.quoteIcon, "aria-hidden": "true" },
|
|
2981
2983
|
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" })),
|
|
2982
|
-
React.createElement("p", { className: styles$
|
|
2984
|
+
React.createElement("p", { className: styles$g.quoteContent }, content)),
|
|
2983
2985
|
author && React.createElement(Author, __assign({}, author))));
|
|
2984
2986
|
};
|
|
2985
2987
|
|
|
2986
|
-
var styles$
|
|
2988
|
+
var styles$f = {"ruleContainer":"Summary-module_ruleContainer__ydWlG","row":"Summary-module_row__SKV--"};
|
|
2987
2989
|
|
|
2988
2990
|
var Summary = function (_a) {
|
|
2989
2991
|
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"]);
|
|
2990
2992
|
var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
|
|
2991
2993
|
return (React.createElement(Box.Box, __assign({ isBorderRadius: true }, (!noBorder ? { borderWidth: "thin" } : { elevationLevel: "1" }), { padding: "24" }, filterAttrs(props)),
|
|
2992
|
-
React.createElement("div", { className: styles$
|
|
2994
|
+
React.createElement("div", { className: styles$f.row }, content.map(function (_a, i) {
|
|
2993
2995
|
var heading = _a.heading, text = _a.text;
|
|
2994
2996
|
return (React.createElement(React.Fragment, null,
|
|
2995
|
-
React.createElement("div", { className: styles$
|
|
2997
|
+
React.createElement("div", { className: styles$f.col },
|
|
2996
2998
|
React.createElement(Heading.Heading, { size: "s", level: headingLevel }, heading),
|
|
2997
2999
|
React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
|
|
2998
3000
|
React.createElement(Text.Text, { size: "s" }, text)),
|
|
2999
|
-
i !== content.length - 1 && (React.createElement("div", { className: styles$
|
|
3001
|
+
i !== content.length - 1 && (React.createElement("div", { className: styles$f.ruleContainer },
|
|
3000
3002
|
React.createElement(Rule.Rule, { orientation: isMinWidthArcBreakpointM ? "vertical" : "horizontal" })))));
|
|
3001
3003
|
}))));
|
|
3002
3004
|
};
|
|
3003
3005
|
|
|
3004
|
-
var styles$
|
|
3006
|
+
var styles$e = {"list":"Statistics-module_list__BI-eQ","mutedText":"Statistics-module_mutedText__MR1JM"};
|
|
3005
3007
|
|
|
3006
3008
|
var getLinkProps = function (link) {
|
|
3007
3009
|
return link.openInNewTab
|
|
@@ -3019,7 +3021,7 @@ var Statistics = function (_a) {
|
|
|
3019
3021
|
React.createElement(Columns.ColumnsCol, { spanM: 9 },
|
|
3020
3022
|
React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
|
|
3021
3023
|
React.createElement(Columns.ColumnsCol, { spanL: 9 },
|
|
3022
|
-
React.createElement("ul", { className: styles$
|
|
3024
|
+
React.createElement("ul", { className: styles$e.list }, statistics.map(function (_a, i) {
|
|
3023
3025
|
var stat = _a.stat, copy = _a.copy, link = _a.link, source = _a.source, sourceUrl = _a.sourceUrl;
|
|
3024
3026
|
return (React.createElement("li", { key: "statistic-".concat(componentId, "-").concat(i) },
|
|
3025
3027
|
i !== 0 && (React.createElement(React.Fragment, null,
|
|
@@ -3029,7 +3031,7 @@ var Statistics = function (_a) {
|
|
|
3029
3031
|
React.createElement(Columns.Columns, null,
|
|
3030
3032
|
React.createElement(Columns.ColumnsCol, { spanS: 6, spanM: 8 },
|
|
3031
3033
|
React.createElement(Align.Align, { vertical: "center" },
|
|
3032
|
-
React.createElement("div", { className: styles$
|
|
3034
|
+
React.createElement("div", { className: styles$e.statWrapper },
|
|
3033
3035
|
React.createElement(Heading.Heading, { color: "brand", size: "xxl" }, stat),
|
|
3034
3036
|
React.createElement(Hidden.Hidden, { s: true, m: true, l: true, xl: true, xxl: true },
|
|
3035
3037
|
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }))))),
|
|
@@ -3042,26 +3044,26 @@ var Statistics = function (_a) {
|
|
|
3042
3044
|
source && (React.createElement(React.Fragment, null,
|
|
3043
3045
|
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
|
|
3044
3046
|
React.createElement(Text.Text, { size: "xs" },
|
|
3045
|
-
React.createElement("span", { className: styles$
|
|
3047
|
+
React.createElement("span", { className: styles$e.mutedText }, source)))),
|
|
3046
3048
|
sourceUrl && (React.createElement(Text.Text, { size: "xs" },
|
|
3047
|
-
React.createElement("a", { className: styles$
|
|
3049
|
+
React.createElement("a", { className: styles$e.mutedText, href: sourceUrl }, sourceUrl))))))));
|
|
3048
3050
|
})))));
|
|
3049
3051
|
};
|
|
3050
3052
|
|
|
3051
|
-
var styles$
|
|
3053
|
+
var styles$d = {"bannerWithTabsHeadingCentered":"BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO"};
|
|
3052
3054
|
|
|
3053
3055
|
var BannerWithTabs = function (_a) {
|
|
3054
3056
|
var _b;
|
|
3055
|
-
var tabs = _a.tabs, defaultValue = _a.defaultValue, heading = _a.heading, 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", "content", "id", "isHeadingWordWrap", "alignTypography", "minHeight", "minHeightM"]);
|
|
3057
|
+
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"]);
|
|
3056
3058
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3057
3059
|
React.createElement("div", { className: classNames((_b = {},
|
|
3058
|
-
_b[styles$
|
|
3060
|
+
_b[styles$d.bannerWithTabsHeadingCentered] = alignTypography === "center",
|
|
3059
3061
|
_b)) },
|
|
3060
|
-
React.createElement(SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, content: content, isPadded: alignTypography === "left" ? true : false })),
|
|
3062
|
+
React.createElement(SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, headingLevel: headingLevel, content: content, isPadded: alignTypography === "left" ? true : false })),
|
|
3061
3063
|
React.createElement(TabbedBanner.TabbedBanner, { minHeight: minHeight, minHeightM: minHeightM, tabs: tabs, defaultValue: defaultValue })));
|
|
3062
3064
|
};
|
|
3063
3065
|
|
|
3064
|
-
var styles$
|
|
3066
|
+
var styles$c = {"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"};
|
|
3065
3067
|
|
|
3066
3068
|
/**
|
|
3067
3069
|
* Use `ArticleSidebar` to provide additional information about the article.
|
|
@@ -3117,7 +3119,7 @@ var ArticleSidebar = function (_a) {
|
|
|
3117
3119
|
var hasBottomContent = Boolean(linkSection || topics || share);
|
|
3118
3120
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3119
3121
|
React.createElement("div", { className: classNames((_b = {},
|
|
3120
|
-
_b[styles$
|
|
3122
|
+
_b[styles$c.textContent] = hasTopContent,
|
|
3121
3123
|
_b)) },
|
|
3122
3124
|
author && (React.createElement(React.Fragment, null,
|
|
3123
3125
|
React.createElement(Author, __assign({}, author, { avatar: __assign(__assign({}, author.avatar), { size: "xl" }) })))),
|
|
@@ -3128,7 +3130,7 @@ var ArticleSidebar = function (_a) {
|
|
|
3128
3130
|
React.createElement(Text.Text, { size: "s" }, aboutSection.content))),
|
|
3129
3131
|
additionalContent && (React.createElement(React.Fragment, null,
|
|
3130
3132
|
(author || aboutSection) && React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
3131
|
-
React.createElement("div", { className: styles$
|
|
3133
|
+
React.createElement("div", { className: styles$c.additionalContentContainer }, additionalContent.map(function (_a) {
|
|
3132
3134
|
var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content;
|
|
3133
3135
|
return (React.createElement("div", { key: "".concat(id, "-").concat(heading) },
|
|
3134
3136
|
React.createElement(Heading.Heading, { level: headingLevel, size: "xxs" }, heading),
|
|
@@ -3151,7 +3153,7 @@ var ArticleSidebar = function (_a) {
|
|
|
3151
3153
|
linkSection && React.createElement(VerticalSpace.VerticalSpace, { size: "32" }),
|
|
3152
3154
|
React.createElement(Heading.Heading, { level: topics.headingLevel }, topics.heading),
|
|
3153
3155
|
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
3154
|
-
React.createElement("div", { className: styles$
|
|
3156
|
+
React.createElement("div", { className: styles$c.tagGroup }, topics.tags.map(function (tag) { return (React.createElement(Tag.Tag, __assign({ key: "".concat(id, "-").concat(tag.title) }, tag))); })))),
|
|
3155
3157
|
share && (React.createElement(React.Fragment, null,
|
|
3156
3158
|
(linkSection || topics) && (React.createElement("div", { "data-testid": "links-topics-content-rule" },
|
|
3157
3159
|
React.createElement(VerticalSpace.VerticalSpace, { size: "32" }),
|
|
@@ -3159,16 +3161,16 @@ var ArticleSidebar = function (_a) {
|
|
|
3159
3161
|
React.createElement(VerticalSpace.VerticalSpace, { size: "32" }))),
|
|
3160
3162
|
React.createElement(Heading.Heading, { level: share.headingLevel }, share.heading),
|
|
3161
3163
|
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
3162
|
-
React.createElement("div", { className: styles$
|
|
3164
|
+
React.createElement("div", { className: styles$c.shareButtonContainer }, shareButtons.map(function (_a) {
|
|
3163
3165
|
var isButton = _a.isButton, ariaLabel = _a.ariaLabel, href = _a.href, icon = _a.icon, onClick = _a.onClick;
|
|
3164
|
-
return (React.createElement("a", { key: "".concat(id, "-").concat(ariaLabel), role: isButton ? "button" : undefined, target: "_blank", rel: "noreferrer", className: styles$
|
|
3166
|
+
return (React.createElement("a", { key: "".concat(id, "-").concat(ariaLabel), role: isButton ? "button" : undefined, target: "_blank", rel: "noreferrer", className: styles$c.shareButton, "aria-label": ariaLabel, href: href, onClick: isButton ? onClick : undefined },
|
|
3165
3167
|
React.createElement(Icon.Icon, { icon: icon, size: 24 })));
|
|
3166
3168
|
})))),
|
|
3167
3169
|
React.createElement(Toast.Toast, null,
|
|
3168
3170
|
React.createElement(Toast.ToastNotification, { status: "success", title: "Copied to clipboard", isOpen: showToast, onOpenChange: function () { return setShowToast(false); } }))));
|
|
3169
3171
|
};
|
|
3170
3172
|
|
|
3171
|
-
var styles$
|
|
3173
|
+
var styles$b = {"product-navigation-grid":"ProductNavigation-module_product-navigation-grid__RzFq8","productNavigation-skipLink":"ProductNavigation-module_productNavigation-skipLink__fy8ZJ"};
|
|
3172
3174
|
|
|
3173
3175
|
/**
|
|
3174
3176
|
* Use `ProductNavigation` to give a collection of product information cards collected within a grid that has optional show/hide capability
|
|
@@ -3212,7 +3214,7 @@ var ProductNavigation = function (_a) {
|
|
|
3212
3214
|
var isMinWidthArcBreakpointS = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
|
|
3213
3215
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3214
3216
|
React.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "ProductNavigation-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content, image: image }),
|
|
3215
|
-
React.createElement("ul", { className: classNames(styles$
|
|
3217
|
+
React.createElement("ul", { className: classNames(styles$b["product-navigation-grid"]) }, displayList === null || displayList === void 0 ? void 0 : displayList.map(function (cardProps, i) {
|
|
3216
3218
|
var _a;
|
|
3217
3219
|
return (React.createElement("li", { key: "displayList-".concat(i), tabIndex: -1, ref: i === skipLinkCard ? cardRef : undefined, "data-cy": "list-item-".concat(i) },
|
|
3218
3220
|
React.createElement(InformationCard.InformationCard, __assign({}, cardProps, { minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : cardProps.minHeight, headingLevel: (_a = cardProps.headingLevel) !== null && _a !== void 0 ? _a : "2" }))));
|
|
@@ -3223,7 +3225,7 @@ var ProductNavigation = function (_a) {
|
|
|
3223
3225
|
? "Show more"
|
|
3224
3226
|
: "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
|
|
3225
3227
|
displayList.length > cardsToDisplay && (React.createElement(React.Fragment, null,
|
|
3226
|
-
React.createElement("div", { id: "skip-link", className: classNames(styles$
|
|
3228
|
+
React.createElement("div", { id: "skip-link", className: classNames(styles$b["productNavigation-skipLink"]), tabIndex: -1 },
|
|
3227
3229
|
React.createElement(ButtonV2.ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true })))),
|
|
3228
3230
|
React.createElement(VisuallyHidden.VisuallyHidden, null,
|
|
3229
3231
|
React.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
|
|
@@ -3236,81 +3238,82 @@ var ProductNavigation = function (_a) {
|
|
|
3236
3238
|
"."))))));
|
|
3237
3239
|
};
|
|
3238
3240
|
|
|
3239
|
-
var styles$
|
|
3241
|
+
var styles$a = {"container":"ContentInfoWidget-module_container__yaS-8","text":"ContentInfoWidget-module_text__O1BdZ","icon":"ContentInfoWidget-module_icon__LEww1"};
|
|
3240
3242
|
|
|
3241
3243
|
var ContentInfoWidget = function (_a) {
|
|
3242
3244
|
var text = _a.text, icon = _a.icon, props = __rest(_a, ["text", "icon"]);
|
|
3243
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
3244
|
-
React.createElement("div", { className: styles$
|
|
3245
|
+
return (React.createElement("div", __assign({ className: styles$a.container }, filterAttrs(props)),
|
|
3246
|
+
React.createElement("div", { className: styles$a.icon },
|
|
3245
3247
|
React.createElement(Icon.Icon, { size: 20, icon: icon })),
|
|
3246
|
-
React.createElement("div", { className: styles$
|
|
3248
|
+
React.createElement("div", { className: styles$a.text },
|
|
3247
3249
|
React.createElement(Text.Text, { size: "xs", tone: "muted" }, text))));
|
|
3248
3250
|
};
|
|
3249
3251
|
|
|
3250
|
-
var styles$
|
|
3252
|
+
var styles$9 = {"action-tile":"ActionTile-module_action-tile__JPwGb","action-tile-content":"ActionTile-module_action-tile-content__ZkgHc","action-tile-icon":"ActionTile-module_action-tile-icon__PY1EN","action-tile-heading":"ActionTile-module_action-tile-heading__Uxdu9","action-tile--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
|
|
3251
3253
|
|
|
3252
3254
|
var ActionTile = function (_a) {
|
|
3253
3255
|
var _b;
|
|
3254
|
-
var icon = _a.icon, heading = _a.heading, _c = _a.isActive, isActive = _c === void 0 ? false : _c, onClick = _a.onClick, className = _a.className, props = __rest(_a, ["icon", "heading", "isActive", "onClick", "className"]);
|
|
3255
|
-
var tileClasses = classNames(styles$
|
|
3256
|
-
_b[styles$
|
|
3256
|
+
var icon = _a.icon, activeIcon = _a.activeIcon, heading = _a.heading, _c = _a.isActive, isActive = _c === void 0 ? false : _c, onClick = _a.onClick, className = _a.className, props = __rest(_a, ["icon", "activeIcon", "heading", "isActive", "onClick", "className"]);
|
|
3257
|
+
var tileClasses = classNames(styles$9["action-tile"], (_b = {},
|
|
3258
|
+
_b[styles$9["action-tile--active"]] = isActive,
|
|
3257
3259
|
_b), className);
|
|
3260
|
+
var displayIcon = isActive && activeIcon ? activeIcon : icon;
|
|
3258
3261
|
var content = (React.createElement(React.Fragment, null,
|
|
3259
|
-
React.createElement("div", { className: styles$
|
|
3260
|
-
|
|
3261
|
-
React.createElement(Icon.Icon, { icon:
|
|
3262
|
-
React.createElement("h3", { className: styles$
|
|
3263
|
-
isActive && (React.createElement("div", { className: styles$
|
|
3262
|
+
React.createElement("div", { className: styles$9["action-tile-content"] },
|
|
3263
|
+
displayIcon && (React.createElement("div", { className: styles$9["action-tile-icon"] },
|
|
3264
|
+
React.createElement(Icon.Icon, { icon: displayIcon, size: 48 }))),
|
|
3265
|
+
React.createElement("h3", { className: styles$9["action-tile-heading"] }, heading)),
|
|
3266
|
+
isActive && (React.createElement("div", { className: styles$9["action-tile-tick"] },
|
|
3264
3267
|
React.createElement(Icon.Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
|
|
3265
3268
|
return (React.createElement("div", __assign({ className: tileClasses, onClick: onClick }, filterAttrs(props)), content));
|
|
3266
3269
|
};
|
|
3267
3270
|
|
|
3268
|
-
var styles$
|
|
3271
|
+
var styles$8 = {"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"};
|
|
3269
3272
|
|
|
3270
3273
|
var LinkTile = function (_a) {
|
|
3271
3274
|
var text = _a.text, href = _a.href, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b, className = _a.className, props = __rest(_a, ["text", "href", "showIcon", "className"]);
|
|
3272
3275
|
var Component = href ? "a" : "div";
|
|
3273
3276
|
var linkProps = href ? { href: href } : {};
|
|
3274
|
-
return (React.createElement(Component, __assign({ className: classNames(styles$
|
|
3275
|
-
React.createElement("span", { className: styles$
|
|
3276
|
-
showIcon && (React.createElement("span", { className: styles$
|
|
3277
|
+
return (React.createElement(Component, __assign({ className: classNames(styles$8["link-tile"], className) }, linkProps, props), text && (React.createElement("div", { className: styles$8["link-tile-content"] },
|
|
3278
|
+
React.createElement("span", { className: styles$8["link-tile-text"] }, text),
|
|
3279
|
+
showIcon && (React.createElement("span", { className: styles$8["link-tile-icon"] },
|
|
3277
3280
|
React.createElement(Icon.Icon, { icon: BtIconArrowAltRight, size: 32 })))))));
|
|
3278
3281
|
};
|
|
3279
3282
|
|
|
3280
|
-
var styles$
|
|
3283
|
+
var styles$7 = {"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"};
|
|
3281
3284
|
|
|
3282
3285
|
var InlineLinkGroup = function (_a) {
|
|
3283
3286
|
var label = _a.label, links = _a.links, props = __rest(_a, ["label", "links"]);
|
|
3284
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
3285
|
-
label && (React.createElement("div", { className: styles$
|
|
3287
|
+
return (React.createElement("div", __assign({ className: styles$7["quick-help"] }, filterAttrs(props)),
|
|
3288
|
+
label && (React.createElement("div", { className: styles$7["quick-help-label"] },
|
|
3286
3289
|
React.createElement(Heading.Heading, { size: "xxs", fontStyle: "overline" }, label))),
|
|
3287
|
-
React.createElement("ul", { className: styles$
|
|
3288
|
-
React.createElement("li", { className: styles$
|
|
3290
|
+
React.createElement("ul", { className: styles$7["quick-help-container"] }, links.map(function (link, index) { return (React.createElement(React.Fragment, { key: index },
|
|
3291
|
+
React.createElement("li", { className: styles$7["quick-help-item"] },
|
|
3289
3292
|
React.createElement(Link.Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel }, link.label),
|
|
3290
3293
|
React.createElement(Icon.Icon, { icon: BtIconArrowAltRight, size: 24, color: "brand" })),
|
|
3291
|
-
index < links.length - 1 && (React.createElement("li", { className: styles$
|
|
3292
|
-
React.createElement("div", { className: styles$
|
|
3294
|
+
index < links.length - 1 && (React.createElement("li", { className: styles$7["quick-help-separator"], "aria-hidden": "true" },
|
|
3295
|
+
React.createElement("div", { className: styles$7["quick-help-separator-line"] }))))); }))));
|
|
3293
3296
|
};
|
|
3294
3297
|
|
|
3295
|
-
var styles$
|
|
3298
|
+
var styles$6 = {"thumbnailSignpost":"ThumbnailSignpost-module_thumbnailSignpost__Yf26b","isLink":"ThumbnailSignpost-module_isLink__FucdG","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"};
|
|
3296
3299
|
|
|
3297
3300
|
/** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
|
|
3298
3301
|
var ThumbnailSignpost = function (_a) {
|
|
3299
3302
|
var _b;
|
|
3300
3303
|
var text = _a.text, title = _a.title, img = _a.img, onClick = _a.onClick, buttonLabel = _a.buttonLabel, props = __rest(_a, ["text", "title", "img", "onClick", "buttonLabel"]);
|
|
3301
|
-
return (React.createElement("div", __assign({ className: classNames(styles$
|
|
3302
|
-
_b[styles$
|
|
3304
|
+
return (React.createElement("div", __assign({ className: classNames(styles$6.thumbnailSignpost, (_b = {},
|
|
3305
|
+
_b[styles$6.isLink] = onClick,
|
|
3303
3306
|
_b)), onClick: onClick, "aria-label": title, tabIndex: onClick ? 0 : -1 }, (onClick && { role: "button" }), filterAttrs(props)),
|
|
3304
|
-
img && (React.createElement("div", { className: styles$
|
|
3307
|
+
img && (React.createElement("div", { className: styles$6.image },
|
|
3305
3308
|
React.createElement(Image$2.Image, __assign({}, img)))),
|
|
3306
|
-
React.createElement("div", { className: styles$
|
|
3307
|
-
React.createElement("span", { className: styles$
|
|
3309
|
+
React.createElement("div", { className: styles$6.content },
|
|
3310
|
+
React.createElement("span", { className: styles$6.heading }, title),
|
|
3308
3311
|
React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
|
|
3309
3312
|
text,
|
|
3310
3313
|
buttonLabel && onClick && (React.createElement(React.Fragment, null,
|
|
3311
3314
|
React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
|
|
3312
|
-
React.createElement("div", { className: styles$
|
|
3313
|
-
React.createElement("span", { className: styles$
|
|
3315
|
+
React.createElement("div", { className: styles$6.thumbnailButton },
|
|
3316
|
+
React.createElement("span", { className: styles$6.buttonIcon, role: "img", style: {
|
|
3314
3317
|
height: 24,
|
|
3315
3318
|
width: 24,
|
|
3316
3319
|
maskImage: "url(\"".concat(BtIconArrowRightFill, "\")"),
|
|
@@ -3319,29 +3322,29 @@ var ThumbnailSignpost = function (_a) {
|
|
|
3319
3322
|
React.createElement(Heading.Heading, { size: "xxs" }, buttonLabel)))))));
|
|
3320
3323
|
};
|
|
3321
3324
|
|
|
3322
|
-
var styles$
|
|
3325
|
+
var styles$5 = {"PromoListingThumbnailSignpost":"PromoListingThumbnailSignpost-module_PromoListingThumbnailSignpost__0HTPV","list":"PromoListingThumbnailSignpost-module_list__E9l0E"};
|
|
3323
3326
|
|
|
3324
3327
|
/**
|
|
3325
3328
|
* Use `PromoListingThumbnailSignpost` to give supporting information about a page or proposition in the form of the ThumbnailSignposts components.
|
|
3326
3329
|
*/
|
|
3327
3330
|
var PromoListingThumbnailSignpost = function (_a) {
|
|
3328
3331
|
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"]);
|
|
3329
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
3332
|
+
return (React.createElement("div", __assign({ className: styles$5.PromoListingThumbnailSignpost }, filterAttrs(props)),
|
|
3330
3333
|
React.createElement(SectionHeading, { isPadded: isPadded, "data-testid": "PromoListingThumbnailSignpost-header", heading: heading, headingLevel: headingLevel, content: content, isHeadingWordWrap: isHeadingWordWrap }),
|
|
3331
|
-
React.createElement("ul", { className: styles$
|
|
3334
|
+
React.createElement("ul", { className: styles$5.list }, thumbnailList.map(function (thumbnail, index) { return (React.createElement("li", { key: index },
|
|
3332
3335
|
React.createElement(ThumbnailSignpost, __assign({}, thumbnail)))); }))));
|
|
3333
3336
|
};
|
|
3334
3337
|
|
|
3335
|
-
var styles$
|
|
3338
|
+
var styles$4 = {"playIconContainer":"VideoCardPlayIcon-module_playIconContainer__ZqZP3","playIconContainer--s":"VideoCardPlayIcon-module_playIconContainer--s__ETbOZ","playIconContainer--l":"VideoCardPlayIcon-module_playIconContainer--l__OGccg","playIcon":"VideoCardPlayIcon-module_playIcon__kzito"};
|
|
3336
3339
|
|
|
3337
3340
|
var VideoCardPlayIcon = function (_a) {
|
|
3338
3341
|
var _b = _a.size, size = _b === void 0 ? "l" : _b;
|
|
3339
|
-
return (React.createElement("div", { className: classNames(styles$
|
|
3340
|
-
React.createElement("div", { className: styles$
|
|
3342
|
+
return (React.createElement("div", { className: classNames(styles$4.playIconContainer, styles$4["playIconContainer--".concat(size)]) },
|
|
3343
|
+
React.createElement("div", { className: styles$4.playIcon },
|
|
3341
3344
|
React.createElement(Icon.Icon, { icon: ArcIconPlay }))));
|
|
3342
3345
|
};
|
|
3343
3346
|
|
|
3344
|
-
var styles$
|
|
3347
|
+
var styles$3 = {"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"};
|
|
3345
3348
|
|
|
3346
3349
|
var VideoCardPlayer = function (_a) {
|
|
3347
3350
|
var thumbnail = _a.thumbnail, playIconSize = _a.playIconSize, orientation = _a.orientation, children = _a.children, player = _a.player, props = __rest(_a, ["thumbnail", "playIconSize", "orientation", "children", "player"]);
|
|
@@ -3349,21 +3352,21 @@ var VideoCardPlayer = function (_a) {
|
|
|
3349
3352
|
React.useEffect(function () {
|
|
3350
3353
|
setIsClient(true);
|
|
3351
3354
|
}, []);
|
|
3352
|
-
var playerProps = __assign(__assign({}, player), { light: thumbnail, playIcon: React.createElement(VideoCardPlayIcon, { size: playIconSize }), muted: !thumbnail, playing: true, controls: true, className: styles$
|
|
3353
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
3354
|
-
React.createElement("div", { "data-testid": "arc-video-card", className: classNames(styles$
|
|
3355
|
+
var playerProps = __assign(__assign({}, player), { light: thumbnail, playIcon: React.createElement(VideoCardPlayIcon, { size: playIconSize }), muted: !thumbnail, playing: true, controls: true, className: styles$3.player, width: "100%", height: "100%" });
|
|
3356
|
+
return (React.createElement("div", __assign({ className: styles$3.container }, filterAttrs(props)),
|
|
3357
|
+
React.createElement("div", { "data-testid": "arc-video-card", className: classNames(styles$3.playerWrapper, styles$3["playerWrapper--".concat(orientation)]) }, isClient && React.createElement(ReactPlayer, __assign({}, playerProps))),
|
|
3355
3358
|
children));
|
|
3356
3359
|
};
|
|
3357
3360
|
|
|
3358
|
-
var styles$
|
|
3361
|
+
var styles$2 = {"thumbnail":"VideoCardThumbnail-module_thumbnail__Yamk0","thumbnail--landscape":"VideoCardThumbnail-module_thumbnail--landscape__FmnLk","thumbnail--portrait":"VideoCardThumbnail-module_thumbnail--portrait__FZS93","thumbnailContent":"VideoCardThumbnail-module_thumbnailContent__cHham"};
|
|
3359
3362
|
|
|
3360
3363
|
var VideoCardThumbnail = function (_a) {
|
|
3361
3364
|
var orientation = _a.orientation, contentVisibility = _a.contentVisibility, src = _a.src, children = _a.children;
|
|
3362
|
-
var content = React.createElement("div", { className: styles$
|
|
3363
|
-
return (React.createElement("div", { className: classNames(styles$
|
|
3365
|
+
var content = React.createElement("div", { className: styles$2.thumbnailContent }, children);
|
|
3366
|
+
return (React.createElement("div", { className: classNames(styles$2.thumbnail, styles$2["thumbnail--".concat(orientation)]), style: { backgroundImage: "url(".concat(src, ")") } }, contentVisibility ? (React.createElement(Visible.Visible, __assign({}, contentVisibility), content)) : (content)));
|
|
3364
3367
|
};
|
|
3365
3368
|
|
|
3366
|
-
var styles = {"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"};
|
|
3369
|
+
var styles$1 = {"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"};
|
|
3367
3370
|
|
|
3368
3371
|
var VideoHeroCardContent = function (_a) {
|
|
3369
3372
|
var title = _a.title, label = _a.label, description = _a.description, videoDate = _a.videoDate, duration = _a.duration, background = _a.background, subtitleAvailabilityText = _a.subtitleAvailabilityText;
|
|
@@ -3377,8 +3380,8 @@ var VideoHeroCardContent = function (_a) {
|
|
|
3377
3380
|
},
|
|
3378
3381
|
];
|
|
3379
3382
|
var hasMeta = metaItems.some(function (meta) { return Boolean(meta.text); });
|
|
3380
|
-
return (React.createElement("div", { className: styles["".concat(background, "Background")] },
|
|
3381
|
-
React.createElement("div", { className: classNames(styles.mainText, styles["mainText--".concat(background, "Background")]) },
|
|
3383
|
+
return (React.createElement("div", { className: styles$1["".concat(background, "Background")] },
|
|
3384
|
+
React.createElement("div", { className: classNames(styles$1.mainText, styles$1["mainText--".concat(background, "Background")]) },
|
|
3382
3385
|
React.createElement(Heading.Heading, { fontStyle: "overline" }, label),
|
|
3383
3386
|
React.createElement(VerticalSpace.VerticalSpace, { size: "8", sizeM: "4" }),
|
|
3384
3387
|
React.createElement(Heading.Heading, { level: "3", isWordWrap: false, size: "xl" }, title),
|
|
@@ -3386,8 +3389,8 @@ var VideoHeroCardContent = function (_a) {
|
|
|
3386
3389
|
React.createElement(Text.Text, null, description)),
|
|
3387
3390
|
hasMeta && (React.createElement(React.Fragment, null,
|
|
3388
3391
|
React.createElement(VerticalSpace.VerticalSpace, { size: "32", sizeS: "16" }),
|
|
3389
|
-
React.createElement("div", { className: classNames(styles.statContainer, styles["statContainer--".concat(background, "Background")]) }, metaItems.map(function (meta, i) {
|
|
3390
|
-
return meta.text && (React.createElement("div", { key: "".concat(id, "-stat-").concat(i), className: styles.stat },
|
|
3392
|
+
React.createElement("div", { className: classNames(styles$1.statContainer, styles$1["statContainer--".concat(background, "Background")]) }, metaItems.map(function (meta, i) {
|
|
3393
|
+
return meta.text && (React.createElement("div", { key: "".concat(id, "-stat-").concat(i), className: styles$1.stat },
|
|
3391
3394
|
React.createElement(Icon.Icon, { icon: meta.icon, size: 20 }),
|
|
3392
3395
|
React.createElement(Text.Text, { size: "xs" }, meta.text)));
|
|
3393
3396
|
}))))));
|
|
@@ -3410,11 +3413,80 @@ var VideoPortraitCard = function (_a) {
|
|
|
3410
3413
|
React.createElement(Heading.Heading, { level: "3", isWordWrap: false, size: "xs" }, thumbnail.title)))), orientation: "portrait", player: player, playIconSize: "s" }, props)));
|
|
3411
3414
|
};
|
|
3412
3415
|
|
|
3416
|
+
var styles = {"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"};
|
|
3417
|
+
|
|
3418
|
+
/**
|
|
3419
|
+
* Renders either an InformationCard or a contained MediaCard based on the card type.
|
|
3420
|
+
*/
|
|
3421
|
+
var renderCard = function (card) {
|
|
3422
|
+
if (card.type === "information") {
|
|
3423
|
+
return React.createElement(InformationCard.InformationCard, __assign({}, card));
|
|
3424
|
+
}
|
|
3425
|
+
if (card.type === "media") {
|
|
3426
|
+
return React.createElement(MediaCard.MediaCard, __assign({}, card, { isContained: true }));
|
|
3427
|
+
}
|
|
3428
|
+
return null;
|
|
3429
|
+
};
|
|
3430
|
+
|
|
3431
|
+
/**
|
|
3432
|
+
* Renders a responsive carousel containing the bento grid cards for mobile and tablet viewports.
|
|
3433
|
+
*/
|
|
3434
|
+
var renderBusinessSegmentSwitcherCarousel = function (_a) {
|
|
3435
|
+
var content = _a.content, label = _a.label;
|
|
3436
|
+
return (React.createElement(Carousel.Carousel, { overflow: "visible", behavior: "adaptive", responsive: {
|
|
3437
|
+
xs: { itemsPerSlide: 1 },
|
|
3438
|
+
s: { itemsPerSlide: 2 },
|
|
3439
|
+
} },
|
|
3440
|
+
React.createElement("div", { className: styles.cardWrapper }, renderCard(content.card1)),
|
|
3441
|
+
React.createElement("div", { className: styles.cardWrapper }, renderCard(content.card2)),
|
|
3442
|
+
content.card3 && (React.createElement("div", { className: styles.cardWrapper },
|
|
3443
|
+
React.createElement(InformationCard.InformationCard, __assign({}, content.card3)))),
|
|
3444
|
+
React.createElement("div", { className: styles.cardWrapper },
|
|
3445
|
+
React.createElement(TypographyCard.TypographyCard, { heading: "All ".concat(label, " solutions"), label: content.card4.label, url: content.card4.url }))));
|
|
3446
|
+
};
|
|
3447
|
+
|
|
3448
|
+
/**
|
|
3449
|
+
* BusinessSegmentSwitcher displays tabbed content with a bento grid layout made up of 3 - 4 cards.
|
|
3450
|
+
* Renders as tabs on desktop and a dropdown with carousel on mobile (below 1024px).
|
|
3451
|
+
*/
|
|
3452
|
+
var BusinessSegmentSwitcher = function (_a) {
|
|
3453
|
+
var _b, _c;
|
|
3454
|
+
var tabs = _a.tabs, defaultValue = _a.defaultValue, props = __rest(_a, ["tabs", "defaultValue"]);
|
|
3455
|
+
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 : "";
|
|
3456
|
+
var _d = React.useState(initialTab), selectedTab = _d[0], setSelectedTab = _d[1];
|
|
3457
|
+
return (React.createElement("div", __assign({ className: styles.businessSegmentSwitcher }, filterAttrs(props)),
|
|
3458
|
+
React.createElement("div", { className: styles.businessSegmentSwitcherDesktop },
|
|
3459
|
+
React.createElement(ContentSwitcher.ContentSwitcher, { value: selectedTab, onValueChange: function (value) { return setSelectedTab(value); } },
|
|
3460
|
+
React.createElement(ContentSwitcher.ContentSwitcherList, { isInset: true }, tabs.map(function (_a, index) {
|
|
3461
|
+
var label = _a.label, value = _a.value;
|
|
3462
|
+
return (React.createElement(ContentSwitcher.ContentSwitcherTab, { label: label, value: value, key: "".concat(index, "-").concat(value) }));
|
|
3463
|
+
})),
|
|
3464
|
+
tabs.map(function (_a, index) {
|
|
3465
|
+
var value = _a.value, content = _a.content, label = _a.label;
|
|
3466
|
+
return (React.createElement(ContentSwitcher.ContentSwitcherContent, { value: value, key: "".concat(index, "-").concat(value), hidden: value !== selectedTab },
|
|
3467
|
+
React.createElement("div", { className: styles.contentWrapper },
|
|
3468
|
+
React.createElement("div", { className: styles.desktopCarousel }, renderBusinessSegmentSwitcherCarousel({ content: content, label: label })),
|
|
3469
|
+
renderCard(content.card1),
|
|
3470
|
+
renderCard(content.card2),
|
|
3471
|
+
React.createElement("div", { className: styles.cardCol },
|
|
3472
|
+
content.card3 && React.createElement(InformationCard.InformationCard, __assign({}, content.card3)),
|
|
3473
|
+
React.createElement("div", null,
|
|
3474
|
+
React.createElement(TypographyCard.TypographyCard, { heading: "All ".concat(label.toLowerCase(), " solutions"), text: content.card4.text, label: content.card4.label, url: content.card4.url }))))));
|
|
3475
|
+
}))),
|
|
3476
|
+
React.createElement("div", { className: styles.businessSegmentSwitcherMobile },
|
|
3477
|
+
React.createElement(ContentSwitcherDropdown.ContentSwitcherDropdown, { isInset: true, value: selectedTab, tabs: tabs, isFluid: true, onValueChange: function (value) { return setSelectedTab(value); } }, tabs.map(function (_a, index) {
|
|
3478
|
+
var value = _a.value, content = _a.content, label = _a.label;
|
|
3479
|
+
return (React.createElement(ContentSwitcherDropdown.ContentSwitcherDropdownContent, { value: value, key: "".concat(index, "-").concat(value) },
|
|
3480
|
+
React.createElement("div", { className: styles.contentWrapper }, renderBusinessSegmentSwitcherCarousel({ content: content, label: label }))));
|
|
3481
|
+
})))));
|
|
3482
|
+
};
|
|
3483
|
+
|
|
3413
3484
|
exports.Accordion = Accordion;
|
|
3414
3485
|
exports.ActionTile = ActionTile;
|
|
3415
3486
|
exports.ArticleSidebar = ArticleSidebar;
|
|
3416
3487
|
exports.Author = Author;
|
|
3417
3488
|
exports.BannerWithTabs = BannerWithTabs;
|
|
3489
|
+
exports.BusinessSegmentSwitcher = BusinessSegmentSwitcher;
|
|
3418
3490
|
exports.ContentInfoWidget = ContentInfoWidget;
|
|
3419
3491
|
exports.CopyLead = CopyLead;
|
|
3420
3492
|
exports.DownloadList = DownloadList;
|