Skip to content

Commit 7575518

Browse files
fedecarboclaude
fedecarbo
and
claude
committed
Upgrade Storybook from 8.6 to 10.3.3 and add GDS docs typography
- Upgrade all @storybook/* packages to v10.3.3 - Replace @storybook/addon-essentials with core + @storybook/addon-docs - Migrate backgrounds config to v10 format (options + initialGlobals) - Update all MDX imports from @storybook/blocks to @storybook/addon-docs/blocks - Add preview-head.html with GDS typescale overrides for docs pages Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 521e7c5 commit 7575518

39 files changed

Lines changed: 95 additions & 50 deletions

‎.storybook/main.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
export default {
22
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
3-
addons: [
4-
"@storybook/addon-essentials",
5-
"@storybook/addon-a11y",
6-
],
3+
addons: ["@storybook/addon-a11y", "@storybook/addon-docs"],
74
framework: {
85
name: "@storybook/html-vite",
96
options: {},

‎.storybook/preview-head.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<style>
2+
/* GDS typography scale for Storybook docs pages */
3+
4+
.sbdocs-wrapper,
5+
.sbdocs-content,
6+
.sbdocs {
7+
font-size: 19px !important;
8+
line-height: 1.5 !important;
9+
}
10+
11+
.sbdocs h1,
12+
.sbdocs-h1 {
13+
font-size: 48px !important;
14+
line-height: 1.1 !important;
15+
}
16+
17+
.sbdocs h2,
18+
.sbdocs-h2 {
19+
font-size: 36px !important;
20+
line-height: 1.2 !important;
21+
}
22+
23+
.sbdocs h3,
24+
.sbdocs-h3 {
25+
font-size: 24px !important;
26+
line-height: 1.25 !important;
27+
}
28+
29+
.sbdocs h4,
30+
.sbdocs-h4 {
31+
font-size: 19px !important;
32+
line-height: 1.5 !important;
33+
font-weight: 700 !important;
34+
}
35+
36+
.sbdocs p,
37+
.sbdocs li,
38+
.sbdocs-p,
39+
.sbdocs-li {
40+
font-size: 19px !important;
41+
line-height: 1.5 !important;
42+
}
43+
</style>

‎.storybook/preview.js‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import "../src/styles/main.scss";
22
import { initAll } from "govuk-frontend";
3-
43
// The source Rails app sets class="govuk-template" on <html> and
54
// class="govuk-template__body" on <body>. The sidebar CSS relies on
65
// .govuk-template:has(.bops-fullwidth-container) to lock the html
@@ -45,11 +44,16 @@ export default {
4544
layout: "padded",
4645
controls: { expanded: true },
4746
backgrounds: {
48-
default: "GOV.UK",
49-
values: [
50-
{ name: "GOV.UK", value: "#ffffff" },
51-
{ name: "Light grey", value: "#f3f2f1" },
52-
],
47+
options: {
48+
"GOV.UK": { name: "GOV.UK", value: "#ffffff" },
49+
light_grey: { name: "Light grey", value: "#f3f2f1" }
50+
}
5351
},
5452
},
53+
54+
initialGlobals: {
55+
backgrounds: {
56+
value: "gov.uk"
57+
}
58+
}
5559
};

‎docs/plan.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ Every task **must** have a companion `_[TaskName]Journey.mdx` file alongside the
5757
### Structure
5858

5959
```mdx
60-
import { Meta, Canvas } from "@storybook/blocks";
60+
import { Meta, Canvas } from "@storybook/addon-docs/blocks";
6161
import * as TaskStories from "./TaskName.stories";
6262

6363
<Meta title="Workflows/Planning Permission/1. Validation/Task Name/Journey" />

‎package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@
1111
"govuk-frontend": "^5.2.0"
1212
},
1313
"devDependencies": {
14-
"@storybook/html": "^8.6.0",
15-
"@storybook/html-vite": "^8.6.0",
16-
"@storybook/addon-essentials": "^8.6.0",
17-
"@storybook/addon-a11y": "^8.6.0",
18-
"storybook": "^8.6.0",
14+
"@storybook/html": "^10.3.3",
15+
"@storybook/html-vite": "^10.3.3",
16+
"@storybook/addon-a11y": "^10.3.3",
17+
"storybook": "^10.3.3",
1918
"sass": "^1.80.0",
20-
"vite": "^6.0.0"
19+
"vite": "^6.0.0",
20+
"@storybook/addon-docs": "^10.3.3"
2121
}
2222
}

‎src/stories/patterns/_Overview.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Meta } from "@storybook/blocks";
1+
import { Meta } from "@storybook/addon-docs/blocks";
22

33
<Meta title="Patterns/Overview" />
44

‎src/stories/patterns/application-header-bar/_ApplicationHeaderBarPattern.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Meta, Canvas } from "@storybook/blocks";
1+
import { Meta, Canvas } from "@storybook/addon-docs/blocks";
22
import * as HeaderBarStories from "./ApplicationHeaderBar.stories";
33

44
<Meta title="Patterns/Application Header Bar/Documentation" />

‎src/stories/patterns/sidebar-navigation/_SidebarNavigationPattern.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Meta, Canvas } from "@storybook/blocks";
1+
import { Meta, Canvas } from "@storybook/addon-docs/blocks";
22
import * as SidebarStories from "./SidebarNavigation.stories";
33

44
<Meta title="Patterns/Sidebar Navigation/Documentation" />

‎src/stories/patterns/validation-request/_ValidationRequestPattern.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Meta, Canvas } from "@storybook/blocks";
1+
import { Meta, Canvas } from "@storybook/addon-docs/blocks";
22
import * as ValidationRequestStories from "./ValidationRequest.stories";
33

44
<Meta title="Patterns/Validation Request/Documentation" />

‎src/stories/workflows/auth/_ExpiredTokenJourney.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Meta, Canvas } from "@storybook/blocks";
1+
import { Meta, Canvas } from "@storybook/addon-docs/blocks";
22
import * as ExpiredTokenStories from "./ExpiredToken.stories";
33

44
<Meta title="Workflows/Authentication/Expired Token/Journey" />

0 commit comments

Comments
 (0)