Merge pull request #70 from kleros/feat/add-accordion-stories

Feat/add accordion stories

Author: tractorss

.storybook/main.ts

@@ -14,6 +14,28 @@ const config: StorybookConfig = {
   },
   typescript: {
     reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      propFilter: (prop) => {
+        if (prop.parent) {
+          const fileName = prop.parent.fileName;
+          // Include props from our own code (not in node_modules)
+          if (!fileName.includes("node_modules")) {
+            return true;
+          }
+          // Include props from react-aria-components and react-aria
+          if (
+            fileName.includes("react-aria-components") ||
+            fileName.includes("react-aria") ||
+            fileName.includes("node_modules/@react-types")
+          ) {
+            return true;
+          }
+          // Exclude all other props from node_modules
+          return false;
+        }
+        return true;
+      },
+    },
   },
 };
 export default config;

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,10 +114,11 @@ const App = () => {
             {example === "tooltip" && <Tooltips />}
             {example === "copiable" && <Copiable />}
           </StyledCard>
-          <StyledButton
+          <Button
             variant="primary"
+            className="mt-16"
             text={"Change theme"}
-            onClick={changeTheme}
+            onPress={changeTheme}
           />
         </StyledDiv>
       </ThemeProvider>

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,38 +1,85 @@
 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 {
+  /** @default primary */
+  variant?: "primary" | "secondary" | "tertiary";
+  /**
+   * Reduce the paddings on button
+   * @default false
+   */
+  small?: boolean;
+  /**
+   * Indicate if button is in loading state
+   * @default false
+   */
+  isLoading?: boolean;
+}
+
+export interface ButtonProps
+  extends AriaButtonProps,
+    Omit<BaseButtonProps, "$loading"> {
   text: string;
+  /** A React svg element to show as icon on button */
   Icon?: React.FC<React.SVGAttributes<SVGElement>>;
+  /** A React node element to show as is on button */
   icon?: React.ReactNode;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  className?: string;
 }
 
-const Button: React.FC<ButtonProps> = ({
+function Button({
   text,
   variant,
   Icon,
   icon,
-  onClick,
   isLoading,
+  className,
+  isDisabled,
   ...props
-}) => {
-  let ButtonType = PrimaryButton;
-  if (variant === "secondary") ButtonType = SecondaryButton;
-  if (variant === "tertiary") ButtonType = TertiaryButton;
-
+}: Readonly<ButtonProps>): React.ReactElement {
+  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, isLoading, isDisabled, ...props }}
+    >
+      {isLoading && <KlerosSymbol {...{ isDisabled, variant }} />}
+      <ButtonIcon {...{ icon, Icon, isDisabled, isLoading, variant }} />
+      <ButtonText {...{ isLoading, isDisabled, variant, text }} />
+    </AriaButton>
   );
-};
+}
 
 export default Button;