@nationaldesignstudio/react 0.2.0 → 0.5.0

package/src/components/atoms/button/button.stories.tsx

@@ -3,149 +3,287 @@ import { Button } from ".";
 
 const meta: Meta<typeof Button> = {
 	title: "Atoms/Button",
-} as Meta<typeof Button>;
+	component: Button,
+	argTypes: {
+		variant: {
+			control: { type: "select" },
+			options: [
+				"primary",
+				"default",
+				"secondary",
+				"destructive",
+				"outline",
+				"ghost",
+				"link",
+			],
+		},
+		size: {
+			control: { type: "select" },
+			options: ["sm", "default", "lg"],
+		},
+		disabled: {
+			control: { type: "boolean" },
+		},
+	},
+	args: {
+		variant: "default",
+		size: "default",
+		disabled: false,
+	},
+} satisfies Meta<typeof Button>;
 
 export default meta;
 type Story = StoryObj<typeof Button>;
 
+// =============================================================================
+// Playground
+// =============================================================================
+
 export const Playground: Story = {
 	render: (args) => <Button {...args}>Button</Button>,
 };
-Playground.argTypes = {
-	size: {
-		control: {
-			type: "radio",
-		},
-		options: ["sm", "default", "lg"],
-	},
-	disabled: {
-		control: {
-			type: "boolean",
-		},
-	},
-	variant: {
-		control: {
-			type: "radio",
-		},
-		options: ["solid", "outline", "ghost", "subtle"],
-	},
-	colorScheme: {
-		control: {
-			type: "radio",
-		},
-		options: ["dark", "light"],
-	},
-};
-Playground.args = {
-	size: "default",
-	disabled: false,
-	variant: "solid",
-	colorScheme: "dark",
+
+// =============================================================================
+// All Variants
+// =============================================================================
+
+/**
+ * All button variants in a single view.
+ * Matches Figma Button component variants.
+ */
+export const AllVariants: Story = {
+	render: () => (
+		<div className="flex flex-col gap-24">
+			<div className="flex items-center gap-16">
+				<Button variant="primary">Primary</Button>
+				<Button variant="default">Default</Button>
+				<Button variant="secondary">Secondary</Button>
+				<Button variant="destructive">Destructive</Button>
+				<Button variant="outline">Outline</Button>
+				<Button variant="ghost">Ghost</Button>
+				<Button variant="link">Link</Button>
+			</div>
+		</div>
+	),
 };
 
 // =============================================================================
-// Variants (Dark Color Scheme - for light backgrounds)
+// Individual Variants
 // =============================================================================
 
-export const Solid = () => <Button variant="solid">Solid</Button>;
+/**
+ * Primary button - Blue filled for primary actions.
+ * Use for the main call-to-action.
+ */
+export const Primary: Story = {
+	render: () => <Button variant="primary">Primary</Button>,
+};
 
-export const Outline = () => <Button variant="outline">Outline</Button>;
+/**
+ * Default button - Dark filled for secondary prominence.
+ * Use for important but not primary actions.
+ */
+export const Default: Story = {
+	render: () => <Button variant="default">Default</Button>,
+};
 
-export const Ghost = () => <Button variant="ghost">Ghost</Button>;
+/**
+ * Secondary button - Light gray filled with subtle border.
+ * Use for less prominent actions.
+ */
+export const Secondary: Story = {
+	render: () => <Button variant="secondary">Secondary</Button>,
+};
 
-export const Subtle = () => <Button variant="subtle">Subtle</Button>;
+/**
+ * Destructive button - Red filled for destructive actions.
+ * Use for delete, remove, or other destructive actions.
+ */
+export const Destructive: Story = {
+	render: () => <Button variant="destructive">Destructive</Button>,
+};
 
-// =============================================================================
-// Variants (Light Color Scheme - for dark backgrounds)
-// =============================================================================
+/**
+ * Outline button - Bordered with transparent background.
+ * Use for secondary actions that need clear boundaries.
+ */
+export const Outline: Story = {
+	render: () => <Button variant="outline">Outline</Button>,
+};
+
+/**
+ * Ghost button - Transparent with subtle hover.
+ * Use for tertiary actions or in toolbars.
+ */
+export const Ghost: Story = {
+	render: () => <Button variant="ghost">Ghost</Button>,
+};
 
-const DarkBackground = ({ children }: { children: React.ReactNode }) => (
-	<div className="rounded-radius-12 bg-gray-1200 p-spacing-32">{children}</div>
-);
-
-export const SolidLight = () => (
-	<DarkBackground>
-		<Button variant="solid" colorScheme="light">
-			Solid Light
-		</Button>
-	</DarkBackground>
-);
-
-export const OutlineLight = () => (
-	<DarkBackground>
-		<Button variant="outline" colorScheme="light">
-			Outline Light
-		</Button>
-	</DarkBackground>
-);
-
-export const GhostLight = () => (
-	<DarkBackground>
-		<Button variant="ghost" colorScheme="light">
-			Ghost Light
-		</Button>
-	</DarkBackground>
-);
-
-export const SubtleLight = () => (
-	<DarkBackground>
-		<Button variant="subtle" colorScheme="light">
-			Subtle Light
-		</Button>
-	</DarkBackground>
-);
+/**
+ * Link button - Text only with underline on hover.
+ * Use for navigation or inline actions.
+ */
+export const Link: Story = {
+	render: () => <Button variant="link">Link</Button>,
+};
 
 // =============================================================================
-// All Variants Comparison
+// Sizes
 // =============================================================================
 
-export const AllVariants = () => (
-	<div className="flex flex-col gap-spacing-32">
-		<div>
-			<h3 className="mb-spacing-16 text-14 font-medium text-text-secondary">
-				Dark Color Scheme (for light backgrounds)
-			</h3>
-			<div className="flex gap-spacing-16">
-				<Button variant="solid">Solid</Button>
-				<Button variant="outline">Outline</Button>
-				<Button variant="ghost">Ghost</Button>
-				<Button variant="subtle">Subtle</Button>
-			</div>
+/**
+ * All button sizes.
+ * Matches Figma Button component sizes: sm (32px), default (36px), lg (40px).
+ */
+export const AllSizes: Story = {
+	render: () => (
+		<div className="flex items-center gap-16">
+			<Button size="sm">Small</Button>
+			<Button size="default">Default</Button>
+			<Button size="lg">Large</Button>
 		</div>
-		<DarkBackground>
-			<h3 className="mb-spacing-16 text-14 font-medium text-gray-400">
-				Light Color Scheme (for dark backgrounds)
-			</h3>
-			<div className="flex gap-spacing-16">
-				<Button variant="solid" colorScheme="light">
-					Solid
-				</Button>
-				<Button variant="outline" colorScheme="light">
-					Outline
-				</Button>
-				<Button variant="ghost" colorScheme="light">
-					Ghost
-				</Button>
-				<Button variant="subtle" colorScheme="light">
-					Subtle
-				</Button>
-			</div>
-		</DarkBackground>
-	</div>
-);
+	),
+};
+
+export const Small: Story = {
+	render: () => <Button size="sm">Small</Button>,
+};
+
+export const Medium: Story = {
+	render: () => <Button size="default">Default</Button>,
+};
+
+export const Large: Story = {
+	render: () => <Button size="lg">Large</Button>,
+};
 
 // =============================================================================
-// Sizes
+// States
 // =============================================================================
 
-export const Small = () => <Button size="sm">Small</Button>;
-
-export const Medium = () => <Button size="default">Medium</Button>;
+/**
+ * Disabled state for all variants.
+ */
+export const Disabled: Story = {
+	render: () => <Button disabled>Disabled</Button>,
+};
 
-export const Large = () => <Button size="lg">Large</Button>;
+export const DisabledVariants: Story = {
+	render: () => (
+		<div className="flex items-center gap-16">
+			<Button variant="primary" disabled>
+				Primary
+			</Button>
+			<Button variant="default" disabled>
+				Default
+			</Button>
+			<Button variant="secondary" disabled>
+				Secondary
+			</Button>
+			<Button variant="destructive" disabled>
+				Destructive
+			</Button>
+			<Button variant="outline" disabled>
+				Outline
+			</Button>
+			<Button variant="ghost" disabled>
+				Ghost
+			</Button>
+			<Button variant="link" disabled>
+				Link
+			</Button>
+		</div>
+	),
+};
 
 // =============================================================================
-// States
+// Size Variants Matrix
 // =============================================================================
 
-export const Disabled = () => <Button disabled>Disabled</Button>;
+/**
+ * Matrix showing all variants at all sizes.
+ */
+export const VariantSizeMatrix: Story = {
+	render: () => (
+		<div className="flex flex-col gap-24">
+			<div>
+				<h3 className="mb-12 text-14 font-medium text-gray-600">Small</h3>
+				<div className="flex items-center gap-12">
+					<Button variant="primary" size="sm">
+						Primary
+					</Button>
+					<Button variant="default" size="sm">
+						Default
+					</Button>
+					<Button variant="secondary" size="sm">
+						Secondary
+					</Button>
+					<Button variant="destructive" size="sm">
+						Destructive
+					</Button>
+					<Button variant="outline" size="sm">
+						Outline
+					</Button>
+					<Button variant="ghost" size="sm">
+						Ghost
+					</Button>
+					<Button variant="link" size="sm">
+						Link
+					</Button>
+				</div>
+			</div>
+			<div>
+				<h3 className="mb-12 text-14 font-medium text-gray-600">Default</h3>
+				<div className="flex items-center gap-12">
+					<Button variant="primary" size="default">
+						Primary
+					</Button>
+					<Button variant="default" size="default">
+						Default
+					</Button>
+					<Button variant="secondary" size="default">
+						Secondary
+					</Button>
+					<Button variant="destructive" size="default">
+						Destructive
+					</Button>
+					<Button variant="outline" size="default">
+						Outline
+					</Button>
+					<Button variant="ghost" size="default">
+						Ghost
+					</Button>
+					<Button variant="link" size="default">
+						Link
+					</Button>
+				</div>
+			</div>
+			<div>
+				<h3 className="mb-12 text-14 font-medium text-gray-600">Large</h3>
+				<div className="flex items-center gap-12">
+					<Button variant="primary" size="lg">
+						Primary
+					</Button>
+					<Button variant="default" size="lg">
+						Default
+					</Button>
+					<Button variant="secondary" size="lg">
+						Secondary
+					</Button>
+					<Button variant="destructive" size="lg">
+						Destructive
+					</Button>
+					<Button variant="outline" size="lg">
+						Outline
+					</Button>
+					<Button variant="ghost" size="lg">
+						Ghost
+					</Button>
+					<Button variant="link" size="lg">
+						Link
+					</Button>
+				</div>
+			</div>
+		</div>
+	),
+};