From 5e6ce1e87db036d8d4dcbbf8bedee56a0a60562c Mon Sep 17 00:00:00 2001
From: zuzannaszymanda <32640873+zuzannaszymanda@users.noreply.github.com>
Date: Fri, 21 May 2021 15:33:14 +0200
Subject: [PATCH] Feature/update label (#312)

* update label

* update label tests

* add primary as default label variant

* update tailwind config & link colors
---
 src/atoms/label/Label.css            | 13 ---------
 src/atoms/label/Label.html           |  4 +--
 src/atoms/label/Label.js             | 28 +++++++++++++++++--
 src/atoms/label/Label.selectors.json | 10 -------
 src/atoms/label/Label.spec.js        |  2 --
 src/atoms/label/Label.stories.js     | 41 +++++++++++++++-------------
 src/atoms/label/Label.vue            |  2 --
 src/atoms/link/Link.js               |  4 +--
 tailwind.config.js                   | 18 ++++++------
 9 files changed, 60 insertions(+), 62 deletions(-)
 delete mode 100644 src/atoms/label/Label.css
 delete mode 100644 src/atoms/label/Label.selectors.json

diff --git a/src/atoms/label/Label.css b/src/atoms/label/Label.css
deleted file mode 100644
index f76765d48..000000000
--- a/src/atoms/label/Label.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.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;
-}
diff --git a/src/atoms/label/Label.html b/src/atoms/label/Label.html
index 26f54399a..331698cde 100644
--- a/src/atoms/label/Label.html
+++ b/src/atoms/label/Label.html
@@ -1,6 +1,4 @@
-<label
-  class="a-label"
->
+<label :class="getClass('label')">
   <!-- @slot Slot for label content -->
   <slot />
 </label>
diff --git a/src/atoms/label/Label.js b/src/atoms/label/Label.js
index 5e1e33d65..90222b678 100644
--- a/src/atoms/label/Label.js
+++ b/src/atoms/label/Label.js
@@ -1,2 +1,26 @@
-// @vue/component
-export default {}
+import getClass from '../../../utils/helpers/get-class.js'
+
+export default {
+  mixins: [getClass],
+  data () {
+    return {
+      config: {
+        base: {
+          label: [
+            'leading-relaxed'
+          ]
+        },
+        primary: {
+          label: [
+            'text-gray-600'
+          ]
+        },
+        hidden: {
+          label: [
+            'sr-only'
+          ]
+        }
+      }
+    }
+  }
+}
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
index 59a52593f..dc350e009 100644
--- a/src/atoms/label/Label.spec.js
+++ b/src/atoms/label/Label.spec.js
@@ -6,8 +6,6 @@ describe('Label', () => {
     const wrapper = mount(ALabel)
 
     expect(wrapper.element.tagName).toBe('LABEL')
-    expect(wrapper.classes()).toContain('a-label')
-    expect(wrapper.classes().length).toBe(1)
   })
 
   it('renders slot text when passed', () => {
diff --git a/src/atoms/label/Label.stories.js b/src/atoms/label/Label.stories.js
index 17b3d0729..a57eefa9b 100644
--- a/src/atoms/label/Label.stories.js
+++ b/src/atoms/label/Label.stories.js
@@ -1,30 +1,33 @@
-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
+  component: ALabel,
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+        options: [
+          'primary',
+          'hidden'
+        ]
+      }
+    }
+  }
 }
 
-export const Default = () => ({
+const Template = (args, { argTypes }) => ({
   components: { ALabel },
-  props: {
-    classKnobs: {
-      default: select('BEM Modifier', classKnobsConfig)
-    },
-    textKnobs: {
-      default: text('Text', 'Label')
-    }
-  },
+  props: Object.keys(argTypes),
   template: `
-    <a-label :class="classKnobs">
-      {{ textKnobs }}
+    <a-label :variant="variant">
+      {{ text }}
     </a-label>
   `
 })
+
+export const Default = Template.bind({})
+Default.args = {
+  text: 'Label',
+  variant: 'primary'
+}
diff --git a/src/atoms/label/Label.vue b/src/atoms/label/Label.vue
index 7c73514b5..cc8b742c4 100644
--- a/src/atoms/label/Label.vue
+++ b/src/atoms/label/Label.vue
@@ -8,5 +8,3 @@ export default {
   mixins: [ALabel]
 }
 </script>
-
-<style src="./Label.css" />
diff --git a/src/atoms/link/Link.js b/src/atoms/link/Link.js
index 42804891e..9276d07b0 100644
--- a/src/atoms/link/Link.js
+++ b/src/atoms/link/Link.js
@@ -20,12 +20,12 @@ export default {
         },
         primary: {
           link: [
-            'text-primary', 'hover:text-blue', 'focus:text-blue'
+            'text-primary', 'hover:text-blue-500', 'focus:text-blue-500'
           ]
         },
         inverted: {
           link: [
-            'text-blue', 'hover:text-primary', 'focus:text-primary'
+            'text-blue-500', 'hover:text-primary', 'focus:text-primary'
           ]
         },
         secondary: {
diff --git a/tailwind.config.js b/tailwind.config.js
index 5ec962363..8f801a9ea 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,8 +4,8 @@ module.exports = {
   ],
   theme: {
     extend: {
-      minHeight: {
-        24: '24px'
+      maxWidth: {
+        content: '1328px'
       }
     },
     screens: {
@@ -29,18 +29,21 @@ module.exports = {
     }),
     borderColor: theme => ({
       ...theme('colors'),
-      default: theme('colors.gray.500'),
       primary: theme('colors.gray.500'),
       secondary: theme('colors.gray.600'),
+      form: theme('colors.gray.500'),
       dark: theme('colors.gray.800'),
-      light: theme('colors.gray.300')
+      light: theme('colors.gray.300'),
+
     }),
     textColor: theme => ({
       ...theme('colors'),
-      default: theme('colors.gray.800'),
       primary: theme('colors.gray.800'),
       secondary: theme('colors.gray.600')
     }),
+    placeholderColor: theme => ({
+      primary: theme('colors.gray.600'),
+    }),
     fill: theme => ({
       ...theme('colors'),
       dark: theme('colors.gray.800'),
@@ -48,10 +51,7 @@ module.exports = {
     }),
     outline: theme => ({
       focus: [`2px solid ${theme('colors.bright-sky-blue')}`, '-1px']
-    }),
-    maxWidth: {
-      content: '1328px'
-    }
+    })
   },
   variants: {},
   plugins: [],