@bbl-digital/snorre 4.0.31 → 4.1.0-beta.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (96) hide show
  1. package/dist/bundle.js +498 -445
  2. package/esm/core/BoxedTable/BoxedTable.stories.js +407 -303
  3. package/esm/core/BoxedTable/DraggableRow/index.js +15 -13
  4. package/esm/core/BoxedTable/DraggableRow/styles.js +20 -14
  5. package/esm/core/BoxedTable/HeaderCell/styles.js +3 -3
  6. package/esm/core/BoxedTable/RowCell/index.js +14 -4
  7. package/esm/core/BoxedTable/RowCell/styles.js +7 -23
  8. package/esm/core/BoxedTable/TableBody/index.js +10 -0
  9. package/esm/core/BoxedTable/TableBody/styles.js +16 -0
  10. package/esm/core/BoxedTable/TableHeader/index.js +5 -3
  11. package/esm/core/BoxedTable/TableHeader/styles.js +18 -3
  12. package/esm/core/BoxedTable/TableRow/index.js +5 -8
  13. package/esm/core/BoxedTable/TableRow/styles.js +30 -24
  14. package/esm/core/BoxedTable/index.js +18 -7
  15. package/esm/core/BoxedTable/styles.js +25 -19
  16. package/esm/core/ListPager/index.js +20 -2
  17. package/lib/core/Box/Box.stories.d.ts.map +1 -1
  18. package/lib/core/BoxedTable/BoxedTable.stories.d.ts +14 -35
  19. package/lib/core/BoxedTable/BoxedTable.stories.d.ts.map +1 -1
  20. package/lib/core/BoxedTable/BoxedTable.stories.js +407 -303
  21. package/lib/core/BoxedTable/DraggableRow/index.d.ts.map +1 -1
  22. package/lib/core/BoxedTable/DraggableRow/index.js +15 -13
  23. package/lib/core/BoxedTable/DraggableRow/styles.d.ts +5 -1
  24. package/lib/core/BoxedTable/DraggableRow/styles.d.ts.map +1 -1
  25. package/lib/core/BoxedTable/DraggableRow/styles.js +20 -14
  26. package/lib/core/BoxedTable/HeaderCell/styles.d.ts +6 -1
  27. package/lib/core/BoxedTable/HeaderCell/styles.d.ts.map +1 -1
  28. package/lib/core/BoxedTable/HeaderCell/styles.js +3 -3
  29. package/lib/core/BoxedTable/RowCell/index.d.ts +2 -0
  30. package/lib/core/BoxedTable/RowCell/index.d.ts.map +1 -1
  31. package/lib/core/BoxedTable/RowCell/index.js +14 -4
  32. package/lib/core/BoxedTable/RowCell/styles.d.ts +0 -3
  33. package/lib/core/BoxedTable/RowCell/styles.d.ts.map +1 -1
  34. package/lib/core/BoxedTable/RowCell/styles.js +7 -23
  35. package/lib/core/BoxedTable/TableBody/index.d.ts +7 -0
  36. package/lib/core/BoxedTable/TableBody/index.d.ts.map +1 -0
  37. package/lib/core/BoxedTable/TableBody/index.js +10 -0
  38. package/lib/core/BoxedTable/TableBody/styles.d.ts +6 -0
  39. package/lib/core/BoxedTable/TableBody/styles.d.ts.map +1 -0
  40. package/lib/core/BoxedTable/TableBody/styles.js +16 -0
  41. package/lib/core/BoxedTable/TableHeader/index.d.ts.map +1 -1
  42. package/lib/core/BoxedTable/TableHeader/index.js +5 -3
  43. package/lib/core/BoxedTable/TableHeader/styles.d.ts +5 -1
  44. package/lib/core/BoxedTable/TableHeader/styles.d.ts.map +1 -1
  45. package/lib/core/BoxedTable/TableHeader/styles.js +18 -3
  46. package/lib/core/BoxedTable/TableRow/index.d.ts.map +1 -1
  47. package/lib/core/BoxedTable/TableRow/index.js +5 -8
  48. package/lib/core/BoxedTable/TableRow/styles.d.ts +9 -5
  49. package/lib/core/BoxedTable/TableRow/styles.d.ts.map +1 -1
  50. package/lib/core/BoxedTable/TableRow/styles.js +30 -24
  51. package/lib/core/BoxedTable/index.d.ts +6 -0
  52. package/lib/core/BoxedTable/index.d.ts.map +1 -1
  53. package/lib/core/BoxedTable/index.js +18 -7
  54. package/lib/core/BoxedTable/styles.d.ts +9 -2
  55. package/lib/core/BoxedTable/styles.d.ts.map +1 -1
  56. package/lib/core/BoxedTable/styles.js +25 -19
  57. package/lib/core/ListPager/index.d.ts +2 -0
  58. package/lib/core/ListPager/index.d.ts.map +1 -1
  59. package/lib/core/ListPager/index.js +20 -2
  60. package/package.json +1 -1
  61. package/esm/core/Autocomplete/utils/useHandleOptionsHeight.js +0 -16
  62. package/esm/core/CheckboxController/index.js +0 -22
  63. package/esm/core/Datepicker/yearMonthForm.js +0 -56
  64. package/esm/core/EditorOld/config.js +0 -69
  65. package/esm/core/EditorOld/index.js +0 -147
  66. package/esm/core/EditorOld/styles.js +0 -65
  67. package/esm/core/ImageCarousel/index.js +0 -70
  68. package/esm/core/ImageCarousel/styles.js +0 -58
  69. package/esm/enums/ModifierKey.js +0 -13
  70. package/lib/core/Autocomplete/utils/useHandleOptionsHeight.d.ts +0 -7
  71. package/lib/core/Autocomplete/utils/useHandleOptionsHeight.d.ts.map +0 -1
  72. package/lib/core/Autocomplete/utils/useHandleOptionsHeight.js +0 -16
  73. package/lib/core/CheckboxController/index.d.ts +0 -1
  74. package/lib/core/CheckboxController/index.d.ts.map +0 -1
  75. package/lib/core/CheckboxController/index.js +0 -22
  76. package/lib/core/Datepicker/yearMonthForm.d.ts +0 -10
  77. package/lib/core/Datepicker/yearMonthForm.d.ts.map +0 -1
  78. package/lib/core/Datepicker/yearMonthForm.js +0 -56
  79. package/lib/core/EditorOld/config.d.ts +0 -56
  80. package/lib/core/EditorOld/config.d.ts.map +0 -1
  81. package/lib/core/EditorOld/config.js +0 -69
  82. package/lib/core/EditorOld/index.d.ts +0 -39
  83. package/lib/core/EditorOld/index.d.ts.map +0 -1
  84. package/lib/core/EditorOld/index.js +0 -147
  85. package/lib/core/EditorOld/styles.d.ts +0 -23
  86. package/lib/core/EditorOld/styles.d.ts.map +0 -1
  87. package/lib/core/EditorOld/styles.js +0 -65
  88. package/lib/core/ImageCarousel/index.d.ts +0 -11
  89. package/lib/core/ImageCarousel/index.d.ts.map +0 -1
  90. package/lib/core/ImageCarousel/index.js +0 -70
  91. package/lib/core/ImageCarousel/styles.d.ts +0 -26
  92. package/lib/core/ImageCarousel/styles.d.ts.map +0 -1
  93. package/lib/core/ImageCarousel/styles.js +0 -58
  94. package/lib/enums/ModifierKey.d.ts +0 -12
  95. package/lib/enums/ModifierKey.d.ts.map +0 -1
  96. package/lib/enums/ModifierKey.js +0 -13
