Rename Button type prop to variant

Signed-off-by: Andrés Vidal <[email protected]>
wyeworks · Mar 11, 2024 · 16acb40 · 16acb40
1 parent f4cac6f
commit 16acb40
Show file tree

Hide file tree

Showing 17 changed files with 49 additions and 46 deletions.
diff --git a/frontend/components/Button.tsx b/frontend/components/Button.tsx
@@ -4,30 +4,32 @@ import { FC, forwardRef, HTMLProps, ReactNode } from "react";
 
 type Props = HTMLProps<HTMLButtonElement> & {
   label: string;
-  type?: "primary" | "secondary" | "outline" | "danger";
+  variant?: "primary" | "secondary" | "outline" | "danger";
   Icon?: FC<{ className: string }> | ReactNode;
   alignment?: "center" | "left";
   width?: "full" | "fixed" | "fit";
   labelSrOnly?: boolean;
+  type?: "button" | "submit" | "reset";
 };
 
 const Button = forwardRef<HTMLButtonElement, Props>(function Button(
   {
     label,
     onClick,
-    type = "primary",
+    variant = "primary",
     Icon,
     alignment = "center",
     width = "full",
+    type = "button",
     labelSrOnly,
     ...props
   },
   ref,
 ) {
-  const isPrimary = type === "primary";
-  const isSecondary = type === "secondary";
-  const isOutline = type === "outline";
-  const isDanger = type === "danger";
+  const isPrimary = variant === "primary";
+  const isSecondary = variant === "secondary";
+  const isOutline = variant === "outline";
+  const isDanger = variant === "danger";
   const isTextCentered = alignment === "center";
   const isFixedWidth = width === "fixed";
   const isFullWidth = width === "full";
@@ -52,6 +54,7 @@ const Button = forwardRef<HTMLButtonElement, Props>(function Button(
         },
       )}
       onClick={onClick}
+      type={type}
     >
       {Icon && isFunction(Icon) ? (
         <Icon

diff --git a/frontend/components/LearnMoreButton.tsx b/frontend/components/LearnMoreButton.tsx
@@ -8,7 +8,7 @@ const LearnMoreButton: FC = () => {
 
   return (
     <Button
-      type="outline"
+      variant="outline"
       label="Learn more about the Richard Burton Platform here"
       onClick={() => modal.open()}
     />

diff --git a/frontend/components/PublicationCounter.tsx b/frontend/components/PublicationCounter.tsx
@@ -1,8 +1,8 @@
+import SparklesIcon from "assets/sparkles.svg";
 import { Publication } from "modules/publication";
 import { FC } from "react";
-import SparklesIcon from "assets/sparkles.svg";
-import Tooltip from "./Tooltip";
 import Button from "./Button";
+import Tooltip from "./Tooltip";
 
 const PublicationCounter: FC = () => {
   const publicationCount = Publication.STORE.useVisibleCount();
@@ -14,7 +14,7 @@ const PublicationCounter: FC = () => {
   return publicationCount !== 0 ? (
     <Tooltip info message={message}>
       <Button
-        type="outline"
+        variant="outline"
         width="fit"
         Icon={SparklesIcon}
         label={`${publicationCount}`}

diff --git a/frontend/components/PublicationDelete.tsx b/frontend/components/PublicationDelete.tsx
@@ -1,3 +1,4 @@
+import TrashIcon from "assets/trash.svg";
 import { Publication } from "modules/publication";
 import { FC } from "react";
 import {
@@ -6,7 +7,6 @@ import {
   useSelectionSize,
 } from "react-selection-manager";
 import Button from "./Button";
-import TrashIcon from "assets/trash.svg";
 
 const PublicationDelete: FC = () => {
   const setDeleted = Publication.STORE.useSetDeleted();
@@ -24,7 +24,7 @@ const PublicationDelete: FC = () => {
   return (
     <Button
       label={`Delete ${selectionSize}`}
-      type="danger"
+      variant="danger"
       alignment="left"
       width="fit"
       Icon={TrashIcon}

diff --git a/frontend/components/PublicationDeselect.tsx b/frontend/components/PublicationDeselect.tsx
@@ -1,6 +1,6 @@
-import { FC } from "react";
 import DeselectIcon from "assets/deselect.svg";
-import { useSelectionSize, useClearSelection } from "react-selection-manager";
+import { FC } from "react";
+import { useClearSelection, useSelectionSize } from "react-selection-manager";
 import Button from "./Button";
 
 const PublicationDeselect: FC = () => {
@@ -9,7 +9,7 @@ const PublicationDeselect: FC = () => {
 
   return (
     <Button
-      type="outline"
+      variant="outline"
       width="fit"
       label={`Deselect ${selectionSize}`}
       Icon={DeselectIcon}

diff --git a/frontend/components/PublicationDownload.tsx b/frontend/components/PublicationDownload.tsx
@@ -1,11 +1,11 @@
+import { FILES_URL, request } from "app";
+import DownloadIcon from "assets/download.svg";
 import { snakeCase } from "lodash";
 import { Publication } from "modules/publication";
 import { useRouter } from "next/router";
+import qs from "qs";
 import { FC, useRef } from "react";
-import { FILES_URL, request } from "app";
-import DownloadIcon from "assets/download.svg";
 import Button from "./Button";
-import qs from "qs";
 
 const PublicationDownload: FC = () => {
   const visibleCount = Publication.STORE.useVisibleCount();
@@ -51,7 +51,7 @@ const PublicationDownload: FC = () => {
     <>
       <Button
         label="Download .csv"
-        type="outline"
+        variant="outline"
         alignment="left"
         Icon={DownloadIcon}
         disabled={visibleCount === 0}

diff --git a/frontend/components/PublicationDuplicate.tsx b/frontend/components/PublicationDuplicate.tsx
@@ -1,3 +1,4 @@
+import CopyIcon from "assets/copy.svg";
 import { Publication } from "modules/publication";
 import { FC } from "react";
 import {
@@ -6,7 +7,6 @@ import {
   useSelectionSize,
 } from "react-selection-manager";
 import Button from "./Button";
-import CopyIcon from "assets/copy.svg";
 
 const PublicationDuplicate: FC = () => {
   const duplicate = Publication.STORE.useDuplicate();
@@ -26,7 +26,7 @@ const PublicationDuplicate: FC = () => {
   return (
     <Button
       label={`Duplicate ${selectionSize}`}
-      type="secondary"
+      variant="secondary"
       alignment="left"
       width="fit"
       Icon={CopyIcon}

diff --git a/frontend/components/PublicationErrorCounter.tsx b/frontend/components/PublicationErrorCounter.tsx
@@ -1,10 +1,10 @@
-import { Publication } from "modules/publication";
-import { FC } from "react";
 import ErrorCircleIcon from "assets/error-circle.svg";
-import Tooltip from "./Tooltip";
-import Button from "./Button";
 import { toString } from "lodash";
+import { Publication } from "modules/publication";
+import { FC } from "react";
 import { useRecoilCallback } from "recoil";
+import Button from "./Button";
+import Tooltip from "./Tooltip";
 
 const PublicationErrorCounter: FC = () => {
   const publicationCount = Publication.STORE.useVisibleCount();
@@ -40,7 +40,7 @@ const PublicationErrorCounter: FC = () => {
       } with errors`}
     >
       <Button
-        type="danger"
+        variant="danger"
         width="fit"
         Icon={ErrorCircleIcon}
         label={toString(invalidPublicationCount)}

diff --git a/frontend/components/PublicationIndexTable.tsx b/frontend/components/PublicationIndexTable.tsx
@@ -63,7 +63,7 @@ const ColumnHeader: FC<{ colId: ColId; toggleable?: boolean }> = ({
                   label={hideLabel}
                   labelSrOnly
                   width="fit"
-                  type="outline"
+                  variant="outline"
                   Icon={VisibilityOffIcon}
                   onClick={() => setVisible([colId], false)}
                 />

diff --git a/frontend/components/PublicationUpload.tsx b/frontend/components/PublicationUpload.tsx
@@ -1,8 +1,8 @@
+import UploadIcon from "assets/upload.svg";
 import { Publication, ValidationResult } from "modules/publication";
 import { ChangeEvent, FC, useRef, useState } from "react";
-import Tooltip from "./Tooltip";
-import UploadIcon from "assets/upload.svg";
 import Button from "./Button";
+import Tooltip from "./Tooltip";
 
 const PublicationUpload: FC = () => {
   const { useResetAll, useTotalCount } = Publication.STORE;
@@ -48,7 +48,7 @@ const PublicationUpload: FC = () => {
       <Tooltip warning message={message} placement="top">
         <Button
           label="Upload.csv"
-          type="outline"
+          variant="outline"
           Icon={UploadIcon}
           alignment="left"
           width="fixed"

diff --git a/frontend/components/ResetDeleted.tsx b/frontend/components/ResetDeleted.tsx
@@ -1,8 +1,8 @@
+import RestoreTrashIcon from "assets/restore-trash.svg";
 import { Publication } from "modules/publication";
 import { FC } from "react";
-import Button from "./Button";
-import RestoreTrashIcon from "assets/restore-trash.svg";
 import { useClearSelection } from "react-selection-manager";
+import Button from "./Button";
 
 const ResetDeleted: FC = () => {
   const deletedCount = Publication.STORE.useDeletedCount();
@@ -17,7 +17,7 @@ const ResetDeleted: FC = () => {
   return deletedCount !== 0 ? (
     <Button
       label={`Reset ${deletedCount} deleted`}
-      type="outline"
+      variant="outline"
       Icon={RestoreTrashIcon}
       alignment="left"
       width="fit"

diff --git a/frontend/components/ResetOverridden.tsx b/frontend/components/ResetOverridden.tsx
@@ -1,8 +1,8 @@
+import RestorePageIcon from "assets/restore-page.svg";
 import { Publication } from "modules/publication";
 import { FC } from "react";
-import Button from "./Button";
-import RestorePageIcon from "assets/restore-page.svg";
 import { useClearSelection } from "react-selection-manager";
+import Button from "./Button";
 
 const ResetOverridden: FC = () => {
   const overriddenCount = Publication.STORE.useOverriddenCount();
@@ -23,7 +23,7 @@ const ResetOverridden: FC = () => {
   return overriddenCount !== 0 ? (
     <Button
       label={`Reset ${overriddenCount} overriden`}
-      type="outline"
+      variant="outline"
       Icon={RestorePageIcon}
       alignment="left"
       width="fit"

diff --git a/frontend/components/SignInButton.tsx b/frontend/components/SignInButton.tsx
@@ -1,13 +1,13 @@
+import GoogleIcon from "assets/google.svg";
 import { signIn } from "next-auth/react";
 import { FC } from "react";
 import Button from "./Button";
-import GoogleIcon from "assets/google.svg";
 
 const SignInButton: FC = () => {
   return (
     <Button
       label="Sign in"
-      type="outline"
+      variant="outline"
       alignment="left"
       onClick={() => signIn("google")}
       Icon={GoogleIcon}

diff --git a/frontend/components/SignOutButton.tsx b/frontend/components/SignOutButton.tsx
@@ -1,13 +1,13 @@
+import ExitIcon from "assets/exit.svg";
 import { signOut } from "next-auth/react";
 import { FC } from "react";
 import Button from "./Button";
-import ExitIcon from "assets/exit.svg";
 
 const SignOutButton: FC = () => {
   return (
     <Button
       label="Sign out"
-      type="outline"
+      variant="outline"
       alignment="left"
       onClick={() => signOut({ callbackUrl: "/" })}
       Icon={ExitIcon}

diff --git a/frontend/components/Toggle.tsx b/frontend/components/Toggle.tsx
@@ -1,5 +1,5 @@
-import { forwardRef } from "react";
 import CheckIcon from "assets/check.svg";
+import { forwardRef } from "react";
 import Button, { ButtonProps } from "./Button";
 
 type Props = ButtonProps & {
@@ -18,7 +18,7 @@ const Toggle = forwardRef<HTMLButtonElement, Props>(function Toggle(
     <Button
       {...props}
       ref={ref}
-      type={checked ? "primary" : "outline"}
+      variant={checked ? "primary" : "outline"}
       Icon={checked ? CheckedIcon : UncheckedIcon}
       label={label}
       onClick={onClick}

diff --git a/frontend/pages/auth/error.tsx b/frontend/pages/auth/error.tsx
@@ -1,9 +1,9 @@
+import GoogleIcon from "assets/google.svg";
 import Button from "components/Button";
 import Layout from "components/Layout";
 import { NextPage } from "next";
-import { useRouter } from "next/router";
-import GoogleIcon from "assets/google.svg";
 import { signIn, useSession } from "next-auth/react";
+import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 type ErrorCode = "AccessDenied" | "Verification" | "Default" | "Configuration";
@@ -66,7 +66,7 @@ const SignIn: NextPage = () => {
               </div>
               <Button
                 label="Try again"
-                type="outline"
+                variant="outline"
                 onClick={() => signIn("google", { callbackUrl: "/" })}
                 Icon={GoogleIcon}
               />

diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
@@ -81,7 +81,7 @@ const Home: NextPage = () => {
               <Link href="/publications/new">
                 <Button
                   label="Add publications"
-                  type="outline"
+                  variant="outline"
                   Icon={AddIcon}
                   alignment="left"
                   width="fixed"