@arc-ui/community-components 3.0.1 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (110) hide show
  1. package/.turbo/turbo-build.log +17 -20
  2. package/CHANGELOG.md +18 -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 +6 -6
  20. package/lib/FAQs/FAQs.mjs +6 -6
  21. package/lib/FeaturePost/FeaturePost.cjs +6 -6
  22. package/lib/FeaturePost/FeaturePost.mjs +6 -6
  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/Quote/Quote.cjs +3 -3
  36. package/lib/Quote/Quote.mjs +3 -3
  37. package/lib/SectionHeading/SectionHeading.cjs +3 -3
  38. package/lib/SectionHeading/SectionHeading.mjs +3 -3
  39. package/lib/Statistics/Statistics.cjs +6 -6
  40. package/lib/Statistics/Statistics.mjs +6 -6
  41. package/lib/Summary/Summary.cjs +1 -1
  42. package/lib/Summary/Summary.mjs +1 -1
  43. package/lib/_shared/cjs/{Accordion-D5fpUJzm.cjs → Accordion-BCJIm1Gq.cjs} +4 -4
  44. package/lib/_shared/cjs/{Author-X47pv31V.cjs → Author-D4dKNQem.cjs} +2 -2
  45. package/lib/_shared/cjs/BtIconArrowAltRight-CLQdP61r.cjs +11 -0
  46. package/lib/_shared/cjs/BtIconArrowRightFill-BVCZv7Lm.cjs +11 -0
  47. package/lib/_shared/cjs/{SectionHeading-DepTV4JA.cjs → SectionHeading-DeSFM0HV.cjs} +5 -5
  48. package/lib/_shared/cjs/filter-attrs-BizjMsy0.cjs +27 -0
  49. package/lib/_shared/cjs/{index.es-D11PdokQ.cjs → index.es-DzI6hGjj.cjs} +1 -1
  50. package/lib/_shared/esm/{Accordion-LLwNdzax.mjs → Accordion-BN_lZk6L.mjs} +4 -4
  51. package/lib/_shared/esm/{Author-CydDYCma.mjs → Author-HnYsFTPT.mjs} +2 -2
  52. package/lib/_shared/esm/BtIconArrowAltRight-VH6RTTnL.mjs +9 -0
  53. package/lib/_shared/esm/BtIconArrowRightFill-D0zKgk3B.mjs +9 -0
  54. package/lib/_shared/esm/{SectionHeading-BayinGP_.mjs → SectionHeading-CpDLCndw.mjs} +5 -5
  55. package/lib/_shared/esm/filter-attrs-DZ7RCEZm.mjs +25 -0
  56. package/lib/_shared/esm/{index.es-C4PyYMjI.mjs → index.es-B6Bolkcx.mjs} +1 -1
  57. package/lib/index.cjs +315 -217
  58. package/lib/index.cjs.map +1 -1
  59. package/lib/index.d.cts +155 -26
  60. package/lib/index.d.mts +155 -26
  61. package/lib/index.mjs +313 -218
  62. package/lib/index.mjs.map +1 -1
  63. package/lib/styles.css +1 -1
  64. package/package.json +13 -13
  65. package/src/components/Accordion/Accordion.tsx +3 -2
  66. package/src/components/Accordion/components/AccordionDisclosureList/AccordionDisclosureList.tsx +2 -2
  67. package/src/components/Accordion/components/AccordionHeading/AccordionHeading.tsx +3 -4
  68. package/src/components/ActionTile/ActionTile.module.css +89 -0
  69. package/src/components/ActionTile/ActionTile.tsx +70 -0
  70. package/src/components/ActionTile/index.ts +1 -0
  71. package/src/components/ArticleSidebar/ArticleSidebar.module.css +6 -0
  72. package/src/components/ArticleSidebar/ArticleSidebar.tsx +115 -85
  73. package/src/components/ArticleSidebar/types/link-section.ts +2 -1
  74. package/src/components/ArticleSidebar/types/share-button.ts +1 -1
  75. package/src/components/ArticleSidebar/types/share.ts +5 -1
  76. package/src/components/ArticleSidebar/types/text-section.ts +3 -2
  77. package/src/components/ArticleSidebar/types/topic.ts +2 -2
  78. package/src/components/Author/Author.tsx +2 -2
  79. package/src/components/BannerWithTabs/BannerWithTabs.tsx +9 -3
  80. package/src/components/CopyLead/CopyLead.tsx +21 -5
  81. package/src/components/CopyLead/components/MediaContent/MediaContent.tsx +10 -1
  82. package/src/components/CopyLead/templates/Content/Content.tsx +4 -0
  83. package/src/components/CopyLead/templates/Media/Media.tsx +10 -1
  84. package/src/components/CopyLead/types/copy-lead-button.ts +1 -1
  85. package/src/components/CopyLead/types/copy-lead-image.ts +1 -1
  86. package/src/components/DownloadList/DownloadList.tsx +4 -0
  87. package/src/components/FAQs/FAQs.tsx +7 -3
  88. package/src/components/FeaturePost/FeaturePost.tsx +22 -5
  89. package/src/components/FeaturePost/types/feature-post-app-button-footer.ts +1 -1
  90. package/src/components/FeaturePost/types/feature-post-cta-footer.ts +2 -1
  91. package/src/components/FeaturePost/types/feature-post-image.ts +1 -1
  92. package/src/components/HeroLink/HeroLink.module.css +44 -0
  93. package/src/components/HeroLink/HeroLink.tsx +136 -0
  94. package/src/components/HeroLink/index.ts +2 -0
  95. package/src/components/Highlights/Highlights.tsx +6 -1
  96. package/src/components/Highlights/components/HighlightItem/HighlightItem.tsx +1 -0
  97. package/src/components/Highlights/types/highlight-link.ts +1 -0
  98. package/src/components/LinkTile/LinkTile.module.css +57 -0
  99. package/src/components/LinkTile/LinkTile.tsx +38 -0
  100. package/src/components/LinkTile/index.ts +1 -0
  101. package/src/components/ProductNavigation/ProductNavigation.tsx +10 -11
  102. package/src/components/ProductNavigation/types/product-list.ts +1 -8
  103. package/src/components/PromoListing/PromoListing.tsx +67 -3
  104. package/src/components/Quote/Quote.tsx +2 -2
  105. package/src/components/SectionHeading/SectionHeading.tsx +17 -7
  106. package/src/components/Statistics/Statistics.tsx +6 -2
  107. package/src/components/index.ts +3 -0
  108. package/versions.json +1 -1
  109. package/lib/_shared/cjs/filter-data-attrs-ajtUvDAC.cjs +0 -15
  110. package/lib/_shared/esm/filter-data-attrs-V7cbJuwS.mjs +0 -13
