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: ` +
+ + +
+
+ +
+
`, + 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,