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

…into feat/DES-551-add-theme-setup

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

@@ -18,7 +18,7 @@ jobs:
           BRANCH_NAME=$(echo $RAW_BRANCH_NAME | sed 's/[^/]*\///')
           echo "BRANCH_NAME=$BRANCH_NAME" >> $GITHUB_ENV
 
-      - name: Checkout
+      - name: Check out
         uses: actions/checkout@v4
         with:
           ref: gh-pages

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

@@ -20,7 +20,7 @@ jobs:
           BRANCH_NAME=$(echo $RAW_BRANCH_NAME | sed 's/[^/]*\///')
           echo "BRANCH_NAME=$BRANCH_NAME" >> $GITHUB_ENV
 
-      - name: Checkout
+      - name: Check out
         uses: actions/checkout@v4
 
       - name: Create deployment

.github/workflows/lint-test.yml

@@ -10,16 +10,16 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout branch
+      - name: Check out branch
         uses: actions/checkout@v4
 
       - name: Set up Node.js version
         uses: actions/setup-node@v4
         with:
           node-version: "20"
 
-      - uses: pnpm/action-setup@v2
-        name: Install pnpm
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
         id: pnpm-install
         with:
           version: 8
@@ -30,8 +30,8 @@ jobs:
         run: |
           echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v4
-        name: Setup pnpm cache
+      - name: Set up pnpm cache
+        uses: actions/cache@v4
         with:
           path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
@@ -48,16 +48,16 @@ jobs:
     needs: install
 
     steps:
-      - name: Checkout branch
+      - name: Check out branch
         uses: actions/checkout@v4
 
       - name: Set up Node.js version
         uses: actions/setup-node@v4
         with:
           node-version: "20"
 
-      - uses: pnpm/action-setup@v2
-        name: Install pnpm
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
         id: pnpm-install
         with:
           version: 8
@@ -67,8 +67,9 @@ jobs:
         id: pnpm-cache
         run: |
           echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
-      - uses: actions/cache@v4
-        name: Setup pnpm cache
+
+      - name: Set up pnpm cache
+        uses: actions/cache@v4
         with:
           path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}

.github/workflows/publish.yml

@@ -0,0 +1,105 @@
+name: Publish
+
+on:
+  workflow_run:
+    workflows: [Lint and test]
+    types: [completed]
+    branches: [main]
+
+jobs:
+  create-release-and-publish:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+
+    steps:
+      - name: Create release
+        uses: google-github-actions/release-please-action@v4
+        id: release
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          target-branch: main
+
+      # The logic below handles the npm publication:
+      - name: Check out branch
+        uses: actions/checkout@v4
+        with:
+          # This is necessary because on.workflow_run always runs on the
+          # default branch, which is 'develop' in our case
+          ref: "main"
+        # these if statements ensure that a publication only occurs when
+        # a new release is created:
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Set up Node.js version
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: "https://registry.npmjs.org"
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        id: pnpm-install
+        with:
+          version: 8
+          run_install: false
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Set up pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Install dependencies
+        run: pnpm install
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Build
+        run: pnpm run build
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Publish
+        run: pnpm -r publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+        if: ${{ steps.release.outputs.releases_created }}
+
+      # The logic below handles the Storybook deploy:
+      - name: "Restore build artifact: Storybook docs"
+        uses: dawidd6/action-download-artifact@v3
+        with:
+          workflow: "lint-test.yml"
+          name: storybook-docs
+          path: dist/storybook
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: "Restore build artifact: Storybook react"
+        uses: dawidd6/action-download-artifact@v3
+        with:
+          workflow: "lint-test.yml"
+          name: storybook-react
+          # React storybook is deployed to the /storybook-react subdirectory.
+          # In the main docs storybook, the contents of /storybook-react
+          # are also shown using Storybook composition.
+          path: dist/storybook/storybook-react
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Deploy to GitHub Pages
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: gh-pages
+          folder: dist/storybook
+          # feature branch directories are prefixed with demo-*
+          # these are excluded from this action's default clean
+          clean-exclude: demo-*
+        if: ${{ steps.release.outputs.releases_created }}

.release-please-manifest.json

@@ -0,0 +1,7 @@
+{
+  "packages/css": "0.3.0",
+  "packages/react": "0.3.0",
+  "proprietary/assets": "0.1.6",
+  "proprietary/react-icons": "0.1.11",
+  "proprietary/tokens": "0.3.0"
+}

documentation/publishing.md

@@ -1,8 +1,9 @@
 # Publishing
 
