101 lines
3.3 KiB
TypeScript
101 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* Figma: ".utility / Step Card" (23742:49583). One row in Overlay / Modal / Card
|
|
* with Has Steps on — open (step badge) or done (check).
|
|
*/
|
|
|
|
import { memo } from "react";
|
|
import Icon from "../../../components/asset/icon";
|
|
|
|
export type ValueDialogStepCardProps = {
|
|
stepNumber: number;
|
|
stepBadgeLabel: string;
|
|
title: string;
|
|
description: string;
|
|
done: boolean;
|
|
onClick: () => void;
|
|
};
|
|
|
|
function CheckGlyph() {
|
|
return (
|
|
<svg
|
|
aria-hidden
|
|
width="10"
|
|
height="10"
|
|
viewBox="0 0 12 12"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="text-[var(--color-content-invert-primary,white)]"
|
|
>
|
|
<path
|
|
d="M10 3L4.5 8.5L2 6"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function ValueDialogStepCardComponent({
|
|
stepNumber,
|
|
stepBadgeLabel,
|
|
title,
|
|
description,
|
|
done,
|
|
onClick,
|
|
}: ValueDialogStepCardProps) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
aria-label={title}
|
|
data-figma-node={done ? "23740:49582" : "23740:49581"}
|
|
className={`flex w-full shrink-0 items-center gap-[8px] rounded-[12px] border border-solid p-[12px] text-left ${
|
|
done
|
|
? "border-[var(--color-border-default-positive-primary,#45ea97)] bg-[var(--color-surface-default-secondary,#141414)]"
|
|
: "border-[var(--color-border-default-secondary,#303030)] bg-[var(--color-surface-default-secondary,#141414)] hover:border-[var(--color-border-default-brand-primary,#fdfaa8)]"
|
|
} focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-default-primary)]`}
|
|
>
|
|
{done ? (
|
|
<span
|
|
aria-hidden
|
|
className="flex size-4 shrink-0 items-center justify-center rounded-[8px] bg-[var(--color-surface-default-positive-primary,#16c472)]"
|
|
>
|
|
<CheckGlyph />
|
|
</span>
|
|
) : (
|
|
<span
|
|
aria-hidden
|
|
className="flex w-[48px] shrink-0 items-center justify-center rounded-[12px] bg-[var(--color-surface-default-primary)] py-[4px] text-[length:var(--sizing-250)] font-medium leading-[12px] text-[color:var(--color-content-default-secondary,#c2c2c2)]"
|
|
>
|
|
{stepBadgeLabel.replace("{n}", String(stepNumber))}
|
|
</span>
|
|
)}
|
|
<span className="flex min-w-0 flex-1 flex-col items-start gap-[2px]">
|
|
<span className="w-full text-x-small-paragraph text-[color:var(--color-content-default-primary)]">
|
|
{title}
|
|
</span>
|
|
<span
|
|
className={`w-full text-[length:var(--sizing-250)] leading-[14px] ${
|
|
done
|
|
? "text-[color:var(--color-content-default-secondary,#c2c2c2)]"
|
|
: "text-[color:var(--color-content-default-tertiary,#a4a4a4)]"
|
|
}`}
|
|
>
|
|
{description}
|
|
</span>
|
|
</span>
|
|
<span className="flex size-4 shrink-0 items-center justify-center text-[color:var(--color-content-default-primary)]">
|
|
<Icon name="chevron_right" size={16} />
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
ValueDialogStepCardComponent.displayName = "ValueDialogStepCard";
|
|
|
|
export const ValueDialogStepCard = memo(ValueDialogStepCardComponent);
|