@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/primitives/Icons/Icon.spec.js

@@ -1,175 +1,175 @@
-import { render, screen } from "@testing-library/svelte";
-import { expect, describe, test } from "vitest";
-import Icon from "./Icon.svelte";
-
-describe("Icon Component Tests", () => {
-  test("Renders Home icon", () => {
-    const { container } = render(Icon, { props: { name: "Home" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Shows icon", () => {
-    const { container } = render(Icon, { props: { name: "Shows" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Availability icon", () => {
-    const { container } = render(Icon, { props: { name: "Availability" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Profile icon", () => {
-    const { container } = render(Icon, { props: { name: "Profile" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Payment icon", () => {
-    const { container } = render(Icon, { props: { name: "Payment" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Notification icon", () => {
-    const { container } = render(Icon, { props: { name: "Notification" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Signout icon", () => {
-    const { container } = render(Icon, { props: { name: "Signout" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ChevronLeft icon", () => {
-    const { container } = render(Icon, { props: { name: "ChevronLeft" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ChevronRight icon", () => {
-    const { container } = render(Icon, { props: { name: "ChevronRight" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders CheckCircle icon", () => {
-    const { container } = render(Icon, { props: { name: "CheckCircle" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ErrorCircle icon", () => {
-    const { container } = render(Icon, { props: { name: "ErrorCircle" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ArrowLeft icon", () => {
-    const { container } = render(Icon, { props: { name: "ArrowLeft" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Back icon", () => {
-    const { container } = render(Icon, { props: { name: "Back" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Shows error message for unknown icon", () => {
-    render(Icon, { props: { name: "UnknownIcon" } });
-    expect(screen.getByText('Icon "UnknownIcon" not found.')).toBeInTheDocument();
-  });
-
-  test("Default size is 24", () => {
-    const { container } = render(Icon, { props: { name: "Home" } });
-    const svg = container.querySelector("svg");
-    // Check width or height attribute
-    expect(svg).toHaveAttribute("width", "24");
-  });
-
-  test("Accepts custom size prop", () => {
-    const { container } = render(Icon, { props: { name: "Home", size: "32" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveAttribute("width", "32");
-  });
-
-  test("Default color is currentColor", () => {
-    const { container } = render(Icon, { props: { name: "Home" } });
-    const svg = container.querySelector("svg");
-    // Color is typically applied to stroke or fill
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Accepts custom color prop", () => {
-    const { container } = render(Icon, { props: { name: "Home", color: "red" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders More icon", () => {
-    const { container } = render(Icon, { props: { name: "More" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Info icon", () => {
-    const { container } = render(Icon, { props: { name: "Info" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Message icon", () => {
-    const { container } = render(Icon, { props: { name: "Message" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Reload icon", () => {
-    const { container } = render(Icon, { props: { name: "Reload" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Copy icon", () => {
-    const { container } = render(Icon, { props: { name: "Copy" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Cross icon", () => {
-    const { container } = render(Icon, { props: { name: "Cross" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ArrowRight icon", () => {
-    const { container } = render(Icon, { props: { name: "ArrowRight" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders DownArrow icon", () => {
-    const { container } = render(Icon, { props: { name: "DownArrow" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders MoreHori icon", () => {
-    const { container } = render(Icon, { props: { name: "MoreHori" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders CheckCircleOutline icon", () => {
-    const { container } = render(Icon, { props: { name: "CheckCircleOutline" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-});
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import Icon from "./Icon.svelte";
+
+describe("Icon Component Tests", () => {
+  test("Renders Home icon", () => {
+    const { container } = render(Icon, { props: { name: "Home" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Shows icon", () => {
+    const { container } = render(Icon, { props: { name: "Shows" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Availability icon", () => {
+    const { container } = render(Icon, { props: { name: "Availability" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Profile icon", () => {
+    const { container } = render(Icon, { props: { name: "Profile" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Payment icon", () => {
+    const { container } = render(Icon, { props: { name: "Payment" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Notification icon", () => {
+    const { container } = render(Icon, { props: { name: "Notification" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Signout icon", () => {
+    const { container } = render(Icon, { props: { name: "Signout" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ChevronLeft icon", () => {
+    const { container } = render(Icon, { props: { name: "ChevronLeft" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ChevronRight icon", () => {
+    const { container } = render(Icon, { props: { name: "ChevronRight" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders CheckCircle icon", () => {
+    const { container } = render(Icon, { props: { name: "CheckCircle" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ErrorCircle icon", () => {
+    const { container } = render(Icon, { props: { name: "ErrorCircle" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ArrowLeft icon", () => {
+    const { container } = render(Icon, { props: { name: "ArrowLeft" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Back icon", () => {
+    const { container } = render(Icon, { props: { name: "Back" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Shows error message for unknown icon", () => {
+    render(Icon, { props: { name: "UnknownIcon" } });
+    expect(screen.getByText('Icon "UnknownIcon" not found.')).toBeInTheDocument();
+  });
+
+  test("Default size is 24", () => {
+    const { container } = render(Icon, { props: { name: "Home" } });
+    const svg = container.querySelector("svg");
+    // Check width or height attribute
+    expect(svg).toHaveAttribute("width", "24");
+  });
+
+  test("Accepts custom size prop", () => {
+    const { container } = render(Icon, { props: { name: "Home", size: "32" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveAttribute("width", "32");
+  });
+
+  test("Default color is currentColor", () => {
+    const { container } = render(Icon, { props: { name: "Home" } });
+    const svg = container.querySelector("svg");
+    // Color is typically applied to stroke or fill
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Accepts custom color prop", () => {
+    const { container } = render(Icon, { props: { name: "Home", color: "red" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders More icon", () => {
+    const { container } = render(Icon, { props: { name: "More" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Info icon", () => {
+    const { container } = render(Icon, { props: { name: "Info" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Message icon", () => {
+    const { container } = render(Icon, { props: { name: "Message" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Reload icon", () => {
+    const { container } = render(Icon, { props: { name: "Reload" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Copy icon", () => {
+    const { container } = render(Icon, { props: { name: "Copy" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Cross icon", () => {
+    const { container } = render(Icon, { props: { name: "Cross" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ArrowRight icon", () => {
+    const { container } = render(Icon, { props: { name: "ArrowRight" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders DownArrow icon", () => {
+    const { container } = render(Icon, { props: { name: "DownArrow" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders MoreHori icon", () => {
+    const { container } = render(Icon, { props: { name: "MoreHori" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders CheckCircleOutline icon", () => {
+    const { container } = render(Icon, { props: { name: "CheckCircleOutline" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+});

package/dist/primitives/Icons/Icon.stories.svelte

@@ -1,100 +1,100 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-    import Icon from "./Icon.svelte";
-
-  const { Story } = defineMeta({
-    title: "Components/Icons",
-    component: Icon,
-    argTypes: {
-      name: { control: "text" },
-      size: { control: "text" },
-      color: { control: "color" },
-    },
-  });
-
-  const iconNames = [
-    "Home",
-    "Shows",
-    "Availability",
-    "Profile",
-    "Payment",
-    "Notification",
-    "Signout",
-    "More",
-    "MoreHori",
-    "Info",
-    "ChevronLeft",
-    "ChevronRight",
-    "CheckCircle",
-    "CheckCircleOutline",
-    "ErrorCircle",
-    "ArrowLeft",
-    "ArrowRight",
-    "Back",
-    "DownArrow",
-    "Message",
-    "Reload",
-    "Copy",
-    "Cross",
-  ];
-
-</script>
-
-
-<Story name="All Icons">
-  <div class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-6 p-4">
-    {#each iconNames as iconName}
-      <div class="flex flex-col items-center gap-2 p-3 border rounded-lg hover:bg-gray-50 dark:bg-gray-800">
-        <Icon name={iconName} size="24" />
-        <span class="text-xs text-gray-500 dark:text-gray-400 text-center">{iconName}</span>
-      </div>
-    {/each}
-  </div>
-</Story>
-
-<Story name="Icon Sizes">
-  <div class="flex items-end gap-6 p-4">
-    <div class="flex flex-col items-center gap-2">
-      <Icon name="Home" size="16" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">16px</span>
-    </div>
-    <div class="flex flex-col items-center gap-2">
-      <Icon name="Home" size="20" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">20px</span>
-    </div>
-    <div class="flex flex-col items-center gap-2">
-      <Icon name="Home" size="24" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">24px</span>
-    </div>
-    <div class="flex flex-col items-center gap-2">
-      <Icon name="Home" size="32" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">32px</span>
-    </div>
-    <div class="flex flex-col items-center gap-2">
-      <Icon name="Home" size="48" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">48px</span>
-    </div>
-  </div>
-</Story>
-
-<Story name="Icon Colors">
-  <div class="flex items-center gap-6 p-4">
-    <div class="flex flex-col items-center gap-2">
-      <Icon name="CheckCircle" size="32" color="#22c55e" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">Success</span>
-    </div>
-    <div class="flex flex-col items-center gap-2">
-      <Icon name="ErrorCircle" size="32" color="#ef4444" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">Error</span>
-    </div>
-    <div class="flex flex-col items-center gap-2">
-      <Icon name="Info" size="32" color="#3b82f6" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">Info</span>
-    </div>
-    <div class="flex flex-col items-center gap-2">
-      <Icon name="Notification" size="32" color="#f59e0b" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">Warning</span>
-    </div>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+    import Icon from "./Icon.svelte";
+
+  const { Story } = defineMeta({
+    title: "Components/Icons",
+    component: Icon,
+    argTypes: {
+      name: { control: "text" },
+      size: { control: "text" },
+      color: { control: "color" },
+    },
+  });
+
+  const iconNames = [
+    "Home",
+    "Shows",
+    "Availability",
+    "Profile",
+    "Payment",
+    "Notification",
+    "Signout",
+    "More",
+    "MoreHori",
+    "Info",
+    "ChevronLeft",
+    "ChevronRight",
+    "CheckCircle",
+    "CheckCircleOutline",
+    "ErrorCircle",
+    "ArrowLeft",
+    "ArrowRight",
+    "Back",
+    "DownArrow",
+    "Message",
+    "Reload",
+    "Copy",
+    "Cross",
+  ];
+
+</script>
+
+
+<Story name="All Icons">
+  <div class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-6 p-4">
+    {#each iconNames as iconName}
+      <div class="flex flex-col items-center gap-2 p-3 border rounded-lg hover:bg-bg-secondary">
+        <Icon name={iconName} size="24" />
+        <span class="text-xs text-muted-foreground text-center">{iconName}</span>
+      </div>
+    {/each}
+  </div>
+</Story>
+
+<Story name="Icon Sizes">
+  <div class="flex items-end gap-6 p-4">
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Home" size="16" />
+      <span class="text-xs text-muted-foreground">16px</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Home" size="20" />
+      <span class="text-xs text-muted-foreground">20px</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Home" size="24" />
+      <span class="text-xs text-muted-foreground">24px</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Home" size="32" />
+      <span class="text-xs text-muted-foreground">32px</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Home" size="48" />
+      <span class="text-xs text-muted-foreground">48px</span>
+    </div>
+  </div>
+</Story>
+
+<Story name="Icon Colors">
+  <div class="flex items-center gap-6 p-4">
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="CheckCircle" size="32" color="hsl(var(--accent-success))" />
+      <span class="text-xs text-muted-foreground">Success</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="ErrorCircle" size="32" color="hsl(var(--accent-danger))" />
+      <span class="text-xs text-muted-foreground">Error</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Info" size="32" color="hsl(var(--brand-primary))" />
+      <span class="text-xs text-muted-foreground">Info</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Notification" size="32" color="hsl(var(--accent-warning))" />
+      <span class="text-xs text-muted-foreground">Warning</span>
+    </div>
+  </div>
+</Story>