@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.
Files changed (25) hide show
  1. package/cjs/accordion/AccordionContent.js +1 -1
  2. package/cjs/form/Textarea.js +6 -3
  3. package/esm/accordion/AccordionContent.js +1 -1
  4. package/esm/accordion/AccordionContent.js.map +1 -1
  5. package/esm/form/Textarea.js +7 -4
  6. package/esm/form/Textarea.js.map +1 -1
  7. package/package.json +10 -8
  8. package/src/accordion/AccordionContent.tsx +1 -1
  9. package/src/accordion/accordion.stories.tsx +33 -27
  10. package/src/form/Textarea.tsx +11 -2
  11. package/src/form/stories/confirmation-panel.stories.tsx +68 -43
  12. package/src/form/stories/fieldset.stories.tsx +97 -58
  13. package/src/form/stories/select.stories.tsx +86 -42
  14. package/src/form/stories/switch.stories.tsx +89 -76
  15. package/src/form/stories/text-field.stories.tsx +57 -53
  16. package/src/form/stories/textarea.stories.tsx +84 -77
  17. package/src/link-panel/stories/link-panel.stories.tsx +10 -12
  18. package/src/tooltip/tooltip.stories.tsx +52 -117
  19. package/src/form/stories/confirmation-panel.stories.mdx +0 -59
  20. package/src/form/stories/fieldset.stories.mdx +0 -136
  21. package/src/form/stories/live-examples.tsx +0 -26
  22. package/src/form/stories/select.stories.mdx +0 -134
  23. package/src/form/stories/switch.stories.mdx +0 -174
  24. package/src/form/stories/text-field.stories.mdx +0 -86
  25. package/src/form/stories/textarea.stories.mdx +0 -167
package/src/link-panel/stories/link-panel.stories.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
  import React from "react";
2
- import styled from "styled-components";
3
2
  import { LinkPanel } from "..";
4
3
  import { Illustration } from "./illustration";
5
4
 
@@ -8,15 +7,6 @@ export default {
8
7
  component: LinkPanel,
9
8
  };
10
9
 
