Release 1.0.4

README.md

@@ -5,40 +5,9 @@
 yarn install
 ```
 
-## Font variables setup
-Required!: Add scss font variables to your project
-
-```
-$s-font-family-default-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/Sora-VariableFont_wght.ttf' !default;
-$s-font-family-mono-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/JetBrainsMono-Regular.woff' !default;
-$s-font-family-icons-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/soramitsu-icons-1.0.0.ttf' !default;
-```
-
 ## Usage library in project
-### 1.Install all of library components:
-```
-import Vue from 'vue
-import SoramitsuElements from '@soramitsu/soramitsu-js-ui'
 
-const options = {
-  store // if u want to merge ui lib modules
-}
-
-Vue.use(SoramitsuElements, options)
-```
-### 2.Install only necessary components (to reduce vendors bundle size)
-```
-import Vue from 'vue
-import ElementUIPlugin from '@soramitsu/soramitsu-js-ui/src/plugins/elementUI'
-import SoramitsuUIStorePlugin from '@soramitsu/soramitsu-js-ui/src/plugins/soramitsuUIStore'
-import SButton from '@soramitsu/soramitsu-js-ui/src/components/Button/SButton'
-import SButton from '@soramitsu/soramitsu-js-ui/src/components/Input/SInput'
-
-Vue.use(ElementUIPlugin) // required
-Vue.use(SoramitsuUIStorePlugin, store) // optional
-Vue.use(SButton)
-Vue.use(SInput)
-```
+The full guide about usage can be found [here](./src/stories/Intro/Intro.stories.mdx)
 
 ### Compiles and hot-reloads storybook with components for development
 ```

build/rollup.config.js

@@ -21,12 +21,17 @@ export default {
     'src/types/DesignSystem.ts',
     'src/types/Locale.ts',
     'src/types/Theme.ts',
+    'src/types/components.ts',
+    'src/types/index.ts',
     'src/locale/index.ts',
     'src/plugins/*.ts',
     'src/store/index.ts',
     'src/utils/*.ts',
     'src/directives/index.ts',
-    'src/components/*/**/index.ts'
+    'src/components/*/**/index.ts',
+    'src/components/*/**/consts.ts',
+    'src/components/DesignSystem/DesignSystemInject.ts',
+    'src/mixins/*.ts'
   ],
   output: {
     format: 'esm',
@@ -74,20 +79,13 @@ export default {
     }),
     scss(),
     resolve(),
-    terser(),
+    /* eslint-disable @typescript-eslint/camelcase */
+    terser({ keep_classnames: true }),
     del({
       targets: [
-        'lib/styles/index.d.ts',
-        'bundle.css'
-        // TODO: find a way how to remove this dependencies
-        // 'lib/BorderRadiusMixin-**.js',
-        // 'lib/SizeMixin-**.js',
-        // 'lib/DesignSystem-**.js',
-        // 'lib/DesignSystemInject-**.js',
+        // TODO: find a way how to remove this dependency below
         // 'lib/normalize-component-**.js',
-        // 'lib/components-**.js',
-        // 'lib/consts-**.js',
-        // 'lib/index-**.js'
+        'bundle.css'
       ],
       hook: 'writeBundle'
     })

config/storybook/index.scss

@@ -0,0 +1,3 @@
+.sbdocs.sbdocs-preview div[id^='story--'] > * {
+  height: auto !important;
+}

config/storybook/preview.js

@@ -5,6 +5,7 @@ import { DocsPage } from '@storybook/addon-docs/blocks'
 import ElColorPicker from 'element-ui/lib/color-picker'
 
 import '../../src/styles/index.scss'
+import './index.scss'
 import mainStore from '../../src/store'
 import { ElementUIPlugin } from '../../src/plugins'
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"

src/components/Breadcrumb/SBreadcrumb/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SBreadcrumb from './SBreadcrumb.vue'
 
 const SBreadcrumb = _SBreadcrumb as SFCWithInstall<typeof _SBreadcrumb>
 
-SBreadcrumb.install = function (vue: VueConstructor) {
-  vue.component(Components.SBreadcrumb, SBreadcrumb)
-}
+SBreadcrumb.install = install(Components.SBreadcrumb, SBreadcrumb)
 
 export { SBreadcrumb }
 export default SBreadcrumb

