feat: adds simple icons to button stories

package.json

@@ -35,5 +35,8 @@
     "storybook-addon-pseudo-states": "4.0.2",
     "typescript": "^5.4.5",
     "typescript-eslint": "^8.0.0-alpha.16"
+  },
+  "dependencies": {
+    "lucide": "0.469.0"
   }
 }

packages/documentation/src/elements/button/button-story-helpers.ts

@@ -1,5 +1,6 @@
 import type { ArgTypes } from "@storybook/web-components";
 import { html } from "lit";
+import { ArrowRight, Check, createIcons } from "lucide";
 
 type ButtonSize = "default" | "small";
 type ButtonVariant = "primary" | "secondary" | "tertiary" | "destructive";
@@ -46,32 +47,42 @@ export const renderButtons = (args: ButtonArgs, colorScheme: ColorScheme) =>
       ...args,
       size: "default",
       label: "Default",
-      icon: "[Icon]",
+      icon: "check",
     })}
     ${renderButton({
       ...args,
       size: "default",
       label: "Default",
-      icon: "[Icon]",
+      icon: "arrow-right",
       iconPosition: "right",
     })}
     ${renderButton({ ...args, size: "small", label: "Small" })}
     ${renderButton({
       ...args,
       size: "small",
       label: "Small",
-      icon: "[Icon]",
+      icon: "check",
     })}
     ${renderButton({
       ...args,
       size: "small",
       label: "Small",
-      icon: "[Icon]",
+      icon: "arrow-right",
       iconPosition: "right",
     })}
   </div> `;
 
 const renderButton = (args: ButtonArgs) => {
+  createIcons({
+    icons: {
+      Check,
+      ArrowRight,
+    },
+    attrs: {
+      // TODO: make icons as high as line-height
+    },
+  });
+
   return html`
     <button
       class="hap-button ${args.variant} ${args.size} ${args.disabled
@@ -80,11 +91,11 @@ const renderButton = (args: ButtonArgs) => {
       ?disabled=${args.disabled}
     >
       ${args.icon && args.iconPosition === "left"
-        ? html`<span class="icon">${args.icon}</span>`
+        ? html`<i data-lucide=${args.icon}></i>`
         : ""}
       ${args.label}
       ${args.icon && args.iconPosition === "right"
-        ? html`<span class="icon">${args.icon}</span>`
+        ? html`<i data-lucide=${args.icon}></i>`
         : ""}
     </button>
   `;

packages/foundation/src/elements/button.css

@@ -9,11 +9,15 @@
   padding: var(--hap-spacing-sm) var(--hap-spacing-md);
   cursor: pointer;
   width: max-content;
+  display: flex;
+  gap: var(--hap-spacing-sm);
+  align-items: center;
 
   &.small {
     padding: var(--hap-spacing-xs) var(--hap-spacing-sm);
     font-size: var(--hap-typography-font-size-bodytext-s);
     line-height: var(--hap-typography-line-height-bodytext-s-singleline);
+    gap: var(--hap-spacing-xs);
   }
 
   &:disabled {