update label

src/atoms/label/Label.css

@@ -0,0 +1,15 @@
+
+.a-label {
+  @apply block;
+  @apply mb-1;
+  @apply text-gray-600 font-normal text-base font-sans leading-relaxed;
+  @apply transition-none;
+}
+
+.a-label--inline {
+  @apply mr-2;
+}
+
+.a-label--hidden {
+  @apply sr-only;
+}

src/atoms/label/Label.html

@@ -0,0 +1,7 @@
+<component
+  :is="tag"
+  class="a-label"
+>
+  <!-- @slot Slot for label content -->
+  <slot />
+</component>

src/atoms/label/Label.js

@@ -0,0 +1,12 @@
+// @vue/component
+export default {
+  props: {
+    /**
+     * To use another tag instead of 'label'
+     */
+    tag: {
+      type: String,
+      default: 'label'
+    }
+  }
+}

src/atoms/label/Label.selectors.json

@@ -0,0 +1,10 @@
+[
+  {
+    "name": ".a-label--inline",
+    "description": "Selector for applying inline styles"
+  },
+  {
+    "name": ".a-label--hidden",
+    "description": "Selector for applying hidden styles, mainly used for accessibility purposes"
+  }
+]

src/atoms/label/Label.spec.js

@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils'
+import ALabel from './Label.vue'
+
+describe('Label', () => {
+  it('has default structure', () => {
+    const wrapper = mount(ALabel)
+
+    expect(wrapper.is('label')).toBe(true)
+    expect(wrapper.classes()).toContain('a-label')
+    expect(wrapper.classes().length).toBe(1)
+  })
+
+  it('renders custom root element', () => {
+    const wrapper = mount(ALabel, {
+      propsData: {
+        tag: 'span'
+      }
+    })
+
+    expect(wrapper.is('span')).toBe(true)
+    expect(wrapper.classes()).toContain('a-label')
+    expect(wrapper.classes().length).toBe(1)
+  })
+
+  it('renders slot text when passed', () => {
+    const wrapper = mount(ALabel, {
+      slots: {
+        default: `
+          <span>Alpaca UI</span>
+        `
+      }
+    })
+
+    expect(wrapper.find('label span').exists()).toBe(true)
+    expect(wrapper.find('label span').text()).toEqual('Alpaca UI')
+  })
+})

src/atoms/label/Label.stories.js

@@ -0,0 +1,56 @@
+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 './Label.selectors.json'
+
+import ALabel from './Label.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('Atoms/Label', module)
+  .addParameters({ info })
+  .add('Default', () => ({
+    components: { ALabel },
+    props: {
+      classKnobs: {
+        default: select('BEM Modifier', classKnobsConfig)
+      },
+      textKnobs: {
+        default: text('Text', 'Label')
+      }
+    },
+    template: `
+      <a-label :class="classKnobs">
+        {{ textKnobs }}
+      </a-label>
+    `
+  }))
+  .add('Custom tag', () => ({
+    components: { ALabel },
+    props: {
+      classKnobs: {
+        default: select('BEM Modifier', classKnobsConfig)
+      },
+      textKnobs: {
+        default: text('Text', 'Custom tag label')
+      },
+      tagKnob: {
+        default: text('Html tag', 'span')
+      }
+    },
+    template: `
+      <a-label
+        :tag="tagKnob"
+        :class="classKnobs"
+      >
+        {{ textKnobs }}
+      </a-label>
+    `
+  }))

src/atoms/label/Label.vue

@@ -0,0 +1,13 @@
+<template src="./Label.html" />
+
+<script>
+import ALabel from './Label.js'
+
+export default {
+  name: 'AlpacaLabel',
+
+  mixins: [ALabel]
+}
+</script>
+
+<style lang="css" src="./Label.css" />