src/components/Breadcrumb/SBreadcrumbItem/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SBreadcrumbItem from './SBreadcrumbItem.vue'
 
 const SBreadcrumbItem = _SBreadcrumbItem as SFCWithInstall<typeof _SBreadcrumbItem>
 
-SBreadcrumbItem.install = function (vue: VueConstructor) {
-  vue.component(Components.SBreadcrumbItem, SBreadcrumbItem)
-}
+SBreadcrumbItem.install = install(Components.SBreadcrumbItem, SBreadcrumbItem)
 
 export { SBreadcrumbItem }
 export default SBreadcrumbItem

src/components/Button/SButton/SButton.vue

@@ -52,6 +52,12 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design
    * By default it's set to `false`
    */
   @Prop({ default: false, type: Boolean }) readonly rounded!: boolean
+  /**
+   * Primary property for `type="action"` buttons.
+   *
+   * By default it's set to `false`
+   */
+  @Prop({ default: false, type: Boolean }) readonly primary!: boolean
   /**
    * Icon name from icon collection of this library
    */
@@ -144,6 +150,9 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design
     if (this.alternative) {
       cssClasses.push('s-alternative')
     }
+    if (this.primary) {
+      cssClasses.push('s-primary')
+    }
     if (this.pressed) {
       cssClasses.push('s-pressed')
     }
@@ -171,15 +180,14 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design
   }
 
   get isRounded (): boolean {
-    if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array<string>).includes(this.type)) return false
+    if (([ButtonTypes.ACTION] as Array<string>).includes(this.type)) return this.rounded
 
-    return this.rounded
+    return false
   }
 
   get isLoading (): boolean {
-    if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array<string>).includes(this.type) || this.isRounded) {
-      return false
-    }
+    if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array<string>).includes(this.type)) return false
+
     return this.loading
   }
 

src/components/Button/SButton/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SButton from './SButton.vue'
 
 const SButton = _SButton as SFCWithInstall<typeof _SButton>
 
-SButton.install = function (vue: VueConstructor) {
-  vue.component(Components.SButton, SButton)
-}
+SButton.install = install(Components.SButton, SButton)
 
 export { SButton }
 export default SButton

src/components/Button/SButtonGroup/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SButtonGroup from './SButtonGroup.vue'
 
 const SButtonGroup = _SButtonGroup as SFCWithInstall<typeof _SButtonGroup>
 
-SButtonGroup.install = function (vue: VueConstructor) {
-  vue.component(Components.SButtonGroup, SButtonGroup)
-}
+SButtonGroup.install = install(Components.SButtonGroup, SButtonGroup)
 
 export { SButtonGroup }
 export default SButtonGroup

src/components/Card/SCard/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SCard from './SCard.vue'
 
 const SCard = _SCard as SFCWithInstall<typeof _SCard>
 
-SCard.install = function (vue: VueConstructor) {
-  vue.component(Components.SCard, SCard)
-}
+SCard.install = install(Components.SCard, SCard)
 
 export { SCard }
 export default SCard

src/components/Checkbox/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../types/components'
+import install from '../../utils/install'
 
 import _SCheckbox from './SCheckbox.vue'
 
 const SCheckbox = _SCheckbox as SFCWithInstall<typeof _SCheckbox>
 
-SCheckbox.install = function (vue: VueConstructor) {
-  vue.component(Components.SCheckbox, SCheckbox)
-}
+SCheckbox.install = install(Components.SCheckbox, SCheckbox)
 
 export { SCheckbox }
 export default SCheckbox

src/components/Collapse/SCollapse/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SCollapse from './SCollapse.vue'
 
 const SCollapse = _SCollapse as SFCWithInstall<typeof _SCollapse>
 
-SCollapse.install = function (vue: VueConstructor) {
-  vue.component(Components.SCollapse, SCollapse)
-}
+SCollapse.install = install(Components.SCollapse, SCollapse)
 
 export { SCollapse }
 export default SCollapse

src/components/Collapse/SCollapseItem/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SCollapseItem from './SCollapseItem.vue'
 
 const SCollapseItem = _SCollapseItem as SFCWithInstall<typeof _SCollapseItem>
 
