Release 1.0.14

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

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: `<s-design-system-provider :value="designSystem" class="s-flex" style="flex-direction: column;">
+               <div class="s-flex" style="align-items: center; justify-content: flex-end; margin-right: 10px;">
+                 <s-checkbox
+                   style="margin-right: 10px;"
+                   label="NEUMORPHISM"
+                   :value="!!designSystem"
+                   @change="(value) => handleDesignSystemChange(designSystem)"
+                 />
+                 <s-button
+                   type="action"
+                   rounded
+                   :icon="theme === 'light' ? 'various-brightness-low-24' : 'various-moon-24'"
+                   @click="handleThemeChange"
+                 />
+               </div>
+               <div class="s-flex" style="padding: 20px;">
+                 <story />
+               </div>
+             </s-design-system-provider>`,
+  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)
+    }
+  }
+}))

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/"

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"
   >
     <slot slot="content" name="content"></slot>
@@ -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)
+  }
 }
 </script>

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]
 }
 

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]
 }
 

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]
 }
 

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]
 }
 

src/stories/SFloatInput.stories.ts → 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]
 }
 

src/stories/SInput.stories.ts → 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$/
 }

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$/
 }

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]
 }
 

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]
 }
 

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$/
 }

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$/
 }

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"
                >
                  <s-button style="margin: 40px">Custom tooltip</s-button>
@@ -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: {

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]
 }
 

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,