Merge branch 'develop' of github.com:Amsterdam/design-system into fea…

…t/bump-engine-versions

.github/workflows/feature-branch-deploy.yml

@@ -35,11 +35,11 @@ jobs:
         with:
           node-version: 20
 
-      - uses: pnpm/action-setup@v3
+      - uses: pnpm/action-setup@v4
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 8
+          version: 9
           run_install: false
 
       - name: Install dependencies

.github/workflows/lint-test.yml

@@ -19,10 +19,10 @@ jobs:
           node-version: "20"
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v4
         id: pnpm-install
         with:
-          version: 8
+          version: 9
           run_install: false
 
       - name: Get pnpm store directory
@@ -57,10 +57,10 @@ jobs:
           node-version: "20"
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v4
         id: pnpm-install
         with:
-          version: 8
+          version: 9
           run_install: false
 
       - name: Get pnpm store directory

.github/workflows/publish.yml

@@ -38,10 +38,10 @@ jobs:
         if: ${{ steps.release.outputs.releases_created == 'true' }}
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v4
         id: pnpm-install
         with:
-          version: 8
+          version: 9
           run_install: false
         if: ${{ steps.release.outputs.releases_created == 'true' }}
 

documentation/publishing.md

@@ -58,8 +58,41 @@ This will cause a major version bump in both packages on release and add its des
 Release Please uses labels to determine the status of a release.
 A release PR gets the label `autorelease: pending` or `autorelease: triggered`.
 When running the action again, the PR with those labels gets released, and the labels should be removed.
