Open
Conversation
✅ Deploy Preview for ofh-design-system-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR realigns the “Card” family across the toolkit, docs site, and React component library by introducing new Card subcomponents (Callout + Do/Don’t), updating legacy components to render via compatibility wrappers, and expanding the base Card API/markup to match newer designs.
Changes:
- Added new toolkit components:
card-calloutandcard-do-dont, and wired them into the global toolkit SCSS build. - Deprecated
warning-calloutanddo-dont-listby turning them into wrappers that render the new Card family equivalents, plus updated docs/routes/examples accordingly. - Expanded Card (toolkit + React) markup/API to support richer variants (dismiss button, metadata rows, tags, action links) and added corresponding tests/stories/docs.
Reviewed changes
Copilot reviewed 93 out of 95 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/toolkit/ofh.scss | Imports new Card family component styles into the toolkit bundle. |
| packages/toolkit/core/tools/_mixins.scss | Adds Card-family-specific panel/label mixins used by new components. |
| packages/toolkit/components/warning-callout/template.njk | Re-implements warning callout rendering via cardCallout (warning variant). |
| packages/toolkit/components/warning-callout/macro.njk | Updates warningCallout() macro to wrap cardCallout. |
| packages/toolkit/components/warning-callout/_warning-callout.scss | Removes legacy styles in favor of card-callout-provided styling. |
| packages/toolkit/components/warning-callout/README.md | Deprecation + migration guidance from warning-callout to card-callout. |
| packages/toolkit/components/error-summary/README.md | Clarifies “text vs html” override behavior in docs. |
| packages/toolkit/components/do-dont-list/template.njk | Re-implements do/don’t list rendering via cardDoDont. |
| packages/toolkit/components/do-dont-list/macro.njk | Updates list() macro to wrap cardDoDont. |
| packages/toolkit/components/do-dont-list/_do-dont-list.scss | Converts to a deprecated wrapper with minimal layout spacing. |
| packages/toolkit/components/do-dont-list/README.md | Deprecation + migration guidance from do-dont-list to card-do-dont. |
| packages/toolkit/components/card/template.njk | Updates Card markup/API (variants, dismiss button, metadata, tag, actionLink, icon-aside). |
| packages/toolkit/components/card/card.test.js | Adds click-proxy behavior tests for clickable cards. |
| packages/toolkit/components/card/card.scss | Updates Card styling to match new layout, metadata, aside, and dismiss button. |
| packages/toolkit/components/card/card.js | Hardens click proxy logic (primary link selection + interactive element exclusions). |
| packages/toolkit/components/card/README.md | Rewrites docs to reflect new Card family API and deprecations. |
| packages/toolkit/components/card-do-dont/template.njk | New toolkit Card / Do & Don’t template. |
| packages/toolkit/components/card-do-dont/macro.njk | New cardDoDont() macro entrypoint. |
| packages/toolkit/components/card-do-dont/_card-do-dont.scss | New styling using the new Card-family mixins. |
| packages/toolkit/components/card-do-dont/README.md | New docs for Card / Do & Don’t and its Nunjucks API. |
| packages/toolkit/components/card-callout/template.njk | New toolkit Card / Callout template. |
| packages/toolkit/components/card-callout/macro.njk | New cardCallout() macro entrypoint. |
| packages/toolkit/components/card-callout/_card-callout.scss | New styling for callout variants + legacy alias support. |
| packages/toolkit/components/card-callout/README.md | New docs for Card / Callout and its Nunjucks API. |
| packages/toolkit/components/button/README.md | Fixes docs URL + clarifies argument descriptions. |
| packages/site/views/sitemap.xml | Adds new design-system component URLs for card-callout and card-do-dont. |
| packages/site/views/site-map.njk | Adds new component links and removes legacy warning-callout/do-and-dont-lists links. |
| packages/site/views/examples/components/card/clickable-numeric-card.njk | Adds new Card example page (clickable numeric variant). |
| packages/site/views/examples/components/card/clickable-action-card.njk | Adds new Card example page (clickable action variant). |
| packages/site/views/examples/components/card/basic-success-card.njk | Adds new Card example page (basic success with icon). |
| packages/site/views/examples/components/card/basic-dismissible-with-image-card.njk | Adds new Card example page (dismissible + image). |
| packages/site/views/examples/components/card/basic-dismissible-card.njk | Adds new Card example page (dismissible). |
| packages/site/views/examples/components/card-do-dont/index.njk | Adds new examples entry for Card / Do & Don’t. |
| packages/site/views/examples/components/card-callout/index.njk | Adds new examples entry for Card / Callout. |
| packages/site/views/examples.njk | Updates examples index to include new Card examples and new Card family pages. |
| packages/site/views/design-system/styles/icons/index.njk | Updates docs link target from legacy do-and-dont-lists to card-do-dont. |
| packages/site/views/design-system/patterns/help-users-decide-when-and-where-to-get-care/index.njk | Updates references from warning-callout to card-callout. |
| packages/site/views/design-system/components/warning-callout/index.njk | Converts legacy page into migration guidance pointing to Card / Callout. |
| packages/site/views/design-system/components/inset-text/index.njk | Updates link target from warning-callout to card-callout. |
| packages/site/views/design-system/components/error-summary/macro-options.json | Refines macro option descriptions for text/html behavior and attributes. |
| packages/site/views/design-system/components/error-summary/index.njk | Adds guidance on when to use *Html options + idPrefix. |
| packages/site/views/design-system/components/do-and-dont-lists/index.njk | Converts legacy page into migration guidance pointing to Card / Do & Don’t. |
| packages/site/views/design-system/components/card/macro-options.json | Expands Card macro options to cover new API + deprecated compatibility inputs. |
| packages/site/views/design-system/components/card/index.njk | Updates Card docs page content + adds new examples sections. |
| packages/site/views/design-system/components/card/group-quarter/index.njk | Migrates quarter-card-group example to new numeric/actionLink API. |
| packages/site/views/design-system/components/card/clickable/index.njk | Migrates clickable example to variant: "clickable". |
| packages/site/views/design-system/components/card/clickable-numeric/index.njk | Adds design-system snippet for clickable numeric card. |
| packages/site/views/design-system/components/card/clickable-card-with-icon/index.njk | Migrates icon usage to new icon prop API. |
| packages/site/views/design-system/components/card/clickable-action/index.njk | Adds design-system snippet for clickable action card. |
| packages/site/views/design-system/components/card/card-with-icon/index.njk | Migrates legacy helper to new card + icon API. |
| packages/site/views/design-system/components/card/basic-success/index.njk | Adds design-system snippet for basic success card. |
| packages/site/views/design-system/components/card/basic-dismissible/index.njk | Adds design-system snippet for basic dismissible card. |
| packages/site/views/design-system/components/card/basic-dismissible-with-image/index.njk | Adds design-system snippet for dismissible card with image. |
| packages/site/views/design-system/components/card-do-dont/macro-options.json | Adds macro-options docs for Card / Do & Don’t. |
| packages/site/views/design-system/components/card-do-dont/index.njk | Adds new design-system component page for Card / Do & Don’t. |
| packages/site/views/design-system/components/card-do-dont/default/index.njk | Adds default example content for Card / Do & Don’t docs page. |
| packages/site/views/design-system/components/card-callout/macro-options.json | Adds macro-options docs for Card / Callout. |
| packages/site/views/design-system/components/card-callout/index.njk | Adds new design-system component page for Card / Callout. |
| packages/site/views/design-system/components/card-callout/default/index.njk | Adds default examples for all Card / Callout variants. |
| packages/site/views/design-system/components/buttons/macro-options.json | Updates button macro option descriptions for clarity/consistency. |
| packages/site/views/design-system/components/button/index.njk | Adds additional usage guidance copy. |
| packages/site/views/content/formatting-and-punctuation.njk | Updates link to new Card / Do & Don’t docs page. |
| packages/site/views/content/a-to-z-of-nhs-health-writing.njk | Updates link to new Card / Do & Don’t docs page. |
| packages/site/views/_includes/_side-nav.njk | Updates side-nav structure to include new Card family component pages. |
| packages/react-components/vitest.shims.d.ts | Adds vitest-axe type reference. |
| packages/react-components/tsconfig.json | Includes vitest shim file in TS compilation. |
| packages/react-components/src/types/css-modules.d.ts | Adds *.svg?url module typing for sprite imports. |
| packages/react-components/src/test/setup.ts | Enables vitest-axe expect extensions in test setup. |
| packages/react-components/src/internal/ofhUtils.ts | Adds shared utilities/types for Card family components (heading tags, class joining). |
| packages/react-components/src/internal/OfhTag.tsx | Adds internal Tag implementation used by Card. |
| packages/react-components/src/internal/OfhIcon.tsx | Adds internal Icon implementation using bundled toolkit sprite. |
| packages/react-components/src/index.ts | Exports new React Card family components. |
| packages/react-components/src/components/ErrorSummary/ErrorSummary.stories.tsx | Improves docs/controls policy and clarifies advanced props/overrides. |
| packages/react-components/src/components/CardDoDont/index.ts | New export barrel for CardDoDont. |
| packages/react-components/src/components/CardDoDont/CardDoDont.tsx | New React Card / Do & Don’t component implementation. |
| packages/react-components/src/components/CardDoDont/CardDoDont.test.tsx | Adds unit + a11y tests for CardDoDont. |
| packages/react-components/src/components/CardDoDont/CardDoDont.stories.tsx | Adds Storybook stories and docs for CardDoDont. |
| packages/react-components/src/components/CardCallout/index.ts | New export barrel for CardCallout. |
| packages/react-components/src/components/CardCallout/CardCallout.tsx | New React Card / Callout component implementation. |
| packages/react-components/src/components/CardCallout/CardCallout.test.tsx | Adds unit + a11y tests for CardCallout. |
| packages/react-components/src/components/CardCallout/CardCallout.stories.tsx | Adds Storybook stories and docs for CardCallout. |
| packages/react-components/src/components/Card/index.ts | New export barrel for Card. |
| packages/react-components/src/components/Card/Card.tsx | New React Card component implementation matching toolkit classes/behaviors. |
| packages/react-components/src/components/Card/Card.test.tsx | Adds unit + interaction + a11y tests for Card. |
| packages/react-components/src/components/Card/Card.stories.tsx | Adds comprehensive Storybook coverage for Card variants. |
| packages/react-components/src/components/Button/Button.stories.tsx | Improves docs text + controls policy for non-interactive stories. |
| packages/react-components/README.md | Updates install tag + usage docs to include new Card family exports. |
| docs/release-versioning-strategy.md | Marks toolkit-v4.4.0 and react-v0.3.0 as released. |
| docs/prompts/component-validation-qa-template-prompt.md | Adds new QA workflow prompt template. |
| docs/prompts/component-update-template-prompt.md | Extends component update workflow with dependency audit + docs UX pass rules. |
| docs/prompts/component-pr-readiness-template-prompt.md | Adds new PR-readiness workflow prompt template. |
| docs/prompts/README.md | Documents prompt workflow ordering and purpose. |
| docs/consuming-react-components.md | Updates installation tag + updates component list to include Card family. |
| UPGRADING.md | Adds migration guidance for Card family realignment + updates install examples. |
| CHANGELOG.md | Documents Card family realignment and React Card family additions. |
Comments suppressed due to low confidence (1)
packages/toolkit/components/card/card.scss:196
- Clickable-card hover/active styles now only target
.ofh-card__primary-link, but the JS click proxy still supports.ofh-card__linkas a fallback selector. This makes legacy markup (or custom headingHtml that only uses.ofh-card__link) lose the intended hover/active link styling. Consider including.ofh-card__linkalongside.ofh-card__primary-linkwithin the.ofh-card--clickable &:hover,&:activerules to keep styling consistent with the supported selectors.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
diogo-filipe-costa
requested review from
cfgreene,
jpsanders101,
rmds16,
willmcb and
wotton-software
- add a solid background and circular radius to the dismiss button so it stays visible when overlapping images or other busy content - consolidate the basic success and icon-led docs example into a single 'Basic card with icon' surface on the docs site - rename the standalone example and Storybook story to match that generic card-with-icon pattern and note that it can support success or other icon-led cards
- keep the larger dismiss hit area for accessibility\n- apply the focus treatment to the visible dismiss icon instead of the padded button\n- preserve the intended 32px visual focus ring while the button target remains 48px
jpsanders101
approved these changes
Mar 20, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR delivers DSE-324 Card family alignment with Figma across the toolkit, React component library, site examples, Storybook, and automated tests.
Release scope in this PR:
@ourfuturehealth/toolkit->4.5.0(tag:toolkit-v4.5.0)@ourfuturehealth/react-components->0.4.0(tag:react-v0.4.0)site/docschanges are included in-repo (no independently versioned release tag)Ticket: DSE-324
Breaking Changes
warning-callout,do-dont-list, and legacy Card inputs.Key Changes
1) Toolkit Card family realignment
cardcomponent to match the current Figma structure for:card-calloutcard-do-dontwarning-calloutdo-dont-listclickable,feature,type, andHTML2) React Card family parity
CardCardCalloutCardDoDont3) QA-driven design and interaction polish
4) Documentation and release follow-up
headingLevel,className,attributes, andrefButtonandErrorSummaryso the documentation standard is consistent across recent component work4.4.0 / 0.3.0Validation
npm testpnpm lintpnpm --filter=@ourfuturehealth/toolkit run buildpnpm --filter=@ourfuturehealth/react-components run buildpnpm --filter=site run build:eleventypnpm --filter=@ourfuturehealth/react-components run build:storybookpnpm buildcleanstep races with writes intopackages/site/distReviewer Focus
4.5.0/ react-components0.4.0