From aeabd22683782d17a8e98981ba018f366f998948 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82?= <pawel.szafranski@snow.dog>
Date: Fri, 21 May 2021 13:24:19 +0200
Subject: [PATCH 1/4] #306 - removed unused code

---
 _src /test/app/App.html                 |  3 ---
 _src /test/app/App.js                   |  1 -
 _src /test/app/App.scss                 | 14 ----------
 _src /test/app/App.vue                  | 12 ---------
 _src /test/button/Button.html           | 16 ------------
 _src /test/button/Button.js             |  2 --
 _src /test/button/Button.scss           | 15 -----------
 _src /test/button/Button.selectors.json | 14 ----------
 _src /test/button/Button.stories.js     | 34 -------------------------
 _src /test/button/Button.vue            | 12 ---------
 10 files changed, 123 deletions(-)
 delete mode 100644 _src /test/app/App.html
 delete mode 100644 _src /test/app/App.js
 delete mode 100644 _src /test/app/App.scss
 delete mode 100644 _src /test/app/App.vue
 delete mode 100644 _src /test/button/Button.html
 delete mode 100644 _src /test/button/Button.js
 delete mode 100644 _src /test/button/Button.scss
 delete mode 100644 _src /test/button/Button.selectors.json
 delete mode 100644 _src /test/button/Button.stories.js
 delete mode 100644 _src /test/button/Button.vue

diff --git a/_src /test/app/App.html b/_src /test/app/App.html
deleted file mode 100644
index 7e5298d98..000000000
--- a/_src /test/app/App.html	
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="page-wrapper">
-  <slot />
-</div>
diff --git a/_src /test/app/App.js b/_src /test/app/App.js
deleted file mode 100644
index b1c6ea436..000000000
--- a/_src /test/app/App.js	
+++ /dev/null
@@ -1 +0,0 @@
-export default {}
diff --git a/_src /test/app/App.scss b/_src /test/app/App.scss
deleted file mode 100644
index 813621acc..000000000
--- a/_src /test/app/App.scss	
+++ /dev/null
@@ -1,14 +0,0 @@
-/* Not the prettiest way, but I need it to work now */
-@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&family=Work+Sans:wght@400;500;700&display=swap');
-// @import '../../../assets/styles/_globals.scss';
-// @import '../../../assets/styles/_reset.scss';
-// @import '../../../assets/styles/_focus-visible.scss';
-// @import '../../../assets/styles/transitions/_fade.scss';
-// @import '../../../assets/styles/transitions/_slide-up.scss';
-// @import '../../../assets/styles/transitions/_slide-right.scss';
-// @import '../../../assets/styles/transitions/_slide-down.scss';
-// @import '../../../assets/styles/transitions/_slide-left.scss';
-
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
diff --git a/_src /test/app/App.vue b/_src /test/app/App.vue
deleted file mode 100644
index 5ea3b5bc4..000000000
--- a/_src /test/app/App.vue	
+++ /dev/null
@@ -1,12 +0,0 @@
-<template src="./App.html" />
-
-<script>
-import AApp from './App.js'
-
-export default {
-  name: 'AlpacaApp',
-  mixins: [AApp]
-}
-</script>
-
-<style lang="scss" src="./App.scss" />
diff --git a/_src /test/button/Button.html b/_src /test/button/Button.html
deleted file mode 100644
index 18e595fa6..000000000
--- a/_src /test/button/Button.html	
+++ /dev/null
@@ -1,16 +0,0 @@
-<div>
-  <button
-    class="btn"
-    type="button"
-  >
-    <!-- @slot Slot for button content -->
-    <slot />
-  </button>
-  <button
-    class="btn btn--secondary"
-    type="button"
-  >
-    <!-- @slot Slot for button content -->
-    <slot />
-  </button>
-</div>
diff --git a/_src /test/button/Button.js b/_src /test/button/Button.js
deleted file mode 100644
index 5e1e33d65..000000000
--- a/_src /test/button/Button.js	
+++ /dev/null
@@ -1,2 +0,0 @@
-// @vue/component
-export default {}
diff --git a/_src /test/button/Button.scss b/_src /test/button/Button.scss
deleted file mode 100644
index 1f2c52bc2..000000000
--- a/_src /test/button/Button.scss	
+++ /dev/null
@@ -1,15 +0,0 @@
-.btn {
-  @apply bg-dark text-white px-4 h-12;
-}
-
-.btn:hover {
-  @apply text-gray-300;
-}
-
-.btn--secondary {
-  @apply bg-primary text-primary border-2 border-dark;
-}
-
-.btn--secondary:hover {
-  @apply bg-dark text-white;
-}
diff --git a/_src /test/button/Button.selectors.json b/_src /test/button/Button.selectors.json
deleted file mode 100644
index 54e16f6b3..000000000
--- a/_src /test/button/Button.selectors.json	
+++ /dev/null
@@ -1,14 +0,0 @@
-[
-  {
-    "name": ".a-button--secondary",
-    "description": "Selector for applying secondary styles"
-  },
-  {
-    "name": ".a-button--blank",
-    "description": "Selector for applying blank styles"
-  },
-  {
-    "name": ".a-button--fluid",
-    "description": "Selector for applying fluid styles (width: 100%)"
-  }
-]
diff --git a/_src /test/button/Button.stories.js b/_src /test/button/Button.stories.js
deleted file mode 100644
index 2ac9a1ea3..000000000
--- a/_src /test/button/Button.stories.js	
+++ /dev/null
@@ -1,34 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-import { select, text } from '@storybook/addon-knobs'
-
-import generateVueInfoTable from '@utils/helpers/generate-vue-info-table.js'
-import getClassKnobsConfig from '@utils/helpers/get-class-knobs-config.js'
-import selectorsConfig from './Button.selectors.json'
-
-import AButton from './Button.vue'
-
-const info = `
-  <p>Check <b>Knobs</b> tab to edit component properties dynamically.</p><br>
-  ${generateVueInfoTable(selectorsConfig, 'BEM modifiers')}
-`
-
-const classKnobsConfig = getClassKnobsConfig(selectorsConfig)
-
-storiesOf('Test/Button', module)
-  .addParameters({ info })
-  .add('Default', () => ({
-    components: { AButton },
-    props: {
-      classKnobs: {
-        default: select('BEM Modifier', classKnobsConfig)
-      },
-      textKnobs: {
-        default: text('Text', 'Button text')
-      }
-    },
-    template: `
-      <a-button :class="classKnobs">
-        {{ textKnobs }}
-      </a-button>
-    `
-  }))
diff --git a/_src /test/button/Button.vue b/_src /test/button/Button.vue
deleted file mode 100644
index 6c8689436..000000000
--- a/_src /test/button/Button.vue	
+++ /dev/null
@@ -1,12 +0,0 @@
-<template src="./Button.html" />
-
-<script>
-import AButton from './Button.js'
-
-export default {
-  name: 'AlpacaButton',
-  mixins: [AButton]
-}
-</script>
-
-<style lang="scss" src="./Button.scss" />

