@navikt/ds-react 0.13.3 → 0.14.2

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 (46) hide show
  1. package/cjs/form/Switch.js +58 -0
  2. package/cjs/form/index.js +3 -1
  3. package/cjs/loader/Loader.js +1 -1
  4. package/cjs/table/DataCell.js +5 -2
  5. package/cjs/table/HeaderCell.js +4 -2
  6. package/cjs/table/Row.js +4 -2
  7. package/cjs/table/Table.js +7 -2
  8. package/esm/form/Switch.d.ts +18 -0
  9. package/esm/form/Switch.js +35 -0
  10. package/esm/form/Switch.js.map +1 -0
  11. package/esm/form/index.d.ts +1 -0
  12. package/esm/form/index.js +1 -0
  13. package/esm/form/index.js.map +1 -1
  14. package/esm/loader/Loader.js +1 -1
  15. package/esm/loader/Loader.js.map +1 -1
  16. package/esm/table/DataCell.js +6 -3
  17. package/esm/table/DataCell.js.map +1 -1
  18. package/esm/table/HeaderCell.d.ts +1 -0
  19. package/esm/table/HeaderCell.js +5 -3
  20. package/esm/table/HeaderCell.js.map +1 -1
  21. package/esm/table/Row.d.ts +5 -0
  22. package/esm/table/Row.js +4 -2
  23. package/esm/table/Row.js.map +1 -1
  24. package/esm/table/Table.d.ts +9 -0
  25. package/esm/table/Table.js +7 -3
  26. package/esm/table/Table.js.map +1 -1
  27. package/package.json +5 -4
  28. package/src/form/Switch.tsx +81 -0
  29. package/src/form/index.ts +1 -0
  30. package/src/form/stories/switch.stories.mdx +104 -0
  31. package/src/form/stories/switch.stories.tsx +70 -0
  32. package/src/grid/stories/grid.stories.mdx +3 -3
  33. package/src/guide-panel/stories/example.css +4 -4
  34. package/src/guide-panel/stories/guidepanel.stories.mdx +7 -7
  35. package/src/guide-panel/stories/guidepanel.stories.tsx +6 -6
  36. package/src/loader/Loader.tsx +1 -1
  37. package/src/loader/stories/loader.stories.mdx +0 -16
  38. package/src/popover/stories/popover.stories.tsx +1 -1
  39. package/src/speech-bubble/stories/speechbubble.stories.mdx +4 -4
  40. package/src/speech-bubble/stories/speechbubble.stories.tsx +2 -2
  41. package/src/table/DataCell.tsx +20 -4
  42. package/src/table/HeaderCell.tsx +22 -5
  43. package/src/table/Row.tsx +18 -4
  44. package/src/table/Table.tsx +25 -8
  45. package/src/table/stories/table.stories.tsx +157 -74
  46. package/src/typography/stories/index.css +1 -1
package/src/table/stories/table.stories.tsx CHANGED
@@ -1,6 +1,6 @@
1
- import React from "react";
1
+ import React, { useState } from "react";
2
2
  import { Table } from "../index";
3
- import { Alert, Link } from "@navikt/ds-react";
3
+ import { Alert, Checkbox, Link } from "@navikt/ds-react";
4
4
 
