@utrecht/form-fieldset-css 2.0.2 → 3.0.1

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 (12) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/html/index.css +1 -1
  3. package/dist/html/index.min.css +1 -1
  4. package/dist/html/index.mjs +1 -1
  5. package/dist/index.css +1 -1
  6. package/dist/index.min.css +1 -1
  7. package/dist/index.mjs +1 -1
  8. package/dist/tokens.mjs +47 -94
  9. package/package.json +3 -2
  10. package/src/_reset.scss +1 -1
  11. package/src/tokens.json +47 -94
  12. package/src/story-template.jsx +0 -140
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @utrecht/form-fieldset-css
2
2
 
3
+ ## 3.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 0f759fc: Ensure package is published with provenance
8
+
9
+ ## 3.0.0
10
+
11
+ ### Major Changes
12
+
13
+ - eabbf23: Publish `tokens.json` in DTCG format: `$value` instead of `value`, standard `$type`, etcetera.
14
+
3
15
  ## 2.0.2
4
16
 
5
17
  ### Patch Changes
package/dist/html/index.css CHANGED
@@ -7,7 +7,7 @@ fieldset {
7
7
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
8
8
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
9
9
  all: revert;
10
- border: 0;
10
+ border-width: 0;
11
11
  margin-inline-end: 0;
12
12
  margin-inline-start: 0;
13
13
  min-inline-size: 0;
package/dist/html/index.min.css CHANGED
@@ -1 +1 @@
1
- fieldset{all:revert;border:0;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));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-space-around:1}fieldset[hidden]{display:none}legend{break-after:avoid-page;break-inside:avoid-page;color:var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit));display:table;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);inline-size:100%;line-height:var(--utrecht-form-fieldset-legend-line-height);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));padding-inline-end:0;padding-inline-start:0}legend[hidden]{display:none}fieldset:disabled>legend{color:var(--utrecht-form-fieldset-legend-disabled-color,var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit)))}
1
+ fieldset{all:revert;border-width:0;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));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-space-around:1}fieldset[hidden]{display:none}legend{break-after:avoid-page;break-inside:avoid-page;color:var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit));display:table;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);inline-size:100%;line-height:var(--utrecht-form-fieldset-legend-line-height);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));padding-inline-end:0;padding-inline-start:0}legend[hidden]{display:none}fieldset:disabled>legend{color:var(--utrecht-form-fieldset-legend-disabled-color,var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit)))}
package/dist/html/index.mjs CHANGED
@@ -1 +1 @@
1
- export default "fieldset{all:revert;border:0;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));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-space-around:1}fieldset[hidden]{display:none}legend{break-after:avoid-page;break-inside:avoid-page;color:var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit));display:table;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);inline-size:100%;line-height:var(--utrecht-form-fieldset-legend-line-height);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));padding-inline-end:0;padding-inline-start:0}legend[hidden]{display:none}fieldset:disabled>legend{color:var(--utrecht-form-fieldset-legend-disabled-color,var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit)))}";
1
+ export default "fieldset{all:revert;border-width:0;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));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-space-around:1}fieldset[hidden]{display:none}legend{break-after:avoid-page;break-inside:avoid-page;color:var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit));display:table;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);inline-size:100%;line-height:var(--utrecht-form-fieldset-legend-line-height);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));padding-inline-end:0;padding-inline-start:0}legend[hidden]{display:none}fieldset:disabled>legend{color:var(--utrecht-form-fieldset-legend-disabled-color,var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit)))}";
package/dist/index.css CHANGED
@@ -11,7 +11,7 @@
11
11
  .utrecht-form-fieldset--html-fieldset,
