Merge branch 'develop' into feature/DES-662-Select

package.json

@@ -23,34 +23,34 @@
     "./storybook"
   ],
   "devDependencies": {
-    "@lerna-lite/cli": "3.3.1",
-    "@lerna-lite/run": "3.3.1",
-    "@types/node": "20.11.30",
-    "@typescript-eslint/eslint-plugin": "7.3.1",
-    "@typescript-eslint/parser": "7.3.1",
+    "@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",
     "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": "27.9.0",
+    "eslint-plugin-jest": "28.2.0",
     "eslint-plugin-json": "3.1.0",
     "eslint-plugin-mdx": "3.1.5",
     "eslint-plugin-react": "7.34.1",
-    "html-validate": "8.17.0",
+    "html-validate": "8.18.1",
     "husky": "9.0.11",
     "lint-staged": "15.2.2",
     "markdownlint-cli": "0.39.0",
-    "npm-check-updates": "16.14.17",
+    "npm-check-updates": "16.14.18",
     "npm-package-json-lint": "7.1.0",
     "npm-run-all": "4.1.5",
     "plop": "4.0.1",
-    "postcss": "8.4.37",
+    "postcss": "8.4.38",
     "prettier": "3.2.5",
     "rimraf": "5.0.5",
-    "stylelint": "16.2.1",
-    "stylelint-config-standard-scss": "13.0.0",
+    "stylelint": "16.3.1",
+    "stylelint-config-standard-scss": "13.1.0",
     "stylelint-order": "6.0.4",
-    "typescript": "5.4.2",
+    "typescript": "5.4.5",
     "wait-on": "7.2.0"
   },
   "scripts": {

packages/css/package.json

@@ -20,9 +20,6 @@
   },
   "devDependencies": {
     "@amsterdam/design-system-tokens": "workspace:*",
-    "sass": "1.72.0"
-  },
-  "dependencies": {
-    "@utrecht/components": "3.0.0"
+    "sass": "1.75.0"
   }
 }

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

@@ -5,25 +5,30 @@
 
 @import "../../common/text-rendering";
 
+.ams-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ams-accordion-gap);
+
+  @include text-rendering;
+}
+
 .ams-accordion__header {
   display: flex;
   margin-block: 0;
   margin-inline: 0;
 }
 
-@mixin reset-button {
+.ams-accordion__button {
   background-color: transparent;
   border: 0;
-}
-
-.ams-accordion__button {
   color: var(--ams-accordion-button-color);
   cursor: pointer;
   display: flex;
   font-family: var(--ams-accordion-button-font-family);
   font-size: var(--ams-accordion-button-font-size);
   font-weight: var(--ams-accordion-button-font-weight);
-  justify-content: space-between;
+  gap: var(--ams-accordion-button-gap);
   line-height: var(--ams-accordion-button-line-height);
   padding-block: var(--ams-accordion-button-padding-block);
   padding-inline: var(--ams-accordion-button-padding-inline);
@@ -34,24 +39,25 @@
   }
 
   &:hover {
-    box-shadow: var(--ams-accordion-button-hover-box-shadow);
+    color: var(--ams-accordion-button-hover-color);
   }
+}
 
