chore: button-migration

Author: tractorss

src/App.tsx

@@ -57,10 +57,6 @@ const StyledTabs = styled(Tabs)`
   width: 995px;
 `;
 
-const StyledButton = styled(Button)`
-  margin-top: 64px;
-`;
-
 const App = () => {
   const [theme, setTheme] = useState(lightTheme);
   const [tailwindTheme, setTailwindTheme] = useState("light");
@@ -118,8 +114,9 @@ const App = () => {
             {example === "tooltip" && <Tooltips />}
             {example === "copiable" && <Copiable />}
           </StyledCard>
-          <StyledButton
+          <Button
             variant="primary"
+            className="mt-16"
             text={"Change theme"}
             onClick={changeTheme}
           />

src/examples/buttons.tsx

@@ -6,9 +6,9 @@ const Buttons = () => (
   <>
     <Button text="Primary Button" />
     <Button small text="Get help" Icon={Telegram} />
-    <Button disabled isLoading text="Hello" />
+    <Button isDisabled isLoading text="Hello" />
     <Button variant="secondary" text="Hello" />
-    <Button variant="secondary" isLoading disabled text="Hello" />
+    <Button variant="secondary" isLoading isDisabled text="Hello" />
     <Button variant="tertiary" small text="Hello" />
   </>
 );

src/lib/button/ButtonIcon.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { cn } from "../../utils";
+import { ButtonProps } from ".";
+
+const ButtonIcon: React.FC<
+  Pick<ButtonProps, "Icon" | "icon" | "isDisabled" | "isLoading" | "variant">
+> = ({ Icon, icon, isDisabled, isLoading, variant }) => {
+  const isSecondary = variant === "secondary";
+  return (
+    icon ??
+    (Icon && (
+      <Icon
+        className={cn(
+          "button-svg",
+          "mr-2 h-4 w-4",
+          "fill-klerosUIComponentsWhiteBackground",
+          isLoading && ["invisible"],
+          isSecondary && ["fill-klerosUIComponentsPrimaryBlue"],
+          isDisabled && ["fill-klerosUIComponentsStroke"],
+        )}
+      />
+    ))
+  );
+};
+export default ButtonIcon;

src/lib/button/ButtonText.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { ButtonProps } from ".";
+import { cn } from "../../utils";
+
+const ButtonText: React.FC<
+  Pick<ButtonProps, "text" | "isDisabled" | "isLoading" | "variant">
+> = ({ text, isDisabled, isLoading, variant }) => {
+  const isSecondary = variant === "secondary";
+  return (
+    <p
+      className={cn(
+        "button-text",
+        "text-klerosUIComponentsWhiteBackground text-center leading-[22px] font-semibold whitespace-pre",
+        isLoading && ["invisible"],
+        isSecondary && ["text-klerosUIComponentsPrimaryBlue"],
+        isDisabled && ["text-klerosUIComponentsStroke"],
+      )}
+    >
+      {text}
+    </p>
+  );
+};
+
+export default ButtonText;

src/lib/button/KlerosSymbol.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { ButtonProps } from ".";
+import KlerosIcon from "../../assets/svgs/kleros.svg";
+import { cn } from "../../utils";
+
+const KlerosSymbol: React.FC<Pick<ButtonProps, "isDisabled" | "variant">> = ({
+  isDisabled,
+  variant,
+}) => {
+  const isPrimary = variant === "primary" || variant === undefined;
+  const isSecondary = variant === "secondary";
+  const isTertiary = variant === "tertiary";
+  return (
+    <KlerosIcon
+      className={cn(
+        "button-loading",
+        "absolute h-[22px]",
+        "fill-klerosUIComponentsStroke animate-breathing",
+        (isPrimary || isTertiary) && ["fill-klerosUIComponentsWhiteBackground"],
+        isSecondary && ["fill-klerosUIComponentsPrimaryBlue"],
+        isDisabled && ["fill-klerosUIComponentsStroke"],
+      )}
+    />
+  );
+};
+
+export default KlerosSymbol;

src/lib/button/base.tsx

@@ -1,16 +1,27 @@
 import React from "react";
-import { BaseButtonProps } from "./base";
-import PrimaryButton from "./primary";
-import SecondaryButton from "./secondary";
-import TertiaryButton from "./tertiary";
-import KlerosSymbol from "../../assets/svgs/kleros.svg";
+import { cn } from "../../utils";
+import {
+  Button as AriaButton,
+  type ButtonProps as AriaButtonProps,
+} from "react-aria-components";
+import ButtonText from "./ButtonText";
+import KlerosSymbol from "./KlerosSymbol";
+import ButtonIcon from "./ButtonIcon";
 
-interface ButtonProps extends Omit<BaseButtonProps, "$loading"> {
-  disabled?: boolean;
+export interface BaseButtonProps {
+  variant?: "primary" | "secondary" | "tertiary";
+  small?: boolean;
+  isLoading?: boolean;
+}
+
+export interface ButtonProps
+  extends AriaButtonProps,
+    Omit<BaseButtonProps, "$loading"> {
   text: string;
   Icon?: React.FC<React.SVGAttributes<SVGElement>>;
   icon?: React.ReactNode;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  className?: string;
 }
 
 const Button: React.FC<ButtonProps> = ({
@@ -20,18 +31,45 @@ const Button: React.FC<ButtonProps> = ({
   icon,
   onClick,
   isLoading,
+  className,
+  isDisabled,
   ...props
 }) => {
-  let ButtonType = PrimaryButton;
-  if (variant === "secondary") ButtonType = SecondaryButton;
-  if (variant === "tertiary") ButtonType = TertiaryButton;
-
+  const isPrimary = variant === "primary" || variant === undefined;
+  const isSecondary = variant === "secondary";
+  const isTertiary = variant === "tertiary";
   return (
-    <ButtonType {...{ variant, onClick, isLoading, ...props }}>
-      {isLoading && <KlerosSymbol className="button-loading" />}
-      {icon ?? (Icon && <Icon className="button-svg" />)}
-      <p className="button-text">{text}</p>
-    </ButtonType>
+    <AriaButton
+      className={cn(
+        "relative box-border h-fit w-fit",
+        "flex flex-row items-center justify-center",
+        "rounded-base hover:cursor-pointer",
+        "ease-ease transition-[background] duration-(--klerosUIComponentsTransitionSpeed)",
+
+        props.small ? "px-6 py-1.5" : "px-8 py-[11.5px]",
+        isPrimary && [
+          "bg-klerosUIComponentsPrimaryBlue hover:bg-klerosUIComponentsSecondaryBlue",
+        ],
+        isSecondary && [
+          "bg-klerosUIComponentsWhiteBackground hover:bg-klerosUIComponentsMediumBlue",
+          "border-klerosUIComponentsPrimaryBlue border",
+          props.small ? "px-[23px] py-[5px]" : "px-[31px] py-[10.5px]",
+        ],
+        isTertiary && [
+          "bg-klerosUIComponentsSecondaryPurple hover:bg-klerosUIComponentsPrimaryPurple",
+        ],
+        isDisabled && [
+          "bg-klerosUIComponentsLightGrey hover:bg-klerosUIComponentsLightGrey hover:cursor-not-allowed",
+          isSecondary && "border-klerosUIComponentsStroke border",
+        ],
+        className,
+      )}
+      {...{ variant, onClick, isLoading, isDisabled, ...props }}
+    >
+      {isLoading && <KlerosSymbol {...{ isDisabled, variant }} />}
+      <ButtonIcon {...{ icon, Icon, isDisabled, isLoading, variant }} />
+      <ButtonText {...{ isLoading, isDisabled, variant, text }} />
+    </AriaButton>
   );
 };
 

src/lib/button/index.tsx

@@ -33,7 +33,7 @@ const Selector: React.FC<ISelector> = ({
     <Button
       onClick={() => onSelect()}
       text={currentSelection ? `Select\n${currentSelection}` : "No Selection"}
-      disabled={!currentSelection}
+      isDisabled={!currentSelection}
     />
   </Wrapper>
 );