@arc-ui/community-components 3.1.0 → 3.3.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 +14 -14
- package/CHANGELOG.md +31 -0
- package/lib/Accordion/Accordion.cjs +2 -3
- package/lib/Accordion/Accordion.mjs +2 -3
- package/lib/ActionTile/ActionTile.cjs +4 -5
- package/lib/ActionTile/ActionTile.mjs +2 -3
- package/lib/ActionTile/styles.css +1 -1
- package/lib/ArticleSidebar/ArticleSidebar.cjs +9 -10
- package/lib/ArticleSidebar/ArticleSidebar.mjs +4 -5
- package/lib/Author/Author.cjs +2 -3
- package/lib/Author/Author.mjs +2 -3
- package/lib/BannerWithTabs/BannerWithTabs.cjs +4 -5
- package/lib/BannerWithTabs/BannerWithTabs.mjs +4 -5
- package/lib/ContentInfoWidget/ContentInfoWidget.cjs +3 -2
- package/lib/ContentInfoWidget/ContentInfoWidget.mjs +3 -2
- package/lib/CopyLead/CopyLead.cjs +15 -16
- package/lib/CopyLead/CopyLead.mjs +3 -4
- package/lib/DownloadList/DownloadList.cjs +6 -8
- package/lib/DownloadList/DownloadList.mjs +6 -8
- package/lib/FAQs/FAQs.cjs +15 -12
- package/lib/FAQs/FAQs.mjs +13 -10
- package/lib/FeaturePost/FeaturePost.cjs +23 -17
- package/lib/FeaturePost/FeaturePost.mjs +18 -12
- package/lib/Highlights/Highlights.cjs +11 -12
- package/lib/Highlights/Highlights.mjs +11 -12
- package/lib/InlineLinkGroup/InlineLinkGroup.cjs +25 -0
- package/lib/InlineLinkGroup/InlineLinkGroup.mjs +23 -0
- package/lib/InlineLinkGroup/styles.css +1 -0
- package/lib/LinkTile/LinkTile.cjs +6 -6
- package/lib/LinkTile/LinkTile.mjs +4 -4
- package/lib/LinkTile/styles.css +1 -1
- package/lib/ProductNavigation/ProductNavigation.cjs +6 -7
- package/lib/ProductNavigation/ProductNavigation.mjs +3 -4
- package/lib/PromoListing/PromoListing.cjs +7 -8
- package/lib/PromoListing/PromoListing.mjs +5 -6
- package/lib/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.cjs +27 -0
- package/lib/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.mjs +25 -0
- package/lib/PromoListingThumbnailSignpost/styles.css +1 -0
- package/lib/Quote/Quote.cjs +5 -6
- package/lib/Quote/Quote.mjs +3 -4
- package/lib/SectionHeading/SectionHeading.cjs +2 -3
- package/lib/SectionHeading/SectionHeading.mjs +2 -3
- package/lib/Statistics/Statistics.cjs +21 -19
- package/lib/Statistics/Statistics.mjs +21 -19
- package/lib/Statistics/styles.css +1 -1
- package/lib/Summary/Summary.cjs +4 -4
- package/lib/Summary/Summary.mjs +4 -4
- package/lib/ThumbnailSignpost/ThumbnailSignpost.cjs +14 -0
- package/lib/ThumbnailSignpost/ThumbnailSignpost.mjs +8 -0
- package/lib/ThumbnailSignpost/styles.css +1 -0
- package/lib/_shared/cjs/{Accordion-BCJIm1Gq.cjs → Accordion-QqDoB3pY.cjs} +9 -10
- package/lib/_shared/cjs/{Author-D4dKNQem.cjs → Author-aL8YXi7C.cjs} +4 -5
- package/lib/_shared/cjs/{SectionHeading-DeSFM0HV.cjs → SectionHeading-Dj-dJfv3.cjs} +4 -5
- package/lib/_shared/cjs/ThumbnailSignpost-SBnrGooA.cjs +38 -0
- package/lib/_shared/cjs/{tslib.es6-BxB9I209.cjs → filter-attrs-C26zOt4_.cjs} +25 -0
- package/lib/_shared/cjs/{index.es-DzI6hGjj.cjs → index.es-Dq8bYrbW.cjs} +1 -1
- package/lib/_shared/esm/{Accordion-BN_lZk6L.mjs → Accordion-DrOTh90S.mjs} +2 -3
- package/lib/_shared/esm/{Author-HnYsFTPT.mjs → Author-BVCRPgkl.mjs} +1 -2
- package/lib/_shared/esm/{SectionHeading-CpDLCndw.mjs → SectionHeading-DZOg_gYi.mjs} +1 -2
- package/lib/_shared/esm/ThumbnailSignpost-DaZByYIH.mjs +36 -0
- package/lib/_shared/esm/{tslib.es6-D6Wu-xwB.mjs → filter-attrs-D-1kWaCP.mjs} +25 -1
- package/lib/_shared/esm/{index.es-B6Bolkcx.mjs → index.es-Bfdys5__.mjs} +1 -1
- package/lib/index.cjs +218 -173
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +60 -64
- package/lib/index.d.mts +60 -64
- package/lib/index.mjs +216 -173
- package/lib/index.mjs.map +1 -1
- package/lib/styles.css +1 -1
- package/package.json +13 -13
- package/src/components/Accordion/components/AccordionDisclosureList/AccordionDisclosureList.tsx +1 -1
- package/src/components/ActionTile/ActionTile.module.css +56 -37
- package/src/components/ActionTile/ActionTile.tsx +1 -1
- package/src/components/ArticleSidebar/ArticleSidebar.tsx +4 -6
- package/src/components/Author/Author.tsx +0 -3
- package/src/components/BannerWithTabs/BannerWithTabs.tsx +4 -6
- package/src/components/ContentInfoWidget/ContentInfoWidget.tsx +3 -4
- package/src/components/DownloadList/DownloadList.tsx +8 -8
- package/src/components/FAQs/FAQs.tsx +13 -6
- package/src/components/FeaturePost/FeaturePost.tsx +9 -9
- package/src/components/FeaturePost/components/Image/Image.tsx +31 -7
- package/src/components/FeaturePost/types/feature-post-image.ts +2 -0
- package/src/components/Highlights/Highlights.tsx +3 -2
- package/src/components/Highlights/components/HighlightItem/HighlightItem.tsx +3 -2
- package/src/components/Highlights/components/HighlightList/HighlightList.tsx +5 -2
- package/src/components/InlineLinkGroup/InlineLinkGroup.module.css +81 -0
- package/src/components/InlineLinkGroup/InlineLinkGroup.tsx +67 -0
- package/src/components/InlineLinkGroup/index.ts +5 -0
- package/src/components/LinkTile/LinkTile.module.css +62 -26
- package/src/components/LinkTile/LinkTile.tsx +8 -1
- package/src/components/PromoListing/PromoListing.tsx +3 -11
- package/src/components/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.module.css +54 -0
- package/src/components/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.tsx +53 -0
- package/src/components/PromoListingThumbnailSignpost/index.ts +4 -0
- package/src/components/Quote/Quote.tsx +1 -7
- package/src/components/Statistics/Statistics.module.css +0 -10
- package/src/components/Statistics/Statistics.tsx +35 -32
- package/src/components/Summary/Summary.tsx +3 -1
- package/src/components/ThumbnailSignpost/ThumbnailSignpost.module.css +112 -0
- package/src/components/ThumbnailSignpost/ThumbnailSignpost.tsx +100 -0
- package/src/components/ThumbnailSignpost/index.ts +4 -0
- package/src/components/index.ts +3 -1
- package/versions.json +1 -1
- package/lib/HeroLink/HeroLink.cjs +0 -35
- package/lib/HeroLink/HeroLink.mjs +0 -33
- package/lib/HeroLink/styles.css +0 -1
- package/lib/_shared/cjs/filter-attrs-BizjMsy0.cjs +0 -27
- package/lib/_shared/esm/filter-attrs-DZ7RCEZm.mjs +0 -25
- package/src/components/HeroLink/HeroLink.module.css +0 -44
- package/src/components/HeroLink/HeroLink.tsx +0 -136
- package/src/components/HeroLink/index.ts +0 -2
package/lib/index.mjs
CHANGED
|
@@ -22,6 +22,7 @@ import { TypographyCard } from '@arc-ui/components/TypographyCard';
|
|
|
22
22
|
import { Box } from '@arc-ui/components/Box';
|
|
23
23
|
import { Rule } from '@arc-ui/components/Rule';
|
|
24
24
|
import { Align } from '@arc-ui/components/Align';
|
|
25
|
+
import { Hidden } from '@arc-ui/components/Hidden';
|
|
25
26
|
import { TabbedBanner } from '@arc-ui/components/TabbedBanner';
|
|
26
27
|
import { Tag } from '@arc-ui/components/Tag';
|
|
27
28
|
import { Toast, ToastNotification } from '@arc-ui/components/Toast';
|
|
@@ -235,17 +236,17 @@ function requireClassnames () {
|
|
|
235
236
|
var classnamesExports = requireClassnames();
|
|
236
237
|
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
237
238
|
|
|
238
|
-
var styles$
|
|
239
|
+
var styles$m = {"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"};
|
|
239
240
|
|
|
240
241
|
var AccordionHeading = function (_a) {
|
|
241
242
|
var _b, _c;
|
|
242
243
|
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"]);
|
|
243
244
|
return (React.createElement("div", __assign({ className: classNames((_b = {},
|
|
244
|
-
_b[styles$
|
|
245
|
-
_b[styles$
|
|
246
|
-
_b[styles$
|
|
245
|
+
_b[styles$m["accordion-header"]] = true,
|
|
246
|
+
_b[styles$m["accordion-header--padded"]] = isPadded,
|
|
247
|
+
_b[styles$m["accordion-header--headingSizeM"]] = headingSize === "m",
|
|
247
248
|
_b)) }, filterAttrs(props)),
|
|
248
|
-
React.createElement("div", { className: classNames((_c = {}, _c[styles$
|
|
249
|
+
React.createElement("div", { className: classNames((_c = {}, _c[styles$m["accordion-header--hasImage"]] = image, _c)) },
|
|
249
250
|
image && (React.createElement("div", null,
|
|
250
251
|
React.createElement(Image$2, __assign({}, image, { width: 68, fit: "cover" })))),
|
|
251
252
|
React.createElement(Heading, { level: headingLevel, id: id, size: headingSize }, heading)),
|
|
@@ -254,30 +255,30 @@ var AccordionHeading = function (_a) {
|
|
|
254
255
|
React.createElement(Text, { size: "l", elementType: "p" }, content)))));
|
|
255
256
|
};
|
|
256
257
|
|
|
257
|
-
var styles$
|
|
258
|
+
var styles$l = {"AccordionDisclosureListItem":"AccordionDisclosureList-module_AccordionDisclosureListItem__p8LIT"};
|
|
258
259
|
|
|
259
260
|
var AccordionDisclosureList = function (_a) {
|
|
260
261
|
var disclosureList = _a.disclosureList;
|
|
261
262
|
return (React.createElement("ul", null, disclosureList.map(function (_a) {
|
|
262
263
|
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"]);
|
|
263
|
-
return (React.createElement("li", { key: id, className: styles$
|
|
264
|
+
return (React.createElement("li", { key: id, className: styles$l.AccordionDisclosureListItem, id: id },
|
|
264
265
|
React.createElement(Disclosure, __assign({ summary: summary, isOpen: isOpen, indentDetails: indentDetails, headingLevel: headingLevel }, filterAttrs(props)), children)));
|
|
265
266
|
})));
|
|
266
267
|
};
|
|
267
268
|
|
|
268
|
-
var styles$
|
|
269
|
+
var styles$k = {"Accordion":"Accordion-module_Accordion__LsXTU"};
|
|
269
270
|
|
|
270
271
|
/**
|
|
271
272
|
* Use the `Accordion` component to package together a title, content and a number of disclosure components into one section (maximum 10).
|
|
272
273
|
*/
|
|
273
274
|
var Accordion = function (_a) {
|
|
274
275
|
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"]);
|
|
275
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
276
|
+
return (React.createElement("div", __assign({ className: styles$k.Accordion }, filterAttrs(props)),
|
|
276
277
|
React.createElement(AccordionHeading, { isPadded: true, id: id, "data-testid": "Accordion-header", heading: heading, headingLevel: headingLevel, headingSize: headingSize, content: content }),
|
|
277
278
|
React.createElement(AccordionDisclosureList, { disclosureList: disclosureList })));
|
|
278
279
|
};
|
|
279
280
|
|
|
280
|
-
var styles$
|
|
281
|
+
var styles$j = {"authorContent":"Author-module_authorContent__TBY7b","largeAvatar":"Author-module_largeAvatar__Vco03"};
|
|
281
282
|
|
|
282
283
|
var Author = function (_a) {
|
|
283
284
|
var name = _a.name, title = _a.title, _b = _a.avatar, avatar = _b === void 0 ? {} : _b, props = __rest(_a, ["name", "title", "avatar"]);
|
|
@@ -288,52 +289,52 @@ var Author = function (_a) {
|
|
|
288
289
|
React.createElement(Grid, { isFluid: true, isGutterless: true },
|
|
289
290
|
React.createElement(GridRow, { align: "center" },
|
|
290
291
|
React.createElement(GridCol, { xs: isLargeAvatar ? 12 : "auto" },
|
|
291
|
-
React.createElement("div", { className: isLargeAvatar ? styles$
|
|
292
|
+
React.createElement("div", { className: isLargeAvatar ? styles$j.largeAvatar : undefined },
|
|
292
293
|
React.createElement(Avatar, __assign({}, avatar)))),
|
|
293
294
|
React.createElement(GridCol, null,
|
|
294
|
-
React.createElement("div", { className: "".concat(!isLargeAvatar && styles$
|
|
295
|
+
React.createElement("div", { className: "".concat(!isLargeAvatar && styles$j.authorContent), "data-testid": "authorContent" },
|
|
295
296
|
React.createElement(Heading, { size: "xs" }, name),
|
|
296
297
|
React.createElement(Text, { size: "s" }, title)))))));
|
|
297
298
|
};
|
|
298
299
|
|
|
299
300
|
/**
|
|
300
301
|
* Do not edit directly
|
|
301
|
-
* Generated on
|
|
302
|
+
* Generated on Fri, 06 Mar 2026 15:05:14 GMT
|
|
302
303
|
*/
|
|
303
304
|
var ArcSizeBreakpointsS = "636px";
|
|
304
305
|
var ArcSizeBreakpointsM = "768px";
|
|
305
306
|
var ArcSizeBreakpointsL = "1024px";
|
|
306
307
|
var ArcSizeBreakpointsXl = "1280px";
|
|
307
308
|
|
|
308
|
-
var styles$
|
|
309
|
+
var styles$i = {"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"};
|
|
309
310
|
|
|
310
311
|
var MediaContent$1 = function (_a) {
|
|
311
312
|
var heading = _a.heading, id = _a.id, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, children = _a.children;
|
|
312
|
-
return (React.createElement("div", { className: styles$
|
|
313
|
+
return (React.createElement("div", { className: styles$i.mediaContainer },
|
|
313
314
|
React.createElement(Heading, { id: id, level: headingLevel, isWordWrap: isHeadingWordWrap, size: "xl" }, heading),
|
|
314
|
-
children && (React.createElement("div", { className: styles$
|
|
315
|
+
children && (React.createElement("div", { className: styles$i.content },
|
|
315
316
|
React.createElement(VerticalSpace, { size: "24" }),
|
|
316
317
|
React.createElement(Text, { size: "l" }, children)))));
|
|
317
318
|
};
|
|
318
319
|
|
|
319
320
|
var Image$1 = function (_a) {
|
|
320
321
|
var sources = _a.sources, props = __rest(_a, ["sources"]);
|
|
321
|
-
return (React.createElement("div", { className: styles$
|
|
322
|
+
return (React.createElement("div", { className: styles$i.imgWrapper },
|
|
322
323
|
React.createElement(Image$2, __assign({ fadeOnLoad: true }, props), sources &&
|
|
323
324
|
sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))));
|
|
324
325
|
};
|
|
325
326
|
|
|
326
327
|
var IconList = function (_a) {
|
|
327
328
|
var listItems = _a.listItems, isLgScreen = _a.isLgScreen, _b = _a.headingLevel, headingLevel = _b === void 0 ? "3" : _b;
|
|
328
|
-
return (React.createElement("ul", { className: styles$
|
|
329
|
+
return (React.createElement("ul", { className: styles$i.list }, listItems.map(function (_a) {
|
|
329
330
|
var _b;
|
|
330
331
|
var icon = _a.icon, heading = _a.heading, text = _a.text;
|
|
331
|
-
return (React.createElement("li", { key: heading, className: classNames(styles$
|
|
332
|
-
_b[styles$
|
|
332
|
+
return (React.createElement("li", { key: heading, className: classNames(styles$i.listItem, (_b = {},
|
|
333
|
+
_b[styles$i.listItemCentered] = !text,
|
|
333
334
|
_b)) },
|
|
334
|
-
React.createElement("div", { className: styles$
|
|
335
|
+
React.createElement("div", { className: styles$i.listItemIconContainer },
|
|
335
336
|
React.createElement(Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
|
|
336
|
-
React.createElement("div", { className: styles$
|
|
337
|
+
React.createElement("div", { className: styles$i.listItemTextContainer },
|
|
337
338
|
React.createElement(Heading, { level: headingLevel, size: "s" }, heading),
|
|
338
339
|
text && (React.createElement(React.Fragment, null,
|
|
339
340
|
React.createElement(VerticalSpace, { size: "8", sizeL: "16" }),
|
|
@@ -341,20 +342,20 @@ var IconList = function (_a) {
|
|
|
341
342
|
})));
|
|
342
343
|
};
|
|
343
344
|
|
|
344
|
-
var Button = function (props) { return (React.createElement("div", { className: styles$
|
|
345
|
+
var Button = function (props) { return (React.createElement("div", { className: styles$i.buttonContainer },
|
|
345
346
|
React.createElement(ButtonV2, __assign({ isFullWidth: true, buttonStyle: "secondary" }, props)))); };
|
|
346
347
|
|
|
347
348
|
var Container = function (_a) {
|
|
348
349
|
var _b;
|
|
349
350
|
var children = _a.children, isReverseOrder = _a.isReverseOrder, type = _a.type, alignment = _a.alignment;
|
|
350
|
-
return (React.createElement("div", { "data-testid": "copy-lead-container", className: classNames(styles$
|
|
351
|
-
_b[styles$
|
|
351
|
+
return (React.createElement("div", { "data-testid": "copy-lead-container", className: classNames(styles$i.container, styles$i["container--".concat(type)], styles$i["container--align-".concat(alignment)], (_b = {},
|
|
352
|
+
_b[styles$i["container--reverse"]] = isReverseOrder,
|
|
352
353
|
_b)) }, children));
|
|
353
354
|
};
|
|
354
355
|
|
|
355
356
|
var Column = function (_a) {
|
|
356
357
|
var children = _a.children;
|
|
357
|
-
return (React.createElement("div", { className: styles$
|
|
358
|
+
return (React.createElement("div", { className: styles$i.col }, children));
|
|
358
359
|
};
|
|
359
360
|
|
|
360
361
|
var getListHeadingLevel$1 = function (level) {
|
|
@@ -394,16 +395,16 @@ var MediaTemplate = function (_a) {
|
|
|
394
395
|
image && !video && React.createElement(Image$1, __assign({}, image))))));
|
|
395
396
|
};
|
|
396
397
|
|
|
397
|
-
var styles$
|
|
398
|
+
var styles$h = {"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"};
|
|
398
399
|
|
|
399
400
|
var SectionHeading = function (_a) {
|
|
400
401
|
var _b, _c;
|
|
401
402
|
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"]);
|
|
402
403
|
return (React.createElement("div", __assign({ className: classNames((_b = {},
|
|
403
|
-
_b[styles$
|
|
404
|
-
_b[styles$
|
|
404
|
+
_b[styles$h["section-header"]] = true,
|
|
405
|
+
_b[styles$h["section-header--padded"]] = isPadded,
|
|
405
406
|
_b)) }, filterAttrs(props)),
|
|
406
|
-
React.createElement("div", { className: classNames((_c = {}, _c[styles$
|
|
407
|
+
React.createElement("div", { className: classNames((_c = {}, _c[styles$h["section-header--hasImage"]] = image, _c)) },
|
|
407
408
|
image && (React.createElement("div", null,
|
|
408
409
|
React.createElement(Image$2, __assign({}, image, { width: 68, fit: "cover" })))),
|
|
409
410
|
React.createElement(Heading, { level: headingLevel, id: id, size: "xl", isWordWrap: isHeadingWordWrap }, heading)),
|
|
@@ -440,47 +441,50 @@ var CopyLead = function (_a) {
|
|
|
440
441
|
return null;
|
|
441
442
|
};
|
|
442
443
|
|
|
443
|
-
var styles$
|
|
444
|
+
var styles$g = {"headingContainer":"DownloadList-module_headingContainer__PNio8"};
|
|
444
445
|
|
|
445
446
|
var DownloadList = function (_a) {
|
|
446
|
-
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;
|
|
447
|
-
return (React.createElement(
|
|
448
|
-
React.createElement("div", { className: styles$
|
|
447
|
+
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"]);
|
|
448
|
+
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
449
|
+
React.createElement("div", { className: styles$g.headingContainer },
|
|
449
450
|
React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
|
|
450
451
|
React.createElement(VerticalSpace, { size: "40" }),
|
|
451
|
-
downloads.map(function (
|
|
452
|
-
React.createElement(Download, __assign({},
|
|
453
|
-
" ",
|
|
452
|
+
downloads.map(function (downloadProps, i) { return (React.createElement(React.Fragment, { key: "download-".concat(i) },
|
|
453
|
+
React.createElement(Download, __assign({}, downloadProps)),
|
|
454
454
|
i !== downloads.length - 1 && React.createElement(VerticalSpace, { size: "16" }))); })));
|
|
455
455
|
};
|
|
456
456
|
|
|
457
|
-
var styles$
|
|
457
|
+
var styles$f = {"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"};
|
|
458
458
|
|
|
459
|
+
var scrollToSectionFocusFirstElement = function (item) {
|
|
460
|
+
var _a, _b, _c, _d, _e;
|
|
461
|
+
if (!item.id)
|
|
462
|
+
return;
|
|
463
|
+
(_a = document.getElementById(item.id)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
|
|
464
|
+
// preventScroll avoids interfering with the scroll animation.
|
|
465
|
+
(_e = (_d = document
|
|
466
|
+
.getElementById((_c = (_b = item.disclosureList) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.id)) === null || _d === void 0 ? void 0 : _d.querySelector("summary")) === null || _e === void 0 ? void 0 : _e.focus({ preventScroll: true });
|
|
467
|
+
};
|
|
459
468
|
var FAQs = function (_a) {
|
|
460
469
|
var _b;
|
|
461
470
|
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"]);
|
|
462
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
471
|
+
return (React.createElement("div", __assign({ className: styles$f.FAQs }, filterAttrs(props)),
|
|
463
472
|
React.createElement(SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, content: content, image: image, headingLevel: headingLevel, isPadded: isPadded }),
|
|
464
|
-
type === "listWithLinks" && (React.createElement("div", { className: styles$
|
|
465
|
-
React.createElement("div", { className: styles$
|
|
473
|
+
type === "listWithLinks" && (React.createElement("div", { className: styles$f.linkListSection },
|
|
474
|
+
React.createElement("div", { className: styles$f.linkListTitle },
|
|
466
475
|
React.createElement(Heading, { size: "xs" }, linkListHeading)),
|
|
467
476
|
React.createElement("ul", { className: classNames((_b = {},
|
|
468
|
-
_b[styles$
|
|
469
|
-
_b[styles$
|
|
477
|
+
_b[styles$f.linkList] = true,
|
|
478
|
+
_b[styles$f["linkList--padded"]] = isPadded,
|
|
470
479
|
_b)) }, accordionData.map(function (item) {
|
|
471
480
|
var _a;
|
|
472
|
-
return (React.createElement("li", { className: styles$
|
|
481
|
+
return (React.createElement("li", { className: styles$f.linkListItem, key: item.heading },
|
|
473
482
|
React.createElement(Link, { title: item.heading, href: "#".concat(item.id), onClick: function (e) {
|
|
474
483
|
e.preventDefault();
|
|
475
|
-
|
|
476
|
-
var element = document.getElementById(item.id);
|
|
477
|
-
if (element) {
|
|
478
|
-
element.scrollIntoView({ behavior: "smooth" });
|
|
479
|
-
}
|
|
480
|
-
}
|
|
484
|
+
scrollToSectionFocusFirstElement(item);
|
|
481
485
|
} }, (_a = item.altLinkTitle) !== null && _a !== void 0 ? _a : item.heading)));
|
|
482
486
|
})))),
|
|
483
|
-
type !== "tabs" && accordionData && (React.createElement("ul", { className: styles$
|
|
487
|
+
type !== "tabs" && accordionData && (React.createElement("ul", { className: styles$f.accordionList }, accordionData.map(function (item) { return (React.createElement("li", { className: styles$f.accordionListItem, key: item.id },
|
|
484
488
|
React.createElement(Accordion, { id: item.id, heading: item.heading, headingLevel: item.headingLevel, content: item.content, disclosureList: item.disclosureList, headingSize: "m" }),
|
|
485
489
|
React.createElement(VerticalSpace, { size: "48", sizeL: "64" }))); }))),
|
|
486
490
|
type === "tabs" && (React.createElement(Tabs, { defaultValue: accordionData[0].heading },
|
|
@@ -2677,13 +2681,20 @@ function cleanEscapedString(input) {
|
|
|
2677
2681
|
return matched[1].replace(doubleQuoteRegExp, "'");
|
|
2678
2682
|
}
|
|
2679
2683
|
|
|
2680
|
-
var styles$
|
|
2684
|
+
var styles$e = {"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"};
|
|
2681
2685
|
|
|
2682
2686
|
var Image = function (_a) {
|
|
2683
|
-
var sources = _a.sources, props = __rest(_a, ["sources"]);
|
|
2684
|
-
return (React.createElement(
|
|
2685
|
-
React.createElement(
|
|
2686
|
-
|
|
2687
|
+
var sources = _a.sources, title = _a.title, description = _a.description, props = __rest(_a, ["sources", "title", "description"]);
|
|
2688
|
+
return (React.createElement(React.Fragment, null,
|
|
2689
|
+
React.createElement("div", { className: styles$e.imgWrapper },
|
|
2690
|
+
React.createElement(Image$2, __assign({ fadeOnLoad: true }, props), sources &&
|
|
2691
|
+
sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))),
|
|
2692
|
+
title && (React.createElement(React.Fragment, null,
|
|
2693
|
+
React.createElement(VerticalSpace, { size: "24" }),
|
|
2694
|
+
React.createElement(Heading, { level: "3", size: "s" }, title),
|
|
2695
|
+
description && (React.createElement(React.Fragment, null,
|
|
2696
|
+
React.createElement(VerticalSpace, { size: "16" }),
|
|
2697
|
+
React.createElement(Text, { size: "m" }, description)))))));
|
|
2687
2698
|
};
|
|
2688
2699
|
|
|
2689
2700
|
var VideoPlayer = React.lazy(function () {
|
|
@@ -2713,29 +2724,29 @@ var FeaturePost = function (_a) {
|
|
|
2713
2724
|
var _b;
|
|
2714
2725
|
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"]);
|
|
2715
2726
|
var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
|
|
2716
|
-
return (React.createElement("div", __assign({ "data-testid": "feature-post", className: classNames(styles$
|
|
2717
|
-
_b[styles$
|
|
2727
|
+
return (React.createElement("div", __assign({ "data-testid": "feature-post", className: classNames(styles$e.featurePost, (_b = {},
|
|
2728
|
+
_b[styles$e.featurePostReversed] = isReverseOrder,
|
|
2718
2729
|
_b)) }, filterAttrs(props)),
|
|
2719
|
-
React.createElement("div", { className: styles$
|
|
2720
|
-
React.createElement("div", { className: styles$
|
|
2730
|
+
React.createElement("div", { className: styles$e.col },
|
|
2731
|
+
React.createElement("div", { className: styles$e.contentContainer },
|
|
2721
2732
|
label && (React.createElement(Grid, { isGutterless: true, isFluid: true },
|
|
2722
2733
|
React.createElement(GridRow, { align: "baseline" },
|
|
2723
2734
|
React.createElement(GridCol, { xs: 12, m: "auto" },
|
|
2724
2735
|
React.createElement(Heading, { size: "xxs", fontStyle: "overline" }, label.text)),
|
|
2725
2736
|
React.createElement(GridCol, { xs: 12, m: "auto" },
|
|
2726
|
-
React.createElement("div", { className: styles$
|
|
2737
|
+
React.createElement("div", { className: styles$e.labelDate },
|
|
2727
2738
|
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)))))),
|
|
2728
2739
|
React.createElement(VerticalSpace, { size: "24" }))),
|
|
2729
2740
|
React.createElement(Heading, { id: id, level: headingLevel, isWordWrap: isHeadingWordWrap, size: "xl" }, heading),
|
|
2730
2741
|
!isMinWidthArcBreakpointM && (React.createElement("div", { "data-testid": "mobile-img" },
|
|
2731
2742
|
React.createElement(VerticalSpace, { size: "40" }),
|
|
2732
2743
|
React.createElement(MediaContent, { image: image, video: video }))),
|
|
2733
|
-
React.createElement(VerticalSpace, { size: "
|
|
2734
|
-
React.createElement(Text, { size: "l" }, content),
|
|
2744
|
+
React.createElement(VerticalSpace, { size: "24" }),
|
|
2745
|
+
typeof content === "string" ? (React.createElement(Text, { size: "l" }, content)) : (content),
|
|
2735
2746
|
(footer === null || footer === void 0 ? void 0 : footer.type) === "cta" && (React.createElement(React.Fragment, null,
|
|
2736
2747
|
footer.author && (React.createElement(React.Fragment, null,
|
|
2737
|
-
React.createElement(VerticalSpace, { size: "
|
|
2738
|
-
React.createElement(Author, {
|
|
2748
|
+
React.createElement(VerticalSpace, { size: "40" }),
|
|
2749
|
+
React.createElement(Author, __assign({}, footer.author)))),
|
|
2739
2750
|
React.createElement(VerticalSpace, { size: "40" }),
|
|
2740
2751
|
React.createElement(ButtonV2, __assign({ buttonStyle: "secondary" }, footer.button)))),
|
|
2741
2752
|
(footer === null || footer === void 0 ? void 0 : footer.type) === "appButton" && (React.createElement(React.Fragment, null,
|
|
@@ -2745,10 +2756,10 @@ var FeaturePost = function (_a) {
|
|
|
2745
2756
|
footer.appStore && (React.createElement(GridCol, { xs: 12, s: "auto" },
|
|
2746
2757
|
React.createElement(AppButton, { type: "apple-app-store", screenReaderText: footer.appStore.screenReaderText, url: footer.appStore.url }))),
|
|
2747
2758
|
footer.googlePlay && (React.createElement(GridCol, { xs: 12, s: "auto" },
|
|
2748
|
-
React.createElement("div", { className: styles$
|
|
2759
|
+
React.createElement("div", { className: styles$e.googlePlayButtonWrapper },
|
|
2749
2760
|
React.createElement(AppButton, { type: "google-play", screenReaderText: footer.googlePlay.screenReaderText, url: footer.googlePlay.url })))))))))),
|
|
2750
|
-
isMinWidthArcBreakpointM && (React.createElement("div", { className: styles$
|
|
2751
|
-
React.createElement("div", { "data-testid": "desktop-img", className: styles$
|
|
2761
|
+
isMinWidthArcBreakpointM && (React.createElement("div", { className: styles$e.col },
|
|
2762
|
+
React.createElement("div", { "data-testid": "desktop-img", className: styles$e.imgContainer },
|
|
2752
2763
|
React.createElement(MediaContent, { image: image, video: video }))))));
|
|
2753
2764
|
};
|
|
2754
2765
|
|
|
@@ -2760,7 +2771,7 @@ var FeaturePost = function (_a) {
|
|
|
2760
2771
|
const BtIconArrowRightFill =
|
|
2761
2772
|
"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";
|
|
2762
2773
|
|
|
2763
|
-
var styles$
|
|
2774
|
+
var styles$d = {"highlights":"Highlights-module_highlights__Hf7Zq","highlightItem":"Highlights-module_highlightItem__-N6le","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
|
|
2764
2775
|
|
|
2765
2776
|
var getListHeadingLevel = function (level) {
|
|
2766
2777
|
var nextLevel = Math.min(parseInt(level) + 1, 6);
|
|
@@ -2768,10 +2779,10 @@ var getListHeadingLevel = function (level) {
|
|
|
2768
2779
|
};
|
|
2769
2780
|
|
|
2770
2781
|
var HighlightItem = function (_a) {
|
|
2771
|
-
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel;
|
|
2782
|
+
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"]);
|
|
2772
2783
|
var listHeadingLevel = getListHeadingLevel(headingLevel || "2");
|
|
2773
|
-
return (React.createElement("div", { "data-testid": "highlight-item-container", className: styles$
|
|
2774
|
-
icon && (React.createElement("div", { className: styles$
|
|
2784
|
+
return (React.createElement("div", __assign({ "data-testid": "highlight-item-container", className: styles$d.highlightItem }, filterAttrs(props)),
|
|
2785
|
+
icon && (React.createElement("div", { className: styles$d.Icon },
|
|
2775
2786
|
React.createElement(Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
|
|
2776
2787
|
React.createElement(VerticalSpace, { size: "16" }),
|
|
2777
2788
|
React.createElement(Heading, { level: listHeadingLevel, size: "m" }, heading),
|
|
@@ -2782,11 +2793,11 @@ var HighlightItem = function (_a) {
|
|
|
2782
2793
|
};
|
|
2783
2794
|
|
|
2784
2795
|
var HighlightList = function (_a) {
|
|
2785
|
-
var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel;
|
|
2796
|
+
var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel, props = __rest(_a, ["listItems", "columns", "isSmallIcon", "headingLevel"]);
|
|
2786
2797
|
var id = useId();
|
|
2787
|
-
return (React.createElement("div", { "data-testid": "highlights-list", className: classNames(styles$
|
|
2788
|
-
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link;
|
|
2789
|
-
return (React.createElement(HighlightItem, { key: "highlight-".concat(id, "-").concat(i), icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon, headingLevel: headingLevel }));
|
|
2798
|
+
return (React.createElement("div", __assign({ "data-testid": "highlights-list", className: classNames(styles$d.highlights, styles$d["highlights".concat(columns, "Column")]) }, filterAttrs(props)), listItems.map(function (_a, i) {
|
|
2799
|
+
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, itemProps = __rest(_a, ["icon", "heading", "text", "link"]);
|
|
2800
|
+
return (React.createElement(HighlightItem, __assign({ key: "highlight-".concat(id, "-").concat(i), icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon, headingLevel: headingLevel }, itemProps)));
|
|
2790
2801
|
})));
|
|
2791
2802
|
};
|
|
2792
2803
|
|
|
@@ -2797,11 +2808,11 @@ var HighlightList = function (_a) {
|
|
|
2797
2808
|
*/
|
|
2798
2809
|
var Highlights = function (_a) {
|
|
2799
2810
|
var _b, _c, _d;
|
|
2800
|
-
var heading = _a.heading, headingLevel = _a.headingLevel, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, listItems = _a.listItems, _e = _a.columns, columns = _e === void 0 ? "2" : _e, cta = _a.cta;
|
|
2811
|
+
var heading = _a.heading, headingLevel = _a.headingLevel, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, listItems = _a.listItems, _e = _a.columns, columns = _e === void 0 ? "2" : _e, cta = _a.cta, props = __rest(_a, ["heading", "headingLevel", "id", "isHeadingWordWrap", "content", "listItems", "columns", "cta"]);
|
|
2801
2812
|
var isMaxWidthArcBreakpointXs = useMediaQuery("(max-width: 767px)");
|
|
2802
|
-
return (React.createElement("div",
|
|
2813
|
+
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
2803
2814
|
React.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "highlights-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content }),
|
|
2804
|
-
React.createElement(HighlightList, {
|
|
2815
|
+
React.createElement(HighlightList, { listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs, headingLevel: headingLevel }),
|
|
2805
2816
|
cta && (React.createElement(React.Fragment, null,
|
|
2806
2817
|
React.createElement(VerticalSpace, { size: "24" }),
|
|
2807
2818
|
React.createElement(ButtonV2, { label: cta.label, href: cta.href, onClick: cta.onClick, size: "m", ariaLabel: cta.ariaLabel, buttonStyle: cta.buttonStyle, icon: cta.buttonStyle === "compact"
|
|
@@ -2811,7 +2822,7 @@ var Highlights = function (_a) {
|
|
|
2811
2822
|
: undefined, iconPosition: (_d = cta.iconPosition) !== null && _d !== void 0 ? _d : "beforeText" })))));
|
|
2812
2823
|
};
|
|
2813
2824
|
|
|
2814
|
-
var styles$
|
|
2825
|
+
var styles$c = {"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"};
|
|
2815
2826
|
|
|
2816
2827
|
/**
|
|
2817
2828
|
* Do not edit directly
|
|
@@ -2865,7 +2876,7 @@ const BtIconTickAlt2Px =
|
|
|
2865
2876
|
* Use `PromoListing` to give supporting information about a page or proposition in the form of the card components (`ImpactCard`, `InformationCard`, `MediaCard` and `TypographyCard`).
|
|
2866
2877
|
*/
|
|
2867
2878
|
var PromoListing = function (_a) {
|
|
2868
|
-
var heading = _a.heading, content = _a.content, id = _a.id, _b = _a.isCarousel, isCarousel = _b === void 0 ? false : _b, cards = _a.cards, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, _c = _a.columns, columns = _c === void 0 ? "2" : _c, _d = _a.button, button = _d === void 0 ? { buttonStyle: "secondary" } : _d, overlineHeadingLevel = _a.overlineHeadingLevel, overlineLabel = _a.overlineLabel;
|
|
2879
|
+
var heading = _a.heading, content = _a.content, id = _a.id, _b = _a.isCarousel, isCarousel = _b === void 0 ? false : _b, cards = _a.cards, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, _c = _a.columns, columns = _c === void 0 ? "2" : _c, _d = _a.button, button = _d === void 0 ? { buttonStyle: "secondary" } : _d, overlineHeadingLevel = _a.overlineHeadingLevel, overlineLabel = _a.overlineLabel, props = __rest(_a, ["heading", "content", "id", "isCarousel", "cards", "headingLevel", "isHeadingWordWrap", "columns", "button", "overlineHeadingLevel", "overlineLabel"]);
|
|
2869
2880
|
var componentId = useId();
|
|
2870
2881
|
var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
|
|
2871
2882
|
var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
|
|
@@ -2897,7 +2908,7 @@ var PromoListing = function (_a) {
|
|
|
2897
2908
|
var CardComponent = CARD_COMPONENTS[card.type];
|
|
2898
2909
|
return React.createElement(CardComponent, __assign({}, card, commonProps));
|
|
2899
2910
|
};
|
|
2900
|
-
return (React.createElement("div", { className: styles$
|
|
2911
|
+
return (React.createElement("div", __assign({ className: styles$c.PromoListing }, filterAttrs(props)),
|
|
2901
2912
|
overlineLabel && (React.createElement(React.Fragment, null,
|
|
2902
2913
|
React.createElement(Heading, { level: overlineHeadingLevel, fontStyle: "overline" }, overlineLabel),
|
|
2903
2914
|
React.createElement(VerticalSpace, { size: "12" }))),
|
|
@@ -2905,44 +2916,44 @@ var PromoListing = function (_a) {
|
|
|
2905
2916
|
button.label && (React.createElement(React.Fragment, null,
|
|
2906
2917
|
React.createElement(ButtonV2, __assign({}, button, { icon: button.buttonStyle == "compact" ? BtIconArrowRightFill : undefined, size: "m" })),
|
|
2907
2918
|
React.createElement(VerticalSpace, { size: "40" }))),
|
|
2908
|
-
isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles$
|
|
2909
|
-
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$
|
|
2910
|
-
React.createElement("div", { "data-testid": "promoList-card".concat(index), className: styles$
|
|
2919
|
+
isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles$c.promolistingCarouselWrapper },
|
|
2920
|
+
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$c.cardWrapperCarousel) }, getCard(card))); })))) : (React.createElement("ul", { className: classNames(styles$c.cardGrid, styles$c["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) },
|
|
2921
|
+
React.createElement("div", { "data-testid": "promoList-card".concat(index), className: styles$c.cardWrapper }, getCard(card)))); })))));
|
|
2911
2922
|
};
|
|
2912
2923
|
|
|
2913
|
-
var styles$
|
|
2924
|
+
var styles$b = {"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"};
|
|
2914
2925
|
|
|
2915
2926
|
/**
|
|
2916
2927
|
* 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.*/
|
|
2917
2928
|
var Quote = function (_a) {
|
|
2918
2929
|
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"]);
|
|
2919
2930
|
return (React.createElement("div", __assign({ className: "community-component--quote", "data-testid": "quote-test" }, filterAttrs(props)),
|
|
2920
|
-
React.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles$
|
|
2921
|
-
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles$
|
|
2931
|
+
React.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles$b.blockQuote, styles$b["quote".concat(styling)]), cite: citeUrl },
|
|
2932
|
+
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles$b.quoteIcon, "aria-hidden": "true" },
|
|
2922
2933
|
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" })),
|
|
2923
|
-
React.createElement("p", { className: styles$
|
|
2924
|
-
author &&
|
|
2934
|
+
React.createElement("p", { className: styles$b.quoteContent }, content)),
|
|
2935
|
+
author && React.createElement(Author, __assign({}, author))));
|
|
2925
2936
|
};
|
|
2926
2937
|
|
|
2927
|
-
var styles$
|
|
2938
|
+
var styles$a = {"ruleContainer":"Summary-module_ruleContainer__ydWlG","row":"Summary-module_row__SKV--"};
|
|
2928
2939
|
|
|
2929
2940
|
var Summary = function (_a) {
|
|
2930
|
-
var content = _a.content, _b = _a.noBorder, noBorder = _b === void 0 ? false : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "3" : _c;
|
|
2941
|
+
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"]);
|
|
2931
2942
|
var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
|
|
2932
|
-
return (React.createElement(Box, __assign({ isBorderRadius: true }, (!noBorder ? { borderWidth: "thin" } : { elevationLevel: "1" }), { padding: "24" }),
|
|
2933
|
-
React.createElement("div", { className: styles$
|
|
2943
|
+
return (React.createElement(Box, __assign({ isBorderRadius: true }, (!noBorder ? { borderWidth: "thin" } : { elevationLevel: "1" }), { padding: "24" }, filterAttrs(props)),
|
|
2944
|
+
React.createElement("div", { className: styles$a.row }, content.map(function (_a, i) {
|
|
2934
2945
|
var heading = _a.heading, text = _a.text;
|
|
2935
2946
|
return (React.createElement(React.Fragment, null,
|
|
2936
|
-
React.createElement("div", { className: styles$
|
|
2947
|
+
React.createElement("div", { className: styles$a.col },
|
|
2937
2948
|
React.createElement(Heading, { size: "s", level: headingLevel }, heading),
|
|
2938
2949
|
React.createElement(VerticalSpace, { size: "8" }),
|
|
2939
2950
|
React.createElement(Text, { size: "s" }, text)),
|
|
2940
|
-
i !== content.length - 1 && (React.createElement("div", { className: styles$
|
|
2951
|
+
i !== content.length - 1 && (React.createElement("div", { className: styles$a.ruleContainer },
|
|
2941
2952
|
React.createElement(Rule, { orientation: isMinWidthArcBreakpointM ? "vertical" : "horizontal" })))));
|
|
2942
2953
|
}))));
|
|
2943
2954
|
};
|
|
2944
2955
|
|
|
2945
|
-
var styles$
|
|
2956
|
+
var styles$9 = {"list":"Statistics-module_list__BI-eQ","mutedText":"Statistics-module_mutedText__MR1JM"};
|
|
2946
2957
|
|
|
2947
2958
|
var getLinkProps = function (link) {
|
|
2948
2959
|
return link.openInNewTab
|
|
@@ -2954,14 +2965,13 @@ var getLinkProps = function (link) {
|
|
|
2954
2965
|
};
|
|
2955
2966
|
|
|
2956
2967
|
var Statistics = function (_a) {
|
|
2957
|
-
var id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, headingLevel = _a.headingLevel, heading = _a.heading, content = _a.content, statistics = _a.statistics;
|
|
2968
|
+
var id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, headingLevel = _a.headingLevel, heading = _a.heading, content = _a.content, statistics = _a.statistics, props = __rest(_a, ["id", "isHeadingWordWrap", "headingLevel", "heading", "content", "statistics"]);
|
|
2958
2969
|
var componentId = useId();
|
|
2959
|
-
return (React.createElement(Columns,
|
|
2970
|
+
return (React.createElement(Columns, __assign({ isGutterless: true }, filterAttrs(props)),
|
|
2960
2971
|
React.createElement(ColumnsCol, { spanM: 9 },
|
|
2961
|
-
React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content }),
|
|
2962
|
-
React.createElement(VerticalSpace, { size: "16" })),
|
|
2972
|
+
React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
|
|
2963
2973
|
React.createElement(ColumnsCol, { spanL: 9 },
|
|
2964
|
-
React.createElement("ul", { className: styles$
|
|
2974
|
+
React.createElement("ul", { className: styles$9.list }, statistics.map(function (_a, i) {
|
|
2965
2975
|
var stat = _a.stat, copy = _a.copy, link = _a.link, source = _a.source, sourceUrl = _a.sourceUrl;
|
|
2966
2976
|
return (React.createElement("li", { key: "statistic-".concat(componentId, "-").concat(i) },
|
|
2967
2977
|
i !== 0 && (React.createElement(React.Fragment, null,
|
|
@@ -2971,43 +2981,46 @@ var Statistics = function (_a) {
|
|
|
2971
2981
|
React.createElement(Columns, null,
|
|
2972
2982
|
React.createElement(ColumnsCol, { spanS: 6, spanM: 8 },
|
|
2973
2983
|
React.createElement(Align, { vertical: "center" },
|
|
2974
|
-
React.createElement("div", { className: styles$
|
|
2975
|
-
React.createElement(Heading, { color: "brand", size: "xxl" }, stat)
|
|
2984
|
+
React.createElement("div", { className: styles$9.statWrapper },
|
|
2985
|
+
React.createElement(Heading, { color: "brand", size: "xxl" }, stat),
|
|
2986
|
+
React.createElement(Hidden, { s: true, m: true, l: true, xl: true, xxl: true },
|
|
2987
|
+
React.createElement(VerticalSpace, { size: "12" }))))),
|
|
2976
2988
|
React.createElement(ColumnsCol, { spanS: 6, spanM: 4 },
|
|
2977
|
-
React.createElement(
|
|
2978
|
-
|
|
2979
|
-
React.createElement(
|
|
2980
|
-
|
|
2981
|
-
|
|
2982
|
-
React.createElement(
|
|
2983
|
-
|
|
2984
|
-
React.createElement(
|
|
2985
|
-
|
|
2986
|
-
React.createElement(
|
|
2989
|
+
React.createElement(Align, { vertical: "center" },
|
|
2990
|
+
React.createElement(Text, null, copy),
|
|
2991
|
+
link && (React.createElement(React.Fragment, null,
|
|
2992
|
+
React.createElement(VerticalSpace, { size: "12" }),
|
|
2993
|
+
React.createElement("a", __assign({ href: link.href, "aria-label": link.ariaLabel }, getLinkProps(link)), link.text))),
|
|
2994
|
+
source && (React.createElement(React.Fragment, null,
|
|
2995
|
+
React.createElement(VerticalSpace, { size: "12" }),
|
|
2996
|
+
React.createElement(Text, { size: "xs" },
|
|
2997
|
+
React.createElement("span", { className: styles$9.mutedText }, source)))),
|
|
2998
|
+
sourceUrl && (React.createElement(Text, { size: "xs" },
|
|
2999
|
+
React.createElement("a", { className: styles$9.mutedText, href: sourceUrl }, sourceUrl))))))));
|
|
2987
3000
|
})))));
|
|
2988
3001
|
};
|
|
2989
3002
|
|
|
2990
|
-
var styles$
|
|
3003
|
+
var styles$8 = {"bannerWithTabsHeadingCentered":"BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO"};
|
|
2991
3004
|
|
|
2992
3005
|
var BannerWithTabs = function (_a) {
|
|
2993
3006
|
var _b;
|
|
2994
|
-
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;
|
|
2995
|
-
return (React.createElement(
|
|
3007
|
+
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"]);
|
|
3008
|
+
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
2996
3009
|
React.createElement("div", { className: classNames((_b = {},
|
|
2997
|
-
_b[styles$
|
|
3010
|
+
_b[styles$8.bannerWithTabsHeadingCentered] = alignTypography === "center",
|
|
2998
3011
|
_b)) },
|
|
2999
3012
|
React.createElement(SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, content: content, isPadded: alignTypography === "left" ? true : false })),
|
|
3000
3013
|
React.createElement(TabbedBanner, { minHeight: minHeight, minHeightM: minHeightM, tabs: tabs, defaultValue: defaultValue })));
|
|
3001
3014
|
};
|
|
3002
3015
|
|
|
3003
|
-
var styles$
|
|
3016
|
+
var styles$7 = {"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"};
|
|
3004
3017
|
|
|
3005
3018
|
/**
|
|
3006
3019
|
* Use `ArticleSidebar` to provide additional information about the article.
|
|
3007
3020
|
*/
|
|
3008
3021
|
var ArticleSidebar = function (_a) {
|
|
3009
3022
|
var _b;
|
|
3010
|
-
var author = _a.author, aboutSection = _a.aboutSection, topics = _a.topics, share = _a.share, additionalContent = _a.additionalContent, linkSection = _a.linkSection;
|
|
3023
|
+
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"]);
|
|
3011
3024
|
var id = useId();
|
|
3012
3025
|
var _c = useState(false), showToast = _c[0], setShowToast = _c[1];
|
|
3013
3026
|
var url = location.href;
|
|
@@ -3054,9 +3067,9 @@ var ArticleSidebar = function (_a) {
|
|
|
3054
3067
|
: []), true) : [];
|
|
3055
3068
|
var hasTopContent = Boolean(author || aboutSection || additionalContent);
|
|
3056
3069
|
var hasBottomContent = Boolean(linkSection || topics || share);
|
|
3057
|
-
return (React.createElement(
|
|
3070
|
+
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3058
3071
|
React.createElement("div", { className: classNames((_b = {},
|
|
3059
|
-
_b[styles$
|
|
3072
|
+
_b[styles$7.textContent] = hasTopContent,
|
|
3060
3073
|
_b)) },
|
|
3061
3074
|
author && (React.createElement(React.Fragment, null,
|
|
3062
3075
|
React.createElement(Author, __assign({}, author, { avatar: __assign(__assign({}, author.avatar), { size: "xl" }) })))),
|
|
@@ -3067,7 +3080,7 @@ var ArticleSidebar = function (_a) {
|
|
|
3067
3080
|
React.createElement(Text, { size: "s" }, aboutSection.content))),
|
|
3068
3081
|
additionalContent && (React.createElement(React.Fragment, null,
|
|
3069
3082
|
(author || aboutSection) && React.createElement(VerticalSpace, { size: "16" }),
|
|
3070
|
-
React.createElement("div", { className: styles$
|
|
3083
|
+
React.createElement("div", { className: styles$7.additionalContentContainer }, additionalContent.map(function (_a) {
|
|
3071
3084
|
var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content;
|
|
3072
3085
|
return (React.createElement("div", { key: "".concat(id, "-").concat(heading) },
|
|
3073
3086
|
React.createElement(Heading, { level: headingLevel, size: "xxs" }, heading),
|
|
@@ -3090,7 +3103,7 @@ var ArticleSidebar = function (_a) {
|
|
|
3090
3103
|
linkSection && React.createElement(VerticalSpace, { size: "32" }),
|
|
3091
3104
|
React.createElement(Heading, { level: topics.headingLevel }, topics.heading),
|
|
3092
3105
|
React.createElement(VerticalSpace, { size: "16" }),
|
|
3093
|
-
React.createElement("div", { className: styles$
|
|
3106
|
+
React.createElement("div", { className: styles$7.tagGroup }, topics.tags.map(function (tag) { return (React.createElement(Tag, __assign({ key: "".concat(id, "-").concat(tag.title) }, tag))); })))),
|
|
3094
3107
|
share && (React.createElement(React.Fragment, null,
|
|
3095
3108
|
(linkSection || topics) && (React.createElement("div", { "data-testid": "links-topics-content-rule" },
|
|
3096
3109
|
React.createElement(VerticalSpace, { size: "32" }),
|
|
@@ -3098,16 +3111,16 @@ var ArticleSidebar = function (_a) {
|
|
|
3098
3111
|
React.createElement(VerticalSpace, { size: "32" }))),
|
|
3099
3112
|
React.createElement(Heading, { level: share.headingLevel }, share.heading),
|
|
3100
3113
|
React.createElement(VerticalSpace, { size: "16" }),
|
|
3101
|
-
React.createElement("div", { className: styles$
|
|
3114
|
+
React.createElement("div", { className: styles$7.shareButtonContainer }, shareButtons.map(function (_a) {
|
|
3102
3115
|
var isButton = _a.isButton, ariaLabel = _a.ariaLabel, href = _a.href, icon = _a.icon, onClick = _a.onClick;
|
|
3103
|
-
return (React.createElement("a", { key: "".concat(id, "-").concat(ariaLabel), role: isButton ? "button" : undefined, target: "_blank", rel: "noreferrer", className: styles$
|
|
3116
|
+
return (React.createElement("a", { key: "".concat(id, "-").concat(ariaLabel), role: isButton ? "button" : undefined, target: "_blank", rel: "noreferrer", className: styles$7.shareButton, "aria-label": ariaLabel, href: href, onClick: isButton ? onClick : undefined },
|
|
3104
3117
|
React.createElement(Icon, { icon: icon, size: 24 })));
|
|
3105
3118
|
})))),
|
|
3106
3119
|
React.createElement(Toast, null,
|
|
3107
3120
|
React.createElement(ToastNotification, { status: "success", title: "Copied to clipboard", isOpen: showToast, onOpenChange: function () { return setShowToast(false); } }))));
|
|
3108
3121
|
};
|
|
3109
3122
|
|
|
3110
|
-
var styles$
|
|
3123
|
+
var styles$6 = {"product-navigation-grid":"ProductNavigation-module_product-navigation-grid__RzFq8","productNavigation-skipLink":"ProductNavigation-module_productNavigation-skipLink__fy8ZJ"};
|
|
3111
3124
|
|
|
3112
3125
|
/**
|
|
3113
3126
|
* Use `ProductNavigation` to give a collection of product information cards collected within a grid that has optional show/hide capability
|
|
@@ -3151,7 +3164,7 @@ var ProductNavigation = function (_a) {
|
|
|
3151
3164
|
var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
|
|
3152
3165
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3153
3166
|
React.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "ProductNavigation-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content, image: image }),
|
|
3154
|
-
React.createElement("ul", { className: classNames(styles$
|
|
3167
|
+
React.createElement("ul", { className: classNames(styles$6["product-navigation-grid"]) }, displayList === null || displayList === void 0 ? void 0 : displayList.map(function (cardProps, i) {
|
|
3155
3168
|
var _a;
|
|
3156
3169
|
return (React.createElement("li", { key: "displayList-".concat(i), tabIndex: -1, ref: i === skipLinkCard ? cardRef : undefined, "data-cy": "list-item-".concat(i) },
|
|
3157
3170
|
React.createElement(InformationCard, __assign({}, cardProps, { minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : cardProps.minHeight, headingLevel: (_a = cardProps.headingLevel) !== null && _a !== void 0 ? _a : "2" }))));
|
|
@@ -3162,7 +3175,7 @@ var ProductNavigation = function (_a) {
|
|
|
3162
3175
|
? "Show more"
|
|
3163
3176
|
: "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
|
|
3164
3177
|
displayList.length > cardsToDisplay && (React.createElement(React.Fragment, null,
|
|
3165
|
-
React.createElement("div", { id: "skip-link", className: classNames(styles$
|
|
3178
|
+
React.createElement("div", { id: "skip-link", className: classNames(styles$6["productNavigation-skipLink"]), tabIndex: -1 },
|
|
3166
3179
|
React.createElement(ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true })))),
|
|
3167
3180
|
React.createElement(VisuallyHidden, null,
|
|
3168
3181
|
React.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
|
|
@@ -3175,71 +3188,101 @@ var ProductNavigation = function (_a) {
|
|
|
3175
3188
|
"."))))));
|
|
3176
3189
|
};
|
|
3177
3190
|
|
|
3178
|
-
var styles$
|
|
3191
|
+
var styles$5 = {"container":"ContentInfoWidget-module_container__yaS-8","text":"ContentInfoWidget-module_text__O1BdZ","icon":"ContentInfoWidget-module_icon__LEww1"};
|
|
3179
3192
|
|
|
3180
3193
|
var ContentInfoWidget = function (_a) {
|
|
3181
|
-
var text = _a.text, icon = _a.icon;
|
|
3182
|
-
return (React.createElement("div", { className: styles$
|
|
3183
|
-
React.createElement("div", { className: styles$
|
|
3194
|
+
var text = _a.text, icon = _a.icon, props = __rest(_a, ["text", "icon"]);
|
|
3195
|
+
return (React.createElement("div", __assign({ className: styles$5.container }, filterAttrs(props)),
|
|
3196
|
+
React.createElement("div", { className: styles$5.icon },
|
|
3184
3197
|
React.createElement(Icon, { size: 20, icon: icon })),
|
|
3185
|
-
React.createElement("div", { className: styles$
|
|
3198
|
+
React.createElement("div", { className: styles$5.text },
|
|
3186
3199
|
React.createElement(Text, { size: "xs", tone: "muted" }, text))));
|
|
3187
3200
|
};
|
|
3188
3201
|
|
|
3189
|
-
var styles$
|
|
3190
|
-
|
|
3191
|
-
/**
|
|
3192
|
-
* Pill-style HeroLink component with default and hover states
|
|
3193
|
-
*/
|
|
3194
|
-
var HeroLink = function (_a) {
|
|
3195
|
-
var _b;
|
|
3196
|
-
var label = _a.label, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, ariaLabel = _a.ariaLabel, ref = _a.ref, props = __rest(_a, ["label", "onClick", "href", "id", "rel", "target", "ariaLabel", "ref"]);
|
|
3197
|
-
var HeroLinkClasses = classNames(styles$2.heroLink, (_b = {},
|
|
3198
|
-
_b[styles$2["heroLink--emptyLabel"]] = !label,
|
|
3199
|
-
_b));
|
|
3200
|
-
var commonProps = __assign({ id: id, onClick: onClick, ref: ref }, props);
|
|
3201
|
-
if (href) {
|
|
3202
|
-
return (React.createElement("a", __assign({}, commonProps, { className: HeroLinkClasses, href: href, rel: rel, "aria-label": ariaLabel, target: target }),
|
|
3203
|
-
React.createElement("span", { className: styles$2["heroLink-inner"] },
|
|
3204
|
-
label && React.createElement("span", { className: styles$2["heroLink-label"] }, label),
|
|
3205
|
-
React.createElement("span", { className: styles$2["heroLink-icon"] },
|
|
3206
|
-
React.createElement(Icon, { testId: "hero-link-icon", size: 24, icon: BtIconArrowAltRight })))));
|
|
3207
|
-
}
|
|
3208
|
-
return (React.createElement("button", __assign({}, commonProps, { className: HeroLinkClasses, "aria-label": ariaLabel }),
|
|
3209
|
-
React.createElement("span", { className: styles$2["heroLink-inner"] },
|
|
3210
|
-
label && React.createElement("span", { className: styles$2["heroLink-label"] }, label),
|
|
3211
|
-
React.createElement("span", { className: styles$2["heroLink-icon"] },
|
|
3212
|
-
React.createElement(Icon, { testId: "hero-link-icon", size: 24, icon: BtIconArrowAltRight })))));
|
|
3213
|
-
};
|
|
3214
|
-
|
|
3215
|
-
var styles$1 = {"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"};
|
|
3202
|
+
var styles$4 = {"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"};
|
|
3216
3203
|
|
|
3217
3204
|
var ActionTile = function (_a) {
|
|
3218
3205
|
var _b;
|
|
3219
3206
|
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"]);
|
|
3220
|
-
var tileClasses = classNames(styles$
|
|
3221
|
-
_b[styles$
|
|
3207
|
+
var tileClasses = classNames(styles$4["action-tile"], (_b = {},
|
|
3208
|
+
_b[styles$4["action-tile--active"]] = isActive,
|
|
3222
3209
|
_b), className);
|
|
3223
3210
|
var content = (React.createElement(React.Fragment, null,
|
|
3224
|
-
React.createElement("div", { className: styles$
|
|
3225
|
-
icon && (React.createElement("div", { className: styles$
|
|
3211
|
+
React.createElement("div", { className: styles$4["action-tile-content"] },
|
|
3212
|
+
icon && (React.createElement("div", { className: styles$4["action-tile-icon"] },
|
|
3226
3213
|
React.createElement(Icon, { icon: icon, size: 48 }))),
|
|
3227
|
-
React.createElement("h3", { className: styles$
|
|
3228
|
-
isActive && (React.createElement("div", { className: styles$
|
|
3229
|
-
React.createElement(Icon, { icon: BtIconTickAlt2Px, size:
|
|
3214
|
+
React.createElement("h3", { className: styles$4["action-tile-heading"] }, heading)),
|
|
3215
|
+
isActive && (React.createElement("div", { className: styles$4["action-tile-tick"] },
|
|
3216
|
+
React.createElement(Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
|
|
3230
3217
|
return (React.createElement("div", __assign({ className: tileClasses, onClick: onClick }, filterAttrs(props)), content));
|
|
3231
3218
|
};
|
|
3232
3219
|
|
|
3233
|
-
var styles = {"link-tile":"LinkTile-module_link-tile__xVUP3","link-tile-content":"LinkTile-module_link-tile-content__H-QN8","link-tile-text":"LinkTile-module_link-tile-text__0K6zf"};
|
|
3220
|
+
var styles$3 = {"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"};
|
|
3234
3221
|
|
|
3235
3222
|
var LinkTile = function (_a) {
|
|
3236
3223
|
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"]);
|
|
3237
3224
|
var Component = href ? "a" : "div";
|
|
3238
3225
|
var linkProps = href ? { href: href } : {};
|
|
3239
|
-
return (React.createElement(Component, __assign({ className: classNames(styles["link-tile"], className) }, linkProps, filterAttrs(props)), text && (React.createElement("div", { className: styles["link-tile-content"] },
|
|
3240
|
-
React.createElement("span", { className: styles["link-tile-text"] }, text),
|
|
3241
|
-
showIcon && React.createElement(
|
|
3226
|
+
return (React.createElement(Component, __assign({ className: classNames(styles$3["link-tile"], className) }, linkProps, filterAttrs(props)), text && (React.createElement("div", { className: styles$3["link-tile-content"] },
|
|
3227
|
+
React.createElement("span", { className: styles$3["link-tile-text"] }, text),
|
|
3228
|
+
showIcon && (React.createElement("span", { className: styles$3["link-tile-icon"] },
|
|
3229
|
+
React.createElement(Icon, { icon: BtIconArrowAltRight, size: 32 })))))));
|
|
3230
|
+
};
|
|
3231
|
+
|
|
3232
|
+
var styles$2 = {"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"};
|
|
3233
|
+
|
|
3234
|
+
var InlineLinkGroup = function (_a) {
|
|
3235
|
+
var label = _a.label, links = _a.links, props = __rest(_a, ["label", "links"]);
|
|
3236
|
+
return (React.createElement("div", __assign({ className: styles$2["quick-help"] }, filterAttrs(props)),
|
|
3237
|
+
label && (React.createElement("div", { className: styles$2["quick-help-label"] },
|
|
3238
|
+
React.createElement(Heading, { size: "xxs", fontStyle: "overline" }, label))),
|
|
3239
|
+
React.createElement("ul", { className: styles$2["quick-help-container"] }, links.map(function (link, index) { return (React.createElement(React.Fragment, { key: index },
|
|
3240
|
+
React.createElement("li", { className: styles$2["quick-help-item"] },
|
|
3241
|
+
React.createElement(Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel }, link.label),
|
|
3242
|
+
React.createElement(Icon, { icon: BtIconArrowAltRight, size: 24, color: "brand" })),
|
|
3243
|
+
index < links.length - 1 && (React.createElement("li", { className: styles$2["quick-help-separator"], "aria-hidden": "true" },
|
|
3244
|
+
React.createElement("div", { className: styles$2["quick-help-separator-line"] }))))); }))));
|
|
3245
|
+
};
|
|
3246
|
+
|
|
3247
|
+
var styles$1 = {"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"};
|
|
3248
|
+
|
|
3249
|
+
/** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
|
|
3250
|
+
var ThumbnailSignpost = function (_a) {
|
|
3251
|
+
var _b;
|
|
3252
|
+
var text = _a.text, title = _a.title, img = _a.img, onClick = _a.onClick, buttonLabel = _a.buttonLabel, props = __rest(_a, ["text", "title", "img", "onClick", "buttonLabel"]);
|
|
3253
|
+
return (React.createElement("div", __assign({ className: classNames(styles$1.thumbnailSignpost, (_b = {},
|
|
3254
|
+
_b[styles$1.isLink] = onClick,
|
|
3255
|
+
_b)), onClick: onClick, "aria-label": title, tabIndex: onClick ? 0 : -1 }, (onClick && { role: "button" }), filterAttrs(props)),
|
|
3256
|
+
img && (React.createElement("div", { className: styles$1.image },
|
|
3257
|
+
React.createElement(Image$2, __assign({}, img)))),
|
|
3258
|
+
React.createElement("div", { className: styles$1.content },
|
|
3259
|
+
React.createElement("span", { className: styles$1.heading }, title),
|
|
3260
|
+
React.createElement(VerticalSpace, { size: "8" }),
|
|
3261
|
+
text,
|
|
3262
|
+
buttonLabel && onClick && (React.createElement(React.Fragment, null,
|
|
3263
|
+
React.createElement(VerticalSpace, { size: "8" }),
|
|
3264
|
+
React.createElement("div", { className: styles$1.thumbnailButton },
|
|
3265
|
+
React.createElement("span", { className: styles$1.buttonIcon, role: "img", style: {
|
|
3266
|
+
height: 24,
|
|
3267
|
+
width: 24,
|
|
3268
|
+
maskImage: "url(\"".concat(BtIconArrowRightFill, "\")"),
|
|
3269
|
+
WebkitMaskImage: "url(\"".concat(BtIconArrowRightFill, "\")"),
|
|
3270
|
+
} }),
|
|
3271
|
+
React.createElement(Heading, { size: "xxs" }, buttonLabel)))))));
|
|
3272
|
+
};
|
|
3273
|
+
|
|
3274
|
+
var styles = {"PromoListingThumbnailSignpost":"PromoListingThumbnailSignpost-module_PromoListingThumbnailSignpost__0HTPV","list":"PromoListingThumbnailSignpost-module_list__E9l0E"};
|
|
3275
|
+
|
|
3276
|
+
/**
|
|
3277
|
+
* Use `PromoListingThumbnailSignpost` to give supporting information about a page or proposition in the form of the ThumbnailSignposts components.
|
|
3278
|
+
*/
|
|
3279
|
+
var PromoListingThumbnailSignpost = function (_a) {
|
|
3280
|
+
var _b = _a.isPadded, isPadded = _b === void 0 ? true : _b, heading = _a.heading, content = _a.content, headingLevel = _a.headingLevel, thumbnailList = _a.thumbnailList, props = __rest(_a, ["isPadded", "heading", "content", "headingLevel", "thumbnailList"]);
|
|
3281
|
+
return (React.createElement("div", __assign({ className: styles.PromoListingThumbnailSignpost }, filterAttrs(props)),
|
|
3282
|
+
React.createElement(SectionHeading, { isPadded: isPadded, "data-testid": "PromoListingThumbnailSignpost-header", heading: heading, headingLevel: headingLevel, content: content }),
|
|
3283
|
+
React.createElement("ul", { className: styles.list }, thumbnailList.map(function (thumbnail, index) { return (React.createElement("li", { key: index },
|
|
3284
|
+
React.createElement(ThumbnailSignpost, __assign({}, thumbnail)))); }))));
|
|
3242
3285
|
};
|
|
3243
3286
|
|
|
3244
|
-
export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost,
|
|
3287
|
+
export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, Highlights, InlineLinkGroup, LinkTile, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost };
|
|
3245
3288
|
//# sourceMappingURL=index.mjs.map
|