@arc-ui/community-components 2.0.0 → 3.0.0

package/lib/styles.css

@@ -0,0 +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}.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)}

package/package.json

@@ -1,32 +1,32 @@
 {
   "name": "@arc-ui/community-components",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "type": "module",
   "homepage": "https://ui.digital-ent-int.bt.com",
   "author": "BT Business Digital UI Team <ui-digital-ent-int@bt.com>",
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/types/esm/index.d.ts",
-        "default": "./dist/index.es.js"
+        "types": "./lib/index.d.mts",
+        "default": "./lib/index.mjs"
       },
       "require": {
-        "types": "./dist/types/cjs/index.d.ts",
-        "default": "./dist/index.js"
+        "types": "./lib/index.d.cts",
+        "default": "./lib/index.cjs"
       }
     },
     "./src": "./src/index.ts",
     "./versions": "./versions.json",
-    "./styles.css": "./dist/styles.css",
-    "./*.css": "./dist/*/styles.css",
+    "./lib/styles.css": "./lib/styles.css",
+    "./lib/*/styles.css": "./lib/*/styles.css",
     "./*": {
       "import": {
-        "types": "./dist/types/esm/components/*/index.d.ts",
-        "default": "./dist/*/*.esm.js"
+        "types": "./lib/index.d.mts",
+        "default": "./lib/*/*.mjs"
       },
       "require": {
-        "types": "./dist/types/cjs/components/*/index.d.cts",
-        "default": "./dist/*/*.cjs.js"
+        "types": "./lib/index.d.cts",
+        "default": "./lib/*/*.cjs"
       }
     }
   },
@@ -34,8 +34,8 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@arc-ui/components": "13.0.0",
-    "@arc-ui/themes": "13.0.0",
+    "@arc-ui/components": "13.3.0",
+    "@arc-ui/themes": "13.3.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
   },
@@ -45,14 +45,14 @@
     }
   },
   "devDependencies": {
-    "@arc-ui/components": "13.0.0",
-    "@arc-ui/gradients": "13.0.0",
-    "@arc-ui/icons": "13.0.0",
-    "@arc-ui/themes": "13.0.0",
-    "@arc-ui/tokens-arc": "13.0.0",
-    "@arc-ui/tokens-bt-business": "13.0.0",
-    "@arc-ui/tokens-bt-enterprise": "13.0.0",
-    "@arc-ui/tokens-ee": "13.0.0",
+    "@arc-ui/components": "13.3.0",
+    "@arc-ui/gradients": "13.3.0",
+    "@arc-ui/icons": "13.3.0",
+    "@arc-ui/themes": "13.3.0",
+    "@arc-ui/tokens-arc": "13.3.0",
+    "@arc-ui/tokens-bt-business": "13.3.0",
+    "@arc-ui/tokens-bt-enterprise": "13.3.0",
+    "@arc-ui/tokens-ee": "13.3.0",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-typescript": "^12.1.1",
@@ -66,8 +66,7 @@
     "react-dom": "^19.2.3",
     "rimraf": "^6.0.1",
     "rollup": "^4.27.3",
-    "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-dts": "^6.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.0",
     "semver": "^7.6.3",
@@ -75,10 +74,10 @@
     "tslib": "^2.8.1",
     "typescript": "^5.6.3",
     "@arc-ui/community-build-utils": "^0.1.0",
-    "@arc-ui/community-typescript-config": "^0.1.0",
-    "@arc-ui/community-css-config": "^0.1.0",
-    "@arc-ui/community-eslint-config": "^0.1.0",
-    "@arc-ui/community-utils": "^0.1.0"
+    "@arc-ui/community-css-config": "^0.1.1",
+    "@arc-ui/community-eslint-config": "^0.1.1",
+    "@arc-ui/community-utils": "^0.1.0",
+    "@arc-ui/community-typescript-config": "^0.1.0"
   },
   "browserslist": [
     "defaults",
@@ -103,7 +102,8 @@
     "lint:ts": "eslint .",
     "lint:css": "stylelint '**/*.css'",
     "ts:check": "tsc --noEmit",
-    "build": "rimraf dist && rollup -c && generate-subpath-css",
+    "build": "rimraf lib dist && rollup -c && generate-subpath-css && pnpm run build:clean",
+    "build:clean": "rimraf ./lib/types ./lib/styles.js ./lib/index.js ./lib/index.js.map",
     "generate:versions:json": "node ./generate-versions.js"
   }
 }

package/rollup.config.js

