@utrecht/form-field-css 1.0.0 → 1.1.0

package/dist/index.css

@@ -0,0 +1,110 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-form-field {
+  break-inside: avoid;
+  font-family: var(--utrecht-document-font-family, inherit);
+  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
+  max-inline-size: var(--utrecht-form-field-max-inline-size);
+  page-break-inside: avoid;
+}
+
+.utrecht-form-field--distanced {
+  --utrecht-space-around: 1;
+}
+
+.utrecht-form-field--invalid {
+  border-inline-start-color: var(--utrecht-form-field-invalid-border-inline-start-color);
+  border-inline-start-style: solid;
+  border-inline-start-width: var(--utrecht-form-field-invalid-border-inline-start-width, 0);
+  padding-inline-start: var(--utrecht-form-field-invalid-padding-inline-start);
+}
+
+.utrecht-form-field--checkbox {
+  display: grid;
+  gap: 0 var(--utrecht-checkbox-margin-inline-end, 12px);
+  grid-template-areas: "input label" "input description" "input description-invalid";
+  grid-template-columns: var(--utrecht-checkbox-size) 100fr;
+  /*
+  .utrecht-form-field__label .utrecht-form-field__input {
+    margin-inline-start: calc(
+      -1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))
+    );
+    margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
+  }
+  */
+}
+.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input) {
+  margin-inline-start: calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)));
+}
+.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input {
+  margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
+}
+
+.utrecht-form-field--radio {
+  display: grid;
+  gap: 0 var(--utrecht-radio-button-margin-inline-end, 12px);
+  grid-template-areas: "input label" "input description" "input description-invalid";
+  grid-template-columns: var(--utrecht-radio-button-size) 100fr;
+  /*
+  .utrecht-form-field__label .utrecht-form-field__input {
+    margin-inline-start: calc(
+      -1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))
+    );
+    margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
+  }
+  */
+}
+.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) {
+  margin-inline-start: calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)));
+}
+.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input {
+  margin-inline-end: var(--utrecht-radio-button-margin-inline-end, 12px);
+}
+
+.utrecht-form-field__input {
+  margin-block-end: 0;
+  margin-block-start: 0;
+  grid-area: input;
+  order: 5;
+}
+
+.utrecht-form-field__label {
+  /* Assign the margin-block-end to padding instead, so the clickable area of the label increases
+  and we avoid a small gap between the label and input that cannot be clicked to focus the input. */
+  grid-area: label;
+  margin-block-end: var(--utrecht-form-field-label-margin-block-end);
+  margin-block-start: 0;
+  order: 1;
+}
+
+.utrecht-form-field .utrecht-form-field-description {
+  grid-area: description;
+  margin-block-end: var(--utrecht-form-field-description-margin-block-end);
+  margin-block-start: var(--utrecht-form-field-description-margin-block-start);
+  order: 2;
+}
+
+.utrecht-form-field .utrecht-form-field-description--invalid {
+  grid-area: description-invalid;
+  order: 3;
+}
+
+.utrecht-form-field__description {
+  grid-area: description;
+  margin-block-end: var(--utrecht-form-field-description-margin-block-end);
+  margin-block-start: var(--utrecht-form-field-description-margin-block-start);
+  order: 2;
+}
+
+.utrecht-form-field__description--before {
+  grid-area: description-before;
+  order: 4;
+}

package/dist/index.js

@@ -0,0 +1 @@
+var undefined$1 = undefined;export{undefined$1 as default};

package/package.json

@@ -1,18 +1,25 @@
 {
-  "version": "1.0.0",
+  "version": "1.1.0",
   "author": "Community for NL Design System",
   "description": "Form field component for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
   "name": "@utrecht/form-field-css",
   "files": [
-    "dist/"
+    "dist/",
+    "src/"
   ],
-  "devDependencies": {},
+  "main": "dist/index.css",
+  "devDependencies": {
+    "rollup": "3.29.4"
+  },
   "keywords": [
     "nl-design-system"
   ],
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {}
+  "scripts": {
+    "build": "rollup -c ../rollup.config.mjs",
+    "clean": "rimraf dist"
+  }
 }

package/src/_mixin.scss

