Add ButtonLink button variant

astroplant-frontend/src/Components/Button.module.css

@@ -47,6 +47,11 @@
  background-color: var(--btn-bg);
  transition: background-color var(--fast-transition-time) ease;
 
+ &a, &a:hover {
+ color: var(--btn-fg);
+ text-decoration: none;
+ }
+
  &.small {
  font-size: 0.7rem;
  height: 2rem;

astroplant-frontend/src/Components/Button.tsx

@@ -3,19 +3,53 @@ import clsx from "clsx";
 
 import commonStyles from "~/Common.module.css";
 import styles from "./Button.module.css";
+import { NavLink, NavLinkProps } from "react-router-dom";
 
-export type ButtonProps = Omit<React.HTMLProps<HTMLButtonElement>, "size"> & {
- variant?: "regular" | "primary" | "muted" | "positive" | "negative" | "text";
- size?: "regular" | "small";
+export type ButtonVariant =
+ | "regular"
+ | "primary"
+ | "muted"
+ | "positive"
+ | "negative"
+ | "text";
+export type ButtonSize = "regular" | "small";
+
+function className_(
+ variant: ButtonVariant = "regular",
+ size: ButtonSize = "regular",
+ loading: boolean = false,
+): string {
+ return clsx(
+ styles.btn,
+ variant === "primary" && styles.primary,
+ variant === "muted" && styles.muted,
+ variant === "positive" && styles.ok,
+ variant === "negative" && styles.cancel,
+ variant === "text" && styles.text,
+ size === "small" && styles.small,
+ commonStyles.focusRing,
+ loading && styles.loading,
+ );
+}
+
+type CommonProps = {
+ variant?: ButtonVariant;
+ size?: ButtonSize;
  loading?: boolean;
- disabled?: boolean;
- onClick?: MouseEventHandler<HTMLButtonElement>;
  /** A React node to use as an adornment at the left side of the button. */
  leftAdornment?: React.ReactNode;
  /** A React node to use as an adornment at the right side of the button. */
  rightAdornment?: React.ReactNode;
 };
 
+export type ButtonProps = CommonProps &
+ Omit<React.HTMLProps<HTMLButtonElement>, "size"> & {
+ disabled?: boolean;
+ onClick?: MouseEventHandler<HTMLButtonElement>;
+ };
+
+export type ButtonLinkProps = CommonProps & NavLinkProps;
+
 export function Buttons({ children }: PropsWithChildren<{}>) {
  return <div className={styles.buttonGroup}>{children}</div>;
 }
@@ -38,18 +72,7 @@ export function Button({
  type="button"
  onClick={onClick}
  disabled={disabled}
- className={clsx(
- className,
- styles.btn,
- variant === "primary" && styles.primary,
- variant === "muted" && styles.muted,
- variant === "positive" && styles.ok,
- variant === "negative" && styles.cancel,
- variant === "text" && styles.text,
- size === "small" && styles.small,
- commonStyles.focusRing,
- loading && styles.loading,
- )}
+ className={clsx(className, className_(variant, size, loading))}
  >
  {leftAdornment && (
  <div className={styles.leftAdornment}>{leftAdornment}</div>
@@ -61,3 +84,29 @@ export function Button({
  </button>
  );
 }
+
+export function ButtonLink({
+ variant = "regular",
+ size,
+ loading = false,
+ leftAdornment,
+ rightAdornment,
+ children,
+ className,
+ ...props
+}: PropsWithChildren<ButtonLinkProps>) {
+ return (
+ <NavLink
+ {...props}
+ className={clsx(className, className_(variant, size, loading))}
+ >
+ {leftAdornment && (
+ <div className={styles.leftAdornment}>{leftAdornment}</div>
+ )}
+ {children}
+ {rightAdornment && (
+ <div className={styles.rightAdornment}>{rightAdornment}</div>
+ )}
+ </NavLink>
+ );
+}