@arc-ui/community-components 0.1.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 +16 -0
- package/CHANGELOG.md +7 -0
- package/LICENSE +21 -0
- package/dist/Accordion/Accordion.cjs.js +31 -0
- package/dist/Accordion/Accordion.esm.js +29 -0
- package/dist/Author/Author.cjs.js +14 -0
- package/dist/Author/Author.esm.js +8 -0
- package/dist/Author/styles.css +1 -0
- package/dist/BannerWithTabs/BannerWithTabs.cjs.js +36 -0
- package/dist/BannerWithTabs/BannerWithTabs.esm.js +34 -0
- package/dist/BannerWithTabs/styles.css +1 -0
- package/dist/CopyLead/CopyLead.cjs.js +129 -0
- package/dist/CopyLead/CopyLead.esm.js +127 -0
- package/dist/CopyLead/styles.css +1 -0
- package/dist/DownloadList/DownloadList.cjs.js +26 -0
- package/dist/DownloadList/DownloadList.esm.js +24 -0
- package/dist/DownloadList/styles.css +1 -0
- package/dist/FeaturePost/FeaturePost.cjs.js +2281 -0
- package/dist/FeaturePost/FeaturePost.esm.js +2279 -0
- package/dist/FeaturePost/styles.css +1 -0
- package/dist/Highlights/Highlights.cjs.js +50 -0
- package/dist/Highlights/Highlights.esm.js +48 -0
- package/dist/Highlights/styles.css +1 -0
- package/dist/PromoListing/PromoListing.cjs.js +50 -0
- package/dist/PromoListing/PromoListing.esm.js +48 -0
- package/dist/PromoListing/styles.css +1 -0
- package/dist/Quote/Quote.cjs.js +27 -0
- package/dist/Quote/Quote.esm.js +25 -0
- package/dist/Quote/styles.css +1 -0
- package/dist/SectionHeading/SectionHeading.cjs.js +14 -0
- package/dist/SectionHeading/SectionHeading.esm.js +8 -0
- package/dist/SectionHeading/styles.css +1 -0
- package/dist/Statistics/Statistics.cjs.js +60 -0
- package/dist/Statistics/Statistics.esm.js +58 -0
- package/dist/Statistics/styles.css +1 -0
- package/dist/Summary/Summary.cjs.js +30 -0
- package/dist/Summary/Summary.esm.js +28 -0
- package/dist/Summary/styles.css +1 -0
- package/dist/_shared/cjs/Author-CAo-qryZ.js +30 -0
- package/dist/_shared/cjs/SectionHeading-L2EpTQ79.js +25 -0
- package/dist/_shared/cjs/filter-data-attrs-ajtUvDAC.js +15 -0
- package/dist/_shared/cjs/index-Bp6Dd2i1.js +94 -0
- package/dist/_shared/cjs/index.es-X428Cm3N.js +15 -0
- package/dist/_shared/cjs/tslib.es6-DBA0GFPJ.js +48 -0
- package/dist/_shared/esm/Author-Bx-cE9Pz.js +28 -0
- package/dist/_shared/esm/SectionHeading-C70XNhqJ.js +23 -0
- package/dist/_shared/esm/filter-data-attrs-V7cbJuwS.js +13 -0
- package/dist/_shared/esm/index-BfTCfPZ1.js +92 -0
- package/dist/_shared/esm/index.es-BzmvPxje.js +10 -0
- package/dist/_shared/esm/tslib.es6-Cv15O4Nx.js +46 -0
- package/dist/index.es.js +2796 -0
- package/dist/index.es.js.map +1 -0
- package/dist/index.js +2808 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.css +1 -0
- package/dist/types/components/Accordion/Accordion.d.ts +9 -0
- package/dist/types/components/Accordion/components/AccordionDisclosureList/AccordionDisclosureList.d.ts +9 -0
- package/dist/types/components/Accordion/index.d.ts +1 -0
- package/dist/types/components/Author/Author.d.ts +17 -0
- package/dist/types/components/Author/index.d.ts +1 -0
- package/dist/types/components/BannerWithTabs/BannerWithTabs.d.ts +17 -0
- package/dist/types/components/BannerWithTabs/index.d.ts +1 -0
- package/dist/types/components/CopyLead/CopyLead.d.ts +42 -0
- package/dist/types/components/CopyLead/components/Button/Button.d.ts +3 -0
- package/dist/types/components/CopyLead/components/Button/index.d.ts +1 -0
- package/dist/types/components/CopyLead/components/Column/Column.d.ts +6 -0
- package/dist/types/components/CopyLead/components/Column/index.d.ts +1 -0
- package/dist/types/components/CopyLead/components/Container/Container.d.ts +9 -0
- package/dist/types/components/CopyLead/components/Container/index.d.ts +1 -0
- package/dist/types/components/CopyLead/components/IconList/IconList.d.ts +8 -0
- package/dist/types/components/CopyLead/components/IconList/index.d.ts +1 -0
- package/dist/types/components/CopyLead/components/Image/Image.d.ts +3 -0
- package/dist/types/components/CopyLead/components/Image/index.d.ts +1 -0
- package/dist/types/components/CopyLead/components/MediaContent/MediaContent.d.ts +9 -0
- package/dist/types/components/CopyLead/components/MediaContent/index.d.ts +1 -0
- package/dist/types/components/CopyLead/index.d.ts +1 -0
- package/dist/types/components/CopyLead/templates/Content/Content.d.ts +10 -0
- package/dist/types/components/CopyLead/templates/Content/index.d.ts +1 -0
- package/dist/types/components/CopyLead/templates/Media/Media.d.ts +16 -0
- package/dist/types/components/CopyLead/templates/Media/index.d.ts +1 -0
- package/dist/types/components/CopyLead/types/copy-lead-button.d.ts +2 -0
- package/dist/types/components/CopyLead/types/copy-lead-image.d.ts +4 -0
- package/dist/types/components/CopyLead/types/copy-lead-list-item.d.ts +6 -0
- package/dist/types/components/CopyLead/types/copy-lead-transcript-link.d.ts +6 -0
- package/dist/types/components/CopyLead/types/index.d.ts +4 -0
- package/dist/types/components/DownloadList/DownloadList.d.ts +10 -0
- package/dist/types/components/DownloadList/index.d.ts +1 -0
- package/dist/types/components/FeaturePost/FeaturePost.d.ts +45 -0
- package/dist/types/components/FeaturePost/components/Image/Image.d.ts +3 -0
- package/dist/types/components/FeaturePost/components/Image/index.d.ts +1 -0
- package/dist/types/components/FeaturePost/components/MediaContent/MediaContent.d.ts +15 -0
- package/dist/types/components/FeaturePost/index.d.ts +1 -0
- package/dist/types/components/FeaturePost/types/feature-post-app-button-footer.d.ts +6 -0
- package/dist/types/components/FeaturePost/types/feature-post-cta-footer.d.ts +7 -0
- package/dist/types/components/FeaturePost/types/feature-post-image.d.ts +4 -0
- package/dist/types/components/FeaturePost/types/index.d.ts +3 -0
- package/dist/types/components/Highlights/Highlights.d.ts +17 -0
- package/dist/types/components/Highlights/components/HighlightItem/HighlightItem.d.ts +14 -0
- package/dist/types/components/Highlights/components/HighlightList/HighlightList.d.ts +9 -0
- package/dist/types/components/Highlights/index.d.ts +1 -0
- package/dist/types/components/Highlights/types/highlight-list-item.d.ts +10 -0
- package/dist/types/components/Highlights/types/index.d.ts +1 -0
- package/dist/types/components/PromoListing/PromoListing.d.ts +38 -0
- package/dist/types/components/PromoListing/index.d.ts +1 -0
- package/dist/types/components/Quote/Quote.d.ts +11 -0
- package/dist/types/components/Quote/index.d.ts +1 -0
- package/dist/types/components/SectionHeading/SectionHeading.d.ts +25 -0
- package/dist/types/components/SectionHeading/index.d.ts +1 -0
- package/dist/types/components/Statistics/Statistics.d.ts +7 -0
- package/dist/types/components/Statistics/helpers/get-link-props.d.ts +2 -0
- package/dist/types/components/Statistics/index.d.ts +1 -0
- package/dist/types/components/Statistics/types/statistic-link.d.ts +6 -0
- package/dist/types/components/Statistics/types/statistic.d.ts +8 -0
- package/dist/types/components/Summary/Summary.d.ts +18 -0
- package/dist/types/components/Summary/index.d.ts +1 -0
- package/dist/types/components/index.d.ts +11 -0
- package/dist/types/index.d.ts +1 -0
- package/eslint.config.js +4 -0
- package/package.json +105 -0
- package/postcss.config.cjs +5 -0
- package/rollup.config.js +101 -0
- package/src/components/Accordion/Accordion.tsx +38 -0
- package/src/components/Accordion/components/AccordionDisclosureList/AccordionDisclosureList.tsx +44 -0
- package/src/components/Accordion/index.ts +1 -0
- package/src/components/Author/Author.module.css +9 -0
- package/src/components/Author/Author.tsx +60 -0
- package/src/components/Author/index.ts +1 -0
- package/src/components/BannerWithTabs/BannerWithTabs.module.css +19 -0
- package/src/components/BannerWithTabs/BannerWithTabs.tsx +74 -0
- package/src/components/BannerWithTabs/index.ts +1 -0
- package/src/components/CopyLead/CopyLead.module.css +127 -0
- package/src/components/CopyLead/CopyLead.tsx +102 -0
- package/src/components/CopyLead/components/Button/Button.tsx +13 -0
- package/src/components/CopyLead/components/Button/index.ts +1 -0
- package/src/components/CopyLead/components/Column/Column.tsx +10 -0
- package/src/components/CopyLead/components/Column/index.ts +1 -0
- package/src/components/CopyLead/components/Container/Container.tsx +32 -0
- package/src/components/CopyLead/components/Container/index.ts +1 -0
- package/src/components/CopyLead/components/IconList/IconList.tsx +49 -0
- package/src/components/CopyLead/components/IconList/index.ts +1 -0
- package/src/components/CopyLead/components/Image/Image.tsx +17 -0
- package/src/components/CopyLead/components/Image/index.ts +1 -0
- package/src/components/CopyLead/components/MediaContent/MediaContent.tsx +36 -0
- package/src/components/CopyLead/components/MediaContent/index.ts +1 -0
- package/src/components/CopyLead/index.ts +1 -0
- package/src/components/CopyLead/templates/Content/Content.tsx +58 -0
- package/src/components/CopyLead/templates/Content/index.ts +1 -0
- package/src/components/CopyLead/templates/Media/Media.tsx +104 -0
- package/src/components/CopyLead/templates/Media/index.ts +1 -0
- package/src/components/CopyLead/types/copy-lead-button.ts +6 -0
- package/src/components/CopyLead/types/copy-lead-image.ts +19 -0
- package/src/components/CopyLead/types/copy-lead-list-item.ts +7 -0
- package/src/components/CopyLead/types/copy-lead-transcript-link.ts +6 -0
- package/src/components/CopyLead/types/index.ts +4 -0
- package/src/components/DownloadList/DownloadList.module.css +7 -0
- package/src/components/DownloadList/DownloadList.tsx +41 -0
- package/src/components/DownloadList/index.ts +1 -0
- package/src/components/FeaturePost/FeaturePost.module.css +58 -0
- package/src/components/FeaturePost/FeaturePost.tsx +203 -0
- package/src/components/FeaturePost/components/Image/Image.tsx +18 -0
- package/src/components/FeaturePost/components/Image/index.ts +1 -0
- package/src/components/FeaturePost/components/MediaContent/MediaContent.tsx +45 -0
- package/src/components/FeaturePost/components/MediaContent/index.ts +0 -0
- package/src/components/FeaturePost/index.ts +1 -0
- package/src/components/FeaturePost/types/feature-post-app-button-footer.ts +7 -0
- package/src/components/FeaturePost/types/feature-post-cta-footer.ts +11 -0
- package/src/components/FeaturePost/types/feature-post-image.ts +19 -0
- package/src/components/FeaturePost/types/index.ts +3 -0
- package/src/components/Highlights/Highlights.module.css +85 -0
- package/src/components/Highlights/Highlights.tsx +53 -0
- package/src/components/Highlights/components/HighlightItem/HighlightItem.tsx +68 -0
- package/src/components/Highlights/components/HighlightList/HighlightList.tsx +42 -0
- package/src/components/Highlights/index.ts +1 -0
- package/src/components/Highlights/types/highlight-list-item.ts +11 -0
- package/src/components/Highlights/types/index.ts +1 -0
- package/src/components/PromoListing/PromoListing.module.css +97 -0
- package/src/components/PromoListing/PromoListing.tsx +153 -0
- package/src/components/PromoListing/index.ts +1 -0
- package/src/components/Quote/Quote.module.css +60 -0
- package/src/components/Quote/Quote.tsx +57 -0
- package/src/components/Quote/index.ts +1 -0
- package/src/components/SectionHeading/SectionHeading.module.css +34 -0
- package/src/components/SectionHeading/SectionHeading.tsx +65 -0
- package/src/components/SectionHeading/index.ts +1 -0
- package/src/components/Statistics/Statistics.module.css +25 -0
- package/src/components/Statistics/Statistics.tsx +97 -0
- package/src/components/Statistics/helpers/get-link-props.ts +11 -0
- package/src/components/Statistics/index.ts +1 -0
- package/src/components/Statistics/types/statistic-link.ts +6 -0
- package/src/components/Statistics/types/statistic.ts +9 -0
- package/src/components/Summary/Summary.module.css +31 -0
- package/src/components/Summary/Summary.tsx +65 -0
- package/src/components/Summary/index.ts +1 -0
- package/src/components/index.ts +11 -0
- package/src/index.ts +5 -0
- package/src/types/file-types.d.ts +9 -0
- package/stylelint.config.js +4 -0
- package/tsconfig.json +11 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.FeaturePost-module_labelDate__NXOgY{padding-top:var(--sem-space-padding-20)}.FeaturePost-module_authorContent__FEuRO{padding-left:var(--sem-space-padding-70)}.FeaturePost-module_googlePlayButtonWrapper__GI-ag{padding:var(--sem-space-padding-70) 0 0}.FeaturePost-module_imgWrapper__r6omd{border-radius:var(--sem-border-radius-s);overflow:hidden}@media (min-width:636px){.FeaturePost-module_googlePlayButtonWrapper__GI-ag{padding:0 0 0 var(--sem-space-padding-70)}}@media (min-width:768px){.FeaturePost-module_featurePost__9jY21{display:flex;gap:24px}.FeaturePost-module_featurePostReversed__WQRXm{flex-direction:row-reverse}.FeaturePost-module_contentContainer__kdus7{padding:0 var(--sem-space-padding-110) 0 0}.FeaturePost-module_col__eW8gY{flex:0 1 auto;width:50%}.FeaturePost-module_labelDate__NXOgY{padding-left:var(--sem-space-padding-70)}}@media (min-width:1280px){.FeaturePost-module_featurePost__9jY21{gap:32px}.FeaturePost-module_contentContainer__kdus7{padding:0 var(--sem-space-padding-130) 0 0}}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var useMediaQuery = require('@arc-ui/components/dist/use-media-query');
|
|
5
|
+
var SectionHeading = require('../_shared/cjs/SectionHeading-L2EpTQ79.js');
|
|
6
|
+
var index = require('../_shared/cjs/index-Bp6Dd2i1.js');
|
|
7
|
+
var Heading = require('@arc-ui/components/dist/Heading');
|
|
8
|
+
var Icon = require('@arc-ui/components/dist/Icon');
|
|
9
|
+
var Text = require('@arc-ui/components/dist/Text');
|
|
10
|
+
var Link = require('@arc-ui/components/dist/Link');
|
|
11
|
+
var VerticalSpace = require('@arc-ui/components/dist/VerticalSpace');
|
|
12
|
+
require('../_shared/cjs/tslib.es6-DBA0GFPJ.js');
|
|
13
|
+
require('../_shared/cjs/filter-data-attrs-ajtUvDAC.js');
|
|
14
|
+
|
|
15
|
+
var styles = {"highlights":"Highlights-module_highlights__Hf7Zq","highlightItem":"Highlights-module_highlightItem__-N6le","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
|
|
16
|
+
|
|
17
|
+
var HighlightItem = function (_a) {
|
|
18
|
+
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, isSmallIcon = _a.isSmallIcon;
|
|
19
|
+
return (React.createElement("div", { "data-testid": "highlight-item-container", className: styles.highlightItem },
|
|
20
|
+
icon && (React.createElement("div", { className: styles.Icon },
|
|
21
|
+
React.createElement(Icon.Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
|
|
22
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
23
|
+
React.createElement(Heading.Heading, { level: "3", size: "m" }, heading),
|
|
24
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
25
|
+
React.createElement(Text.Text, null, text),
|
|
26
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
27
|
+
link && (React.createElement(Link.Link, { href: link.url, id: link.url, onClick: function noRefCheck() { }, rel: "", size: "m", target: "_self", title: link.textLink }, link.textLink))));
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
var HighlightList = function (_a) {
|
|
31
|
+
var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon;
|
|
32
|
+
var id = React.useId();
|
|
33
|
+
return (React.createElement("div", { "data-testid": "highlights-list", className: index.classNames(styles.highlights, styles["highlights".concat(columns, "Column")]) }, listItems.map(function (_a, i) {
|
|
34
|
+
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link;
|
|
35
|
+
return (React.createElement(HighlightItem, { key: "highlight-".concat(id, "-").concat(i), icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon }));
|
|
36
|
+
})));
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* Use `Highlights` to give supporting information about a page or proposition. It can be used to call out key benefits in bullet points, or link. Both two and three column options are available.
|
|
41
|
+
*/
|
|
42
|
+
var Highlights = function (_a) {
|
|
43
|
+
var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content, listItems = _a.listItems, _b = _a.columns, columns = _b === void 0 ? "2" : _b;
|
|
44
|
+
var isMaxWidthArcBreakpointXs = useMediaQuery.useMediaQuery("(max-width: 767px)");
|
|
45
|
+
return (React.createElement("div", null,
|
|
46
|
+
React.createElement(SectionHeading.SectionHeading, { isPadded: true, "data-testid": "highlights-header", heading: heading, headingLevel: headingLevel, content: content }),
|
|
47
|
+
React.createElement(HighlightList, { "data-testid": "highlights-list-container", listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs })));
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
exports.Highlights = Highlights;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React, { useId } from 'react';
|
|
2
|
+
import { useMediaQuery } from '@arc-ui/components/dist/use-media-query';
|
|
3
|
+
import { S as SectionHeading } from '../_shared/esm/SectionHeading-C70XNhqJ.js';
|
|
4
|
+
import { c as classNames } from '../_shared/esm/index-BfTCfPZ1.js';
|
|
5
|
+
import { Heading } from '@arc-ui/components/dist/Heading';
|
|
6
|
+
import { Icon } from '@arc-ui/components/dist/Icon';
|
|
7
|
+
import { Text } from '@arc-ui/components/dist/Text';
|
|
8
|
+
import { Link } from '@arc-ui/components/dist/Link';
|
|
9
|
+
import { VerticalSpace } from '@arc-ui/components/dist/VerticalSpace';
|
|
10
|
+
import '../_shared/esm/tslib.es6-Cv15O4Nx.js';
|
|
11
|
+
import '../_shared/esm/filter-data-attrs-V7cbJuwS.js';
|
|
12
|
+
|
|
13
|
+
var styles = {"highlights":"Highlights-module_highlights__Hf7Zq","highlightItem":"Highlights-module_highlightItem__-N6le","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
|
|
14
|
+
|
|
15
|
+
var HighlightItem = function (_a) {
|
|
16
|
+
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, isSmallIcon = _a.isSmallIcon;
|
|
17
|
+
return (React.createElement("div", { "data-testid": "highlight-item-container", className: styles.highlightItem },
|
|
18
|
+
icon && (React.createElement("div", { className: styles.Icon },
|
|
19
|
+
React.createElement(Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
|
|
20
|
+
React.createElement(VerticalSpace, { size: "16" }),
|
|
21
|
+
React.createElement(Heading, { level: "3", size: "m" }, heading),
|
|
22
|
+
React.createElement(VerticalSpace, { size: "16" }),
|
|
23
|
+
React.createElement(Text, null, text),
|
|
24
|
+
React.createElement(VerticalSpace, { size: "16" }),
|
|
25
|
+
link && (React.createElement(Link, { href: link.url, id: link.url, onClick: function noRefCheck() { }, rel: "", size: "m", target: "_self", title: link.textLink }, link.textLink))));
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
var HighlightList = function (_a) {
|
|
29
|
+
var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon;
|
|
30
|
+
var id = useId();
|
|
31
|
+
return (React.createElement("div", { "data-testid": "highlights-list", className: classNames(styles.highlights, styles["highlights".concat(columns, "Column")]) }, listItems.map(function (_a, i) {
|
|
32
|
+
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link;
|
|
33
|
+
return (React.createElement(HighlightItem, { key: "highlight-".concat(id, "-").concat(i), icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon }));
|
|
34
|
+
})));
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Use `Highlights` to give supporting information about a page or proposition. It can be used to call out key benefits in bullet points, or link. Both two and three column options are available.
|
|
39
|
+
*/
|
|
40
|
+
var Highlights = function (_a) {
|
|
41
|
+
var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content, listItems = _a.listItems, _b = _a.columns, columns = _b === void 0 ? "2" : _b;
|
|
42
|
+
var isMaxWidthArcBreakpointXs = useMediaQuery("(max-width: 767px)");
|
|
43
|
+
return (React.createElement("div", null,
|
|
44
|
+
React.createElement(SectionHeading, { isPadded: true, "data-testid": "highlights-header", heading: heading, headingLevel: headingLevel, content: content }),
|
|
45
|
+
React.createElement(HighlightList, { "data-testid": "highlights-list-container", listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs })));
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export { Highlights };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.Highlights-module_highlights__Hf7Zq{display:grid;grid-gap:48px 24px;gap:48px 24px;grid-template-columns:1fr}.Highlights-module_highlightItem__-N6le{max-width:480px;width:auto}@media (min-width:636px){.Highlights-module_highlights__Hf7Zq{grid-template-columns:1fr 1fr}.Highlights-module_highlightItem__-N6le{min-width:282px;padding-right:0}}@media (min-width:768px){.Highlights-module_highlights2Column__6qIuI{grid-template-columns:1fr 1fr}.Highlights-module_highlights2Column__6qIuI .Highlights-module_highlightItem__-N6le{max-width:-moz-max-content;max-width:max-content;min-width:348px;padding-right:62px}.Highlights-module_highlights3Column__qsCMP{grid-template-columns:1fr 1fr 1fr}.Highlights-module_highlights3Column__qsCMP .Highlights-module_highlightItem__-N6le{min-width:224px}}@media (min-width:1024px){.Highlights-module_highlights2Column__6qIuI{grid-template-columns:1fr 1fr}.Highlights-module_highlights2Column__6qIuI .Highlights-module_highlightItem__-N6le{min-width:468px;padding-right:82px}.Highlights-module_highlights3Column__qsCMP{grid-template-columns:1fr 1fr 1fr}.Highlights-module_highlights3Column__qsCMP .Highlights-module_highlightItem__-N6le{min-width:304px}}@media (min-width:1280px){.Highlights-module_highlights__Hf7Zq{gap:48px 32px}.Highlights-module_highlights2Column__6qIuI{grid-template-columns:1fr 1fr}.Highlights-module_highlights2Column__6qIuI .Highlights-module_highlightItem__-N6le{min-width:592px;padding-right:104px}.Highlights-module_highlights3Column__qsCMP{grid-template-columns:1fr 1fr 1fr}.Highlights-module_highlights3Column__qsCMP .Highlights-module_highlightItem__-N6le{min-width:384px}}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib_es6 = require('../_shared/cjs/tslib.es6-DBA0GFPJ.js');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var index = require('../_shared/cjs/index-Bp6Dd2i1.js');
|
|
6
|
+
var index_es = require('../_shared/cjs/index.es-X428Cm3N.js');
|
|
7
|
+
var Carousel = require('@arc-ui/components/dist/Carousel');
|
|
8
|
+
var useMediaQuery = require('@arc-ui/components/dist/use-media-query');
|
|
9
|
+
var SectionHeading = require('../_shared/cjs/SectionHeading-L2EpTQ79.js');
|
|
10
|
+
var MediaCard = require('@arc-ui/components/dist/MediaCard');
|
|
11
|
+
var ImpactCard = require('@arc-ui/components/dist/ImpactCard');
|
|
12
|
+
var InformationCard = require('@arc-ui/components/dist/InformationCard');
|
|
13
|
+
var TypographyCard = require('@arc-ui/components/dist/TypographyCard');
|
|
14
|
+
require('../_shared/cjs/filter-data-attrs-ajtUvDAC.js');
|
|
15
|
+
require('@arc-ui/components/dist/Heading');
|
|
16
|
+
require('@arc-ui/components/dist/Text');
|
|
17
|
+
require('@arc-ui/components/dist/VerticalSpace');
|
|
18
|
+
|
|
19
|
+
var styles = {"PromoListing":"PromoListing-module_PromoListing__6ensv","promoListingContainer":"PromoListing-module_promoListingContainer__vwez-","cardGrid":"PromoListing-module_cardGrid__llf73","carouselSlide":"PromoListing-module_carouselSlide__AMTPF","cardGrid2Columns":"PromoListing-module_cardGrid2Columns__qPLQk","cardGrid3Cards":"PromoListing-module_cardGrid3Cards__VKWMs","cardGrid5Cards":"PromoListing-module_cardGrid5Cards__ywl5k","cardGrid3Columns":"PromoListing-module_cardGrid3Columns__g0Xru","cardGrid4Cards":"PromoListing-module_cardGrid4Cards__5Bv5u","cardGrid2Cards":"PromoListing-module_cardGrid2Cards__wDc4S"};
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Use `PromoListing` to give supporting information about a page or proposition in the form of the card components (`ImpactCard`, `InformationCard`, `MediaCard` and `TypographyCard`).
|
|
23
|
+
*/
|
|
24
|
+
var PromoListing = function (_a) {
|
|
25
|
+
var heading = _a.heading, content = _a.content, isCarousel = _a.isCarousel, cards = _a.cards, headingLevel = _a.headingLevel, _b = _a.columns, columns = _b === void 0 ? "2" : _b;
|
|
26
|
+
var id = React.useId();
|
|
27
|
+
var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsL, ")"));
|
|
28
|
+
var columnCount = isMinWidthArcBreakpointL ? columns : 2;
|
|
29
|
+
var getCard = function (card) { return (React.createElement(React.Fragment, null,
|
|
30
|
+
card.type === "media-card" && React.createElement(MediaCard.MediaCard, tslib_es6.__assign({}, card)),
|
|
31
|
+
card.type === "impact-card" && React.createElement(ImpactCard.ImpactCard, tslib_es6.__assign({}, card)),
|
|
32
|
+
card.type === "information-card" && React.createElement(InformationCard.InformationCard, tslib_es6.__assign({}, card)),
|
|
33
|
+
card.type === "typography-card" && React.createElement(TypographyCard.TypographyCard, tslib_es6.__assign({}, card)))); };
|
|
34
|
+
return (React.createElement("div", { className: styles.PromoListing },
|
|
35
|
+
React.createElement(SectionHeading.SectionHeading, { isPadded: true, "data-testid": "PromoListing-header", heading: heading, headingLevel: headingLevel, content: content }),
|
|
36
|
+
isCarousel && !isMinWidthArcBreakpointL ? (React.createElement(Carousel.Carousel, { itemsPerSlide: 1, responsive: {
|
|
37
|
+
s: {
|
|
38
|
+
itemsToScroll: 1,
|
|
39
|
+
isPartialVisible: false,
|
|
40
|
+
itemsPerSlide: 2,
|
|
41
|
+
},
|
|
42
|
+
m: {
|
|
43
|
+
itemsToScroll: 1,
|
|
44
|
+
isPartialVisible: true,
|
|
45
|
+
itemsPerSlide: 2,
|
|
46
|
+
},
|
|
47
|
+
} }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, i) { return (React.createElement("div", { key: "card-".concat(id, "-").concat(i), className: styles.carouselSlide }, getCard(card))); }))) : (React.createElement("div", { className: index.classNames(styles.cardGrid, styles["cardGrid".concat(columnCount, "Columns")], styles["cardGrid".concat(cards.length, "Cards")]) }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, index$1) { return (React.createElement("div", { "data-testid": "promoList-card".concat(index$1), className: index.classNames(styles.promoListingContainer), key: index$1 }, getCard(card))); })))));
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
exports.PromoListing = PromoListing;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { a as __assign } from '../_shared/esm/tslib.es6-Cv15O4Nx.js';
|
|
2
|
+
import React, { useId } from 'react';
|
|
3
|
+
import { c as classNames } from '../_shared/esm/index-BfTCfPZ1.js';
|
|
4
|
+
import { A as ArcSizeBreakpointsL } from '../_shared/esm/index.es-BzmvPxje.js';
|
|
5
|
+
import { Carousel } from '@arc-ui/components/dist/Carousel';
|
|
6
|
+
import { useMediaQuery } from '@arc-ui/components/dist/use-media-query';
|
|
7
|
+
import { S as SectionHeading } from '../_shared/esm/SectionHeading-C70XNhqJ.js';
|
|
8
|
+
import { MediaCard } from '@arc-ui/components/dist/MediaCard';
|
|
9
|
+
import { ImpactCard } from '@arc-ui/components/dist/ImpactCard';
|
|
10
|
+
import { InformationCard } from '@arc-ui/components/dist/InformationCard';
|
|
11
|
+
import { TypographyCard } from '@arc-ui/components/dist/TypographyCard';
|
|
12
|
+
import '../_shared/esm/filter-data-attrs-V7cbJuwS.js';
|
|
13
|
+
import '@arc-ui/components/dist/Heading';
|
|
14
|
+
import '@arc-ui/components/dist/Text';
|
|
15
|
+
import '@arc-ui/components/dist/VerticalSpace';
|
|
16
|
+
|
|
17
|
+
var styles = {"PromoListing":"PromoListing-module_PromoListing__6ensv","promoListingContainer":"PromoListing-module_promoListingContainer__vwez-","cardGrid":"PromoListing-module_cardGrid__llf73","carouselSlide":"PromoListing-module_carouselSlide__AMTPF","cardGrid2Columns":"PromoListing-module_cardGrid2Columns__qPLQk","cardGrid3Cards":"PromoListing-module_cardGrid3Cards__VKWMs","cardGrid5Cards":"PromoListing-module_cardGrid5Cards__ywl5k","cardGrid3Columns":"PromoListing-module_cardGrid3Columns__g0Xru","cardGrid4Cards":"PromoListing-module_cardGrid4Cards__5Bv5u","cardGrid2Cards":"PromoListing-module_cardGrid2Cards__wDc4S"};
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Use `PromoListing` to give supporting information about a page or proposition in the form of the card components (`ImpactCard`, `InformationCard`, `MediaCard` and `TypographyCard`).
|
|
21
|
+
*/
|
|
22
|
+
var PromoListing = function (_a) {
|
|
23
|
+
var heading = _a.heading, content = _a.content, isCarousel = _a.isCarousel, cards = _a.cards, headingLevel = _a.headingLevel, _b = _a.columns, columns = _b === void 0 ? "2" : _b;
|
|
24
|
+
var id = useId();
|
|
25
|
+
var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
|
|
26
|
+
var columnCount = isMinWidthArcBreakpointL ? columns : 2;
|
|
27
|
+
var getCard = function (card) { return (React.createElement(React.Fragment, null,
|
|
28
|
+
card.type === "media-card" && React.createElement(MediaCard, __assign({}, card)),
|
|
29
|
+
card.type === "impact-card" && React.createElement(ImpactCard, __assign({}, card)),
|
|
30
|
+
card.type === "information-card" && React.createElement(InformationCard, __assign({}, card)),
|
|
31
|
+
card.type === "typography-card" && React.createElement(TypographyCard, __assign({}, card)))); };
|
|
32
|
+
return (React.createElement("div", { className: styles.PromoListing },
|
|
33
|
+
React.createElement(SectionHeading, { isPadded: true, "data-testid": "PromoListing-header", heading: heading, headingLevel: headingLevel, content: content }),
|
|
34
|
+
isCarousel && !isMinWidthArcBreakpointL ? (React.createElement(Carousel, { itemsPerSlide: 1, responsive: {
|
|
35
|
+
s: {
|
|
36
|
+
itemsToScroll: 1,
|
|
37
|
+
isPartialVisible: false,
|
|
38
|
+
itemsPerSlide: 2,
|
|
39
|
+
},
|
|
40
|
+
m: {
|
|
41
|
+
itemsToScroll: 1,
|
|
42
|
+
isPartialVisible: true,
|
|
43
|
+
itemsPerSlide: 2,
|
|
44
|
+
},
|
|
45
|
+
} }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, i) { return (React.createElement("div", { key: "card-".concat(id, "-").concat(i), className: styles.carouselSlide }, getCard(card))); }))) : (React.createElement("div", { className: classNames(styles.cardGrid, styles["cardGrid".concat(columnCount, "Columns")], styles["cardGrid".concat(cards.length, "Cards")]) }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, index) { return (React.createElement("div", { "data-testid": "promoList-card".concat(index), className: classNames(styles.promoListingContainer), key: index }, getCard(card))); })))));
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export { PromoListing };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.PromoListing-module_PromoListing__6ensv{max-width:1280px}.PromoListing-module_promoListingContainer__vwez-{grid-column:span 2;height:100%;width:100%}.PromoListing-module_cardGrid__llf73{display:grid;grid-gap:24px;gap:24px;grid-template-columns:2fr}.PromoListing-module_carouselSlide__AMTPF{height:100%;padding:6px}@media (min-width:320px){.PromoListing-module_cardGrid__llf73{grid-auto-rows:minmax(430px,1fr)}}@media (min-width:636px){.PromoListing-module_cardGrid2Columns__qPLQk{grid-auto-rows:minmax(430px,1fr);grid-template-columns:repeat(4,1fr)}.PromoListing-module_cardGrid2Columns__qPLQk.PromoListing-module_cardGrid3Cards__VKWMs .PromoListing-module_promoListingContainer__vwez-:last-child{grid-column-end:4}.PromoListing-module_cardGrid2Columns__qPLQk.PromoListing-module_cardGrid5Cards__ywl5k .PromoListing-module_promoListingContainer__vwez-:last-child{grid-column-end:4}}@media (min-width:768px){.PromoListing-module_cardGrid2Columns__qPLQk{grid-auto-rows:minmax(430px,1fr)}}@media (min-width:1024px){.PromoListing-module_cardGrid2Columns__qPLQk{grid-auto-rows:minmax(468px,1fr)}.PromoListing-module_cardGrid3Columns__g0Xru{grid-auto-rows:minmax(437px,1fr);grid-template-columns:repeat(6,1fr)}.PromoListing-module_cardGrid3Columns__g0Xru.PromoListing-module_cardGrid4Cards__5Bv5u .PromoListing-module_promoListingContainer__vwez-:last-child{grid-column-end:5}.PromoListing-module_cardGrid3Columns__g0Xru.PromoListing-module_cardGrid2Cards__wDc4S .PromoListing-module_promoListingContainer__vwez-:last-child{grid-column-end:6}.PromoListing-module_cardGrid3Columns__g0Xru.PromoListing-module_cardGrid5Cards__ywl5k .PromoListing-module_promoListingContainer__vwez-:last-child{grid-column-end:6}.PromoListing-module_cardGrid3Columns__g0Xru.PromoListing-module_cardGrid2Cards__wDc4S .PromoListing-module_promoListingContainer__vwez-:nth-last-child(2){grid-column-end:4}.PromoListing-module_cardGrid3Columns__g0Xru.PromoListing-module_cardGrid5Cards__ywl5k .PromoListing-module_promoListingContainer__vwez-:nth-last-child(2){grid-column-end:4}}@media (min-width:1280px){.PromoListing-module_cardGrid2Columns__qPLQk{grid-auto-rows:minmax(592px,1fr)}.PromoListing-module_cardGrid3Columns__g0Xru{grid-auto-rows:minmax(523px,1fr)}.PromoListing-module_cardGrid__llf73{gap:32px}}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib_es6 = require('../_shared/cjs/tslib.es6-DBA0GFPJ.js');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var index = require('../_shared/cjs/index-Bp6Dd2i1.js');
|
|
6
|
+
var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-ajtUvDAC.js');
|
|
7
|
+
var Author = require('../_shared/cjs/Author-CAo-qryZ.js');
|
|
8
|
+
require('@arc-ui/components/dist/Grid');
|
|
9
|
+
require('@arc-ui/components/dist/Avatar');
|
|
10
|
+
require('@arc-ui/components/dist/Heading');
|
|
11
|
+
require('@arc-ui/components/dist/Text');
|
|
12
|
+
|
|
13
|
+
var styles = {"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"};
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* 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.*/
|
|
17
|
+
var Quote = function (_a) {
|
|
18
|
+
var author = _a.author, _b = _a.styling, styling = _b === void 0 ? "Default" : _b, content = _a.content, citeUrl = _a.citeUrl, props = tslib_es6.__rest(_a, ["author", "styling", "content", "citeUrl"]);
|
|
19
|
+
return (React.createElement("div", tslib_es6.__assign({ className: "community-component--quote", "data-testid": "quote-test" }, filterDataAttrs.filterDataAttrs(props)),
|
|
20
|
+
React.createElement("blockquote", { "data-testid": "style-test", className: index.classNames(styles.blockQuote, styles["quote".concat(styling)]), cite: citeUrl },
|
|
21
|
+
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles.quoteIcon, "aria-hidden": "true" },
|
|
22
|
+
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" })),
|
|
23
|
+
React.createElement("p", { className: styles.quoteContent }, content)),
|
|
24
|
+
author && (React.createElement(Author.Author, { name: author.name, title: author.title, avatar: author.avatar }))));
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
exports.Quote = Quote;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-Cv15O4Nx.js';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { c as classNames } from '../_shared/esm/index-BfTCfPZ1.js';
|
|
4
|
+
import { f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-V7cbJuwS.js';
|
|
5
|
+
import { A as Author } from '../_shared/esm/Author-Bx-cE9Pz.js';
|
|
6
|
+
import '@arc-ui/components/dist/Grid';
|
|
7
|
+
import '@arc-ui/components/dist/Avatar';
|
|
8
|
+
import '@arc-ui/components/dist/Heading';
|
|
9
|
+
import '@arc-ui/components/dist/Text';
|
|
10
|
+
|
|
11
|
+
var styles = {"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"};
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* 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.*/
|
|
15
|
+
var Quote = function (_a) {
|
|
16
|
+
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"]);
|
|
17
|
+
return (React.createElement("div", __assign({ className: "community-component--quote", "data-testid": "quote-test" }, filterDataAttrs(props)),
|
|
18
|
+
React.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles.blockQuote, styles["quote".concat(styling)]), cite: citeUrl },
|
|
19
|
+
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles.quoteIcon, "aria-hidden": "true" },
|
|
20
|
+
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" })),
|
|
21
|
+
React.createElement("p", { className: styles.quoteContent }, content)),
|
|
22
|
+
author && (React.createElement(Author, { name: author.name, title: author.title, avatar: author.avatar }))));
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export { Quote };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.Quote-module_blockQuote__STj-z{font-size:36px;font-style:normal;font-weight:500;margin:0}.Quote-module_quoteContent__kWc51{line-height:44px;margin:0;padding-top:32px;padding-bottom:32px}.Quote-module_quoteDefault__tU5db{color:#5514b4;fill:#5514b4}.Quote-module_quoteSecondary__3Rk3f{color:#434343;fill:#434343}.Quote-module_quoteIcon__HK1TV{height:76.471px;width:100px}svg{padding:0}@media (min-width:768px){.Quote-module_blockQuote__STj-z{font-size:40px}.Quote-module_quoteContent__kWc51{line-height:48px}}@media (min-width:1024px){.Quote-module_quoteIcon__HK1TV{height:95.588px;width:125px}}@media (min-width:1280px){.Quote-module_blockQuote__STj-z{font-size:56px}.Quote-module_quoteContent__kWc51{line-height:64px}}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var SectionHeading = require('../_shared/cjs/SectionHeading-L2EpTQ79.js');
|
|
4
|
+
require('../_shared/cjs/tslib.es6-DBA0GFPJ.js');
|
|
5
|
+
require('react');
|
|
6
|
+
require('../_shared/cjs/index-Bp6Dd2i1.js');
|
|
7
|
+
require('../_shared/cjs/filter-data-attrs-ajtUvDAC.js');
|
|
8
|
+
require('@arc-ui/components/dist/Heading');
|
|
9
|
+
require('@arc-ui/components/dist/Text');
|
|
10
|
+
require('@arc-ui/components/dist/VerticalSpace');
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
exports.SectionHeading = SectionHeading.SectionHeading;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export { S as SectionHeading } from '../_shared/esm/SectionHeading-C70XNhqJ.js';
|
|
2
|
+
import '../_shared/esm/tslib.es6-Cv15O4Nx.js';
|
|
3
|
+
import 'react';
|
|
4
|
+
import '../_shared/esm/index-BfTCfPZ1.js';
|
|
5
|
+
import '../_shared/esm/filter-data-attrs-V7cbJuwS.js';
|
|
6
|
+
import '@arc-ui/components/dist/Heading';
|
|
7
|
+
import '@arc-ui/components/dist/Text';
|
|
8
|
+
import '@arc-ui/components/dist/VerticalSpace';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.SectionHeading-module_section-header--padded__0FXP2{padding-bottom:40px;width:auto}@media (min-width:636px){.SectionHeading-module_section-header--padded__0FXP2{min-width:588px;width:auto}}@media (min-width:768px){.SectionHeading-module_section-header--padded__0FXP2{min-width:720px;padding:0 186px 40px 0}}@media (min-width:1024px){.SectionHeading-module_section-header--padded__0FXP2{min-width:960px;padding:0 246px 40px 0}}@media (min-width:1280px){.SectionHeading-module_section-header--padded__0FXP2{min-width:1216px;padding:0 312px 40px 0}}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib_es6 = require('../_shared/cjs/tslib.es6-DBA0GFPJ.js');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var Columns = require('@arc-ui/components/dist/Columns');
|
|
6
|
+
var Rule = require('@arc-ui/components/dist/Rule');
|
|
7
|
+
var Text = require('@arc-ui/components/dist/Text');
|
|
8
|
+
var Align = require('@arc-ui/components/dist/Align');
|
|
9
|
+
var Heading = require('@arc-ui/components/dist/Heading');
|
|
10
|
+
var VerticalSpace = require('@arc-ui/components/dist/VerticalSpace');
|
|
11
|
+
var SectionHeading = require('../_shared/cjs/SectionHeading-L2EpTQ79.js');
|
|
12
|
+
require('../_shared/cjs/index-Bp6Dd2i1.js');
|
|
13
|
+
require('../_shared/cjs/filter-data-attrs-ajtUvDAC.js');
|
|
14
|
+
|
|
15
|
+
var styles = {"list":"Statistics-module_list__BI-eQ","mutedText":"Statistics-module_mutedText__MR1JM","statWrapper":"Statistics-module_statWrapper__83OnM"};
|
|
16
|
+
|
|
17
|
+
var getLinkProps = function (link) {
|
|
18
|
+
return link.openInNewTab
|
|
19
|
+
? {
|
|
20
|
+
rel: "noreferrer",
|
|
21
|
+
target: "_blank",
|
|
22
|
+
}
|
|
23
|
+
: {};
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
var Statistics = function (_a) {
|
|
27
|
+
var headingLevel = _a.headingLevel, heading = _a.heading, content = _a.content, statistics = _a.statistics;
|
|
28
|
+
var id = React.useId();
|
|
29
|
+
return (React.createElement(Columns.Columns, null,
|
|
30
|
+
React.createElement(Columns.Columns.Col, { spanM: 9 },
|
|
31
|
+
React.createElement(SectionHeading.SectionHeading, { heading: heading, headingLevel: headingLevel, content: content }),
|
|
32
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "16" })),
|
|
33
|
+
React.createElement(Columns.Columns.Col, { spanL: 9 },
|
|
34
|
+
React.createElement("ul", { className: styles.list }, statistics.map(function (_a, i) {
|
|
35
|
+
var stat = _a.stat, copy = _a.copy, link = _a.link, source = _a.source, sourceUrl = _a.sourceUrl;
|
|
36
|
+
return (React.createElement("li", { key: "statistic-".concat(id, "-").concat(i) },
|
|
37
|
+
i !== 0 && (React.createElement(React.Fragment, null,
|
|
38
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "24", sizeS: "32", sizeXL: "40" }),
|
|
39
|
+
React.createElement(Rule.Rule, null),
|
|
40
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "24", sizeS: "32", sizeXL: "40" }))),
|
|
41
|
+
React.createElement(Columns.Columns, null,
|
|
42
|
+
React.createElement(Columns.Columns.Col, { spanS: 6, spanM: 8 },
|
|
43
|
+
React.createElement(Align.Align, { vertical: "center" },
|
|
44
|
+
React.createElement("div", { className: styles.statWrapper },
|
|
45
|
+
React.createElement(Heading.Heading, { color: "brand", size: "xxl" }, stat)))),
|
|
46
|
+
React.createElement(Columns.Columns.Col, { spanS: 6, spanM: 4 },
|
|
47
|
+
React.createElement(Text.Text, null, copy),
|
|
48
|
+
link && (React.createElement(React.Fragment, null,
|
|
49
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
|
|
50
|
+
React.createElement("a", tslib_es6.__assign({ href: link.href, "aria-label": link.ariaLabel }, getLinkProps(link)), link.text))),
|
|
51
|
+
source && (React.createElement(React.Fragment, null,
|
|
52
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
|
|
53
|
+
React.createElement(Text.Text, { size: "xs" },
|
|
54
|
+
React.createElement("span", { className: styles.mutedText }, source)))),
|
|
55
|
+
sourceUrl && (React.createElement(Text.Text, { size: "xs" },
|
|
56
|
+
React.createElement("a", { className: styles.mutedText, href: sourceUrl }, sourceUrl)))))));
|
|
57
|
+
})))));
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
exports.Statistics = Statistics;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { a as __assign } from '../_shared/esm/tslib.es6-Cv15O4Nx.js';
|
|
2
|
+
import React, { useId } from 'react';
|
|
3
|
+
import { Columns } from '@arc-ui/components/dist/Columns';
|
|
4
|
+
import { Rule } from '@arc-ui/components/dist/Rule';
|
|
5
|
+
import { Text } from '@arc-ui/components/dist/Text';
|
|
6
|
+
import { Align } from '@arc-ui/components/dist/Align';
|
|
7
|
+
import { Heading } from '@arc-ui/components/dist/Heading';
|
|
8
|
+
import { VerticalSpace } from '@arc-ui/components/dist/VerticalSpace';
|
|
9
|
+
import { S as SectionHeading } from '../_shared/esm/SectionHeading-C70XNhqJ.js';
|
|
10
|
+
import '../_shared/esm/index-BfTCfPZ1.js';
|
|
11
|
+
import '../_shared/esm/filter-data-attrs-V7cbJuwS.js';
|
|
12
|
+
|
|
13
|
+
var styles = {"list":"Statistics-module_list__BI-eQ","mutedText":"Statistics-module_mutedText__MR1JM","statWrapper":"Statistics-module_statWrapper__83OnM"};
|
|
14
|
+
|
|
15
|
+
var getLinkProps = function (link) {
|
|
16
|
+
return link.openInNewTab
|
|
17
|
+
? {
|
|
18
|
+
rel: "noreferrer",
|
|
19
|
+
target: "_blank",
|
|
20
|
+
}
|
|
21
|
+
: {};
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
var Statistics = function (_a) {
|
|
25
|
+
var headingLevel = _a.headingLevel, heading = _a.heading, content = _a.content, statistics = _a.statistics;
|
|
26
|
+
var id = useId();
|
|
27
|
+
return (React.createElement(Columns, null,
|
|
28
|
+
React.createElement(Columns.Col, { spanM: 9 },
|
|
29
|
+
React.createElement(SectionHeading, { heading: heading, headingLevel: headingLevel, content: content }),
|
|
30
|
+
React.createElement(VerticalSpace, { size: "16" })),
|
|
31
|
+
React.createElement(Columns.Col, { spanL: 9 },
|
|
32
|
+
React.createElement("ul", { className: styles.list }, statistics.map(function (_a, i) {
|
|
33
|
+
var stat = _a.stat, copy = _a.copy, link = _a.link, source = _a.source, sourceUrl = _a.sourceUrl;
|
|
34
|
+
return (React.createElement("li", { key: "statistic-".concat(id, "-").concat(i) },
|
|
35
|
+
i !== 0 && (React.createElement(React.Fragment, null,
|
|
36
|
+
React.createElement(VerticalSpace, { size: "24", sizeS: "32", sizeXL: "40" }),
|
|
37
|
+
React.createElement(Rule, null),
|
|
38
|
+
React.createElement(VerticalSpace, { size: "24", sizeS: "32", sizeXL: "40" }))),
|
|
39
|
+
React.createElement(Columns, null,
|
|
40
|
+
React.createElement(Columns.Col, { spanS: 6, spanM: 8 },
|
|
41
|
+
React.createElement(Align, { vertical: "center" },
|
|
42
|
+
React.createElement("div", { className: styles.statWrapper },
|
|
43
|
+
React.createElement(Heading, { color: "brand", size: "xxl" }, stat)))),
|
|
44
|
+
React.createElement(Columns.Col, { spanS: 6, spanM: 4 },
|
|
45
|
+
React.createElement(Text, null, copy),
|
|
46
|
+
link && (React.createElement(React.Fragment, null,
|
|
47
|
+
React.createElement(VerticalSpace, { size: "12" }),
|
|
48
|
+
React.createElement("a", __assign({ href: link.href, "aria-label": link.ariaLabel }, getLinkProps(link)), link.text))),
|
|
49
|
+
source && (React.createElement(React.Fragment, null,
|
|
50
|
+
React.createElement(VerticalSpace, { size: "12" }),
|
|
51
|
+
React.createElement(Text, { size: "xs" },
|
|
52
|
+
React.createElement("span", { className: styles.mutedText }, source)))),
|
|
53
|
+
sourceUrl && (React.createElement(Text, { size: "xs" },
|
|
54
|
+
React.createElement("a", { className: styles.mutedText, href: sourceUrl }, sourceUrl)))))));
|
|
55
|
+
})))));
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export { Statistics };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.Statistics-module_list__BI-eQ{list-style:none;margin:0;padding:0}.arc a.Statistics-module_mutedText__MR1JM,.Statistics-module_mutedText__MR1JM{color:var(--sem-color-text-primary-light-subtle)}.Statistics-module_statWrapper__83OnM{margin-bottom:-12px}@media (min-width:636px){.Statistics-module_statWrapper__83OnM{margin-bottom:0}}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var index_es = require('../_shared/cjs/index.es-X428Cm3N.js');
|
|
5
|
+
var Heading = require('@arc-ui/components/dist/Heading');
|
|
6
|
+
var Text = require('@arc-ui/components/dist/Text');
|
|
7
|
+
var Box = require('@arc-ui/components/dist/Box');
|
|
8
|
+
var Rule = require('@arc-ui/components/dist/Rule');
|
|
9
|
+
var VerticalSpace = require('@arc-ui/components/dist/VerticalSpace');
|
|
10
|
+
var useMediaQuery = require('@arc-ui/components/dist/use-media-query');
|
|
11
|
+
|
|
12
|
+
var styles = {"ruleContainer":"Summary-module_ruleContainer__ydWlG","row":"Summary-module_row__SKV--"};
|
|
13
|
+
|
|
14
|
+
var Summary = function (_a) {
|
|
15
|
+
var content = _a.content, _b = _a.headingLevel, headingLevel = _b === void 0 ? "3" : _b;
|
|
16
|
+
var isMinWidthArcBreakpointS = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsS, ")"));
|
|
17
|
+
return (React.createElement(Box.Box, { isBorderRadius: true, borderWidth: "thin", padding: "24" },
|
|
18
|
+
React.createElement("div", { className: styles.row }, content.map(function (_a, i) {
|
|
19
|
+
var heading = _a.heading, text = _a.text;
|
|
20
|
+
return (React.createElement(React.Fragment, null,
|
|
21
|
+
React.createElement("div", { className: styles.col },
|
|
22
|
+
React.createElement(Heading.Heading, { size: "s", level: headingLevel }, heading),
|
|
23
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
|
|
24
|
+
React.createElement(Text.Text, { size: "s" }, text)),
|
|
25
|
+
i !== content.length - 1 && (React.createElement("div", { className: styles.ruleContainer },
|
|
26
|
+
React.createElement(Rule.Rule, { orientation: isMinWidthArcBreakpointS ? "vertical" : "horizontal" })))));
|
|
27
|
+
}))));
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
exports.Summary = Summary;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { a as ArcSizeBreakpointsS } from '../_shared/esm/index.es-BzmvPxje.js';
|
|
3
|
+
import { Heading } from '@arc-ui/components/dist/Heading';
|
|
4
|
+
import { Text } from '@arc-ui/components/dist/Text';
|
|
5
|
+
import { Box } from '@arc-ui/components/dist/Box';
|
|
6
|
+
import { Rule } from '@arc-ui/components/dist/Rule';
|
|
7
|
+
import { VerticalSpace } from '@arc-ui/components/dist/VerticalSpace';
|
|
8
|
+
import { useMediaQuery } from '@arc-ui/components/dist/use-media-query';
|
|
9
|
+
|
|
10
|
+
var styles = {"ruleContainer":"Summary-module_ruleContainer__ydWlG","row":"Summary-module_row__SKV--"};
|
|
11
|
+
|
|
12
|
+
var Summary = function (_a) {
|
|
13
|
+
var content = _a.content, _b = _a.headingLevel, headingLevel = _b === void 0 ? "3" : _b;
|
|
14
|
+
var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
|
|
15
|
+
return (React.createElement(Box, { isBorderRadius: true, borderWidth: "thin", padding: "24" },
|
|
16
|
+
React.createElement("div", { className: styles.row }, content.map(function (_a, i) {
|
|
17
|
+
var heading = _a.heading, text = _a.text;
|
|
18
|
+
return (React.createElement(React.Fragment, null,
|
|
19
|
+
React.createElement("div", { className: styles.col },
|
|
20
|
+
React.createElement(Heading, { size: "s", level: headingLevel }, heading),
|
|
21
|
+
React.createElement(VerticalSpace, { size: "8" }),
|
|
22
|
+
React.createElement(Text, { size: "s" }, text)),
|
|
23
|
+
i !== content.length - 1 && (React.createElement("div", { className: styles.ruleContainer },
|
|
24
|
+
React.createElement(Rule, { orientation: isMinWidthArcBreakpointS ? "vertical" : "horizontal" })))));
|
|
25
|
+
}))));
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export { Summary };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.Summary-module_ruleContainer__ydWlG{flex:0 1 auto;padding:24px}.Summary-module_ruleContainer__ydWlG .arc-Rule{margin:0}@media (min-width:636px){.Summary-module_row__SKV--{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)}}@media (min-width:1024px){.Summary-module_ruleContainer__ydWlG{padding:12px 48px}.Summary-module_row__SKV--{padding:0 24px}}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib_es6 = require('./tslib.es6-DBA0GFPJ.js');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var filterDataAttrs = require('./filter-data-attrs-ajtUvDAC.js');
|
|
6
|
+
var Grid = require('@arc-ui/components/dist/Grid');
|
|
7
|
+
var Avatar = require('@arc-ui/components/dist/Avatar');
|
|
8
|
+
var Heading = require('@arc-ui/components/dist/Heading');
|
|
9
|
+
var Text = require('@arc-ui/components/dist/Text');
|
|
10
|
+
|
|
11
|
+
var styles = {"authorContent":"Author-module_authorContent__TBY7b","largeAvatar":"Author-module_largeAvatar__Vco03"};
|
|
12
|
+
|
|
13
|
+
var Author = function (_a) {
|
|
14
|
+
var name = _a.name, title = _a.title, _b = _a.avatar, avatar = _b === void 0 ? {} : _b, props = tslib_es6.__rest(_a, ["name", "title", "avatar"]);
|
|
15
|
+
var avatarSizes = ["s", "m", "l", "xl"];
|
|
16
|
+
avatar.size = avatarSizes.includes(avatar.size || "") ? avatar.size : "m";
|
|
17
|
+
var isLargeAvatar = avatar.size === "l" || avatar.size === "xl";
|
|
18
|
+
return (React.createElement("div", tslib_es6.__assign({}, filterDataAttrs.filterDataAttrs(props)),
|
|
19
|
+
React.createElement(Grid.Grid, { isFluid: true, isGutterless: true },
|
|
20
|
+
React.createElement(Grid.Grid.Row, { align: "center" },
|
|
21
|
+
React.createElement(Grid.Grid.Col, { xs: isLargeAvatar ? 12 : "auto" },
|
|
22
|
+
React.createElement("div", { className: isLargeAvatar ? styles.largeAvatar : undefined },
|
|
23
|
+
React.createElement(Avatar.Avatar, tslib_es6.__assign({}, avatar)))),
|
|
24
|
+
React.createElement(Grid.Grid.Col, null,
|
|
25
|
+
React.createElement("div", { className: "".concat(!isLargeAvatar && styles.authorContent), "data-testid": "authorContent" },
|
|
26
|
+
React.createElement(Heading.Heading, { size: "xs" }, name),
|
|
27
|
+
React.createElement(Text.Text, { size: "s" }, title)))))));
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
exports.Author = Author;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib_es6 = require('./tslib.es6-DBA0GFPJ.js');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var index = require('./index-Bp6Dd2i1.js');
|
|
6
|
+
var filterDataAttrs = require('./filter-data-attrs-ajtUvDAC.js');
|
|
7
|
+
var Heading = require('@arc-ui/components/dist/Heading');
|
|
8
|
+
var Text = require('@arc-ui/components/dist/Text');
|
|
9
|
+
var VerticalSpace = require('@arc-ui/components/dist/VerticalSpace');
|
|
10
|
+
|
|
11
|
+
var styles = {"section-header--padded":"SectionHeading-module_section-header--padded__0FXP2"};
|
|
12
|
+
|
|
13
|
+
var SectionHeading = function (_a) {
|
|
14
|
+
var _b;
|
|
15
|
+
var heading = _a.heading, content = _a.content, id = _a.id, _c = _a.isPadded, isPadded = _c === void 0 ? false : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, props = tslib_es6.__rest(_a, ["heading", "content", "id", "isPadded", "headingLevel"]);
|
|
16
|
+
return (React.createElement("div", tslib_es6.__assign({ className: index.classNames((_b = {},
|
|
17
|
+
_b[styles["section-header--padded"]] = isPadded,
|
|
18
|
+
_b)) }, filterDataAttrs.filterDataAttrs(props)),
|
|
19
|
+
React.createElement(Heading.Heading, { level: headingLevel, id: id, size: "xl" }, heading),
|
|
20
|
+
content && (React.createElement(React.Fragment, null,
|
|
21
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
|
|
22
|
+
React.createElement(Text.Text, { size: "l", elementType: "p" }, content)))));
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
exports.SectionHeading = SectionHeading;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var dataAttrRe = /^(data-.*)$/;
|
|
4
|
+
var filterDataAttrs = function (props) {
|
|
5
|
+
var filteredProps = {};
|
|
6
|
+
for (var prop in props) {
|
|
7
|
+
if (Object.prototype.hasOwnProperty.call(props, prop) &&
|
|
8
|
+
dataAttrRe.test(prop)) {
|
|
9
|
+
filteredProps[prop] = props[prop];
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
return filteredProps;
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
exports.filterDataAttrs = filterDataAttrs;
|