@@ -0,0 +1,146 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@mixin reset-p {
+  margin-block-end: 0;
+  margin-block-start: 0;
+}
+
+@mixin utrecht-form-field {
+  break-inside: avoid;
+  font-family: var(--utrecht-document-font-family, inherit);
+  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
+  max-inline-size: var(--utrecht-form-field-max-inline-size);
+  page-break-inside: avoid;
+}
+
+@mixin utrecht-form-field--distanced {
+  --utrecht-space-around: 1;
+}
+
+/* stylelint-disable-next-line block-no-empty */
+@mixin utrecht-form-field--text {
+}
+
+@mixin utrecht-form-field--text-flex {
+  --utrecht-space-around: 0;
+
+  display: flex;
+  flex-direction: column;
+}
+
+@mixin utrecht-form-field--text-grid {
+  --utrecht-space-around: 0;
+
+  display: grid;
+  grid-template-areas: "label" "description" "description-before" "description-invalid" "input" "description-after";
+}
+
+@mixin utrecht-form-field--option {
+  display: grid;
+  font-family: var(--utrecht-document-font-family, inherit);
+  gap: 0 var(--utrecht-space-inline-sm);
+  grid-template-areas: "input label" ". description";
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto;
+  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
+  max-inline-size: var(--utrecht-form-field-max-inline-size);
+  page-break-inside: avoid;
+}
+
+@mixin utrecht-form-field--invalid {
+  border-inline-start-color: var(--utrecht-form-field-invalid-border-inline-start-color);
+  border-inline-start-style: solid;
+  border-inline-start-width: var(--utrecht-form-field-invalid-border-inline-start-width, 0);
+  padding-inline-start: var(--utrecht-form-field-invalid-padding-inline-start);
+}
+
+@mixin utrecht-form-field__input {
+  @include reset-p;
+
+  grid-area: input;
+  order: 5;
+}
+
+@mixin utrecht-form-field__label {
+  /* Assign the margin-block-end to padding instead, so the clickable area of the label increases
+  and we avoid a small gap between the label and input that cannot be clicked to focus the input. */
+  grid-area: label;
+  margin-block-end: var(--utrecht-form-field-label-margin-block-end);
+
+  // padding-block-end: var(--utrecht-form-field-label-margin-block-end);
+  margin-block-start: 0;
+  order: 1;
+}
+
+@mixin utrecht-form-field__description {
+  grid-area: description;
+  margin-block-end: var(--utrecht-form-field-description-margin-block-end);
+  margin-block-start: var(--utrecht-form-field-description-margin-block-start);
+  order: 2;
+}
+
+@mixin utrecht-form-field__description--invalid {
+  grid-area: description-invalid;
+  order: 3;
+}
+
+@mixin utrecht-form-field__description--after {
+  grid-area: description-after;
+  order: 6;
+}
+
+@mixin utrecht-form-field__description--before {
+  grid-area: description-before;
+  order: 4;
+}
+
+@mixin utrecht-form-field--checkbox {
+  display: grid;
+  gap: 0 var(--utrecht-checkbox-margin-inline-end, 12px);
+  grid-template-areas: "input label" "input description" "input description-invalid";
+  grid-template-columns: var(--utrecht-checkbox-size) 100fr;
+
+  /*
+  .utrecht-form-field__label .utrecht-form-field__input {
+    margin-inline-start: calc(
+      -1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))
+    );
+    margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
+  }
+  */
+  .utrecht-form-field__label:has(.utrecht-form-field__input) {
+    margin-inline-start: calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)));
+  }
+  .utrecht-form-field__label .utrecht-form-field__input {
+    margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
+  }
+}
+
+@mixin utrecht-form-field--radio {
+  display: grid;
+  gap: 0 var(--utrecht-radio-button-margin-inline-end, 12px);
+  grid-template-areas: "input label" "input description" "input description-invalid";
+  grid-template-columns: var(--utrecht-radio-button-size) 100fr;
+
+  /*
+  .utrecht-form-field__label .utrecht-form-field__input {
+    margin-inline-start: calc(
+      -1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))
+    );
+    margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
+  }
+  */
+  .utrecht-form-field__label:has(.utrecht-form-field__input) {
+    margin-inline-start: calc(
+      -1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px))
+    );
+  }
+  .utrecht-form-field__label .utrecht-form-field__input {
+    margin-inline-end: var(--utrecht-radio-button-margin-inline-end, 12px);
+  }
+}

package/src/index.scss