5
5
  export default {
6
6
  title: "ds-react/table",
@@ -8,70 +8,46 @@ export default {
8
8
  };
9
9
 
10
10
  export const All = () => {
11
+ const TableComponent = (props) => (
12
+ <Table {...props}>
13
+ <Table.Header>
14
+ <Table.Row>
15
+ <Table.HeaderCell>ID</Table.HeaderCell>
16
+ <Table.HeaderCell>Fornavn</Table.HeaderCell>
17
+ <Table.HeaderCell>Etternavn</Table.HeaderCell>
18
+ <Table.HeaderCell>Rolle</Table.HeaderCell>
19
+ </Table.Row>
20
+ </Table.Header>
21
+ <Table.Body>
22
+ <Table.Row>
23
+ <Table.HeaderCell>1</Table.HeaderCell>
24
+ <Table.DataCell>Jean-Luc</Table.DataCell>
25
+ <Table.DataCell>Picard</Table.DataCell>
26
+ <Table.DataCell>Kaptein</Table.DataCell>
27
+ </Table.Row>
28
+ <Table.Row>
29
+ <Table.HeaderCell>2</Table.HeaderCell>
30
+ <Table.DataCell>William</Table.DataCell>
31
+ <Table.DataCell>Riker</Table.DataCell>
32
+ <Table.DataCell>Kommandør</Table.DataCell>
33
+ </Table.Row>
34
+ <Table.Row>
35
+ <Table.HeaderCell>3</Table.HeaderCell>
36
+ <Table.DataCell>Geordi</Table.DataCell>
37
+ <Table.DataCell>La Forge</Table.DataCell>
38
+ <Table.DataCell>Sjefsingeniør</Table.DataCell>
39
+ </Table.Row>
40
+ </Table.Body>
41
+ </Table>
42
+ );
11
43
  return (
12
44
  <>
13
45
  <h1>Table</h1>
14
- <Table>
15
- <Table.Header>
16
- <Table.Row>
17
- <Table.HeaderCell>ID</Table.HeaderCell>
18
- <Table.HeaderCell>Fornavn</Table.HeaderCell>
19
- <Table.HeaderCell>Etternavn</Table.HeaderCell>
20
- <Table.HeaderCell>Rolle</Table.HeaderCell>
21
- </Table.Row>
22
- </Table.Header>
23
- <Table.Body>
24
- <Table.Row>
25
- <Table.HeaderCell>1</Table.HeaderCell>
26
- <Table.DataCell>Jean-Luc</Table.DataCell>
27
- <Table.DataCell>Picard</Table.DataCell>
28
- <Table.DataCell>Kaptein</Table.DataCell>
29
- </Table.Row>
30
- <Table.Row>
31
- <Table.HeaderCell>2</Table.HeaderCell>
32
- <Table.DataCell>William</Table.DataCell>
33
- <Table.DataCell>Riker</Table.DataCell>
34
- <Table.DataCell>Kommandør</Table.DataCell>
35
- </Table.Row>
36
- <Table.Row>
37
- <Table.HeaderCell>3</Table.HeaderCell>
38
- <Table.DataCell>Geordi</Table.DataCell>
39
- <Table.DataCell>La Forge</Table.DataCell>
40
- <Table.DataCell>Sjefsingeniør</Table.DataCell>
41
- </Table.Row>
42
- </Table.Body>
43
- </Table>
46
+ <TableComponent />
47
+ <h2>Zebra</h2>
48
+ <TableComponent zebraStripes />
44
49
  <h2>Small Table</h2>
45
- <Table size="small">
46
- <Table.Header>
47
- <Table.Row>
48
- <Table.HeaderCell>ID</Table.HeaderCell>
49
- <Table.HeaderCell>Fornavn</Table.HeaderCell>
50
- <Table.HeaderCell>Etternavn</Table.HeaderCell>
51
- <Table.HeaderCell>Rolle</Table.HeaderCell>
52
- </Table.Row>
53
- </Table.Header>
54
- <Table.Body>
55
- <Table.Row>
56
- <Table.HeaderCell>1</Table.HeaderCell>
57
- <Table.DataCell>Jean-Luc</Table.DataCell>
58
- <Table.DataCell>Picard</Table.DataCell>
59
- <Table.DataCell>Kaptein</Table.DataCell>
60
- </Table.Row>
61
- <Table.Row>
62
- <Table.HeaderCell>2</Table.HeaderCell>
63
- <Table.DataCell>William</Table.DataCell>
64
- <Table.DataCell>Riker</Table.DataCell>
65
- <Table.DataCell>Kommandør</Table.DataCell>
66
- </Table.Row>
67
- <Table.Row>
68
- <Table.HeaderCell>3</Table.HeaderCell>
69
- <Table.DataCell>Geordi</Table.DataCell>
70
- <Table.DataCell>La Forge</Table.DataCell>
71
- <Table.DataCell>Sjefsingeniør</Table.DataCell>
72
- </Table.Row>
73
- </Table.Body>
74
- </Table>
50
+ <TableComponent size="small" />
75
51
  <h2>Table with divs</h2>
76
52
  <Alert variant="warning">
77
53
  Obs! Hvis man skal bygge tabeller uten å bruke vanlig {"<tabell> "}
@@ -87,48 +63,48 @@ export const All = () => {
87
63
  <div className="navds-table" role="table">
88
64
  <div className="navds-table__header" role="rowgroup">
89
65
  <div className="navds-table__row" role="row">
90
- <div className="navds-table__cell" role="columnheader">
66
+ <div className="navds-table__header-cell" role="columnheader">
91
67
  Fornavn
92
68
  </div>
93
- <div className="navds-table__cell" role="columnheader">
69
+ <div className="navds-table__header-cell" role="columnheader">
94
70
  Etternavn
95
71
  </div>
96
- <div className="navds-table__cell" role="columnheader">
72
+ <div className="navds-table__header-cell" role="columnheader">
97
73
  Rolle
98
74
  </div>
99
75
  </div>
100
76
  </div>
101
77
  <div className="navds-table__body" role="rowgroup">
102
78
  <div className="navds-table__row" role="row">
103
- <div className="navds-table__cell" role="cell">
79
+ <div className="navds-table__data-cell" role="cell">
104
80
  Jean-Luc
105
81
  </div>
106
- <div className="navds-table__cell" role="cell">
82
+ <div className="navds-table__data-cell" role="cell">
107
83
  Picard
108
84
  </div>
109
- <div className="navds-table__cell" role="cell">
85
+ <div className="navds-table__data-cell" role="cell">
110
86
  Kaptein
111
87
  </div>
112
88
  </div>
113
89
  <div className="navds-table__row" role="row">
114
- <div className="navds-table__cell" role="cell">
90
+ <div className="navds-table__data-cell" role="cell">
115
91
  William
116
92
  </div>
117
- <div className="navds-table__cell" role="cell">
93
+ <div className="navds-table__data-cell" role="cell">
118
94
  Riker
119
95
  </div>
120
- <div className="navds-table__cell" role="cell">
96
+ <div className="navds-table__data-cell" role="cell">
121
97
  Kommandør
122
98
  </div>
123
99
  </div>
124
100
  <div className="navds-table__row" role="row">
125
- <div className="navds-table__cell" role="cell">
101
+ <div className="navds-table__data-cell" role="cell">
126
102
  Geordi
127
103
  </div>
128
- <div className="navds-table__cell" role="cell">
104
+ <div className="navds-table__data-cell" role="cell">
129
105
  La Forge
130
106
  </div>
131
- <div className="navds-table__cell" role="cell">
107
+ <div className="navds-table__data-cell" role="cell">
132
108
  Sjefsingeniør
133
109
  </div>
134
110
  </div>
@@ -137,3 +113,110 @@ export const All = () => {
137
113
  </>
138
114
  );
139
115
  };
116
+
117
+ export const Selection = () => (
118
+ <>
119
+ <h1>Selection</h1>
120
+ <h2>Medium</h2>
121
+ <SelectionTable />
122
+ <h2>Small</h2>
123
+ <SelectionTable size="small" />
124
+ </>
125
+ );
126
+
127
+ const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
128
+ const useToggleList = (initialState) => {
129
+ const [list, setList] = useState(initialState);
130
+
131
+ return [
132
+ list,
133
+ (value) =>
134
+ setList((list) =>
135
+ list.includes(value)
136
+ ? list.filter((id) => id !== value)
137
+ : [...list, value]
138
+ ),
139
+ ];
140
+ };
141
+
142
+ const [selectedRows, toggleSelectedRow] = useToggleList([]);
143
+
144
+ return (
145
+ <Table size={size} zebraStripes>
146
+ <Table.Body>
147
+ <Table.Row>
148
+ <Table.DataCell>
149
+ <Checkbox
150
+ size={size}
151
+ checked={selectedRows.includes("all")}
152
+ onChange={() => toggleSelectedRow("all")}
153
+ >
154
+ Select all
155
+ </Checkbox>
156
+ </Table.DataCell>
157
+ <Table.HeaderCell scope="col">Name</Table.HeaderCell>
158
+ <Table.HeaderCell scope="col">Age</Table.HeaderCell>
159
+ <Table.HeaderCell scope="col">Country</Table.HeaderCell>
160
+ <Table.HeaderCell scope="col">Points</Table.HeaderCell>
161
+ </Table.Row>
162
+ <Table.Row selected={selectedRows.includes("1")}>
163
+ <Table.DataCell>
164
+ <Checkbox
165
+ size={size}
166
+ hideLabel
167
+ checked={selectedRows.includes("1")}
168
+ onChange={() => toggleSelectedRow("1")}
169
+ aria-labelledby={`x_r1-${size}`}
170
+ >
171
+ {" "}
172
+ </Checkbox>
173
+ </Table.DataCell>
174
+ <Table.HeaderCell scope="row">
175
+ <span id={`x_r1-${size}`}>Donald Smith</span>
176
+ </Table.HeaderCell>
177
+ <Table.DataCell>32</Table.DataCell>
178
+ <Table.DataCell>USA</Table.DataCell>
179
+ <Table.DataCell>38</Table.DataCell>
180
+ </Table.Row>
181
+ <Table.Row selected={selectedRows.includes("2")}>
182
+ <Table.DataCell>
183
+ <Checkbox
184
+ size={size}
185
+ hideLabel
186
+ checked={selectedRows.includes("2")}
187
+ onChange={() => toggleSelectedRow("2")}
188
+ aria-labelledby={`x_r2-${size}`}
189
+ >
190
+ {" "}
191
+ </Checkbox>
192
+ </Table.DataCell>
193
+ <Table.HeaderCell scope="row">
194
+ <span id={`x_r2-${size}`}>Preben Aalborg</span>
195
+ </Table.HeaderCell>
196
+ <Table.DataCell>44</Table.DataCell>
197
+ <Table.DataCell>Denmark</Table.DataCell>
198
+ <Table.DataCell>11</Table.DataCell>
199
+ </Table.Row>
200
+ <Table.Row selected={selectedRows.includes("3")}>
201
+ <Table.DataCell>
202
+ <Checkbox
203
+ size={size}
204
+ hideLabel
205
+ checked={selectedRows.includes("3")}
206
+ onChange={() => toggleSelectedRow("3")}
207
+ aria-labelledby={`x_r3-${size}`}
208
+ >
209
+ {" "}
210
+ </Checkbox>
211
+ </Table.DataCell>
212
+ <Table.HeaderCell scope="row">
213
+ <span id={`x_r3-${size}`}>Rudolph Bachenmeier</span>
214
+ </Table.HeaderCell>
215
+ <Table.DataCell>32</Table.DataCell>
216
+ <Table.DataCell>Germany</Table.DataCell>
217
+ <Table.DataCell>70</Table.DataCell>
218
+ </Table.Row>
219
+ </Table.Body>
220
+ </Table>
221
+ );
222
+ };
package/src/typography/stories/index.css CHANGED
@@ -1,3 +1,3 @@
1
1
  .typo-story > div:nth-child(even) {
2
- background: var(--navds-color-gray-20);
2
+ background: var(--navds-global-color-gray-200);
3
3
  }