@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/recipes/modals/ModalStateManager.svelte

@@ -1,77 +1,77 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import Icon from "../../primitives/Icons/Icon.svelte";
-  import Button from "../../primitives/Button/Button.svelte";
-  import { typography } from '../../tokens/typography';
-
-  type IconName = "Home" | "Shows" | "Availability" | "Profile" | "Payment" | "Notification" | "More" | "MoreHori" | "Info" | "ChevronLeft" | "ChevronRight" | "Signout" | "CheckCircle" | "CheckCircleOutline" | "ErrorCircle" | "ArrowLeft" | "ArrowRight" | "Back" | "DownArrow" | "Message" | "Reload" | "Copy" | "Cross";
-
-  interface Props {
-    /** Whether the modal is currently processing an action */
-    isProcessing?: boolean;
-    /** Whether the action completed successfully */
-    isSuccess?: boolean;
-    /** Icon to show on success (from Icon component) */
-    successIcon?: IconName;
-    /** Title to show on success */
-    successTitle?: string;
-    /** Optional message to show on success */
-    successMessage?: string;
-    /** Text to show while processing */
-    processingMessage?: string;
-    /** Button text for the success state */
-    successButtonText?: string;
-    /** Callback when success button is clicked */
-    onSuccessClose?: () => void;
-    /** Custom success icon color class */
-    successIconColor?: string;
-    /** Custom processing icon color class */
-    processingIconBgColor?: string;
-    /** Child content (normal state) */
-    children?: Snippet;
-  }
-
-  let {
-    isProcessing = false,
-    isSuccess = false,
-    successIcon = "CheckCircle",
-    successTitle = "Success",
-    successMessage = "",
-    processingMessage = "Processing your request",
-    successButtonText = "Continue",
-    onSuccessClose = () => {},
-    successIconColor = "text-green-600",
-    processingIconBgColor = "bg-orange-300",
-    children
-  }: Props = $props();
-</script>
-
-{#if isProcessing && !isSuccess}
-  <div class="py-6 px-4 flex flex-col items-center justify-center gap-4">
-    <div
-      class="w-12 h-12 {processingIconBgColor} rounded-full flex items-center justify-center"
-    >
-      <span class="animate-spin">
-        <Icon name="Reload" size="20" />
-      </span>
-    </div>
-    <p class={`${typography.body} text-center font-medium`}>{processingMessage}</p>
-  </div>
-{:else if isSuccess}
-  <div class="py-6 px-4 flex flex-col items-center justify-center gap-4">
-    <div class={successIconColor}>
-      <Icon name={successIcon} size="48" />
-    </div>
-    <h2 class={`${typography.h2} text-center`}>
-      {successTitle}
-    </h2>
-    {#if successMessage}
-      <p class={`${typography.smMuted} text-center`}>{successMessage}</p>
-    {/if}
-    <Button variant="default" size="full" onclick={onSuccessClose}>
-      {successButtonText}
-    </Button>
-  </div>
-{:else}
-  {@render children?.()}
-{/if}
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Icon from "../../primitives/Icons/Icon.svelte";
+  import Button from "../../primitives/Button/Button.svelte";
+  import { typography } from '../../tokens/typography';
+
+  type IconName = "Home" | "Shows" | "Availability" | "Profile" | "Payment" | "Notification" | "More" | "MoreHori" | "Info" | "ChevronLeft" | "ChevronRight" | "Signout" | "CheckCircle" | "CheckCircleOutline" | "ErrorCircle" | "ArrowLeft" | "ArrowRight" | "Back" | "DownArrow" | "Message" | "Reload" | "Copy" | "Cross";
+
+  interface Props {
+    /** Whether the modal is currently processing an action */
+    isProcessing?: boolean;
+    /** Whether the action completed successfully */
+    isSuccess?: boolean;
+    /** Icon to show on success (from Icon component) */
+    successIcon?: IconName;
+    /** Title to show on success */
+    successTitle?: string;
+    /** Optional message to show on success */
+    successMessage?: string;
+    /** Text to show while processing */
+    processingMessage?: string;
+    /** Button text for the success state */
+    successButtonText?: string;
+    /** Callback when success button is clicked */
+    onSuccessClose?: () => void;
+    /** Custom success icon color class */
+    successIconColor?: string;
+    /** Custom processing icon color class */
+    processingIconBgColor?: string;
+    /** Child content (normal state) */
+    children?: Snippet;
+  }
+
+  let {
+    isProcessing = false,
+    isSuccess = false,
+    successIcon = "CheckCircle",
+    successTitle = "Success",
+    successMessage = "",
+    processingMessage = "Processing your request",
+    successButtonText = "Continue",
+    onSuccessClose = () => {},
+    successIconColor = "text-accent-success",
+    processingIconBgColor = "bg-accent-warning",
+    children
+  }: Props = $props();
+</script>
+
+{#if isProcessing && !isSuccess}
+  <div class="py-6 px-4 flex flex-col items-center justify-center gap-4">
+    <div
+      class="w-12 h-12 {processingIconBgColor} rounded-full flex items-center justify-center"
+    >
+      <span class="animate-spin">
+        <Icon name="Reload" size="20" />
+      </span>
+    </div>
+    <p class={`${typography.body} text-center font-medium`}>{processingMessage}</p>
+  </div>
+{:else if isSuccess}
+  <div class="py-6 px-4 flex flex-col items-center justify-center gap-4">
+    <div class={successIconColor}>
+      <Icon name={successIcon} size="48" />
+    </div>
+    <h2 class={`${typography.h2} text-center`}>
+      {successTitle}
+    </h2>
+    {#if successMessage}
+      <p class={`${typography.smMuted} text-center`}>{successMessage}</p>
+    {/if}
+    <Button variant="default" size="full" onclick={onSuccessClose}>
+      {successButtonText}
+    </Button>
+  </div>
+{:else}
+  {@render children?.()}
+{/if}

package/dist/recipes/modals/ModalTestWrapper.svelte

@@ -1,65 +1,65 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import Modal from "../../primitives/Modal/Modal.svelte";
-  import Button from "../../primitives/Button/Button.svelte";
-
-  interface Props {
-    /** Whether the modal is visible */
-    open?: boolean;
-    /** Modal title */
-    title?: string;
-    /** Modal description */
-    description?: string;
-    /** Warning text */
-    warningText?: string;
-    /** Callback when modal is cancelled */
-    oncancel?: () => void;
-    /** Header content */
-    header?: Snippet;
-    /** Body content */
-    body?: Snippet;
-    /** Footer content */
-    footer?: Snippet;
-  }
-
-  let {
-    open = $bindable(false),
-    title = '',
-    description = '',
-    warningText = '',
-    oncancel,
-    header,
-    body,
-    footer
-  }: Props = $props();
-</script>
-
-{#snippet headerContent()}
-  {#if header}
-    {@render header()}
-  {:else}
-    {title}
-  {/if}
-{/snippet}
-
-{#snippet bodyContent()}
-  {#if body}
-    {@render body()}
-  {:else}
-    {description}
-    {#if warningText}
-      <br /> {warningText}
-    {/if}
-  {/if}
-{/snippet}
-
-{#snippet footerContent()}
-  {#if footer}
-    {@render footer()}
-  {:else}
-    <Button variant="alternative">Cancel</Button>
-    <Button variant="default">Confirm</Button>
-  {/if}
-{/snippet}
-
-<Modal bind:open {oncancel} header={headerContent} body={bodyContent} footer={footerContent} />
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Modal from "../../primitives/Modal/Modal.svelte";
+  import Button from "../../primitives/Button/Button.svelte";
+
+  interface Props {
+    /** Whether the modal is visible */
+    open?: boolean;
+    /** Modal title */
+    title?: string;
+    /** Modal description */
+    description?: string;
+    /** Warning text */
+    warningText?: string;
+    /** Callback when modal is cancelled */
+    oncancel?: () => void;
+    /** Header content */
+    header?: Snippet;
+    /** Body content */
+    body?: Snippet;
+    /** Footer content */
+    footer?: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    title = '',
+    description = '',
+    warningText = '',
+    oncancel,
+    header,
+    body,
+    footer
+  }: Props = $props();
+</script>
+
+{#snippet headerContent()}
+  {#if header}
+    {@render header()}
+  {:else}
+    {title}
+  {/if}
+{/snippet}
+
+{#snippet bodyContent()}
+  {#if body}
+    {@render body()}
+  {:else}
+    {description}
+    {#if warningText}
+      <br /> {warningText}
+    {/if}
+  {/if}
+{/snippet}
+
+{#snippet footerContent()}
+  {#if footer}
+    {@render footer()}
+  {:else}
+    <Button variant="alternative">Cancel</Button>
+    <Button variant="default">Confirm</Button>
+  {/if}
+{/snippet}
+
+<Modal bind:open {oncancel} header={headerContent} body={bodyContent} footer={footerContent} />

package/dist/recipes/modals/StatusModal.spec.js

@@ -71,31 +71,31 @@ describe("StatusModal Component Tests", () => {
     test("Renders success icon by default", () => {
       setupTest();
       // Success icon should be present
-      const container = document.querySelector(".bg-green-100");
+      const container = document.querySelector(".bg-status-success-bg");
       expect(container).toBeInTheDocument();
     });
 
     test("Renders success icon when iconType is success", () => {
       setupTest({ iconType: "success" });
-      const container = document.querySelector(".bg-green-100");
+      const container = document.querySelector(".bg-status-success-bg");
       expect(container).toBeInTheDocument();
     });
 
     test("Renders error icon when iconType is error", () => {
       setupTest({ iconType: "error" });
-      const container = document.querySelector(".bg-red-100");
+      const container = document.querySelector(".bg-status-error-bg");
       expect(container).toBeInTheDocument();
     });
 
     test("Renders warning icon when iconType is warning", () => {
       setupTest({ iconType: "warning" });
-      const container = document.querySelector(".bg-amber-100");
+      const container = document.querySelector(".bg-status-warning-bg");
       expect(container).toBeInTheDocument();
     });
 
     test("Renders info icon when iconType is info", () => {
       setupTest({ iconType: "info" });
-      const container = document.querySelector(".bg-blue-100");
+      const container = document.querySelector(".bg-status-info-bg");
       expect(container).toBeInTheDocument();
     });
 
@@ -507,13 +507,13 @@ describe("StatusModal Component Tests", () => {
   describe("Variant Override", () => {
     test("Uses variant prop over iconType when both provided", () => {
       setupTest({ iconType: "success", variant: "error" });
-      const container = document.querySelector(".bg-red-100");
+      const container = document.querySelector(".bg-status-error-bg");
       expect(container).toBeInTheDocument();
     });
 
     test("Falls back to iconType when variant not provided", () => {
       setupTest({ iconType: "warning" });
-      const container = document.querySelector(".bg-amber-100");
+      const container = document.querySelector(".bg-status-warning-bg");
       expect(container).toBeInTheDocument();
     });
   });