@scania/tegel 0.0.1-beta.6 → 0.0.1-beta.7

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 (140) 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/esm/loader.js +1 -1
  5. package/dist/esm/tegel.js +1 -1
  6. package/package.json +4 -4
  7. package/dist/collection/components/accordion/accordion.stories.js +0 -91
  8. package/dist/collection/components/badge/badge.stories.js +0 -101
  9. package/dist/collection/components/banner/banner.stories.js +0 -93
  10. package/dist/collection/components/block/block.stories.js +0 -46
  11. package/dist/collection/components/breadcrumb/breadcrumb.stories.js +0 -26
  12. package/dist/collection/components/button/button-native.stories.js +0 -183
  13. package/dist/collection/components/button/button-webcomponent.stories.js +0 -182
  14. package/dist/collection/components/card/card.stories.js +0 -181
  15. package/dist/collection/components/checkbox/checkbox.stories.js +0 -54
  16. package/dist/collection/components/chips/chips.stories.js +0 -124
  17. package/dist/collection/components/data-table/native-table.stories.js +0 -182
  18. package/dist/collection/components/data-table/table-component-basic.stories.js +0 -163
  19. package/dist/collection/components/data-table/table-component-batch-actions.stories.js +0 -129
  20. package/dist/collection/components/data-table/table-component-bodydata.stories.js +0 -58
  21. package/dist/collection/components/data-table/table-component-custom-width.stories.js +0 -198
  22. package/dist/collection/components/data-table/table-component-event-listeners.stories.js +0 -153
  23. package/dist/collection/components/data-table/table-component-expandable-rows.stories.js +0 -137
  24. package/dist/collection/components/data-table/table-component-filtering.stories.js +0 -139
  25. package/dist/collection/components/data-table/table-component-multiselect.stories.js +0 -160
  26. package/dist/collection/components/data-table/table-component-pagination.stories.js +0 -129
  27. package/dist/collection/components/data-table/table-component-sorting.stories.js +0 -107
  28. package/dist/collection/components/datetime/datetime.stories.js +0 -149
  29. package/dist/collection/components/divider/divider.stories.js +0 -116
  30. package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js +0 -130
  31. package/dist/collection/components/dropdown/dropdown-native.stories.js +0 -90
  32. package/dist/collection/components/dropdown/dropdown-wc-default.stories.js +0 -151
  33. package/dist/collection/components/dropdown/dropdown-wc-multiselect.stories.js +0 -146
  34. package/dist/collection/components/footer/footer.stories.js +0 -100
  35. package/dist/collection/components/header/header-all.stories.js +0 -217
  36. package/dist/collection/components/header/header-default.stories.js +0 -47
  37. package/dist/collection/components/header/header-inline.stories.js +0 -113
  38. package/dist/collection/components/header/header-search.stories.js +0 -263
  39. package/dist/collection/components/header/header-toolbar.stories.js +0 -204
  40. package/dist/collection/components/icon/icon-font.stories.js +0 -57
  41. package/dist/collection/components/icon/icon-web-component.stories.js +0 -51
  42. package/dist/collection/components/link/link.stories.js +0 -45
  43. package/dist/collection/components/message/message.stories.js +0 -117
  44. package/dist/collection/components/modal/modal-native.stories.js +0 -121
  45. package/dist/collection/components/modal/modal-webcomponent.stories.js +0 -78
  46. package/dist/collection/components/popover-canvas/popover-canvas.stories.js +0 -87
  47. package/dist/collection/components/popover-menu/popover-menu-icons.stories.js +0 -132
  48. package/dist/collection/components/popover-menu/popover-menu.stories.js +0 -109
  49. package/dist/collection/components/radio-button/radio-button.stories.js +0 -68
  50. package/dist/collection/components/side-menu/side-menu.stories.js +0 -182
  51. package/dist/collection/components/slider/slider.stories.js +0 -251
  52. package/dist/collection/components/spinner/spinner.stories.js +0 -59
  53. package/dist/collection/components/stepper/stepper.stories.js +0 -139
  54. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.stories.js +0 -65
  55. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js +0 -43
  56. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js +0 -32
  57. package/dist/collection/components/textarea/textarea.stories.js +0 -149
  58. package/dist/collection/components/textfield/textfield.stories.js +0 -222
  59. package/dist/collection/components/toast/toast.stories.js +0 -119
  60. package/dist/collection/components/toggle/toggle.stories.js +0 -62
  61. package/dist/collection/components/tooltip/tooltip.stories.js +0 -113
  62. package/dist/collection/components/utility/colour/background-color.stories.js +0 -96
  63. package/dist/collection/components/utility/colour/text-color.stories.js +0 -94
  64. package/dist/collection/foundations-stories/colour/colour-brand.stories.js +0 -38
  65. package/dist/collection/foundations-stories/colour/colour-scales.stories.js +0 -71
  66. package/dist/collection/foundations-stories/colour/colour-semantic.stories.js +0 -40
  67. package/dist/collection/foundations-stories/grid/grid.stories.js +0 -386
  68. package/dist/collection/foundations-stories/spacing/spacing-element.stories.js +0 -100
  69. package/dist/collection/foundations-stories/spacing/spacing-layout.stories.js +0 -94
  70. package/dist/collection/foundations-stories/typography/typography-body.stories.js +0 -16
  71. package/dist/collection/foundations-stories/typography/typography-detail.stories.js +0 -17
  72. package/dist/collection/foundations-stories/typography/typography-headline.stories.js +0 -39
  73. package/dist/collection/foundations-stories/typography/typography-paragraph.stories.js +0 -12
  74. package/dist/types/components/accordion/accordion.stories.d.ts +0 -77
  75. package/dist/types/components/badge/badge.stories.d.ts +0 -66
  76. package/dist/types/components/banner/banner.stories.d.ts +0 -68
  77. package/dist/types/components/block/block.stories.d.ts +0 -31
  78. package/dist/types/components/breadcrumb/breadcrumb.stories.d.ts +0 -12
  79. package/dist/types/components/button/button-native.stories.d.ts +0 -144
  80. package/dist/types/components/button/button-webcomponent.stories.d.ts +0 -143
  81. package/dist/types/components/card/card.stories.d.ts +0 -114
  82. package/dist/types/components/checkbox/checkbox.stories.d.ts +0 -39
  83. package/dist/types/components/chips/chips.stories.d.ts +0 -81
  84. package/dist/types/components/data-table/native-table.stories.d.ts +0 -147
  85. package/dist/types/components/data-table/table-component-basic.stories.d.ts +0 -100
  86. package/dist/types/components/data-table/table-component-batch-actions.stories.d.ts +0 -98
  87. package/dist/types/components/data-table/table-component-bodydata.stories.d.ts +0 -38
  88. package/dist/types/components/data-table/table-component-custom-width.stories.d.ts +0 -147
  89. package/dist/types/components/data-table/table-component-event-listeners.stories.d.ts +0 -87
  90. package/dist/types/components/data-table/table-component-expandable-rows.stories.d.ts +0 -87
  91. package/dist/types/components/data-table/table-component-filtering.stories.d.ts +0 -100
  92. package/dist/types/components/data-table/table-component-multiselect.stories.d.ts +0 -100
  93. package/dist/types/components/data-table/table-component-pagination.stories.d.ts +0 -100
  94. package/dist/types/components/data-table/table-component-sorting.stories.d.ts +0 -79
  95. package/dist/types/components/datetime/datetime.stories.d.ts +0 -80
  96. package/dist/types/components/divider/divider.stories.d.ts +0 -72
  97. package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.stories.d.ts +0 -73
  98. package/dist/types/components/dropdown/dropdown-native.stories.d.ts +0 -57
  99. package/dist/types/components/dropdown/dropdown-wc-default.stories.d.ts +0 -115
  100. package/dist/types/components/dropdown/dropdown-wc-multiselect.stories.d.ts +0 -115
  101. package/dist/types/components/footer/footer.stories.d.ts +0 -23
  102. package/dist/types/components/header/header-all.stories.d.ts +0 -29
  103. package/dist/types/components/header/header-default.stories.d.ts +0 -29
  104. package/dist/types/components/header/header-inline.stories.d.ts +0 -29
  105. package/dist/types/components/header/header-search.stories.d.ts +0 -29
  106. package/dist/types/components/header/header-toolbar.stories.d.ts +0 -29
  107. package/dist/types/components/icon/icon-font.stories.d.ts +0 -38
  108. package/dist/types/components/icon/icon-web-component.stories.d.ts +0 -38
  109. package/dist/types/components/link/link.stories.d.ts +0 -33
  110. package/dist/types/components/message/message.stories.d.ts +0 -67
  111. package/dist/types/components/modal/modal-native.stories.d.ts +0 -51
  112. package/dist/types/components/modal/modal-webcomponent.stories.d.ts +0 -44
  113. package/dist/types/components/popover-canvas/popover-canvas.stories.d.ts +0 -25
  114. package/dist/types/components/popover-menu/popover-menu-icons.stories.d.ts +0 -27
  115. package/dist/types/components/popover-menu/popover-menu.stories.d.ts +0 -27
  116. package/dist/types/components/radio-button/radio-button.stories.d.ts +0 -41
  117. package/dist/types/components/side-menu/side-menu.stories.d.ts +0 -42
  118. package/dist/types/components/slider/slider.stories.d.ts +0 -156
  119. package/dist/types/components/spinner/spinner.stories.d.ts +0 -37
  120. package/dist/types/components/stepper/stepper.stories.d.ts +0 -56
  121. package/dist/types/components/tabs/inline-tabs-default/inline-tabs.stories.d.ts +0 -41
  122. package/dist/types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.d.ts +0 -25
  123. package/dist/types/components/tabs/navigation-tabs/navigation-tabs.stories.d.ts +0 -13
  124. package/dist/types/components/textarea/textarea.stories.d.ts +0 -111
  125. package/dist/types/components/textfield/textfield.stories.d.ts +0 -176
  126. package/dist/types/components/toast/toast.stories.d.ts +0 -58
  127. package/dist/types/components/toggle/toggle.stories.d.ts +0 -42
  128. package/dist/types/components/tooltip/tooltip.stories.d.ts +0 -54
  129. package/dist/types/components/utility/colour/background-color.stories.d.ts +0 -58
  130. package/dist/types/components/utility/colour/text-color.stories.d.ts +0 -58
  131. package/dist/types/foundations-stories/colour/colour-brand.stories.d.ts +0 -13
  132. package/dist/types/foundations-stories/colour/colour-scales.stories.d.ts +0 -13
  133. package/dist/types/foundations-stories/colour/colour-semantic.stories.d.ts +0 -13
  134. package/dist/types/foundations-stories/grid/grid.stories.d.ts +0 -35
  135. package/dist/types/foundations-stories/spacing/spacing-element.stories.d.ts +0 -8
  136. package/dist/types/foundations-stories/spacing/spacing-layout.stories.d.ts +0 -8
  137. package/dist/types/foundations-stories/typography/typography-body.stories.d.ts +0 -8
  138. package/dist/types/foundations-stories/typography/typography-detail.stories.d.ts +0 -8
  139. package/dist/types/foundations-stories/typography/typography-headline.stories.d.ts +0 -21
  140. 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 = {};