@arc-ui/community-components 3.2.0 → 3.4.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 +133 -13
- 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 +10 -11
- package/lib/ActionTile/styles.css +1 -1
- package/lib/ArticleSidebar/ArticleSidebar.cjs +9 -10
- package/lib/ArticleSidebar/ArticleSidebar.mjs +46 -47
- 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 +8 -9
- package/lib/ContentInfoWidget/ContentInfoWidget.cjs +3 -2
- package/lib/ContentInfoWidget/ContentInfoWidget.mjs +8 -7
- package/lib/CopyLead/CopyLead.cjs +32 -23
- package/lib/CopyLead/CopyLead.mjs +60 -51
- package/lib/DownloadList/DownloadList.cjs +6 -8
- package/lib/DownloadList/DownloadList.mjs +11 -13
- package/lib/FAQs/FAQs.cjs +5 -6
- package/lib/FAQs/FAQs.mjs +22 -23
- package/lib/FeaturePost/FeaturePost.cjs +14 -15
- package/lib/FeaturePost/FeaturePost.mjs +54 -55
- package/lib/Highlights/Highlights.cjs +11 -12
- package/lib/Highlights/Highlights.mjs +24 -25
- 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 +7 -7
- package/lib/LinkTile/styles.css +1 -1
- package/lib/ProductNavigation/ProductNavigation.cjs +6 -7
- package/lib/ProductNavigation/ProductNavigation.mjs +18 -19
- package/lib/PromoListing/PromoListing.cjs +7 -8
- package/lib/PromoListing/PromoListing.mjs +17 -18
- package/lib/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.cjs +7 -8
- package/lib/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.mjs +9 -10
- package/lib/Quote/Quote.cjs +5 -6
- package/lib/Quote/Quote.mjs +9 -10
- 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 +35 -33
- package/lib/Statistics/styles.css +1 -1
- package/lib/Summary/Summary.cjs +4 -4
- package/lib/Summary/Summary.mjs +13 -13
- package/lib/ThumbnailSignpost/ThumbnailSignpost.cjs +2 -3
- package/lib/ThumbnailSignpost/ThumbnailSignpost.mjs +2 -3
- package/lib/VideoHeroCard/VideoHeroCard.cjs +76 -0
- package/lib/VideoHeroCard/VideoHeroCard.mjs +74 -0
- package/lib/VideoPortraitCard/VideoPortraitCard.cjs +22 -0
- package/lib/VideoPortraitCard/VideoPortraitCard.mjs +20 -0
- package/lib/_shared/cjs/{Accordion-DfNGOjTm.cjs → Accordion-QqDoB3pY.cjs} +8 -9
- package/lib/_shared/cjs/{Author-D4dKNQem.cjs → Author-aL8YXi7C.cjs} +4 -5
- package/lib/_shared/cjs/Preview-Dx1kCzJ1.cjs +102 -0
- package/lib/_shared/cjs/{SectionHeading-DeSFM0HV.cjs → SectionHeading-Dj-dJfv3.cjs} +4 -5
- package/lib/_shared/cjs/{ThumbnailSignpost-GkOiwt-Z.cjs → ThumbnailSignpost-SBnrGooA.cjs} +4 -5
- package/lib/_shared/cjs/VideoCardThumbnail-BqYgpk0u.cjs +440 -0
- package/lib/_shared/cjs/dash.all.min-BPXzla24.cjs +6 -0
- package/lib/_shared/cjs/{tslib.es6-BxB9I209.cjs → filter-attrs-C26zOt4_.cjs} +25 -0
- package/lib/_shared/cjs/hls-Ckhp5fVA.cjs +36628 -0
- package/lib/_shared/cjs/index-DjiIVIaV.cjs +96 -0
- package/lib/_shared/cjs/index-oGP6D6gL.cjs +14826 -0
- package/lib/_shared/cjs/{index.es-Dq8bYrbW.cjs → index.es-B0J3cvrY.cjs} +1 -1
- package/lib/_shared/cjs/mixin-BFwaXKGB.cjs +1027 -0
- package/lib/_shared/cjs/react-CEvhi3LL.cjs +737 -0
- package/lib/_shared/cjs/react-CqsEClV0.cjs +466 -0
- package/lib/_shared/cjs/react-DE6M3seI.cjs +496 -0
- package/lib/_shared/cjs/react-Dri2yjKm.cjs +554 -0
- package/lib/_shared/cjs/react-DxToimBj.cjs +4239 -0
- package/lib/_shared/cjs/react-JTfV8OSA.cjs +325 -0
- package/lib/_shared/cjs/react-caXJFZ8W.cjs +400 -0
- package/lib/_shared/cjs/react-fep2ei7j.cjs +727 -0
- package/lib/_shared/esm/{Accordion-cd1oYvBv.mjs → Accordion-DtU7jbCv.mjs} +16 -17
- package/lib/_shared/esm/Author-CJQFrQM9.mjs +27 -0
- package/lib/_shared/esm/Preview-CmbKOgEO.mjs +100 -0
- package/lib/_shared/esm/{SectionHeading-CpDLCndw.mjs → SectionHeading-BskdQ2Tt.mjs} +10 -11
- package/lib/_shared/esm/{ThumbnailSignpost-BeRiXbUp.mjs → ThumbnailSignpost-CBSdQiHw.mjs} +13 -14
- package/lib/_shared/esm/VideoCardThumbnail-VfOKmPCv.mjs +437 -0
- package/lib/_shared/esm/dash.all.min-CbWI_8dN.mjs +4 -0
- package/lib/_shared/esm/{tslib.es6-D6Wu-xwB.mjs → filter-attrs-D-1kWaCP.mjs} +25 -1
- package/lib/_shared/esm/hls-AFbJDS9D.mjs +36625 -0
- package/lib/_shared/esm/index-CrcIrdjn.mjs +14799 -0
- package/lib/_shared/esm/index-DYnuIO1L.mjs +94 -0
- package/lib/_shared/esm/{index.es-Bfdys5__.mjs → index.es-DraZ-qKh.mjs} +1 -1
- package/lib/_shared/esm/mixin-BGGG8VrM.mjs +1024 -0
- package/lib/_shared/esm/react-BGimq-TB.mjs +4237 -0
- package/lib/_shared/esm/react-BHT4t_eQ.mjs +494 -0
- package/lib/_shared/esm/react-BSd0sGcO.mjs +464 -0
- package/lib/_shared/esm/react-CSr43fZV.mjs +552 -0
- package/lib/_shared/esm/react-Ca6E7Fr-.mjs +398 -0
- package/lib/_shared/esm/react-DG070IvZ.mjs +725 -0
- package/lib/_shared/esm/react-DZyqy7W7.mjs +735 -0
- package/lib/_shared/esm/react-WW_9iHcl.mjs +323 -0
- package/lib/index.cjs +299 -181
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +77 -63
- package/lib/index.d.mts +77 -63
- package/lib/index.mjs +297 -181
- package/lib/index.mjs.map +1 -1
- package/lib/styles.css +1 -1
- package/package.json +15 -12
- package/rollup.config.js +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/CopyLead/components/MediaContent/MediaContent.tsx +7 -6
- package/src/components/CopyLead/templates/Content/Content.tsx +5 -3
- package/src/components/CopyLead/templates/Media/Media.tsx +5 -6
- package/src/components/DownloadList/DownloadList.tsx +8 -8
- package/src/components/FeaturePost/FeaturePost.tsx +3 -7
- 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.tsx +2 -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/VideoHeroCard/VideoHeroCard.tsx +63 -0
- package/src/components/VideoHeroCard/components/VideoHeroCardContent/VideoHeroCardContent.module.css +32 -0
- package/src/components/VideoHeroCard/components/VideoHeroCardContent/VideoHeroCardContent.tsx +97 -0
- package/src/components/VideoHeroCard/components/VideoHeroCardContent/index.ts +4 -0
- package/src/components/VideoHeroCard/index.ts +1 -0
- package/src/components/VideoPortraitCard/VideoPortraitCard.tsx +54 -0
- package/src/components/VideoPortraitCard/index.ts +4 -0
- package/src/components/index.ts +3 -1
- package/src/internal/MultiLineText/MultiLineText.tsx +25 -0
- package/src/internal/MultiLineText/index.ts +1 -0
- package/src/internal/VideoCardPlayer/VideoCardPlayer.module.css +54 -0
- package/src/internal/VideoCardPlayer/VideoCardPlayer.tsx +62 -0
- package/src/internal/VideoCardPlayer/components/VideoCardPlayIcon/VideoCardPlayIcon.module.css +41 -0
- package/src/internal/VideoCardPlayer/components/VideoCardPlayIcon/VideoCardPlayIcon.tsx +28 -0
- package/src/internal/VideoCardPlayer/components/VideoCardPlayIcon/index.ts +1 -0
- package/src/internal/VideoCardPlayer/components/VideoCardThumbnail/VideoCardThumbnail.module.css +58 -0
- package/src/internal/VideoCardPlayer/components/VideoCardThumbnail/VideoCardThumbnail.tsx +38 -0
- package/src/internal/VideoCardPlayer/components/VideoCardThumbnail/index.ts +1 -0
- package/src/internal/VideoCardPlayer/index.ts +2 -0
- package/src/internal/VideoCardPlayer/types/player-props.ts +6 -0
- 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/Author-HnYsFTPT.mjs +0 -28
- 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
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
|
|
2
|
+
import React__default, { 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-DraZ-qKh.mjs';
|
|
6
|
+
import { S as SectionHeading } from '../_shared/esm/SectionHeading-BskdQ2Tt.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';
|
|
@@ -55,24 +54,24 @@ var ProductNavigation = function (_a) {
|
|
|
55
54
|
}
|
|
56
55
|
};
|
|
57
56
|
var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
|
|
58
|
-
return (
|
|
59
|
-
|
|
60
|
-
|
|
57
|
+
return (React__default.createElement("div", __assign({}, filterAttrs(props)),
|
|
58
|
+
React__default.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "ProductNavigation-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content, image: image }),
|
|
59
|
+
React__default.createElement("ul", { className: classNames(styles["product-navigation-grid"]) }, displayList === null || displayList === void 0 ? void 0 : displayList.map(function (cardProps, i) {
|
|
61
60
|
var _a;
|
|
62
|
-
return (
|
|
63
|
-
|
|
61
|
+
return (React__default.createElement("li", { key: "displayList-".concat(i), tabIndex: -1, ref: i === skipLinkCard ? cardRef : undefined, "data-cy": "list-item-".concat(i) },
|
|
62
|
+
React__default.createElement(InformationCard, __assign({}, cardProps, { minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : cardProps.minHeight, headingLevel: (_a = cardProps.headingLevel) !== null && _a !== void 0 ? _a : "2" }))));
|
|
64
63
|
})),
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
!hideButton && !hideLessButton && (
|
|
64
|
+
React__default.createElement(VerticalSpace, { size: "40" }),
|
|
65
|
+
React__default.createElement("div", { style: { display: "flex" } },
|
|
66
|
+
!hideButton && !hideLessButton && (React__default.createElement(ButtonV2, { label: displayList.length < productList.length
|
|
68
67
|
? "Show more"
|
|
69
68
|
: "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
|
|
70
|
-
displayList.length > cardsToDisplay && (
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
69
|
+
displayList.length > cardsToDisplay && (React__default.createElement(React__default.Fragment, null,
|
|
70
|
+
React__default.createElement("div", { id: "skip-link", className: classNames(styles["productNavigation-skipLink"]), tabIndex: -1 },
|
|
71
|
+
React__default.createElement(ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true })))),
|
|
72
|
+
React__default.createElement(VisuallyHidden, null,
|
|
73
|
+
React__default.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
|
|
74
|
+
React__default.createElement("p", null,
|
|
76
75
|
"Total products listed ",
|
|
77
76
|
displayList.length,
|
|
78
77
|
". Total products hidden",
|
|
@@ -1,13 +1,13 @@
|
|
|
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 index_es = require('../_shared/cjs/index.es-
|
|
6
|
+
var index_es = require('../_shared/cjs/index.es-B0J3cvrY.cjs');
|
|
7
7
|
var Carousel = require('@arc-ui/components/Carousel');
|
|
8
8
|
var Heading = require('@arc-ui/components/Heading');
|
|
9
9
|
var useMediaQuery = require('@arc-ui/components/use-media-query');
|
|
10
|
-
var SectionHeading = require('../_shared/cjs/SectionHeading-
|
|
10
|
+
var SectionHeading = require('../_shared/cjs/SectionHeading-Dj-dJfv3.cjs');
|
|
11
11
|
var MediaCard = require('@arc-ui/components/MediaCard');
|
|
12
12
|
var ImpactCard = require('@arc-ui/components/ImpactCard');
|
|
13
13
|
var InformationCard = require('@arc-ui/components/InformationCard');
|
|
@@ -15,7 +15,6 @@ var TypographyCard = require('@arc-ui/components/TypographyCard');
|
|
|
15
15
|
var ButtonV2 = require('@arc-ui/components/ButtonV2');
|
|
16
16
|
var VerticalSpace = require('@arc-ui/components/VerticalSpace');
|
|
17
17
|
var BtIconArrowRightFill = require('../_shared/cjs/BtIconArrowRightFill-BVCZv7Lm.cjs');
|
|
18
|
-
require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
|
|
19
18
|
require('@arc-ui/components/Text');
|
|
20
19
|
require('@arc-ui/components/Image');
|
|
21
20
|
|
|
@@ -25,7 +24,7 @@ var styles = {"PromoListing":"PromoListing-module_PromoListing__6ensv","carousel
|
|
|
25
24
|
* Use `PromoListing` to give supporting information about a page or proposition in the form of the card components (`ImpactCard`, `InformationCard`, `MediaCard` and `TypographyCard`).
|
|
26
25
|
*/
|
|
27
26
|
var PromoListing = function (_a) {
|
|
28
|
-
var heading = _a.heading, content = _a.content, id = _a.id, _b = _a.isCarousel, isCarousel = _b === void 0 ? false : _b, cards = _a.cards, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, _c = _a.columns, columns = _c === void 0 ? "2" : _c, _d = _a.button, button = _d === void 0 ? { buttonStyle: "secondary" } : _d, overlineHeadingLevel = _a.overlineHeadingLevel, overlineLabel = _a.overlineLabel;
|
|
27
|
+
var heading = _a.heading, content = _a.content, id = _a.id, _b = _a.isCarousel, isCarousel = _b === void 0 ? false : _b, cards = _a.cards, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, _c = _a.columns, columns = _c === void 0 ? "2" : _c, _d = _a.button, button = _d === void 0 ? { buttonStyle: "secondary" } : _d, overlineHeadingLevel = _a.overlineHeadingLevel, overlineLabel = _a.overlineLabel, props = filterAttrs.__rest(_a, ["heading", "content", "id", "isCarousel", "cards", "headingLevel", "isHeadingWordWrap", "columns", "button", "overlineHeadingLevel", "overlineLabel"]);
|
|
29
28
|
var componentId = React.useId();
|
|
30
29
|
var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsL, ")"));
|
|
31
30
|
var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsM, ")"));
|
|
@@ -55,15 +54,15 @@ var PromoListing = function (_a) {
|
|
|
55
54
|
};
|
|
56
55
|
var getCard = function (card) {
|
|
57
56
|
var CardComponent = CARD_COMPONENTS[card.type];
|
|
58
|
-
return React.createElement(CardComponent,
|
|
57
|
+
return React.createElement(CardComponent, filterAttrs.__assign({}, card, commonProps));
|
|
59
58
|
};
|
|
60
|
-
return (React.createElement("div", { className: styles.PromoListing },
|
|
59
|
+
return (React.createElement("div", filterAttrs.__assign({ className: styles.PromoListing }, filterAttrs.filterAttrs(props)),
|
|
61
60
|
overlineLabel && (React.createElement(React.Fragment, null,
|
|
62
61
|
React.createElement(Heading.Heading, { level: overlineHeadingLevel, fontStyle: "overline" }, overlineLabel),
|
|
63
62
|
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }))),
|
|
64
63
|
React.createElement(SectionHeading.SectionHeading, { isPadded: true, id: id, "data-testid": "PromoListing-header", heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content }),
|
|
65
64
|
button.label && (React.createElement(React.Fragment, null,
|
|
66
|
-
React.createElement(ButtonV2.ButtonV2,
|
|
65
|
+
React.createElement(ButtonV2.ButtonV2, filterAttrs.__assign({}, button, { icon: button.buttonStyle == "compact" ? BtIconArrowRightFill.BtIconArrowRightFill : undefined, size: "m" })),
|
|
67
66
|
React.createElement(VerticalSpace.VerticalSpace, { size: "40" }))),
|
|
68
67
|
isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles.promolistingCarouselWrapper },
|
|
69
68
|
React.createElement(Carousel.Carousel, { overflow: "visible", itemsPerSlide: 1, behavior: "adaptive", withGutter: false }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, i) { return (React.createElement("div", { key: "promolist-carousel-card-".concat(componentId, "-").concat(i), className: (styles.cardWrapperCarousel) }, getCard(card))); })))) : (React.createElement("ul", { className: index.classNames(styles.cardGrid, styles["columns-".concat(columns)]) }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, index) { return (React.createElement("li", { key: "promolist-card--".concat(componentId, "-").concat(index) },
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { _ as __assign } from '../_shared/esm/
|
|
2
|
-
import
|
|
1
|
+
import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
|
|
2
|
+
import React__default, { useId } from 'react';
|
|
3
3
|
import { c as classNames } from '../_shared/esm/index-BfTCfPZ1.mjs';
|
|
4
|
-
import { a as ArcSizeBreakpointsL, b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-
|
|
4
|
+
import { a as ArcSizeBreakpointsL, b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-DraZ-qKh.mjs';
|
|
5
5
|
import { Carousel } from '@arc-ui/components/Carousel';
|
|
6
6
|
import { Heading } from '@arc-ui/components/Heading';
|
|
7
7
|
import { useMediaQuery } from '@arc-ui/components/use-media-query';
|
|
8
|
-
import { S as SectionHeading } from '../_shared/esm/SectionHeading-
|
|
8
|
+
import { S as SectionHeading } from '../_shared/esm/SectionHeading-BskdQ2Tt.mjs';
|
|
9
9
|
import { MediaCard } from '@arc-ui/components/MediaCard';
|
|
10
10
|
import { ImpactCard } from '@arc-ui/components/ImpactCard';
|
|
11
11
|
import { InformationCard } from '@arc-ui/components/InformationCard';
|
|
@@ -13,7 +13,6 @@ import { TypographyCard } from '@arc-ui/components/TypographyCard';
|
|
|
13
13
|
import { ButtonV2 } from '@arc-ui/components/ButtonV2';
|
|
14
14
|
import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
|
|
15
15
|
import { B as BtIconArrowRightFill } from '../_shared/esm/BtIconArrowRightFill-D0zKgk3B.mjs';
|
|
16
|
-
import '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
|
|
17
16
|
import '@arc-ui/components/Text';
|
|
18
17
|
import '@arc-ui/components/Image';
|
|
19
18
|
|
|
@@ -23,7 +22,7 @@ var styles = {"PromoListing":"PromoListing-module_PromoListing__6ensv","carousel
|
|
|
23
22
|
* Use `PromoListing` to give supporting information about a page or proposition in the form of the card components (`ImpactCard`, `InformationCard`, `MediaCard` and `TypographyCard`).
|
|
24
23
|
*/
|
|
25
24
|
var PromoListing = function (_a) {
|
|
26
|
-
var heading = _a.heading, content = _a.content, id = _a.id, _b = _a.isCarousel, isCarousel = _b === void 0 ? false : _b, cards = _a.cards, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, _c = _a.columns, columns = _c === void 0 ? "2" : _c, _d = _a.button, button = _d === void 0 ? { buttonStyle: "secondary" } : _d, overlineHeadingLevel = _a.overlineHeadingLevel, overlineLabel = _a.overlineLabel;
|
|
25
|
+
var heading = _a.heading, content = _a.content, id = _a.id, _b = _a.isCarousel, isCarousel = _b === void 0 ? false : _b, cards = _a.cards, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, _c = _a.columns, columns = _c === void 0 ? "2" : _c, _d = _a.button, button = _d === void 0 ? { buttonStyle: "secondary" } : _d, overlineHeadingLevel = _a.overlineHeadingLevel, overlineLabel = _a.overlineLabel, props = __rest(_a, ["heading", "content", "id", "isCarousel", "cards", "headingLevel", "isHeadingWordWrap", "columns", "button", "overlineHeadingLevel", "overlineLabel"]);
|
|
27
26
|
var componentId = useId();
|
|
28
27
|
var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
|
|
29
28
|
var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
|
|
@@ -53,19 +52,19 @@ var PromoListing = function (_a) {
|
|
|
53
52
|
};
|
|
54
53
|
var getCard = function (card) {
|
|
55
54
|
var CardComponent = CARD_COMPONENTS[card.type];
|
|
56
|
-
return
|
|
55
|
+
return React__default.createElement(CardComponent, __assign({}, card, commonProps));
|
|
57
56
|
};
|
|
58
|
-
return (
|
|
59
|
-
overlineLabel && (
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
button.label && (
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
isCarousel && !isMinWidthArcBreakpointL ? (
|
|
67
|
-
|
|
68
|
-
|
|
57
|
+
return (React__default.createElement("div", __assign({ className: styles.PromoListing }, filterAttrs(props)),
|
|
58
|
+
overlineLabel && (React__default.createElement(React__default.Fragment, null,
|
|
59
|
+
React__default.createElement(Heading, { level: overlineHeadingLevel, fontStyle: "overline" }, overlineLabel),
|
|
60
|
+
React__default.createElement(VerticalSpace, { size: "12" }))),
|
|
61
|
+
React__default.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "PromoListing-header", heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content }),
|
|
62
|
+
button.label && (React__default.createElement(React__default.Fragment, null,
|
|
63
|
+
React__default.createElement(ButtonV2, __assign({}, button, { icon: button.buttonStyle == "compact" ? BtIconArrowRightFill : undefined, size: "m" })),
|
|
64
|
+
React__default.createElement(VerticalSpace, { size: "40" }))),
|
|
65
|
+
isCarousel && !isMinWidthArcBreakpointL ? (React__default.createElement("div", { className: styles.promolistingCarouselWrapper },
|
|
66
|
+
React__default.createElement(Carousel, { overflow: "visible", itemsPerSlide: 1, behavior: "adaptive", withGutter: false }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, i) { return (React__default.createElement("div", { key: "promolist-carousel-card-".concat(componentId, "-").concat(i), className: (styles.cardWrapperCarousel) }, getCard(card))); })))) : (React__default.createElement("ul", { className: classNames(styles.cardGrid, styles["columns-".concat(columns)]) }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, index) { return (React__default.createElement("li", { key: "promolist-card--".concat(componentId, "-").concat(index) },
|
|
67
|
+
React__default.createElement("div", { "data-testid": "promoList-card".concat(index), className: styles.cardWrapper }, getCard(card)))); })))));
|
|
69
68
|
};
|
|
70
69
|
|
|
71
70
|
export { PromoListing };
|
|
@@ -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
|
-
var SectionHeading = require('../_shared/cjs/SectionHeading-
|
|
6
|
-
var
|
|
7
|
-
var ThumbnailSignpost = require('../_shared/cjs/ThumbnailSignpost-GkOiwt-Z.cjs');
|
|
5
|
+
var SectionHeading = require('../_shared/cjs/SectionHeading-Dj-dJfv3.cjs');
|
|
6
|
+
var ThumbnailSignpost = require('../_shared/cjs/ThumbnailSignpost-SBnrGooA.cjs');
|
|
8
7
|
require('../_shared/cjs/index-Bp6Dd2i1.cjs');
|
|
9
8
|
require('@arc-ui/components/Text');
|
|
10
9
|
require('@arc-ui/components/VerticalSpace');
|
|
@@ -18,11 +17,11 @@ var styles = {"PromoListingThumbnailSignpost":"PromoListingThumbnailSignpost-mod
|
|
|
18
17
|
* Use `PromoListingThumbnailSignpost` to give supporting information about a page or proposition in the form of the ThumbnailSignposts components.
|
|
19
18
|
*/
|
|
20
19
|
var PromoListingThumbnailSignpost = function (_a) {
|
|
21
|
-
var _b = _a.isPadded, isPadded = _b === void 0 ? true : _b, heading = _a.heading, content = _a.content, headingLevel = _a.headingLevel, thumbnailList = _a.thumbnailList, props =
|
|
22
|
-
return (React.createElement("div",
|
|
23
|
-
React.createElement(SectionHeading.SectionHeading, { isPadded: isPadded, "data-testid": "PromoListingThumbnailSignpost-header", heading: heading, headingLevel: headingLevel, content: content }),
|
|
20
|
+
var _b = _a.isPadded, isPadded = _b === void 0 ? true : _b, heading = _a.heading, content = _a.content, headingLevel = _a.headingLevel, thumbnailList = _a.thumbnailList, isHeadingWordWrap = _a.isHeadingWordWrap, props = filterAttrs.__rest(_a, ["isPadded", "heading", "content", "headingLevel", "thumbnailList", "isHeadingWordWrap"]);
|
|
21
|
+
return (React.createElement("div", filterAttrs.__assign({ className: styles.PromoListingThumbnailSignpost }, filterAttrs.filterAttrs(props)),
|
|
22
|
+
React.createElement(SectionHeading.SectionHeading, { isPadded: isPadded, "data-testid": "PromoListingThumbnailSignpost-header", heading: heading, headingLevel: headingLevel, content: content, isHeadingWordWrap: isHeadingWordWrap }),
|
|
24
23
|
React.createElement("ul", { className: styles.list }, thumbnailList.map(function (thumbnail, index) { return (React.createElement("li", { key: index },
|
|
25
|
-
React.createElement(ThumbnailSignpost.ThumbnailSignpost,
|
|
24
|
+
React.createElement(ThumbnailSignpost.ThumbnailSignpost, filterAttrs.__assign({}, thumbnail)))); }))));
|
|
26
25
|
};
|
|
27
26
|
|
|
28
27
|
exports.PromoListingThumbnailSignpost = PromoListingThumbnailSignpost;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
import { S as SectionHeading } from '../_shared/esm/SectionHeading-
|
|
4
|
-
import {
|
|
5
|
-
import { T as ThumbnailSignpost } from '../_shared/esm/ThumbnailSignpost-BeRiXbUp.mjs';
|
|
1
|
+
import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
import { S as SectionHeading } from '../_shared/esm/SectionHeading-BskdQ2Tt.mjs';
|
|
4
|
+
import { T as ThumbnailSignpost } from '../_shared/esm/ThumbnailSignpost-CBSdQiHw.mjs';
|
|
6
5
|
import '../_shared/esm/index-BfTCfPZ1.mjs';
|
|
7
6
|
import '@arc-ui/components/Text';
|
|
8
7
|
import '@arc-ui/components/VerticalSpace';
|
|
@@ -16,11 +15,11 @@ var styles = {"PromoListingThumbnailSignpost":"PromoListingThumbnailSignpost-mod
|
|
|
16
15
|
* Use `PromoListingThumbnailSignpost` to give supporting information about a page or proposition in the form of the ThumbnailSignposts components.
|
|
17
16
|
*/
|
|
18
17
|
var PromoListingThumbnailSignpost = function (_a) {
|
|
19
|
-
var _b = _a.isPadded, isPadded = _b === void 0 ? true : _b, heading = _a.heading, content = _a.content, headingLevel = _a.headingLevel, thumbnailList = _a.thumbnailList, props = __rest(_a, ["isPadded", "heading", "content", "headingLevel", "thumbnailList"]);
|
|
20
|
-
return (
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
18
|
+
var _b = _a.isPadded, isPadded = _b === void 0 ? true : _b, heading = _a.heading, content = _a.content, headingLevel = _a.headingLevel, thumbnailList = _a.thumbnailList, isHeadingWordWrap = _a.isHeadingWordWrap, props = __rest(_a, ["isPadded", "heading", "content", "headingLevel", "thumbnailList", "isHeadingWordWrap"]);
|
|
19
|
+
return (React__default.createElement("div", __assign({ className: styles.PromoListingThumbnailSignpost }, filterAttrs(props)),
|
|
20
|
+
React__default.createElement(SectionHeading, { isPadded: isPadded, "data-testid": "PromoListingThumbnailSignpost-header", heading: heading, headingLevel: headingLevel, content: content, isHeadingWordWrap: isHeadingWordWrap }),
|
|
21
|
+
React__default.createElement("ul", { className: styles.list }, thumbnailList.map(function (thumbnail, index) { return (React__default.createElement("li", { key: index },
|
|
22
|
+
React__default.createElement(ThumbnailSignpost, __assign({}, thumbnail)))); }))));
|
|
24
23
|
};
|
|
25
24
|
|
|
26
25
|
export { PromoListingThumbnailSignpost };
|
package/lib/Quote/Quote.cjs
CHANGED
|
@@ -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 Author = require('../_shared/cjs/Author-D4dKNQem.cjs');
|
|
6
|
+
var Author = require('../_shared/cjs/Author-aL8YXi7C.cjs');
|
|
8
7
|
require('@arc-ui/components/Grid');
|
|
9
8
|
require('@arc-ui/components/Avatar');
|
|
10
9
|
require('@arc-ui/components/Heading');
|
|
@@ -15,13 +14,13 @@ var styles = {"blockQuote":"Quote-module_blockQuote__STj-z","quoteContent":"Quot
|
|
|
15
14
|
/**
|
|
16
15
|
* 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
16
|
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 =
|
|
19
|
-
return (React.createElement("div",
|
|
17
|
+
var author = _a.author, _b = _a.styling, styling = _b === void 0 ? "Default" : _b, content = _a.content, citeUrl = _a.citeUrl, props = filterAttrs.__rest(_a, ["author", "styling", "content", "citeUrl"]);
|
|
18
|
+
return (React.createElement("div", filterAttrs.__assign({ className: "community-component--quote", "data-testid": "quote-test" }, filterAttrs.filterAttrs(props)),
|
|
20
19
|
React.createElement("blockquote", { "data-testid": "style-test", className: index.classNames(styles.blockQuote, styles["quote".concat(styling)]), cite: citeUrl },
|
|
21
20
|
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles.quoteIcon, "aria-hidden": "true" },
|
|
22
21
|
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
22
|
React.createElement("p", { className: styles.quoteContent }, content)),
|
|
24
|
-
author &&
|
|
23
|
+
author && React.createElement(Author.Author, filterAttrs.__assign({}, author))));
|
|
25
24
|
};
|
|
26
25
|
|
|
27
26
|
exports.Quote = Quote;
|
package/lib/Quote/Quote.mjs
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
|
|
2
|
+
import React__default from 'react';
|
|
3
3
|
import { c as classNames } from '../_shared/esm/index-BfTCfPZ1.mjs';
|
|
4
|
-
import {
|
|
5
|
-
import { A as Author } from '../_shared/esm/Author-HnYsFTPT.mjs';
|
|
4
|
+
import { A as Author } from '../_shared/esm/Author-CJQFrQM9.mjs';
|
|
6
5
|
import '@arc-ui/components/Grid';
|
|
7
6
|
import '@arc-ui/components/Avatar';
|
|
8
7
|
import '@arc-ui/components/Heading';
|
|
@@ -14,12 +13,12 @@ var styles = {"blockQuote":"Quote-module_blockQuote__STj-z","quoteContent":"Quot
|
|
|
14
13
|
* 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
14
|
var Quote = function (_a) {
|
|
16
15
|
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 (
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
author &&
|
|
16
|
+
return (React__default.createElement("div", __assign({ className: "community-component--quote", "data-testid": "quote-test" }, filterAttrs(props)),
|
|
17
|
+
React__default.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles.blockQuote, styles["quote".concat(styling)]), cite: citeUrl },
|
|
18
|
+
React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles.quoteIcon, "aria-hidden": "true" },
|
|
19
|
+
React__default.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" })),
|
|
20
|
+
React__default.createElement("p", { className: styles.quoteContent }, content)),
|
|
21
|
+
author && React__default.createElement(Author, __assign({}, author))));
|
|
23
22
|
};
|
|
24
23
|
|
|
25
24
|
export { Quote };
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var SectionHeading = require('../_shared/cjs/SectionHeading-
|
|
4
|
-
require('../_shared/cjs/
|
|
3
|
+
var SectionHeading = require('../_shared/cjs/SectionHeading-Dj-dJfv3.cjs');
|
|
4
|
+
require('../_shared/cjs/filter-attrs-C26zOt4_.cjs');
|
|
5
5
|
require('react');
|
|
6
6
|
require('../_shared/cjs/index-Bp6Dd2i1.cjs');
|
|
7
|
-
require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
|
|
8
7
|
require('@arc-ui/components/Text');
|
|
9
8
|
require('@arc-ui/components/VerticalSpace');
|
|
10
9
|
require('@arc-ui/components/Image');
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
export { S as SectionHeading } from '../_shared/esm/SectionHeading-
|
|
2
|
-
import '../_shared/esm/
|
|
1
|
+
export { S as SectionHeading } from '../_shared/esm/SectionHeading-BskdQ2Tt.mjs';
|
|
2
|
+
import '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
|
|
3
3
|
import 'react';
|
|
4
4
|
import '../_shared/esm/index-BfTCfPZ1.mjs';
|
|
5
|
-
import '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
|
|
6
5
|
import '@arc-ui/components/Text';
|
|
7
6
|
import '@arc-ui/components/VerticalSpace';
|
|
8
7
|
import '@arc-ui/components/Image';
|
|
@@ -1,6 +1,6 @@
|
|
|
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 Columns = require('@arc-ui/components/Columns');
|
|
6
6
|
var Rule = require('@arc-ui/components/Rule');
|
|
@@ -8,12 +8,12 @@ var Text = require('@arc-ui/components/Text');
|
|
|
8
8
|
var Align = require('@arc-ui/components/Align');
|
|
9
9
|
var Heading = require('@arc-ui/components/Heading');
|
|
10
10
|
var VerticalSpace = require('@arc-ui/components/VerticalSpace');
|
|
11
|
-
var
|
|
11
|
+
var Hidden = require('@arc-ui/components/Hidden');
|
|
12
|
+
var SectionHeading = require('../_shared/cjs/SectionHeading-Dj-dJfv3.cjs');
|
|
12
13
|
require('../_shared/cjs/index-Bp6Dd2i1.cjs');
|
|
13
|
-
require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
|
|
14
14
|
require('@arc-ui/components/Image');
|
|
15
15
|
|
|
16
|
-
var styles = {"list":"Statistics-module_list__BI-eQ","mutedText":"Statistics-module_mutedText__MR1JM"
|
|
16
|
+
var styles = {"list":"Statistics-module_list__BI-eQ","mutedText":"Statistics-module_mutedText__MR1JM"};
|
|
17
17
|
|
|
18
18
|
var getLinkProps = function (link) {
|
|
19
19
|
return link.openInNewTab
|
|
@@ -25,12 +25,11 @@ var getLinkProps = function (link) {
|
|
|
25
25
|
};
|
|
26
26
|
|
|
27
27
|
var Statistics = function (_a) {
|
|
28
|
-
var id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, headingLevel = _a.headingLevel, heading = _a.heading, content = _a.content, statistics = _a.statistics;
|
|
28
|
+
var id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, headingLevel = _a.headingLevel, heading = _a.heading, content = _a.content, statistics = _a.statistics, props = filterAttrs.__rest(_a, ["id", "isHeadingWordWrap", "headingLevel", "heading", "content", "statistics"]);
|
|
29
29
|
var componentId = React.useId();
|
|
30
|
-
return (React.createElement(Columns.Columns,
|
|
30
|
+
return (React.createElement(Columns.Columns, filterAttrs.__assign({ isGutterless: true }, filterAttrs.filterAttrs(props)),
|
|
31
31
|
React.createElement(Columns.ColumnsCol, { spanM: 9 },
|
|
32
|
-
React.createElement(SectionHeading.SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content }),
|
|
33
|
-
React.createElement(VerticalSpace.VerticalSpace, { size: "16" })),
|
|
32
|
+
React.createElement(SectionHeading.SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
|
|
34
33
|
React.createElement(Columns.ColumnsCol, { spanL: 9 },
|
|
35
34
|
React.createElement("ul", { className: styles.list }, statistics.map(function (_a, i) {
|
|
36
35
|
var stat = _a.stat, copy = _a.copy, link = _a.link, source = _a.source, sourceUrl = _a.sourceUrl;
|
|
@@ -43,18 +42,21 @@ var Statistics = function (_a) {
|
|
|
43
42
|
React.createElement(Columns.ColumnsCol, { spanS: 6, spanM: 8 },
|
|
44
43
|
React.createElement(Align.Align, { vertical: "center" },
|
|
45
44
|
React.createElement("div", { className: styles.statWrapper },
|
|
46
|
-
React.createElement(Heading.Heading, { color: "brand", size: "xxl" }, stat)
|
|
45
|
+
React.createElement(Heading.Heading, { color: "brand", size: "xxl" }, stat),
|
|
46
|
+
React.createElement(Hidden.Hidden, { s: true, m: true, l: true, xl: true, xxl: true },
|
|
47
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }))))),
|
|
47
48
|
React.createElement(Columns.ColumnsCol, { spanS: 6, spanM: 4 },
|
|
48
|
-
React.createElement(
|
|
49
|
-
|
|
50
|
-
React.createElement(
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
React.createElement(
|
|
54
|
-
|
|
55
|
-
React.createElement(
|
|
56
|
-
|
|
57
|
-
React.createElement(
|
|
49
|
+
React.createElement(Align.Align, { vertical: "center" },
|
|
50
|
+
React.createElement(Text.Text, null, copy),
|
|
51
|
+
link && (React.createElement(React.Fragment, null,
|
|
52
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
|
|
53
|
+
React.createElement("a", filterAttrs.__assign({ href: link.href, "aria-label": link.ariaLabel }, getLinkProps(link)), link.text))),
|
|
54
|
+
source && (React.createElement(React.Fragment, null,
|
|
55
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
|
|
56
|
+
React.createElement(Text.Text, { size: "xs" },
|
|
57
|
+
React.createElement("span", { className: styles.mutedText }, source)))),
|
|
58
|
+
sourceUrl && (React.createElement(Text.Text, { size: "xs" },
|
|
59
|
+
React.createElement("a", { className: styles.mutedText, href: sourceUrl }, sourceUrl))))))));
|
|
58
60
|
})))));
|
|
59
61
|
};
|
|
60
62
|
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { _ as __assign } from '../_shared/esm/
|
|
2
|
-
import
|
|
1
|
+
import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
|
|
2
|
+
import React__default, { useId } from 'react';
|
|
3
3
|
import { Columns, ColumnsCol } from '@arc-ui/components/Columns';
|
|
4
4
|
import { Rule } from '@arc-ui/components/Rule';
|
|
5
5
|
import { Text } from '@arc-ui/components/Text';
|
|
6
6
|
import { Align } from '@arc-ui/components/Align';
|
|
7
7
|
import { Heading } from '@arc-ui/components/Heading';
|
|
8
8
|
import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
|
|
9
|
-
import {
|
|
9
|
+
import { Hidden } from '@arc-ui/components/Hidden';
|
|
10
|
+
import { S as SectionHeading } from '../_shared/esm/SectionHeading-BskdQ2Tt.mjs';
|
|
10
11
|
import '../_shared/esm/index-BfTCfPZ1.mjs';
|
|
11
|
-
import '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
|
|
12
12
|
import '@arc-ui/components/Image';
|
|
13
13
|
|
|
14
|
-
var styles = {"list":"Statistics-module_list__BI-eQ","mutedText":"Statistics-module_mutedText__MR1JM"
|
|
14
|
+
var styles = {"list":"Statistics-module_list__BI-eQ","mutedText":"Statistics-module_mutedText__MR1JM"};
|
|
15
15
|
|
|
16
16
|
var getLinkProps = function (link) {
|
|
17
17
|
return link.openInNewTab
|
|
@@ -23,36 +23,38 @@ var getLinkProps = function (link) {
|
|
|
23
23
|
};
|
|
24
24
|
|
|
25
25
|
var Statistics = function (_a) {
|
|
26
|
-
var id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, headingLevel = _a.headingLevel, heading = _a.heading, content = _a.content, statistics = _a.statistics;
|
|
26
|
+
var id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, headingLevel = _a.headingLevel, heading = _a.heading, content = _a.content, statistics = _a.statistics, props = __rest(_a, ["id", "isHeadingWordWrap", "headingLevel", "heading", "content", "statistics"]);
|
|
27
27
|
var componentId = useId();
|
|
28
|
-
return (
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
React.createElement("ul", { className: styles.list }, statistics.map(function (_a, i) {
|
|
28
|
+
return (React__default.createElement(Columns, __assign({ isGutterless: true }, filterAttrs(props)),
|
|
29
|
+
React__default.createElement(ColumnsCol, { spanM: 9 },
|
|
30
|
+
React__default.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
|
|
31
|
+
React__default.createElement(ColumnsCol, { spanL: 9 },
|
|
32
|
+
React__default.createElement("ul", { className: styles.list }, statistics.map(function (_a, i) {
|
|
34
33
|
var stat = _a.stat, copy = _a.copy, link = _a.link, source = _a.source, sourceUrl = _a.sourceUrl;
|
|
35
|
-
return (
|
|
36
|
-
i !== 0 && (
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
34
|
+
return (React__default.createElement("li", { key: "statistic-".concat(componentId, "-").concat(i) },
|
|
35
|
+
i !== 0 && (React__default.createElement(React__default.Fragment, null,
|
|
36
|
+
React__default.createElement(VerticalSpace, { size: "24", sizeS: "32", sizeXL: "40" }),
|
|
37
|
+
React__default.createElement(Rule, null),
|
|
38
|
+
React__default.createElement(VerticalSpace, { size: "24", sizeS: "32", sizeXL: "40" }))),
|
|
39
|
+
React__default.createElement(Columns, null,
|
|
40
|
+
React__default.createElement(ColumnsCol, { spanS: 6, spanM: 8 },
|
|
41
|
+
React__default.createElement(Align, { vertical: "center" },
|
|
42
|
+
React__default.createElement("div", { className: styles.statWrapper },
|
|
43
|
+
React__default.createElement(Heading, { color: "brand", size: "xxl" }, stat),
|
|
44
|
+
React__default.createElement(Hidden, { s: true, m: true, l: true, xl: true, xxl: true },
|
|
45
|
+
React__default.createElement(VerticalSpace, { size: "12" }))))),
|
|
46
|
+
React__default.createElement(ColumnsCol, { spanS: 6, spanM: 4 },
|
|
47
|
+
React__default.createElement(Align, { vertical: "center" },
|
|
48
|
+
React__default.createElement(Text, null, copy),
|
|
49
|
+
link && (React__default.createElement(React__default.Fragment, null,
|
|
50
|
+
React__default.createElement(VerticalSpace, { size: "12" }),
|
|
51
|
+
React__default.createElement("a", __assign({ href: link.href, "aria-label": link.ariaLabel }, getLinkProps(link)), link.text))),
|
|
52
|
+
source && (React__default.createElement(React__default.Fragment, null,
|
|
53
|
+
React__default.createElement(VerticalSpace, { size: "12" }),
|
|
54
|
+
React__default.createElement(Text, { size: "xs" },
|
|
55
|
+
React__default.createElement("span", { className: styles.mutedText }, source)))),
|
|
56
|
+
sourceUrl && (React__default.createElement(Text, { size: "xs" },
|
|
57
|
+
React__default.createElement("a", { className: styles.mutedText, href: sourceUrl }, sourceUrl))))))));
|
|
56
58
|
})))));
|
|
57
59
|
};
|
|
58
60
|
|
|
@@ -1 +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)}
|
|
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)}
|
package/lib/Summary/Summary.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
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
|
-
var index_es = require('../_shared/cjs/index.es-
|
|
5
|
+
var index_es = require('../_shared/cjs/index.es-B0J3cvrY.cjs');
|
|
6
6
|
var Heading = require('@arc-ui/components/Heading');
|
|
7
7
|
var Text = require('@arc-ui/components/Text');
|
|
8
8
|
var Box = require('@arc-ui/components/Box');
|
|
@@ -13,9 +13,9 @@ var useMediaQuery = require('@arc-ui/components/use-media-query');
|
|
|
13
13
|
var styles = {"ruleContainer":"Summary-module_ruleContainer__ydWlG","row":"Summary-module_row__SKV--"};
|
|
14
14
|
|
|
15
15
|
var Summary = function (_a) {
|
|
16
|
-
var content = _a.content, _b = _a.noBorder, noBorder = _b === void 0 ? false : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "3" : _c;
|
|
16
|
+
var content = _a.content, _b = _a.noBorder, noBorder = _b === void 0 ? false : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "3" : _c, props = filterAttrs.__rest(_a, ["content", "noBorder", "headingLevel"]);
|
|
17
17
|
var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsM, ")"));
|
|
18
|
-
return (React.createElement(Box.Box,
|
|
18
|
+
return (React.createElement(Box.Box, filterAttrs.__assign({ isBorderRadius: true }, (!noBorder ? { borderWidth: "thin" } : { elevationLevel: "1" }), { padding: "24" }, filterAttrs.filterAttrs(props)),
|
|
19
19
|
React.createElement("div", { className: styles.row }, content.map(function (_a, i) {
|
|
20
20
|
var heading = _a.heading, text = _a.text;
|
|
21
21
|
return (React.createElement(React.Fragment, null,
|
package/lib/Summary/Summary.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { _ as __assign } from '../_shared/esm/
|
|
2
|
-
import
|
|
3
|
-
import { b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-
|
|
1
|
+
import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
import { b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-DraZ-qKh.mjs';
|
|
4
4
|
import { Heading } from '@arc-ui/components/Heading';
|
|
5
5
|
import { Text } from '@arc-ui/components/Text';
|
|
6
6
|
import { Box } from '@arc-ui/components/Box';
|
|
@@ -11,18 +11,18 @@ import { useMediaQuery } from '@arc-ui/components/use-media-query';
|
|
|
11
11
|
var styles = {"ruleContainer":"Summary-module_ruleContainer__ydWlG","row":"Summary-module_row__SKV--"};
|
|
12
12
|
|
|
13
13
|
var Summary = function (_a) {
|
|
14
|
-
var content = _a.content, _b = _a.noBorder, noBorder = _b === void 0 ? false : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "3" : _c;
|
|
14
|
+
var content = _a.content, _b = _a.noBorder, noBorder = _b === void 0 ? false : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "3" : _c, props = __rest(_a, ["content", "noBorder", "headingLevel"]);
|
|
15
15
|
var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
|
|
16
|
-
return (
|
|
17
|
-
|
|
16
|
+
return (React__default.createElement(Box, __assign({ isBorderRadius: true }, (!noBorder ? { borderWidth: "thin" } : { elevationLevel: "1" }), { padding: "24" }, filterAttrs(props)),
|
|
17
|
+
React__default.createElement("div", { className: styles.row }, content.map(function (_a, i) {
|
|
18
18
|
var heading = _a.heading, text = _a.text;
|
|
19
|
-
return (
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
i !== content.length - 1 && (
|
|
25
|
-
|
|
19
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
20
|
+
React__default.createElement("div", { className: styles.col },
|
|
21
|
+
React__default.createElement(Heading, { size: "s", level: headingLevel }, heading),
|
|
22
|
+
React__default.createElement(VerticalSpace, { size: "8" }),
|
|
23
|
+
React__default.createElement(Text, { size: "s" }, text)),
|
|
24
|
+
i !== content.length - 1 && (React__default.createElement("div", { className: styles.ruleContainer },
|
|
25
|
+
React__default.createElement(Rule, { orientation: isMinWidthArcBreakpointM ? "vertical" : "horizontal" })))));
|
|
26
26
|
}))));
|
|
27
27
|
};
|
|
28
28
|
|