Tpp 759/button updates for custom icons (#282)

orchestrated-io · May 20, 2024 · 383fc2d · 383fc2d
1 parent b237c18
commit 383fc2d
Show file tree

Hide file tree

Showing 6 changed files with 196 additions and 188 deletions.
diff --git a/lib/components.test.js b/lib/components.test.js
@@ -64,6 +64,7 @@ test("all components exported", () => {
       "Toggle",
       "TreeNav",
       "Typography",
+      "VARIANT_COLORS",
       "getOptionByValue",
       "styleLink",
       "systemThemeCollapsed",

diff --git a/lib/components/Button/index.js b/lib/components/Button/index.js
@@ -8,22 +8,71 @@ import Icon from "../Icon";
 import Loading from "../Loading";
 import { themeGet } from "@styled-system/theme-get";
 
+export const VARIANT_COLORS = {
+  default: {
+    background: "colors.primary",
+    color: "colors.white",
+    hovered: { background: "colors.primaryDark", color: "colors.white" }
+  },
+  success: {
+    background: "colors.success",
+    color: "colors.white",
+    hovered: { background: "colors.successDark", color: "colors.white" }
+  },
+  successAlternate: {
+    background: "colors.greyLightest",
+    color: "colors.success",
+    hovered: { background: "colors.greyLighter", color: "colors.success" }
+  },
+  danger: {
+    background: "colors.danger",
+    color: "colors.white",
+    hovered: { background: "colors.dangerDark", color: "colors.white" }
+  },
+  dangerAlternate: {
+    background: "colors.greyLightest",
+    color: "colors.danger",
+    hovered: { background: "colors.greyLighter", color: "colors.danger" }
+  },
+  disabled: {
+    background: "colors.greyLighter",
+    color: "colors.grey",
+    hovered: { background: "colors.greyLighter", color: "colors.grey" }
+  },
+  ghost: {
+    background: "colors.primaryLightest",
+    color: "colors.primaryDark",
+    hovered: {
+      background: "colors.primaryLighter",
+      color: "colors.primaryDarker"
+    }
+  }
+};
+
 const ButtonStyles = compose(space, layout, color, border);
 
+const addVariantColors = (variant, key, props) => ({
+  ...variant,
+  bg: themeGet(VARIANT_COLORS[key].background)(props),
+  color: themeGet(VARIANT_COLORS[key].color)(props),
+  "&:hover": {
+    ...(variant["&:hover"] || {}),
+    bg: themeGet(VARIANT_COLORS[key].hovered.background)(props),
+    color: themeGet(VARIANT_COLORS[key].hovered.color)(props)
+  }
+});
+
 const StyledButton = styled("button")
   .withConfig({ shouldForwardProp })
   .attrs((props) => ({
-    "data-testid": props.dataTestId
-      ? props.dataTestId
-      : props["data-testid"]
-      ? props["data-testid"]
-      : null,
-    disabled: props.disabled ? true : props.variant == "disabled" ? true : false
+    "data-testid": props.dataTestId || props["data-testid"],
+    disabled: props.disabled || props.variant == "disabled",
+    className: `${props.className || ""} variant-${props.variant || "default"}`
   }))(
   (props) =>
     css({
-      bg: themeGet("colors.primary")(props),
-      color: themeGet("colors.white")(props),
+      bg: themeGet(VARIANT_COLORS.default.background)(props),
+      color: themeGet(VARIANT_COLORS.default.color)(props),
       borderColor: themeGet("colors.primary")(props),
       display: "flex",
       alignItems: "center",
@@ -60,7 +109,7 @@ const StyledButton = styled("button")
         marginLeft: !props.iconRight ? "" : props.small ? "xs" : "s"
       },
       "&:hover": {
-        bg: themeGet("colors.primaryDark")(props),
+        bg: themeGet(VARIANT_COLORS.default.hovered.background)(props),
         borderColor: themeGet("colors.primaryDark")(props),
         borderWidth: themeGet("borderWidths.1")(props),
         borderStyle: "solid"
@@ -73,115 +122,73 @@ const StyledButton = styled("button")
           themeGet("colors.primaryDarker")(props)
       }
     }),
-  (props) =>
-    variant({
-      variants: {
-        default: {},
-        success: {
-          bg: themeGet("colors.success")(props),
-          color: themeGet("colors.white")(props),
-          borderColor: themeGet("colors.success")(props),
-          "&:hover": {
-            bg: themeGet("colors.successDark")(props),
-            borderColor: themeGet("colors.successDark")(props)
-          },
-          "&:focus": {
-            outline: "0",
-            boxShadow:
-              themeGet("shadows.thinOutline")(props) +
-              " " +
-              themeGet("colors.successDarker")(props)
-          }
-        },
-        successAlternate: {
-          bg: themeGet("colors.greyLightest")(props),
-          color: themeGet("colors.success")(props),
-          borderColor: themeGet("colors.greyLightest")(props),
-          "&:hover": {
-            bg: themeGet("colors.greyLighter")(props),
-            borderColor: themeGet("colors.greyLighter")(props)
-          },
-          "&:focus": {
-            outline: "0",
-            boxShadow:
-              themeGet("shadows.thinOutline")(props) +
-              " " +
-              themeGet("colors.successLight")(props)
-          }
-        },
-        danger: {
-          bg: themeGet("colors.danger")(props),
-          color: themeGet("colors.white")(props),
-          borderColor: themeGet("colors.danger")(props),
-          "&:hover": {
-            bg: themeGet("colors.dangerDark")(props),
-            borderColor: themeGet("colors.dangerDark")(props)
-          },
-          "&:focus": {
-            outline: "0",
-            boxShadow:
-              themeGet("shadows.thinOutline")(props) +
-              " " +
-              themeGet("colors.dangerDarker")(props)
-          }
-        },
-        dangerAlternate: {
-          bg: themeGet("colors.greyLightest")(props),
-          color: themeGet("colors.danger")(props),
-          borderColor: themeGet("colors.greyLightest")(props),
-          "&:hover": {
-            bg: themeGet("colors.greyLighter")(props),
-            borderColor: themeGet("colors.greyLighter")(props)
-          },
-          "&:focus": {
-            outline: "0",
-            boxShadow:
-              themeGet("shadows.thinOutline")(props) +
-              " " +
-              themeGet("colors.dangerLight")(props)
-          }
-        },
-        disabled: {
-          bg: themeGet("colors.greyLighter")(props),
-          color: themeGet("colors.grey")(props),
-          borderColor: themeGet("colors.greyLighter")(props),
-          "&:hover": {
-            bg: themeGet("colors.greyLighter")(props),
-            color: themeGet("colors.grey")(props),
-            borderColor: themeGet("colors.greyLighter")(props)
-          }
-        },
-        ghost: {
-          bg: themeGet("colors.primaryLightest")(props),
-          color: themeGet("colors.primaryDark")(props),
-          borderColor: themeGet("colors.primaryLightest")(props),
-          "&:hover": {
-            bg: themeGet("colors.primaryLighter")(props),
-            borderColor: themeGet("colors.primaryLighter")(props),
-            color: themeGet("colors.primaryDarker")(props)
-          },
-          "&:focus": {
-            outline: "0",
-            boxShadow:
-              themeGet("shadows.thinOutline")(props) +
-              " " +
-              themeGet("colors.primaryLight")(props)
-          }
-        }
+  (props) => {
+    const getOutlineStyle = (color) => ({
+      outline: "0",
+      boxShadow: [
+        themeGet("shadows.thinOutline")(props),
+        themeGet(color)(props)
+      ].join(" ")
+    });
+
+    const variants = {
+      default: {},
+      success: {
+        borderColor: themeGet("colors.success")(props),
+        "&:hover": { borderColor: themeGet("colors.successDark")(props) },
+        "&:focus": getOutlineStyle("colors.successDarker")
+      },
+      successAlternate: {
+        borderColor: themeGet("colors.greyLightest")(props),
+        "&:hover": { borderColor: themeGet("colors.greyLighter")(props) },
+        "&:focus": getOutlineStyle("colors.successLight")
+      },
+      danger: {
+        borderColor: themeGet("colors.danger")(props),
+        "&:hover": { borderColor: themeGet("colors.dangerDark")(props) },
+        "&:focus": getOutlineStyle("colors.dangerDarker")
+      },
+      dangerAlternate: {
+        borderColor: themeGet("colors.greyLightest")(props),
+        "&:hover": { borderColor: themeGet("colors.greyLighter")(props) },
+        "&:focus": getOutlineStyle("colors.dangerLight")
+      },
+      disabled: {
+        borderColor: themeGet("colors.greyLighter")(props),
+        "&:hover": { borderColor: themeGet("colors.greyLighter")(props) }
+      },
+      ghost: {
+        borderColor: themeGet("colors.primaryLightest")(props),
+        "&:hover": { borderColor: themeGet("colors.primaryLighter")(props) },
+        "&:focus": getOutlineStyle("colors.primaryLight")
       }
-    }),
+    };
+
+    const newVariants = Object.entries(variants).reduce(
+      (variantsWithColors, [key, variant]) => {
+        if (VARIANT_COLORS[key]) {
+          variantsWithColors[key] = addVariantColors(variant, key, props);
+        }
+
+        return variantsWithColors;
+      },
+      { ...variants }
+    );
+
+    return variant({ variants: newVariants });
+  },
   (props) =>
     props.disabled
-      ? css({
-          bg: themeGet("colors.greyLighter")(props),
-          color: themeGet("colors.grey")(props),
-          borderColor: themeGet("colors.greyLighter")(props),
-          "&:hover": {
-            bg: themeGet("colors.greyLighter")(props),
-            color: themeGet("colors.grey")(props),
-            borderColor: themeGet("colors.greyLighter")(props)
-          }
-        })
+      ? css(
+          addVariantColors(
+            {
+              borderColor: themeGet("colors.greyLighter")(props),
+              "&:hover": { borderColor: themeGet("colors.greyLighter")(props) }
+            },
+            "disabled",
+            props
+          )
+        )
       : css(),
   ButtonStyles
 );