-However, due to GitHub API failures, it's possible that the label was not removed correctly upon a previous release and Release Please thinks that the previous release is still pending.
+However, due to GitHub API failures, it’s possible that the label was not removed correctly upon a previous release and Release Please thinks that the previous release is still pending.
 Release Please will not create a new release PR if it thinks there is a pending release.
 To fix this, check whether any closed PRs still have the `autorelease: pending` or `autorelease: triggered` labels, and remove them.
 
 [See the Release Please docs for more information](https://github.com/googleapis/release-please?tab=readme-ov-file#release-please-bot-does-not-create-a-release-pr-why).
+
+## Dependencies between packages
+
+We’ve established dependencies between our packages for smoother installation.
+For instance, our React package relies on our CSS package.
+When you install our React package, the corresponding version of our CSS package is automatically included.
+
+Here’s the dependency structure:
+
+```mermaid
+graph LR
+  RI["React Icons"] --> React
+  Tokens --> CSS
+  Assets --> CSS
+  CSS --> React
+```
+
+Managing these dependencies requires extra attention when publishing.
+We use [PNPM’s workspace feature](https://pnpm.io/workspaces#publishing-workspace-packages) to define dependencies between our packages.
+When we publish upstream packages like CSS and React, the latest specific versions of downstream packages (Tokens, Assets, and React Icons) get listed as dependencies.
+
+This setup works well when we update both CSS and React in a release.
+However, issues arise if a release only updates Tokens and Assets without changes to CSS or React.
+The latest version of CSS then depends on an older version of Tokens.
+
+To resolve this, we can manually let CSS depend on the latest version of Tokens.
+We replace `"@amsterdam/design-system-tokens": "workspace:*"` with `"@amsterdam/design-system-tokens": "x.y.z"` and run `pnpm i` to update the lockfile.
+We then release a new version of our CSS package, with the correct peer dependency.
+
+After that, consider restoring the dynamic dependency (`workspace:*`) and updating the lockfile (`pnpm i`) accordingly.
+
+The most extreme case requires us to release a new version of Tokens or Assets only, then update and release CSS, then update and release React.
+Although infrequent, this scenario might occur in the future.

package.json

@@ -15,7 +15,8 @@
   },
   "volta": {
     "node": "20.13.1",
-    "npm": "10.5.2"
+    "npm": "10.5.2",
+    "pnpm": "9.1.1"
   },
   "workspaces": [
     "./packages/*",
@@ -25,29 +26,29 @@
   "devDependencies": {
     "@lerna-lite/cli": "3.3.3",
     "@lerna-lite/run": "3.3.3",
-    "@types/node": "20.12.7",
-    "@typescript-eslint/eslint-plugin": "7.7.0",
-    "@typescript-eslint/parser": "7.7.0",
+    "@types/node": "20.12.11",
+    "@typescript-eslint/eslint-plugin": "7.8.0",
+    "@typescript-eslint/parser": "7.8.0",
     "conventional-changelog-conventionalcommits": "7.0.2",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jest": "28.2.0",
+    "eslint-plugin-jest": "28.5.0",
     "eslint-plugin-json": "3.1.0",
     "eslint-plugin-mdx": "3.1.5",
     "eslint-plugin-react": "7.34.1",
-    "html-validate": "8.18.1",
+    "html-validate": "8.18.2",
     "husky": "9.0.11",
     "lint-staged": "15.2.2",
-    "markdownlint-cli": "0.39.0",
-    "npm-check-updates": "16.14.18",
+    "markdownlint-cli": "0.40.0",
+    "npm-check-updates": "16.14.20",
     "npm-package-json-lint": "7.1.0",
     "npm-run-all": "4.1.5",
     "plop": "4.0.1",
     "postcss": "8.4.38",
     "prettier": "3.2.5",
-    "rimraf": "5.0.5",
-    "stylelint": "16.3.1",
+    "rimraf": "5.0.7",
+    "stylelint": "16.5.0",
     "stylelint-config-standard-scss": "13.1.0",
     "stylelint-order": "6.0.4",
     "typescript": "5.4.5",

packages/css/package.json

@@ -19,7 +19,10 @@
     "clean": "rimraf dist/"
   },
   "devDependencies": {
+    "sass": "1.77.1"
+  },
+  "peerDependencies": {
     "@amsterdam/design-system-tokens": "workspace:*",
-    "sass": "1.75.0"
+    "@amsterdam/design-system-assets": "workspace:*"
   }
 }

packages/css/src/components/link-list/link-list.scss

@@ -26,10 +26,10 @@
   color: var(--ams-link-list-link-color);
   display: inline-flex;
   font-family: var(--ams-link-list-link-font-family);
-  font-size: var(--ams-link-list-link-medium-font-size);
+  font-size: var(--ams-link-list-link-font-size);
   font-weight: var(--ams-link-list-link-font-weight);
   gap: var(--ams-link-list-link-gap);
-  line-height: var(--ams-link-list-link-medium-line-height);
+  line-height: var(--ams-link-list-link-line-height);
   outline-offset: var(--ams-link-list-link-outline-offset);
   text-decoration-line: var(--ams-link-list-link-text-decoration-line);
   text-decoration-thickness: var(--ams-link-list-link-text-decoration-thickness);

packages/css/src/components/ordered-list/ordered-list.scss

@@ -42,6 +42,11 @@
   color: var(--ams-ordered-list-inverse-color);
 }
 