11
- const StyledLinkPanel = styled(LinkPanel)`
12
- .navds-link-panel__content {
13
- display: grid;
14
- grid-auto-flow: column;
15
- gap: var(--navds-spacing-8);
16
- align-items: center;
17
- }
18
- `;
19
-
20
10
  export const All = () => (
21
11
  <>
22
12
  <h1>Link panel</h1>
@@ -37,7 +27,7 @@ export const All = () => (
37
27
  </LinkPanel>
38
28
 
39
29
  <h1>Custom styling</h1>
40
- <StyledLinkPanel href="#">
30
+ <LinkPanel href="#" className="linkpanel">
41
31
  {Illustration}
42
32
  <div>
43
33
  <LinkPanel.Title>
@@ -48,6 +38,14 @@ export const All = () => (
48
38
  magna veniam consequat. id aliquip Lorem esse
49
39
  </LinkPanel.Description>
50
40
  </div>
51
- </StyledLinkPanel>
41
+ </LinkPanel>
42
+ <style>{`
43
+ .linkpanel .navds-link-panel__content {
44
+ display: grid;
45
+ grid-auto-flow: column;
46
+ gap: var(--navds-spacing-8);
47
+ align-items: center;
48
+ }
49
+ `}</style>
52
50
  </>
53
51
  );
package/src/tooltip/tooltip.stories.tsx CHANGED
@@ -1,144 +1,79 @@
1
- import React, { useRef, useState } from "react";
2
- import { Tooltip } from "../index";
3
1
  import { Meta } from "@storybook/react/types-6-0";
4
- import { Refresh } from "@navikt/ds-icons";
2
+ import React from "react";
5
3
  import { Button } from "../..";
6
- import { ToggleGroup } from "../toggle-group";
4
+ import { Tooltip } from "../index";
7
5
 
8
6
  export default {
9
- title: "ds-react/tooltip",
7
+ title: "ds-react/Tooltip",
10
8
  component: Tooltip,
11
9
  parameters: {
12
10
  chromatic: { disable: true },
13
11
  },
12
+ argTypes: {
13
+ open: {
14
+ control: {
15
+ type: "boolean",
16
+ },
17
+ },
18
+ offset: {
19
+ control: {
20
+ type: "number",
21
+ },
22
+ },
23
+ placement: {
24
+ control: {
25
+ type: "radio",
26
+ options: ["top", "right", "bottom", "left"],
27
+ },
28
+ },
29
+ },
14
30
  } as Meta;
15
31
 
16
- export const Demo = () => {
17
- const [open, setOpen] = useState(true);
18
- const testRef = useRef(null);
32
+ export const Default = (props) => {
19
33
  return (
20
- <div
21
- style={{
22
- width: "100vw",
23
- height: "100vh",
24
- display: "flex",
25
- flexDirection: "column",
26
- gap: 32,
27
- justifyContent: "center",
28
- alignItems: "center",
29
- }}
34
+ <Tooltip
35
+ content="Tooltip example"
36
+ open={props?.open}
37
+ keys={props?.keys ? ["Cmd", "K"] : undefined}
38
+ placement={props?.placement}
39
+ arrow={props?.arrow}
40
+ delay={props?.delay}
41
+ offset={props?.offset}
30
42
  >
31
- <Tooltip
32
- content="Tooltip example"
33
- keys={["Cmd", "K"]}
34
- placement="right"
35
- open={open}
36
- ref={testRef}
37
- >
38
- <Button aria-describedby="test123" onClick={() => setOpen(!open)}>
39
- Tooltip C
40
- </Button>
41
- </Tooltip>
42
- <Tooltip
43
- content="Tooltip example"
44
- keys={["Cmd", "K"]}
45
- placement="right"
46
- defaultOpen
47
- >
48
- <Button onClick={() => console.log(testRef.current)}>Tooltip C</Button>
49
- </Tooltip>
50
- <ToggleGroup onChange={null} defaultValue="321">
51
- <Tooltip content="Tooltip" placement="bottom">
52
- <ToggleGroup.Item value="123">Tekst</ToggleGroup.Item>
53
- </Tooltip>
54
- <Tooltip content="Tooltip" placement="bottom">
55
- <ToggleGroup.Item value="321">tekst 2</ToggleGroup.Item>
56
- </Tooltip>
57
- <Tooltip content="Tooltip" placement="bottom">
58
- <ToggleGroup.Item value="3212">tekst 2</ToggleGroup.Item>
59
- </Tooltip>
60
- <Tooltip content="Tooltip" placement="bottom">
61
- <ToggleGroup.Item value="3213">tekst 2</ToggleGroup.Item>
62
- </Tooltip>
63
- <Tooltip content="Tooltip" placement="bottom">
64
- <ToggleGroup.Item value="3214">tekst 2</ToggleGroup.Item>
65
- </Tooltip>
66
- </ToggleGroup>
67
- </div>
43
+ <Button aria-describedby="test123">Tooltip</Button>
44
+ </Tooltip>
68
45
  );
69
46
  };
70
47
 
71
- export const All = () => {
72
- const [open, setOpen] = useState(false);
48
+ Default.args = {
49
+ keys: false,
50
+ arrow: true,
51
+ delay: 150,
52
+ };
53
+
54
+ export const Placement = () => {
73
55
  return (
74
- <div style={{ margin: "4rem 8rem 4rem 8rem" }}>
75
- <h2>Controlled</h2>
76
- <Tooltip open={open} content="Controlled tooltip example" placement="top">
77
- <Button onClick={() => setOpen((x) => !x)}>Toggle tooltip</Button>
56
+ <div className="colgap">
57
+ <Tooltip content="Tooltip example" open={true} placement="top">
58
+ <div>Element</div>
78
59
  </Tooltip>
79
-
80
- <h2>no arrow</h2>
81
- <Tooltip content="no arrow" placement="top" arrow={false}>
82
- <Button>Tooltip</Button>
60
+ <Tooltip content="Tooltip example" open={true} placement="right">
61
+ <div>Element</div>
83
62
  </Tooltip>
84
-
85
- <h2>Keys</h2>
86
- <Tooltip content="Tooltip" placement="top" open keys={["Cmd", "K"]}>
87
- <Button>Tooltip</Button>
63
+ <Tooltip content="Tooltip example" open={true} placement="left">
64
+ <div>Element</div>
88
65
  </Tooltip>
89
- <h2>more offset</h2>
90
- <Tooltip content="Tooltip" placement="top" open offset={20}>
91
- <Button>Tooltip</Button>
66
+ <Tooltip content="Tooltip example" open={true} placement="bottom">
67
+ <div>Element</div>
92
68
  </Tooltip>
93
-
94
- <h2>all placements</h2>
95
- <div
96
- style={{
97
- display: "flex",
98
- flexDirection: "column",
99
- flexWrap: "wrap",
100
- gap: "3rem",
101
- }}
102
- >
103
- {["top", "left", "bottom", "right"].map((placement) => (
104
- <div key={placement}>
105
- <h3>{placement}</h3>
106
- <div
107
- style={{
108
- display: "flex",
109
- flexDirection: "column",
110
- flexWrap: "wrap",
111
- gap: "3rem",
112
- }}
113
- >
114
- <Tooltip
115
- key={placement}
116
- defaultOpen
117
- content={placement}
118
- placement={placement as any}
119
- >
120
- <Refresh aria-hidden tabIndex={0} />
121
- </Tooltip>
122
- </div>
123
- </div>
124
- ))}
125
- </div>
126
69
  </div>
127
70
  );
128
71
  };
129
72
 
130
- export const UUDemo = () => {
73
+ export const Keys = () => {
131
74
  return (
132
- <div>
133
- <Button>Placeholder</Button>
134
- <br />
135
- <br />
136
- <Tooltip content="Shortcut" placement="right" keys={["Cmd", "S"]}>
137
- <Button>Lagre</Button>
138
- </Tooltip>
139
- <br />
140
- <br />
141
- <Button>Placeholder</Button>
142
- </div>
75
+ <Tooltip content="Tooltip example" open={true} keys={["CMD", "K"]}>
76
+ <div>Element</div>
77
+ </Tooltip>
143
78
  );
144
79
  };
package/src/form/stories/confirmation-panel.stories.mdx DELETED
@@ -1,59 +0,0 @@
1
- import { Meta, Canvas } from "@storybook/addon-docs";
2
- import { ConfirmationPanelExample } from "./live-examples";
3
-
4
- <Meta title="ds-react/form/confirmation-panel/intro" />
5
-
6
- # Hvordan ta i bruk ConfirmationPanel
7
-
8
- ```jsx
9
- <ConfirmationPanel
10
- checked={checked}
11
- onChange={() => setChecked(!checked)}
12
- label="Checkbox label text"
13
- >
14
- Ipsum voluptate pariatur <Link href="#123">demolink</Link> anim officia minim
15
- ut mollit voluptate exercitation nulla mollit.
16
- </ConfirmationPanel>
17
- ```
18
-
19
- <Canvas>
20
- <ConfirmationPanelExample />
21
- </Canvas>
22
-
23
- ## Størrelser
24
-
25
- Kommer i størrelsene "medium" og "small".
26
-
27
- ```jsx
28
- <ConfirmationPanel
29
- checked={checked}
30
- onChange={() => setChecked(!checked)}
31
- label="Checkbox label text"
32
- size="small"
33
- >
34
- Ipsum voluptate pariatur <Link href="#123">demolink</Link> anim officia minim
35
- ut mollit voluptate exercitation nulla mollit.
36
- </ConfirmationPanel>
37
- ```
38
-
39
- <Canvas>
40
- <ConfirmationPanelExample size="small" />
41
- </Canvas>
42
-
43
- ## Errors
44
-
45
- ```jsx
46
- <ConfirmationPanel
47
- checked={checked}
48
- onChange={() => setChecked(!checked)}
49
- label="Checkbox label text"
50
- error="Laborum enim esse quis"
51
- >
52
- Ipsum voluptate pariatur <Link href="#123">demolink</Link> anim officia minim
53
- ut mollit voluptate exercitation nulla mollit.
54
- </ConfirmationPanel>
55
- ```
56
-
57
- <Canvas>
58
- <ConfirmationPanelExample error="Laborum enim esse quis" />
59
- </Canvas>
package/src/form/stories/fieldset.stories.mdx DELETED
@@ -1,136 +0,0 @@
1
- import { Meta, Canvas } from "@storybook/addon-docs";
2
- import { Fieldset, TextField } from "../index";
3
-
4
- <Meta title="ds-react/form/fieldset/intro" />
5
-
6
- # Hvordan ta i bruk Fieldset
7
-
8
- ```jsx
9
- <Fieldset legend="Mollit eiusmod">
10
- <TextField label="Textfield label" hideLabel />
11
- <TextField label="Textfield label" hideLabel />
12
- </Fieldset>
13
- ```
14
-
15
- <Canvas>
16
- <Fieldset legend="Mollit eiusmod">
17
- <TextField label="Textfield label" hideLabel />
18
- <TextField label="Textfield label" hideLabel />
19
- </Fieldset>
20
- </Canvas>
21
-
22
- ## Description
23
-
24
- ```jsx
25
- <Fieldset legend="Mollit eiusmod" description="Quis reprehenderit esse cillum">
26
- <TextField label="Textfield label" hideLabel />
27
- <TextField label="Textfield label" hideLabel />
28
- </Fieldset>
29
- ```
30
-
31
- <Canvas>
32
- <Fieldset
33
- legend="Mollit eiusmod"
34
- description="Quis reprehenderit esse cillum"
35
- >
36
- <TextField label="Textfield label" hideLabel />
37
- <TextField label="Textfield label" hideLabel />
38
- </Fieldset>
39
- </Canvas>
40
-
41
- ## Errors
42
-
43
- ```jsx
44
- <Fieldset legend="Mollit eiusmod" error="Fieldsett error">
45
- <TextField label="Textfield label" hideLabel />
46
- <TextField label="Textfield label" hideLabel />
47
- </Fieldset>
48
- ```
49
-
50
- <Canvas>
51
- <Fieldset legend="Mollit eiusmod" error="Fieldsett error">
52
- <TextField label="Textfield label" hideLabel />
53
- <TextField label="Textfield label" hideLabel />
54
- </Fieldset>
55
- </Canvas>
56
-
57
- ## Errors uten errorPropagation
58
-
59
- ```jsx
60
- <Fieldset
61
- legend="Mollit eiusmod"
62
- error="Fieldsett error"
63
- errorPropagation={false}
64
- >
65
- <TextField label="Textfield label" hideLabel />
66
- <TextField label="Textfield label" hideLabel />
67
- </Fieldset>
68
- ```
69
-
70
- <Canvas>
71
- <Fieldset
72
- legend="Mollit eiusmod"
73
- error="Fieldsett error"
74
- errorPropagation={false}
75
- >
76
- <TextField label="Textfield label" hideLabel error="Må være fylt ut" />
77
- <TextField label="Textfield label" hideLabel />
78
- </Fieldset>
79
- </Canvas>
80
-
81
- ## Sizing
82
-
83
- Fieldset justerer automatisk sizing på skjema-elementene. Man kan overstyre dette med å sette sizing på
84
- `TextField` i eks dette eksemplet
85
-
86
- ```jsx
87
- <Fieldset size="small" legend="Mollit eiusmod">
88
- <TextField label="Textfield label" hideLabel />
89
- <TextField label="Textfield label" hideLabel />
90
- </Fieldset>
91
- ```
92
-
93
- <Canvas>
94
- <Fieldset size="small" legend="Mollit eiusmod" description="Dolore minim">
95
- <TextField label="Textfield label" hideLabel />
96
- <TextField label="Textfield label" hideLabel />
97
- </Fieldset>
98
- </Canvas>
99
-
100
- ## hideLegend
101
-
102
- Ved bruk av `hideLegend` på Fieldset kan man gjøre slik at legend/description bare vises for skjermlesere
103
-
104
- ```jsx
105
- <Fieldset legend="Mollit eiusmod" description="Dolore minim" hideLegend>
106
- <TextField label="Textfield label" hideLabel />
107
- <TextField label="Textfield label" hideLabel />
108
- </Fieldset>
109
- ```
110
-
111
- <Canvas>
112
- <Fieldset legend="Mollit eiusmod" description="Dolore minim" hideLegend>
113
- <TextField label="Textfield label" hideLabel />
114
- <TextField label="Textfield label" hideLabel />
115
- </Fieldset>
116
- </Canvas>
117
-
118
- ## Disabled
119
-
120
- Disabled på fieldset fikser styling og state for alle elementene
121
-
122
- NOTE: Husk at disabled bør unngås!
123
-
124
- ```jsx
125
- <Fieldset legend="Mollit eiusmod" description="Dolore minim" disabled>
126
- <TextField label="Textfield label" hideLabel />
127
- <TextField label="Textfield label" hideLabel />
128
- </Fieldset>
129
- ```
130
-
131
- <Canvas>
132
- <Fieldset legend="Mollit eiusmod" description="Dolore minim" disabled>
133
- <TextField label="Textfield label" hideLabel />
134
- <TextField label="Textfield label" hideLabel />
135
- </Fieldset>
136
- </Canvas>
package/src/form/stories/live-examples.tsx DELETED
@@ -1,26 +0,0 @@
1
- import React, { useState } from "react";
2
- import { ConfirmationPanel } from "..";
3
- import { Link } from "../..";
4
-
5
- export const ConfirmationPanelExample = ({
6
- size = "medium",
7
- error,
8
- }: {
9
- size: "medium" | "small";
10
- error?: string;
11
- }) => {
12
- const [checked, setChecked] = useState(false);
13
-
14
- return (
15
- <ConfirmationPanel
16
- checked={checked}
17
- onChange={() => setChecked(!checked)}
18
- label="Checkbox label text"
19
- size={size}
20
- error={error}
21
- >
22
- Ipsum voluptate pariatur <Link href="#123">demolink</Link> anim officia
23
- minim ut mollit voluptate exercitation nulla mollit.
24
- </ConfirmationPanel>
25
- );
26
- };
package/src/form/stories/select.stories.mdx DELETED
@@ -1,134 +0,0 @@
1
- import { Meta, Canvas } from "@storybook/addon-docs";
2
- import { Select } from "../index";
3
-
4
- <Meta title="ds-react/form/select/intro" />
5
-
6
- # Hvordan ta i bruk Select
7
-
8
- ```jsx
9
- <Select label="Ipsum enim quis culpa">
10
- <option value="">Velg land</option>
11
- <option value="norge">Norge</option>
12
- <option value="sverige">Sverige</option>
13
- </Select>
14
- ```
15
-
16
- <Canvas>
17
- <Select label="Ipsum enim quis culpa">
18
- <option value="">Velg land</option>
19
- <option value="norge">Norge</option>
20
- <option value="sverige">Sverige</option>
21
- </Select>
22
- </Canvas>
23
-
24
- ## Description
25
-
26
- ```jsx
27
- <Select label="Ipsum enim quis culpa" description="Aute enim">
28
- <option value="">Velg land</option>
29
- <option value="norge">Norge</option>
30
- <option value="sverige">Sverige</option>
31
- </Select>
32
- ```
33
-
34
- <Canvas>
35
- <Select label="Ipsum enim quis culpa" description="Aute enim">
36
- <option value="">Velg land</option>
37
- <option value="norge">Norge</option>
38
- <option value="sverige">Sverige</option>
39
- </Select>
40
- </Canvas>
41
-
42
- ## Errors
43
-
44
- ```jsx
45
- <Select
46
- label="Ipsum enim quis culpa"
47
- description="Aute enim"
48
- error="Select error message"
49
- >
50
- <option value="">Velg land</option>
51
- <option value="norge">Norge</option>
52
- <option value="sverige">Sverige</option>
53
- </Select>
54
- ```
55
-
56
- <Canvas>
57
- <Select
58
- label="Ipsum enim quis culpa"
59
- description="Aute enim"
60
- error="Select error message"
61
- >
62
- <option value="">Velg land</option>
63
- <option value="norge">Norge</option>
64
- <option value="sverige">Sverige</option>
65
- </Select>
66
- </Canvas>
67
-
68
- ## Sizing
69
-
70
- ```jsx
71
- <Select
72
- label="Ipsum enim quis culpa"
73
- description="Aute enim"
74
- error="Select error message"
75
- size="small"
76
- >
77
- <option value="">Velg land</option>
78
- <option value="norge">Norge</option>
79
- <option value="sverige">Sverige</option>
80
- </Select>
81
- ```
82
-
83
- <Canvas>
84
- <Select
85
- label="Ipsum enim quis culpa"
86
- description="Aute enim"
87
- error="Select error message"
88
- size="small"
89
- >
90
- <option value="">Velg land</option>
91
- <option value="norge">Norge</option>
92
- <option value="sverige">Sverige</option>
93
- </Select>
94
- </Canvas>
95
-
96
- ## hideLabel
97
-
98
- Ved bruk av `hideLabel` på TextField kan man gjøre slik at label/description bare vises for skjermlesere
99
-
100
- ```jsx
101
- <Select label="Ipsum enim quis culpa" description="Aute enim" hideLabel>
102
- <option value="">Velg land</option>
103
- <option value="norge">Norge</option>
104
- <option value="sverige">Sverige</option>
105
- </Select>
106
- ```
107
-
108
- <Canvas>
109
- <Select label="Ipsum enim quis culpa" description="Aute enim" hideLabel>
110
- <option value="">Velg land</option>
111
- <option value="norge">Norge</option>
112
- <option value="sverige">Sverige</option>
113
- </Select>
114
- </Canvas>
115
-
116
- ## Disabled
117
-
118
- NOTE: Husk at disabled bør unngås!
119
-
120
- ```jsx
121
- <Select label="Ipsum enim quis culpa" description="Aute enim" disabled>
122
- <option value="">Velg land</option>
123
- <option value="norge">Norge</option>
124
- <option value="sverige">Sverige</option>
125
- </Select>
126
- ```
127
-
128
- <Canvas>
129
- <Select label="Ipsum enim quis culpa" description="Aute enim" disabled>
130
- <option value="">Velg land</option>
131
- <option value="norge">Norge</option>
132
- <option value="sverige">Sverige</option>
133
- </Select>
134
- </Canvas>