@utrecht/form-fieldset-css 1.2.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 (18) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +1 -47
  3. package/dist/index.css +2 -11
  4. package/dist/index.min.css +1 -0
  5. package/dist/index.mjs +1 -0
  6. package/dist/index.mjs.d.ts +2 -0
  7. package/docs/anatomy.nl.md +13 -0
  8. package/docs/technology-css.nl.md +5 -0
  9. package/docs/technology-html.nl.md +30 -0
  10. package/docs/wcag.nl.md +6 -0
  11. package/package.json +3 -3
  12. package/src/_mixin.scss +2 -1
  13. package/src/_reset.scss +2 -1
  14. package/src/html/_mixin.scss +2 -1
  15. package/src/html/index.scss +2 -1
  16. package/src/index.scss +2 -1
  17. package/src/story-template.jsx +3 -3
  18. package/dist/index.js +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @utrecht/form-fieldset-css
2
2
 
3
+ ## 1.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - e497b08: Export CSS string as default export in `dist/index.mjs`.
8
+
3
9
  ## 1.2.0
4
10
 
5
11
  ### Minor Changes
package/README.md CHANGED
@@ -2,50 +2,4 @@
2
2
 
3
3
  # Fieldset
4
4
 
5
- ## States
6
-
7
- ### `disabled`
8
-
9
- Een veldengroep waar alle velden `disabled` zijn.
10
-
11
- ### `invalid`
12
-
13
- Een veldengroep die niet valide is. Gebruik deze voor veldengroepen de als geheel gevalideerd worden, bijvoorbeeld een _radio group_ of een _checkbox group_. Gebruik `invalid` niet voor veldengroepen waar één los onderdeel invalide is, bijvoorbeeld: als één van de vragen nog niet beantwoord is.
14
-
15
- ## HTML
16
-
17
- In HTML kun je de `<fieldset>` en `<legend>` elementen gebruiken, die worden automatisch gekoppeld aan radio buttons en checkboxes.
18
-
19
- Voor een radio button group gebruik je `<fieldset role="radiogroup">`, dat maakt het extra duidelijk voor screen reader gebruikers. `<fieldset>` heeft als default `role="group"` en daarom hoef je nooit `<fieldset role="group">` te gebruiken.
20
-
21
- De bijzondere browser default stylesheet voor `<fieldset>` en `<legend>` maken het erg moeilijk om CSS te gebruiken voor deze elementen, maar voor toegankelijkheid is het echter zeker de moeite waarde deze elementen toch te gebruiken. Gebruik de reset CSS voor fieldset en legend om geen default styles te gebruiken.
22
-
23
- Gebruik een extra `<div>` om je `<fieldset>` zodat het mogelijk wordt een `background-color` of `border` in te stellen, door de browser default stylesheet is dat voor `<fieldset>` niet goed mogelijk.
24
-
25
- ### HTML attributen
26
-
27
- Deze attributen moet je kunnen gebruiken in de fieldset component van een framework:
28
-
29
- - `class`
30
- - [`disabled`](https://html.spec.whatwg.org/multipage/form-elements.html#dom-fieldset-disabled)
31
- - `hidden`: om een _conditional fieldset_ te maken moet je het `hidden` attribuut kunnen gebruiken
32
- - `role`: het moet mogelijk zijn `role="radiogroup"` in te stellen
33
- - `aria-describedby`: gebruik bij voorkeur `<legend>`
34
- - `aria-invalid`
35
-
36
- Deze attributen willen mensen soms ook gebruiken:
37
-
38
- - `aria-label`: gebruik bij voorkeur `<legend>`
39
- - `aria-labelledby`: gebruik bij voorkeur `<legend>`
40
- - `aria-disabled`: gebruik bij voorkeur `disabled`, behalve als je _client-side form validation_ gebruikt om `aria-disabled` te maken.
41
- - [`form`](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-fae-form)
42
- - [`name`](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-fe-name)
43
-
44
- ## CSS
45
-
46
- De tokens voor `background-color` en `border` werken niet goed als alleen een `<fieldset>` wordt gebruikt. Voor goed resultaat is een extra `div` nodig. De HTML component heeft daarom geen goede ondersteuning voor `background-color` en `border`.
47
-
48
- ## Relevante WCAG regels
49
-
50
- - [WCAG eis 1.3.5](https://www.w3.org/TR/WCAG21/#identify-input-purpose)
51
- - voor een _radio group_ en _checkbox group_ is fieldset een goede manier het doel van de groep aan te geven
5
+ Groep van gerelateerde formuliervelden.
package/dist/index.css CHANGED
@@ -1,16 +1,8 @@
1
1
  /**
2
2
  * @license EUPL-1.2
3
- * Copyright (c) 2021 Robbert Broersma
3
+ * Copyright (c) 2020-2024 Frameless B.V.
4
+ * Copyright (c) 2021-2024 Gemeente Utrecht
4
5
  */
5
- /**
6
- * @license EUPL-1.2
7
- * Copyright (c) 2021 Robbert Broersma
8
- */
9
- /**
10
- * @license EUPL-1.2
11
- * Copyright (c) 2021 Robbert Broersma
12
- */
13
- /* stylelint-disable-next-line block-no-empty */
14
6
  .utrecht-form-fieldset {
15
7
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
16
8
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
@@ -18,7 +10,6 @@
18
10
 
19
11
  .utrecht-form-fieldset--html-fieldset,
20
12
  .utrecht-form-fieldset__fieldset--html-fieldset {
21
- /* `all: revert` unfortunately has as side-effect that the `hidde` attribute has no effect */
22
13
  all: revert;
23
14
  border: 0;
24
15
  margin-inline-end: 0;
package/dist/index.min.css ADDED
@@ -0,0 +1 @@
1
+ .utrecht-form-fieldset{margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-start, 0))}.utrecht-form-fieldset--html-fieldset,.utrecht-form-fieldset__fieldset--html-fieldset{all:revert;border:0;margin-inline-end:0;margin-inline-start:0;min-inline-size:0;padding-block-end:0;padding-block-start:.01em;padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset__legend--html-legend{display:table;inline-size:100%;padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset--distanced{--utrecht-space-around:1}.utrecht-form-fieldset--section{background-color:var(--utrecht-form-fieldset-section-background-color);color:var(--utrecht-form-fieldset-section-color)}.utrecht-form-fieldset__legend{break-inside:avoid;color:var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit));font-family:var(--utrecht-form-fieldset-legend-font-family,var(--utrecht-document-font-family));font-size:var(--utrecht-form-fieldset-legend-font-size);font-weight:var(--utrecht-form-fieldset-legend-font-weight);line-height:var(--utrecht-form-fieldset-legend-line-height);page-break-after:avoid;page-break-inside:avoid}.utrecht-form-fieldset__legend--disabled{color:var(--utrecht-form-fieldset-legend-disabled-color,var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit)))}.utrecht-form-fieldset__legend--distanced{margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-start, 0))}.utrecht-form-fieldset--invalid{border-inline-start-color:var(--utrecht-form-fieldset-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-fieldset-invalid-border-inline-start-width,var(--utrecht-form-field-invalid-border-inline-start-width));padding-inline-start:var(--utrecht-form-fieldset-invalid-padding-inline-start,var(--utrecht-form-field-invalid-padding-inline-start))}
package/dist/index.mjs ADDED
@@ -0,0 +1 @@
1
+ export default ".utrecht-form-fieldset{margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-start, 0))}.utrecht-form-fieldset--html-fieldset,.utrecht-form-fieldset__fieldset--html-fieldset{all:revert;border:0;margin-inline-end:0;margin-inline-start:0;min-inline-size:0;padding-block-end:0;padding-block-start:.01em;padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset__legend--html-legend{display:table;inline-size:100%;padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset--distanced{--utrecht-space-around:1}.utrecht-form-fieldset--section{background-color:var(--utrecht-form-fieldset-section-background-color);color:var(--utrecht-form-fieldset-section-color)}.utrecht-form-fieldset__legend{break-inside:avoid;color:var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit));font-family:var(--utrecht-form-fieldset-legend-font-family,var(--utrecht-document-font-family));font-size:var(--utrecht-form-fieldset-legend-font-size);font-weight:var(--utrecht-form-fieldset-legend-font-weight);line-height:var(--utrecht-form-fieldset-legend-line-height);page-break-after:avoid;page-break-inside:avoid}.utrecht-form-fieldset__legend--disabled{color:var(--utrecht-form-fieldset-legend-disabled-color,var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit)))}.utrecht-form-fieldset__legend--distanced{margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-start, 0))}.utrecht-form-fieldset--invalid{border-inline-start-color:var(--utrecht-form-fieldset-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-fieldset-invalid-border-inline-start-width,var(--utrecht-form-field-invalid-border-inline-start-width));padding-inline-start:var(--utrecht-form-fieldset-invalid-padding-inline-start,var(--utrecht-form-field-invalid-padding-inline-start))}";
package/dist/index.mjs.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const css: string;
2
+ export default css;
package/docs/anatomy.nl.md ADDED
@@ -0,0 +1,13 @@
1
+ <!-- @license CC0-1.0 -->
2
+
3
+ # Anatomie
4
+
5
+ ## States
6
+
7
+ ### `disabled`
8
+
9
+ Een veldengroep waar alle velden `disabled` zijn.
10
+
11
+ ### `invalid`
12
+
13
+ Een veldengroep die niet valide is. Gebruik deze voor veldengroepen de als geheel gevalideerd worden, bijvoorbeeld een _radio group_ of een _checkbox group_. Gebruik `invalid` niet voor veldengroepen waar één los onderdeel invalide is, bijvoorbeeld: als één van de vragen nog niet beantwoord is.
package/docs/technology-css.nl.md ADDED
@@ -0,0 +1,5 @@
1
+ <!-- @license CC0-1.0 -->
2
+
3
+ # CSS
4
+
5
+ De tokens voor `background-color` en `border` werken niet goed als alleen een `<fieldset>` wordt gebruikt. Voor goed resultaat is een extra `div` nodig. De HTML component heeft daarom geen goede ondersteuning voor `background-color` en `border`.
package/docs/technology-html.nl.md ADDED
@@ -0,0 +1,30 @@
1
+ <!-- @license CC0-1.0 -->
2
+
3
+ # HTML
4
+
5
+ In HTML kun je de `<fieldset>` en `<legend>` elementen gebruiken, die worden automatisch gekoppeld aan radio buttons en checkboxes.
6
+
7
+ Voor een radio button group gebruik je `<fieldset role="radiogroup">`, dat maakt het extra duidelijk voor screen reader gebruikers. `<fieldset>` heeft als default `role="group"` en daarom hoef je nooit `<fieldset role="group">` te gebruiken.
8
+
9
+ De bijzondere browser default stylesheet voor `<fieldset>` en `<legend>` maken het erg moeilijk om CSS te gebruiken voor deze elementen, maar voor toegankelijkheid is het echter zeker de moeite waarde deze elementen toch te gebruiken. Gebruik de reset CSS voor fieldset en legend om geen default styles te gebruiken.
10
+
11
+ Gebruik een extra `<div>` om je `<fieldset>` zodat het mogelijk wordt een `background-color` of `border` in te stellen, door de browser default stylesheet is dat voor `<fieldset>` niet goed mogelijk.
12
+
13
+ ## HTML attributen
14
+
15
+ Deze attributen moet je kunnen gebruiken in de fieldset component van een framework:
16
+
17
+ - `class`
18
+ - [`disabled`](https://html.spec.whatwg.org/multipage/form-elements.html#dom-fieldset-disabled)
19
+ - `hidden`: om een _conditional fieldset_ te maken moet je het `hidden` attribuut kunnen gebruiken
20
+ - `role`: het moet mogelijk zijn `role="radiogroup"` in te stellen
21
+ - `aria-describedby`: gebruik bij voorkeur `<legend>`
22
+ - `aria-invalid`
23
+
24
+ Deze attributen willen mensen soms ook gebruiken:
25
+
26
+ - `aria-label`: gebruik bij voorkeur `<legend>`
27
+ - `aria-labelledby`: gebruik bij voorkeur `<legend>`
28
+ - `aria-disabled`: gebruik bij voorkeur `disabled`, behalve als je _client-side form validation_ gebruikt om `aria-disabled` te maken.
29
+ - [`form`](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-fae-form)
30
+ - [`name`](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-fe-name)
package/docs/wcag.nl.md ADDED
@@ -0,0 +1,6 @@
1
+ <!-- @license CC0-1.0 -->
2
+
3
+ # Relevante WCAG regels
4
+
5
+ - [WCAG eis 1.3.5](https://www.w3.org/TR/WCAG21/#identify-input-purpose)
6
+ - voor een _radio group_ en _checkbox group_ is fieldset een goede manier het doel van de groep aan te geven
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.2.0",
2
+ "version": "1.3.0",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Form fieldset component for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -12,7 +12,7 @@
12
12
  ],
13
13
  "main": "dist/index.css",
14
14
  "devDependencies": {
15
- "rollup": "4.18.0"
15
+ "@utrecht/build-utils-css": "0.0.1"
16
16
  },
17
17
  "keywords": [
18
18
  "nl-design-system"
@@ -26,7 +26,7 @@
26
26
  "directory": "components/form-fieldset"
27
27
  },
28
28
  "scripts": {
29
- "build": "rollup -c ../rollup.config.mjs",
29
+ "build": "build-css-package",
30
30
  "clean": "rimraf dist"
31
31
  }
32
32
  }
