@utrecht/form-field-description-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 +34 -64
  3. package/package.json +3 -2
  4. package/src/tokens.json +30 -60
  5. package/src/story-template.jsx +0 -63
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @utrecht/form-field-description-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,84 @@ export default {
3
3
  "form-field-description": {
4
4
  "color": {
5
5
  "$extensions": {
6
- "nl.nldesignsystem.css.property": {
7
- "syntax": "<color>",
8
- "inherits": true
9
- },
10
- "nl.nldesignsystem.figma.supports-token": true
6
+ "nl.nldesignsystem.css-property-syntax": "<color>",
7
+ "nl.nldesignsystem.figma-implementation": true
11
8
  },
12
- "type": "color"
9
+ "$type": "color"
13
10
  },
14
11
  "font-family": {
15
12
  "$extensions": {
16
- "nl.nldesignsystem.css.property": {
17
- "syntax": "*",
18
- "inherits": true
19
- },
20
- "nl.nldesignsystem.figma.supports-token": true
13
+ "nl.nldesignsystem.css-property-syntax": "*",
14
+ "nl.nldesignsystem.figma-implementation": true
21
15
  },
22
- "type": "fontFamilies"
16
+ "$type": "fontFamily"
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": true
20
+ "nl.nldesignsystem.css-property-syntax": "<length>",
21
+ "nl.nldesignsystem.figma-implementation": true
31
22
  },
32
- "type": "fontSizes"
23
+ "$type": "dimension"
33
24
  },
34
25
  "font-style": {
35
26
  "$extensions": {
36
- "nl.nldesignsystem.css.property": {
37
- "syntax": [
38
- "inherit",
39
- "italic",
40
- "normal"
41
- ],
42
- "inherits": true
43
- },
44
- "nl.nldesignsystem.figma.supports-token": false
27
+ "nl.nldesignsystem.css-property-syntax": [
28
+ "inherit",
29
+ "italic",
30
+ "normal"
31
+ ],
32
+ "nl.nldesignsystem.figma-implementation": false
45
33
  },
46
- "type": "other"
34
+ "$type": "other"
47
35
  },
48
36
  "line-height": {
49
37
  "$extensions": {
50
- "nl.nldesignsystem.css.property": {
51
- "syntax": "<length>",
52
- "inherits": true
53
- },
54
- "nl.nldesignsystem.figma.supports-token": true
38
+ "nl.nldesignsystem.css-property-syntax": "<length>",
39
+ "nl.nldesignsystem.figma-implementation": true
55
40
  },
56
- "type": "lineHeights"
41
+ "$type": "dimension"
57
42
  },
58
43
  "margin-block-start": {
59
44
  "$extensions": {
60
- "nl.nldesignsystem.css.property": {
61
- "syntax": "<length>",
62
- "inherits": true
63
- },
64
- "nl.nldesignsystem.figma.supports-token": false
45
+ "nl.nldesignsystem.css-property-syntax": "<length>",
46
+ "nl.nldesignsystem.figma-implementation": false
65
47
  },
66
- "type": "sizing"
48
+ "$type": "dimension"
67
49
  },
68
50
  "margin-block-end": {
69
51
  "$extensions": {
70
- "nl.nldesignsystem.css.property": {
71
- "syntax": "<length>",
72
- "inherits": true
73
- },
74
- "nl.nldesignsystem.figma.supports-token": false
52
+ "nl.nldesignsystem.css-property-syntax": "<length>",
53
+ "nl.nldesignsystem.figma-implementation": false
75
54
  },
76
- "type": "sizing"
55
+ "$type": "dimension"
77
56
  },
78
57
  "invalid": {
79
58
  "font-weight": {
80
59
  "$extensions": {
81
- "nl.nldesignsystem.css.property": {
82
- "syntax": "<number>",
83
- "inherits": true
84
- },
60
+ "nl.nldesignsystem.css-property-syntax": "<number>",
85
61
  "nl.nldesignsystem.deprecated": true,
86
62
  "nl.nldesignsystem.redirect": "utrecht.form-field-error-message.font-weight",
87
- "nl.nldesignsystem.figma.supports-token": false
63
+ "nl.nldesignsystem.figma-implementation": false
88
64
  },
89
- "type": "fontWeights"
65
+ "$type": "fontWeight"
90
66
  },
91
67
  "color": {
92
68
  "$extensions": {
93
- "nl.nldesignsystem.css.property": {
94
- "syntax": "<color>",
95
- "inherits": true
96
- },
69
+ "nl.nldesignsystem.css-property-syntax": "<color>",
97
70
  "nl.nldesignsystem.deprecated": true,
98
71
  "nl.nldesignsystem.redirect": "utrecht.form-field-error-message.color",
99
- "nl.nldesignsystem.figma.supports-token": false
72
+ "nl.nldesignsystem.figma-implementation": false
100
73
  },
101
- "type": "color"
74
+ "$type": "color"
102
75
  }
103
76
  },
104
77
  "valid": {
105
78
  "color": {
106
79
  "$extensions": {
107
- "nl.nldesignsystem.css.property": {
108
- "syntax": "<color>",
109
- "inherits": true
110
- },
111
- "nl.nldesignsystem.figma.supports-token": false
80
+ "nl.nldesignsystem.css-property-syntax": "<color>",
81
+ "nl.nldesignsystem.figma-implementation": false
112
82
  },
113
- "type": "color"
83
+ "$type": "color"
114
84
  }
115
85
  }
116
86
  }
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 field description 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,110 +3,80 @@
3
3
  "form-field-description": {
4
4
  "color": {
5
5
  "$extensions": {
6
- "nl.nldesignsystem.css.property": {
7
- "syntax": "<color>",
8
- "inherits": true
9
- },
10
- "nl.nldesignsystem.figma.supports-token": true
6
+ "nl.nldesignsystem.css-property-syntax": "<color>",
7
+ "nl.nldesignsystem.figma-implementation": true
11
8
  },
12
- "type": "color"
9
+ "$type": "color"
13
10
  },
14
11
  "font-family": {
15
12
  "$extensions": {
16
- "nl.nldesignsystem.css.property": {
17
- "syntax": "*",
18
- "inherits": true
19
- },
20
- "nl.nldesignsystem.figma.supports-token": true
13
+ "nl.nldesignsystem.css-property-syntax": "*",
14
+ "nl.nldesignsystem.figma-implementation": true
21
15
  },
22
- "type": "fontFamilies"
16
+ "$type": "fontFamily"
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": true
20
+ "nl.nldesignsystem.css-property-syntax": "<length>",
21
+ "nl.nldesignsystem.figma-implementation": true
31
22
  },
32
- "type": "fontSizes"
23
+ "$type": "dimension"
33
24
  },