12
12
  .utrecht-form-fieldset__fieldset--html-fieldset {
13
13
  all: revert;
14
- border: 0;
14
+ border-width: 0;
15
15
  margin-inline-end: 0;
16
16
  margin-inline-start: 0;
17
17
  min-inline-size: 0;
package/dist/index.min.css CHANGED
@@ -1 +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-after:avoid-page;break-inside:avoid-page;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)}.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))}
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-width: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-after:avoid-page;break-inside:avoid-page;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)}.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 CHANGED
@@ -1 +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-after:avoid-page;break-inside:avoid-page;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)}.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))}";
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-width: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-after:avoid-page;break-inside:avoid-page;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)}.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/tokens.mjs CHANGED
@@ -3,161 +3,114 @@ export default {
3
3
  "form-fieldset": {
4
4
  "margin-block-end": {
5
5
  "$extensions": {
6
- "nl.nldesignsystem.css.property": {
7
- "syntax": "<length>",
8
- "inherits": true
9
- },
10
- "nl.nldesignsystem.figma.supports-token": false
6
+ "nl.nldesignsystem.css-property-syntax": "<length>",
7
+ "nl.nldesignsystem.figma-implementation": false
11
8
  },
12
- "type": "spacing"
9
+ "$type": "dimension"
13
10
  },
14
11
  "margin-block-start": {
15
12
  "$extensions": {
16
- "nl.nldesignsystem.css.property": {
17
- "syntax": "<length>",
18
- "inherits": true
19
- },
20
- "nl.nldesignsystem.figma.supports-token": false
13
+ "nl.nldesignsystem.css-property-syntax": "<length>",
14
+ "nl.nldesignsystem.figma-implementation": false
21
15
  },
22
- "type": "spacing"
16
+ "$type": "dimension"
23
17
  },
24
18
  "invalid": {
25
19
  "border-inline-start-color": {
26
- "color": {
27
- "$extensions": {
28
- "nl.nldesignsystem.css.property": {
29
- "syntax": "<color>",
30
- "inherits": true
31
- },
32
- "nl.nldesignsystem.figma.supports-token": false
33
- },
34
- "type": "color"
35
- }
20
+ "$extensions": {
21
+ "nl.nldesignsystem.css-property-syntax": "<color>",
22
+ "nl.nldesignsystem.figma-implementation": false
23
+ },
24
+ "$type": "color"
36
25
  },
37
26
  "border-inline-start-width": {
38
27
  "$extensions": {
39
- "nl.nldesignsystem.css.property": {
40
- "syntax": "<length>",
41
- "inherits": true
42
- },
43
- "nl.nldesignsystem.figma.supports-token": false
28
+ "nl.nldesignsystem.css-property-syntax": "<length>",
29
+ "nl.nldesignsystem.figma-implementation": false
44
30
  },
45
- "type": "borderWidth"
31
+ "$type": "dimension"
46
32
  },
47
33
  "padding-inline-start": {
48
34
  "$extensions": {
49
- "nl.nldesignsystem.css.property": {
50
- "syntax": "<length>",
51
- "inherits": true
52
- },
53
- "nl.nldesignsystem.figma.supports-token": false
35
+ "nl.nldesignsystem.css-property-syntax": "<length>",
36
+ "nl.nldesignsystem.figma-implementation": false
54
37
  },
55
- "type": "spacing"
38
+ "$type": "dimension"
56
39
  }
57
40
  },
58
41
  "section": {
59
42
  "background-color": {
60
43
  "$extensions": {
61
- "nl.nldesignsystem.css.property": {
62
- "syntax": "<color>",
63
- "inherits": true
64
- },
65
- "nl.nldesignsystem.figma.supports-token": false
44
+ "nl.nldesignsystem.css-property-syntax": "<color>",
45
+ "nl.nldesignsystem.figma-implementation": false
66
46
  },
67
- "type": "color"
47
+ "$type": "color"
68
48
  },
69
49
  "color": {
70
50
  "$extensions": {
71
- "nl.nldesignsystem.css.property": {
72
- "syntax": "<color>",
73
- "inherits": true
74
- },
75
- "nl.nldesignsystem.figma.supports-token": false
51
+ "nl.nldesignsystem.css-property-syntax": "<color>",
52
+ "nl.nldesignsystem.figma-implementation": false
76
53
  },
77
- "type": "color"
54
+ "$type": "color"
78
55
  }
79
56
  },
80
57
  "legend": {
81
58
  "color": {
82
59
  "$extensions": {
83
- "nl.nldesignsystem.css.property": {
84
- "syntax": "<color>",
85
- "inherits": true
86
- },
87
- "nl.nldesignsystem.figma.supports-token": false
60
+ "nl.nldesignsystem.css-property-syntax": "<color>",
61
+ "nl.nldesignsystem.figma-implementation": false
88
62
  },
89
- "type": "color"
63
+ "$type": "color"
90
64
  },
91
65
  "font-family": {
92
66
  "$extensions": {
93
- "nl.nldesignsystem.css.property": {
94
- "syntax": "*",
95
- "inherits": true
96
- },
97
- "nl.nldesignsystem.figma.supports-token": false
67
+ "nl.nldesignsystem.css-property-syntax": "*",
68
+ "nl.nldesignsystem.figma-implementation": false
98
69
  },
99
- "type": "fontFamilies"
70
+ "$type": "fontFamily"
100
71
  },
101
72
  "font-size": {
102
73
  "$extensions": {
103
- "nl.nldesignsystem.css.property": {
104
- "syntax": "<length>",
105
- "inherits": true
106
- },
107
- "nl.nldesignsystem.figma.supports-token": false
74
+ "nl.nldesignsystem.css-property-syntax": "<length>",
75
+ "nl.nldesignsystem.figma-implementation": false
108
76
  },
109
- "type": "fontSizes"
77
+ "$type": "dimension"
110
78
  },
111
79
  "font-weight": {
112
80
  "$extensions": {
113
- "nl.nldesignsystem.css.property": {
114
- "syntax": "<number>",
115
- "inherits": true
116
- },
117
- "nl.nldesignsystem.figma.supports-token": false
81
+ "nl.nldesignsystem.css-property-syntax": "<number>",
82
+ "nl.nldesignsystem.figma-implementation": false
118
83
  },
119
- "type": "fontWeights"
84
+ "$type": "fontWeight"
120
85
  },
121
86
  "line-height": {
122
87
  "$extensions": {
123
- "nl.nldesignsystem.css.property": {
124
- "syntax": "<length> | <number>",
125
- "inherits": true
126
- },
127
- "nl.nldesignsystem.figma.supports-token": false
88
+ "nl.nldesignsystem.css-property-syntax": "<length> | <number>",
89
+ "nl.nldesignsystem.figma-implementation": false
128
90
  },
129
- "type": "lineHeights"
91
+ "$type": "dimension"
130
92
  },
131
93
  "margin-block-end": {
132
94
  "$extensions": {
133
- "nl.nldesignsystem.css.property": {
134
- "syntax": "<length>",
135
- "inherits": true
136
- },
137
- "nl.nldesignsystem.figma.supports-token": false
95
+ "nl.nldesignsystem.css-property-syntax": "<length>",
96
+ "nl.nldesignsystem.figma-implementation": false
138
97
  },
139
- "type": "spacing"
98
+ "$type": "dimension"
140
99
  },
141
100
  "margin-block-start": {
142
101
  "$extensions": {
143
- "nl.nldesignsystem.css.property": {
144
- "syntax": "<length>",
145
- "inherits": true
146
- },
147
- "nl.nldesignsystem.figma.supports-token": false
102
+ "nl.nldesignsystem.css-property-syntax": "<length>",
103
+ "nl.nldesignsystem.figma-implementation": false
148
104
  },
149
- "type": "spacing"
105
+ "$type": "dimension"
150
106
  },
151
107
  "disabled": {
152
108
  "color": {
153
109
  "$extensions": {
154
- "nl.nldesignsystem.css.property": {
155
- "syntax": "<color>",
156
- "inherits": true
157
- },
158
- "nl.nldesignsystem.figma.supports-token": false
110
+ "nl.nldesignsystem.css-property-syntax": "<color>",
111
+ "nl.nldesignsystem.figma-implementation": false
159
112
  },
160
- "type": "color"
113
+ "$type": "color"
161
114
  }
162
115
  }
163
116
  }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "2.0.2",
2
+ "version": "3.0.1",
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",
@@ -18,7 +18,8 @@
18
18
  "nl-design-system"
19
19
  ],
20
20
  "publishConfig": {
21
- "access": "public"
21
+ "access": "public",
22
+ "provenance": true
22
23
  },
23
24
  "repository": {
24
25
  "type": "git+ssh",
package/src/_reset.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  @mixin reset-fieldset {
8
8
  /* `all: revert` unfortunately has as side-effect that the `hidde` attribute has no effect */
9
9
  all: revert;
10
- border: 0;
10
+ border-width: 0;
11
11
  margin-inline-end: 0;
12
12
  margin-inline-start: 0;
13
13
  min-inline-size: 0;
package/src/tokens.json CHANGED
@@ -3,161 +3,114 @@
3
3
  "form-fieldset": {
4
4
  "margin-block-end": {
5
5
  "$extensions": {
6
- "nl.nldesignsystem.css.property": {
7
- "syntax": "<length>",
8
- "inherits": true
9
- },
10
- "nl.nldesignsystem.figma.supports-token": false
6
+ "nl.nldesignsystem.css-property-syntax": "<length>",
7
+ "nl.nldesignsystem.figma-implementation": false
11
8
  },
12
- "type": "spacing"
9
+ "$type": "dimension"
13
10
  },
14
11
  "margin-block-start": {
15
12
  "$extensions": {
16
- "nl.nldesignsystem.css.property": {
17
- "syntax": "<length>",
18
- "inherits": true
19
- },
20
- "nl.nldesignsystem.figma.supports-token": false
13
+ "nl.nldesignsystem.css-property-syntax": "<length>",
14
+ "nl.nldesignsystem.figma-implementation": false
21
15
  },
22
- "type": "spacing"
16
+ "$type": "dimension"
23
17
  },
24
18
  "invalid": {
25
19
  "border-inline-start-color": {
26
- "color": {
27
- "$extensions": {
28
- "nl.nldesignsystem.css.property": {
29
- "syntax": "<color>",
30
- "inherits": true
31
- },
32
- "nl.nldesignsystem.figma.supports-token": false
33
- },
34
- "type": "color"
35
- }
20
+ "$extensions": {
21
+ "nl.nldesignsystem.css-property-syntax": "<color>",
22
+ "nl.nldesignsystem.figma-implementation": false
23
+ },
24
+ "$type": "color"
36
25
  },
37
26
  "border-inline-start-width": {
38
27
  "$extensions": {
39
- "nl.nldesignsystem.css.property": {
40
- "syntax": "<length>",
41
- "inherits": true
42
- },
43
- "nl.nldesignsystem.figma.supports-token": false
28
+ "nl.nldesignsystem.css-property-syntax": "<length>",
29
+ "nl.nldesignsystem.figma-implementation": false
44
30
  },
45
- "type": "borderWidth"
31
+ "$type": "dimension"
46
32
  },
47
33
  "padding-inline-start": {
48
34
  "$extensions": {
49
- "nl.nldesignsystem.css.property": {
50
- "syntax": "<length>",
51
- "inherits": true
52
- },
53
- "nl.nldesignsystem.figma.supports-token": false
35
+ "nl.nldesignsystem.css-property-syntax": "<length>",
36
+ "nl.nldesignsystem.figma-implementation": false
54
37
  },
55
- "type": "spacing"
38
+ "$type": "dimension"
56
39
  }
57
40
  },
58
41
  "section": {
59
42
  "background-color": {
60
43
  "$extensions": {
61
- "nl.nldesignsystem.css.property": {
62
- "syntax": "<color>",
63
- "inherits": true
64
- },
65
- "nl.nldesignsystem.figma.supports-token": false
44
+ "nl.nldesignsystem.css-property-syntax": "<color>",
45
+ "nl.nldesignsystem.figma-implementation": false
66
46
  },
67
- "type": "color"
47
+ "$type": "color"
68
48
  },
69
49
  "color": {
70
50
  "$extensions": {
71
- "nl.nldesignsystem.css.property": {
72
- "syntax": "<color>",
73
- "inherits": true
74
- },
75
- "nl.nldesignsystem.figma.supports-token": false
51
+ "nl.nldesignsystem.css-property-syntax": "<color>",
52
+ "nl.nldesignsystem.figma-implementation": false
76
53
  },
77
- "type": "color"
54
+ "$type": "color"
78
55
  }
79
56
  },
80
57
  "legend": {
81
58
  "color": {
82
59
  "$extensions": {
83
- "nl.nldesignsystem.css.property": {
84
- "syntax": "<color>",
85
- "inherits": true
86
- },
87
- "nl.nldesignsystem.figma.supports-token": false
60
+ "nl.nldesignsystem.css-property-syntax": "<color>",
61
+ "nl.nldesignsystem.figma-implementation": false
88
62
  },
89
- "type": "color"
63
+ "$type": "color"
90
64
  },
91
65
  "font-family": {
92
66
  "$extensions": {
93
- "nl.nldesignsystem.css.property": {
94
- "syntax": "*",
95
- "inherits": true
96
- },
97
- "nl.nldesignsystem.figma.supports-token": false
67
+ "nl.nldesignsystem.css-property-syntax": "*",
68
+ "nl.nldesignsystem.figma-implementation": false
98
69
  },
99
- "type": "fontFamilies"
70
+ "$type": "fontFamily"
100
71
  },
101
72
  "font-size": {
102
73
  "$extensions": {
103
- "nl.nldesignsystem.css.property": {
104
- "syntax": "<length>",
105
- "inherits": true
106
- },
107
- "nl.nldesignsystem.figma.supports-token": false
74
+ "nl.nldesignsystem.css-property-syntax": "<length>",
75
+ "nl.nldesignsystem.figma-implementation": false
108
76
  },
109
- "type": "fontSizes"
77
+ "$type": "dimension"
110
78
  },
111
79
  "font-weight": {
112
80
  "$extensions": {
113
- "nl.nldesignsystem.css.property": {
114
- "syntax": "<number>",
115
- "inherits": true
116
- },
117
- "nl.nldesignsystem.figma.supports-token": false
81
+ "nl.nldesignsystem.css-property-syntax": "<number>",
82
+ "nl.nldesignsystem.figma-implementation": false
118
83
  },
119
- "type": "fontWeights"
84
+ "$type": "fontWeight"
120
85
  },
121
86
  "line-height": {
122
87
  "$extensions": {
123
- "nl.nldesignsystem.css.property": {
124
- "syntax": "<length> | <number>",
125
- "inherits": true
126
- },
127
- "nl.nldesignsystem.figma.supports-token": false
88
+ "nl.nldesignsystem.css-property-syntax": "<length> | <number>",
89
+ "nl.nldesignsystem.figma-implementation": false
128
90
  },
129
- "type": "lineHeights"
91
+ "$type": "dimension"
130
92
  },
131
93
  "margin-block-end": {
132
94
  "$extensions": {
133
- "nl.nldesignsystem.css.property": {
134
- "syntax": "<length>",
135
- "inherits": true
136
- },
137
- "nl.nldesignsystem.figma.supports-token": false
95
+ "nl.nldesignsystem.css-property-syntax": "<length>",
96
+ "nl.nldesignsystem.figma-implementation": false
138
97
  },
139
- "type": "spacing"
98
+ "$type": "dimension"
140
99
  },
141
100
  "margin-block-start": {
142
101
  "$extensions": {
143
- "nl.nldesignsystem.css.property": {
144
- "syntax": "<length>",
145
- "inherits": true
146
- },
147
- "nl.nldesignsystem.figma.supports-token": false
102
+ "nl.nldesignsystem.css-property-syntax": "<length>",
103
+ "nl.nldesignsystem.figma-implementation": false
148
104
  },
149
- "type": "spacing"
105
+ "$type": "dimension"
150
106
  },
151
107
  "disabled": {
152
108
  "color": {
153
109
  "$extensions": {
154
- "nl.nldesignsystem.css.property": {
155
- "syntax": "<color>",
156
- "inherits": true
157
- },
158
- "nl.nldesignsystem.figma.supports-token": false
110
+ "nl.nldesignsystem.css-property-syntax": "<color>",
111
+ "nl.nldesignsystem.figma-implementation": false
159
112
  },
160
- "type": "color"
113
+ "$type": "color"
161
114
  }
162
115
  }
163
116
  }
package/src/story-template.jsx DELETED
@@ -1,140 +0,0 @@
1
- /**
2
- * @license EUPL-1.2
3
- * Copyright (c) 2020-2024 Frameless B.V.
4
- * Copyright (c) 2021-2024 Gemeente Utrecht
5
- */
6
-
7
- import clsx from 'clsx';
8
- import parse from 'html-react-parser';
9
- import React from 'react';
10
-
11
- export const argTypes = {
12
- disabled: {
13
- description: 'Disabled',
14
- control: 'boolean',
15
- },
16
- div: {
17
- description: 'Use div elements instead of semantic HTML',
18
- type: 'boolean',
19
- },
20
- innerHTML: {
21
- description: 'Set the content of the fieldset',
22
- control: 'text',
23
- },
24
- invalid: {
25
- description: 'Invalid',
26
- control: 'boolean',
27
- },
28
- legend: {
29
- description: 'Set the content of the legend',
30
- control: 'text',
31
- },
32
- role: {
33
- control: { type: 'select' },
34
- options: ['', 'group', 'radiogroup'],
35
- },
36
- section: {
37
- description: 'Section appearance',
38
- type: 'boolean',
39
- },
40
- };
41
-
42
- export const defaultArgs = {
43
- div: false,
44
- disabled: false,
45
- innerHTML: '',
46
- invalid: false,
47
- legend: '',
48
- role: '',
49
- section: false,
50
- };
51
-
52
- export const exampleArgs = {
53
- disabled: false,
54
- id: '4f8af453-db3f-4261-b103-5086dcd01b98',
55
- innerHTML: '<p>Fieldset body</p>',
56
- legend: 'Fieldset legend',
57
- };
58
-
59
- export const FormFieldsetLegend = ({ children, disabled = false, div = defaultArgs.div, id }) =>
60
- div ? (
61
- <div
62
- className={clsx('utrecht-form-fieldset__legend', {
63
- 'utrecht-form-fieldset__legend--disabled': disabled,
64
- })}
65
- id={id}
66
- >
67
- {children}
68
- </div>
69
- ) : (
70
- <legend
71
- className={clsx('utrecht-form-fieldset__legend', 'utrecht-form-fieldset__legend--html-legend', {
72
- 'utrecht-form-fieldset__legend--disabled': disabled,
73
- })}
74
- >
75
- {children}
76
- </legend>
77
- );
78
-
79
- export const FormFieldset = ({
80
- className,
81
- children,
82
- disabled = false,
83
- div = defaultArgs.div,
84
- id,
85
- innerHTML = defaultArgs.innerHTML,
86
- invalid = defaultArgs.invalid,
87
- legend = defaultArgs.legend,
88
- role = defaultArgs.role,
89
- section = defaultArgs.section,
90
- ...restProps
91
- }) => {
92
- const labelId = id && `${id}-legend`;
93
- const content = (
94
- <>
95
- {legend && (
96
- <FormFieldsetLegend div={div} id={labelId}>
97
- {legend}
98
- </FormFieldsetLegend>
99
- )}
100
- {children}
101
- {parse(innerHTML)}
102
- </>
103
- );
104
- return div ? (
105
- <div
106
- className={clsx('utrecht-form-fieldset', {
107
- 'utrecht-form-fieldset--invalid': invalid,
108
- 'utrecht-form-fieldset--section': section,
109
- className,
110
- })}
111
- aria-disabled={disabled ? 'true' : undefined}
112
- aria-invalid={invalid ? 'true' : undefined}
113
- role={role || 'group'}
114
- aria-labelledby={labelId}
115
- {...restProps}
116
- >
117
- {content}
118
- </div>
119
- ) : (
120
- <div
121
- className={clsx('utrecht-form-fieldset', {
122
- 'utrecht-form-fieldset--invalid': invalid,
123
- 'utrecht-form-fieldset--section': section,
124
- className,
125
- })}
126
- >
127
- <fieldset
128
- className={clsx('utrecht-form-fieldset__fieldset', 'utrecht-form-fieldset__fieldset--html-fieldset')}
129
- aria-invalid={invalid ? 'true' : undefined}
130
- disabled={disabled}
131
- role={role || undefined}
132
- {...restProps}
133
- >
134
- {content}
135
- </fieldset>
136
- </div>
137
- );
138
- };
139
-
140
- export default FormFieldset;