-SCollapseItem.install = function (vue: VueConstructor) {
-  vue.component(Components.SCollapseItem, SCollapseItem)
-}
+SCollapseItem.install = install(Components.SCollapseItem, SCollapseItem)
 
 export { SCollapseItem }
 export default SCollapseItem

src/components/DatePicker/SDatePicker/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SDatePicker from './SDatePicker.vue'
 
 const SDatePicker = _SDatePicker as SFCWithInstall<typeof _SDatePicker>
 
-SDatePicker.install = function (vue: VueConstructor) {
-  vue.component(Components.SDatePicker, SDatePicker)
-}
+SDatePicker.install = install(Components.SDatePicker, SDatePicker)
 
 export { SDatePicker }
 export default SDatePicker

src/components/DesignSystem/DesignSystemInject.ts

@@ -1,13 +1,19 @@
 import { Component, Vue, Inject, Prop } from 'vue-property-decorator'
+
 import { DesignSystemProvideKey } from './consts'
 import DesignSystem from '../../types/DesignSystem'
 
 @Component
 export default class DesignSystemInject extends Vue {
   @Prop({ default: true, type: Boolean }) readonly useDesignSystem!: boolean
+
   @Inject({ from: DesignSystemProvideKey, default: DesignSystem.DEFAULT }) readonly designSystem!: any
 
   get designSystemClass (): string {
     return this.useDesignSystem ? this.designSystem.value : ''
   }
+
+  get isNeumorphic (): boolean {
+    return this.designSystem.value === DesignSystem.NEUMORPHIC
+  }
 }

src/components/DesignSystem/SDesignSystemProvider/SDesignSystemProvider.vue

@@ -6,12 +6,14 @@
 
 <script lang="ts">
 import { Component, Vue, Prop, Provide, Watch } from 'vue-property-decorator'
+
 import { DesignSystemProvideKey } from '../consts'
 import DesignSystem from '../../../types/DesignSystem'
 
 @Component
 export default class SDesignSystemProvider extends Vue {
   @Prop({ default: DesignSystem.DEFAULT, type: String }) readonly value!: string
+
   @Provide(DesignSystemProvideKey) providedObject = {
     value: DesignSystem.DEFAULT
   }

src/components/DesignSystem/SDesignSystemProvider/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SDesignSystemProvider from './SDesignSystemProvider.vue'
 
 const SDesignSystemProvider = _SDesignSystemProvider as SFCWithInstall<typeof _SDesignSystemProvider>
 
-SDesignSystemProvider.install = function (vue: VueConstructor) {
-  vue.component(Components.SDesignSystemProvider, SDesignSystemProvider)
-}
+SDesignSystemProvider.install = install(Components.SDesignSystemProvider, SDesignSystemProvider)
 
 export { SDesignSystemProvider }
 export default SDesignSystemProvider

src/components/Dialog/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../types/components'
+import install from '../../utils/install'
 
 import _SDialog from './SDialog.vue'
 
 const SDialog = _SDialog as SFCWithInstall<typeof _SDialog>
 
-SDialog.install = function (vue: VueConstructor) {
-  vue.component(Components.SDialog, SDialog)
-}
+SDialog.install = install(Components.SDialog, SDialog)
 
 export { SDialog }
 export default SDialog

src/components/Divider/SDivider/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SDivider from './SDivider.vue'
 
 const SDivider = _SDivider as SFCWithInstall<typeof _SDivider>
 
-SDivider.install = function (vue: VueConstructor) {
-  vue.component(Components.SDivider, SDivider)
-}
+SDivider.install = install(Components.SDivider, SDivider)
 
 export { SDivider }
 export default SDivider

src/components/Dropdown/SDropdown/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SDropdown from './SDropdown.vue'
 
 const SDropdown = _SDropdown as SFCWithInstall<typeof _SDropdown>
 
-SDropdown.install = function (vue: VueConstructor) {
-  vue.component(Components.SDropdown, SDropdown)
-}
+SDropdown.install = install(Components.SDropdown, SDropdown)
 
 export { SDropdown }
 export default SDropdown