components: Button fixes

Author: tbantle22

packages/components/src/Button/types.ts

@@ -1,8 +1,8 @@
 import { ButtonHTMLAttributes, ReactNode } from "react";
 
-type Color = "default" | "red" | "green" | "dark" | "white" | "gradient";
+export type Color = "default" | "red" | "green" | "dark" | "white" | "gradient";
 type Size = "small" | "medium" | "large";
-type Shape = "default" | "pill";
+export type Shape = "default" | "pill";
 
 type VariantProps = {
   color?: Color;

packages/components/src/CopyButton/index.tsx

@@ -4,23 +4,24 @@ import cx from "classnames";
 import React from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
 import Button from "../Button";
+import { Color } from "../Button/types";
 import css from "./index.module.css";
 
 type Props = {
   text: string;
-  light?: boolean;
+  color?: Color;
 };
 
-export default function CopyButton({ text, light }: Props) {
+export default function CopyButton({ text, color }: Props) {
   const success = useDelay(3000);
   return (
     <CopyToClipboard text={text} onCopy={success.start}>
       <Button
-        className={cx(css.copy, { [css.light]: light })}
-        white={light}
+        className={cx(css.copy, { [css.light]: color === "white" })}
+        color={color}
         size="small"
       >
-        {light && <IoCopyOutline />}
+        {color === "white" && <IoCopyOutline />}
         {success.active ? "Copied" : "Copy"}
       </Button>
     </CopyToClipboard>

packages/components/src/Modal/ForForm.tsx

@@ -1,6 +1,7 @@
 import React, { SyntheticEvent } from "react";
 import { ModalButtons, ModalInner, ModalOuter, OuterProps } from ".";
 import Button from "../Button";
+import { Color, Shape } from "../Button/types";
 
 type Props = OuterProps & {
   onSubmit: (e: SyntheticEvent) => void | Promise<void>;
@@ -9,10 +10,11 @@ type Props = OuterProps & {
   // Button props
   btnText: string;
   buttonDataCy?: string;
-  pill?: boolean;
-  red?: boolean;
+  shape?: Shape;
+  color?: Color;
+  // red?: boolean;
   disabled?: boolean;
-  gradient?: boolean;
+  // gradient?: boolean;
 };
 
 export default function FormModal({ children, ...props }: Props) {
@@ -23,9 +25,10 @@ export default function FormModal({ children, ...props }: Props) {
         <ModalButtons onRequestClose={props.onRequestClose} err={props.err}>
           <Button
             type="submit"
-            pill={props.pill}
-            red={props.red}
-            gradient={props.gradient}
+            shape={props.shape}
+            color={props.color}
+            // red={props.red}
+            // gradient={props.gradient}
             disabled={props.disabled}
             data-cy={props.buttonDataCy}
           >

packages/components/src/__stories__/CopyButton.stories.tsx

@@ -20,6 +20,6 @@ export const Default: Story = {
 export const Light: Story = {
   args: {
     ...Default.args,
-    light: true,
+    color: "white",
   },
 };