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

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