feature/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 → src/atoms/label/Label.html

@@ -2,5 +2,6 @@
   :is="tag"
   class="a-label"
 >
+  <!-- @slot Slot for label content -->
   <slot />
 </component>

_src /atoms/label/Label.js → src/atoms/label/Label.js

@@ -2,7 +2,7 @@
 export default {
   props: {
     /**
-     * Label tag
+     * To use another tag instead of 'label'
      */
     tag: {
       type: String,

src/atoms/label/Label.stories.js

@@ -0,0 +1,53 @@
+import { select, text } from '@storybook/addon-knobs'
+
+import getClassKnobsConfig from '@utils/helpers/get-class-knobs-config.js'
+import selectorsConfig from './Label.selectors.json'
+
+import ALabel from './Label.vue'
+
+const classKnobsConfig = getClassKnobsConfig(selectorsConfig)
+
+export default {
+  title: 'Atoms/Label',
+  component: ALabel
+}
+
+export const Default = () => ({
+  components: { ALabel },
+  props: {
+    classKnobs: {
+      default: select('BEM Modifier', classKnobsConfig)
+    },
+    textKnobs: {
+      default: text('Text', 'Label')
+    }
+  },
+  template: `
+    <a-label :class="classKnobs">
+      {{ textKnobs }}
+    </a-label>
+  `
+})
+
+export const CustomTag = () => ({
+  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 → src/atoms/label/Label.vue

@@ -10,4 +10,4 @@ export default {
 }
 </script>
 
-<style lang="scss" src="./Label.scss" />
+<style lang="css" src="./Label.css" />