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

…into feature/DES-330-header-component

.github/dependabot.yml

@@ -7,9 +7,16 @@ updates:
     directory: "/"
     schedule:
       interval: "weekly"
+    commit-message:
+      prefix: chore
+      include: scope
   - package-ecosystem: "npm"
     directory: "/"
     schedule:
       interval: "daily"
     versioning-strategy: "increase-if-necessary"
     open-pull-requests-limit: 20
+    commit-message:
+      prefix: fix
+      prefix-development: chore
+      include: scope

.github/workflows/pr-title-validation.yml

@@ -20,3 +20,8 @@ jobs:
       - uses: amannn/action-semantic-pull-request@v5
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          types: |
+            fix
+            feat
+            chore

CONTRIBUTING.md

@@ -68,7 +68,7 @@ If you need to link your local version of this library (to test your unpublished
 - Go to the root directory of the packages you want to link to (i.e. where its package.json is)
 - Run `npm link`. Do this for all packages you want to link.
 - Go to the root of the project in which you want to consume the packages
-- Run `npm link <package-name>`. If you want to link multiple packages, seperate the package names with a space. For example: `npm link @amsterdam/design-system-tokens @amsterdam/design-system-assets @amsterdam/design-system-react @amsterdam/design-system-react-icons`. Be careful: you have to link all packages in the same namespace together. Doing it one at a time will only link the last one. <!-- TODO: is there a workaround for this? -->
+- Run `npm link <package-name>`. If you want to link multiple packages, separate the package names with a space. For example: `npm link @amsterdam/design-system-tokens @amsterdam/design-system-assets @amsterdam/design-system-react @amsterdam/design-system-react-icons`. Be careful: you have to link all packages in the same namespace together. Doing it one at a time will only link the last one. <!-- TODO: is there a workaround for this? -->
 - Sometimes the local link is severed. Run `npm link @amsterdam/...` again if this happens.
 
 ## Licensing

LICENSE.md

@@ -11,7 +11,7 @@ The Work is provided under the terms of this Licence when the Licensor (as
 defined below) has placed the following notice immediately following the
 copyright notice for the Work:
 
-    Licensed under the EUPL
+‘Licensed under the EUPL’
 
 or has expressed by any other means his willingness to license under the EUPL.
 

documentation/publishing.md

@@ -8,7 +8,16 @@ If you want to have rights to publish as well, contact one of the [maintainers](
 ## 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 titles of our PRs specify whether a change is:
+
+- a `chore`, which doesn’t trigger a release
+- a `fix`, resulting in a patch release,
+- a new feature (`feat`), a minor release, or
+- a breaking change (`feat!`), a major release.
+
+Use the `chore` prefix when updating development dependencies, changing configuration or updating documentation which isn't about a component.
+For refactors, regular dependency updates or updates to documentation about components, use the `fix` prefix.
+
 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.

lerna.json

@@ -14,6 +14,7 @@
       "conventionalCommits": true,
       "exact": true,
       "private": false,
+      "skipBumpOnlyReleases": true,
       "syncWorkspaceLock": true
     }
   }

package.json

