From 37b717b1427caef157243e5a20cca3e09cc188e6 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 2 May 2024 16:11:50 -0700
Subject: [PATCH] refactor(web): button component no style option

---
 web/components/Brand/Button.vue | 18 +++++++++++-------
 web/types/ui/button.ts          |  4 +++-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/web/components/Brand/Button.vue b/web/components/Brand/Button.vue
index d46c6fac6..92cfa42f1 100644
--- a/web/components/Brand/Button.vue
+++ b/web/components/Brand/Button.vue
@@ -6,12 +6,14 @@ import type { ButtonProps } from '~/types/ui/button';
 const props = withDefaults(defineProps<ButtonProps>(), {
   btnStyle: 'fill',
   btnType: 'button',
+  class: undefined,
   click: undefined,
   href: undefined,
   icon: undefined,
   iconRight: undefined,
   iconRightHoverDisplay: false,
   // iconRightHoverAnimate: true,
+  noPadding: false,
   size: '16px',
   text: '',
   title: '',
@@ -58,33 +60,35 @@ const classes = computed(() => {
 
   switch (props.size) {
     case '12px':
-      buttonSize = 'text-12px p-8px gap-4px';
+      buttonSize = `text-12px  ${props.noPadding ? 'p-0' : 'p-8px'} gap-4px`;
       iconSize = 'w-12px';
       break;
     case '14px':
-      buttonSize = 'text-14px p-8px gap-8px';
+      buttonSize = `text-14px  ${props.noPadding ? 'p-0' : 'p-8px'} gap-8px`;
       iconSize = 'w-14px';
       break;
     case '16px':
-      buttonSize = 'text-16px p-12px gap-8px';
+      buttonSize = `text-16px  ${props.noPadding ? 'p-0' : 'p-12px'} gap-8px`;
       iconSize = 'w-16px';
       break;
     case '18px':
-      buttonSize = 'text-18px p-12px gap-8px';
+      buttonSize = `text-18px  ${props.noPadding ? 'p-0' : 'p-12px'} gap-8px`;
       iconSize = 'w-18px';
       break;
     case '20px':
-      buttonSize = 'text-20px p-16px gap-8px';
+      buttonSize = `text-20px  ${props.noPadding ? 'p-0' : 'p-16px'} gap-8px`;
       iconSize = 'w-20px';
       break;
     case '24px':
-      buttonSize = 'text-24px p-16px gap-8px';
+      buttonSize = `text-24px ${props.noPadding ? 'p-0' : 'p-16px'} gap-8px`;
       iconSize = 'w-24px';
       break;
   }
 
   return {
-    button: `${buttonSize} ${buttonColors} ${buttonDefaults}`,
+    button: props.btnStyle === 'none'
+      ? `${buttonSize} ${props.class}`
+      : `${buttonSize} ${buttonColors} ${buttonDefaults} ${props.class}`,
     icon: `${iconSize} fill-current flex-shrink-0`,
   };
 });
diff --git a/web/types/ui/button.ts b/web/types/ui/button.ts
index 8b6c7a878..ae0000e02 100644
--- a/web/types/ui/button.ts
+++ b/web/types/ui/button.ts
@@ -1,6 +1,7 @@
 export interface ButtonProps {
-  btnStyle?: 'black' | 'fill' | 'gray' | 'outline' | 'outline-black' | 'outline-white' | 'underline' | 'underline-hover-red' | 'white';
+  btnStyle?: 'black' | 'fill' | 'gray' | 'outline' | 'outline-black' | 'outline-white' | 'underline' | 'underline-hover-red' | 'white' | 'none';
   btnType?: 'button' | 'submit' | 'reset';
+  class?: string;
   click?: () => void;
   disabled?: boolean;
   download?: boolean;
@@ -10,6 +11,7 @@ export interface ButtonProps {
   iconRight?: Component;
   iconRightHoverDisplay?: boolean;
   // iconRightHoverAnimate?: boolean;
+  noPadding?: boolean;
   size?: '12px' | '14px' | '16px' | '18px' | '20px' | '24px';
   text?: string;
   title?: string;