+.ams-ordered-list--small:not(.ams-ordered-list--no-markers) {
+  font-size: var(--ams-ordered-list-small-font-size);
+  line-height: var(--ams-ordered-list-small-line-height);
+}
+
 /** A nested list has a different marker and less indentation for correct alignment. */
 :is(.ams-ordered-list, .ams-unordered-list) .ams-ordered-list {
   list-style-type: var(--ams-ordered-list-ordered-list-list-style-type);

packages/css/src/components/paragraph/paragraph.scss

@@ -13,9 +13,9 @@
 .ams-paragraph {
   color: var(--ams-paragraph-color);
   font-family: var(--ams-paragraph-font-family);
-  font-size: var(--ams-paragraph-medium-font-size);
+  font-size: var(--ams-paragraph-font-size);
   font-weight: var(--ams-paragraph-font-weight);
-  line-height: var(--ams-paragraph-medium-line-height);
+  line-height: var(--ams-paragraph-line-height);
 
   @include text-rendering;
   @include reset;

packages/css/src/components/search-field/search-field.scss

@@ -27,12 +27,12 @@
   font-family: var(--ams-search-field-input-font-family);
   font-size: var(--ams-search-field-input-font-size);
   font-weight: var(--ams-search-field-input-font-weight);
+  inline-size: 100%;
   line-height: var(--ams-search-field-input-line-height);
   outline-offset: var(--ams-search-field-input-outline-offset);
   padding-block: var(--ams-search-field-input-padding-block);
   padding-inline: var(--ams-search-field-input-padding-inline);
   touch-action: manipulation;
-  width: 100%;
 
   @include text-rendering;
   @include reset-input;
@@ -53,10 +53,10 @@
 .ams-search-field__input::-webkit-search-cancel-button {
   appearance: none;
   background-image: var(--ams-search-field-input-cancel-button-background-image);
+  block-size: var(--ams-search-field-input-cancel-button-block-size);
   cursor: pointer;
-  height: var(--ams-search-field-input-cancel-button-height);
+  inline-size: var(--ams-search-field-input-cancel-button-inline-size);
   margin-inline-start: 0.5rem;
-  width: var(--ams-search-field-input-cancel-button-width);
 }
 
 @mixin reset-button {

packages/css/src/components/select/select.scss

@@ -16,8 +16,8 @@
   font-family: var(--ams-select-font-family);
   font-size: var(--ams-select-font-size);
   font-weight: var(--ams-select-font-weight);
+  inline-size: 100%;
   line-height: var(--ams-select-line-height);
-  max-inline-size: 100%;
   outline-offset: var(--ams-select-outline-offset);
   padding-block: var(--ams-select-padding-block);
   padding-inline: var(--ams-select-padding-inline);

packages/css/src/components/text-area/text-area.scss

@@ -18,14 +18,14 @@
   font-family: var(--ams-text-area-font-family);
   font-size: var(--ams-text-area-font-size);
   font-weight: var(--ams-text-area-font-weight);
+  inline-size: 100%;
   line-height: var(--ams-text-area-line-height);
-  max-width: 100%;
-  min-height: var(--ams-text-area-min-height);
+  max-inline-size: 100%; // This prevents overflow when using the `cols` prop
+  min-block-size: var(--ams-text-area-min-block-size);
   outline-offset: var(--ams-text-area-outline-offset);
   padding-block: var(--ams-text-area-padding-block);
   padding-inline: var(--ams-text-area-padding-inline);
   touch-action: manipulation;
-  width: 100%;
 
   @include text-rendering;
   @include reset;
@@ -69,5 +69,5 @@
 }
 
 .ams-text-area--cols {
-  width: auto;
+  inline-size: auto;
 }

packages/css/src/components/text-input/text-input.scss

@@ -18,12 +18,12 @@
   font-family: var(--ams-text-input-font-family);
   font-size: var(--ams-text-input-font-size);
   font-weight: var(--ams-text-input-font-weight);
+  inline-size: 100%;
   line-height: var(--ams-text-input-line-height);
   outline-offset: var(--ams-text-input-outline-offset);
   padding-block: var(--ams-text-input-padding-block);
   padding-inline: var(--ams-text-input-padding-inline);
   touch-action: manipulation;
-  width: 100%;
 
   @include text-rendering;
   @include reset;

packages/css/src/components/unordered-list/unordered-list.scss

@@ -42,6 +42,11 @@
   color: var(--ams-unordered-list-inverse-color);
 }
 
+.ams-unordered-list--small:not(.ams-unordered-list--no-markers) {
+  font-size: var(--ams-unordered-list-small-font-size);
+  line-height: var(--ams-unordered-list-small-line-height);
+}
+
 /** A nested list has a different marker and less indentation for correct alignment. */
 :is(.ams-ordered-list, .ams-unordered-list) .ams-unordered-list {
   list-style-type: var(--ams-unordered-list-unordered-list-list-style-type);

packages/react/README.md

@@ -5,9 +5,8 @@
 The `@amsterdam/design-system-react` package contains React implementations of various components.
 You can use this package in React apps.
 
-The design tokens and css used in these components are published in separate npm packages, so don’t forget to install and include `@amsterdam/design-system-tokens` and `@amsterdam/design-system-css` too.
-
-<!-- TODO: make this easier? -->
+The design tokens and CSS used in these components are published in separate npm packages,
+which are automatically installed when you install the React package.
 
 ## Stability of the components
 
@@ -19,11 +18,13 @@ Make sure you specify the exact version as dependency, so you can schedule to up
 
 ## Getting started
 
-Install the packages you need, for instance:
+Install the React package:
+
+`npm install @amsterdam/design-system-react`
 
-`npm install @amsterdam/design-system-react @amsterdam/design-system-tokens @amsterdam/design-system-assets @amsterdam/design-system-css`
+This will automatically add separate packages containing our design tokens, assets, icons, and stylesheets.
 
-Import the packages you need.
+Import the components and stylesheets you need, for example:
 
 ```javascript
 import { Paragraph } from "@amsterdam/design-system-react";
@@ -43,7 +44,7 @@ export default App;
 
 For applications, the large text and ample white space of the theme can be counterproductive.
 That’s why there is a compact mode.
-To use the compact mode, import the compact css **after** theme css, like so:
+To use the compact mode, import the compact CSS **after** the theme CSS, like so:
 
 ```javascript
 import "@amsterdam/design-system-tokens/dist/index.css";

packages/react/package.json

@@ -33,45 +33,46 @@
   ],
   "dependencies": {
     "@amsterdam/design-system-react-icons": "workspace:*",
-    "@babel/runtime": "7.24.4",
-    "clsx": "2.1.0"
+    "@babel/runtime": "7.24.5",
+    "clsx": "2.1.1"
   },
   "devDependencies": {
-    "@babel/core": "7.24.4",
+    "@babel/core": "7.24.5",
     "@babel/plugin-transform-runtime": "7.24.3",
-    "@babel/preset-env": "7.24.4",
+    "@babel/preset-env": "7.24.5",
     "@babel/preset-react": "7.24.1",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "25.0.7",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/pluginutils": "5.1.0",
-    "@testing-library/dom": "10.0.0",
-    "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "15.0.2",
+    "@testing-library/dom": "10.1.0",
+    "@testing-library/jest-dom": "6.4.5",
+    "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.12",
-    "@types/lodash": "4.17.0",
-    "@types/react": "18.2.79",
+    "@types/lodash": "4.17.1",
+    "@types/react": "18.3.2",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "lodash": "4.17.21",
-    "next": "14.2.1",
+    "next": "14.2.3",
     "npm-run-all": "4.1.5",
     "postcss": "8.4.38",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "rollup": "4.14.3",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "rollup": "4.17.2",
     "rollup-plugin-delete": "2.0.0",
     "rollup-plugin-dts": "6.1.0",
     "rollup-plugin-filesize": "10.0.0",
-    "rollup-plugin-node-externals": "7.1.1",
+    "rollup-plugin-node-externals": "7.1.2",
     "rollup-plugin-node-polyfills": "0.2.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-typescript2": "0.36.0",
-    "sass": "1.75.0",
+    "sass": "1.77.1",
     "tslib": "2.6.2"
   },
   "peerDependencies": {
+    "@amsterdam/design-system-css": "workspace:*",
     "react": "16 - 18",
     "react-dom": "16 - 18"
   }

packages/react/src/Blockquote/Blockquote.tsx

@@ -8,10 +8,7 @@ import { forwardRef } from 'react'
 import type { BlockquoteHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
 
 export type BlockquoteProps = {
-  /**
-   * De kleur van het citaat.
-   * Gebruik deze property om het citaat in tegenovergestelde kleur te tonen.
-   */
+  /** Changes the text color for readability on a dark background. */
   inverseColor?: boolean
 } & PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>>