From 7c5f8ca629f69d186d5680a961eea6eb0c1d1718 Mon Sep 17 00:00:00 2001
From: Szafran <pawel.szafranski@snow.dog>
Date: Fri, 28 Aug 2020 16:09:07 +0200
Subject: [PATCH 1/5] Moved input, checkbox components

---
 src/atoms/icon/Icon.stories.js             |   2 +-
 src/atoms/label/Label.css                  |   2 +-
 src/molecules/checkbox/Checkbox.css        |  93 ++++++++++++++++++
 src/molecules/checkbox/Checkbox.html       |  28 ++++++
 src/molecules/checkbox/Checkbox.js         |  39 ++++++++
 src/molecules/checkbox/Checkbox.spec.js    | 101 +++++++++++++++++++
 src/molecules/checkbox/Checkbox.stories.js |  72 ++++++++++++++
 src/molecules/checkbox/Checkbox.vue        |  15 +++
 src/molecules/input/Input.css              |  32 ++++++
 src/molecules/input/Input.html             |  20 ++++
 src/molecules/input/Input.js               |  35 +++++++
 src/molecules/input/Input.selectors.json   |   6 ++
 src/molecules/input/Input.spec.js          |  66 +++++++++++++
 src/molecules/input/Input.stories.js       | 108 +++++++++++++++++++++
 src/molecules/input/Input.vue              |  16 +++
 15 files changed, 633 insertions(+), 2 deletions(-)
 create mode 100644 src/molecules/checkbox/Checkbox.css
 create mode 100644 src/molecules/checkbox/Checkbox.html
 create mode 100644 src/molecules/checkbox/Checkbox.js
 create mode 100644 src/molecules/checkbox/Checkbox.spec.js
 create mode 100644 src/molecules/checkbox/Checkbox.stories.js
 create mode 100644 src/molecules/checkbox/Checkbox.vue
 create mode 100644 src/molecules/input/Input.css
 create mode 100644 src/molecules/input/Input.html
 create mode 100644 src/molecules/input/Input.js
 create mode 100644 src/molecules/input/Input.selectors.json
 create mode 100644 src/molecules/input/Input.spec.js
 create mode 100644 src/molecules/input/Input.stories.js
 create mode 100644 src/molecules/input/Input.vue