From ae592fe2b1f4592642aaf9ca998dbc5b90f8bf1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82?= <pawel.szafranski@snow.dog>
Date: Fri, 4 Jun 2021 11:06:23 +0200
Subject: [PATCH 2/4] #306 - transform styles to tailwind classes

---
 src/atoms/blockquote/Blockquote.css  |   2 +-
 src/molecules/input/Input.html       |  21 +++++
 src/molecules/input/Input.js         |  68 +++++++++++++++++
 src/molecules/input/Input.scss       |  50 ++++++++++++
 src/molecules/input/Input.spec.js    |  66 ++++++++++++++++
 src/molecules/input/Input.stories.js | 110 +++++++++++++++++++++++++++
 src/molecules/input/Input.vue        |  14 ++++
 tailwind.config.js                   |  27 ++++---
 utils/helpers/get-class.js           |   2 +-
 9 files changed, 346 insertions(+), 14 deletions(-)
 create mode 100644 src/molecules/input/Input.html
 create mode 100644 src/molecules/input/Input.js
 create mode 100644 src/molecules/input/Input.scss
 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/blockquote/Blockquote.css b/src/atoms/blockquote/Blockquote.css
index 00c348255..cd57f7fe5 100644
--- a/src/atoms/blockquote/Blockquote.css
+++ b/src/atoms/blockquote/Blockquote.css
@@ -1,6 +1,6 @@
 .a-blockquote {
   @apply my-2;
   @apply py-2 pr-2 pl-4;
-  @apply border-l-4 border-solid border-light;
+  @apply border-l-4 border-solid border-gray-300;
   @apply leading-relaxed;
 }
