@utrecht/form-field-css 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @utrecht/form-field-css
 
+## 1.3.0
+
+### Minor Changes
+
+- 9ba132c: Add `utrecht-form-field__error-message` class name and mixin.
+
+  Deprecate the `utrecht-form-field__description--invalid` mixin.
+
 ## 1.2.0
 
 ### Minor Changes

package/README.md

@@ -2,42 +2,4 @@
 
 # Form field
 
-Gebruik het _form field_ component om een alle onderdelen van een formulierveld in te verzamelen: het label, de _form control_, eventueel een extra beschrijving of de status en eventueel een validatiemelding of foutmelding.
-
-De volgende componenten zijn vaak onderdeel van een _form field_:
-
-- _form label_ component
-- _form field description_ component met extra beschrijving
-- _form field description_ component met een validatiemelding
-- een form control component zoals bijvoorbeeld:
-  - _textbox_ component
-  - _textarea_ component
-  - _checkbox_ component
-  - _radio button_ component
-  - _form select_ component
-  - etcetera
-- _form field description_ component met een foutmelding
-- _form field description_ component status van component
-
-## HTML
-
-Gebruik een element `<div>` element voor formuliervelden met één _form control_. Een formulierveld moet meerdere `<p>` elementen kunnen bevatten, gebruik daarom geen `<p>` element voor de form field. Je moet geen _landmark role_ gebruiken voor een formulierveld (dus geen `<section>`) element.
-
-Voor formuliervelden met meerdere _form controls_ mag je een `<fieldset>` element gebruiken, bijvoorbeeld voor: jaar, maand en dag. Voor CSS is het handig om dan nog steeds een `<div>` om de fieldset heen te hebben: `<div><fieldset>...</fieldset></div>`.
-
-## Gebruikte termen
-
-- `form` komt van `<form>` in HTML en `role="form"` in WAI-ARIA.
-- `field` komt van `<fieldset>` in HTML.
-- `invalid` komt van `aria-invalid` in WAI-ARIA.
-- `radio` komt van `<input type="radio">` in HTML.
-- `checkbox` komt van `<input type="checkbox">` in HTML.
-- `label` komt van `<label>` in HTML en `aria-labelledby` in WAI-ARIA.
-- `description` komt van `aria-describedby` in WAI-ARIA.
-
-## Relevante WCAG regels
-
-- [WCAG eis 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): de tekst van het label moet duidelijk zijn
-- [WCAG eis 3.3.9](https://www.w3.org/TR/WCAG22/#redundant-entry): gebruik niet een formulierveld voor informatie die de gebruiker eerder al heeft ingevuld.
-  - Vraag gebruikers niet twee keer achter elkaar identieke gegevens in te vullen, bijvoorbeeld om typfouten te herkennen en daarmee fouten te voorkomen. Bied liever een mogelijkheid aan om de gegevens te controleren als laatste stap.
-  - Vul bestaande gegevens in als standaardwaarde wanneer je de gegevens al hebt maar je graag zeker wilt weken of de oude gegevens nog juist zijn.
+Een invoerveld en bijbehorende onderdelen die helpen bij het invullen.

package/dist/index.css

@@ -7,6 +7,7 @@
  * 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);
