@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.
Files changed (125) hide show
  1. package/.turbo/turbo-build.log +19 -22
  2. package/CHANGELOG.md +30 -0
  3. package/lib/Accordion/Accordion.cjs +2 -2
  4. package/lib/Accordion/Accordion.mjs +2 -2
  5. package/lib/ActionTile/ActionTile.cjs +35 -0
  6. package/lib/ActionTile/ActionTile.mjs +33 -0
  7. package/lib/ActionTile/styles.css +1 -0
  8. package/lib/ArticleSidebar/ArticleSidebar.cjs +68 -58
  9. package/lib/ArticleSidebar/ArticleSidebar.mjs +68 -58
  10. package/lib/ArticleSidebar/styles.css +1 -1
  11. package/lib/Author/Author.cjs +2 -2
  12. package/lib/Author/Author.mjs +2 -2
  13. package/lib/BannerWithTabs/BannerWithTabs.cjs +5 -5
  14. package/lib/BannerWithTabs/BannerWithTabs.mjs +5 -5
  15. package/lib/CopyLead/CopyLead.cjs +12 -12
  16. package/lib/CopyLead/CopyLead.mjs +12 -12
  17. package/lib/DownloadList/DownloadList.cjs +5 -5
  18. package/lib/DownloadList/DownloadList.mjs +5 -5
  19. package/lib/FAQs/FAQs.cjs +16 -12
  20. package/lib/FAQs/FAQs.mjs +16 -12
  21. package/lib/FeaturePost/FeaturePost.cjs +18 -11
  22. package/lib/FeaturePost/FeaturePost.mjs +18 -11
  23. package/lib/HeroLink/HeroLink.cjs +35 -0
  24. package/lib/HeroLink/HeroLink.mjs +33 -0
  25. package/lib/HeroLink/styles.css +1 -0
  26. package/lib/Highlights/Highlights.cjs +9 -16
  27. package/lib/Highlights/Highlights.mjs +7 -14
  28. package/lib/LinkTile/LinkTile.cjs +21 -0
  29. package/lib/LinkTile/LinkTile.mjs +19 -0
  30. package/lib/LinkTile/styles.css +1 -0
  31. package/lib/ProductNavigation/ProductNavigation.cjs +10 -13
  32. package/lib/ProductNavigation/ProductNavigation.mjs +10 -13
  33. package/lib/PromoListing/PromoListing.cjs +17 -9
  34. package/lib/PromoListing/PromoListing.mjs +17 -9
  35. package/lib/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.cjs +28 -0
  36. package/lib/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.mjs +26 -0
  37. package/lib/PromoListingThumbnailSignpost/styles.css +1 -0
  38. package/lib/Quote/Quote.cjs +3 -3
  39. package/lib/Quote/Quote.mjs +3 -3
  40. package/lib/SectionHeading/SectionHeading.cjs +3 -3
  41. package/lib/SectionHeading/SectionHeading.mjs +3 -3
  42. package/lib/Statistics/Statistics.cjs +6 -6
  43. package/lib/Statistics/Statistics.mjs +6 -6
  44. package/lib/Summary/Summary.cjs +1 -1
  45. package/lib/Summary/Summary.mjs +1 -1
  46. package/lib/ThumbnailSignpost/ThumbnailSignpost.cjs +15 -0
  47. package/lib/ThumbnailSignpost/ThumbnailSignpost.mjs +9 -0
  48. package/lib/ThumbnailSignpost/styles.css +1 -0
  49. package/lib/_shared/cjs/{Accordion-D5fpUJzm.cjs → Accordion-DfNGOjTm.cjs} +5 -5
  50. package/lib/_shared/cjs/{Author-X47pv31V.cjs → Author-D4dKNQem.cjs} +2 -2
  51. package/lib/_shared/cjs/BtIconArrowAltRight-CLQdP61r.cjs +11 -0
  52. package/lib/_shared/cjs/BtIconArrowRightFill-BVCZv7Lm.cjs +11 -0
  53. package/lib/_shared/cjs/{SectionHeading-DepTV4JA.cjs → SectionHeading-DeSFM0HV.cjs} +5 -5
  54. package/lib/_shared/cjs/ThumbnailSignpost-GkOiwt-Z.cjs +39 -0
  55. package/lib/_shared/cjs/filter-attrs-BizjMsy0.cjs +27 -0
  56. package/lib/_shared/cjs/{index.es-D11PdokQ.cjs → index.es-Dq8bYrbW.cjs} +1 -1
  57. package/lib/_shared/esm/{Accordion-LLwNdzax.mjs → Accordion-cd1oYvBv.mjs} +5 -5
  58. package/lib/_shared/esm/{Author-CydDYCma.mjs → Author-HnYsFTPT.mjs} +2 -2
  59. package/lib/_shared/esm/BtIconArrowAltRight-VH6RTTnL.mjs +9 -0
  60. package/lib/_shared/esm/BtIconArrowRightFill-D0zKgk3B.mjs +9 -0
  61. package/lib/_shared/esm/{SectionHeading-BayinGP_.mjs → SectionHeading-CpDLCndw.mjs} +5 -5
  62. package/lib/_shared/esm/ThumbnailSignpost-BeRiXbUp.mjs +37 -0
  63. package/lib/_shared/esm/filter-attrs-DZ7RCEZm.mjs +25 -0
  64. package/lib/_shared/esm/{index.es-C4PyYMjI.mjs → index.es-Bfdys5__.mjs} +1 -1
  65. package/lib/index.cjs +378 -227
  66. package/lib/index.cjs.map +1 -1
  67. package/lib/index.d.cts +190 -26
  68. package/lib/index.d.mts +190 -26
  69. package/lib/index.mjs +374 -228
  70. package/lib/index.mjs.map +1 -1
  71. package/lib/styles.css +1 -1
  72. package/package.json +13 -13
  73. package/src/components/Accordion/Accordion.tsx +3 -2
  74. package/src/components/Accordion/components/AccordionDisclosureList/AccordionDisclosureList.tsx +3 -3
  75. package/src/components/Accordion/components/AccordionHeading/AccordionHeading.tsx +3 -4
  76. package/src/components/ActionTile/ActionTile.module.css +89 -0
  77. package/src/components/ActionTile/ActionTile.tsx +70 -0
  78. package/src/components/ActionTile/index.ts +1 -0
  79. package/src/components/ArticleSidebar/ArticleSidebar.module.css +6 -0
  80. package/src/components/ArticleSidebar/ArticleSidebar.tsx +115 -85
  81. package/src/components/ArticleSidebar/types/link-section.ts +2 -1
  82. package/src/components/ArticleSidebar/types/share-button.ts +1 -1
  83. package/src/components/ArticleSidebar/types/share.ts +5 -1
  84. package/src/components/ArticleSidebar/types/text-section.ts +3 -2
  85. package/src/components/ArticleSidebar/types/topic.ts +2 -2
  86. package/src/components/Author/Author.tsx +2 -2
  87. package/src/components/BannerWithTabs/BannerWithTabs.tsx +9 -3
  88. package/src/components/CopyLead/CopyLead.tsx +21 -5
  89. package/src/components/CopyLead/components/MediaContent/MediaContent.tsx +10 -1
  90. package/src/components/CopyLead/templates/Content/Content.tsx +4 -0
  91. package/src/components/CopyLead/templates/Media/Media.tsx +10 -1
  92. package/src/components/CopyLead/types/copy-lead-button.ts +1 -1
  93. package/src/components/CopyLead/types/copy-lead-image.ts +1 -1
  94. package/src/components/DownloadList/DownloadList.tsx +4 -0
  95. package/src/components/FAQs/FAQs.tsx +20 -9
  96. package/src/components/FeaturePost/FeaturePost.tsx +27 -6
  97. package/src/components/FeaturePost/components/Image/Image.tsx +31 -7
  98. package/src/components/FeaturePost/types/feature-post-app-button-footer.ts +1 -1
  99. package/src/components/FeaturePost/types/feature-post-cta-footer.ts +2 -1
  100. package/src/components/FeaturePost/types/feature-post-image.ts +3 -1
  101. package/src/components/HeroLink/HeroLink.module.css +44 -0
  102. package/src/components/HeroLink/HeroLink.tsx +136 -0
  103. package/src/components/HeroLink/index.ts +2 -0
  104. package/src/components/Highlights/Highlights.tsx +6 -1
  105. package/src/components/Highlights/components/HighlightItem/HighlightItem.tsx +1 -0
  106. package/src/components/Highlights/types/highlight-link.ts +1 -0
  107. package/src/components/LinkTile/LinkTile.module.css +57 -0
  108. package/src/components/LinkTile/LinkTile.tsx +38 -0
  109. package/src/components/LinkTile/index.ts +1 -0
  110. package/src/components/ProductNavigation/ProductNavigation.tsx +10 -11
  111. package/src/components/ProductNavigation/types/product-list.ts +1 -8
  112. package/src/components/PromoListing/PromoListing.tsx +67 -3
  113. package/src/components/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.module.css +54 -0
  114. package/src/components/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.tsx +53 -0
  115. package/src/components/PromoListingThumbnailSignpost/index.ts +4 -0
  116. package/src/components/Quote/Quote.tsx +2 -2
  117. package/src/components/SectionHeading/SectionHeading.tsx +17 -7
  118. package/src/components/Statistics/Statistics.tsx +6 -2
  119. package/src/components/ThumbnailSignpost/ThumbnailSignpost.module.css +112 -0
  120. package/src/components/ThumbnailSignpost/ThumbnailSignpost.tsx +100 -0
  121. package/src/components/ThumbnailSignpost/index.ts +4 -0
  122. package/src/components/index.ts +5 -0
  123. package/versions.json +1 -1
  124. package/lib/_shared/cjs/filter-data-attrs-ajtUvDAC.cjs +0 -15
  125. 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/dist/types/components/Image/Image';
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 { HeadingLevel as HeadingLevel$1 } from '@arc-ui/components/dist/Heading';
7
- import { VideoPlayerProps } from '@arc-ui/components/dist/VideoPlayer';
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 { VideoPlayerProps as VideoPlayerProps$1 } from '@arc-ui/components/VideoPlayer';
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/dist/types/components/TemplateBanner/TemplateBanner';
18
- import { TagProps } from '@arc-ui/components/dist/types/components/Tag/Tag';
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$1;
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: string;
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$1;
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$1;
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$1;
464
+ headingLevel?: HeadingLevel;
419
465
  }