diff --git a/src/atoms/icon/Icon.stories.js b/src/atoms/icon/Icon.stories.js
index 9cda1693f..8fa003d94 100644
--- a/src/atoms/icon/Icon.stories.js
+++ b/src/atoms/icon/Icon.stories.js
@@ -338,7 +338,7 @@ export const Default = () => ({
           <a-icon-visibility-off />
         </a-icon>
         <span :style="labelStyles">
-          visibility
+          visibility Off
         </span>
       </div>
       <div :style="wrapperStyles">
diff --git a/src/atoms/label/Label.css b/src/atoms/label/Label.css
index f76765d48..125db3bbb 100644
--- a/src/atoms/label/Label.css
+++ b/src/atoms/label/Label.css
@@ -1,7 +1,7 @@
 .a-label {
   @apply block;
   @apply mb-1;
-  @apply text-gray-600 leading-relaxed;
+  @apply text-gray-600 text-sm leading-relaxed;
 }
 
 .a-label--inline {
diff --git a/src/molecules/checkbox/Checkbox.css b/src/molecules/checkbox/Checkbox.css
new file mode 100644
index 000000000..33f99786d
--- /dev/null
+++ b/src/molecules/checkbox/Checkbox.css
@@ -0,0 +1,93 @@
+/* @import '../../../assets/styles/_variables';
+
+$checkbox__icon-size                             : 14px !default;
+$checkbox__icon-fill                             : $white !default;
+
+$checkbox__icon-wrapper-margin                   : 0 $spacer 0 0 !default;
+$checkbox__icon-wrapper-border                   : 2px solid $gray !default;
+$checkbox__icon-wrapper-border-radius            : 2px !default;
+
+$checkbox__icon-wrapper-border--checked          : 2px solid $color-primary !default;
+$checkbox__icon-wrapper-background-color--checked: $color-primary !default;
+
+.a-checkbox {
+  position: relative;
+  display: flex;
+
+  &__field {
+    position: absolute;
+    opacity: 0;
+
+    &:checked + .a-checkbox__label {
+      .a-checkbox__icon-wrapper {
+        background-color: $checkbox__icon-wrapper-background-color--checked;
+        border: $checkbox__icon-wrapper-border--checked;
+      }
+
+      .a-checkbox__icon {
+        opacity: 1;
+      }
+    }
+  }
+
+  &__label {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  &__icon-wrapper {
+    margin: $checkbox__icon-wrapper-margin;
+    border: $checkbox__icon-wrapper-border;
+    border-radius: $checkbox__icon-wrapper-border-radius;
+  }
+
+  &__icon {
+    width: $checkbox__icon-size;
+    height: $checkbox__icon-size;
+    cursor: pointer;
+    opacity: 0;
+    fill: $checkbox__icon-fill;
+  }
+} */
+
+.a-checkbox {
+  @apply relative;
+  @apply flex;
+}
+
+.a-checkbox__field {
+  @apply absolute opacity-0;
+}
+
+.a-checkbox__field:checked + .a-checkbox__label {
+  @apply text-default;
+}
+
+.a-checkbox__field:checked + .a-checkbox__label .a-checkbox__icon-wrapper {
+  @apply bg-dark;
+  @apply border-dark;
+}
+
+.a-checkbox__field:checked + .a-checkbox__label .a-checkbox__icon {
+  @apply opacity-100;
+  @apply fill-white;
+}
+
+.a-checkbox__label {
+  @apply flex items-center;
+  @apply text-sm text-gray-600;
+  @apply cursor-pointer;
+}
+
+.a-checkbox__icon-wrapper {
+  @apply mr-4;
+  @apply border-2 border-solid border-secondary rounded-sm;
+}
+
+.a-checkbox__icon {
+  @apply w-5 h-5;
+  @apply opacity-0;
+  @apply cursor-pointer;
+  @apply fill-gray-600;
+}
diff --git a/src/molecules/checkbox/Checkbox.html b/src/molecules/checkbox/Checkbox.html
new file mode 100644
index 000000000..ef2d648c1
--- /dev/null
+++ b/src/molecules/checkbox/Checkbox.html
@@ -0,0 +1,28 @@
+<div class="a-checkbox">
+  <input
+    v-bind="$attrs"
+    :id="id"
+    type="checkbox"
+    :class="['a-checkbox__field', inputClass]"
+    :checked="checked"
+    @change="$emit('change', $event.target.checked)"
+  >
+  <!-- @slot Custom checkbox markup (Named slot) -->
+  <slot name="label">
+    <label
+      :for="id"
+      class="a-checkbox__label"
+    >
+      <div class="a-checkbox__icon-wrapper">
+        <a-icon
+          :title="iconTitle"
+          class="a-checkbox__icon"
+        >
+          <a-icon-check />
+        </a-icon>
+      </div>
+      <!-- @slot Custom label content (Default slot) -->
+      <slot />
+    </label>
+  </slot>
+</div>
diff --git a/src/molecules/checkbox/Checkbox.js b/src/molecules/checkbox/Checkbox.js
new file mode 100644
index 000000000..56e93400b
--- /dev/null
+++ b/src/molecules/checkbox/Checkbox.js
@@ -0,0 +1,39 @@
+// @vue/component
+
+export default {
+  inheritAttrs: false,
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+  props: {
+    /**
+     * Prop to handle v-model
+     */
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Input id
+     */
+    id: {
+      type: String,
+      required: true
+    },
+    /**
+     * Class for input
+     */
+    inputClass: {
+      type: String,
+      default: null
+    },
+    /**
+     * Icon title
+     */
+    iconTitle: {
+      type: String,
+      default: null
+    }
+  }
+}
diff --git a/src/molecules/checkbox/Checkbox.spec.js b/src/molecules/checkbox/Checkbox.spec.js
new file mode 100644
index 000000000..7c0254883
--- /dev/null
+++ b/src/molecules/checkbox/Checkbox.spec.js
@@ -0,0 +1,101 @@
+import { mount } from '@vue/test-utils'
+import ACheckbox from './Checkbox.vue'
+
+describe('Checkbox', () => {
+  it('has default structure', () => {
+    const wrapper = mount(ACheckbox, {
+      propsData: {
+        id: '1',
+        name: 'Checkbox',
+        value: 'checkbox'
+      }
+    })
+
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('a-checkbox')
+    expect(wrapper.classes().length).toBe(1)
+  })
+
+  it('renders default slots content when passed', () => {
+    const wrapper = mount(ACheckbox, {
+      propsData: {
+        id: '1',
+        name: 'Checkbox',
+        value: 'checkbox'
+      },
+      slots: {
+        default: '<span data-test="default">Default slot</span>'
+      }
+    })
+
+    const span = wrapper.find('.a-checkbox__label span[data-test="default"]')
+    expect(span.exists()).toBe(true)
+    expect(span.text()).toEqual('Default slot')
+  })
+
+  it('renders named slots content when passed', () => {
+    const wrapper = mount(ACheckbox, {
+      propsData: {
+        id: '1',
+        name: 'Checkbox',
+        value: 'checkbox'
+      },
+      slots: {
+        label: '<label data-test="label">Label</label>'
+      }
+    })
+
+    const label = wrapper.find('label[data-test="label"]')
+    expect(label.exists()).toBe(true)
+    expect(label.text()).toEqual('Label')
+  })
+
+  it('default has input type radio', () => {
+    const wrapper = mount(ACheckbox, {
+      propsData: {
+        id: '1',
+        name: 'Checkbox',
+        value: 'checkbox'
+      }
+    })
+
+    const input = wrapper.find('.a-checkbox__field')
+    expect(input.attributes('type')).toBeDefined()
+    expect(input.attributes('type')).toEqual('checkbox')
+  })
+
+  it('default has no disabled attribute on input', () => {
+    const wrapper = mount(ACheckbox, {
+      propsData: {
+        id: '1',
+        name: 'Checkbox',
+        value: 'checkbox'
+      }
+    })
+
+    const input = wrapper.find('.a-checkbox__field')
+    expect(input.attributes('disabled')).not.toBeDefined()
+  })
+
+  it('emits a change event when clicked', () => {
+    const wrapper = mount(ACheckbox, {
+      propsData: {
+        id: '1',
+        name: 'Checkbox',
+        value: 'checkbox'
+      }
+    })
+
+    const input = wrapper.find('.a-checkbox__field')
+    expect(input).toBeDefined()
+    input.trigger('click')
+    expect(wrapper.emitted('change')).toBeDefined()
+    expect(wrapper.emitted('change').length).toBe(1)
+    expect(wrapper.emitted('change')[0][0]).toEqual(true)
+
+    input.trigger('click')
+    expect(wrapper.emitted('change')).toBeDefined()
+    expect(wrapper.emitted('change').length).toBe(2)
+    expect(wrapper.emitted('change')[1][0]).toEqual(false)
+  })
+})
diff --git a/src/molecules/checkbox/Checkbox.stories.js b/src/molecules/checkbox/Checkbox.stories.js
new file mode 100644
index 000000000..a6642dbc9
--- /dev/null
+++ b/src/molecules/checkbox/Checkbox.stories.js
@@ -0,0 +1,72 @@
+import { storiesOf } from '@storybook/vue'
+import { action } from '@storybook/addon-actions'
+
+import ACheckbox from './Checkbox.vue'
+import AIcon from './../../atoms/icon/Icon.vue'
+import AIconCheck from './../../atoms/icon/templates/IconCheck.vue'
+
+const defaultData = {
+  data: () => {
+    return {
+      status: true
+    }
+  },
+  methods: {
+    onChange: action('Option changed')
+  }
+}
+
+storiesOf('Molecules/Checkbox', module)
+  .addParameters({ info: true })
+  .add('Default', () => ({
+    ...defaultData,
+    components: { ACheckbox },
+    template: `
+      <a-checkbox
+        id="checkbox-default"
+        name="checkbox-default"
+        icon-title="Checked icon"
+        v-model="status"
+        value="some value"
+        @change="onChange"
+      >
+        Checkbox field
+      </a-checkbox>
+    `
+  }))
+  .add('With slot', () => ({
+    ...defaultData,
+    components: {
+      ACheckbox,
+      AIcon,
+      AIconCheck
+    },
+    template: `
+      <a-checkbox
+        id="checkbox-slots"
+        name="checkbox-slots"
+        input-class="a-checkbox__field"
+        v-model="status"
+        value="some value"
+        @change="onChange"
+      >
+        <template #label>
+          <label
+            for="checkbox-slots"
+            class="a-checkbox__label"
+            style="color: #0000ff;"
+          >
+            <div class="a-checkbox__icon-wrapper">
+              <a-icon
+                class="a-checkbox__icon"
+                title="Checked icon"
+              >
+                <a-icon-check />
+              </a-icon>
+            </div>
+            I hereby agree for processing my personal data.
+          </label>
+        </template>
+      </a-checkbox>
+    `
+  }))
diff --git a/src/molecules/checkbox/Checkbox.vue b/src/molecules/checkbox/Checkbox.vue
new file mode 100644
index 000000000..5bd2bda41
--- /dev/null
+++ b/src/molecules/checkbox/Checkbox.vue
@@ -0,0 +1,15 @@
+<template src="./Checkbox.html" />
+
+<script>
+import ACheckbox from './Checkbox.js'
+
+import AIcon from '../../atoms/icon/Icon.vue'
+import AIconCheck from '../../atoms/icon/templates/IconCheck.vue'
+
+export default {
+  components: { AIcon, AIconCheck },
+  mixins: [ACheckbox]
+}
+</script>
+
+<style src="./Checkbox.css" />
diff --git a/src/molecules/input/Input.css b/src/molecules/input/Input.css
new file mode 100644
index 000000000..270d5edfb
--- /dev/null
+++ b/src/molecules/input/Input.css
@@ -0,0 +1,32 @@
+.a-input {
+  @apply relative;
+  @apply mb-4;
+}
+
+.a-input__field {
+  @apply w-full h-12;
+  @apply px-4;
+  @apply border border-solid border-secondary;
+}
+
+.a-input__field::placeholder {
+  @apply text-gray-600;
+}
+
+.a-input__field[type='search'] {
+  -webkit-appearance: textfield;
+}
+
+.a-input__field[type='search']::-webkit-search-decoration,
+.a-input__field[type='search']::-webkit-search-cancel-button {
+  @apply appearance-none;
+}
+
+.a-input--inline {
+  @apply flex .items-center;
+}
+
+.a-input--inline .a-label {
+  @apply flex-shrink-0;
+  @apply mr-4;
+}
diff --git a/src/molecules/input/Input.html b/src/molecules/input/Input.html
new file mode 100644
index 000000000..a98972bed
--- /dev/null
+++ b/src/molecules/input/Input.html
@@ -0,0 +1,20 @@
+<div class="a-input">
+  <!-- @slot Label (Named slot) -->
+  <slot name="label">
+    <a-label
+      v-if="label"
+      :for="id"
+    >
+      {{ label }}
+    </a-label>
+  </slot>
+  <input
+    v-bind="$attrs"
+    v-on="listeners"
+    :value="value"
+    :id="id"
+    class="a-input__field"
+  >
+  <!-- @slot Icon (Named slot) -->
+  <slot name="icon" />
+</div>
diff --git a/src/molecules/input/Input.js b/src/molecules/input/Input.js
new file mode 100644
index 000000000..8b6673e77
--- /dev/null
+++ b/src/molecules/input/Input.js
@@ -0,0 +1,35 @@
+// @vue/component
+export default {
+  inheritAttrs: false,
+  props: {
+    /**
+     * Prop to handle v-model
+     */
+    value: {
+      type: String,
+      default: null
+    },
+    /**
+     * Input id
+     */
+    id: {
+      type: String,
+      required: true
+    },
+    /**
+     * Label text
+     */
+    label: {
+      type: String,
+      default: null
+    }
+  },
+  computed: {
+    listeners () {
+      return {
+        ...this.$listeners,
+        input: event => this.$emit('input', event.target.value)
+      }
+    }
+  }
+}
diff --git a/src/molecules/input/Input.selectors.json b/src/molecules/input/Input.selectors.json
new file mode 100644
index 000000000..ae4039a4c
--- /dev/null
+++ b/src/molecules/input/Input.selectors.json
@@ -0,0 +1,6 @@
+[
+  {
+    "name": ".a-input--inline",
+    "description": "Selector for applying inline styles"
+  }
+]
diff --git a/src/molecules/input/Input.spec.js b/src/molecules/input/Input.spec.js
new file mode 100644
index 000000000..922a5bdcb
--- /dev/null
+++ b/src/molecules/input/Input.spec.js
@@ -0,0 +1,66 @@
+import { mount } from '@vue/test-utils'
+import AInput from './Input.vue'
+
+describe('Input', () => {
+  it('has default structure', () => {
+    const wrapper = mount(AInput, {
+      propsData: {
+        id: 'input-id'
+      }
+    })
+    const input = wrapper.find('.a-input__field')
+
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('a-input')
+    expect(wrapper.classes().length).toBe(1)
+
+    expect(input.is('input')).toBe(true)
+    expect(input.classes()).toContain('a-input__field')
+    expect(input.classes().length).toBe(1)
+    expect(input.attributes().id).toBeDefined()
+    expect(input.attributes().id).toBe('input-id')
+  })
+
+  it('renders email input when type set to email', () => {
+    const wrapper = mount(AInput, {
+      propsData: {
+        id: 'input-id',
+        type: 'email'
+      }
+    })
+
+    const input = wrapper.find('.a-input__field')
+    expect(input.attributes('type')).toBe('email')
+  })
+
+  it('renders slots content when passed', () => {
+    const wrapper = mount(AInput, {
+      propsData: {
+        id: 'input-id'
+      },
+      slots: {
+        label: '<label for="input-id">Alpaca UI</label>'
+      }
+    })
+
+    const label = wrapper.find('.a-input > label')
+
+    expect(label.exists()).toBe(true)
+    expect(label.text()).toEqual('Alpaca UI')
+  })
+
+  it('emits an input event', () => {
+    const wrapper = mount(AInput, {
+      propsData: {
+        id: 'input-id'
+      }
+    })
+
+    const textInput = wrapper.find('input')
+    textInput.setValue('Sample text')
+
+    expect(wrapper.emitted('input')).toBeTruthy()
+    expect(wrapper.emitted().input[0].length).toBe(1)
+    expect(wrapper.emitted().input[0][0]).toEqual('Sample text')
+  })
+})
diff --git a/src/molecules/input/Input.stories.js b/src/molecules/input/Input.stories.js
new file mode 100644
index 000000000..f0b4f1910
--- /dev/null
+++ b/src/molecules/input/Input.stories.js
@@ -0,0 +1,108 @@
+import { select, text } from '@storybook/addon-knobs'
+
+import getClassKnobsConfig from '@utils/helpers/get-class-knobs-config.js'
+import selectorsConfig from './Input.selectors.json'
+
+import AInput from './Input.vue'
+import AIcon from '../../atoms/icon/Icon.vue'
+import AIconVisibility from '../../atoms/icon/templates/IconVisibility.vue'
+import AIconVisibilityOff from '../../atoms/icon/templates/IconVisibilityOff.vue'
+
+const inputTypes = ['text', 'email', 'search', 'number', 'password', 'hidden']
+const classKnobsConfig = getClassKnobsConfig(selectorsConfig)
+
+export default {
+  title: 'Molecules/Input',
+  component: AInput
+}
+
+export const Default = () => ({
+  components: { AInput },
+  props: {
+    classKnob: {
+      default: select('BEM Modifier', classKnobsConfig)
+    },
+    placeholderKnob: {
+      default: text('Placeholder', 'First and last name')
+    },
+    labelKnob: {
+      default: text('Label', 'Label')
+    },
+    typeKnob: {
+      default: select('Type', inputTypes, 'text')
+    }
+  },
+  data: () => {
+    return {
+      value: ''
+    }
+  },
+  template: `
+    <a-input
+      :class="classKnob"
+      v-model="value"
+      :type="typeKnob"
+      :label="labelKnob"
+      :placeholder="placeholderKnob"
+      id="input-id"
+    />
+  `
+})
+
+export const Password = () => ({
+  components: { AInput, AIcon, AIconVisibility, AIconVisibilityOff },
+  props: {
+    classKnob: {
+      default: select('BEM Modifier', classKnobsConfig)
+    },
+    placeholderKnob: {
+      default: text('Placeholder', 'First and last name')
+    },
+    labelKnob: {
+      default: text('Label', 'Label')
+    }
+  },
+  data: () => {
+    return {
+      value: '',
+      passwordVisible: false,
+      inputType: 'password',
+      iconStyles: {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        display: 'flex',
+        'align-items': 'center',
+        'justify-content': 'center',
+        width: '48px',
+        height: '48px',
+        cursor: 'pointer'
+      }
+    }
+  },
+  methods: {
+    toggle () {
+      this.passwordVisible = !this.passwordVisible
+      this.inputType = this.inputType === 'password' ? 'text' : 'password'
+    }
+  },
+  template: `
+    <a-input
+      :class="classKnob"
+      v-model="value"
+      :label="labelKnob"
+      :type="inputType"
+      :placeholder="placeholderKnob"
+      id="input-id"
+    >
+      <template #icon>
+        <div :style="iconStyles" @click="toggle">
+          <a-icon>
+            <a-icon-visibility v-if="passwordVisible" />
+            <a-icon-visibility-off v-else />
+          </a-icon>
+        </div>
+      </template>
+    </a-input>
+  `
+})
diff --git a/src/molecules/input/Input.vue b/src/molecules/input/Input.vue
new file mode 100644
index 000000000..5d8e95c5e
--- /dev/null
+++ b/src/molecules/input/Input.vue
@@ -0,0 +1,16 @@
+<template src="./Input.html" />
+
+<script>
+import AInput from './Input.js'
+import ALabel from '../../atoms/label/Label.vue'
+
+export default {
+  name: 'AlpacaInput',
+  components: {
+    ALabel
+  },
+  mixins: [AInput]
+}
+</script>
+
+<style src="./Input.css" />

From 1d9a24ba47f57f8223f82fe9d96895f183ee984d Mon Sep 17 00:00:00 2001
From: Szafran <pawel.szafranski@snow.dog>
Date: Fri, 11 Sep 2020 13:44:48 +0200
Subject: [PATCH 2/5] Fix for icon password classes

---
 src/molecules/input/Input.css        |  2 +-
 src/molecules/input/Input.stories.js | 18 +++++-------------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/molecules/input/Input.css b/src/molecules/input/Input.css
index 270d5edfb..a5da8469d 100644
--- a/src/molecules/input/Input.css
+++ b/src/molecules/input/Input.css
@@ -23,7 +23,7 @@
 }
 
 .a-input--inline {
-  @apply flex .items-center;
+  @apply flex items-center;
 }
 
 .a-input--inline .a-label {
diff --git a/src/molecules/input/Input.stories.js b/src/molecules/input/Input.stories.js
index f0b4f1910..66f611ddf 100644
--- a/src/molecules/input/Input.stories.js
+++ b/src/molecules/input/Input.stories.js
@@ -66,18 +66,7 @@ export const Password = () => ({
     return {
       value: '',
       passwordVisible: false,
-      inputType: 'password',
-      iconStyles: {
-        position: 'absolute',
-        bottom: 0,
-        right: 0,
-        display: 'flex',
-        'align-items': 'center',
-        'justify-content': 'center',
-        width: '48px',
-        height: '48px',
-        cursor: 'pointer'
-      }
+      inputType: 'password'
     }
   },
   methods: {
@@ -96,7 +85,10 @@ export const Password = () => ({
       id="input-id"
     >
       <template #icon>
-        <div :style="iconStyles" @click="toggle">
+        <div
+          class="absolute bottom-0 right-0 flex items-center justify-center w-12 h-12 cursor-pointer"
+          @click="toggle"
+        >
           <a-icon>
             <a-icon-visibility v-if="passwordVisible" />
             <a-icon-visibility-off v-else />

From 715c4fab2a12149548ff882284fb5e1d9eb6b117 Mon Sep 17 00:00:00 2001
From: Szafran <pawel.szafranski@snow.dog>
Date: Fri, 11 Sep 2020 13:45:09 +0200
Subject: [PATCH 3/5] Removed icon title

---
 src/molecules/checkbox/Checkbox.html       |  5 +--
 src/molecules/checkbox/Checkbox.js         |  7 ----
 src/molecules/checkbox/Checkbox.stories.js | 40 ++++++++++++++--------
 3 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/molecules/checkbox/Checkbox.html b/src/molecules/checkbox/Checkbox.html
index ef2d648c1..fcea9e0e6 100644
--- a/src/molecules/checkbox/Checkbox.html
+++ b/src/molecules/checkbox/Checkbox.html
@@ -14,10 +14,7 @@
       class="a-checkbox__label"
     >
       <div class="a-checkbox__icon-wrapper">
-        <a-icon
-          :title="iconTitle"
-          class="a-checkbox__icon"
-        >
+        <a-icon class="a-checkbox__icon">
           <a-icon-check />
         </a-icon>
       </div>
diff --git a/src/molecules/checkbox/Checkbox.js b/src/molecules/checkbox/Checkbox.js
index 56e93400b..669ff883e 100644
--- a/src/molecules/checkbox/Checkbox.js
+++ b/src/molecules/checkbox/Checkbox.js
@@ -27,13 +27,6 @@ export default {
     inputClass: {
       type: String,
       default: null
-    },
-    /**
-     * Icon title
-     */
-    iconTitle: {
-      type: String,
-      default: null
     }
   }
 }
diff --git a/src/molecules/checkbox/Checkbox.stories.js b/src/molecules/checkbox/Checkbox.stories.js
index a6642dbc9..fbfcb6148 100644
--- a/src/molecules/checkbox/Checkbox.stories.js
+++ b/src/molecules/checkbox/Checkbox.stories.js
@@ -8,7 +8,8 @@ import AIconCheck from './../../atoms/icon/templates/IconCheck.vue'
 const defaultData = {
   data: () => {
     return {
-      status: true
+      status: true,
+      status1: false
     }
   },
   methods: {
@@ -22,16 +23,28 @@ storiesOf('Molecules/Checkbox', module)
     ...defaultData,
     components: { ACheckbox },
     template: `
-      <a-checkbox
-        id="checkbox-default"
-        name="checkbox-default"
-        icon-title="Checked icon"
-        v-model="status"
-        value="some value"
-        @change="onChange"
-      >
-        Checkbox field
-      </a-checkbox>
+      <div>
+        <a-checkbox
+          class="mb-4"
+          id="checkbox-default"
+          name="checkbox-default1"
+          v-model="status"
+          value="some value"
+          @change="onChange"
+        >
+          Checkbox field
+        </a-checkbox>
+        <a-checkbox
+          class="mb-4"
+          id="checkbox-default1"
+          name="checkbox-default1"
+          v-model="status1"
+          value="some value"
+          @change="onChange"
+        >
+          Checkbox field
+        </a-checkbox>
+      </div>
     `
   }))
   .add('With slot', () => ({
@@ -57,10 +70,7 @@ storiesOf('Molecules/Checkbox', module)
             style="color: #0000ff;"
           >
             <div class="a-checkbox__icon-wrapper">
-              <a-icon
-                class="a-checkbox__icon"
-                title="Checked icon"
-              >
+              <a-icon class="a-checkbox__icon">
                 <a-icon-check />
               </a-icon>
             </div>

From f74173ca229e14874ee8f72d03e852a84f3a89dc Mon Sep 17 00:00:00 2001
From: Szafran <pawel.szafranski@snow.dog>
Date: Fri, 11 Sep 2020 13:52:42 +0200
Subject: [PATCH 4/5] Fixed UT

---
 src/molecules/checkbox/Checkbox.css     | 53 -------------------------
 src/molecules/checkbox/Checkbox.spec.js |  2 +-
 src/molecules/input/Input.spec.js       |  4 +-
 3 files changed, 3 insertions(+), 56 deletions(-)

diff --git a/src/molecules/checkbox/Checkbox.css b/src/molecules/checkbox/Checkbox.css
index 33f99786d..552dbddda 100644
--- a/src/molecules/checkbox/Checkbox.css
+++ b/src/molecules/checkbox/Checkbox.css
@@ -1,56 +1,3 @@
-/* @import '../../../assets/styles/_variables';
-
-$checkbox__icon-size                             : 14px !default;
-$checkbox__icon-fill                             : $white !default;
-
-$checkbox__icon-wrapper-margin                   : 0 $spacer 0 0 !default;
-$checkbox__icon-wrapper-border                   : 2px solid $gray !default;
-$checkbox__icon-wrapper-border-radius            : 2px !default;
-
-$checkbox__icon-wrapper-border--checked          : 2px solid $color-primary !default;
-$checkbox__icon-wrapper-background-color--checked: $color-primary !default;
-
-.a-checkbox {
-  position: relative;
-  display: flex;
-
-  &__field {
-    position: absolute;
-    opacity: 0;
-
-    &:checked + .a-checkbox__label {
-      .a-checkbox__icon-wrapper {
-        background-color: $checkbox__icon-wrapper-background-color--checked;
-        border: $checkbox__icon-wrapper-border--checked;
-      }
-
-      .a-checkbox__icon {
-        opacity: 1;
-      }
-    }
-  }
-
-  &__label {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  &__icon-wrapper {
-    margin: $checkbox__icon-wrapper-margin;
-    border: $checkbox__icon-wrapper-border;
-    border-radius: $checkbox__icon-wrapper-border-radius;
-  }
-
-  &__icon {
-    width: $checkbox__icon-size;
-    height: $checkbox__icon-size;
-    cursor: pointer;
-    opacity: 0;
-    fill: $checkbox__icon-fill;
-  }
-} */
-
 .a-checkbox {
   @apply relative;
   @apply flex;
diff --git a/src/molecules/checkbox/Checkbox.spec.js b/src/molecules/checkbox/Checkbox.spec.js
index 7c0254883..38f379766 100644
--- a/src/molecules/checkbox/Checkbox.spec.js
+++ b/src/molecules/checkbox/Checkbox.spec.js
@@ -11,7 +11,7 @@ describe('Checkbox', () => {
       }
     })
 
-    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.classes()).toContain('a-checkbox')
     expect(wrapper.classes().length).toBe(1)
   })
diff --git a/src/molecules/input/Input.spec.js b/src/molecules/input/Input.spec.js
index 922a5bdcb..40bacb4d9 100644
--- a/src/molecules/input/Input.spec.js
+++ b/src/molecules/input/Input.spec.js
@@ -10,11 +10,11 @@ describe('Input', () => {
     })
     const input = wrapper.find('.a-input__field')
 
-    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.classes()).toContain('a-input')
     expect(wrapper.classes().length).toBe(1)
 
-    expect(input.is('input')).toBe(true)
+    expect(input.element.tagName).toBe('INPUT')
     expect(input.classes()).toContain('a-input__field')
     expect(input.classes().length).toBe(1)
     expect(input.attributes().id).toBeDefined()

From 0d011e1f2d7844cc27f7ce8c690be3f72ce2eb88 Mon Sep 17 00:00:00 2001
From: Szafran <pawel.szafranski@snow.dog>
Date: Fri, 11 Sep 2020 13:57:51 +0200
Subject: [PATCH 5/5] Removed old version of Input and Checkbox

---
 _src /molecules/checkbox/Checkbox.html       |  28 -----
 _src /molecules/checkbox/Checkbox.js         |  39 -------
 _src /molecules/checkbox/Checkbox.scss       |  52 ---------
 _src /molecules/checkbox/Checkbox.spec.js    | 101 -----------------
 _src /molecules/checkbox/Checkbox.stories.js |  72 ------------
 _src /molecules/checkbox/Checkbox.vue        |  15 ---
 _src /molecules/input/Input.html             |  20 ----
 _src /molecules/input/Input.js               |  35 ------
 _src /molecules/input/Input.scss             |  50 ---------
 _src /molecules/input/Input.selectors.json   |   6 -
 _src /molecules/input/Input.spec.js          |  66 -----------
 _src /molecules/input/Input.stories.js       | 112 -------------------
 _src /molecules/input/Input.vue              |  16 ---
 13 files changed, 612 deletions(-)
 delete mode 100644 _src /molecules/checkbox/Checkbox.html
 delete mode 100644 _src /molecules/checkbox/Checkbox.js
 delete mode 100644 _src /molecules/checkbox/Checkbox.scss
 delete mode 100644 _src /molecules/checkbox/Checkbox.spec.js
 delete mode 100644 _src /molecules/checkbox/Checkbox.stories.js
 delete mode 100644 _src /molecules/checkbox/Checkbox.vue
 delete mode 100644 _src /molecules/input/Input.html
 delete mode 100644 _src /molecules/input/Input.js
 delete mode 100644 _src /molecules/input/Input.scss
 delete mode 100644 _src /molecules/input/Input.selectors.json
 delete mode 100644 _src /molecules/input/Input.spec.js
 delete mode 100644 _src /molecules/input/Input.stories.js
 delete mode 100644 _src /molecules/input/Input.vue

diff --git a/_src /molecules/checkbox/Checkbox.html b/_src /molecules/checkbox/Checkbox.html
deleted file mode 100644
index ef2d648c1..000000000
--- a/_src /molecules/checkbox/Checkbox.html	
+++ /dev/null
@@ -1,28 +0,0 @@
-<div class="a-checkbox">
-  <input
-    v-bind="$attrs"
-    :id="id"
-    type="checkbox"
-    :class="['a-checkbox__field', inputClass]"
-    :checked="checked"
-    @change="$emit('change', $event.target.checked)"
-  >
-  <!-- @slot Custom checkbox markup (Named slot) -->
-  <slot name="label">
-    <label
-      :for="id"
-      class="a-checkbox__label"
-    >
-      <div class="a-checkbox__icon-wrapper">
-        <a-icon
-          :title="iconTitle"
-          class="a-checkbox__icon"
-        >
-          <a-icon-check />
-        </a-icon>
-      </div>
-      <!-- @slot Custom label content (Default slot) -->
-      <slot />
-    </label>
-  </slot>
-</div>
diff --git a/_src /molecules/checkbox/Checkbox.js b/_src /molecules/checkbox/Checkbox.js
deleted file mode 100644
index 56e93400b..000000000
--- a/_src /molecules/checkbox/Checkbox.js	
+++ /dev/null
@@ -1,39 +0,0 @@
-// @vue/component
-
-export default {
-  inheritAttrs: false,
-  model: {
-    prop: 'checked',
-    event: 'change'
-  },
-  props: {
-    /**
-     * Prop to handle v-model
-     */
-    checked: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Input id
-     */
-    id: {
-      type: String,
-      required: true
-    },
-    /**
-     * Class for input
-     */
-    inputClass: {
-      type: String,
-      default: null
-    },
-    /**
-     * Icon title
-     */
-    iconTitle: {
-      type: String,
-      default: null
-    }
-  }
-}
diff --git a/_src /molecules/checkbox/Checkbox.scss b/_src /molecules/checkbox/Checkbox.scss
deleted file mode 100644
index 8caee3098..000000000
--- a/_src /molecules/checkbox/Checkbox.scss	
+++ /dev/null
@@ -1,52 +0,0 @@
-@import '../../../assets/styles/_variables';
-
-$checkbox__icon-size                             : 14px !default;
-$checkbox__icon-fill                             : $white !default;
-
-$checkbox__icon-wrapper-margin                   : 0 $spacer 0 0 !default;
-$checkbox__icon-wrapper-border                   : 2px solid $gray !default;
-$checkbox__icon-wrapper-border-radius            : 2px !default;
-
-$checkbox__icon-wrapper-border--checked          : 2px solid $color-primary !default;
-$checkbox__icon-wrapper-background-color--checked: $color-primary !default;
-
-.a-checkbox {
-  position: relative;
-  display: flex;
-
-  &__field {
-    position: absolute;
-    opacity: 0;
-
-    &:checked + .a-checkbox__label {
-      .a-checkbox__icon-wrapper {
-        background-color: $checkbox__icon-wrapper-background-color--checked;
-        border: $checkbox__icon-wrapper-border--checked;
-      }
-
-      .a-checkbox__icon {
-        opacity: 1;
-      }
-    }
-  }
-
-  &__label {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  &__icon-wrapper {
-    margin: $checkbox__icon-wrapper-margin;
-    border: $checkbox__icon-wrapper-border;
-    border-radius: $checkbox__icon-wrapper-border-radius;
-  }
-
-  &__icon {
-    width: $checkbox__icon-size;
-    height: $checkbox__icon-size;
-    cursor: pointer;
-    opacity: 0;
-    fill: $checkbox__icon-fill;
-  }
-}
diff --git a/_src /molecules/checkbox/Checkbox.spec.js b/_src /molecules/checkbox/Checkbox.spec.js
deleted file mode 100644
index 7c0254883..000000000
--- a/_src /molecules/checkbox/Checkbox.spec.js	
+++ /dev/null
@@ -1,101 +0,0 @@
-import { mount } from '@vue/test-utils'
-import ACheckbox from './Checkbox.vue'
-
-describe('Checkbox', () => {
-  it('has default structure', () => {
-    const wrapper = mount(ACheckbox, {
-      propsData: {
-        id: '1',
-        name: 'Checkbox',
-        value: 'checkbox'
-      }
-    })
-
-    expect(wrapper.is('div')).toBe(true)
-    expect(wrapper.classes()).toContain('a-checkbox')
-    expect(wrapper.classes().length).toBe(1)
-  })
-
-  it('renders default slots content when passed', () => {
-    const wrapper = mount(ACheckbox, {
-      propsData: {
-        id: '1',
-        name: 'Checkbox',
-        value: 'checkbox'
-      },
-      slots: {
-        default: '<span data-test="default">Default slot</span>'
-      }
-    })
-
-    const span = wrapper.find('.a-checkbox__label span[data-test="default"]')
-    expect(span.exists()).toBe(true)
-    expect(span.text()).toEqual('Default slot')
-  })
-
-  it('renders named slots content when passed', () => {
-    const wrapper = mount(ACheckbox, {
-      propsData: {
-        id: '1',
-        name: 'Checkbox',
-        value: 'checkbox'
-      },
-      slots: {
-        label: '<label data-test="label">Label</label>'
-      }
-    })
-
-    const label = wrapper.find('label[data-test="label"]')
-    expect(label.exists()).toBe(true)
-    expect(label.text()).toEqual('Label')
-  })
-
-  it('default has input type radio', () => {
-    const wrapper = mount(ACheckbox, {
-      propsData: {
-        id: '1',
-        name: 'Checkbox',
-        value: 'checkbox'
-      }
-    })
-
-    const input = wrapper.find('.a-checkbox__field')
-    expect(input.attributes('type')).toBeDefined()
-    expect(input.attributes('type')).toEqual('checkbox')
-  })
-
-  it('default has no disabled attribute on input', () => {
-    const wrapper = mount(ACheckbox, {
-      propsData: {
-        id: '1',
-        name: 'Checkbox',
-        value: 'checkbox'
-      }
-    })
-
-    const input = wrapper.find('.a-checkbox__field')
-    expect(input.attributes('disabled')).not.toBeDefined()
-  })
-
-  it('emits a change event when clicked', () => {
-    const wrapper = mount(ACheckbox, {
-      propsData: {
-        id: '1',
-        name: 'Checkbox',
-        value: 'checkbox'
-      }
-    })
-
-    const input = wrapper.find('.a-checkbox__field')
-    expect(input).toBeDefined()
-    input.trigger('click')
-    expect(wrapper.emitted('change')).toBeDefined()
-    expect(wrapper.emitted('change').length).toBe(1)
-    expect(wrapper.emitted('change')[0][0]).toEqual(true)
-
-    input.trigger('click')
-    expect(wrapper.emitted('change')).toBeDefined()
-    expect(wrapper.emitted('change').length).toBe(2)
-    expect(wrapper.emitted('change')[1][0]).toEqual(false)
-  })
-})
diff --git a/_src /molecules/checkbox/Checkbox.stories.js b/_src /molecules/checkbox/Checkbox.stories.js
deleted file mode 100644
index a6642dbc9..000000000
--- a/_src /molecules/checkbox/Checkbox.stories.js	
+++ /dev/null
@@ -1,72 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-import { action } from '@storybook/addon-actions'
-
-import ACheckbox from './Checkbox.vue'
-import AIcon from './../../atoms/icon/Icon.vue'
-import AIconCheck from './../../atoms/icon/templates/IconCheck.vue'
-
-const defaultData = {
-  data: () => {
-    return {
-      status: true
-    }
-  },
-  methods: {
-    onChange: action('Option changed')
-  }
-}
-
-storiesOf('Molecules/Checkbox', module)
-  .addParameters({ info: true })
-  .add('Default', () => ({
-    ...defaultData,
-    components: { ACheckbox },
-    template: `
-      <a-checkbox
-        id="checkbox-default"
-        name="checkbox-default"
-        icon-title="Checked icon"
-        v-model="status"
-        value="some value"
-        @change="onChange"
-      >
-        Checkbox field
-      </a-checkbox>
-    `
-  }))
-  .add('With slot', () => ({
-    ...defaultData,
-    components: {
-      ACheckbox,
-      AIcon,
-      AIconCheck
-    },
-    template: `
-      <a-checkbox
-        id="checkbox-slots"
-        name="checkbox-slots"
-        input-class="a-checkbox__field"
-        v-model="status"
-        value="some value"
-        @change="onChange"
-      >
-        <template #label>
-          <label
-            for="checkbox-slots"
-            class="a-checkbox__label"
-            style="color: #0000ff;"
-          >
-            <div class="a-checkbox__icon-wrapper">
-              <a-icon
-                class="a-checkbox__icon"
-                title="Checked icon"
-              >
-                <a-icon-check />
-              </a-icon>
-            </div>
-            I hereby agree for processing my personal data.
-          </label>
-        </template>
-      </a-checkbox>
-    `
-  }))
diff --git a/_src /molecules/checkbox/Checkbox.vue b/_src /molecules/checkbox/Checkbox.vue
deleted file mode 100644
index 66a5084be..000000000
--- a/_src /molecules/checkbox/Checkbox.vue	
+++ /dev/null
@@ -1,15 +0,0 @@
-<template src="./Checkbox.html" />
-
-<script>
-import ACheckbox from './Checkbox.js'
-
-import AIcon from '../../atoms/icon/Icon.vue'
-import AIconCheck from '../../atoms/icon/templates/IconCheck.vue'
-
-export default {
-  components: { AIcon, AIconCheck },
-  mixins: [ACheckbox]
-}
-</script>
-
-<style lang="scss" src="./Checkbox.scss" />
diff --git a/_src /molecules/input/Input.html b/_src /molecules/input/Input.html
deleted file mode 100644
index a98972bed..000000000
--- a/_src /molecules/input/Input.html	
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class="a-input">
-  <!-- @slot Label (Named slot) -->
-  <slot name="label">
-    <a-label
-      v-if="label"
-      :for="id"
-    >
-      {{ label }}
-    </a-label>
-  </slot>
-  <input
-    v-bind="$attrs"
-    v-on="listeners"
-    :value="value"
-    :id="id"
-    class="a-input__field"
-  >
-  <!-- @slot Icon (Named slot) -->
-  <slot name="icon" />
-</div>
diff --git a/_src /molecules/input/Input.js b/_src /molecules/input/Input.js
deleted file mode 100644
index 8b6673e77..000000000
--- a/_src /molecules/input/Input.js	
+++ /dev/null
@@ -1,35 +0,0 @@
-// @vue/component
-export default {
-  inheritAttrs: false,
-  props: {
-    /**
-     * Prop to handle v-model
-     */
-    value: {
-      type: String,
-      default: null
-    },
-    /**
-     * Input id
-     */
-    id: {
-      type: String,
-      required: true
-    },
-    /**
-     * Label text
-     */
-    label: {
-      type: String,
-      default: null
-    }
-  },
-  computed: {
-    listeners () {
-      return {
-        ...this.$listeners,
-        input: event => this.$emit('input', event.target.value)
-      }
-    }
-  }
-}
diff --git a/_src /molecules/input/Input.scss b/_src /molecules/input/Input.scss
deleted file mode 100644
index 03ceb7579..000000000
--- a/_src /molecules/input/Input.scss	
+++ /dev/null
@@ -1,50 +0,0 @@
-@import '../../../assets/styles/_globals.scss';
-
-$input__margin                 : 0 0 $spacer--medium 0 !default;
-$input-wrapper__label-margin   : 0 $spacer--medium 0 0 !default;
-
-$input__field-padding          : 0 $spacer--large 0 $spacer--medium !default;
-$input__field-width            : 100% !default;
-$input__field-height           : 40px !default;
-$input__field-border           : 1px solid $form-elements-border-color !default;
-$input__field-border-radius    : $form-elements-radius !default;
-$input__field-placeholder-color: $gray !default;
-
-$input__icon-top               : 20px !default;
-$input__icon-right             : 8px !default;
-
-.a-input {
-  position: relative;
-  margin: $input__margin;
-
-  &--inline {
-    display: flex;
-    align-items: center;
-
-    .a-label {
-      flex-shrink: 0;
-      margin: $input-wrapper__label-margin;
-    }
-  }
-
-  &__field {
-    width: $input__field-width;
-    height: $input__field-height;
-    padding: $input__field-padding;
-    border: $input__field-border;
-    border-radius: $input__field-border-radius;
-
-    &[type='search'] {
-      -webkit-appearance: textfield;
-
-      &::-webkit-search-decoration,
-      &::-webkit-search-cancel-button {
-        -webkit-appearance: none;
-      }
-    }
-
-    &::placeholder {
-      color: $input__field-placeholder-color;
-    }
-  }
-}
diff --git a/_src /molecules/input/Input.selectors.json b/_src /molecules/input/Input.selectors.json
deleted file mode 100644
index ae4039a4c..000000000
--- a/_src /molecules/input/Input.selectors.json	
+++ /dev/null
@@ -1,6 +0,0 @@
-[
-  {
-    "name": ".a-input--inline",
-    "description": "Selector for applying inline styles"
-  }
-]
diff --git a/_src /molecules/input/Input.spec.js b/_src /molecules/input/Input.spec.js
deleted file mode 100644
index 922a5bdcb..000000000
--- a/_src /molecules/input/Input.spec.js	
+++ /dev/null
@@ -1,66 +0,0 @@
-import { mount } from '@vue/test-utils'
-import AInput from './Input.vue'
-
-describe('Input', () => {
-  it('has default structure', () => {
-    const wrapper = mount(AInput, {
-      propsData: {
-        id: 'input-id'
-      }
-    })
-    const input = wrapper.find('.a-input__field')
-
-    expect(wrapper.is('div')).toBe(true)
-    expect(wrapper.classes()).toContain('a-input')
-    expect(wrapper.classes().length).toBe(1)
-
-    expect(input.is('input')).toBe(true)
-    expect(input.classes()).toContain('a-input__field')
-    expect(input.classes().length).toBe(1)
-    expect(input.attributes().id).toBeDefined()
-    expect(input.attributes().id).toBe('input-id')
-  })
-
-  it('renders email input when type set to email', () => {
-    const wrapper = mount(AInput, {
-      propsData: {
-        id: 'input-id',
-        type: 'email'
-      }
-    })
-
-    const input = wrapper.find('.a-input__field')
-    expect(input.attributes('type')).toBe('email')
-  })
-
-  it('renders slots content when passed', () => {
-    const wrapper = mount(AInput, {
-      propsData: {
-        id: 'input-id'
-      },
-      slots: {
-        label: '<label for="input-id">Alpaca UI</label>'
-      }
-    })
-
-    const label = wrapper.find('.a-input > label')
-
-    expect(label.exists()).toBe(true)
-    expect(label.text()).toEqual('Alpaca UI')
-  })
-
-  it('emits an input event', () => {
-    const wrapper = mount(AInput, {
-      propsData: {
-        id: 'input-id'
-      }
-    })
-
-    const textInput = wrapper.find('input')
-    textInput.setValue('Sample text')
-
-    expect(wrapper.emitted('input')).toBeTruthy()
-    expect(wrapper.emitted().input[0].length).toBe(1)
-    expect(wrapper.emitted().input[0][0]).toEqual('Sample text')
-  })
-})
diff --git a/_src /molecules/input/Input.stories.js b/_src /molecules/input/Input.stories.js
deleted file mode 100644
index 445025e37..000000000
--- a/_src /molecules/input/Input.stories.js	
+++ /dev/null
@@ -1,112 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-import { select, text } from '@storybook/addon-knobs'
-import { action } from '@storybook/addon-actions'
-
-import generateVueInfoTable from '@utils/helpers/generate-vue-info-table.js'
-import getClassKnobsConfig from '@utils/helpers/get-class-knobs-config.js'
-import selectorsConfig from './Input.selectors.json'
-
-import AInput from './Input.vue'
-import AIcon from '../../atoms/icon/Icon.vue'
-import AIconPerson from '../../atoms/icon/templates/IconPerson.vue'
-
-const inputTypes = ['text', 'email', 'search', 'number', 'password', 'hidden']
-
-const info = `
-  Check **Knobs** tab to edit component properties dynamically.<br>
-  ${generateVueInfoTable(selectorsConfig, 'BEM modifiers')}
-`
-
-const classKnobsConfig = getClassKnobsConfig(selectorsConfig)
-
-storiesOf('Molecules/Input', module)
-  .addParameters({ info })
-  .add('Default', () => ({
-    components: { AInput },
-    data: () => {
-      return {
-        value: ''
-      }
-    },
-    props: {
-      classKnob: {
-        default: select('BEM Modifier', classKnobsConfig)
-      },
-      placeholderKnob: {
-        default: text('Placeholder', 'First and last name')
-      },
-      labelKnob: {
-        default: text('Label', 'Label')
-      },
-      typeKnob: {
-        default: select('Type', inputTypes, 'text')
-      }
-    },
-    template: `
-      <a-input
-        :class="classKnob"
-        v-model="value"
-        :type="typeKnob"
-        :label="labelKnob"
-        :placeholder="placeholderKnob"
-        id="input-id"
-      />
-    `
-  }))
-  .add('With slot', () => ({
-    components: { AInput, AIcon, AIconPerson },
-    data: () => {
-      return {
-        value: '',
-        iconStyles: {
-          position: 'absolute',
-          top: '29px',
-          right: '8px',
-          display: 'flex',
-          'align-items': 'center',
-          'justify-content': 'center',
-          width: '40px',
-          height: '40px',
-          cursor: 'pointer'
-        }
-      }
-    },
-    props: {
-      classKnob: {
-        default: select('BEM Modifier', classKnobsConfig)
-      },
-      placeholderKnob: {
-        default: text('Placeholder', 'First and last name')
-      },
-      labelKnob: {
-        default: text('Label', 'Label')
-      },
-      typeKnob: {
-        default: select('Type', inputTypes, 'text')
-      }
-    },
-    methods: {
-      click: action('Clicked')
-    },
-    template: `
-      <a-input
-        :class="classKnob"
-        v-model="value"
-        :label="labelKnob"
-        :type="typeKnob"
-        :placeholder="placeholderKnob"
-        id="input-id"
-      >
-        <template #icon>
-          <div :style="iconStyles">
-            <a-icon
-              title="Person icon"
-              @click.native="click"
-            >
-              <a-icon-person />
-            </a-icon>
-          </div>
-        </template>
-      </a-input>
-    `
-  }))
diff --git a/_src /molecules/input/Input.vue b/_src /molecules/input/Input.vue
deleted file mode 100644
index b162521e1..000000000
--- a/_src /molecules/input/Input.vue	
+++ /dev/null
@@ -1,16 +0,0 @@
-<template src="./Input.html" />
-
-<script>
-import AInput from './Input.js'
-import ALabel from '../../atoms/label/Label.vue'
-
-export default {
-  name: 'AlpacaInput',
-  components: {
-    ALabel
-  },
-  mixins: [AInput]
-}
-</script>
-
-<style lang="scss" src="./Input.scss" />