Update button components

This commit is contained in:
2026-02-14 16:35:24 -05:00
parent aaa15b1cfc
commit f224f3fa2c
11 changed files with 33 additions and 99 deletions

View File

@@ -1,10 +1,9 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
export default function Button({
className,
type="button",
rounding = "lg",
@@ -13,11 +12,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
variant = "standard",
disabled,
...buttonProps
}, ref ) => {
}: Readonly<ButtonProps>){
return (
<button
data-testid="mattrixwv-button"
ref={ref}
type={type}
disabled={disabled}
className={clsx(
@@ -59,8 +57,4 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
{...buttonProps}
/>
);
});
Button.displayName = "Button";
export default Button;
}

View File

@@ -1,20 +1,18 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
const DangerButton = forwardRef<HTMLButtonElement, ButtonProps>(({
export default function DangerButton({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
}: Readonly<ButtonProps>){
return (
<Button
data-testid="mattrixwv-danger-button"
ref={ref}
variant={variant}
disabled={disabled}
className={clsx(
@@ -44,8 +42,4 @@ const DangerButton = forwardRef<HTMLButtonElement, ButtonProps>(({
{...buttonProps}
/>
);
});
DangerButton.displayName = "DangerButton";
export default DangerButton;
}

View File

@@ -1,19 +1,17 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
const DarkButton = forwardRef<HTMLButtonElement, ButtonProps>(({
export default function DarkButton({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
}: Readonly<ButtonProps>){
return (
<Button
data-testid="mattrixwv-dark-button"
ref={ref}
variant={variant}
disabled={disabled}
className={clsx(
@@ -43,8 +41,4 @@ const DarkButton = forwardRef<HTMLButtonElement, ButtonProps>(({
{...buttonProps}
/>
);
});
DarkButton.displayName = "DarkButton";
export default DarkButton;
}

View File

@@ -1,21 +1,19 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
const InfoButton = forwardRef<HTMLButtonElement, ButtonProps>(({
export default function InfoButton({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
}: Readonly<ButtonProps>){
return (
<Button
data-testid="mattrixwv-info-button"
variant={variant}
disabled={disabled}
ref={ref}
className={clsx(
"transition duration-300",
className,
@@ -43,8 +41,4 @@ const InfoButton = forwardRef<HTMLButtonElement, ButtonProps>(({
{...buttonProps}
/>
);
});
InfoButton.displayName = "InfoButton";
export default InfoButton;
}

View File

@@ -1,19 +1,17 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
const LightButton = forwardRef<HTMLButtonElement, ButtonProps>(({
export default function LightButton({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
}: Readonly<ButtonProps>){
return (
<Button
data-testid="mattrixwv-light-button"
ref={ref}
variant={variant}
disabled={disabled}
className={clsx(
@@ -43,8 +41,4 @@ const LightButton = forwardRef<HTMLButtonElement, ButtonProps>(({
{...buttonProps}
/>
);
});
LightButton.displayName = "LightButton";
export default LightButton;
}

View File

@@ -1,19 +1,17 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
const MoltenButton = forwardRef<HTMLButtonElement, ButtonProps>(({
export default function MoltenButton({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
}: Readonly<ButtonProps>){
return (
<Button
data-testid="mattrixwv-molten-button"
ref={ref}
variant={variant}
disabled={disabled}
className={clsx(
@@ -43,8 +41,4 @@ const MoltenButton = forwardRef<HTMLButtonElement, ButtonProps>(({
{...buttonProps}
/>
);
});
MoltenButton.displayName = "MoltenButton";
export default MoltenButton;
}

View File

@@ -1,19 +1,17 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
const PrimaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
export default function PrimaryButton({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
}: Readonly<ButtonProps>){
return (
<Button
data-testid="mattrixwv-primary-button"
ref={ref}
variant={variant}
disabled={disabled}
className={clsx(
@@ -43,8 +41,4 @@ const PrimaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
{...buttonProps}
/>
);
});
PrimaryButton.displayName = "PrimaryButton";
export default PrimaryButton;
}

View File

@@ -1,19 +1,17 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
const SecondaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
export default function SecondaryButton({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
}: Readonly<ButtonProps>){
return (
<Button
data-testid="mattrixwv-secondary-button"
ref={ref}
variant={variant}
disabled={disabled}
className={clsx(
@@ -43,8 +41,4 @@ const SecondaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
{...buttonProps}
/>
);
});
SecondaryButton.displayName = "SecondaryButton";
export default SecondaryButton;
}

View File

@@ -1,19 +1,17 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
const SuccessButton = forwardRef<HTMLButtonElement, ButtonProps>(({
export default function SuccessButton({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
}: Readonly<ButtonProps>){
return (
<Button
data-testid="mattrixwv-success-button"
ref={ref}
variant={variant}
disabled={disabled}
className={clsx(
@@ -43,8 +41,4 @@ const SuccessButton = forwardRef<HTMLButtonElement, ButtonProps>(({
{...buttonProps}
/>
);
});
SuccessButton.displayName = "SuccessButton";
export default SuccessButton;
}

View File

@@ -1,19 +1,17 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
const TertiaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
export default function TertiaryButton({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
}: Readonly<ButtonProps>){
return (
<Button
data-testid="mattrixwv-tertiary-button"
ref={ref}
variant={variant}
disabled={disabled}
className={clsx(
@@ -43,8 +41,4 @@ const TertiaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
{...buttonProps}
/>
);
});
TertiaryButton.displayName = "TertiaryButton";
export default TertiaryButton;
}

View File

@@ -1,19 +1,17 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
const WarningButton = forwardRef<HTMLButtonElement, ButtonProps>(({
export default function WarningButton({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
}: Readonly<ButtonProps>){
return (
<Button
data-testid="mattrixwv-warning-button"
ref={ref}
variant={variant}
disabled={disabled}
className={clsx(
@@ -43,8 +41,4 @@ const WarningButton = forwardRef<HTMLButtonElement, ButtonProps>(({
{...buttonProps}
/>
);
});
WarningButton.displayName = "WarningButton";
export default WarningButton;
}