Ship Pattern B dsr.css, expand Pattern A barrel, and document CSS patterns

[flacoman91]

Summary

• Add a thin companion stylesheet export @cfpb/design-system-react/dsr.css for Pattern B apps that already load full Design System CSS and must not also load fat index.css (duplicate DS rules + fonts).
• Expand the Pattern A ds-components.ts barrel so index.css covers more React-backed DS modules (list, button-group, expandables, search-input, hero, text-introduction, …).
• Document Pattern A vs Pattern B clearly in the README (what to import, what not to combine).
• Keep inactive Tabs on isLink / a-btn--link so dotted-underline link chrome stays correct while tab styles live in tab.scss / dsr.css.

Why

Existing CFPB apps already ship full @cfpb/cfpb-design-system CSS. They cannot safely import DSR index.css without duplicating buttons, forms, fonts, etc. Tabs (and other React-only overrides) live in DSR, not in the Design System package — so Pattern B had no clean CSS entry until dsr.css.

What changed

Area	Change
package.json exports	Add ./dsr.css → dist/dsr.css
Build	Second Vite build (vite.dsr-css.config.ts) + cleanup stub script
dsr-styles.ts	DSR-authored styles only (Tabs + React overrides); no fonts / no DS molecules
ds-components.ts	Broader Pattern A coverage for index.css
README	Pattern A / Pattern B / do-not-combine guidance
Tabs	Restore Button isLink on inactive tabs for correct link styling

Consumer demos (dsr-test)

Demo	Shows
dsr-test#7 Pattern A	index.css only — Tabs OK
dsr-test#8 Pattern B broken	Full DS CSS, no dsr.css — Tabs incomplete
dsr-test#6 Pattern B fixed	Full DS CSS + dsr.css — Tabs fixed

Previews:

• https://cfpb.github.io/dsr-test/pr-previews/pr-7/
• https://cfpb.github.io/dsr-test/pr-previews/pr-8/
• https://cfpb.github.io/dsr-test/pr-previews/pr-6/

Usage

Pattern A (new React apps):

import '@cfpb/design-system-react/index.css'

Pattern B (existing DS apps):

import '@cfpb/design-system-react/dsr.css'
// Do not also import '@cfpb/design-system-react/index.css'

Test plan

• yarn build produces both dist/index.css and dist/dsr.css (no leftover dsr-styles-entry.js)
• Storybook Tabs: inactive = dotted link; active = gray chip
• Pattern A demo (Configure netlify deploy previews #7): Tabs / buttons / slug look correct from index.css alone
• Pattern B broken demo ([Fix][Component] Icon - dynamic asset import #8): Buttons OK; Tabs missing DSR chrome
• Pattern B fixed demo ([Component] TableSimple & TableComplex #6): Tabs match Pattern A; no index.css import
• Confirm README “do not combine” table matches the intended consumer guidance

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-07-29 19:44 UTC