From 65fd604a3bef2003c2e4b4bc4f51ed5ee0cf2efb Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Tue, 8 Sep 2020 11:48:21 +0400
Subject: [PATCH 1/8] Add select components

---
 src/components/DatePicker/SDatePicker.vue |   1 -
 src/components/Select/SOption.vue         |  32 ++
 src/components/Select/SOptionGroup.vue    |  34 ++
 src/components/Select/SSelect.vue         | 378 ++++++++++++++++++++++
 src/components/Select/consts.ts           |   4 +
 src/components/Select/index.ts            |   6 +
 src/components/index.ts                   |   4 +
 src/index.ts                              |   9 +
 src/types/components.ts                   |   3 +
 9 files changed, 470 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Select/SOption.vue
 create mode 100644 src/components/Select/SOptionGroup.vue
 create mode 100644 src/components/Select/SSelect.vue
 create mode 100644 src/components/Select/consts.ts
 create mode 100644 src/components/Select/index.ts

diff --git a/src/components/DatePicker/SDatePicker.vue b/src/components/DatePicker/SDatePicker.vue
index 18f8f5be..6fc7d7c9 100644
--- a/src/components/DatePicker/SDatePicker.vue
+++ b/src/components/DatePicker/SDatePicker.vue
@@ -52,7 +52,6 @@ export default class SDatePicker extends Vue {
    * `"year"`/`"month"`/`"date"`/`"dates"`/`"datetime"`/`"week"`/`"datetimerange"`/`"daterange"`/`"monthrange"`
    */
   @Prop({ type: String, default: PickerTypes.DATE }) readonly type!: string
-
   /**
    * Input type of the datepicker component. Available values: `"input"`, `"select"`.
    * `"input"` can be set only when `type` is not range. Otherwise, `"select"` will be set automatically.
diff --git a/src/components/Select/SOption.vue b/src/components/Select/SOption.vue
new file mode 100644
index 00000000..1cea17fa
--- /dev/null
+++ b/src/components/Select/SOption.vue
@@ -0,0 +1,32 @@
+<template>
+  <el-option :value="value" :label="label" :disabled="disabled">
+    <slot></slot>
+  </el-option>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+@Component
+export default class SOption extends Vue {
+  /**
+   * Value of the option group
+   */
+  @Prop({ default: '' }) readonly value!: string | number | object
+  /**
+   * Label of the option group, same as `value` if omitted
+   */
+  @Prop({ default: '' }) readonly label!: string | number | object
+  /**
+   * Disabled state of the option group.
+   *
+   * `false` by default
+   */
+  @Prop({ type: Boolean, default: false }) readonly disabled!: boolean
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+
+</style>
diff --git a/src/components/Select/SOptionGroup.vue b/src/components/Select/SOptionGroup.vue
new file mode 100644
index 00000000..df01ef52
--- /dev/null
+++ b/src/components/Select/SOptionGroup.vue
@@ -0,0 +1,34 @@
+<template>
+  <el-option-group :label="label" :disabled="disabled">
+    <slot></slot>
+  </el-option-group>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+@Component
+export default class SOptionGroup extends Vue {
+  /**
+   * Label of the option group
+   */
+  @Prop({ type: String, default: '' }) readonly label!: string
+  /**
+   * Disabled state of the option group.
+   *
+   * `false` by default
+   */
+  @Prop({ type: Boolean, default: false }) readonly disabled!: boolean
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+
+.el-select-group__wrap:not(:last-of-type)::after {
+  background-color: $color-neutral-hover;
+}
+.el-select-group__title {
+  color: $color-neutral-tertiary;
+}
+</style>
diff --git a/src/components/Select/SSelect.vue b/src/components/Select/SSelect.vue
new file mode 100644
index 00000000..0af0626a
--- /dev/null
+++ b/src/components/Select/SSelect.vue
@@ -0,0 +1,378 @@
+<template>
+  <div class="s-select" :class="computedClasses">
+    <span v-if="willPlaceholderBeShown" class="placeholder">{{ placeholder }}</span>
+    <el-select
+      ref="select"
+      v-model="model"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :loading="loading"
+      :multiple="multiple"
+      :loading-text="loadingText"
+      :clearable="clearable"
+      :multiple-limit="multipleLimit"
+      :no-data-text="noDataText"
+      @change="handleChange"
+      @blur="handleBlur"
+      @focus="handleFocus"
+      @visible-change="handleVisibleChange"
+      @clear="handleClear"
+    >
+      <slot name="empty" slot="empty"></slot>
+      <slot></slot>
+    </el-select>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
+
+import { Autocomplete } from '../Input'
+import { InputTypes } from './consts'
+
+@Component
+export default class SSelect extends Vue {
+  /**
+   * Selected value. Can be used with `v-model`
+   */
+  @Prop() readonly value!: any
+  /**
+   * Input type of the select component. Available values: `"input"`, `"select"`.
+   *
+   * `"input"` is set by default
+   */
+  @Prop({ type: String, default: InputTypes.INPUT }) readonly inputType!: string
+  /**
+   * Placeholder of the select component.
+   *
+   * `"Select"` is set by default
+   */
+  @Prop({ type: String, default: 'Select' }) readonly placeholder!: string
+  /**
+   * Multiple text prefix property. For instance, when user selected 3 items then it should be
+   * displayed as `"Something (3)"`. If it's not set then `placeholder` is used by default
+   */
+  @Prop({ type: String, default: '' }) readonly multipleTextPrefix!: string
+  /**
+   * Loading text of the select component.
+   *
+   * `"Loading"` is set by default
+   */
+  @Prop({ type: String, default: 'Loading' }) readonly loadingText!: string
+  /**
+   * Displayed text when there is no options, you can also use slot `empty`.
+   *
+   * `"No data"` is set by default
+   */
+  @Prop({ type: String, default: 'No data' }) readonly noDataText!: string
+  /**
+   * Name attribute for input
+   */
+  @Prop({ type: String, default: '' }) readonly name!: string
+  /**
+   * Autocomplete property of native input. `"off"` by default
+   */
+  @Prop({ default: Autocomplete.OFF, type: String }) readonly autocomplete!: string
+  /**
+   * Disabled state of the select component.
+   *
+   * `false` by default
+   */
+  @Prop({ type: Boolean, default: false }) readonly disabled!: boolean
+  /**
+   * Loading state of the select component.
+   *
+   * `false` by default
+   */
+  @Prop({ type: Boolean, default: false }) readonly loading!: boolean
+  /**
+   * Multiple state of the select component.
+   *
+   * `false` by default
+   */
+  @Prop({ type: Boolean, default: false }) readonly multiple!: boolean
+  /**
+   * Multiple limit for the select component when `multiple` is true.
+   * Has no limit when `multiple-limit=0`.
+   *
+   * `0` by default
+   */
+  @Prop({ type: Number, default: 0 }) readonly multipleLimit!: number
+  /**
+   * Clearable state of the select component.
+   *
+   * `false` by default
+   */
+  @Prop({ type: Boolean, default: false }) readonly clearable!: boolean
+
+  @Ref('select') select!: any
+
+  model = this.value
+  focused = false
+
+  private updateInputValue (): void {
+    if (!this.multiple) {
+      return
+    }
+    const tags = this.select.$el.getElementsByClassName('el-select__tags')[0] as Element
+    if (tags) {
+      tags.remove()
+    }
+    const input = this.select.$el.getElementsByClassName('el-input__inner')[0] as HTMLInputElement
+    input.value = this.model.length ? `${this.multipleTextPrefix || this.placeholder} (${this.model.length})` : ''
+  }
+
+  @Watch('value')
+  private handlePropChange (value: any): void {
+    this.model = value
+  }
+
+  @Watch('model')
+  private handleValueChange (value: any): void {
+    this.$emit('input', value)
+    this.$emit('change', value)
+    this.updateInputValue()
+  }
+
+  mounted (): void {
+    this.$nextTick(this.updateInputValue)
+  }
+
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if ((Object.values(InputTypes) as Array<string>).includes(this.inputType)) {
+      cssClasses.push(this.inputType)
+    }
+    if (this.focused) {
+      cssClasses.push('focused')
+    }
+    if (this.disabled) {
+      cssClasses.push('disabled')
+    }
+    return cssClasses
+  }
+
+  get willPlaceholderBeShown (): boolean {
+    if (this.inputType !== InputTypes.INPUT) {
+      return false
+    }
+    return !!(this.model && this.model.length !== 0 && this.placeholder)
+  }
+
+  handleChange (selected: any): void {
+    this.$emit('change', selected)
+  }
+
+  handleBlur (event: Event): void {
+    this.focused = false
+    this.$emit('blur', event)
+  }
+
+  handleFocus (event: Event): void {
+    if (this.disabled) {
+      return
+    }
+    this.focused = true
+    this.$emit('focus', event)
+  }
+
+  handleVisibleChange (isAppear: boolean): void {
+    this.focused = isAppear
+    this.$emit('visible-change', isAppear)
+  }
+
+  handleClear (): void {
+    this.$emit('clear')
+  }
+
+  public focus (): void {
+    this.select.focus()
+  }
+
+  public blur (): void {
+    this.select.blur()
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+
+.s-select {
+  font-family: $font-family-default;
+  width: 100%;
+  position: relative;
+  .el-select {
+    width: 100%;
+    .el-input {
+      &.is-focus .el-input__inner {
+        border-color: $color-neutral-placeholder;
+      }
+      .el-input__inner {
+        &::placeholder {
+          color: $color-neutral-secondary;
+          opacity: 1; // Firefox
+        }
+      }
+      .el-select__caret {
+        color: $color-neutral-secondary;
+      }
+    }
+  }
+  &.input {
+    .el-select {
+      .el-input__inner {
+        height: $size-big;
+        padding: 0 15px;
+        border: 1px solid $color-neutral-placeholder;
+        background-color: $color-neutral-placeholder;
+        &:focus {
+          border-color: $color-neutral-placeholder;
+        }
+      }
+    }
+    &:hover {
+      .el-select {
+        .el-input__inner {
+          border-color: $color-neutral-hover;
+          background-color: $color-neutral-hover;
+        }
+      }
+      .placeholder {
+        background-color: $color-neutral-hover;
+      }
+    }
+    .placeholder + .el-select {
+      .el-input__inner {
+        padding-top: 12px;
+      }
+      .el-input__validateIcon {
+        padding-top: 11px;
+      }
+    }
+    &.focused {
+      .el-select {
+        .el-input__inner {
+          border-color: $color-neutral-border;
+          background-color: $color-basic-white;
+        }
+      }
+      .placeholder {
+        background-color: $color-basic-white;
+      }
+    }
+    &.disabled {
+      .el-select {
+        .el-select__caret {
+          color: $color-neutral-secondary;
+        }
+        .el-input__inner, .el-input__inner:hover {
+          border-color: $color-neutral-border;
+          color: $color-neutral-secondary;
+          background-color: $color-neutral-placeholder;
+          &::placeholder {
+            color: $color-neutral-secondary;
+          }
+        }
+      }
+      .placeholder {
+        color: $color-neutral-secondary;
+        background-color: $color-neutral-placeholder;
+      }
+    }
+  }
+  .placeholder {
+    // TODO: add default animation from material-ui
+    color: $color-neutral-secondary;
+    text-align: left;
+    font-size: 12px;
+    padding: 0 15px;
+    padding-top: 5px;
+    top: 1px;
+    left: 1px;
+    border-top-left-radius: 4px;
+    position: absolute;
+    z-index: 1;
+    width: calc(100% - 15px);
+    background-color: $color-neutral-placeholder;
+    pointer-events: none;
+  }
+  &.select {
+    .el-select {
+      .el-input__inner {
+        border-radius: 8px;
+        padding-left: 12px;
+        &:hover {
+          border-color: $color-neutral-inactive;
+        }
+        &::placeholder {
+          color: $color-neutral-tertiary;
+        }
+        &:focus {
+          border-color: $color-neutral-inactive;
+        }
+      }
+    }
+    &.focused {
+      .el-select .el-input__inner {
+        border-color: $color-neutral-inactive;
+      }
+    }
+    &.disabled {
+      .el-select {
+        .el-input__inner {
+          color: $color-neutral-inactive;
+          border-color: $color-neutral-border;
+          background-color: $color-basic-white;
+          &::placeholder {
+            color: $color-neutral-inactive;
+          }
+        }
+        .el-select__caret {
+          color: $color-neutral-inactive;
+        }
+      }
+    }
+  }
+}
+.el-select-dropdown__item {
+  &.hover, &:hover {
+    background-color: $color-neutral-placeholder;
+  }
+  &.is-disabled {
+    color: $color-neutral-inactive;;
+  }
+}
+.el-select-dropdown.is-multiple .el-select-dropdown__item {
+  > span {
+    padding-left: 16px;
+    vertical-align: top;
+    color: $color-basic-black;
+    font-weight: normal;
+  }
+  &::before {
+    font-family: "element-icons";
+    content: "\e6da";
+    color: $color-basic-white;
+    border: 1px solid $color-neutral-border;
+    background-color: $color-basic-white;
+    font-size: 16px;
+    font-weight: bold;
+    padding: 1px;
+    border-radius: 4px;
+  }
+  &.selected {
+    &.hover {
+      background-color: $color-neutral-placeholder;
+    }
+    &::before {
+      color: $color-basic-white;
+      background-color: $color-main-brand;
+      border-color: $color-main-brand;
+    }
+    &::after {
+      content: '';
+    }
+  }
+}
+</style>
diff --git a/src/components/Select/consts.ts b/src/components/Select/consts.ts
new file mode 100644
index 00000000..0484a8e2
--- /dev/null
+++ b/src/components/Select/consts.ts
@@ -0,0 +1,4 @@
+export enum InputTypes {
+  INPUT = 'input',
+  SELECT = 'select'
+}
diff --git a/src/components/Select/index.ts b/src/components/Select/index.ts
new file mode 100644
index 00000000..fa6ba46e
--- /dev/null
+++ b/src/components/Select/index.ts
@@ -0,0 +1,6 @@
+import SSelect from './SSelect.vue'
+import SOption from './SOption.vue'
+import SOptionGroup from './SOptionGroup.vue'
+import { InputTypes } from './consts'
+
+export { SSelect, SOption, SOptionGroup, InputTypes }
diff --git a/src/components/index.ts b/src/components/index.ts
index 6a7f0ed5..e6622472 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -24,6 +24,7 @@ import { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu'
 import { SPagination } from './Pagination'
 import { SRow } from './Layout/Row'
 import { SScrollSectionItem, SScrollSections } from './ScrollSections'
+import { SSelect, SOption, SOptionGroup } from './Select'
 import { STab, STabs } from './Tab'
 import { STable, STableColumn } from './Table'
 import { STooltip } from './Tooltip'
@@ -57,10 +58,13 @@ export {
   SMenu,
   SMenuItem,
   SMenuItemGroup,
+  SOption,
+  SOptionGroup,
   SPagination,
   SRow,
   SScrollSectionItem,
   SScrollSections,
+  SSelect,
   SSubmenu,
   STab,
   STabs,
diff --git a/src/index.ts b/src/index.ts
index 2a066fa5..e8d3487e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -29,10 +29,13 @@ import {
   SMenu,
   SMenuItem,
   SMenuItemGroup,
+  SOption,
+  SOptionGroup,
   SPagination,
   SRow,
   SScrollSectionItem,
   SScrollSections,
+  SSelect,
   SSubmenu,
   STab,
   STabs,
@@ -74,10 +77,13 @@ const components = [
   { component: SMenu, name: Components.SMenu },
   { component: SMenuItem, name: Components.SMenuItem },
   { component: SMenuItemGroup, name: Components.SMenuItemGroup },
+  { component: SOption, name: Components.SOption },
+  { component: SOptionGroup, name: Components.SOptionGroup },
   { component: SPagination, name: Components.SPagination },
   { component: SRow, name: Components.SRow },
   { component: SScrollSectionItem, name: Components.SScrollSectionItem },
   { component: SScrollSections, name: Components.SScrollSections },
+  { component: SSelect, name: Components.SSelect },
   { component: SSubmenu, name: Components.SSubmenu },
   { component: STab, name: Components.STab },
   { component: STabs, name: Components.STabs },
@@ -136,9 +142,12 @@ export {
   SMenuItem,
   SMenuItemGroup,
   SPagination,
+  SOption,
+  SOptionGroup,
   SRow,
   SScrollSectionItem,
   SScrollSections,
+  SSelect,
   SSubmenu,
   STab,
   STabs,
diff --git a/src/types/components.ts b/src/types/components.ts
index 780ae75d..3b1a4701 100644
--- a/src/types/components.ts
+++ b/src/types/components.ts
@@ -27,10 +27,13 @@ export enum Components {
   SMenu = 'SMenu',
   SMenuItem = 'SMenuItem',
   SMenuItemGroup = 'SMenuItemGroup',
+  SOption = 'SOption',
+  SOptionGroup = 'SOptionGroup',
   SPagination = 'SPagination',
   SRow = 'SRow',
   SScrollSectionItem = 'SScrollSectionItem',
   SScrollSections = 'SScrollSections',
+  SSelect = 'SSelect',
   SSubmenu = 'SSubmenu',
   STab = 'STab',
   STabs = 'STabs',

From 0119efbf40e8bd9852c0caeb4d91096ac296871b Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Tue, 8 Sep 2020 11:48:47 +0400
Subject: [PATCH 2/8] Add story for select component

---
 src/stories/Select/SSelect.stories.ts | 153 ++++++++++++++++++++++++++
 1 file changed, 153 insertions(+)
 create mode 100644 src/stories/Select/SSelect.stories.ts

diff --git a/src/stories/Select/SSelect.stories.ts b/src/stories/Select/SSelect.stories.ts
new file mode 100644
index 00000000..0fb66cba
--- /dev/null
+++ b/src/stories/Select/SSelect.stories.ts
@@ -0,0 +1,153 @@
+import { text, withKnobs, boolean, number } from '@storybook/addon-knobs'
+
+import { SSelect, SRow, SCol, SOption } from '../../components'
+import { InputTypes } from '../../components/Select'
+
+export default {
+  component: SSelect,
+  title: 'Design System/Select',
+  decorators: [withKnobs],
+  excludeStories: /.*Data$/
+}
+
+export const differentInputsData = Object.values(InputTypes).map(inputType => ({ inputType, model: '' }))
+export const optionsData = [
+  { label: 'First', value: 'first' },
+  { label: 'Second', value: 'second' },
+  { label: 'Third', value: 'third' }
+]
+
+export const configurable = () => ({
+  components: { SSelect, SOption, SRow, SCol },
+  template: `<s-row style="flex: 1;">
+               <s-col v-for="item in items" :key="item.inputType" :span="12" style="padding-bottom: 20px;">
+                 <div style="padding-bottom: 10px;">"{{ item.inputType }}" input type</div>
+                 <s-select
+                   v-model="model"
+                   :disabled="disabled"
+                   :loading="loading"
+                   :multiple="multiple"
+                   :input-type="item.inputType"
+                   :clearable="clearable"
+                   :multiple-limit="multipleLimit"
+                   :placeholder="placeholder"
+                   :multiple-text-prefix="multipleTextPrefix"
+                   :loading-text="loadingText"
+                   :no-data-text="noDataText"
+                   @change="handleChange"
+                 >
+                   <s-option
+                     v-for="option in options"
+                     :key="option.value"
+                     :value="option.value"
+                     :label="option.label"
+                   />
+                 </s-select>
+               </s-col>
+             </s-row>`,
+  data: () => ({
+    model: '',
+    items: differentInputsData,
+    options: optionsData
+  }),
+  props: {
+    disabled: {
+      default: boolean('Disabled', false)
+    },
+    loading: {
+      default: boolean('Loading', false)
+    },
+    multiple: {
+      default: boolean('Multiple', false)
+    },
+    clearable: {
+      default: boolean('Clearable', false)
+    },
+    multipleLimit: {
+      default: number('Multiple limit', 0)
+    },
+    placeholder: {
+      default: text('Placeholder', 'Select')
+    },
+    multipleTextPrefix: {
+      default: text('Multiple text prefix', 'Data')
+    },
+    loadingText: {
+      default: text('Loading text', 'Loading')
+    },
+    noDataText: {
+      default: text('No data text', 'No data')
+    }
+  },
+  methods: {
+    handleChange: (selected) => console.log('handleChange', selected)
+  }
+})
+
+export const multiple = () => ({
+  components: { SSelect, SOption, SRow, SCol },
+  template: `<s-row style="flex: 1;">
+               <s-col v-for="item in items" :key="item.inputType" :span="12" style="padding-bottom: 20px;">
+                 <div style="padding-bottom: 10px;">"{{ item.inputType }}" input type</div>
+                 <s-select
+                   v-model="model"
+                   multiple
+                   :input-type="item.inputType"
+                   :multiple-limit="multipleLimit"
+                   :multiple-text-prefix="multipleTextPrefix"
+                   @change="handleChange"
+                 >
+                   <s-option
+                     v-for="option in options"
+                     :key="option.value"
+                     :value="option.value"
+                     :label="option.label"
+                   />
+                 </s-select>
+               </s-col>
+             </s-row>`,
+  data: () => ({
+    model: '',
+    items: differentInputsData,
+    options: optionsData
+  }),
+  props: {
+    multipleLimit: {
+      default: number('Multiple limit', 0)
+    },
+    multipleTextPrefix: {
+      default: text('Multiple text prefix', 'Data')
+    }
+  },
+  methods: {
+    handleChange: (selected) => console.log('handleChange', selected)
+  }
+})
+
+export const disabled = () => ({
+  components: { SSelect, SOption, SRow, SCol },
+  template: `<s-row style="flex: 1;">
+               <s-col v-for="item in items" :key="item.inputType" :span="12" style="padding-bottom: 20px;">
+                 <div style="padding-bottom: 10px;">{{ item.label }}</div>
+                 <s-select
+                   v-model="item.model"
+                   disabled
+                   :input-type="item.inputType"
+                 >
+                   <s-option
+                     v-for="option in options"
+                     :key="option.value"
+                     :value="option.value"
+                     :label="option.label"
+                   />
+                 </s-select>
+               </s-col>
+             </s-row>`,
+  data: () => ({
+    items: differentInputsData.flatMap(item => [
+      { ...item, label: `"${item.inputType}" input type` },
+      { ...item, model: 'first', label: `"${item.inputType}" input type with selected value` }
+    ]),
+    options: optionsData
+  })
+})

From 64cf6b31988dc358e5d637f550afba341827d29c Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Tue, 8 Sep 2020 11:49:09 +0400
Subject: [PATCH 3/8] Add story for option component

---
 src/stories/Select/SOption.stories.ts | 44 +++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/stories/Select/SOption.stories.ts

diff --git a/src/stories/Select/SOption.stories.ts b/src/stories/Select/SOption.stories.ts
new file mode 100644
index 00000000..79770041
--- /dev/null
+++ b/src/stories/Select/SOption.stories.ts
@@ -0,0 +1,44 @@
+import { text, withKnobs, boolean } from '@storybook/addon-knobs'
+
+import { SSelect, SRow, SCol, SOption } from '../../components'
+
+export default {
+  component: SOption,
+  title: 'Design System/Select/Option',
+  decorators: [withKnobs],
+  excludeStories: /.*Data$/
+}
+
+export const optionsData = [
+  { label: 'First', value: 'first' },
+  { label: 'Second', value: 'second' },
+  { label: 'Third', value: 'third' }
+]
+export const configurable = () => ({
+  components: { SSelect, SOption, SRow, SCol },
+  template: `<s-row style="flex: 1;">
+               <s-col :span="12">
+                 <s-select v-model="model">
+                   <s-option value="custom" :label="label" :disabled="disabled"></s-option>
+                   <s-option
+                     v-for="option in options"
+                     :key="option.value"
+                     :value="option.value"
+                     :label="option.label"
+                   />
+                 </s-select>
+               </s-col>
+             </s-row>`,
+  data: () => ({
+    model: '',
+    options: optionsData
+  }),
+  props: {
+    disabled: {
+      default: boolean('Disabled', false)
+    },
+    label: {
+      default: text('Label', 'Custom')
+    }
+  }
+})

From 259a660dbf79f957f993b80ff2c7e79ec9990859 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Tue, 8 Sep 2020 11:49:30 +0400
Subject: [PATCH 4/8] Add story for option group component

---
 src/stories/Select/SOptionGroup.stories.ts | 53 ++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 src/stories/Select/SOptionGroup.stories.ts

diff --git a/src/stories/Select/SOptionGroup.stories.ts b/src/stories/Select/SOptionGroup.stories.ts
new file mode 100644
index 00000000..49c9a274
--- /dev/null
+++ b/src/stories/Select/SOptionGroup.stories.ts
@@ -0,0 +1,53 @@
+import { text, withKnobs, boolean } from '@storybook/addon-knobs'
+
+import { SSelect, SRow, SCol, SOption, SOptionGroup } from '../../components'
+
+export default {
+  component: SOptionGroup,
+  title: 'Design System/Select/Option Group',
+  decorators: [withKnobs],
+  excludeStories: /.*Data$/
+}
+
+export const optionsData = [
+  { label: 'First', value: 'first' },
+  { label: 'Second', value: 'second' },
+  { label: 'Third', value: 'third' }
+]
+export const configurable = () => ({
+  components: { SSelect, SOption, SRow, SCol, SOptionGroup },
+  template: `<s-row style="flex: 1;">
+               <s-col :span="12">
+                 <s-select v-model="model">
+                   <s-option-group :label="label" :disabled="disabled">
+                     <s-option
+                       v-for="option in options"
+                       :key="option.value"
+                       :value="option.value"
+                       :label="option.label"
+                     />
+                   </s-option-group>
+                   <s-option-group label="Next group">
+                     <s-option
+                       v-for="option in options"
+                       :key="option.value + '1'"
+                       :value="option.value + '1'"
+                       :label="option.label"
+                     />
+                   </s-option-group>
+                 </s-select>
+               </s-col>
+             </s-row>`,
+  data: () => ({
+    model: '',
+    options: optionsData
+  }),
+  props: {
+    disabled: {
+      default: boolean('Disabled', false)
+    },
+    label: {
+      default: text('Label', 'Custom')
+    }
+  }
+})

From e4ed15337285938bb688f83e6ffe99e31353194e Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 9 Sep 2020 11:01:21 +0400
Subject: [PATCH 5/8] Fix pagination props and styles

---
 src/components/Pagination/SPagination.vue | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/Pagination/SPagination.vue b/src/components/Pagination/SPagination.vue
index f05fc612..4f1b1aaa 100644
--- a/src/components/Pagination/SPagination.vue
+++ b/src/components/Pagination/SPagination.vue
@@ -77,13 +77,13 @@ export default class SPagination extends Vue {
    */
   @Prop({ default: '', type: String }) readonly popperClass!: string
   /**
-   * Custom class name for the total element of the pagination component
+   * Styles object for the total element of the pagination component
    */
-  @Prop({ default: '', type: String }) readonly totalClass!: string
+  @Prop() readonly totalStyle!: object
   /**
-   * Custom class name for the sizes element of the pagination component
+   * Styles object for the sizes element of the pagination component
    */
-  @Prop({ default: '', type: String }) readonly sizesClass!: string
+  @Prop() readonly sizesStyle!: object
   /**
    * Text of the previous button
    */
@@ -118,11 +118,15 @@ export default class SPagination extends Vue {
     const items = Array.from(this.pagination.$el.childNodes) as Array<any>
     this.totalItem = items.find(item => item.className === 'el-pagination__total')
     this.sizesItem = items.find(item => item.className === 'el-pagination__sizes')
-    if (this.totalItem && this.totalClass) {
-      (this.totalItem as Element).classList.add(this.totalClass)
+    if (this.totalItem && this.totalStyle) {
+      for (const styleProp in this.totalStyle) {
+        (this.totalItem as HTMLElement).style[styleProp] = this.totalStyle[styleProp]
+      }
     }
-    if (this.sizesItem && this.sizesClass) {
-      (this.sizesItem as Element).classList.add(this.sizesClass)
+    if (this.sizesItem && this.sizesStyle) {
+      for (const styleProp in this.sizesStyle) {
+        (this.sizesItem as HTMLElement).style[styleProp] = this.sizesStyle[styleProp]
+      }
     }
   }
 
@@ -239,6 +243,7 @@ export default class SPagination extends Vue {
   }
   .el-pagination__total, .per-page-text, .el-pagination__jump {
     color: $color-neutral-secondary;
+    font-weight: normal;
   }
   .el-pager li {
     color: $color-basic-black;

From 1a1374921175184d3ea056bf375eade1bc35bbb3 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Thu, 10 Sep 2020 09:23:40 +0400
Subject: [PATCH 6/8] Fix styles

---
 src/components/Select/SSelect.vue | 51 +++++++++++++++++++++++++------
 src/styles/icons.scss             |  1 +
 2 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/src/components/Select/SSelect.vue b/src/components/Select/SSelect.vue
index 0af0626a..8ed019e1 100644
--- a/src/components/Select/SSelect.vue
+++ b/src/components/Select/SSelect.vue
@@ -12,7 +12,6 @@
       :clearable="clearable"
       :multiple-limit="multipleLimit"
       :no-data-text="noDataText"
-      @change="handleChange"
       @blur="handleBlur"
       @focus="handleFocus"
       @visible-change="handleVisibleChange"
@@ -149,6 +148,9 @@ export default class SSelect extends Vue {
     if (this.disabled) {
       cssClasses.push('disabled')
     }
+    if ((!this.multiple && this.model) || (this.multiple && this.model.length !== 0)) {
+      cssClasses.push('has-value')
+    }
     return cssClasses
   }
 
@@ -159,10 +161,6 @@ export default class SSelect extends Vue {
     return !!(this.model && this.model.length !== 0 && this.placeholder)
   }
 
-  handleChange (selected: any): void {
-    this.$emit('change', selected)
-  }
-
   handleBlur (event: Event): void {
     this.focused = false
     this.$emit('blur', event)
@@ -197,6 +195,7 @@ export default class SSelect extends Vue {
 
 <style lang="scss">
 @import "../../styles/variables.scss";
+@import "../../styles/icons.scss";
 
 .s-select {
   font-family: $font-family-default;
@@ -204,6 +203,13 @@ export default class SSelect extends Vue {
   position: relative;
   .el-select {
     width: 100%;
+    i.el-icon-arrow-up {
+      font-family: $icons-font;
+      font-size: 16px;
+      &:before {
+        content: $s-icon-chevron-top;
+      }
+    }
     .el-input {
       &.is-focus .el-input__inner {
         border-color: $color-neutral-placeholder;
@@ -302,20 +308,41 @@ export default class SSelect extends Vue {
       .el-input__inner {
         border-radius: 8px;
         padding-left: 12px;
+        font-weight: bold;
         &:hover {
           border-color: $color-neutral-inactive;
         }
         &::placeholder {
           color: $color-neutral-tertiary;
+          font-weight: bold;
         }
         &:focus {
           border-color: $color-neutral-inactive;
         }
       }
+      .el-select__caret {
+        color: $color-neutral-tertiary;
+      }
     }
     &.focused {
-      .el-select .el-input__inner {
-        border-color: $color-neutral-inactive;
+      .el-select {
+        .el-input__inner {
+          color: $color-basic-black;
+          border-color: $color-neutral-inactive;
+          &::placeholder {
+            color: $color-basic-black;
+          }
+        }
+        .el-select__caret {
+          color: $color-basic-black;
+        }
+      }
+    }
+    &.has-value {
+      .el-select {
+        .el-select__caret {
+          color: $color-basic-black;
+        }
       }
     }
     &.disabled {
@@ -336,7 +363,10 @@ export default class SSelect extends Vue {
   }
 }
 .el-select-dropdown__item {
-  &.hover, &:hover {
+  &.hover {
+    background-color: transparent;
+  }
+  &:hover {
     background-color: $color-neutral-placeholder;
   }
   &.is-disabled {
@@ -348,7 +378,6 @@ export default class SSelect extends Vue {
     padding-left: 16px;
     vertical-align: top;
     color: $color-basic-black;
-    font-weight: normal;
   }
   &::before {
     font-family: "element-icons";
@@ -362,7 +391,11 @@ export default class SSelect extends Vue {
     border-radius: 4px;
   }
   &.selected {
+    font-weight: normal;
     &.hover {
+      background-color: transparent;
+    }
+    &:hover {
       background-color: $color-neutral-placeholder;
     }
     &::before {
diff --git a/src/styles/icons.scss b/src/styles/icons.scss
index 73248705..53039ba4 100644
--- a/src/styles/icons.scss
+++ b/src/styles/icons.scss
@@ -11,6 +11,7 @@
   -moz-osx-font-smoothing: grayscale;
   color: $color-basic-black;
 }
+$icons-font: 'soramitsu-icons' !important;
 /*_____________________________________________Icons variables_____________________________________________*/
 $s-icon-warning: "\e96c";
 $s-icon-logout: "\e98c";

From 1ee622b36f438ce117cffc64d83255f1390f85d9 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Thu, 10 Sep 2020 09:27:12 +0400
Subject: [PATCH 7/8] Fix picker styles

---
 src/components/DatePicker/SDatePicker.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/DatePicker/SDatePicker.vue b/src/components/DatePicker/SDatePicker.vue
index 6fc7d7c9..04fbc835 100644
--- a/src/components/DatePicker/SDatePicker.vue
+++ b/src/components/DatePicker/SDatePicker.vue
@@ -189,9 +189,12 @@ export default class SDatePicker extends Vue {
     this.$emit('change', value)
   }
 
+  get isRange (): boolean {
+    return ([PickerTypes.DATETIMERANGE, PickerTypes.DATERANGE, PickerTypes.MONTHRANGE] as Array<string>).includes(this.type)
+  }
+
   get isInputType (): boolean {
-    return !([PickerTypes.DATETIMERANGE, PickerTypes.DATERANGE, PickerTypes.MONTHRANGE] as Array<string>).includes(this.type) &&
-      this.inputType === InputTypes.INPUT
+    return !this.isRange && this.inputType === InputTypes.INPUT
   }
 
   get willHaveClearButton (): boolean {
@@ -220,7 +223,7 @@ export default class SDatePicker extends Vue {
     if (this.disabled) {
       cssClasses.push('disabled')
     }
-    if (this.model) {
+    if ((!this.isRange && this.model) || (this.isRange && this.model.length !== 0)) {
       cssClasses.push('has-value')
     }
     return cssClasses
@@ -338,6 +341,9 @@ export default class SDatePicker extends Vue {
   }
   &.select {
     .el-date-editor {
+      .el-input__inner, .el-range-input, .el-range-separator {
+        font-weight: bold;
+      }
       &.el-input__inner, & .el-input__inner {
         border-radius: 8px;
         padding-left: 12px;
@@ -346,6 +352,7 @@ export default class SDatePicker extends Vue {
         }
         &::placeholder, .el-range-input::placeholder {
           color: $color-neutral-tertiary;
+          font-weight: bold;
         }
       }
     }
@@ -364,6 +371,7 @@ export default class SDatePicker extends Vue {
       top: 30%;
       pointer-events: none;
       color: $color-neutral-tertiary;
+      transition: transform .3s;
     }
     &.has-value {
       .s-icon-chevron-bottom {

From 695a7f485526ad9d23a84e2dce868e97f35bb93c Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Thu, 10 Sep 2020 09:27:44 +0400
Subject: [PATCH 8/8] Update library version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 211112ee..f694e1f0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"