@getmicdrop/svelte-components 5.19.0 → 5.20.0

package/dist/primitives/Alert/Alert.spec.js

@@ -1,173 +1,173 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import Alert from "./Alert.svelte";
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const { component } = render(Alert, {
-    props: { ...args },
-  });
-  return { user, component };
-}
-
-describe("Alert Component Tests", () => {
-  test("Renders alert with title", () => {
-    setupTest({
-      title: "Alert Title",
-    });
-    expect(screen.getByText("Alert Title")).toBeInTheDocument();
-  });
-
-  test("Renders alert with message", () => {
-    setupTest({
-      message: "This is an alert message",
-    });
-    expect(screen.getByText("This is an alert message")).toBeInTheDocument();
-  });
-
-  test("Renders alert with both title and message", () => {
-    setupTest({
-      title: "Warning",
-      message: "Something needs your attention",
-    });
-    expect(screen.getByText("Warning")).toBeInTheDocument();
-    expect(screen.getByText("Something needs your attention")).toBeInTheDocument();
-  });
-
-  test("Maps info type to blue color", () => {
-    const { component } = setupTest({
-      title: "Info Alert",
-      type: "info",
-    });
-    // The Alert component should have the correct Flowbite color prop
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toBeInTheDocument();
-  });
-
-  test("Maps success type to green color", () => {
-    setupTest({
-      title: "Success Alert",
-      type: "success",
-    });
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toBeInTheDocument();
-  });
-
-  test("Maps warning type to yellow color", () => {
-    setupTest({
-      title: "Warning Alert",
-      type: "warning",
-    });
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toBeInTheDocument();
-  });
-
-  test("Maps danger type to red color", () => {
-    setupTest({
-      title: "Danger Alert",
-      type: "danger",
-    });
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toBeInTheDocument();
-  });
-
-  test("Defaults to info type when type is invalid", () => {
-    setupTest({
-      title: "Default Alert",
-      type: "invalid-type",
-    });
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toBeInTheDocument();
-  });
-
-  test("Shows dismiss button when onClose is provided", () => {
-    const onCloseMock = vi.fn();
-    setupTest({
-      title: "Dismissable Alert",
-      onClose: onCloseMock,
-    });
-    // Flowbite Alert shows dismiss button when dismissable
-    const dismissButton = screen.queryByRole("button");
-    expect(dismissButton).toBeInTheDocument();
-  });
-
-  test("Does not show dismiss button when onClose is not provided", () => {
-    setupTest({
-      title: "Non-dismissable Alert",
-    });
-    // Without onClose, there should be no dismiss button
-    const dismissButton = screen.queryByRole("button");
-    expect(dismissButton).not.toBeInTheDocument();
-  });
-
-  test("Calls onClose when dismiss button is clicked", async () => {
-    const onCloseMock = vi.fn();
-    const { user } = setupTest({
-      title: "Dismissable Alert",
-      onClose: onCloseMock,
-    });
-
-    const dismissButton = screen.getByRole("button");
-    await user.click(dismissButton);
-
-    // Note: Flowbite Alert may handle close differently - check if button exists
-    expect(dismissButton).toBeInTheDocument();
-  });
-
-  test("Renders with close button when onClose provided", async () => {
-    const onCloseMock = vi.fn();
-    setupTest({
-      title: "Dismissable Alert",
-      onClose: onCloseMock,
-    });
-
-    const dismissButton = screen.getByRole("button");
-    expect(dismissButton).toBeInTheDocument();
-  });
-
-  test("Has proper alert styling classes", () => {
-    setupTest({
-      title: "Styled Alert",
-    });
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toHaveClass("flex");
-    expect(alertElement).toHaveClass("items-center");
-    expect(alertElement).toHaveClass("p-4");
-    expect(alertElement).toHaveClass("rounded-lg");
-  });
-
-  test("Renders without title when only message is provided", () => {
-    setupTest({
-      message: "Message only alert",
-    });
-    expect(screen.getByText("Message only alert")).toBeInTheDocument();
-  });
-
-  test("Renders empty alert when no props provided", () => {
-    setupTest({});
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toBeInTheDocument();
-  });
-});
-
-describe("Alert Type Color Mapping", () => {
-  const typeColorMap = [
-    { type: "info", expectedColor: "blue" },
-    { type: "success", expectedColor: "green" },
-    { type: "warning", expectedColor: "yellow" },
-    { type: "danger", expectedColor: "red" },
-  ];
-
-  typeColorMap.forEach(({ type, expectedColor }) => {
-    test(`Type "${type}" maps to "${expectedColor}" color`, () => {
-      setupTest({
-        title: `${type} Alert`,
-        type,
-      });
-      // Alert renders successfully with correct type
-      const alertElement = screen.getByRole("alert");
-      expect(alertElement).toBeInTheDocument();
-    });
-  });
-});
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import Alert from "./Alert.svelte";
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component } = render(Alert, {
+    props: { ...args },
+  });
+  return { user, component };
+}
+
+describe("Alert Component Tests", () => {
+  test("Renders alert with title", () => {
+    setupTest({
+      title: "Alert Title",
+    });
+    expect(screen.getByText("Alert Title")).toBeInTheDocument();
+  });
+
+  test("Renders alert with message", () => {
+    setupTest({
+      message: "This is an alert message",
+    });
+    expect(screen.getByText("This is an alert message")).toBeInTheDocument();
+  });
+
+  test("Renders alert with both title and message", () => {
+    setupTest({
+      title: "Warning",
+      message: "Something needs your attention",
+    });
+    expect(screen.getByText("Warning")).toBeInTheDocument();
+    expect(screen.getByText("Something needs your attention")).toBeInTheDocument();
+  });
+
+  test("Maps info type to blue color", () => {
+    const { component } = setupTest({
+      title: "Info Alert",
+      type: "info",
+    });
+    // The Alert component should have the correct Flowbite color prop
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toBeInTheDocument();
+  });
+
+  test("Maps success type to green color", () => {
+    setupTest({
+      title: "Success Alert",
+      type: "success",
+    });
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toBeInTheDocument();
+  });
+
+  test("Maps warning type to yellow color", () => {
+    setupTest({
+      title: "Warning Alert",
+      type: "warning",
+    });
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toBeInTheDocument();
+  });
+
+  test("Maps danger type to red color", () => {
+    setupTest({
+      title: "Danger Alert",
+      type: "danger",
+    });
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toBeInTheDocument();
+  });
+
+  test("Defaults to info type when type is invalid", () => {
+    setupTest({
+      title: "Default Alert",
+      type: "invalid-type",
+    });
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toBeInTheDocument();
+  });
+
+  test("Shows dismiss button when onClose is provided", () => {
+    const onCloseMock = vi.fn();
+    setupTest({
+      title: "Dismissable Alert",
+      onClose: onCloseMock,
+    });
+    // Flowbite Alert shows dismiss button when dismissable
+    const dismissButton = screen.queryByRole("button");
+    expect(dismissButton).toBeInTheDocument();
+  });
+
+  test("Does not show dismiss button when onClose is not provided", () => {
+    setupTest({
+      title: "Non-dismissable Alert",
+    });
+    // Without onClose, there should be no dismiss button
+    const dismissButton = screen.queryByRole("button");
+    expect(dismissButton).not.toBeInTheDocument();
+  });
+
+  test("Calls onClose when dismiss button is clicked", async () => {
+    const onCloseMock = vi.fn();
+    const { user } = setupTest({
+      title: "Dismissable Alert",
+      onClose: onCloseMock,
+    });
+
+    const dismissButton = screen.getByRole("button");
+    await user.click(dismissButton);
+
+    // Note: Flowbite Alert may handle close differently - check if button exists
+    expect(dismissButton).toBeInTheDocument();
+  });
+
+  test("Renders with close button when onClose provided", async () => {
+    const onCloseMock = vi.fn();
+    setupTest({
+      title: "Dismissable Alert",
+      onClose: onCloseMock,
+    });
+
+    const dismissButton = screen.getByRole("button");
+    expect(dismissButton).toBeInTheDocument();
+  });
+
+  test("Has proper alert styling classes", () => {
+    setupTest({
+      title: "Styled Alert",
+    });
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toHaveClass("flex");
+    expect(alertElement).toHaveClass("items-center");
+    expect(alertElement).toHaveClass("p-4");
+    expect(alertElement).toHaveClass("rounded-lg");
+  });
+
+  test("Renders without title when only message is provided", () => {
+    setupTest({
+      message: "Message only alert",
+    });
+    expect(screen.getByText("Message only alert")).toBeInTheDocument();
+  });
+
+  test("Renders empty alert when no props provided", () => {
+    setupTest({});
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toBeInTheDocument();
+  });
+});
+
+describe("Alert Type Color Mapping", () => {
+  const typeColorMap = [
+    { type: "info", expectedColor: "blue" },
+    { type: "success", expectedColor: "green" },
+    { type: "warning", expectedColor: "yellow" },
+    { type: "danger", expectedColor: "red" },
+  ];
+
+  typeColorMap.forEach(({ type, expectedColor }) => {
+    test(`Type "${type}" maps to "${expectedColor}" color`, () => {
+      setupTest({
+        title: `${type} Alert`,
+        type,
+      });
+      // Alert renders successfully with correct type
+      const alertElement = screen.getByRole("alert");
+      expect(alertElement).toBeInTheDocument();
+    });
+  });
+});

