@utrecht/form-field-css 1.1.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/README.md +1 -39
  3. package/dist/index.css +9 -4
  4. package/docs/anatomy.nl.md +30 -0
  5. package/docs/technology-html.nl.md +7 -0
  6. package/docs/wcag.nl.md +8 -0
  7. package/package.json +10 -3
  8. package/src/_mixin.scss +10 -6
  9. package/src/index.scss +5 -1
  10. package/src/stories/example.stories.mdx +9 -9
  11. package/src/tokens.json +28 -26
package/CHANGELOG.md ADDED
@@ -0,0 +1,27 @@
1
+ # @utrecht/form-field-css
2
+
3
+ ## 1.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 9ba132c: Add `utrecht-form-field__error-message` class name and mixin.
8
+
9
+ Deprecate the `utrecht-form-field__description--invalid` mixin.
10
+
11
+ ## 1.2.0
12
+
13
+ ### Minor Changes
14
+
15
+ - 1cd6556: Added metadata for form-field tokens.
16
+
17
+ ## 1.1.0
18
+
19
+ ### Minor Changes
20
+
21
+ - 62f1157: Add SCSS files to `src/` directory of CSS component packages.
22
+
23
+ ## 1.0.0
24
+
25
+ ### Major Changes
26
+
27
+ - 856d996: Switch from alpha releases to semantic versioning.
package/README.md CHANGED
@@ -2,42 +2,4 @@
2
2
 
3
3
  # Form field
4
4
 
