feature/update-label

src/atoms/label/Label.css

@@ -0,0 +1,13 @@
+.a-label {
+  @apply block;
+  @apply mb-1;
+  @apply text-gray-600 leading-relaxed;
+}
+
+.a-label--inline {
+  @apply mr-2;
+}
+
+.a-label--hidden {
+  @apply sr-only;
+}

src/atoms/label/Label.html

@@ -0,0 +1,6 @@
+<label
+  class="a-label"
+>
+  <!-- @slot Slot for label content -->
+  <slot />
+</label>

src/atoms/label/Label.js

@@ -0,0 +1,2 @@
+// @vue/component
+export default {}

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

@@ -10,18 +10,6 @@ describe('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: {

src/atoms/label/Label.stories.js

@@ -0,0 +1,30 @@
+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>
+  `
+})

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

@@ -5,9 +5,8 @@ import ALabel from './Label.js'
 
 export default {
   name: 'AlpacaLabel',
-
   mixins: [ALabel]
 }
 </script>
 
-<style lang="scss" src="./Label.scss" />
+<style src="./Label.css" />