package/dist/primitives/Alert/Alert.stories.svelte

@@ -1,88 +1,88 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Alert from './Alert.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Alert',
-    component: Alert,
-    tags: ['autodocs'],
-    argTypes: {
-      color: {
-        control: 'select',
-        options: ['info', 'success', 'warning', 'error'],
-      },
-      dismissible: { control: 'boolean' },
-    },
-    parameters: {
-      docs: {
-        description: {
-          component: 'Contextual feedback messages for user actions or system states.',
-        },
-      },
-    },
-  });
-</script>
-
-<Story name="Info" args={{ color: 'info' }}>
-  {#snippet template(args)}
-    <Alert {...args}>
-      <span class="font-medium">Info!</span> This is an informational alert with helpful information.
-    </Alert>
-  {/snippet}
-</Story>
-
-<Story name="Success" args={{ color: 'success' }}>
-  {#snippet template(args)}
-    <Alert {...args}>
-      <span class="font-medium">Success!</span> Your changes have been saved successfully.
-    </Alert>
-  {/snippet}
-</Story>
-
-<Story name="Warning" args={{ color: 'warning' }}>
-  {#snippet template(args)}
-    <Alert {...args}>
-      <span class="font-medium">Warning!</span> Please review this information before proceeding.
-    </Alert>
-  {/snippet}
-</Story>
-
-<Story name="Error" args={{ color: 'error' }}>
-  {#snippet template(args)}
-    <Alert {...args}>
-      <span class="font-medium">Error!</span> Something went wrong. Please try again.
-    </Alert>
-  {/snippet}
-</Story>
-
-<Story name="Dismissible">
-  {#snippet template()}
-    <div class="space-y-4">
-      <Alert color="info" dismissible>
-        Click the X to dismiss this alert.
-      </Alert>
-      <Alert color="success" dismissible>
-        This success alert can also be dismissed.
-      </Alert>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="All Variants">
-  {#snippet template()}
-    <div class="space-y-4">
-      <Alert color="info">
-        <span class="font-medium">Info:</span> Just letting you know about something.
-      </Alert>
-      <Alert color="success">
-        <span class="font-medium">Success:</span> Great job! Everything worked.
-      </Alert>
-      <Alert color="warning">
-        <span class="font-medium">Warning:</span> Be careful about this action.
-      </Alert>
-      <Alert color="error">
-        <span class="font-medium">Error:</span> Something went wrong.
-      </Alert>
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Alert from './Alert.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Alert',
+    component: Alert,
+    tags: ['autodocs'],
+    argTypes: {
+      color: {
+        control: 'select',
+        options: ['info', 'success', 'warning', 'error'],
+      },
+      dismissible: { control: 'boolean' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Contextual feedback messages for user actions or system states.',
+        },
+      },
+    },
+  });
+</script>
+
+<Story name="Info" args={{ color: 'info' }}>
+  {#snippet template(args)}
+    <Alert {...args}>
+      <span class="font-medium">Info!</span> This is an informational alert with helpful information.
+    </Alert>
+  {/snippet}
+</Story>
+
+<Story name="Success" args={{ color: 'success' }}>
+  {#snippet template(args)}
+    <Alert {...args}>
+      <span class="font-medium">Success!</span> Your changes have been saved successfully.
+    </Alert>
+  {/snippet}
+</Story>
+
+<Story name="Warning" args={{ color: 'warning' }}>
+  {#snippet template(args)}
+    <Alert {...args}>
+      <span class="font-medium">Warning!</span> Please review this information before proceeding.
+    </Alert>
+  {/snippet}
+</Story>
+
+<Story name="Error" args={{ color: 'error' }}>
+  {#snippet template(args)}
+    <Alert {...args}>
+      <span class="font-medium">Error!</span> Something went wrong. Please try again.
+    </Alert>
+  {/snippet}
+</Story>
+
+<Story name="Dismissible">
+  {#snippet template()}
+    <div class="space-y-4">
+      <Alert color="info" dismissible>
+        Click the X to dismiss this alert.
+      </Alert>
+      <Alert color="success" dismissible>
+        This success alert can also be dismissed.
+      </Alert>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="All Variants">
+  {#snippet template()}
+    <div class="space-y-4">
+      <Alert color="info">
+        <span class="font-medium">Info:</span> Just letting you know about something.
+      </Alert>
+      <Alert color="success">
+        <span class="font-medium">Success:</span> Great job! Everything worked.
+      </Alert>
+      <Alert color="warning">
+        <span class="font-medium">Warning:</span> Be careful about this action.
+      </Alert>
+      <Alert color="error">
+        <span class="font-medium">Error:</span> Something went wrong.
+      </Alert>
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Alert/Alert.svelte

@@ -1,72 +1,72 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { InfoCircleOutline, CloseOutline } from "../Icons";
-  import {
-    alertColorVariants,
-    alertCloseButtonVariants,
-    type AlertColorVariant,
-  } from '../../tokens/variants.js';
-
-  const defaultLabels = {
-    close: 'Close',
-  };
-
-  interface Props {
-    title?: string;
-    message?: string;
-    type?: AlertColorVariant;
-    onClose?: () => void;
-    onclose?: () => void;
-    children?: Snippet;
-    labels?: Partial<typeof defaultLabels>;
-    [key: string]: unknown;
-  }
-
-  let {
-    title = "",
-    message = "",
-    type = "info",
-    onClose,
-    onclose,
-    children,
-    labels: userLabels = {},
-    ...restProps
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  let alertClasses = $derived(alertColorVariants[type] || alertColorVariants.info);
-  let closeButtonClasses = $derived(alertCloseButtonVariants[type] || alertCloseButtonVariants.info);
-
-  function handleClose() {
-    onClose?.();
-    onclose?.();
-  }
-
-  let showCloseButton = $derived(onClose !== undefined || onclose !== undefined);
-</script>
-
-<div class="flex items-center p-4 mb-4 text-sm rounded-lg {alertClasses}" role="alert" {...restProps}>
-  <InfoCircleOutline class="shrink-0 w-4 h-4 me-3" />
-  <span class="sr-only">{type}</span>
-  <div class="flex-1">
-    {#if title}
-      <span class="font-medium">{title}</span>
-    {/if}
-    {#if message}
-      <span class:mt-1={title}>{message}</span>
-    {/if}
-    {#if children}{@render children()}{/if}
-  </div>
-  {#if showCloseButton}
-<button
-      type="button"
-      class="ms-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex items-center justify-center h-8 w-8 {closeButtonClasses}"
-      aria-label={labels.close}
-      onclick={handleClose}
-    >
-      <span class="sr-only">{labels.close}</span>
-      <CloseOutline class="w-3 h-3" />
-    </button>
-  {/if}
-</div>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { InfoCircleOutline, CloseOutline } from "../Icons";
+  import {
+    alertColorVariants,
+    alertCloseButtonVariants,
+    type AlertColorVariant,
+  } from '../../tokens/variants.js';
+
+  const defaultLabels = {
+    close: 'Close',
+  };
+
+  interface Props {
+    title?: string;
+    message?: string;
+    type?: AlertColorVariant;
+    onClose?: () => void;
+    onclose?: () => void;
+    children?: Snippet;
+    labels?: Partial<typeof defaultLabels>;
+    [key: string]: unknown;
+  }
+
+  let {
+    title = "",
+    message = "",
+    type = "info",
+    onClose,
+    onclose,
+    children,
+    labels: userLabels = {},
+    ...restProps
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  let alertClasses = $derived(alertColorVariants[type] || alertColorVariants.info);
+  let closeButtonClasses = $derived(alertCloseButtonVariants[type] || alertCloseButtonVariants.info);
+
+  function handleClose() {
+    onClose?.();
+    onclose?.();
+  }
+
+  let showCloseButton = $derived(onClose !== undefined || onclose !== undefined);
+</script>
+
+<div class="flex items-center p-4 mb-4 text-sm rounded-lg {alertClasses}" role="alert" {...restProps}>
+  <InfoCircleOutline class="shrink-0 w-4 h-4 me-3" />
+  <span class="sr-only">{type}</span>
+  <div class="flex-1">
+    {#if title}
+      <span class="font-medium">{title}</span>
+    {/if}
+    {#if message}
+      <span class:mt-1={title}>{message}</span>
+    {/if}
+    {#if children}{@render children()}{/if}
+  </div>
+  {#if showCloseButton}
+<button
+      type="button"
+      class="ms-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex items-center justify-center h-8 w-8 {closeButtonClasses}"
+      aria-label={labels.close}
+      onclick={handleClose}
+    >
+      <span class="sr-only">{labels.close}</span>
+      <CloseOutline class="w-3 h-3" />
+    </button>
+  {/if}
+</div>