@scania/tegel 0.0.1-beta.1 → 0.0.1-beta.11

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 (212) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/sdds-accordion.cjs.entry.js +1 -1
  3. package/dist/cjs/sdds-dropdown-filter.cjs.entry.js +1 -1
  4. package/dist/cjs/sdds-dropdown_2.cjs.entry.js +2 -2
  5. package/dist/cjs/sdds-inline-tabs-fullbleed.cjs.entry.js +1 -1
  6. package/dist/cjs/sdds-modal.cjs.entry.js +3 -3
  7. package/dist/cjs/sdds-navigation-tabs.cjs.entry.js +1 -1
  8. package/dist/cjs/sdds-popover-canvas.cjs.entry.js +1 -1
  9. package/dist/cjs/sdds-popover-menu.cjs.entry.js +1 -1
  10. package/dist/cjs/sdds-slider.cjs.entry.js +1 -1
  11. package/dist/cjs/sdds-textarea.cjs.entry.js +1 -1
  12. package/dist/cjs/sdds-tooltip.cjs.entry.js +1 -1
  13. package/dist/cjs/tegel.cjs.js +1 -1
  14. package/dist/collection/collection-manifest.json +2 -2
  15. package/dist/collection/components/accordion/accordion.css +0 -14
  16. package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.js +1 -1
  17. package/dist/collection/components/dropdown/dropdown.css +2 -2
  18. package/dist/collection/components/dropdown/dropdown.js +1 -1
  19. package/dist/collection/components/modal/modal.css +7 -8
  20. package/dist/collection/components/modal/modal.js +3 -3
  21. package/dist/collection/components/popover-canvas/popover-canvas.css +1 -2
  22. package/dist/collection/components/popover-menu/popover-menu.css +1 -1
  23. package/dist/collection/components/slider/slider.css +0 -1
  24. package/dist/collection/components/spinner/spinner.js +2 -2
  25. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.css +1 -1
  26. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css +1 -1
  27. package/dist/collection/components/textarea/textarea.css +1 -1
  28. package/dist/collection/components/tooltip/tooltip.css +1 -1
  29. package/dist/collection/components/tooltip/tooltip.js +1 -1
  30. package/dist/components/dropdown-option.js +1 -1
  31. package/dist/components/dropdown.js +1 -1
  32. package/dist/components/sdds-accordion.js +1 -1
  33. package/dist/components/sdds-dropdown-filter.js +1 -1
  34. package/dist/components/sdds-inline-tabs-fullbleed.js +1 -1
  35. package/dist/components/sdds-modal.js +3 -3
  36. package/dist/components/sdds-navigation-tabs.js +1 -1
  37. package/dist/components/sdds-popover-canvas.js +1 -1
  38. package/dist/components/sdds-popover-menu.js +1 -1
  39. package/dist/components/sdds-slider.js +1 -1
  40. package/dist/components/sdds-textarea.js +1 -1
  41. package/dist/components/sdds-tooltip.js +1 -1
  42. package/dist/esm/loader.js +1 -1
  43. package/dist/esm/sdds-accordion.entry.js +1 -1
  44. package/dist/esm/sdds-dropdown-filter.entry.js +1 -1
  45. package/dist/esm/sdds-dropdown_2.entry.js +2 -2
  46. package/dist/esm/sdds-inline-tabs-fullbleed.entry.js +1 -1
  47. package/dist/esm/sdds-modal.entry.js +3 -3
  48. package/dist/esm/sdds-navigation-tabs.entry.js +1 -1
  49. package/dist/esm/sdds-popover-canvas.entry.js +1 -1
  50. package/dist/esm/sdds-popover-menu.entry.js +1 -1
  51. package/dist/esm/sdds-slider.entry.js +1 -1
  52. package/dist/esm/sdds-textarea.entry.js +1 -1
  53. package/dist/esm/sdds-tooltip.entry.js +1 -1
  54. package/dist/esm/tegel.js +1 -1
  55. package/dist/tegel/{p-677baf7f.entry.js → p-0fc35c8c.entry.js} +1 -1
  56. package/dist/tegel/p-21dbda3f.entry.js +1 -0
  57. package/dist/tegel/{p-f2f7aa45.entry.js → p-28116fd7.entry.js} +1 -1
  58. package/dist/tegel/{p-4cb85347.entry.js → p-3c2de07c.entry.js} +1 -1
  59. package/dist/tegel/{p-7451779b.entry.js → p-46140930.entry.js} +1 -1
  60. package/dist/tegel/p-59e49a1c.entry.js +1 -0
  61. package/dist/tegel/{p-d91caec6.entry.js → p-6df7e735.entry.js} +1 -1
  62. package/dist/tegel/p-a468986d.entry.js +1 -0
  63. package/dist/tegel/{p-12ca5cfa.entry.js → p-b57a7d4f.entry.js} +1 -1
  64. package/dist/tegel/{p-4b58a02c.entry.js → p-df98e6db.entry.js} +1 -1
  65. package/dist/tegel/{p-cf72dfd9.entry.js → p-ee84d4a0.entry.js} +1 -1
  66. package/dist/tegel/tegel.css +2 -2
  67. package/dist/tegel/tegel.esm.js +1 -1
  68. package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.d.ts +1 -1
  69. package/dist/types/components/dropdown/dropdown.d.ts +1 -1
  70. package/dist/types/components/modal/modal.d.ts +1 -1
  71. package/dist/types/components/spinner/spinner.d.ts +2 -2
  72. package/dist/types/components/tooltip/tooltip.d.ts +1 -1
  73. package/dist/types/components.d.ts +12 -12
  74. package/package.json +4 -4
  75. package/readme.md +136 -2
  76. package/dist/collection/components/accordion/accordion.stories.js +0 -91
  77. package/dist/collection/components/badge/badge.stories.js +0 -101
  78. package/dist/collection/components/banner/banner.stories.js +0 -93
  79. package/dist/collection/components/block/block.stories.js +0 -46
  80. package/dist/collection/components/breadcrumb/breadcrumb.stories.js +0 -26
  81. package/dist/collection/components/button/button-native.stories.js +0 -183
  82. package/dist/collection/components/button/button-webcomponent.stories.js +0 -182
  83. package/dist/collection/components/card/card.stories.js +0 -181
  84. package/dist/collection/components/checkbox/checkbox.stories.js +0 -54
  85. package/dist/collection/components/chips/chips.stories.js +0 -124
  86. package/dist/collection/components/data-table/native-table.stories.js +0 -182
  87. package/dist/collection/components/data-table/table-component-basic.stories.js +0 -163
  88. package/dist/collection/components/data-table/table-component-batch-actions.stories.js +0 -129
  89. package/dist/collection/components/data-table/table-component-bodydata.stories.js +0 -58
  90. package/dist/collection/components/data-table/table-component-custom-width.stories.js +0 -198
  91. package/dist/collection/components/data-table/table-component-event-listeners.stories.js +0 -153
  92. package/dist/collection/components/data-table/table-component-expandable-rows.stories.js +0 -137
  93. package/dist/collection/components/data-table/table-component-filtering.stories.js +0 -139
  94. package/dist/collection/components/data-table/table-component-multiselect.stories.js +0 -160
  95. package/dist/collection/components/data-table/table-component-pagination.stories.js +0 -129
  96. package/dist/collection/components/data-table/table-component-sorting.stories.js +0 -107
  97. package/dist/collection/components/datetime/datetime.stories.js +0 -149
  98. package/dist/collection/components/divider/divider.stories.js +0 -116
  99. package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js +0 -130
  100. package/dist/collection/components/dropdown/dropdown-native.stories.js +0 -90
  101. package/dist/collection/components/dropdown/dropdown-wc-default.stories.js +0 -151
  102. package/dist/collection/components/dropdown/dropdown-wc-multiselect.stories.js +0 -146
  103. package/dist/collection/components/footer/footer.stories.js +0 -100
  104. package/dist/collection/components/header/header-all.stories.js +0 -217
  105. package/dist/collection/components/header/header-default.stories.js +0 -47
  106. package/dist/collection/components/header/header-inline.stories.js +0 -113
  107. package/dist/collection/components/header/header-search.stories.js +0 -263
  108. package/dist/collection/components/header/header-toolbar.stories.js +0 -204
  109. package/dist/collection/components/icon/icon-font.stories.js +0 -57
  110. package/dist/collection/components/icon/icon-web-component.stories.js +0 -51
  111. package/dist/collection/components/link/link.stories.js +0 -45
  112. package/dist/collection/components/message/message.stories.js +0 -117
  113. package/dist/collection/components/modal/modal-native.stories.js +0 -121
  114. package/dist/collection/components/modal/modal-webcomponent.stories.js +0 -78
  115. package/dist/collection/components/popover-canvas/popover-canvas.stories.js +0 -87
  116. package/dist/collection/components/popover-menu/popover-menu-icons.stories.js +0 -132
  117. package/dist/collection/components/popover-menu/popover-menu.stories.js +0 -109
  118. package/dist/collection/components/radio-button/radio-button.stories.js +0 -68
  119. package/dist/collection/components/side-menu/side-menu.stories.js +0 -182
  120. package/dist/collection/components/slider/slider.stories.js +0 -251
  121. package/dist/collection/components/spinner/spinner.stories.js +0 -59
  122. package/dist/collection/components/stepper/stepper.stories.js +0 -139
  123. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.stories.js +0 -65
  124. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js +0 -43
  125. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js +0 -32
  126. package/dist/collection/components/textarea/textarea.stories.js +0 -149
  127. package/dist/collection/components/textfield/textfield.stories.js +0 -222
  128. package/dist/collection/components/toast/toast.stories.js +0 -119
  129. package/dist/collection/components/toggle/toggle.stories.js +0 -62
  130. package/dist/collection/components/tooltip/tooltip.stories.js +0 -113
  131. package/dist/collection/components/utility/colour/background-color.stories.js +0 -96
  132. package/dist/collection/components/utility/colour/text-color.stories.js +0 -94
  133. package/dist/collection/foundations-stories/colour/colour-brand.stories.js +0 -38
  134. package/dist/collection/foundations-stories/colour/colour-scales.stories.js +0 -71
  135. package/dist/collection/foundations-stories/colour/colour-semantic.stories.js +0 -40
  136. package/dist/collection/foundations-stories/grid/grid.stories.js +0 -386
  137. package/dist/collection/foundations-stories/spacing/spacing-element.stories.js +0 -100
  138. package/dist/collection/foundations-stories/spacing/spacing-layout.stories.js +0 -94
  139. package/dist/collection/foundations-stories/typography/typography-body.stories.js +0 -16
  140. package/dist/collection/foundations-stories/typography/typography-detail.stories.js +0 -17
  141. package/dist/collection/foundations-stories/typography/typography-headline.stories.js +0 -39
  142. package/dist/collection/foundations-stories/typography/typography-paragraph.stories.js +0 -12
  143. package/dist/tegel/p-2f376504.entry.js +0 -1
  144. package/dist/tegel/p-9d8caf51.entry.js +0 -1
  145. package/dist/tegel/p-b01cface.entry.js +0 -1
  146. package/dist/types/components/accordion/accordion.stories.d.ts +0 -77
  147. package/dist/types/components/badge/badge.stories.d.ts +0 -66
  148. package/dist/types/components/banner/banner.stories.d.ts +0 -68
  149. package/dist/types/components/block/block.stories.d.ts +0 -31
  150. package/dist/types/components/breadcrumb/breadcrumb.stories.d.ts +0 -12
  151. package/dist/types/components/button/button-native.stories.d.ts +0 -144
  152. package/dist/types/components/button/button-webcomponent.stories.d.ts +0 -143
  153. package/dist/types/components/card/card.stories.d.ts +0 -114
  154. package/dist/types/components/checkbox/checkbox.stories.d.ts +0 -39
  155. package/dist/types/components/chips/chips.stories.d.ts +0 -81
  156. package/dist/types/components/data-table/native-table.stories.d.ts +0 -147
  157. package/dist/types/components/data-table/table-component-basic.stories.d.ts +0 -100
  158. package/dist/types/components/data-table/table-component-batch-actions.stories.d.ts +0 -98
  159. package/dist/types/components/data-table/table-component-bodydata.stories.d.ts +0 -38
  160. package/dist/types/components/data-table/table-component-custom-width.stories.d.ts +0 -147
  161. package/dist/types/components/data-table/table-component-event-listeners.stories.d.ts +0 -87
  162. package/dist/types/components/data-table/table-component-expandable-rows.stories.d.ts +0 -87
  163. package/dist/types/components/data-table/table-component-filtering.stories.d.ts +0 -100
  164. package/dist/types/components/data-table/table-component-multiselect.stories.d.ts +0 -100
  165. package/dist/types/components/data-table/table-component-pagination.stories.d.ts +0 -100
  166. package/dist/types/components/data-table/table-component-sorting.stories.d.ts +0 -79
  167. package/dist/types/components/datetime/datetime.stories.d.ts +0 -80
  168. package/dist/types/components/divider/divider.stories.d.ts +0 -72
  169. package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.stories.d.ts +0 -73
  170. package/dist/types/components/dropdown/dropdown-native.stories.d.ts +0 -57
  171. package/dist/types/components/dropdown/dropdown-wc-default.stories.d.ts +0 -115
  172. package/dist/types/components/dropdown/dropdown-wc-multiselect.stories.d.ts +0 -115
  173. package/dist/types/components/footer/footer.stories.d.ts +0 -23
  174. package/dist/types/components/header/header-all.stories.d.ts +0 -29
  175. package/dist/types/components/header/header-default.stories.d.ts +0 -29
  176. package/dist/types/components/header/header-inline.stories.d.ts +0 -29
  177. package/dist/types/components/header/header-search.stories.d.ts +0 -29
  178. package/dist/types/components/header/header-toolbar.stories.d.ts +0 -29
  179. package/dist/types/components/icon/icon-font.stories.d.ts +0 -38
  180. package/dist/types/components/icon/icon-web-component.stories.d.ts +0 -38
  181. package/dist/types/components/link/link.stories.d.ts +0 -33
  182. package/dist/types/components/message/message.stories.d.ts +0 -67
  183. package/dist/types/components/modal/modal-native.stories.d.ts +0 -51
  184. package/dist/types/components/modal/modal-webcomponent.stories.d.ts +0 -44
  185. package/dist/types/components/popover-canvas/popover-canvas.stories.d.ts +0 -25
  186. package/dist/types/components/popover-menu/popover-menu-icons.stories.d.ts +0 -27
  187. package/dist/types/components/popover-menu/popover-menu.stories.d.ts +0 -27
  188. package/dist/types/components/radio-button/radio-button.stories.d.ts +0 -41
  189. package/dist/types/components/side-menu/side-menu.stories.d.ts +0 -42
  190. package/dist/types/components/slider/slider.stories.d.ts +0 -156
  191. package/dist/types/components/spinner/spinner.stories.d.ts +0 -37
  192. package/dist/types/components/stepper/stepper.stories.d.ts +0 -56
  193. package/dist/types/components/tabs/inline-tabs-default/inline-tabs.stories.d.ts +0 -41
  194. package/dist/types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.d.ts +0 -25
  195. package/dist/types/components/tabs/navigation-tabs/navigation-tabs.stories.d.ts +0 -13
  196. package/dist/types/components/textarea/textarea.stories.d.ts +0 -111
  197. package/dist/types/components/textfield/textfield.stories.d.ts +0 -176
  198. package/dist/types/components/toast/toast.stories.d.ts +0 -58
  199. package/dist/types/components/toggle/toggle.stories.d.ts +0 -42
  200. package/dist/types/components/tooltip/tooltip.stories.d.ts +0 -54
  201. package/dist/types/components/utility/colour/background-color.stories.d.ts +0 -58
  202. package/dist/types/components/utility/colour/text-color.stories.d.ts +0 -58
  203. package/dist/types/foundations-stories/colour/colour-brand.stories.d.ts +0 -13
  204. package/dist/types/foundations-stories/colour/colour-scales.stories.d.ts +0 -13
  205. package/dist/types/foundations-stories/colour/colour-semantic.stories.d.ts +0 -13
  206. package/dist/types/foundations-stories/grid/grid.stories.d.ts +0 -35
  207. package/dist/types/foundations-stories/spacing/spacing-element.stories.d.ts +0 -8
  208. package/dist/types/foundations-stories/spacing/spacing-layout.stories.d.ts +0 -8
  209. package/dist/types/foundations-stories/typography/typography-body.stories.d.ts +0 -8
  210. package/dist/types/foundations-stories/typography/typography-detail.stories.d.ts +0 -8
  211. package/dist/types/foundations-stories/typography/typography-headline.stories.d.ts +0 -21
  212. 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 = {};