Checkbox component

src/components/Button/SButton.vue

@@ -160,18 +160,6 @@ export default class SButton extends Vue {
   }
 }
 
-.big {
-  height: $size-big;
-}
-
-.medium {
-  height: $size-medium;
-}
-
-.small {
-  height: $size-small;
-}
-
 .primary {
   &:hover, &:active, &:focus {
     background-color: $color-main-hover;

src/components/Checkbox/SCheckbox.vue

@@ -0,0 +1,175 @@
+<template>
+  <el-checkbox
+    :class="computedClasses"
+    :value="value"
+    :label="label"
+    :disabled="disabled"
+    :border="border"
+    :checked="checked"
+    :size="computedSize"
+    :name="name"
+    :indeterminate="indeterminate"
+    @change="handleChange"
+  >
+    <slot></slot>
+  </el-checkbox>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+import { CheckboxSize } from './consts'
+
+@Component
+export default class SCheckbox extends Vue {
+  /**
+   * Value of the checkbox item. Can be `string / number / boolean`
+   */
+  @Prop() readonly value!: string | number | boolean
+  /**
+   * Label of the checkbox item
+   */
+  @Prop() readonly label !: string | number | boolean
+  /**
+   * Disable state of the checkbox item.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+  /**
+   * It is set borders for checkbox item.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly border!: boolean
+  /**
+   * Checked state of the checkbox item.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly checked!: boolean
+  /**
+   * Size of the checkbox item. Possible values: `"big"`, `"medium"`, `"small"`.
+   *
+   * By default it's set to `"medium"`
+   */
+  @Prop({ default: CheckboxSize.MEDIUM, type: String }) readonly size!: string
+  /**
+   * Native name property of the checkbox item
+   */
+  @Prop({ default: '', type: String }) readonly name!: string
+  /**
+   * Native undefined state of the checkbox item.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly indeterminate!: boolean
+
+  get computedSize (): string {
+    if (this.size === CheckboxSize.BIG ||
+      !(Object.values(CheckboxSize) as Array<string>).includes(this.size)) {
+      return ''
+    }
+    return this.size
+  }
+
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if ((Object.values(CheckboxSize) as Array<string>).includes(this.size)) {
+      cssClasses.push(this.size)
+    }
+    return cssClasses
+  }
+
+  handleChange (value: number | string | boolean): void {
+    this.$emit('change', value)
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+@import "../../styles/common.scss";
+
+.el-checkbox {
+  &.big {
+    @extend .big;
+    padding: 17px 0 9px 0;
+    &.is-bordered {
+      padding: 17px 20px 9px 15px;
+    }
+  }
+  &.medium {
+    @extend .medium;
+    &, &.is-bordered {
+      padding: 9px 15px 7px 10px;
+      .el-checkbox__inner {
+        height: 16px;
+        width: 16px;
+        &::after {
+          top: 0;
+          left: 4px;
+          height: 8px;
+          width: 4px;
+        }
+      }
+    }
+    & {
+      padding: 9px 0 7px 0;
+    }
+  }
+  &.small {
+    @extend .small;
+    border-radius: 4px;
+    .el-checkbox__label {
+      font-size: 12px;
+    }
+    &, &.is-bordered {
+      padding: 5px 15px 5px 10px;
+      .el-checkbox__inner {
+        height: 14px;
+        width: 14px;
+        &::after {
+          top: 1px;
+          left: 4px;
+          height: 6px;
+          width: 2px;
+        }
+      }
+    }
+    & {
+      padding: 5px 0;
+    }
+  }
+}
+.el-checkbox__inner {
+  border-color: $color-neutral-inactive;
+  border-radius: 4px;
+  width: 20px;
+  height: 20px;
+  &::after {
+    border-width: 2px;
+    height: 10px;
+    left: 6px;
+    width: 5px;
+  }
+}
+.el-checkbox__input {
+  &.is-disabled {
+    .el-checkbox__inner {
+      background-color: $color-neutral-placeholder;
+    }
+    & + span.el-checkbox__label {
+      color: $color-neutral-inactive;
+    }
+  }
+  &.is-checked {
+    &.is-disabled > .el-checkbox__inner::after {
+      border-color: $color-neutral-inactive;
+    }
+    & + .el-checkbox__label {
+      color: $color-basic-black;
+    }
+  }
+}
+</style>

src/components/Checkbox/consts.ts

@@ -0,0 +1,3 @@
+import { Size } from '../../types/size'
+
+export const CheckboxSize = Size

src/components/Checkbox/index.ts

@@ -0,0 +1,4 @@
+import SCheckbox from './SCheckbox.vue'
+import { CheckboxSize } from './consts'
+
+export { SCheckbox, CheckboxSize }

src/components/ScrollSections/SScrollSections.vue

@@ -65,6 +65,10 @@ export default class SScrollSections extends Vue {
     })
   }
 
+  destroyed (): void {
+    window.removeEventListener('scroll', this.handleScroll)
+  }
+
   get computedStyles (): object {
     const styles = {} as any
     if (this.textColor) {

src/components/index.ts

@@ -5,6 +5,7 @@ import { SApp } from './Layout/App'
 import { SAside } from './Layout/Aside'
 import { SButton, SButtonGroup } from './Button'
 import { SCard } from './Card'
+import { SCheckbox } from './Checkbox'
 import { SCol } from './Layout/Col'
 import { SContainer } from './Layout/Container'
 import { SDropdown, SDropdownItem } from './Dropdown'
@@ -24,6 +25,7 @@ export {
   SButton,
   SButtonGroup,
   SCard,
+  SCheckbox,
   SCol,
   SContainer,
   SDropdown,

src/index.ts

@@ -6,6 +6,7 @@ import {
   SButton,
   SButtonGroup,
   SCard,
+  SCheckbox,
   SCol,
   SContainer,
   SFooter,
@@ -32,6 +33,7 @@ const elements = [
   { component: SButton, name: Components.SButton },
   { component: SButtonGroup, name: Components.SButtonGroup },
   { component: SCard, name: Components.SCard },
+  { component: SCheckbox, name: Components.SCheckbox },
   { component: SCol, name: Components.SCol },
   { component: SContainer, name: Components.SContainer },
   { component: SFooter, name: Components.SFooter },
@@ -67,6 +69,7 @@ export {
   SButton,
   SButtonGroup,
   SCard,
+  SCheckbox,
   SCol,
   SContainer,
   SFooter,

src/stories/SCheckbox.stories.ts

@@ -0,0 +1,81 @@
+import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
+
+import { SCheckbox, SRow, SCol } from '../components'
+import { CheckboxSize } from '../components/Checkbox'
+
+export default {
+  component: SCheckbox,
+  title: 'Design System/Checkbox',
+  decorators: [withKnobs],
+  excludeStories: /.*Data$/
+}
+
+export const configurable = () => ({
+  components: { SCheckbox, SRow },
+  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+               <s-checkbox
+                 :disabled="disabled"
+                 :border="border"
+                 :size="size"
+                 :label="label"
+                 @change="hangleChange"
+               >
+               </s-checkbox>
+             </s-row>`,
+  props: {
+    disabled: {
+      default: boolean('Disabled', false)
+    },
+    border: {
+      default: boolean('Border', false)
+    },
+    label: {
+      default: text('Label', 'Checkbox')
+    },
+    size: {
+      default: select('Size', Object.values(CheckboxSize), CheckboxSize.MEDIUM)
+    }
+  },
+  methods: {
+    hangleChange: (checked: boolean) => console.log(checked ? 'checked!' : 'unchecked!')
+  }
+})
+
+export const disabled = () => ({
+  components: { SCheckbox, SRow, SCol },
+  template: `<s-row :gutter="20" style="flex: 1;">
+               <s-col :span="6">
+                 <s-checkbox disabled size="big">
+                   Checkbox
+                 </s-checkbox>
+               </s-col>
+               <s-col :span="6">
+                 <s-checkbox disabled border size="big">
+                   Checkbox
+                 </s-checkbox>
+               </s-col>
+             </s-row>`
+})
+
+export const differentSizeData = Object.values(CheckboxSize).map(size =>
+  ({ size, label: size[0].toUpperCase() + size.slice(1) }))
+export const differentSize = () => ({
+  components: { SCheckbox, SRow, SCol },
+  template: `<s-row :gutter="20" style="flex: 1;">
+               <template v-for="item in items">
+                 <s-col :span="6" style="height: 56px; margin-bottom: 20px;">
+                   <s-checkbox :size="item.size">
+                     {{ item.label }}
+                   </s-checkbox>
+                 </s-col>
+                 <s-col :span="6" style="height: 56px; margin-bottom: 20px;">
+                   <s-checkbox border :size="item.size">
+                     {{ item.label }}
+                   </s-checkbox>
+                 </s-col>
+               </template>
+             </s-row>`,
+  data: () => ({
+    items: differentSizeData
+  })
+})

src/styles/common.scss

@@ -22,6 +22,18 @@ html {
   font-weight: bold;
 }
 
+.big {
+  height: $size-big;
+}
+
+.medium {
+  height: $size-medium;
+}
+
+.small {
+  height: $size-small;
+}
+
 button > span {
   position: relative;
 }

src/types/components.ts

@@ -4,6 +4,7 @@ export enum Components {
   SButton = 'SButton',
   SButtonGroup = 'SButtonGroup',
   SCard = 'SCard',
+  SCheckbox = 'SCheckbox',
   SCol= 'SCol',
   SContainer = 'SContainer',
   SFooter = 'SFooter',