Feature/306

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;
+  }
+}

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;
 }

src/atoms/label/Label.js

@@ -12,7 +12,7 @@ export default {
         },
         primary: {
           label: [
-            'text-gray-600'
+            'text-gray-800'
           ]
         },
         hidden: {

src/molecules/input/Input.html

@@ -0,0 +1,34 @@
+<div :class="getClass('input')">
+  <!-- @slot Label (Named slot) -->
+  <slot name="label" v-bind="{ label, id }">
+    <a-label
+      :class="[
+        '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"
+    >
+      {{ label }}
+    </a-label>
+  </slot>
+  <input
+    v-bind="$attrs"
+    v-on="listeners"
+    :value="value"
+    :id="id"
+    :class="[
+      getClass('input__field'),
+      value ? getClass('input__field__filled') : ''
+    ]"
+  >
+  <!-- @slot Icon (Named slot) -->
+  <slot name="icon" v-bind:variant="variant" />
+</div>

src/molecules/input/Input.js

@@ -0,0 +1,78 @@
+// @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,
+      required: true
+    }
+  },
+  computed: {
+    listeners () {
+      return {
+        ...this.$listeners,
+        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__field: [
+            'w-full', 'h-12',
+            'px-4'
+          ],
+          input__field__filled: [
+            'border-formfilled'
+          ]
+        },
+        primary: {
+          input__field: [
+            'border', 'border-solid', 'border-form',
+            'placeholder-primary'
+          ]
+        },
+        inline: {
+          input: [
+            'flex', 'items-center'
+          ],
+          input__field: [
+            'border', 'border-solid', 'border-form', 'placeholder-primary'
+          ]
+        }
+      }
+    }
+  },
+  methods: {
+    isFocused (value) {
+      this.hasFocus = value
+    }
+  }
+}

src/molecules/input/Input.spec.js

@@ -0,0 +1,92 @@
+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',
+        label: 'input label',
+        type: 'text'
+      }
+    })
+    const input = wrapper.find('input')
+    expect(wrapper.element.tagName === 'DIV')
+
+    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('input')
+    expect(input.attributes('type')).toBe('email')
+  })
+
+  it('renders slots content when passed', () => {
+    const wrapper = mount(AInput, {
+      propsData: {
+        id: 'input-id',
+        label: 'Alpaca UI'
+      },
+      scopedSlots: {
+        label: '<label for="input-id">{{ props.label }}</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',
+        label: 'input label'
+      }
+    })
+
+    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')
+  })
+})