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

…into feature/DES-330-header-component

.github/workflows/main-deploy.yml

@@ -1,4 +1,4 @@
-name: Deploy main Storybook
+name: Main Storybook deploy
 on:
   workflow_run:
     workflows: [Lint and test]

.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 }}

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
 

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`

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
     }
   }

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",

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/[email protected]...@amsterdam/[email protected]) (2023-11-27)
+
+**Note:** Version bump only for package @amsterdam/design-system-css

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",

packages/css/src/index.scss

@@ -17,7 +17,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";

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/[email protected]...@amsterdam/[email protected]) (2023-11-27)
+
+**Note:** Version bump only for package @amsterdam/design-system-react

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",

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<HTMLAttributes<HTMLDivElement>>,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
-    <div {...restProps} ref={ref} className={clsx('amsterdam-footer__top', className)}>
+    <Highlight {...restProps} color="blue" ref={ref} className={clsx('amsterdam-footer__top', className)}>
       {children}
-    </div>
+    </Highlight>
   ),
 )