From d16e44c0c1eaa7afd5100dcc00e7a804d362b38e Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 3 Jul 2020 14:05:38 +0200
Subject: [PATCH 1/4] update label

---
 src/atoms/label/Label.css            | 15 ++++++++
 src/atoms/label/Label.html           |  7 ++++
 src/atoms/label/Label.js             | 12 ++++++
 src/atoms/label/Label.selectors.json | 10 +++++
 src/atoms/label/Label.spec.js        | 37 ++++++++++++++++++
 src/atoms/label/Label.stories.js     | 56 ++++++++++++++++++++++++++++
 src/atoms/label/Label.vue            | 13 +++++++
 7 files changed, 150 insertions(+)
 create mode 100644 src/atoms/label/Label.css
 create mode 100644 src/atoms/label/Label.html
 create mode 100644 src/atoms/label/Label.js
 create mode 100644 src/atoms/label/Label.selectors.json
 create mode 100644 src/atoms/label/Label.spec.js
 create mode 100644 src/atoms/label/Label.stories.js
 create mode 100644 src/atoms/label/Label.vue

diff --git a/src/atoms/label/Label.css b/src/atoms/label/Label.css
new file mode 100644
index 000000000..a8607b1d5
--- /dev/null
+++ b/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;
+}
diff --git a/src/atoms/label/Label.html b/src/atoms/label/Label.html
new file mode 100644
index 000000000..8588c5d2f
--- /dev/null
+++ b/src/atoms/label/Label.html
@@ -0,0 +1,7 @@
+<component
+  :is="tag"
+  class="a-label"
+>
+  <!-- @slot Slot for label content -->
+  <slot />
+</component>
diff --git a/src/atoms/label/Label.js b/src/atoms/label/Label.js
new file mode 100644
index 000000000..881fbeeea
--- /dev/null
+++ b/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'
+    }
+  }
+}
diff --git a/src/atoms/label/Label.selectors.json b/src/atoms/label/Label.selectors.json
new file mode 100644
index 000000000..936b292cd
--- /dev/null
+++ b/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"
+  }
+]
diff --git a/src/atoms/label/Label.spec.js b/src/atoms/label/Label.spec.js
new file mode 100644
index 000000000..7a1b3e216
--- /dev/null
+++ b/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')
+  })
+})
diff --git a/src/atoms/label/Label.stories.js b/src/atoms/label/Label.stories.js
new file mode 100644
index 000000000..6f641f2af
--- /dev/null
+++ b/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>
+    `
+  }))
diff --git a/src/atoms/label/Label.vue b/src/atoms/label/Label.vue
new file mode 100644
index 000000000..8a2dde632
--- /dev/null
+++ b/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" />

From 93664ccf34bacaa5067250e15ef4ba7cbeff0c6a Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 3 Jul 2020 14:26:16 +0200
Subject: [PATCH 2/4] remove label from _src

---
 _src /atoms/label/Label.html           |  6 ---
 _src /atoms/label/Label.js             | 12 ------
 _src /atoms/label/Label.scss           | 27 -------------
 _src /atoms/label/Label.selectors.json | 10 -----
 _src /atoms/label/Label.spec.js        | 37 ------------------
 _src /atoms/label/Label.stories.js     | 53 --------------------------
 _src /atoms/label/Label.vue            | 13 -------
 7 files changed, 158 deletions(-)
 delete mode 100644 _src /atoms/label/Label.html
 delete mode 100644 _src /atoms/label/Label.js
 delete mode 100644 _src /atoms/label/Label.scss
 delete mode 100644 _src /atoms/label/Label.selectors.json
 delete mode 100644 _src /atoms/label/Label.spec.js
 delete mode 100644 _src /atoms/label/Label.stories.js
 delete mode 100644 _src /atoms/label/Label.vue

diff --git a/_src /atoms/label/Label.html b/_src /atoms/label/Label.html
deleted file mode 100644
index e6b244148..000000000
--- a/_src /atoms/label/Label.html	
+++ /dev/null
@@ -1,6 +0,0 @@
-<component
-  :is="tag"
-  class="a-label"
->
-  <slot />
-</component>
diff --git a/_src /atoms/label/Label.js b/_src /atoms/label/Label.js
deleted file mode 100644
index 2576b8fe3..000000000
--- a/_src /atoms/label/Label.js	
+++ /dev/null
@@ -1,12 +0,0 @@
-// @vue/component
-export default {
-  props: {
-    /**
-     * Label tag
-     */
-    tag: {
-      type: String,
-      default: 'label'
-    }
-  }
-}
diff --git a/_src /atoms/label/Label.scss b/_src /atoms/label/Label.scss
deleted file mode 100644
index e9fa794e1..000000000
--- a/_src /atoms/label/Label.scss	
+++ /dev/null
@@ -1,27 +0,0 @@
-@import '../../../assets/styles/_globals.scss';
-
-$label-margin--inline: 0 $spacer 0 0 !default;
-$label-font-size     : $font-size-base !default;
-$label-color         : $color-secondary !default;
-$label-font-family   : $font-family-base !default;
-$label-font-weight   : $font-weight-normal !default;
-$label-line-height   : $font-line-height !default;
-$label-transition    : none !default;
-
-.a-label {
-  display: block;
-  color: $label-color;
-  font-weight: $label-font-weight;
-  font-size: $label-font-size;
-  font-family: $label-font-family;
-  line-height: $label-line-height;
-  transition: $label-transition;
-
-  &--inline {
-    margin: $label-margin--inline;
-  }
-
-  &--hidden {
-    @include visually-hidden();
-  }
-}
diff --git a/_src /atoms/label/Label.selectors.json b/_src /atoms/label/Label.selectors.json
deleted file mode 100644
index 936b292cd..000000000
--- a/_src /atoms/label/Label.selectors.json	
+++ /dev/null
@@ -1,10 +0,0 @@
-[
-  {
-    "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"
-  }
-]
diff --git a/_src /atoms/label/Label.spec.js b/_src /atoms/label/Label.spec.js
deleted file mode 100644
index 7a1b3e216..000000000
--- a/_src /atoms/label/Label.spec.js	
+++ /dev/null
@@ -1,37 +0,0 @@
-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')
-  })
-})
diff --git a/_src /atoms/label/Label.stories.js b/_src /atoms/label/Label.stories.js
deleted file mode 100644
index 5aae0d5fc..000000000
--- a/_src /atoms/label/Label.stories.js	
+++ /dev/null
@@ -1,53 +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 './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')
-      }
-    },
-    template: `
-      <a-label
-        tag="span"
-        :class="classKnobs"
-      >
-        {{ textKnobs }}
-      </a-label>
-    `
-  }))
diff --git a/_src /atoms/label/Label.vue b/_src /atoms/label/Label.vue
deleted file mode 100644
index 8a1e1afd7..000000000
--- a/_src /atoms/label/Label.vue	
+++ /dev/null
@@ -1,13 +0,0 @@
-<template src="./Label.html" />
-
-<script>
-import ALabel from './Label.js'
-
-export default {
-  name: 'AlpacaLabel',
-
-  mixins: [ALabel]
-}
-</script>
-
-<style lang="scss" src="./Label.scss" />

From f63fb8a9c4e8e7343ca0265fa3dbadbe1b5d4818 Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 17 Jul 2020 13:51:41 +0200
Subject: [PATCH 3/4] update stories

---
 src/atoms/label/Label.stories.js | 87 +++++++++++++++-----------------
 1 file changed, 42 insertions(+), 45 deletions(-)

diff --git a/src/atoms/label/Label.stories.js b/src/atoms/label/Label.stories.js
index 6f641f2af..80cd4d8d7 100644
--- a/src/atoms/label/Label.stories.js
+++ b/src/atoms/label/Label.stories.js
@@ -1,56 +1,53 @@
-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')
-      }
+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)
     },
-    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')
-      }
+    textKnobs: {
+      default: text('Text', 'Custom tag label')
     },
-    template: `
-      <a-label
-        :tag="tagKnob"
-        :class="classKnobs"
-      >
-        {{ textKnobs }}
-      </a-label>
-    `
-  }))
+    tagKnob: {
+      default: text('Html tag', 'span')
+    }
+  },
+  template: `
+    <a-label
+      :tag="tagKnob"
+      :class="classKnobs"
+    >
+      {{ textKnobs }}
+    </a-label>
+  `
+})

From 546a48615644dcb5fe09e6592c776442f7d231ef Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 31 Jul 2020 12:02:10 +0200
Subject: [PATCH 4/4] CR fixes

---
 src/atoms/label/Label.css        |  4 +---
 src/atoms/label/Label.html       |  5 ++---
 src/atoms/label/Label.js         | 12 +-----------
 src/atoms/label/Label.spec.js    | 12 ------------
 src/atoms/label/Label.stories.js | 23 -----------------------
 src/atoms/label/Label.vue        |  3 +--
 6 files changed, 5 insertions(+), 54 deletions(-)

diff --git a/src/atoms/label/Label.css b/src/atoms/label/Label.css
index a8607b1d5..f76765d48 100644
--- a/src/atoms/label/Label.css
+++ b/src/atoms/label/Label.css
@@ -1,9 +1,7 @@
-
 .a-label {
   @apply block;
   @apply mb-1;
-  @apply text-gray-600 font-normal text-base font-sans leading-relaxed;
-  @apply transition-none;
+  @apply text-gray-600 leading-relaxed;
 }
 
 .a-label--inline {
diff --git a/src/atoms/label/Label.html b/src/atoms/label/Label.html
index 8588c5d2f..26f54399a 100644
--- a/src/atoms/label/Label.html
+++ b/src/atoms/label/Label.html
@@ -1,7 +1,6 @@
-<component
-  :is="tag"
+<label
   class="a-label"
 >
   <!-- @slot Slot for label content -->
   <slot />
-</component>
+</label>
diff --git a/src/atoms/label/Label.js b/src/atoms/label/Label.js
index 881fbeeea..5e1e33d65 100644
--- a/src/atoms/label/Label.js
+++ b/src/atoms/label/Label.js
@@ -1,12 +1,2 @@
 // @vue/component
-export default {
-  props: {
-    /**
-     * To use another tag instead of 'label'
-     */
-    tag: {
-      type: String,
-      default: 'label'
-    }
-  }
-}
+export default {}
diff --git a/src/atoms/label/Label.spec.js b/src/atoms/label/Label.spec.js
index 7a1b3e216..d95f6684d 100644
--- a/src/atoms/label/Label.spec.js
+++ b/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: {
diff --git a/src/atoms/label/Label.stories.js b/src/atoms/label/Label.stories.js
index 80cd4d8d7..17b3d0729 100644
--- a/src/atoms/label/Label.stories.js
+++ b/src/atoms/label/Label.stories.js
@@ -28,26 +28,3 @@ export const Default = () => ({
     </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>
-  `
-})
diff --git a/src/atoms/label/Label.vue b/src/atoms/label/Label.vue
index 8a2dde632..7c73514b5 100644
--- a/src/atoms/label/Label.vue
+++ b/src/atoms/label/Label.vue
@@ -5,9 +5,8 @@ import ALabel from './Label.js'
 
 export default {
   name: 'AlpacaLabel',
-
   mixins: [ALabel]
 }
 </script>
 
-<style lang="css" src="./Label.css" />
+<style src="./Label.css" />