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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (144) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/tegel.cjs.js +1 -1
  3. package/dist/collection/collection-manifest.json +2 -2
  4. package/dist/collection/components/modal/modal.css +1 -1
  5. package/dist/esm/loader.js +1 -1
  6. package/dist/esm/tegel.js +1 -1
  7. package/package.json +4 -4
  8. package/readme.md +136 -2
  9. package/dist/collection/components/accordion/accordion.stories.js +0 -91
  10. package/dist/collection/components/badge/badge.stories.js +0 -101
  11. package/dist/collection/components/banner/banner.stories.js +0 -93
  12. package/dist/collection/components/block/block.stories.js +0 -46
  13. package/dist/collection/components/breadcrumb/breadcrumb.stories.js +0 -26
  14. package/dist/collection/components/button/button-native.stories.js +0 -183
  15. package/dist/collection/components/button/button-webcomponent.stories.js +0 -182
  16. package/dist/collection/components/card/card.stories.js +0 -181
  17. package/dist/collection/components/checkbox/checkbox.stories.js +0 -54
  18. package/dist/collection/components/chips/chips.stories.js +0 -124
  19. package/dist/collection/components/data-table/native-table.stories.js +0 -182
  20. package/dist/collection/components/data-table/table-component-basic.stories.js +0 -163
  21. package/dist/collection/components/data-table/table-component-batch-actions.stories.js +0 -129
  22. package/dist/collection/components/data-table/table-component-bodydata.stories.js +0 -58
  23. package/dist/collection/components/data-table/table-component-custom-width.stories.js +0 -198
  24. package/dist/collection/components/data-table/table-component-event-listeners.stories.js +0 -153
  25. package/dist/collection/components/data-table/table-component-expandable-rows.stories.js +0 -137
  26. package/dist/collection/components/data-table/table-component-filtering.stories.js +0 -139
  27. package/dist/collection/components/data-table/table-component-multiselect.stories.js +0 -160
  28. package/dist/collection/components/data-table/table-component-pagination.stories.js +0 -129
  29. package/dist/collection/components/data-table/table-component-sorting.stories.js +0 -107
  30. package/dist/collection/components/datetime/datetime.stories.js +0 -149
  31. package/dist/collection/components/divider/divider.stories.js +0 -116
  32. package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js +0 -130
  33. package/dist/collection/components/dropdown/dropdown-native.stories.js +0 -90
  34. package/dist/collection/components/dropdown/dropdown-wc-default.stories.js +0 -151
  35. package/dist/collection/components/dropdown/dropdown-wc-multiselect.stories.js +0 -146
  36. package/dist/collection/components/footer/footer.stories.js +0 -100
  37. package/dist/collection/components/header/header-all.stories.js +0 -217
  38. package/dist/collection/components/header/header-default.stories.js +0 -47
  39. package/dist/collection/components/header/header-inline.stories.js +0 -113
  40. package/dist/collection/components/header/header-search.stories.js +0 -263
  41. package/dist/collection/components/header/header-toolbar.stories.js +0 -204
  42. package/dist/collection/components/icon/icon-font.stories.js +0 -57
  43. package/dist/collection/components/icon/icon-web-component.stories.js +0 -51
  44. package/dist/collection/components/link/link.stories.js +0 -45
  45. package/dist/collection/components/message/message.stories.js +0 -117
  46. package/dist/collection/components/modal/modal-native.stories.js +0 -121
  47. package/dist/collection/components/modal/modal-webcomponent.stories.js +0 -78
  48. package/dist/collection/components/popover-canvas/popover-canvas.stories.js +0 -87
  49. package/dist/collection/components/popover-menu/popover-menu-icons.stories.js +0 -132
  50. package/dist/collection/components/popover-menu/popover-menu.stories.js +0 -109
  51. package/dist/collection/components/radio-button/radio-button.stories.js +0 -68
  52. package/dist/collection/components/side-menu/side-menu.stories.js +0 -182
  53. package/dist/collection/components/slider/slider.stories.js +0 -251
  54. package/dist/collection/components/spinner/spinner.stories.js +0 -59
  55. package/dist/collection/components/stepper/stepper.stories.js +0 -139
  56. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.stories.js +0 -65
  57. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js +0 -43
  58. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js +0 -32
  59. package/dist/collection/components/textarea/textarea.stories.js +0 -149
  60. package/dist/collection/components/textfield/textfield.stories.js +0 -222
  61. package/dist/collection/components/toast/toast.stories.js +0 -119
  62. package/dist/collection/components/toggle/toggle.stories.js +0 -62
  63. package/dist/collection/components/tooltip/tooltip.stories.js +0 -113
  64. package/dist/collection/components/utility/colour/background-color.stories.js +0 -96
  65. package/dist/collection/components/utility/colour/text-color.stories.js +0 -94
  66. package/dist/collection/foundations-stories/colour/colour-brand.stories.js +0 -38
  67. package/dist/collection/foundations-stories/colour/colour-scales.stories.js +0 -71
  68. package/dist/collection/foundations-stories/colour/colour-semantic.stories.js +0 -40
  69. package/dist/collection/foundations-stories/grid/grid.stories.js +0 -386
  70. package/dist/collection/foundations-stories/spacing/spacing-element.stories.js +0 -100
  71. package/dist/collection/foundations-stories/spacing/spacing-layout.stories.js +0 -94
  72. package/dist/collection/foundations-stories/typography/typography-body.stories.js +0 -16
  73. package/dist/collection/foundations-stories/typography/typography-detail.stories.js +0 -17
  74. package/dist/collection/foundations-stories/typography/typography-headline.stories.js +0 -39
  75. package/dist/collection/foundations-stories/typography/typography-paragraph.stories.js +0 -12
  76. package/dist/tegel/p-0e9d8e6d.entry.js +0 -1
  77. package/dist/tegel/p-29e77404.entry.js +0 -1
  78. package/dist/types/components/accordion/accordion.stories.d.ts +0 -77
  79. package/dist/types/components/badge/badge.stories.d.ts +0 -66
  80. package/dist/types/components/banner/banner.stories.d.ts +0 -68
  81. package/dist/types/components/block/block.stories.d.ts +0 -31
  82. package/dist/types/components/breadcrumb/breadcrumb.stories.d.ts +0 -12
  83. package/dist/types/components/button/button-native.stories.d.ts +0 -144
  84. package/dist/types/components/button/button-webcomponent.stories.d.ts +0 -143
  85. package/dist/types/components/card/card.stories.d.ts +0 -114
  86. package/dist/types/components/checkbox/checkbox.stories.d.ts +0 -39
  87. package/dist/types/components/chips/chips.stories.d.ts +0 -81
  88. package/dist/types/components/data-table/native-table.stories.d.ts +0 -147
  89. package/dist/types/components/data-table/table-component-basic.stories.d.ts +0 -100
  90. package/dist/types/components/data-table/table-component-batch-actions.stories.d.ts +0 -98
  91. package/dist/types/components/data-table/table-component-bodydata.stories.d.ts +0 -38
  92. package/dist/types/components/data-table/table-component-custom-width.stories.d.ts +0 -147
  93. package/dist/types/components/data-table/table-component-event-listeners.stories.d.ts +0 -87
  94. package/dist/types/components/data-table/table-component-expandable-rows.stories.d.ts +0 -87
  95. package/dist/types/components/data-table/table-component-filtering.stories.d.ts +0 -100
  96. package/dist/types/components/data-table/table-component-multiselect.stories.d.ts +0 -100
  97. package/dist/types/components/data-table/table-component-pagination.stories.d.ts +0 -100
  98. package/dist/types/components/data-table/table-component-sorting.stories.d.ts +0 -79
  99. package/dist/types/components/datetime/datetime.stories.d.ts +0 -80
  100. package/dist/types/components/divider/divider.stories.d.ts +0 -72
  101. package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.stories.d.ts +0 -73
  102. package/dist/types/components/dropdown/dropdown-native.stories.d.ts +0 -57
  103. package/dist/types/components/dropdown/dropdown-wc-default.stories.d.ts +0 -115
  104. package/dist/types/components/dropdown/dropdown-wc-multiselect.stories.d.ts +0 -115
  105. package/dist/types/components/footer/footer.stories.d.ts +0 -23
  106. package/dist/types/components/header/header-all.stories.d.ts +0 -29
  107. package/dist/types/components/header/header-default.stories.d.ts +0 -29
  108. package/dist/types/components/header/header-inline.stories.d.ts +0 -29
  109. package/dist/types/components/header/header-search.stories.d.ts +0 -29
  110. package/dist/types/components/header/header-toolbar.stories.d.ts +0 -29
  111. package/dist/types/components/icon/icon-font.stories.d.ts +0 -38
  112. package/dist/types/components/icon/icon-web-component.stories.d.ts +0 -38
  113. package/dist/types/components/link/link.stories.d.ts +0 -33
  114. package/dist/types/components/message/message.stories.d.ts +0 -67
  115. package/dist/types/components/modal/modal-native.stories.d.ts +0 -51
  116. package/dist/types/components/modal/modal-webcomponent.stories.d.ts +0 -44
  117. package/dist/types/components/popover-canvas/popover-canvas.stories.d.ts +0 -25
  118. package/dist/types/components/popover-menu/popover-menu-icons.stories.d.ts +0 -27
  119. package/dist/types/components/popover-menu/popover-menu.stories.d.ts +0 -27
  120. package/dist/types/components/radio-button/radio-button.stories.d.ts +0 -41
  121. package/dist/types/components/side-menu/side-menu.stories.d.ts +0 -42
  122. package/dist/types/components/slider/slider.stories.d.ts +0 -156
  123. package/dist/types/components/spinner/spinner.stories.d.ts +0 -37
  124. package/dist/types/components/stepper/stepper.stories.d.ts +0 -56
  125. package/dist/types/components/tabs/inline-tabs-default/inline-tabs.stories.d.ts +0 -41
  126. package/dist/types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.d.ts +0 -25
  127. package/dist/types/components/tabs/navigation-tabs/navigation-tabs.stories.d.ts +0 -13
  128. package/dist/types/components/textarea/textarea.stories.d.ts +0 -111
  129. package/dist/types/components/textfield/textfield.stories.d.ts +0 -176
  130. package/dist/types/components/toast/toast.stories.d.ts +0 -58
  131. package/dist/types/components/toggle/toggle.stories.d.ts +0 -42
  132. package/dist/types/components/tooltip/tooltip.stories.d.ts +0 -54
  133. package/dist/types/components/utility/colour/background-color.stories.d.ts +0 -58
  134. package/dist/types/components/utility/colour/text-color.stories.d.ts +0 -58
  135. package/dist/types/foundations-stories/colour/colour-brand.stories.d.ts +0 -13
  136. package/dist/types/foundations-stories/colour/colour-scales.stories.d.ts +0 -13
  137. package/dist/types/foundations-stories/colour/colour-semantic.stories.d.ts +0 -13
  138. package/dist/types/foundations-stories/grid/grid.stories.d.ts +0 -35
  139. package/dist/types/foundations-stories/spacing/spacing-element.stories.d.ts +0 -8
  140. package/dist/types/foundations-stories/spacing/spacing-layout.stories.d.ts +0 -8
  141. package/dist/types/foundations-stories/typography/typography-body.stories.d.ts +0 -8
  142. package/dist/types/foundations-stories/typography/typography-detail.stories.d.ts +0 -8
  143. package/dist/types/foundations-stories/typography/typography-headline.stories.d.ts +0 -21
  144. package/dist/types/foundations-stories/typography/typography-paragraph.stories.d.ts +0 -8