diff --git a/src/molecules/input/Input.html b/src/molecules/input/Input.html
new file mode 100644
index 000000000..a2b9d65c1
--- /dev/null
+++ b/src/molecules/input/Input.html
@@ -0,0 +1,21 @@
+<div :class="getClass('input')">
+  <!-- @slot Label (Named slot) -->
+  <slot name="label">
+    <a-label
+      v-if="label"
+      :class="getClass('input__label')"
+      :for="id"
+    >
+      {{ label }}
+    </a-label>
+  </slot>
+  <input
+    v-bind="$attrs"
+    v-on="listeners"
+    :value="value"
+    :id="id"
+    :class="getClass('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..394199da2
--- /dev/null
+++ b/src/molecules/input/Input.js
@@ -0,0 +1,68 @@
+// @vue/component
+import getClass from '../../../utils/helpers/get-class.js'
+
+export default {
+  mixins: [getClass],
+  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)
+      }
+    }
+  },
+  data () {
+    return {
+      config: {
+        base: {
+          input: [
+            'relative'
+          ],
+          input__field: [
+            'w-full', 'h-12',
+            'px-4'
+          ]
+        },
+        primary: {
+          input__field: [
+            'border', 'border-solid', 'border-form',
+            'placeholder-primary'
+          ]
+        },
+        inline: {
+          input: [
+            'flex', 'items-center'
+          ],
+          input__label: [
+            'flex-shrink-0',
+            'm-4', 'mb-4'
+          ]
+        }
+      }
+    }
+  }
+}
diff --git a/src/molecules/input/Input.scss b/src/molecules/input/Input.scss
new file mode 100644
index 000000000..c755d3d85
--- /dev/null
+++ b/src/molecules/input/Input.scss
@@ -0,0 +1,50 @@
+@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.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..cf0890702
--- /dev/null
+++ b/src/molecules/input/Input.stories.js
@@ -0,0 +1,110 @@
+import AInput from './Input.vue'
+import AIcon from '../../atoms/icon/Icon.vue'
+import AIconPerson from '../../atoms/icon/templates/IconPerson.vue'
+
+export default {
+  title: 'Molecules/Input',
+  component: AInput,
+  argTypes: {
+    type: {
+      control: {
+        type: 'text'
+      }
+    },
+    placeholder: {
+      control: {
+        type: 'text'
+      }
+    },
+    label: {
+      control: {
+        type: 'text'
+      }
+    }
+  }
+}
+
+const args = {
+  type: 'text',
+  placeholder: 'Placeholder text...',
+  label: 'Label text'
+}
+
+const Template = (args, { argTypes }) => ({
+  components: { AInput },
+  props: Object.keys(argTypes),
+  data: () => {
+    return {
+      inputValue: ''
+    }
+  },
+  template: `
+    <div>
+      <a-input
+        v-model="inputValue"
+        id="input-id"
+        :type="type"
+        :placeholder="placeholder"
+        :label="label"
+        :variant="variant"
+      />
+      <small class="flex mt-4">
+        Model: {{ inputValue }}
+      </small>
+    </div>
+  `
+})
+
+export const Default = Template.bind({})
+
+export const Inline = Template.bind({})
+
+export const WithSlots = (args, { argTypes }) => ({
+  components: { AInput, AIcon, AIconPerson },
+  props: Object.keys(argTypes),
+  data: () => {
+    return {
+      inputValue: '',
+      iconStyles: {
+        top: '29px',
+        right: '8px',
+        cursor: 'pointer'
+      }
+    }
+  },
+  template: `
+    <div>
+      <a-input
+        v-model="inputValue"
+        :label="label"
+        :type="type"
+        :placeholder="placeholder"
+        id="input-id-slit"
+      >
+        <template #icon>
+          <div
+            style="top: 29px;"
+            class="h-12 w-12 absolute flex items-center justify-center top-0 right-0"
+          >
+            <a-icon
+              title="Person icon"
+              @click.native="click"
+            >
+              <a-icon-person />
+            </a-icon>
+          </div>
+        </template>
+      </a-input>
+      <small class="flex mt-4">
+        Model: {{ inputValue }}
+      </small>
+    </div>
+  `
+})
+
+Default.args = args
+Inline.args = {
+  ...args,
+  variant: ['primary', 'inline']
+}
+WithSlots.args = args
diff --git a/src/molecules/input/Input.vue b/src/molecules/input/Input.vue
new file mode 100644
index 000000000..da87a9054
--- /dev/null
+++ b/src/molecules/input/Input.vue
@@ -0,0 +1,14 @@
+<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>
diff --git a/tailwind.config.js b/tailwind.config.js
index 9dd79059c..7ddbfca40 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,8 +4,8 @@ module.exports = {
   ],
   theme: {
     extend: {
-      minHeight: {
-        24: '24px'
+      maxWidth: {
+        content: '1328px'
       }
     },
     screens: {
@@ -52,18 +52,24 @@ module.exports = {
     }),
     borderColor: theme => ({
       ...theme('colors'),
-      default: theme('colors.gray.500'),
-      primary: theme('colors.gray.500'),
-      secondary: theme('colors.gray.600'),
-      dark: theme('colors.gray.800'),
-      light: theme('colors.gray.300')
+      // primary: theme('colors.gray.500'),
+      // secondary: theme('colors.gray.600'),
+      form: theme('colors.gray.500')
+      // default: theme('colors.gray.500'),
+      // dark: theme('colors.gray.800'),
+      // light: theme('colors.gray.300'),
+
     }),
     textColor: theme => ({
       ...theme('colors'),
-      default: theme('colors.gray.800'),
+      // default: theme('colors.gray.800'),
       primary: theme('colors.gray.800'),
       secondary: theme('colors.gray.600')
     }),
+    placeholderColor: theme => ({
+      primary: theme('colors.gray.600'),
+      // secondary: theme('colors.gray.300')
+    }),
     fill: theme => ({
       ...theme('colors'),
       dark: theme('colors.gray.800'),
@@ -71,10 +77,7 @@ module.exports = {
     }),
     outline: theme => ({
       focus: [`2px solid ${theme('colors.bright-sky-blue')}`, '-1px']
-    }),
-    maxWidth: {
-      content: '1328px'
-    }
+    })
   },
   variants: {},
   plugins: [],
