From 1b0c997d7d692cdd6f79b6e54fc830b75fb642d3 Mon Sep 17 00:00:00 2001
From: Ania <anna.karon@snow.dog>
Date: Fri, 26 Mar 2021 13:26:10 +0100
Subject: [PATCH 1/4] update button

---
 jest.config.js                     | 14 ++---
 src/atoms/button/Button.html       |  1 -
 src/atoms/button/Button.js         | 37 +++---------
 src/atoms/button/Button.spec.js    | 14 ++++-
 src/atoms/button/Button.stories.js | 97 +++++++++++++-----------------
 src/atoms/button/Button.vue        |  3 -
 tailwind.config.js                 |  3 +
 utils/helpers/get-class.js         |  4 +-
 8 files changed, 74 insertions(+), 99 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index 35f80e052..d70a026c2 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,19 +1,19 @@
 module.exports = {
-  'moduleNameMapper': {
+  moduleNameMapper: {
     '^vue$': 'vue/dist/vue.common.js'
   },
-  'moduleFileExtensions': [
+  moduleFileExtensions: [
     'js',
     'vue'
   ],
-  'testMatch': ['<rootDir>/src/**/?(*.)+(spec|test).(ts|tsx|mjs|js|jsx)'],
-  'transform': {
+  testMatch: ['<rootDir>/src/**/?(*.)+(spec|test).(ts|tsx|mjs|js|jsx)'],
+  transform: {
     '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
     '.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor'
   },
-  'collectCoverage': true,
-  'coverageDirectory': './coverage/',
-  'collectCoverageFrom': [
+  collectCoverage: true,
+  coverageDirectory: './coverage/',
+  collectCoverageFrom: [
     '**/src/atoms/*/*.vue',
     '!**/atoms/transition-expand/*.vue',
     '**/src/molecules/*/*.vue',
diff --git a/src/atoms/button/Button.html b/src/atoms/button/Button.html
index 2b465c011..4ad0e11c0 100644
--- a/src/atoms/button/Button.html
+++ b/src/atoms/button/Button.html
@@ -1,6 +1,5 @@
 <button
   :class="getClass('button')"
-  :variant="variant"
   type="button"
   v-bind="$attrs"
   v-on="$listeners"
diff --git a/src/atoms/button/Button.js b/src/atoms/button/Button.js
index 7525d1b63..803d59961 100644
--- a/src/atoms/button/Button.js
+++ b/src/atoms/button/Button.js
@@ -1,19 +1,17 @@
-// @vue/component
+import getClass from '../../../utils/helpers/get-class.js'
+
 export default {
-  props: {
-    variant: {
-      type: [String, Array],
-      default: ''
-    },
-    styles: {
-      type: Object,
-      default: () => ({
+  mixins: [getClass],
+  data () {
+    return {
+      config: {
         base: {
           button: [
             'px-4',
             'h-12',
             'font-medium', 'uppercase',
-            'transition-colors', 'duration-200', 'ease-in'
+            'transition-colors', 'duration-200', 'ease-in',
+            'focus:outline-focus'
           ]
         },
         primary: {
@@ -36,26 +34,7 @@ export default {
         fluid: {
           button: ['w-full']
         }
-      })
-    }
-  },
-  methods: {
-    getClass (el) {
-      let classes = []
-      const baseStyles = this.styles.base
-      if (baseStyles) {
-        classes = [...baseStyles[el]]
       }
-      console.log(this.variant)
-      if (typeof this.variant !== 'string') {
-        this.variant.forEach(item => {
-          classes.push(this.styles[item][el])
-        })
-      } else {
-        classes.push(this.styles[this.variant][el])
-      }
-
-      return classes
     }
   }
 }
diff --git a/src/atoms/button/Button.spec.js b/src/atoms/button/Button.spec.js
index 51412087f..c9c30c738 100644
--- a/src/atoms/button/Button.spec.js
+++ b/src/atoms/button/Button.spec.js
@@ -6,9 +6,19 @@ describe('atoms/Button', () => {
     const wrapper = mount(AButton)
 
     expect(wrapper.element.tagName).toBe('BUTTON')
-    expect(wrapper.classes()).toContain('a-btn')
-    expect(wrapper.classes().length).toBe(1)
     expect(wrapper.attributes().type).toBeDefined()
     expect(wrapper.attributes().type).toBe('button')
   })
+
+  it('renders slot text when passed', () => {
+    const wrapper = mount(AButton, {
+      slots: {
+        default: `
+          <span>Button with span</span>
+        `
+      }
+    })
+    expect(wrapper.find('button span').exists()).toBe(true)
+    expect(wrapper.find('button span').text()).toEqual('Button with span')
+  })
 })
diff --git a/src/atoms/button/Button.stories.js b/src/atoms/button/Button.stories.js
index ee22325d6..fdf496332 100644
--- a/src/atoms/button/Button.stories.js
+++ b/src/atoms/button/Button.stories.js
@@ -1,69 +1,58 @@
-import { text } from '@storybook/addon-knobs'
-import { action } from '@storybook/addon-actions'
-
 import AButton from './Button.vue'
 
 export default {
   title: 'Atoms/Button',
-  component: AButton
+  component: AButton,
+  argTypes: {
+    variant: {
+      control: {
+        type: 'multi-select',
+        options: [
+          'primary',
+          'secondary',
+          'fluid'
+        ]
+      }
+    },
+    onClick: {
+      action: 'clicked'
+    },
+    text: {
+      control: {
+        type: 'text'
+      }
+    }
+  }
 }
 
-export const Default = () => ({
+const Template = (args, { argTypes }) => ({
   components: { AButton },
-  props: {
-    textKnobs: {
-      default: text('Text', 'Button text')
-    }
-  },
-  methods: {
-    buttonClick: action('Click')
-  },
+  props: Object.keys(argTypes),
   template: `
     <a-button
-      variant="primary"
-      @click="buttonClick"
+      :variant="variant"
+      type="button"
+      v-bind="$props"
+      @click="onClick"
     >
-      {{ textKnobs }}
+      {{ text }}
     </a-button>
   `
 })
 
-export const Secondary = () => ({
-  components: { AButton },
-  props: {
-    textKnobs: {
-      default: text('Text', 'Button text')
-    }
-  },
-  methods: {
-    buttonClick: action('Click')
-  },
-  template: `
-    <a-button
-      variant="secondary"
-      @click="buttonClick"
-    >
-      {{ textKnobs }}
-    </a-button>
-  `
-})
+export const Primary = Template.bind({})
+Primary.args = {
+  variant: 'primary',
+  text: 'Button primary'
+}
+export const Secondary = Template.bind({})
+Secondary.args = {
+  variant: 'secondary',
+  text: 'Button secondary'
+}
 
-export const SecondaryFuild = () => ({
-  components: { AButton },
-  props: {
-    textKnobs: {
-      default: text('Text', 'Button text')
-    }
-  },
-  methods: {
-    buttonClick: action('Click')
-  },
-  template: `
-    <a-button
-      :variant="['secondary', 'fluid']"
-      @click="buttonClick"
-    >
-      {{ textKnobs }}
-    </a-button>
-  `
-})
+export const Fluid = Template.bind({})
+Fluid.args = {
+  variant: 'fluid',
+  text: 'Button fluid'
+}
diff --git a/src/atoms/button/Button.vue b/src/atoms/button/Button.vue
index d796beb53..3b47656eb 100644
--- a/src/atoms/button/Button.vue
+++ b/src/atoms/button/Button.vue
@@ -3,9 +3,6 @@
 <script>
 import AButton from './Button.js'
 
-/**
- * Check Knobs tab to edit component properties dynamicaly.
- */
 export default {
   name: 'AlpacaButton',
   mixins: [AButton]
diff --git a/tailwind.config.js b/tailwind.config.js
index 82125dab6..9dd79059c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -69,6 +69,9 @@ module.exports = {
       dark: theme('colors.gray.800'),
       light: theme('colors.gray.200')
     }),
+    outline: theme => ({
+      focus: [`2px solid ${theme('colors.bright-sky-blue')}`, '-1px']
+    }),
     maxWidth: {
       content: '1328px'
     }
diff --git a/utils/helpers/get-class.js b/utils/helpers/get-class.js
index d3522cd58..3a55a2228 100644
--- a/utils/helpers/get-class.js
+++ b/utils/helpers/get-class.js
@@ -1,5 +1,3 @@
-import alpaca from '../../default.config.js'
-
 export default {
   props: {
     variant: {
@@ -9,7 +7,7 @@ export default {
   },
   methods: {
     getClass (el) {
-      const styles = alpaca[this.$options.name]
+      const styles = this.config
       const baseStyles = styles.base
       const primaryStyles = styles.primary
       let variantStyles

From 70c733646d039b31276384d7c53f873cf8fbcf95 Mon Sep 17 00:00:00 2001
From: Ania <anna.karon@snow.dog>
Date: Fri, 26 Mar 2021 13:26:36 +0100
Subject: [PATCH 2/4] update ci node version

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 74f4d4d68..9fa8d987c 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -2,7 +2,7 @@ version: 2
 jobs:
   build:
     docker:
-      - image: circleci/node:dubnium
+      - image: circleci/node:lts
     steps:
       - checkout
       - run: yarn

From 3c07527e08ec68000741711e6a916d0d22de8a09 Mon Sep 17 00:00:00 2001
From: Ania <anna.karon@snow.dog>
Date: Fri, 26 Mar 2021 13:45:18 +0100
Subject: [PATCH 3/4] update tests

---
 src/atoms/button/Button.spec.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/atoms/button/Button.spec.js b/src/atoms/button/Button.spec.js
index c9c30c738..547d5094b 100644
--- a/src/atoms/button/Button.spec.js
+++ b/src/atoms/button/Button.spec.js
@@ -1,9 +1,12 @@
 import { mount } from '@vue/test-utils'
+import getClass from '../../../utils/helpers/get-class'
 import AButton from './Button.vue'
 
 describe('atoms/Button', () => {
   it('has default structure', () => {
-    const wrapper = mount(AButton)
+    const wrapper = mount(AButton, {
+      mixins: [getClass]
+    })
 
     expect(wrapper.element.tagName).toBe('BUTTON')
     expect(wrapper.attributes().type).toBeDefined()

From 0a4f2c330fd4155648b32447a0f06ad9c5354c56 Mon Sep 17 00:00:00 2001
From: Ania <anna.karon@snow.dog>
Date: Fri, 26 Mar 2021 13:51:52 +0100
Subject: [PATCH 4/4] update test

---
 src/atoms/button/Button.spec.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/atoms/button/Button.spec.js b/src/atoms/button/Button.spec.js
index 547d5094b..c9c30c738 100644
--- a/src/atoms/button/Button.spec.js
+++ b/src/atoms/button/Button.spec.js
@@ -1,12 +1,9 @@
 import { mount } from '@vue/test-utils'
-import getClass from '../../../utils/helpers/get-class'
 import AButton from './Button.vue'
 
 describe('atoms/Button', () => {
   it('has default structure', () => {
-    const wrapper = mount(AButton, {
-      mixins: [getClass]
-    })
+    const wrapper = mount(AButton)
 
     expect(wrapper.element.tagName).toBe('BUTTON')
     expect(wrapper.attributes().type).toBeDefined()