@arc-ui/community-components 3.0.1 → 3.2.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 +19 -22
- package/CHANGELOG.md +30 -0
- package/lib/Accordion/Accordion.cjs +2 -2
- package/lib/Accordion/Accordion.mjs +2 -2
- package/lib/ActionTile/ActionTile.cjs +35 -0
- package/lib/ActionTile/ActionTile.mjs +33 -0
- package/lib/ActionTile/styles.css +1 -0
- package/lib/ArticleSidebar/ArticleSidebar.cjs +68 -58
- package/lib/ArticleSidebar/ArticleSidebar.mjs +68 -58
- package/lib/ArticleSidebar/styles.css +1 -1
- package/lib/Author/Author.cjs +2 -2
- package/lib/Author/Author.mjs +2 -2
- package/lib/BannerWithTabs/BannerWithTabs.cjs +5 -5
- package/lib/BannerWithTabs/BannerWithTabs.mjs +5 -5
- package/lib/CopyLead/CopyLead.cjs +12 -12
- package/lib/CopyLead/CopyLead.mjs +12 -12
- package/lib/DownloadList/DownloadList.cjs +5 -5
- package/lib/DownloadList/DownloadList.mjs +5 -5
- package/lib/FAQs/FAQs.cjs +16 -12
- package/lib/FAQs/FAQs.mjs +16 -12
- package/lib/FeaturePost/FeaturePost.cjs +18 -11
- package/lib/FeaturePost/FeaturePost.mjs +18 -11
- package/lib/HeroLink/HeroLink.cjs +35 -0
- package/lib/HeroLink/HeroLink.mjs +33 -0
- package/lib/HeroLink/styles.css +1 -0
- package/lib/Highlights/Highlights.cjs +9 -16
- package/lib/Highlights/Highlights.mjs +7 -14
- package/lib/LinkTile/LinkTile.cjs +21 -0
- package/lib/LinkTile/LinkTile.mjs +19 -0
- package/lib/LinkTile/styles.css +1 -0
- package/lib/ProductNavigation/ProductNavigation.cjs +10 -13
- package/lib/ProductNavigation/ProductNavigation.mjs +10 -13
- package/lib/PromoListing/PromoListing.cjs +17 -9
- package/lib/PromoListing/PromoListing.mjs +17 -9
- package/lib/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.cjs +28 -0
- package/lib/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.mjs +26 -0
- package/lib/PromoListingThumbnailSignpost/styles.css +1 -0
- package/lib/Quote/Quote.cjs +3 -3
- package/lib/Quote/Quote.mjs +3 -3
- package/lib/SectionHeading/SectionHeading.cjs +3 -3
- package/lib/SectionHeading/SectionHeading.mjs +3 -3
- package/lib/Statistics/Statistics.cjs +6 -6
- package/lib/Statistics/Statistics.mjs +6 -6
- package/lib/Summary/Summary.cjs +1 -1
- package/lib/Summary/Summary.mjs +1 -1
- package/lib/ThumbnailSignpost/ThumbnailSignpost.cjs +15 -0
- package/lib/ThumbnailSignpost/ThumbnailSignpost.mjs +9 -0
- package/lib/ThumbnailSignpost/styles.css +1 -0
- package/lib/_shared/cjs/{Accordion-D5fpUJzm.cjs → Accordion-DfNGOjTm.cjs} +5 -5
- package/lib/_shared/cjs/{Author-X47pv31V.cjs → Author-D4dKNQem.cjs} +2 -2
- package/lib/_shared/cjs/BtIconArrowAltRight-CLQdP61r.cjs +11 -0
- package/lib/_shared/cjs/BtIconArrowRightFill-BVCZv7Lm.cjs +11 -0
- package/lib/_shared/cjs/{SectionHeading-DepTV4JA.cjs → SectionHeading-DeSFM0HV.cjs} +5 -5
- package/lib/_shared/cjs/ThumbnailSignpost-GkOiwt-Z.cjs +39 -0
- package/lib/_shared/cjs/filter-attrs-BizjMsy0.cjs +27 -0
- package/lib/_shared/cjs/{index.es-D11PdokQ.cjs → index.es-Dq8bYrbW.cjs} +1 -1
- package/lib/_shared/esm/{Accordion-LLwNdzax.mjs → Accordion-cd1oYvBv.mjs} +5 -5
- package/lib/_shared/esm/{Author-CydDYCma.mjs → Author-HnYsFTPT.mjs} +2 -2
- package/lib/_shared/esm/BtIconArrowAltRight-VH6RTTnL.mjs +9 -0
- package/lib/_shared/esm/BtIconArrowRightFill-D0zKgk3B.mjs +9 -0
- package/lib/_shared/esm/{SectionHeading-BayinGP_.mjs → SectionHeading-CpDLCndw.mjs} +5 -5
- package/lib/_shared/esm/ThumbnailSignpost-BeRiXbUp.mjs +37 -0
- package/lib/_shared/esm/filter-attrs-DZ7RCEZm.mjs +25 -0
- package/lib/_shared/esm/{index.es-C4PyYMjI.mjs → index.es-Bfdys5__.mjs} +1 -1
- package/lib/index.cjs +378 -227
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +190 -26
- package/lib/index.d.mts +190 -26
- package/lib/index.mjs +374 -228
- package/lib/index.mjs.map +1 -1
- package/lib/styles.css +1 -1
- package/package.json +13 -13
- package/src/components/Accordion/Accordion.tsx +3 -2
- package/src/components/Accordion/components/AccordionDisclosureList/AccordionDisclosureList.tsx +3 -3
- package/src/components/Accordion/components/AccordionHeading/AccordionHeading.tsx +3 -4
- package/src/components/ActionTile/ActionTile.module.css +89 -0
- package/src/components/ActionTile/ActionTile.tsx +70 -0
- package/src/components/ActionTile/index.ts +1 -0
- package/src/components/ArticleSidebar/ArticleSidebar.module.css +6 -0
- package/src/components/ArticleSidebar/ArticleSidebar.tsx +115 -85
- package/src/components/ArticleSidebar/types/link-section.ts +2 -1
- package/src/components/ArticleSidebar/types/share-button.ts +1 -1
- package/src/components/ArticleSidebar/types/share.ts +5 -1
- package/src/components/ArticleSidebar/types/text-section.ts +3 -2
- package/src/components/ArticleSidebar/types/topic.ts +2 -2
- package/src/components/Author/Author.tsx +2 -2
- package/src/components/BannerWithTabs/BannerWithTabs.tsx +9 -3
- package/src/components/CopyLead/CopyLead.tsx +21 -5
- package/src/components/CopyLead/components/MediaContent/MediaContent.tsx +10 -1
- package/src/components/CopyLead/templates/Content/Content.tsx +4 -0
- package/src/components/CopyLead/templates/Media/Media.tsx +10 -1
- package/src/components/CopyLead/types/copy-lead-button.ts +1 -1
- package/src/components/CopyLead/types/copy-lead-image.ts +1 -1
- package/src/components/DownloadList/DownloadList.tsx +4 -0
- package/src/components/FAQs/FAQs.tsx +20 -9
- package/src/components/FeaturePost/FeaturePost.tsx +27 -6
- package/src/components/FeaturePost/components/Image/Image.tsx +31 -7
- package/src/components/FeaturePost/types/feature-post-app-button-footer.ts +1 -1
- package/src/components/FeaturePost/types/feature-post-cta-footer.ts +2 -1
- package/src/components/FeaturePost/types/feature-post-image.ts +3 -1
- package/src/components/HeroLink/HeroLink.module.css +44 -0
- package/src/components/HeroLink/HeroLink.tsx +136 -0
- package/src/components/HeroLink/index.ts +2 -0
- package/src/components/Highlights/Highlights.tsx +6 -1
- package/src/components/Highlights/components/HighlightItem/HighlightItem.tsx +1 -0
- package/src/components/Highlights/types/highlight-link.ts +1 -0
- package/src/components/LinkTile/LinkTile.module.css +57 -0
- package/src/components/LinkTile/LinkTile.tsx +38 -0
- package/src/components/LinkTile/index.ts +1 -0
- package/src/components/ProductNavigation/ProductNavigation.tsx +10 -11
- package/src/components/ProductNavigation/types/product-list.ts +1 -8
- package/src/components/PromoListing/PromoListing.tsx +67 -3
- package/src/components/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.module.css +54 -0
- package/src/components/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.tsx +53 -0
- package/src/components/PromoListingThumbnailSignpost/index.ts +4 -0
- package/src/components/Quote/Quote.tsx +2 -2
- package/src/components/SectionHeading/SectionHeading.tsx +17 -7
- package/src/components/Statistics/Statistics.tsx +6 -2
- package/src/components/ThumbnailSignpost/ThumbnailSignpost.module.css +112 -0
- package/src/components/ThumbnailSignpost/ThumbnailSignpost.tsx +100 -0
- package/src/components/ThumbnailSignpost/index.ts +4 -0
- package/src/components/index.ts +5 -0
- package/versions.json +1 -1
- package/lib/_shared/cjs/filter-data-attrs-ajtUvDAC.cjs +0 -15
- package/lib/_shared/esm/filter-data-attrs-V7cbJuwS.mjs +0 -13
package/lib/index.d.cts
CHANGED
|
@@ -1,22 +1,19 @@
|
|
|
1
|
-
import React$1, { ReactNode, FC } from 'react';
|
|
1
|
+
import React$1, { ReactNode, FC, Ref } from 'react';
|
|
2
2
|
import { HeadingLevel } from '@arc-ui/components/Heading';
|
|
3
|
-
import { ImageProps, ImageSourceProps } from '@arc-ui/components/
|
|
3
|
+
import { ImageProps, ImageSourceProps } from '@arc-ui/components/Image';
|
|
4
4
|
import { DisclosureProps } from '@arc-ui/components/Disclosure';
|
|
5
5
|
import { AvatarProps } from '@arc-ui/components/Avatar';
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import { ButtonProps } from '@arc-ui/components/dist/types/components/Button/Button';
|
|
6
|
+
import { VideoPlayerProps } from '@arc-ui/components/VideoPlayer';
|
|
7
|
+
import { ButtonProps } from '@arc-ui/components/Button';
|
|
9
8
|
import { DownloadProps } from '@arc-ui/components/Download';
|
|
10
|
-
import {
|
|
11
|
-
import { AppButtonProps } from '@arc-ui/components/dist/types/components/AppButton';
|
|
9
|
+
import { AppButtonProps } from '@arc-ui/components/AppButton';
|
|
12
10
|
import { ButtonV2Props } from '@arc-ui/components/ButtonV2';
|
|
13
11
|
import { MediaCardProps } from '@arc-ui/components/MediaCard';
|
|
14
12
|
import { ImpactCardProps } from '@arc-ui/components/ImpactCard';
|
|
15
13
|
import { InformationCardProps } from '@arc-ui/components/InformationCard';
|
|
16
14
|
import { TypographyCardProps } from '@arc-ui/components/TypographyCard';
|
|
17
|
-
import { TemplateBannerProps } from '@arc-ui/components/
|
|
18
|
-
import { TagProps } from '@arc-ui/components/
|
|
19
|
-
import { ButtonV2Props as ButtonV2Props$1 } from '@arc-ui/components/types/components/ButtonV2/ButtonV2';
|
|
15
|
+
import { TemplateBannerProps } from '@arc-ui/components/TemplateBanner';
|
|
16
|
+
import { TagProps } from '@arc-ui/components/Tag';
|
|
20
17
|
|
|
21
18
|
interface AccordionHeadingProps {
|
|
22
19
|
/**
|
|
@@ -105,7 +102,15 @@ interface CopyLeadProps {
|
|
|
105
102
|
/**
|
|
106
103
|
* Determine a heading level for `<MediaTemplate />` and `<ContentTemplate />`
|
|
107
104
|
*/
|
|
108
|
-
headingLevel?: HeadingLevel
|
|
105
|
+
headingLevel?: HeadingLevel;
|
|
106
|
+
/**
|
|
107
|
+
* id for the heading of `<MediaTemplate />` and `<ContentTemplate />`
|
|
108
|
+
*/
|
|
109
|
+
id?: string;
|
|
110
|
+
/**
|
|
111
|
+
* Word wrap behavior for the heading
|
|
112
|
+
*/
|
|
113
|
+
isHeadingWordWrap?: boolean;
|
|
109
114
|
/**
|
|
110
115
|
* Reverse the columns so the image / video appears on the left. Doesn't affect mobile layouts, and is only applied if there is a video or an image.
|
|
111
116
|
*/
|
|
@@ -146,6 +151,10 @@ interface SectionHeadingProps {
|
|
|
146
151
|
* Determine a heading level for `SectionHeading`.
|
|
147
152
|
*/
|
|
148
153
|
headingLevel?: HeadingLevel;
|
|
154
|
+
/**
|
|
155
|
+
* Word wrap behavior for the heading
|
|
156
|
+
*/
|
|
157
|
+
isHeadingWordWrap?: boolean;
|
|
149
158
|
/**
|
|
150
159
|
* Text content for `SectionHeading`.
|
|
151
160
|
*/
|
|
@@ -189,6 +198,8 @@ interface FeaturePostCtaFooter {
|
|
|
189
198
|
|
|
190
199
|
interface FeaturePostImage extends Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "width" | "height" | "fadeOnLoad"> {
|
|
191
200
|
sources?: Pick<ImageSourceProps, "media" | "sizes" | "srcSet">[];
|
|
201
|
+
title?: string;
|
|
202
|
+
description?: string;
|
|
192
203
|
}
|
|
193
204
|
|
|
194
205
|
/**
|
|
@@ -200,14 +211,22 @@ interface FeaturePostProps {
|
|
|
200
211
|
* heading for `FeaturePost`.
|
|
201
212
|
*/
|
|
202
213
|
heading: string;
|
|
214
|
+
/**
|
|
215
|
+
* id for `FeaturePost`.
|
|
216
|
+
*/
|
|
217
|
+
id?: string;
|
|
203
218
|
/**
|
|
204
219
|
* Determine a heading level for `<FeaturePost />`
|
|
205
220
|
*/
|
|
206
221
|
headingLevel?: HeadingLevel;
|
|
222
|
+
/**
|
|
223
|
+
* Word wrap behavior for the heading
|
|
224
|
+
*/
|
|
225
|
+
isHeadingWordWrap?: boolean;
|
|
207
226
|
/**
|
|
208
227
|
* Text content for `FeaturePost`.
|
|
209
228
|
*/
|
|
210
|
-
content:
|
|
229
|
+
content: ReactNode;
|
|
211
230
|
/**
|
|
212
231
|
* Reverse the columns so the image / video appears on the left. Doesn't affect mobile layouts, and is only applied if there is a video or an image.
|
|
213
232
|
*/
|
|
@@ -230,12 +249,13 @@ interface FeaturePostProps {
|
|
|
230
249
|
/**
|
|
231
250
|
* Video embed. Supported platforms are YouTube and Vimeo.
|
|
232
251
|
*/
|
|
233
|
-
video?: VideoPlayerProps
|
|
252
|
+
video?: VideoPlayerProps;
|
|
234
253
|
}
|
|
235
254
|
|
|
236
255
|
interface HighlightLink {
|
|
237
256
|
url: string;
|
|
238
257
|
textLink: string;
|
|
258
|
+
ariaLabel?: string;
|
|
239
259
|
onClick?: (e: React.MouseEvent) => void;
|
|
240
260
|
}
|
|
241
261
|
|
|
@@ -271,7 +291,7 @@ interface HighlightsProps extends Omit<SectionHeadingProps, "isPadded"> {
|
|
|
271
291
|
/**
|
|
272
292
|
* CTA configuration for Highlights
|
|
273
293
|
*/
|
|
274
|
-
type HighlightsCTAProps = Pick<ButtonV2Props, "label" | "href" | "onClick" | "iconPosition"> & {
|
|
294
|
+
type HighlightsCTAProps = Pick<ButtonV2Props, "label" | "href" | "onClick" | "iconPosition" | "ariaLabel"> & {
|
|
275
295
|
/**
|
|
276
296
|
* Allowed button styles only.
|
|
277
297
|
* Primary is intentionally NOT supported.
|
|
@@ -317,6 +337,31 @@ interface PromoListingProps extends Omit<SectionHeadingProps, "isPadded"> {
|
|
|
317
337
|
* Number of columns for desktop breakpoints. "2" and "3" column options available.
|
|
318
338
|
*/
|
|
319
339
|
columns?: "2" | "3";
|
|
340
|
+
/**
|
|
341
|
+
* Optional button configuration displayed above the cards.
|
|
342
|
+
*/
|
|
343
|
+
button?: PromoListingButton;
|
|
344
|
+
/**
|
|
345
|
+
* Text label displayed above the main heading in overline style
|
|
346
|
+
*/
|
|
347
|
+
overlineLabel?: string;
|
|
348
|
+
/**
|
|
349
|
+
* Heading level for the overline label
|
|
350
|
+
*/
|
|
351
|
+
overlineHeadingLevel?: HeadingLevel;
|
|
352
|
+
}
|
|
353
|
+
/**
|
|
354
|
+
* Button configuration for PromoListing component.
|
|
355
|
+
*/
|
|
356
|
+
interface PromoListingButton extends Omit<ButtonV2Props, "buttonStyle" | "icon" | "size"> {
|
|
357
|
+
/**
|
|
358
|
+
* Style variant for the button. Defaults to "secondary".
|
|
359
|
+
*/
|
|
360
|
+
buttonStyle?: "secondary" | "compact";
|
|
361
|
+
/**
|
|
362
|
+
* Optional prop to pass additional props to the button. Only data-* and aria-* will work.
|
|
363
|
+
*/
|
|
364
|
+
[key: string]: unknown;
|
|
320
365
|
}
|
|
321
366
|
|
|
322
367
|
/**
|
|
@@ -404,32 +449,37 @@ interface BannerWithTabsProps extends Omit<SectionHeadingProps, "image" | "isPad
|
|
|
404
449
|
|
|
405
450
|
interface TextSection {
|
|
406
451
|
heading: string;
|
|
407
|
-
content: string;
|
|
408
|
-
headingLevel?: HeadingLevel
|
|
452
|
+
content: string | ReactNode;
|
|
453
|
+
headingLevel?: HeadingLevel;
|
|
409
454
|
}
|
|
410
455
|
|
|
411
456
|
interface Link {
|
|
412
457
|
text: string;
|
|
413
458
|
url: string;
|
|
459
|
+
ariaLabel?: string;
|
|
414
460
|
}
|
|
415
461
|
interface LinkSection {
|
|
416
462
|
heading: string;
|
|
417
463
|
links: Link[];
|
|
418
|
-
headingLevel?: HeadingLevel
|
|
464
|
+
headingLevel?: HeadingLevel;
|
|
419
465
|
}
|
|
420
466
|
|
|
421
467
|
interface Topic {
|
|
422
468
|
heading: string;
|
|
423
469
|
tags: TagProps[];
|
|
424
|
-
headingLevel?: HeadingLevel
|
|
470
|
+
headingLevel?: HeadingLevel;
|
|
425
471
|
}
|
|
426
472
|
|
|
427
473
|
interface Share {
|
|
428
474
|
heading: string;
|
|
429
475
|
articleTitle: string;
|
|
430
476
|
x?: boolean;
|
|
431
|
-
headingLevel?: HeadingLevel
|
|
477
|
+
headingLevel?: HeadingLevel;
|
|
432
478
|
linkedin?: boolean;
|
|
479
|
+
linkedInAriaLabel?: string;
|
|
480
|
+
xAriaLabel?: string;
|
|
481
|
+
clipboardAriaLabel?: string;
|
|
482
|
+
emailAriaLabel?: string;
|
|
433
483
|
}
|
|
434
484
|
|
|
435
485
|
interface SidebarAuthor extends AuthorProps {
|
|
@@ -456,7 +506,7 @@ interface ArticleSidebarProps {
|
|
|
456
506
|
/**
|
|
457
507
|
* Links that are relevant to the article.
|
|
458
508
|
*/
|
|
459
|
-
linkSection
|
|
509
|
+
linkSection?: LinkSection;
|
|
460
510
|
/**
|
|
461
511
|
* Topics rendered as tags that are relevant to the article.
|
|
462
512
|
*/
|
|
@@ -464,12 +514,10 @@ interface ArticleSidebarProps {
|
|
|
464
514
|
/**
|
|
465
515
|
* Sharing options for the article.
|
|
466
516
|
*/
|
|
467
|
-
share
|
|
517
|
+
share?: Share;
|
|
468
518
|
}
|
|
469
519
|
|
|
470
|
-
type
|
|
471
|
-
type ListInformationCardProps = Pick<InformationCardProps, "heading" | "text">;
|
|
472
|
-
type ListProps = ListInformationCardButtonProps & ListInformationCardProps;
|
|
520
|
+
type ListProps = InformationCardProps;
|
|
473
521
|
|
|
474
522
|
/**
|
|
475
523
|
* Use `ProductNavigation` to give a collection of product information cards collected within a grid that has optional show/hide capability
|
|
@@ -524,5 +572,121 @@ interface ContentInfoWidgetProps {
|
|
|
524
572
|
text: string;
|
|
525
573
|
}
|
|
526
574
|
|
|
527
|
-
|
|
528
|
-
|
|
575
|
+
type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
|
|
576
|
+
type ButtonRef = Ref<ElementUnion> | null;
|
|
577
|
+
/**
|
|
578
|
+
* Pill-style HeroLink component with default and hover states
|
|
579
|
+
*/
|
|
580
|
+
declare const HeroLink: ({ label, onClick, href, id, rel, target, ariaLabel, ref, ...props }: HeroLinkProps) => JSX.Element;
|
|
581
|
+
interface LinkElementProps {
|
|
582
|
+
/**
|
|
583
|
+
* URL to link to if `HeroButton` elementType is 'a'.
|
|
584
|
+
*/
|
|
585
|
+
href?: string;
|
|
586
|
+
/**
|
|
587
|
+
* Target window for the `HeroButton` href URL.
|
|
588
|
+
*/
|
|
589
|
+
target?: string;
|
|
590
|
+
/**
|
|
591
|
+
* Relationship between the Button href URL and the current page. See
|
|
592
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
|
|
593
|
+
*/
|
|
594
|
+
rel?: string;
|
|
595
|
+
}
|
|
596
|
+
interface HeroButtonElementProps {
|
|
597
|
+
/**
|
|
598
|
+
* Default behavior of the Button element. If not provided, 'submit' will
|
|
599
|
+
* be inferred. Type 'reset' deliberately excluded.
|
|
600
|
+
*/
|
|
601
|
+
type?: "button" | "submit";
|
|
602
|
+
/**
|
|
603
|
+
* Refers to the id of a form so it can be submitted if the button exists outside of it.
|
|
604
|
+
*/
|
|
605
|
+
form?: string;
|
|
606
|
+
}
|
|
607
|
+
interface HeroLinkProps extends HeroButtonElementProps, LinkElementProps {
|
|
608
|
+
/**
|
|
609
|
+
* Label for `HeroLink`
|
|
610
|
+
*/
|
|
611
|
+
label?: string;
|
|
612
|
+
/**
|
|
613
|
+
* Optional click handler for the `HeroLink`.
|
|
614
|
+
*/
|
|
615
|
+
onClick?: () => void;
|
|
616
|
+
/**
|
|
617
|
+
* Optional property to provide component Ref
|
|
618
|
+
*/
|
|
619
|
+
ref?: ButtonRef;
|
|
620
|
+
/**
|
|
621
|
+
* Text to override `label` with additional, more precise information
|
|
622
|
+
* specifically for screen reader users.
|
|
623
|
+
*/
|
|
624
|
+
ariaLabel?: string;
|
|
625
|
+
/**
|
|
626
|
+
* HTML ID for the `HeroLink`
|
|
627
|
+
*/
|
|
628
|
+
id?: string;
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
declare const ActionTile: React$1.FC<ActionTileProps>;
|
|
632
|
+
interface ActionTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
633
|
+
/**
|
|
634
|
+
* Optional icon to display
|
|
635
|
+
*/
|
|
636
|
+
icon?: string;
|
|
637
|
+
/**
|
|
638
|
+
* Heading text (required)
|
|
639
|
+
*/
|
|
640
|
+
heading: string;
|
|
641
|
+
/**
|
|
642
|
+
* Whether the tile is in active/selected state
|
|
643
|
+
*/
|
|
644
|
+
isActive?: boolean;
|
|
645
|
+
/**
|
|
646
|
+
* Click handler
|
|
647
|
+
*/
|
|
648
|
+
onClick?: () => void;
|
|
649
|
+
}
|
|
650
|
+
|
|
651
|
+
declare const LinkTile: React$1.FC<LinkTileProps>;
|
|
652
|
+
interface LinkTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
653
|
+
text?: string;
|
|
654
|
+
href?: string;
|
|
655
|
+
showIcon?: boolean;
|
|
656
|
+
}
|
|
657
|
+
|
|
658
|
+
/** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
|
|
659
|
+
declare const ThumbnailSignpost: ({ text, title, img, onClick, buttonLabel, ...props }: ThumbnailSignpostProps) => JSX.Element;
|
|
660
|
+
interface ThumbnailSignpostProps {
|
|
661
|
+
/**
|
|
662
|
+
* Title for the ThumbnailSignpost.
|
|
663
|
+
*/
|
|
664
|
+
title: string;
|
|
665
|
+
/**
|
|
666
|
+
* Text content for the ThumbnailSignpost.
|
|
667
|
+
*/
|
|
668
|
+
text: string;
|
|
669
|
+
/**
|
|
670
|
+
* Label for the button in the ThumbnailSignpost.
|
|
671
|
+
*/
|
|
672
|
+
buttonLabel?: string;
|
|
673
|
+
/**
|
|
674
|
+
* Image properties for the ThumbnailSignpost.
|
|
675
|
+
*/
|
|
676
|
+
img?: Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "anchor" | "fadeOnLoad" | "fetchPriority">;
|
|
677
|
+
/**
|
|
678
|
+
* Optional click handler for the ThumbnailSignpost.
|
|
679
|
+
*/
|
|
680
|
+
onClick?: () => void;
|
|
681
|
+
}
|
|
682
|
+
|
|
683
|
+
/**
|
|
684
|
+
* Use `PromoListingThumbnailSignpost` to give supporting information about a page or proposition in the form of the ThumbnailSignposts components.
|
|
685
|
+
*/
|
|
686
|
+
declare const PromoListingThumbnailSignpost: React$1.FC<PromoListingThumbnailSignpostProps>;
|
|
687
|
+
interface PromoListingThumbnailSignpostProps extends SectionHeadingProps {
|
|
688
|
+
thumbnailList: ThumbnailSignpostProps[];
|
|
689
|
+
}
|
|
690
|
+
|
|
691
|
+
export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, HeroLink, Highlights, LinkTile, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost };
|
|
692
|
+
export type { AccordionProps, ActionTileProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HeroLinkProps, HighlightsProps, LinkTileProps, ListProps, ProductNavigationProps, PromoListingProps, PromoListingThumbnailSignpostProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps, ThumbnailSignpostProps };
|
package/lib/index.d.mts
CHANGED
|
@@ -1,22 +1,19 @@
|
|
|
1
|
-
import React$1, { ReactNode, FC } from 'react';
|
|
1
|
+
import React$1, { ReactNode, FC, Ref } from 'react';
|
|
2
2
|
import { HeadingLevel } from '@arc-ui/components/Heading';
|
|
3
|
-
import { ImageProps, ImageSourceProps } from '@arc-ui/components/
|
|
3
|
+
import { ImageProps, ImageSourceProps } from '@arc-ui/components/Image';
|
|
4
4
|
import { DisclosureProps } from '@arc-ui/components/Disclosure';
|
|
5
5
|
import { AvatarProps } from '@arc-ui/components/Avatar';
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import { ButtonProps } from '@arc-ui/components/dist/types/components/Button/Button';
|
|
6
|
+
import { VideoPlayerProps } from '@arc-ui/components/VideoPlayer';
|
|
7
|
+
import { ButtonProps } from '@arc-ui/components/Button';
|
|
9
8
|
import { DownloadProps } from '@arc-ui/components/Download';
|
|
10
|
-
import {
|
|
11
|
-
import { AppButtonProps } from '@arc-ui/components/dist/types/components/AppButton';
|
|
9
|
+
import { AppButtonProps } from '@arc-ui/components/AppButton';
|
|
12
10
|
import { ButtonV2Props } from '@arc-ui/components/ButtonV2';
|
|
13
11
|
import { MediaCardProps } from '@arc-ui/components/MediaCard';
|
|
14
12
|
import { ImpactCardProps } from '@arc-ui/components/ImpactCard';
|
|
15
13
|
import { InformationCardProps } from '@arc-ui/components/InformationCard';
|
|
16
14
|
import { TypographyCardProps } from '@arc-ui/components/TypographyCard';
|
|
17
|
-
import { TemplateBannerProps } from '@arc-ui/components/
|
|
18
|
-
import { TagProps } from '@arc-ui/components/
|
|
19
|
-
import { ButtonV2Props as ButtonV2Props$1 } from '@arc-ui/components/types/components/ButtonV2/ButtonV2';
|
|
15
|
+
import { TemplateBannerProps } from '@arc-ui/components/TemplateBanner';
|
|
16
|
+
import { TagProps } from '@arc-ui/components/Tag';
|
|
20
17
|
|
|
21
18
|
interface AccordionHeadingProps {
|
|
22
19
|
/**
|
|
@@ -105,7 +102,15 @@ interface CopyLeadProps {
|
|
|
105
102
|
/**
|
|
106
103
|
* Determine a heading level for `<MediaTemplate />` and `<ContentTemplate />`
|
|
107
104
|
*/
|
|
108
|
-
headingLevel?: HeadingLevel
|
|
105
|
+
headingLevel?: HeadingLevel;
|
|
106
|
+
/**
|
|
107
|
+
* id for the heading of `<MediaTemplate />` and `<ContentTemplate />`
|
|
108
|
+
*/
|
|
109
|
+
id?: string;
|
|
110
|
+
/**
|
|
111
|
+
* Word wrap behavior for the heading
|
|
112
|
+
*/
|
|
113
|
+
isHeadingWordWrap?: boolean;
|
|
109
114
|
/**
|
|
110
115
|
* Reverse the columns so the image / video appears on the left. Doesn't affect mobile layouts, and is only applied if there is a video or an image.
|
|
111
116
|
*/
|
|
@@ -146,6 +151,10 @@ interface SectionHeadingProps {
|
|
|
146
151
|
* Determine a heading level for `SectionHeading`.
|
|
147
152
|
*/
|
|
148
153
|
headingLevel?: HeadingLevel;
|
|
154
|
+
/**
|
|
155
|
+
* Word wrap behavior for the heading
|
|
156
|
+
*/
|
|
157
|
+
isHeadingWordWrap?: boolean;
|
|
149
158
|
/**
|
|
150
159
|
* Text content for `SectionHeading`.
|
|
151
160
|
*/
|
|
@@ -189,6 +198,8 @@ interface FeaturePostCtaFooter {
|
|
|
189
198
|
|
|
190
199
|
interface FeaturePostImage extends Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "width" | "height" | "fadeOnLoad"> {
|
|
191
200
|
sources?: Pick<ImageSourceProps, "media" | "sizes" | "srcSet">[];
|
|
201
|
+
title?: string;
|
|
202
|
+
description?: string;
|
|
192
203
|
}
|
|
193
204
|
|
|
194
205
|
/**
|
|
@@ -200,14 +211,22 @@ interface FeaturePostProps {
|
|
|
200
211
|
* heading for `FeaturePost`.
|
|
201
212
|
*/
|
|
202
213
|
heading: string;
|
|
214
|
+
/**
|
|
215
|
+
* id for `FeaturePost`.
|
|
216
|
+
*/
|
|
217
|
+
id?: string;
|
|
203
218
|
/**
|
|
204
219
|
* Determine a heading level for `<FeaturePost />`
|
|
205
220
|
*/
|
|
206
221
|
headingLevel?: HeadingLevel;
|
|
222
|
+
/**
|
|
223
|
+
* Word wrap behavior for the heading
|
|
224
|
+
*/
|
|
225
|
+
isHeadingWordWrap?: boolean;
|
|
207
226
|
/**
|
|
208
227
|
* Text content for `FeaturePost`.
|
|
209
228
|
*/
|
|
210
|
-
content:
|
|
229
|
+
content: ReactNode;
|
|
211
230
|
/**
|
|
212
231
|
* Reverse the columns so the image / video appears on the left. Doesn't affect mobile layouts, and is only applied if there is a video or an image.
|
|
213
232
|
*/
|
|
@@ -230,12 +249,13 @@ interface FeaturePostProps {
|
|
|
230
249
|
/**
|
|
231
250
|
* Video embed. Supported platforms are YouTube and Vimeo.
|
|
232
251
|
*/
|
|
233
|
-
video?: VideoPlayerProps
|
|
252
|
+
video?: VideoPlayerProps;
|
|
234
253
|
}
|
|
235
254
|
|
|
236
255
|
interface HighlightLink {
|
|
237
256
|
url: string;
|
|
238
257
|
textLink: string;
|
|
258
|
+
ariaLabel?: string;
|
|
239
259
|
onClick?: (e: React.MouseEvent) => void;
|
|
240
260
|
}
|
|
241
261
|
|
|
@@ -271,7 +291,7 @@ interface HighlightsProps extends Omit<SectionHeadingProps, "isPadded"> {
|
|
|
271
291
|
/**
|
|
272
292
|
* CTA configuration for Highlights
|
|
273
293
|
*/
|
|
274
|
-
type HighlightsCTAProps = Pick<ButtonV2Props, "label" | "href" | "onClick" | "iconPosition"> & {
|
|
294
|
+
type HighlightsCTAProps = Pick<ButtonV2Props, "label" | "href" | "onClick" | "iconPosition" | "ariaLabel"> & {
|
|
275
295
|
/**
|
|
276
296
|
* Allowed button styles only.
|
|
277
297
|
* Primary is intentionally NOT supported.
|
|
@@ -317,6 +337,31 @@ interface PromoListingProps extends Omit<SectionHeadingProps, "isPadded"> {
|
|
|
317
337
|
* Number of columns for desktop breakpoints. "2" and "3" column options available.
|
|
318
338
|
*/
|
|
319
339
|
columns?: "2" | "3";
|
|
340
|
+
/**
|
|
341
|
+
* Optional button configuration displayed above the cards.
|
|
342
|
+
*/
|
|
343
|
+
button?: PromoListingButton;
|
|
344
|
+
/**
|
|
345
|
+
* Text label displayed above the main heading in overline style
|
|
346
|
+
*/
|
|
347
|
+
overlineLabel?: string;
|
|
348
|
+
/**
|
|
349
|
+
* Heading level for the overline label
|
|
350
|
+
*/
|
|
351
|
+
overlineHeadingLevel?: HeadingLevel;
|
|
352
|
+
}
|
|
353
|
+
/**
|
|
354
|
+
* Button configuration for PromoListing component.
|
|
355
|
+
*/
|
|
356
|
+
interface PromoListingButton extends Omit<ButtonV2Props, "buttonStyle" | "icon" | "size"> {
|
|
357
|
+
/**
|
|
358
|
+
* Style variant for the button. Defaults to "secondary".
|
|
359
|
+
*/
|
|
360
|
+
buttonStyle?: "secondary" | "compact";
|
|
361
|
+
/**
|
|
362
|
+
* Optional prop to pass additional props to the button. Only data-* and aria-* will work.
|
|
363
|
+
*/
|
|
364
|
+
[key: string]: unknown;
|
|
320
365
|
}
|
|
321
366
|
|
|
322
367
|
/**
|
|
@@ -404,32 +449,37 @@ interface BannerWithTabsProps extends Omit<SectionHeadingProps, "image" | "isPad
|
|
|
404
449
|
|
|
405
450
|
interface TextSection {
|
|
406
451
|
heading: string;
|
|
407
|
-
content: string;
|
|
408
|
-
headingLevel?: HeadingLevel
|
|
452
|
+
content: string | ReactNode;
|
|
453
|
+
headingLevel?: HeadingLevel;
|
|
409
454
|
}
|
|
410
455
|
|
|
411
456
|
interface Link {
|
|
412
457
|
text: string;
|
|
413
458
|
url: string;
|
|
459
|
+
ariaLabel?: string;
|
|
414
460
|
}
|
|
415
461
|
interface LinkSection {
|
|
416
462
|
heading: string;
|
|
417
463
|
links: Link[];
|
|
418
|
-
headingLevel?: HeadingLevel
|
|
464
|
+
headingLevel?: HeadingLevel;
|
|
419
465
|
}
|
|
420
466
|
|
|
421
467
|
interface Topic {
|
|
422
468
|
heading: string;
|
|
423
469
|
tags: TagProps[];
|
|
424
|
-
headingLevel?: HeadingLevel
|
|
470
|
+
headingLevel?: HeadingLevel;
|
|
425
471
|
}
|
|
426
472
|
|
|
427
473
|
interface Share {
|
|
428
474
|
heading: string;
|
|
429
475
|
articleTitle: string;
|
|
430
476
|
x?: boolean;
|
|
431
|
-
headingLevel?: HeadingLevel
|
|
477
|
+
headingLevel?: HeadingLevel;
|
|
432
478
|
linkedin?: boolean;
|
|
479
|
+
linkedInAriaLabel?: string;
|
|
480
|
+
xAriaLabel?: string;
|
|
481
|
+
clipboardAriaLabel?: string;
|
|
482
|
+
emailAriaLabel?: string;
|
|
433
483
|
}
|
|
434
484
|
|
|
435
485
|
interface SidebarAuthor extends AuthorProps {
|
|
@@ -456,7 +506,7 @@ interface ArticleSidebarProps {
|
|
|
456
506
|
/**
|
|
457
507
|
* Links that are relevant to the article.
|
|
458
508
|
*/
|
|
459
|
-
linkSection
|
|
509
|
+
linkSection?: LinkSection;
|
|
460
510
|
/**
|
|
461
511
|
* Topics rendered as tags that are relevant to the article.
|
|
462
512
|
*/
|
|
@@ -464,12 +514,10 @@ interface ArticleSidebarProps {
|
|
|
464
514
|
/**
|
|
465
515
|
* Sharing options for the article.
|
|
466
516
|
*/
|
|
467
|
-
share
|
|
517
|
+
share?: Share;
|
|
468
518
|
}
|
|
469
519
|
|
|
470
|
-
type
|
|
471
|
-
type ListInformationCardProps = Pick<InformationCardProps, "heading" | "text">;
|
|
472
|
-
type ListProps = ListInformationCardButtonProps & ListInformationCardProps;
|
|
520
|
+
type ListProps = InformationCardProps;
|
|
473
521
|
|
|
474
522
|
/**
|
|
475
523
|
* Use `ProductNavigation` to give a collection of product information cards collected within a grid that has optional show/hide capability
|
|
@@ -524,5 +572,121 @@ interface ContentInfoWidgetProps {
|
|
|
524
572
|
text: string;
|
|
525
573
|
}
|
|
526
574
|
|
|
527
|
-
|
|
528
|
-
|
|
575
|
+
type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
|
|
576
|
+
type ButtonRef = Ref<ElementUnion> | null;
|
|
577
|
+
/**
|
|
578
|
+
* Pill-style HeroLink component with default and hover states
|
|
579
|
+
*/
|
|
580
|
+
declare const HeroLink: ({ label, onClick, href, id, rel, target, ariaLabel, ref, ...props }: HeroLinkProps) => JSX.Element;
|
|
581
|
+
interface LinkElementProps {
|
|
582
|
+
/**
|
|
583
|
+
* URL to link to if `HeroButton` elementType is 'a'.
|
|
584
|
+
*/
|
|
585
|
+
href?: string;
|
|
586
|
+
/**
|
|
587
|
+
* Target window for the `HeroButton` href URL.
|
|
588
|
+
*/
|
|
589
|
+
target?: string;
|
|
590
|
+
/**
|
|
591
|
+
* Relationship between the Button href URL and the current page. See
|
|
592
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
|
|
593
|
+
*/
|
|
594
|
+
rel?: string;
|
|
595
|
+
}
|
|
596
|
+
interface HeroButtonElementProps {
|
|
597
|
+
/**
|
|
598
|
+
* Default behavior of the Button element. If not provided, 'submit' will
|
|
599
|
+
* be inferred. Type 'reset' deliberately excluded.
|
|
600
|
+
*/
|
|
601
|
+
type?: "button" | "submit";
|
|
602
|
+
/**
|
|
603
|
+
* Refers to the id of a form so it can be submitted if the button exists outside of it.
|
|
604
|
+
*/
|
|
605
|
+
form?: string;
|
|
606
|
+
}
|
|
607
|
+
interface HeroLinkProps extends HeroButtonElementProps, LinkElementProps {
|
|
608
|
+
/**
|
|
609
|
+
* Label for `HeroLink`
|
|
610
|
+
*/
|
|
611
|
+
label?: string;
|
|
612
|
+
/**
|
|
613
|
+
* Optional click handler for the `HeroLink`.
|
|
614
|
+
*/
|
|
615
|
+
onClick?: () => void;
|
|
616
|
+
/**
|
|
617
|
+
* Optional property to provide component Ref
|
|
618
|
+
*/
|
|
619
|
+
ref?: ButtonRef;
|
|
620
|
+
/**
|
|
621
|
+
* Text to override `label` with additional, more precise information
|
|
622
|
+
* specifically for screen reader users.
|
|
623
|
+
*/
|
|
624
|
+
ariaLabel?: string;
|
|
625
|
+
/**
|
|
626
|
+
* HTML ID for the `HeroLink`
|
|
627
|
+
*/
|
|
628
|
+
id?: string;
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
declare const ActionTile: React$1.FC<ActionTileProps>;
|
|
632
|
+
interface ActionTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
633
|
+
/**
|
|
634
|
+
* Optional icon to display
|
|
635
|
+
*/
|
|
636
|
+
icon?: string;
|
|
637
|
+
/**
|
|
638
|
+
* Heading text (required)
|
|
639
|
+
*/
|
|
640
|
+
heading: string;
|
|
641
|
+
/**
|
|
642
|
+
* Whether the tile is in active/selected state
|
|
643
|
+
*/
|
|
644
|
+
isActive?: boolean;
|
|
645
|
+
/**
|
|
646
|
+
* Click handler
|
|
647
|
+
*/
|
|
648
|
+
onClick?: () => void;
|
|
649
|
+
}
|
|
650
|
+
|
|
651
|
+
declare const LinkTile: React$1.FC<LinkTileProps>;
|
|
652
|
+
interface LinkTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
653
|
+
text?: string;
|
|
654
|
+
href?: string;
|
|
655
|
+
showIcon?: boolean;
|
|
656
|
+
}
|
|
657
|
+
|
|
658
|
+
/** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
|
|
659
|
+
declare const ThumbnailSignpost: ({ text, title, img, onClick, buttonLabel, ...props }: ThumbnailSignpostProps) => JSX.Element;
|
|
660
|
+
interface ThumbnailSignpostProps {
|
|
661
|
+
/**
|
|
662
|
+
* Title for the ThumbnailSignpost.
|
|
663
|
+
*/
|
|
664
|
+
title: string;
|
|
665
|
+
/**
|
|
666
|
+
* Text content for the ThumbnailSignpost.
|
|
667
|
+
*/
|
|
668
|
+
text: string;
|
|
669
|
+
/**
|
|
670
|
+
* Label for the button in the ThumbnailSignpost.
|
|
671
|
+
*/
|
|
672
|
+
buttonLabel?: string;
|
|
673
|
+
/**
|
|
674
|
+
* Image properties for the ThumbnailSignpost.
|
|
675
|
+
*/
|
|
676
|
+
img?: Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "anchor" | "fadeOnLoad" | "fetchPriority">;
|
|
677
|
+
/**
|
|
678
|
+
* Optional click handler for the ThumbnailSignpost.
|
|
679
|
+
*/
|
|
680
|
+
onClick?: () => void;
|
|
681
|
+
}
|
|
682
|
+
|
|
683
|
+
/**
|
|
684
|
+
* Use `PromoListingThumbnailSignpost` to give supporting information about a page or proposition in the form of the ThumbnailSignposts components.
|
|
685
|
+
*/
|
|
686
|
+
declare const PromoListingThumbnailSignpost: React$1.FC<PromoListingThumbnailSignpostProps>;
|
|
687
|
+
interface PromoListingThumbnailSignpostProps extends SectionHeadingProps {
|
|
688
|
+
thumbnailList: ThumbnailSignpostProps[];
|
|
689
|
+
}
|
|
690
|
+
|
|
691
|
+
export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, HeroLink, Highlights, LinkTile, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost };
|
|
692
|
+
export type { AccordionProps, ActionTileProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HeroLinkProps, HighlightsProps, LinkTileProps, ListProps, ProductNavigationProps, PromoListingProps, PromoListingThumbnailSignpostProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps, ThumbnailSignpostProps };
|