diff --git a/config/storybook/manager.js b/config/storybook/manager.js
index e933e5b9..77c0f089 100644
--- a/config/storybook/manager.js
+++ b/config/storybook/manager.js
@@ -1,6 +1,8 @@
import { addons } from '@storybook/addons'
+
import theme from './theme'
addons.setConfig({
- theme: theme
+ theme
})
+// TODO: Add switch of this config with DARK/LIGHT
diff --git a/config/storybook/preview.js b/config/storybook/preview.js
deleted file mode 100644
index 472e95de..00000000
--- a/config/storybook/preview.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import Vue from 'vue'
-import { addParameters, addDecorator } from '@storybook/vue'
-import { withA11y } from '@storybook/addon-a11y'
-import { DocsPage } from '@storybook/addon-docs/blocks'
-import ElColorPicker from 'element-ui/lib/color-picker'
-
-import '../../src/styles/index.scss'
-import './index.scss'
-import './neu-theme-variables.scss'
-import mainStore from '../../src/store'
-import { setTheme } from '../../src/utils'
-import { ElementUIPlugin } from '../../src/plugins'
-import { SDesignSystemProvider } from '../../src/components'
-
-Vue.use(ElementUIPlugin)
-Vue.use(ElColorPicker)
-setTheme()
-document.documentElement.style.setProperty('color', 'var(--s-color-base-content-primary)')
-document.documentElement.style.setProperty('background-color', 'var(--s-color-utility-body)')
-
-addParameters({
- options: {
- showRoots: true
- },
- docs: { page: DocsPage },
- dependencies: {
- // display only dependencies/dependents that have a story in storybook
- // by default this is false
- withStoriesOnly: true,
-
- // completely hide a dependency/dependents block if it has no elements
- // by default this is false
- hideEmpty: true
- }
-})
-
-addDecorator(withA11y)
-addDecorator(() => ({
- components: { SDesignSystemProvider },
- template: `
-
-
-
-
`,
- store: mainStore,
- computed: {
- designSystem: () => mainStore?.getters?.libraryDesignSystem
- }
-}))
diff --git a/config/storybook/preview.ts b/config/storybook/preview.ts
new file mode 100644
index 00000000..93836b3e
--- /dev/null
+++ b/config/storybook/preview.ts
@@ -0,0 +1,78 @@
+import Vue from 'vue'
+import { addParameters, addDecorator } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+import { DocsPage } from '@storybook/addon-docs/blocks'
+import ElColorPicker from 'element-ui/lib/color-picker'
+
+import '../../src/styles/index.scss'
+import './index.scss'
+import './neu-theme-variables.scss'
+
+import Theme from '../../src/types/Theme'
+import DesignSystem from '../../src/types/DesignSystem'
+import mainStore from '../../src/store'
+import { setTheme, switchTheme, setDesignSystem } from '../../src/utils'
+import { ElementUIPlugin } from '../../src/plugins'
+import { SDesignSystemProvider, SButton, SCheckbox } from '../../src/components'
+
+Vue.use(ElementUIPlugin)
+Vue.use(ElColorPicker)
+setTheme()
+document.documentElement.style.setProperty('color', 'var(--s-color-base-content-primary)')
+document.documentElement.style.setProperty('background-color', 'var(--s-color-utility-body)')
+
+addParameters({
+ options: {
+ showRoots: true
+ },
+ docs: { page: DocsPage },
+ dependencies: {
+ // display only dependencies/dependents that have a story in storybook
+ // by default this is false
+ withStoriesOnly: true,
+
+ // completely hide a dependency/dependents block if it has no elements
+ // by default this is false
+ hideEmpty: true
+ }
+})
+
+addDecorator(withA11y)
+const neuLabelCode = '%F0%9F%9F%A3'
+addDecorator(() => ({
+ components: { SDesignSystemProvider, SButton, SCheckbox },
+ template: `
+
+ handleDesignSystemChange(designSystem)"
+ />
+
+
+
+
+
+ `,
+ store: mainStore,
+ computed: {
+ // hasNeumorphicMode: () => window.location.href.includes(neuLabelCode) || window.location.href.includes('🟣'), // Set v-if="hasNeumorphicMode" if needed
+ theme: () => mainStore?.getters?.libraryTheme as Theme,
+ designSystem: () => mainStore?.getters?.libraryDesignSystem as DesignSystem
+ },
+ methods: {
+ handleThemeChange: () => {
+ switchTheme()
+ },
+ handleDesignSystemChange: (designSystem: DesignSystem) => {
+ const newDesignSystem = designSystem === DesignSystem.DEFAULT ? DesignSystem.NEUMORPHIC : DesignSystem.DEFAULT
+ setDesignSystem(newDesignSystem)
+ }
+ }
+}))
diff --git a/package.json b/package.json
index c5fcac81..46605093 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@soramitsu/soramitsu-js-ui",
- "version": "1.0.13",
+ "version": "1.0.14",
"private": false,
"publishConfig": {
"registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
diff --git a/src/components/Tooltip/STooltip.vue b/src/components/Tooltip/STooltip.vue
index 78216257..11fea68e 100644
--- a/src/components/Tooltip/STooltip.vue
+++ b/src/components/Tooltip/STooltip.vue
@@ -13,7 +13,7 @@
:open-delay="openDelay"
:popper-class="computedPopperClass"
:manual="manual"
- :hide-after="closeDelay"
+ :hide-after="hideAfter"
:tabindex="tabindex"
>
@@ -105,6 +105,12 @@ export default class STooltip extends Mixins(BorderRadiusMixin, DesignSystemInje
* `0` by default
*/
@Prop({ default: 0, type: Number }) readonly closeDelay!: number
+ /**
+ * Timeout in milliseconds to hide tooltip after appearing.
+ *
+ * `0` by default
+ */
+ @Prop({ default: 0, type: Number }) readonly hideAfter!: number
/**
* Tabindex of the tooltip.
*
@@ -142,12 +148,13 @@ export default class STooltip extends Mixins(BorderRadiusMixin, DesignSystemInje
this.$emit('change', value)
}
+ @Watch('closeDelay')
+ private handleChangeCloseDelay (value: number): void {
+ this.updateCloseDelay(value)
+ }
+
mounted (): void {
- const tooltip = this.tooltip
- if (!tooltip) {
- return
- }
- tooltip.debounceClose = debounce(200, tooltip.handleClosePopper)
+ this.updateCloseDelay(this.closeDelay)
}
get computedTheme (): string {
@@ -160,5 +167,13 @@ export default class STooltip extends Mixins(BorderRadiusMixin, DesignSystemInje
}
return this.theme
}
+
+ updateCloseDelay (value: number): void {
+ const tooltip = this.tooltip
+ if (!tooltip) {
+ return
+ }
+ tooltip.debounceClose = debounce(value, tooltip.handleClosePopper)
+ }
}
diff --git a/src/stories/Collapse/SCollapse.stories.ts b/src/stories/Collapse/SCollapse.stories.ts
index 9e76a169..ad009d36 100644
--- a/src/stories/Collapse/SCollapse.stories.ts
+++ b/src/stories/Collapse/SCollapse.stories.ts
@@ -5,7 +5,7 @@ import { BorderTypes } from '../../components/Collapse'
export default {
component: SCollapse,
- title: 'Design System/Components/Collapse',
+ title: 'Design System/Components/Collapse 🟣',
decorators: [withKnobs]
}
diff --git a/src/stories/Collapse/SCollapseItem.stories.ts b/src/stories/Collapse/SCollapseItem.stories.ts
index 811cf42a..cfa57ea0 100644
--- a/src/stories/Collapse/SCollapseItem.stories.ts
+++ b/src/stories/Collapse/SCollapseItem.stories.ts
@@ -4,7 +4,7 @@ import { SCollapse, SCollapseItem } from '../../components'
export default {
component: SCollapseItem,
- title: 'Design System/Components/Collapse/Collapse Item',
+ title: 'Design System/Components/Collapse 🟣/Collapse Item',
decorators: [withKnobs]
}
diff --git a/src/stories/Form/SForm.stories.ts b/src/stories/Form/SForm.stories.ts
index ae01ad21..1224060f 100644
--- a/src/stories/Form/SForm.stories.ts
+++ b/src/stories/Form/SForm.stories.ts
@@ -5,7 +5,7 @@ import { LabelPosition } from '../../components/Form'
export default {
component: SForm,
- title: 'Design System/Components/Form',
+ title: 'Design System/Components/Form 🟣',
decorators: [withKnobs]
}
diff --git a/src/stories/Form/SFormItem.stories.ts b/src/stories/Form/SFormItem.stories.ts
index 9f258560..58fc99c7 100644
--- a/src/stories/Form/SFormItem.stories.ts
+++ b/src/stories/Form/SFormItem.stories.ts
@@ -4,7 +4,7 @@ import { SButton, SForm, SFormItem, SInput } from '../../components'
export default {
component: SFormItem,
- title: 'Design System/Components/Form/Form Item',
+ title: 'Design System/Components/Form 🟣/Form Item',
decorators: [withKnobs]
}
diff --git a/src/stories/SFloatInput.stories.ts b/src/stories/Input/SFloatInput.stories.ts
similarity index 93%
rename from src/stories/SFloatInput.stories.ts
rename to src/stories/Input/SFloatInput.stories.ts
index 734226a9..01f4d148 100644
--- a/src/stories/SFloatInput.stories.ts
+++ b/src/stories/Input/SFloatInput.stories.ts
@@ -1,10 +1,10 @@
import { number, text, boolean, object, withKnobs } from '@storybook/addon-knobs'
-import { SFloatInput, SRow } from '../components'
+import { SFloatInput, SRow } from '../../components'
export default {
component: SFloatInput,
- title: 'Design System/Components/Input/Float',
+ title: 'Design System/Components/Input 🟣/Float',
decorators: [withKnobs]
}
diff --git a/src/stories/SInput.stories.ts b/src/stories/Input/SInput.stories.ts
similarity index 96%
rename from src/stories/SInput.stories.ts
rename to src/stories/Input/SInput.stories.ts
index 9a83e747..f809a2dc 100644
--- a/src/stories/SInput.stories.ts
+++ b/src/stories/Input/SInput.stories.ts
@@ -1,12 +1,12 @@
import { text, boolean, withKnobs, number, select } from '@storybook/addon-knobs'
-import { SInput, SRow, SCol } from '../components'
-import { InputType, InputSize } from '../components/Input'
-import { BorderRadius } from '../types'
+import { SInput, SRow, SCol } from '../../components'
+import { InputType, InputSize } from '../../components/Input'
+import { BorderRadius } from '../../types'
export default {
component: SInput,
- title: 'Design System/Components/Input',
+ title: 'Design System/Components/Input 🟣',
decorators: [withKnobs],
excludeStories: /.*Data$/
}
diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts
index b804b5a8..43af470d 100644
--- a/src/stories/SButton.stories.ts
+++ b/src/stories/SButton.stories.ts
@@ -6,7 +6,7 @@ import { Size, BorderRadius } from '../types'
export default {
component: SButton,
- title: 'Design System/Components/Button',
+ title: 'Design System/Components/Button 🟣',
decorators: [withKnobs],
excludeStories: /.*Data$/
}
diff --git a/src/stories/SCard.stories.ts b/src/stories/SCard.stories.ts
index b959eb97..9c0ebde5 100644
--- a/src/stories/SCard.stories.ts
+++ b/src/stories/SCard.stories.ts
@@ -6,7 +6,7 @@ import { BorderRadius, Status, Size } from '../types'
export default {
component: SCard,
- title: 'Design System/Components/Card',
+ title: 'Design System/Components/Card 🟣',
decorators: [withKnobs]
}
diff --git a/src/stories/SDialog.stories.ts b/src/stories/SDialog.stories.ts
index 2f5456dd..ddb8d921 100644
--- a/src/stories/SDialog.stories.ts
+++ b/src/stories/SDialog.stories.ts
@@ -5,7 +5,7 @@ import { BorderRadius } from '../types'
export default {
component: SDialog,
- title: 'Design System/Components/Dialog',
+ title: 'Design System/Components/Dialog 🟣',
decorators: [withKnobs]
}
diff --git a/src/stories/SRadio.stories.ts b/src/stories/SRadio.stories.ts
index 81173eca..7e928d66 100644
--- a/src/stories/SRadio.stories.ts
+++ b/src/stories/SRadio.stories.ts
@@ -5,7 +5,7 @@ import { Size } from '../types'
export default {
component: SRadio,
- title: 'Design System/Components/Radio',
+ title: 'Design System/Components/Radio 🟣',
decorators: [withKnobs],
excludeStories: /.*Data$/
}
diff --git a/src/stories/SSwitch.stories.ts b/src/stories/SSwitch.stories.ts
index b2d36418..39632d6a 100644
--- a/src/stories/SSwitch.stories.ts
+++ b/src/stories/SSwitch.stories.ts
@@ -1,10 +1,10 @@
-import { text, number, boolean, select, withKnobs } from '@storybook/addon-knobs'
+import { text, number, boolean, withKnobs } from '@storybook/addon-knobs'
import { SSwitch } from '../components'
export default {
component: SSwitch,
- title: 'Design System/Components/Switch',
+ title: 'Design System/Components/Switch 🟣',
decorators: [withKnobs],
excludeStories: /.*Data$/
}
diff --git a/src/stories/STooltip.stories.ts b/src/stories/STooltip.stories.ts
index f88fef5e..257cd16d 100644
--- a/src/stories/STooltip.stories.ts
+++ b/src/stories/STooltip.stories.ts
@@ -6,7 +6,7 @@ import { BorderRadius } from '../types'
export default {
component: STooltip,
- title: 'Design System/Components/Tooltip',
+ title: 'Design System/Components/Tooltip 🟣',
decorators: [withKnobs],
excludeStories: /.*Data$/
}
@@ -21,7 +21,9 @@ export const configurable = () => ({
:disabled="disabled"
:border-radius="borderRadius"
:offset="offset"
- :openDelay="openDelay"
+ :open-delay="openDelay"
+ :close-delay="closeDelay"
+ :hide-after="hideAfter"
@change="handleChange"
>
Custom tooltip
@@ -48,6 +50,12 @@ export const configurable = () => ({
},
openDelay: {
default: number('Open delay', 0)
+ },
+ closeDelay: {
+ default: number('Close delay', 0)
+ },
+ hideAfter: {
+ default: number('Hide after', 0)
}
},
methods: {
diff --git a/src/stories/Tab/STabs.stories.ts b/src/stories/Tab/STabs.stories.ts
index c13f9c26..e5de49c8 100644
--- a/src/stories/Tab/STabs.stories.ts
+++ b/src/stories/Tab/STabs.stories.ts
@@ -6,7 +6,7 @@ import { BorderRadius } from '../../types'
export default {
component: STabs,
- title: 'Design System/Components/Tabs',
+ title: 'Design System/Components/Tabs 🟣',
decorators: [withKnobs]
}
diff --git a/src/styles/table.scss b/src/styles/table.scss
index 2bec5150..9c14d1c6 100644
--- a/src/styles/table.scss
+++ b/src/styles/table.scss
@@ -39,6 +39,11 @@
.el-table thead {
color: var(--s-color-base-content-tertiary);
}
+.el-table__empty-block {
+ .el-table__empty-text {
+ color: var(--s-color-base-content-tertiary);
+ }
+}
.el-table--group,
.el-table--border,
.el-table th.is-leaf,