@navikt/ds-react 0.19.0 → 0.19.3
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/cjs/accordion/AccordionContent.js +1 -1
- package/cjs/form/Textarea.js +6 -3
- package/esm/accordion/AccordionContent.js +1 -1
- package/esm/accordion/AccordionContent.js.map +1 -1
- package/esm/form/Textarea.js +7 -4
- package/esm/form/Textarea.js.map +1 -1
- package/package.json +10 -8
- package/src/accordion/AccordionContent.tsx +1 -1
- package/src/accordion/accordion.stories.tsx +33 -27
- package/src/form/Textarea.tsx +11 -2
- package/src/form/stories/confirmation-panel.stories.tsx +68 -43
- package/src/form/stories/fieldset.stories.tsx +97 -58
- package/src/form/stories/select.stories.tsx +86 -42
- package/src/form/stories/switch.stories.tsx +89 -76
- package/src/form/stories/text-field.stories.tsx +57 -53
- package/src/form/stories/textarea.stories.tsx +84 -77
- package/src/link-panel/stories/link-panel.stories.tsx +10 -12
- package/src/tooltip/tooltip.stories.tsx +52 -117
- package/src/form/stories/confirmation-panel.stories.mdx +0 -59
- package/src/form/stories/fieldset.stories.mdx +0 -136
- package/src/form/stories/live-examples.tsx +0 -26
- package/src/form/stories/select.stories.mdx +0 -134
- package/src/form/stories/switch.stories.mdx +0 -174
- package/src/form/stories/text-field.stories.mdx +0 -86
- package/src/form/stories/textarea.stories.mdx +0 -167
|
@@ -1,174 +0,0 @@
|
|
|
1
|
-
import { Meta, Canvas } from "@storybook/addon-docs";
|
|
2
|
-
import { Switch } from "../index";
|
|
3
|
-
|
|
4
|
-
<Meta title="ds-react/form/switch/intro" />
|
|
5
|
-
|
|
6
|
-
# Hvordan ta i bruk Switch
|
|
7
|
-
|
|
8
|
-
```jsx
|
|
9
|
-
<Switch>Slå på feature</Switch>
|
|
10
|
-
<div>
|
|
11
|
-
<Switch position="right">Slå på feature</Switch>
|
|
12
|
-
</div>
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
<Canvas>
|
|
16
|
-
<Switch>Slå på feature</Switch>
|
|
17
|
-
<div>
|
|
18
|
-
<Switch position="right">Slå på feature</Switch>
|
|
19
|
-
</div>
|
|
20
|
-
</Canvas>
|
|
21
|
-
|
|
22
|
-
## Description
|
|
23
|
-
|
|
24
|
-
```jsx
|
|
25
|
-
<Switch description="Dette vil gjøre x og y">Slå på feature</Switch>
|
|
26
|
-
<div>
|
|
27
|
-
<Switch position="right" description="Dette vil gjøre x og y">
|
|
28
|
-
Slå på feature
|
|
29
|
-
</Switch>
|
|
30
|
-
</div>
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
<Canvas>
|
|
34
|
-
<Switch description="Dette vil gjøre x og y">Slå på feature</Switch>
|
|
35
|
-
<div>
|
|
36
|
-
<Switch position="right" description="Dette vil gjøre x og y">
|
|
37
|
-
Slå på feature
|
|
38
|
-
</Switch>
|
|
39
|
-
</div>
|
|
40
|
-
</Canvas>
|
|
41
|
-
|
|
42
|
-
## Position
|
|
43
|
-
|
|
44
|
-
Switch kan ha label på høyre eller venstre side. Velges med "Position"-prop "left" | "right". Husk at hvis position
|
|
45
|
-
"right" velges, må man selv passe på at den har en definert bredde slik at elementet ikke vises over hele skjermen.
|
|
46
|
-
|
|
47
|
-
```jsx
|
|
48
|
-
<div>
|
|
49
|
-
<div>
|
|
50
|
-
<h3>Feil</h3>
|
|
51
|
-
<Switch position="right">Slå på feature</Switch>
|
|
52
|
-
<h3>Riktig</h3>
|
|
53
|
-
<div style={{ width: 200 }}>
|
|
54
|
-
<Switch position="right">Slå på feature 1</Switch>
|
|
55
|
-
<Switch position="right">Slå på feature 2</Switch>
|
|
56
|
-
<Switch position="right">Slå på feature 3</Switch>
|
|
57
|
-
</div>
|
|
58
|
-
</div>
|
|
59
|
-
</div>
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
<Canvas>
|
|
63
|
-
<div>
|
|
64
|
-
<h3>Feil</h3>
|
|
65
|
-
<Switch position="right">Slå på feature</Switch>
|
|
66
|
-
<h3>Riktig</h3>
|
|
67
|
-
<div style={{ width: 300 }}>
|
|
68
|
-
<Switch position="right">Slå på feature 1</Switch>
|
|
69
|
-
<Switch position="right">Slå på feature 2</Switch>
|
|
70
|
-
<Switch position="right">Slå på feature 3</Switch>
|
|
71
|
-
</div>
|
|
72
|
-
</div>
|
|
73
|
-
</Canvas>
|
|
74
|
-
|
|
75
|
-
## Sizing
|
|
76
|
-
|
|
77
|
-
Switch har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
|
|
78
|
-
|
|
79
|
-
```jsx
|
|
80
|
-
<Switch size="small" >Slå på feature</Switch>
|
|
81
|
-
<Switch size="small" description="Dette vil gjøre x og y">Slå på feature</Switch>
|
|
82
|
-
|
|
83
|
-
<Switch position="right" size="small" >Slå på feature</Switch>
|
|
84
|
-
<Switch position="right" size="small" description="Dette vil gjøre x og y">Slå på feature</Switch>
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
<Canvas>
|
|
88
|
-
<div>
|
|
89
|
-
<Switch size="small">Slå på feature</Switch>
|
|
90
|
-
<Switch size="small" description="Dette vil gjøre x og y">
|
|
91
|
-
Slå på feature
|
|
92
|
-
</Switch>
|
|
93
|
-
</div>
|
|
94
|
-
<div>
|
|
95
|
-
<Switch position="right" size="small">
|
|
96
|
-
Slå på feature
|
|
97
|
-
</Switch>
|
|
98
|
-
<Switch position="right" size="small" description="Dette vil gjøre x og y">
|
|
99
|
-
Slå på feature
|
|
100
|
-
</Switch>
|
|
101
|
-
</div>
|
|
102
|
-
</Canvas>
|
|
103
|
-
|
|
104
|
-
## defaultChecked
|
|
105
|
-
|
|
106
|
-
Switch er en stylet checkbox, så både `checked` og `defaultChecked` fungerer
|
|
107
|
-
|
|
108
|
-
```jsx
|
|
109
|
-
<Switch defaultChecked>Slå på feature</Switch>
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
<Canvas>
|
|
113
|
-
<Switch defaultChecked>Slå på feature</Switch>
|
|
114
|
-
</Canvas>
|
|
115
|
-
|
|
116
|
-
## hideLabel
|
|
117
|
-
|
|
118
|
-
Ved bruk av `hideLegend` på Switch kan man gjøre slik at legend/description bare vises for skjermlesere
|
|
119
|
-
|
|
120
|
-
```jsx
|
|
121
|
-
<div style={{ width: 300 }}>
|
|
122
|
-
<Switch hideLabel>Slå på feature</Switch>
|
|
123
|
-
<Switch hideLabel position="right">
|
|
124
|
-
Slå på feature
|
|
125
|
-
</Switch>
|
|
126
|
-
</div>
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
<Canvas>
|
|
130
|
-
<div style={{ width: 300 }}>
|
|
131
|
-
<Switch hideLabel>Slå på feature</Switch>
|
|
132
|
-
<Switch hideLabel position="right">
|
|
133
|
-
Slå på feature
|
|
134
|
-
</Switch>
|
|
135
|
-
</div>
|
|
136
|
-
</Canvas>
|
|
137
|
-
|
|
138
|
-
## Disabled
|
|
139
|
-
|
|
140
|
-
Ved bruk av `disabled` kan man både disabled enkelte checkboxer eller checkboxgruppen.
|
|
141
|
-
|
|
142
|
-
NOTE: Husk at disabled bør unngås!
|
|
143
|
-
|
|
144
|
-
```jsx
|
|
145
|
-
<Switch disabled>Slå på feature</Switch>
|
|
146
|
-
```
|
|
147
|
-
|
|
148
|
-
<Canvas>
|
|
149
|
-
<div>
|
|
150
|
-
<Switch disabled>Slå på feature</Switch>
|
|
151
|
-
<Switch disabled defaultChecked>
|
|
152
|
-
Slå på feature
|
|
153
|
-
</Switch>
|
|
154
|
-
</div>
|
|
155
|
-
</Canvas>
|
|
156
|
-
|
|
157
|
-
## Loading
|
|
158
|
-
|
|
159
|
-
Om systemet bruker tid på å utføre handlingen vises en loading-indikator på switch’en.
|
|
160
|
-
Om ventetiden er mer enn noen sekunder bør en forklarende tekst også vises.
|
|
161
|
-
Teksten må forklare kort og godt hvorfor brukeren må vente.
|
|
162
|
-
|
|
163
|
-
```jsx
|
|
164
|
-
<Switch loading>Slå på feature</Switch>
|
|
165
|
-
```
|
|
166
|
-
|
|
167
|
-
<Canvas>
|
|
168
|
-
<div>
|
|
169
|
-
<Switch loading>Slå på feature</Switch>
|
|
170
|
-
<Switch loading defaultChecked>
|
|
171
|
-
Slå på feature
|
|
172
|
-
</Switch>
|
|
173
|
-
</div>
|
|
174
|
-
</Canvas>
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
import { Meta, Canvas } from "@storybook/addon-docs";
|
|
2
|
-
import { TextField } from "../index";
|
|
3
|
-
|
|
4
|
-
<Meta title="ds-react/form/text-field/intro" />
|
|
5
|
-
|
|
6
|
-
# Hvordan ta i bruk TextField
|
|
7
|
-
|
|
8
|
-
```jsx
|
|
9
|
-
<TextField label="Laborum excepteur" />
|
|
10
|
-
```
|
|
11
|
-
|
|
12
|
-
<Canvas>
|
|
13
|
-
<TextField label="Laborum excepteur" />
|
|
14
|
-
</Canvas>
|
|
15
|
-
|
|
16
|
-
## Description
|
|
17
|
-
|
|
18
|
-
```jsx
|
|
19
|
-
<TextField label="Laborum excepteur" description="Cillum mollit" />
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
<Canvas>
|
|
23
|
-
<TextField label="Laborum excepteur" description="Cillum mollit" />
|
|
24
|
-
</Canvas>
|
|
25
|
-
|
|
26
|
-
## Errors
|
|
27
|
-
|
|
28
|
-
```jsx
|
|
29
|
-
<TextField
|
|
30
|
-
label="Laborum excepteur"
|
|
31
|
-
description="Cillum mollit"
|
|
32
|
-
error="TextField error"
|
|
33
|
-
/>
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
<Canvas>
|
|
37
|
-
<TextField
|
|
38
|
-
label="Laborum excepteur"
|
|
39
|
-
description="Cillum mollit"
|
|
40
|
-
error="TextField error"
|
|
41
|
-
/>
|
|
42
|
-
</Canvas>
|
|
43
|
-
|
|
44
|
-
## Sizing
|
|
45
|
-
|
|
46
|
-
```jsx
|
|
47
|
-
<TextField
|
|
48
|
-
size="small"
|
|
49
|
-
label="Laborum excepteur"
|
|
50
|
-
description="Cillum mollit"
|
|
51
|
-
error="TextField error"
|
|
52
|
-
/>
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
<Canvas>
|
|
56
|
-
<TextField
|
|
57
|
-
size="small"
|
|
58
|
-
label="Laborum excepteur"
|
|
59
|
-
description="Cillum mollit"
|
|
60
|
-
error="TextField error"
|
|
61
|
-
/>
|
|
62
|
-
</Canvas>
|
|
63
|
-
|
|
64
|
-
## hideLabel
|
|
65
|
-
|
|
66
|
-
Ved bruk av `hideLabel` på TextField kan man gjøre slik at label/description bare vises for skjermlesere
|
|
67
|
-
|
|
68
|
-
```jsx
|
|
69
|
-
<TextField label="Laborum excepteur" description="Cillum mollit" hideLabel />
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
<Canvas>
|
|
73
|
-
<TextField label="Laborum excepteur" description="Cillum mollit" hideLabel />
|
|
74
|
-
</Canvas>
|
|
75
|
-
|
|
76
|
-
## Disabled
|
|
77
|
-
|
|
78
|
-
NOTE: Husk at disabled bør unngås!
|
|
79
|
-
|
|
80
|
-
```jsx
|
|
81
|
-
<TextField label="Laborum excepteur" description="Cillum mollit" disabled />
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
<Canvas>
|
|
85
|
-
<TextField label="Laborum excepteur" description="Cillum mollit" disabled />
|
|
86
|
-
</Canvas>
|
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
import { Meta, Canvas } from "@storybook/addon-docs";
|
|
2
|
-
import { Select, Textarea } from "../index";
|
|
3
|
-
|
|
4
|
-
<Meta title="ds-react/form/textarea/intro" />
|
|
5
|
-
|
|
6
|
-
# Hvordan ta i bruk Textarea
|
|
7
|
-
|
|
8
|
-
```jsx
|
|
9
|
-
<Textarea
|
|
10
|
-
label="In anim elit"
|
|
11
|
-
value={value}
|
|
12
|
-
onChange={(e) => setValue(e.target.value)}
|
|
13
|
-
/>
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
<Canvas>
|
|
17
|
-
<Textarea
|
|
18
|
-
label="In anim elit"
|
|
19
|
-
value="Ullamco culpa officia incididunt consectetur voluptate consectetur eiusmod incididunt. Irure velit nulla est sit sit. In qui qui exercitation voluptate magna id officia pariatur est minim nostrud deserunt fugiat dolor. Proident cillum anim veniam quis tempor labore. Amet cupidatat cillum amet Lorem fugiat sit id esse magna fugiat qui cillum incididunt."
|
|
20
|
-
onChange={() => null}
|
|
21
|
-
/>
|
|
22
|
-
</Canvas>
|
|
23
|
-
|
|
24
|
-
## Description
|
|
25
|
-
|
|
26
|
-
```jsx
|
|
27
|
-
<Textarea
|
|
28
|
-
label="In anim elit"
|
|
29
|
-
description="Reprehenderit esse proident"
|
|
30
|
-
value={value}
|
|
31
|
-
onChange={(e) => setValue(e.target.value)}
|
|
32
|
-
/>
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
<Canvas>
|
|
36
|
-
<Textarea
|
|
37
|
-
label="In anim elit"
|
|
38
|
-
description="Reprehenderit esse proident"
|
|
39
|
-
value="Ullamco culpa officia incididunt consectetur voluptate consectetur eiusmod incididunt. Irure velit nulla est sit sit. In qui qui exercitation voluptate magna id officia pariatur est minim nostrud deserunt fugiat dolor. Proident cillum anim veniam quis tempor labore. Amet cupidatat cillum amet Lorem fugiat sit id esse magna fugiat qui cillum incididunt."
|
|
40
|
-
onChange={() => null}
|
|
41
|
-
/>
|
|
42
|
-
</Canvas>
|
|
43
|
-
|
|
44
|
-
## maxLength
|
|
45
|
-
|
|
46
|
-
Viser en liten counter i nedre høyre hjørne. Markeres med røst ved for mange tegn, men fungerer bare som en
|
|
47
|
-
visuell validering.
|
|
48
|
-
|
|
49
|
-
```jsx
|
|
50
|
-
<Textarea
|
|
51
|
-
label="In anim elit"
|
|
52
|
-
description="Reprehenderit esse proident"
|
|
53
|
-
value={value}
|
|
54
|
-
maxLength={400}
|
|
55
|
-
onChange={(e) => setValue(e.target.value)}
|
|
56
|
-
/>
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
<Canvas>
|
|
60
|
-
<Textarea
|
|
61
|
-
label="In anim elit"
|
|
62
|
-
description="Reprehenderit esse proident"
|
|
63
|
-
maxLength={400}
|
|
64
|
-
value="Ullamco culpa officia incididunt consectetur voluptate consectetur eiusmod incididunt. Irure velit nulla est sit sit. In qui qui exercitation voluptate magna id officia pariatur est minim nostrud deserunt fugiat dolor. Proident cillum anim veniam quis tempor labore. Amet cupidatat cillum amet Lorem fugiat sit id esse magna fugiat qui cillum incididunt."
|
|
65
|
-
onChange={() => null}
|
|
66
|
-
/>
|
|
67
|
-
</Canvas>
|
|
68
|
-
|
|
69
|
-
## Errors
|
|
70
|
-
|
|
71
|
-
```jsx
|
|
72
|
-
<Textarea
|
|
73
|
-
label="In anim elit"
|
|
74
|
-
description="Reprehenderit esse proident"
|
|
75
|
-
error="Textarea error"
|
|
76
|
-
value={value}
|
|
77
|
-
maxLength={400}
|
|
78
|
-
onChange={(e) => setValue(e.target.value)}
|
|
79
|
-
/>
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
<Canvas>
|
|
83
|
-
<Textarea
|
|
84
|
-
label="In anim elit"
|
|
85
|
-
description="Reprehenderit esse proident"
|
|
86
|
-
error="Textarea error"
|
|
87
|
-
maxLength={400}
|
|
88
|
-
value="Ullamco culpa officia incididunt consectetur voluptate consectetur eiusmod incididunt. Irure velit nulla est sit sit. In qui qui exercitation voluptate magna id officia pariatur est minim nostrud deserunt fugiat dolor. Proident cillum anim veniam quis tempor labore. Amet cupidatat cillum amet Lorem fugiat sit id esse magna fugiat qui cillum incididunt."
|
|
89
|
-
onChange={() => null}
|
|
90
|
-
/>
|
|
91
|
-
</Canvas>
|
|
92
|
-
|
|
93
|
-
## Sizing
|
|
94
|
-
|
|
95
|
-
```jsx
|
|
96
|
-
<Textarea
|
|
97
|
-
label="In anim elit"
|
|
98
|
-
description="Reprehenderit esse proident"
|
|
99
|
-
value={value}
|
|
100
|
-
maxLength={400}
|
|
101
|
-
size="small"
|
|
102
|
-
onChange={(e) => setValue(e.target.value)}
|
|
103
|
-
/>
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
<Canvas>
|
|
107
|
-
<Textarea
|
|
108
|
-
label="In anim elit"
|
|
109
|
-
description="Reprehenderit esse proident"
|
|
110
|
-
maxLength={400}
|
|
111
|
-
size="small"
|
|
112
|
-
value="Ullamco culpa officia incididunt consectetur voluptate consectetur eiusmod incididunt. Irure velit nulla est sit sit. In qui qui exercitation voluptate magna id officia pariatur est minim nostrud deserunt fugiat dolor. Proident cillum anim veniam quis tempor labore. Amet cupidatat cillum amet Lorem fugiat sit id esse magna fugiat qui cillum incididunt."
|
|
113
|
-
onChange={() => null}
|
|
114
|
-
/>
|
|
115
|
-
</Canvas>
|
|
116
|
-
|
|
117
|
-
## hideLabel
|
|
118
|
-
|
|
119
|
-
Ved bruk av `hideLabel` på TextField kan man gjøre slik at label/description bare vises for skjermlesere
|
|
120
|
-
|
|
121
|
-
```jsx
|
|
122
|
-
<Textarea
|
|
123
|
-
label="In anim elit"
|
|
124
|
-
description="Reprehenderit esse proident"
|
|
125
|
-
value={value}
|
|
126
|
-
maxLength={400}
|
|
127
|
-
hideLabel
|
|
128
|
-
onChange={(e) => setValue(e.target.value)}
|
|
129
|
-
/>
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
<Canvas>
|
|
133
|
-
<Textarea
|
|
134
|
-
label="In anim elit"
|
|
135
|
-
description="Reprehenderit esse proident"
|
|
136
|
-
maxLength={400}
|
|
137
|
-
hideLabel
|
|
138
|
-
value="Ullamco culpa officia incididunt consectetur voluptate consectetur eiusmod incididunt. Irure velit nulla est sit sit. In qui qui exercitation voluptate magna id officia pariatur est minim nostrud deserunt fugiat dolor. Proident cillum anim veniam quis tempor labore. Amet cupidatat cillum amet Lorem fugiat sit id esse magna fugiat qui cillum incididunt."
|
|
139
|
-
onChange={() => null}
|
|
140
|
-
/>
|
|
141
|
-
</Canvas>
|
|
142
|
-
|
|
143
|
-
## Disabled
|
|
144
|
-
|
|
145
|
-
NOTE: Husk at disabled bør unngås!
|
|
146
|
-
|
|
147
|
-
```jsx
|
|
148
|
-
<Textarea
|
|
149
|
-
label="In anim elit"
|
|
150
|
-
description="Reprehenderit esse proident"
|
|
151
|
-
value={value}
|
|
152
|
-
maxLength={400}
|
|
153
|
-
disabled
|
|
154
|
-
onChange={(e) => setValue(e.target.value)}
|
|
155
|
-
/>
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
<Canvas>
|
|
159
|
-
<Textarea
|
|
160
|
-
label="In anim elit"
|
|
161
|
-
description="Reprehenderit esse proident"
|
|
162
|
-
maxLength={400}
|
|
163
|
-
disabled
|
|
164
|
-
value="Ullamco culpa officia incididunt consectetur voluptate consectetur eiusmod incididunt. Irure velit nulla est sit sit. In qui qui exercitation voluptate magna id officia pariatur est minim nostrud deserunt fugiat dolor. Proident cillum anim veniam quis tempor labore. Amet cupidatat cillum amet Lorem fugiat sit id esse magna fugiat qui cillum incididunt."
|
|
165
|
-
onChange={() => null}
|
|
166
|
-
/>
|
|
167
|
-
</Canvas>
|