@getmicdrop/svelte-components 5.10.3 → 5.12.0

package/dist/primitives/Breadcrumb/Breadcrumb.spec.js

@@ -1,122 +1,123 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import Breadcrumb from "./Breadcrumb.svelte";
-
-const sampleData = [
-  { name: "Home", href: "/", icon: "/icon-home.svg" },
-  { name: "Profile", href: "/profile" },
-  { name: "Settings", href: "/settings" },
-];
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const { component } = render(Breadcrumb, {
-    props: {
-      data: sampleData,
-      ...args,
-    },
-  });
-  return { user, component };
-}
-
-describe("Breadcrumb Component Tests", () => {
-  test("Renders nothing when data is empty", () => {
-    render(Breadcrumb, { props: { data: [] } });
-    const nav = document.querySelector("nav");
-    expect(nav).not.toBeInTheDocument();
-  });
-
-  test("Renders nav element when data is provided", () => {
-    setupTest();
-    const nav = document.querySelector("nav");
-    expect(nav).toBeInTheDocument();
-  });
-
-  test("Renders all breadcrumb items", () => {
-    setupTest();
-    expect(screen.getByText("Home")).toBeInTheDocument();
-    expect(screen.getByText("Profile")).toBeInTheDocument();
-    expect(screen.getByText("Settings")).toBeInTheDocument();
-  });
-
-  test("First item shows icon", () => {
-    setupTest();
-    // First item has an icon (HomeSolid SVG)
-    const icons = document.querySelectorAll("svg");
-    // Should have at least the home icon plus separator arrows
-    expect(icons.length).toBeGreaterThan(0);
-  });
-
-  test("Shows separator arrows between items", () => {
-    setupTest();
-    // Arrows appear between items (n-1 arrows for n items)
-    const svgs = document.querySelectorAll("svg");
-    // 1 home icon + 2 chevron arrows = 3 SVGs minimum
-    expect(svgs.length).toBeGreaterThanOrEqual(3);
-  });
-
-  test("Last item is not a link", () => {
-    setupTest();
-    const lastItem = screen.getByText("Settings");
-    // Last item should be a span, not inside an anchor
-    expect(lastItem.closest("a")).toBeNull();
-  });
-
-  test("Non-last items are clickable links", () => {
-    setupTest();
-    const homeLink = screen.getByText("Home").closest("a");
-    const profileLink = screen.getByText("Profile").closest("a");
-
-    expect(homeLink).toBeInTheDocument();
-    expect(homeLink).toHaveAttribute("href", "/");
-    expect(profileLink).toBeInTheDocument();
-    expect(profileLink).toHaveAttribute("href", "/profile");
-  });
-
-  test("Dispatches click event when clicking breadcrumb", async () => {
-    const clickSpy = vi.fn();
-    const { user } = setupTest({ onclick: clickSpy });
-
-    const homeLink = screen.getByText("Home").closest("a");
-    await user.click(homeLink);
-
-    expect(clickSpy).toHaveBeenCalled();
-    expect(clickSpy).toHaveBeenCalledWith(sampleData[0]);
-  });
-
-  test("Last item has tertiary text color", () => {
-    setupTest();
-    const lastItem = screen.getByText("Settings");
-    expect(lastItem).toHaveClass("text-gray-500");
-  });
-
-  test("Last item has default cursor", () => {
-    setupTest();
-    const lastItem = screen.getByText("Settings");
-    // Last item is a span, not a link, so it should not be clickable
-    expect(lastItem.tagName).toBe("SPAN");
-  });
-
-  test("Clickable items have pointer cursor", () => {
-    setupTest();
-    const homeLink = screen.getByText("Home").closest("a");
-    // Links are clickable elements
-    expect(homeLink).toBeInTheDocument();
-    expect(homeLink.tagName).toBe("A");
-  });
-
-  test("Has responsive text sizing", () => {
-    setupTest();
-    const nav = document.querySelector("nav");
-    expect(nav).toHaveClass("text-sm");
-  });
-
-  test("Renders with single item", () => {
-    render(Breadcrumb, { props: { data: [{ name: "Single", href: "/" }] } });
-    expect(screen.getByText("Single")).toBeInTheDocument();
-    // Single item is both first and last, component renders it as span (last item)
-    const item = screen.getByText("Single");
-    expect(item.tagName).toBe("SPAN");
-  });
-});
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import Breadcrumb from "./Breadcrumb.svelte";
+
+const sampleData = [
+  { name: "Home", href: "/", icon: "/icon-home.svg" },
+  { name: "Profile", href: "/profile" },
+  { name: "Settings", href: "/settings" },
+];
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component } = render(Breadcrumb, {
+    props: {
+      data: sampleData,
+      ...args,
+    },
+  });
+  return { user, component };
+}
+
+describe("Breadcrumb Component Tests", () => {
+  test("Renders nothing when data is empty", () => {
+    render(Breadcrumb, { props: { data: [] } });
+    const nav = document.querySelector("nav");
+    expect(nav).not.toBeInTheDocument();
+  });
+
+  test("Renders nav element when data is provided", () => {
+    setupTest();
+    const nav = document.querySelector("nav");
+    expect(nav).toBeInTheDocument();
+  });
+
+  test("Renders all breadcrumb items", () => {
+    setupTest();
+    expect(screen.getByText("Home")).toBeInTheDocument();
+    expect(screen.getByText("Profile")).toBeInTheDocument();
+    expect(screen.getByText("Settings")).toBeInTheDocument();
+  });
+
+  test("First item shows icon", () => {
+    setupTest();
+    // First item has an icon (HomeSolid SVG)
+    const icons = document.querySelectorAll("svg");
+    // Should have at least the home icon plus separator arrows
+    expect(icons.length).toBeGreaterThan(0);
+  });
+
+  test("Shows separator characters between items", () => {
+    setupTest();
+    // Separators appear between items (n-1 separators for n items)
+    // We use text character "›" instead of SVG arrows for consistent spacing
+    const separators = document.querySelectorAll("span.text-gray-400");
+    // 3 items means 2 separators
+    expect(separators.length).toBe(2);
+  });
+
+  test("Last item is not a link", () => {
+    setupTest();
+    const lastItem = screen.getByText("Settings");
+    // Last item should be a span, not inside an anchor
+    expect(lastItem.closest("a")).toBeNull();
+  });
+
+  test("Non-last items are clickable links", () => {
+    setupTest();
+    const homeLink = screen.getByText("Home").closest("a");
+    const profileLink = screen.getByText("Profile").closest("a");
+
+    expect(homeLink).toBeInTheDocument();
+    expect(homeLink).toHaveAttribute("href", "/");
+    expect(profileLink).toBeInTheDocument();
+    expect(profileLink).toHaveAttribute("href", "/profile");
+  });
+
+  test("Dispatches click event when clicking breadcrumb", async () => {
+    const clickSpy = vi.fn();
+    const { user } = setupTest({ onclick: clickSpy });
+
+    const homeLink = screen.getByText("Home").closest("a");
+    await user.click(homeLink);
+
+    expect(clickSpy).toHaveBeenCalled();
+    expect(clickSpy).toHaveBeenCalledWith(sampleData[0]);
+  });
+
+  test("Last item has tertiary text color", () => {
+    setupTest();
+    const lastItem = screen.getByText("Settings");
+    expect(lastItem).toHaveClass("text-gray-500");
+  });
+
+  test("Last item has default cursor", () => {
+    setupTest();
+    const lastItem = screen.getByText("Settings");
+    // Last item is a span, not a link, so it should not be clickable
+    expect(lastItem.tagName).toBe("SPAN");
+  });
+
+  test("Clickable items have pointer cursor", () => {
+    setupTest();
+    const homeLink = screen.getByText("Home").closest("a");
+    // Links are clickable elements
+    expect(homeLink).toBeInTheDocument();
+    expect(homeLink.tagName).toBe("A");
+  });
+
+  test("Has responsive text sizing", () => {
+    setupTest();
+    const nav = document.querySelector("nav");
+    expect(nav).toHaveClass("text-sm");
+  });
+
+  test("Renders with single item", () => {
+    render(Breadcrumb, { props: { data: [{ name: "Single", href: "/" }] } });
+    expect(screen.getByText("Single")).toBeInTheDocument();
+    // Single item is both first and last, component renders it as span (last item)
+    const item = screen.getByText("Single");
+    expect(item.tagName).toBe("SPAN");
+  });
+});

