@scania/tegel 0.0.1-beta.0 → 0.0.1-beta.10

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 (144) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/tegel.cjs.js +1 -1
  3. package/dist/collection/collection-manifest.json +2 -2
  4. package/dist/collection/components/modal/modal.css +1 -1
  5. package/dist/esm/loader.js +1 -1
  6. package/dist/esm/tegel.js +1 -1
  7. package/package.json +4 -4
  8. package/readme.md +136 -2
  9. package/dist/collection/components/accordion/accordion.stories.js +0 -91
  10. package/dist/collection/components/badge/badge.stories.js +0 -101
  11. package/dist/collection/components/banner/banner.stories.js +0 -93
  12. package/dist/collection/components/block/block.stories.js +0 -46
  13. package/dist/collection/components/breadcrumb/breadcrumb.stories.js +0 -26
  14. package/dist/collection/components/button/button-native.stories.js +0 -183
  15. package/dist/collection/components/button/button-webcomponent.stories.js +0 -182
  16. package/dist/collection/components/card/card.stories.js +0 -181
  17. package/dist/collection/components/checkbox/checkbox.stories.js +0 -54
  18. package/dist/collection/components/chips/chips.stories.js +0 -124
  19. package/dist/collection/components/data-table/native-table.stories.js +0 -182
  20. package/dist/collection/components/data-table/table-component-basic.stories.js +0 -163
  21. package/dist/collection/components/data-table/table-component-batch-actions.stories.js +0 -129
  22. package/dist/collection/components/data-table/table-component-bodydata.stories.js +0 -58
  23. package/dist/collection/components/data-table/table-component-custom-width.stories.js +0 -198
  24. package/dist/collection/components/data-table/table-component-event-listeners.stories.js +0 -153
  25. package/dist/collection/components/data-table/table-component-expandable-rows.stories.js +0 -137
  26. package/dist/collection/components/data-table/table-component-filtering.stories.js +0 -139
  27. package/dist/collection/components/data-table/table-component-multiselect.stories.js +0 -160
  28. package/dist/collection/components/data-table/table-component-pagination.stories.js +0 -129
  29. package/dist/collection/components/data-table/table-component-sorting.stories.js +0 -107
  30. package/dist/collection/components/datetime/datetime.stories.js +0 -149
  31. package/dist/collection/components/divider/divider.stories.js +0 -116
  32. package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js +0 -130
  33. package/dist/collection/components/dropdown/dropdown-native.stories.js +0 -90
  34. package/dist/collection/components/dropdown/dropdown-wc-default.stories.js +0 -151
  35. package/dist/collection/components/dropdown/dropdown-wc-multiselect.stories.js +0 -146
  36. package/dist/collection/components/footer/footer.stories.js +0 -100
  37. package/dist/collection/components/header/header-all.stories.js +0 -217
  38. package/dist/collection/components/header/header-default.stories.js +0 -47
  39. package/dist/collection/components/header/header-inline.stories.js +0 -113
  40. package/dist/collection/components/header/header-search.stories.js +0 -263
  41. package/dist/collection/components/header/header-toolbar.stories.js +0 -204
  42. package/dist/collection/components/icon/icon-font.stories.js +0 -57
  43. package/dist/collection/components/icon/icon-web-component.stories.js +0 -51
  44. package/dist/collection/components/link/link.stories.js +0 -45
  45. package/dist/collection/components/message/message.stories.js +0 -117
  46. package/dist/collection/components/modal/modal-native.stories.js +0 -121
  47. package/dist/collection/components/modal/modal-webcomponent.stories.js +0 -78
  48. package/dist/collection/components/popover-canvas/popover-canvas.stories.js +0 -87
  49. package/dist/collection/components/popover-menu/popover-menu-icons.stories.js +0 -132
  50. package/dist/collection/components/popover-menu/popover-menu.stories.js +0 -109
  51. package/dist/collection/components/radio-button/radio-button.stories.js +0 -68
  52. package/dist/collection/components/side-menu/side-menu.stories.js +0 -182
  53. package/dist/collection/components/slider/slider.stories.js +0 -251
  54. package/dist/collection/components/spinner/spinner.stories.js +0 -59
  55. package/dist/collection/components/stepper/stepper.stories.js +0 -139
  56. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.stories.js +0 -65
  57. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js +0 -43
  58. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js +0 -32
  59. package/dist/collection/components/textarea/textarea.stories.js +0 -149
  60. package/dist/collection/components/textfield/textfield.stories.js +0 -222
  61. package/dist/collection/components/toast/toast.stories.js +0 -119
  62. package/dist/collection/components/toggle/toggle.stories.js +0 -62
  63. package/dist/collection/components/tooltip/tooltip.stories.js +0 -113
  64. package/dist/collection/components/utility/colour/background-color.stories.js +0 -96
  65. package/dist/collection/components/utility/colour/text-color.stories.js +0 -94
  66. package/dist/collection/foundations-stories/colour/colour-brand.stories.js +0 -38
  67. package/dist/collection/foundations-stories/colour/colour-scales.stories.js +0 -71
  68. package/dist/collection/foundations-stories/colour/colour-semantic.stories.js +0 -40
  69. package/dist/collection/foundations-stories/grid/grid.stories.js +0 -386
  70. package/dist/collection/foundations-stories/spacing/spacing-element.stories.js +0 -100
  71. package/dist/collection/foundations-stories/spacing/spacing-layout.stories.js +0 -94
  72. package/dist/collection/foundations-stories/typography/typography-body.stories.js +0 -16
  73. package/dist/collection/foundations-stories/typography/typography-detail.stories.js +0 -17
  74. package/dist/collection/foundations-stories/typography/typography-headline.stories.js +0 -39
  75. package/dist/collection/foundations-stories/typography/typography-paragraph.stories.js +0 -12
  76. package/dist/tegel/p-0e9d8e6d.entry.js +0 -1
  77. package/dist/tegel/p-29e77404.entry.js +0 -1
  78. package/dist/types/components/accordion/accordion.stories.d.ts +0 -77
  79. package/dist/types/components/badge/badge.stories.d.ts +0 -66
  80. package/dist/types/components/banner/banner.stories.d.ts +0 -68
  81. package/dist/types/components/block/block.stories.d.ts +0 -31
  82. package/dist/types/components/breadcrumb/breadcrumb.stories.d.ts +0 -12
  83. package/dist/types/components/button/button-native.stories.d.ts +0 -144
  84. package/dist/types/components/button/button-webcomponent.stories.d.ts +0 -143
  85. package/dist/types/components/card/card.stories.d.ts +0 -114
  86. package/dist/types/components/checkbox/checkbox.stories.d.ts +0 -39
  87. package/dist/types/components/chips/chips.stories.d.ts +0 -81
  88. package/dist/types/components/data-table/native-table.stories.d.ts +0 -147
  89. package/dist/types/components/data-table/table-component-basic.stories.d.ts +0 -100
  90. package/dist/types/components/data-table/table-component-batch-actions.stories.d.ts +0 -98
  91. package/dist/types/components/data-table/table-component-bodydata.stories.d.ts +0 -38
  92. package/dist/types/components/data-table/table-component-custom-width.stories.d.ts +0 -147
  93. package/dist/types/components/data-table/table-component-event-listeners.stories.d.ts +0 -87
  94. package/dist/types/components/data-table/table-component-expandable-rows.stories.d.ts +0 -87
  95. package/dist/types/components/data-table/table-component-filtering.stories.d.ts +0 -100
  96. package/dist/types/components/data-table/table-component-multiselect.stories.d.ts +0 -100
  97. package/dist/types/components/data-table/table-component-pagination.stories.d.ts +0 -100
  98. package/dist/types/components/data-table/table-component-sorting.stories.d.ts +0 -79
  99. package/dist/types/components/datetime/datetime.stories.d.ts +0 -80
  100. package/dist/types/components/divider/divider.stories.d.ts +0 -72
  101. package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.stories.d.ts +0 -73
  102. package/dist/types/components/dropdown/dropdown-native.stories.d.ts +0 -57
  103. package/dist/types/components/dropdown/dropdown-wc-default.stories.d.ts +0 -115
  104. package/dist/types/components/dropdown/dropdown-wc-multiselect.stories.d.ts +0 -115
  105. package/dist/types/components/footer/footer.stories.d.ts +0 -23
  106. package/dist/types/components/header/header-all.stories.d.ts +0 -29
  107. package/dist/types/components/header/header-default.stories.d.ts +0 -29
  108. package/dist/types/components/header/header-inline.stories.d.ts +0 -29
  109. package/dist/types/components/header/header-search.stories.d.ts +0 -29
  110. package/dist/types/components/header/header-toolbar.stories.d.ts +0 -29
  111. package/dist/types/components/icon/icon-font.stories.d.ts +0 -38
  112. package/dist/types/components/icon/icon-web-component.stories.d.ts +0 -38
  113. package/dist/types/components/link/link.stories.d.ts +0 -33
  114. package/dist/types/components/message/message.stories.d.ts +0 -67
  115. package/dist/types/components/modal/modal-native.stories.d.ts +0 -51
  116. package/dist/types/components/modal/modal-webcomponent.stories.d.ts +0 -44
  117. package/dist/types/components/popover-canvas/popover-canvas.stories.d.ts +0 -25
  118. package/dist/types/components/popover-menu/popover-menu-icons.stories.d.ts +0 -27
  119. package/dist/types/components/popover-menu/popover-menu.stories.d.ts +0 -27
  120. package/dist/types/components/radio-button/radio-button.stories.d.ts +0 -41
  121. package/dist/types/components/side-menu/side-menu.stories.d.ts +0 -42
  122. package/dist/types/components/slider/slider.stories.d.ts +0 -156
  123. package/dist/types/components/spinner/spinner.stories.d.ts +0 -37
  124. package/dist/types/components/stepper/stepper.stories.d.ts +0 -56
  125. package/dist/types/components/tabs/inline-tabs-default/inline-tabs.stories.d.ts +0 -41
  126. package/dist/types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.d.ts +0 -25
  127. package/dist/types/components/tabs/navigation-tabs/navigation-tabs.stories.d.ts +0 -13
  128. package/dist/types/components/textarea/textarea.stories.d.ts +0 -111
  129. package/dist/types/components/textfield/textfield.stories.d.ts +0 -176
  130. package/dist/types/components/toast/toast.stories.d.ts +0 -58
  131. package/dist/types/components/toggle/toggle.stories.d.ts +0 -42
  132. package/dist/types/components/tooltip/tooltip.stories.d.ts +0 -54
  133. package/dist/types/components/utility/colour/background-color.stories.d.ts +0 -58
  134. package/dist/types/components/utility/colour/text-color.stories.d.ts +0 -58
  135. package/dist/types/foundations-stories/colour/colour-brand.stories.d.ts +0 -13
  136. package/dist/types/foundations-stories/colour/colour-scales.stories.d.ts +0 -13
  137. package/dist/types/foundations-stories/colour/colour-semantic.stories.d.ts +0 -13
  138. package/dist/types/foundations-stories/grid/grid.stories.d.ts +0 -35
  139. package/dist/types/foundations-stories/spacing/spacing-element.stories.d.ts +0 -8
  140. package/dist/types/foundations-stories/spacing/spacing-layout.stories.d.ts +0 -8
  141. package/dist/types/foundations-stories/typography/typography-body.stories.d.ts +0 -8
  142. package/dist/types/foundations-stories/typography/typography-detail.stories.d.ts +0 -8
  143. package/dist/types/foundations-stories/typography/typography-headline.stories.d.ts +0 -21
  144. package/dist/types/foundations-stories/typography/typography-paragraph.stories.d.ts +0 -8
