From d04887c72adf90f4114c30e7c5ecfb1c1699c0f1 Mon Sep 17 00:00:00 2001
From: Chris Chudzicki <christopher.chudzicki@gmail.com>
Date: Fri, 20 Dec 2024 16:06:55 -0500
Subject: [PATCH] feat: add bordered variant for buttons (#27)

---
 .../Button/ActionButton.stories.tsx           | 65 +++++++++++--------
 src/components/Button/Button.stories.tsx      | 13 ++++
 src/components/Button/Button.tsx              | 28 +++++---
 3 files changed, 70 insertions(+), 36 deletions(-)

diff --git a/src/components/Button/ActionButton.stories.tsx b/src/components/Button/ActionButton.stories.tsx
index 4b95af4..953bdbe 100644
--- a/src/components/Button/ActionButton.stories.tsx
+++ b/src/components/Button/ActionButton.stories.tsx
@@ -24,6 +24,7 @@ const VARIANTS = enumValues<ActionButtonProps["variant"]>({
   primary: true,
   secondary: true,
   tertiary: true,
+  bordered: true,
   text: true,
   unstable_noBorder: true,
   unstable_inverted: true,
@@ -86,6 +87,9 @@ export const VariantsAndEdge: Story = {
         <ActionButton {...args} edge="none" variant="tertiary">
           {ICONS.DeleteIcon}
         </ActionButton>
+        <ActionButton {...args} edge="none" variant="bordered">
+          {ICONS.DeleteIcon}
+        </ActionButton>
         <ActionButton {...args} edge="none" variant="text">
           {ICONS.DeleteIcon}
         </ActionButton>
@@ -100,6 +104,9 @@ export const VariantsAndEdge: Story = {
         <ActionButton {...args} edge="rounded" variant="tertiary">
           {ICONS.DeleteIcon}
         </ActionButton>
+        <ActionButton {...args} edge="rounded" variant="bordered">
+          {ICONS.DeleteIcon}
+        </ActionButton>
         <ActionButton {...args} edge="rounded" variant="text">
           {ICONS.DeleteIcon}
         </ActionButton>
@@ -114,6 +121,9 @@ export const VariantsAndEdge: Story = {
         <ActionButton {...args} edge="circular" variant="tertiary">
           {ICONS.DeleteIcon}
         </ActionButton>
+        <ActionButton {...args} edge="circular" variant="bordered">
+          {ICONS.DeleteIcon}
+        </ActionButton>
         <ActionButton {...args} edge="circular" variant="text">
           {ICONS.DeleteIcon}
         </ActionButton>
@@ -123,6 +133,35 @@ export const VariantsAndEdge: Story = {
   tags: ["main"],
 }
 
+/**
+ * `ActionButtonLink` is styled as a `ActionButton` that renders an anchor tag.
+ *
+ * To use a custom link component (E.g. `Link` from `react-router` or `next/link`),
+ * pass it as the `Component` prop. Alternatively, customize the project-wide
+ * default link adapter via [Theme's LinkAdapter](../?path=/docs/smoot-design-themeprovider--docs)
+ */
+export const Links: Story = {
+  render: () => (
+    <Stack direction="row" gap={2} sx={{ my: 2 }}>
+      <ActionButtonLink href="#fake" variant="primary">
+        {ICONS.DeleteIcon}
+      </ActionButtonLink>
+      <ActionButtonLink href="#fake" variant="secondary">
+        {ICONS.DeleteIcon}
+      </ActionButtonLink>
+      <ActionButtonLink href="#fake" variant="tertiary">
+        {ICONS.DeleteIcon}
+      </ActionButtonLink>
+      <ActionButtonLink href="#fake" variant="bordered">
+        {ICONS.DeleteIcon}
+      </ActionButtonLink>
+      <ActionButtonLink href="#fake" variant="text">
+        {ICONS.DeleteIcon}
+      </ActionButtonLink>
+    </Stack>
+  ),
+}
+
 export const Showcase: Story = {
   render: (args) => (
     <Grid container sx={{ maxWidth: "750px" }} rowGap={2}>
@@ -158,29 +197,3 @@ export const Showcase: Story = {
     </Grid>
   ),
 }
-
-/**
- * `ActionButtonLink` is styled as a `ActionButton` that renders an anchor tag.
- *
- * To use a custom link component (E.g. `Link` from `react-router` or `next/link`),
- * pass it as the `Component` prop. Alternatively, customize the project-wide
- * default link adapter via [Theme's LinkAdapter](../?path=/docs/smoot-design-themeprovider--docs)
- */
-export const Links: Story = {
-  render: () => (
-    <Stack direction="row" gap={2} sx={{ my: 2 }}>
-      <ActionButtonLink href="#fake" variant="primary">
-        {ICONS.DeleteIcon}
-      </ActionButtonLink>
-      <ActionButtonLink href="#fake" variant="secondary">
-        {ICONS.DeleteIcon}
-      </ActionButtonLink>
-      <ActionButtonLink href="#fake" variant="tertiary">
-        {ICONS.DeleteIcon}
-      </ActionButtonLink>
-      <ActionButtonLink href="#fake" variant="text">
-        {ICONS.DeleteIcon}
-      </ActionButtonLink>
-    </Stack>
-  ),
-}
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index a9ab81f..d71b571 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -25,6 +25,7 @@ const VARIANTS = enumValues<ButtonProps["variant"]>({
   primary: true,
   secondary: true,
   tertiary: true,
+  bordered: true,
   text: true,
   unstable_noBorder: true,
   unstable_inverted: true,
@@ -77,6 +78,9 @@ export const VariantsAndEdge: Story = {
         <Button edge="none" variant="tertiary" {...args}>
           Tertiary
         </Button>
+        <Button edge="none" variant="bordered" {...args}>
+          Bordered
+        </Button>
         <Button edge="none" variant="text" {...args}>
           Text
         </Button>
@@ -91,6 +95,9 @@ export const VariantsAndEdge: Story = {
         <Button edge="rounded" variant="tertiary" {...args}>
           Tertiary
         </Button>
+        <Button edge="rounded" variant="bordered" {...args}>
+          Bordered
+        </Button>
         <Button edge="rounded" variant="text" {...args}>
           Text
         </Button>
@@ -105,6 +112,9 @@ export const VariantsAndEdge: Story = {
         <Button edge="circular" variant="tertiary" {...args}>
           Tertiary
         </Button>
+        <Button edge="circular" variant="bordered" {...args}>
+          Bordered
+        </Button>
         <Button edge="circular" variant="text" {...args}>
           Text
         </Button>
@@ -193,6 +203,9 @@ export const Links: Story = {
       <ButtonLink href="#fake" variant="tertiary">
         Link
       </ButtonLink>
+      <ButtonLink href="#fake" variant="bordered">
+        Link
+      </ButtonLink>
       <ButtonLink href="#fake" variant="text">
         Link
       </ButtonLink>
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 7358259..f4f7838 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -13,6 +13,7 @@ type ButtonVariant =
   | "secondary"
   | "tertiary"
   | "text"
+  | "bordered"
   | "unstable_noBorder"
   | "unstable_inverted"
   | "unstable_success"
@@ -107,7 +108,7 @@ const buttonStyles = (props: ButtonStyleProps & { theme: Theme }) => {
     ...props,
   }
   const { colors } = theme.custom
-  const hasBorder = variant === "secondary"
+  const hasBorder = variant === "secondary" || variant === "bordered"
   return css([
     {
       color: theme.palette.text.primary,
@@ -151,11 +152,6 @@ const buttonStyles = (props: ButtonStyleProps & { theme: Theme }) => {
         boxShadow: "none",
       },
     },
-    hasBorder && {
-      backgroundColor: "transparent",
-      borderColor: "currentcolor",
-      borderStyle: "solid",
-    },
     variant === "unstable_success" && {
       backgroundColor: colors.darkGreen,
       color: colors.white,
@@ -172,13 +168,11 @@ const buttonStyles = (props: ButtonStyleProps & { theme: Theme }) => {
         boxShadow: "none",
       },
     },
-    hasBorder && {
+    variant === "secondary" && {
+      color: colors.red,
       backgroundColor: "transparent",
       borderColor: "currentcolor",
       borderStyle: "solid",
-    },
-    variant === "secondary" && {
-      color: colors.red,
       ":hover:not(:disabled)": {
         // brightRed at 0.06 alpha
         backgroundColor: "rgba(255, 20, 35, 0.06)",
@@ -199,6 +193,20 @@ const buttonStyles = (props: ButtonStyleProps & { theme: Theme }) => {
         color: colors.silverGray,
       },
     },
+    variant === "bordered" && {
+      backgroundColor: colors.white,
+      color: colors.silverGrayDark,
+      border: `1px solid ${colors.silverGrayLight}`,
+      ":hover:not(:disabled)": {
+        backgroundColor: colors.lightGray1,
+        color: colors.darkGray2,
+      },
+      ":disabled": {
+        backgroundColor: colors.lightGray2,
+        border: `1px solid ${colors.lightGray2}`,
+        color: colors.silverGrayDark,
+      },
+    },
     variant === "unstable_noBorder" && {
       backgroundColor: colors.white,
       color: colors.darkGray2,