package/esm/core/BoxedTable/BoxedTable.stories.js CHANGED
@@ -5,347 +5,451 @@ import TableRow from './TableRow';
5
5
  import RowCell from './RowCell';
6
6
  import DraggableRow from './DraggableRow';
7
7
  import Checkbox from '../Checkbox';
8
+ import TableBody from './TableBody';
8
9
  import { jsx as _jsx } from "react/jsx-runtime";
9
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
10
- export default {
11
+ import { Fragment as _Fragment } from "react/jsx-runtime";
12
+ const meta = {
11
13
  title: 'Core/BoxedTable',
12
14
  component: BoxedTable
13
15
  };
16
+ export default meta;
14
17
  export const Table = {
15
- render: () => /*#__PURE__*/_jsxs(BoxedTable, {
16
- columns: "2fr 1fr 1fr",
17
- children: [/*#__PURE__*/_jsxs(TableHeader, {
18
- children: [/*#__PURE__*/_jsx(HeaderCell, {
19
- children: "Header 1"
20
- }), /*#__PURE__*/_jsx(HeaderCell, {
21
- children: "Header 2"
22
- }), /*#__PURE__*/_jsx(HeaderCell, {
23
- align: "center",
24
- children: "Header 3 centered"
25
- })]
26
- }), /*#__PURE__*/_jsxs(TableRow, {
27
- onClick: () => console.log('row clicked'),
28
- children: [/*#__PURE__*/_jsx(RowCell, {
29
- children: "Clickable row cell 1"
30
- }), /*#__PURE__*/_jsx(RowCell, {
31
- pLeft: "1em",
32
- pRight: "0.5em",
33
- size: "12px",
34
- children: "cell 2 with custom padding and size"
35
- }), /*#__PURE__*/_jsx(RowCell, {
36
- align: "center",
37
- children: "cell 3 centered"
38
- })]
39
- }), /*#__PURE__*/_jsxs(TableRow, {
40
- children: [/*#__PURE__*/_jsx(RowCell, {
41
- mobileTitle: "Mobile title",
42
- children: "Non clickable row cell 1"
43
- }), /*#__PURE__*/_jsx(RowCell, {
44
- mobileTitle: "Mobile title",
45
- children: "cell 2"
46
- }), /*#__PURE__*/_jsx(RowCell, {
47
- align: "right",
48
- children: "cell 3 right align"
18
+ args: {
19
+ columns: '2fr 1fr 1fr',
20
+ children: /*#__PURE__*/_jsxs(_Fragment, {
21
+ children: [/*#__PURE__*/_jsxs(TableHeader, {
22
+ children: [/*#__PURE__*/_jsx(HeaderCell, {
23
+ children: "Header 1"
24
+ }), /*#__PURE__*/_jsx(HeaderCell, {
25
+ children: "Header 2"
26
+ }), /*#__PURE__*/_jsx(HeaderCell, {
27
+ align: "center",
28
+ children: "Header 3 centered"
29
+ })]
30
+ }), /*#__PURE__*/_jsxs(TableBody, {
31
+ children: [/*#__PURE__*/_jsxs(TableRow, {
32
+ onClick: () => console.log('row clicked'),
33
+ children: [/*#__PURE__*/_jsx(RowCell, {
34
+ children: "Clickable row cell 1"
35
+ }), /*#__PURE__*/_jsx(RowCell, {
36
+ pLeft: "1em",
37
+ pRight: "0.5em",
38
+ size: "12px",
39
+ children: "cell 2 with custom padding and size"
40
+ }), /*#__PURE__*/_jsx(RowCell, {
41
+ align: "center",
42
+ children: "cell 3 centered"
43
+ })]
44
+ }), /*#__PURE__*/_jsxs(TableRow, {
45
+ children: [/*#__PURE__*/_jsx(RowCell, {
46
+ mobileTitle: "Mobile title",
47
+ children: "Non clickable row cell 1"
48
+ }), /*#__PURE__*/_jsx(RowCell, {
49
+ mobileTitle: "Mobile title",
50
+ children: "cell 2"
51
+ }), /*#__PURE__*/_jsx(RowCell, {
52
+ align: "right",
53
+ children: "cell 3 right align"
54
+ })]
55
+ })]
49
56
  })]
50
- })]
51
- }),
57
+ })
58
+ },
52
59
  name: 'Table'
53
60
  };
61
+ export const TableWithCaption = {
62
+ args: {
63
+ columns: '2fr 1fr 1fr',
64
+ caption: 'This is a caption that will help screenreader users',
65
+ children: /*#__PURE__*/_jsxs(_Fragment, {
66
+ children: [/*#__PURE__*/_jsxs(TableHeader, {
67
+ children: [/*#__PURE__*/_jsx(HeaderCell, {
68
+ children: "Header 1"
69
+ }), /*#__PURE__*/_jsx(HeaderCell, {
70
+ children: "Header 2"
71
+ }), /*#__PURE__*/_jsx(HeaderCell, {
72
+ align: "center",
73
+ children: "Header 3 centered"
74
+ })]
75
+ }), /*#__PURE__*/_jsxs(TableBody, {
76
+ children: [/*#__PURE__*/_jsxs(TableRow, {
77
+ onClick: () => console.log('row clicked'),
78
+ children: [/*#__PURE__*/_jsx(RowCell, {
79
+ children: "Clickable row cell 1"
80
+ }), /*#__PURE__*/_jsx(RowCell, {
81
+ pLeft: "1em",
82
+ pRight: "0.5em",
83
+ size: "12px",
84
+ children: "cell 2 with custom padding and size"
85
+ }), /*#__PURE__*/_jsx(RowCell, {
86
+ align: "center",
87
+ children: "cell 3 centered"
88
+ })]
89
+ }), /*#__PURE__*/_jsxs(TableRow, {
90
+ children: [/*#__PURE__*/_jsx(RowCell, {
91
+ mobileTitle: "Mobile title",
92
+ children: "Non clickable row cell 1"
93
+ }), /*#__PURE__*/_jsx(RowCell, {
94
+ mobileTitle: "Mobile title",
95
+ children: "cell 2"
96
+ }), /*#__PURE__*/_jsx(RowCell, {
97
+ align: "right",
98
+ children: "cell 3 right align"
99
+ })]
100
+ })]
101
+ })]
102
+ })
103
+ },
104
+ name: 'Table with caption'
105
+ };
54
106
  export const WithCheckbox = {
55
- render: () => /*#__PURE__*/_jsxs(BoxedTable, {
107
+ args: {
56
108
  hasCheckbox: true,
57
- columns: "35px 1fr 1fr",
58
- type: "compact",
59
- children: [/*#__PURE__*/_jsxs(TableHeader, {
60
- children: [/*#__PURE__*/_jsx(HeaderCell, {}), /*#__PURE__*/_jsx(HeaderCell, {
61
- children: "Header 1"
62
- }), /*#__PURE__*/_jsx(HeaderCell, {
63
- children: "Header 2"
64
- })]
65
- }), /*#__PURE__*/_jsxs(TableRow, {
66
- children: [/*#__PURE__*/_jsx(Checkbox, {
67
- checked: true
68
- }), /*#__PURE__*/_jsx(RowCell, {
69
- children: "cell 2 with custom padding and size"
70
- }), /*#__PURE__*/_jsx(RowCell, {
71
- children: "cell 3 centered with very long text blablablablablablablablablabla"
72
- }), /*#__PURE__*/_jsx(RowCell, {
73
- children: "cell 3 centered"
74
- })]
75
- }), /*#__PURE__*/_jsxs(TableRow, {
76
- children: [/*#__PURE__*/_jsx(Checkbox, {
77
- checked: true
78
- }), /*#__PURE__*/_jsx(RowCell, {
79
- children: "cell 2"
80
- }), /*#__PURE__*/_jsx(RowCell, {
81
- children: "cell 3 right align"
82
- }), /*#__PURE__*/_jsx(RowCell, {
83
- children: "cell 3 right align"
84
- })]
85
- }), /*#__PURE__*/_jsxs(TableRow, {
86
- children: [/*#__PURE__*/_jsx(Checkbox, {
87
- checked: true
88
- }), /*#__PURE__*/_jsx(RowCell, {
89
- children: "cell 2"
90
- }), /*#__PURE__*/_jsx(RowCell, {
91
- children: "cell 3 right align"
92
- }), /*#__PURE__*/_jsx(Checkbox, {
93
- children: "Should not break"
109
+ columns: '35px 1fr 1fr',
110
+ type: 'compact',
111
+ children: /*#__PURE__*/_jsxs(_Fragment, {
112
+ children: [/*#__PURE__*/_jsxs(TableHeader, {
113
+ children: [/*#__PURE__*/_jsx(HeaderCell, {}), /*#__PURE__*/_jsx(HeaderCell, {
114
+ children: "Header 1"
115
+ }), /*#__PURE__*/_jsx(HeaderCell, {
116
+ children: "Header 2"
117
+ })]
118
+ }), /*#__PURE__*/_jsxs(TableBody, {
119
+ children: [/*#__PURE__*/_jsxs(TableRow, {
120
+ children: [/*#__PURE__*/_jsx(RowCell, {
121
+ children: /*#__PURE__*/_jsx(Checkbox, {
122
+ checked: true
123
+ })
124
+ }), /*#__PURE__*/_jsx(RowCell, {
125
+ children: "cell 2 with custom padding and size"
126
+ }), /*#__PURE__*/_jsx(RowCell, {
127
+ children: "cell 3 centered with very long text blablablablablablablablablabla"
128
+ }), /*#__PURE__*/_jsx(RowCell, {
129
+ children: "cell 3 centered"
130
+ })]
131
+ }), /*#__PURE__*/_jsxs(TableRow, {
132
+ children: [/*#__PURE__*/_jsx(RowCell, {
133
+ children: /*#__PURE__*/_jsx(Checkbox, {
134
+ checked: true
135
+ })
136
+ }), /*#__PURE__*/_jsx(RowCell, {
137
+ children: "cell 2"
138
+ }), /*#__PURE__*/_jsx(RowCell, {
139
+ children: "cell 3 left align"
140
+ }), /*#__PURE__*/_jsx(RowCell, {
141
+ children: "cell 3 left align"
142
+ })]
143
+ }), /*#__PURE__*/_jsxs(TableRow, {
144
+ children: [/*#__PURE__*/_jsx(RowCell, {
145
+ children: /*#__PURE__*/_jsx(Checkbox, {
146
+ checked: true
147
+ })
148
+ }), /*#__PURE__*/_jsx(RowCell, {
149
+ children: "cell 2"
150
+ }), /*#__PURE__*/_jsx(RowCell, {
151
+ children: "cell 3 left align"
152
+ }), /*#__PURE__*/_jsx(RowCell, {
153
+ children: /*#__PURE__*/_jsx(Checkbox, {
154
+ children: "Should not break"
155
+ })
156
+ })]
157
+ })]
94
158
  })]
95
- })]
96
- }),
159
+ })
160
+ },
97
161
  name: 'Checkbox'
98
162
  };
99
163
  export const WithSort = {
100
- render: () => /*#__PURE__*/_jsxs(BoxedTable, {
101
- columns: "2fr 1fr 1fr",
102
- children: [/*#__PURE__*/_jsxs(TableHeader, {
103
- children: [/*#__PURE__*/_jsx(HeaderCell, {
104
- sortable: true,
105
- sortOrder: "asc",
106
- noSortReturnValue: "my value",
107
- onSortChange: e => console.log('sort changed with value:', e),
108
- children: "Sortable headers"
109
- }), /*#__PURE__*/_jsx(HeaderCell, {
110
- sortable: true,
111
- sortOrder: "desc",
112
- onSortChange: e => console.log('sort changed with value:', e),
113
- children: "Header 2"
114
- }), /*#__PURE__*/_jsx(HeaderCell, {
115
- sortable: true,
116
- sortOrder: "none",
117
- onSortChange: e => console.log('sort changed with value:', e),
118
- children: "Header 3"
119
- })]
120
- }), /*#__PURE__*/_jsxs(TableRow, {
121
- children: [/*#__PURE__*/_jsx(RowCell, {
122
- className: "my-classname",
123
- children: "row 1 cell 1"
124
- }), /*#__PURE__*/_jsx(RowCell, {
125
- children: "row 1 cell 2"
126
- }), /*#__PURE__*/_jsx(RowCell, {
127
- children: "row 1 cell 3"
128
- })]
129
- }), /*#__PURE__*/_jsxs(TableRow, {
130
- children: [/*#__PURE__*/_jsx(RowCell, {
131
- children: "row 2 cell 1"
132
- }), /*#__PURE__*/_jsx(RowCell, {
133
- children: "row 2 cell 2"
134
- }), /*#__PURE__*/_jsx(RowCell, {
135
- ellipsis: true,
136
- title: "Hello lots of stuff can be found here",
137
- children: "Lots of stuff Lots of stuff Lots of stuff Lots of stuff Lots of stuff Lots of stuff Lots of stuff Lots of stuff Lots of stuff Lots of stuff Lots of stuff Lots of stuff"
164
+ args: {
165
+ columns: '2fr 1fr 1fr',
166
+ children: /*#__PURE__*/_jsxs(_Fragment, {
167
+ children: [/*#__PURE__*/_jsxs(TableHeader, {
168
+ children: [/*#__PURE__*/_jsx(HeaderCell, {
169
+ sortable: true,
170
+ sortOrder: "asc",
171
+ noSortReturnValue: "my value",
172
+ onSortChange: e => console.log('sort changed with value:', e),
173
+ children: "Sortable headers"
174
+ }), /*#__PURE__*/_jsx(HeaderCell, {
175
+ sortable: true,
176
+ sortOrder: "desc",
177
+ onSortChange: e => console.log('sort changed with value:', e),
178
+ children: "Header 2"
179
+ }), /*#__PURE__*/_jsx(HeaderCell, {
180
+ sortable: true,
181
+ sortOrder: "none",
182
+ onSortChange: e => console.log('sort changed with value:', e),
183
+ children: "Header 3"
184
+ })]
185
+ }), /*#__PURE__*/_jsxs(TableBody, {
186
+ children: [/*#__PURE__*/_jsxs(TableRow, {
187
+ children: [/*#__PURE__*/_jsx(RowCell, {
188
+ className: "my-classname",
189
+ children: "row 1 cell 1"
190
+ }), /*#__PURE__*/_jsx(RowCell, {
191
+ children: "row 1 cell 2"
192
+ }), /*#__PURE__*/_jsx(RowCell, {
193
+ children: "row 1 cell 3"
194
+ })]
195
+ }), /*#__PURE__*/_jsxs(TableRow, {
196
+ children: [/*#__PURE__*/_jsx(RowCell, {
197
+ children: "row 2 cell 1"
198
+ }), /*#__PURE__*/_jsx(RowCell, {
199
+ children: "row 2 cell 2"
200
+ }), /*#__PURE__*/_jsx(RowCell, {
201
+ ellipsis: true,
202
+ title: "Hello lots of stuff can be found here",
203
+ children: "Lots of stuff Lots of stuff Lots of stuff Lots of stuff Lots of stuff Lots of stuff Lots of stuff Lots of stuff Lots of stuff Lots of stuff Lots of stuff Lots of stuff"
204
+ })]
205
+ })]
138
206
  })]
139
- })]
140
- }),
207
+ })
208
+ },
141
209
  name: 'With sort'
142
210
  };
143
211
  export const Mysite = {
144
- render: () => /*#__PURE__*/_jsxs(BoxedTable, {
145
- type: "mysite",
146
- columns: "2fr 1fr 1fr",
147
- children: [/*#__PURE__*/_jsxs(TableHeader, {
148
- children: [/*#__PURE__*/_jsx(HeaderCell, {
149
- sortable: true,
150
- sortOrder: "asc",
151
- noSortReturnValue: "my value",
152
- onSortChange: e => console.log('sort changed with value:', e),
153
- children: "Sortable headers"
154
- }), /*#__PURE__*/_jsx(HeaderCell, {
155
- sortable: true,
156
- sortOrder: "desc",
157
- onSortChange: e => console.log('sort changed with value:', e),
158
- children: "Header 2"
159
- }), /*#__PURE__*/_jsx(HeaderCell, {
160
- sortable: true,
161
- sortOrder: "none",
162
- onSortChange: e => console.log('sort changed with value:', e),
163
- children: "Header 3"
164
- })]
165
- }), /*#__PURE__*/_jsxs(TableRow, {
166
- children: [/*#__PURE__*/_jsx(RowCell, {
167
- children: "row 1 cell 1"
168
- }), /*#__PURE__*/_jsx(RowCell, {
169
- children: "row 1 cell 2"
170
- }), /*#__PURE__*/_jsx(RowCell, {
171
- children: "row 1 cell 3"
172
- })]
173
- }), /*#__PURE__*/_jsxs(TableRow, {
174
- children: [/*#__PURE__*/_jsx(RowCell, {
175
- children: "row 2 cell 1"
176
- }), /*#__PURE__*/_jsx(RowCell, {
177
- children: "row 2 cell 2"
178
- }), /*#__PURE__*/_jsx(RowCell, {
179
- children: "row 2 cell 3"
212
+ args: {
213
+ type: 'mysite',
214
+ columns: '2fr 1fr 1fr',
215
+ children: /*#__PURE__*/_jsxs(_Fragment, {
216
+ children: [/*#__PURE__*/_jsxs(TableHeader, {
217
+ children: [/*#__PURE__*/_jsx(HeaderCell, {
218
+ sortable: true,
219
+ sortOrder: "asc",
220
+ noSortReturnValue: "my value",
221
+ onSortChange: e => console.log('sort changed with value:', e),
222
+ children: "Sortable headers"
223
+ }), /*#__PURE__*/_jsx(HeaderCell, {
224
+ sortable: true,
225
+ sortOrder: "desc",
226
+ onSortChange: e => console.log('sort changed with value:', e),
227
+ children: "Header 2"
228
+ }), /*#__PURE__*/_jsx(HeaderCell, {
229
+ sortable: true,
230
+ sortOrder: "none",
231
+ onSortChange: e => console.log('sort changed with value:', e),
232
+ children: "Header 3"
233
+ })]
234
+ }), /*#__PURE__*/_jsxs(TableBody, {
235
+ children: [/*#__PURE__*/_jsxs(TableRow, {
236
+ children: [/*#__PURE__*/_jsx(RowCell, {
237
+ children: "row 1 cell 1"
238
+ }), /*#__PURE__*/_jsx(RowCell, {
239
+ children: "row 1 cell 2"
240
+ }), /*#__PURE__*/_jsx(RowCell, {
241
+ children: "row 1 cell 3"
242
+ })]
243
+ }), /*#__PURE__*/_jsxs(TableRow, {
244
+ children: [/*#__PURE__*/_jsx(RowCell, {
245
+ children: "row 2 cell 1"
246
+ }), /*#__PURE__*/_jsx(RowCell, {
247
+ children: "row 2 cell 2"
248
+ }), /*#__PURE__*/_jsx(RowCell, {
249
+ children: "row 2 cell 3"
250
+ })]
251
+ })]
180
252
  })]
181
- })]
182
- }),
253
+ })
254
+ },
183
255
  name: 'Mysite'
184
256
  };
185
257
  export const Compact = {
186
- render: () => /*#__PURE__*/_jsxs(BoxedTable, {
187
- type: "compact",
188
- columns: "2fr 1fr 1fr",
189
- children: [/*#__PURE__*/_jsxs(TableHeader, {
190
- children: [/*#__PURE__*/_jsx(HeaderCell, {
191
- sortable: true,
192
- sortOrder: "asc",
193
- noSortReturnValue: "my value",
194
- onSortChange: e => console.log('sort changed with value:', e),
195
- children: "Sortable headers"
196
- }), /*#__PURE__*/_jsx(HeaderCell, {
197
- sortable: true,
198
- sortOrder: "desc",
199
- onSortChange: e => console.log('sort changed with value:', e),
200
- children: "Header 2"
201
- }), /*#__PURE__*/_jsx(HeaderCell, {
202
- sortable: true,
203
- sortOrder: "none",
204
- onSortChange: e => console.log('sort changed with value:', e),
205
- children: "Header 3"
206
- })]
207
- }), /*#__PURE__*/_jsxs(TableRow, {
208
- children: [/*#__PURE__*/_jsx(RowCell, {
209
- children: "row 1 cell 1"
210
- }), /*#__PURE__*/_jsx(RowCell, {
211
- children: "row 1 cell 2"
212
- }), /*#__PURE__*/_jsx(RowCell, {
213
- children: "row 1 cell 3"
214
- })]
215
- }), /*#__PURE__*/_jsxs(TableRow, {
216
- children: [/*#__PURE__*/_jsx(RowCell, {
217
- children: "row 2 cell 1"
218
- }), /*#__PURE__*/_jsx(RowCell, {
219
- children: "row 2 cell 2"
220
- }), /*#__PURE__*/_jsx(RowCell, {
221
- children: "row 2 cell 3"
258
+ args: {
259
+ type: 'compact',
260
+ columns: '2fr 1fr 1fr',
261
+ children: /*#__PURE__*/_jsxs(_Fragment, {
262
+ children: [/*#__PURE__*/_jsxs(TableHeader, {
263
+ children: [/*#__PURE__*/_jsx(HeaderCell, {
264
+ sortable: true,
265
+ sortOrder: "asc",
266
+ noSortReturnValue: "my value",
267
+ onSortChange: e => console.log('sort changed with value:', e),
268
+ children: "Sortable headers"
269
+ }), /*#__PURE__*/_jsx(HeaderCell, {
270
+ sortable: true,
271
+ sortOrder: "desc",
272
+ onSortChange: e => console.log('sort changed with value:', e),
273
+ children: "Header 2"
274
+ }), /*#__PURE__*/_jsx(HeaderCell, {
275
+ sortable: true,
276
+ sortOrder: "none",
277
+ onSortChange: e => console.log('sort changed with value:', e),
278
+ children: "Header 3"
279
+ })]
280
+ }), /*#__PURE__*/_jsxs(TableBody, {
281
+ children: [/*#__PURE__*/_jsxs(TableRow, {
282
+ children: [/*#__PURE__*/_jsx(RowCell, {
283
+ children: "row 1 cell 1"
284
+ }), /*#__PURE__*/_jsx(RowCell, {
285
+ children: "row 1 cell 2"
286
+ }), /*#__PURE__*/_jsx(RowCell, {
287
+ children: "row 1 cell 3"
288
+ })]
289
+ }), /*#__PURE__*/_jsxs(TableRow, {
290
+ children: [/*#__PURE__*/_jsx(RowCell, {
291
+ children: "row 2 cell 1"
292
+ }), /*#__PURE__*/_jsx(RowCell, {
293
+ children: "row 2 cell 2"
294
+ }), /*#__PURE__*/_jsx(RowCell, {
295
+ children: "row 2 cell 3"
296
+ })]
297
+ })]
222
298
  })]
223
- })]
224
- }),
299
+ })
300
+ },
225
301
  name: 'Compact'
226
302
  };
227
303
  export const Expandable = {
228
- render: () => /*#__PURE__*/_jsxs(BoxedTable, {
229
- type: "mysite",
230
- columns: "1fr 1fr 1fr",
231
- children: [/*#__PURE__*/_jsxs(TableHeader, {
232
- children: [/*#__PURE__*/_jsx(HeaderCell, {
233
- children: "Header 1"
234
- }), /*#__PURE__*/_jsx(HeaderCell, {
235
- children: "Header 2"
236
- }), /*#__PURE__*/_jsx(HeaderCell, {
237
- children: "Header 3"
238
- })]
239
- }), /*#__PURE__*/_jsxs(TableRow, {
240
- expandable: true,
241
- expandableContent: /*#__PURE__*/_jsx("span", {
242
- children: "This is some nice content"
243
- }),
244
- defaultExpanded: true,
245
- children: [/*#__PURE__*/_jsx(RowCell, {
246
- children: "row 1 cell 1"
247
- }), /*#__PURE__*/_jsx(RowCell, {
248
- children: "row 1 cell 2"
249
- }), /*#__PURE__*/_jsx(RowCell, {
250
- children: "row 1 cell 3"
251
- })]
252
- }), /*#__PURE__*/_jsxs(TableRow, {
253
- children: [/*#__PURE__*/_jsx(RowCell, {
254
- children: "row 2 cell 1"
255
- }), /*#__PURE__*/_jsx(RowCell, {
256
- children: "row 2 cell 2"
257
- }), /*#__PURE__*/_jsx(RowCell, {
258
- children: "row 2 cell 3"
304
+ args: {
305
+ columns: '1fr 1fr 1fr',
306
+ children: /*#__PURE__*/_jsxs(_Fragment, {
307
+ children: [/*#__PURE__*/_jsxs(TableHeader, {
308
+ children: [/*#__PURE__*/_jsx(HeaderCell, {
309
+ children: "Header 1"
310
+ }), /*#__PURE__*/_jsx(HeaderCell, {
311
+ children: "Header 2"
312
+ }), /*#__PURE__*/_jsx(HeaderCell, {
313
+ children: "Header 3"
314
+ })]
315
+ }), /*#__PURE__*/_jsxs(TableBody, {
316
+ children: [/*#__PURE__*/_jsxs(TableRow, {
317
+ expandable: true,
318
+ expandableContent: /*#__PURE__*/_jsx("span", {
319
+ children: "This is some nice content"
320
+ }),
321
+ defaultExpanded: true,
322
+ children: [/*#__PURE__*/_jsx(RowCell, {
323
+ as: "div",
324
+ children: "row 1 cell 1"
325
+ }), /*#__PURE__*/_jsx(RowCell, {
326
+ as: "div",
327
+ children: "row 1 cell 2"
328
+ }), /*#__PURE__*/_jsx(RowCell, {
329
+ as: "div",
330
+ children: "row 1 cell 3"
331
+ })]
332
+ }), /*#__PURE__*/_jsxs(TableRow, {
333
+ children: [/*#__PURE__*/_jsx(RowCell, {
334
+ children: "row 2 cell 1"
335
+ }), /*#__PURE__*/_jsx(RowCell, {
336
+ children: "row 2 cell 2"
337
+ }), /*#__PURE__*/_jsx(RowCell, {
338
+ children: "row 2 cell 3"
339
+ })]
340
+ })]
259
341
  })]
260
- })]
261
- }),
342
+ })
343
+ },
262
344
  name: 'Expandable'
263
345
  };
264
346
  export const DragAndDropList = {
265
- render: () => /*#__PURE__*/_jsxs(BoxedTable, {
266
- columns: "1fr 1fr 1fr",
347
+ args: {
348
+ columns: '1fr 1fr 1fr',
349
+ dropList: true,
267
350
  onDrop: console.log,
268
- children: [/*#__PURE__*/_jsxs(TableHeader, {
269
- children: [/*#__PURE__*/_jsx(HeaderCell, {
270
- children: "Header 1"
271
- }), /*#__PURE__*/_jsx(HeaderCell, {
272
- children: "Header 2"
273
- }), /*#__PURE__*/_jsx(HeaderCell, {
274
- align: "center",
275
- children: "Header 3 centered"
276
- })]
277
- }), /*#__PURE__*/_jsxs(DraggableRow, {
278
- id: "1",
279
- index: 0,
280
- subContent: /*#__PURE__*/_jsxs("div", {
281
- children: [/*#__PURE__*/_jsx("span", {
282
- children: "This is some nice content"
283
- }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("span", {
284
- children: "Here we can add lots of stuff"
351
+ children: /*#__PURE__*/_jsxs(_Fragment, {
352
+ children: [/*#__PURE__*/_jsxs(TableHeader, {
353
+ children: [/*#__PURE__*/_jsx(HeaderCell, {
354
+ children: "Header 1"
355
+ }), /*#__PURE__*/_jsx(HeaderCell, {
356
+ children: "Header 2"
357
+ }), /*#__PURE__*/_jsx(HeaderCell, {
358
+ align: "center",
359
+ children: "Header 3 centered"
360
+ })]
361
+ }), /*#__PURE__*/_jsxs(TableBody, {
362
+ children: [/*#__PURE__*/_jsxs(DraggableRow, {
363
+ id: "1",
364
+ index: 0,
365
+ subContent: /*#__PURE__*/_jsxs("div", {
366
+ children: [/*#__PURE__*/_jsx("span", {
367
+ children: "This is some nice content"
368
+ }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("span", {
369
+ children: "Here we can add lots of stuff"
370
+ })]
371
+ }),
372
+ children: [/*#__PURE__*/_jsx(RowCell, {
373
+ as: "div",
374
+ children: "row 1 cell 1"
375
+ }), /*#__PURE__*/_jsx(RowCell, {
376
+ as: "div",
377
+ children: "row 1 cell 2"
378
+ }), /*#__PURE__*/_jsx(RowCell, {
379
+ as: "div",
380
+ children: "row 1 cell 3"
381
+ })]
382
+ }), /*#__PURE__*/_jsxs(DraggableRow, {
383
+ id: "2",
384
+ index: 1,
385
+ children: [/*#__PURE__*/_jsx(RowCell, {
386
+ as: "div",
387
+ children: "row 2 cell 1"
388
+ }), /*#__PURE__*/_jsx(RowCell, {
389
+ as: "div",
390
+ children: "row 2 cell 2"
391
+ }), /*#__PURE__*/_jsx(RowCell, {
392
+ as: "div",
393
+ children: "row 2 cell 3"
394
+ })]
285
395
  })]
286
- }),
287
- children: [/*#__PURE__*/_jsx(RowCell, {
288
- children: "row 1 cell 1"
289
- }), /*#__PURE__*/_jsx(RowCell, {
290
- children: "row 1 cell 2"
291
- }), /*#__PURE__*/_jsx(RowCell, {
292
- children: "row 1 cell 3"
293
- })]
294
- }), /*#__PURE__*/_jsxs(DraggableRow, {
295
- id: "2",
296
- index: 1,
297
- children: [/*#__PURE__*/_jsx(RowCell, {
298
- children: "row 2 cell 1"
299
- }), /*#__PURE__*/_jsx(RowCell, {
300
- children: "row 2 cell 2"
301
- }), /*#__PURE__*/_jsx(RowCell, {
302
- children: "row 2 cell 3"
303
396
  })]
304
- })]
305
- }),
397
+ })
398
+ },
306
399
  name: 'Drag and drop list'
307
400
  };
308
401
  export const DragAndDropListDragDisabled = {
309
- render: () => /*#__PURE__*/_jsxs(BoxedTable, {
310
- columns: "1fr 1fr 1fr",
402
+ args: {
403
+ columns: '1fr 1fr 1fr',
404
+ dropList: true,
311
405
  onDrop: console.log,
312
- children: [/*#__PURE__*/_jsxs(TableHeader, {
313
- children: [/*#__PURE__*/_jsx(HeaderCell, {
314
- children: "Header 1"
315
- }), /*#__PURE__*/_jsx(HeaderCell, {
316
- children: "Header 2"
317
- }), /*#__PURE__*/_jsx(HeaderCell, {
318
- align: "center",
319
- children: "Header 3 centered"
320
- })]
321
- }), /*#__PURE__*/_jsxs(DraggableRow, {
322
- disableDrag: true,
323
- id: "1",
324
- index: 0,
325
- subContent: /*#__PURE__*/_jsx("div", {
326
- children: /*#__PURE__*/_jsx("span", {
327
- children: "This is some nice content"
328
- })
329
- }),
330
- children: [/*#__PURE__*/_jsx(RowCell, {
331
- children: "row 1 cell 1"
332
- }), /*#__PURE__*/_jsx(RowCell, {
333
- children: "row 1 cell 2"
334
- }), /*#__PURE__*/_jsx(RowCell, {
335
- children: "row 1 cell 3"
336
- })]
337
- }), /*#__PURE__*/_jsxs(DraggableRow, {
338
- disableDrag: true,
339
- id: "2",
340
- index: 1,
341
- children: [/*#__PURE__*/_jsx(RowCell, {
342
- children: "row 2 cell 1"
343
- }), /*#__PURE__*/_jsx(RowCell, {
344
- children: "row 2 cell 2"
345
- }), /*#__PURE__*/_jsx(RowCell, {
346
- children: "row 2 cell 3"
406
+ children: /*#__PURE__*/_jsxs(_Fragment, {
407
+ children: [/*#__PURE__*/_jsxs(TableHeader, {
408
+ children: [/*#__PURE__*/_jsx(HeaderCell, {
409
+ children: "Header 1"
410
+ }), /*#__PURE__*/_jsx(HeaderCell, {
411
+ children: "Header 2"
412
+ }), /*#__PURE__*/_jsx(HeaderCell, {
413
+ align: "center",
414
+ children: "Header 3 centered"
415
+ })]
416
+ }), /*#__PURE__*/_jsxs(TableBody, {
417
+ children: [/*#__PURE__*/_jsxs(DraggableRow, {
418
+ disableDrag: true,
419
+ id: "1",
420
+ index: 0,
421
+ subContent: /*#__PURE__*/_jsx("div", {
422
+ children: /*#__PURE__*/_jsx("span", {
423
+ children: "This is some nice content"
424
+ })
425
+ }),
426
+ children: [/*#__PURE__*/_jsx(RowCell, {
427
+ as: "div",
428
+ children: "row 1 cell 1"
429
+ }), /*#__PURE__*/_jsx(RowCell, {
430
+ as: "div",
431
+ children: "row 1 cell 2"
432
+ }), /*#__PURE__*/_jsx(RowCell, {
433
+ as: "div",
434
+ children: "row 1 cell 3"
435
+ })]
436
+ }), /*#__PURE__*/_jsxs(DraggableRow, {
437
+ disableDrag: true,
438
+ id: "2",
439
+ index: 1,
440
+ children: [/*#__PURE__*/_jsx(RowCell, {
441
+ as: "div",
442
+ children: "row 2 cell 1"
443
+ }), /*#__PURE__*/_jsx(RowCell, {
444
+ as: "div",
445
+ children: "row 2 cell 2"
446
+ }), /*#__PURE__*/_jsx(RowCell, {
447
+ as: "div",
448
+ children: "row 2 cell 3"
449
+ })]
450
+ })]
347
451
  })]
348
- })]
349
- }),
452
+ })
453
+ },
350
454
  name: 'Drag and drop list (drag disabled)'
351
455
  };