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