BaseLibraries/MattrixwvReactComponents
1
0
Fork 0
Code Issues 3 Packages Projects Releases Wiki Activity

Update button components

Browse Source
This commit is contained in:
Matthew Ellison
2026-02-14 16:35:24 -05:00
parent aaa15b1cfc
commit f224f3fa2c
11 changed files with 33 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
lib/component/button/Button.tsx
View File

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

12
lib/component/button/DangerButton.tsx
View File

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

12
lib/component/button/DarkButton.tsx
View File

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

12
lib/component/button/InfoButton.tsx
View File

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

12
lib/component/button/LightButton.tsx
View File

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

12
lib/component/button/MoltenButton.tsx
View File

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

12
lib/component/button/PrimaryButton.tsx
View File

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

12
lib/component/button/SecondaryButton.tsx
View File

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

12
lib/component/button/SuccessButton.tsx
View File

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

12
lib/component/button/TertiaryButton.tsx
View File

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

12
lib/component/button/WarningButton.tsx
View File

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