@navikt/ds-react 0.17.20 → 0.17.21
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/package.json +4 -4
- package/src/form/checkbox/checkbox.stories.tsx +178 -0
- package/src/form/radio/radio.stories.tsx +82 -0
- package/src/form/checkbox/stories/checkbox.stories.mdx +0 -203
- package/src/form/checkbox/stories/checkbox.stories.tsx +0 -109
- package/src/form/radio/stories/radio.stories.mdx +0 -173
- package/src/form/radio/stories/radio.stories.tsx +0 -51
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "0.17.
|
|
3
|
+
"version": "0.17.21",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "NAV designsystem react components",
|
|
6
6
|
"author": "NAV Designsystem team",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@floating-ui/react-dom": "0.6.0",
|
|
38
38
|
"@material-ui/core": "^4.12.3",
|
|
39
|
-
"@navikt/ds-icons": "^0.8.
|
|
39
|
+
"@navikt/ds-icons": "^0.8.9",
|
|
40
40
|
"@popperjs/core": "^2.10.1",
|
|
41
41
|
"@radix-ui/react-tabs": "0.1.5",
|
|
42
42
|
"@radix-ui/react-toggle-group": "0.1.5",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
},
|
|
68
68
|
"peerDependencies": {
|
|
69
69
|
"@types/react": "^17.0.30",
|
|
70
|
-
"react": "^17.0.0
|
|
70
|
+
"react": "^17.0.0 || ^18.0.0"
|
|
71
71
|
},
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "1662dc91c0af08c1168f9e878bfa53e5bfc47b37"
|
|
73
73
|
}
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { Checkbox, CheckboxGroup } from "../../index";
|
|
3
|
+
import { Meta } from "@storybook/react/types-6-0";
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
title: "ds-react/Form/Checkbox",
|
|
7
|
+
component: Checkbox,
|
|
8
|
+
subcomponents: {
|
|
9
|
+
CheckboxGroup,
|
|
10
|
+
},
|
|
11
|
+
} as Meta;
|
|
12
|
+
|
|
13
|
+
export const Default = (props) => {
|
|
14
|
+
const [state, setState] = useState(["checkbox1"]);
|
|
15
|
+
|
|
16
|
+
return (
|
|
17
|
+
<CheckboxGroup
|
|
18
|
+
legend={props.legend}
|
|
19
|
+
description={props.description}
|
|
20
|
+
value={props.controlled ? state : undefined}
|
|
21
|
+
onChange={props.controlled ? setState : undefined}
|
|
22
|
+
hideLegend={props.hideLegend}
|
|
23
|
+
error={props.errorGroup ? "Errormelding" : undefined}
|
|
24
|
+
{...props}
|
|
25
|
+
>
|
|
26
|
+
<Checkbox
|
|
27
|
+
value="checkbox1"
|
|
28
|
+
indeterminate={props.indeterminate}
|
|
29
|
+
hideLabel={props.hideLabel}
|
|
30
|
+
>
|
|
31
|
+
{props.children || "Apple"}
|
|
32
|
+
</Checkbox>
|
|
33
|
+
<Checkbox
|
|
34
|
+
value="checkbox2"
|
|
35
|
+
error={props.errorSingle}
|
|
36
|
+
description={
|
|
37
|
+
props.checkboxDescription ? "Orange description" : undefined
|
|
38
|
+
}
|
|
39
|
+
indeterminate={props.indeterminate}
|
|
40
|
+
hideLabel={props.hideLabel}
|
|
41
|
+
>
|
|
42
|
+
{props.children || "Orange"}
|
|
43
|
+
</Checkbox>
|
|
44
|
+
<Checkbox
|
|
45
|
+
value="checkbox3"
|
|
46
|
+
indeterminate={props.indeterminate}
|
|
47
|
+
hideLabel={props.hideLabel}
|
|
48
|
+
>
|
|
49
|
+
{props.children || "Banana"}
|
|
50
|
+
</Checkbox>
|
|
51
|
+
<Checkbox
|
|
52
|
+
value="checkbox4"
|
|
53
|
+
indeterminate={props.indeterminate}
|
|
54
|
+
hideLabel={props.hideLabel}
|
|
55
|
+
>
|
|
56
|
+
{props.children || "Melon"}
|
|
57
|
+
</Checkbox>
|
|
58
|
+
</CheckboxGroup>
|
|
59
|
+
);
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
Default.args = {
|
|
63
|
+
controlled: false,
|
|
64
|
+
legend: "Legend-tekst",
|
|
65
|
+
checkboxDescription: false,
|
|
66
|
+
hideLegend: false,
|
|
67
|
+
errorSingle: false,
|
|
68
|
+
children: "",
|
|
69
|
+
description: "",
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
export const Group = () => (
|
|
73
|
+
<CheckboxGroup legend="Group legend" defaultValue={["tekst2"]}>
|
|
74
|
+
<Checkbox value="tekst">Checkboxtekst</Checkbox>
|
|
75
|
+
<Checkbox value="tekst2">Checkboxtekst</Checkbox>
|
|
76
|
+
</CheckboxGroup>
|
|
77
|
+
);
|
|
78
|
+
|
|
79
|
+
export const GroupError = () => (
|
|
80
|
+
<CheckboxGroup
|
|
81
|
+
legend="Group legend"
|
|
82
|
+
defaultValue={["tekst2"]}
|
|
83
|
+
error="Group errormelding"
|
|
84
|
+
>
|
|
85
|
+
<Checkbox value="tekst">Checkboxtekst</Checkbox>
|
|
86
|
+
<Checkbox value="tekst2">Checkboxtekst</Checkbox>
|
|
87
|
+
</CheckboxGroup>
|
|
88
|
+
);
|
|
89
|
+
|
|
90
|
+
export const GroupSmall = () => (
|
|
91
|
+
<CheckboxGroup legend="Group legend" defaultValue={["tekst2"]} size="small">
|
|
92
|
+
<Checkbox value="tekst">Checkboxtekst</Checkbox>
|
|
93
|
+
<Checkbox value="tekst2">Checkboxtekst</Checkbox>
|
|
94
|
+
</CheckboxGroup>
|
|
95
|
+
);
|
|
96
|
+
|
|
97
|
+
export const GroupDescription = () => (
|
|
98
|
+
<CheckboxGroup
|
|
99
|
+
legend="Group legend"
|
|
100
|
+
defaultValue={["tekst2"]}
|
|
101
|
+
description="Group description"
|
|
102
|
+
>
|
|
103
|
+
<Checkbox value="tekst">Checkboxtekst</Checkbox>
|
|
104
|
+
<Checkbox value="tekst2">Checkboxtekst</Checkbox>
|
|
105
|
+
</CheckboxGroup>
|
|
106
|
+
);
|
|
107
|
+
|
|
108
|
+
export const Single = () => (
|
|
109
|
+
<div className="colspan">
|
|
110
|
+
<Checkbox value="tekst">Checkboxtekst</Checkbox>
|
|
111
|
+
<Checkbox value="tekst" defaultChecked>
|
|
112
|
+
Checkboxtekst
|
|
113
|
+
</Checkbox>
|
|
114
|
+
</div>
|
|
115
|
+
);
|
|
116
|
+
|
|
117
|
+
export const SingleSmall = () => (
|
|
118
|
+
<div className="colspan">
|
|
119
|
+
<Checkbox value="tekst" size="small">
|
|
120
|
+
Checkboxtekst
|
|
121
|
+
</Checkbox>
|
|
122
|
+
<Checkbox value="tekst" defaultChecked size="small">
|
|
123
|
+
Checkboxtekst
|
|
124
|
+
</Checkbox>
|
|
125
|
+
</div>
|
|
126
|
+
);
|
|
127
|
+
|
|
128
|
+
export const SingleDescription = () => (
|
|
129
|
+
<div className="colspan">
|
|
130
|
+
<Checkbox value="tekst" description="checkboxdescription">
|
|
131
|
+
Checkboxtekst
|
|
132
|
+
</Checkbox>
|
|
133
|
+
<Checkbox value="tekst" defaultChecked description="checkboxdescription">
|
|
134
|
+
Checkboxtekst
|
|
135
|
+
</Checkbox>
|
|
136
|
+
</div>
|
|
137
|
+
);
|
|
138
|
+
|
|
139
|
+
export const SingleError = () => (
|
|
140
|
+
<div className="colspan">
|
|
141
|
+
<Checkbox value="tekst" error>
|
|
142
|
+
Checkboxtekst
|
|
143
|
+
</Checkbox>
|
|
144
|
+
<Checkbox value="tekst" defaultChecked error>
|
|
145
|
+
Checkboxtekst
|
|
146
|
+
</Checkbox>
|
|
147
|
+
</div>
|
|
148
|
+
);
|
|
149
|
+
|
|
150
|
+
export const Indeterminate = () => {
|
|
151
|
+
const [checked, setChecked] = useState([true, false]);
|
|
152
|
+
|
|
153
|
+
return (
|
|
154
|
+
<>
|
|
155
|
+
<Checkbox
|
|
156
|
+
checked={checked[0] && checked[1]}
|
|
157
|
+
indeterminate={checked[0] !== checked[1]}
|
|
158
|
+
onChange={(e) => setChecked([e.target.checked, e.target.checked])}
|
|
159
|
+
>
|
|
160
|
+
Parent
|
|
161
|
+
</Checkbox>
|
|
162
|
+
<div style={{ paddingLeft: "2rem" }}>
|
|
163
|
+
<Checkbox
|
|
164
|
+
checked={checked[0]}
|
|
165
|
+
onChange={(e) => setChecked([e.target.checked, checked[1]])}
|
|
166
|
+
>
|
|
167
|
+
Child 1
|
|
168
|
+
</Checkbox>
|
|
169
|
+
<Checkbox
|
|
170
|
+
checked={checked[1]}
|
|
171
|
+
onChange={(e) => setChecked([checked[0], e.target.checked])}
|
|
172
|
+
>
|
|
173
|
+
Child 2
|
|
174
|
+
</Checkbox>
|
|
175
|
+
</div>
|
|
176
|
+
</>
|
|
177
|
+
);
|
|
178
|
+
};
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { Radio, RadioGroup } from "../../index";
|
|
3
|
+
import { Meta } from "@storybook/react/types-6-0";
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
title: "ds-react/Form/Radio",
|
|
7
|
+
component: Radio,
|
|
8
|
+
subcomponents: {
|
|
9
|
+
RadioGroup,
|
|
10
|
+
},
|
|
11
|
+
} as Meta;
|
|
12
|
+
|
|
13
|
+
export const Default = (props) => {
|
|
14
|
+
const [state, setState] = useState("radio1");
|
|
15
|
+
|
|
16
|
+
return (
|
|
17
|
+
<RadioGroup
|
|
18
|
+
legend={props.legend}
|
|
19
|
+
description={props.description}
|
|
20
|
+
value={props.controlled ? state : undefined}
|
|
21
|
+
onChange={props.controlled ? setState : undefined}
|
|
22
|
+
hideLegend={props.hideLegend}
|
|
23
|
+
error={props.errorGroup ? "Errormelding" : undefined}
|
|
24
|
+
{...props}
|
|
25
|
+
>
|
|
26
|
+
<Radio value="radio1">{props.children || "Apple"}</Radio>
|
|
27
|
+
<Radio
|
|
28
|
+
value="radio2"
|
|
29
|
+
description={props.radioDescription ? "Orange description" : undefined}
|
|
30
|
+
>
|
|
31
|
+
{props.children || "Orange"}
|
|
32
|
+
</Radio>
|
|
33
|
+
<Radio value="radio3">{props.children || "Banana"}</Radio>
|
|
34
|
+
<Radio value="radio4">{props.children || "Melon"}</Radio>
|
|
35
|
+
</RadioGroup>
|
|
36
|
+
);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
Default.args = {
|
|
40
|
+
controlled: false,
|
|
41
|
+
legend: "Legend-tekst",
|
|
42
|
+
radioDescription: false,
|
|
43
|
+
hideLegend: false,
|
|
44
|
+
children: "",
|
|
45
|
+
description: "",
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export const Group = () => (
|
|
49
|
+
<RadioGroup legend="Group legend" defaultValue={"tekst2"}>
|
|
50
|
+
<Radio value="tekst">Radiotekst</Radio>
|
|
51
|
+
<Radio value="tekst2">Radiotekst</Radio>
|
|
52
|
+
</RadioGroup>
|
|
53
|
+
);
|
|
54
|
+
|
|
55
|
+
export const GroupError = () => (
|
|
56
|
+
<RadioGroup
|
|
57
|
+
legend="Group legend"
|
|
58
|
+
defaultValue={"tekst2"}
|
|
59
|
+
error="Group errormelding"
|
|
60
|
+
>
|
|
61
|
+
<Radio value="tekst">Radiotekst</Radio>
|
|
62
|
+
<Radio value="tekst2">Radiotekst</Radio>
|
|
63
|
+
</RadioGroup>
|
|
64
|
+
);
|
|
65
|
+
|
|
66
|
+
export const GroupSmall = () => (
|
|
67
|
+
<RadioGroup legend="Group legend" defaultValue={"tekst2"} size="small">
|
|
68
|
+
<Radio value="tekst">Radiotekst</Radio>
|
|
69
|
+
<Radio value="tekst2">Radiotekst</Radio>
|
|
70
|
+
</RadioGroup>
|
|
71
|
+
);
|
|
72
|
+
|
|
73
|
+
export const GroupDescription = () => (
|
|
74
|
+
<RadioGroup
|
|
75
|
+
legend="Group legend"
|
|
76
|
+
defaultValue={"tekst2"}
|
|
77
|
+
description="Group description"
|
|
78
|
+
>
|
|
79
|
+
<Radio value="tekst">Radiotekst</Radio>
|
|
80
|
+
<Radio value="tekst2">Radiotekst</Radio>
|
|
81
|
+
</RadioGroup>
|
|
82
|
+
);
|
|
@@ -1,203 +0,0 @@
|
|
|
1
|
-
import { Meta, Canvas } from "@storybook/addon-docs";
|
|
2
|
-
import { Checkbox, CheckboxGroup } from "../index";
|
|
3
|
-
|
|
4
|
-
<Meta title="ds-react/form/checkbox/intro" />
|
|
5
|
-
|
|
6
|
-
# Hvordan ta i bruk Checkbox
|
|
7
|
-
|
|
8
|
-
```jsx
|
|
9
|
-
<CheckboxGroup legend="Mollit eiusmod">
|
|
10
|
-
<Checkbox value="Apple">Apple</Checkbox>
|
|
11
|
-
<Checkbox value="Orange">Orange</Checkbox>
|
|
12
|
-
<Checkbox value="Melon">Melon</Checkbox>
|
|
13
|
-
</CheckboxGroup>
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
<Canvas>
|
|
17
|
-
<CheckboxGroup legend="Mollit eiusmod">
|
|
18
|
-
<Checkbox value="Apple">Apple</Checkbox>
|
|
19
|
-
<Checkbox value="Orange">Orange</Checkbox>
|
|
20
|
-
<Checkbox value="Melon">Melon</Checkbox>
|
|
21
|
-
</CheckboxGroup>
|
|
22
|
-
</Canvas>
|
|
23
|
-
|
|
24
|
-
Label å checkbox settes her da med children
|
|
25
|
-
|
|
26
|
-
## Description
|
|
27
|
-
|
|
28
|
-
Man kan både sette en description på CheckboxGroup og selve checkbox
|
|
29
|
-
|
|
30
|
-
```jsx
|
|
31
|
-
<CheckboxGroup legend="Culpa cupidatat" description="Exercitation do labore">
|
|
32
|
-
<Checkbox value="Apple">Apple</Checkbox>
|
|
33
|
-
<Checkbox value="Orange" description="Laborum ad">
|
|
34
|
-
Orange
|
|
35
|
-
</Checkbox>
|
|
36
|
-
<Checkbox value="Melon">Melon</Checkbox>
|
|
37
|
-
</CheckboxGroup>
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
<Canvas>
|
|
41
|
-
<CheckboxGroup legend="Mollit eiusmod" description="Exercitation do labore">
|
|
42
|
-
<Checkbox value="Apple">Apple</Checkbox>
|
|
43
|
-
<Checkbox value="Orange" description="Laborum ad">
|
|
44
|
-
Orange
|
|
45
|
-
</Checkbox>
|
|
46
|
-
<Checkbox value="Melon">Melon</Checkbox>
|
|
47
|
-
</CheckboxGroup>
|
|
48
|
-
</Canvas>
|
|
49
|
-
|
|
50
|
-
## Errors
|
|
51
|
-
|
|
52
|
-
Feilmeldinger kan bare settes på gruppa
|
|
53
|
-
|
|
54
|
-
```jsx
|
|
55
|
-
<CheckboxGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
|
|
56
|
-
<Checkbox value="Apple">Apple</Checkbox>
|
|
57
|
-
<Checkbox value="Orange">Orange</Checkbox>
|
|
58
|
-
<Checkbox value="Melon">Melon</Checkbox>
|
|
59
|
-
</CheckboxGroup>
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
<Canvas>
|
|
63
|
-
<CheckboxGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
|
|
64
|
-
<Checkbox value="Apple">Apple</Checkbox>
|
|
65
|
-
<Checkbox value="Orange">Orange</Checkbox>
|
|
66
|
-
<Checkbox value="Melon">Melon</Checkbox>
|
|
67
|
-
</CheckboxGroup>
|
|
68
|
-
</Canvas>
|
|
69
|
-
|
|
70
|
-
Enkelt-checkboxer tar en `boolean` error prop
|
|
71
|
-
|
|
72
|
-
```jsx
|
|
73
|
-
<Checkbox value="Apple" error>
|
|
74
|
-
Apple
|
|
75
|
-
</Checkbox>
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
<Canvas>
|
|
79
|
-
<Checkbox value="Apple" error>
|
|
80
|
-
Apple
|
|
81
|
-
</Checkbox>
|
|
82
|
-
</Canvas>
|
|
83
|
-
|
|
84
|
-
## Sizing
|
|
85
|
-
|
|
86
|
-
Checkboxer har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
|
|
87
|
-
|
|
88
|
-
```jsx
|
|
89
|
-
<CheckboxGroup
|
|
90
|
-
legend="Mollit eiusmod"
|
|
91
|
-
error="Boks nr 2 må være valgt"
|
|
92
|
-
size="small"
|
|
93
|
-
>
|
|
94
|
-
<Checkbox value="Apple">Apple</Checkbox>
|
|
95
|
-
<Checkbox value="Orange">Orange</Checkbox>
|
|
96
|
-
<Checkbox value="Melon">Melon</Checkbox>
|
|
97
|
-
</CheckboxGroup>
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
<Canvas>
|
|
101
|
-
<CheckboxGroup
|
|
102
|
-
legend="Mollit eiusmod"
|
|
103
|
-
error="Boks nr 2 må være valgt"
|
|
104
|
-
size="small"
|
|
105
|
-
>
|
|
106
|
-
<Checkbox value="Apple">Apple</Checkbox>
|
|
107
|
-
<Checkbox value="Orange" error="Boksen må være valgt">
|
|
108
|
-
Orange
|
|
109
|
-
</Checkbox>
|
|
110
|
-
<Checkbox value="Melon">Melon</Checkbox>
|
|
111
|
-
</CheckboxGroup>
|
|
112
|
-
</Canvas>
|
|
113
|
-
|
|
114
|
-
## defaultValues
|
|
115
|
-
|
|
116
|
-
```jsx
|
|
117
|
-
<CheckboxGroup legend="Mollit eiusmod" defaultValue={["Orange", "Melon"]}>
|
|
118
|
-
<Checkbox value="Apple">Apple</Checkbox>
|
|
119
|
-
<Checkbox value="Orange">Orange</Checkbox>
|
|
120
|
-
<Checkbox value="Melon">Melon</Checkbox>
|
|
121
|
-
</CheckboxGroup>
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
<Canvas>
|
|
125
|
-
<CheckboxGroup legend="Mollit eiusmod" defaultValue={["Orange", "Melon"]}>
|
|
126
|
-
<Checkbox value="Apple">Apple</Checkbox>
|
|
127
|
-
<Checkbox value="Orange">Orange</Checkbox>
|
|
128
|
-
<Checkbox value="Melon">Melon</Checkbox>
|
|
129
|
-
</CheckboxGroup>
|
|
130
|
-
</Canvas>
|
|
131
|
-
|
|
132
|
-
## hideLegend
|
|
133
|
-
|
|
134
|
-
Ved bruk av `hideLegend` på CheckboxGroup kan man gjøre slik at legend/description bare vises for skjermlesere
|
|
135
|
-
|
|
136
|
-
```jsx
|
|
137
|
-
<CheckboxGroup legend="Mollit eiusmod" hideLegend>
|
|
138
|
-
<Checkbox value="Apple">Apple</Checkbox>
|
|
139
|
-
<Checkbox value="Orange">Orange</Checkbox>
|
|
140
|
-
<Checkbox value="Melon">Melon</Checkbox>
|
|
141
|
-
</CheckboxGroup>
|
|
142
|
-
```
|
|
143
|
-
|
|
144
|
-
<Canvas>
|
|
145
|
-
<CheckboxGroup legend="Mollit eiusmod" hideLegend>
|
|
146
|
-
<Checkbox value="Apple">Apple</Checkbox>
|
|
147
|
-
<Checkbox value="Orange">Orange</Checkbox>
|
|
148
|
-
<Checkbox value="Melon">Melon</Checkbox>
|
|
149
|
-
</CheckboxGroup>
|
|
150
|
-
</Canvas>
|
|
151
|
-
|
|
152
|
-
## hideLabel
|
|
153
|
-
|
|
154
|
-
Ved bruk av `hideLabel` kan man lettere ta i bruk checkbox internt i eks tabeller.
|
|
155
|
-
|
|
156
|
-
```jsx
|
|
157
|
-
<Checkbox value="Orange" hideLabel>
|
|
158
|
-
Orange
|
|
159
|
-
</Checkbox>
|
|
160
|
-
```
|
|
161
|
-
|
|
162
|
-
<Canvas>
|
|
163
|
-
<Checkbox value="Orange" hideLabel>
|
|
164
|
-
Orange
|
|
165
|
-
</Checkbox>
|
|
166
|
-
</Canvas>
|
|
167
|
-
|
|
168
|
-
## Disabled
|
|
169
|
-
|
|
170
|
-
Ved bruk av `disabled` kan man både disabled enkelte checkboxer eller checkboxgruppen.
|
|
171
|
-
|
|
172
|
-
NOTE: Husk at disabled bør unngås!
|
|
173
|
-
|
|
174
|
-
```jsx
|
|
175
|
-
<CheckboxGroup legend="Mollit eiusmod" disabled>
|
|
176
|
-
<Checkbox value="Apple">Apple</Checkbox>
|
|
177
|
-
<Checkbox value="Orange">Orange</Checkbox>
|
|
178
|
-
<Checkbox value="Melon">Melon</Checkbox>
|
|
179
|
-
</CheckboxGroup>
|
|
180
|
-
|
|
181
|
-
<CheckboxGroup legend="Mollit eiusmod">
|
|
182
|
-
<Checkbox value="Apple" disabled>Apple</Checkbox>
|
|
183
|
-
<Checkbox value="Orange">Orange</Checkbox>
|
|
184
|
-
<Checkbox value="Melon">Melon</Checkbox>
|
|
185
|
-
</CheckboxGroup>
|
|
186
|
-
```
|
|
187
|
-
|
|
188
|
-
<Canvas>
|
|
189
|
-
<div>
|
|
190
|
-
<CheckboxGroup legend="Mollit eiusmod" disabled>
|
|
191
|
-
<Checkbox value="Apple">Apple</Checkbox>
|
|
192
|
-
<Checkbox value="Orange">Orange</Checkbox>
|
|
193
|
-
<Checkbox value="Melon">Melon</Checkbox>
|
|
194
|
-
</CheckboxGroup>
|
|
195
|
-
<CheckboxGroup legend="Mollit eiusmod">
|
|
196
|
-
<Checkbox value="Apple" disabled>
|
|
197
|
-
Apple
|
|
198
|
-
</Checkbox>
|
|
199
|
-
<Checkbox value="Orange">Orange</Checkbox>
|
|
200
|
-
<Checkbox value="Melon">Melon</Checkbox>
|
|
201
|
-
</CheckboxGroup>
|
|
202
|
-
</div>
|
|
203
|
-
</Canvas>
|
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
|
-
import { Checkbox, CheckboxGroup } from "../../index";
|
|
3
|
-
import { Meta } from "@storybook/react/types-6-0";
|
|
4
|
-
import { CheckboxGroupProps } from "..";
|
|
5
|
-
export default {
|
|
6
|
-
title: "ds-react/form/checkbox",
|
|
7
|
-
component: Checkbox,
|
|
8
|
-
} as Meta;
|
|
9
|
-
|
|
10
|
-
export const Indeterminate = () => {
|
|
11
|
-
const [checked, setChecked] = useState([true, false]);
|
|
12
|
-
|
|
13
|
-
return (
|
|
14
|
-
<>
|
|
15
|
-
<Checkbox
|
|
16
|
-
checked={checked[0] && checked[1]}
|
|
17
|
-
indeterminate={checked[0] !== checked[1]}
|
|
18
|
-
onChange={(e) => setChecked([e.target.checked, e.target.checked])}
|
|
19
|
-
>
|
|
20
|
-
Parent
|
|
21
|
-
</Checkbox>
|
|
22
|
-
<div style={{ paddingLeft: "2rem" }}>
|
|
23
|
-
<Checkbox
|
|
24
|
-
checked={checked[0]}
|
|
25
|
-
onChange={(e) => setChecked([e.target.checked, checked[1]])}
|
|
26
|
-
>
|
|
27
|
-
Child 1
|
|
28
|
-
</Checkbox>
|
|
29
|
-
<Checkbox
|
|
30
|
-
checked={checked[1]}
|
|
31
|
-
onChange={(e) => setChecked([checked[0], e.target.checked])}
|
|
32
|
-
>
|
|
33
|
-
Child 2
|
|
34
|
-
</Checkbox>
|
|
35
|
-
</div>
|
|
36
|
-
</>
|
|
37
|
-
);
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
export const All = () => {
|
|
41
|
-
const Checkboxes = (
|
|
42
|
-
props: Omit<CheckboxGroupProps, "legend" | "description" | "children">
|
|
43
|
-
) => (
|
|
44
|
-
<CheckboxGroup
|
|
45
|
-
legend="Mollit eiusmod"
|
|
46
|
-
description="Exercitation do labore"
|
|
47
|
-
{...props}
|
|
48
|
-
>
|
|
49
|
-
<Checkbox value={1}>Apple</Checkbox>
|
|
50
|
-
<Checkbox value="Orange" description="Laborum ad">
|
|
51
|
-
Orange
|
|
52
|
-
</Checkbox>
|
|
53
|
-
<Checkbox value="Banana" description={<div>Laborum ad</div>}>
|
|
54
|
-
Banana
|
|
55
|
-
</Checkbox>
|
|
56
|
-
<Checkbox value="Melon">Melon</Checkbox>
|
|
57
|
-
</CheckboxGroup>
|
|
58
|
-
);
|
|
59
|
-
|
|
60
|
-
return (
|
|
61
|
-
<>
|
|
62
|
-
<h1>Checkbox</h1>
|
|
63
|
-
<h2>Single checkbox</h2>
|
|
64
|
-
<Checkbox value="Apple">Apple</Checkbox>
|
|
65
|
-
<h3>Desription</h3>
|
|
66
|
-
<Checkbox value={1} description="Laborum ad" defaultChecked>
|
|
67
|
-
Apple
|
|
68
|
-
</Checkbox>
|
|
69
|
-
<h3>Error</h3>
|
|
70
|
-
<Checkbox value="Apple" error>
|
|
71
|
-
Apple
|
|
72
|
-
</Checkbox>
|
|
73
|
-
<Checkbox value="Apple" error defaultChecked>
|
|
74
|
-
Orange
|
|
75
|
-
</Checkbox>
|
|
76
|
-
<h3>Hide label</h3>
|
|
77
|
-
<Checkbox value="Apple" hideLabel description="Laborum ad">
|
|
78
|
-
Apple
|
|
79
|
-
</Checkbox>
|
|
80
|
-
<h3>Disabled</h3>
|
|
81
|
-
<Checkbox value="Apple" disabled>
|
|
82
|
-
Apple
|
|
83
|
-
</Checkbox>
|
|
84
|
-
<Checkbox value="Orange" description="Laborum ad" disabled defaultChecked>
|
|
85
|
-
Orange
|
|
86
|
-
</Checkbox>
|
|
87
|
-
<h3>Indeterminate</h3>
|
|
88
|
-
<Checkbox value="Apple" indeterminate>
|
|
89
|
-
Apple
|
|
90
|
-
</Checkbox>
|
|
91
|
-
<Checkbox value="Orange" indeterminate size="small">
|
|
92
|
-
Orange
|
|
93
|
-
</Checkbox>
|
|
94
|
-
|
|
95
|
-
<h2>Checkbox group</h2>
|
|
96
|
-
<Checkboxes />
|
|
97
|
-
<h3>Error</h3>
|
|
98
|
-
<Checkboxes error="Dette er en feilmelding" />
|
|
99
|
-
<h3>Small</h3>
|
|
100
|
-
<Checkboxes size="small" />
|
|
101
|
-
<h3>Small + error</h3>
|
|
102
|
-
<Checkboxes size="small" error="Dette er en feilmelding" />
|
|
103
|
-
<h3>Default value</h3>
|
|
104
|
-
<Checkboxes defaultValue={[1, "Melon"]} />
|
|
105
|
-
<h3>Disabled</h3>
|
|
106
|
-
<Checkboxes disabled />
|
|
107
|
-
</>
|
|
108
|
-
);
|
|
109
|
-
};
|
|
@@ -1,173 +0,0 @@
|
|
|
1
|
-
import { Meta, Canvas } from "@storybook/addon-docs";
|
|
2
|
-
import { Radio, RadioGroup } from "../index";
|
|
3
|
-
|
|
4
|
-
<Meta title="ds-react/form/radio/intro" />
|
|
5
|
-
|
|
6
|
-
# Hvordan ta i bruk Radio
|
|
7
|
-
|
|
8
|
-
```jsx
|
|
9
|
-
<RadioGroup legend="Mollit eiusmod">
|
|
10
|
-
<Radio value="Apple">Apple</Radio>
|
|
11
|
-
<Radio value="Orange">Orange</Radio>
|
|
12
|
-
<Radio value="Melon">Melon</Radio>
|
|
13
|
-
</RadioGroup>
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
<Canvas>
|
|
17
|
-
<RadioGroup legend="Mollit eiusmod">
|
|
18
|
-
<Radio value="Apple">Apple</Radio>
|
|
19
|
-
<Radio value="Orange">Orange</Radio>
|
|
20
|
-
<Radio value="Melon">Melon</Radio>
|
|
21
|
-
</RadioGroup>
|
|
22
|
-
</Canvas>
|
|
23
|
-
|
|
24
|
-
Label å Radio settes her da med children
|
|
25
|
-
|
|
26
|
-
## Description
|
|
27
|
-
|
|
28
|
-
Man kan både sette en description på RadioGroup og selve Radio
|
|
29
|
-
|
|
30
|
-
```jsx
|
|
31
|
-
<RadioGroup legend="Culpa cupidatat" description="Exercitation do labore">
|
|
32
|
-
<Radio value="Apple">Apple</Radio>
|
|
33
|
-
<Radio value="Orange" description="Laborum ad">
|
|
34
|
-
Orange
|
|
35
|
-
</Radio>
|
|
36
|
-
<Radio value="Melon">Melon</Radio>
|
|
37
|
-
</RadioGroup>
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
<Canvas>
|
|
41
|
-
<RadioGroup legend="Mollit eiusmod" description="Exercitation do labore">
|
|
42
|
-
<Radio value="Apple">Apple</Radio>
|
|
43
|
-
<Radio value="Orange" description="Laborum ad">
|
|
44
|
-
Orange
|
|
45
|
-
</Radio>
|
|
46
|
-
<Radio value="Melon">Melon</Radio>
|
|
47
|
-
</RadioGroup>
|
|
48
|
-
</Canvas>
|
|
49
|
-
|
|
50
|
-
## Errors
|
|
51
|
-
|
|
52
|
-
Feilmeldinger kan bare settes på gruppa
|
|
53
|
-
|
|
54
|
-
```jsx
|
|
55
|
-
<RadioGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
|
|
56
|
-
<Radio value="Apple">Apple</Radio>
|
|
57
|
-
<Radio value="Orange">Orange</Radio>
|
|
58
|
-
<Radio value="Melon">Melon</Radio>
|
|
59
|
-
</RadioGroup>
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
<Canvas>
|
|
63
|
-
<RadioGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
|
|
64
|
-
<Radio value="Apple">Apple</Radio>
|
|
65
|
-
<Radio value="Orange">Orange</Radio>
|
|
66
|
-
<Radio value="Melon">Melon</Radio>
|
|
67
|
-
</RadioGroup>
|
|
68
|
-
</Canvas>
|
|
69
|
-
|
|
70
|
-
## Sizing
|
|
71
|
-
|
|
72
|
-
Radioknapper har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
|
|
73
|
-
|
|
74
|
-
```jsx
|
|
75
|
-
<RadioGroup
|
|
76
|
-
legend="Mollit eiusmod"
|
|
77
|
-
error="Boks nr 2 må være valgt"
|
|
78
|
-
size="small"
|
|
79
|
-
>
|
|
80
|
-
<Radio value="Apple">Apple</Radio>
|
|
81
|
-
<Radio value="Orange">Orange</Radio>
|
|
82
|
-
<Radio value="Melon">Melon</Radio>
|
|
83
|
-
</RadioGroup>
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
<Canvas>
|
|
87
|
-
<RadioGroup
|
|
88
|
-
legend="Mollit eiusmod"
|
|
89
|
-
error="Boks nr 2 må være valgt"
|
|
90
|
-
size="small"
|
|
91
|
-
>
|
|
92
|
-
<Radio value="Apple">Apple</Radio>
|
|
93
|
-
<Radio value="Orange" error="Boksen må være valgt">
|
|
94
|
-
Orange
|
|
95
|
-
</Radio>
|
|
96
|
-
<Radio value="Melon">Melon</Radio>
|
|
97
|
-
</RadioGroup>
|
|
98
|
-
</Canvas>
|
|
99
|
-
|
|
100
|
-
## defaultValue
|
|
101
|
-
|
|
102
|
-
```jsx
|
|
103
|
-
<RadioGroup legend="Mollit eiusmod" defaultValue="Orange">
|
|
104
|
-
<Radio value="Apple">Apple</Radio>
|
|
105
|
-
<Radio value="Orange">Orange</Radio>
|
|
106
|
-
<Radio value="Melon">Melon</Radio>
|
|
107
|
-
</RadioGroup>
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
<Canvas>
|
|
111
|
-
<RadioGroup legend="Mollit eiusmod" defaultValue="Orange">
|
|
112
|
-
<Radio value="Apple">Apple</Radio>
|
|
113
|
-
<Radio value="Orange">Orange</Radio>
|
|
114
|
-
<Radio value="Melon">Melon</Radio>
|
|
115
|
-
</RadioGroup>
|
|
116
|
-
</Canvas>
|
|
117
|
-
|
|
118
|
-
## hideLegend
|
|
119
|
-
|
|
120
|
-
Ved bruk av `hideLegend` på RadioGroup kan man gjøre slik at legend/description bare vises for skjermlesere
|
|
121
|
-
|
|
122
|
-
```jsx
|
|
123
|
-
<RadioGroup legend="Mollit eiusmod" hideLegend>
|
|
124
|
-
<Radio value="Apple">Apple</Radio>
|
|
125
|
-
<Radio value="Orange">Orange</Radio>
|
|
126
|
-
<Radio value="Melon">Melon</Radio>
|
|
127
|
-
</RadioGroup>
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
<Canvas>
|
|
131
|
-
<RadioGroup legend="Mollit eiusmod" hideLegend>
|
|
132
|
-
<Radio value="Apple">Apple</Radio>
|
|
133
|
-
<Radio value="Orange">Orange</Radio>
|
|
134
|
-
<Radio value="Melon">Melon</Radio>
|
|
135
|
-
</RadioGroup>
|
|
136
|
-
</Canvas>
|
|
137
|
-
|
|
138
|
-
## Disabled
|
|
139
|
-
|
|
140
|
-
Ved bruk av `disabled` kan man både disabled enkelte Radioer eller Radiogruppen.
|
|
141
|
-
|
|
142
|
-
NOTE: Husk at disabled bør unngås!
|
|
143
|
-
|
|
144
|
-
```jsx
|
|
145
|
-
<RadioGroup legend="Mollit eiusmod" disabled>
|
|
146
|
-
<Radio value="Apple">Apple</Radio>
|
|
147
|
-
<Radio value="Orange">Orange</Radio>
|
|
148
|
-
<Radio value="Melon">Melon</Radio>
|
|
149
|
-
</RadioGroup>
|
|
150
|
-
|
|
151
|
-
<RadioGroup legend="Mollit eiusmod" >
|
|
152
|
-
<Radio value="Apple" disabled>Apple</Radio>
|
|
153
|
-
<Radio value="Orange">Orange</Radio>
|
|
154
|
-
<Radio value="Melon">Melon</Radio>
|
|
155
|
-
</RadioGroup>
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
<Canvas>
|
|
159
|
-
<div>
|
|
160
|
-
<RadioGroup legend="Mollit eiusmod" disabled>
|
|
161
|
-
<Radio value="Apple">Apple</Radio>
|
|
162
|
-
<Radio value="Orange">Orange</Radio>
|
|
163
|
-
<Radio value="Melon">Melon</Radio>
|
|
164
|
-
</RadioGroup>
|
|
165
|
-
<RadioGroup legend="Mollit eiusmod">
|
|
166
|
-
<Radio value="Apple" disabled>
|
|
167
|
-
Apple
|
|
168
|
-
</Radio>
|
|
169
|
-
<Radio value="Orange">Orange</Radio>
|
|
170
|
-
<Radio value="Melon">Melon</Radio>
|
|
171
|
-
</RadioGroup>
|
|
172
|
-
</div>
|
|
173
|
-
</Canvas>
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { Meta } from "@storybook/react/types-6-0";
|
|
3
|
-
import { RadioGroup, Radio } from "../index";
|
|
4
|
-
import { RadioGroupProps } from "../RadioGroup";
|
|
5
|
-
export default {
|
|
6
|
-
title: "ds-react/form/radio",
|
|
7
|
-
component: RadioGroup,
|
|
8
|
-
} as Meta;
|
|
9
|
-
|
|
10
|
-
export const All = () => {
|
|
11
|
-
const Radios = (props: Omit<RadioGroupProps, "legend" | "children">) => (
|
|
12
|
-
<RadioGroup
|
|
13
|
-
legend="Mollit eiusmod"
|
|
14
|
-
description={<div>"Exercitation do labore"</div>}
|
|
15
|
-
{...props}
|
|
16
|
-
>
|
|
17
|
-
<Radio value={1}>Apple</Radio>
|
|
18
|
-
<Radio value={false} description={<div>Laborum ad</div>}>
|
|
19
|
-
Orange
|
|
20
|
-
</Radio>
|
|
21
|
-
<Radio value="Melon">Melon</Radio>
|
|
22
|
-
</RadioGroup>
|
|
23
|
-
);
|
|
24
|
-
|
|
25
|
-
return (
|
|
26
|
-
<>
|
|
27
|
-
<h1>Radio group</h1>
|
|
28
|
-
<Radios />
|
|
29
|
-
<h2>Error</h2>
|
|
30
|
-
<Radios error="Dette er en feilmelding" />
|
|
31
|
-
<h2>Small</h2>
|
|
32
|
-
<Radios size="small" />
|
|
33
|
-
<h2>Small + error</h2>
|
|
34
|
-
<Radios size="small" error="Dette er en feilmelding" />
|
|
35
|
-
<h2>Default value</h2>
|
|
36
|
-
<Radios defaultValue={1} />
|
|
37
|
-
<h2>Disabled</h2>
|
|
38
|
-
<RadioGroup legend="Mollit eiusmod" description="Exercitation do labore">
|
|
39
|
-
<Radio value="Apple" disabled>
|
|
40
|
-
Apple
|
|
41
|
-
</Radio>
|
|
42
|
-
<Radio value={false} description="Laborum ad" disabled>
|
|
43
|
-
Orange
|
|
44
|
-
</Radio>
|
|
45
|
-
<Radio value="Melon">Melon</Radio>
|
|
46
|
-
</RadioGroup>
|
|
47
|
-
<h2>Disabled group</h2>
|
|
48
|
-
<Radios disabled />
|
|
49
|
-
</>
|
|
50
|
-
);
|
|
51
|
-
};
|