feat: add success variant to Button (#63)

bloom-housing · Oct 2, 2023 · ab49f0e · ab49f0e
1 parent 8dedd40
commit ab49f0e
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 0 deletions.
diff --git a/src/actions/Button.scss b/src/actions/Button.scss
@@ -95,6 +95,29 @@
     }
   }
 
+  &[data-variant="success"] {
+    background-color: var(--seeds-color-success);
+    border-color: var(--seeds-color-success);
+    color: var(--seeds-color-on-inverse);
+
+    &:hover {
+      background-color: var(--seeds-color-success-dark);
+      border-color: var(--seeds-color-success-dark);
+    }
+  }
+
+  &[data-variant="success-outlined"] {
+    background-color: var(--seeds-bg-color-surface);
+    border-color: var(--seeds-color-success);
+    color: var(--seeds-color-success);
+
+    &:hover {
+      background-color: var(--seeds-color-success-dark);
+      border-color: var(--seeds-color-success-dark);
+      color: var(--seeds-color-on-inverse);
+    }
+  }
+
   &[data-variant="alert"] {
     background-color: var(--seeds-color-alert);
     border-color: var(--seeds-color-alert);

diff --git a/src/actions/Button.tsx b/src/actions/Button.tsx
@@ -20,6 +20,8 @@ export interface ButtonProps {
     | "primary-outlined"
     | "secondary"
     | "secondary-outlined"
+    | "success"
+    | "success-outlined"
     | "alert"
     | "alert-outlined"
     | "highlight"

diff --git a/src/actions/__stories__/Button.stories.tsx b/src/actions/__stories__/Button.stories.tsx
@@ -30,6 +30,9 @@ export const buttonVariants = () => (
       <Button variant="secondary" size="sm">
         Secondary Button
       </Button>
+      <Button variant="success" size="sm">
+        Success Button
+      </Button>
       <Button variant="alert" size="sm">
         Alert Button
       </Button>
@@ -47,6 +50,9 @@ export const buttonVariants = () => (
       <Button variant="secondary-outlined" size="sm">
         Secondary Button
       </Button>
+      <Button variant="success-outlined" size="sm">
+        Success Button
+      </Button>
       <Button variant="alert-outlined" size="sm">
         Alert Button
       </Button>
@@ -65,6 +71,9 @@ export const buttonVariants = () => (
       <Button variant="secondary" size="md">
         Secondary Button
       </Button>
+      <Button variant="success" size="md">
+        Success Button
+      </Button>
       <Button variant="alert" size="md">
         Alert Button
       </Button>
@@ -82,6 +91,9 @@ export const buttonVariants = () => (
       <Button variant="secondary-outlined" size="md">
         Secondary Button
       </Button>
+      <Button variant="success-outlined" size="md">
+        Success Button
+      </Button>
       <Button variant="alert-outlined" size="md">
         Alert Button
       </Button>
@@ -100,6 +112,9 @@ export const buttonVariants = () => (
       <Button variant="secondary" size="lg">
         Secondary Button
       </Button>
+      <Button variant="success" size="lg">
+        Success Button
+      </Button>
       <Button variant="alert" size="lg">
         Alert Button
       </Button>
@@ -117,6 +132,9 @@ export const buttonVariants = () => (
       <Button variant="secondary-outlined" size="lg">
         Secondary Button
       </Button>
+      <Button variant="success-outlined" size="lg">
+        Success Button
+      </Button>
       <Button variant="alert-outlined" size="lg">
         Alert Button
       </Button>