@@ -3,8 +3,7 @@ import commonjs from "@rollup/plugin-commonjs";
 import resolve from "@rollup/plugin-node-resolve";
 import external from "rollup-plugin-peer-deps-external";
 import postcss from "rollup-plugin-postcss";
-import del from "rollup-plugin-delete";
-import copy from "rollup-plugin-copy";
+import dts from "rollup-plugin-dts";
 
 import { getDirectories } from "@arc-ui/community-build-utils/get-directories";
 import { getSubPathFileMap } from "@arc-ui/community-build-utils/get-subpath-file-map";
@@ -19,26 +18,30 @@ const basePlugins = [external(), resolve(), commonjs()];
  * We have multiple output configs to support CommonJS and ES modules.
  */
 export default [
-  // CommonJS
+  // Main bundles (CJS + ESM) with declarations
   {
     input: "src/index.ts",
-    output: {
-      dir: "dist",
-      format: "cjs",
-      exports: "named",
-      sourcemap: true,
-    },
+    output: [
+      {
+        file: "lib/index.cjs",
+        format: "cjs",
+        exports: "named",
+        sourcemap: true,
+      },
+      {
+        file: "lib/index.mjs",
+        format: "esm",
+        exports: "named",
+        sourcemap: true,
+      },
+    ],
     plugins: [
       ...basePlugins,
-      del({
-        targets: ["dist/styles.js"],
-      }), // Remove empty files
-      // We do this here because we are able to use `dir` for cjs, and
-      // declaration exports require use of a dir. ES modules require a
-      // file so that we can specify standard .es.js file extension.
       typescript({
-        declaration: true,
-        declarationDir: "dist/types/cjs",
+        compilerOptions: {
+          declaration: true,
+          declarationDir: "lib/types",
+        },
         exclude: [
           "**/__mocks__/**/*.ts",
           "**/__tests__/**/*.tsx",
@@ -48,45 +51,26 @@ export default [
       }),
       postcss(postcssConfig),
     ],
+    external: ["react", "react-dom"],
   },
-  // ES Module
+  // Bundle dts files
   {
-    input: "src/index.ts",
+    input: "./lib/types/index.d.ts",
     output: [
-      {
-        file: "dist/index.es.js",
-        format: "esm",
-        exports: "named",
-        sourcemap: true,
-      },
-    ],
-    plugins: [
-      ...basePlugins,
-      typescript(),
-      postcss({ ...postcssConfig, extract: false }),
-      copy({
-        targets: [
-          // TypeScript requires 2 distinct files for ESM and CJS types. See:
-          // https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/
-          // https://github.com/gxmari007/vite-plugin-eslint/pull/60
-          // Copy for CJS types is made in ES bundle to ensure the declaration file generated in
-          // the previous bundle exists.
-          {
-            src: "dist/types/cjs/*",
-            dest: "dist/types/esm",
-          },
-        ],
-      }),
+      { file: "lib/index.d.mts", format: "es" },
+      { file: "lib/index.d.cts", format: "cjs" },
     ],
+    plugins: [dts()],
   },
   // Sub path esm
   {
-    input: getSubPathFileMap(directories, "esm"),
+    input: getSubPathFileMap(directories),
     output: {
-      dir: "dist",
+      dir: "lib",
       exports: "named",
       format: "esm",
-      chunkFileNames: "_shared/esm/[name]-[hash].js",
+      entryFileNames: "[name].mjs",
+      chunkFileNames: "_shared/esm/[name]-[hash].mjs",
     },
     plugins: [
       ...basePlugins,
@@ -97,13 +81,13 @@ export default [
   },
   // Sub path cjs
   {
-    input: getSubPathFileMap(directories, "cjs"),
+    input: getSubPathFileMap(directories),
     output: {
-      dir: "dist",
+      dir: "lib",
       exports: "named",
       format: "cjs",
-
-      chunkFileNames: "_shared/cjs/[name]-[hash].js",
+      entryFileNames: "[name].cjs",
+      chunkFileNames: "_shared/cjs/[name]-[hash].cjs",
     },
     plugins: [
       ...basePlugins,

package/src/components/Accordion/components/AccordionDisclosureList/AccordionDisclosureList.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 
+import { filterDataAttrs } from "@arc-ui/community-utils/filter-data-attrs";
+
 import {
   type DisclosureProps,
   Disclosure,
@@ -20,6 +22,7 @@ export const AccordionDisclosureList: React.FC<
           indentDetails = false,
           headingLevel,
           id,
+          ...props
         }) => (
           <li key={id} className={styles.AccordionDisclosureListItem}>
             <Disclosure
@@ -27,6 +30,7 @@ export const AccordionDisclosureList: React.FC<
               isOpen={isOpen}
               indentDetails={indentDetails}
               headingLevel={headingLevel}
+              {...filterDataAttrs(props)}
             >
               {children}
             </Disclosure>

package/src/components/CopyLead/components/IconList/IconList.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Heading } from "@arc-ui/components/Heading";
+import { Heading, HeadingLevel } from "@arc-ui/components/Heading";
 import { Icon } from "@arc-ui/components/Icon";
 import { Text } from "@arc-ui/components/Text";
 import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
@@ -13,6 +13,7 @@ import classNames from "classnames";
 export const IconList: React.FC<IconListProps> = ({
   listItems,
   isLgScreen,
+  headingLevel = "3",
 }) => (
   <ul className={styles.list}>
     {listItems.map(({ icon, heading, text }) => (
@@ -26,7 +27,7 @@ export const IconList: React.FC<IconListProps> = ({
           <Icon color="brand" icon={icon} size={isLgScreen ? 64 : 48} />
         </div>
         <div className={styles.listItemTextContainer}>
-          <Heading level="3" size="s">
+          <Heading level={headingLevel} size="s">
             {heading}
           </Heading>
 
@@ -46,4 +47,5 @@ export const IconList: React.FC<IconListProps> = ({
 interface IconListProps {
   isLgScreen: boolean;
   listItems: CopyLeadListItem[];
+  headingLevel?: HeadingLevel;
 }

package/src/components/CopyLead/templates/Content/Content.tsx

@@ -2,7 +2,10 @@ import React, { ReactNode } from "react";
 
 import { ArcSizeBreakpointsL, ArcSizeBreakpointsM } from "@arc-ui/tokens-arc";
 
-import { useMediaQuery } from "@arc-ui/components/use-media-query";
+import {
+  HeadingLevel,
+  useMediaQuery,
+} from "@arc-ui/components/use-media-query";
 
 import {
   SectionHeading,
@@ -15,6 +18,7 @@ import { IconList } from "../../components/IconList";
 import { Button } from "../../components/Button/Button";
 import { Container } from "../../components/Container";
 import { Column } from "../../components/Column";
+import { getListHeadingLevel } from "../../utils/getListHeadingLevel";
 
 export const ContentTemplate: React.FC<ContentTemplateProps> = ({
   button,
@@ -31,6 +35,8 @@ export const ContentTemplate: React.FC<ContentTemplateProps> = ({
     `(min-width: ${ArcSizeBreakpointsL})`,
   );
 
+  const listHeadingLevel = getListHeadingLevel(headingLevel);
+
   return (
     <Container type="content" alignment="top">
       <Column>
@@ -43,7 +49,11 @@ export const ContentTemplate: React.FC<ContentTemplateProps> = ({
         {button && isMinWidthArcBreakpointM && <Button {...button} />}
       </Column>
       <Column>
-        <IconList listItems={listItems} isLgScreen={isMinWidthArcBreakpointL} />
+        <IconList
+          listItems={listItems}
+          isLgScreen={isMinWidthArcBreakpointL}
+          headingLevel={listHeadingLevel}
+        />
 
         {button && !isMinWidthArcBreakpointM && <Button {...button} />}
       </Column>
@@ -55,4 +65,5 @@ interface ContentTemplateProps extends SectionHeadingProps {
   content: string | ReactNode;
   listItems: CopyLeadListItem[];
   button?: CopyLeadButton;
+  headingLevel: HeadingLevel;
 }

package/src/components/CopyLead/templates/Media/Media.tsx

@@ -20,6 +20,7 @@ import { IconList } from "../../components/IconList";
 import { Button } from "../../components/Button/Button";
 import { Container } from "../../components/Container";
 import { Column } from "../../components/Column";
+import { getListHeadingLevel } from "../../utils/getListHeadingLevel";
 
 const VideoPlayer = React.lazy(() =>
   import("@arc-ui/components/VideoPlayer").then(({ VideoPlayer }) => ({
@@ -47,6 +48,8 @@ export const MediaTemplate: React.FC<MediaTemplateProps> = ({
     `(min-width: ${ArcSizeBreakpointsXl})`,
   );
 
+  const listHeadingLevel = getListHeadingLevel(headingLevel);
+
   useEffect(() => {
     setIsClient(true);
   }, []);
@@ -75,6 +78,7 @@ export const MediaTemplate: React.FC<MediaTemplateProps> = ({
           <IconList
             listItems={listItems}
             isLgScreen={isMinWidthArcBreakpointL}
+            headingLevel={listHeadingLevel}
           />
 
           {button && <Button {...button} />}
@@ -94,7 +98,7 @@ export const MediaTemplate: React.FC<MediaTemplateProps> = ({
 
 interface MediaTemplateProps {
   heading: string;
-  headingLevel?: HeadingLevel;
+  headingLevel: HeadingLevel;
   listItems: CopyLeadListItem[];
   content?: string | ReactNode;
   isReverseOrder?: boolean;

package/src/components/CopyLead/utils/getListHeadingLevel.ts

@@ -0,0 +1,6 @@
+import { type HeadingLevel } from "@arc-ui/components/Heading";
+
+export const getListHeadingLevel = (level: HeadingLevel): HeadingLevel => {
+  const nextLevel = Math.min(parseInt(level) + 1, 6);
+  return nextLevel.toString() as HeadingLevel;
+};

package/src/components/FAQs/FAQs.module.css

@@ -2,8 +2,8 @@ html {
   scroll-behavior: smooth;
 }
 
-ul,
-li {
+.FAQs ul,
+.FAQs li {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -25,13 +25,13 @@ li {
   row-gap: 8px;
 }
 
-.linkListItem::after {
+.linkListSection .linkListItem::after {
   content: "|";
   padding: 0 8px;
   color: #d9d9d9;
 }
 
-.linkListItem:last-child::after {
+.linkListSection .linkListItem:last-child::after {
   content: "";
 }
 

package/src/components/FAQs/FAQs.tsx

@@ -23,7 +23,7 @@ export const FAQs: React.FC<FAQsProps> = ({
   accordionData,
   ...props
 }) => (
-  <div {...filterDataAttrs(props)}>
+  <div className={styles.FAQs} {...filterDataAttrs(props)}>
     <SectionHeading
       heading={heading}
       content={content}
@@ -38,7 +38,7 @@ export const FAQs: React.FC<FAQsProps> = ({
         </div>
         <ul
           className={classNames({
-            [styles["linkList"]]: true,
+            [styles.linkList]: true,
             [styles["linkList--padded"]]: isPadded,
           })}
         >
@@ -47,8 +47,14 @@ export const FAQs: React.FC<FAQsProps> = ({
               <Link
                 title={item.heading}
                 href={`#${item.id}`}
-                onClick={() => {
-                  document.getElementById(`#${item.id}`)?.focus();
+                onClick={(e) => {
+                  e.preventDefault();
+                  if (item.id) {
+                    const element = document.getElementById(item.id);
+                    if (element) {
+                      element.scrollIntoView({ behavior: "smooth" });
+                    }
+                  }
                 }}
               >
                 {item.altLinkTitle ?? item.heading}
@@ -59,9 +65,9 @@ export const FAQs: React.FC<FAQsProps> = ({
       </div>
     )}
     {type !== "tabs" && accordionData && (
-      <ul>
+      <ul className={styles.accordionList}>
         {accordionData.map((item: ExtendedAccordionProps) => (
-          <li key={item.id}>
+          <li className={styles.accordionListItem} key={item.id}>
             <Accordion
               id={item.id}
               heading={item.heading}

package/src/components/Highlights/Highlights.tsx

@@ -1,15 +1,17 @@
 import React from "react";
-
 import { useMediaQuery } from "@arc-ui/components/use-media-query";
+import { ButtonV2, type ButtonV2Props } from "@arc-ui/components/ButtonV2";
+import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
+import { BtIconArrowRightFill } from "@arc-ui/icons/BtIconArrowRightFill";
 
 import { SectionHeading, type SectionHeadingProps } from "../SectionHeading";
-
 import { HighlightList } from "./components/HighlightList/HighlightList";
-
 import { type HighlightListItem } from "./types";
 
 /**
- * Use `Highlights` to give supporting information about a page or proposition. It can be used to call out key benefits in bullet points, or link. Both two and three column options are available.
+ * Use `Highlights` to give supporting information about a page or proposition. I
+ * t can be used to call out key benefits in bullet points, or link.
+ * Both two and three column options are available.
  */
 export const Highlights: React.FC<HighlightsProps> = ({
   heading,
@@ -17,8 +19,9 @@ export const Highlights: React.FC<HighlightsProps> = ({
   content,
   listItems,
   columns = "2",
+  cta,
 }) => {
-  const isMaxWidthArcBreakpointXs = useMediaQuery(`(max-width: 767px)`);
+  const isMaxWidthArcBreakpointXs = useMediaQuery("(max-width: 767px)");
 
   return (
     <div>
@@ -35,19 +38,74 @@ export const Highlights: React.FC<HighlightsProps> = ({
         listItems={listItems}
         columns={columns}
         isSmallIcon={isMaxWidthArcBreakpointXs}
+        headingLevel={headingLevel}
       />
+
+      {cta && (
+        <>
+          <VerticalSpace size="24" />
+          <ButtonV2
+            label={cta.label}
+            href={cta.href}
+            onClick={cta.onClick}
+            size="m"
+            buttonStyle={cta.buttonStyle}
+            icon={
+              cta.buttonStyle === "compact"
+                ? (cta.icon ?? BtIconArrowRightFill)
+                : undefined
+            }
+            iconActive={
+              cta.buttonStyle === "compact"
+                ? (cta.iconActive ?? BtIconArrowRightFill)
+                : undefined
+            }
+            iconPosition={cta.iconPosition ?? "beforeText"}
+          />
+        </>
+      )}
     </div>
   );
 };
 
 export interface HighlightsProps extends Omit<SectionHeadingProps, "isPadded"> {
   /**
-   * List items for `Highlights`. List length should be a minimum of 2 and a maximum of 6.
+   * List items for `Highlights`.
+   * List length should be a minimum of 2 and a maximum of 6.
    */
   listItems: HighlightListItem[];
 
   /**
-   * Number of columns for option desktop and tablet breakpoints only.
+   * Number of columns for option desktop & tablet breakpoints only.
    */
   columns?: "2" | "3";
+
+  /**
+   * Optional CTA rendered at the end of Highlights.
+   * Only ONE CTA is allowed.
+   */
+  cta?: HighlightsCTAProps;
 }
+
+/**
+ * CTA configuration for Highlights
+ */
+export type HighlightsCTAProps = Pick<
+  ButtonV2Props,
+  "label" | "href" | "onClick" | "iconPosition"
+> & {
+  /**
+   * Allowed button styles only.
+   * Primary is intentionally NOT supported.
+   */
+  buttonStyle: "secondary" | "compact";
+
+  /**
+   * Icon override & Active icon override
+   * - undefined → uses default BtIconArrowRightFill for compact style
+   * - null → icon disabled
+   * - string → custom icon
+   */
+  icon?: string | null;
+  iconActive?: string | null;
+};

package/src/components/Highlights/components/HighlightItem/HighlightItem.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 
-import { Heading } from "@arc-ui/components/Heading";
+import { Heading, HeadingLevel } from "@arc-ui/components/Heading";
 import { Icon } from "@arc-ui/components/Icon";
 import { Text } from "@arc-ui/components/Text";
 import { Link } from "@arc-ui/components/Link";
@@ -9,6 +9,7 @@ import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
 import { type HighlightLink } from "../../types";
 
 import styles from "../../Highlights.module.css";
+import { getListHeadingLevel } from "../../utils/getListHeadingLevel";
 
 export const HighlightItem: React.FC<HighlightItemProps> = ({
   icon,
@@ -16,7 +17,10 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
   text,
   link,
   isSmallIcon,
+  headingLevel,
 }) => {
+  const listHeadingLevel = getListHeadingLevel(headingLevel || "2");
+
   return (
     <div
       data-testid="highlight-item-container"
@@ -33,7 +37,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
         </div>
       )}
       <VerticalSpace size="16" />
-      <Heading level="3" size="m">
+      <Heading level={listHeadingLevel} size="m">
         {heading}
       </Heading>
       <VerticalSpace size="16" />
@@ -63,4 +67,5 @@ interface HighlightItemProps {
   text?: string | ReactNode;
   link?: HighlightLink;
   isSmallIcon: boolean;
+  headingLevel?: HeadingLevel;
 }

package/src/components/Highlights/components/HighlightList/HighlightList.tsx

@@ -3,6 +3,7 @@ import classNames from "classnames";
 
 import { type HighlightListItem } from "../../types/highlight-list-item";
 import { HighlightItem } from "../HighlightItem/HighlightItem";
+import { HeadingLevel } from "@arc-ui/components/Heading";
 
 import styles from "../../Highlights.module.css";
 
@@ -10,6 +11,7 @@ export const HighlightList: React.FC<HighlightListProps> = ({
   listItems,
   columns,
   isSmallIcon,
+  headingLevel,
 }) => {
   const id = useId();
 
@@ -29,6 +31,7 @@ export const HighlightList: React.FC<HighlightListProps> = ({
           text={text}
           link={link}
           isSmallIcon={isSmallIcon}
+          headingLevel={headingLevel}
         />
       ))}
     </div>
@@ -39,4 +42,5 @@ interface HighlightListProps {
   listItems: HighlightListItem[];
   columns: "2" | "3";
   isSmallIcon: boolean;
+  headingLevel?: HeadingLevel;
 }