@@ -1,124 +0,0 @@
1
- import { formatHtmlPreview } from '../../utils/utils';
2
- export default {
3
- title: 'Components/Chips',
4
- parameters: {
5
- layout: 'centered',
6
- design: [
7
- {
8
- name: 'Figma',
9
- type: 'figma',
10
- url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11268%3A39456&t=rVXuTOgTmXPauyHd-1',
11
- },
12
- {
13
- name: 'Link',
14
- type: 'link',
15
- url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11268%3A39456&t=rVXuTOgTmXPauyHd-1',
16
- },
17
- ],
18
- },
19
- argTypes: {
20
- placeholderText: {
21
- name: 'Placeholder',
22
- description: 'Set custom chip text',
23
- control: {
24
- type: 'text',
25
- },
26
- },
27
- icon: {
28
- name: 'Icon',
29
- description: 'Add an icon to the chip.',
30
- control: {
31
- type: 'boolean',
32
- },
33
- },
34
- iconType: {
35
- name: 'Icon type',
36
- description: 'Choose what icon type to use',
37
- control: {
38
- type: 'radio',
39
- },
40
- options: ['Native', 'Webcomponent'],
41
- if: { arg: 'icon', eq: true },
42
- },
43
- iconPosition: {
44
- name: 'Icon position',
45
- description: 'Set the placement of the icon',
46
- control: {
47
- type: 'radio',
48
- },
49
- options: ['Icon left', 'Icon right'],
50
- if: { arg: 'icon', eq: true },
51
- },
52
- state: {
53
- name: 'State',
54
- description: 'Set the chips state as active or default',
55
- control: {
56
- type: 'radio',
57
- },
58
- options: ['Default', 'Active'],
59
- },
60
- size: {
61
- name: 'Size',
62
- description: 'Set the chip size',
63
- control: {
64
- type: 'radio',
65
- },
66
- options: ['Default', 'Small'],
67
- },
68
- },
69
- args: {
70
- placeholderText: 'Chip text',
71
- icon: false,
72
- iconType: 'Native',
73
- iconPosition: 'Icon right',
74
- state: 'Default',
75
- size: 'Default',
76
- },
77
- };
78
- const Template = ({ icon, iconPosition, iconType, state, placeholderText, size }) => {
79
- const stateValue = state === 'Active' ? 'sdds-chip__active' : '';
80
- const sizeValue = size === 'Small' ? 'sdds-chip-sm' : '';
81
- const iconPositionLookup = {
82
- 'Icon left': 'sdds-chip__icon-left',
83
- 'Icon right': 'sdds-chip__icon-right',
84
- };
85
- // TODO - Add dark theme to story
86
- const iconSvg = `
87
- ${iconType === 'Native'
88
- ? '<i class="sdds-chip-icon sdds-icon notification"></i>'
89
- : '<sdds-icon class="sdds-chip-icon" name="notification" size="16px"></sdds-icon>'}
90
- `;
91
- return formatHtmlPreview(`
92
- ${iconType === 'Native'
93
- ? `<style>
94
- /* Note: In case you are using WebFont icons, please make sure to import icons css file in your implementation */
95
- @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
96
-
97
- </style>`
98
- : ''}
99
-
100
- <div class="sdds-chip ${icon ? iconPositionLookup[iconPosition] : ''} ${stateValue} ${sizeValue}">
101
- ${icon ? iconSvg : ''}<span class="sdds-chip-text">${placeholderText}</span>
102
- </div>
103
- `);
104
- };
105
- export const Default = Template.bind({});
106
- Default.args = {};
107
- export const IconRight = Template.bind({});
108
- IconRight.args = {
109
- icon: true,
110
- iconPosition: 'Icon right',
111
- };
112
- export const IconLeft = Template.bind({});
113
- IconLeft.args = {
114
- icon: true,
115
- iconPosition: 'Icon left',
116
- };
117
- export const Active = Template.bind({});
118
- Active.args = {
119
- state: 'Active',
120
- };
121
- export const Small = Template.bind({});
122
- Small.args = {
123
- size: 'Small',
124
- };
@@ -1,182 +0,0 @@
1
- import { formatHtmlPreview } from '../../utils/utils';
2
- export default {
3
- title: 'Components/Data Table/Native',
4
- argTypes: {
5
- tableTitle: {
6
- name: 'Table title',
7
- description: 'Text that appears in table caption area.',
8
- control: {
9
- type: 'text',
10
- },
11
- table: {
12
- defaultValue: {
13
- summary: '',
14
- },
15
- },
16
- },
17
- isCompact: {
18
- name: 'Compact design',
19
- description: 'Enables compact design of the table, rows with less height.',
20
- control: {
21
- type: 'boolean',
22
- },
23
- table: {
24
- defaultValue: {
25
- summary: false,
26
- },
27
- },
28
- },
29
- dividers: {
30
- name: 'Vertical dividers',
31
- description: 'When enabled, table has vertical dividers between columns.',
32
- control: {
33
- type: 'boolean',
34
- },
35
- table: {
36
- defaultValue: {
37
- summary: false,
38
- },
39
- },
40
- },
41
- onWhiteBG: {
42
- name: 'On white background',
43
- description: 'Changes BG color of table element to grey variation for better visibility on white layouts',
44
- control: {
45
- type: 'boolean',
46
- },
47
- table: {
48
- defaultValue: {
49
- summary: false,
50
- },
51
- },
52
- },
53
- responsiveTable: {
54
- name: 'Responsive table',
55
- description: 'Table takes 100% of available width. For column values less then 192px, "No minimum width" has to be enabled too. ',
56
- control: {
57
- type: 'boolean',
58
- },
59
- table: {
60
- defaultValue: {
61
- summary: false,
62
- },
63
- },
64
- },
65
- noMinWidthArg: {
66
- name: 'No minimum width',
67
- 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.',
68
- control: {
69
- type: 'boolean',
70
- },
71
- table: {
72
- defaultValue: {
73
- summary: false,
74
- },
75
- },
76
- },
77
- column1Width: {
78
- name: 'Column 1 width',
79
- 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.',
80
- type: 'string',
81
- table: {
82
- defaultValue: {
83
- summary: '192px',
84
- },
85
- },
86
- if: { arg: 'noMinWidthArg', eq: true },
87
- },
88
- column2Width: {
89
- name: 'Column 2 width',
90
- 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.',
91
- type: 'string',
92
- table: {
93
- defaultValue: {
94
- summary: '192px',
95
- },
96
- },
97
- if: { arg: 'noMinWidthArg', eq: true },
98
- },
99
- column3Width: {
100
- name: 'Column 3 width',
101
- 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.',
102
- type: 'string',
103
- table: {
104
- defaultValue: {
105
- summary: '192px',
106
- },
107
- },
108
- if: { arg: 'noMinWidthArg', eq: true },
109
- },
110
- column4Width: {
111
- name: 'Column 4 width',
112
- 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.',
113
- type: 'string',
114
- table: {
115
- defaultValue: {
116
- summary: '192px',
117
- },
118
- },
119
- if: { arg: 'noMinWidthArg', eq: true },
120
- },
121
- },
122
- args: {
123
- tableTitle: 'Native table',
124
- isCompact: false,
125
- dividers: false,
126
- onWhiteBG: false,
127
- noMinWidthArg: false,
128
- responsiveTable: false,
129
- column1Width: '',
130
- column2Width: '',
131
- column3Width: '',
132
- column4Width: '',
133
- },
134
- };
135
- const Template = (args) => formatHtmlPreview(`
136
- <table class="
137
- sdds-table
138
- ${args.isCompact ? 'sdds-table--compact' : ''}
139
- ${args.dividers ? 'sdds-table--divider' : ''}
140
- ${args.onWhiteBG ? 'sdds-table--on-white-bg' : ''}
141
- ${args.noMinWidthArg ? 'sdds-table--no-min-width' : ''}
142
- ${args.responsiveTable ? 'sdds-table--responsive' : ''}
143
- " >
144
- ${args.tableTitle && `<caption class="sdds-table__title">${args.tableTitle}</caption>`}
145
- <thead class="sdds-table__header">
146
- <tr class="sdds-table__row">
147
- <th class="sdds-table__header-cell" ${args.column1Width ? `style="width: ${args.column1Width};"` : ''}>Header</th>
148
- <th class="sdds-table__header-cell" ${args.column2Width ? `style="width: ${args.column2Width};"` : ''}>Header</th>
149
- <th class="sdds-table__header-cell" ${args.column3Width ? `style="width: ${args.column3Width};"` : ''}>Header</th>
150
- <th class="sdds-table__header-cell" ${args.column4Width ? `style="width: ${args.column4Width};"` : ''}>Header</th>
151
- </tr>
152
- </thead>
153
- <tbody class="sdds-table__body">
154
- <tr class="sdds-table__row">
155
- <td class="sdds-table__body-cell">Text</td>
156
- <td class="sdds-table__body-cell">Text</td>
157
- <td class="sdds-table__body-cell">Text</td>
158
- <td class="sdds-table__body-cell">Text</td>
159
- </tr>
160
- <tr class="sdds-table__row">
161
- <td class="sdds-table__body-cell">Text</td>
162
- <td class="sdds-table__body-cell">Text</td>
163
- <td class="sdds-table__body-cell">Text</td>
164
- <td class="sdds-table__body-cell">Text</td>
165
- </tr>
166
- <tr class="sdds-table__row">
167
- <td class="sdds-table__body-cell">Text</td>
168
- <td class="sdds-table__body-cell">Text</td>
169
- <td class="sdds-table__body-cell">Text</td>
170
- <td class="sdds-table__body-cell">Text</td>
171
- </tr>
172
- <tr class="sdds-table__row">
173
- <td class="sdds-table__body-cell">Text</td>
174
- <td class="sdds-table__body-cell">Text</td>
175
- <td class="sdds-table__body-cell">Text</td>
176
- <td class="sdds-table__body-cell">Text</td>
177
- </tr>
178
- </tbody>
179
- </table>
180
- `);
181
- export const Default = Template.bind({});
182
- Default.args = {};
@@ -1,163 +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
- disablePadding: {
76
- name: 'Disable cell padding',
77
- description: 'By default each cell comes with padding. Disabling padding rule can be useful when a users want to insert another HTML element in cell, eg. input.',
78
- control: {
79
- type: 'boolean',
80
- },
81
- table: {
82
- defaultValue: {
83
- summary: false,
84
- },
85
- },
86
- },
87
- noMinWidth: {
88
- name: 'No column minimum width limitation',
89
- description: 'If columns should be able to shrink below 192px width.',
90
- control: {
91
- type: 'boolean',
92
- },
93
- table: {
94
- defaultValue: {
95
- summary: 'false',
96
- },
97
- },
98
- },
99
- },
100
- args: {
101
- compactDesign: false,
102
- onWhiteBackground: false,
103
- verticalDivider: false,
104
- responsiveDesign: false,
105
- disablePadding: false,
106
- noMinWidth: false,
107
- },
108
- };
109
- const BasicTemplate = (args) => formatHtmlPreview(`
110
- <sdds-table
111
- vertical-dividers="${args.verticalDivider}"
112
- compact-design="${args.compactDesign}"
113
- white-background="${args.onWhiteBackground}"
114
- enable-responsive="${args.responsiveDesign}"
115
- ${args.noMinWidth ? 'no-min-width' : ''}
116
- >
117
- <sdds-table-header>
118
- <sdds-header-cell column-key='truck' column-title='Truck type'></sdds-header-cell>
119
- <sdds-header-cell column-key='driver' column-title='Driver name'></sdds-header-cell>
120
- <sdds-header-cell column-key='country' column-title='Country'></sdds-header-cell>
121
- <sdds-header-cell column-key='mileage' column-title='Mileage' text-align='right'></sdds-header-cell>
122
- </sdds-table-header>
123
- <sdds-table-body>
124
- <sdds-table-body-row>
125
- <sdds-body-cell cell-value="Test value 1" cell-key="truck" disable-padding="${args.disablePadding}"></sdds-body-cell>
126
- <sdds-body-cell cell-value="Test value 2" cell-key="driver" disable-padding="${args.disablePadding}"></sdds-body-cell>
127
- <sdds-body-cell cell-value="Test value 3" cell-key="country" disable-padding="${args.disablePadding}"></sdds-body-cell>
128
- <sdds-body-cell cell-value="Test value 4" cell-key="mileage" disable-padding="${args.disablePadding}"></sdds-body-cell>
129
- </sdds-table-body-row>
130
- <sdds-table-body-row>
131
- <sdds-body-cell cell-value="Test value 5" cell-key="truck" disable-padding="${args.disablePadding}"></sdds-body-cell>
132
- <sdds-body-cell cell-value="Test value 6" cell-key="driver" disable-padding="${args.disablePadding}"></sdds-body-cell>
133
- <sdds-body-cell cell-value="Test value 7" cell-key="country" disable-padding="${args.disablePadding}"></sdds-body-cell>
134
- <sdds-body-cell cell-value="Test value 8" cell-key="mileage" disable-padding="${args.disablePadding}"></sdds-body-cell>
135
- </sdds-table-body-row>
136
- <sdds-table-body-row>
137
- <sdds-body-cell cell-value="Test value 1" cell-key="truck" disable-padding="${args.disablePadding}"></sdds-body-cell>
138
- <sdds-body-cell cell-value="Test value 2" cell-key="driver" disable-padding="${args.disablePadding}"></sdds-body-cell>
139
- <sdds-body-cell cell-value="Test value 3" cell-key="country" disable-padding="${args.disablePadding}"></sdds-body-cell>
140
- <sdds-body-cell cell-value="Test value 4" cell-key="mileage" disable-padding="${args.disablePadding}"></sdds-body-cell>
141
- </sdds-table-body-row>
142
- <sdds-table-body-row>
143
- <sdds-body-cell cell-value="Test value 5" cell-key="truck" disable-padding="${args.disablePadding}"></sdds-body-cell>
144
- <sdds-body-cell cell-value="Test value 6" cell-key="driver" disable-padding="${args.disablePadding}"></sdds-body-cell>
145
- <sdds-body-cell cell-value="Test value 7" cell-key="country" disable-padding="${args.disablePadding}"></sdds-body-cell>
146
- <sdds-body-cell cell-value="Test value 8" cell-key="mileage" disable-padding="${args.disablePadding}"></sdds-body-cell>
147
- </sdds-table-body-row>
148
- <sdds-table-body-row>
149
- <sdds-body-cell cell-value="Test value 1" cell-key="truck" disable-padding="${args.disablePadding}"></sdds-body-cell>
150
- <sdds-body-cell cell-value="Test value 2" cell-key="driver" disable-padding="${args.disablePadding}"></sdds-body-cell>
151
- <sdds-body-cell cell-value="Test value 3" cell-key="country" disable-padding="${args.disablePadding}"></sdds-body-cell>
152
- <sdds-body-cell cell-value="Test value 4" cell-key="mileage" disable-padding="${args.disablePadding}"></sdds-body-cell>
153
- </sdds-table-body-row>
154
- <sdds-table-body-row>
155
- <sdds-body-cell cell-value="Test value 5" cell-key="truck" disable-padding="${args.disablePadding}"></sdds-body-cell>
156
- <sdds-body-cell cell-value="Test value 6" cell-key="driver" disable-padding="${args.disablePadding}"></sdds-body-cell>
157
- <sdds-body-cell cell-value="Test value 7" cell-key="country" disable-padding="${args.disablePadding}"></sdds-body-cell>
158
- <sdds-body-cell cell-value="Test value 8" cell-key="mileage" disable-padding="${args.disablePadding}"></sdds-body-cell>
159
- </sdds-table-body-row>
160
- </sdds-table-body>
161
- </sdds-table>`);
162
- export const Default = BasicTemplate.bind({});
163
- Default.args = {};
@@ -1,129 +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
- batchArea: {
88
- name: 'Batch code',
89
- description: 'Code that user can inject to the toolbar area.',
90
- control: {
91
- type: 'text',
92
- },
93
- defaultValue: {
94
- summary: '',
95
- },
96
- },
97
- },
98
- args: {
99
- compactDesign: false,
100
- onWhiteBackground: false,
101
- verticalDivider: false,
102
- responsiveDesign: false,
103
- batchArea: formatHtmlPreview('<button slot="sdds-table__actionbar" class="sdds-table__actionbar-btn"><sdds-icon class="sdds-table__actionbar-btn-icon" name="settings" size="20px"></sdds-icon> </button><sdds-button slot="sdds-table__actionbar" type="primary" size="sm" text="Download"></sdds-button>'),
104
- noMinWidth: false,
105
- },
106
- };
107
- const BatchActionTemplate = ({ verticalDivider, compactDesign, onWhiteBackground, batchArea, responsiveDesign, noMinWidth, }) => formatHtmlPreview(`
108
- <sdds-table
109
- enable-multiselect
110
- vertical-dividers="${verticalDivider}"
111
- compact-design="${compactDesign}"
112
- white-background="${onWhiteBackground}"
113
- enable-responsive="${responsiveDesign}"
114
- ${noMinWidth ? 'no-min-width' : ''}
115
- >
116
- <sdds-table-toolbar table-title="Batch action">
117
- ${batchArea}
118
- </sdds-table-toolbar>
119
- <sdds-table-header>
120
- <sdds-header-cell column-key='truck' column-title='Truck type'></sdds-header-cell>
121
- <sdds-header-cell column-key='driver' column-title='Driver name'></sdds-header-cell>
122
- <sdds-header-cell column-key='country' column-title='Country'></sdds-header-cell>
123
- <sdds-header-cell column-key='mileage' column-title='Mileage' text-align='right'></sdds-header-cell>
124
- </sdds-table-header>
125
- <sdds-table-body enable-dummy-data>
126
- </sdds-table-body>
127
- </sdds-table>`);
128
- export const BatchAction = BatchActionTemplate.bind({});
129
- BatchAction.args = {};
@@ -1,58 +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
- bodyData: {
28
- name: 'Data',
29
- description: 'An array of objects with keys matching the header cell `column-key` attributes. Can be passed as an array object, or as a stringified array.',
30
- control: {
31
- type: 'array',
32
- },
33
- table: {
34
- defaultValue: {
35
- summary: false,
36
- },
37
- },
38
- },
39
- },
40
- args: {
41
- bodyData: [
42
- { truck: 'L-series', driver: 'Sonya Bruce' },
43
- { truck: 'P-series', driver: 'Guerra Bowman' },
44
- ],
45
- },
46
- };
47
- const DataPropertyTemplate = ({ bodyData }) => formatHtmlPreview(`
48
- <h3>'body-data' property example</h3>
49
- <sdds-table enable-expandable-rows="false">
50
- <sdds-table-header>
51
- <sdds-header-cell column-key='truck' column-title='Truck type'></sdds-header-cell>
52
- <sdds-header-cell column-key='driver' column-title='Driver name'></sdds-header-cell>
53
- </sdds-table-header>
54
- <sdds-table-body body-data='${JSON.stringify(bodyData)}'>
55
- </sdds-table-body>
56
- </sdds-table>`);
57
- export const DataProperty = DataPropertyTemplate.bind({});
58
- DataProperty.args = {};