@navikt/ds-react 0.17.19 → 0.17.20

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.
Files changed (12) hide show
  1. package/package.json +12 -12
  2. package/src/accordion/accordion.stories.tsx +82 -70
  3. package/src/alert/alert.stories.tsx +85 -95
  4. package/src/button/button.stories.tsx +142 -130
  5. package/src/card/stories/card.stories.mdx +1 -1
  6. package/src/card/stories/card.stories.tsx +1 -1
  7. package/src/form/checkbox/Checkbox.test.tsx +12 -8
  8. package/src/form/radio/Radio.test.tsx +7 -4
  9. package/src/page-header/stories/header.stories.mdx +1 -1
  10. package/src/page-header/stories/header.stories.tsx +1 -1
  11. package/src/step-indicator/stories/step-indicator.stories.mdx +1 -1
  12. package/src/step-indicator/stories/step-indicator.stories.tsx +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-react",
3
- "version": "0.17.19",
3
+ "version": "0.17.20",
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.7",
39
+ "@navikt/ds-icons": "^0.8.8",
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",
@@ -48,26 +48,26 @@
48
48
  "uuid": "^8.3.2"
49
49
  },
50
50
  "devDependencies": {
51
- "@testing-library/jest-dom": "^5.14.1",
52
- "@testing-library/react": "^12.1.0",
53
- "@testing-library/user-event": "^13.2.1",
54
- "@types/faker": "^5.5.8",
51
+ "@testing-library/jest-dom": "^5.16.0",
52
+ "@testing-library/react": "^13.0.0",
53
+ "@testing-library/user-event": "^14.0.0",
54
+ "@types/faker": "5.5.8",
55
55
  "@types/jest": "^27.0.1",
56
56
  "@types/react-collapse": "^5.0.1",
57
57
  "@types/react-modal": "^3.13.1",
58
58
  "@types/styled-components": "^5.1.14",
59
59
  "copyfiles": "^2.4.1",
60
- "faker": "^5.5.3",
61
- "jest": "^27.2.0",
62
- "react-router-dom": "^6.1.0",
60
+ "faker": "5.5.3",
61
+ "jest": "^27.5.0",
62
+ "react-router-dom": "^6.3.0",
63
63
  "rimraf": "3.0.2",
64
64
  "styled-components": "^5.3.1",
65
65
  "swr": "^1.1.2",
66
- "ts-jest": "^27.0.5"
66
+ "ts-jest": "^27.1.0"
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": "31bd40c02cde72ad9aeea011a2005ba8660718cc"
72
+ "gitHead": "3daa36efa72838b104d80bfaf259723773d11655"
73
73
  }
package/src/accordion/accordion.stories.tsx CHANGED
@@ -5,7 +5,7 @@ import AccordionItem from "./AccordionItem";
5
5
  import { Accordion } from ".";
6
6
 