diff --git a/utils/helpers/get-class.js b/utils/helpers/get-class.js
index 3a55a2228..05bd7babe 100644
--- a/utils/helpers/get-class.js
+++ b/utils/helpers/get-class.js
@@ -13,7 +13,7 @@ export default {
       let variantStyles
       let classes = []
 
-      if (baseStyles) {
+      if (baseStyles?.[el]) {
         classes = [...baseStyles[el]]
       }
 

From f99e4b972c26015d979c2f186d5acb53a0790d96 Mon Sep 17 00:00:00 2001
From: Ania <anna.karon@snow.dog>
Date: Fri, 4 Jun 2021 18:04:09 +0200
Subject: [PATCH 3/4] 306 update input components, floating label, stories

---
 src/molecules/input/Input.css        |  5 +++
 src/molecules/input/Input.html       |  8 ++--
 src/molecules/input/Input.js         | 24 ++++++++++--
 src/molecules/input/Input.scss       | 50 ------------------------
 src/molecules/input/Input.stories.js | 58 +++++++++++++---------------
 src/molecules/input/Input.vue        |  3 +-
 tailwind.config.js                   |  5 ++-
 7 files changed, 61 insertions(+), 92 deletions(-)
 create mode 100644 src/molecules/input/Input.css
 delete mode 100644 src/molecules/input/Input.scss

diff --git a/src/molecules/input/Input.css b/src/molecules/input/Input.css
new file mode 100644
index 000000000..40c7096ee
--- /dev/null
+++ b/src/molecules/input/Input.css
@@ -0,0 +1,5 @@
+.input__label--floating {
+  @apply transform translate-x-0;
+  @apply transform translate-y-0;
+  @apply transform scale-100;
+}
diff --git a/src/molecules/input/Input.html b/src/molecules/input/Input.html
index a2b9d65c1..24b03fdcf 100644
--- a/src/molecules/input/Input.html
+++ b/src/molecules/input/Input.html
@@ -2,8 +2,10 @@
   <!-- @slot Label (Named slot) -->
   <slot name="label">
     <a-label
-      v-if="label"
-      :class="getClass('input__label')"
+      :class="[
+        getClass('input__label'),
+        { 'input__label--floating': variant !== 'inline' && (hasFocus || value) }
+      ]"
       :for="id"
     >
       {{ label }}
@@ -17,5 +19,5 @@
     :class="getClass('input__field')"
   >
   <!-- @slot Icon (Named slot) -->
-  <slot name="icon" />
+  <slot name="icon" v-bind:variant="variant" />
 </div>
diff --git a/src/molecules/input/Input.js b/src/molecules/input/Input.js
index fe958a6c8..436cd77e0 100644
--- a/src/molecules/input/Input.js
+++ b/src/molecules/input/Input.js
@@ -24,26 +24,29 @@ export default {
      */
     label: {
       type: String,
-      default: null
+      required: true
     }
   },
   computed: {
     listeners () {
       return {
         ...this.$listeners,
-        input: event => this.$emit('input', event.target.value)
+        input: event => this.$emit('input', event.target.value),
+        focus: () => this.isFocused(true),
+        blur: () => this.isFocused(false)
       }
     }
   },
   data () {
     return {
+      hasFocus: false,
       config: {
         base: {
           input: [
             'relative'
           ],
           input__label: [
-            'flex'
+            'transition-all', 'ease-linear', 'transition-300'
           ],
           input__field: [
             'w-full', 'h-12',
@@ -53,7 +56,12 @@ export default {
         primary: {
           input__field: [
             'border', 'border-solid', 'border-form',
-            'placeholder-primary'
+            'placeholder-primary',
+            'focus:border-gray-500', 'focus:outline-focus'
+          ],
+          input__label: [
+            'inline-flex', 'transform translate-x-6 translate-y-9 scale-125',
+            'text-xs'
           ]
         },
         inline: {
@@ -63,9 +71,17 @@ export default {
           input__label: [
             'flex-shrink-0',
             'mr-4'
+          ],
+          input__field: [
+            'border', 'border-solid', 'border-form', 'placeholder-primary'
           ]
         }
       }
     }
+  },
+  methods: {
+    isFocused (value) {
+      this.hasFocus = value
+    }
   }
 }
diff --git a/src/molecules/input/Input.scss b/src/molecules/input/Input.scss
deleted file mode 100644
index c755d3d85..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.stories.js b/src/molecules/input/Input.stories.js
index 145860d43..12af9acac 100644
--- a/src/molecules/input/Input.stories.js
+++ b/src/molecules/input/Input.stories.js
@@ -6,28 +6,31 @@ export default {
   title: 'Molecules/Input',
   component: AInput,
   argTypes: {
-    type: {
+    id: {
       control: {
         type: 'text'
       }
     },
-    placeholder: {
+    label: {
       control: {
         type: 'text'
       }
     },
-    label: {
+    variant: {
       control: {
-        type: 'text'
+        type: 'select',
+        options: [
+          'primary',
+          'inline'
+        ]
       }
     }
   }
 }
-
-const args = {
-  type: 'text',
-  placeholder: 'Placeholder text...',
-  label: 'Label text'
+const defaultArgs = {
+  id: 'input-text',
+  label: 'input label',
+  variant: 'primary'
 }
 
 const Template = (args, { argTypes }) => ({
@@ -42,9 +45,7 @@ const Template = (args, { argTypes }) => ({
     <div>
       <a-input
         v-model="inputValue"
-        id="input-id"
-        :type="type"
-        :placeholder="placeholder"
+        :id="id"
         :label="label"
         :variant="variant"
       />
@@ -53,20 +54,14 @@ const Template = (args, { argTypes }) => ({
 })
 
 export const Default = Template.bind({})
-
-export const Inline = Template.bind({})
+Default.args = defaultArgs
 
 export const WithSlots = (args, { argTypes }) => ({
   components: { AInput, AIcon, AIconPerson },
   props: Object.keys(argTypes),
   data: () => {
     return {
-      inputValue: '',
-      iconStyles: {
-        top: '29px',
-        right: '8px',
-        cursor: 'pointer'
-      }
+      inputValue: ''
     }
   },
   template: `
@@ -74,14 +69,18 @@ export const WithSlots = (args, { argTypes }) => ({
       <a-input
         v-model="inputValue"
         :label="label"
-        :type="type"
-        :placeholder="placeholder"
-        id="input-id-slit"
+        :id="id"
+        :variant="variant"
       >
-        <template #icon>
+        <template #icon="{ variant   }">
           <div
-            style="top: 25px;"
-            class="h-12 w-12 absolute flex items-center justify-center top-0 right-0"
+            :class="[
+              'h-12 w-12',
+              'flex items-center justify-center',
+              'absolute right-0',
+              variant === 'primary' ? 'top-6' : 'top-0'
+            ]
+            "
           >
             <a-icon
               title="Person icon"
@@ -96,9 +95,4 @@ export const WithSlots = (args, { argTypes }) => ({
   `
 })
 
-Default.args = args
-Inline.args = {
-  ...args,
-  variant: ['primary', 'inline']
-}
-WithSlots.args = args
+WithSlots.args = defaultArgs
diff --git a/src/molecules/input/Input.vue b/src/molecules/input/Input.vue
index da87a9054..2f4d867b2 100644
--- a/src/molecules/input/Input.vue
+++ b/src/molecules/input/Input.vue
@@ -2,7 +2,7 @@
 
 <script>
 import AInput from './Input.js'
-import ALabel from '../../atoms/label/Label.vue'
+import ALabel from '@atoms/label/Label.vue'
 
 export default {
   name: 'AlpacaInput',
@@ -12,3 +12,4 @@ export default {
   mixins: [AInput]
 }
 </script>
+<style src="./Input.css" />
diff --git a/tailwind.config.js b/tailwind.config.js
index 8f801a9ea..b3289ee44 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -31,7 +31,7 @@ module.exports = {
       ...theme('colors'),
       primary: theme('colors.gray.500'),
       secondary: theme('colors.gray.600'),
-      form: theme('colors.gray.500'),
+      form: theme('colors.gray.300'),
       dark: theme('colors.gray.800'),
       light: theme('colors.gray.300'),
 
@@ -50,7 +50,8 @@ module.exports = {
       light: theme('colors.gray.200')
     }),
     outline: theme => ({
-      focus: [`2px solid ${theme('colors.bright-sky-blue')}`, '-1px']
+      ...theme('colors'),
+      focus: [`2px solid ${theme('colors.blue.200')}`, '-1px']
     })
   },
   variants: {},

From 9989243b35bdc36e4d12e78d1bb11b29ee8d9aa8 Mon Sep 17 00:00:00 2001
From: Ania <anna.karon@snow.dog>
Date: Fri, 18 Jun 2021 16:03:56 +0200
Subject: [PATCH 4/4] update input component, add focus

---
 src/atoms/app/App.css                | 10 +++++
 src/atoms/label/Label.js             |  2 +-
 src/molecules/input/Input.css        |  5 ---
 src/molecules/input/Input.html       | 19 +++++++--
 src/molecules/input/Input.js         | 17 ++------
 src/molecules/input/Input.spec.js    | 58 ++++++++++++++++++++--------
 src/molecules/input/Input.stories.js | 38 ++++++++++++++++--
 src/molecules/input/Input.vue        |  1 -
 tailwind.config.js                   | 13 ++++---
 9 files changed, 114 insertions(+), 49 deletions(-)
 delete mode 100644 src/molecules/input/Input.css

diff --git a/src/atoms/app/App.css b/src/atoms/app/App.css
index fdb85e5ad..fab8ff899 100644
--- a/src/atoms/app/App.css
+++ b/src/atoms/app/App.css
@@ -4,3 +4,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  .js-focus-visible :focus:not([data-focus-visible-added]) {
+    @apply outline-none;
+  }
+
+  .js-focus-visible .focus-visible {
+    @apply outline-focus;
+  }
+}
diff --git a/src/atoms/label/Label.js b/src/atoms/label/Label.js
index 90222b678..9f94c2eac 100644
--- a/src/atoms/label/Label.js
+++ b/src/atoms/label/Label.js
@@ -12,7 +12,7 @@ export default {
         },
         primary: {
           label: [
-            'text-gray-600'
+            'text-gray-800'
           ]
         },
         hidden: {
diff --git a/src/molecules/input/Input.css b/src/molecules/input/Input.css
deleted file mode 100644
index 40c7096ee..000000000
--- a/src/molecules/input/Input.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.input__label--floating {
-  @apply transform translate-x-0;
-  @apply transform translate-y-0;
-  @apply transform scale-100;
-}
diff --git a/src/molecules/input/Input.html b/src/molecules/input/Input.html
index 24b03fdcf..f76883051 100644
--- a/src/molecules/input/Input.html
+++ b/src/molecules/input/Input.html
@@ -1,10 +1,18 @@
 <div :class="getClass('input')">
   <!-- @slot Label (Named slot) -->
-  <slot name="label">
+  <slot name="label" v-bind="{ label, id }">
     <a-label
       :class="[
-        getClass('input__label'),
-        { 'input__label--floating': variant !== 'inline' && (hasFocus || value) }
+        'transition-all ease-linear transition-300',
+        {
+          'text-xs inline-flex': variant ==='primary'
+        },
+        {
+          'flex-shrink-0 mr-4': variant !=='primary'
+        },
+        {
+          'transform translate-x-6 translate-y-9 scale-125': (variant === 'primary' && (!value && !hasFocus))
+        }
       ]"
       :for="id"
     >
@@ -16,7 +24,10 @@
     v-on="listeners"
     :value="value"
     :id="id"
-    :class="getClass('input__field')"
+    :class="[
+      getClass('input__field'),
+      value ? getClass('input__field__filled') : ''
+    ]"
   >
   <!-- @slot Icon (Named slot) -->
   <slot name="icon" v-bind:variant="variant" />
diff --git a/src/molecules/input/Input.js b/src/molecules/input/Input.js
index 436cd77e0..42f6ccf32 100644
--- a/src/molecules/input/Input.js
+++ b/src/molecules/input/Input.js
@@ -45,33 +45,24 @@ export default {
           input: [
             'relative'
           ],
-          input__label: [
-            'transition-all', 'ease-linear', 'transition-300'
-          ],
           input__field: [
             'w-full', 'h-12',
             'px-4'
+          ],
+          input__field__filled: [
+            'border-formfilled'
           ]
         },
         primary: {
           input__field: [
             'border', 'border-solid', 'border-form',
-            'placeholder-primary',
-            'focus:border-gray-500', 'focus:outline-focus'
-          ],
-          input__label: [
-            'inline-flex', 'transform translate-x-6 translate-y-9 scale-125',
-            'text-xs'
+            'placeholder-primary'
           ]
         },
         inline: {
           input: [
             'flex', 'items-center'
           ],
-          input__label: [
-            'flex-shrink-0',
-            'mr-4'
-          ],
           input__field: [
             'border', 'border-solid', 'border-form', 'placeholder-primary'
           ]
diff --git a/src/molecules/input/Input.spec.js b/src/molecules/input/Input.spec.js
index 922a5bdcb..42cdd0d68 100644
--- a/src/molecules/input/Input.spec.js
+++ b/src/molecules/input/Input.spec.js
@@ -1,58 +1,84 @@
-import { mount } from '@vue/test-utils'
+import { mount, shallowMount } from '@vue/test-utils'
 import AInput from './Input.vue'
+import ALabel from './../../atoms/label/Label.vue'
 
 describe('Input', () => {
   it('has default structure', () => {
     const wrapper = mount(AInput, {
       propsData: {
-        id: 'input-id'
+        id: 'input-id',
+        label: 'input label',
+        type: 'text'
       }
     })
-    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)
+    const input = wrapper.find('input')
+    expect(wrapper.element.tagName === 'DIV')
 
-    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')
+    expect(input.attributes().type).toBeDefined()
+    expect(input.attributes().type).toBe('text')
   })
 
   it('renders email input when type set to email', () => {
     const wrapper = mount(AInput, {
       propsData: {
         id: 'input-id',
+        label: 'input label',
         type: 'email'
       }
     })
 
-    const input = wrapper.find('.a-input__field')
+    const input = wrapper.find('input')
     expect(input.attributes('type')).toBe('email')
   })
 
   it('renders slots content when passed', () => {
     const wrapper = mount(AInput, {
       propsData: {
-        id: 'input-id'
+        id: 'input-id',
+        label: 'Alpaca UI'
       },
-      slots: {
-        label: '<label for="input-id">Alpaca UI</label>'
+      scopedSlots: {
+        label: '<label for="input-id">{{ props.label }}</label>'
       }
     })
 
-    const label = wrapper.find('.a-input > label')
+    const label = wrapper.find('label')
 
     expect(label.exists()).toBe(true)
     expect(label.text()).toEqual('Alpaca UI')
+    expect(label.attributes().for).toBeDefined()
+    expect(label.attributes().for).toBe('input-id')
+  })
+
+  it('renders label slot with component', () => {
+    const wrapper = mount(AInput, {
+      propsData: {
+        id: 'input-id',
+        label: 'Alpaca UI'
+      },
+      scopedSlots: {
+        label: '<a-label :for="props.id">{{ props.label }}</a-label>'
+      },
+      stubs: {
+        'a-label': ALabel
+      }
+    })
+
+    const label = wrapper.find('label')
+
+    expect(label.exists()).toBe(true)
+    expect(label.text()).toEqual('Alpaca UI')
+    expect(label.attributes().for).toBeDefined()
+    expect(label.attributes().for).toBe('input-id')
   })
 
   it('emits an input event', () => {
     const wrapper = mount(AInput, {
       propsData: {
-        id: 'input-id'
+        id: 'input-id',
+        label: 'input label'
       }
     })
 
diff --git a/src/molecules/input/Input.stories.js b/src/molecules/input/Input.stories.js
index 12af9acac..67c761c5f 100644
--- a/src/molecules/input/Input.stories.js
+++ b/src/molecules/input/Input.stories.js
@@ -1,5 +1,6 @@
 import AInput from './Input.vue'
 import AIcon from '../../atoms/icon/Icon.vue'
+import ALabel from '../../atoms/label/Label.vue'
 import AIconPerson from '../../atoms/icon/templates/IconPerson.vue'
 
 export default {
@@ -56,7 +57,7 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({})
 Default.args = defaultArgs
 
-export const WithSlots = (args, { argTypes }) => ({
+export const WithSlotsIcon = (args, { argTypes }) => ({
   components: { AInput, AIcon, AIconPerson },
   props: Object.keys(argTypes),
   data: () => {
@@ -68,11 +69,12 @@ export const WithSlots = (args, { argTypes }) => ({
     <div>
       <a-input
         v-model="inputValue"
+        type="text"
         :label="label"
         :id="id"
         :variant="variant"
       >
-        <template #icon="{ variant   }">
+        <template #icon="{ variant }">
           <div
             :class="[
               'h-12 w-12',
@@ -95,4 +97,34 @@ export const WithSlots = (args, { argTypes }) => ({
   `
 })
 
-WithSlots.args = defaultArgs
+WithSlotsIcon.args = defaultArgs
+
+export const WithSlotsLabel = (args, { argTypes }) => ({
+  components: { AInput, ALabel },
+  props: Object.keys(argTypes),
+  data: () => {
+    return {
+      inputValue: ''
+    }
+  },
+  template: `
+    <div>
+      <a-input
+        v-model="inputValue"
+        type="text"
+        label="Slots label input"
+        :id="id"
+        :variant="variant"
+      >
+        <template #label="{ label, id }">
+          <a-label
+            :for="id"
+          >
+            {{ label }}
+          </a-label>
+        </template>
+      </a-input>
+    </div>
+  `
+})
+WithSlotsLabel.args = defaultArgs
diff --git a/src/molecules/input/Input.vue b/src/molecules/input/Input.vue
index 2f4d867b2..4fbc3c952 100644
--- a/src/molecules/input/Input.vue
+++ b/src/molecules/input/Input.vue
@@ -12,4 +12,3 @@ export default {
   mixins: [AInput]
 }
 </script>
-<style src="./Input.css" />
diff --git a/tailwind.config.js b/tailwind.config.js
index b3289ee44..bdd2708f6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,11 @@ module.exports = {
     extend: {
       maxWidth: {
         content: '1328px'
-      }
+      },
+      outline: theme => ({
+        ...theme('colors'),
+        focus: [`1px solid ${theme('colors.blue.400')}`, '-2px']
+      })
     },
     screens: {
       xs: '320px',
@@ -31,7 +35,8 @@ module.exports = {
       ...theme('colors'),
       primary: theme('colors.gray.500'),
       secondary: theme('colors.gray.600'),
-      form: theme('colors.gray.300'),
+      form: theme('colors.gray.400'),
+      formfilled: theme('colors.gray.900'),
       dark: theme('colors.gray.800'),
       light: theme('colors.gray.300'),
 
@@ -49,10 +54,6 @@ module.exports = {
       dark: theme('colors.gray.800'),
       light: theme('colors.gray.200')
     }),
-    outline: theme => ({
-      ...theme('colors'),
-      focus: [`2px solid ${theme('colors.blue.200')}`, '-1px']
-    })
   },
   variants: {},
   plugins: [],