diff --git a/.storybook/decorators.jsx b/.storybook/decorators.tsx
similarity index 64%
rename from .storybook/decorators.jsx
rename to .storybook/decorators.tsx
index 97da30f9d..19644387c 100644
--- a/.storybook/decorators.jsx
+++ b/.storybook/decorators.tsx
@@ -1,10 +1,13 @@
+import type {Decorator} from '@storybook/react';
+import {Document} from '@utrecht/component-library-react';
+
/**
* Storybook does not have a before/after cleanup cycle, and localStorage would in
* these situations break story/test isolation.
*
* This decorator is applied to every story to reset the storage state.
*/
-export const withClearSessionStorage = Story => {
+export const withClearSessionStorage: Decorator = Story => {
window.sessionStorage.clear();
return ;
};
@@ -17,7 +20,7 @@ export const withClearSessionStorage = Story => {
* 'e450890a-4166-410e-8d64-0a54ad30ba01'. You can specify another key via parameters
* or args.
*/
-export const withClearSubmissionLocalStorage = (Story, {args, parameters}) => {
+export const withClearSubmissionLocalStorage: Decorator = (Story, {args, parameters}) => {
const formId =
args?.formId ?? parameters?.localStorage?.formId ?? 'e450890a-4166-410e-8d64-0a54ad30ba01';
window.localStorage.removeItem(formId);
@@ -28,10 +31,13 @@ export const withClearSubmissionLocalStorage = (Story, {args, parameters}) => {
* This decorator wraps stories so that they are inside a container with the class name "utrecht-document". This is
* needed so that components inherit the right font.
*/
-export const utrechtDocumentDecorator = Story => {
- return (
-
-
-
- );
-};
+export const withUtrechtDocument: Decorator = (Story, {parameters}) => (
+
+
+
+);
diff --git a/.storybook/main.mts b/.storybook/main.mts
index c6604d812..e87e2ca2a 100644
--- a/.storybook/main.mts
+++ b/.storybook/main.mts
@@ -7,6 +7,7 @@ import type {StorybookConfig} from '@storybook/react-vite';
const config: StorybookConfig = {
core: {
disableTelemetry: true,
+ disableWhatsNewNotifications: true,
},
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
diff --git a/.storybook/preview.js b/.storybook/preview.js
index c29929946..8bf5846f5 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -21,9 +21,9 @@ import OFLibrary from 'formio/templates';
import {withModalDecorator} from 'story-utils/decorators';
import {
- utrechtDocumentDecorator,
withClearSessionStorage,
withClearSubmissionLocalStorage,
+ withUtrechtDocument,
} from './decorators';
import {allModes} from './modes.mjs';
import {reactIntl} from './reactIntl.mjs';
@@ -53,7 +53,7 @@ export default {
withClearSessionStorage,
withClearSubmissionLocalStorage,
withModalDecorator,
- utrechtDocumentDecorator,
+ withUtrechtDocument,
],
parameters: {
viewport: {
diff --git a/design-tokens b/design-tokens
index 620e08dd2..ee447e5a3 160000
--- a/design-tokens
+++ b/design-tokens
@@ -1 +1 @@
-Subproject commit 620e08dd2bc8b567d7d8308b3d5df6efd80d3ddb
+Subproject commit ee447e5a31b0be1455d357ab63fb6eac718f5d74
diff --git a/package-lock.json b/package-lock.json
index 350d74175..8aa0aa630 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,8 +15,8 @@
"@floating-ui/react": "^0.27.5",
"@formio/protected-eval": "^1.2.1",
"@fortawesome/fontawesome-free": "^6.4.0",
- "@open-formulieren/design-tokens": "^0.55.0",
- "@open-formulieren/formio-renderer": "^0.2.0",
+ "@open-formulieren/design-tokens": "^0.57.0",
+ "@open-formulieren/formio-renderer": "^0.3.0",
"@open-formulieren/formiojs": "^4.13.14",
"@open-formulieren/leaflet-tools": "^1.0.0",
"@sentry/react": "^8.50.0",
@@ -83,7 +83,7 @@
"@types/react-dom": "^18.3.5",
"@typescript-eslint/parser": "^8.26.0",
"@utrecht/component-library-react": "1.0.0-alpha.353",
- "@utrecht/components": "1.0.0-alpha.565",
+ "@utrecht/components": "^7.4.0",
"@utrecht/design-tokens": "^2.5.0",
"@vitejs/plugin-react": "^4.3.4",
"@vitest/coverage-istanbul": "^3.0.7",
@@ -132,7 +132,7 @@
},
"design-tokens": {
"name": "@open-formulieren/design-tokens",
- "version": "0.55.0",
+ "version": "0.57.0",
"license": "EUPL-1.2",
"devDependencies": {
"chokidar": "^3.5.3",
@@ -3757,10 +3757,9 @@
"link": true
},
"node_modules/@open-formulieren/formio-renderer": {
- "version": "0.2.1",
- "resolved": "https://registry.npmjs.org/@open-formulieren/formio-renderer/-/formio-renderer-0.2.1.tgz",
- "integrity": "sha512-15OJyYC8Sg3qMl5IVwUe/l73dFwn/V5OtA0NdUoRvZbFCzhHKxwp4KPKTpuBdxfKlyqB2iIk8op6bG/Tz55akQ==",
- "license": "EUPL-1.2",
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/@open-formulieren/formio-renderer/-/formio-renderer-0.3.0.tgz",
+ "integrity": "sha512-YdwddyQhMtBGkc4otPRyuP6l7eKGm+vpECrPhPaNf9JORvljh3mOcctkj8lHnPwZHihsVdukrcO92NESic1wlw==",
"dependencies": {
"@utrecht/component-library-react": "1.0.0-alpha.353",
"clsx": "^2.1.0",
@@ -6335,12 +6334,21 @@
}
},
"node_modules/@utrecht/components": {
- "version": "1.0.0-alpha.565",
- "resolved": "https://registry.npmjs.org/@utrecht/components/-/components-1.0.0-alpha.565.tgz",
- "integrity": "sha512-Rs/f8YzVpeM7pXgQuTicT/rb2sYrUqAGB3rRSWq7TuvUgreENrJa9vnRytVq2I6+Z66zEuz8d2tBO0tUEijFDA==",
+ "version": "7.4.0",
+ "resolved": "https://registry.npmjs.org/@utrecht/components/-/components-7.4.0.tgz",
+ "integrity": "sha512-LWFJjJ7TF0eaoWq5TGrg7rNYnG+G5yIEJhuiwFlbICwSx2n+gZVbAE1dAW8YG2mGqveXZk38hBC2FWNE1tj1BQ==",
"dev": true,
"dependencies": {
- "clsx": "1.2.1"
+ "clsx": "2.1.1"
+ }
+ },
+ "node_modules/@utrecht/components/node_modules/clsx": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+ "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+ "dev": true,
+ "engines": {
+ "node": ">=6"
}
},
"node_modules/@utrecht/design-tokens": {
diff --git a/package.json b/package.json
index 5498bc76f..356f68cac 100644
--- a/package.json
+++ b/package.json
@@ -30,8 +30,8 @@
"@floating-ui/react": "^0.27.5",
"@formio/protected-eval": "^1.2.1",
"@fortawesome/fontawesome-free": "^6.4.0",
- "@open-formulieren/design-tokens": "^0.55.0",
- "@open-formulieren/formio-renderer": "^0.2.0",
+ "@open-formulieren/design-tokens": "^0.57.0",
+ "@open-formulieren/formio-renderer": "^0.3.0",
"@open-formulieren/formiojs": "^4.13.14",
"@open-formulieren/leaflet-tools": "^1.0.0",
"@sentry/react": "^8.50.0",
@@ -127,7 +127,7 @@
"@types/react-dom": "^18.3.5",
"@typescript-eslint/parser": "^8.26.0",
"@utrecht/component-library-react": "1.0.0-alpha.353",
- "@utrecht/components": "1.0.0-alpha.565",
+ "@utrecht/components": "^7.4.0",
"@utrecht/design-tokens": "^2.5.0",
"@vitejs/plugin-react": "^4.3.4",
"@vitest/coverage-istanbul": "^3.0.7",
diff --git a/src/components/appointments/fields/LocationSelect.stories.jsx b/src/components/appointments/fields/LocationSelect.stories.jsx
index 25cf5947b..73e5af0cf 100644
--- a/src/components/appointments/fields/LocationSelect.stories.jsx
+++ b/src/components/appointments/fields/LocationSelect.stories.jsx
@@ -31,10 +31,10 @@ export const MultipleCandidates = {
const canvas = within(canvasElement);
await expect(canvas.queryByText('Open Gem')).not.toBeInTheDocument();
const dropdown = canvas.getByLabelText('Locatie');
- await userEvent.click(dropdown);
+ dropdown.focus();
await userEvent.keyboard('[ArrowDown]');
- await expect(await canvas.findByText('Open Gem')).toBeVisible();
- await expect(await canvas.findByText('Bahamas')).toBeVisible();
+ expect(await canvas.findByRole('option', {name: 'Open Gem'})).toBeVisible();
+ expect(await canvas.findByRole('option', {name: 'Bahamas'})).toBeVisible();
},
};
@@ -52,7 +52,7 @@ export const SingleCandidate = {
await expect(canvas.queryByText('Bahamas')).not.toBeInTheDocument();
const dropdown = canvas.getByLabelText('Locatie');
- await userEvent.click(dropdown);
+ dropdown.focus();
await userEvent.keyboard('[ArrowDown]');
// wait for locations to be loaded
@@ -61,8 +61,8 @@ export const SingleCandidate = {
expect(textNodes.length).toBeGreaterThan(0);
});
- await expect(canvas.queryByText('Bahamas')).not.toBeInTheDocument();
+ expect(canvas.queryByText('Bahamas')).not.toBeInTheDocument();
await userEvent.keyboard('[Escape]');
- await expect(await canvas.findByText('Open Gem')).toBeVisible();
+ expect(await canvas.findByText('Open Gem')).toBeVisible();
},
};
diff --git a/src/formio/components/AddressNL.stories.js b/src/formio/components/AddressNL.stories.js
index 20bd619c8..a07a44bad 100644
--- a/src/formio/components/AddressNL.stories.js
+++ b/src/formio/components/AddressNL.stories.js
@@ -1,6 +1,6 @@
import {expect, userEvent, waitFor, within} from '@storybook/test';
-import {ConfigDecorator, withUtrechtDocument} from 'story-utils/decorators';
+import {ConfigDecorator} from 'story-utils/decorators';
import {
mockBAGDataGet,
@@ -12,7 +12,7 @@ import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Custom / Address NL',
- decorators: [withUtrechtDocument, ConfigDecorator],
+ decorators: [ConfigDecorator],
args: {
type: 'addressNL',
key: 'addressNL',
diff --git a/src/formio/components/BsnField.stories.js b/src/formio/components/BsnField.stories.js
index 6931f2d09..53c093b9a 100644
--- a/src/formio/components/BsnField.stories.js
+++ b/src/formio/components/BsnField.stories.js
@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Custom / BSNField',
- decorators: [withUtrechtDocument],
args: {
type: 'bsn',
extraComponentProperties: {},
diff --git a/src/formio/components/Checkbox.scss b/src/formio/components/Checkbox.scss
index 37810008b..dc27fa737 100644
--- a/src/formio/components/Checkbox.scss
+++ b/src/formio/components/Checkbox.scss
@@ -1,6 +1,6 @@
@use 'microscope-sass/lib/bem';
-@import '@utrecht/components/dist/custom-checkbox/css/index.css';
+@import '@utrecht/components/custom-checkbox/';
// Design tokens: see src/components/checkbox-field.tokens.json
diff --git a/src/formio/components/Checkbox.stories.js b/src/formio/components/Checkbox.stories.js
index 9d103fcc6..408c671bb 100644
--- a/src/formio/components/Checkbox.stories.js
+++ b/src/formio/components/Checkbox.stories.js
@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Vanilla / Checkbox',
- decorators: [withUtrechtDocument],
args: {
type: 'checkbox',
extraComponentProperties: {},
diff --git a/src/formio/components/Columns.stories.jsx b/src/formio/components/Columns.stories.jsx
index dfd1e8e79..393703437 100644
--- a/src/formio/components/Columns.stories.jsx
+++ b/src/formio/components/Columns.stories.jsx
@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
import {MultipleFormioComponents, SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Vanilla / Columns',
- decorators: [withUtrechtDocument],
args: {
evalContext: {},
},
diff --git a/src/formio/components/Content.stories.jsx b/src/formio/components/Content.stories.jsx
index 185fbfc68..d35b10e73 100644
--- a/src/formio/components/Content.stories.jsx
+++ b/src/formio/components/Content.stories.jsx
@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Vanilla / Content',
- decorators: [withUtrechtDocument],
args: {
type: 'content',
extraComponentProperties: {},
diff --git a/src/formio/components/Cosign.stories.js b/src/formio/components/Cosign.stories.js
index 43c012f27..f3837ad49 100644
--- a/src/formio/components/Cosign.stories.js
+++ b/src/formio/components/Cosign.stories.js
@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Custom / Cosign',
- decorators: [withUtrechtDocument],
args: {
key: 'cosign',
type: 'cosign',
diff --git a/src/formio/components/Currency.stories.js b/src/formio/components/Currency.stories.js
index 8696355ee..359454147 100644
--- a/src/formio/components/Currency.stories.js
+++ b/src/formio/components/Currency.stories.js
@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Vanilla / Currency',
- decorators: [withUtrechtDocument],
args: {
type: 'currency',
extraComponentProperties: {
diff --git a/src/formio/components/DateField.stories.js b/src/formio/components/DateField.stories.js
index 163a12a3d..b4a1d2a64 100644
--- a/src/formio/components/DateField.stories.js
+++ b/src/formio/components/DateField.stories.js
@@ -1,6 +1,5 @@
import {expect, userEvent, within} from '@storybook/test';
-import {withUtrechtDocument} from 'story-utils/decorators';
import {sleep} from 'utils';
import {SingleFormioComponent} from './story-util';
@@ -24,7 +23,6 @@ const waitForFlatpickr = async node => {
export default {
title: 'Form.io components / Custom / DateField',
- decorators: [withUtrechtDocument],
args: {
type: 'date',
extraComponentProperties: {
diff --git a/src/formio/components/DateTimeField.stories.js b/src/formio/components/DateTimeField.stories.js
index f4e7579fe..dbe1a85d1 100644
--- a/src/formio/components/DateTimeField.stories.js
+++ b/src/formio/components/DateTimeField.stories.js
@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Vanilla / DateTimeField',
- decorators: [withUtrechtDocument],
args: {
type: 'datetime',
extraComponentProperties: {
diff --git a/src/formio/components/EditGrid.stories.jsx b/src/formio/components/EditGrid.stories.jsx
index aafa22180..9f62efe76 100644
--- a/src/formio/components/EditGrid.stories.jsx
+++ b/src/formio/components/EditGrid.stories.jsx
@@ -1,6 +1,6 @@
import {expect, userEvent, waitFor, within} from '@storybook/test';
-import {ConfigDecorator, withUtrechtDocument} from 'story-utils/decorators';
+import {ConfigDecorator} from 'story-utils/decorators';
import {sleep} from 'utils';
import {mockBAGDataGet, mockBAGNoDataGet} from './AddressNL.mocks';
@@ -40,7 +40,6 @@ const defaultNested = [
export default {
title: 'Form.io components / Vanilla / EditGrid (Repeating group)',
- decorators: [withUtrechtDocument],
args: {
type: 'editgrid',
groupLabel: '',
diff --git a/src/formio/components/Email.stories.js b/src/formio/components/Email.stories.js
index 02eca5a20..25b8cd490 100644
--- a/src/formio/components/Email.stories.js
+++ b/src/formio/components/Email.stories.js
@@ -1,12 +1,9 @@
import {fn} from '@storybook/test';
-import {withUtrechtDocument} from 'story-utils/decorators';
-
import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Vanilla / Email',
- decorators: [withUtrechtDocument],
args: {
type: 'email',
extraComponentProperties: {},
diff --git a/src/formio/components/Fieldset.stories.js b/src/formio/components/Fieldset.stories.js
index d676d7251..413e80c2f 100644
--- a/src/formio/components/Fieldset.stories.js
+++ b/src/formio/components/Fieldset.stories.js
@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Vanilla / Fieldset',
- decorators: [withUtrechtDocument],
args: {
type: 'fieldset',
extraComponentProperties: {
diff --git a/src/formio/components/FileField.stories.js b/src/formio/components/FileField.stories.js
index e26c6605f..26b6dec94 100644
--- a/src/formio/components/FileField.stories.js
+++ b/src/formio/components/FileField.stories.js
@@ -1,7 +1,6 @@
import {expect, userEvent, within} from '@storybook/test';
import {getWorker} from 'msw-storybook-addon';
-import {withUtrechtDocument} from 'story-utils/decorators';
import {sleep} from 'utils';
import {
@@ -38,7 +37,6 @@ const MIME_TO_LABEL = {
export default {
title: 'Form.io components / Vanilla / FileUpload',
- decorators: [withUtrechtDocument],
args: {
type: 'file',
extraComponentProperties: {},
diff --git a/src/formio/components/IBANField.stories.js b/src/formio/components/IBANField.stories.js
index e9545b719..6a20690bd 100644
--- a/src/formio/components/IBANField.stories.js
+++ b/src/formio/components/IBANField.stories.js
@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Custom / IBANField',
- decorators: [withUtrechtDocument],
args: {
type: 'iban',
extraComponentProperties: {},
diff --git a/src/formio/components/LicensePlateField.stories.js b/src/formio/components/LicensePlateField.stories.js
index 2826f920e..835cdd7fd 100644
--- a/src/formio/components/LicensePlateField.stories.js
+++ b/src/formio/components/LicensePlateField.stories.js
@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Custom / LicensePlateField',
- decorators: [withUtrechtDocument],
args: {
type: 'licenseplate',
extraComponentProperties: {},
diff --git a/src/formio/components/Map.stories.js b/src/formio/components/Map.stories.js
index b6e8f7c37..1b9262228 100644
--- a/src/formio/components/Map.stories.js
+++ b/src/formio/components/Map.stories.js
@@ -1,11 +1,11 @@
import {mockAddressSearchGet, mockLatLngSearchGet} from 'components/Map/mocks';
-import {ConfigDecorator, withUtrechtDocument} from 'story-utils/decorators';
+import {ConfigDecorator} from 'story-utils/decorators';
import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Custom / Map',
- decorators: [withUtrechtDocument, ConfigDecorator],
+ decorators: [ConfigDecorator],
args: {
type: 'map',
key: 'map',
diff --git a/src/formio/components/Number.stories.js b/src/formio/components/Number.stories.js
index 3c4f3db8d..fbede6c82 100644
--- a/src/formio/components/Number.stories.js
+++ b/src/formio/components/Number.stories.js
@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Vanilla / Number',
- decorators: [withUtrechtDocument],
args: {
type: 'number',
extraComponentProperties: {},
diff --git a/src/formio/components/PhoneNumberField.stories.js b/src/formio/components/PhoneNumberField.stories.js
index 0ab90e132..bc3be1e4e 100644
--- a/src/formio/components/PhoneNumberField.stories.js
+++ b/src/formio/components/PhoneNumberField.stories.js
@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Vanilla / PhoneNumberField',
- decorators: [withUtrechtDocument],
args: {
type: 'phoneNumber',
extraComponentProperties: {
diff --git a/src/formio/components/PostcodeField.stories.js b/src/formio/components/PostcodeField.stories.js
index 84a977875..3fdc63a19 100644
--- a/src/formio/components/PostcodeField.stories.js
+++ b/src/formio/components/PostcodeField.stories.js
@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Deprecated / PostcodeField',
- decorators: [withUtrechtDocument],
args: {
type: 'postcode',
extraComponentProperties: {},
diff --git a/src/formio/components/Radio.stories.js b/src/formio/components/Radio.stories.js
index 29f46c1a1..bd6aba813 100644
--- a/src/formio/components/Radio.stories.js
+++ b/src/formio/components/Radio.stories.js
@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Vanilla / Radio',
- decorators: [withUtrechtDocument],
args: {
type: 'radio',
extraComponentProperties: {
diff --git a/src/formio/components/Select.stories.js b/src/formio/components/Select.stories.js
index 507c0e235..84cba864d 100644
--- a/src/formio/components/Select.stories.js
+++ b/src/formio/components/Select.stories.js
@@ -1,13 +1,11 @@
import {userEvent, within} from '@storybook/test';
-import {withUtrechtDocument} from 'story-utils/decorators';
import {sleep} from 'utils';
import {MultipleFormioComponents, SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Vanilla / Select',
- decorators: [withUtrechtDocument],
args: {
type: 'select',
extraComponentProperties: {
diff --git a/src/formio/components/Selectboxes.stories.js b/src/formio/components/Selectboxes.stories.js
index 4fadb0f66..3e743444b 100644
--- a/src/formio/components/Selectboxes.stories.js
+++ b/src/formio/components/Selectboxes.stories.js
@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Vanilla / Selectboxes',
- decorators: [withUtrechtDocument],
args: {
type: 'selectboxes',
extraComponentProperties: {
diff --git a/src/formio/components/Signature.stories.js b/src/formio/components/Signature.stories.js
index 93a6bbfea..63811e902 100644
--- a/src/formio/components/Signature.stories.js
+++ b/src/formio/components/Signature.stories.js
@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Vanilla / Signature',
- decorators: [withUtrechtDocument],
args: {
type: 'signature',
extraComponentProperties: {
diff --git a/src/formio/components/SoftRequiredErrors.stories.js b/src/formio/components/SoftRequiredErrors.stories.js
index c19483bab..29566de01 100644
--- a/src/formio/components/SoftRequiredErrors.stories.js
+++ b/src/formio/components/SoftRequiredErrors.stories.js
@@ -1,6 +1,5 @@
import {expect, userEvent, waitFor, within} from '@storybook/test';
-import {withUtrechtDocument} from 'story-utils/decorators';
import {sleep} from 'utils';
import {UPLOAD_URL, mockFileUploadDelete, mockFileUploadPost} from './FileField.mocks';
@@ -8,7 +7,6 @@ import {MultipleFormioComponents} from './story-util';
export default {
title: 'Form.io components / Custom / SoftRequiredErrors',
- decorators: [withUtrechtDocument],
render: MultipleFormioComponents,
args: {
components: [
diff --git a/src/formio/components/TextField.stories.js b/src/formio/components/TextField.stories.js
index 2dfeb77cf..014874def 100644
--- a/src/formio/components/TextField.stories.js
+++ b/src/formio/components/TextField.stories.js
@@ -1,6 +1,6 @@
import {expect, userEvent, waitFor, within} from '@storybook/test';
-import {ConfigDecorator, withUtrechtDocument} from 'story-utils/decorators';
+import {ConfigDecorator} from 'story-utils/decorators';
import {sleep} from 'utils';
import {mockAddressAutoCompleteGet} from './TextField.mocks';
@@ -8,7 +8,7 @@ import {MultipleFormioComponents, SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Vanilla / TextField',
- decorators: [withUtrechtDocument, ConfigDecorator],
+ decorators: [ConfigDecorator],
args: {
type: 'textfield',
extraComponentProperties: {},
diff --git a/src/formio/components/Textarea.stories.js b/src/formio/components/Textarea.stories.js
index 60d380f86..d4e5f10d2 100644
--- a/src/formio/components/Textarea.stories.js
+++ b/src/formio/components/Textarea.stories.js
@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Vanilla / Textarea',
- decorators: [withUtrechtDocument],
args: {
type: 'textarea',
extraComponentProperties: {},
diff --git a/src/formio/components/TimeField.stories.js b/src/formio/components/TimeField.stories.js
index 190fd5c93..5ad932994 100644
--- a/src/formio/components/TimeField.stories.js
+++ b/src/formio/components/TimeField.stories.js
@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Vanilla / TimeField',
- decorators: [withUtrechtDocument],
args: {
type: 'time',
extraComponentProperties: {
diff --git a/src/formio/components/Tooltips.stories.js b/src/formio/components/Tooltips.stories.js
index 18dda09a1..cf0c56a87 100644
--- a/src/formio/components/Tooltips.stories.js
+++ b/src/formio/components/Tooltips.stories.js
@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
import {SingleFormioComponent} from './story-util';
export default {
title: 'Form.io components / Vanilla / Tooltips',
- decorators: [withUtrechtDocument],
args: {
evalContext: {},
},
diff --git a/src/formio/components/composite.stories.jsx b/src/formio/components/composite.stories.jsx
index e9b90afea..182e89c63 100644
--- a/src/formio/components/composite.stories.jsx
+++ b/src/formio/components/composite.stories.jsx
@@ -1,13 +1,11 @@
import {expect, userEvent, within} from '@storybook/test';
-import {withUtrechtDocument} from 'story-utils/decorators';
import {sleep} from 'utils';
import {MultipleFormioComponents} from './story-util';
export default {
title: 'Form.io components / Composite',
- decorators: [withUtrechtDocument],
args: {
components: [
{
diff --git a/src/scss/components/_alert.scss b/src/scss/components/_alert.scss
index 02671ae9b..46581a413 100644
--- a/src/scss/components/_alert.scss
+++ b/src/scss/components/_alert.scss
@@ -28,19 +28,3 @@
}
}
}
-
-// TODO: remove in SDK 3.0
-// Backwards compatibility layer
-.utrecht-alert {
- @include bem.modifier('error') {
- background-color: var(--utrecht-alert-error-background-color, var(--of-alert-error-bg));
- }
-
- @include bem.modifier('info') {
- background-color: var(--utrecht-alert-info-background-color, var(--of-alert-info-bg));
- }
-
- @include bem.modifier('warning') {
- background-color: var(--utrecht-alert-warning-background-color, var(--of-alert-warning-bg));
- }
-}
diff --git a/src/scss/components/_anchor.scss b/src/scss/components/_anchor.scss
index ae68513f9..671f6f5a1 100644
--- a/src/scss/components/_anchor.scss
+++ b/src/scss/components/_anchor.scss
@@ -8,9 +8,8 @@
* :active states for some variants.
*/
@use 'microscope-sass/lib/bem';
-
-@import '@utrecht/components/dist/link-button/css/index.css';
-@import '@utrecht/components/dist/link/css/index'; // emits the .utrecht-link {...} styles
+@use '@utrecht/components/link-button';
+@use '@utrecht/components/link'; // emits the .utrecht-link {...} styles
/**
* Extensions of the utrecht-link component with OF-specific styles.
diff --git a/src/scss/components/_button-group.scss b/src/scss/components/_button-group.scss
index bcc15b13f..712a79bc5 100644
--- a/src/scss/components/_button-group.scss
+++ b/src/scss/components/_button-group.scss
@@ -3,7 +3,7 @@
*/
@use 'microscope-sass/lib/bem';
-@import '@utrecht/components/button-group/css/index';
+@import '@utrecht/components/button-group/src/index';
.utrecht-button-group {
// A button group used in an edit grid item
@@ -18,6 +18,6 @@
// Reference: https://nl-design-system.github.io/utrecht/storybook/?path=/docs/css_css-button-group--docs
@include mobile-only {
.utrecht-button-group {
- @include utrecht-button-group--vertical;
+ @include utrecht-button-group--column;
}
}
diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
index 1dcc96161..c855555df 100644
--- a/src/scss/components/_button.scss
+++ b/src/scss/components/_button.scss
@@ -1,5 +1,5 @@
-@import '@utrecht/components/dist/button/css/index.css';
-@import '@utrecht/components/dist/button-link/css/index.css';
+@use '@utrecht/components/button';
+@use '@utrecht/components/button-link';
.openforms-theme {
.utrecht-button,
diff --git a/src/scss/components/_date-picker.scss b/src/scss/components/_date-picker.scss
index 998176020..5ed3e2bc1 100644
--- a/src/scss/components/_date-picker.scss
+++ b/src/scss/components/_date-picker.scss
@@ -1,9 +1,7 @@
@use 'microscope-sass/lib/bem';
-@use '../mixins/prefix';
+@use '@utrecht/components/calendar';
-@import '@utrecht/components/dist/calendar/css/index.css';
-
-.#{prefix.prefix('datepicker')} {
+.openforms-datepicker {
padding: 0;
border: 0;
border-radius: var(--of-datepicker-border-radius, 0);
@@ -28,7 +26,7 @@
}
}
-.#{prefix.prefix('datepicker-textbox')} {
+.openforms-datepicker-textbox {
position: relative;
.utrecht-textbox {
diff --git a/src/scss/components/_formio-component.scss b/src/scss/components/_formio-component.scss
index 0623c00dd..ebbc715df 100644
--- a/src/scss/components/_formio-component.scss
+++ b/src/scss/components/_formio-component.scss
@@ -1,12 +1,10 @@
@use 'microscope-sass/lib/bem';
-@use '@utrecht/components/form-field/css/mixin' as form-field;
-@use '@utrecht/components/form-fieldset/css/mixin' as form-fieldset;
+@use '@utrecht/components/form-field/src/mixin' as form-field;
+@use '@utrecht/components/form-fieldset/src/mixin' as form-fieldset;
@import 'microscope-sass/lib/typography';
-@import '../mixins/prefix';
-
// These styles are required because form.io doesn't re-render with new classnames,
// instead it looks up the component ref and then adds the validation error classnames.
// The (direct) child inside this node is the utrecht component that need to get
diff --git a/src/scss/components/_input.scss b/src/scss/components/_input.scss
index 79c51d167..c6638e923 100644
--- a/src/scss/components/_input.scss
+++ b/src/scss/components/_input.scss
@@ -1,6 +1,5 @@
@use 'microscope-sass/lib/bem';
-
-@import '@utrecht/components/dist/textbox/css/index.css';
+@use '@utrecht/components/textbox';
$input-padding: $grid-margin-2;
diff --git a/src/scss/components/_language-selection.scss b/src/scss/components/_language-selection.scss
index e296c531e..9efcf5cc1 100644
--- a/src/scss/components/_language-selection.scss
+++ b/src/scss/components/_language-selection.scss
@@ -1,7 +1,6 @@
+@use '@utrecht/components/alternate-lang-nav';
@import 'microscope-sass/lib/typography';
-@import '@utrecht/components/dist/alternate-lang-nav/css/index.css';
-
/**
* Allow using different spacing rules for this specific component
*/
diff --git a/src/scss/components/_list.scss b/src/scss/components/_list.scss
index 64c079101..8dcbfa226 100644
--- a/src/scss/components/_list.scss
+++ b/src/scss/components/_list.scss
@@ -1,12 +1,9 @@
@use 'microscope-sass/lib/bem';
-
-@import '@utrecht/components/dist/unordered-list/css/index';
+@use '@utrecht/components/unordered-list';
@import 'microscope-sass/lib/typography';
-@import '../mixins/prefix';
-
-.#{prefix('list')} {
+.openforms-list {
list-style: none;
margin: 0;
padding: 0;
diff --git a/src/scss/components/_select.scss b/src/scss/components/_select.scss
index dbcf44a30..351df137b 100644
--- a/src/scss/components/_select.scss
+++ b/src/scss/components/_select.scss
@@ -1,7 +1,6 @@
@use 'sass:math';
@use 'microscope-sass/lib/bem';
-
-@import '@utrecht/components/dist/select/css/index.css';
+@use '@utrecht/components/select';
/**
* Additional styles for react-select component, using the utrecht-select as base.
diff --git a/src/scss/components/_soft-required-errors.scss b/src/scss/components/_soft-required-errors.scss
index c8d3d9cab..38a945626 100644
--- a/src/scss/components/_soft-required-errors.scss
+++ b/src/scss/components/_soft-required-errors.scss
@@ -8,8 +8,11 @@
@include wysiwyg;
// unset, takes the utrecht-alert--warning by default, but can be overridden if desired
- color: var(--of-soft-required-errors-color);
- background-color: var(--of-soft-required-errors-background-color);
+ color: var(--of-soft-required-errors-color, var(--utrecht-alert-warning-color));
+ background-color: var(
+ --of-soft-required-errors-background-color,
+ var(--utrecht-alert-warning-background-color)
+ );
@include bem.element('missing-fields') {
font-weight: var(--of-soft-required-errors-missing-fields-font-weight, 600);
diff --git a/src/scss/components/_summary.scss b/src/scss/components/_summary.scss
index 7aa7b68e6..d1d4d9f31 100644
--- a/src/scss/components/_summary.scss
+++ b/src/scss/components/_summary.scss
@@ -7,10 +7,8 @@
*/
.utrecht-heading-2 {
@include bem.modifier('openforms-summary-step-name') {
- // TODO: default values for `var(...)` are for backwards compatibility, remove in
- // SDK 3.0.
- font-size: var(--of-summary-step-name-font-size, 1.1875rem);
- line-height: var(--of-summary-step-name-line-height, 1.17);
+ font-size: var(--of-summary-step-name-font-size);
+ line-height: var(--of-summary-step-name-line-height);
overflow-wrap: break-word;
}
}
@@ -19,20 +17,17 @@
* Container for the header + datalist of the summary.
*/
.openforms-summary {
- // TODO: default values for `var(...)` are for backwards compatibility, remove in
- // SDK 3.0.
-
@include bem.element('header') {
display: flex;
align-items: center;
justify-content: space-between;
column-gap: var(--of-summary-header-column-gap);
- padding-block-end: var(--of-summary-header-padding-block-end, 12px);
+ padding-block-end: var(--of-summary-header-padding-block-end);
- border-block-end-style: var(--of-summary-header-border-block-end-style, solid);
- border-block-end-width: var(--of-summary-header-border-block-end-width, 1px);
- border-block-end-color: var(--of-summary-header-border-block-end-color, var(--of-color-border));
+ border-block-end-style: var(--of-summary-header-border-block-end-style);
+ border-block-end-width: var(--of-summary-header-border-block-end-width);
+ border-block-end-color: var(--of-summary-header-border-block-end-color);
}
// accessible description
diff --git a/src/scss/components/_textarea.scss b/src/scss/components/_textarea.scss
index 59d45ce78..7f467ad76 100644
--- a/src/scss/components/_textarea.scss
+++ b/src/scss/components/_textarea.scss
@@ -1,6 +1,6 @@
@use 'microscope-sass/lib/bem';
+@use '@utrecht/components/textarea';
-@import '@utrecht/components/dist/textarea/css/index.css';
@import 'microscope-sass/lib/grid';
.utrecht-textarea {
diff --git a/src/scss/nl-design-system-community.scss b/src/scss/nl-design-system-community.scss
index 7e13b236f..aa0205f1a 100644
--- a/src/scss/nl-design-system-community.scss
+++ b/src/scss/nl-design-system-community.scss
@@ -1,13 +1,13 @@
-@use '@utrecht/components/dist/document/css/index' as document;
-@use '@utrecht/components/dist/img/css/index' as img;
-@use '@utrecht/components/dist/paragraph/css/index' as paragraph;
-@use '@utrecht/components/dist/form-field/css/index' as form-field;
-@use '@utrecht/components/dist/form-fieldset/css/index' as form-fieldset;
-@use '@utrecht/components/dist/radio-button/css/index' as radio-button;
-@use '@utrecht/components/dist/alert/css/index' as alert;
-@use '@utrecht/components/dist/data-list/css/index' as data-list;
-@use '@utrecht/components/dist/unordered-list/css/index' as unordered-list;
-@use '@utrecht/components/dist/ordered-list/css/index' as ordered-list;
-@use '@utrecht/components/dist/heading-1/css/index' as heading-1;
-@use '@utrecht/components/dist/heading-2/css/index' as heading-2;
-@use '@utrecht/components/dist/heading-3/css/index' as heading-3;
+@use '@utrecht/components/document' as document;
+@use '@utrecht/components/img' as img;
+@use '@utrecht/components/paragraph' as paragraph;
+@use '@utrecht/components/form-field' as form-field;
+@use '@utrecht/components/form-fieldset' as form-fieldset;
+@use '@utrecht/components/radio-button' as radio-button;
+@use '@utrecht/components/alert' as alert;
+@use '@utrecht/components/data-list' as data-list;
+@use '@utrecht/components/unordered-list' as unordered-list;
+@use '@utrecht/components/ordered-list' as ordered-list;
+@use '@utrecht/components/heading-1' as heading-1;
+@use '@utrecht/components/heading-2' as heading-2;
+@use '@utrecht/components/heading-3' as heading-3;
diff --git a/src/story-utils/decorators.jsx b/src/story-utils/decorators.jsx
index 7e1a73549..45013051e 100644
--- a/src/story-utils/decorators.jsx
+++ b/src/story-utils/decorators.jsx
@@ -1,5 +1,4 @@
import RenderSettingsProvider from '@open-formulieren/formio-renderer/components/RendererSettingsProvider';
-import {Document} from '@utrecht/component-library-react';
import {Formik} from 'formik';
import merge from 'lodash/merge';
@@ -108,12 +107,6 @@ export const LayoutDecorator = Story => {
);
};
-export const withUtrechtDocument = (Story, {parameters}) => (
-
-
-
-);
-
export const withCard = (Story, {parameters: {card: cardProps = {}}}) => (
diff --git a/src/type-fixes.d.ts b/src/type-fixes.d.ts
new file mode 100644
index 000000000..88f9ee8c4
--- /dev/null
+++ b/src/type-fixes.d.ts
@@ -0,0 +1,6 @@
+// See: https://stackoverflow.com/a/70398145
+declare namespace React {
+ interface CSSProperties {
+ [key: `--${string}`]: string | number;
+ }
+}
diff --git a/src/upgrade-notes-310.mdx b/src/upgrade-notes-310.mdx
new file mode 100644
index 000000000..b487dd48e
--- /dev/null
+++ b/src/upgrade-notes-310.mdx
@@ -0,0 +1,32 @@
+import {Meta} from '@storybook/blocks';
+
+
+
+# Upgrading from 3.0.x to 3.1.x
+
+In the Open Forms SDK 3.1.0 release cycle we've upgraded some of our own dependencies that
+unfortunately can cause visual changes if you use a custom theme. We've documented the changes here.
+
+## Design tokens
+
+In short - we have upgraded the community NL Design System components from version 1.0.0 to version
+7.4.0 (see the
+[upstream changelog](https://github.com/nl-design-system/utrecht/blob/e4515df1b2193defa20bd8704acc7a9f12d5231e/components/CHANGELOG.md)).
+We are planning to switch over to the individual component CSS packages, but for that we first
+wanted to deal with all the possible breaking changes while we had the chance.
+
+There are two affected components in Open Forms.
+
+**Alert**
+
+The alert component displays errors and informational messages.
+
+- The token `--utrecht-alert-icon-gap` was renamed to `--utrecht-alert-column-gap`. Update your
+ tokens and/or stylesheets accordingly.
+
+**Button**
+
+The button component is displayed full-width on mobile devices. After the upgrade, this may no
+longer be the case.
+
+- Set the design token `--utrecht-button-max-inline-size` to `100%`
diff --git a/tsconfig.json b/tsconfig.json
index a32e23c56..3464dd4ea 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,6 +27,6 @@
"vitest/globals"
]
},
- "include": ["src"],
+ "include": ["src/**/*", ".storybook/**/*"],
"exclude": ["node_modules", "dist"]
}