adilallo
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
|
|
/**
|
|
* Figma: Community Rule System — **Vertical button** (`19787:10896`).
|
|
*
|
|
* Tile control: column layout, brand-primary border on transparent surface,
|
|
* 32px icon slot + centered 14/18 medium label (label rendered by `children`).
|
|
*/
|
|
export interface VerticalProps {
|
|
children: React.ReactNode;
|
|
onClick?: (_event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
className?: string;
|
|
disabled?: boolean;
|
|
ariaLabel?: string;
|
|
type?: "button" | "submit" | "reset";
|
|
"data-testid"?: string;
|
|
}
|
|
|
|
function VerticalComponent({
|
|
children,
|
|
onClick,
|
|
className = "",
|
|
disabled = false,
|
|
ariaLabel,
|
|
type = "button",
|
|
"data-testid": dataTestId,
|
|
}: VerticalProps) {
|
|
const base =
|
|
"box-border flex w-[90px] shrink-0 cursor-pointer flex-col items-center gap-[var(--spacing-scale-008)] rounded-[var(--spacing-scale-004)] border border-solid border-[var(--color-border-default-brand-primary)] bg-transparent px-[var(--spacing-scale-008)] py-[var(--spacing-scale-012)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] disabled:cursor-not-allowed disabled:opacity-60";
|
|
|
|
return (
|
|
<button
|
|
type={type}
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
aria-label={ariaLabel}
|
|
data-testid={dataTestId}
|
|
className={`${base} ${className}`.trim()}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
VerticalComponent.displayName = "Vertical";
|
|
|
|
export default memo(VerticalComponent);
|