DSE-326 / DSE-328 :: Details and Expander FE update

[diogo-filipe-costa]

Description

This PR delivers DSE-326 / DSE-328 details and expander refresh across toolkit, React, the docs site, and Storybook.

It aligns the details-family components with the current Figma patterns, updates toolkit and React coverage for both Details and Expander, and brings Storybook into the newer Docs / Default / Builder / showcase teaching pattern.

Ticket: DSE-326 / DSE-328

Release scope

• @ourfuturehealth/toolkit -> 4.11.0
• @ourfuturehealth/react-components -> 0.10.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 toolkit details-family behaviour and styling for Details and Expander
• adds/aligns the React Details and Expander components
• keeps the intended distinction between the two patterns clear:
  • Details for lighter supporting information
  • Expander for more prominent expandable content
• improves Storybook docs pages so they teach the real React API more clearly
• keeps Default stories as realistic fixed examples, Builder stories as the interactive surface, and showcase stories as fixed usage examples
• improves copyable usage snippets for the details-family components in Storybook docs

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 details-family Storybook stories

Reviewer Focus

• Details and Expander should both be aligned with the updated component work
• Storybook should now teach both components using the newer docs/default/builder/showcase pattern
• the grouped expander story should clearly demonstrate the intended grouped layout
• release metadata should line up on toolkit-v4.11.0 / react-v0.10.0

[netlify]

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

Name	Link
🔨 Latest commit	955aef1
🔍 Latest deploy log	https://app.netlify.com/projects/ofh-design-system-storybook/deploys/69e5ecb8cda1680008be25fd
😎 Deploy Preview	https://deploy-preview-201--ofh-design-system-storybook.netlify.app
📱 Preview on mobile	Toggle 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]

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

Name	Link
🔨 Latest commit	955aef1
🔍 Latest deploy log	https://app.netlify.com/projects/ofh-design-system-docs/deploys/69e5ecb8b6e7410008605b9f
😎 Deploy Preview	https://deploy-preview-201--ofh-design-system-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[Copilot]

Pull request overview

This PR updates the “details family” UI across the toolkit and docs site to match the latest Figma treatment, and introduces the first public React Details and Expander components built on a shared internal renderer to keep behaviour and styling aligned.

Changes:

• Refreshed toolkit details / expander templates and SCSS for updated icon-state and spacing rules.
• Added new public React Details + Expander components (tests + Storybook docs) backed by a shared internal DetailsFamilyBase.
• Updated docs/upgrade/release documentation and version bumps for the 4.11.0 / 0.9.0 release.

Reviewed changes

Copilot reviewed 22 out of 22 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
UPGRADING.md	Adds upgrade entry for toolkit 4.11.0 and React 0.9.0.
packages/toolkit/package.json	Bumps toolkit version to 4.11.0.
packages/toolkit/components/details/template.njk	Aligns details/expander markup and icon rendering via shared template logic.
packages/toolkit/components/details/README.md	Updates docs examples/wording for refreshed details/expander markup.
packages/toolkit/components/details/_details.scss	Reworks details/expander styling for new spacing/icon-state rules.
packages/site/views/design-system/components/expander/index.njk	Refreshes component metadata “last updated” date.
packages/site/views/design-system/components/details/rich-content/index.njk	Adds a new docs-site rich-content example for Details.
packages/site/views/design-system/components/details/index.njk	Links in the new rich-content example and refreshes metadata date.
packages/react-components/src/index.ts	Exports new React Details and Expander public APIs.
packages/react-components/src/components/Expander/index.ts	Barrel export for Expander.
packages/react-components/src/components/Expander/Expander.tsx	Implements Expander via the shared internal renderer.
packages/react-components/src/components/Expander/Expander.test.tsx	Adds unit + a11y tests for Expander.
packages/react-components/src/components/Expander/Expander.stories.tsx	Adds Storybook stories including a “Grouped” example.
packages/react-components/src/components/Details/index.ts	Barrel export for Details.
packages/react-components/src/components/Details/Details.tsx	Implements Details via the shared internal renderer.
packages/react-components/src/components/Details/Details.test.tsx	Adds unit + a11y tests for Details.
packages/react-components/src/components/Details/Details.stories.tsx	Adds Storybook stories including rich-content example.
packages/react-components/src/components/_internal/DetailsFamily.tsx	Introduces shared internal renderer used by both new components.
packages/react-components/README.md	Updates install URL/version and documents new components in usage example.
packages/react-components/package.json	Bumps React components version to 0.9.0.
docs/release-versioning-strategy.md	Updates example tags/URLs and release table entries for new versions.
CHANGELOG.md	Adds release notes for toolkit 4.11.0 and React 0.9.0.

---

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