From 7c9dc6f855f0670b7827fa3801cb99e098a0656c Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Fri, 10 Nov 2023 10:21:29 +0300
Subject: [PATCH] packages/ui: add button outline variants

---
 apps/web/components/Form.tsx |  4 ++--
 packages/ui/button.tsx       | 20 ++++++++++++++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/apps/web/components/Form.tsx b/apps/web/components/Form.tsx
index 982109a..e932e8e 100644
--- a/apps/web/components/Form.tsx
+++ b/apps/web/components/Form.tsx
@@ -41,8 +41,8 @@ export function Form({ data, metaData, title }: Props) {
       <Divider />
       <div className="grid grid-cols-1 gap-2 gap-x-4 md:grid-cols-3">
         <Button>Сохранить</Button>
-        <Button>Возврат на доработку</Button>
-        <Button color="danger">Отмена</Button>
+        <Button intent="secondary">Возврат на доработку</Button>
+        <Button intent="outline-danger">Отмена</Button>
       </div>
     </Background>
   );
diff --git a/packages/ui/button.tsx b/packages/ui/button.tsx
index 759c524..8954d82 100644
--- a/packages/ui/button.tsx
+++ b/packages/ui/button.tsx
@@ -8,12 +8,19 @@ const variants = cva(
   'rounded-sm h-10 px-5 py-2.5 text-sm font-medium text-white transition-all ease-in-out',
   {
     defaultVariants: {
-      color: 'default',
+      intent: 'default',
     },
     variants: {
-      color: {
+      intent: {
         danger: 'bg-danger hover:bg-danger-700',
         default: 'bg-primary hover:bg-primary-700',
+        'outline-danger':
+          'bg-transparent text-danger border border-danger hover:bg-danger hover:text-white',
+        'outline-default':
+          'bg-transparent text-primary border border-primary hover:bg-primary hover:text-white',
+        'outline-secondary':
+          'opacity-70 bg-transparent text-primary border border-primary hover:bg-primary hover:text-white',
+        secondary: 'bg-primary-400 hover:bg-primary-700 hover:opacity-100',
       },
     },
   }
@@ -22,7 +29,12 @@ const variants = cva(
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof variants>;
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, color, ...props }, ref) => (
-    <button type="button" className={cn(variants({ className, color }))} ref={ref} {...props} />
+  ({ className, intent, type, ...props }, ref) => (
+    <button
+      type="button"
+      className={cn(variants({ className, intent, type }))}
+      ref={ref}
+      {...props}
+    />
   )
 );