@utrecht/form-fieldset-css 3.0.0 → 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.
- package/CHANGELOG.md +6 -0
- package/dist/html/index.css +1 -1
- package/dist/html/index.min.css +1 -1
- package/dist/html/index.mjs +1 -1
- package/dist/index.css +1 -1
- package/dist/index.min.css +1 -1
- package/dist/index.mjs +1 -1
- package/dist/tokens.mjs +5 -7
- package/package.json +3 -2
- package/src/_reset.scss +1 -1
- package/src/tokens.json +5 -7
- package/src/story-template.jsx +0 -140
package/CHANGELOG.md
CHANGED
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
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
|
@@ -17,13 +17,11 @@ export default {
|
|
|
17
17
|
},
|
|
18
18
|
"invalid": {
|
|
19
19
|
"border-inline-start-color": {
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
"$type": "color"
|
|
26
|
-
}
|
|
20
|
+
"$extensions": {
|
|
21
|
+
"nl.nldesignsystem.css-property-syntax": "<color>",
|
|
22
|
+
"nl.nldesignsystem.figma-implementation": false
|
|
23
|
+
},
|
|
24
|
+
"$type": "color"
|
|
27
25
|
},
|
|
28
26
|
"border-inline-start-width": {
|
|
29
27
|
"$extensions": {
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "3.0.
|
|
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
package/src/tokens.json
CHANGED
|
@@ -17,13 +17,11 @@
|
|
|
17
17
|
},
|
|
18
18
|
"invalid": {
|
|
19
19
|
"border-inline-start-color": {
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
"$type": "color"
|
|
26
|
-
}
|
|
20
|
+
"$extensions": {
|
|
21
|
+
"nl.nldesignsystem.css-property-syntax": "<color>",
|
|
22
|
+
"nl.nldesignsystem.figma-implementation": false
|
|
23
|
+
},
|
|
24
|
+
"$type": "color"
|
|
27
25
|
},
|
|
28
26
|
"border-inline-start-width": {
|
|
29
27
|
"$extensions": {
|
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;
|