34
25
  "font-style": {
35
26
  "$extensions": {
36
- "nl.nldesignsystem.css.property": {
37
- "syntax": ["inherit", "italic", "normal"],
38
- "inherits": true
39
- },
40
- "nl.nldesignsystem.figma.supports-token": false
27
+ "nl.nldesignsystem.css-property-syntax": ["inherit", "italic", "normal"],
28
+ "nl.nldesignsystem.figma-implementation": false
41
29
  },
42
- "type": "other"
30
+ "$type": "other"
43
31
  },
44
32
  "line-height": {
45
33
  "$extensions": {
46
- "nl.nldesignsystem.css.property": {
47
- "syntax": "<length>",
48
- "inherits": true
49
- },
50
- "nl.nldesignsystem.figma.supports-token": true
34
+ "nl.nldesignsystem.css-property-syntax": "<length>",
35
+ "nl.nldesignsystem.figma-implementation": true
51
36
  },
52
- "type": "lineHeights"
37
+ "$type": "dimension"
53
38
  },
54
39
  "margin-block-start": {
55
40
  "$extensions": {
56
- "nl.nldesignsystem.css.property": {
57
- "syntax": "<length>",
58
- "inherits": true
59
- },
60
- "nl.nldesignsystem.figma.supports-token": false
41
+ "nl.nldesignsystem.css-property-syntax": "<length>",
42
+ "nl.nldesignsystem.figma-implementation": false
61
43
  },
62
- "type": "sizing"
44
+ "$type": "dimension"
63
45
  },