package/lib/styles.css CHANGED
@@ -1 +1 @@
1
- .AccordionHeading-module_accordion-header__8s12f{padding-bottom:40px;width:auto}.AccordionHeading-module_accordion-header--hasImage__wbDjW{display:flex;flex-direction:column;gap:16px}@media (min-width:636px){.AccordionHeading-module_accordion-header--padded__me1JY{min-width:588px;width:auto}.AccordionHeading-module_accordion-header--hasImage__wbDjW{align-items:center;flex-direction:row;gap:32px}}@media (min-width:768px){.AccordionHeading-module_accordion-header--padded__me1JY{min-width:720px;padding:0 186px 40px 0}}@media (min-width:1024px){.AccordionHeading-module_accordion-header--padded__me1JY{min-width:960px;padding:0 246px 40px 0}}@media (min-width:1280px){.AccordionHeading-module_accordion-header--padded__me1JY{min-width:1216px;padding:0 312px 40px 0}}.AccordionHeading-module_accordion-header--headingSizeM__amLfy{padding-bottom:24px;width:auto}.AccordionDisclosureList-module_AccordionDisclosureListItem__p8LIT.AccordionDisclosureList-module_AccordionDisclosureListItem__p8LIT:not(:first-child)>*>summary{border-top:0;line-height:29px}.Accordion-module_Accordion__LsXTU li,.Accordion-module_Accordion__LsXTU ul{list-style:none;margin:0;padding:0}.Author-module_authorContent__TBY7b{padding-left:var(--sem-space-padding-70)}.Author-module_largeAvatar__Vco03{margin-bottom:var(--sem-space-gap-5)}.CopyLead-module_buttonContainer__3OaRG{margin:var(--sem-space-padding-150) auto 0;width:100%}.CopyLead-module_col__0Da5H{flex:1 1 auto;width:100%}.CopyLead-module_container__I91ym{align-items:flex-start;display:flex;gap:var(--sem-space-padding-150)}.CopyLead-module_container--content__e8LxG{flex-direction:column}.CopyLead-module_container--media__QcMWi{flex-direction:column-reverse}.CopyLead-module_container--align-center__Fh1Sd{align-items:center}.CopyLead-module_container--align-top__UIXOZ{align-items:flex-start}.CopyLead-module_list__arnJd{list-style:none;margin:0;max-width:480px;padding:0}.CopyLead-module_listItem__NscHE{display:flex}.CopyLead-module_listItem__NscHE:nth-of-type(n+2){margin-top:var(--sem-space-padding-150)}.CopyLead-module_listItemCentered__Kwdab{align-items:center}.CopyLead-module_listItemIconContainer__dgnhJ{flex:0 0 auto}.CopyLead-module_listItemTextContainer__Dl9lw{flex:1 1 auto;padding:0 0 0 var(--sem-space-padding-80)}.CopyLead-module_imgWrapper__HYP3w{border-radius:var(--sem-border-radius-s);overflow:hidden}.CopyLead-module_mediaContainer__PxTnm{margin-bottom:var(--sem-space-padding-150)}.CopyLead-module_content__Bja1D{max-width:715px}@media (min-width:636px){.CopyLead-module_buttonContainer__3OaRG{width:-moz-max-content;width:max-content}}@media (min-width:768px){.CopyLead-module_container__I91ym{gap:var(--sem-space-padding-110)}.CopyLead-module_container--content__e8LxG,.CopyLead-module_container--media__QcMWi{flex-direction:row}.CopyLead-module_container--reverse__Gq9u8{flex-direction:row-reverse}.CopyLead-module_buttonContainer__3OaRG{margin:var(--sem-space-padding-150) 0 0}.CopyLead-module_col__0Da5H{width:50%}.CopyLead-module_list__arnJd{max-width:100%}.CopyLead-module_listItemTextContainer__Dl9lw{padding:0 var(--sem-space-padding-80)}}@media (min-width:1024px){.CopyLead-module_listItemTextContainer__Dl9lw{padding:0 var(--sem-space-padding-110)}}@media (min-width:1280px){.CopyLead-module_container__I91ym{gap:var(--sem-space-padding-130)}.CopyLead-module_listItemTextContainer__Dl9lw{padding:0 var(--sem-space-padding-130)}}.SectionHeading-module_section-header__iB07I{padding-bottom:40px;width:auto}.SectionHeading-module_section-header--hasImage__Ka3T7{display:flex;flex-direction:column;gap:16px}@media (min-width:636px){.SectionHeading-module_section-header--padded__0FXP2{min-width:588px;width:auto}.SectionHeading-module_section-header--hasImage__Ka3T7{align-items:center;flex-direction:row;gap:32px}}@media (min-width:768px){.SectionHeading-module_section-header--padded__0FXP2{min-width:720px;padding:0 186px 40px 0}}@media (min-width:1024px){.SectionHeading-module_section-header--padded__0FXP2{min-width:960px;padding:0 246px 40px 0}}@media (min-width:1280px){.SectionHeading-module_section-header--padded__0FXP2{min-width:1216px;padding:0 312px 40px 0}}@media (min-width:768px){.DownloadList-module_headingContainer__PNio8{max-width:75%}}html{scroll-behavior:smooth}.FAQs-module_FAQs__FtQr4 li,.FAQs-module_FAQs__FtQr4 ul{list-style:none;margin:0;padding:0}.FAQs-module_linkListSection__RdQkU{display:flex;flex-direction:column;margin-bottom:40px}.FAQs-module_linkListTitle__RVni3{margin-bottom:8px}.FAQs-module_linkList__dPyXj{display:flex;flex-wrap:wrap;row-gap:8px}.FAQs-module_linkListSection__RdQkU .FAQs-module_linkListItem__S83CL:after{color:#d9d9d9;content:"|";padding:0 8px}.FAQs-module_linkListSection__RdQkU .FAQs-module_linkListItem__S83CL:last-child:after{content:""}@media (--arc-custom-media-min-width-s-px ){.FAQs-module_linkList--padded__8Paxc{min-width:588px;width:auto}}@media (--arc-custom-media-min-width-m-px ){.FAQs-module_linkList--padded__8Paxc{min-width:720px;padding-right:186px}}@media (--arc-custom-media-min-width-l-px ){.FAQs-module_linkList--padded__8Paxc{min-width:960px;padding-right:246px}}@media (--arc-custom-media-min-width-xl-px ){.FAQs-module_linkList--padded__8Paxc{min-width:1216px;padding-right:312px}}.FeaturePost-module_labelDate__NXOgY{padding-top:var(--sem-space-padding-20);text-transform:uppercase}.FeaturePost-module_authorContent__FEuRO{padding-left:var(--sem-space-padding-70)}.FeaturePost-module_googlePlayButtonWrapper__GI-ag{padding:var(--sem-space-padding-70) 0 0}.FeaturePost-module_imgWrapper__r6omd{border-radius:var(--sem-border-radius-s);overflow:hidden}@media (min-width:636px){.FeaturePost-module_googlePlayButtonWrapper__GI-ag{padding:0 0 0 var(--sem-space-padding-70)}}@media (min-width:768px){.FeaturePost-module_featurePost__9jY21{display:flex;gap:24px}.FeaturePost-module_featurePostReversed__WQRXm{flex-direction:row-reverse}.FeaturePost-module_contentContainer__kdus7{padding:0 var(--sem-space-padding-110) 0 0}.FeaturePost-module_col__eW8gY{flex:0 1 auto;width:50%}.FeaturePost-module_labelDate__NXOgY{padding-left:var(--sem-space-padding-70)}}@media (min-width:1280px){.FeaturePost-module_featurePost__9jY21{gap:32px}.FeaturePost-module_contentContainer__kdus7{padding:0 var(--sem-space-padding-130) 0 0}}.Highlights-module_highlights__Hf7Zq{grid-gap:48px 24px;display:grid;gap:48px 24px;grid-template-columns:1fr}.Highlights-module_highlightItem__-N6le{max-width:480px;width:auto}@media (min-width:636px){.Highlights-module_highlights__Hf7Zq{grid-template-columns:1fr 1fr}.Highlights-module_highlightItem__-N6le{min-width:282px;padding-right:0}}@media (min-width:768px){.Highlights-module_highlights2Column__6qIuI{grid-template-columns:1fr 1fr}.Highlights-module_highlights2Column__6qIuI .Highlights-module_highlightItem__-N6le{max-width:-moz-max-content;max-width:max-content;min-width:348px;padding-right:62px}.Highlights-module_highlights3Column__qsCMP{grid-template-columns:1fr 1fr 1fr}.Highlights-module_highlights3Column__qsCMP .Highlights-module_highlightItem__-N6le{min-width:224px}}@media (min-width:1024px){.Highlights-module_highlights2Column__6qIuI{grid-template-columns:1fr 1fr}.Highlights-module_highlights2Column__6qIuI .Highlights-module_highlightItem__-N6le{min-width:468px;padding-right:82px}.Highlights-module_highlights3Column__qsCMP{grid-template-columns:1fr 1fr 1fr}.Highlights-module_highlights3Column__qsCMP .Highlights-module_highlightItem__-N6le{min-width:304px}}@media (min-width:1280px){.Highlights-module_highlights__Hf7Zq{gap:48px 32px}.Highlights-module_highlights2Column__6qIuI{grid-template-columns:1fr 1fr}.Highlights-module_highlights2Column__6qIuI .Highlights-module_highlightItem__-N6le{min-width:592px;padding-right:104px}.Highlights-module_highlights3Column__qsCMP{grid-template-columns:1fr 1fr 1fr}.Highlights-module_highlights3Column__qsCMP .Highlights-module_highlightItem__-N6le{min-width:384px}}.PromoListing-module_PromoListing__6ensv{max-width:1280px}.PromoListing-module_carouselSlide__AMTPF{height:100%;padding:6px}.PromoListing-module_cardGrid__llf73{grid-gap:16px;display:grid;gap:16px;grid-auto-rows:1fr;grid-template-columns:repeat(1,1fr);list-style:none;margin:0;padding:0}.PromoListing-module_cardWrapper__I4iwh,.PromoListing-module_cardWrapper__I4iwh>*{height:100%}.PromoListing-module_cardWrapperCarousel__t-2qM{height:100%;margin-right:16px;width:288px}.PromoListing-module_cardWrapperCarousel__t-2qM>*{height:100%}@media (min-width:636px){.PromoListing-module_cardWrapperCarousel__t-2qM{margin-right:24px}.PromoListing-module_cardGrid__llf73{gap:24px}.PromoListing-module_cardGrid__llf73.PromoListing-module_columns-2__GRFxb,.PromoListing-module_cardGrid__llf73.PromoListing-module_columns-3__y6jWS{grid-template-columns:repeat(2,1fr)}}@media (min-width:768px){.PromoListing-module_cardWrapperCarousel__t-2qM{width:348px}}@media (min-width:1024px){.PromoListing-module_cardGrid__llf73.PromoListing-module_columns-3__y6jWS{grid-template-columns:repeat(3,1fr)}.PromoListing-module_cardGrid__llf73.PromoListing-module_columns-2__GRFxb{grid-template-columns:repeat(2,1fr)}}@media (min-width:1280px){.PromoListing-module_cardGrid__llf73{gap:32px}}.Quote-module_blockQuote__STj-z{font-size:36px;font-style:normal;font-weight:500;margin:0}.Quote-module_quoteContent__kWc51{line-height:44px;margin:0;padding-bottom:32px;padding-top:32px}.Quote-module_quoteDefault__tU5db{fill:#5514b4;color:#5514b4}.Quote-module_quoteSecondary__3Rk3f{fill:#434343;color:#434343}.Quote-module_quoteIcon__HK1TV{height:76.471px;width:100px}svg{padding:0}@media (min-width:768px){.Quote-module_blockQuote__STj-z{font-size:40px}.Quote-module_quoteContent__kWc51{line-height:48px}}@media (min-width:1024px){.Quote-module_quoteIcon__HK1TV{height:95.588px;width:125px}}@media (min-width:1280px){.Quote-module_blockQuote__STj-z{font-size:56px}.Quote-module_quoteContent__kWc51{line-height:64px}}.Summary-module_ruleContainer__ydWlG{flex:0 1 auto;padding:24px}.Summary-module_ruleContainer__ydWlG .arc-Rule{margin:0}@media (min-width:768px){.Summary-module_row__SKV--{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)}}@media (min-width:1024px){.Summary-module_ruleContainer__ydWlG{padding:12px 48px}.Summary-module_row__SKV--{padding:0 24px}}.Statistics-module_list__BI-eQ{list-style:none;margin:0;padding:0}.Statistics-module_mutedText__MR1JM,.arc a.Statistics-module_mutedText__MR1JM{color:var(--sem-color-text-primary-light-subtle)}.Statistics-module_statWrapper__83OnM{margin-bottom:-12px}@media (min-width:636px){.Statistics-module_statWrapper__83OnM{margin-bottom:0}}.BannerWithTabs-module_contentSwitcherWrapper__xvz39{display:none}.BannerWithTabs-module_contentSwitcherDropdownWrapper__eT5zq{display:block}@media (min-width:636px){.BannerWithTabs-module_contentSwitcherWrapper__xvz39{display:block}.BannerWithTabs-module_contentSwitcherDropdownWrapper__eT5zq{display:none}}.BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO{text-align:center}@media (min-width:636px){.BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO{padding-left:62px;padding-right:62px}}@media (min-width:768px){.BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO{padding-left:86px;padding-right:86px}}@media (min-width:1024px){.BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO{padding-left:104px;padding-right:104px}}.ArticleSidebar-module_tagGroup__rIPQc{display:flex;flex-wrap:wrap;gap:16px}.ArticleSidebar-module_textContent__3nCfG{padding-right:16px}.ArticleSidebar-module_shareButtonContainer__iAfHL{display:flex;gap:8px}.arc a.ArticleSidebar-module_shareButton__rb-1E{background:var(--sem-color-bg-secondary-light-default);border:1px solid var(--sem-color-border-secondary-light-subtle);border-radius:50%;color:var(--sem-color-fg-secondary-light-default);cursor:pointer;display:block;padding:12px;transition:color .4s ease,border-color .4s ease}.arc a.ArticleSidebar-module_shareButton__rb-1E:hover{border-color:var(--sem-color-bg-primary-light-strong);color:var(--sem-color-bg-primary-light-strong)}.ProductNavigation-module_product-navigation-grid__RzFq8{grid-gap:24px;display:grid;grid-auto-rows:1fr;grid-template-columns:repeat(1,1fr);list-style:none;margin:0;max-width:1216px;padding:0}@media (min-width:636px){.ProductNavigation-module_product-navigation-grid__RzFq8{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.ProductNavigation-module_product-navigation-grid__RzFq8{grid-template-columns:repeat(3,1fr)}}@media (min-width:1280px){.ProductNavigation-module_product-navigation-grid__RzFq8{grid-gap:32px}}.ProductNavigation-module_productNavigation-skipLink__fy8ZJ{margin-top:56px;position:absolute;scale:0;width:calc(100% - 32px)}@media (min-width:768px){.ProductNavigation-module_productNavigation-skipLink__fy8ZJ{margin-left:12px;margin-top:0;position:static;scale:0;width:auto}}.ProductNavigation-module_productNavigation-skipLink__fy8ZJ[focus-within]{scale:1}.ProductNavigation-module_productNavigation-skipLink__fy8ZJ:focus-within{scale:1}.ContentInfoWidget-module_container__yaS-8{align-items:center;display:flex;flex-direction:row;max-width:250px;overflow-x:hidden;white-space:nowrap}.ContentInfoWidget-module_text__O1BdZ{padding-left:8px}.ContentInfoWidget-module_icon__LEww1{color:var(--sem-color-fg-secondary-light-subtle)}
1
+ .AccordionHeading-module_accordion-header__8s12f{padding-bottom:40px;width:auto}.AccordionHeading-module_accordion-header--hasImage__wbDjW{display:flex;flex-direction:column;gap:16px}@media (min-width:636px){.AccordionHeading-module_accordion-header--padded__me1JY{min-width:588px;width:auto}.AccordionHeading-module_accordion-header--hasImage__wbDjW{align-items:center;flex-direction:row;gap:32px}}@media (min-width:768px){.AccordionHeading-module_accordion-header--padded__me1JY{min-width:720px;padding:0 186px 40px 0}}@media (min-width:1024px){.AccordionHeading-module_accordion-header--padded__me1JY{min-width:960px;padding:0 246px 40px 0}}@media (min-width:1280px){.AccordionHeading-module_accordion-header--padded__me1JY{min-width:1216px;padding:0 312px 40px 0}}.AccordionHeading-module_accordion-header--headingSizeM__amLfy{padding-bottom:24px;width:auto}.AccordionDisclosureList-module_AccordionDisclosureListItem__p8LIT.AccordionDisclosureList-module_AccordionDisclosureListItem__p8LIT:not(:first-child)>*>summary{border-top:0;line-height:29px}.Accordion-module_Accordion__LsXTU li,.Accordion-module_Accordion__LsXTU ul{list-style:none;margin:0;padding:0}.Author-module_authorContent__TBY7b{padding-left:var(--sem-space-padding-70)}.Author-module_largeAvatar__Vco03{margin-bottom:var(--sem-space-gap-5)}.CopyLead-module_buttonContainer__3OaRG{margin:var(--sem-space-padding-150) auto 0;width:100%}.CopyLead-module_col__0Da5H{flex:1 1 auto;width:100%}.CopyLead-module_container__I91ym{align-items:flex-start;display:flex;gap:var(--sem-space-padding-150)}.CopyLead-module_container--content__e8LxG{flex-direction:column}.CopyLead-module_container--media__QcMWi{flex-direction:column-reverse}.CopyLead-module_container--align-center__Fh1Sd{align-items:center}.CopyLead-module_container--align-top__UIXOZ{align-items:flex-start}.CopyLead-module_list__arnJd{list-style:none;margin:0;max-width:480px;padding:0}.CopyLead-module_listItem__NscHE{display:flex}.CopyLead-module_listItem__NscHE:nth-of-type(n+2){margin-top:var(--sem-space-padding-150)}.CopyLead-module_listItemCentered__Kwdab{align-items:center}.CopyLead-module_listItemIconContainer__dgnhJ{flex:0 0 auto}.CopyLead-module_listItemTextContainer__Dl9lw{flex:1 1 auto;padding:0 0 0 var(--sem-space-padding-80)}.CopyLead-module_imgWrapper__HYP3w{border-radius:var(--sem-border-radius-s);overflow:hidden}.CopyLead-module_mediaContainer__PxTnm{margin-bottom:var(--sem-space-padding-150)}.CopyLead-module_content__Bja1D{max-width:715px}@media (min-width:636px){.CopyLead-module_buttonContainer__3OaRG{width:-moz-max-content;width:max-content}}@media (min-width:768px){.CopyLead-module_container__I91ym{gap:var(--sem-space-padding-110)}.CopyLead-module_container--content__e8LxG,.CopyLead-module_container--media__QcMWi{flex-direction:row}.CopyLead-module_container--reverse__Gq9u8{flex-direction:row-reverse}.CopyLead-module_buttonContainer__3OaRG{margin:var(--sem-space-padding-150) 0 0}.CopyLead-module_col__0Da5H{width:50%}.CopyLead-module_list__arnJd{max-width:100%}.CopyLead-module_listItemTextContainer__Dl9lw{padding:0 var(--sem-space-padding-80)}}@media (min-width:1024px){.CopyLead-module_listItemTextContainer__Dl9lw{padding:0 var(--sem-space-padding-110)}}@media (min-width:1280px){.CopyLead-module_container__I91ym{gap:var(--sem-space-padding-130)}.CopyLead-module_listItemTextContainer__Dl9lw{padding:0 var(--sem-space-padding-130)}}.SectionHeading-module_section-header__iB07I{padding-bottom:40px;width:auto}.SectionHeading-module_section-header--hasImage__Ka3T7{display:flex;flex-direction:column;gap:16px}@media (min-width:636px){.SectionHeading-module_section-header--padded__0FXP2{min-width:588px;width:auto}.SectionHeading-module_section-header--hasImage__Ka3T7{align-items:center;flex-direction:row;gap:32px}}@media (min-width:768px){.SectionHeading-module_section-header--padded__0FXP2{min-width:720px;padding:0 186px 40px 0}}@media (min-width:1024px){.SectionHeading-module_section-header--padded__0FXP2{min-width:960px;padding:0 246px 40px 0}}@media (min-width:1280px){.SectionHeading-module_section-header--padded__0FXP2{min-width:1216px;padding:0 312px 40px 0}}@media (min-width:768px){.DownloadList-module_headingContainer__PNio8{max-width:75%}}html{scroll-behavior:smooth}.FAQs-module_FAQs__FtQr4 li,.FAQs-module_FAQs__FtQr4 ul{list-style:none;margin:0;padding:0}.FAQs-module_linkListSection__RdQkU{display:flex;flex-direction:column;margin-bottom:40px}.FAQs-module_linkListTitle__RVni3{margin-bottom:8px}.FAQs-module_linkList__dPyXj{display:flex;flex-wrap:wrap;row-gap:8px}.FAQs-module_linkListSection__RdQkU .FAQs-module_linkListItem__S83CL:after{color:#d9d9d9;content:"|";padding:0 8px}.FAQs-module_linkListSection__RdQkU .FAQs-module_linkListItem__S83CL:last-child:after{content:""}@media (--arc-custom-media-min-width-s-px ){.FAQs-module_linkList--padded__8Paxc{min-width:588px;width:auto}}@media (--arc-custom-media-min-width-m-px ){.FAQs-module_linkList--padded__8Paxc{min-width:720px;padding-right:186px}}@media (--arc-custom-media-min-width-l-px ){.FAQs-module_linkList--padded__8Paxc{min-width:960px;padding-right:246px}}@media (--arc-custom-media-min-width-xl-px ){.FAQs-module_linkList--padded__8Paxc{min-width:1216px;padding-right:312px}}.FeaturePost-module_labelDate__NXOgY{padding-top:var(--sem-space-padding-20);text-transform:uppercase}.FeaturePost-module_authorContent__FEuRO{padding-left:var(--sem-space-padding-70)}.FeaturePost-module_googlePlayButtonWrapper__GI-ag{padding:var(--sem-space-padding-70) 0 0}.FeaturePost-module_imgWrapper__r6omd{border-radius:var(--sem-border-radius-s);overflow:hidden}@media (min-width:636px){.FeaturePost-module_googlePlayButtonWrapper__GI-ag{padding:0 0 0 var(--sem-space-padding-70)}}@media (min-width:768px){.FeaturePost-module_featurePost__9jY21{display:flex;gap:24px}.FeaturePost-module_featurePostReversed__WQRXm{flex-direction:row-reverse}.FeaturePost-module_contentContainer__kdus7{padding:0 var(--sem-space-padding-110) 0 0}.FeaturePost-module_col__eW8gY{flex:0 1 auto;width:50%}.FeaturePost-module_labelDate__NXOgY{padding-left:var(--sem-space-padding-70)}}@media (min-width:1280px){.FeaturePost-module_featurePost__9jY21{gap:32px}.FeaturePost-module_contentContainer__kdus7{padding:0 var(--sem-space-padding-130) 0 0}}.Highlights-module_highlights__Hf7Zq{grid-gap:48px 24px;display:grid;gap:48px 24px;grid-template-columns:1fr}.Highlights-module_highlightItem__-N6le{max-width:480px;width:auto}@media (min-width:636px){.Highlights-module_highlights__Hf7Zq{grid-template-columns:1fr 1fr}.Highlights-module_highlightItem__-N6le{min-width:282px;padding-right:0}}@media (min-width:768px){.Highlights-module_highlights2Column__6qIuI{grid-template-columns:1fr 1fr}.Highlights-module_highlights2Column__6qIuI .Highlights-module_highlightItem__-N6le{max-width:-moz-max-content;max-width:max-content;min-width:348px;padding-right:62px}.Highlights-module_highlights3Column__qsCMP{grid-template-columns:1fr 1fr 1fr}.Highlights-module_highlights3Column__qsCMP .Highlights-module_highlightItem__-N6le{min-width:224px}}@media (min-width:1024px){.Highlights-module_highlights2Column__6qIuI{grid-template-columns:1fr 1fr}.Highlights-module_highlights2Column__6qIuI .Highlights-module_highlightItem__-N6le{min-width:468px;padding-right:82px}.Highlights-module_highlights3Column__qsCMP{grid-template-columns:1fr 1fr 1fr}.Highlights-module_highlights3Column__qsCMP .Highlights-module_highlightItem__-N6le{min-width:304px}}@media (min-width:1280px){.Highlights-module_highlights__Hf7Zq{gap:48px 32px}.Highlights-module_highlights2Column__6qIuI{grid-template-columns:1fr 1fr}.Highlights-module_highlights2Column__6qIuI .Highlights-module_highlightItem__-N6le{min-width:592px;padding-right:104px}.Highlights-module_highlights3Column__qsCMP{grid-template-columns:1fr 1fr 1fr}.Highlights-module_highlights3Column__qsCMP .Highlights-module_highlightItem__-N6le{min-width:384px}}.PromoListing-module_PromoListing__6ensv{max-width:1280px}.PromoListing-module_carouselSlide__AMTPF{height:100%;padding:6px}.PromoListing-module_cardGrid__llf73{grid-gap:16px;display:grid;gap:16px;grid-auto-rows:1fr;grid-template-columns:repeat(1,1fr);list-style:none;margin:0;padding:0}.PromoListing-module_cardWrapper__I4iwh,.PromoListing-module_cardWrapper__I4iwh>*{height:100%}.PromoListing-module_cardWrapperCarousel__t-2qM{height:100%;margin-right:16px;width:288px}.PromoListing-module_cardWrapperCarousel__t-2qM>*{height:100%}@media (min-width:636px){.PromoListing-module_cardWrapperCarousel__t-2qM{margin-right:24px}.PromoListing-module_cardGrid__llf73{gap:24px}.PromoListing-module_cardGrid__llf73.PromoListing-module_columns-2__GRFxb,.PromoListing-module_cardGrid__llf73.PromoListing-module_columns-3__y6jWS{grid-template-columns:repeat(2,1fr)}}@media (min-width:768px){.PromoListing-module_cardWrapperCarousel__t-2qM{width:348px}}@media (min-width:1024px){.PromoListing-module_cardGrid__llf73.PromoListing-module_columns-3__y6jWS{grid-template-columns:repeat(3,1fr)}.PromoListing-module_cardGrid__llf73.PromoListing-module_columns-2__GRFxb{grid-template-columns:repeat(2,1fr)}}@media (min-width:1280px){.PromoListing-module_cardGrid__llf73{gap:32px}}.Quote-module_blockQuote__STj-z{font-size:36px;font-style:normal;font-weight:500;margin:0}.Quote-module_quoteContent__kWc51{line-height:44px;margin:0;padding-bottom:32px;padding-top:32px}.Quote-module_quoteDefault__tU5db{fill:#5514b4;color:#5514b4}.Quote-module_quoteSecondary__3Rk3f{fill:#434343;color:#434343}.Quote-module_quoteIcon__HK1TV{height:76.471px;width:100px}svg{padding:0}@media (min-width:768px){.Quote-module_blockQuote__STj-z{font-size:40px}.Quote-module_quoteContent__kWc51{line-height:48px}}@media (min-width:1024px){.Quote-module_quoteIcon__HK1TV{height:95.588px;width:125px}}@media (min-width:1280px){.Quote-module_blockQuote__STj-z{font-size:56px}.Quote-module_quoteContent__kWc51{line-height:64px}}.Summary-module_ruleContainer__ydWlG{flex:0 1 auto;padding:24px}.Summary-module_ruleContainer__ydWlG .arc-Rule{margin:0}@media (min-width:768px){.Summary-module_row__SKV--{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)}}@media (min-width:1024px){.Summary-module_ruleContainer__ydWlG{padding:12px 48px}.Summary-module_row__SKV--{padding:0 24px}}.Statistics-module_list__BI-eQ{list-style:none;margin:0;padding:0}.Statistics-module_mutedText__MR1JM,.arc a.Statistics-module_mutedText__MR1JM{color:var(--sem-color-text-primary-light-subtle)}.Statistics-module_statWrapper__83OnM{margin-bottom:-12px}@media (min-width:636px){.Statistics-module_statWrapper__83OnM{margin-bottom:0}}.BannerWithTabs-module_contentSwitcherWrapper__xvz39{display:none}.BannerWithTabs-module_contentSwitcherDropdownWrapper__eT5zq{display:block}@media (min-width:636px){.BannerWithTabs-module_contentSwitcherWrapper__xvz39{display:block}.BannerWithTabs-module_contentSwitcherDropdownWrapper__eT5zq{display:none}}.BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO{text-align:center}@media (min-width:636px){.BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO{padding-left:62px;padding-right:62px}}@media (min-width:768px){.BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO{padding-left:86px;padding-right:86px}}@media (min-width:1024px){.BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO{padding-left:104px;padding-right:104px}}.ArticleSidebar-module_tagGroup__rIPQc{display:flex;flex-wrap:wrap;gap:16px}.ArticleSidebar-module_textContent__3nCfG{padding-right:16px}.ArticleSidebar-module_additionalContentContainer__91L4n{display:flex;flex-direction:column;gap:16px}.ArticleSidebar-module_shareButtonContainer__iAfHL{display:flex;gap:8px}.arc a.ArticleSidebar-module_shareButton__rb-1E{background:var(--sem-color-bg-secondary-light-default);border:1px solid var(--sem-color-border-secondary-light-subtle);border-radius:50%;color:var(--sem-color-fg-secondary-light-default);cursor:pointer;display:block;padding:12px;transition:color .4s ease,border-color .4s ease}.arc a.ArticleSidebar-module_shareButton__rb-1E:hover{border-color:var(--sem-color-bg-primary-light-strong);color:var(--sem-color-bg-primary-light-strong)}.ProductNavigation-module_product-navigation-grid__RzFq8{grid-gap:24px;display:grid;grid-auto-rows:1fr;grid-template-columns:repeat(1,1fr);list-style:none;margin:0;max-width:1216px;padding:0}@media (min-width:636px){.ProductNavigation-module_product-navigation-grid__RzFq8{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.ProductNavigation-module_product-navigation-grid__RzFq8{grid-template-columns:repeat(3,1fr)}}@media (min-width:1280px){.ProductNavigation-module_product-navigation-grid__RzFq8{grid-gap:32px}}.ProductNavigation-module_productNavigation-skipLink__fy8ZJ{margin-top:56px;position:absolute;scale:0;width:calc(100% - 32px)}@media (min-width:768px){.ProductNavigation-module_productNavigation-skipLink__fy8ZJ{margin-left:12px;margin-top:0;position:static;scale:0;width:auto}}.ProductNavigation-module_productNavigation-skipLink__fy8ZJ[focus-within]{scale:1}.ProductNavigation-module_productNavigation-skipLink__fy8ZJ:focus-within{scale:1}.ContentInfoWidget-module_container__yaS-8{align-items:center;display:flex;flex-direction:row;max-width:250px;overflow-x:hidden;white-space:nowrap}.ContentInfoWidget-module_text__O1BdZ{padding-left:8px}.ContentInfoWidget-module_icon__LEww1{color:var(--sem-color-fg-secondary-light-subtle)}.HeroLink-module_heroLink__WUqWB{align-items:center;background:transparent;border:2px solid #e5e5e5;border-radius:32px;color:#5514b4;cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:4px;height:-moz-fit-content;height:fit-content;justify-content:center;line-height:1;padding:16px 16px 16px 24px;text-decoration:none;transition:all .2s ease;width:-moz-fit-content;width:fit-content}.HeroLink-module_heroLink__WUqWB:hover{border-color:#3f187f;color:#3f187f}.HeroLink-module_heroLink-inner__RE5i8{align-items:center;display:flex;gap:4px}.HeroLink-module_heroLink-label__93HPY{white-space:nowrap}.HeroLink-module_heroLink-icon__l7o4U{align-items:center;display:flex;justify-content:center}.HeroLink-module_heroLink--emptyLabel__XY2sa{padding:16px}.ActionTile-module_action-tile__JPwGb{align-items:center;background:transparent;border:1px solid #c8c8c8;border-radius:16px;cursor:pointer;display:flex;flex-direction:horizontal;gap:16px;height:164px;justify-content:space-between;padding:24px;position:relative;text-decoration:none;transition:all .2s ease;width:230px}.ActionTile-module_action-tile-content__ZkgHc{align-items:flex-start;display:flex;flex:1;flex-direction:column;gap:12px}.ActionTile-module_action-tile-icon__PY1EN{align-items:center;color:#2a2a2a;display:flex;height:48px;justify-content:flex-start;transition:color .2s ease;width:48px}.ActionTile-module_action-tile-heading__Uxdu9{word-wrap:break-word;color:#2a2a2a;font-family:BT Curve,sans-serif;font-size:20px;font-weight:500;letter-spacing:0;line-height:28px;margin:0 0 0 -12px;transition:color .2s ease;width:100%}.ActionTile-module_action-tile--active__-aWze{background:#efe5f7;border-color:#2a1c4a}.ActionTile-module_action-tile--active__-aWze .ActionTile-module_action-tile-heading__Uxdu9,.ActionTile-module_action-tile--active__-aWze .ActionTile-module_action-tile-icon__PY1EN{color:#2a1c4a}.ActionTile-module_action-tile--active__-aWze:hover{background:#efe5f7;border-color:#2a1c4a}.ActionTile-module_action-tile__JPwGb:hover{border-color:#3f187f}.ActionTile-module_action-tile__JPwGb:hover .ActionTile-module_action-tile-heading__Uxdu9,.ActionTile-module_action-tile__JPwGb:hover .ActionTile-module_action-tile-icon__PY1EN{color:#3f187f}.ActionTile-module_action-tile-tick__vhsJE{align-items:center;background:#2a1c4a;border-radius:24px;color:#fff;display:flex;flex-shrink:0;height:28px;justify-content:center;position:absolute;right:-8px;top:-8px;width:28px}.LinkTile-module_link-tile__xVUP3{background:#fff;border:1px solid #c8c8c8;border-radius:32px;cursor:pointer;display:flex;flex-direction:column;padding:24px;text-decoration:none;transition:border-color .2s ease,border-radius .2s ease;width:306px}.LinkTile-module_link-tile-content__H-QN8{align-items:center;display:flex;gap:8px;justify-content:space-between}.LinkTile-module_link-tile-text__0K6zf{color:#5514b4;flex:1;font-family:BT Curve,sans-serif;font-size:16px;font-weight:500;letter-spacing:0;line-height:24px;transition:color .2s ease}.LinkTile-module_link-tile__xVUP3 .LinkTile-module_link-tile-content__H-QN8 svg{color:#5514b4;flex-shrink:0;transition:color .2s ease}.LinkTile-module_link-tile__xVUP3:hover{border-color:#5514b4}.LinkTile-module_link-tile__xVUP3:active{border-radius:32px}.LinkTile-module_link-tile__xVUP3:hover .LinkTile-module_link-tile-content__H-QN8 svg,.LinkTile-module_link-tile__xVUP3:hover .LinkTile-module_link-tile-text__0K6zf{color:#3f187f}@media (max-width:1023px){.LinkTile-module_link-tile__xVUP3{padding:24px 16px 24px 24px}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arc-ui/community-components",
3
- "version": "3.0.1",
3
+ "version": "3.1.0",
4
4
  "type": "module",
5
5
  "homepage": "https://ui.digital-ent-int.bt.com",
6
6
  "author": "BT Business Digital UI Team <ui-digital-ent-int@bt.com>",
@@ -34,8 +34,8 @@
34
34
  "access": "public"
35
35
  },
36
36
  "peerDependencies": {
37
- "@arc-ui/components": "13.3.0",
38
- "@arc-ui/themes": "13.3.0",
37
+ "@arc-ui/components": "13.4.0",
38
+ "@arc-ui/themes": "13.4.0",
39
39
  "react": "^19.2.3",
40
40
  "react-dom": "^19.2.3"
41
41
  },
@@ -45,14 +45,14 @@
45
45
  }
