Skip to content

DSE-331 :: Summary List FE update#202

Open
diogo-filipe-costa wants to merge 9 commits intomainfrom
codex/ds-331-summary-list
Open

DSE-331 :: Summary List FE update#202
diogo-filipe-costa wants to merge 9 commits intomainfrom
codex/ds-331-summary-list

Conversation

@diogo-filipe-costa
Copy link
Copy Markdown
Contributor

@diogo-filipe-costa diogo-filipe-costa commented Apr 14, 2026

Description

This PR delivers DSE-331 summary list refresh across toolkit, React, the docs site, and Storybook.

It aligns the summary list with the current Figma treatment, introduces the first public React SummaryList component, and updates Storybook so the summary list stories follow the newer Docs / Default / Builder / showcase teaching pattern.

Ticket: DSE-331

Release scope

  • @ourfuturehealth/toolkit -> 4.12.0
  • @ourfuturehealth/react-components -> 0.11.0
  • updates release metadata in CHANGELOG.md, UPGRADING.md, docs/release-versioning-strategy.md, docs/consuming-react-components.md, and packages/react-components/README.md

Breaking Changes

  • None.

Key Changes

  • refreshes the toolkit summary-list component to the current Figma structure across the default, compact, without-actions, and no-border treatments
  • adds explicit toolkit macro options for padded: false and noBorder: true while preserving compatibility for existing ofh-summary-list--no-border usage
  • adds the first public React SummaryList component with optional action links, compact spacing, and no-border support
  • keeps toolkit, docs site, and Storybook aligned on the same summary-row structure and responsive stacked action treatment
  • fixes stacked action spacing on smaller breakpoints so the responsive spacing matches the current Figma token behaviour
  • updates Storybook docs so they teach the real React API more clearly, including the rows shape and the distinction between real props and the Storybook-only showActions helper
  • keeps Default as a realistic fixed example, Builder as the interactive surface, and the other stories as fixed showcase examples

Validation

  • npm test
  • pnpm lint
  • pnpm build
  • pnpm docs:release-contract
  • pnpm smoke:release-artifacts
  • pnpm --filter=@ourfuturehealth/react-components build:storybook
  • manual QA on summary list docs, Storybook stories, and responsive behavior

Reviewer Focus

  • summary-list spacing and stacked action treatment on smaller breakpoints
  • explicit padded and noBorder macro options versus existing class-based compatibility
  • Storybook should now teach the component using the newer docs/default/builder/showcase pattern
  • the React SummaryList API and the rows shape guidance should be easy for consumers to follow
  • release metadata should line up on toolkit-v4.12.0 / react-v0.11.0

@netlify
Copy link
Copy Markdown

netlify bot commented Apr 14, 2026

Deploy Preview for ofh-design-system-storybook ready!

Name Link
🔨 Latest commit 3db3bdc
🔍 Latest deploy log https://app.netlify.com/projects/ofh-design-system-storybook/deploys/69e115eaf72e210008e8c456
😎 Deploy Preview https://deploy-preview-202--ofh-design-system-storybook.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link
Copy Markdown

netlify bot commented Apr 14, 2026

Deploy Preview for ofh-design-system-docs ready!

Name Link
🔨 Latest commit 3db3bdc
🔍 Latest deploy log https://app.netlify.com/projects/ofh-design-system-docs/deploys/69e115ea64f87700083b0453
😎 Deploy Preview https://deploy-preview-202--ofh-design-system-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@diogo-filipe-costa diogo-filipe-costa marked this pull request as ready for review April 14, 2026 16:43
@diogo-filipe-costa diogo-filipe-costa requested a review from a team April 14, 2026 16:43
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Updates the design-system Summary List to match the latest FE treatment, adds explicit spacing/border options to the toolkit macro, and introduces a first public React SummaryList component with matching variants.

Changes:

  • Refreshed toolkit summary-list markup + styles, adding padded/noBorder macro options and action-link attribute support.
  • Added React SummaryList component (exports, stories, unit + a11y tests) aligned to toolkit structure and modifiers.
  • Updated design-system docs, examples, versioning docs, upgrading guide, and changelog for the new release versions and component guidance.

Reviewed changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
packages/toolkit/package.json Bumps toolkit version to 4.12.0 for the release.
packages/toolkit/components/summary-list/template.njk Adds padded/compact + no-border logic, row classes, and action-link attributes support.
packages/toolkit/components/summary-list/_summary-list.scss Reworks summary list layout to grid-based rows and updates spacing/action styling.
packages/toolkit/components/summary-list/README.md Updates summary-list docs to teach compact/no-border + new macro options.
packages/site/views/examples/components/summary-list/without-border.njk Updates example to use compact spacing (padded: false).
packages/site/views/design-system/components/summary-list/without-border/index.njk Updates design-system example to use compact spacing (padded: false).
packages/site/views/design-system/components/summary-list/macro-options.json Documents new padded/noBorder and action attributes options.
packages/site/views/design-system/components/summary-list/index.njk Refreshes component guidance text and update date.
packages/react-components/src/index.ts Exports the new SummaryList component and its types.
packages/react-components/src/components/SummaryList/index.ts Adds component-level barrel exports for SummaryList.
packages/react-components/src/components/SummaryList/SummaryList.tsx Introduces the React SummaryList implementation with padded/compact/no-border variants.
packages/react-components/src/components/SummaryList/SummaryList.test.tsx Adds unit tests and an axe accessibility check for the new component.
packages/react-components/src/components/SummaryList/SummaryList.stories.tsx Adds Storybook stories covering default/compact/without-actions/without-border.
packages/react-components/package.json Bumps react-components version to 0.10.0 for the release.
packages/react-components/README.md Updates install URL and adds SummaryList to usage + component list.
docs/release-versioning-strategy.md Updates example tags/URLs and the release history table.
docs/consuming-react-components.md Adds SummaryList to the documented exported components list.
UPGRADING.md Adds a v4.12.0 / React v0.10.0 upgrade section and migration notes.
CHANGELOG.md Adds changelog entries for toolkit 4.12.0 and react-components 0.10.0.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread packages/toolkit/components/summary-list/template.njk Outdated
Comment thread packages/react-components/src/components/SummaryList/SummaryList.tsx Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

3 participants