@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.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/tegel.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/tegel.js +1 -1
- package/package.json +5 -5
- package/readme.md +135 -0
- package/dist/collection/components/accordion/accordion.stories.js +0 -91
- package/dist/collection/components/badge/badge.stories.js +0 -101
- package/dist/collection/components/banner/banner.stories.js +0 -93
- package/dist/collection/components/block/block.stories.js +0 -46
- package/dist/collection/components/breadcrumb/breadcrumb.stories.js +0 -26
- package/dist/collection/components/button/button-native.stories.js +0 -183
- package/dist/collection/components/button/button-webcomponent.stories.js +0 -182
- package/dist/collection/components/card/card.stories.js +0 -181
- package/dist/collection/components/checkbox/checkbox.stories.js +0 -54
- package/dist/collection/components/chips/chips.stories.js +0 -124
- package/dist/collection/components/data-table/native-table.stories.js +0 -182
- package/dist/collection/components/data-table/table-component-basic.stories.js +0 -163
- package/dist/collection/components/data-table/table-component-batch-actions.stories.js +0 -129
- package/dist/collection/components/data-table/table-component-bodydata.stories.js +0 -58
- package/dist/collection/components/data-table/table-component-custom-width.stories.js +0 -198
- package/dist/collection/components/data-table/table-component-event-listeners.stories.js +0 -153
- package/dist/collection/components/data-table/table-component-expandable-rows.stories.js +0 -137
- package/dist/collection/components/data-table/table-component-filtering.stories.js +0 -139
- package/dist/collection/components/data-table/table-component-multiselect.stories.js +0 -160
- package/dist/collection/components/data-table/table-component-pagination.stories.js +0 -129
- package/dist/collection/components/data-table/table-component-sorting.stories.js +0 -107
- package/dist/collection/components/datetime/datetime.stories.js +0 -149
- package/dist/collection/components/divider/divider.stories.js +0 -116
- package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js +0 -130
- package/dist/collection/components/dropdown/dropdown-native.stories.js +0 -90
- package/dist/collection/components/dropdown/dropdown-wc-default.stories.js +0 -151
- package/dist/collection/components/dropdown/dropdown-wc-multiselect.stories.js +0 -146
- package/dist/collection/components/footer/footer.stories.js +0 -100
- package/dist/collection/components/header/header-all.stories.js +0 -217
- package/dist/collection/components/header/header-default.stories.js +0 -47
- package/dist/collection/components/header/header-inline.stories.js +0 -113
- package/dist/collection/components/header/header-search.stories.js +0 -263
- package/dist/collection/components/header/header-toolbar.stories.js +0 -204
- package/dist/collection/components/icon/icon-font.stories.js +0 -57
- package/dist/collection/components/icon/icon-web-component.stories.js +0 -51
- package/dist/collection/components/link/link.stories.js +0 -45
- package/dist/collection/components/message/message.stories.js +0 -117
- package/dist/collection/components/modal/modal-native.stories.js +0 -121
- package/dist/collection/components/modal/modal-webcomponent.stories.js +0 -78
- package/dist/collection/components/popover-canvas/popover-canvas.stories.js +0 -87
- package/dist/collection/components/popover-menu/popover-menu-icons.stories.js +0 -132
- package/dist/collection/components/popover-menu/popover-menu.stories.js +0 -109
- package/dist/collection/components/radio-button/radio-button.stories.js +0 -68
- package/dist/collection/components/side-menu/side-menu.stories.js +0 -182
- package/dist/collection/components/slider/slider.stories.js +0 -251
- package/dist/collection/components/spinner/spinner.stories.js +0 -59
- package/dist/collection/components/stepper/stepper.stories.js +0 -139
- package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.stories.js +0 -65
- package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js +0 -43
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js +0 -32
- package/dist/collection/components/textarea/textarea.stories.js +0 -149
- package/dist/collection/components/textfield/textfield.stories.js +0 -222
- package/dist/collection/components/toast/toast.stories.js +0 -119
- package/dist/collection/components/toggle/toggle.stories.js +0 -62
- package/dist/collection/components/tooltip/tooltip.stories.js +0 -113
- package/dist/collection/components/utility/colour/background-color.stories.js +0 -96
- package/dist/collection/components/utility/colour/text-color.stories.js +0 -94
- package/dist/collection/foundations-stories/colour/colour-brand.stories.js +0 -38
- package/dist/collection/foundations-stories/colour/colour-scales.stories.js +0 -71
- package/dist/collection/foundations-stories/colour/colour-semantic.stories.js +0 -40
- package/dist/collection/foundations-stories/grid/grid.stories.js +0 -386
- package/dist/collection/foundations-stories/spacing/spacing-element.stories.js +0 -100
- package/dist/collection/foundations-stories/spacing/spacing-layout.stories.js +0 -94
- package/dist/collection/foundations-stories/typography/typography-body.stories.js +0 -16
- package/dist/collection/foundations-stories/typography/typography-detail.stories.js +0 -17
- package/dist/collection/foundations-stories/typography/typography-headline.stories.js +0 -39
- package/dist/collection/foundations-stories/typography/typography-paragraph.stories.js +0 -12
- package/dist/types/components/accordion/accordion.stories.d.ts +0 -77
- package/dist/types/components/badge/badge.stories.d.ts +0 -66
- package/dist/types/components/banner/banner.stories.d.ts +0 -68
- package/dist/types/components/block/block.stories.d.ts +0 -31
- package/dist/types/components/breadcrumb/breadcrumb.stories.d.ts +0 -12
- package/dist/types/components/button/button-native.stories.d.ts +0 -144
- package/dist/types/components/button/button-webcomponent.stories.d.ts +0 -143
- package/dist/types/components/card/card.stories.d.ts +0 -114
- package/dist/types/components/checkbox/checkbox.stories.d.ts +0 -39
- package/dist/types/components/chips/chips.stories.d.ts +0 -81
- package/dist/types/components/data-table/native-table.stories.d.ts +0 -147
- package/dist/types/components/data-table/table-component-basic.stories.d.ts +0 -100
- package/dist/types/components/data-table/table-component-batch-actions.stories.d.ts +0 -98
- package/dist/types/components/data-table/table-component-bodydata.stories.d.ts +0 -38
- package/dist/types/components/data-table/table-component-custom-width.stories.d.ts +0 -147
- package/dist/types/components/data-table/table-component-event-listeners.stories.d.ts +0 -87
- package/dist/types/components/data-table/table-component-expandable-rows.stories.d.ts +0 -87
- package/dist/types/components/data-table/table-component-filtering.stories.d.ts +0 -100
- package/dist/types/components/data-table/table-component-multiselect.stories.d.ts +0 -100
- package/dist/types/components/data-table/table-component-pagination.stories.d.ts +0 -100
- package/dist/types/components/data-table/table-component-sorting.stories.d.ts +0 -79
- package/dist/types/components/datetime/datetime.stories.d.ts +0 -80
- package/dist/types/components/divider/divider.stories.d.ts +0 -72
- package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.stories.d.ts +0 -73
- package/dist/types/components/dropdown/dropdown-native.stories.d.ts +0 -57
- package/dist/types/components/dropdown/dropdown-wc-default.stories.d.ts +0 -115
- package/dist/types/components/dropdown/dropdown-wc-multiselect.stories.d.ts +0 -115
- package/dist/types/components/footer/footer.stories.d.ts +0 -23
- package/dist/types/components/header/header-all.stories.d.ts +0 -29
- package/dist/types/components/header/header-default.stories.d.ts +0 -29
- package/dist/types/components/header/header-inline.stories.d.ts +0 -29
- package/dist/types/components/header/header-search.stories.d.ts +0 -29
- package/dist/types/components/header/header-toolbar.stories.d.ts +0 -29
- package/dist/types/components/icon/icon-font.stories.d.ts +0 -38
- package/dist/types/components/icon/icon-web-component.stories.d.ts +0 -38
- package/dist/types/components/link/link.stories.d.ts +0 -33
- package/dist/types/components/message/message.stories.d.ts +0 -67
- package/dist/types/components/modal/modal-native.stories.d.ts +0 -51
- package/dist/types/components/modal/modal-webcomponent.stories.d.ts +0 -44
- package/dist/types/components/popover-canvas/popover-canvas.stories.d.ts +0 -25
- package/dist/types/components/popover-menu/popover-menu-icons.stories.d.ts +0 -27
- package/dist/types/components/popover-menu/popover-menu.stories.d.ts +0 -27
- package/dist/types/components/radio-button/radio-button.stories.d.ts +0 -41
- package/dist/types/components/side-menu/side-menu.stories.d.ts +0 -42
- package/dist/types/components/slider/slider.stories.d.ts +0 -156
- package/dist/types/components/spinner/spinner.stories.d.ts +0 -37
- package/dist/types/components/stepper/stepper.stories.d.ts +0 -56
- package/dist/types/components/tabs/inline-tabs-default/inline-tabs.stories.d.ts +0 -41
- package/dist/types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.d.ts +0 -25
- package/dist/types/components/tabs/navigation-tabs/navigation-tabs.stories.d.ts +0 -13
- package/dist/types/components/textarea/textarea.stories.d.ts +0 -111
- package/dist/types/components/textfield/textfield.stories.d.ts +0 -176
- package/dist/types/components/toast/toast.stories.d.ts +0 -58
- package/dist/types/components/toggle/toggle.stories.d.ts +0 -42
- package/dist/types/components/tooltip/tooltip.stories.d.ts +0 -54
- package/dist/types/components/utility/colour/background-color.stories.d.ts +0 -58
- package/dist/types/components/utility/colour/text-color.stories.d.ts +0 -58
- package/dist/types/foundations-stories/colour/colour-brand.stories.d.ts +0 -13
- package/dist/types/foundations-stories/colour/colour-scales.stories.d.ts +0 -13
- package/dist/types/foundations-stories/colour/colour-semantic.stories.d.ts +0 -13
- package/dist/types/foundations-stories/grid/grid.stories.d.ts +0 -35
- package/dist/types/foundations-stories/spacing/spacing-element.stories.d.ts +0 -8
- package/dist/types/foundations-stories/spacing/spacing-layout.stories.d.ts +0 -8
- package/dist/types/foundations-stories/typography/typography-body.stories.d.ts +0 -8
- package/dist/types/foundations-stories/typography/typography-detail.stories.d.ts +0 -8
- package/dist/types/foundations-stories/typography/typography-headline.stories.d.ts +0 -21
- 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 = {};
|