@navikt/ds-react 0.17.19 → 0.17.22
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 +12 -12
- 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/error-summary/error-summary.stories.tsx +42 -0
- package/src/form/radio/Radio.test.tsx +7 -4
- package/src/form/radio/radio.stories.tsx +82 -0
- package/src/form/search/search.stories.tsx +124 -83
- 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/error-summary/stories/error-summary.stories.mdx +0 -54
- package/src/form/error-summary/stories/error-summary.stories.tsx +0 -28
- package/src/form/radio/stories/radio.stories.mdx +0 -173
- package/src/form/radio/stories/radio.stories.tsx +0 -51
- package/src/form/search/search-themes.stories.tsx +0 -52
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { Meta, Canvas } from "@storybook/addon-docs";
|
|
2
|
-
import { ErrorSummary } from "../index";
|
|
3
|
-
|
|
4
|
-
<Meta title="ds-react/form/errorsummary/intro" />
|
|
5
|
-
|
|
6
|
-
# Hvordan ta i bruk ErrorSummary
|
|
7
|
-
|
|
8
|
-
`href` på `ErrorSummary.Item` linker til id som er satt på skjema-elementer.
|
|
9
|
-
|
|
10
|
-
```jsx
|
|
11
|
-
<ErrorSummary heading="Eiusmod est cillum mollit pariatur deserunt">
|
|
12
|
-
<ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
|
|
13
|
-
<ErrorSummary.Item href="#2">
|
|
14
|
-
Tekstfeltet må ha en godkjent e-mail
|
|
15
|
-
</ErrorSummary.Item>
|
|
16
|
-
</ErrorSummary>
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
<Canvas>
|
|
20
|
-
<ErrorSummary heading="Eiusmod est cillum mollit pariatur deserunt">
|
|
21
|
-
<ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
|
|
22
|
-
<ErrorSummary.Item href="#2">
|
|
23
|
-
Tekstfeltet må ha en godkjent e-mail
|
|
24
|
-
</ErrorSummary.Item>
|
|
25
|
-
</ErrorSummary>
|
|
26
|
-
</Canvas>
|
|
27
|
-
|
|
28
|
-
## Custom headingTag
|
|
29
|
-
|
|
30
|
-
`headingTag` lar deg sette heading til en annen html-tag en default "h2"
|
|
31
|
-
|
|
32
|
-
```jsx
|
|
33
|
-
<ErrorSummary
|
|
34
|
-
heading="Eiusmod est cillum mollit pariatur deserunt"
|
|
35
|
-
headingTag="h3"
|
|
36
|
-
>
|
|
37
|
-
<ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
|
|
38
|
-
<ErrorSummary.Item href="#2">
|
|
39
|
-
Tekstfeltet må ha en godkjent e-mail
|
|
40
|
-
</ErrorSummary.Item>
|
|
41
|
-
</ErrorSummary>
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
<Canvas>
|
|
45
|
-
<ErrorSummary
|
|
46
|
-
heading="Eiusmod est cillum mollit pariatur deserunt"
|
|
47
|
-
headingTag="h3"
|
|
48
|
-
>
|
|
49
|
-
<ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
|
|
50
|
-
<ErrorSummary.Item href="#2">
|
|
51
|
-
Tekstfeltet må ha en godkjent e-mail
|
|
52
|
-
</ErrorSummary.Item>
|
|
53
|
-
</ErrorSummary>
|
|
54
|
-
</Canvas>
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { Meta } from "@storybook/react/types-6-0";
|
|
3
|
-
import { ErrorSummary } from "..";
|
|
4
|
-
export default {
|
|
5
|
-
title: "ds-react/form/errorsummary",
|
|
6
|
-
component: ErrorSummary,
|
|
7
|
-
} as Meta;
|
|
8
|
-
|
|
9
|
-
export const All = () => {
|
|
10
|
-
return (
|
|
11
|
-
<>
|
|
12
|
-
<h1>Error summary</h1>
|
|
13
|
-
<ErrorSummary heading="Feiloppsummering komponent" headingTag="h4">
|
|
14
|
-
<ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
|
|
15
|
-
<ErrorSummary.Item href="#2">
|
|
16
|
-
Tekstfeltet må ha en godkjent e-mail
|
|
17
|
-
</ErrorSummary.Item>
|
|
18
|
-
</ErrorSummary>
|
|
19
|
-
<h2>size small</h2>
|
|
20
|
-
<ErrorSummary size="small" heading="Feiloppsummering komponent">
|
|
21
|
-
<ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
|
|
22
|
-
<ErrorSummary.Item href="#2">
|
|
23
|
-
Tekstfeltet må ha en godkjent e-mail
|
|
24
|
-
</ErrorSummary.Item>
|
|
25
|
-
</ErrorSummary>
|
|
26
|
-
</>
|
|
27
|
-
);
|
|
28
|
-
};
|
|
@@ -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
|
-
};
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { Meta } from "@storybook/react/types-6-0";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { Heading } from "../..";
|
|
4
|
-
import { Search } from "..";
|
|
5
|
-
|
|
6
|
-
export default {
|
|
7
|
-
title: "ds-react/form/search",
|
|
8
|
-
component: Search,
|
|
9
|
-
} as Meta;
|
|
10
|
-
|
|
11
|
-
export const LightTheme = () => (
|
|
12
|
-
<div
|
|
13
|
-
style={{ maxWidth: 400, display: "flex", flexDirection: "column", gap: 16 }}
|
|
14
|
-
>
|
|
15
|
-
<Heading size="xlarge">Search</Heading>
|
|
16
|
-
<Heading level="2" size="large">
|
|
17
|
-
size medium
|
|
18
|
-
</Heading>
|
|
19
|
-
<Search label="hidden label" placeholder="Søk" />
|
|
20
|
-
<Search label="hidden label" variant="secondary" defaultValue="dagpenger" />
|
|
21
|
-
<Search label="hidden label" variant="simple" placeholder="Søk" />
|
|
22
|
-
<Search label="with label" hideLabel={false} />
|
|
23
|
-
|
|
24
|
-
<Heading level="2" size="large">
|
|
25
|
-
size small
|
|
26
|
-
</Heading>
|
|
27
|
-
<Search label="hidden label" size="small" placeholder="Søk" />
|
|
28
|
-
<Search
|
|
29
|
-
label="hidden label"
|
|
30
|
-
variant="secondary"
|
|
31
|
-
size="small"
|
|
32
|
-
defaultValue="dagpenger"
|
|
33
|
-
/>
|
|
34
|
-
<Search
|
|
35
|
-
label="hidden label"
|
|
36
|
-
variant="simple"
|
|
37
|
-
size="small"
|
|
38
|
-
placeholder="Søk"
|
|
39
|
-
/>
|
|
40
|
-
<Search label="with label" hideLabel={false} size="small" />
|
|
41
|
-
</div>
|
|
42
|
-
);
|
|
43
|
-
|
|
44
|
-
export const DarkTheme = () => (
|
|
45
|
-
<div data-theme="dark">
|
|
46
|
-
<LightTheme />
|
|
47
|
-
</div>
|
|
48
|
-
);
|
|
49
|
-
|
|
50
|
-
DarkTheme.parameters = {
|
|
51
|
-
backgrounds: { default: "dark" },
|
|
52
|
-
};
|