@@ -0,0 +1,54 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./mixin";
+
+.utrecht-form-field {
+  @include utrecht-form-field;
+}
+
+.utrecht-form-field--distanced {
+  @include utrecht-form-field--distanced;
+}
+
+.utrecht-form-field--invalid {
+  @include utrecht-form-field--invalid;
+}
+
+.utrecht-form-field--text {
+  @include utrecht-form-field--text;
+}
+
+.utrecht-form-field--checkbox {
+  @include utrecht-form-field--checkbox;
+}
+
+.utrecht-form-field--radio {
+  @include utrecht-form-field--radio;
+}
+
+.utrecht-form-field__input {
+  @include utrecht-form-field__input;
+}
+
+.utrecht-form-field__label {
+  @include utrecht-form-field__label;
+}
+
+.utrecht-form-field .utrecht-form-field-description {
+  @include utrecht-form-field__description;
+}
+
+.utrecht-form-field .utrecht-form-field-description--invalid {
+  @include utrecht-form-field__description--invalid;
+}
+
+.utrecht-form-field__description {
+  @include utrecht-form-field__description;
+}
+
+.utrecht-form-field__description--before {
+  @include utrecht-form-field__description--before;
+}

package/src/stories/_email.md

@@ -0,0 +1,4 @@
+<!-- @license CC0-1.0 -->
+<!-- markdownlint-disable MD041 -->
+
+Als je vraagt om het e-mailadres van een persoon, leg dan uit waar het voor gebruikt zal worden.

package/src/stories/_new-password.md

@@ -0,0 +1,6 @@
+<!-- @license CC0-1.0 -->
+<!-- markdownlint-disable MD041 -->
+
+Gebruik voor een nieuw wachtwoord `autocomplete="new-password"`.
+
+Gebruik voor een wachtwoord geen `maxlength` attribuut in HTML omdat het problemen veroorzaakt als het niet duidelijk dat een gekozen wachtwoord te lang is. Gebruik een melding wanneer het ingevulde wachtwoord te lang is. Als een gebruiker een wachtwoord plakt of een _password manager_ een wachtwoord invult invult dat langer is dan `maxlength` dan kan het laatste gedeelte ongemerkt ontbreken. Ongemerkt wordt dan een korter wachtwoord opgeslagen, daarna kan de gebruiker niet inloggen met het gekozen wachtwoord.

package/src/stories/_tel.md

@@ -0,0 +1,4 @@
+<!-- @license CC0-1.0 -->
+<!-- markdownlint-disable MD041 -->
+
+Als je vraagt om het telefoonnumer van een persoon, leg dan uit waar het voor gebruikt zal worden. Niet alle gebruikers kunnen de telefoon beantwoorden, voor deze gebruikers is e-mail vaak een goed alternatief.

package/src/stories/checkbox-group.stories.mdx