5
- 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.
6
-
7
- De volgende componenten zijn vaak onderdeel van een _form field_:
8
-
9
- - _form label_ component
10
- - _form field description_ component met extra beschrijving
11
- - _form field description_ component met een validatiemelding
12
- - een form control component zoals bijvoorbeeld:
13
- - _textbox_ component
14
- - _textarea_ component
15
- - _checkbox_ component
16
- - _radio button_ component
17
- - _form select_ component
18
- - etcetera
19
- - _form field description_ component met een foutmelding
20
- - _form field description_ component status van component
21
-
22
- ## HTML
23
-
24
- 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.
25
-
26
- 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>`.
27
-
28
- ## Gebruikte termen
29
-
30
- - `form` komt van `<form>` in HTML en `role="form"` in WAI-ARIA.
31
- - `field` komt van `<fieldset>` in HTML.
32
- - `invalid` komt van `aria-invalid` in WAI-ARIA.
33
- - `radio` komt van `<input type="radio">` in HTML.
34
- - `checkbox` komt van `<input type="checkbox">` in HTML.
35
- - `label` komt van `<label>` in HTML en `aria-labelledby` in WAI-ARIA.
36
- - `description` komt van `aria-describedby` in WAI-ARIA.
37
-
38
- ## Relevante WCAG regels
39
-
40
- - [WCAG eis 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): de tekst van het label moet duidelijk zijn
41
- - [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.
42
- - 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.
43
- - 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.
5
+ Een invoerveld en bijbehorende onderdelen die helpen bij het invullen.
package/dist/index.css CHANGED
@@ -7,12 +7,12 @@
7
7
  * Copyright (c) 2021 Robbert Broersma
8
8
  */
9
9
  /* stylelint-disable-next-line block-no-empty */
10
+ /** @deprecated */
10
11
  .utrecht-form-field {
11
12
  break-inside: avoid;
12
13
  font-family: var(--utrecht-document-font-family, inherit);
13
14
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
14
15
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
15
- max-inline-size: var(--utrecht-form-field-max-inline-size);
16
16
  page-break-inside: avoid;
17
17
  }
18
18
 
@@ -30,7 +30,7 @@
30
30
  .utrecht-form-field--checkbox {
31
31
  display: grid;
32
32
  gap: 0 var(--utrecht-checkbox-margin-inline-end, 12px);
33
- grid-template-areas: "input label" "input description" "input description-invalid";
33
+ grid-template-areas: "input label" "input description" "input error-message";
34
34
  grid-template-columns: var(--utrecht-checkbox-size) 100fr;
35
35
  /*
36
36
  .utrecht-form-field__label .utrecht-form-field__input {
@@ -51,7 +51,7 @@
51
51
  .utrecht-form-field--radio {
52
52
  display: grid;
53
53
  gap: 0 var(--utrecht-radio-button-margin-inline-end, 12px);
54
- grid-template-areas: "input label" "input description" "input description-invalid";
54
+ grid-template-areas: "input label" "input description" "input error-message";
55
55
  grid-template-columns: var(--utrecht-radio-button-size) 100fr;
56
56
  /*
57
57
  .utrecht-form-field__label .utrecht-form-field__input {
@@ -93,7 +93,7 @@
93
93
  }
94
94
 
95
95
  .utrecht-form-field .utrecht-form-field-description--invalid {
96
- grid-area: description-invalid;
96
+ grid-area: error-message;
97
97
  order: 3;
98
98
  }
99
99
 
@@ -107,4 +107,9 @@
107
107
  .utrecht-form-field__description--before {
108
108
  grid-area: description-before;
109
109
  order: 4;
110
+ }
111
+
112
+ .utrecht-form-field__error-message {
113
+ grid-area: error-message;
114
+ order: 3;
110
115
  }
package/docs/anatomy.nl.md ADDED
@@ -0,0 +1,30 @@
1
+ <!-- @license CC0-1.0 -->
2
+
3
+ # Anatomy
4
+
5
+ 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.
6
+
7
+ De volgende componenten zijn vaak onderdeel van een _form field_:
8
+
9
+ - _form label_ component
10
+ - _form field description_ component met extra beschrijving
11
+ - _form field description_ component met een validatiemelding
12
+ - een form control component zoals bijvoorbeeld:
13
+ - _textbox_ component
14
+ - _textarea_ component
15
+ - _checkbox_ component
16
+ - _radio button_ component
17
+ - _form select_ component
18
+ - etcetera
19
+ - _form field description_ component met een foutmelding
20
+ - _form field description_ component status van component
21
+
22
+ ## Gebruikte termen
23
+
24
+ - `form` komt van `<form>` in HTML en `role="form"` in WAI-ARIA.
25
+ - `field` komt van `<fieldset>` in HTML.
26
+ - `invalid` komt van `aria-invalid` in WAI-ARIA.
27
+ - `radio` komt van `<input type="radio">` in HTML.
28
+ - `checkbox` komt van `<input type="checkbox">` in HTML.
29
+ - `label` komt van `<label>` in HTML en `aria-labelledby` in WAI-ARIA.
30
+ - `description` komt van `aria-describedby` in WAI-ARIA.
package/docs/technology-html.nl.md ADDED
@@ -0,0 +1,7 @@
1
+ <!-- @license CC0-1.0 -->
2
+
3
+ # HTML
4
+
5
+ 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.
6
+
7
+ 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 ADDED
@@ -0,0 +1,8 @@
1
+ <!-- @license CC0-1.0 -->
2
+
3
+ # Relevante WCAG regels
4
+
5
+ - [WCAG eis 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): de tekst van het label moet duidelijk zijn
6
+ - [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.
7
+ - 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.
8
+ - 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 CHANGED
@@ -1,16 +1,18 @@
1
1
  {
2
- "version": "1.1.0",
2
+ "version": "1.3.0",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Form field component for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
6
6
  "name": "@utrecht/form-field-css",
7
7
  "files": [
8
8
  "dist/",
9
- "src/"
9
+ "docs/",
10
+ "src/",
11
+ "*.md"
10
12
  ],
11
13
  "main": "dist/index.css",
12
14
  "devDependencies": {
13
- "rollup": "3.29.4"
15
+ "rollup": "4.18.0"
14
16
  },
15
17
  "keywords": [
16
18
  "nl-design-system"
@@ -18,6 +20,11 @@
18
20
  "publishConfig": {
19
21
  "access": "public"
20
22
  },
23
+ "repository": {
24
+ "type": "git+ssh",
25
+ "url": "git@github.com:nl-design-system/utrecht.git",
26
+ "directory": "components/form-field"
27
+ },
21
28
  "scripts": {
22
29
  "build": "rollup -c ../rollup.config.mjs",
23
30
  "clean": "rimraf dist"
package/src/_mixin.scss CHANGED
@@ -13,7 +13,6 @@
13
13
  font-family: var(--utrecht-document-font-family, inherit);
14
14
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
15
15
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
16
- max-inline-size: var(--utrecht-form-field-max-inline-size);
17
16
  page-break-inside: avoid;
18
17
  }
19
18
 
@@ -36,7 +35,7 @@
36
35
  --utrecht-space-around: 0;
37
36
 
38
37
  display: grid;
39
- grid-template-areas: "label" "description" "description-before" "description-invalid" "input" "description-after";
38
+ grid-template-areas: "label" "description" "description-before" "error-message" "input" "description-after";
40
39
  }
41
40
 
42
41
  @mixin utrecht-form-field--option {
@@ -84,11 +83,16 @@
84
83
  order: 2;
85
84
  }
86
85
 
87
- @mixin utrecht-form-field__description--invalid {
88
- grid-area: description-invalid;
86
+ @mixin utrecht-form-field__error-message {
87
+ grid-area: error-message;
89
88
  order: 3;
90
89
  }
91
90
 
91
+ /** @deprecated */
92
+ @mixin utrecht-form-field__description--invalid {
93
+ @include utrecht-form-field__error-message;
94
+ }
95
+
92
96
  @mixin utrecht-form-field__description--after {
93
97
  grid-area: description-after;
94
98
  order: 6;
@@ -102,7 +106,7 @@
102
106
  @mixin utrecht-form-field--checkbox {
103
107
  display: grid;
104
108
  gap: 0 var(--utrecht-checkbox-margin-inline-end, 12px);
105
- grid-template-areas: "input label" "input description" "input description-invalid";
109
+ grid-template-areas: "input label" "input description" "input error-message";
106
110
  grid-template-columns: var(--utrecht-checkbox-size) 100fr;
107
111
 
108
112
  /*
@@ -124,7 +128,7 @@
124
128
  @mixin utrecht-form-field--radio {
125
129
  display: grid;
126
130
  gap: 0 var(--utrecht-radio-button-margin-inline-end, 12px);
127
- grid-template-areas: "input label" "input description" "input description-invalid";
131
+ grid-template-areas: "input label" "input description" "input error-message";
128
132
  grid-template-columns: var(--utrecht-radio-button-size) 100fr;
129
133
 
130
134
  /*
package/src/index.scss CHANGED
@@ -42,7 +42,7 @@
42
42
  }
43
43
 
44
44
  .utrecht-form-field .utrecht-form-field-description--invalid {
45
- @include utrecht-form-field__description--invalid;
45
+ @include utrecht-form-field__error-message;
46
46
  }
47
47
 
48
48
  .utrecht-form-field__description {
@@ -52,3 +52,7 @@
52
52
  .utrecht-form-field__description--before {
53
53
  @include utrecht-form-field__description--before;
54
54
  }
55
+
56
+ .utrecht-form-field__error-message {
57
+ @include utrecht-form-field__error-message;
58
+ }
package/src/stories/example.stories.mdx CHANGED
@@ -1,6 +1,6 @@
1
1
  {/* @license CC0-1.0 */}
2
2
 
3
- import { Canvas, Description, Meta, Story } from "@storybook/blocks";
3
+ import { Canvas, Markdown, Meta, Story } from "@storybook/blocks";
4
4
  import emailDocs from "./_email.md";
5
5
  import newPasswordDocs from "./_new-password.md";
6
6
  import telDocs from "./_tel.md";
@@ -29,7 +29,7 @@ import { argTypes, defaultArgs, FormFieldExample } from "../story-template";
29
29
 
30
30
  ## Naam
31
31
 
32
- <Description>{naamDocs}</Description>
32
+ <Markdown>{naamDocs}</Markdown>
33
33
 
34
34
  <Canvas>
35
35
  <Story
@@ -55,7 +55,7 @@ import { argTypes, defaultArgs, FormFieldExample } from "../story-template";
55
55
 
56
56
  ## Voornaam
57
57
 
58
- <Description>{voornaamDocs}</Description>
58
+ <Markdown>{voornaamDocs}</Markdown>
59
59
 
60
60
  <Canvas>
61
61
  <Story
@@ -104,7 +104,7 @@ import { argTypes, defaultArgs, FormFieldExample } from "../story-template";
104
104
 
105
105
  ## Achternaam
106
106
 
107
- <Description>{achternaamDocs}</Description>
107
+ <Markdown>{achternaamDocs}</Markdown>
108
108
 
109
109
  <Canvas>
110
110
  <Story
@@ -130,7 +130,7 @@ import { argTypes, defaultArgs, FormFieldExample } from "../story-template";
130
130
 
131
131
  ## Voorvoegsel
132
132
 
133
- <Description>{voorvoegselDocs}</Description>
133
+ <Markdown>{voorvoegselDocs}</Markdown>
134
134
 
135
135
  <Canvas>
136
136
  <Story
@@ -156,7 +156,7 @@ import { argTypes, defaultArgs, FormFieldExample } from "../story-template";
156
156
 
157
157
  ## Postcode
158
158
 
159
- <Description>{postcodeDocs}</Description>
159
+ <Markdown>{postcodeDocs}</Markdown>
160
160
 
161
161
  <Canvas>
162
162
  <Story
@@ -221,7 +221,7 @@ import { argTypes, defaultArgs, FormFieldExample } from "../story-template";
221
221
 
222
222
  ## E-mail
223
223
 
224
- <Description>{emailDocs}</Description>
224
+ <Markdown>{emailDocs}</Markdown>
225
225
 
226
226
  <Canvas>
227
227
  <Story
@@ -246,7 +246,7 @@ import { argTypes, defaultArgs, FormFieldExample } from "../story-template";
246
246
 
247
247
  ## Telefoonnummer
248
248
 
249
- <Description>{telDocs}</Description>
249
+ <Markdown>{telDocs}</Markdown>
250
250
 
251
251
  <Canvas>
252
252
  <Story
@@ -270,7 +270,7 @@ import { argTypes, defaultArgs, FormFieldExample } from "../story-template";
270
270
 
271
271
  ## Nieuw wachtwoord
272
272
 
273
- <Description>{newPasswordDocs}</Description>
273
+ <Markdown>{newPasswordDocs}</Markdown>
274
274
 
275
275
  <Canvas>
276
276
  <Story
package/src/tokens.json CHANGED
@@ -6,51 +6,51 @@
6
6
  "nl.nldesignsystem.css.property": {
7
7
  "syntax": "<length>",
8
8
  "inherits": true
9
- }
10
- }
9
+ },
10
+ "nl.nldesignsystem.figma.supports-token": false
11
+ },
12
+ "type": "spacing"
11
13
  },
12
14
  "margin-block-end": {
13
15
  "$extensions": {
14
16
  "nl.nldesignsystem.css.property": {
15
17
  "syntax": "<length>",
16
18
  "inherits": true
17
- }
18
- }
19
- },
20
- "max-inline-size": {
21
- "$extensions": {
22
- "nl.nldesignsystem.css.property": {
23
- "syntax": "<length>",
24
- "inherits": true
25
- }
26
- }
19
+ },
20
+ "nl.nldesignsystem.figma.supports-token": false
21
+ },
22
+ "type": "spacing"
27
23
  },
28
24
  "invalid": {
29
25
  "border-inline-start-color": {
30
- "color": {
31
- "$extensions": {
32
- "nl.nldesignsystem.css.property": {
33
- "syntax": "<color>",
34
- "inherits": true
35
- }
36
- }
37
- }
26
+ "$extensions": {
27
+ "nl.nldesignsystem.css.property": {
28
+ "syntax": "<color>",
29
+ "inherits": true
30
+ },
31
+ "nl.nldesignsystem.figma.supports-token": true
32
+ },
33
+ "type": "color"
38
34
  },
39
35
  "border-inline-start-width": {
40
36
  "$extensions": {
41
37
  "nl.nldesignsystem.css.property": {
42
38
  "syntax": "<length>",
43
39
  "inherits": true
44
- }
45
- }
40
+ },
41
+ "nl.nldesignsystem.figma.supports-token": true
42
+ },
43
+ "type": "borderWidth"
46
44
  },
47
45
  "padding-inline-start": {
48
46
  "$extensions": {
49
47
  "nl.nldesignsystem.css.property": {
50
48
  "syntax": "<length>",
51
49
  "inherits": true
52
- }
53
- }
50
+ },
51
+ "nl.nldesignsystem.figma.supports-token": true
52
+ },
53
+ "type": "spacing"
54
54
  }
55
55
  },
56
56
  "label": {
@@ -59,8 +59,10 @@
59
59
  "nl.nldesignsystem.css.property": {
60
60
  "syntax": "<length>",
61
61
  "inherits": true
62
- }
63
- }
62
+ },
63
+ "nl.nldesignsystem.figma.supports-token": false
64
+ },
65
+ "type": "spacing"
64
66
  }
65
67
  }
66
68
  }