Bump the tools group with 5 updates

.github/workflows/ci.yml

@@ -61,6 +61,7 @@ jobs:
         with:
           autoAcceptChanges: main
           branchName: ${{ env.CHROMATIC_BRANCH}}
+          exitZeroOnChanges: false
           onlyChanged: ${{ github.event_name == 'pull_request' }}
           projectToken: ${{ env.CHROMATIC_PROJECT_TOKEN }}
           token: ${{ env.GITHUB_TOKEN }}

.storybook/preview.tsx

@@ -28,6 +28,9 @@ const preview: Preview = {
         grey: { name: 'Grey', value: '#d8dde0' },
       },
     },
+    docs: {
+      codePanel: true,
+    },
     width: 'two-thirds',
     layout: 'fullscreen',
     initialGlobals: {
@@ -46,6 +49,58 @@ const preview: Preview = {
         ],
       },
     },
+    viewport: {
+      options: {
+        watch: {
+          name: 'Watch',
+          styles: {
+            width: '224px',
+            height: '184px',
+          },
+          type: 'other',
+        },
+        mobile: {
+          name: 'Mobile',
+          styles: {
+            width: '320px',
+            height: '568px',
+          },
+          type: 'mobile',
+        },
+        tablet: {
+          name: 'Tablet',
+          styles: {
+            width: '641px',
+            height: '768px',
+          },
+          type: 'tablet',
+        },
+        desktop: {
+          name: 'Desktop',
+          styles: {
+            width: '769px',
+            height: '1024px',
+          },
+          type: 'desktop',
+        },
+        desktopL: {
+          name: 'Large desktop',
+          styles: {
+            width: '990px',
+            height: '1024px',
+          },
+          type: 'desktop',
+        },
+        desktopXL: {
+          name: 'Extra large desktop',
+          styles: {
+            width: '1281px',
+            height: '1024px',
+          },
+          type: 'desktop',
+        },
+      },
+    },
   },
   tags: ['autodocs'],
 };

.storybook/theme.ts

@@ -4,34 +4,6 @@ import packageJson from '../package.json' with { type: 'json' };
 
 export default create({
   base: 'light',
-
-  colorPrimary: '#005eb8',
-  colorSecondary: '#768692',
-
-  // UI
-  appBg: 'white',
-  appContentBg: 'white',
-  appBorderColor: 'grey',
-  appBorderRadius: 4,
-
-  // Typography
-  fontCode: 'monospace',
-
-  // Text colors
-  textColor: '#212b32',
-  textInverseColor: 'white',
-
-  // Toolbar default and active colors
-  barTextColor: 'rgba(255,255,255,0.8)',
-  barSelectedColor: 'rgba(255,255,255,1)',
-  barBg: '#005eb8',
-
-  // Form colors
-  inputBg: 'white',
-  inputBorder: '#425563',
-  inputTextColor: '#212b32',
-  inputBorderRadius: 4,
-
   brandTitle: `NHS.UK React Components (v${packageJson.version})`,
   brandUrl: 'https://github.com/NHSDigital/nhsuk-react-components',
 });

package.json

@@ -74,9 +74,9 @@
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@storybook/addon-docs": "^10.1.11",
-    "@storybook/addon-links": "^10.1.10",
-    "@storybook/react-vite": "^10.1.10",
+    "@storybook/addon-docs": "^10.2.0",
+    "@storybook/addon-links": "^10.2.0",
+    "@storybook/react-vite": "^10.2.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
@@ -109,12 +109,12 @@
     "rollup": "^4.55.1",
     "rollup-preserve-directives": "^1.1.3",
     "sass-embedded": "^1.97.2",
-    "storybook": "^10.1.11",
+    "storybook": "^10.2.0",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.53.0",
     "vite": "^7.3.1",
-    "vite-tsconfig-paths": "^6.0.4"
+    "vite-tsconfig-paths": "^6.0.5"
   },
   "peerDependencies": {
     "classnames": ">=2.5.0",

stories/Form Elements/Checkboxes.stories.tsx

@@ -470,6 +470,11 @@ export const WithExclusiveNoneOptionNamed: Story = {
 
 export const NoIDSupplied: Story = {
   name: 'Checkboxes with no ID supplied',
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
   render: function NoIDSuppliedRender() {
     const checkbox1Ref = useRef<HTMLInputElement>(null);
     const checkbox2Ref = useRef<HTMLInputElement>(null);
@@ -555,6 +560,11 @@ export const NoIDSupplied: Story = {
 
 export const NameSupplied: Story = {
   name: 'Checkboxes with name supplied',
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
   render: function NameSuppliedRender() {
     const checkbox1Ref = useRef<HTMLInputElement>(null);
     const checkbox2Ref = useRef<HTMLInputElement>(null);
@@ -640,6 +650,11 @@ export const NameSupplied: Story = {
 
 export const IDPrefixSupplied: Story = {
   name: 'Checkboxes with ID prefix supplied',
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
   render: function IDPrefixSuppliedRender() {
     const checkbox1Ref = useRef<HTMLInputElement>(null);
     const checkbox2Ref = useRef<HTMLInputElement>(null);
@@ -726,6 +741,11 @@ export const IDPrefixSupplied: Story = {
 
 export const IDPrefixAndNameSupplied: Story = {
   name: 'Checkboxes with ID prefix and name supplied',
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
   render: function IDPrefixAndNameSuppliedRender() {
     const checkbox1Ref = useRef<HTMLInputElement>(null);
     const checkbox2Ref = useRef<HTMLInputElement>(null);
@@ -812,6 +832,11 @@ export const IDPrefixAndNameSupplied: Story = {
 
 export const OnChangeAndOnInputHandlers: Story = {
   name: 'Checkboxes change and input handlers',
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
   render: function OnChangeAndOnInputHandlersRender() {
     const [changeEventLog, setChangeEventLog] = useState<Array<string>>([]);
     const [inputEventLog, setInputEventLog] = useState<Array<string>>([]);