📦 EqualifyEverything / equalify

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78import { ReactNode } from "react";
import styles from "./StyledButton.module.scss";
import * as AccessibleIcon from "@radix-ui/react-accessible-icon";
import * as VisuallyHidden from "@radix-ui/react-visually-hidden";

interface ButtonProps extends React.PropsWithChildren {
  variant?: string;
  icon?: ReactNode;
  onClick: (e?:any) => Promise<void> | void;
  label: string;
  showLabel?: boolean;
  disabled?: boolean;
  loading?: boolean;
  loadingText?: string;
  className?: string;
  prependText?: string;
  type?: "button" | "submit" | "reset";
  inline?: boolean;
}

export const StyledButton = ({
  variant = "light",
  icon,
  onClick,
  label,
  showLabel = true,
  disabled = false,
  loading = false,
  loadingText = "Loading...",
  className = "",
  prependText = "",
  type = "button",
  inline = false,
  ...props
}: ButtonProps) => {
  const iconOnly = !showLabel ? styles["icon-only"] + " icon-only":"";
  const isDisabled = disabled || loading ? styles["disabled"]: "";
  const isLoading = loading ? styles["loading"]: "";
  const inlineClass = inline ? styles["inline"] + " inline" : "";
  const mappedClassNames = className
    ?.split(" ")
    .filter(Boolean)
    .map((name) => styles[name] ?? name)
    .join(" ");
  return (
    <button
      className={
        styles["button"] 
        + " button "  
        + styles[variant] + " " 
        + variant + " "
        + iconOnly + " "
        + isDisabled + " "
        + isLoading + " "
        + inlineClass + " "
        + mappedClassNames
        }
      type={type}
      onClick={onClick}
      disabled={disabled || loading}
      aria-busy={loading}
      {...props}
    >
      {loading ? (
        <span className={styles["spinner"]} aria-hidden="true"></span>
      ) : (
        icon //&& <AccessibleIcon.Root label={label}>{icon}</AccessibleIcon.Root>
      )}
      {prependText}
      {showLabel ? (
        <span>{loading ? loadingText : label}</span>
      ) : (
        <VisuallyHidden.Root>{loading ? loadingText : label}</VisuallyHidden.Root>
      )}
    </button>
  );
};