fix: add button classes (#7)

warp-ds · Apr 4, 2023 · 192f983 · 192f983
1 parent 030f912
commit 192f983
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/components/button/w-button.vue b/components/button/w-button.vue
@@ -11,6 +11,16 @@ export default { name: 'wButton' }
 
 <script setup>
 import { computed, useAttrs } from 'vue'
+import { button } from '@warp-ds/component-classes';
+
+const buttonTypes = [    
+  'primary',
+  'secondary',
+  'negative',
+  'utility',
+  'pill',
+  'link',
+];
 
 const attrs = useAttrs()
 const props = defineProps({
@@ -26,22 +36,26 @@ const props = defineProps({
   href: String,
   label: String
 })
+
 const buttonClass = computed(() => ({
-  'inline-flex rounded-8 max-w-max focusable justify-center cursor-pointer py-8 px-12 i-text-$button-color-text-primary i-bg-$button-color-background-primary': true,
+  [button.buttonSecondary]: props.secondary && !props.quiet || !buttonTypes.find(b => !!props[b]),
   // primary buttons
-  'button--primary': props.primary && !props.negative,
-  'button--destructive': props.primary && props.negative,
+  [button.buttonPrimary]: props.primary && !props.negative,
+  [button.buttonDestructive]: props.primary && props.negative,
   // quiet
-  'button--flat': (props.secondary || (!props.negative && !props.utility)) && props.quiet,
-  'button--destructive-flat': props.negative && props.quiet,
-  'button--utility-flat': props.utility && props.quiet,
+  [button.buttonFlat]: (props.secondary || (!props.negative && !props.utility)) && props.quiet,
+  [button.buttonDestructiveFlat]: props.negative && props.quiet,
+  [button.buttonUtilityFlat]: props.utility && props.quiet,
   // others
-  'button--small': props.small,
-  'button--utility': props.utility && !props.quiet,
-  'button--link': props.link,
-  'button--pill': props.pill,
-  'button--in-progress': props.loading,
+  [button.buttonSmall]: props.small,
+  [button.buttonUtility]: props.utility && !props.quiet,
+  [button.buttonLink]: props.link,
+  [button.buttonPill]: props.pill,
+  [button.buttonInProgress]: props.loading,
+  [button.buttonIsDisabled]: props.disabled,
+  ['inline-block']: !!props.href
 }))
+
 const saneDefaults = computed(() => ({
   type: props.href ? undefined : (attrs.type || 'button'),
   rel: attrs.target === '_blank' ? (attrs.rel || 'noopener') : undefined

diff --git a/test/wButton.test.js b/test/wButton.test.js
@@ -20,7 +20,7 @@ describe('button', () => {
   test('primary', () => {
     const wrapper = mount(wButton, { props: { primary: true, label } })
     assert.equal(wrapper.text(), 'Hello Warp')
-    assert.ok(wrapper.componentVM.buttonClass['button--primary'])
+    assert.include(wrapper.classes().join(' '), 'py-12 px-16 border-0 font-bold rounded-8 leading-24 max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover! active:i-bg-$color-button-primary-background-active')
   })
   test('href', () => {
     const href = 'https://finn.no'