From eb4bec96584d0ca2edc01c85f3be2a4b3c0669bb Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 30 Jul 2026 12:59:11 +0200
Subject: [PATCH] web/components: add icon stories to Button

the icon prop had no coverage, so nothing showed the gap, the icon's size step
at lg, or how a pressed icon sinks with its label. adds left, right, icon-only,
per-size and inset-shadow icon stories, plus an iconSide control.

Signed-off-by: eti <eti@eti.tf>
---
 .../lib/components/ui/Button.stories.svelte   | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/web/src/lib/components/ui/Button.stories.svelte b/web/src/lib/components/ui/Button.stories.svelte
index ad59fb40..0e0e224e 100644
--- a/web/src/lib/components/ui/Button.stories.svelte
+++ b/web/src/lib/components/ui/Button.stories.svelte
@@ -1,5 +1,8 @@
 <script module lang="ts">
 	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import ChevronRight from "$icon/chevron-right";
+	import GitFork from "$icon/git-fork";
+	import Star from "$icon/star";
 	import Button from "./Button.svelte";
 
 	const { Story } = defineMeta({
@@ -15,6 +18,10 @@
 				control: { type: "inline-radio" },
 				options: ["sm", "md", "lg"]
 			},
+			iconSide: {
+				control: { type: "inline-radio" },
+				options: ["left", "right"]
+			},
 			insetShadow: { control: "boolean" },
 			disabled: { control: "boolean" },
 			loading: { control: "boolean" }
@@ -22,6 +29,7 @@
 		args: {
 			variant: "default",
 			size: "md",
+			iconSide: "left",
 			insetShadow: false,
 			disabled: false,
 			loading: false
@@ -54,3 +62,26 @@
 		<Button size="lg">Large</Button>
 	</div>
 </Story>
+
+<Story name="With icon" args={{ icon: Star }}>Star</Story>
+<Story name="Icon right" args={{ icon: ChevronRight, iconSide: "right" }}>Next</Story>
+<Story name="Icon only" args={{ icon: Star, "aria-label": "Star" }} />
+
+<!-- the icon rides the same gap and scales with the size variant: size-4 up to lg, size-5 at lg. -->
+<Story name="Icon sizes" asChild>
+	<div class="flex items-center gap-3">
+		<Button size="sm" icon={Star}>Small</Button>
+		<Button size="md" icon={Star}>Medium</Button>
+		<Button size="lg" icon={Star}>Large</Button>
+	</div>
+</Story>
+
+<!-- press these: the icon and label sink together while the button box stays put. -->
+<Story name="Icons with inset shadow" asChild>
+	<div class="flex items-center gap-3">
+		<Button insetShadow icon={Star}>Star</Button>
+		<Button variant="primary" insetShadow icon={GitFork}>Fork</Button>
+		<Button insetShadow icon={ChevronRight} iconSide="right">Next</Button>
+		<Button insetShadow icon={Star} aria-label="Star" />
+	</div>
+</Story>
-- 
2.51.2