feat: adds support for lucide icons

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

@@ -1,6 +1,5 @@
 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";
@@ -72,31 +71,19 @@ export const renderButtons = (args: ButtonArgs, colorScheme: ColorScheme) =>
     })}
   </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
-        ? "disabled"
-        : ""}"
-      ?disabled=${args.disabled}
-    >
-      ${args.icon && args.iconPosition === "left"
-        ? html`<i data-lucide=${args.icon}></i>`
-        : ""}
-      ${args.label}
-      ${args.icon && args.iconPosition === "right"
-        ? html`<i data-lucide=${args.icon}></i>`
-        : ""}
-    </button>
-  `;
-};
+const renderButton = (args: ButtonArgs) => html`
+  <button
+    class="hap-button ${args.variant} ${args.size} ${args.disabled
+      ? "disabled"
+      : ""}"
+    ?disabled=${args.disabled}
+  >
+    ${args.icon && args.iconPosition === "left"
+      ? html`<i data-lucide=${args.icon}></i>`
+      : ""}
+    ${args.label}
+    ${args.icon && args.iconPosition === "right"
+      ? html`<i data-lucide=${args.icon}></i>`
+      : ""}
+  </button>
+`;

packages/documentation/src/elements/button/button.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
 import { html } from "lit";
+import { ArrowRight, Check, createIcons } from "lucide";
 import {
   buttonArgs,
   buttonArgTypes,
@@ -14,6 +15,17 @@ const meta: Meta<ButtonArgs> = {
     html`<div style="display:flex;gap:1rem">
       ${renderButtons(args, "light")}${renderButtons(args, "dark")}
     </div>`,
+
+  play: () =>
+    createIcons({
+      icons: {
+        Check,
+        ArrowRight,
+      },
+      attrs: {
+        "stroke-width": 1.5,
+      },
+    }),
 };
 
 export default meta;

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

@@ -0,0 +1,41 @@
+import type { ArgTypes } from "@storybook/web-components";
+import { html } from "lit";
+
+export const iconArgs = (
+  iconNames: string[],
+  size: string,
+  // default values for stroke according to design
+  strokeWidth = 1.5,
+  strokeOpacity = 0.8,
+): IconArgs => ({
+  iconNames,
+  size,
+  strokeWidth,
+  strokeOpacity,
+});
+
+export const iconArgTypes: Partial<ArgTypes<IconArgs>> = {
+  size: {
+    control: { type: "select" },
+    options: ["default", "small"],
+  },
+};
+
+export interface IconArgs {
+  iconNames: string[];
+  size: string;
+  strokeWidth: number;
+  strokeOpacity: number;
+}
+
+export const renderIcons = (args: IconArgs) => html`
+  ${args.iconNames.map((iconName) => html`<i data-lucide=${iconName}></i>`)}
+`;
+
+export const mapIconSizeToPx = (size: string): string => {
+  if (size === "small") {
+    return "16px";
+  }
+
+  return "24px";
+};

packages/documentation/src/elements/icon/icon.stories.ts

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+import { createIcons, icons } from "lucide";
+import {
+  iconArgs,
+  iconArgTypes,
+  mapIconSizeToPx,
+  renderIcons,
+  type IconArgs,
+} from "./icon-story-helpers.js";
+
+const iconList = [
+  "check",
+  "arrow-right",
+  "arrow-left",
+  "arrow-down",
+  "arrow-up",
+  "arrow-up-right",
+  "arrow-down-right",
+  "arrow-down-left",
+  "arrow-down-up",
+  "circle-x",
+  "chevron-down",
+  "chevron-up",
+  "chevron-left",
+  "chevron-right",
+  "plus",
+  "log-out",
+  "shopping-cart",
+  "user-round",
+  "clock",
+  "menu",
+  "search",
+  "eye",
+  "circle-alert",
+  "code",
+  "copy",
+  "circle-play",
+  "circle-help",
+  "settings",
+  "bell",
+  "building-2",
+  "file",
+  "calendar",
+  "trash-2",
+  "eye-off",
+  "sparkles",
+  "info",
+  "megaphone",
+  "circle-check",
+  "folder-open",
+  "mail",
+  "download",
+  "lock",
+];
+
+const meta: Meta<IconArgs> = {
+  argTypes: iconArgTypes,
+
+  render: (args) =>
+    // html`<div style="display:flex;gap:1rem; flex-wrap:wrap">
+    html`<div
+      style="display:grid;grid-template-columns: repeat(14, max-content);gap:40px"
+    >
+      ${renderIcons(args)}
+    </div>`,
+  play: (args) => {
+    createIcons({
+      icons,
+      attrs: {
+        "stroke-width": args.initialArgs.strokeWidth,
+        "stroke-opacity": args.initialArgs.strokeOpacity,
+        height: mapIconSizeToPx(args.initialArgs.size),
+        width: mapIconSizeToPx(args.initialArgs.size),
+        // TODO should stroke color be declared in CSS directly?
+        color: "#141419CC",
+      },
+    });
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<IconArgs>;
+
+export const IconsDefault: Story = { args: iconArgs(iconList, "default") };
+export const IconsSmall: Story = { args: iconArgs(iconList, "small") };

packages/foundation/src/elements/button.css

@@ -13,11 +13,21 @@
   gap: var(--hap-spacing-sm);
   align-items: center;
 
+  svg {
+    height: var(--hap-typography-line-height-bodytext-standard-singleline);
+    width: var(--hap-typography-line-height-bodytext-standard-singleline);
+  }
+
   &.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);
+
+    svg {
+      height: var(--hap-typography-line-height-bodytext-s-singleline);
+      width: var(--hap-typography-line-height-bodytext-s-singleline);
+    }
   }
 
   &:disabled {