Update button components
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user