46
46
  },
47
47
  "devDependencies": {
48
- "@arc-ui/components": "13.3.0",
49
- "@arc-ui/gradients": "13.3.0",
50
- "@arc-ui/icons": "13.3.0",
51
- "@arc-ui/themes": "13.3.0",
52
- "@arc-ui/tokens-arc": "13.3.0",
53
- "@arc-ui/tokens-bt-business": "13.3.0",
54
- "@arc-ui/tokens-bt-enterprise": "13.3.0",
55
- "@arc-ui/tokens-ee": "13.3.0",
48
+ "@arc-ui/components": "13.4.0",
49
+ "@arc-ui/gradients": "13.4.0",
50
+ "@arc-ui/icons": "13.4.0",
51
+ "@arc-ui/themes": "13.4.0",
52
+ "@arc-ui/tokens-arc": "13.4.0",
53
+ "@arc-ui/tokens-bt-business": "13.4.0",
54
+ "@arc-ui/tokens-bt-enterprise": "13.4.0",
55
+ "@arc-ui/tokens-ee": "13.4.0",
56
56
  "@rollup/plugin-commonjs": "^28.0.1",
57
57
  "@rollup/plugin-node-resolve": "^15.3.0",
58
58
  "@rollup/plugin-typescript": "^12.1.1",
@@ -74,10 +74,10 @@
74
74
  "tslib": "^2.8.1",
75
75
  "typescript": "^5.6.3",
76
76
  "@arc-ui/community-build-utils": "^0.1.0",
77
+ "@arc-ui/community-utils": "^0.2.0",
77
78
  "@arc-ui/community-css-config": "^0.1.1",
78
- "@arc-ui/community-eslint-config": "^0.1.1",
79
79
  "@arc-ui/community-typescript-config": "^0.1.0",
80
- "@arc-ui/community-utils": "^0.1.0"
80
+ "@arc-ui/community-eslint-config": "^0.1.1"
81
81
  },