420
466
 
421
467
  interface Topic {
422
468
  heading: string;
423
469
  tags: TagProps[];
424
- headingLevel?: HeadingLevel$1;
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$1;
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: 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: Share;
517
+ share?: Share;
468
518
  }
469
519
 
470
- type ListInformationCardButtonProps = Pick<ButtonV2Props$1, "label" | "onClick" | "href">;
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
- export { Accordion, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, Highlights, ProductNavigation, PromoListing, Quote, SectionHeading, Statistics, Summary };
528
- export type { AccordionProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HighlightsProps, ListProps, ProductNavigationProps, PromoListingProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps };
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/dist/types/components/Image/Image';
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 { HeadingLevel as HeadingLevel$1 } from '@arc-ui/components/dist/Heading';
7
- import { VideoPlayerProps } from '@arc-ui/components/dist/VideoPlayer';
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 { VideoPlayerProps as VideoPlayerProps$1 } from '@arc-ui/components/VideoPlayer';
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/dist/types/components/TemplateBanner/TemplateBanner';
18
- import { TagProps } from '@arc-ui/components/dist/types/components/Tag/Tag';
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$1;
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: string;
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$1;
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$1;
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$1;
464
+ headingLevel?: HeadingLevel;
419
465
  }
420
466
 
421
467
  interface Topic {
422
468
  heading: string;
423
469
  tags: TagProps[];
424
- headingLevel?: HeadingLevel$1;
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$1;
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: 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: Share;
517
+ share?: Share;
468
518
  }
469
519
 
470
- type ListInformationCardButtonProps = Pick<ButtonV2Props$1, "label" | "onClick" | "href">;
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
- export { Accordion, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, Highlights, ProductNavigation, PromoListing, Quote, SectionHeading, Statistics, Summary };
528
- export type { AccordionProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HighlightsProps, ListProps, ProductNavigationProps, PromoListingProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps };
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 };