@@ -19,13 +19,13 @@
     "./storybook/*"
   ],
   "devDependencies": {
-    "@lerna-lite/cli": "2.7.2",
-    "@lerna-lite/publish": "2.7.2",
-    "@lerna-lite/run": "2.7.2",
-    "@lerna-lite/version": "2.7.2",
-    "@types/node": "20.9.4",
-    "@typescript-eslint/eslint-plugin": "6.12.0",
-    "@typescript-eslint/parser": "6.12.0",
+    "@lerna-lite/cli": "3.0.0",
+    "@lerna-lite/publish": "3.0.0",
+    "@lerna-lite/run": "3.0.0",
+    "@lerna-lite/version": "3.0.0",
+    "@types/node": "20.10.1",
+    "@typescript-eslint/eslint-plugin": "6.13.1",
+    "@typescript-eslint/parser": "6.13.1",
     "conventional-changelog-conventionalcommits": "7.0.2",
     "eslint": "8.54.0",
     "eslint-config-prettier": "9.0.0",
@@ -34,7 +34,7 @@
     "eslint-plugin-json": "3.1.0",
     "eslint-plugin-mdx": "2.2.0",
     "eslint-plugin-react": "7.33.2",
-    "html-validate": "8.7.2",
+    "html-validate": "8.7.3",
     "husky": "8.0.3",
     "lint-staged": "15.1.0",
     "markdownlint-cli": "0.37.0",

packages/css/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.2.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]...@amsterdam/[email protected]) (2023-12-01)
+
+### ⚠ BREAKING CHANGES
+
+* Update typography system and values, implement compact theme (#803)
+
+### Features
+
+* Add common link tokens and use them in all link-like components ([#814](https://github.com/Amsterdam/design-system/issues/814)) ([9b5bd55](https://github.com/Amsterdam/design-system/commit/9b5bd55d0b118f246b828e023b75be1e84f98af4))
+* Allow end-alignment on page menu ([#835](https://github.com/Amsterdam/design-system/issues/835)) ([035ca08](https://github.com/Amsterdam/design-system/commit/035ca08842ee8ad955b260fb26693fe739801df4))
+* Allow small and large vertical whitespace on grids ([#821](https://github.com/Amsterdam/design-system/issues/821)) ([aa54eb9](https://github.com/Amsterdam/design-system/commit/aa54eb911bfed633856a74e0be4e11d4ad8f3ebc))
+* Update typography system and values, implement compact theme ([#803](https://github.com/Amsterdam/design-system/issues/803)) ([9b087ec](https://github.com/Amsterdam/design-system/commit/9b087ec5c6e75dfafadcdcde710747ef63951917))
+
 ## [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.9",
+  "version": "0.2.0",
   "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",
@@ -14,8 +14,8 @@
     "directory": "packages/css"
   },
   "scripts": {
-    "build": "sass src/:dist/ --style=compressed",
-    "build:watch": "sass src/:dist/ --watch",
+    "build": "sass src/components:dist/ --style=compressed",
+    "build:watch": "sass src/components:dist/ --watch",
     "clean": "rimraf dist/"
   },
   "devDependencies": {

packages/css/utils/breakpoint.scss → packages/css/src/common/breakpoint.scss

@@ -8,12 +8,6 @@
  * We to resort to Sass variables for our breakpoint values.
  */
 
-/**
- * The breakpoint for typography is 854px = 53.375rems.
- * @deprecated To be replaced with the grid breakpoints.
-*/
-$amsterdam-breakpoint-typography: 53.375rem;
-
 /** The breakpoint at which medium screens start. */
 $amsterdam-breakpoint-medium: 36rem;
 

packages/css/src/accordion/accordion.scss → packages/css/src/components/accordion/accordion.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 .amsterdam-accordion__header {
   display: flex;
   margin-block: 0;
@@ -22,16 +20,17 @@
   cursor: pointer;
   display: flex;
   font-family: var(--amsterdam-accordion-button-font-family);
-  font-size: var(--amsterdam-accordion-button-narrow-font-size);
+  font-size: var(--amsterdam-accordion-button-spacious-font-size);
   font-weight: var(--amsterdam-accordion-button-font-weight);
   justify-content: space-between;
-  line-height: var(--amsterdam-accordion-button-line-height);
+  line-height: var(--amsterdam-accordion-button-spacious-line-height);
   padding-block: 0.75rem;
   padding-inline: 1rem;
   width: 100%;
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-accordion-button-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-accordion-button-compact-font-size);
+    line-height: var(--amsterdam-accordion-button-compact-line-height);
   }
 
   &:focus {

packages/css/src/alert/alert.scss → packages/css/src/components/alert/alert.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 .amsterdam-alert {
   align-items: flex-start;
   background-color: var(--amsterdam-alert-background-color);
@@ -30,12 +28,13 @@
 .amsterdam-alert__title {
   color: var(--amsterdam-alert-title-color);
   font-family: var(--amsterdam-alert-title-font-family);
-  font-size: var(--amsterdam-alert-title-narrow-font-size);
+  font-size: var(--amsterdam-alert-title-spacious-font-size);
   font-weight: var(--amsterdam-alert-title-font-weight);
-  line-height: var(--amsterdam-alert-title-line-height);
+  line-height: var(--amsterdam-alert-title-spacious-line-height);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-alert-title-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-alert-title-compact-font-size);
+    line-height: var(--amsterdam-alert-title-compact-line-height);
   }
 
   @include reset;

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

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -16,9 +14,9 @@
   break-inside: avoid;
   color: var(--amsterdam-blockquote-color);
   font-family: var(--amsterdam-blockquote-font-family);
-  font-size: var(--amsterdam-blockquote-narrow-font-size);
+  font-size: var(--amsterdam-blockquote-spacious-font-size);
   font-weight: var(--amsterdam-blockquote-font-weight);
-  line-height: var(--amsterdam-blockquote-line-height);
+  line-height: var(--amsterdam-blockquote-spacious-line-height);
   quotes: "“" "”";
 
   &::before {
@@ -29,8 +27,9 @@
     content: close-quote;
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-blockquote-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-blockquote-spacious-font-size);
+    line-height: var(--amsterdam-blockquote-spacious-line-height);
   }
 
   @include reset;

packages/css/src/breadcrumb/breadcrumb.scss → packages/css/src/components/breadcrumb/breadcrumb.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -14,12 +12,13 @@
 
 .amsterdam-breadcrumb {
   font-family: var(--amsterdam-breadcrumb-font-family, inherit);
-  font-size: var(--amsterdam-breadcrumb-narrow-font-size);
+  font-size: var(--amsterdam-breadcrumb-spacious-font-size);
   font-weight: var(--amsterdam-breadcrumb-font-weight);
-  line-height: var(--amsterdam-breadcrumb-line-height);
+  line-height: var(--amsterdam-breadcrumb-spacious-line-height);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-breadcrumb-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-breadcrumb-compact-font-size);
+    line-height: var(--amsterdam-breadcrumb-compact-line-height);
   }
 }
 
@@ -34,35 +33,34 @@
   @include reset;
 }
 
-.amsterdam-breadcrumb-item {
+.amsterdam-breadcrumb__item {
   align-items: center;
   display: flex;
 }
 
-.amsterdam-breadcrumb-item:not(:last-child)::after {
-  background-color: var(--amsterdam-breadcrumb-color);
+.amsterdam-breadcrumb__item:not(:last-child)::after {
+  background-color: var(--amsterdam-breadcrumb-separator-background-color);
   clip-path: path("M 4.725,16 3.275,14.545 9.815,8 3.275,1.455 4.725,0 l 8,8 z");
   content: "";
   display: inline-block;
-  height: 16px;
+  height: 1rem;
   margin-inline-start: 1rem;
-  width: 16px;
+  width: 1rem;
 }
 
-.amsterdam-breadcrumb-item__link {
-  color: var(--amsterdam-breadcrumb-color);
-  cursor: pointer;
+.amsterdam-breadcrumb__link {
+  color: var(--amsterdam-breadcrumb-item-link-color);
   outline-offset: var(--amsterdam-breadcrumb-item-link-outline-offset);
-  text-decoration: none;
+  text-decoration-line: var(--amsterdam-breadcrumb-item-link-text-decoration-line);
+  text-decoration-thickness: var(--amsterdam-breadcrumb-item-link-text-decoration-thickness);
+  text-underline-offset: var(--amsterdam-breadcrumb-item-link-text-underline-offset);
 
   &::first-letter {
     text-transform: capitalize;
   }
 
   &:hover {
     color: var(--amsterdam-breadcrumb-item-link-hover-color);
-    text-decoration: underline;
-    text-decoration-thickness: 2px;
-    text-underline-offset: 3px;
+    text-decoration-line: var(--amsterdam-breadcrumb-item-link-hover-text-decoration-line);
   }
 }

packages/css/src/button/button.scss → packages/css/src/components/button/button.scss

@@ -3,21 +3,22 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../node_modules/@utrecht/components/button/css";
-@import "../../utils/breakpoint";
+@import "../../../node_modules/@utrecht/components/button/css";
 
 @mixin reset {
   -webkit-text-size-adjust: 100%;
 }
 
 .amsterdam-button {
-  font-size: var(--amsterdam-button-narrow-font-size);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-button-wide-font-size);
-  }
+  font-size: var(--amsterdam-button-spacious-font-size);
+  line-height: var(--amsterdam-button-spacious-line-height);
 
   @include reset;
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-breadcrumb-compact-font-size);
+    line-height: var(--amsterdam-breadcrumb-compact-line-height);
+  }
 }
 
 .amsterdam-button--secondary {

packages/css/src/card/card.scss → packages/css/src/components/card/card.scss

@@ -45,12 +45,12 @@
 
 .amsterdam-card__link {
   color: var(--amsterdam-card-link-color);
-  text-decoration: none;
-  text-decoration-thickness: 2px;
-  text-underline-offset: 3px;
+  text-decoration-line: var(--amsterdam-card-link-text-decoration-line);
+  text-decoration-thickness: var(--amsterdam-card-link-text-decoration-thickness);
+  text-underline-offset: var(--amsterdam-card-link-text-underline-offset);
 
   &:hover {
     color: var(--amsterdam-card-link-hover-color);
-    text-decoration: underline;
+    text-decoration-line: var(--amsterdam-card-link-hover-text-decoration-line);
   }
 }