@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.
Files changed (23) 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/checkbox/checkbox.stories.tsx +178 -0
  9. package/src/form/error-summary/error-summary.stories.tsx +42 -0
  10. package/src/form/radio/Radio.test.tsx +7 -4
  11. package/src/form/radio/radio.stories.tsx +82 -0
  12. package/src/form/search/search.stories.tsx +124 -83
  13. package/src/page-header/stories/header.stories.mdx +1 -1
  14. package/src/page-header/stories/header.stories.tsx +1 -1
  15. package/src/step-indicator/stories/step-indicator.stories.mdx +1 -1
  16. package/src/step-indicator/stories/step-indicator.stories.tsx +1 -1
  17. package/src/form/checkbox/stories/checkbox.stories.mdx +0 -203
  18. package/src/form/checkbox/stories/checkbox.stories.tsx +0 -109
  19. package/src/form/error-summary/stories/error-summary.stories.mdx +0 -54
  20. package/src/form/error-summary/stories/error-summary.stories.tsx +0 -28
  21. package/src/form/radio/stories/radio.stories.mdx +0 -173
  22. package/src/form/radio/stories/radio.stories.tsx +0 -51
  23. package/src/form/search/search-themes.stories.tsx +0 -52
package/src/form/radio/radio.stories.tsx ADDED
@@ -0,0 +1,82 @@
1
+ import React, { useState } from "react";
2
+ import { Radio, RadioGroup } from "../../index";
3
+ import { Meta } from "@storybook/react/types-6-0";
4
+
5
+ export default {
6
+ title: "ds-react/Form/Radio",
7
+ component: Radio,
8
+ subcomponents: {
9
+ RadioGroup,
10
+ },
11
+ } as Meta;
12
+
13
+ export const Default = (props) => {
14
+ const [state, setState] = useState("radio1");
15
+
16
+ return (
17
+ <RadioGroup
18
+ legend={props.legend}
19
+ description={props.description}
20
+ value={props.controlled ? state : undefined}
21
+ onChange={props.controlled ? setState : undefined}
22
+ hideLegend={props.hideLegend}
23
+ error={props.errorGroup ? "Errormelding" : undefined}
24
+ {...props}
25
+ >
26
+ <Radio value="radio1">{props.children || "Apple"}</Radio>
27
+ <Radio
28
+ value="radio2"
29
+ description={props.radioDescription ? "Orange description" : undefined}
30
+ >
31
+ {props.children || "Orange"}
32
+ </Radio>
33
+ <Radio value="radio3">{props.children || "Banana"}</Radio>
34
+ <Radio value="radio4">{props.children || "Melon"}</Radio>
35
+ </RadioGroup>
36
+ );
37
+ };
38
+
39
+ Default.args = {
40
+ controlled: false,
41
+ legend: "Legend-tekst",
42
+ radioDescription: false,
43
+ hideLegend: false,
44
+ children: "",
45
+ description: "",
46
+ };
47
+
48
+ export const Group = () => (
49
+ <RadioGroup legend="Group legend" defaultValue={"tekst2"}>
50
+ <Radio value="tekst">Radiotekst</Radio>
51
+ <Radio value="tekst2">Radiotekst</Radio>
52
+ </RadioGroup>
53
+ );
54
+
55
+ export const GroupError = () => (
56
+ <RadioGroup
57
+ legend="Group legend"
58
+ defaultValue={"tekst2"}
59
+ error="Group errormelding"
60
+ >
61
+ <Radio value="tekst">Radiotekst</Radio>
62
+ <Radio value="tekst2">Radiotekst</Radio>
63
+ </RadioGroup>
64
+ );
65
+
66
+ export const GroupSmall = () => (
67
+ <RadioGroup legend="Group legend" defaultValue={"tekst2"} size="small">
68
+ <Radio value="tekst">Radiotekst</Radio>
69
+ <Radio value="tekst2">Radiotekst</Radio>
70
+ </RadioGroup>
71
+ );
72
+
73
+ export const GroupDescription = () => (
74
+ <RadioGroup
75
+ legend="Group legend"
76
+ defaultValue={"tekst2"}
77
+ description="Group description"
78
+ >
79
+ <Radio value="tekst">Radiotekst</Radio>
80
+ <Radio value="tekst2">Radiotekst</Radio>
81
+ </RadioGroup>
82
+ );
package/src/form/search/search.stories.tsx CHANGED
@@ -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/form/search",
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 All = () => {
11
- const [value, setValue] = useState("");
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
- label="Søk alle sider om X og Y"
27
- onSearch={console.log}
28
- variant="secondary"
29
- ></Search>
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
- <h2>No button</h2>
32
- <Search
33
- label="Søk alle sider om X og Y"
34
- onSearch={console.log}
35
- variant="simple"
36
- ></Search>
47
+ Default.args = {
48
+ controlled: false,
49
+ darkmode: false,
50
+ hideLabel: true,
51
+ };
37
52
 
38
- <h2>Search small</h2>
39
- <Search
40
- label="Søk alle sider om X og Y"
41
- description="Beskrivelse av søket"
42
- size="small"
43
- >
44
- <Search.Button />
45
- </Search>
46
- <br />
47
- <Search
48
- label="Søk alle sider om X og Y"
49
- description="Beskrivelse av søket"
50
- size="small"
51
- hideLabel
52
- variant="secondary"
53
- >
54
- <Search.Button />
55
- </Search>
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
- <h2>Med knappe-tekst</h2>
58
- <Search label="Søk alle sider om X og Y" hideLabel={false}>
59
- <Search.Button>Søk</Search.Button>
60
- </Search>
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="Søk alle sider om X og Y"
114
+ label="Label søk"
115
+ description="Description søk"
116
+ variant="simple"
63
117
  hideLabel={false}
64
- variant="primary"
65
- >
66
- <Search.Button>Søk</Search.Button>
67
- </Search>
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
- hideLabel
85
- label="Søk alle sider om X og Y"
86
- description="Beskrivelse av søket"
87
- clearButton={false}
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 UUDemo = () => {
96
- return (
97
- <Search label="Søk på nav.no" onSearch={console.log} placeholder="Søk">
98
- <Search.Button />
99
- </Search>
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
+ );
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
 
package/src/form/checkbox/stories/checkbox.stories.mdx DELETED
@@ -1,203 +0,0 @@
1
- import { Meta, Canvas } from "@storybook/addon-docs";
2
- import { Checkbox, CheckboxGroup } from "../index";
3
-
4
- <Meta title="ds-react/form/checkbox/intro" />
5
-
6
- # Hvordan ta i bruk Checkbox
7
-
8
- ```jsx
9
- <CheckboxGroup legend="Mollit eiusmod">
10
- <Checkbox value="Apple">Apple</Checkbox>
11
- <Checkbox value="Orange">Orange</Checkbox>
12
- <Checkbox value="Melon">Melon</Checkbox>
13
- </CheckboxGroup>
14
- ```
15
-
16
- <Canvas>
17
- <CheckboxGroup legend="Mollit eiusmod">
18
- <Checkbox value="Apple">Apple</Checkbox>
19
- <Checkbox value="Orange">Orange</Checkbox>
20
- <Checkbox value="Melon">Melon</Checkbox>
21
- </CheckboxGroup>
22
- </Canvas>
23
-
24
- Label å checkbox settes her da med children
25
-
26
- ## Description
27
-
28
- Man kan både sette en description på CheckboxGroup og selve checkbox
29
-
30
- ```jsx
31
- <CheckboxGroup legend="Culpa cupidatat" description="Exercitation do labore">
32
- <Checkbox value="Apple">Apple</Checkbox>
33
- <Checkbox value="Orange" description="Laborum ad">
34
- Orange
35
- </Checkbox>
36
- <Checkbox value="Melon">Melon</Checkbox>
37
- </CheckboxGroup>
38
- ```
39
-
40
- <Canvas>
41
- <CheckboxGroup legend="Mollit eiusmod" description="Exercitation do labore">
42
- <Checkbox value="Apple">Apple</Checkbox>
43
- <Checkbox value="Orange" description="Laborum ad">
44
- Orange
45
- </Checkbox>
46
- <Checkbox value="Melon">Melon</Checkbox>
47
- </CheckboxGroup>
48
- </Canvas>
49
-
50
- ## Errors
51
-
52
- Feilmeldinger kan bare settes på gruppa
53
-
54
- ```jsx
55
- <CheckboxGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
56
- <Checkbox value="Apple">Apple</Checkbox>
57
- <Checkbox value="Orange">Orange</Checkbox>
58
- <Checkbox value="Melon">Melon</Checkbox>
59
- </CheckboxGroup>
60
- ```
61
-
62
- <Canvas>
63
- <CheckboxGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
64
- <Checkbox value="Apple">Apple</Checkbox>
65
- <Checkbox value="Orange">Orange</Checkbox>
66
- <Checkbox value="Melon">Melon</Checkbox>
67
- </CheckboxGroup>
68
- </Canvas>
69
-
70
- Enkelt-checkboxer tar en `boolean` error prop
71
-
72
- ```jsx
73
- <Checkbox value="Apple" error>
74
- Apple
75
- </Checkbox>
76
- ```
77
-
78
- <Canvas>
79
- <Checkbox value="Apple" error>
80
- Apple
81
- </Checkbox>
82
- </Canvas>
83
-
84
- ## Sizing
85
-
86
- Checkboxer har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
87
-
88
- ```jsx
89
- <CheckboxGroup
90
- legend="Mollit eiusmod"
91
- error="Boks nr 2 må være valgt"
92
- size="small"
93
- >
94
- <Checkbox value="Apple">Apple</Checkbox>
95
- <Checkbox value="Orange">Orange</Checkbox>
96
- <Checkbox value="Melon">Melon</Checkbox>
97
- </CheckboxGroup>
98
- ```
99
-
100
- <Canvas>
101
- <CheckboxGroup
102
- legend="Mollit eiusmod"
103
- error="Boks nr 2 må være valgt"
104
- size="small"
105
- >
106
- <Checkbox value="Apple">Apple</Checkbox>
107
- <Checkbox value="Orange" error="Boksen må være valgt">
108
- Orange
109
- </Checkbox>
110
- <Checkbox value="Melon">Melon</Checkbox>
111
- </CheckboxGroup>
112
- </Canvas>
113
-
114
- ## defaultValues
115
-
116
- ```jsx
117
- <CheckboxGroup legend="Mollit eiusmod" defaultValue={["Orange", "Melon"]}>
118
- <Checkbox value="Apple">Apple</Checkbox>
119
- <Checkbox value="Orange">Orange</Checkbox>
120
- <Checkbox value="Melon">Melon</Checkbox>
121
- </CheckboxGroup>
122
- ```
123
-
124
- <Canvas>
125
- <CheckboxGroup legend="Mollit eiusmod" defaultValue={["Orange", "Melon"]}>
126
- <Checkbox value="Apple">Apple</Checkbox>
127
- <Checkbox value="Orange">Orange</Checkbox>
128
- <Checkbox value="Melon">Melon</Checkbox>
129
- </CheckboxGroup>
130
- </Canvas>
131
-
132
- ## hideLegend
133
-
134
- Ved bruk av `hideLegend` på CheckboxGroup kan man gjøre slik at legend/description bare vises for skjermlesere
135
-
136
- ```jsx
137
- <CheckboxGroup legend="Mollit eiusmod" hideLegend>
138
- <Checkbox value="Apple">Apple</Checkbox>
139
- <Checkbox value="Orange">Orange</Checkbox>
140
- <Checkbox value="Melon">Melon</Checkbox>
141
- </CheckboxGroup>
142
- ```
143
-
144
- <Canvas>
145
- <CheckboxGroup legend="Mollit eiusmod" hideLegend>
146
- <Checkbox value="Apple">Apple</Checkbox>
147
- <Checkbox value="Orange">Orange</Checkbox>
148
- <Checkbox value="Melon">Melon</Checkbox>
149
- </CheckboxGroup>
150
- </Canvas>
151
-
152
- ## hideLabel
153
-
154
- Ved bruk av `hideLabel` kan man lettere ta i bruk checkbox internt i eks tabeller.
155
-
156
- ```jsx
157
- <Checkbox value="Orange" hideLabel>
158
- Orange
159
- </Checkbox>
160
- ```
161
-
162
- <Canvas>
163
- <Checkbox value="Orange" hideLabel>
164
- Orange
165
- </Checkbox>
166
- </Canvas>
167
-
168
- ## Disabled
169
-
170
- Ved bruk av `disabled` kan man både disabled enkelte checkboxer eller checkboxgruppen.
171
-
172
- NOTE: Husk at disabled bør unngås!
173
-
174
- ```jsx
175
- <CheckboxGroup legend="Mollit eiusmod" disabled>
176
- <Checkbox value="Apple">Apple</Checkbox>
177
- <Checkbox value="Orange">Orange</Checkbox>
178
- <Checkbox value="Melon">Melon</Checkbox>
179
- </CheckboxGroup>
180
-
181
- <CheckboxGroup legend="Mollit eiusmod">
182
- <Checkbox value="Apple" disabled>Apple</Checkbox>
183
- <Checkbox value="Orange">Orange</Checkbox>
184
- <Checkbox value="Melon">Melon</Checkbox>
185
- </CheckboxGroup>
186
- ```
187
-
188
- <Canvas>
189
- <div>
190
- <CheckboxGroup legend="Mollit eiusmod" disabled>
191
- <Checkbox value="Apple">Apple</Checkbox>
192
- <Checkbox value="Orange">Orange</Checkbox>
193
- <Checkbox value="Melon">Melon</Checkbox>
194
- </CheckboxGroup>
195
- <CheckboxGroup legend="Mollit eiusmod">
196
- <Checkbox value="Apple" disabled>
197
- Apple
198
- </Checkbox>
199
- <Checkbox value="Orange">Orange</Checkbox>
200
- <Checkbox value="Melon">Melon</Checkbox>
201
- </CheckboxGroup>
202
- </div>
203
- </Canvas>
package/src/form/checkbox/stories/checkbox.stories.tsx DELETED
@@ -1,109 +0,0 @@
1
- import React, { useState } from "react";
2
- import { Checkbox, CheckboxGroup } from "../../index";
3
- import { Meta } from "@storybook/react/types-6-0";
4
- import { CheckboxGroupProps } from "..";
5
- export default {
6
- title: "ds-react/form/checkbox",
7
- component: Checkbox,
8
- } as Meta;
9
-
10
- export const Indeterminate = () => {
11
- const [checked, setChecked] = useState([true, false]);
12
-
13
- return (
14
- <>
15
- <Checkbox
16
- checked={checked[0] && checked[1]}
17
- indeterminate={checked[0] !== checked[1]}
18
- onChange={(e) => setChecked([e.target.checked, e.target.checked])}
19
- >
20
- Parent
21
- </Checkbox>
22
- <div style={{ paddingLeft: "2rem" }}>
23
- <Checkbox
24
- checked={checked[0]}
25
- onChange={(e) => setChecked([e.target.checked, checked[1]])}
26
- >
27
- Child 1
28
- </Checkbox>
29
- <Checkbox
30
- checked={checked[1]}
31
- onChange={(e) => setChecked([checked[0], e.target.checked])}
32
- >
33
- Child 2
34
- </Checkbox>
35
- </div>
36
- </>
37
- );
38
- };
39
-
40
- export const All = () => {
41
- const Checkboxes = (
42
- props: Omit<CheckboxGroupProps, "legend" | "description" | "children">
43
- ) => (
44
- <CheckboxGroup
45
- legend="Mollit eiusmod"
46
- description="Exercitation do labore"
47
- {...props}
48
- >
49
- <Checkbox value={1}>Apple</Checkbox>
50
- <Checkbox value="Orange" description="Laborum ad">
51
- Orange
52
- </Checkbox>
53
- <Checkbox value="Banana" description={<div>Laborum ad</div>}>
54
- Banana
55
- </Checkbox>
56
- <Checkbox value="Melon">Melon</Checkbox>
57
- </CheckboxGroup>
58
- );
59
-
60
- return (
61
- <>
62
- <h1>Checkbox</h1>
63
- <h2>Single checkbox</h2>
64
- <Checkbox value="Apple">Apple</Checkbox>
65
- <h3>Desription</h3>
66
- <Checkbox value={1} description="Laborum ad" defaultChecked>
67
- Apple
68
- </Checkbox>
69
- <h3>Error</h3>
70
- <Checkbox value="Apple" error>
71
- Apple
72
- </Checkbox>
73
- <Checkbox value="Apple" error defaultChecked>
74
- Orange
75
- </Checkbox>
76
- <h3>Hide label</h3>
77
- <Checkbox value="Apple" hideLabel description="Laborum ad">
78
- Apple
79
- </Checkbox>
80
- <h3>Disabled</h3>
81
- <Checkbox value="Apple" disabled>
82
- Apple
83
- </Checkbox>
84
- <Checkbox value="Orange" description="Laborum ad" disabled defaultChecked>
85
- Orange
86
- </Checkbox>
87
- <h3>Indeterminate</h3>
88
- <Checkbox value="Apple" indeterminate>
89
- Apple
90
- </Checkbox>
91
- <Checkbox value="Orange" indeterminate size="small">
92
- Orange
93
- </Checkbox>
94
-
95
- <h2>Checkbox group</h2>
96
- <Checkboxes />
97
- <h3>Error</h3>
98
- <Checkboxes error="Dette er en feilmelding" />
99
- <h3>Small</h3>
100
- <Checkboxes size="small" />
101
- <h3>Small + error</h3>
102
- <Checkboxes size="small" error="Dette er en feilmelding" />
103
- <h3>Default value</h3>
104
- <Checkboxes defaultValue={[1, "Melon"]} />
105
- <h3>Disabled</h3>
106
- <Checkboxes disabled />
107
- </>
108
- );
109
- };