From 192f983a8d5feda1cab6b8c38f86a9b566b95f5e Mon Sep 17 00:00:00 2001
From: AnnaRybkina <37986637+AnnaRybkina@users.noreply.github.com>
Date: Tue, 4 Apr 2023 17:08:00 +0200
Subject: [PATCH] fix: add button classes (#7)

---
 components/button/w-button.vue | 36 +++++++++++++++++++++++-----------
 test/wButton.test.js           |  2 +-
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/components/button/w-button.vue b/components/button/w-button.vue
index e176f04a..1dfbfaa1 100644
--- 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
index e944635a..1b4791c0 100644
--- 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'