82
82
  "browserslist": [
83
83
  "defaults",
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
2
 
3
- import { filterDataAttrs } from "@arc-ui/community-utils/filter-data-attrs";
3
+ import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
4
+
4
5
  import {
5
6
  AccordionHeading,
6
7
  type AccordionHeadingProps,
@@ -26,7 +27,7 @@ export const Accordion: React.FC<AccordionProps> = ({
26
27
  ...props
27
28
  }) => {
28
29
  return (
29
- <div className={styles.Accordion} {...filterDataAttrs(props)}>
30
+ <div className={styles.Accordion} {...filterAttrs(props)}>
30
31
  <AccordionHeading
31
32
  isPadded
32
33
  id={id}
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
 
3
- import { filterDataAttrs } from "@arc-ui/community-utils/filter-data-attrs";
3
+ import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
4
4
 
5
5
  import {
6
6
  type DisclosureProps,
@@ -30,7 +30,7 @@ export const AccordionDisclosureList: React.FC<
30
30
  isOpen={isOpen}
31
31
  indentDetails={indentDetails}
32
32
  headingLevel={headingLevel}
33
- {...filterDataAttrs(props)}
33
+ {...filterAttrs(props)}
34
34
  >
35
35
  {children}
36
36
  </Disclosure>
@@ -1,13 +1,12 @@
1
1
  import React from "react";
2
2
  import classNames from "classnames";
3
3
 
4
- import { filterDataAttrs } from "@arc-ui/community-utils/filter-data-attrs";
4
+ import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
5
5
 
6
6
  import { Heading, type HeadingLevel } from "@arc-ui/components/Heading";
7
7
  import { Text } from "@arc-ui/components/Text";
8
8
  import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
9
- import { Image } from "@arc-ui/components/Image";
10
- import { type ImageProps } from "@arc-ui/components/dist/types/components/Image/Image";
9
+ import { Image, type ImageProps } from "@arc-ui/components/Image";
11
10
 
12
11
  import styles from "./AccordionHeading.module.css";
13
12
 
@@ -27,7 +26,7 @@ export const AccordionHeading: React.FC<AccordionHeadingProps> = ({
27
26
  [styles["accordion-header--padded"]]: isPadded,
28
27
  [styles["accordion-header--headingSizeM"]]: headingSize === "m",
29
28
  })}
30
- {...filterDataAttrs(props)}
29
+ {...filterAttrs(props)}
31
30
  >
32
31
  <div
33
32
  className={classNames({ [styles["accordion-header--hasImage"]]: image })}
@@ -0,0 +1,89 @@
1
+ .action-tile {
2
+ display: flex;
3
+ flex-direction: horizontal;
4
+ align-items: center;
5
+ justify-content: space-between;
6
+ width: 230px;
7
+ height: 164px;
8
+ padding: 24px;
9
+ gap: 16px;
10
+ border-radius: 16px;
11
+ border: 1px solid #c8c8c8;
12
+ background: transparent;
13
+ text-decoration: none;
14
+ cursor: pointer;
15
+ transition: all 0.2s ease;
16
+ position: relative;
17
+ }
18
+
19
+ .action-tile-content {
20
+ display: flex;
21
+ flex-direction: column;
22
+ gap: 12px;
23
+ flex: 1;
24
+ align-items: flex-start;
25
+ }
26
+
27
+ .action-tile-icon {
28
+ display: flex;
29
+ align-items: center;
30
+ justify-content: flex-start;
31
+ width: 48px;
32
+ height: 48px;
33
+ color: #2a2a2a;
34
+ transition: color 0.2s ease;
35
+ }
36
+
37
+ .action-tile-heading {
38
+ font-family: "BT Curve", sans-serif;
39
+ font-size: 20px;
40
+ font-weight: 500;
41
+ line-height: 28px;
42
+ letter-spacing: 0;
43
+ color: #2a2a2a;
44
+ margin: 0;
45
+ transition: color 0.2s ease;
46
+ width: 100%;
47
+ word-wrap: break-word;
48
+ overflow-wrap: break-word;
49
+ margin-left: -12px;
50
+ }
51
+
52
+ .action-tile--active {
53
+ background: #efe5f7;
54
+ border-color: #2a1c4a;
55
+ }
56
+
57
+ .action-tile--active .action-tile-heading,
58
+ .action-tile--active .action-tile-icon {
59
+ color: #2a1c4a;
60
+ }
61
+
62
+ .action-tile--active:hover {
63
+ background: #efe5f7;
64
+ border-color: #2a1c4a;
65
+ }
66
+
67
+ .action-tile:hover {
68
+ border-color: #3f187f;
69
+ }
70
+
71
+ .action-tile:hover .action-tile-heading,
72
+ .action-tile:hover .action-tile-icon {
73
+ color: #3f187f;
74
+ }
75
+
76
+ .action-tile-tick {
77
+ display: flex;
78
+ align-items: center;
79
+ justify-content: center;
80
+ width: 28px;
81
+ height: 28px;
82
+ border-radius: 24px;
83
+ background: #2a1c4a;
84
+ color: #ffffff;
85
+ flex-shrink: 0;
86
+ position: absolute;
87
+ top: -8px;
88
+ right: -8px;
89
+ }
@@ -0,0 +1,70 @@
1
+ import React from "react";
2
+ import classNames from "classnames";
3
+ import styles from "./ActionTile.module.css";
4
+ import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
5
+ import { Icon } from "@arc-ui/components/Icon";
6
+ import { BtIconTickAlt2Px } from "@arc-ui/icons/BtIconTickAlt2Px";
7
+
8
+ export const ActionTile: React.FC<ActionTileProps> = ({
9
+ icon,
10
+ heading,
11
+ isActive = false,
12
+ onClick,
13
+ className,
14
+ ...props
15
+ }) => {
16
+ const tileClasses = classNames(
17
+ styles["action-tile"],
18
+ {
19
+ [styles["action-tile--active"]]: isActive,
20
+ },
21
+ className,
22
+ );
23
+
24
+ const content = (
25
+ <>
26
+ <div className={styles["action-tile-content"]}>
27
+ {icon && (
28
+ <div className={styles["action-tile-icon"]}>
29
+ <Icon icon={icon} size={48} />
30
+ </div>
31
+ )}
32
+ <h3 className={styles["action-tile-heading"]}>{heading}</h3>
33
+ </div>
34
+
35
+ {isActive && (
36
+ <div className={styles["action-tile-tick"]}>
37
+ <Icon icon={BtIconTickAlt2Px} size={20} />
38
+ </div>
39
+ )}
40
+ </>
41
+ );
42
+
43
+ return (
44
+ <div className={tileClasses} onClick={onClick} {...filterAttrs(props)}>
45
+ {content}
46
+ </div>
47
+ );
48
+ };
49
+
50
+ export interface ActionTileProps extends React.HTMLAttributes<HTMLDivElement> {
51
+ /**
52
+ * Optional icon to display
53
+ */
54
+ icon?: string;
55
+
56
+ /**
57
+ * Heading text (required)
58
+ */
59
+ heading: string;
60
+
61
+ /**
62
+ * Whether the tile is in active/selected state
63
+ */
64
+ isActive?: boolean;
65
+
66
+ /**
67
+ * Click handler
68
+ */
69
+ onClick?: () => void;
70
+ }
@@ -0,0 +1 @@
1
+ export { ActionTile, type ActionTileProps } from "./ActionTile";
@@ -11,6 +11,12 @@
11
11
  padding-right: 16px;
12
12
  }
13
13
 
14
+ .additionalContentContainer {
15
+ display: flex;
16
+ flex-direction: column;
17
+ gap: 16px;
18
+ }
19
+
14
20
  .shareButtonContainer {
15
21
  display: flex;
16
22
  gap: 8px;
@@ -1,4 +1,5 @@
1
1
  import React, { useId, useState } from "react";
2
+ import classNames from "classnames";
2
3
 
3
4
  import { ArcIconSocialLinkedin } from "@arc-ui/icons/ArcIconSocialLinkedin";
4
5
  import { ArcIconSocialX } from "@arc-ui/icons/ArcIconSocialX";
@@ -45,41 +46,51 @@ export const ArticleSidebar: React.FC<ArticleSidebarProps> = ({
45
46
  setShowToast(true);
46
47
  };
47
48
 
48
- const shareButtons: ShareButton[] = [
49
- {
50
- isButton: true,
51
- label: "Copy url to clipboard",
52
- onClick: copyTextToClipBoard,
53
- icon: BtIconLink,
54
- },
55
- {
56
- label: "Share by email",
57
- href: `mailto:?subject=${share.articleTitle}&body=${url}`,
58
- icon: BtIconEmailUnread,
59
- },
60
- ...(share.linkedin
61
- ? [
62
- {
63
- label: "Share on LinkedIn",
64
- href: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
65
- icon: ArcIconSocialLinkedin,
66
- },
67
- ]
68
- : []),
69
- ...(share.x
70
- ? [
71
- {
72
- label: "Share on x",
73
- href: `https://twitter.com/intent/tweet?url=${url}`,
74
- icon: ArcIconSocialX,
75
- },
76
- ]
77
- : []),
78
- ];
49
+ const shareButtons: ShareButton[] = share
50
+ ? [
51
+ {
52
+ isButton: true,
53
+ onClick: copyTextToClipBoard,
54
+ icon: BtIconLink,
55
+ ariaLabel: share.clipboardAriaLabel || "Copy url to clipboard",
56
+ },
57
+ {
58
+ href: `mailto:?subject=${share.articleTitle}&body=${url}`,
59
+ icon: BtIconEmailUnread,
60
+ ariaLabel: share.emailAriaLabel || "Share by email",
61
+ },
62
+ ...(share.linkedin
63
+ ? [
64
+ {
65
+ href: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
66
+ icon: ArcIconSocialLinkedin,
67
+ ariaLabel: share.linkedInAriaLabel || "Share on LinkedIn",
68
+ },
69
+ ]
70
+ : []),
71
+ ...(share.x
72
+ ? [
73
+ {
74
+ href: `https://twitter.com/intent/tweet?url=${url}`,
75
+ icon: ArcIconSocialX,
76
+ ariaLabel: share.xAriaLabel || "Share on x",
77
+ },
78
+ ]
79
+ : []),
80
+ ]
81
+ : [];
82
+
83
+ const hasTopContent = Boolean(author || aboutSection || additionalContent);
84
+
85
+ const hasBottomContent = Boolean(linkSection || topics || share);
79
86
 
80
87
  return (
81
88
  <>
82
- <div className={styles.textContent}>
89
+ <div
90
+ className={classNames({
91
+ [styles.textContent]: hasTopContent,
92
+ })}
93
+ >
83
94
  {author && (
84
95
  <>
85
96
  <Author {...author} avatar={{ ...author.avatar, size: "xl" }} />
@@ -88,7 +99,7 @@ export const ArticleSidebar: React.FC<ArticleSidebarProps> = ({
88
99
 
89
100
  {aboutSection && (
90
101
  <>
91
- <VerticalSpace size="32" />
102
+ {author && <VerticalSpace size="32" />}
92
103
  <Heading level={aboutSection.headingLevel}>
93
104
  {aboutSection.heading}
94
105
  </Heading>
@@ -98,43 +109,54 @@ export const ArticleSidebar: React.FC<ArticleSidebarProps> = ({
98
109
  </>
99
110
  )}
100
111
 
101
- {additionalContent &&
102
- additionalContent.map(({ heading, headingLevel, content }) => (
103
- <>
104
- <VerticalSpace size="16" />
105
- <Heading level={headingLevel} size="xxs">
106
- {heading}
107
- </Heading>
108
- <Text size="s">{content}</Text>
109
- </>
110
- ))}
112
+ {additionalContent && (
113
+ <>
114
+ {(author || aboutSection) && <VerticalSpace size="16" />}
115
+ <div className={styles.additionalContentContainer}>
116
+ {additionalContent.map(({ heading, headingLevel, content }) => (
117
+ <div key={`${id}-${heading}`}>
118
+ <Heading level={headingLevel} size="xxs">
119
+ {heading}
120
+ </Heading>
121
+ <Text size="s">{content}</Text>
122
+ </div>
123
+ ))}
124
+ </div>
125
+ </>
126
+ )}
111
127
  </div>
112
128
 
113
- {(author || aboutSection || additionalContent) && (
114
- <div data-testid="content-rule">
129
+ {hasTopContent && hasBottomContent && (
130
+ <div data-testid="text-content-rule">
115
131
  <VerticalSpace size="32" />
116
132
  <Rule />
117
133
  <VerticalSpace size="32" />
118
134
  </div>
119
135
  )}
120
136
 
121
- <Heading level={linkSection.headingLevel}>{linkSection.heading}</Heading>
122
-
123
- {linkSection.links.map(({ text, url }) => (
137
+ {linkSection && (
124
138
  <>
125
- <VerticalSpace size="8" />
126
- <div key={`${id}-${url}`}>
127
- <Link size="s" href={url}>
128
- {text}
129
- </Link>
130
- </div>
131
- </>
132
- ))}
139
+ <Heading level={linkSection.headingLevel}>
140
+ {linkSection.heading}
141
+ </Heading>
133
142
 
134
- <VerticalSpace size="32" />
143
+ {linkSection.links.map(({ text, url, ariaLabel }) => (
144
+ <>
145
+ <VerticalSpace size="8" />
146
+ <div key={`${id}-${url}`}>
147
+ <Link aria-label={ariaLabel} size="s" href={url}>
148
+ {text}
149
+ </Link>
150
+ </div>
151
+ </>
152
+ ))}
153
+ </>
154
+ )}
135
155
 
136
156
  {topics && (
137
157
  <>
158
+ {linkSection && <VerticalSpace size="32" />}
159
+
138
160
  <Heading level={topics.headingLevel}>{topics.heading}</Heading>
139
161
 
140
162
  <VerticalSpace size="16" />
@@ -144,35 +166,43 @@ export const ArticleSidebar: React.FC<ArticleSidebarProps> = ({
144
166
  <Tag key={`${id}-${tag.title}`} {...tag} />
145
167
  ))}
146
168
  </div>
147
-
148
- <VerticalSpace size="32" />
149
169
  </>
150
170
  )}
151
171
 
152
- <Rule />
153
-
154
- <VerticalSpace size="32" />
155
-
156
- <Heading level={share.headingLevel}>{share.heading}</Heading>
157
-
158
- <VerticalSpace size="16" />
159
-
160
- <div className={styles.shareButtonContainer}>
161
- {shareButtons.map(({ isButton, label, href, icon, onClick }) => (
162
- <a
163
- key={`${id}-${label}`}
164
- role={isButton ? "button" : undefined}
165
- target="_blank"
166
- rel="noreferrer"
167
- className={styles.shareButton}
168
- aria-label={label}
169
- href={href}
170
- onClick={isButton ? onClick : undefined}
171
- >
172
- <Icon icon={icon} size={24} />
173
- </a>
174
- ))}
175
- </div>
172
+ {share && (
173
+ <>
174
+ {(linkSection || topics) && (
175
+ <div data-testid="links-topics-content-rule">
176
+ <VerticalSpace size="32" />
177
+ <Rule />
178
+ <VerticalSpace size="32" />
179
+ </div>
180
+ )}
181
+
182
+ <Heading level={share.headingLevel}>{share.heading}</Heading>
183
+
184
+ <VerticalSpace size="16" />
185
+
186
+ <div className={styles.shareButtonContainer}>
187
+ {shareButtons.map(
188
+ ({ isButton, ariaLabel, href, icon, onClick }) => (
189
+ <a
190
+ key={`${id}-${ariaLabel}`}
191
+ role={isButton ? "button" : undefined}
192
+ target="_blank"
193
+ rel="noreferrer"
194
+ className={styles.shareButton}
195
+ aria-label={ariaLabel}
196
+ href={href}
197
+ onClick={isButton ? onClick : undefined}
198
+ >
199
+ <Icon icon={icon} size={24} />
200
+ </a>
201
+ ),
202
+ )}
203
+ </div>
204
+ </>
205
+ )}
176
206
 
177
207
  <Toast>
178
208
  <ToastNotification
@@ -205,7 +235,7 @@ export interface ArticleSidebarProps {
205
235
  /**
206
236
  * Links that are relevant to the article.
207
237
  */
208
- linkSection: LinkSection;
238
+ linkSection?: LinkSection;
209
239
 
210
240
  /**
211
241
  * Topics rendered as tags that are relevant to the article.
@@ -215,5 +245,5 @@ export interface ArticleSidebarProps {
215
245
  /**
216
246
  * Sharing options for the article.
217
247
  */
218
- share: Share;
248
+ share?: Share;
219
249
  }
@@ -1,8 +1,9 @@
1
- import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
1
+ import { type HeadingLevel } from "@arc-ui/components/Heading";
2
2
 
3
3
  interface Link {
4
4
  text: string;
5
5
  url: string;
6
+ ariaLabel?: string;
6
7
  }
7
8
 
8
9
  export interface LinkSection {
@@ -1,7 +1,7 @@
1
1
  export interface ShareButton {
2
- label: string;
3
2
  icon: string;
4
3
  isButton?: boolean;
4
+ ariaLabel?: string;
5
5
  href?: string;
6
6
  onClick?: () => void;
7
7
  }
@@ -1,4 +1,4 @@
1
- import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
1
+ import { type HeadingLevel } from "@arc-ui/components/Heading";
2
2
 
3
3
  export interface Share {
4
4
  heading: string;
@@ -6,4 +6,8 @@ export interface Share {
6
6
  x?: boolean;
7
7
  headingLevel?: HeadingLevel;
8
8
  linkedin?: boolean;
9
+ linkedInAriaLabel?: string;
10
+ xAriaLabel?: string;
11
+ clipboardAriaLabel?: string;
12
+ emailAriaLabel?: string;
9
13
  }