package/dist/primitives/Breadcrumb/Breadcrumb.stories.svelte

@@ -1,23 +1,23 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-    import Breadcrumb from "./Breadcrumb.svelte";
-
-  const { Story } = defineMeta({
-    title: "Components/Breadcrumb",
-    component: Breadcrumb,
-    argTypes: {
-      data: { control: "object" },
-    },
-  });
-
-  const sampleData = [
-    { name: "Home", href: "/" },
-    { name: "Category", href: "/category" },
-    { name: "Current Page", href: "/category/current" },
-  ];
-
-</script>
-
-
-<Story name="Default Breadcrumb" args={{ data: sampleData }} />
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+    import Breadcrumb from "./Breadcrumb.svelte";
+
+  const { Story } = defineMeta({
+    title: "Components/Breadcrumb",
+    component: Breadcrumb,
+    argTypes: {
+      data: { control: "object" },
+    },
+  });
+
+  const sampleData = [
+    { name: "Home", href: "/" },
+    { name: "Category", href: "/category" },
+    { name: "Current Page", href: "/category/current" },
+  ];
+
+</script>
+
+
+<Story name="Default Breadcrumb" args={{ data: sampleData }} />

package/dist/primitives/Breadcrumb/Breadcrumb.svelte

@@ -1,98 +1,99 @@
-<script lang="ts">
-  import { ChevronRightOutline, HomeSolid } from "../Icons";
-  import { typography } from "../../tokens/typography";
-
-  interface BreadcrumbItem {
-    name: string;
-    href: string;
-  }
-
-  interface Props {
-    /** Breadcrumb items array */
-    data?: BreadcrumbItem[];
-    /** Additional CSS classes */
-    className?: string;
-    /** Show built-in home icon for first item */
-    showHomeIcon?: boolean;
-    /** Page title displayed below breadcrumb */
-    title?: string;
-    /** Subtitle displayed below title */
-    subtitle?: string;
-    /** Click handler callback */
-    onclick?: (crumb: BreadcrumbItem) => void;
-  }
-
-  let {
-    data = [],
-    className = '',
-    showHomeIcon = true,
-    title = '',
-    subtitle = '',
-    onclick
-  }: Props = $props();
-
-  function handleClick(crumb: BreadcrumbItem) {
-    onclick?.(crumb);
-  }
-</script>
-
-<div class="flex flex-col items-start gap-2 min-w-0">
-  {#if data.length > 0}
-    <nav class={`flex items-center ${typography.smMuted} font-medium ${className}`} aria-label="Breadcrumb">
-      <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse flex-wrap">
-        {#each data as crumb, index}
-          <li class="inline-flex items-center">
-            {#if index > 0}
-              <ChevronRightOutline class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" />
-            {/if}
-            {#if index === 0 && showHomeIcon && data.length === 1}
-              <!-- Single item with home icon - show as non-clickable label -->
-              <span class="{typography.smMuted} inline-flex items-center font-medium">
-                <HomeSolid class="w-3 h-3 me-2.5" />
-                {crumb.name}
-              </span>
-            {:else if index === 0 && showHomeIcon}
-              <!-- First item with home icon - clickable link -->
-              <a
-                href={crumb.href}
-                onclick={() => handleClick(crumb)}
-                class="{typography.smMuted} inline-flex items-center font-medium hover:text-blue-600 dark:hover:text-white"
-              >
-                <HomeSolid class="w-3 h-3 me-2.5" />
-                {crumb.name}
-              </a>
-            {:else if index === data.length - 1}
-              <!-- Last item - non-clickable -->
-              <span class={`ms-1 ${typography.smMuted} font-medium md:ms-2 max-w-48 truncate`} title={crumb.name}>
-                {crumb.name}
-              </span>
-            {:else}
-              <!-- Middle items - clickable links -->
-              <a
-                href={crumb.href}
-                onclick={() => handleClick(crumb)}
-                class="{typography.smMuted} ms-1 font-medium hover:text-blue-600 md:ms-2 dark:hover:text-white max-w-48 truncate"
-                title={crumb.name}
-              >
-                {crumb.name}
-              </a>
-            {/if}
-          </li>
-        {/each}
-      </ol>
-    </nav>
-  {/if}
-
-  {#if title || subtitle}
-    <div class="flex flex-col gap-1">
-      {#if title}
-        <h1 class="text-3xl font-semibold text-gray-900 dark:text-white truncate" title={title}>
-          {title}
-        </h1>
-      {/if}
-      {#if subtitle}
-        <p class={typography.smMuted}>{subtitle}</p>
-      {/if}
-    </div>
-  {/if}
-</div>
+<script lang="ts">
+  import { ChevronRightOutline, HomeSolid } from "../Icons";
+  import { typography } from "../../tokens/typography";
+
+  interface BreadcrumbItem {
+    name: string;
+    href: string;
+  }
+
+  interface Props {
+    /** Breadcrumb items array */
+    data?: BreadcrumbItem[];
+    /** Additional CSS classes */
+    className?: string;
+    /** Show built-in home icon for first item */
+    showHomeIcon?: boolean;
+    /** Page title displayed below breadcrumb */
+    title?: string;
+    /** Subtitle displayed below title */
+    subtitle?: string;
+    /** Click handler callback */
+    onclick?: (crumb: BreadcrumbItem) => void;
+  }
+
+  let {
+    data = [],
+    className = '',
+    showHomeIcon = true,
+    title = '',
+    subtitle = '',
+    onclick,
+  }: Props = $props();
+
+  function handleClick(crumb: BreadcrumbItem) {
+    onclick?.(crumb);
+  }
+</script>
+
+<div class="flex flex-col items-start gap-2 min-w-0">
+  {#if data.length > 0}
+    <nav class={`flex items-center ${typography.smMuted} font-medium ${className}`} aria-label="Breadcrumb">
+      <ol class="inline-flex items-center rtl:space-x-reverse flex-wrap">
+        {#each data as crumb, index}
+          <li class="inline-flex items-center">
+            {#if index > 0}
+              <span class="text-gray-400" style="margin: 0 6px;">›</span>
+            {/if}
+            {#if index === 0 && showHomeIcon && data.length === 1}
+              <!-- Single item with home icon - show as non-clickable label -->
+              <span class="{typography.smMuted} inline-flex items-center font-medium" style="gap: 6px;">
+                <HomeSolid class="w-3 h-3" />
+                {crumb.name}
+              </span>
+            {:else if index === 0 && showHomeIcon}
+              <!-- First item with home icon - clickable link -->
+              <a
+                href={crumb.href}
+                onclick={() => handleClick(crumb)}
+                class="{typography.smMuted} inline-flex items-center font-medium hover:text-blue-600 dark:hover:text-white"
+                style="gap: 6px;"
+              >
+                <HomeSolid class="w-3 h-3" />
+                {crumb.name}
+              </a>
+            {:else if index === data.length - 1}
+              <!-- Last item - non-clickable -->
+              <span class={`${typography.smMuted} font-medium max-w-48 truncate`} title={crumb.name}>
+                {crumb.name}
+              </span>
+            {:else}
+              <!-- Middle items - clickable links -->
+              <a
+                href={crumb.href}
+                onclick={() => handleClick(crumb)}
+                class="{typography.smMuted} font-medium hover:text-blue-600 dark:hover:text-white max-w-48 truncate"
+                title={crumb.name}
+              >
+                {crumb.name}
+              </a>
+            {/if}
+          </li>
+        {/each}
+      </ol>
+    </nav>
+  {/if}
+
+  {#if title || subtitle}
+    <div class="flex flex-col gap-1">
+      {#if title}
+        <h1 class="text-3xl font-semibold text-gray-900 dark:text-white truncate" title={title}>
+          {title}
+        </h1>
+      {/if}
+      {#if subtitle}
+        <p class={typography.smMuted}>{subtitle}</p>
+      {/if}
+    </div>
+  {/if}
+</div>