@utrecht/form-field-css 1.3.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @utrecht/form-field-css
 
+## 1.5.0
+
+### Minor Changes
+
+- 725617a: Add `tokens.mjs` and `tokens.d.mts` files to CSS packages.
+
+## 1.4.0
+
+### Minor Changes
+
+- e497b08: Export CSS string as default export in `dist/index.mjs`.
+
 ## 1.3.0
 
 ### Minor Changes

package/dist/index.css

@@ -1,13 +1,8 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
-/** @deprecated */
 .utrecht-form-field {
   break-inside: avoid;
   font-family: var(--utrecht-document-font-family, inherit);
@@ -32,14 +27,6 @@
   gap: 0 var(--utrecht-checkbox-margin-inline-end, 12px);
   grid-template-areas: "input label" "input description" "input error-message";
   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)));
@@ -53,14 +40,6 @@
   gap: 0 var(--utrecht-radio-button-margin-inline-end, 12px);
   grid-template-areas: "input label" "input description" "input error-message";
   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)));
@@ -77,8 +56,6 @@
 }
 
 .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;

package/dist/index.min.css

@@ -0,0 +1 @@
+.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));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 error-message";grid-template-columns:var(--utrecht-checkbox-size) 100fr}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))*-1)}.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 error-message";grid-template-columns:var(--utrecht-radio-button-size) 100fr}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px))*-1)}.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{grid-area:input;margin-block-end:0;margin-block-start:0;order:5}.utrecht-form-field__label{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:error-message;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}.utrecht-form-field__error-message{grid-area:error-message;order:3}

package/dist/index.mjs

@@ -0,0 +1 @@
+export default ".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));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 error-message\";grid-template-columns:var(--utrecht-checkbox-size) 100fr}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))*-1)}.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 error-message\";grid-template-columns:var(--utrecht-radio-button-size) 100fr}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px))*-1)}.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{grid-area:input;margin-block-end:0;margin-block-start:0;order:5}.utrecht-form-field__label{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:error-message;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}.utrecht-form-field__error-message{grid-area:error-message;order:3}";

package/dist/index.mjs.d.ts

@@ -0,0 +1,2 @@
+declare const css: string;
+export default css;

package/dist/tokens.d.mts

@@ -0,0 +1,4 @@
+
+declare const tokens: any;
+
+export default tokens;

package/dist/tokens.mjs

@@ -0,0 +1,70 @@
+export default {
+  "utrecht": {
+    "form-field": {
+      "margin-block-start": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
+      },
+      "margin-block-end": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
+      },
+      "invalid": {
+        "border-inline-start-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
+        },
+        "border-inline-start-width": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "borderWidth"
+        },
+        "padding-inline-start": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "spacing"
+        }
+      },
+      "label": {
+        "margin-block-end": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        }
+      }
+    }
+  }
+};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0",
+  "version": "1.5.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",
@@ -12,7 +12,7 @@
   ],
   "main": "dist/index.css",
   "devDependencies": {
-    "rollup": "4.18.0"
+    "@utrecht/build-utils-css": "0.0.1"
   },
   "keywords": [
     "nl-design-system"
@@ -26,7 +26,7 @@
     "directory": "components/form-field"
   },
   "scripts": {
-    "build": "rollup -c ../rollup.config.mjs",
+    "build": "build-css-package",
     "clean": "rimraf dist"
   }
 }

package/src/_mixin.scss