@@ -1,198 +0,0 @@
1
- import { formatHtmlPreview } from '../../utils/utils';
2
- import sddsTable from './table/readme.md';
3
- import sddsTableToolbar from './table-toolbar/readme.md';
4
- import sddsHeader from './table-header/readme.md';
5
- import sddsHeaderCell from './table-header-cell/readme.md';
6
- import sddsTableBody from './table-body/readme.md';
7
- import sddsBodyRow from './table-body-row/readme.md';
8
- import sddsBodyRowExpandable from './table-body-row-expandable/readme.md';
9
- import sddsBodyCell from './table-body-cell/readme.md';
10
- import sddsTableFooter from './table-footer/readme.md';
11
- export default {
12
- title: 'Components/Data Table/Web Component',
13
- parameters: {
14
- notes: {
15
- 'sdds-table': sddsTable,
16
- 'sdds-table-toolbar': sddsTableToolbar,
17
- 'sdds-header': sddsHeader,
18
- 'sdds-header-cell': sddsHeaderCell,
19
- 'sdds-table-body': sddsTableBody,
20
- 'sdds-body-row': sddsBodyRow,
21
- 'sdds-body-row-expandable': sddsBodyRowExpandable,
22
- 'sdds-body-cell': sddsBodyCell,
23
- 'sdds-table-footer': sddsTableFooter,
24
- },
25
- },
26
- argTypes: {
27
- verticalDivider: {
28
- name: 'Vertical dividers',
29
- description: 'When enabled, table has vertical dividers between columns.',
30
- control: {
31
- type: 'boolean',
32
- },
33
- table: {
34
- defaultValue: {
35
- summary: false,
36
- },
37
- },
38
- },
39
- compactDesign: {
40
- name: 'Compact design',
41
- description: 'Enables compact design of the table, rows with less height.',
42
- control: {
43
- type: 'boolean',
44
- },
45
- table: {
46
- defaultValue: {
47
- summary: false,
48
- },
49
- },
50
- },
51
- onWhiteBackground: {
52
- name: 'On white background',
53
- description: 'Changes BG color of table element to grey variation for better visibility on white layouts',
54
- control: {
55
- type: 'boolean',
56
- },
57
- table: {
58
- defaultValue: {
59
- summary: false,
60
- },
61
- },
62
- },
63
- responsiveDesign: {
64
- name: 'Responsive table',
65
- description: 'Table takes 100% of available width. For column values less then 192px, "No minimum width" has to be enabled too. ',
66
- control: {
67
- type: 'boolean',
68
- },
69
- table: {
70
- defaultValue: {
71
- summary: false,
72
- },
73
- },
74
- },
75
- noMinWidth: {
76
- name: 'No minimum width',
77
- description: 'Resets min-width rule and enabled setting column width value less then 192px which is default one. When enabled, controls for columns width will show here.',
78
- control: {
79
- type: 'boolean',
80
- },
81
- table: {
82
- defaultValue: {
83
- summary: false,
84
- },
85
- },
86
- },
87
- column1Width: {
88
- name: 'Column 1 width',
89
- description: 'Value of width for column 1. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
90
- type: 'string',
91
- table: {
92
- defaultValue: {
93
- summary: '192px',
94
- },
95
- },
96
- if: { arg: 'noMinWidth', eq: true },
97
- },
98
- column2Width: {
99
- name: 'Column 2 width',
100
- description: 'Value of width for column 2. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
101
- type: 'string',
102
- table: {
103
- defaultValue: {
104
- summary: '192px',
105
- },
106
- },
107
- if: { arg: 'noMinWidth', eq: true },
108
- },
109
- column3Width: {
110
- name: 'Column 3 width',
111
- description: 'Value of width for column 3. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
112
- type: 'string',
113
- table: {
114
- defaultValue: {
115
- summary: '192px',
116
- },
117
- },
118
- if: { arg: 'noMinWidth', eq: true },
119
- },
120
- column4Width: {
121
- name: 'Column 4 width',
122
- description: 'Value of width for column 4. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
123
- type: 'string',
124
- table: {
125
- defaultValue: {
126
- summary: '192px',
127
- },
128
- },
129
- if: { arg: 'noMinWidth', eq: true },
130
- },
131
- },
132
- args: {
133
- compactDesign: false,
134
- onWhiteBackground: false,
135
- verticalDivider: false,
136
- responsiveDesign: false,
137
- noMinWidth: true,
138
- column1Width: '321px',
139
- column2Width: '400px',
140
- column3Width: '120px',
141
- column4Width: '90px',
142
- },
143
- };
144
- const BasicTemplate = (args) => formatHtmlPreview(`
145
- <sdds-table
146
- vertical-dividers="${args.verticalDivider}"
147
- compact-design="${args.compactDesign}"
148
- white-background="${args.onWhiteBackground}"
149
- enable-responsive="${args.responsiveDesign}"
150
- ${args.noMinWidth ? 'no-min-width' : ''}
151
- >
152
- <sdds-table-header>
153
- <sdds-header-cell column-key='truck' column-title='Truck type' ${args.column1Width ? `custom-width="${args.column1Width}"` : ''} ></sdds-header-cell>
154
- <sdds-header-cell column-key='driver' column-title='Driver name' ${args.column2Width ? `custom-width="${args.column2Width}"` : ''}></sdds-header-cell>
155
- <sdds-header-cell column-key='country' column-title='Country' ${args.column3Width ? `custom-width="${args.column3Width}"` : ''}></sdds-header-cell>
156
- <sdds-header-cell column-key='mileage' column-title='Mileage' ${args.column4Width ? `custom-width="${args.column4Width}"` : ''} text-align='right'></sdds-header-cell>
157
- </sdds-table-header>
158
- <sdds-table-body>
159
- <sdds-table-body-row>
160
- <sdds-body-cell cell-value="Test value 1" cell-key="truck"></sdds-body-cell>
161
- <sdds-body-cell cell-value="Test value 2" cell-key="driver"></sdds-body-cell>
162
- <sdds-body-cell cell-value="Test value 3" cell-key="country"></sdds-body-cell>
163
- <sdds-body-cell cell-value="Test value 4" cell-key="mileage"></sdds-body-cell>
164
- </sdds-table-body-row>
165
- <sdds-table-body-row>
166
- <sdds-body-cell cell-value="Test value 5" cell-key="truck"></sdds-body-cell>
167
- <sdds-body-cell cell-value="Test value 6" cell-key="driver"></sdds-body-cell>
168
- <sdds-body-cell cell-value="Test value 7" cell-key="country"></sdds-body-cell>
169
- <sdds-body-cell cell-value="Test value 8" cell-key="mileage"></sdds-body-cell>
170
- </sdds-table-body-row>
171
- <sdds-table-body-row>
172
- <sdds-body-cell cell-value="Test value 1" cell-key="truck"></sdds-body-cell>
173
- <sdds-body-cell cell-value="Test value 2" cell-key="driver"></sdds-body-cell>
174
- <sdds-body-cell cell-value="Test value 3" cell-key="country"></sdds-body-cell>
175
- <sdds-body-cell cell-value="Test value 4" cell-key="mileage"></sdds-body-cell>
176
- </sdds-table-body-row>
177
- <sdds-table-body-row>
178
- <sdds-body-cell cell-value="Test value 5" cell-key="truck"></sdds-body-cell>
179
- <sdds-body-cell cell-value="Test value 6" cell-key="driver"></sdds-body-cell>
180
- <sdds-body-cell cell-value="Test value 7" cell-key="country"></sdds-body-cell>
181
- <sdds-body-cell cell-value="Test value 8" cell-key="mileage"></sdds-body-cell>
182
- </sdds-table-body-row>
183
- <sdds-table-body-row>
184
- <sdds-body-cell cell-value="Test value 1" cell-key="truck"></sdds-body-cell>
185
- <sdds-body-cell cell-value="Test value 2" cell-key="driver"></sdds-body-cell>
186
- <sdds-body-cell cell-value="Test value 3" cell-key="country"></sdds-body-cell>
187
- <sdds-body-cell cell-value="Test value 4" cell-key="mileage"></sdds-body-cell>
188
- </sdds-table-body-row>
189
- <sdds-table-body-row>
190
- <sdds-body-cell cell-value="Test value 5" cell-key="truck"></sdds-body-cell>
191
- <sdds-body-cell cell-value="Test value 6" cell-key="driver"></sdds-body-cell>
192
- <sdds-body-cell cell-value="Test value 7" cell-key="country"></sdds-body-cell>
193
- <sdds-body-cell cell-value="Test value 8" cell-key="mileage"></sdds-body-cell>
194
- </sdds-table-body-row>
195
- </sdds-table-body>
196
- </sdds-table>`);
197
- export const CustomWidth = BasicTemplate.bind({});
198
- CustomWidth.args = {};
@@ -1,153 +0,0 @@
1
- import { formatHtmlPreview } from '../../utils/utils';
2
- import sddsTable from './table/readme.md';
3
- import sddsTableToolbar from './table-toolbar/readme.md';
4
- import sddsHeader from './table-header/readme.md';
5
- import sddsHeaderCell from './table-header-cell/readme.md';
6
- import sddsTableBody from './table-body/readme.md';
7
- import sddsBodyRow from './table-body-row/readme.md';
8
- import sddsBodyRowExpandable from './table-body-row-expandable/readme.md';
9
- import sddsBodyCell from './table-body-cell/readme.md';
10
- import sddsTableFooter from './table-footer/readme.md';
11
- export default {
12
- title: 'Components/Data Table/Web Component',
13
- parameters: {
14
- notes: {
15
- 'sdds-table': sddsTable,
16
- 'sdds-table-toolbar': sddsTableToolbar,
17
- 'sdds-header': sddsHeader,
18
- 'sdds-header-cell': sddsHeaderCell,
19
- 'sdds-table-body': sddsTableBody,
20
- 'sdds-body-row': sddsBodyRow,
21
- 'sdds-body-row-expandable': sddsBodyRowExpandable,
22
- 'sdds-body-cell': sddsBodyCell,
23
- 'sdds-table-footer': sddsTableFooter,
24
- },
25
- },
26
- argTypes: {
27
- verticalDivider: {
28
- name: 'Vertical dividers',
29
- description: 'When enabled, table has vertical dividers between columns.',
30
- control: {
31
- type: 'boolean',
32
- },
33
- table: {
34
- defaultValue: {
35
- summary: false,
36
- },
37
- },
38
- },
39
- compactDesign: {
40
- name: 'Compact design',
41
- description: 'Enables compact design of the table, rows with less height.',
42
- control: {
43
- type: 'boolean',
44
- },
45
- table: {
46
- defaultValue: {
47
- summary: false,
48
- },
49
- },
50
- },
51
- onWhiteBackground: {
52
- name: 'On white background',
53
- description: 'Changes BG color of table element to grey variation for better visibility on white layouts',
54
- control: {
55
- type: 'boolean',
56
- },
57
- table: {
58
- defaultValue: {
59
- summary: false,
60
- },
61
- },
62
- },
63
- responsiveDesign: {
64
- name: 'Responsive table',
65
- description: 'Table takes 100% of available width. For column values less then 192px, "No minimum width" has to be enabled too. ',
66
- control: {
67
- type: 'boolean',
68
- },
69
- table: {
70
- defaultValue: {
71
- summary: false,
72
- },
73
- },
74
- },
75
- noMinWidth: {
76
- name: 'No column minimum width limitation',
77
- description: 'If columns should be able to shrink below 192px width.',
78
- control: {
79
- type: 'boolean',
80
- },
81
- table: {
82
- defaultValue: {
83
- summary: 'false',
84
- },
85
- },
86
- },
87
- },
88
- args: {
89
- compactDesign: false,
90
- onWhiteBackground: false,
91
- verticalDivider: false,
92
- responsiveDesign: false,
93
- noMinWidth: false,
94
- },
95
- };
96
- const EventListenersTemplate = ({ verticalDivider, compactDesign, onWhiteBackground, responsiveDesign, noMinWidth, }) => formatHtmlPreview(`
97
- <script>
98
- // Note: Script here is only for demo purposes
99
- window.addEventListener('tableFilteringTerm', e => {
100
- document.getElementById('event-name-textarea').value = 'tableFilteringTerm';
101
- document.getElementById('event-value-textarea').value = e.detail;
102
- });
103
-
104
- window.addEventListener('sortColumnDataEvent', e => {
105
- document.getElementById('event-name-textarea').value = 'sortColumnDataEvent';
106
- document.getElementById('event-value-textarea').value = e.detail;
107
- });
108
-
109
- window.addEventListener('currentPageValueEvent', e => {
110
- document.getElementById('event-name-textarea').value = 'currentPageValueEvent';
111
- document.getElementById('event-value-textarea').value = e.detail;
112
- });
113
- </script>
114
-
115
- <h3>Disabled filtering, pagination and sorting - left to the user to listen to events</h3>
116
- <sdds-table
117
- vertical-dividers="${verticalDivider}"
118
- compact-design="${compactDesign}"
119
- white-background="${onWhiteBackground}"
120
- enable-responsive="${responsiveDesign}"
121
- ${noMinWidth ? 'no-min-width' : ''}
122
- >
123
- <sdds-table-toolbar table-title="Disabled functionalities table" enable-filtering></sdds-table-toolbar>
124
- <sdds-table-header>
125
- <sdds-header-cell column-key='truck' column-title='Truck type' sortable></sdds-header-cell>
126
- <sdds-header-cell column-key='driver' column-title='Driver name' sortable></sdds-header-cell>
127
- <sdds-header-cell column-key='country' column-title='Country' sortable></sdds-header-cell>
128
- <sdds-header-cell column-key='mileage' column-title='Mileage' sortable text-align='right'></sdds-header-cell>
129
- </sdds-table-header>
130
- <sdds-table-body disable-pagination-function disable-filtering-function disable-sorting-function enable-dummy-data>
131
- <sdds-table-body-row>
132
- <sdds-body-cell cell-value="Test value 5" cell-key="truck"></sdds-body-cell>
133
- <sdds-body-cell cell-value="Test value 6" cell-key="driver"></sdds-body-cell>
134
- <sdds-body-cell cell-value="Test value 7" cell-key="country"></sdds-body-cell>
135
- <sdds-body-cell cell-value="Test value 8" cell-key="mileage"></sdds-body-cell>
136
- </sdds-table-body-row>
137
- </sdds-table-body>
138
- <sdds-table-footer enable-client-pagination client-max-pages="10"></sdds-table-footer>
139
- </sdds-table>
140
-
141
- <!-- Note: Code below is just for demo purposes -->
142
- <div class="sdds-u-mt1" style="width: 500px; background-color: lightblue; padding: 16px;">
143
- <p class="sdds-u-mt0">Note: This box works only in "Canvas" tab.</p>
144
- <h5 class="sdds-u-mt0 sdds-u-mb0">Event test box</h5>
145
- <h6 class="sdds-u-mt1 sdds-u-mb0">Event name:</h6>
146
- <textarea id="event-name-textarea" rows="1" cols="50" readonly></textarea>
147
- <h6 class="sdds-u-mt0 sdds-u-mb0">Events value (aka detail)</h6>
148
- <small>Event always sent an array of items, where first one is always an ID of tabel where event is emitted from</small>
149
- <br>
150
- <textarea id="event-value-textarea" rows="1" cols="50" readonly></textarea>
151
- </div>`);
152
- export const EventListeners = EventListenersTemplate.bind({});
153
- EventListeners.args = {};
@@ -1,137 +0,0 @@
1
- import { formatHtmlPreview } from '../../utils/utils';
2
- import sddsTable from './table/readme.md';
3
- import sddsTableToolbar from './table-toolbar/readme.md';
4
- import sddsHeader from './table-header/readme.md';
5
- import sddsHeaderCell from './table-header-cell/readme.md';
6
- import sddsTableBody from './table-body/readme.md';
7
- import sddsBodyRow from './table-body-row/readme.md';
8
- import sddsBodyRowExpandable from './table-body-row-expandable/readme.md';
9
- import sddsBodyCell from './table-body-cell/readme.md';
10
- import sddsTableFooter from './table-footer/readme.md';
11
- export default {
12
- title: 'Components/Data Table/Web Component',
13
- parameters: {
14
- notes: {
15
- 'sdds-table': sddsTable,
16
- 'sdds-table-toolbar': sddsTableToolbar,
17
- 'sdds-header': sddsHeader,
18
- 'sdds-header-cell': sddsHeaderCell,
19
- 'sdds-table-body': sddsTableBody,
20
- 'sdds-body-row': sddsBodyRow,
21
- 'sdds-body-row-expandable': sddsBodyRowExpandable,
22
- 'sdds-body-cell': sddsBodyCell,
23
- 'sdds-table-footer': sddsTableFooter,
24
- },
25
- },
26
- argTypes: {
27
- verticalDivider: {
28
- name: 'Vertical dividers',
29
- description: 'When enabled, table has vertical dividers between columns.',
30
- control: {
31
- type: 'boolean',
32
- },
33
- table: {
34
- defaultValue: {
35
- summary: false,
36
- },
37
- },
38
- },
39
- compactDesign: {
40
- name: 'Compact design',
41
- description: 'Enables compact design of the table, rows with less height.',
42
- control: {
43
- type: 'boolean',
44
- },
45
- table: {
46
- defaultValue: {
47
- summary: false,
48
- },
49
- },
50
- },
51
- onWhiteBackground: {
52
- name: 'On white background',
53
- description: 'Changes BG color of table element to grey variation for better visibility on white layouts',
54
- control: {
55
- type: 'boolean',
56
- },
57
- table: {
58
- defaultValue: {
59
- summary: false,
60
- },
61
- },
62
- },
63
- responsiveDesign: {
64
- name: 'Responsive table',
65
- description: 'Table takes 100% of available width. For column values less then 192px, "No minimum width" has to be enabled too. ',
66
- control: {
67
- type: 'boolean',
68
- },
69
- table: {
70
- defaultValue: {
71
- summary: false,
72
- },
73
- },
74
- },
75
- noMinWidth: {
76
- name: 'No column minimum width limitation',
77
- description: 'If columns should be able to shrink below 192px width.',
78
- control: {
79
- type: 'boolean',
80
- },
81
- table: {
82
- defaultValue: {
83
- summary: 'false',
84
- },
85
- },
86
- },
87
- },
88
- args: {
89
- compactDesign: false,
90
- onWhiteBackground: false,
91
- verticalDivider: false,
92
- responsiveDesign: false,
93
- noMinWidth: false,
94
- },
95
- };
96
- const ExpandableRowTemplate = ({ verticalDivider, compactDesign, onWhiteBackground, responsiveDesign, noMinWidth, }) => formatHtmlPreview(`
97
- <h3>Expandable rows</h3>
98
- <sdds-table
99
- enable-expandable-rows
100
- vertical-dividers="${verticalDivider}"
101
- compact-design="${compactDesign}"
102
- white-background="${onWhiteBackground}"
103
- enable-responsive="${responsiveDesign}"
104
- ${noMinWidth ? 'no-min-width' : ''}
105
- >
106
- <sdds-table-header>
107
- <sdds-header-cell column-key='truck' column-title='Truck type'></sdds-header-cell>
108
- <sdds-header-cell column-key='driver' column-title='Driver name'></sdds-header-cell>
109
- <sdds-header-cell column-key='country' column-title='Country'></sdds-header-cell>
110
- <sdds-header-cell column-key='mileage' column-title='Mileage' text-align='right'></sdds-header-cell>
111
- </sdds-table-header>
112
- <sdds-table-body>
113
- <sdds-table-body-row-expandable>
114
- <sdds-body-cell cell-value="Test value 1" cell-key="truck"></sdds-body-cell>
115
- <sdds-body-cell cell-value="Test value 2" cell-key="driver"></sdds-body-cell>
116
- <sdds-body-cell cell-value="Test value 3" cell-key="country"></sdds-body-cell>
117
- <sdds-body-cell cell-value="Test value 4" cell-key="mileage"></sdds-body-cell>
118
- <div slot="expand-row">Hello world 1</div>
119
- </sdds-table-body-row-expandable>
120
- <sdds-table-body-row-expandable>
121
- <sdds-body-cell cell-value="Test value 5" cell-key="truck"></sdds-body-cell>
122
- <sdds-body-cell cell-value="Test value 6" cell-key="driver"></sdds-body-cell>
123
- <sdds-body-cell cell-value="Test value 7" cell-key="country"></sdds-body-cell>
124
- <sdds-body-cell cell-value="Test value 8" cell-key="mileage"></sdds-body-cell>
125
- <div slot="expand-row">Hello to you too</div>
126
- </sdds-table-body-row-expandable>
127
- <sdds-table-body-row-expandable>
128
- <sdds-body-cell cell-value="Test value 9" cell-key="truck"></sdds-body-cell>
129
- <sdds-body-cell cell-value="Test value 10" cell-key="driver"></sdds-body-cell>
130
- <sdds-body-cell cell-value="Test value 11" cell-key="country"></sdds-body-cell>
131
- <sdds-body-cell cell-value="Test value 12" cell-key="mileage"></sdds-body-cell>
132
- <div slot="expand-row"><sdds-button type="primary" text="Call to action"></sdds-button></div>
133
- </sdds-table-body-row-expandable>
134
- </sdds-table-body>
135
- </sdds-table>`);
136
- export const ExpandableRows = ExpandableRowTemplate.bind({});
137
- ExpandableRows.args = {};
@@ -1,139 +0,0 @@
1
- import { formatHtmlPreview } from '../../utils/utils';
2
- import sddsTable from './table/readme.md';
3
- import sddsTableToolbar from './table-toolbar/readme.md';
4
- import sddsHeader from './table-header/readme.md';
5
- import sddsHeaderCell from './table-header-cell/readme.md';
6
- import sddsTableBody from './table-body/readme.md';
7
- import sddsBodyRow from './table-body-row/readme.md';
8
- import sddsBodyRowExpandable from './table-body-row-expandable/readme.md';
9
- import sddsBodyCell from './table-body-cell/readme.md';
10
- import sddsTableFooter from './table-footer/readme.md';
11
- import dummyData from './table-body/dummy-data.json';
12
- export default {
13
- title: 'Components/Data Table/Web Component',
14
- parameters: {
15
- notes: {
16
- 'sdds-table': sddsTable,
17
- 'sdds-table-toolbar': sddsTableToolbar,
18
- 'sdds-header': sddsHeader,
19
- 'sdds-header-cell': sddsHeaderCell,
20
- 'sdds-table-body': sddsTableBody,
21
- 'sdds-body-row': sddsBodyRow,
22
- 'sdds-body-row-expandable': sddsBodyRowExpandable,
23
- 'sdds-body-cell': sddsBodyCell,
24
- 'sdds-table-footer': sddsTableFooter,
25
- },
26
- },
27
- argTypes: {
28
- verticalDivider: {
29
- name: 'Vertical dividers',
30
- description: 'When enabled, table has vertical dividers between columns.',
31
- control: {
32
- type: 'boolean',
33
- },
34
- table: {
35
- defaultValue: {
36
- summary: false,
37
- },
38
- },
39
- },
40
- compactDesign: {
41
- name: 'Compact design',
42
- description: 'Enables compact design of the table, rows with less height.',
43
- control: {
44
- type: 'boolean',
45
- },
46
- table: {
47
- defaultValue: {
48
- summary: false,
49
- },
50
- },
51
- },
52
- onWhiteBackground: {
53
- name: 'On white background',
54
- description: 'Changes BG color of table element to grey variation for better visibility on white layouts',
55
- control: {
56
- type: 'boolean',
57
- },
58
- table: {
59
- defaultValue: {
60
- summary: false,
61
- },
62
- },
63
- },
64
- responsiveDesign: {
65
- name: 'Responsive table',
66
- description: 'Table takes 100% of available width. For column values less then 192px, "No minimum width" has to be enabled too. ',
67
- control: {
68
- type: 'boolean',
69
- },
70
- table: {
71
- defaultValue: {
72
- summary: false,
73
- },
74
- },
75
- },
76
- noMinWidth: {
77
- name: 'No column minimum width limitation',
78
- description: 'If columns should be able to shrink below 192px width.',
79
- control: {
80
- type: 'boolean',
81
- },
82
- table: {
83
- defaultValue: {
84
- summary: 'false',
85
- },
86
- },
87
- },
88
- useDataProp: {
89
- name: 'Use data prop',
90
- description: 'Load table data from property',
91
- control: {
92
- type: 'boolean',
93
- },
94
- table: {
95
- defaultValue: {
96
- summary: 'n/a',
97
- },
98
- },
99
- },
100
- },
101
- args: {
102
- compactDesign: false,
103
- onWhiteBackground: false,
104
- verticalDivider: false,
105
- responsiveDesign: true,
106
- useDataProp: true,
107
- noMinWidth: true,
108
- },
109
- };
110
- const FilteringTemplate = ({ verticalDivider, compactDesign, onWhiteBackground, responsiveDesign, useDataProp, noMinWidth, }) => formatHtmlPreview(`
111
- <h3>Filtering example</h3>
112
- <sdds-table
113
- vertical-dividers="${verticalDivider}"
114
- compact-design="${compactDesign}"
115
- white-background="${onWhiteBackground}"
116
- ${responsiveDesign ? 'enable-responsive' : ''}
117
- ${noMinWidth ? 'no-min-width' : ''}
118
- >
119
- <sdds-table-toolbar table-title="Filter" enable-filtering></sdds-table-toolbar>
120
- <sdds-table-header>
121
- <sdds-header-cell column-key='truck' column-title='Truck type'></sdds-header-cell>
122
- <sdds-header-cell column-key='driver' column-title='Driver name'></sdds-header-cell>
123
- <sdds-header-cell column-key='country' column-title='Country' ></sdds-header-cell>
124
- <sdds-header-cell column-key='mileage' column-title='Mileage' text-align='right'></sdds-header-cell>
125
- </sdds-table-header>
126
- <sdds-table-body ${useDataProp ? `body-data='${JSON.stringify(dummyData)}'` : ''}>
127
- ${!useDataProp
128
- ? dummyData
129
- .map((row) => `<sdds-table-body-row>
130
- ${Object.entries(row)
131
- .map((cell) => `<sdds-body-cell cell-key="${cell[0]}" cell-value="${cell[1]}"></sdds-body-cell>`)
132
- .join(' ')}
133
- </sdds-table-body-row>`)
134
- .join(' ')
135
- : ''}
136
- </sdds-table-body>
137
- </sdds-table>`);
138
- export const Filtering = FilteringTemplate.bind({});
139
- Filtering.args = {};