@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/FAQs/FAQs.cjs
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var filterAttrs = require('../_shared/cjs/filter-attrs-C26zOt4_.cjs');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var index = require('../_shared/cjs/index-Bp6Dd2i1.cjs');
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var SectionHeading = require('../_shared/cjs/SectionHeading-DeSFM0HV.cjs');
|
|
6
|
+
var Accordion = require('../_shared/cjs/Accordion-QqDoB3pY.cjs');
|
|
7
|
+
var SectionHeading = require('../_shared/cjs/SectionHeading-Dj-dJfv3.cjs');
|
|
9
8
|
var Link = require('@arc-ui/components/Link');
|
|
10
9
|
var Heading = require('@arc-ui/components/Heading');
|
|
11
10
|
var VerticalSpace = require('@arc-ui/components/VerticalSpace');
|
|
@@ -16,10 +15,19 @@ require('@arc-ui/components/Disclosure');
|
|
|
16
15
|
|
|
17
16
|
var styles = {"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"};
|
|
18
17
|
|
|
18
|
+
var scrollToSectionFocusFirstElement = function (item) {
|
|
19
|
+
var _a, _b, _c, _d, _e;
|
|
20
|
+
if (!item.id)
|
|
21
|
+
return;
|
|
22
|
+
(_a = document.getElementById(item.id)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
|
|
23
|
+
// preventScroll avoids interfering with the scroll animation.
|
|
24
|
+
(_e = (_d = document
|
|
25
|
+
.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 });
|
|
26
|
+
};
|
|
19
27
|
var FAQs = function (_a) {
|
|
20
28
|
var _b;
|
|
21
|
-
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 =
|
|
22
|
-
return (React.createElement("div",
|
|
29
|
+
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 = filterAttrs.__rest(_a, ["heading", "isHeadingWordWrap", "content", "id", "isPadded", "headingLevel", "image", "type", "linkListHeading", "accordionData"]);
|
|
30
|
+
return (React.createElement("div", filterAttrs.__assign({ className: styles.FAQs }, filterAttrs.filterAttrs(props)),
|
|
23
31
|
React.createElement(SectionHeading.SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, content: content, image: image, headingLevel: headingLevel, isPadded: isPadded }),
|
|
24
32
|
type === "listWithLinks" && (React.createElement("div", { className: styles.linkListSection },
|
|
25
33
|
React.createElement("div", { className: styles.linkListTitle },
|
|
@@ -32,12 +40,7 @@ var FAQs = function (_a) {
|
|
|
32
40
|
return (React.createElement("li", { className: styles.linkListItem, key: item.heading },
|
|
33
41
|
React.createElement(Link.Link, { title: item.heading, href: "#".concat(item.id), onClick: function (e) {
|
|
34
42
|
e.preventDefault();
|
|
35
|
-
|
|
36
|
-
var element = document.getElementById(item.id);
|
|
37
|
-
if (element) {
|
|
38
|
-
element.scrollIntoView({ behavior: "smooth" });
|
|
39
|
-
}
|
|
40
|
-
}
|
|
43
|
+
scrollToSectionFocusFirstElement(item);
|
|
41
44
|
} }, (_a = item.altLinkTitle) !== null && _a !== void 0 ? _a : item.heading)));
|
|
42
45
|
})))),
|
|
43
46
|
type !== "tabs" && accordionData && (React.createElement("ul", { className: styles.accordionList }, accordionData.map(function (item) { return (React.createElement("li", { className: styles.accordionListItem, key: item.id },
|
package/lib/FAQs/FAQs.mjs
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { c as classNames } from '../_shared/esm/index-BfTCfPZ1.mjs';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import { S as SectionHeading } from '../_shared/esm/SectionHeading-CpDLCndw.mjs';
|
|
4
|
+
import { A as Accordion } from '../_shared/esm/Accordion-DrOTh90S.mjs';
|
|
5
|
+
import { S as SectionHeading } from '../_shared/esm/SectionHeading-DZOg_gYi.mjs';
|
|
7
6
|
import { Link } from '@arc-ui/components/Link';
|
|
8
7
|
import { Heading } from '@arc-ui/components/Heading';
|
|
9
8
|
import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
|
|
@@ -14,6 +13,15 @@ import '@arc-ui/components/Disclosure';
|
|
|
14
13
|
|
|
15
14
|
var styles = {"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"};
|
|
16
15
|
|
|
16
|
+
var scrollToSectionFocusFirstElement = function (item) {
|
|
17
|
+
var _a, _b, _c, _d, _e;
|
|
18
|
+
if (!item.id)
|
|
19
|
+
return;
|
|
20
|
+
(_a = document.getElementById(item.id)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
|
|
21
|
+
// preventScroll avoids interfering with the scroll animation.
|
|
22
|
+
(_e = (_d = document
|
|
23
|
+
.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 });
|
|
24
|
+
};
|
|
17
25
|
var FAQs = function (_a) {
|
|
18
26
|
var _b;
|
|
19
27
|
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"]);
|
|
@@ -30,12 +38,7 @@ var FAQs = function (_a) {
|
|
|
30
38
|
return (React.createElement("li", { className: styles.linkListItem, key: item.heading },
|
|
31
39
|
React.createElement(Link, { title: item.heading, href: "#".concat(item.id), onClick: function (e) {
|
|
32
40
|
e.preventDefault();
|
|
33
|
-
|
|
34
|
-
var element = document.getElementById(item.id);
|
|
35
|
-
if (element) {
|
|
36
|
-
element.scrollIntoView({ behavior: "smooth" });
|
|
37
|
-
}
|
|
38
|
-
}
|
|
41
|
+
scrollToSectionFocusFirstElement(item);
|
|
39
42
|
} }, (_a = item.altLinkTitle) !== null && _a !== void 0 ? _a : item.heading)));
|
|
40
43
|
})))),
|
|
41
44
|
type !== "tabs" && accordionData && (React.createElement("ul", { className: styles.accordionList }, accordionData.map(function (item) { return (React.createElement("li", { className: styles.accordionListItem, key: item.id },
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var filterAttrs = require('../_shared/cjs/filter-attrs-C26zOt4_.cjs');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var index = require('../_shared/cjs/index-Bp6Dd2i1.cjs');
|
|
6
|
-
var
|
|
7
|
-
var index_es = require('../_shared/cjs/index.es-DzI6hGjj.cjs');
|
|
6
|
+
var index_es = require('../_shared/cjs/index.es-Dq8bYrbW.cjs');
|
|
8
7
|
var AppButton = require('@arc-ui/components/AppButton');
|
|
9
8
|
var Grid = require('@arc-ui/components/Grid');
|
|
10
9
|
var ButtonV2 = require('@arc-ui/components/ButtonV2');
|
|
@@ -12,7 +11,7 @@ var Heading = require('@arc-ui/components/Heading');
|
|
|
12
11
|
var Text = require('@arc-ui/components/Text');
|
|
13
12
|
var VerticalSpace = require('@arc-ui/components/VerticalSpace');
|
|
14
13
|
var useMediaQuery = require('@arc-ui/components/use-media-query');
|
|
15
|
-
var Author = require('../_shared/cjs/Author-
|
|
14
|
+
var Author = require('../_shared/cjs/Author-aL8YXi7C.cjs');
|
|
16
15
|
var Image$1 = require('@arc-ui/components/Image');
|
|
17
16
|
require('@arc-ui/components/Avatar');
|
|
18
17
|
|
|
@@ -2204,10 +2203,17 @@ function cleanEscapedString(input) {
|
|
|
2204
2203
|
var styles = {"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"};
|
|
2205
2204
|
|
|
2206
2205
|
var Image = function (_a) {
|
|
2207
|
-
var sources = _a.sources, props =
|
|
2208
|
-
return (React.createElement(
|
|
2209
|
-
React.createElement(
|
|
2210
|
-
|
|
2206
|
+
var sources = _a.sources, title = _a.title, description = _a.description, props = filterAttrs.__rest(_a, ["sources", "title", "description"]);
|
|
2207
|
+
return (React.createElement(React.Fragment, null,
|
|
2208
|
+
React.createElement("div", { className: styles.imgWrapper },
|
|
2209
|
+
React.createElement(Image$1.Image, filterAttrs.__assign({ fadeOnLoad: true }, props), sources &&
|
|
2210
|
+
sources.map(function (source) { return React.createElement("source", filterAttrs.__assign({ key: source.srcSet }, source)); }))),
|
|
2211
|
+
title && (React.createElement(React.Fragment, null,
|
|
2212
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
|
|
2213
|
+
React.createElement(Heading.Heading, { level: "3", size: "s" }, title),
|
|
2214
|
+
description && (React.createElement(React.Fragment, null,
|
|
2215
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
2216
|
+
React.createElement(Text.Text, { size: "m" }, description)))))));
|
|
2211
2217
|
};
|
|
2212
2218
|
|
|
2213
2219
|
var VideoPlayer = React.lazy(function () {
|
|
@@ -2225,9 +2231,9 @@ var MediaContent = function (_a) {
|
|
|
2225
2231
|
setIsClient(true);
|
|
2226
2232
|
}, []);
|
|
2227
2233
|
return (React.createElement(React.Fragment, null,
|
|
2228
|
-
image && !video && React.createElement(Image,
|
|
2234
|
+
image && !video && React.createElement(Image, filterAttrs.__assign({}, image)),
|
|
2229
2235
|
video && isClient && (React.createElement(React.Suspense, { fallback: null },
|
|
2230
|
-
React.createElement(VideoPlayer,
|
|
2236
|
+
React.createElement(VideoPlayer, filterAttrs.__assign({}, video))))));
|
|
2231
2237
|
};
|
|
2232
2238
|
|
|
2233
2239
|
/**
|
|
@@ -2235,9 +2241,9 @@ var MediaContent = function (_a) {
|
|
|
2235
2241
|
* */
|
|
2236
2242
|
var FeaturePost = function (_a) {
|
|
2237
2243
|
var _b;
|
|
2238
|
-
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 =
|
|
2244
|
+
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 = filterAttrs.__rest(_a, ["heading", "id", "headingLevel", "label", "image", "content", "footer", "video", "isHeadingWordWrap", "isReverseOrder"]);
|
|
2239
2245
|
var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsM, ")"));
|
|
2240
|
-
return (React.createElement("div",
|
|
2246
|
+
return (React.createElement("div", filterAttrs.__assign({ "data-testid": "feature-post", className: index.classNames(styles.featurePost, (_b = {},
|
|
2241
2247
|
_b[styles.featurePostReversed] = isReverseOrder,
|
|
2242
2248
|
_b)) }, filterAttrs.filterAttrs(props)),
|
|
2243
2249
|
React.createElement("div", { className: styles.col },
|
|
@@ -2254,14 +2260,14 @@ var FeaturePost = function (_a) {
|
|
|
2254
2260
|
!isMinWidthArcBreakpointM && (React.createElement("div", { "data-testid": "mobile-img" },
|
|
2255
2261
|
React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
|
|
2256
2262
|
React.createElement(MediaContent, { image: image, video: video }))),
|
|
2257
|
-
React.createElement(VerticalSpace.VerticalSpace, { size: "
|
|
2258
|
-
React.createElement(Text.Text, { size: "l" }, content),
|
|
2263
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
|
|
2264
|
+
typeof content === "string" ? (React.createElement(Text.Text, { size: "l" }, content)) : (content),
|
|
2259
2265
|
(footer === null || footer === void 0 ? void 0 : footer.type) === "cta" && (React.createElement(React.Fragment, null,
|
|
2260
2266
|
footer.author && (React.createElement(React.Fragment, null,
|
|
2261
|
-
React.createElement(VerticalSpace.VerticalSpace, { size: "
|
|
2262
|
-
React.createElement(Author.Author, {
|
|
2267
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
|
|
2268
|
+
React.createElement(Author.Author, filterAttrs.__assign({}, footer.author)))),
|
|
2263
2269
|
React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
|
|
2264
|
-
React.createElement(ButtonV2.ButtonV2,
|
|
2270
|
+
React.createElement(ButtonV2.ButtonV2, filterAttrs.__assign({ buttonStyle: "secondary" }, footer.button)))),
|
|
2265
2271
|
(footer === null || footer === void 0 ? void 0 : footer.type) === "appButton" && (React.createElement(React.Fragment, null,
|
|
2266
2272
|
React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
|
|
2267
2273
|
React.createElement(Grid.Grid, { isGutterless: true, isFluid: true },
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
|
|
2
2
|
import React, { useState, useEffect, Suspense } from 'react';
|
|
3
3
|
import { c as classNames } from '../_shared/esm/index-BfTCfPZ1.mjs';
|
|
4
|
-
import {
|
|
5
|
-
import { b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-B6Bolkcx.mjs';
|
|
4
|
+
import { b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-Bfdys5__.mjs';
|
|
6
5
|
import { AppButton } from '@arc-ui/components/AppButton';
|
|
7
6
|
import { Grid, GridRow, GridCol } from '@arc-ui/components/Grid';
|
|
8
7
|
import { ButtonV2 } from '@arc-ui/components/ButtonV2';
|
|
@@ -10,7 +9,7 @@ import { Heading } from '@arc-ui/components/Heading';
|
|
|
10
9
|
import { Text } from '@arc-ui/components/Text';
|
|
11
10
|
import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
|
|
12
11
|
import { useMediaQuery } from '@arc-ui/components/use-media-query';
|
|
13
|
-
import { A as Author } from '../_shared/esm/Author-
|
|
12
|
+
import { A as Author } from '../_shared/esm/Author-BVCRPgkl.mjs';
|
|
14
13
|
import { Image as Image$1 } from '@arc-ui/components/Image';
|
|
15
14
|
import '@arc-ui/components/Avatar';
|
|
16
15
|
|
|
@@ -2202,10 +2201,17 @@ function cleanEscapedString(input) {
|
|
|
2202
2201
|
var styles = {"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"};
|
|
2203
2202
|
|
|
2204
2203
|
var Image = function (_a) {
|
|
2205
|
-
var sources = _a.sources, props = __rest(_a, ["sources"]);
|
|
2206
|
-
return (React.createElement(
|
|
2207
|
-
React.createElement(
|
|
2208
|
-
|
|
2204
|
+
var sources = _a.sources, title = _a.title, description = _a.description, props = __rest(_a, ["sources", "title", "description"]);
|
|
2205
|
+
return (React.createElement(React.Fragment, null,
|
|
2206
|
+
React.createElement("div", { className: styles.imgWrapper },
|
|
2207
|
+
React.createElement(Image$1, __assign({ fadeOnLoad: true }, props), sources &&
|
|
2208
|
+
sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))),
|
|
2209
|
+
title && (React.createElement(React.Fragment, null,
|
|
2210
|
+
React.createElement(VerticalSpace, { size: "24" }),
|
|
2211
|
+
React.createElement(Heading, { level: "3", size: "s" }, title),
|
|
2212
|
+
description && (React.createElement(React.Fragment, null,
|
|
2213
|
+
React.createElement(VerticalSpace, { size: "16" }),
|
|
2214
|
+
React.createElement(Text, { size: "m" }, description)))))));
|
|
2209
2215
|
};
|
|
2210
2216
|
|
|
2211
2217
|
var VideoPlayer = React.lazy(function () {
|
|
@@ -2252,12 +2258,12 @@ var FeaturePost = function (_a) {
|
|
|
2252
2258
|
!isMinWidthArcBreakpointM && (React.createElement("div", { "data-testid": "mobile-img" },
|
|
2253
2259
|
React.createElement(VerticalSpace, { size: "40" }),
|
|
2254
2260
|
React.createElement(MediaContent, { image: image, video: video }))),
|
|
2255
|
-
React.createElement(VerticalSpace, { size: "
|
|
2256
|
-
React.createElement(Text, { size: "l" }, content),
|
|
2261
|
+
React.createElement(VerticalSpace, { size: "24" }),
|
|
2262
|
+
typeof content === "string" ? (React.createElement(Text, { size: "l" }, content)) : (content),
|
|
2257
2263
|
(footer === null || footer === void 0 ? void 0 : footer.type) === "cta" && (React.createElement(React.Fragment, null,
|
|
2258
2264
|
footer.author && (React.createElement(React.Fragment, null,
|
|
2259
|
-
React.createElement(VerticalSpace, { size: "
|
|
2260
|
-
React.createElement(Author, {
|
|
2265
|
+
React.createElement(VerticalSpace, { size: "40" }),
|
|
2266
|
+
React.createElement(Author, __assign({}, footer.author)))),
|
|
2261
2267
|
React.createElement(VerticalSpace, { size: "40" }),
|
|
2262
2268
|
React.createElement(ButtonV2, __assign({ buttonStyle: "secondary" }, footer.button)))),
|
|
2263
2269
|
(footer === null || footer === void 0 ? void 0 : footer.type) === "appButton" && (React.createElement(React.Fragment, null,
|
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var filterAttrs = require('../_shared/cjs/filter-attrs-C26zOt4_.cjs');
|
|
3
4
|
var React = require('react');
|
|
4
5
|
var useMediaQuery = require('@arc-ui/components/use-media-query');
|
|
5
6
|
var ButtonV2 = require('@arc-ui/components/ButtonV2');
|
|
6
7
|
var VerticalSpace = require('@arc-ui/components/VerticalSpace');
|
|
7
8
|
var BtIconArrowRightFill = require('../_shared/cjs/BtIconArrowRightFill-BVCZv7Lm.cjs');
|
|
8
|
-
var SectionHeading = require('../_shared/cjs/SectionHeading-
|
|
9
|
+
var SectionHeading = require('../_shared/cjs/SectionHeading-Dj-dJfv3.cjs');
|
|
9
10
|
var index = require('../_shared/cjs/index-Bp6Dd2i1.cjs');
|
|
10
11
|
var Heading = require('@arc-ui/components/Heading');
|
|
11
12
|
var Icon = require('@arc-ui/components/Icon');
|
|
12
13
|
var Text = require('@arc-ui/components/Text');
|
|
13
14
|
var Link = require('@arc-ui/components/Link');
|
|
14
|
-
require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
|
|
15
|
-
require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
|
|
16
15
|
require('@arc-ui/components/Image');
|
|
17
16
|
|
|
18
17
|
var styles = {"highlights":"Highlights-module_highlights__Hf7Zq","highlightItem":"Highlights-module_highlightItem__-N6le","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
|
|
@@ -23,9 +22,9 @@ var getListHeadingLevel = function (level) {
|
|
|
23
22
|
};
|
|
24
23
|
|
|
25
24
|
var HighlightItem = function (_a) {
|
|
26
|
-
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel;
|
|
25
|
+
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel, props = filterAttrs.__rest(_a, ["icon", "heading", "text", "link", "isSmallIcon", "headingLevel"]);
|
|
27
26
|
var listHeadingLevel = getListHeadingLevel(headingLevel || "2");
|
|
28
|
-
return (React.createElement("div", { "data-testid": "highlight-item-container", className: styles.highlightItem },
|
|
27
|
+
return (React.createElement("div", filterAttrs.__assign({ "data-testid": "highlight-item-container", className: styles.highlightItem }, filterAttrs.filterAttrs(props)),
|
|
29
28
|
icon && (React.createElement("div", { className: styles.Icon },
|
|
30
29
|
React.createElement(Icon.Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
|
|
31
30
|
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
@@ -37,11 +36,11 @@ var HighlightItem = function (_a) {
|
|
|
37
36
|
};
|
|
38
37
|
|
|
39
38
|
var HighlightList = function (_a) {
|
|
40
|
-
var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel;
|
|
39
|
+
var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel, props = filterAttrs.__rest(_a, ["listItems", "columns", "isSmallIcon", "headingLevel"]);
|
|
41
40
|
var id = React.useId();
|
|
42
|
-
return (React.createElement("div", { "data-testid": "highlights-list", className: index.classNames(styles.highlights, styles["highlights".concat(columns, "Column")]) }, listItems.map(function (_a, i) {
|
|
43
|
-
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link;
|
|
44
|
-
return (React.createElement(HighlightItem, { key: "highlight-".concat(id, "-").concat(i), icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon, headingLevel: headingLevel }));
|
|
41
|
+
return (React.createElement("div", filterAttrs.__assign({ "data-testid": "highlights-list", className: index.classNames(styles.highlights, styles["highlights".concat(columns, "Column")]) }, filterAttrs.filterAttrs(props)), listItems.map(function (_a, i) {
|
|
42
|
+
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, itemProps = filterAttrs.__rest(_a, ["icon", "heading", "text", "link"]);
|
|
43
|
+
return (React.createElement(HighlightItem, filterAttrs.__assign({ key: "highlight-".concat(id, "-").concat(i), icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon, headingLevel: headingLevel }, itemProps)));
|
|
45
44
|
})));
|
|
46
45
|
};
|
|
47
46
|
|
|
@@ -52,11 +51,11 @@ var HighlightList = function (_a) {
|
|
|
52
51
|
*/
|
|
53
52
|
var Highlights = function (_a) {
|
|
54
53
|
var _b, _c, _d;
|
|
55
|
-
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;
|
|
54
|
+
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 = filterAttrs.__rest(_a, ["heading", "headingLevel", "id", "isHeadingWordWrap", "content", "listItems", "columns", "cta"]);
|
|
56
55
|
var isMaxWidthArcBreakpointXs = useMediaQuery.useMediaQuery("(max-width: 767px)");
|
|
57
|
-
return (React.createElement("div",
|
|
56
|
+
return (React.createElement("div", filterAttrs.__assign({}, filterAttrs.filterAttrs(props)),
|
|
58
57
|
React.createElement(SectionHeading.SectionHeading, { isPadded: true, id: id, "data-testid": "highlights-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content }),
|
|
59
|
-
React.createElement(HighlightList, {
|
|
58
|
+
React.createElement(HighlightList, { listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs, headingLevel: headingLevel }),
|
|
60
59
|
cta && (React.createElement(React.Fragment, null,
|
|
61
60
|
React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
|
|
62
61
|
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"
|
|
@@ -1,16 +1,15 @@
|
|
|
1
|
+
import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
|
|
1
2
|
import React, { useId } from 'react';
|
|
2
3
|
import { useMediaQuery } from '@arc-ui/components/use-media-query';
|
|
3
4
|
import { ButtonV2 } from '@arc-ui/components/ButtonV2';
|
|
4
5
|
import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
|
|
5
6
|
import { B as BtIconArrowRightFill } from '../_shared/esm/BtIconArrowRightFill-D0zKgk3B.mjs';
|
|
6
|
-
import { S as SectionHeading } from '../_shared/esm/SectionHeading-
|
|
7
|
+
import { S as SectionHeading } from '../_shared/esm/SectionHeading-DZOg_gYi.mjs';
|
|
7
8
|
import { c as classNames } from '../_shared/esm/index-BfTCfPZ1.mjs';
|
|
8
9
|
import { Heading } from '@arc-ui/components/Heading';
|
|
9
10
|
import { Icon } from '@arc-ui/components/Icon';
|
|
10
11
|
import { Text } from '@arc-ui/components/Text';
|
|
11
12
|
import { Link } from '@arc-ui/components/Link';
|
|
12
|
-
import '../_shared/esm/tslib.es6-D6Wu-xwB.mjs';
|
|
13
|
-
import '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
|
|
14
13
|
import '@arc-ui/components/Image';
|
|
15
14
|
|
|
16
15
|
var styles = {"highlights":"Highlights-module_highlights__Hf7Zq","highlightItem":"Highlights-module_highlightItem__-N6le","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
|
|
@@ -21,9 +20,9 @@ var getListHeadingLevel = function (level) {
|
|
|
21
20
|
};
|
|
22
21
|
|
|
23
22
|
var HighlightItem = function (_a) {
|
|
24
|
-
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel;
|
|
23
|
+
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"]);
|
|
25
24
|
var listHeadingLevel = getListHeadingLevel(headingLevel || "2");
|
|
26
|
-
return (React.createElement("div", { "data-testid": "highlight-item-container", className: styles.highlightItem },
|
|
25
|
+
return (React.createElement("div", __assign({ "data-testid": "highlight-item-container", className: styles.highlightItem }, filterAttrs(props)),
|
|
27
26
|
icon && (React.createElement("div", { className: styles.Icon },
|
|
28
27
|
React.createElement(Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
|
|
29
28
|
React.createElement(VerticalSpace, { size: "16" }),
|
|
@@ -35,11 +34,11 @@ var HighlightItem = function (_a) {
|
|
|
35
34
|
};
|
|
36
35
|
|
|
37
36
|
var HighlightList = function (_a) {
|
|
38
|
-
var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel;
|
|
37
|
+
var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel, props = __rest(_a, ["listItems", "columns", "isSmallIcon", "headingLevel"]);
|
|
39
38
|
var id = useId();
|
|
40
|
-
return (React.createElement("div", { "data-testid": "highlights-list", className: classNames(styles.highlights, styles["highlights".concat(columns, "Column")]) }, listItems.map(function (_a, i) {
|
|
41
|
-
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link;
|
|
42
|
-
return (React.createElement(HighlightItem, { key: "highlight-".concat(id, "-").concat(i), icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon, headingLevel: headingLevel }));
|
|
39
|
+
return (React.createElement("div", __assign({ "data-testid": "highlights-list", className: classNames(styles.highlights, styles["highlights".concat(columns, "Column")]) }, filterAttrs(props)), listItems.map(function (_a, i) {
|
|
40
|
+
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, itemProps = __rest(_a, ["icon", "heading", "text", "link"]);
|
|
41
|
+
return (React.createElement(HighlightItem, __assign({ key: "highlight-".concat(id, "-").concat(i), icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon, headingLevel: headingLevel }, itemProps)));
|
|
43
42
|
})));
|
|
44
43
|
};
|
|
45
44
|
|
|
@@ -50,11 +49,11 @@ var HighlightList = function (_a) {
|
|
|
50
49
|
*/
|
|
51
50
|
var Highlights = function (_a) {
|
|
52
51
|
var _b, _c, _d;
|
|
53
|
-
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;
|
|
52
|
+
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"]);
|
|
54
53
|
var isMaxWidthArcBreakpointXs = useMediaQuery("(max-width: 767px)");
|
|
55
|
-
return (React.createElement("div",
|
|
54
|
+
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
56
55
|
React.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "highlights-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content }),
|
|
57
|
-
React.createElement(HighlightList, {
|
|
56
|
+
React.createElement(HighlightList, { listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs, headingLevel: headingLevel }),
|
|
58
57
|
cta && (React.createElement(React.Fragment, null,
|
|
59
58
|
React.createElement(VerticalSpace, { size: "24" }),
|
|
60
59
|
React.createElement(ButtonV2, { label: cta.label, href: cta.href, onClick: cta.onClick, size: "m", ariaLabel: cta.ariaLabel, buttonStyle: cta.buttonStyle, icon: cta.buttonStyle === "compact"
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var filterAttrs = require('../_shared/cjs/filter-attrs-C26zOt4_.cjs');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var Link = require('@arc-ui/components/Link');
|
|
6
|
+
var Icon = require('@arc-ui/components/Icon');
|
|
7
|
+
var Heading = require('@arc-ui/components/Heading');
|
|
8
|
+
var BtIconArrowAltRight = require('../_shared/cjs/BtIconArrowAltRight-CLQdP61r.cjs');
|
|
9
|
+
|
|
10
|
+
var styles = {"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"};
|
|
11
|
+
|
|
12
|
+
var InlineLinkGroup = function (_a) {
|
|
13
|
+
var label = _a.label, links = _a.links, props = filterAttrs.__rest(_a, ["label", "links"]);
|
|
14
|
+
return (React.createElement("div", filterAttrs.__assign({ className: styles["quick-help"] }, filterAttrs.filterAttrs(props)),
|
|
15
|
+
label && (React.createElement("div", { className: styles["quick-help-label"] },
|
|
16
|
+
React.createElement(Heading.Heading, { size: "xxs", fontStyle: "overline" }, label))),
|
|
17
|
+
React.createElement("ul", { className: styles["quick-help-container"] }, links.map(function (link, index) { return (React.createElement(React.Fragment, { key: index },
|
|
18
|
+
React.createElement("li", { className: styles["quick-help-item"] },
|
|
19
|
+
React.createElement(Link.Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel }, link.label),
|
|
20
|
+
React.createElement(Icon.Icon, { icon: BtIconArrowAltRight.BtIconArrowAltRight, size: 24, color: "brand" })),
|
|
21
|
+
index < links.length - 1 && (React.createElement("li", { className: styles["quick-help-separator"], "aria-hidden": "true" },
|
|
22
|
+
React.createElement("div", { className: styles["quick-help-separator-line"] }))))); }))));
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
exports.InlineLinkGroup = InlineLinkGroup;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Link } from '@arc-ui/components/Link';
|
|
4
|
+
import { Icon } from '@arc-ui/components/Icon';
|
|
5
|
+
import { Heading } from '@arc-ui/components/Heading';
|
|
6
|
+
import { B as BtIconArrowAltRight } from '../_shared/esm/BtIconArrowAltRight-VH6RTTnL.mjs';
|
|
7
|
+
|
|
8
|
+
var styles = {"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"};
|
|
9
|
+
|
|
10
|
+
var InlineLinkGroup = function (_a) {
|
|
11
|
+
var label = _a.label, links = _a.links, props = __rest(_a, ["label", "links"]);
|
|
12
|
+
return (React.createElement("div", __assign({ className: styles["quick-help"] }, filterAttrs(props)),
|
|
13
|
+
label && (React.createElement("div", { className: styles["quick-help-label"] },
|
|
14
|
+
React.createElement(Heading, { size: "xxs", fontStyle: "overline" }, label))),
|
|
15
|
+
React.createElement("ul", { className: styles["quick-help-container"] }, links.map(function (link, index) { return (React.createElement(React.Fragment, { key: index },
|
|
16
|
+
React.createElement("li", { className: styles["quick-help-item"] },
|
|
17
|
+
React.createElement(Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel }, link.label),
|
|
18
|
+
React.createElement(Icon, { icon: BtIconArrowAltRight, size: 24, color: "brand" })),
|
|
19
|
+
index < links.length - 1 && (React.createElement("li", { className: styles["quick-help-separator"], "aria-hidden": "true" },
|
|
20
|
+
React.createElement("div", { className: styles["quick-help-separator-line"] }))))); }))));
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export { InlineLinkGroup };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.InlineLinkGroup-module_quick-help__cMTpB{display:flex;flex-direction:column;align-items:center;width:100%}.InlineLinkGroup-module_quick-help__cMTpB ul,.InlineLinkGroup-module_quick-help__cMTpB li{list-style:none;margin:0;padding:0}.InlineLinkGroup-module_quick-help-label__VLKen{display:flex;flex-direction:row;align-items:center;padding-bottom:var(--sem-space-padding-110);width:100%}.InlineLinkGroup-module_quick-help-container__IStTk{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--sem-space-padding-70);width:100%}.InlineLinkGroup-module_quick-help-item__QTIMl{display:flex;align-items:center;gap:var(--arc-spacing-4);width:auto;flex:0 0 auto}.InlineLinkGroup-module_quick-help-item__QTIMl svg{display:none;width:24px;height:24px}.InlineLinkGroup-module_quick-help-separator__qJE0q{display:flex;align-items:center}.InlineLinkGroup-module_quick-help-separator-line__VbCVI{width:1px;height:14px;background:var(--sem-color-border-secondary-light-minimal)}@media not (min-width:636px){.InlineLinkGroup-module_quick-help-container__IStTk{flex-direction:column;align-items:flex-start;gap:var(--sem-space-padding-70)}.InlineLinkGroup-module_quick-help-item__QTIMl svg{display:block}.InlineLinkGroup-module_quick-help-separator__qJE0q{display:none}}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var filterAttrs = require('../_shared/cjs/filter-attrs-C26zOt4_.cjs');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var index = require('../_shared/cjs/index-Bp6Dd2i1.cjs');
|
|
6
|
-
var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
|
|
7
6
|
var Icon = require('@arc-ui/components/Icon');
|
|
8
7
|
var BtIconArrowAltRight = require('../_shared/cjs/BtIconArrowAltRight-CLQdP61r.cjs');
|
|
9
8
|
|
|
10
|
-
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"};
|
|
9
|
+
var styles = {"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"};
|
|
11
10
|
|
|
12
11
|
var LinkTile = function (_a) {
|
|
13
|
-
var text = _a.text, href = _a.href, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b, className = _a.className, props =
|
|
12
|
+
var text = _a.text, href = _a.href, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b, className = _a.className, props = filterAttrs.__rest(_a, ["text", "href", "showIcon", "className"]);
|
|
14
13
|
var Component = href ? "a" : "div";
|
|
15
14
|
var linkProps = href ? { href: href } : {};
|
|
16
|
-
return (React.createElement(Component,
|
|
15
|
+
return (React.createElement(Component, filterAttrs.__assign({ className: index.classNames(styles["link-tile"], className) }, linkProps, filterAttrs.filterAttrs(props)), text && (React.createElement("div", { className: styles["link-tile-content"] },
|
|
17
16
|
React.createElement("span", { className: styles["link-tile-text"] }, text),
|
|
18
|
-
showIcon && React.createElement(
|
|
17
|
+
showIcon && (React.createElement("span", { className: styles["link-tile-icon"] },
|
|
18
|
+
React.createElement(Icon.Icon, { icon: BtIconArrowAltRight.BtIconArrowAltRight, size: 32 })))))));
|
|
19
19
|
};
|
|
20
20
|
|
|
21
21
|
exports.LinkTile = LinkTile;
|
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { c as classNames } from '../_shared/esm/index-BfTCfPZ1.mjs';
|
|
4
|
-
import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
|
|
5
4
|
import { Icon } from '@arc-ui/components/Icon';
|
|
6
5
|
import { B as BtIconArrowAltRight } from '../_shared/esm/BtIconArrowAltRight-VH6RTTnL.mjs';
|
|
7
6
|
|
|
8
|
-
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"};
|
|
7
|
+
var styles = {"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"};
|
|
9
8
|
|
|
10
9
|
var LinkTile = function (_a) {
|
|
11
10
|
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"]);
|
|
@@ -13,7 +12,8 @@ var LinkTile = function (_a) {
|
|
|
13
12
|
var linkProps = href ? { href: href } : {};
|
|
14
13
|
return (React.createElement(Component, __assign({ className: classNames(styles["link-tile"], className) }, linkProps, filterAttrs(props)), text && (React.createElement("div", { className: styles["link-tile-content"] },
|
|
15
14
|
React.createElement("span", { className: styles["link-tile-text"] }, text),
|
|
16
|
-
showIcon && React.createElement(
|
|
15
|
+
showIcon && (React.createElement("span", { className: styles["link-tile-icon"] },
|
|
16
|
+
React.createElement(Icon, { icon: BtIconArrowAltRight, size: 32 })))))));
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
export { LinkTile };
|
package/lib/LinkTile/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.LinkTile-module_link-tile__xVUP3{display:flex;flex-direction:column;width:306px;border:
|
|
1
|
+
.LinkTile-module_link-tile__xVUP3{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;width:306px;height:96px;border:var(--sem-border-width-xxs) solid var(--sem-color-border-secondary-light-minimal);border-radius:var(--sem-border-radius-xl);padding:var(--sem-space-padding-110) var(--sem-space-padding-70) var(--sem-space-padding-110) var(--sem-space-padding-110);background:var(--sem-color-bg-secondary-light-default);text-decoration:none;cursor:pointer;transition:border-color 0.2s ease;flex:none;align-self:stretch;position:relative;overflow:visible}.LinkTile-module_link-tile-content__H-QN8{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--sem-space-padding-40);width:100%;height:48px;flex:none;align-self:stretch}.LinkTile-module_link-tile-icon__kTMfH{display:flex;width:32px;height:32px;color:var(--sem-color-fg-primary-light-default);transition:color 0.2s ease;flex:none;flex-shrink:0;order:1}.LinkTile-module_link-tile-text__0K6zf{font-family:var(--sem-font-family-heading);font-size:var(--sem-font-size-100);font-weight:var(--sem-font-weight-semi);line-height:var(--sem-line-height-base-scale-xs);letter-spacing:0;color:var(--sem-color-fg-primary-light-default);transition:color 0.2s ease;flex:1;order:0}.LinkTile-module_link-tile-icon__kTMfH svg,.LinkTile-module_link-tile__xVUP3 .LinkTile-module_link-tile-content__H-QN8 svg{color:inherit;transition:color 0.2s ease}.LinkTile-module_link-tile__xVUP3[\:not-has\(svg\)]{padding:var(--sem-space-padding-110)}.LinkTile-module_link-tile__xVUP3:not(:has(svg)){padding:var(--sem-space-padding-110)}.LinkTile-module_link-tile__xVUP3:active{border-radius:var(--sem-border-radius-xl)}@media (min-width:1024px){.LinkTile-module_link-tile__xVUP3{padding:var(--sem-space-padding-110) var(--sem-space-padding-70) var(--sem-space-padding-110) var(--sem-space-padding-110)}}.LinkTile-module_link-tile__xVUP3:hover{border-color:transparent;box-shadow:inset 0 0 0 2px var(--button-v2-colors-light-text-hover)}.LinkTile-module_link-tile__xVUP3:hover .LinkTile-module_link-tile-text__0K6zf{color:var(--button-v2-colors-light-text-hover)}.LinkTile-module_link-tile__xVUP3:hover .LinkTile-module_link-tile-icon__kTMfH{color:var(--button-v2-colors-light-text-hover)}
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var filterAttrs = require('../_shared/cjs/filter-attrs-C26zOt4_.cjs');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var index = require('../_shared/cjs/index-Bp6Dd2i1.cjs');
|
|
6
|
-
var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
|
|
7
6
|
var useMediaQuery = require('@arc-ui/components/use-media-query');
|
|
8
|
-
var index_es = require('../_shared/cjs/index.es-
|
|
9
|
-
var SectionHeading = require('../_shared/cjs/SectionHeading-
|
|
7
|
+
var index_es = require('../_shared/cjs/index.es-Dq8bYrbW.cjs');
|
|
8
|
+
var SectionHeading = require('../_shared/cjs/SectionHeading-Dj-dJfv3.cjs');
|
|
10
9
|
var ButtonV2 = require('@arc-ui/components/ButtonV2');
|
|
11
10
|
var InformationCard = require('@arc-ui/components/InformationCard');
|
|
12
11
|
var VerticalSpace = require('@arc-ui/components/VerticalSpace');
|
|
@@ -21,7 +20,7 @@ var styles = {"product-navigation-grid":"ProductNavigation-module_product-naviga
|
|
|
21
20
|
* Use `ProductNavigation` to give a collection of product information cards collected within a grid that has optional show/hide capability
|
|
22
21
|
*/
|
|
23
22
|
var ProductNavigation = function (_a) {
|
|
24
|
-
var heading = _a.heading, id = _a.id, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, _b = _a.hideButton, hideButton = _b === void 0 ? false : _b, productList = _a.productList, _c = _a.defaultExpanded, defaultExpanded = _c === void 0 ? false : _c, minHeight = _a.minHeight, _d = _a.cardsToDisplay, cardsToDisplay = _d === void 0 ? 3 : _d, _e = _a.listIncrement, listIncrement = _e === void 0 ? 6 : _e, onClickMore = _a.onClickMore, onClickLess = _a.onClickLess, _f = _a.hideShowLess, hideShowLess = _f === void 0 ? false : _f, isLoading = _a.isLoading, image = _a.image, props =
|
|
23
|
+
var heading = _a.heading, id = _a.id, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, _b = _a.hideButton, hideButton = _b === void 0 ? false : _b, productList = _a.productList, _c = _a.defaultExpanded, defaultExpanded = _c === void 0 ? false : _c, minHeight = _a.minHeight, _d = _a.cardsToDisplay, cardsToDisplay = _d === void 0 ? 3 : _d, _e = _a.listIncrement, listIncrement = _e === void 0 ? 6 : _e, onClickMore = _a.onClickMore, onClickLess = _a.onClickLess, _f = _a.hideShowLess, hideShowLess = _f === void 0 ? false : _f, isLoading = _a.isLoading, image = _a.image, props = filterAttrs.__rest(_a, ["heading", "id", "headingLevel", "isHeadingWordWrap", "content", "hideButton", "productList", "defaultExpanded", "minHeight", "cardsToDisplay", "listIncrement", "onClickMore", "onClickLess", "hideShowLess", "isLoading", "image"]);
|
|
25
24
|
var _g = React.useState(false), hideLessButton = _g[0], setHideLessButton = _g[1];
|
|
26
25
|
var _h = React.useState(cardsToDisplay), skipLinkCard = _h[0], setSkipLinkCard = _h[1];
|
|
27
26
|
var _j = React.useState(productList.slice(0, cardsToDisplay)), displayList = _j[0], setDisplayList = _j[1];
|
|
@@ -57,12 +56,12 @@ var ProductNavigation = function (_a) {
|
|
|
57
56
|
}
|
|
58
57
|
};
|
|
59
58
|
var isMinWidthArcBreakpointS = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsS, ")"));
|
|
60
|
-
return (React.createElement("div",
|
|
59
|
+
return (React.createElement("div", filterAttrs.__assign({}, filterAttrs.filterAttrs(props)),
|
|
61
60
|
React.createElement(SectionHeading.SectionHeading, { isPadded: true, id: id, "data-testid": "ProductNavigation-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content, image: image }),
|
|
62
61
|
React.createElement("ul", { className: index.classNames(styles["product-navigation-grid"]) }, displayList === null || displayList === void 0 ? void 0 : displayList.map(function (cardProps, i) {
|
|
63
62
|
var _a;
|
|
64
63
|
return (React.createElement("li", { key: "displayList-".concat(i), tabIndex: -1, ref: i === skipLinkCard ? cardRef : undefined, "data-cy": "list-item-".concat(i) },
|
|
65
|
-
React.createElement(InformationCard.InformationCard,
|
|
64
|
+
React.createElement(InformationCard.InformationCard, filterAttrs.__assign({}, cardProps, { minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : cardProps.minHeight, headingLevel: (_a = cardProps.headingLevel) !== null && _a !== void 0 ? _a : "2" }))));
|
|
66
65
|
})),
|
|
67
66
|
React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
|
|
68
67
|
React.createElement("div", { style: { display: "flex" } },
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
|
|
2
2
|
import React, { useState, useRef, useEffect } from 'react';
|
|
3
3
|
import { c as classNames } from '../_shared/esm/index-BfTCfPZ1.mjs';
|
|
4
|
-
import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
|
|
5
4
|
import { useMediaQuery } from '@arc-ui/components/use-media-query';
|
|
6
|
-
import { A as ArcSizeBreakpointsS } from '../_shared/esm/index.es-
|
|
7
|
-
import { S as SectionHeading } from '../_shared/esm/SectionHeading-
|
|
5
|
+
import { A as ArcSizeBreakpointsS } from '../_shared/esm/index.es-Bfdys5__.mjs';
|
|
6
|
+
import { S as SectionHeading } from '../_shared/esm/SectionHeading-DZOg_gYi.mjs';
|
|
8
7
|
import { ButtonV2 } from '@arc-ui/components/ButtonV2';
|
|
9
8
|
import { InformationCard } from '@arc-ui/components/InformationCard';
|
|
10
9
|
import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
|