Release 1.0.1

package.json

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

src/components/Scrollbar/SScrollbar.vue

@@ -0,0 +1,58 @@
+<template>
+  <el-scrollbar
+    :native="native"
+    :noresize="noresize"
+    :tag="tag"
+    :view-class="viewClass"
+    :view-style="viewStyle"
+    :wrap-class="wrapClass"
+    :wrap-style="wrapStyle"
+  >
+    <slot></slot>
+  </el-scrollbar>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import ElScrollbar from 'element-ui/lib/scrollbar'
+
+@Component({
+  components: { ElScrollbar }
+})
+export default class SScrollbar extends Vue {
+  /**
+   * Native scrollbar.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly native!: boolean
+  /**
+   * If the container does not resize, it is best to use it to optimize performance.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly noresize!: boolean
+  /**
+   * Tag which represents scrollbar section.
+   *
+   * `"div"` by default
+   */
+  @Prop({ type: String, default: 'div' }) readonly tag!: string
+  /**
+   * CSS class for view section of the scrollbar
+   */
+  @Prop({ type: String }) readonly viewClass!: string
+  /**
+   * Inline styles for view section of the scrollbar
+   */
+  @Prop({ type: [String, Object, Array] }) readonly viewStyle!: string | object | Array<any>
+  /**
+   * CSS class for wrap section of the scrollbar
+   */
+  @Prop({ type: String }) readonly wrapClass!: string
+  /**
+   * Inline styles for wrap section of the scrollbar
+   */
+  @Prop({ type: [String, Object, Array] }) readonly wrapStyle!: string | object | Array<any>
+}
+</script>

src/components/Scrollbar/index.ts

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

src/components/index.ts

@@ -24,6 +24,7 @@ export { SSlider } from './Slider'
 export { SSwitch } from './Switch'
 export { SRadio, SRadioGroup } from './Radio'
 export { SRow } from './Layout/Row'
+export { SScrollbar } from './Scrollbar'
 export { SScrollSectionItem, SScrollSections } from './ScrollSections'
 export { SSelect, SOption, SOptionGroup } from './Select'
 export { STab, STabs } from './Tab'

src/index.ts

@@ -36,6 +36,7 @@ import {
   SRadio,
   SRadioGroup,
   SRow,
+  SScrollbar,
   SScrollSectionItem,
   SScrollSections,
   SSelect,
@@ -103,6 +104,7 @@ const SoramitsuElements = {
     vue.use(SRadio)
     vue.use(SRadioGroup)
     vue.use(SRow)
+    vue.use(SScrollbar)
     vue.use(SScrollSectionItem)
     vue.use(SScrollSections)
     vue.use(SSelect)
@@ -172,6 +174,7 @@ export {
   SRadio,
   SRadioGroup,
   SRow,
+  SScrollbar,
   SScrollSectionItem,
   SScrollSections,
   SSelect,

src/store/LibraryLocale.ts

@@ -5,7 +5,7 @@ import flow from 'lodash/fp/flow'
 import concat from 'lodash/fp/concat'
 
 import { Locale } from '../utils/Locale'
-import i18n from '@/locale'
+import i18n from '../locale'
 
 const types = flow(
   flatMap(x => [x + '_REQUEST', x + '_SUCCESS', x + '_FAILURE']),

src/stories/SScrollbar.stories.ts

@@ -0,0 +1,32 @@
+import { withKnobs, boolean } from '@storybook/addon-knobs'
+
+import { SScrollbar } from '../components'
+
+export default {
+  component: SScrollbar,
+  title: 'Design System/Components/Scrollbar',
+  decorators: [withKnobs]
+}
+
+export const configurable = () => ({
+  components: { SScrollbar },
+  template: `
+            <s-scrollbar :native="native" :noresize="noresize" style="background-color: var(--s-color-base-background);">
+              <div style="height: 200px;">
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?</p>
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?</p>
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?</p>
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?</p>
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?</p>
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?</p>
+              </div>
+            </s-scrollbar>`,
+  props: {
+    native: {
+      default: boolean('Native', false)
+    },
+    noresize: {
+      default: boolean('Noresize', false)
+    }
+  }
+})

src/styles/index.scss

@@ -21,6 +21,7 @@
 @import "./option";
 @import "./pagination";
 @import "./radio";
+@import "./scrollbar";
 @import "./scroll-sections";
 @import "./select";
 @import "./slider";

src/styles/scrollbar.scss

@@ -0,0 +1,6 @@
+.el-scrollbar__thumb {
+  border-radius: 6px;
+  &, &:hover {
+    background-color: var(--s-color-base-content-tertiary);
+  }
+}

src/types/components.ts

@@ -39,6 +39,7 @@ export enum Components {
   SRadio = 'SRadio',
   SRadioGroup = 'SRadioGroup',
   SRow = 'SRow',
+  SScrollbar = 'SScrollbar',
   SScrollSectionItem = 'SScrollSectionItem',
   SScrollSections = 'SScrollSections',
   SSelect = 'SSelect',