From d93b42cd79a39e572b25a57db5e03e8cef01269d Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 24 Nov 2023 14:19:09 +0100 Subject: [PATCH 1/7] Bump vite from 4.5.0 to 5.0.2 (#802) Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 4.5.0 to 5.0.2. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v5.0.2/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com> --- pnpm-lock.yaml | 283 ++++++++++++++++++++++--- storybook/storybook-docs/package.json | 2 +- storybook/storybook-react/package.json | 2 +- 3 files changed, 258 insertions(+), 29 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5ced88afcf..f152ed1af1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -345,7 +345,7 @@ importers: version: 7.5.3(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.2) '@storybook/react-vite': specifier: 7.5.3 - version: 7.5.3(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.2)(vite@4.5.0) + version: 7.5.3(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.2)(vite@5.0.2) '@storybook/testing-library': specifier: 0.2.2 version: 0.2.2 @@ -360,7 +360,7 @@ importers: version: 18.2.17 '@vitejs/plugin-react': specifier: 4.2.0 - version: 4.2.0(vite@4.5.0) + version: 4.2.0(vite@5.0.2) clsx: specifier: 2.0.0 version: 2.0.0 @@ -380,8 +380,8 @@ importers: specifier: 7.5.3 version: 7.5.3 vite: - specifier: 4.5.0 - version: 4.5.0(@types/node@20.9.4)(sass@1.69.5) + specifier: 5.0.2 + version: 5.0.2(@types/node@20.9.4)(sass@1.69.5) storybook/storybook-react: dependencies: @@ -454,7 +454,7 @@ importers: version: 7.5.3(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.2) '@storybook/react-vite': specifier: 7.5.3 - version: 7.5.3(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.2)(vite@4.5.0) + version: 7.5.3(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.2)(vite@5.0.2) '@storybook/testing-library': specifier: 0.2.2 version: 0.2.2 @@ -466,7 +466,7 @@ importers: version: 18.2.38 '@vitejs/plugin-react': specifier: 4.2.0 - version: 4.2.0(vite@4.5.0) + version: 4.2.0(vite@5.0.2) date-fns: specifier: 2.30.0 version: 2.30.0 @@ -486,8 +486,8 @@ importers: specifier: 7.5.3 version: 7.5.3 vite: - specifier: 4.5.0 - version: 4.5.0(@types/node@20.9.4)(sass@1.69.5) + specifier: 5.0.2 + version: 5.0.2(@types/node@20.9.4)(sass@1.69.5) packages: @@ -2116,6 +2116,15 @@ packages: dev: true optional: true + /@esbuild/android-arm64@0.19.7: + resolution: {integrity: sha512-YEDcw5IT7hW3sFKZBkCAQaOCJQLONVcD4bOyTXMZz5fr66pTHnAet46XAtbXAkJRfIn2YVhdC6R9g4xa27jQ1w==} + engines: {node: '>=12'} + cpu: [arm64] + os: [android] + requiresBuild: true + dev: true + optional: true + /@esbuild/android-arm@0.18.12: resolution: {integrity: sha512-LIxaNIQfkFZbTLb4+cX7dozHlAbAshhFE5PKdro0l+FnCpx1GDJaQ2WMcqm+ToXKMt8p8Uojk/MFRuGyz3V5Sw==} engines: {node: '>=12'} @@ -2125,6 +2134,15 @@ packages: dev: true optional: true + /@esbuild/android-arm@0.19.7: + resolution: {integrity: sha512-YGSPnndkcLo4PmVl2tKatEn+0mlVMr3yEpOOT0BeMria87PhvoJb5dg5f5Ft9fbCVgtAz4pWMzZVgSEGpDAlww==} + engines: {node: '>=12'} + cpu: [arm] + os: [android] + requiresBuild: true + dev: true + optional: true + /@esbuild/android-x64@0.18.12: resolution: {integrity: sha512-zU5MyluNsykf5cOJ0LZZZjgAHbhPJ1cWfdH1ZXVMXxVMhEV0VZiZXQdwBBVvmvbF28EizeK7obG9fs+fpmS0eQ==} engines: {node: '>=12'} @@ -2134,6 +2152,15 @@ packages: dev: true optional: true + /@esbuild/android-x64@0.19.7: + resolution: {integrity: sha512-jhINx8DEjz68cChFvM72YzrqfwJuFbfvSxZAk4bebpngGfNNRm+zRl4rtT9oAX6N9b6gBcFaJHFew5Blf6CvUw==} + engines: {node: '>=12'} + cpu: [x64] + os: [android] + requiresBuild: true + dev: true + optional: true + /@esbuild/darwin-arm64@0.18.12: resolution: {integrity: sha512-zUZMep7YONnp6954QOOwEBwFX9svlKd3ov6PkxKd53LGTHsp/gy7vHaPGhhjBmEpqXEXShi6dddjIkmd+NgMsA==} engines: {node: '>=12'} @@ -2143,6 +2170,15 @@ packages: dev: true optional: true + /@esbuild/darwin-arm64@0.19.7: + resolution: {integrity: sha512-dr81gbmWN//3ZnBIm6YNCl4p3pjnabg1/ZVOgz2fJoUO1a3mq9WQ/1iuEluMs7mCL+Zwv7AY5e3g1hjXqQZ9Iw==} + engines: {node: '>=12'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + /@esbuild/darwin-x64@0.18.12: resolution: {integrity: sha512-ohqLPc7i67yunArPj1+/FeeJ7AgwAjHqKZ512ADk3WsE3FHU9l+m5aa7NdxXr0HmN1bjDlUslBjWNbFlD9y12Q==} engines: {node: '>=12'} @@ -2152,6 +2188,15 @@ packages: dev: true optional: true + /@esbuild/darwin-x64@0.19.7: + resolution: {integrity: sha512-Lc0q5HouGlzQEwLkgEKnWcSazqr9l9OdV2HhVasWJzLKeOt0PLhHaUHuzb8s/UIya38DJDoUm74GToZ6Wc7NGQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + /@esbuild/freebsd-arm64@0.18.12: resolution: {integrity: sha512-GIIHtQXqgeOOqdG16a/A9N28GpkvjJnjYMhOnXVbn3EDJcoItdR58v/pGN31CHjyXDc8uCcRnFWmqaJt24AYJg==} engines: {node: '>=12'} @@ -2161,6 +2206,15 @@ packages: dev: true optional: true + /@esbuild/freebsd-arm64@0.19.7: + resolution: {integrity: sha512-+y2YsUr0CxDFF7GWiegWjGtTUF6gac2zFasfFkRJPkMAuMy9O7+2EH550VlqVdpEEchWMynkdhC9ZjtnMiHImQ==} + engines: {node: '>=12'} + cpu: [arm64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/freebsd-x64@0.18.12: resolution: {integrity: sha512-zK0b9a1/0wZY+6FdOS3BpZcPc1kcx2G5yxxfEJtEUzVxI6n/FrC2Phsxj/YblPuBchhBZ/1wwn7AyEBUyNSa6g==} engines: {node: '>=12'} @@ -2170,6 +2224,15 @@ packages: dev: true optional: true + /@esbuild/freebsd-x64@0.19.7: + resolution: {integrity: sha512-CdXOxIbIzPJmJhrpmJTLx+o35NoiKBIgOvmvT+jeSadYiWJn0vFKsl+0bSG/5lwjNHoIDEyMYc/GAPR9jxusTA==} + engines: {node: '>=12'} + cpu: [x64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-arm64@0.18.12: resolution: {integrity: sha512-JKgG8Q/LL/9sw/iHHxQyVMoQYu3rU3+a5Z87DxC+wAu3engz+EmctIrV+FGOgI6gWG1z1+5nDDbXiRMGQZXqiw==} engines: {node: '>=12'} @@ -2179,6 +2242,15 @@ packages: dev: true optional: true + /@esbuild/linux-arm64@0.19.7: + resolution: {integrity: sha512-inHqdOVCkUhHNvuQPT1oCB7cWz9qQ/Cz46xmVe0b7UXcuIJU3166aqSunsqkgSGMtUCWOZw3+KMwI6otINuC9g==} + engines: {node: '>=12'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-arm@0.18.12: resolution: {integrity: sha512-y75OijvrBE/1XRrXq1jtrJfG26eHeMoqLJ2dwQNwviwTuTtHGCojsDO6BJNF8gU+3jTn1KzJEMETytwsFSvc+Q==} engines: {node: '>=12'} @@ -2188,6 +2260,15 @@ packages: dev: true optional: true + /@esbuild/linux-arm@0.19.7: + resolution: {integrity: sha512-Y+SCmWxsJOdQtjcBxoacn/pGW9HDZpwsoof0ttL+2vGcHokFlfqV666JpfLCSP2xLxFpF1lj7T3Ox3sr95YXww==} + engines: {node: '>=12'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-ia32@0.18.12: resolution: {integrity: sha512-yoRIAqc0B4lDIAAEFEIu9ttTRFV84iuAl0KNCN6MhKLxNPfzwCBvEMgwco2f71GxmpBcTtn7KdErueZaM2rEvw==} engines: {node: '>=12'} @@ -2197,6 +2278,15 @@ packages: dev: true optional: true + /@esbuild/linux-ia32@0.19.7: + resolution: {integrity: sha512-2BbiL7nLS5ZO96bxTQkdO0euGZIUQEUXMTrqLxKUmk/Y5pmrWU84f+CMJpM8+EHaBPfFSPnomEaQiG/+Gmh61g==} + engines: {node: '>=12'} + cpu: [ia32] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-loong64@0.18.12: resolution: {integrity: sha512-qYgt3dHPVvf/MgbIBpJ4Sup/yb9DAopZ3a2JgMpNKIHUpOdnJ2eHBo/aQdnd8dJ21X/+sS58wxHtA9lEazYtXQ==} engines: {node: '>=12'} @@ -2206,6 +2296,15 @@ packages: dev: true optional: true + /@esbuild/linux-loong64@0.19.7: + resolution: {integrity: sha512-BVFQla72KXv3yyTFCQXF7MORvpTo4uTA8FVFgmwVrqbB/4DsBFWilUm1i2Oq6zN36DOZKSVUTb16jbjedhfSHw==} + engines: {node: '>=12'} + cpu: [loong64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-mips64el@0.18.12: resolution: {integrity: sha512-wHphlMLK4ufNOONqukELfVIbnGQJrHJ/mxZMMrP2jYrPgCRZhOtf0kC4yAXBwnfmULimV1qt5UJJOw4Kh13Yfg==} engines: {node: '>=12'} @@ -2215,6 +2314,15 @@ packages: dev: true optional: true + /@esbuild/linux-mips64el@0.19.7: + resolution: {integrity: sha512-DzAYckIaK+pS31Q/rGpvUKu7M+5/t+jI+cdleDgUwbU7KdG2eC3SUbZHlo6Q4P1CfVKZ1lUERRFP8+q0ob9i2w==} + engines: {node: '>=12'} + cpu: [mips64el] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-ppc64@0.18.12: resolution: {integrity: sha512-TeN//1Ft20ZZW41+zDSdOI/Os1bEq5dbvBvYkberB7PHABbRcsteeoNVZFlI0YLpGdlBqohEpjrn06kv8heCJg==} engines: {node: '>=12'} @@ -2224,6 +2332,15 @@ packages: dev: true optional: true + /@esbuild/linux-ppc64@0.19.7: + resolution: {integrity: sha512-JQ1p0SmUteNdUaaiRtyS59GkkfTW0Edo+e0O2sihnY4FoZLz5glpWUQEKMSzMhA430ctkylkS7+vn8ziuhUugQ==} + engines: {node: '>=12'} + cpu: [ppc64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-riscv64@0.18.12: resolution: {integrity: sha512-AgUebVS4DoAblBgiB2ACQ/8l4eGE5aWBb8ZXtkXHiET9mbj7GuWt3OnsIW/zX+XHJt2RYJZctbQ2S/mDjbp0UA==} engines: {node: '>=12'} @@ -2233,6 +2350,15 @@ packages: dev: true optional: true + /@esbuild/linux-riscv64@0.19.7: + resolution: {integrity: sha512-xGwVJ7eGhkprY/nB7L7MXysHduqjpzUl40+XoYDGC4UPLbnG+gsyS1wQPJ9lFPcxYAaDXbdRXd1ACs9AE9lxuw==} + engines: {node: '>=12'} + cpu: [riscv64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-s390x@0.18.12: resolution: {integrity: sha512-dJ3Rb3Ei2u/ysSXd6pzleGtfDdc2MuzKt8qc6ls8vreP1G3B7HInX3i7gXS4BGeVd24pp0yqyS7bJ5NHaI9ing==} engines: {node: '>=12'} @@ -2242,6 +2368,15 @@ packages: dev: true optional: true + /@esbuild/linux-s390x@0.19.7: + resolution: {integrity: sha512-U8Rhki5PVU0L0nvk+E8FjkV8r4Lh4hVEb9duR6Zl21eIEYEwXz8RScj4LZWA2i3V70V4UHVgiqMpszXvG0Yqhg==} + engines: {node: '>=12'} + cpu: [s390x] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-x64@0.18.12: resolution: {integrity: sha512-OrNJMGQbPaVyHHcDF8ybNSwu7TDOfX8NGpXCbetwOSP6txOJiWlgQnRymfC9ocR1S0Y5PW0Wb1mV6pUddqmvmQ==} engines: {node: '>=12'} @@ -2251,6 +2386,15 @@ packages: dev: true optional: true + /@esbuild/linux-x64@0.19.7: + resolution: {integrity: sha512-ZYZopyLhm4mcoZXjFt25itRlocKlcazDVkB4AhioiL9hOWhDldU9n38g62fhOI4Pth6vp+Mrd5rFKxD0/S+7aQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/netbsd-x64@0.18.12: resolution: {integrity: sha512-55FzVCAiwE9FK8wWeCRuvjazNRJ1QqLCYGZVB6E8RuQuTeStSwotpSW4xoRGwp3a1wUsaVCdYcj5LGCASVJmMg==} engines: {node: '>=12'} @@ -2260,6 +2404,15 @@ packages: dev: true optional: true + /@esbuild/netbsd-x64@0.19.7: + resolution: {integrity: sha512-/yfjlsYmT1O3cum3J6cmGG16Fd5tqKMcg5D+sBYLaOQExheAJhqr8xOAEIuLo8JYkevmjM5zFD9rVs3VBcsjtQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [netbsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/openbsd-x64@0.18.12: resolution: {integrity: sha512-qnluf8rfb6Y5Lw2tirfK2quZOBbVqmwxut7GPCIJsM8lc4AEUj9L8y0YPdLaPK0TECt4IdyBdBD/KRFKorlK3g==} engines: {node: '>=12'} @@ -2269,6 +2422,15 @@ packages: dev: true optional: true + /@esbuild/openbsd-x64@0.19.7: + resolution: {integrity: sha512-MYDFyV0EW1cTP46IgUJ38OnEY5TaXxjoDmwiTXPjezahQgZd+j3T55Ht8/Q9YXBM0+T9HJygrSRGV5QNF/YVDQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [openbsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/sunos-x64@0.18.12: resolution: {integrity: sha512-+RkKpVQR7bICjTOPUpkTBTaJ4TFqQBX5Ywyd/HSdDkQGn65VPkTsR/pL4AMvuMWy+wnXgIl4EY6q4mVpJal8Kg==} engines: {node: '>=12'} @@ -2278,6 +2440,15 @@ packages: dev: true optional: true + /@esbuild/sunos-x64@0.19.7: + resolution: {integrity: sha512-JcPvgzf2NN/y6X3UUSqP6jSS06V0DZAV/8q0PjsZyGSXsIGcG110XsdmuWiHM+pno7/mJF6fjH5/vhUz/vA9fw==} + engines: {node: '>=12'} + cpu: [x64] + os: [sunos] + requiresBuild: true + dev: true + optional: true + /@esbuild/win32-arm64@0.18.12: resolution: {integrity: sha512-GNHuciv0mFM7ouzsU0+AwY+7eV4Mgo5WnbhfDCQGtpvOtD1vbOiRjPYG6dhmMoFyBjj+pNqQu2X+7DKn0KQ/Gw==} engines: {node: '>=12'} @@ -2287,6 +2458,15 @@ packages: dev: true optional: true + /@esbuild/win32-arm64@0.19.7: + resolution: {integrity: sha512-ZA0KSYti5w5toax5FpmfcAgu3ZNJxYSRm0AW/Dao5up0YV1hDVof1NvwLomjEN+3/GMtaWDI+CIyJOMTRSTdMw==} + engines: {node: '>=12'} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@esbuild/win32-ia32@0.18.12: resolution: {integrity: sha512-kR8cezhYipbbypGkaqCTWIeu4zID17gamC8YTPXYtcN3E5BhhtTnwKBn9I0PJur/T6UVwIEGYzkffNL0lFvxEw==} engines: {node: '>=12'} @@ -2296,6 +2476,15 @@ packages: dev: true optional: true + /@esbuild/win32-ia32@0.19.7: + resolution: {integrity: sha512-CTOnijBKc5Jpk6/W9hQMMvJnsSYRYgveN6O75DTACCY18RA2nqka8dTZR+x/JqXCRiKk84+5+bRKXUSbbwsS0A==} + engines: {node: '>=12'} + cpu: [ia32] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@esbuild/win32-x64@0.18.12: resolution: {integrity: sha512-O0UYQVkvfM/jO8a4OwoV0mAKSJw+mjWTAd1MJd/1FCX6uiMdLmMRPK/w6e9OQ0ob2WGxzIm9va/KG0Ja4zIOgg==} engines: {node: '>=12'} @@ -2305,6 +2494,15 @@ packages: dev: true optional: true + /@esbuild/win32-x64@0.19.7: + resolution: {integrity: sha512-gRaP2sk6hc98N734luX4VpF318l3w+ofrtTu9j5L8EQXF+FzQKV6alCOHMVoJJHvVK/mGbwBXfOL1HETQu9IGQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@eslint-community/eslint-utils@4.4.0(eslint@8.54.0): resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -2677,7 +2875,7 @@ packages: chalk: 4.1.2 dev: true - /@joshwooding/vite-plugin-react-docgen-typescript@0.3.0(typescript@5.3.2)(vite@4.5.0): + /@joshwooding/vite-plugin-react-docgen-typescript@0.3.0(typescript@5.3.2)(vite@5.0.2): resolution: {integrity: sha512-2D6y7fNvFmsLmRt6UCOFJPvFoPMJGT0Uh1Wg0RaigUp7kdQPs6yYn8Dmx6GZkOH/NW0yMTwRz/p0SRMMRo50vA==} peerDependencies: typescript: '>= 4.3.x' @@ -2691,7 +2889,7 @@ packages: magic-string: 0.27.0 react-docgen-typescript: 2.2.2(typescript@5.3.2) typescript: 5.3.2 - vite: 4.5.0(@types/node@20.9.4)(sass@1.69.5) + vite: 5.0.2(@types/node@20.9.4)(sass@1.69.5) dev: true /@jridgewell/gen-mapping@0.3.3: @@ -4826,7 +5024,7 @@ packages: - supports-color dev: true - /@storybook/builder-vite@7.5.3(typescript@5.3.2)(vite@4.5.0): + /@storybook/builder-vite@7.5.3(typescript@5.3.2)(vite@5.0.2): resolution: {integrity: sha512-c104V3O75OCVnfZj0Jr70V09g0KSbPGvQK2Zh31omXGvakG8XrhWolYxkmjOcForJmAqsXnKs/nw3F75Gp853g==} peerDependencies: '@preact/preset-vite': '*' @@ -4858,7 +5056,7 @@ packages: magic-string: 0.30.5 rollup: 3.29.4 typescript: 5.3.2 - vite: 4.5.0(@types/node@20.9.4)(sass@1.69.5) + vite: 5.0.2(@types/node@20.9.4)(sass@1.69.5) transitivePeerDependencies: - encoding - supports-color @@ -5209,7 +5407,7 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: true - /@storybook/react-vite@7.5.3(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.2)(vite@4.5.0): + /@storybook/react-vite@7.5.3(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.2)(vite@5.0.2): resolution: {integrity: sha512-ArPyHgiPbT5YvcyK4xK/DfqBOpn4R4/EP3kfIGhx8QKJyOtxPEYFdkLIZ5xu3KnPX7/z7GT+4a6Rb+8sk9gliA==} engines: {node: '>=16'} peerDependencies: @@ -5217,16 +5415,16 @@ packages: react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 vite: ^3.0.0 || ^4.0.0 || ^5.0.0 dependencies: - '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.0(typescript@5.3.2)(vite@4.5.0) + '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.0(typescript@5.3.2)(vite@5.0.2) '@rollup/pluginutils': 5.0.5(rollup@4.5.1) - '@storybook/builder-vite': 7.5.3(typescript@5.3.2)(vite@4.5.0) + '@storybook/builder-vite': 7.5.3(typescript@5.3.2)(vite@5.0.2) '@storybook/react': 7.5.3(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.2) - '@vitejs/plugin-react': 3.1.0(vite@4.5.0) + '@vitejs/plugin-react': 3.1.0(vite@5.0.2) magic-string: 0.30.5 react: 18.2.0 react-docgen: 6.0.4 react-dom: 18.2.0(react@18.2.0) - vite: 4.5.0(@types/node@20.9.4)(sass@1.69.5) + vite: 5.0.2(@types/node@20.9.4)(sass@1.69.5) transitivePeerDependencies: - '@preact/preset-vite' - encoding @@ -6239,7 +6437,7 @@ packages: clsx: 1.2.1 dev: false - /@vitejs/plugin-react@3.1.0(vite@4.5.0): + /@vitejs/plugin-react@3.1.0(vite@5.0.2): resolution: {integrity: sha512-AfgcRL8ZBhAlc3BFdigClmTUMISmmzHn7sB2h9U1odvc5U/MjWXsAaz18b/WoppUTDBzxOJwo2VdClfUcItu9g==} engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: @@ -6250,12 +6448,12 @@ packages: '@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.23.3) magic-string: 0.27.0 react-refresh: 0.14.0 - vite: 4.5.0(@types/node@20.9.4)(sass@1.69.5) + vite: 5.0.2(@types/node@20.9.4)(sass@1.69.5) transitivePeerDependencies: - supports-color dev: true - /@vitejs/plugin-react@4.2.0(vite@4.5.0): + /@vitejs/plugin-react@4.2.0(vite@5.0.2): resolution: {integrity: sha512-+MHTH/e6H12kRp5HUkzOGqPMksezRMmW+TNzlh/QXfI8rRf6l2Z2yH/v12no1UvTwhZgEDMuQ7g7rrfMseU6FQ==} engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: @@ -6266,7 +6464,7 @@ packages: '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.3) '@types/babel__core': 7.20.4 react-refresh: 0.14.0 - vite: 4.5.0(@types/node@20.9.4)(sass@1.69.5) + vite: 5.0.2(@types/node@20.9.4)(sass@1.69.5) transitivePeerDependencies: - supports-color dev: true @@ -8685,6 +8883,36 @@ packages: '@esbuild/win32-x64': 0.18.12 dev: true + /esbuild@0.19.7: + resolution: {integrity: sha512-6brbTZVqxhqgbpqBR5MzErImcpA0SQdoKOkcWK/U30HtQxnokIpG3TX2r0IJqbFUzqLjhU/zC1S5ndgakObVCQ==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + optionalDependencies: + '@esbuild/android-arm': 0.19.7 + '@esbuild/android-arm64': 0.19.7 + '@esbuild/android-x64': 0.19.7 + '@esbuild/darwin-arm64': 0.19.7 + '@esbuild/darwin-x64': 0.19.7 + '@esbuild/freebsd-arm64': 0.19.7 + '@esbuild/freebsd-x64': 0.19.7 + '@esbuild/linux-arm': 0.19.7 + '@esbuild/linux-arm64': 0.19.7 + '@esbuild/linux-ia32': 0.19.7 + '@esbuild/linux-loong64': 0.19.7 + '@esbuild/linux-mips64el': 0.19.7 + '@esbuild/linux-ppc64': 0.19.7 + '@esbuild/linux-riscv64': 0.19.7 + '@esbuild/linux-s390x': 0.19.7 + '@esbuild/linux-x64': 0.19.7 + '@esbuild/netbsd-x64': 0.19.7 + '@esbuild/openbsd-x64': 0.19.7 + '@esbuild/sunos-x64': 0.19.7 + '@esbuild/win32-arm64': 0.19.7 + '@esbuild/win32-ia32': 0.19.7 + '@esbuild/win32-x64': 0.19.7 + dev: true + /escalade@3.1.1: resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} engines: {node: '>=6'} @@ -13107,6 +13335,7 @@ packages: /nanoid@3.3.6: resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} + hasBin: true dev: true /natural-compare@1.4.0: @@ -17181,12 +17410,12 @@ packages: unist-util-stringify-position: 3.0.3 vfile-message: 3.1.4 - /vite@4.5.0(@types/node@20.9.4)(sass@1.69.5): - resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==} - engines: {node: ^14.18.0 || >=16.0.0} + /vite@5.0.2(@types/node@20.9.4)(sass@1.69.5): + resolution: {integrity: sha512-6CCq1CAJCNM1ya2ZZA7+jS2KgnhbzvxakmlIjN24cF/PXhRMzpM/z8QgsVJA/Dm5fWUWnVEsmtBoMhmerPxT0g==} + engines: {node: ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: - '@types/node': '>= 14' + '@types/node': ^18.0.0 || >=20.0.0 less: '*' lightningcss: ^1.21.0 sass: '*' @@ -17210,9 +17439,9 @@ packages: optional: true dependencies: '@types/node': 20.9.4 - esbuild: 0.18.12 + esbuild: 0.19.7 postcss: 8.4.31 - rollup: 3.29.4 + rollup: 4.5.1 sass: 1.69.5 optionalDependencies: fsevents: 2.3.3 diff --git a/storybook/storybook-docs/package.json b/storybook/storybook-docs/package.json index 7a42fc96d8..3e314f3ed4 100644 --- a/storybook/storybook-docs/package.json +++ b/storybook/storybook-docs/package.json @@ -49,7 +49,7 @@ "require-from-string": "2.0.2", "sass": "1.69.5", "storybook": "7.5.3", - "vite": "4.5.0" + "vite": "5.0.2" }, "dependencies": { "remark-gfm": "3.0.1" diff --git a/storybook/storybook-react/package.json b/storybook/storybook-react/package.json index 2d74d4b3f9..e4172acb6b 100644 --- a/storybook/storybook-react/package.json +++ b/storybook/storybook-react/package.json @@ -52,7 +52,7 @@ "react-dom": "18.2.0", "require-from-string": "2.0.2", "storybook": "7.5.3", - "vite": "4.5.0" + "vite": "5.0.2" }, "dependencies": { "remark-gfm": "3.0.1" From 9aa373c8002b15b3c11ffd58c8ff418f97b5c80f Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 24 Nov 2023 14:46:48 +0100 Subject: [PATCH 2/7] This breaks the CRA pipeline (#811) --- .../tokens/src/components/amsterdam/grid.tokens.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/proprietary/tokens/src/components/amsterdam/grid.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.tokens.json index 9b45e920d1..20e3b0248b 100644 --- a/proprietary/tokens/src/components/amsterdam/grid.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/grid.tokens.json @@ -6,21 +6,21 @@ }, "density-low": { "gap": { - "value": "clamp(1rem, 3.125vw + 0.375rem, 3.5rem)", + "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)", "comment": "Grows from 16px at 320px wide to 56px at 1600px wide." }, "padding-inline": { - "value": "clamp(1.5rem, 4.6875vw + 0.5625rem, 5.25rem)", + "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)", "comment": "Equals 1.5 times the gap." } }, "density-high": { "gap": { - "value": "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)", + "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)", "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide." }, "padding-inline": { - "value": "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)", + "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)", "comment": "Equals the gap." } }, From a5cda39c754c4ad36e32e860f2022bb68a7aedb6 Mon Sep 17 00:00:00 2001 From: Aram <37216945+alimpens@users.noreply.github.com> Date: Fri, 24 Nov 2023 17:29:20 +0100 Subject: [PATCH 3/7] Implement conventional commits workflow for releases (#806) * Remove unused changelog * Update lerna.json, move cmds from cli to config file * Install conventional commits spec * Add PR title validation workflow * Add docs * Add breaks between sentences * Change npm to lowercase * Add periods after sentences in lists --------- Co-authored-by: Vincent Smedinga --- .github/workflows/main-deploy.yml | 2 +- .github/workflows/pr-title-validation.yml | 22 +++++++++++ CHANGELOG.md | 21 ----------- CONTRIBUTING.md | 9 +---- documentation/publishing.md | 45 +++++++++++++++++++++++ lerna.json | 8 +++- package.json | 3 +- pnpm-lock.yaml | 10 +++++ 8 files changed, 87 insertions(+), 33 deletions(-) create mode 100644 .github/workflows/pr-title-validation.yml delete mode 100644 CHANGELOG.md create mode 100644 documentation/publishing.md diff --git a/.github/workflows/main-deploy.yml b/.github/workflows/main-deploy.yml index 8904c908bc..88d2128050 100644 --- a/.github/workflows/main-deploy.yml +++ b/.github/workflows/main-deploy.yml @@ -1,4 +1,4 @@ -name: Deploy main Storybook +name: Main Storybook deploy on: workflow_run: workflows: [Lint and test] diff --git a/.github/workflows/pr-title-validation.yml b/.github/workflows/pr-title-validation.yml new file mode 100644 index 0000000000..0e7b7c3232 --- /dev/null +++ b/.github/workflows/pr-title-validation.yml @@ -0,0 +1,22 @@ +# https://github.com/marketplace/actions/semantic-pull-request + +name: PR title validation + +on: + pull_request_target: + types: + - opened + - edited + - synchronize + +permissions: + pull-requests: read + +jobs: + pr-title-validation: + name: PR title validation + runs-on: ubuntu-latest + steps: + - uses: amannn/action-semantic-pull-request@v5 + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index b667134a73..0000000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,21 +0,0 @@ - - -# Changelog - -All notable changes to this project will be documented in this file. - -The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), -and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). - -Prefix the change with one of these keywords: - -- _Added_: for new features. -- _Changed_: for changes in existing functionality. -- _Deprecated_: for soon-to-be removed features. -- _Removed_: for now removed features. -- _Fixed_: for any bug fixes. -- _Security_: in case of vulnerabilities. - -Add **BREAKING** after the prefix for breaking changes. - -## [Unreleased] diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index d54879f65a..dc8ea8bd4b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -113,14 +113,7 @@ This will create files for the design tokens, CSS and React components, and Reac ## Publishing -You can only publish if you have access to the `@amsterdam` group on NPM. If you want to have rights to publish as well, contact one of the [maintainers](./documentation/maintainers.md). To publish these packages to NPM, follow these steps: - -1. Pull in the latest version of the `main` branch locally -2. Make sure you're logged in to NPM, by running `npm login` -3. Run `npm run clean` -4. Run `npm run build` -5. Run `npm run release` -6. Run `npm run publish` +Only the [maintainers](./documentation/maintainers.md) can release new versions of our packages. See the [publishing docs](./documentation/publishing.md) for more information. ## Cooperation with NL Design System diff --git a/documentation/publishing.md b/documentation/publishing.md new file mode 100644 index 0000000000..4c8b1f3fe5 --- /dev/null +++ b/documentation/publishing.md @@ -0,0 +1,45 @@ +# Publishing + +We use Lerna to create changelogs and releases for all our packages and to publish them to npm. + +You can only publish if you have access to the `@amsterdam` group on npm. +If you want to have rights to publish as well, contact one of the [maintainers](./maintainers.md). + +## Conventional commits + +In order to know whether a release is major, minor or patch and to automatically generate changelogs, we use the [conventional commits spec](https://www.conventionalcommits.org/en/v1.0.0/). +In our PR titles, we specify whether a change is a patch, a fix (minor) or a breaking change (major). +The PR title also describes the change in a clear, human-friendly way. +This PR title becomes the description of a commit when we squash merge a feature branch PR into `develop`. +These commit descriptions are eventually used to figure out the release type and to generate entries into our changelogs. + +For example, a PR specifies that it's introducing a breaking change and it changes code in both the `css` and the `react` packages. +This will cause a major version bump in both packages on release and add its description to the changelogs of both packages. + +## How to create a release + +1. Pull in the latest version of the `develop` branch locally. +2. Run `npm run clean` +3. Run `npm run build` +4. Run `npm run release`. This causes Lerna to do several things: + + - It bumps the version numbers of the packages that have been changed. + To do that, it relies on the conventional commit syntax used for all commit descriptions on the `develop` branch. + Breaking changes get a major bump, new features get a minor bump, everything else is a patch bump. + - It adds new entries to the changelogs of the packages that have been changed, again using the conventional commit descriptions. + - It adds a release commit to `develop`. + - It creates a release tag. + - It pushes all this to the remote. + +After we've created a new release, we want to publish it to npm: + +1. Make sure you're logged in to npm, by running `npm login`. +2. Run `npm run publish` + +We also want to update our Storybook, so it's in sync with the new content of the packages on npm. +We do this by merging `develop` into `main`. +Note: the GitHub GUI doesn't seem to allow you to do fast forward merges, so you should do this from your cli. + +1. `git checkout main` +2. `git merge --ff-only develop` +3. `git push` diff --git a/lerna.json b/lerna.json index 95248f62fa..3a6d0503d0 100644 --- a/lerna.json +++ b/lerna.json @@ -6,10 +6,14 @@ "command": { "publish": {}, "version": { - "allowBranch": ["main"], + "allowBranch": ["develop"], + "changelogPreset": { + "name": "conventionalcommits", + "issueUrlFormat": "{{host}}/{{owner}}/{{repository}}/issues/{{id}}" + }, "conventionalCommits": true, "exact": true, - "message": "docs(release): design system packages\n\nskip-checks: true", + "private": false, "syncWorkspaceLock": true } } diff --git a/package.json b/package.json index 83d328a0a4..6e447456d4 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@types/node": "20.9.4", "@typescript-eslint/eslint-plugin": "6.12.0", "@typescript-eslint/parser": "6.12.0", + "conventional-changelog-conventionalcommits": "7.0.2", "eslint": "8.54.0", "eslint-config-prettier": "9.0.0", "eslint-plugin-import": "2.29.0", @@ -68,7 +69,7 @@ "prepare": "husky install", "prettier": "prettier --write .", "publish": "lerna publish from-package --yes", - "release": "lerna version --no-changelog --no-private", + "release": "lerna version", "start": "node_modules/http-server/bin storybook/storybook-react/dist/", "storybook": "npm-run-all --parallel watch:**", "test": "npm run test-workspaces", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f152ed1af1..57edb68f91 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -33,6 +33,9 @@ importers: '@typescript-eslint/parser': specifier: 6.12.0 version: 6.12.0(eslint@8.54.0)(typescript@5.3.2) + conventional-changelog-conventionalcommits: + specifier: 7.0.2 + version: 7.0.2 eslint: specifier: 8.54.0 version: 8.54.0 @@ -7942,6 +7945,13 @@ packages: compare-func: 2.0.0 dev: true + /conventional-changelog-conventionalcommits@7.0.2: + resolution: {integrity: sha512-NKXYmMR/Hr1DevQegFB4MwfM5Vv0m4UIxKZTTYuD98lpTknaZlSRrDOG4X7wIXpGkfsYxZTghUN+Qq+T0YQI7w==} + engines: {node: '>=16'} + dependencies: + compare-func: 2.0.0 + dev: true + /conventional-changelog-core@5.0.2: resolution: {integrity: sha512-RhQOcDweXNWvlRwUDCpaqXzbZemKPKncCWZG50Alth72WITVd6nhVk9MJ6w1k9PFNBcZ3YwkdkChE+8+ZwtUug==} engines: {node: '>=14'} From 78c5d7acb9696652f2c7f668e4685e3b0d620912 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Mon, 27 Nov 2023 09:37:52 +0100 Subject: [PATCH 4/7] refactor: Use highlight in footer (#813) --- packages/css/src/footer/footer.scss | 10 ---------- packages/css/src/index.scss | 1 - packages/react/src/Footer/Footer.tsx | 5 +++-- .../src/components/amsterdam/footer.tokens.json | 11 ----------- 4 files changed, 3 insertions(+), 24 deletions(-) delete mode 100644 packages/css/src/footer/footer.scss delete mode 100644 proprietary/tokens/src/components/amsterdam/footer.tokens.json diff --git a/packages/css/src/footer/footer.scss b/packages/css/src/footer/footer.scss deleted file mode 100644 index 5059ca70ca..0000000000 --- a/packages/css/src/footer/footer.scss +++ /dev/null @@ -1,10 +0,0 @@ -/** - * @license EUPL-1.2+ - * Copyright (c) 2023 Gemeente Amsterdam - */ - -@import "../../utils/breakpoint"; - -.amsterdam-footer__top { - background-color: var(--amsterdam-footer-top-background-color); -} diff --git a/packages/css/src/index.scss b/packages/css/src/index.scss index f79154bfb3..b710ec9451 100644 --- a/packages/css/src/index.scss +++ b/packages/css/src/index.scss @@ -16,7 +16,6 @@ @import "./button/button"; @import "./card/card"; @import "./checkbox/checkbox"; -@import "./footer/footer"; @import "./form-label/form-label"; @import "./grid/grid"; @import "./grid/grid-cell"; diff --git a/packages/react/src/Footer/Footer.tsx b/packages/react/src/Footer/Footer.tsx index a20dfa6751..6f02122815 100644 --- a/packages/react/src/Footer/Footer.tsx +++ b/packages/react/src/Footer/Footer.tsx @@ -12,15 +12,16 @@ import { PropsWithChildren, RefAttributes, } from 'react' +import { Highlight } from '../Highlight/Highlight' export const FooterTop = forwardRef( ( { children, className, ...restProps }: PropsWithChildren>, ref: ForwardedRef, ) => ( -
+ {children} -
+ ), ) diff --git a/proprietary/tokens/src/components/amsterdam/footer.tokens.json b/proprietary/tokens/src/components/amsterdam/footer.tokens.json deleted file mode 100644 index 469553344b..0000000000 --- a/proprietary/tokens/src/components/amsterdam/footer.tokens.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "amsterdam": { - "footer": { - "top": { - "background-color": { - "value": "{amsterdam.color.primary-blue}" - } - } - } - } -} From 1953e9d775b6758f06407651fdfa3fa38c2563b4 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Mon, 27 Nov 2023 09:45:29 +0100 Subject: [PATCH 5/7] fix: Add vertical whitespace to grids in Footer and Highlight examples (#812) --- storybook/storybook-react/src/Footer/Footer.stories.tsx | 4 ++-- storybook/storybook-react/src/Highlight/Highlight.stories.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/storybook/storybook-react/src/Footer/Footer.stories.tsx b/storybook/storybook-react/src/Footer/Footer.stories.tsx index c16d0241ac..ec4e3da4c9 100644 --- a/storybook/storybook-react/src/Footer/Footer.stories.tsx +++ b/storybook/storybook-react/src/Footer/Footer.stories.tsx @@ -31,7 +31,7 @@ export const Default: Story = { Colofon - +
@@ -116,7 +116,7 @@ export const Default: Story = { Over deze website - + Privacy diff --git a/storybook/storybook-react/src/Highlight/Highlight.stories.tsx b/storybook/storybook-react/src/Highlight/Highlight.stories.tsx index 3f03afae3f..24d6a94bde 100644 --- a/storybook/storybook-react/src/Highlight/Highlight.stories.tsx +++ b/storybook/storybook-react/src/Highlight/Highlight.stories.tsx @@ -34,7 +34,7 @@ const meta = { }, render: ({ color }) => ( - +
We kunnen in heel Nederland schoolpleinen creëren waar kinderen worden uitgedaagd om samen te spelen en te From 88a089551199ce5df0643fd7136f0da7cc6cd7de Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Mon, 27 Nov 2023 11:09:32 +0100 Subject: [PATCH 6/7] docs: Fix incorrect widths in grid documentation (#783) Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com> --- storybook/storybook-docs/src/grid.stories.mdx | 194 +++++++++++------- 1 file changed, 118 insertions(+), 76 deletions(-) diff --git a/storybook/storybook-docs/src/grid.stories.mdx b/storybook/storybook-docs/src/grid.stories.mdx index ccf5efa320..5b7587f07e 100644 --- a/storybook/storybook-docs/src/grid.stories.mdx +++ b/storybook/storybook-docs/src/grid.stories.mdx @@ -4,110 +4,163 @@ import { Meta } from "@storybook/blocks"; # Grid -Onder elke pagina ligt hetzelfde grid. -Alle elementen op een pagina worden op het grid geplaatst. -Ze beslaan dan een bepaald aantal kolommen, en de witruimtes daartussen. +Onder elke pagina ligt een _responsive_ grid. +Alle elementen op een pagina worden op dat grid geplaatst. ## Ontwerp -Het grid is volledig _responsive_: afhankelijk van de breedte van het venster verandert de breedte van het grid en het aantal kolommen. +### Vier, acht of twaalf kolommen -### Er zijn 4, 8 of 12 kolommen +Het grid bezet steeds de volledige beschikbare breedte. +Afhankelijk van die breedte verandert het aantal kolommen van het grid. +Alle kolommen zijn even breed. In vensters tot 576 pixels breed levert het grid 4 kolommen. Tot een breedte van 1088 pixels zijn dat er 8. Op dat punt worden en blijven het er 12. -Alle kolommen zijn even breed. + +We noemen deze drie varianten het smalle, het middelbrede en het brede grid. De breakpoints zijn gebaseerd op stappen van 256 pixels, beginnend op een basis van 64 pixels. Zo is 576 = 64 + 2 × 256 en 1088 = 64 + 4 × 256. -De maatvoering van de witruimtes en de typografie veranderen op deze breakpoints niet. -Wel wijzigt het aantal kolommen, die daardoor smaller of breder worden. -Ook kunnen elementen op dat moment van plaats veranderen op de pagina. +Op deze breakpoints verandert alleen het aantal kolommen. +Die worden daardoor smaller of breder en de elementen erop dus ook. +Rond een breakpoint kunnen elementen van plaats veranderen op de pagina. ### Twee thema’s voor witruimte +Het design system ondersteunt zowel websites als webapplicaties. +De gewenste layout verschilt nogal tussen beide. + #### Ruimtelijk -Voor websites is het grid behoorlijk ruimtelijk. -Zo is de huisstijl ontworpen. +De online huisstijl is ontworpen op eenvoud. +Er zijn weinig opties voor achtergrondkleur of belijning. +Typografie en witruimte blijven over als middelen om schermen overzichtelijk te maken. +Voor websites is het grid daarom behoorlijk ruimtelijk. -De horizontale witruimte tussen kolommen is 16 pixels breed bij een vensterbreedte van 320 pixels. +De horizontale witruimte tussen kolommen is 16 pixels breed bij een vensterbreedte van 320 pixels of minder. Voor elke 256 pixels extra breedte groeit de witruimte lineair met 8 pixels. +(Dit komt neer op 3 en 3/8 procent van de schermbreedte plus 6 pixels.) Bij een vensterbreedte van 1600 pixels is het dus 56 pixels. -In vensters die breder zijn dan dat groeit de witruimte niet verder. +Daarna groeit de witruimte niet verder. In brede vensters worden de witruimtes bijna even breed als de kolommen zelf. -Dat lijkt misschien onnatuurlijk, maar is geen probleem – doorgaans worden elementen op 3 of 4 kolommen van het grid geplaatst en die krijgen dan ook de tussenliggende witruimtes mee. +Dat lijkt misschien onnatuurlijk, maar is geen probleem. +Elementen bezetten vaak meerdere kolommen van het grid en krijgen dan ook de tussenliggende witruimtes mee. #### Compact Voor applicaties is zo veel witruimte niet nodig, zelfs contraproductief. -Daarom is er een compact thema voor het grid. +Daarom is er ook een compact thema voor het grid. -Hier begint de horizontale witruimte op 4 pixels bij een vensterbreedte van 320 pixels, -en groeit deze met 4 pixels per 256 pixels extra breedte. -Het maximum is hier 40 pixels en dat wordt pas bereikt bij een vensterbreedte van 2.624 pixels. +De minimale witruimte tussen kolommen is ook hier 16 pixels. +Maar deze begint pas op een vensterbreedte van 1088 pixels te groeien. +De toename gaat ook langzamer: 4 pixels per 256 pixels extra breedte. +(Dit komt neer op 1 en 9/16 procent van de schermbreedte min 1 pixel.) +Het maximum is hier 40 pixels en dat wordt pas bereikt bij een vensterbreedte van 2624 pixels. -Alle andere eigenschappen van de compacte variatie zijn gelijk aan de ruimtelijke. +Alle andere eigenschappen van het compacte thema zijn gelijk aan die van het ruimtelijke. ### Marges links en rechts -#### Voor websites +Aan beide zijden reserveert het grid marges van witruimte. + +#### Ruimtelijk -Het grid centreert zichzelf horizontaal. -Aan beide zijden reserveert het grid marges om afstand te houden tot de randen van het venster. -Deze ruimte is 1½ keer zo breed als die tussen de kolommen. +In het ruimtelijke thema is deze ruimte 1½ keer zo breed als die tussen de kolommen. +Zo is er genoeg ruimte tussen het grid en de randen van het scherm. -Sommige elementen mogen over deze marges gepositioneerd worden, zoals de Page Footer en een schermvullende afbeelding. -Die zijn dan dus breder dan de rest van de content, maar worden wel beperkt door een maximale breedte. +Sommige elementen mogen over deze marges gepositioneerd worden, zoals schermvullende afbeeldingen en de voettekst van de pagina. +Die zijn dan dus breder dan de rest van de content. -Voor applicaties is de marge naast het grid gelijk aan de witruimtes erbinnen. +Dit thema is gericht op websites. +Het ligt voor de hand om het grid te beperken tot een maximale breedte. +Het grid wordt dan automatisch gecentreerd. + +#### Compact + +In het compacte thema zijn de marges buiten het grid even breed als de witruimtes erbinnen. Hier worden geen elementen over de marges heen geplaatst. -### Niet onbeperkt breed +Dit thema is geschikt voor applicaties die de volledige schermbreedte benutten. -Een maximale breedte voor het grid zorgt ervoor dat de elementen van een pagina niet al te ver van elkaar verwijderd raken. -Ook wordt de witruimte en typografie dan niet extreem groot. +### Menubalk -Voor websites is de maximale breedte van het grid 1432 pixels. -In vensters van minimaal 1600 pixels breed heeft het grid deze breedte – de marges bedragen hier 84 pixels. +Applicaties hebben in het brede grid een verticale menubalk aan de linkerzijde. +Deze staat naast het grid, niet erin, en heeft een vaste breedte van 112 pixels. + +In het middelbrede en smalle grid wordt het menu horizontaal onder de header. +In deze context neemt het grid wel de hele breedte van het venster in. -De maximale breedte kan ook worden ingesteld op 1896 pixels. -Inclusief de marges van 108 pixels komt de totale breedte hier op 2112 pixels. +### Maximale breedte -Voor applicaties is er geen maximale breedte. +Een maximale breedte voor het grid zorgt ervoor dat witruimte en typografie niet onbeperkt doorgroeien. +Zo raken de elementen van een pagina niet te ver van elkaar verwijderd en blijft tekst prettig leesbaar. -Er is geen minimale breedte. +Voor websites, in het ruimtelijke thema, is de maximale breedte van het grid 1432 pixels. +In vensters van minimaal 1600 pixels breed heeft het grid deze breedte – de marges bedragen hier 84 pixels. + +Applicaties, die het compacte thema gebruiken, nemen de volledige breedte van het venster in. + +Er is geen expliciete minimale breedte. Zelfs in vensters smaller dan 320 pixels, voor zover die in de praktijk voorkomen, blijft het grid zich schalen naar de beschikbare breedte. Voor het gemak speelt de breedte van 320 wel een rol in de documentatie. -### De maatvoeringen per variant +## Maatvoering -Op het startpunt van de drie varianten van het grid hebben de kolommen, witruimtes en marges de volgende breedtes in pixels. +Deze ontwerpkeuzes hebben in de praktijk het volgende resultaat. + +### Breedtes per breakpoint + +Op de drie breakpoints hebben de kolommen, witruimtes en marges de volgende breedtes in pixels. #### Ruimtelijk -| Naam variant | Vanaf vensterbreedte | Aantal kolommen | Breedte kolom | Breedte witruimte | Breedte marge | Breedte grid | -| :----------- | -------------------: | --------------: | ------------: | ----------------: | ------------: | -----------: | -| smal | 320 | 4 | 56 | 16 | 24 | 272 | -| middelbreed | 576 | 8 | 42 | 24 | 36 | 504 | -| breed | 1088 | 12 | 44 | 40 | 60 | 968 | +| Breakpoint | Vanaf vensterbreedte | Aantal kolommen | Breedte kolom | Breedte witruimte | Breedte marge | Breedte grid | +| :---------- | -------------------: | --------------: | ------------: | ----------------: | ------------: | -----------: | +| smal | 320 | 4 | 56 | 16 | 24 | 272 | +| middelbreed | 576 | 8 | 42 | 24 | 36 | 504 | +| breed | 1088 | 12 | 44 | 40 | 60 | 968 | #### Compact -| Naam variant | Vanaf vensterbreedte | Aantal kolommen | Breedte kolom | Breedte witruimte | Breedte marge | Breedte grid | -| :----------- | -------------------: | --------------: | ------------: | ----------------: | ------------: | -----------: | -| smal | 320 | 4 | 56 | 16 | 24 | 272 | -| middelbreed | 576 | 8 | 42 | 24 | 36 | 504 | -| breed | 1088 | 12 | 44 | 40 | 60 | 968 | +| Breakpoint | Vanaf vensterbreedte | Aantal kolommen | Breedte menubalk | Breedte kolom | Breedte witruimte | Breedte marge | Breedte grid | +| :---------- | -------------------: | --------------: | ---------------: | ------------: | ----------------: | ------------: | -----------: | +| smal | 320 | 4 | 0 | 60 | 16 | 16 | 288 | +| middelbreed | 576 | 8 | 0 | 54 | 16 | 16 | 544 | +| breed | 1088 | 12 | 112 | 64 | 16 | 16 | 944 | + +### Niet gebonden aan apparaten + +Alle afmetingen van het grid zijn rekenkundig gebaseerd op veelvouden van 16; +uitdrukkelijk niet op maten van specifieke schermen of apparaten. + +We willen onze ontwerpen niet richten op de precieze afmetingen van de nieuwste iPhone of Galaxy, +maar juist ontvankelijk laten zijn voor de variatie aan schermen waarop ze zullen voorkomen. +Vanzelfsprekend hebben we geëxperimenteerd en getest en uiteindelijk waarden gekozen die in de praktijk visueel goed werken. + +Om dezelfde reden noemen we de drie breakpoints van het grid niet “mobiel, tablet en desktop”, +maar “voor smalle, middelbrede en brede” schermen of vensters. -### Breedtes voor design +Wil je toch wat meer houvast, +ga er dan vanuit dat telefoons in staande modus en ‘split screen’ vensters op tablets het 4-koloms grid gebruiken, +telefoons in liggende modus en tablets in staande het 8-koloms, +en tablets in liggende modus, +laptops en grotere beeldschermen het 12-koloms. +Om hoeveel pixels het dan precies gaat is niet van belang. + +### Referentie-breedtes voor ontwerpers + +Ondanks dat is het bij het ontwerpen van een scherm toch nodig een bepaald canvas te kiezen. +Ook is het goed om te bepalen hoe een ontwerp op ‘een dekstop’, ‘een tablet’ of ‘op mobiel’ zich houdt. -In Figma werken we met drie referentie-breedtes om het ontwerp uit te werken voor de drie klassen van apparaten. -Op precies die breedtes is de maatvoering als volgt. +Daarom werken we in Figma we met drie referentie-breedtes. +Op die breedtes werken we het ontwerp van een scherm uit te werken voor die drie klassen van apparaten. +We weten dat in de werkelijkheid veel meer variatie bestaat – maar we moeten toch ergens op mikken. +Op deze breedtes is de maatvoering als volgt. #### Ruimtelijk @@ -119,15 +172,11 @@ Op precies die breedtes is de maatvoering als volgt. #### Compact -| Klasse apparaat | Referentie-breedte | Aantal kolommen | Breedte kolom | Breedte witruimte | Breedte marge | Breedte grid | -| :-------------- | -----------------: | --------------: | ------------: | ----------------: | ------------: | -----------: | -| telefoon | 320 | 4 | 60 | 16 | 24 | 288 | -| tablet | 832 | 8 | 86 | 16 | 16 | 800 | -| desktop | 1600 | 12 | 98 | 24 | 24 | 1440 | - -Let op: vanaf een vensterbreedte van 1088 pixels staat er een navigatiebalk links van het grid. -Deze is 112 pixels breed. -Vandaar de afwijkende breedte van het grid. +| Klasse apparaat | Referentie-breedte | Aantal kolommen | Breedte menubalk | Breedte kolom | Breedte witruimte | Breedte marge | Breedte grid | +| :-------------- | -----------------: | --------------: | ---------------: | ------------: | ----------------: | ------------: | -----------: | +| telefoon | 320 | 4 | 0 | 60 | 16 | 16 | 288 | +| tablet | 832 | 8 | 0 | 86 | 16 | 16 | 800 | +| desktop | 1600 | 12 | 112 | 98 | 24 | 24 | 1440 | ### Vensters of schermen @@ -141,22 +190,9 @@ En _responsive design_ gaat logischerwijs uit van de breedte van het venster van Op telefoons en tablets komen beide wel vaak overeen, al is het op tablets wel degelijk mogelijk om twee (vensters van) apps naast elkaar op het scherm te zetten. -### Niet gebonden aan apparaten - -Alle afmetingen van het grid zijn rekenkundig gebaseerd op veelvouden van 16; uitdrukkelijk niet op maten van specifieke schermen of apparaten. - -We willen onze ontwerpen niet richten op de precieze afmetingen van de nieuwste iPhone of Galaxy, maar juist ontvankelijk laten zijn voor de variatie aan schermen waarop ze zullen voorkomen. -Vanzelfsprekend hebben we geëxperimenteerd en getest en uiteindelijk waarden gekozen die in de praktijk visueel goed werken. - -Om dezelfde reden noemen we de drie varianten van het grid (4, 8 en 12 kolommen) niet “mobiel, tablet en desktop” maar “voor smalle, middelbrede en brede” schermen of vensters. +## Relatie met tekst -Wil je toch wat meer houvast, ga er dan vanuit dat telefoons in staande modus en vensters op tablets het 4-koloms grid gebruiken, telefoons in liggende modus en tablets in staande het 8-koloms, en tablets in liggende modus, laptops en grotere beeldschermen het 12-koloms. -Om hoeveel pixels het dan precies gaat is niet van belang. - -### Inzoomen of vergrote tekst - -Mensen kunnen de weergave van een webpagina vergroten door in te zoomen of door een grotere tekstgrootte in te stellen. -De maatvoering van het grid houdt daar rekening mee: door de breakpoints mee te laten schalen verandert het aantal kolommen eerder zodat de inhoud goed blijft passen. +Layout en tekst hebben op verschillende manieren met elkaar te maken. ### Schalende typografie @@ -165,10 +201,16 @@ Ook de [tekstgroottes](?path=/docs/docs-designrichtlijnen-typografie--docs) reag Dat zorgt ervoor dat content op zo veel mogelijk vensterbreedtes en met diverse persoonlijke instellingen goed tot zijn recht komt. Op dit moment reageert de typografie nog op 1 breakpoint bij een vensterbreedte van 854 pixels. -Nu het grid doorontwikkeld is, stemmen we de typografie daar weer op af. +Dat was al eerder zo ontworpen en gebouwd. +Nu het grid verder ontwikkeld is, stemmen we de typografie daar weer op af. Dit aparte breakpoint komt dus snel te vervallen. -## Componenten +### Inzoomen of vergrote tekst + +Mensen kunnen de weergave van een webpagina vergroten door in te zoomen of door een grotere tekstgrootte in te stellen. +De maatvoering van het grid houdt daar rekening mee: door de breakpoints mee te laten schalen verandert het aantal kolommen eerder zodat de inhoud goed blijft passen. + +## Gerelateerde componenten - [Grid](?path=/docs/react_layout-grid--docs) - [Grid Cell](?path=/docs/react_layout-grid-cell--docs) From 930baf5f841a4a368c75a7e72e96838ce3f09c79 Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Mon, 27 Nov 2023 12:08:19 +0100 Subject: [PATCH 7/7] chore: Publish new release - @amsterdam/design-system-css@0.1.9 - @amsterdam/design-system-react@0.1.9 - @amsterdam/design-system-assets@0.1.4 - @amsterdam/design-system-react-icons@0.1.9 - @amsterdam/design-system-tokens@0.1.8 --- packages/css/CHANGELOG.md | 8 ++++++++ packages/css/package.json | 2 +- packages/react/CHANGELOG.md | 8 ++++++++ packages/react/package.json | 2 +- proprietary/assets/CHANGELOG.md | 8 ++++++++ proprietary/assets/package.json | 2 +- proprietary/react-icons/CHANGELOG.md | 8 ++++++++ proprietary/react-icons/package.json | 2 +- proprietary/tokens/CHANGELOG.md | 8 ++++++++ proprietary/tokens/package.json | 2 +- 10 files changed, 45 insertions(+), 5 deletions(-) create mode 100644 packages/css/CHANGELOG.md create mode 100644 packages/react/CHANGELOG.md create mode 100644 proprietary/assets/CHANGELOG.md create mode 100644 proprietary/react-icons/CHANGELOG.md create mode 100644 proprietary/tokens/CHANGELOG.md diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md new file mode 100644 index 0000000000..4bf9421ccb --- /dev/null +++ b/packages/css/CHANGELOG.md @@ -0,0 +1,8 @@ +# Change Log + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +## [0.1.9](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-css@0.1.8...@amsterdam/design-system-css@0.1.9) (2023-11-27) + +**Note:** Version bump only for package @amsterdam/design-system-css diff --git a/packages/css/package.json b/packages/css/package.json index 12dafa14f6..2b134e070b 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -1,5 +1,5 @@ { - "version": "0.1.8", + "version": "0.1.9", "author": "Community for NL Design System", "description": "CSS files for components for the City of Amsterdam based on the NL Design System architecture", "license": "EUPL-1.2", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md new file mode 100644 index 0000000000..813432205e --- /dev/null +++ b/packages/react/CHANGELOG.md @@ -0,0 +1,8 @@ +# Change Log + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +## [0.1.9](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-react@0.1.8...@amsterdam/design-system-react@0.1.9) (2023-11-27) + +**Note:** Version bump only for package @amsterdam/design-system-react diff --git a/packages/react/package.json b/packages/react/package.json index 6cecd3ae2a..94794f9c45 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,5 +1,5 @@ { - "version": "0.1.8", + "version": "0.1.9", "author": "Community for NL Design System", "description": "React component library bundle for the City of Amsterdam based on the NL Design System architecture", "license": "EUPL-1.2", diff --git a/proprietary/assets/CHANGELOG.md b/proprietary/assets/CHANGELOG.md new file mode 100644 index 0000000000..55e3493c2c --- /dev/null +++ b/proprietary/assets/CHANGELOG.md @@ -0,0 +1,8 @@ +# Change Log + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +## [0.1.4](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-assets@0.1.3...@amsterdam/design-system-assets@0.1.4) (2023-11-27) + +**Note:** Version bump only for package @amsterdam/design-system-assets diff --git a/proprietary/assets/package.json b/proprietary/assets/package.json index e13c2ecb6e..bee9de125b 100644 --- a/proprietary/assets/package.json +++ b/proprietary/assets/package.json @@ -1,5 +1,5 @@ { - "version": "0.1.3", + "version": "0.1.4", "author": "Community for NL Design System", "description": "Assets for the City of Amsterdam", "license": "SEE LICENSE IN LICENSE.md", diff --git a/proprietary/react-icons/CHANGELOG.md b/proprietary/react-icons/CHANGELOG.md new file mode 100644 index 0000000000..b881306677 --- /dev/null +++ b/proprietary/react-icons/CHANGELOG.md @@ -0,0 +1,8 @@ +# Change Log + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +## [0.1.9](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-react-icons@0.1.8...@amsterdam/design-system-react-icons@0.1.9) (2023-11-27) + +**Note:** Version bump only for package @amsterdam/design-system-react-icons diff --git a/proprietary/react-icons/package.json b/proprietary/react-icons/package.json index 0db66bd80d..b6c66c0321 100644 --- a/proprietary/react-icons/package.json +++ b/proprietary/react-icons/package.json @@ -1,5 +1,5 @@ { - "version": "0.1.8", + "version": "0.1.9", "author": "Community for NL Design System", "description": "React icon components for the City of Amsterdam", "license": "SEE LICENSE IN LICENSE.md", diff --git a/proprietary/tokens/CHANGELOG.md b/proprietary/tokens/CHANGELOG.md new file mode 100644 index 0000000000..32f9bd19fc --- /dev/null +++ b/proprietary/tokens/CHANGELOG.md @@ -0,0 +1,8 @@ +# Change Log + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +## [0.1.8](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-tokens@0.1.7...@amsterdam/design-system-tokens@0.1.8) (2023-11-27) + +**Note:** Version bump only for package @amsterdam/design-system-tokens diff --git a/proprietary/tokens/package.json b/proprietary/tokens/package.json index 6d0a431496..de99bb5bdf 100644 --- a/proprietary/tokens/package.json +++ b/proprietary/tokens/package.json @@ -1,5 +1,5 @@ { - "version": "0.1.7", + "version": "0.1.8", "author": "Community for NL Design System", "description": "Design tokens for components for the City of Amsterdam based on the NL Design System architecture", "license": "SEE LICENSE IN LICENSE.md",