@navikt/ds-react 0.17.18 → 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 +13 -13
- package/src/accordion/accordion.stories.tsx +82 -70
- package/src/alert/alert.stories.tsx +85 -95
- package/src/button/button.stories.tsx +142 -130
- package/src/card/stories/card.stories.mdx +1 -1
- package/src/card/stories/card.stories.tsx +1 -1
- package/src/form/checkbox/Checkbox.test.tsx +12 -8
- package/src/form/checkbox/checkbox.stories.tsx +178 -0
- package/src/form/radio/Radio.test.tsx +7 -4
- package/src/form/radio/radio.stories.tsx +82 -0
- package/src/page-header/stories/header.stories.mdx +1 -1
- package/src/page-header/stories/header.stories.tsx +1 -1
- package/src/step-indicator/stories/step-indicator.stories.mdx +1 -1
- package/src/step-indicator/stories/step-indicator.stories.tsx +1 -1
- 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
|
@@ -2,7 +2,7 @@ import { Meta, Canvas } from "@storybook/addon-docs";
|
|
|
2
2
|
import { StepIndicator } from "..";
|
|
3
3
|
import { Example } from "./Example";
|
|
4
4
|
|
|
5
|
-
<Meta title="ds-react/step-indicator/intro" />
|
|
5
|
+
<Meta title="ds-react(deprecated)/step-indicator/intro" />
|
|
6
6
|
|
|
7
7
|
# Hvordan ta i bruk StepIndicator
|
|
8
8
|
|
|
@@ -4,7 +4,7 @@ import { Meta } from "@storybook/react/types-6-0";
|
|
|
4
4
|
import { Link, HashRouter as Router, useLocation } from "react-router-dom";
|
|
5
5
|
|
|
6
6
|
export default {
|
|
7
|
-
title: "ds-react/step-indicator",
|
|
7
|
+
title: "ds-react(deprecated)/step-indicator",
|
|
8
8
|
component: StepIndicator,
|
|
9
9
|
} as Meta;
|
|
10
10
|
|
|
@@ -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
|
-
};
|