From c257e9935033f698fe220816e11f2d6bc534769d Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Tue, 13 Oct 2020 01:04:52 +0300
Subject: [PATCH 1/3] Added Switch Component.

---
 src/components/Switch/SSwitch.vue | 93 +++++++++++++++++++++++++++++++
 src/components/Switch/index.ts    |  3 +
 src/types/components.ts           |  1 +
 3 files changed, 97 insertions(+)
 create mode 100644 src/components/Switch/SSwitch.vue
 create mode 100644 src/components/Switch/index.ts

diff --git a/src/components/Switch/SSwitch.vue b/src/components/Switch/SSwitch.vue
new file mode 100644
index 00000000..37bdb26c
--- /dev/null
+++ b/src/components/Switch/SSwitch.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="s-switch">
+    <el-switch
+      ref="el-switch"
+      v-model="model"
+      :active-color="activeColor"
+      :inactive-color="inactiveColor"
+      :active-icon-class="activeIconСlass"
+      :inactive-icon-class="inactiveIconСlass"
+      :active-text="activeText"
+      :inactive-text="inactiveText"
+      :active-value="activeValue"
+      :inactive-value="inactiveValue"
+      :name="name"
+      :width="width"
+      :disabled="disabled"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Ref, Watch } from 'vue-property-decorator'
+import { ElSwitch } from 'element-ui/types/switch'
+
+@Component
+export default class SSwitch extends Vue {
+  /**
+   * Value of switch
+   */
+  @Prop({ default: false }) readonly value!: boolean | string | number
+  /**
+   * Background color when in on state
+   */
+  @Prop({ default: '#d0021b', type: String }) readonly activeColor!: string
+  /**
+   * Background color when in off state
+   */
+  @Prop({ default: '#f6ccd1', type: String }) readonly inactiveColor!: string
+  /**
+   * Class name of the icon displayed when in on state, overrides active-text
+   */
+  @Prop({ default: '', type: String }) readonly activeIconСlass!: string
+  /**
+   * Class name of the icon displayed when in off state, overrides inactive-text
+   */
+  @Prop({ default: '', type: String }) readonly inactiveIconСlass!: string
+  /**
+   * Text displayed when in on state
+   */
+  @Prop({ default: '', type: String }) readonly activeText!: string
+  /**
+   * Text displayed when in off state
+   */
+  @Prop({ default: '', type: String }) readonly inactiveText!: string
+  /**
+   * Switch value when in on state
+   */
+  @Prop({ default: true }) readonly activeValue!: boolean | string | number
+  /**
+   * Switch value when in off state
+   */
+  @Prop({ default: false }) readonly inactiveValue!: boolean | string | number
+  /**
+   * Input name of switch
+   */
+  @Prop({ default: '', type: String }) readonly name!: string
+  /**
+   * Width of switch
+   */
+  @Prop({ default: 40, type: Number }) readonly width!: number
+  /**
+   * Whether switch is disabled
+   */
+  @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+
+  model = this.value
+
+  @Watch('value')
+  private handlePropChange (value: boolean | string | number): void {
+    this.model = value
+  }
+
+  @Watch('model')
+  private handleValueChange (value: boolean | string | number): void {
+    this.$emit('input', value)
+  }
+
+  handleChange (value: boolean | string | number): void {
+    this.$emit('change', value)
+  }
+}
+</script>
diff --git a/src/components/Switch/index.ts b/src/components/Switch/index.ts
new file mode 100644
index 00000000..2040039d
--- /dev/null
+++ b/src/components/Switch/index.ts
@@ -0,0 +1,3 @@
+import SSwitch from './SSwitch.vue'
+
+export { SSwitch }
diff --git a/src/types/components.ts b/src/types/components.ts
index 3c4d1a20..7c180c2f 100644
--- a/src/types/components.ts
+++ b/src/types/components.ts
@@ -36,6 +36,7 @@ export enum Components {
   SScrollSections = 'SScrollSections',
   SSelect = 'SSelect',
   SSubmenu = 'SSubmenu',
+  SSwitch = 'SSwitch',
   STab = 'STab',
   STabs = 'STabs',
   STable = 'STable',

From 7e524fc08f63cfeb42144dfa39d5ba421cf838c2 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Tue, 13 Oct 2020 01:25:39 +0300
Subject: [PATCH 2/3] Switch Component: Added Story.

---
 src/stories/SSwitch.stories.ts | 73 ++++++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 src/stories/SSwitch.stories.ts

diff --git a/src/stories/SSwitch.stories.ts b/src/stories/SSwitch.stories.ts
new file mode 100644
index 00000000..505f7ecb
--- /dev/null
+++ b/src/stories/SSwitch.stories.ts
@@ -0,0 +1,73 @@
+import { color, text, number, boolean, withKnobs } from '@storybook/addon-knobs'
+
+import { SSwitch } from '../components/Switch'
+
+export default {
+  component: SSwitch,
+  title: 'Design System/Components/Switch',
+  decorators: [withKnobs],
+  excludeStories: /.*Data$/
+}
+
+export const configurable = () => ({
+  components: { SSwitch },
+  template: `<div class="s-flex" style="flex: 1; flex-direction: column;">
+              <s-switch
+                v-model="modelValue"
+                :active-color="activeColor"
+                :inactive-color="inactiveColor"
+                :active-icon-class="activeIconСlass"
+                :inactive-icon-class="inactiveIconСlass"
+                :active-text="activeText"
+                :inactive-text="inactiveText"
+                :active-value="activeValue"
+                :inactive-value="inactiveValue"
+                :name="name"
+                :width="width"
+                :disabled="disabled"
+                @change="(value) => changeValue = value"
+              />
+              <span style="margin-top: 20px;">
+                v-model="{{ modelValue }}", @change="{{ changeValue }}"
+              </span>
+            </div>`,
+  data: () => ({
+    modelValue: true,
+    changeValue: true
+  }),
+  props: {
+    activeColor: {
+      default: color('Active Background Color', 'rgb(208, 2, 27)')
+    },
+    inactiveColor: {
+      default: color('Inactive Background Color', 'rgb(246, 204, 209)')
+    },
+    activeIconСlass: {
+      default: text('Active Icon Сlass', 's-switch-active')
+    },
+    inactiveIconСlass: {
+      default: text('Inactive Icon Сlass', 's-switch-inactive')
+    },
+    activeText: {
+      default: text('Active Text', '')
+    },
+    inactiveText: {
+      default: text('Inactive Text', '')
+    },
+    activeValue: {
+      default: text('Active Value', 'Active Value')
+    },
+    inactiveValue: {
+      default: text('Inactive Value', 'Inactive Value')
+    },
+    name: {
+      default: text('Name', 'switch-example')
+    },
+    width: {
+      default: number('Width', 40)
+    },
+    disabled: {
+      default: boolean('Disabled', false)
+    }
+  }
+})

From bbb254ee9fb29f51a08bfc3085d0993354baa66f Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Tue, 13 Oct 2020 21:45:02 +0300
Subject: [PATCH 3/3] Switch Component: refactored, removed unnecessary fields
 from story.

---
 src/components/index.ts        |  2 ++
 src/index.ts                   |  3 +++
 src/stories/SSwitch.stories.ts | 12 ------------
 src/styles/index.scss          |  1 +
 src/styles/switch.scss         | 10 ++++++++++
 5 files changed, 16 insertions(+), 12 deletions(-)
 create mode 100644 src/styles/switch.scss

diff --git a/src/components/index.ts b/src/components/index.ts
index 573e5ba2..b5be4cd7 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -23,6 +23,7 @@ import { SInput, SJsonInput } from './Input'
 import { SMain } from './Layout/Main'
 import { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu'
 import { SPagination } from './Pagination'
+import { SSwitch } from './Switch'
 import { SRadio } from './Radio'
 import { SRow } from './Layout/Row'
 import { SScrollSectionItem, SScrollSections } from './ScrollSections'
@@ -69,6 +70,7 @@ export {
   SScrollSections,
   SSelect,
   SSubmenu,
+  SSwitch,
   STab,
   STabs,
   STable,
diff --git a/src/index.ts b/src/index.ts
index ba537aae..c012779e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -38,6 +38,7 @@ import {
   SScrollSections,
   SSelect,
   SSubmenu,
+  SSwitch,
   STab,
   STabs,
   STable,
@@ -87,6 +88,7 @@ const components = [
   { component: SScrollSections, name: Components.SScrollSections },
   { component: SSelect, name: Components.SSelect },
   { component: SSubmenu, name: Components.SSubmenu },
+  { component: SSwitch, name: Components.SSwitch },
   { component: STab, name: Components.STab },
   { component: STabs, name: Components.STabs },
   { component: STable, name: Components.STable },
@@ -152,6 +154,7 @@ export {
   SScrollSections,
   SSelect,
   SSubmenu,
+  SSwitch,
   STab,
   STabs,
   STable,
diff --git a/src/stories/SSwitch.stories.ts b/src/stories/SSwitch.stories.ts
index 505f7ecb..7ad0ef19 100644
--- a/src/stories/SSwitch.stories.ts
+++ b/src/stories/SSwitch.stories.ts
@@ -16,13 +16,10 @@ export const configurable = () => ({
                 v-model="modelValue"
                 :active-color="activeColor"
                 :inactive-color="inactiveColor"
-                :active-icon-class="activeIconСlass"
-                :inactive-icon-class="inactiveIconСlass"
                 :active-text="activeText"
                 :inactive-text="inactiveText"
                 :active-value="activeValue"
                 :inactive-value="inactiveValue"
-                :name="name"
                 :width="width"
                 :disabled="disabled"
                 @change="(value) => changeValue = value"
@@ -42,12 +39,6 @@ export const configurable = () => ({
     inactiveColor: {
       default: color('Inactive Background Color', 'rgb(246, 204, 209)')
     },
-    activeIconСlass: {
-      default: text('Active Icon Сlass', 's-switch-active')
-    },
-    inactiveIconСlass: {
-      default: text('Inactive Icon Сlass', 's-switch-inactive')
-    },
     activeText: {
       default: text('Active Text', '')
     },
@@ -60,9 +51,6 @@ export const configurable = () => ({
     inactiveValue: {
       default: text('Inactive Value', 'Inactive Value')
     },
-    name: {
-      default: text('Name', 'switch-example')
-    },
     width: {
       default: number('Width', 40)
     },
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 9b2002d7..12bc8763 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -18,6 +18,7 @@
 @import "./radio";
 @import "./scroll-sections";
 @import "./select";
+@import "./switch";
 @import "./tabs";
 @import "./table";
 @import "./tooltip";
diff --git a/src/styles/switch.scss b/src/styles/switch.scss
new file mode 100644
index 00000000..7db1a641
--- /dev/null
+++ b/src/styles/switch.scss
@@ -0,0 +1,10 @@
+@import "./variables";
+
+.s-switch {
+  .el-switch__label {
+    color: var(--s-color-basic-black);
+    &.is-active {
+      color: var(--s-color-main-brand);
+    }
+  }
+}