package/src/_mixin.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  /**
2
2
  * @license EUPL-1.2
3
- * Copyright (c) 2021 Robbert Broersma
3
+ * Copyright (c) 2020-2024 Frameless B.V.
4
+ * Copyright (c) 2021-2024 Gemeente Utrecht
4
5
  */
5
6
 
6
7
  @import "./reset";
package/src/_reset.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  /**
2
2
  * @license EUPL-1.2
3
- * Copyright (c) 2021 Robbert Broersma
3
+ * Copyright (c) 2020-2024 Frameless B.V.
4
+ * Copyright (c) 2021-2024 Gemeente Utrecht
4
5
  */
5
6
 
6
7
  @mixin reset-fieldset {
package/src/html/_mixin.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  /**
2
2
  * @license EUPL-1.2
3
- * Copyright (c) 2021 Robbert Broersma
3
+ * Copyright (c) 2020-2024 Frameless B.V.
4
+ * Copyright (c) 2021-2024 Gemeente Utrecht
4
5
  */
5
6
 
6
7
  @import "../mixin";
package/src/html/index.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  /**
2
2
  * @license EUPL-1.2
3
- * Copyright (c) 2021 Robbert Broersma
3
+ * Copyright (c) 2020-2024 Frameless B.V.
4
+ * Copyright (c) 2021-2024 Gemeente Utrecht
4
5
  */
5
6
 
6
7
  @import "./mixin";
package/src/index.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  /**
2
2
  * @license EUPL-1.2
3
- * Copyright (c) 2021 Robbert Broersma
3
+ * Copyright (c) 2020-2024 Frameless B.V.
4
+ * Copyright (c) 2021-2024 Gemeente Utrecht
4
5
  */
5
6
 
6
7
  @import "./mixin";
package/src/story-template.jsx CHANGED
@@ -1,7 +1,7 @@
1
- /*
1
+ /**
2
2
  * @license EUPL-1.2
3
- * Copyright (c) 2020-2022 Gemeente Utrecht
4
- * Copyright (c) 2020-2022 Frameless B.V.
3
+ * Copyright (c) 2020-2024 Frameless B.V.
4
+ * Copyright (c) 2021-2024 Gemeente Utrecht
5
5
  */
6
6
 
7
7
  import clsx from 'clsx';
package/dist/index.js DELETED
@@ -1 +0,0 @@
1
- var undefined$1 = undefined;export{undefined$1 as default};