64
46
  "margin-block-end": {
65
47
  "$extensions": {
66
- "nl.nldesignsystem.css.property": {
67
- "syntax": "<length>",
68
- "inherits": true
69
- },
70
- "nl.nldesignsystem.figma.supports-token": false
48
+ "nl.nldesignsystem.css-property-syntax": "<length>",
49
+ "nl.nldesignsystem.figma-implementation": false
71
50
  },
72
- "type": "sizing"
51
+ "$type": "dimension"
73
52
  },
74
53
  "invalid": {
75
54
  "font-weight": {
76
55
  "$extensions": {
77
- "nl.nldesignsystem.css.property": {
78
- "syntax": "<number>",
79
- "inherits": true
80
- },
56
+ "nl.nldesignsystem.css-property-syntax": "<number>",
81
57
  "nl.nldesignsystem.deprecated": true,
82
58
  "nl.nldesignsystem.redirect": "utrecht.form-field-error-message.font-weight",
83
- "nl.nldesignsystem.figma.supports-token": false
59
+ "nl.nldesignsystem.figma-implementation": false
84
60
  },
85
- "type": "fontWeights"
61
+ "$type": "fontWeight"
86
62
  },
87
63
  "color": {
88
64
  "$extensions": {
89
- "nl.nldesignsystem.css.property": {
90
- "syntax": "<color>",
91
- "inherits": true
92
- },
65
+ "nl.nldesignsystem.css-property-syntax": "<color>",
93
66
  "nl.nldesignsystem.deprecated": true,
94
67
  "nl.nldesignsystem.redirect": "utrecht.form-field-error-message.color",
95
- "nl.nldesignsystem.figma.supports-token": false
68
+ "nl.nldesignsystem.figma-implementation": false
96
69
  },
97
- "type": "color"
70
+ "$type": "color"
98
71
  }
99
72
  },
100
73
  "valid": {
101
74
  "color": {
102
75
  "$extensions": {
103
- "nl.nldesignsystem.css.property": {
104
- "syntax": "<color>",
105
- "inherits": true
106
- },
107
- "nl.nldesignsystem.figma.supports-token": false
76
+ "nl.nldesignsystem.css-property-syntax": "<color>",
77
+ "nl.nldesignsystem.figma-implementation": false
108
78
  },
109
- "type": "color"
79
+ "$type": "color"
110
80
  }
111
81
  }
112
82
  }
package/src/story-template.jsx DELETED
@@ -1,63 +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
- id: {
13
- description: 'Unique identifier to associate it with a form input',
14
- control: 'text',
15
- },
16
- innerHTML: {
17
- description: 'Set the content of the description',
18
- control: 'text',
19
- },
20
- status: {
21
- type: {
22
- name: 'enum',
23
- required: false,
24
- },
25
- description: 'Status',
26
- options: ['', 'invalid', 'valid'],
27
- },
28
- };
29
-
30
- export const defaultArgs = {
31
- id: null,
32
- innerHTML: '',
33
- status: '',
34
- distanced: false,
35
- };
36
-
37
- export const exampleArgs = {};
38
-
39
- export const FormFieldDescription = ({
40
- id = defaultArgs.id,
41
- innerHTML = defaultArgs.innerHTML,
42
- status = defaultArgs.status,
43
- distanced = defaultArgs.distanced,
44
- className,
45
- children,
46
- }) => (
47
- <div
48
- id={id}
49
- className={clsx(
50
- 'utrecht-form-field-description',
51
- distanced && 'utrecht-form-field-description--distanced',
52
- status === 'invalid' && 'utrecht-form-field-description--invalid',
53
- status === 'valid' && 'utrecht-form-field-description--valid',
54
- status === 'warning' && 'utrecht-form-field-description--warning',
55
- className,
56
- )}
57
- >
58
- {children}
59
- {parse(innerHTML)}
60
- </div>
61
- );
62
-
63
- export default FormFieldDescription;