chore(release): prepare table release metadata

diogo-filipe-costa · diogo-filipe-costa · commit 944b37431e0f · 2026-04-17T14:34:06.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,15 +8,32 @@ We are following [Semantic Versioning](https://semver.org/spec/v2.0.0.html), as
 
 ### Unreleased
 
-#### @ourfuturehealth/react-components 0.8.0 (`react-v0.8.0`)
+#### @ourfuturehealth/toolkit 4.18.0 (`toolkit-v4.18.0`)
 
-##### ⚠️ BREAKING CHANGES
+##### Added
 
-- React `Icon` and `Card` icon configuration no longer accept `spritePath`. React icons now always render from bundled toolkit SVG data.
+- Expanded docs-site coverage for the `table` component, including:
+  - responsive multi-column tables
+  - first-cell row headers
+  - numeric columns
+  - column and row spans
 
-##### Fixed
+##### Changed
+
+- Refined the toolkit `table` component to match the current Figma responsive/mobile treatment more closely
+- Updated the responsive table rows to use clearer label/value columns and a Figma-aligned `2px` closing border
+- Expanded the table docs page and macro guidance so the current table patterns are easier to understand and adopt
+
+#### @ourfuturehealth/react-components 0.17.0 (`react-v0.17.0`)
+
+##### Added
+
+- New public `Table` component with caption, head, rows, responsive stacking, numeric cells, and merged-cell support
+- Storybook coverage for `Table`, including `Default`, `Builder`, `ResponsiveMultiColumn`, `FirstCellIsHeader`, `NumericValues`, and `ColSpanAndRowSpan`
+
+##### Changed
 
-- React icons now render correctly in published-consumer installs by inlining the requested bundled SVG symbol instead of referencing a bundled `data:` sprite URL.
+- Refined the Table Storybook docs page so it teaches the React API clearly and separates Builder-only helpers from real props
 
 ### 2026-04-09
 
diff --git a/UPGRADING.md b/UPGRADING.md
@@ -8,7 +8,7 @@ This guide provides detailed migration instructions for upgrading between versio
 
 | Version                                                 | Date          | Breaking Changes           | Migration Complexity                     |
 | ------------------------------------------------------- | ------------- | -------------------------- | ---------------------------------------- |
-| [React v0.8.0](#upgrading-to-react-v080)                | April 2026    | React `spritePath` removal | 🟢 Low - Remove the deprecated prop      |
+| [v4.18.0 / React v0.17.0](#upgrading-to-v4180--react-v0170) | April 2026    | No breaking changes        | 🟢 Low - adopt the new Table APIs only if relevant |
 | [v4.9.0 / React v0.7.0](#upgrading-to-v490--react-v070) | April 2026    | Icon naming sync           | 🟡 Medium - Search/replace icon names    |
 | [v4.8.0 / React v0.6.0](#upgrading-to-v480--react-v060) | March 2026    | No breaking changes        | 🟢 Low - only relevant if you adopted the earlier TextInput prototype |
 | [v4.7.0 / React v0.5.0](#upgrading-to-v470--react-v050) | March 2026    | Card family realignment    | 🟡 Medium - API migration recommended    |
@@ -20,56 +20,81 @@ This guide provides detailed migration instructions for upgrading between versio
 
 ---
 
-## Upgrading to React v0.8.0
+## Upgrading to v4.18.0 / React v0.17.0
 
 **Planned:** April 2026
 **Affected packages:**
 
-- `@ourfuturehealth/react-components` v0.8.0+
+- `@ourfuturehealth/toolkit` v4.18.0+
+- `@ourfuturehealth/react-components` v0.17.0+
 
-### Breaking Changes
+### Release Overview
 
-`@ourfuturehealth/react-components` removes the `spritePath` prop from the public `Icon` API and from `Card` icon configuration. React icons now always render from bundled toolkit SVG data.
+This release does not introduce a supported breaking API change.
 
-### Migration Steps
+Toolkit consumers should review the refreshed `table` component responsive treatment and the expanded docs-site examples if they already use content tables.
 
-1. Remove any `spritePath` prop from `Icon` usage.
-2. Remove any `spritePath` field from `Card` icon configuration objects.
-3. Re-run visual checks for icon-bearing surfaces such as `Icon`, `Select`, `Card`, and `Checkboxes`.
+React consumers can now adopt the public `Table` component when they need a structured content table with optional caption, responsive stacking, row headers, numeric cells, and merged cells.
 
-#### React example
+### Table
 
-**Before:**
+- Toolkit `table` now matches the current Figma responsive/mobile treatment more closely, including the stacked label/value layout and `2px` closing border
+- React now exposes `Table` as a public component with `caption`, `head`, `rows`, `responsive`, and `firstCellIsHeader` support
+- Storybook and docs-site examples now cover default, responsive, row-header, numeric, and merged-cell table usage
 
-```tsx
-<Icon name="Search" spritePath="/assets/icons/icon-sprite.svg" />
+#### React example
 
-<Card
-  icon={{
-    name: 'Search',
-    spritePath: '/assets/icons/icon-sprite.svg',
-  }}
-/>
+```tsx
+import { Table } from '@ourfuturehealth/react-components';
+
+<Table
+  caption="Symptoms and self-care"
+  head={[
+    { content: 'Symptom' },
+    { content: 'Self-care' },
+  ]}
+  rows={[
+    [
+      { content: 'Dry eyes' },
+      { content: 'Use artificial tears' },
+    ],
+    [
+      { content: 'Headache' },
+      { content: 'Rest and keep hydrated' },
+    ],
+  ]}
+/>;
 ```
 
-**After:**
+#### Responsive example
 
 ```tsx
-<Icon name="Search" />
-
-<Card
-  icon={{
-    name: 'Search',
-  }}
+<Table
+  caption="Clinic availability by day"
+  responsive
+  head={[
+    { content: 'Day' },
+    { content: 'Morning clinic' },
+    { content: 'Afternoon clinic' },
+    { content: 'Notes' },
+  ]}
+  rows={[
+    [
+      { content: 'Monday' },
+      { content: 'Children' },
+      { content: 'Adults' },
+      { content: 'Walk-ins available' },
+    ],
+    [
+      { content: 'Tuesday' },
+      { content: 'Respiratory' },
+      { content: 'Diabetes' },
+      { content: 'Pre-booked only' },
+    ],
+  ]}
 />
 ```
 
-If an application previously passed `spritePath` in React, that prop should now be removed.
-
-### Toolkit reminder
-
-Toolkit/Nunjucks icon consumers are unchanged. They must still serve `icon-sprite.svg` at a public URL, default `/assets/icons/icon-sprite.svg`, or override that URL with `spritePath`.
-
 ## Upgrading to v4.9.0 / React v0.7.0
 
 **Released:** April 2026
diff --git a/docs/consuming-react-components.md b/docs/consuming-react-components.md
@@ -57,10 +57,25 @@ Import components and styles in your React application:
 
 ```tsx
 import React from 'react';
-import { Button, TextInput } from '@ourfuturehealth/react-components';
+import { Button, Table, TextInput } from '@ourfuturehealth/react-components';
 import '@ourfuturehealth/react-components/styles/participant';
 
 function App() {
+  const symptomsHead = [
+    { content: 'Symptom' },
+    { content: 'Self-care' },
+  ];
+  const symptomsRows = [
+    [
+      { content: 'Dry eyes' },
+      { content: 'Use artificial tears' },
+    ],
+    [
+      { content: 'Headache' },
+      { content: 'Rest and keep hydrated' },
+    ],
+  ];
+
   return (
     <div>
       <TextInput
@@ -70,6 +85,7 @@ function App() {
         inputWidth={20}
         onChange={(e) => console.log(e.target.value)}
       />
+      <Table caption="Symptoms and self-care" head={symptomsHead} rows={symptomsRows} />
       <Button onClick={() => console.log('Clicked')}>Submit</Button>
     </div>
   );
@@ -136,6 +152,7 @@ The React components package currently provides the following components:
 - `Card` - Content presentation cards for summaries, status, and next steps
 - `CardCallout` - Feedback-style callout cards for informational, warning, success, and error messages
 - `CardDoDont` - Positive and negative recommendation lists
+- `Table` - Structured content tables with caption, responsive stacking, numeric cells, row headers, and merged-cell support
 
 For complete component documentation and live examples, run Storybook locally from this repository:
 
diff --git a/docs/release-versioning-strategy.md b/docs/release-versioning-strategy.md
@@ -126,9 +126,8 @@ This table is a visual aid for pre-monorepo versus post-monorepo releases.
 | 17    | `react-v0.5.0`   | N/A             | `0.5.0`       | Monorepo       | Released               |
 | 18    | `toolkit-v4.8.0` | `4.8.0`         | N/A           | Monorepo       | Released               |
 | 19    | `react-v0.6.0`   | N/A             | `0.6.0`       | Monorepo       | Released               |
-| 20    | `toolkit-v4.9.0` | `4.9.0`         | N/A           | Monorepo       | Released               |
-| 21    | `react-v0.7.0`   | N/A             | `0.7.0`       | Monorepo       | Released               |
-| 22    | `react-v0.8.0`   | N/A             | `0.8.0`       | Monorepo       | Planned in this branch |
+| 20    | `toolkit-v4.18.0` | `4.18.0`       | N/A           | Monorepo       | Planned in this branch |
+| 21    | `react-v0.17.0`   | N/A            | `0.17.0`      | Monorepo       | Planned in this branch |
 
 ## References
 
diff --git a/packages/react-components/README.md b/packages/react-components/README.md
@@ -55,6 +55,7 @@ import {
   Radios,
   Select,
   Tag,
+  Table,
   Textarea,
   TextInput,
 } from '@ourfuturehealth/react-components';
@@ -72,6 +73,20 @@ function App() {
     { value: 'phone', label: 'Phone' },
     { value: 'post', label: 'Post' },
   ];
+  const symptomsHead = [
+    { content: 'Symptom' },
+    { content: 'Self-care' },
+  ];
+  const symptomsRows = [
+    [
+      { content: 'Dry eyes' },
+      { content: 'Use artificial tears' },
+    ],
+    [
+      { content: 'Headache' },
+      { content: 'Rest and keep hydrated' },
+    ],
+  ];
 
   return (
     <div>
@@ -136,6 +151,7 @@ function App() {
         legend="Preferred contact method"
         name="preferred-contact-method"
       />
+      <Table caption="Symptoms and self-care" head={symptomsHead} rows={symptomsRows} />
     </div>
   );
 }
@@ -189,6 +205,7 @@ The package also provides:
 - `Checkboxes`
 - `Radios`
 - `Icon`
+- `Table`
 
 ### ErrorSummary
 
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ourfuturehealth/react-components",
-  "version": "0.8.0",
+  "version": "0.17.0",
   "type": "module",
   "description": "React component library for OFH Design System",
   "packageManager": "pnpm@10.29.2",
diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ourfuturehealth/toolkit",
-  "version": "4.9.0",
+  "version": "4.18.0",
   "description": "Our Future Health design system toolkit contains the code you need to start building user interfaces for Our Future Health websites and services.",
   "repository": {
     "type": "git",

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@ourfuturehealth/react-components",`
`3`		`- "version": "0.8.0",`
	`3`	`+ "version": "0.17.0",`
`4`	`4`	`"type": "module",`
`5`	`5`	`"description": "React component library for OFH Design System",`
`6`	`6`	`"packageManager": "pnpm@10.29.2",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@ourfuturehealth/toolkit",`
`3`		`- "version": "4.9.0",`
	`3`	`+ "version": "4.18.0",`
`4`	`4`	`"description": "Our Future Health design system toolkit contains the code you need to start building user interfaces for Our Future Health websites and services.",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`