@@ -29,7 +30,7 @@
 .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-areas: "input label" "input description" "input error-message";
   grid-template-columns: var(--utrecht-checkbox-size) 100fr;
   /*
   .utrecht-form-field__label .utrecht-form-field__input {
@@ -50,7 +51,7 @@
 .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-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 {
@@ -92,7 +93,7 @@
 }
 
 .utrecht-form-field .utrecht-form-field-description--invalid {
-  grid-area: description-invalid;
+  grid-area: error-message;
   order: 3;
 }
 
@@ -106,4 +107,9 @@
 .utrecht-form-field__description--before {
   grid-area: description-before;
   order: 4;
+}
+
+.utrecht-form-field__error-message {
+  grid-area: error-message;
+  order: 3;
 }

package/docs/anatomy.nl.md

@@ -0,0 +1,30 @@
+<!-- @license CC0-1.0 -->
+
+# Anatomy
+
+Gebruik het _form field_ component om een alle onderdelen van een formulierveld in te verzamelen: het label, de _form control_, eventueel een extra beschrijving of de status en eventueel een validatiemelding of foutmelding.
+
+De volgende componenten zijn vaak onderdeel van een _form field_:
+
+- _form label_ component
+- _form field description_ component met extra beschrijving
+- _form field description_ component met een validatiemelding
+- een form control component zoals bijvoorbeeld:
+  - _textbox_ component
+  - _textarea_ component
+  - _checkbox_ component
+  - _radio button_ component
+  - _form select_ component
+  - etcetera
+- _form field description_ component met een foutmelding
+- _form field description_ component status van component
+
+## Gebruikte termen
+
+- `form` komt van `<form>` in HTML en `role="form"` in WAI-ARIA.
+- `field` komt van `<fieldset>` in HTML.
+- `invalid` komt van `aria-invalid` in WAI-ARIA.
+- `radio` komt van `<input type="radio">` in HTML.
+- `checkbox` komt van `<input type="checkbox">` in HTML.
+- `label` komt van `<label>` in HTML en `aria-labelledby` in WAI-ARIA.
+- `description` komt van `aria-describedby` in WAI-ARIA.

package/docs/technology-html.nl.md

@@ -0,0 +1,7 @@
+<!-- @license CC0-1.0 -->
+
+# HTML
+
+Gebruik een element `<div>` element voor formuliervelden met één _form control_. Een formulierveld moet meerdere `<p>` elementen kunnen bevatten, gebruik daarom geen `<p>` element voor de form field. Je moet geen _landmark role_ gebruiken voor een formulierveld (dus geen `<section>`) element.
+
+Voor formuliervelden met meerdere _form controls_ mag je een `<fieldset>` element gebruiken, bijvoorbeeld voor: jaar, maand en dag. Voor CSS is het handig om dan nog steeds een `<div>` om de fieldset heen te hebben: `<div><fieldset>...</fieldset></div>`.

package/docs/wcag.nl.md

@@ -0,0 +1,8 @@
+<!-- @license CC0-1.0 -->
+
+# Relevante WCAG regels
+
+- [WCAG eis 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): de tekst van het label moet duidelijk zijn
+- [WCAG eis 3.3.9](https://www.w3.org/TR/WCAG22/#redundant-entry): gebruik niet een formulierveld voor informatie die de gebruiker eerder al heeft ingevuld.
+  - Vraag gebruikers niet twee keer achter elkaar identieke gegevens in te vullen, bijvoorbeeld om typfouten te herkennen en daarmee fouten te voorkomen. Bied liever een mogelijkheid aan om de gegevens te controleren als laatste stap.
+  - Vul bestaande gegevens in als standaardwaarde wanneer je de gegevens al hebt maar je graag zeker wilt weken of de oude gegevens nog juist zijn.

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.0",
+  "version": "1.3.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",

package/src/_mixin.scss

@@ -35,7 +35,7 @@
   --utrecht-space-around: 0;
 
   display: grid;
-  grid-template-areas: "label" "description" "description-before" "description-invalid" "input" "description-after";
+  grid-template-areas: "label" "description" "description-before" "error-message" "input" "description-after";
 }
 
 @mixin utrecht-form-field--option {
@@ -83,11 +83,16 @@
   order: 2;
 }
 
-@mixin utrecht-form-field__description--invalid {
-  grid-area: description-invalid;
+@mixin utrecht-form-field__error-message {
+  grid-area: error-message;
   order: 3;
 }
 
+/** @deprecated */
+@mixin utrecht-form-field__description--invalid {
+  @include utrecht-form-field__error-message;
+}
+
 @mixin utrecht-form-field__description--after {
   grid-area: description-after;
   order: 6;
@@ -101,7 +106,7 @@
 @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-areas: "input label" "input description" "input error-message";
   grid-template-columns: var(--utrecht-checkbox-size) 100fr;
 
   /*
@@ -123,7 +128,7 @@
 @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-areas: "input label" "input description" "input error-message";
   grid-template-columns: var(--utrecht-radio-button-size) 100fr;
 
   /*

package/src/index.scss

@@ -42,7 +42,7 @@
 }
 
 .utrecht-form-field .utrecht-form-field-description--invalid {
-  @include utrecht-form-field__description--invalid;
+  @include utrecht-form-field__error-message;
 }
 
 .utrecht-form-field__description {
@@ -52,3 +52,7 @@
 .utrecht-form-field__description--before {
   @include utrecht-form-field__description--before;
 }
+
+.utrecht-form-field__error-message {
+  @include utrecht-form-field__error-message;
+}