@nationaldesignstudio/react 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nationaldesignstudio/react",
-	"version": "0.3.0",
+	"version": "0.5.0",
 	"type": "module",
 	"sideEffects": [
 		"*.css"
@@ -51,6 +51,7 @@
 	},
 	"devDependencies": {
 		"@chromatic-com/storybook": "catalog:",
+		"@figma/code-connect": "^1.3.12",
 		"@nds-design-system/tailwind-token-generator": "workspace:*",
 		"@nds-design-system/tokens": "workspace:*",
 		"@nds-design-system/tools": "workspace:*",

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

@@ -19,7 +19,7 @@ const meta: Meta<typeof Accordion> = {
 	},
 	decorators: [
 		(Story) => (
-			<div className="p-spacing-56 max-w-[746px]">
+			<div className="p-56 max-w-[746px]">
 				<Story />
 			</div>
 		),

package/src/components/atoms/accordion/accordion.tsx

@@ -38,7 +38,7 @@ const accordionItemVariants = tv({
 const accordionTriggerVariants = tv({
 	base: [
 		// Uses primitive spacing tokens
-		"flex w-full items-center justify-between py-spacing-24 text-left",
+		"flex w-full items-center justify-between py-24 text-left",
 		"typography-body-large transition-colors cursor-pointer",
 	],
 	variants: {
@@ -54,7 +54,7 @@ const accordionTriggerVariants = tv({
 
 const accordionPanelVariants = tv({
 	// Uses primitive spacing tokens
-	base: "typography-body-large pb-spacing-24",
+	base: "typography-body-large pb-24",
 	variants: {
 		colorScheme: {
 			dark: "text-gray-100",

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

@@ -0,0 +1,37 @@
+import figma from "@figma/code-connect";
+import { Button } from "./button";
+
+figma.connect(
+	Button,
+	"https://www.figma.com/design/nvGqlGFXelQ5XdjEM5RCdK/Americas-Design-System?node-id=27103-21020",
+	{
+		props: {
+			variant: figma.enum("Variant", {
+				Primary: "primary",
+				Default: "default",
+				Secondary: "secondary",
+				Destructive: "destructive",
+				Outline: "outline",
+				Ghost: "ghost",
+				Link: "link",
+			}),
+			size: figma.enum("Size", {
+				sm: "sm",
+				default: "default",
+				lg: "lg",
+			}),
+			disabled: figma.enum("State", {
+				Disabled: true,
+			}),
+		},
+		example: (props) => (
+			<Button
+				variant={props.variant}
+				size={props.size}
+				disabled={props.disabled}
+			>
+				Button
+			</Button>
+		),
+	},
+);

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

@@ -3,191 +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",
-};
 
 // =============================================================================
-// Variants (Dark Color Scheme - for light backgrounds)
-// Figma naming: Charcoal = solid+dark, Charcoal Outline = outline+dark
+// All Variants
 // =============================================================================
 
 /**
- * Solid Dark (Figma: "Charcoal" / "Black")
- * Primary filled button with ui-button-primary-bg background and inverted text.
- * Use on light backgrounds for primary actions.
+ * All button variants in a single view.
+ * Matches Figma Button component variants.
  */
-export const Solid = () => <Button variant="solid">Solid</Button>;
+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>
+	),
+};
+
+// =============================================================================
+// Individual Variants
+// =============================================================================
 
 /**
- * Outline Dark (Figma: "Charcoal Outline")
- * Primary-colored border and text on transparent background.
- * Use on light backgrounds for secondary actions.
+ * Primary button - Blue filled for primary actions.
+ * Use for the main call-to-action.
  */
-export const Outline = () => <Button variant="outline">Outline</Button>;
+export const Primary: Story = {
+	render: () => <Button variant="primary">Primary</Button>,
+};
 
 /**
- * Ghost Dark
- * Primary-colored text with no border or background.
- * Use for tertiary actions on light backgrounds.
+ * Default button - Dark filled for secondary prominence.
+ * Use for important but not primary actions.
  */
-export const Ghost = () => <Button variant="ghost">Ghost</Button>;
+export const Default: Story = {
+	render: () => <Button variant="default">Default</Button>,
+};
 
 /**
- * Subtle Dark
- * Subtle border with primary-colored text.
- * Use for less prominent actions on light backgrounds.
+ * Secondary button - Light gray filled with subtle border.
+ * Use for less prominent actions.
  */
-export const Subtle = () => <Button variant="subtle">Subtle</Button>;
-
-// =============================================================================
-// Variants (Light Color Scheme - for dark backgrounds)
-// Figma naming: Ivory = solid+light, Ivory Outline = outline+light
-// =============================================================================
-
-const DarkBackground = ({ children }: { children: React.ReactNode }) => (
-	<div className="rounded-radius-12 bg-gray-1200 p-spacing-32">{children}</div>
-);
+export const Secondary: Story = {
+	render: () => <Button variant="secondary">Secondary</Button>,
+};
 
 /**
- * Solid Light (Figma: "Ivory")
- * White filled button with primary-colored text.
- * Use on dark backgrounds for primary actions.
+ * Destructive button - Red filled for destructive actions.
+ * Use for delete, remove, or other destructive actions.
  */
-export const SolidLight = () => (
-	<DarkBackground>
-		<Button variant="solid" colorScheme="light">
-			Solid Light
-		</Button>
-	</DarkBackground>
-);
+export const Destructive: Story = {
+	render: () => <Button variant="destructive">Destructive</Button>,
+};
 
 /**
- * Outline Light (Figma: "Ivory Outline")
- * White border and text on transparent background.
- * Use on dark backgrounds for secondary actions.
+ * Outline button - Bordered with transparent background.
+ * Use for secondary actions that need clear boundaries.
  */
-export const OutlineLight = () => (
-	<DarkBackground>
-		<Button variant="outline" colorScheme="light">
-			Outline Light
-		</Button>
-	</DarkBackground>
-);
+export const Outline: Story = {
+	render: () => <Button variant="outline">Outline</Button>,
+};
 
 /**
- * Ghost Light
- * White text with no border or background.
- * Use for tertiary actions on dark backgrounds.
+ * Ghost button - Transparent with subtle hover.
+ * Use for tertiary actions or in toolbars.
  */
-export const GhostLight = () => (
-	<DarkBackground>
-		<Button variant="ghost" colorScheme="light">
-			Ghost Light
-		</Button>
-	</DarkBackground>
-);
+export const Ghost: Story = {
+	render: () => <Button variant="ghost">Ghost</Button>,
+};
 
 /**
- * Subtle Light
- * Alpha-white border with white text.
- * Use for less prominent actions on dark backgrounds.
+ * Link button - Text only with underline on hover.
+ * Use for navigation or inline actions.
  */
-export const SubtleLight = () => (
-	<DarkBackground>
-		<Button variant="subtle" colorScheme="light">
-			Subtle Light
-		</Button>
-	</DarkBackground>
-);
+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>
+	),
+};