-  svg {
-    transform: rotate(0deg);
-    transition: transform 0.3s ease;
+.ams-accordion__icon svg {
+  rotate: 0deg;
+  transition: none;
 
-    @media (prefers-reduced-motion) {
-      transition: none;
-    }
+  [aria-expanded="true"] & {
+    rotate: -180deg;
   }
 
-  @include text-rendering;
-  @include reset-button;
+  @media not (prefers-reduced-motion) {
+    transition: rotate 0.3s ease;
+  }
 }
 
 .ams-accordion__button[aria-expanded="true"] svg {
-  transform: rotate(180deg);
+  rotate: -180deg;
 }
 
 .ams-accordion__panel {

packages/css/src/components/date-input/README.md

@@ -0,0 +1,11 @@
+<!-- @license CC0-1.0 -->
+
+# Date Input
+
+Helps users enter a date.
+
+## Visual considerations
+
+This component uses a native date input, which is styled differently in different browsers and operating systems.
+Recreating the native functionality is quite difficult and prone to accessibility errors, which is why we’ve chosen not to do that.
+This does mean that this component does not look identical on all browsers and operating systems.

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

@@ -0,0 +1,78 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/text-rendering";
+
+@mixin reset {
+  // Reset native appearance, this causes issues on iOS and Android devices
+  -webkit-appearance: none;
+  appearance: none;
+  border: 0;
+  border-radius: 0; // Reset rounded borders on iOS devices
+  box-sizing: border-box;
+  margin-block: 0;
+}
+
+.ams-date-input {
+  background-color: var(--ams-date-input-background-color);
+  box-shadow: var(--ams-date-input-box-shadow);
+  color: var(--ams-date-input-color);
+  font-family: var(--ams-date-input-font-family);
+  font-size: var(--ams-date-input-font-size);
+  font-weight: var(--ams-date-input-font-weight);
+  line-height: var(--ams-date-input-line-height);
+
+  // Set min height for iOS, otherwise an empty box is a lot smaller than a filled one.
+  min-height: calc(
+    (var(--ams-date-input-font-size) * var(--ams-date-input-line-height)) + 2 * var(--ams-date-input-padding-block)
+  );
+
+  // Set min width for iOS, so the width is closer to the filled in width.
+  min-width: calc(8ch + (2 * var(--ams-date-input-padding-inline)));
+  outline-offset: var(--ams-date-input-outline-offset);
+  padding-block: var(--ams-date-input-padding-block);
+  padding-inline: var(--ams-date-input-padding-inline);
+  touch-action: manipulation;
+
+  @include text-rendering;
+  @include reset;
+
+  &:hover {
+    box-shadow: var(--ams-date-input-hover-box-shadow);
+  }
+}
+
+// This changes the default calendar icon on Chromium browsers only
+.ams-date-input::-webkit-calendar-picker-indicator {
+  appearance: none;
+  background-image: var(--ams-date-input-calender-picker-indicator-background-image);
+  cursor: pointer;
+}
+
+.ams-date-input:hover::-webkit-calendar-picker-indicator {
+  background-image: var(--ams-date-input-hover-calender-picker-indicator-background-image);
+}
+
+.ams-date-input:disabled {
+  background-color: var(--ams-date-input-disabled-background-color);
+  box-shadow: var(--ams-date-input-disabled-box-shadow);
+  color: var(--ams-date-input-disabled-color);
+  cursor: not-allowed;
+}
+
+.ams-date-input:disabled::-webkit-calendar-picker-indicator {
+  background-image: var(--ams-date-input-disabled-calender-picker-indicator-background-image);
+  visibility: visible;
+}
+
+.ams-date-input:invalid,
+.ams-date-input[aria-invalid="true"] {
+  box-shadow: var(--ams-date-input-invalid-box-shadow);
+
+  &:hover {
+    // TODO: this should be the (currently non-existent) dark red hover color
+    box-shadow: var(--ams-date-input-invalid-hover-box-shadow);
+  }
+}

packages/css/src/components/index.scss

@@ -4,7 +4,10 @@
  */
 
 /* Append here */
+
 @import "./select/select";
+@import "./time-input/time-input";
+@import "./date-input/date-input";
 @import "./document/document";
 @import "./avatar/avatar";
 @import "./form-field-character-counter/form-field-character-counter";
@@ -40,7 +43,7 @@
 @import "./button/button";
 @import "./card/card";
 @import "./checkbox/checkbox";
-@import "./form-label/form-label";
+@import "./label/label";
 @import "./grid/grid";
 @import "./heading/heading";
 @import "./spotlight/spotlight";

packages/css/src/components/form-label/README.md → packages/css/src/components/label/README.md

@@ -1,6 +1,6 @@
 <!-- @license CC0-1.0 -->
 
-# Form Label
+# Label
 
 Describes a form control.
 

packages/css/src/components/label/label.scss

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/hyphenation";
+@import "../../common/text-rendering";
+
+.ams-label {
+  color: var(--ams-label-color);
+  font-family: var(--ams-label-font-family);
+  font-size: var(--ams-label-font-size);
+  font-weight: var(--ams-label-font-weight);
+  line-height: var(--ams-label-line-height);
+
+  @include hyphenation;
+  @include text-rendering;
+}

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

@@ -11,12 +11,17 @@
 }
 
 @mixin reset-input {
+  // Reset native appearance, this causes issues on iOS and Android devices
+  -webkit-appearance: none;
+  appearance: none;
   border: 0;
+  border-radius: 0; // Reset rounded borders on iOS devices
   box-sizing: border-box;
   margin-block: 0;
 }
 
 .ams-search-field__input {
+  background-color: var(--ams-search-field-input-background-color);
   box-shadow: var(--ams-search-field-input-box-shadow);
   color: var(--ams-search-field-input-color);
   font-family: var(--ams-search-field-input-font-family);
@@ -56,6 +61,10 @@
 
 @mixin reset-button {
   border: 0;
+
+  // Reset margins added by Safari on iOS
+  margin-block: 0;
+  margin-inline: 0;
 }
 
 .ams-search-field__button {

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

@@ -11,6 +11,7 @@
 }
 
 .ams-text-area {
+  background-color: var(--ams-text-area-background-color);
   border: 0;
   box-shadow: var(--ams-text-area-box-shadow);
   color: var(--ams-text-area-color);

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

@@ -11,6 +11,7 @@
 }
 
 .ams-text-input {
+  background-color: var(--ams-text-input-background-color);
   border: 0;
   box-shadow: var(--ams-text-input-box-shadow);
   color: var(--ams-text-input-color);

packages/css/src/components/time-input/README.md

@@ -0,0 +1,11 @@
+<!-- @license CC0-1.0 -->
+
+# Time Input
+
+Helps users enter time.
+
+## Visual considerations
+
+This component uses a native time input, which is styled differently in different browsers and operating systems.
+Recreating the native functionality is quite difficult and prone to accessibility errors, which is why we’ve chosen not to do that.
+This does mean that this component does not look identical on all browsers and operating systems.