{{'List item ' + o }}
@@ -29,6 +37,12 @@ export const configurable = () => ({
},
header: {
default: text('Header', 'Card header')
+ },
+ clickable: {
+ default: boolean('Clickable', false)
}
+ },
+ methods: {
+ handleClick: () => alert('Card component was clicked')
}
})
diff --git a/src/stories/SCheckbox.stories.ts b/src/stories/SCheckbox.stories.ts
index 7556b584..2c53d75f 100644
--- a/src/stories/SCheckbox.stories.ts
+++ b/src/stories/SCheckbox.stories.ts
@@ -11,17 +11,25 @@ export default {
}
export const configurable = () => ({
- components: { SCheckbox, SRow },
- template: `
+ components: { SCheckbox },
+ template: `
- `,
+
+ v-model="{{ vModelValue }}", @change="{{ changeValue }}"
+
+
`,
+ data: () => ({
+ vModelValue: true,
+ changeValue: true
+ }),
props: {
disabled: {
default: boolean('Disabled', false)
@@ -35,9 +43,6 @@ export const configurable = () => ({
size: {
default: select('Size', Object.values(CheckboxSize), CheckboxSize.MEDIUM)
}
- },
- methods: {
- hangleChange: (checked: boolean) => console.log(checked ? 'checked!' : 'unchecked!')
}
})
diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts
index f1269566..e484d588 100644
--- a/src/stories/SInput.stories.ts
+++ b/src/stories/SInput.stories.ts
@@ -155,14 +155,21 @@ export const withTextLimit = () => ({
export const textFileInput = () => ({
components: { SInput },
- template: ``,
+ template: `
+
+
+ v-model="{{ vModelValue }}", @change="{{ changeValue }}"
+
+
`,
data: () => ({
- input: ''
+ vModelValue: '',
+ changeValue: ''
}),
props: {
accept: {
diff --git a/src/stories/Table/STable.stories.ts b/src/stories/Table/STable.stories.ts
new file mode 100644
index 00000000..daccf7de
--- /dev/null
+++ b/src/stories/Table/STable.stories.ts
@@ -0,0 +1,161 @@
+import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
+
+import { STable, STableColumn } from '../../components'
+import { TableSize } from '../../components/Table'
+
+export default {
+ component: STable,
+ title: 'Design System/Table',
+ decorators: [withKnobs],
+ excludeStories: /.*Data$/
+}
+
+export const tableData = [
+ {
+ date: '2017-05-03',
+ amount: '1.56',
+ address: 'No. 189, Grove St, Los Angeles'
+ },
+ {
+ date: '2016-05-02',
+ amount: '-99',
+ address: 'No. 190, Grove St, Los Angeles'
+ },
+ {
+ date: '2018-05-04',
+ amount: '0',
+ address: 'No. 191, Grove St, Los Angeles'
+ },
+ {
+ date: '2015-05-01',
+ amount: '55555',
+ address: 'No. 192, Grove St, Los Angeles'
+ }
+]
+
+export const configurable = () => ({
+ components: { STable, STableColumn },
+ template: `
+
+
+
+
+ Hello
+ `,
+ data: () => ({
+ tableData: tableData
+ }),
+ props: {
+ height: {
+ default: text('Height', 'auto')
+ },
+ stripe: {
+ default: boolean('Stripe', false)
+ },
+ border: {
+ default: boolean('Border', false)
+ },
+ showHeader: {
+ default: boolean('Show header', true)
+ },
+ size: {
+ default: select('Size', Object.values(TableSize), TableSize.BIG)
+ },
+ highlightCurrentRow: {
+ default: boolean('Highlight current row', false)
+ }
+ }
+})
+
+export const withBorder = () => ({
+ components: { STable, STableColumn },
+ template: `
+
+
+
+
+ Hello
+ `,
+ data: () => ({
+ tableData: tableData
+ })
+})
+
+export const striped = () => ({
+ components: { STable, STableColumn },
+ template: `
+
+
+
+
+ Hello
+ `,
+ data: () => ({
+ tableData: tableData
+ })
+})
+
+export const withAllExpandedRows = () => ({
+ components: { STable, STableColumn },
+ template: `
+
+
+
+
+ Hello
+ `,
+ data: () => ({
+ tableData: tableData
+ })
+})
+
+export const withTotalRow = () => ({
+ components: { STable, STableColumn },
+ template: `
+
+
+
+
+ Hello
+ `,
+ data: () => ({
+ tableData: tableData
+ })
+})
+
+export const withDefaultSort = () => ({
+ components: { STable, STableColumn },
+ template: `
+
+
+
+
+ Hello
+ `,
+ data: () => ({
+ tableData: tableData
+ })
+})
diff --git a/src/stories/Table/STableColumn.stories.ts b/src/stories/Table/STableColumn.stories.ts
new file mode 100644
index 00000000..1ec6025b
--- /dev/null
+++ b/src/stories/Table/STableColumn.stories.ts
@@ -0,0 +1,103 @@
+import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
+
+import { STable, STableColumn } from '../../components'
+import { ColumnAlignment } from '../../components/Table'
+
+import { tableData } from './STable.stories'
+
+export default {
+ component: STableColumn,
+ title: 'Design System/Table/Table Column',
+ decorators: [withKnobs],
+ excludeStories: /.*Data$/
+}
+
+export const configurable = () => ({
+ components: { STable, STableColumn },
+ template: `
+
+
+
+
+ Hello
+ `,
+ data: () => ({
+ tableData: tableData
+ }),
+ props: {
+ label: {
+ default: text('Label', 'Date')
+ },
+ showOverflowTooltip: {
+ default: boolean('Show overflow tooltip', true)
+ },
+ align: {
+ default: select('Align', Object.values(ColumnAlignment), ColumnAlignment.LEFT)
+ },
+ headerAlign: {
+ default: select('Header align', Object.values(ColumnAlignment), ColumnAlignment.LEFT)
+ }
+ }
+})
+
+export const withFilters = () => ({
+ components: { STable, STableColumn },
+ template: `
+
+
+
+
+ Hello
+ `,
+ data: () => ({
+ tableData: tableData,
+ tableFilters: [
+ { text: '< 2016-01-01', value: 1 },
+ { text: 'between 2016-01-01 and 2016-05-01', value: 2 },
+ { text: 'between 2016-05-01 and 2018-05-05', value: 3 },
+ { text: '> 2019-01-01', value: 4 }
+ ],
+ filterDate: (value: number, row: any) => {
+ const date = new Date(row.date).getTime()
+ switch (value) {
+ case 1:
+ return date < new Date('2016-01-01').getTime()
+ case 2:
+ return date > new Date('2016-01-01').getTime() && date < new Date('2016-05-01').getTime()
+ case 3:
+ return date > new Date('2016-05-01').getTime() && date < new Date('2018-05-05').getTime()
+ case 4:
+ return date > new Date('2019-01-01').getTime()
+ }
+ return true
+ }
+ }),
+ props: {
+ filterMultiple: {
+ default: boolean('Filter multiple', false)
+ }
+ }
+})
diff --git a/src/styles/icons.scss b/src/styles/icons.scss
index 40048b78..685667b9 100644
--- a/src/styles/icons.scss
+++ b/src/styles/icons.scss
@@ -52,6 +52,16 @@
height: 20px;
}
+ &more-small {
+ position: absolute;
+ background-image: url('~@/assets/icons/more-horizontal.svg');
+ background-size: contain;
+ width: 12px;
+ height: 12px;
+ top: -6px;
+ left: -6px;
+ }
+
&back-small {
position: absolute;
background-image: url('~@/assets/icons/arrow-left.svg');
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 581d8ea1..d1cc7572 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -7,6 +7,7 @@ $color-main-base: #FFF9FA;
// Neutral colors
$color-neutral-primary: #53565A;
$color-neutral-secondary: #75787B;
+$color-neutral-tertiary: #909296;
$color-neutral-inactive: #C8C9C7;
$color-neutral-border: #D9D9D6;
$color-neutral-hover: #F0F0F0;
diff --git a/src/types/components.ts b/src/types/components.ts
index 5e18f4a3..ed91efee 100644
--- a/src/types/components.ts
+++ b/src/types/components.ts
@@ -1,6 +1,8 @@
export enum Components {
SApp = 'SApp',
SAside = 'SAside',
+ SBreadcrumb = 'SBreadcrumb',
+ SBreadcrumbItem = 'SBreadcrumbItem',
SButton = 'SButton',
SButtonGroup = 'SButtonGroup',
SCard = 'SCard',
@@ -26,5 +28,7 @@ export enum Components {
SScrollSectionItem = 'SScrollSectionItem',
SScrollSections = 'SScrollSections',
SSubmenu = 'SSubmenu',
+ STable = 'STable',
+ STableColumn = 'STableColumn',
STooltip = 'STooltip'
}