@navikt/ds-react 0.17.21 → 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 +3 -3
- package/src/form/error-summary/error-summary.stories.tsx +42 -0
- package/src/form/search/search.stories.tsx +124 -83
- 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/search/search-themes.stories.tsx +0 -52
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "0.17.
|
|
3
|
+
"version": "0.17.22",
|
|
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.10",
|
|
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",
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"@types/react": "^17.0.30",
|
|
70
70
|
"react": "^17.0.0 || ^18.0.0"
|
|
71
71
|
},
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "c6c721a469948d436d2811652492da23862efdcd"
|
|
73
73
|
}
|
|
@@ -0,0 +1,42 @@
|
|
|
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
|
+
argTypes: {
|
|
8
|
+
headingTag: {
|
|
9
|
+
control: {
|
|
10
|
+
type: "text",
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
size: {
|
|
14
|
+
control: {
|
|
15
|
+
type: "radio",
|
|
16
|
+
options: ["medium", "small"],
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
} as Meta;
|
|
21
|
+
|
|
22
|
+
export const Default = (props) => (
|
|
23
|
+
<ErrorSummary
|
|
24
|
+
heading="Feiloppsummering komponent"
|
|
25
|
+
headingTag={props.headingTag || "h2"}
|
|
26
|
+
size={props.size ?? undefined}
|
|
27
|
+
>
|
|
28
|
+
<ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
|
|
29
|
+
<ErrorSummary.Item href="#2">
|
|
30
|
+
Tekstfeltet må ha en godkjent e-mail
|
|
31
|
+
</ErrorSummary.Item>
|
|
32
|
+
</ErrorSummary>
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
export const Small = () => (
|
|
36
|
+
<ErrorSummary heading="Feiloppsummering komponent" size="small">
|
|
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
|
+
);
|
|
@@ -3,99 +3,140 @@ import React, { useState } from "react";
|
|
|
3
3
|
|
|
4
4
|
import { Search } from "../index";
|
|
5
5
|
export default {
|
|
6
|
-
title: "ds-react/
|
|
6
|
+
title: "ds-react/Form/Search",
|
|
7
7
|
component: Search,
|
|
8
|
+
argTypes: {
|
|
9
|
+
clearButton: {
|
|
10
|
+
control: {
|
|
11
|
+
type: "boolean",
|
|
12
|
+
},
|
|
13
|
+
},
|
|
14
|
+
size: {
|
|
15
|
+
control: {
|
|
16
|
+
type: "radio",
|
|
17
|
+
options: ["medium", "small"],
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
variant: {
|
|
21
|
+
control: {
|
|
22
|
+
type: "radio",
|
|
23
|
+
options: ["primary", "secondary", "simple"],
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
},
|
|
8
27
|
} as Meta;
|
|
9
28
|
|
|
10
|
-
export const
|
|
11
|
-
const [
|
|
29
|
+
export const Default = (props) => {
|
|
30
|
+
const [state, setState] = useState("");
|
|
12
31
|
return (
|
|
13
|
-
<div
|
|
14
|
-
style={{
|
|
15
|
-
display: "flex",
|
|
16
|
-
alignItems: "center",
|
|
17
|
-
flexDirection: "column",
|
|
18
|
-
maxWidth: 400,
|
|
19
|
-
}}
|
|
20
|
-
>
|
|
21
|
-
<h1>Search</h1>
|
|
22
|
-
|
|
23
|
-
<Search label="Søk alle sider om X og Y" onSearch={console.log}></Search>
|
|
24
|
-
<h2>Secondary</h2>
|
|
32
|
+
<div data-theme={props.darkmode ? "dark" : "light"}>
|
|
25
33
|
<Search
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
34
|
+
value={props.controlled ? state : undefined}
|
|
35
|
+
onChange={props.controlled ? setState : null}
|
|
36
|
+
onSearch={(v) => console.log({ onSearch: v })}
|
|
37
|
+
label="Søk"
|
|
38
|
+
size={props.size}
|
|
39
|
+
clearButton={props.clearButton}
|
|
40
|
+
variant={props.variant}
|
|
41
|
+
hideLabel={props.hideLabel}
|
|
42
|
+
/>
|
|
43
|
+
</div>
|
|
44
|
+
);
|
|
45
|
+
};
|
|
30
46
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
></Search>
|
|
47
|
+
Default.args = {
|
|
48
|
+
controlled: false,
|
|
49
|
+
darkmode: false,
|
|
50
|
+
hideLabel: true,
|
|
51
|
+
};
|
|
37
52
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
<
|
|
47
|
-
<Search
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
export const Small = () => (
|
|
54
|
+
<div className="rowgap">
|
|
55
|
+
<div className="colgap">
|
|
56
|
+
<Search label="Søk" size="small" />
|
|
57
|
+
<Search label="Søk" variant="secondary" size="small" />
|
|
58
|
+
<Search label="Søk" variant="simple" size="small" />
|
|
59
|
+
</div>
|
|
60
|
+
<div className="colgap" data-theme="dark">
|
|
61
|
+
<Search label="Søk" size="small" />
|
|
62
|
+
<Search label="Søk" variant="secondary" size="small" />
|
|
63
|
+
<Search label="Søk" variant="simple" size="small" />
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
);
|
|
67
|
+
|
|
68
|
+
export const Variants = () => (
|
|
69
|
+
<div className="rowgap">
|
|
70
|
+
<div className="colgap">
|
|
71
|
+
<Search label="Søk" />
|
|
72
|
+
<Search label="Søk" variant="secondary" />
|
|
73
|
+
<Search label="Søk" variant="simple" />
|
|
74
|
+
</div>
|
|
75
|
+
<div className="colgap" data-theme="dark">
|
|
76
|
+
<Search label="Søk" />
|
|
77
|
+
<Search label="Søk" variant="secondary" />
|
|
78
|
+
<Search label="Søk" variant="simple" />
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
);
|
|
82
|
+
|
|
83
|
+
export const Placeholder = () => (
|
|
84
|
+
<div className="rowgap">
|
|
85
|
+
<div className="colgap">
|
|
86
|
+
<Search label="Søk" placeholder="Søk" />
|
|
87
|
+
</div>
|
|
88
|
+
<div className="colgap" data-theme="dark">
|
|
89
|
+
<Search label="Søk" placeholder="Søk" />
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
);
|
|
93
|
+
|
|
94
|
+
export const Text = () => (
|
|
95
|
+
<div className="rowgap">
|
|
96
|
+
<div className="colgap">
|
|
97
|
+
<Search label="Søk" value="Søketekst" />
|
|
98
|
+
<Search label="Søk" variant="secondary" value="Søketekst" />
|
|
99
|
+
<Search label="Søk" variant="simple" value="Søketekst" />
|
|
100
|
+
</div>
|
|
101
|
+
<div className="colgap" data-theme="dark">
|
|
102
|
+
<Search label="Søk" value="Søketekst" />
|
|
103
|
+
<Search label="Søk" variant="secondary" value="Søketekst" />
|
|
104
|
+
<Search label="Søk" variant="simple" value="Søketekst" />
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
);
|
|
56
108
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
109
|
+
export const WLabel = () => (
|
|
110
|
+
<div className="rowgap">
|
|
111
|
+
<div className="colgap">
|
|
112
|
+
<Search label="Label søk" variant="simple" hideLabel={false} />
|
|
61
113
|
<Search
|
|
62
|
-
label="
|
|
114
|
+
label="Label søk"
|
|
115
|
+
description="Description søk"
|
|
116
|
+
variant="simple"
|
|
63
117
|
hideLabel={false}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
<h2>Hidelabel false</h2>
|
|
69
|
-
<Search label="Søk alle sider om X og Y" hideLabel={false}>
|
|
70
|
-
<Search.Button />
|
|
71
|
-
</Search>
|
|
72
|
-
<h2>Controlled state </h2>
|
|
73
|
-
<Search
|
|
74
|
-
value={value}
|
|
75
|
-
label="Søk alle sider om X og Y"
|
|
76
|
-
description="Beskrivelse av søket"
|
|
77
|
-
onChange={(e) => setValue(e)}
|
|
78
|
-
onClear={() => setValue("")}
|
|
79
|
-
>
|
|
80
|
-
<Search.Button />
|
|
81
|
-
</Search>
|
|
82
|
-
<h2>No clear button</h2>
|
|
118
|
+
/>
|
|
119
|
+
</div>
|
|
120
|
+
<div className="colgap" data-theme="dark">
|
|
121
|
+
<Search label="Label søk" variant="simple" hideLabel={false} />
|
|
83
122
|
<Search
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
<Search.Button />
|
|
90
|
-
</Search>
|
|
123
|
+
label="Label søk"
|
|
124
|
+
description="Description søk"
|
|
125
|
+
variant="simple"
|
|
126
|
+
hideLabel={false}
|
|
127
|
+
/>
|
|
91
128
|
</div>
|
|
92
|
-
|
|
93
|
-
|
|
129
|
+
</div>
|
|
130
|
+
);
|
|
94
131
|
|
|
95
|
-
export const
|
|
96
|
-
|
|
97
|
-
<Search label="
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
}
|
|
132
|
+
export const NoClearButton = () => (
|
|
133
|
+
<div className="colgap">
|
|
134
|
+
<Search label="Label søk" clearButton={false} value="søketekst" />
|
|
135
|
+
<Search
|
|
136
|
+
label="Label søk"
|
|
137
|
+
variant="simple"
|
|
138
|
+
clearButton={false}
|
|
139
|
+
value="søketekst"
|
|
140
|
+
/>
|
|
141
|
+
</div>
|
|
142
|
+
);
|
|
@@ -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,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
|
-
};
|