@@ -1,6 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
 @mixin reset-p {

package/src/index.scss

@@ -1,6 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
 @import "./mixin";

package/dist/index.js

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

package/src/stories/_email.md

@@ -1,4 +0,0 @@
-<!-- @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

@@ -1,6 +0,0 @@
-<!-- @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

@@ -1,4 +0,0 @@
-<!-- @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

@@ -1,215 +0,0 @@
-{/* @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>

package/src/stories/checkbox.stories.mdx

@@ -1,136 +0,0 @@
-{/* @license CC0-1.0 */}
-
-import { Canvas, Meta, Story } from "@storybook/blocks";
-import { argTypes, defaultArgs, exampleArgs, FormFieldCheckbox } from "../story-template";
-import "../../../checkbox/src/index.scss";
-import "../../../form-label/src/index.scss";
-import "../index.scss";
-
-export
-
-<Meta
-  id="css-form-field--checkbox"
-  title="CSS Component/Form field/with one checkbox"
-  component={FormFieldCheckbox}
-  argTypes={argTypes}
-  args={defaultArgs}
-  parameters={{
-    status: {
-      type: "WORK IN PROGRESS",
-    },
-  }}
-/>
-
-# label
-
-<Canvas>
-  <Story
-    name="label"
-    args={{
-      ...exampleArgs,
-      id: "172cd71b-8854-41ee-bcdc-9c8ac856c5d1",
-      label: "Ik ga akkoord met de algemene voorwaarden",
-      type: "checkbox",
-    }}
-  >
-    {FormFieldCheckbox.bind({})}
-  </Story>
-</Canvas>
-
-# Form field with description
-
-<Canvas>
-  <Story
-    name="description"
-    args={{
-      ...exampleArgs,
-      id: "7cdd4f82-e7eb-4573-bad3-2b520aac504b",
-      label: "Ik ga akkoord met de algemene voorwaarden",
-      description: "U kunt ons echt vertrouwen!",
-      type: "checkbox",
-    }}
-  >
-    {FormFieldCheckbox.bind({})}
-  </Story>
-</Canvas>
-
-## Invalid
-
-<Canvas>
-  <Story
-    name="invalid"
-    args={{
-      ...exampleArgs,
-      id: "6cfb69fc-3a52-4fd8-b8a1-0c2d0dfb11ed",
-      label: "Ik ga akkoord met de algemene voorwaarden",
-      description: "U kunt ons echt vertrouwen!",
-      invalid: true,
-      required: true,
-      invalidDescription: "U moet akkoord gaan met de algemene voorwaarden, anders kunt u niet verder.",
-      type: "checkbox",
-    }}
-  >
-    {FormFieldCheckbox.bind({})}
-  </Story>
-</Canvas>
-
-## Right-to-left script
-
-<Canvas>
-  <Story
-    name="Right-to-left script"
-    decorators={[
-      (Story) => (
-        <div lang="ar" dir="rtl">
-          {Story()}
-        </div>
-      ),
-    ]}
-    args={{
-      ...exampleArgs,
-      id: "2d692d60-e111-4582-a487-385cdbd3f994",
-      label: "أوافق على الشروط",
-      description: "يمكنك حقا أن تثق بنا!",
-      invalid: true,
-      required: true,
-      invalidDescription: "يجب أن توافق على الشروط والأحكام وإلا فلن تتمكن من المتابعة.",
-      type: "checkbox",
-    }}
-  >
-    {FormFieldCheckbox.bind({})}
-  </Story>
-</Canvas>
-
-## Rich text description
-
-<Canvas>
-  <Story
-    name="Rich text description"
-    args={{
-      ...exampleArgs,
-      id: "f23a0d30-29b5-4e82-a6e5-7eb83e5cd47a",
-      description: (
-        <>
-          <p className="utrecht-paragraph">Your new password needs to meet these requirements:</p>
-          <ul className="utrecht-unordered-list">
-            <li>At least 1 character</li>
-            <li>No more than 2 characters</li>
-            <li>Use at least one uppercase letter and one lowercase letter.</li>
-          </ul>
-        </>
-      ),
-      invalidDescription: (
-        <>
-          <p className="utrecht-paragraph">Your new password does not meet these requirements:</p>
-          <ul className="utrecht-unordered-list">
-            <li>Your password is too long.</li>
-            <li>Use at least one uppercase letter.</li>
-          </ul>
-        </>
-      ),
-      type: "checkbox",
-    }}
-  >
-    {FormFieldCheckbox.bind({})}
-  </Story>
-</Canvas>