Merge branch 'feature/update-button' into feature/update

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',

src/atoms/button/Button.html

@@ -1,6 +1,5 @@
 <button
   :class="getClass('button')"
-  :variant="variant"
   type="button"
   v-bind="$attrs"
   v-on="$listeners"

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,25 +34,7 @@ export default {
         fluid: {
           button: ['w-full']
         }
-      })
-    }
-  },
-  methods: {
-    getClass (el) {
-      let classes = []
-      const baseStyles = this.styles.base
-      if (baseStyles) {
-        classes = [...baseStyles[el]]
       }
-      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
     }
   }
 }

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')
+  })
 })

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'
+}

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]

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'
     }