7
7
  export default {
8
- title: "ds-react/accordion",
8
+ title: "ds-react/Accordion",
9
9
  component: Accordion,
10
10
  subcomponents: {
11
11
  AccordionItem,
@@ -14,77 +14,89 @@ export default {
14
14
  },
15
15
  };
16
16
 
17
- export const All = () => {
17
+ const Content = () => (
18
+ <Accordion.Content>
19
+ Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
20
+ laboris voluptate officia pariatur.Lorem est ex anim velit occaecat nisi qui
21
+ nostrud sit consectetur consectetur officia nostrud ullamco. Est ex duis
22
+ proident nostrud elit qui laborum anim minim eu eiusmod. Veniam in nostrud
23
+ sunt tempor velit incididunt sint ex dolor qui velit id eu. Deserunt magna
24
+ sunt velit in. Est exercitation id cillum qui do. Minim adipisicing nostrud
25
+ commodo proident occaecat aliquip nulla anim proident reprehenderit. Magna
26
+ ipsum officia veniam cupidatat duis veniam dolore reprehenderit mollit
27
+ velit.Ut consequat commodo minim occaecat id pariatur. Nisi enim tempor
28
+ laborum commodo. Tempor sit quis nostrud eu cupidatat sunt commodo
29
+ reprehenderit irure deserunt eiusmod ipsum. Exercitation quis commodo cillum
30
+ eiusmod eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
31
+ </Accordion.Content>
32
+ );
33
+
34
+ export const Default = (props) => {
35
+ const [open, setOpen] = useState(false);
36
+
37
+ const Item = () =>
38
+ props.controlled ? (
39
+ <Accordion.Item
40
+ open={open}
41
+ renderContentWhenClosed={props.renderContentWhenClosed}
42
+ >
43
+ <Accordion.Header onClick={() => setOpen(!open)}>
44
+ Accordion header text
45
+ </Accordion.Header>
46
+ <Content />
47
+ </Accordion.Item>
48
+ ) : (
49
+ <Accordion.Item renderContentWhenClosed={props.renderContentWhenClosed}>
50
+ <Accordion.Header>Accordion header text</Accordion.Header>
51
+ <Content />
52
+ </Accordion.Item>
53
+ );
54
+ return (
55
+ <Accordion>
56
+ {[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
57
+ <Item key={y} />
58
+ ))}
59
+ </Accordion>
60
+ );
61
+ };
62
+
63
+ Default.args = {
64
+ controlled: false,
65
+ renderContentWhenClosed: false,
66
+ nItems: 2,
67
+ };
68
+
69
+ export const Controlled = () => {
18
70
  const [open, setOpen] = useState(false);
71
+ const [open2, setOpen2] = useState(false);
19
72
 
20
73
  return (
21
- <>
22
- <h1>Accordion</h1>
23
- <h2>Controlled</h2>
24
- <Accordion>
25
- <Accordion.Item open={open}>
26
- <Accordion.Header onClick={() => setOpen(!open)}>
27
- Accordion header text
28
- </Accordion.Header>
29
- <Accordion.Content>
30
- Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
31
- officia laboris voluptate officia pariatur.Lorem est ex anim velit
32
- occaecat nisi qui nostrud sit consectetur consectetur officia
33
- nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
34
- minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
35
- sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
36
- exercitation id cillum qui do. Minim adipisicing nostrud commodo
37
- proident occaecat aliquip nulla anim proident reprehenderit. Magna
38
- ipsum officia veniam cupidatat duis veniam dolore reprehenderit
39
- mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
40
- enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
41
- sunt commodo reprehenderit irure deserunt eiusmod ipsum.
42
- Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
43
- proident commodo adipisicing eiusmod id.
44
- </Accordion.Content>
45
- </Accordion.Item>
46
- </Accordion>
47
- <h2>Un-controlled</h2>
48
- <Accordion>
49
- <Accordion.Item>
50
- <Accordion.Header>Accordion header text</Accordion.Header>
51
- <Accordion.Content>
52
- Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
53
- officia laboris voluptate officia pariatur.Lorem est ex anim velit
54
- occaecat nisi qui nostrud sit consectetur consectetur officia
55
- nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
56
- minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
57
- sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
58
- exercitation id cillum qui do. Minim adipisicing nostrud commodo
59
- proident occaecat aliquip nulla anim proident reprehenderit. Magna
60
- ipsum officia veniam cupidatat duis veniam dolore reprehenderit
61
- mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
62
- enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
63
- sunt commodo reprehenderit irure deserunt eiusmod ipsum.
64
- Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
65
- proident commodo adipisicing eiusmod id.
66
- </Accordion.Content>
67
- </Accordion.Item>
68
- <Accordion.Item>
69
- <Accordion.Header>Accordion header text</Accordion.Header>
70
- <Accordion.Content>
71
- Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
72
- officia laboris voluptate officia pariatur.Lorem est ex anim velit
73
- occaecat nisi qui nostrud sit consectetur consectetur officia
74
- nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
75
- minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
76
- sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
77
- exercitation id cillum qui do. Minim adipisicing nostrud commodo
78
- proident occaecat aliquip nulla anim proident reprehenderit. Magna
79
- ipsum officia veniam cupidatat duis veniam dolore reprehenderit
80
- mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
81
- enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
82
- sunt commodo reprehenderit irure deserunt eiusmod ipsum.
83
- Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
84
- proident commodo adipisicing eiusmod id.
85
- </Accordion.Content>
86
- </Accordion.Item>
87
- </Accordion>
88
- </>
74
+ <Accordion>
75
+ <Accordion.Item open={open}>
76
+ <Accordion.Header onClick={() => setOpen(!open)}>
77
+ Accordion header text
78
+ </Accordion.Header>
79
+ <Content />
80
+ </Accordion.Item>
81
+ <Accordion.Item open={open2}>
82
+ <Accordion.Header onClick={() => setOpen2(!open2)}>
83
+ Accordion header text
84
+ </Accordion.Header>
85
+ <Content />
86
+ </Accordion.Item>
87
+ </Accordion>
89
88
  );
90
89
  };
90
+
91
+ export const Uncontrolled = () => (
92
+ <Accordion>
93
+ <Accordion.Item>
94
+ <Accordion.Header>Accordion header text</Accordion.Header>
95
+ <Content />
96
+ </Accordion.Item>
97
+ <Accordion.Item>
98
+ <Accordion.Header>Accordion header text</Accordion.Header>
99
+ <Content />
100
+ </Accordion.Item>
101
+ </Accordion>
102
+ );
package/src/alert/alert.stories.tsx CHANGED
@@ -1,9 +1,9 @@
1
1
  import React from "react";
2
2
  import { Alert } from ".";
3
- import { BodyLong, Heading } from "..";
3
+ import { BodyLong, Heading as DsHeading } from "..";
4
4
 
5
5
  export default {
6
- title: "ds-react/alert",
6
+ title: "ds-react/Alert",
7
7
  component: Alert,
8
8
  };
9
9
 
@@ -14,111 +14,101 @@ const variants: Array<"error" | "warning" | "info" | "success"> = [
14
14
  "success",
15
15
  ];
16
16
 
17
- export const All = () => {
17
+ export const Default = (props) => (
18
+ <Alert
19
+ variant={props.variant}
20
+ size={props.size}
21
+ fullWidth={props.fullWidth}
22
+ inline={props.inline}
23
+ >
24
+ {props.children}
25
+ </Alert>
26
+ );
27
+
28
+ Default.args = {
29
+ variant: "info",
30
+ children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
31
+ };
32
+
33
+ export const Small = () => {
18
34
  return (
19
- <>
20
- <h1>Alert</h1>
35
+ <div className="colgap">
21
36
  {variants.map((variant, i) => (
22
- <Alert key={variant} variant={variant}>
37
+ <Alert key={variant} variant={variant} size="small">
23
38
  {new Array(i + 1).fill(
24
39
  "Id elit esse enim reprehenderit enim nisi veniam nostrud."
25
40
  )}
26
41
  </Alert>
27
42
  ))}
28
- <h2>Small</h2>
29
- <div>
30
- {variants.map((variant, i) => (
31
- <Alert key={variant} variant={variant} size="small">
32
- {new Array(i + 1).fill(
33
- "Id elit esse enim reprehenderit enim nisi veniam nostrud."
34
- )}
35
- </Alert>
36
- ))}
37
- </div>
38
- <h2>Alert fullWidth</h2>
43
+ </div>
44
+ );
45
+ };
46
+
47
+ export const FullWidth = () => {
48
+ return (
49
+ <div className="colgap">
39
50
  {variants.map((variant, i) => (
40
- <Alert fullWidth key={variant} variant={variant}>
51
+ <Alert key={variant} variant={variant} fullWidth>
41
52
  {new Array(i + 1).fill(
42
53
  "Id elit esse enim reprehenderit enim nisi veniam nostrud."
43
54
  )}
44
55
  </Alert>
45
56
  ))}
46
- <h2>Small</h2>
47
- <div>
48
- {variants.map((variant, i) => (
49
- <Alert fullWidth key={variant} variant={variant} size="small">
50
- {new Array(i + 1).fill(
51
- "Id elit esse enim reprehenderit enim nisi veniam nostrud."
52
- )}
53
- </Alert>
54
- ))}
55
- </div>
56
- <h2>Inline</h2>
57
- <div>
58
- {variants.map((variant, i) => (
59
- <Alert inline key={variant} variant={variant}>
60
- {new Array(i + 1).fill(
61
- "Id elit esse enim reprehenderit enim nisi veniam nostrud."
62
- )}
63
- </Alert>
64
- ))}
65
- </div>
66
- <h2>Inline small</h2>
67
- <div>
68
- {variants.map((variant, i) => (
69
- <Alert inline key={variant} variant={variant} size="small">
70
- {new Array(i + 1).fill(
71
- "Id elit esse enim reprehenderit enim nisi veniam nostrud."
72
- )}
73
- </Alert>
74
- ))}
75
- </div>
76
- <h2>Med Heading</h2>
77
- <div>
78
- {variants.map((variant, i) => (
79
- <Alert key={variant} variant={variant}>
80
- <Heading spacing size="small" level="3">
81
- Aliquip duis est in commodo pariatur
82
- </Heading>
83
- <BodyLong spacing>
84
- Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
85
- laboris ex. Labore ex occaecat proident qui qui fugiat magna.
86
- Fugiat sint commodo consequat eu aute.
87
- </BodyLong>
88
- <Heading level="4" size="xsmall" spacing>
89
- Ullamco eiusmod Lorem eiusmod eu.
90
- </Heading>
91
- <BodyLong>
92
- Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
93
- laboris ex. Labore ex occaecat proident qui qui fugiat magna.
94
- Fugiat sint commodo consequat eu aute.
95
- </BodyLong>
96
- </Alert>
97
- ))}
98
- </div>
99
- <h2>Med Heading small</h2>
100
- <div>
101
- {variants.map((variant, i) => (
102
- <Alert key={variant} variant={variant} size="small">
103
- <Heading spacing size="small" level="3">
104
- Aliquip duis est in commodo pariatur
105
- </Heading>
106
- <BodyLong spacing>
107
- Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
108
- laboris ex. Labore ex occaecat proident qui qui fugiat magna.
109
- Fugiat sint commodo consequat eu aute.
110
- </BodyLong>
111
- <Heading level="4" size="xsmall" spacing>
112
- Ullamco eiusmod Lorem eiusmod eu.
113
- </Heading>
114
- <BodyLong>
115
- Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
116
- laboris ex. Labore ex occaecat proident qui qui fugiat magna.
117
- Fugiat sint commodo consequat eu aute.
118
- </BodyLong>
119
- </Alert>
120
- ))}
121
- </div>
122
- </>
57
+ {variants.map((variant, i) => (
58
+ <Alert key={variant} variant={variant} fullWidth size="small">
59
+ {new Array(i + 1).fill(
60
+ "Id elit esse enim reprehenderit enim nisi veniam nostrud."
61
+ )}
62
+ </Alert>
63
+ ))}
64
+ </div>
65
+ );
66
+ };
67
+
68
+ export const Inline = () => {
69
+ return (
70
+ <div className="colgap">
71
+ {variants.map((variant, i) => (
72
+ <Alert key={variant} variant={variant} inline>
73
+ {new Array(i + 1).fill(
74
+ "Id elit esse enim reprehenderit enim nisi veniam nostrud."
75
+ )}
76
+ </Alert>
77
+ ))}
78
+ {variants.map((variant, i) => (
79
+ <Alert key={variant} variant={variant} inline size="small">
80
+ {new Array(i + 1).fill(
81
+ "Id elit esse enim reprehenderit enim nisi veniam nostrud."
82
+ )}
83
+ </Alert>
84
+ ))}
85
+ </div>
86
+ );
87
+ };
88
+
89
+ export const Heading = () => {
90
+ return (
91
+ <div className="colgap">
92
+ <Alert variant="info">
93
+ <DsHeading spacing size="small" level="3">
94
+ Aliquip duis est in commodo pariatur
95
+ </DsHeading>
96
+ <BodyLong>
97
+ Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
98
+ laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
99
+ sint commodo consequat eu aute.
100
+ </BodyLong>
101
+ </Alert>
102
+ <Alert variant="info" size="small">
103
+ <DsHeading spacing size="xsmall" level="3">
104
+ Aliquip duis est in commodo pariatur
105
+ </DsHeading>
106
+ <BodyLong>
107
+ Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
108
+ laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
109
+ sint commodo consequat eu aute.
110
+ </BodyLong>
111
+ </Alert>
112
+ </div>
123
113
  );
124
114
  };
package/src/button/button.stories.tsx CHANGED
@@ -1,30 +1,29 @@
1
- import React, { useState } from "react";
1
+ import { Star } from "@navikt/ds-icons";
2
+ import React from "react";
2
3
  import { Button } from "./index";
3
- import { Success } from "@navikt/ds-icons";
4
4
 
5
5
  export default {
6
- title: "ds-react/button",
6
+ title: "ds-react/Button",
7
7
  component: Button,
8
8
  parameters: {
9
9
  chromatic: { delay: 300 },
10
10
  },
11
+ argTypes: {
12
+ variant: {
13
+ control: {
14
+ type: "radio",
15
+ options: ["primary", "secondary", "tertiary", "danger"],
16
+ },
17
+ },
18
+ size: {
19
+ control: {
20
+ type: "radio",
21
+ options: ["medium", "small"],
22
+ },
23
+ },
24
+ },
11
25
  };
12
26
 
13
- const Section = ({ children }) => (
14
- <div
15
- style={{
16
- display: "flex",
17
- gap: 16,
18
- gridAutoFlow: "column",
19
- justifyContent: "start",
20
- padding: 24,
21
- paddingLeft: 0,
22
- }}
23
- >
24
- {children}
25
- </div>
26
- );
27
-
28
27
  const variants: Array<"primary" | "secondary" | "tertiary" | "danger"> = [
29
28
  "primary",
30
29
  "secondary",
@@ -39,119 +38,132 @@ const varSwitch = {
39
38
  danger: "Danger",
40
39
  };
41
40
 
42
- export const All = () => {
43
- const [loadingState, setLoadingState] = useState(true);
44
- const [content, setContent] = useState<string>("");
41
+ export const Default = (props) => {
42
+ return (
43
+ <Button variant={props.variant} size={props.size} loading={props.loading}>
44
+ {props.icon ? <Star /> : null}
45
+ {props.children}
46
+ {props.icon ? <Star /> : null}
47
+ </Button>
48
+ );
49
+ };
45
50
 
46
- const toggleLoading = () => {
47
- setLoadingState(!loadingState);
48
- };
51
+ Default.args = {
52
+ icon: false,
53
+ loading: false,
54
+ children: "Knapp",
55
+ };
49
56
 
50
- return (
51
- <div style={{ paddingLeft: "1rem" }}>
52
- <h1>Button</h1>
53
- <Section>
54
- {variants.map((variant) => (
55
- <Button key={variant} variant={variant}>
56
- {varSwitch[variant]}
57
- </Button>
58
- ))}
59
- </Section>
60
- <h2>disabled</h2>
61
- <Section>
62
- {variants.map((variant) => (
63
- <Button key={variant} variant={variant} disabled>
64
- {varSwitch[variant]}
65
- </Button>
66
- ))}
67
- </Section>
68
- <h2>As link</h2>
69
- <Section>
70
- {variants.map((variant) => (
71
- <Button as="a" key={variant} variant={variant} href="the-link">
72
- {varSwitch[variant]}
73
- </Button>
74
- ))}
75
- </Section>
76
- <h2>Small</h2>
77
- <Section>
78
- {variants.map((variant) => (
79
- <Button key={variant} variant={variant} size="small">
80
- {varSwitch[variant]}
81
- </Button>
82
- ))}
83
- </Section>
84
- <h2>Xsmall</h2>
85
- <Section>
86
- {variants.map((variant) => (
87
- <Button key={variant} variant={variant} size="xsmall">
88
- {varSwitch[variant]}
89
- </Button>
90
- ))}
91
- </Section>
92
- <h2>Button w/icon</h2>
93
- <Section>
94
- {variants.map((variant) => (
95
- <Button key={variant} variant={variant}>
96
- {variant} <Success />
97
- </Button>
98
- ))}
99
- </Section>
100
- <Section>
101
- {variants.map((variant) => (
102
- <Button key={variant} variant={variant}>
103
- <span className="navds-sr-only">Success ikon</span>
104
- <Success />
105
- </Button>
106
- ))}
107
- </Section>
108
- <h2>Small w/icon</h2>
109
- <Section>
110
- {variants.map((variant) => (
111
- <Button key={variant} variant={variant} size="small">
112
- <Success /> {variant}
113
- </Button>
114
- ))}
115
- </Section>
116
- <Section>
117
- {variants.map((variant) => (
118
- <Button key={variant} variant={variant} size="small">
119
- <span className="navds-sr-only">Success ikon</span>
120
- <Success />
121
- </Button>
122
- ))}
123
- </Section>
124
- <h2>Button w/loader</h2>
125
- <Button onClick={toggleLoading}>Toggle loaders</Button>
126
- <Button onClick={() => setContent((content) => `${content} wat`)}>
127
- Change content
57
+ export const Small = () => (
58
+ <div className="rowgap">
59
+ {variants.map((variant) => (
60
+ <Button key={variant} variant={variant} size="small">
61
+ {varSwitch[variant]}
128
62
  </Button>
129
- <Section>
130
- {variants.map((variant) => (
131
- <Button
132
- key={variant}
133
- variant={variant}
134
- loading={loadingState}
135
- onClick={toggleLoading}
136
- >
137
- {content || varSwitch[variant]}
138
- </Button>
139
- ))}
140
- </Section>
141
- <h2>Small w/loader</h2>
142
- <Section>
143
- {variants.map((variant) => (
144
- <Button
145
- key={variant}
146
- variant={variant}
147
- size="small"
148
- loading={loadingState}
149
- onClick={toggleLoading}
150
- >
151
- {varSwitch[variant]}
152
- </Button>
153
- ))}
154
- </Section>
63
+ ))}
64
+ </div>
65
+ );
66
+
67
+ export const XSmall = () => (
68
+ <div className="rowgap">
69
+ {variants.map((variant) => (
70
+ <Button key={variant} variant={variant} size="xsmall">
71
+ {varSwitch[variant]}
72
+ </Button>
73
+ ))}
74
+ </div>
75
+ );
76
+
77
+ export const Loading = () => (
78
+ <div className="colgap">
79
+ <div className="rowgap">
80
+ {variants.map((variant) => (
81
+ <Button key={variant} variant={variant} loading>
82
+ {varSwitch[variant]}
83
+ </Button>
84
+ ))}
155
85
  </div>
156
- );
157
- };
86
+ <div className="rowgap">
87
+ {variants.map((variant) => (
88
+ <Button key={variant} variant={variant} loading size="small">
89
+ {varSwitch[variant]}
90
+ </Button>
91
+ ))}
92
+ </div>
93
+ <div className="rowgap">
94
+ {variants.map((variant) => (
95
+ <Button key={variant} variant={variant} loading size="xsmall">
96
+ {varSwitch[variant]}
97
+ </Button>
98
+ ))}
99
+ </div>
100
+ </div>
101
+ );
102
+
103
+ export const Icon = () => (
104
+ <div className="colgap">
105
+ <div className="rowgap">
106
+ {variants.map((variant) => (
107
+ <Button key={variant} variant={variant}>
108
+ <Star />
109
+ </Button>
110
+ ))}
111
+ </div>
112
+ <div className="rowgap">
113
+ {variants.map((variant) => (
114
+ <Button key={variant} variant={variant} size="small">
115
+ <Star />
116
+ </Button>
117
+ ))}
118
+ </div>
119
+ <div className="rowgap">
120
+ {variants.map((variant) => (
121
+ <Button key={variant} variant={variant} size="xsmall">
122
+ <Star />
123
+ </Button>
124
+ ))}
125
+ </div>
126
+ </div>
127
+ );
128
+
129
+ export const IconWText = () => (
130
+ <div className="colgap">
131
+ <div className="rowgap">
132
+ {variants.map((variant) => (
133
+ <Button key={variant} variant={variant}>
134
+ <Star />
135
+ {varSwitch[variant]}
136
+ <Star />
137
+ </Button>
138
+ ))}
139
+ </div>
140
+ <div className="rowgap">
141
+ {variants.map((variant) => (
142
+ <Button key={variant} variant={variant} size="small">
143
+ <Star />
144
+ {varSwitch[variant]}
145
+ <Star />
146
+ </Button>
147
+ ))}
148
+ </div>
149
+ <div className="rowgap">
150
+ {variants.map((variant) => (
151
+ <Button key={variant} variant={variant} size="xsmall">
152
+ <Star />
153
+ {varSwitch[variant]}
154
+ <Star />
155
+ </Button>
156
+ ))}
157
+ </div>
158
+ </div>
159
+ );
160
+
161
+ export const Link = () => (
162
+ <div className="rowgap">
163
+ {variants.map((variant) => (
164
+ <Button key={variant} variant={variant} as="a" href="#thecakeisalie">
165
+ {varSwitch[variant]}
166
+ </Button>
167
+ ))}
168
+ </div>
169
+ );
package/src/card/stories/card.stories.mdx CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Meta, Canvas } from "@storybook/addon-docs";
2
2
  import { MicroCard } from "../index.ts";
3
3
 
4
- <Meta title="ds-react/card/intro" />
4
+ <Meta title="ds-react(deprecated)/card/intro" />
5
5
 
6
6
  # Hvordan ta i bruk card
7
7
 
package/src/card/stories/card.stories.tsx CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import { MicroCard } from "../index";
3
3
  import { Meta } from "@storybook/react/types-6-0";
4
4
  export default {
5
- title: "ds-react/card",
5
+ title: "ds-react(deprecated)/card",
6
6
  component: MicroCard,
7
7
  } as Meta;
8
8
 
package/src/form/checkbox/Checkbox.test.tsx CHANGED
@@ -6,11 +6,12 @@ import { Checkbox, CheckboxGroup } from ".";
6
6
 
7
7
  const firstArgumentOfFirstCall = (fn: jest.Mock) => fn.mock.calls[0][0];
8
8
 
9
- test("checkbox group chains onChange calls", () => {
9
+ test("checkbox group chains onChange calls", async () => {
10
10
  const onGroupChange = jest.fn();
11
11
  const onChange = jest.fn();
12
12
  const value = faker.datatype.string();
13
13
  const label = faker.datatype.string();
14
+ const user = userEvent.setup();
14
15
 
15
16
  render(
16
17
  <CheckboxGroup legend="legend" onChange={onGroupChange}>
@@ -20,7 +21,7 @@ test("checkbox group chains onChange calls", () => {
20
21
  </CheckboxGroup>
21
22
  );
22
23
 
23
- userEvent.click(screen.getByLabelText(label));
24
+ await user.click(screen.getByLabelText(label));
24
25
 
25
26
  expect(onGroupChange).toBeCalledTimes(1);
26
27
  expect(onGroupChange).toBeCalledWith([value]);
@@ -36,21 +37,24 @@ describe("Checkbox handles controlled-state correctly", () => {
36
37
  </CheckboxGroup>
37
38
  );
38
39
 
39
- test("Checkbox is still checked after click when controlled", () => {
40
+ test("Checkbox is still checked after click when controlled", async () => {
41
+ const user = userEvent.setup();
40
42
  render(<CheckboxComponent value={["value1", "value2"]} />);
41
- userEvent.click(screen.getByLabelText("label1"));
42
- userEvent.click(screen.getByLabelText("label2"));
43
+ await user.click(screen.getByLabelText("label1"));
44
+ await user.click(screen.getByLabelText("label2"));
43
45
 
44
46
  expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
45
47
  true
46
48
  );
49
+
47
50
  expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
48
51
  true
49
52
  );
50
53
  });
51
54
 
52
- test("onChange called with expected values", () => {
55
+ test("onChange called with expected values", async () => {
53
56
  const onGroupChange = jest.fn();
57
+ const user = userEvent.setup();
54
58
 
55
59
  render(
56
60
  <CheckboxComponent
@@ -59,11 +63,11 @@ describe("Checkbox handles controlled-state correctly", () => {
59
63
  />
60
64
  );
61
65
 
62
- userEvent.click(screen.getByLabelText("label1"));
66
+ await user.click(screen.getByLabelText("label1"));
63
67
 
64
68
  expect(onGroupChange).lastCalledWith(["value2"]);
65
69
 
66
- userEvent.click(screen.getByLabelText("label2"));
70
+ await user.click(screen.getByLabelText("label2"));
67
71
 
68
72
  expect(onGroupChange).lastCalledWith(["value1"]);
69
73
  });
package/src/form/radio/Radio.test.tsx CHANGED
@@ -31,7 +31,9 @@ describe("Controlled RadioGroup", () => {
31
31
  });
32
32
 
33
33
  describe("Uncontrolled RadioGroup", () => {
34
- test("handles state correctly", () => {
34
+ test("handles state correctly", async () => {
35
+ const user = userEvent.setup();
36
+
35
37
  render(<Group />);
36
38
 
37
39
  const input1 = screen.getByLabelText(label1) as HTMLInputElement;
@@ -40,13 +42,14 @@ describe("Uncontrolled RadioGroup", () => {
40
42
  expect(input1.checked).toBe(false);
41
43
  expect(input2.checked).toBe(false);
42
44
 
43
- userEvent.click(screen.getByLabelText(label2));
45
+ await user.click(screen.getByLabelText(label2));
44
46
 
45
47
  expect(input1.checked).toBe(false);
46
48
  expect(input2.checked).toBe(true);
47
49
  });
48
50
 
49
- test("handles defaultValue correctly", () => {
51
+ test("handles defaultValue correctly", async () => {
52
+ const user = userEvent.setup();
50
53
  render(<Group defaultValue={value1} />);
51
54
 
52
55
  const input1 = screen.getByLabelText(label1) as HTMLInputElement;
@@ -55,7 +58,7 @@ describe("Uncontrolled RadioGroup", () => {
55
58
  expect(input1.checked).toBe(true);
56
59
  expect(input2.checked).toBe(false);
57
60
 
58
- userEvent.click(screen.getByLabelText(label2));
61
+ await user.click(screen.getByLabelText(label2));
59
62
 
60
63
  expect(input1.checked).toBe(false);
61
64
  expect(input2.checked).toBe(true);
package/src/page-header/stories/header.stories.mdx CHANGED
@@ -2,7 +2,7 @@ import { Meta, Canvas } from "@storybook/addon-docs";
2
2
  import { PageHeader } from "../index";
3
3
  import { illustrationPictogram } from "./pictogram";
4
4
 
5
- <Meta title="ds-react/page-header/intro" />
5
+ <Meta title="ds-react(deprecated)/page-header/intro" />
6
6
 
7
7
  # Hvordan ta i bruk PageHeader
8
8
 
package/src/page-header/stories/header.stories.tsx CHANGED
@@ -3,7 +3,7 @@ import { PageHeader } from "../index";
3
3
  import { Meta } from "@storybook/react/types-6-0";
4
4
  import { illustrationPictogram } from "./pictogram";
5
5
  export default {
6
- title: "ds-react/page-header",
6
+ title: "ds-react(deprecated)/page-header",
7
7
  component: PageHeader,
8
8
  } as Meta;
9
9
 
package/src/step-indicator/stories/step-indicator.stories.mdx CHANGED
@@ -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
 
package/src/step-indicator/stories/step-indicator.stories.tsx CHANGED
@@ -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