-We use Lerna to create changelogs and releases for all our packages and to publish them to npm.
+We use a [Release Please GitHub Action](https://github.com/google-github-actions/release-please-action) to create changelog and release PRs for all our packages.
+When the release PR is merged, that same action publishes the new release to npm, creates a release on GitHub, and deploys it to our main Storybook environment.
 
-Only members of the `@amsterdam` group can publish to npm.
+The [maintainers](./documentation/maintainers.md) can release new versions of our packages.
 If you want to have rights to publish as well, contact one of the [maintainers](./maintainers.md).
 
 ## Conventional commits
@@ -27,28 +28,25 @@ This will cause a major version bump in both packages on release and add its des
 
 ## 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 result in a major bump; new features get a minor bump, and everything else is a patch bump.
-   - It adds new entries to the changelogs of affected packages, 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. Ensure being authenticated with 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 perform fast-forward merges, so you should do this from your CLI.
-
-1. `git checkout main`
-2. `git merge --ff-only develop`
-3. `git push`
+1. Locally merge the latest version of `develop` into `main` using a fast-forward merge, and push to the remote:
+
+   ```shell
+     git checkout main
+     git pull
+     git merge --ff-only origin/develop
+     git push
+   ```
+
+2. This triggers a GitHub Action, which creates a release PR.
+   Review, approve and merge this PR.
+   The same Action will then publish the release to npm and GitHub.
+   It also deploys the released version to our main Storybook environment.
+3. When complete, the Action adds a new release commit to `main`.
+   Locally merge this commit back into `develop` and push it to the remote:
+
+   ```shell
+    git checkout develop
+    git pull
+    git merge --ff-only origin/main
+    git push
+   ```

lerna.json

@@ -1,21 +1,5 @@
 {
   "$schema": "node_modules/@lerna-lite/cli/schemas/lerna-schema.json",
-  "npmClient": "pnpm",
   "version": "independent",
-  "useWorkspaces": true,
-  "command": {
-    "publish": {},
-    "version": {
-      "allowBranch": ["develop"],
-      "changelogPreset": {
-        "name": "conventionalcommits",
-        "issueUrlFormat": "{{host}}/{{owner}}/{{repository}}/issues/{{id}}"
-      },
-      "conventionalCommits": true,
-      "exact": true,
-      "private": false,
-      "skipBumpOnlyReleases": true,
-      "syncWorkspaceLock": true
-    }
-  }
+  "useWorkspaces": true
 }

package.json

@@ -20,9 +20,7 @@
   ],
   "devDependencies": {
     "@lerna-lite/cli": "3.2.1",
-    "@lerna-lite/publish": "3.2.1",
     "@lerna-lite/run": "3.2.1",
-    "@lerna-lite/version": "3.2.1",
     "@types/node": "20.11.7",
     "@typescript-eslint/eslint-plugin": "6.19.1",
     "@typescript-eslint/parser": "6.19.1",
@@ -68,20 +66,17 @@
     "plop": "plop",
     "prepare": "husky install",
     "prettier": "prettier --write .",
-    "publish": "lerna publish from-package --yes",
-    "release": "lerna version",
     "start": "npm-run-all --parallel watch:**",
     "test": "npm run test-workspaces",
     "test-update": "npm-run-all --sequential clean lint build test",
     "test-workspaces": "lerna run --no-bail test",
-    "prewatch:storybook": "lerna run build:style-dictionary",
-    "update-patch": "npm-check-updates --configFileName .ncurc.patch.js --deep --dep dev,prod --target patch --upgrade && pnpm install",
-    "update-minor": "npm-check-updates --configFileName .ncurc.minor.js --deep --dep dev,prod --target minor --upgrade && pnpm install",
     "update-major": "npm-check-updates --configFileName .ncurc.major.js --deep --dep dev,prod --target latest --upgrade && pnpm install",
+    "update-minor": "npm-check-updates --configFileName .ncurc.minor.js --deep --dep dev,prod --target minor --upgrade && pnpm install",
+    "update-patch": "npm-check-updates --configFileName .ncurc.patch.js --deep --dep dev,prod --target patch --upgrade && pnpm install",
     "watch:css": "npm run --workspace packages/css build:watch",
     "watch:react": "npm run --workspace packages/react build:watch",
     "watch:storybook-docs": "npx wait-on http://localhost:6007 && npm run --workspace storybook/storybook-docs start",
     "watch:storybook-react": "npm run --workspace storybook/storybook-react start",
-    "watch:style-dictionary": "npm run --workspace proprietary/tokens watch:style-dictionary"
+    "watch:tokens": "npm run --workspace proprietary/tokens watch"
   }
 }

packages/css/src/common/hyphenation.scss

@@ -0,0 +1,5 @@
+@mixin hyphenation {
+  hyphenate-limit-chars: var(--amsterdam-hyphenation-hyphenate-limit-chars);
+  hyphens: var(--amsterdam-hyphenation-hyphens);
+  overflow-wrap: var(--amsterdam-hyphenation-overflow-wrap);
+}

packages/css/src/components/blockquote/blockquote.scss

@@ -3,6 +3,8 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
+@import "../../common/hyphenation";
+
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -32,6 +34,7 @@
     line-height: var(--amsterdam-blockquote-spacious-line-height);
   }
 
+  @include hyphenation;
   @include reset;
 }