@@ -0,0 +1,215 @@
+{/* @license CC0-1.0 */}
+
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import { argTypes, defaultArgs, exampleArgs, FormFieldCheckboxGroup } from "../story-template";
+import "../../../checkbox/src/index.scss";
+import "../../../form-label/src/index.scss";
+import "../index.scss";
+
+<Meta
+  id="css-form-field--checkbox-group"
+  title="CSS Component/Form field/with checkbox group"
+  component={FormFieldCheckboxGroup}
+  argTypes={argTypes}
+  args={defaultArgs}
+  parameters={{
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+  }}
+/>
+
+# Form field with checkbox group
+
+## with only a label
+
+<Canvas>
+  <Story
+    name="label"
+    args={{
+      ...exampleArgs,
+      groupId: "0128c307-ead5-40d4-9a99-c91aa6fa4a99",
+      groupLabel: "Hoe wil je dat wij contact opnemen?",
+      options: [
+        {
+          id: "a374296c-669e-45d0-a26d-e62e959958dd",
+          name: "phone",
+          value: "true",
+          label: "Telefoon",
+          checked: true,
+        },
+        {
+          id: "714205e8-d33b-40d8-9721-e2ea71c62a20",
+          name: "email",
+          value: "true",
+          label: "E-mail",
+        },
+        {
+          id: "67fa8ea7-6b75-4049-ae4f-ebaa816e4c35",
+          name: "mail",
+          value: "true",
+          label: "Brief",
+        },
+      ],
+    }}
+  >
+    {FormFieldCheckboxGroup.bind({})}
+  </Story>
+</Canvas>
+
+## with an checkbox group description
+
+<Canvas>
+  <Story
+    name="group description"
+    args={{
+      ...exampleArgs,
+      groupId: "d7218515-bf54-45c1-ba57-a72af5d7fd42",
+      groupDescription: "Kies één of meerdere opties.",
+      groupLabel: "Hoe wil je dat wij contact opnemen?",
+      options: [
+        {
+          id: "2a5524f5-6ee8-4be1-90a1-87d0d619d2ee",
+          name: "phone",
+          value: "true",
+          label: "Telefoon",
+          checked: true,
+        },
+        {
+          id: "1fe84cc2-16fc-4e9b-9498-856583652181",
+          name: "email",
+          value: "true",
+          label: "E-mail",
+        },
+        {
+          id: "96493bfe-2caa-4cb3-80ce-a4a46fc69c10",
+          name: "mail",
+          value: "true",
+          label: "Brief",
+        },
+      ],
+    }}
+  >
+    {FormFieldCheckboxGroup.bind({})}
+  </Story>
+</Canvas>
+
+## with checkbox option descriptions
+
+<Canvas>
+  <Story
+    name="option description"
+    args={{
+      ...exampleArgs,
+      groupId: "764bacdd-94b4-4774-be40-89e9e5f82c19",
+      groupLabel: "Hoe wil je dat wij contact opnemen?",
+      options: [
+        {
+          id: "28a9109b-eb9c-4119-abaa-02d09e8f359b",
+          name: "phone",
+          value: "true",
+          label: "Telefoon",
+          description: "We bellen je op (085) 555 0000",
+          checked: true,
+        },
+        {
+          id: "3bdeeba2-199f-44e9-9184-ed8dbfb2fc37",
+          name: "email",
+          description: "Web mailen je op info@example.com",
+          value: "true",
+          label: "E-mail",
+        },
+        {
+          id: "2bb862c1-114e-4529-975e-1776df23f055",
+          name: "mail",
+          value: "true",
+          label: "Brief",
+          description: "Je ontvangt een brief op Stadhuisplein 1, Amsterdam",
+        },
+      ],
+    }}
+  >
+    {FormFieldCheckboxGroup.bind({})}
+  </Story>
+</Canvas>
+
+## with checkbox invalid option descriptions
+
+<Canvas>
+  <Story
+    name="option invalid"
+    args={{
+      ...exampleArgs,
+      groupId: "73a3f2c1-00e7-48b8-9ebb-1f51b6550f42",
+      groupLabel: "Hoe wil je dat wij contact opnemen?",
+      options: [
+        {
+          checked: true,
+          id: "c0972ecc-6eef-4bf9-80ab-c535fc0229b5",
+          invalid: true,
+          invalidDescription: "Wij hebben geen telefoonnumer van je. Vul eerst je profiel aan.",
+          label: "Telefoon",
+          name: "phone",
+          value: "true",
+        },
+        {
+          checked: true,
+          id: "714d33fd-4cc4-4113-9887-4c38e77a6532",
+          invalid: true,
+          invalidDescription: "Wij hebben geen e-mailadres van je. Vul eerst je profiel aan.",
+          label: "E-mail",
+          name: "email",
+          value: "true",
+        },
+        {
+          checked: true,
+          id: "10ee620a-af7e-4c67-9f6d-5519b3c45c6d",
+          invalid: true,
+          invalidDescription: "Wij hebben geen postadres van je. Vul eerst je profiel aan.",
+          label: "Brief",
+          name: "mail",
+          value: "true",
+        },
+      ],
+    }}
+  >
+    {FormFieldCheckboxGroup.bind({})}
+  </Story>
+</Canvas>
+
+## with checkbox invalid grou description
+
+<Canvas>
+  <Story
+    name="group invalid"
+    args={{
+      ...exampleArgs,
+      groupId: "707b7bd8-d476-472c-ac9d-3c1a4caac4c2",
+      groupLabel: "Hoe wil je dat wij contact opnemen?",
+      groupInvalid: true,
+      groupInvalidDescription: "Fout: je hebt geen keuze gemaakt. Kies één of meerdere opties.",
+      options: [
+        {
+          id: "80d14d58-bc99-4c53-824e-36473d6506c7",
+          label: "Telefoon",
+          name: "phone",
+          value: "true",
+        },
+        {
+          id: "0b4aea63-ec5b-4259-b008-ba8eaf8b03e3",
+          label: "E-mail",
+          name: "email",
+          value: "true",
+        },
+        {
+          id: "9360080d-3a48-444d-bc2c-1cd1a40940f9",
+          label: "Brief",
+          name: "mail",
+          value: "true",
+        },
+      ],
+    }}
+  >
+    {FormFieldCheckboxGroup.bind({})}
+  </Story>
+</Canvas>