@utrecht/form-label-css 2.0.1 → 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 (5) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/tokens.mjs +27 -54
  3. package/package.json +3 -2
  4. package/src/tokens.json +27 -54
  5. package/src/story-template.jsx +0 -58
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @utrecht/form-label-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.1
4
16
 
5
17
  ### Patch Changes
package/dist/tokens.mjs CHANGED
@@ -3,114 +3,87 @@ export default {
3
3
  "form-label": {
4
4
  "color": {
5
5
  "$extensions": {
6
- "nl.nldesignsystem.css.property": {
7
- "syntax": "<color>",
8
- "inherits": true
9
- },
10
- "nl.nldesignsystem.figma.supports-token": false
6
+ "nl.nldesignsystem.css-property-syntax": "<color>",
7
+ "nl.nldesignsystem.figma-implementation": false
11
8
  },
12
- "type": "color"
9
+ "$type": "color"
13
10
  },
14
11
  "font-weight": {
15
12
  "$extensions": {
16
- "nl.nldesignsystem.css.property": {
17
- "syntax": "<number>",
18
- "inherits": true
19
- },
20
- "nl.nldesignsystem.figma.supports-token": false
13
+ "nl.nldesignsystem.css-property-syntax": "<number>",
14
+ "nl.nldesignsystem.figma-implementation": false
21
15
  },
22
- "type": "fontWeights"
16
+ "$type": "fontWeight"
23
17
  },
24
18
  "font-size": {
25
19
  "$extensions": {
26
- "nl.nldesignsystem.css.property": {
27
- "syntax": "<length>",
28
- "inherits": true
29
- },
30
- "nl.nldesignsystem.figma.supports-token": false
20
+ "nl.nldesignsystem.css-property-syntax": "<length>",
21
+ "nl.nldesignsystem.figma-implementation": false
31
22
  },
32
- "type": "fontSizes"
23
+ "$type": "dimension"
33
24
  },
34
25
  "checkbox": {
35
26
  "color": {
36
27
  "$extensions": {
37
- "nl.nldesignsystem.css.property": {
38
- "syntax": "<color>",
39
- "inherits": true
40
- },
41
- "nl.nldesignsystem.figma.supports-token": false
28
+ "nl.nldesignsystem.css-property-syntax": "<color>",
29
+ "nl.nldesignsystem.figma-implementation": false
42
30
  },
43
- "type": "color"
31
+ "$type": "color"
44
32
  },
45
33
  "font-weight": {
46
34
  "$extensions": {
47
- "nl.nldesignsystem.css.property": {
48
- "syntax": "<number>",
49
- "inherits": true
50
- },
51
- "nl.nldesignsystem.figma.supports-token": false
35
+ "nl.nldesignsystem.css-property-syntax": "<number>",
36
+ "nl.nldesignsystem.figma-implementation": false
52
37
  },
53
- "type": "fontWeights"
38
+ "$type": "fontWeight"
54
39
  }
55
40
  },
56
41
  "checked": {
57
42
  "font-weight": {
58
43
  "$extensions": {
59
- "nl.nldesignsystem.css.property": {
60
- "syntax": "<number>",
61
- "inherits": true
62
- },
44
+ "nl.nldesignsystem.css-property-syntax": "<number>",
63
45
  "nl.nldesignsystem.fallback": [
64
46
  "utrecht.form-label.font-weight"
65
47
  ],
66
- "nl.nldesignsystem.figma.supports-token": false
48
+ "nl.nldesignsystem.figma-implementation": false
67
49
  },
68
- "type": "fontWeights"
50
+ "$type": "fontWeight"
69
51
  }
70
52
  },
71
53
  "disabled": {
72
54
  "color": {
73
55
  "$extensions": {
74
- "nl.nldesignsystem.css.property": {
75
- "syntax": "<color>",
76
- "inherits": true
77
- },
56
+ "nl.nldesignsystem.css-property-syntax": "<color>",
78
57
  "nl.nldesignsystem.fallback": [
79
58
  "utrecht.form-label.color"
80
59
  ],
81
- "nl.nldesignsystem.figma.supports-token": false
60
+ "nl.nldesignsystem.figma-implementation": false
82
61
  },
83
- "type": "color"
62
+ "$type": "color"
84
63
  }
85
64
  },
86
65
  "radio": {
87
66
  "color": {
88
67
  "$extensions": {
89
- "nl.nldesignsystem.css.property": {
90
- "syntax": "<color>",
91
- "inherits": true
92
- },
68
+ "nl.nldesignsystem.css-property-syntax": "<color>",
93
69
  "nl.nldesignsystem.fallback": [
94
70
  "utrecht.form-label.checkbox.color",
95
71
  "utrecht.form-label.color"
96
72
  ],
97
- "nl.nldesignsystem.figma.supports-token": false
73
+ "nl.nldesignsystem.figma-implementation": false
98
74
  },
99
- "type": "color"
75
+ "$type": "color"
100
76
  },
101
77
  "font-weight": {
102
78
  "$extensions": {
103
- "nl.nldesignsystem.css.property": {
104
- "syntax": "<number>",
105
- "inherits": true
106
- },
79
+ "nl.nldesignsystem.css-property-syntax": "<number>",
107
80
  "nl.nldesignsystem.fallback": [
108
81
  "utrecht.form-label.checkbox.font-weight",
109
82
  "utrecht.form-label.font-weight"
110
83
  ],
111
- "nl.nldesignsystem.figma.supports-token": false
84
+ "nl.nldesignsystem.figma-implementation": false
112
85
  },
113
- "type": "fontWeights"
86
+ "$type": "fontWeight"
114
87
  }
115
88
  }
116
89
  }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "2.0.1",
2
+ "version": "3.0.1",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Form label 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/tokens.json CHANGED
@@ -3,104 +3,77 @@
3
3
  "form-label": {
4
4
  "color": {
5
5
  "$extensions": {
6
- "nl.nldesignsystem.css.property": {
7
- "syntax": "<color>",
8
- "inherits": true
9
- },
10
- "nl.nldesignsystem.figma.supports-token": false
6
+ "nl.nldesignsystem.css-property-syntax": "<color>",
7
+ "nl.nldesignsystem.figma-implementation": false
11
8
  },
12
- "type": "color"
9
+ "$type": "color"
13
10
  },
14
11
  "font-weight": {
15
12
  "$extensions": {
16
- "nl.nldesignsystem.css.property": {
17
- "syntax": "<number>",
18
- "inherits": true
19
- },
20
- "nl.nldesignsystem.figma.supports-token": false
13
+ "nl.nldesignsystem.css-property-syntax": "<number>",
14
+ "nl.nldesignsystem.figma-implementation": false
21
15
  },
22
- "type": "fontWeights"
16
+ "$type": "fontWeight"
23
17
  },
24
18
  "font-size": {
25
19
  "$extensions": {
26
- "nl.nldesignsystem.css.property": {
27
- "syntax": "<length>",
28
- "inherits": true
29
- },
30
- "nl.nldesignsystem.figma.supports-token": false
20
+ "nl.nldesignsystem.css-property-syntax": "<length>",
21
+ "nl.nldesignsystem.figma-implementation": false
31
22
  },
32
- "type": "fontSizes"
23
+ "$type": "dimension"
33
24
  },
34
25
  "checkbox": {
35
26
  "color": {
36
27
  "$extensions": {
37
- "nl.nldesignsystem.css.property": {
38
- "syntax": "<color>",
39
- "inherits": true
40
- },
41
- "nl.nldesignsystem.figma.supports-token": false
28
+ "nl.nldesignsystem.css-property-syntax": "<color>",
29
+ "nl.nldesignsystem.figma-implementation": false
42
30
  },
43
- "type": "color"
31
+ "$type": "color"
44
32
  },
45
33
  "font-weight": {
46
34
  "$extensions": {
47
- "nl.nldesignsystem.css.property": {
48
- "syntax": "<number>",
49
- "inherits": true
50
- },
51
- "nl.nldesignsystem.figma.supports-token": false
35
+ "nl.nldesignsystem.css-property-syntax": "<number>",
36
+ "nl.nldesignsystem.figma-implementation": false
52
37
  },
53
- "type": "fontWeights"
38
+ "$type": "fontWeight"
54
39
  }
55
40
  },
56
41
  "checked": {
57
42
  "font-weight": {
58
43
  "$extensions": {
59
- "nl.nldesignsystem.css.property": {
60
- "syntax": "<number>",
61
- "inherits": true
62
- },
44
+ "nl.nldesignsystem.css-property-syntax": "<number>",
63
45
  "nl.nldesignsystem.fallback": ["utrecht.form-label.font-weight"],
64
- "nl.nldesignsystem.figma.supports-token": false
46
+ "nl.nldesignsystem.figma-implementation": false
65
47
  },
66
- "type": "fontWeights"
48
+ "$type": "fontWeight"
67
49
  }
68
50
  },
69
51
  "disabled": {
70
52
  "color": {
71
53
  "$extensions": {
72
- "nl.nldesignsystem.css.property": {
73
- "syntax": "<color>",
74
- "inherits": true
75
- },
54
+ "nl.nldesignsystem.css-property-syntax": "<color>",
76
55
  "nl.nldesignsystem.fallback": ["utrecht.form-label.color"],
77
- "nl.nldesignsystem.figma.supports-token": false
56
+ "nl.nldesignsystem.figma-implementation": false
78
57
  },
79
- "type": "color"
58
+ "$type": "color"
80
59
  }
81
60
  },
82
61
  "radio": {
83
62
  "color": {
84
63
  "$extensions": {
85
- "nl.nldesignsystem.css.property": {
86
- "syntax": "<color>",
87
- "inherits": true
88
- },
64
+ "nl.nldesignsystem.css-property-syntax": "<color>",
89
65
  "nl.nldesignsystem.fallback": ["utrecht.form-label.checkbox.color", "utrecht.form-label.color"],
90
- "nl.nldesignsystem.figma.supports-token": false
66
+ "nl.nldesignsystem.figma-implementation": false
91
67
  },
92
- "type": "color"
68
+ "$type": "color"
93
69
  },
94
70
  "font-weight": {
95
71
  "$extensions": {
96
- "nl.nldesignsystem.css.property": {
97
- "syntax": "<number>",
98
- "inherits": true
99
- },
72
+ "nl.nldesignsystem.css-property-syntax": "<number>",
100
73
  "nl.nldesignsystem.fallback": ["utrecht.form-label.checkbox.font-weight", "utrecht.form-label.font-weight"],
101
- "nl.nldesignsystem.figma.supports-token": false
74
+ "nl.nldesignsystem.figma-implementation": false
102
75
  },
103
- "type": "fontWeights"
76
+ "$type": "fontWeight"
104
77
  }
105
78
  }
106
79
  }
package/src/story-template.jsx DELETED
@@ -1,58 +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 React from 'react';
9
-
10
- export const argTypes = {
11
- textContent: {
12
- description: 'Set the content of the label',
13
- control: 'text',
14
- },
15
- type: {
16
- description: 'Set the type of the form control',
17
- options: ['default', 'checkbox', 'radio'],
18
- control: { type: 'radio' },
19
- },
20
- };
21
-
22
- export const defaultArgs = {
23
- checked: false,
24
- disabled: false,
25
- textContent: '',
26
- type: null,
27
- };
28
-
29
- export const exampleArgs = {
30
- textContent: 'Username',
31
- };
32
-
33
- export const FormLabel = ({
34
- checked = defaultArgs.checked,
35
- disabled = defaultArgs.disabled,
36
- textContent = defaultArgs.textContent,
37
- type = defaultArgs.type,
38
- className,
39
- children,
40
- ...restProps
41
- }) => (
42
- <label
43
- {...restProps}
44
- className={clsx(
45
- 'utrecht-form-label',
46
- type === 'checkbox' && 'utrecht-form-label--checkbox',
47
- checked && 'utrecht-form-label--checked',
48
- disabled && 'utrecht-form-label--disabled',
49
- type === 'radio' && 'utrecht-form-label--radio',
50
- className,
51
- )}
52
- >
53
- {textContent}
54
- {children}
55
- </label>
56
- );
57
-
58
- export default FormLabel;