add ghost button

atelier-saulx · Jul 11, 2024 · 7b98075 · 7b98075
1 parent 04f74de
commit 7b98075
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 0 deletions.
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -15,6 +15,16 @@ export const Primary = {
   },
 }
 
+export const PrimaryDestructive = {
+  args: {
+    children: 'Button label',
+    variant: 'primary',
+    color: 'destructive',
+    disabled: false,
+    leadIcon: 'add',
+  },
+}
+
 export const Secondary = {
   args: {
     children: 'Button label',
@@ -24,3 +34,33 @@ export const Secondary = {
     leadIcon: 'add',
   },
 }
+
+export const SecondaryDestructive = {
+  args: {
+    children: 'Button label',
+    variant: 'secondary',
+    color: 'destructive',
+    disabled: false,
+    leadIcon: 'add',
+  },
+}
+
+export const Ghost = {
+  args: {
+    children: 'Button label',
+    variant: 'ghost',
+    color: 'neutral',
+    disabled: false,
+    leadIcon: 'add',
+  },
+}
+
+export const GhostDestructive = {
+  args: {
+    children: 'Button label',
+    variant: 'ghost',
+    color: 'destructive',
+    disabled: false,
+    leadIcon: 'add',
+  },
+}
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -84,6 +84,41 @@ function Button({
               background: color('destructive-20'),
             }),
           }),
+
+        ...(variant === 'ghost' &&
+          colorProp === 'neutral' && {
+            color: color('neutral-80'),
+            background: 'transparent',
+            ...(focus &&
+              !disabled && {
+                outlineWidth: 4,
+                outlineStyle: 'solid',
+                outlineColor: color('neutral-20'),
+              }),
+            ...(disabled && {
+              color: color('neutral-20'),
+              background: 'transparent',
+            }),
+          }),
+        ...(variant === 'ghost' &&
+          colorProp === 'destructive' && {
+            color: color('destructive-80'),
+            background: 'transparent',
+            ...(hover &&
+              !disabled && {
+                color: color('destructive-100'),
+              }),
+            ...(focus &&
+              !disabled && {
+                color: color('destructive-100'),
+                outlineWidth: 4,
+                outlineStyle: 'solid',
+                outlineColor: color('destructive-60'),
+              }),
+            ...(disabled && {
+              color: color('destructive-20'),
+            }),
+          }),
       }}
     >
       <div
@@ -103,6 +138,18 @@ function Button({
             !disabled && {
               background: color('neutral-10'),
             }),
+          ...(variant === 'ghost' &&
+            colorProp === 'neutral' &&
+            (hover || focus) &&
+            !disabled && {
+              background: color('neutral-10'),
+            }),
+          ...(variant === 'ghost' &&
+            colorProp === 'destructive' &&
+            (hover || focus) &&
+            !disabled && {
+              background: color('destructive-20'),
+            }),
         }}
       />
       <div