From 7bc6ea4e83c7d0b826e68081f0cb092d1c2d4fce Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 21 Jul 2021 13:16:33 +0400
Subject: [PATCH 1/2] Scrollbar implementation (#258)

* Add scrollbar

* Update scrollbar.scss
---
 package.json                            |  2 +-
 src/components/Scrollbar/SScrollbar.vue | 58 +++++++++++++++++++++++++
 src/components/Scrollbar/index.ts       | 13 ++++++
 src/components/index.ts                 |  1 +
 src/index.ts                            |  3 ++
 src/store/LibraryLocale.ts              |  2 +-
 src/stories/SScrollbar.stories.ts       | 32 ++++++++++++++
 src/styles/index.scss                   |  1 +
 src/styles/scrollbar.scss               |  6 +++
 src/types/components.ts                 |  1 +
 10 files changed, 117 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Scrollbar/SScrollbar.vue
 create mode 100644 src/components/Scrollbar/index.ts
 create mode 100644 src/stories/SScrollbar.stories.ts
 create mode 100644 src/styles/scrollbar.scss

diff --git a/package.json b/package.json
index 7443d5a3..42af85d6 100644
--- a/package.json
+++ b/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/"
diff --git a/src/components/Scrollbar/SScrollbar.vue b/src/components/Scrollbar/SScrollbar.vue
new file mode 100644
index 00000000..49d4f524
--- /dev/null
+++ b/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>
diff --git a/src/components/Scrollbar/index.ts b/src/components/Scrollbar/index.ts
new file mode 100644
index 00000000..a3e62ad1
--- /dev/null
+++ b/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
diff --git a/src/components/index.ts b/src/components/index.ts
index 2fa2c287..dc9f811c 100644
--- a/src/components/index.ts
+++ b/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'
diff --git a/src/index.ts b/src/index.ts
index f39b8b24..b32b63a6 100644
--- a/src/index.ts
+++ b/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,
diff --git a/src/store/LibraryLocale.ts b/src/store/LibraryLocale.ts
index 71f5b28c..6f76ec3b 100644
--- a/src/store/LibraryLocale.ts
+++ b/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']),
diff --git a/src/stories/SScrollbar.stories.ts b/src/stories/SScrollbar.stories.ts
new file mode 100644
index 00000000..383db04e
--- /dev/null
+++ b/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)
+    }
+  }
+})
diff --git a/src/styles/index.scss b/src/styles/index.scss
index bfa5c946..be7f5d9a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -21,6 +21,7 @@
 @import "./option";
 @import "./pagination";
 @import "./radio";
+@import "./scrollbar";
 @import "./scroll-sections";
 @import "./select";
 @import "./slider";
diff --git a/src/styles/scrollbar.scss b/src/styles/scrollbar.scss
new file mode 100644
index 00000000..2163fa3a
--- /dev/null
+++ b/src/styles/scrollbar.scss
@@ -0,0 +1,6 @@
+.el-scrollbar__thumb {
+  border-radius: 6px;
+  &, &:hover {
+    background-color: var(--s-color-base-content-tertiary);
+  }
+}
diff --git a/src/types/components.ts b/src/types/components.ts
index 938e29d7..c22836ec 100644
--- a/src/types/components.ts
+++ b/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',

From e993ecf66d796fb59f708e6e8901e9510794599f Mon Sep 17 00:00:00 2001
From: Nikita Polyakov <53777036+Nikita-Polyakov@users.noreply.github.com>
Date: Wed, 21 Jul 2021 13:18:06 +0300
Subject: [PATCH 2/2] fix storybook build scss (#260)

* fix storybook build scss

* remove async
---
 config/storybook/main.js | 11 ++++++++++-
 package.json             |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/config/storybook/main.js b/config/storybook/main.js
index 89ad8212..d2eb1cb1 100644
--- a/config/storybook/main.js
+++ b/config/storybook/main.js
@@ -21,5 +21,14 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-knobs',
     '@storybook/addon-storysource'
-  ]
+  ],
+  webpackFinal: (config) => {
+    const scssRule = config.module.rules.find(({ test }) => typeof test.test === 'function' && test.test('.scss'))
+    // important to include scss to storybook build
+    if (scssRule) {
+      scssRule.sideEffects = true
+    }
+
+    return config
+  }
 }
diff --git a/package.json b/package.json
index 42af85d6..004bd2a7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"