feat(button): add v5 color support

src/core/Button/index.stories.tsx

@@ -1,146 +1,140 @@
 import DeleteIcon from "@material-ui/icons/Delete";
-import { action } from "@storybook/addon-actions";
-import { storiesOf } from "@storybook/react";
+import { Meta, storiesOf, Story } from "@storybook/react";
 import React from "react";
 import Button from "./index";
 
-export const text = "Click me!";
+export default {
+  argTypes: {
+    color: {
+      control: {
+        type: "radio",
+      },
+      options: ["primary", "secondary", "error", "info", "warning"],
+    },
+    disabled: {
+      control: { type: "boolean" },
+    },
+  },
+  component: Button,
+  title: "Button",
+} as Meta;
+
+const TEXT = "Click me!";
+
+const Template: Story = (props) => {
+  return <Button {...props}>{TEXT}</Button>;
+};
+
+// RoundedPrimary
+export const RoundedPrimary = Template.bind({});
 
-export const actions = {
-  onClick: action("onClick"),
+RoundedPrimary.args = {
+  color: "primary",
+  disabled: false,
+  sdsStyle: "rounded",
+  sdsType: "primary",
 };
 
-storiesOf("Button", module).add("Rounded Primary", () => (
-  <Button onClick={actions.onClick} sdsStyle="rounded" sdsType="primary">
-    {text}
-  </Button>
-));
+RoundedPrimary.parameters = {
+  snapshot: {
+    skip: true,
+  },
+};
 
-storiesOf("Button", module).add("Rounded Primary Disabled", () => (
-  <Button
-    disabled
-    onClick={actions.onClick}
-    sdsStyle="rounded"
-    sdsType="primary"
-  >
-    {text}
-  </Button>
-));
+// RoundedSecondary
+export const RoundedSecondary = Template.bind({});
 
-storiesOf("Button", module).add("Rounded Secondary", () => (
-  <Button onClick={actions.onClick} sdsStyle="rounded" sdsType="secondary">
-    {text}
-  </Button>
-));
+RoundedSecondary.args = {
+  color: "primary",
+  disabled: false,
+  sdsStyle: "rounded",
+  sdsType: "secondary",
+};
 
-storiesOf("Button", module).add("Rounded Secondary Disabled", () => (
-  <Button
-    disabled
-    onClick={actions.onClick}
-    sdsStyle="rounded"
-    sdsType="secondary"
-  >
-    {text}
-  </Button>
-));
+RoundedSecondary.parameters = {
+  snapshot: {
+    skip: true,
+  },
+};
 
-storiesOf("Button", module).add("Square Primary", () => (
-  <Button onClick={actions.onClick} sdsStyle="square" sdsType="primary">
-    {text}
-  </Button>
-));
+// SquarePrimary
+export const SquarePrimary = Template.bind({});
 
-storiesOf("Button", module).add("Square Primary Disabled", () => (
-  <Button
-    disabled
-    onClick={actions.onClick}
-    sdsStyle="square"
-    sdsType="primary"
-  >
-    {text}
-  </Button>
-));
+SquarePrimary.args = {
+  color: "primary",
+  disabled: false,
+  sdsStyle: "square",
+  sdsType: "primary",
+};
 
-storiesOf("Button", module).add("Square Secondary", () => (
-  <Button onClick={actions.onClick} sdsStyle="square" sdsType="secondary">
-    {text}
-  </Button>
-));
+SquarePrimary.parameters = {
+  snapshot: {
+    skip: true,
+  },
+};
 
-storiesOf("Button", module).add("Square Secondary Disabled", () => (
-  <Button
-    disabled
-    onClick={actions.onClick}
-    sdsStyle="square"
-    sdsType="secondary"
-  >
-    {text}
-  </Button>
-));
+// SquareSecondary
+export const SquareSecondary = Template.bind({});
 
-storiesOf("Button", module).add("Minimal Primary", () => (
-  <Button onClick={actions.onClick} sdsStyle="minimal" sdsType="primary">
-    {text}
-  </Button>
-));
+SquareSecondary.args = {
+  color: "primary",
+  disabled: false,
+  sdsStyle: "square",
+  sdsType: "secondary",
+};
 
-storiesOf("Button", module).add("Minimal Primary Disabled", () => (
-  <Button
-    disabled
-    onClick={actions.onClick}
-    sdsStyle="minimal"
-    sdsType="primary"
-  >
-    {text}
-  </Button>
-));
+SquareSecondary.parameters = {
+  snapshot: {
+    skip: true,
+  },
+};
 
-storiesOf("Button", module).add("Minimal Secondary", () => (
-  <Button onClick={actions.onClick} sdsStyle="minimal" sdsType="secondary">
-    {text}
-  </Button>
-));
+// MinimalPrimary
+export const MinimalPrimary = Template.bind({});
 
-storiesOf("Button", module).add("Minimal Secondary Disabled", () => (
-  <Button
-    disabled
-    onClick={actions.onClick}
-    sdsStyle="minimal"
-    sdsType="secondary"
-  >
-    {text}
-  </Button>
-));
+MinimalPrimary.args = {
+  color: "primary",
+  disabled: false,
+  sdsStyle: "minimal",
+  sdsType: "primary",
+};
+
+MinimalPrimary.parameters = {
+  snapshot: {
+    skip: true,
+  },
+};
+
+// MinimalSecondary
+export const MinimalSecondary = Template.bind({});
+
+MinimalSecondary.args = {
+  color: "primary",
+  disabled: false,
+  sdsStyle: "minimal",
+  sdsType: "secondary",
+};
+
+MinimalSecondary.parameters = {
+  snapshot: {
+    skip: true,
+  },
+};
 
 storiesOf("Button", module).add("Minimal No Caps - use sparingly", () => (
-  <Button
-    isAllCaps={false}
-    onClick={actions.onClick}
-    sdsStyle="minimal"
-    sdsType="primary"
-  >
-    {text}
+  <Button isAllCaps={false} sdsStyle="minimal" sdsType="primary">
+    {TEXT}
   </Button>
 ));
 
 storiesOf("Button", module).add("With Icon", () => (
-  <Button
-    startIcon={<DeleteIcon />}
-    onClick={actions.onClick}
-    sdsStyle="rounded"
-    sdsType="primary"
-  >
-    {text}
+  <Button startIcon={<DeleteIcon />} sdsStyle="rounded" sdsType="primary">
+    {TEXT}
   </Button>
 ));
 
 storiesOf("Button", module).add("Minimal With Icon", () => (
-  <Button
-    startIcon={<DeleteIcon />}
-    onClick={actions.onClick}
-    sdsStyle="minimal"
-    sdsType="primary"
-  >
-    {text}
+  <Button startIcon={<DeleteIcon />} sdsStyle="minimal" sdsType="primary">
+    {TEXT}
   </Button>
 ));

src/core/Button/index.tsx

@@ -1,25 +1,24 @@
 import { ButtonProps as RawButtonProps } from "@material-ui/core";
 import React from "react";
 import {
-  PrimaryMinimalButton,
+  ExtraProps,
+  MinimalButton,
   RoundedButton,
-  SecondaryMinimalButton,
   SquareButton,
   StyledButton,
 } from "./style";
 
-interface SdsProps {
-  isAllCaps?: boolean;
-  isRounded?: boolean;
-  sdsStyle?: "minimal" | "rounded" | "square";
-  sdsType?: "primary" | "secondary";
-}
-export type ButtonProps = RawButtonProps & SdsProps;
+export type ButtonProps = Omit<RawButtonProps, "color"> & ExtraProps;
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (props: ButtonProps, ref): JSX.Element | null => {
-    const sdsStyle = props?.sdsStyle;
-    const sdsType = props?.sdsType;
+    const {
+      // TEMP(thuang): Set as any to get around the type error.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      color = "primary" as any,
+      sdsStyle,
+      sdsType,
+    } = props;
 
     if (!sdsStyle || !sdsType) {
       // eslint-disable-next-line no-console
@@ -38,13 +37,14 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     // isAllCaps is only used for the Minimal Button.  It defaults to true.
     const isAllCaps =
       typeof props?.isAllCaps === "boolean" ? props?.isAllCaps : true;
+
     const propsWithDefault = { ...props, isAllCaps };
 
     switch (true) {
       case sdsStyle === "rounded" && sdsType === "primary":
         return (
           <RoundedButton
-            color="primary"
+            color={color}
             ref={ref}
             variant="contained"
             {...propsWithDefault}
@@ -53,7 +53,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       case sdsStyle === "rounded" && sdsType === "secondary":
         return (
           <RoundedButton
-            color="primary"
+            color={color}
             ref={ref}
             variant="outlined"
             {...propsWithDefault}
@@ -62,7 +62,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       case sdsStyle === "square" && sdsType === "primary":
         return (
           <SquareButton
-            color="primary"
+            color={color}
             ref={ref}
             variant="contained"
             {...propsWithDefault}
@@ -71,32 +71,23 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       case sdsStyle === "square" && sdsType === "secondary":
         return (
           <SquareButton
-            color="primary"
+            color={color}
             ref={ref}
             variant="outlined"
             {...propsWithDefault}
           />
         );
-      case sdsStyle === "minimal" && sdsType === "primary":
-        return (
-          <PrimaryMinimalButton
-            color="primary"
-            ref={ref}
-            variant="text"
-            {...propsWithDefault}
-          />
-        );
-      case sdsStyle === "minimal" && sdsType === "secondary":
+      case sdsStyle === "minimal":
         return (
-          <SecondaryMinimalButton
-            color="default"
+          <MinimalButton
+            color={color}
             ref={ref}
             variant="text"
             {...propsWithDefault}
           />
         );
       default:
-        return <StyledButton {...propsWithDefault} ref={ref} />;
+        return <StyledButton color={color} {...propsWithDefault} ref={ref} />;
     }
   }
 );