@scania/tegel 0.0.1-beta.2 → 0.0.1-beta.3

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 (275) hide show
  1. package/dist/components/dropdown-option.js +1 -0
  2. package/dist/components/dropdown.js +1 -0
  3. package/dist/components/icon.js +1 -0
  4. package/dist/components/sdds-accordion-item.js +1 -0
  5. package/dist/components/sdds-accordion.js +1 -0
  6. package/dist/components/sdds-badges.js +1 -0
  7. package/dist/components/sdds-button.js +1 -0
  8. package/dist/components/sdds-datetime.js +1 -0
  9. package/dist/components/sdds-dropdown-filter.js +1 -0
  10. package/dist/components/sdds-header-cell.js +1 -0
  11. package/dist/components/sdds-inline-tabs-fullbleed.js +1 -0
  12. package/dist/components/sdds-inline-tabs.js +1 -0
  13. package/dist/components/sdds-modal.js +1 -0
  14. package/dist/components/sdds-navigation-tabs.js +1 -0
  15. package/dist/components/sdds-popover-canvas.js +1 -0
  16. package/dist/components/sdds-popover-menu.js +1 -0
  17. package/dist/components/sdds-slider.js +1 -0
  18. package/dist/components/sdds-spinner.js +1 -0
  19. package/dist/components/sdds-table-body-row-expandable.js +1 -0
  20. package/dist/components/sdds-table-body.js +1 -0
  21. package/dist/components/sdds-table-footer.js +1 -0
  22. package/dist/components/sdds-table-header.js +1 -0
  23. package/dist/components/sdds-table-toolbar.js +1 -0
  24. package/dist/components/sdds-table.js +1 -0
  25. package/dist/components/sdds-textarea.js +1 -0
  26. package/dist/components/sdds-textfield.js +1 -0
  27. package/dist/components/sdds-tooltip.js +1 -0
  28. package/dist/components/table-body-cell.js +1 -0
  29. package/dist/components/table-body-row.js +1 -0
  30. package/package.json +2 -2
  31. package/dist/cjs/index-e1c79686.js +0 -1912
  32. package/dist/cjs/index.cjs.js +0 -2
  33. package/dist/cjs/loader.cjs.js +0 -21
  34. package/dist/cjs/popper-11d5f714.js +0 -1801
  35. package/dist/cjs/sdds-accordion-item.cjs.entry.js +0 -34
  36. package/dist/cjs/sdds-accordion.cjs.entry.js +0 -21
  37. package/dist/cjs/sdds-badges.cjs.entry.js +0 -55
  38. package/dist/cjs/sdds-body-cell_2.cjs.entry.js +0 -173
  39. package/dist/cjs/sdds-button.cjs.entry.js +0 -36
  40. package/dist/cjs/sdds-datetime.cjs.entry.js +0 -66
  41. package/dist/cjs/sdds-dropdown-filter.cjs.entry.js +0 -92
  42. package/dist/cjs/sdds-dropdown_2.cjs.entry.js +0 -335
  43. package/dist/cjs/sdds-header-cell.cjs.entry.js +0 -141
  44. package/dist/cjs/sdds-icon.cjs.entry.js +0 -42
  45. package/dist/cjs/sdds-inline-tabs-fullbleed.cjs.entry.js +0 -96
  46. package/dist/cjs/sdds-inline-tabs.cjs.entry.js +0 -211
  47. package/dist/cjs/sdds-modal.cjs.entry.js +0 -49
  48. package/dist/cjs/sdds-navigation-tabs.cjs.entry.js +0 -95
  49. package/dist/cjs/sdds-popover-canvas.cjs.entry.js +0 -76
  50. package/dist/cjs/sdds-popover-menu.cjs.entry.js +0 -75
  51. package/dist/cjs/sdds-slider.cjs.entry.js +0 -336
  52. package/dist/cjs/sdds-spinner.cjs.entry.js +0 -21
  53. package/dist/cjs/sdds-table-body-row-expandable.cjs.entry.js +0 -81
  54. package/dist/cjs/sdds-table-body.cjs.entry.js +0 -289
  55. package/dist/cjs/sdds-table-footer.cjs.entry.js +0 -165
  56. package/dist/cjs/sdds-table-header.cjs.entry.js +0 -100
  57. package/dist/cjs/sdds-table-toolbar.cjs.entry.js +0 -66
  58. package/dist/cjs/sdds-table.cjs.entry.js +0 -69
  59. package/dist/cjs/sdds-textarea.cjs.entry.js +0 -61
  60. package/dist/cjs/sdds-textfield.cjs.entry.js +0 -82
  61. package/dist/cjs/sdds-tooltip.cjs.entry.js +0 -95
  62. package/dist/cjs/tegel.cjs.js +0 -19
  63. package/dist/collection/collection-manifest.json +0 -40
  64. package/dist/collection/components/accordion/accordion-item/accordion-item.css +0 -134
  65. package/dist/collection/components/accordion/accordion-item/accordion-item.js +0 -146
  66. package/dist/collection/components/accordion/accordion.css +0 -77
  67. package/dist/collection/components/accordion/accordion.js +0 -62
  68. package/dist/collection/components/accordion/accordion.stories.js +0 -91
  69. package/dist/collection/components/badge/badge.stories.js +0 -101
  70. package/dist/collection/components/badge/badges.css +0 -42
  71. package/dist/collection/components/badge/badges.js +0 -150
  72. package/dist/collection/components/banner/banner.stories.js +0 -93
  73. package/dist/collection/components/block/block.stories.js +0 -46
  74. package/dist/collection/components/breadcrumb/breadcrumb.stories.js +0 -26
  75. package/dist/collection/components/button/button-component.js +0 -154
  76. package/dist/collection/components/button/button-native.stories.js +0 -183
  77. package/dist/collection/components/button/button-webcomponent.stories.js +0 -182
  78. package/dist/collection/components/button/button.css +0 -658
  79. package/dist/collection/components/card/card.stories.js +0 -181
  80. package/dist/collection/components/checkbox/checkbox.stories.js +0 -54
  81. package/dist/collection/components/chips/chips.stories.js +0 -124
  82. package/dist/collection/components/data-table/native-table.stories.js +0 -182
  83. package/dist/collection/components/data-table/table/table.css +0 -15
  84. package/dist/collection/components/data-table/table/table.js +0 -253
  85. package/dist/collection/components/data-table/table-body/table-body.css +0 -22
  86. package/dist/collection/components/data-table/table-body/table-body.js +0 -425
  87. package/dist/collection/components/data-table/table-body-cell/table-body-cell.css +0 -40
  88. package/dist/collection/components/data-table/table-body-cell/table-body-cell.js +0 -169
  89. package/dist/collection/components/data-table/table-body-row/table-body-row.css +0 -196
  90. package/dist/collection/components/data-table/table-body-row/table-body-row.js +0 -164
  91. package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.css +0 -79
  92. package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.js +0 -155
  93. package/dist/collection/components/data-table/table-component-basic.stories.js +0 -163
  94. package/dist/collection/components/data-table/table-component-batch-actions.stories.js +0 -129
  95. package/dist/collection/components/data-table/table-component-bodydata.stories.js +0 -58
  96. package/dist/collection/components/data-table/table-component-custom-width.stories.js +0 -198
  97. package/dist/collection/components/data-table/table-component-event-listeners.stories.js +0 -153
  98. package/dist/collection/components/data-table/table-component-expandable-rows.stories.js +0 -137
  99. package/dist/collection/components/data-table/table-component-filtering.stories.js +0 -139
  100. package/dist/collection/components/data-table/table-component-multiselect.stories.js +0 -160
  101. package/dist/collection/components/data-table/table-component-pagination.stories.js +0 -129
  102. package/dist/collection/components/data-table/table-component-sorting.stories.js +0 -107
  103. package/dist/collection/components/data-table/table-footer/table-footer.css +0 -93
  104. package/dist/collection/components/data-table/table-footer/table-footer.js +0 -355
  105. package/dist/collection/components/data-table/table-header/table-header.css +0 -204
  106. package/dist/collection/components/data-table/table-header/table-header.js +0 -153
  107. package/dist/collection/components/data-table/table-header-cell/table-header-cell.css +0 -126
  108. package/dist/collection/components/data-table/table-header-cell/table-header-cell.js +0 -320
  109. package/dist/collection/components/data-table/table-toolbar/table-toolbar.css +0 -92
  110. package/dist/collection/components/data-table/table-toolbar/table-toolbar.js +0 -142
  111. package/dist/collection/components/datetime/datetime.css +0 -375
  112. package/dist/collection/components/datetime/datetime.js +0 -251
  113. package/dist/collection/components/datetime/datetime.stories.js +0 -149
  114. package/dist/collection/components/divider/divider.stories.js +0 -116
  115. package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.js +0 -339
  116. package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js +0 -130
  117. package/dist/collection/components/dropdown/dropdown-native.stories.js +0 -90
  118. package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js +0 -185
  119. package/dist/collection/components/dropdown/dropdown-wc-default.stories.js +0 -151
  120. package/dist/collection/components/dropdown/dropdown-wc-multiselect.stories.js +0 -146
  121. package/dist/collection/components/dropdown/dropdown.css +0 -891
  122. package/dist/collection/components/dropdown/dropdown.js +0 -554
  123. package/dist/collection/components/footer/footer.stories.js +0 -100
  124. package/dist/collection/components/header/header-all.stories.js +0 -217
  125. package/dist/collection/components/header/header-default.stories.js +0 -47
  126. package/dist/collection/components/header/header-inline.stories.js +0 -113
  127. package/dist/collection/components/header/header-search.stories.js +0 -263
  128. package/dist/collection/components/header/header-toolbar.stories.js +0 -204
  129. package/dist/collection/components/icon/icon-font.stories.js +0 -57
  130. package/dist/collection/components/icon/icon-web-component.stories.js +0 -51
  131. package/dist/collection/components/icon/icon.css +0 -16
  132. package/dist/collection/components/icon/icon.js +0 -89
  133. package/dist/collection/components/icon/iconsArray.js +0 -2
  134. package/dist/collection/components/link/link.stories.js +0 -45
  135. package/dist/collection/components/message/message.stories.js +0 -117
  136. package/dist/collection/components/modal/modal-native.stories.js +0 -121
  137. package/dist/collection/components/modal/modal-webcomponent.stories.js +0 -78
  138. package/dist/collection/components/modal/modal.css +0 -324
  139. package/dist/collection/components/modal/modal.js +0 -146
  140. package/dist/collection/components/popover-canvas/popover-canvas.css +0 -20
  141. package/dist/collection/components/popover-canvas/popover-canvas.js +0 -190
  142. package/dist/collection/components/popover-canvas/popover-canvas.stories.js +0 -87
  143. package/dist/collection/components/popover-menu/popover-menu-icons.stories.js +0 -132
  144. package/dist/collection/components/popover-menu/popover-menu.css +0 -19
  145. package/dist/collection/components/popover-menu/popover-menu.js +0 -189
  146. package/dist/collection/components/popover-menu/popover-menu.stories.js +0 -109
  147. package/dist/collection/components/radio-button/radio-button.stories.js +0 -68
  148. package/dist/collection/components/side-menu/side-menu.stories.js +0 -182
  149. package/dist/collection/components/slider/slider.css +0 -260
  150. package/dist/collection/components/slider/slider.js +0 -682
  151. package/dist/collection/components/slider/slider.stories.js +0 -251
  152. package/dist/collection/components/spinner/spinner.css +0 -79
  153. package/dist/collection/components/spinner/spinner.js +0 -61
  154. package/dist/collection/components/spinner/spinner.stories.js +0 -59
  155. package/dist/collection/components/stepper/stepper.stories.js +0 -139
  156. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.css +0 -159
  157. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.js +0 -302
  158. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.stories.js +0 -65
  159. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.css +0 -172
  160. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js +0 -126
  161. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js +0 -43
  162. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css +0 -153
  163. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js +0 -103
  164. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js +0 -32
  165. package/dist/collection/components/textarea/textarea.css +0 -283
  166. package/dist/collection/components/textarea/textarea.js +0 -336
  167. package/dist/collection/components/textarea/textarea.stories.js +0 -149
  168. package/dist/collection/components/textfield/textfield.css +0 -494
  169. package/dist/collection/components/textfield/textfield.js +0 -359
  170. package/dist/collection/components/textfield/textfield.stories.js +0 -222
  171. package/dist/collection/components/toast/toast.stories.js +0 -119
  172. package/dist/collection/components/toggle/toggle.stories.js +0 -62
  173. package/dist/collection/components/tooltip/tooltip.css +0 -46
  174. package/dist/collection/components/tooltip/tooltip.js +0 -200
  175. package/dist/collection/components/tooltip/tooltip.stories.js +0 -113
  176. package/dist/collection/components/utility/colour/background-color.stories.js +0 -96
  177. package/dist/collection/components/utility/colour/text-color.stories.js +0 -94
  178. package/dist/collection/foundations-stories/colour/colour-brand.stories.js +0 -38
  179. package/dist/collection/foundations-stories/colour/colour-scales.stories.js +0 -71
  180. package/dist/collection/foundations-stories/colour/colour-semantic.stories.js +0 -40
  181. package/dist/collection/foundations-stories/grid/grid.stories.js +0 -386
  182. package/dist/collection/foundations-stories/spacing/spacing-element.stories.js +0 -100
  183. package/dist/collection/foundations-stories/spacing/spacing-layout.stories.js +0 -94
  184. package/dist/collection/foundations-stories/typography/typography-body.stories.js +0 -16
  185. package/dist/collection/foundations-stories/typography/typography-detail.stories.js +0 -17
  186. package/dist/collection/foundations-stories/typography/typography-headline.stories.js +0 -39
  187. package/dist/collection/foundations-stories/typography/typography-paragraph.stories.js +0 -12
  188. package/dist/collection/index.js +0 -1
  189. package/dist/collection/stories/assets/code-brackets.svg +0 -1
  190. package/dist/collection/stories/assets/colors.svg +0 -1
  191. package/dist/collection/stories/assets/comments.svg +0 -1
  192. package/dist/collection/stories/assets/direction.svg +0 -1
  193. package/dist/collection/stories/assets/flow.svg +0 -1
  194. package/dist/collection/stories/assets/plugin.svg +0 -1
  195. package/dist/collection/stories/assets/repo.svg +0 -1
  196. package/dist/collection/stories/assets/stackalt.svg +0 -1
  197. package/dist/collection/utils/utils.js +0 -12
  198. package/dist/esm/index-b67b15a6.js +0 -1884
  199. package/dist/esm/index.js +0 -1
  200. package/dist/esm/loader.js +0 -17
  201. package/dist/esm/polyfills/core-js.js +0 -11
  202. package/dist/esm/polyfills/css-shim.js +0 -1
  203. package/dist/esm/polyfills/dom.js +0 -79
  204. package/dist/esm/polyfills/es5-html-element.js +0 -1
  205. package/dist/esm/polyfills/index.js +0 -34
  206. package/dist/esm/polyfills/system.js +0 -6
  207. package/dist/esm/popper-f860750c.js +0 -1799
  208. package/dist/esm/sdds-accordion-item.entry.js +0 -30
  209. package/dist/esm/sdds-accordion.entry.js +0 -17
  210. package/dist/esm/sdds-badges.entry.js +0 -51
  211. package/dist/esm/sdds-body-cell_2.entry.js +0 -168
  212. package/dist/esm/sdds-button.entry.js +0 -32
  213. package/dist/esm/sdds-datetime.entry.js +0 -62
  214. package/dist/esm/sdds-dropdown-filter.entry.js +0 -88
  215. package/dist/esm/sdds-dropdown_2.entry.js +0 -330
  216. package/dist/esm/sdds-header-cell.entry.js +0 -137
  217. package/dist/esm/sdds-icon.entry.js +0 -38
  218. package/dist/esm/sdds-inline-tabs-fullbleed.entry.js +0 -92
  219. package/dist/esm/sdds-inline-tabs.entry.js +0 -207
  220. package/dist/esm/sdds-modal.entry.js +0 -45
  221. package/dist/esm/sdds-navigation-tabs.entry.js +0 -91
  222. package/dist/esm/sdds-popover-canvas.entry.js +0 -72
  223. package/dist/esm/sdds-popover-menu.entry.js +0 -71
  224. package/dist/esm/sdds-slider.entry.js +0 -332
  225. package/dist/esm/sdds-spinner.entry.js +0 -17
  226. package/dist/esm/sdds-table-body-row-expandable.entry.js +0 -77
  227. package/dist/esm/sdds-table-body.entry.js +0 -285
  228. package/dist/esm/sdds-table-footer.entry.js +0 -161
  229. package/dist/esm/sdds-table-header.entry.js +0 -96
  230. package/dist/esm/sdds-table-toolbar.entry.js +0 -62
  231. package/dist/esm/sdds-table.entry.js +0 -65
  232. package/dist/esm/sdds-textarea.entry.js +0 -57
  233. package/dist/esm/sdds-textfield.entry.js +0 -78
  234. package/dist/esm/sdds-tooltip.entry.js +0 -91
  235. package/dist/esm/tegel.js +0 -17
  236. package/dist/index.cjs.js +0 -1
  237. package/dist/index.js +0 -1
  238. package/dist/tegel/index.esm.js +0 -0
  239. package/dist/tegel/p-040efb32.entry.js +0 -1
  240. package/dist/tegel/p-12ca5cfa.entry.js +0 -1
  241. package/dist/tegel/p-157e1618.js +0 -2
  242. package/dist/tegel/p-1fe61cf6.entry.js +0 -1
  243. package/dist/tegel/p-2f376504.entry.js +0 -1
  244. package/dist/tegel/p-44ced895.entry.js +0 -1
  245. package/dist/tegel/p-4880f03d.entry.js +0 -1
  246. package/dist/tegel/p-4aba73a3.entry.js +0 -1
  247. package/dist/tegel/p-4b58a02c.entry.js +0 -1
  248. package/dist/tegel/p-4cb85347.entry.js +0 -1
  249. package/dist/tegel/p-52031b5a.entry.js +0 -1
  250. package/dist/tegel/p-677baf7f.entry.js +0 -1
  251. package/dist/tegel/p-71797eaf.entry.js +0 -1
  252. package/dist/tegel/p-7373284c.entry.js +0 -1
  253. package/dist/tegel/p-7451779b.entry.js +0 -1
  254. package/dist/tegel/p-77aeea3b.entry.js +0 -1
  255. package/dist/tegel/p-8582d6a7.entry.js +0 -1
  256. package/dist/tegel/p-96021bd0.entry.js +0 -1
  257. package/dist/tegel/p-9d8caf51.entry.js +0 -1
  258. package/dist/tegel/p-a5919930.entry.js +0 -1
  259. package/dist/tegel/p-b01cface.entry.js +0 -1
  260. package/dist/tegel/p-bf896643.entry.js +0 -1
  261. package/dist/tegel/p-c311725c.entry.js +0 -1
  262. package/dist/tegel/p-cf72dfd9.entry.js +0 -1
  263. package/dist/tegel/p-d91caec6.entry.js +0 -1
  264. package/dist/tegel/p-e10eec33.entry.js +0 -1
  265. package/dist/tegel/p-ec26fc38.js +0 -1
  266. package/dist/tegel/p-f2262a69.entry.js +0 -1
  267. package/dist/tegel/p-f2f7aa45.entry.js +0 -1
  268. package/dist/tegel/tegel.css +0 -101
  269. package/dist/tegel/tegel.esm.js +0 -1
  270. package/loader/cdn.js +0 -3
  271. package/loader/index.cjs.js +0 -3
  272. package/loader/index.d.ts +0 -12
  273. package/loader/index.es2017.js +0 -3
  274. package/loader/index.js +0 -4
  275. package/loader/package.json +0 -11
@@ -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 = {};