@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/recipes/modals/FeedbackModal.svelte

@@ -1,205 +1,205 @@
-<script>
-  import Button from "../../primitives/Button/Button.svelte";
-  import Cancel from "../../assets/svg/cancel.svg";
-  import Modal from "../../primitives/Modal/Modal.svelte";
-  import { typography } from '../../tokens/typography';
-
-  const defaultLabels = {
-    title: 'Send Feedback',
-    bugLabel: 'Report a Bug',
-    featureLabel: 'Request a Feature',
-    otherLabel: 'Other',
-    bugPlaceholder: 'What happened? What were you trying to do?',
-    featurePlaceholder: 'What would you like to be able to do?',
-    otherPlaceholder: 'How can we help?',
-    emailLabel: 'Email',
-    descriptionLabel: 'Description',
-    submit: 'Submit',
-    cancel: 'Cancel',
-    close: 'Close',
-    sending: 'Sending...',
-    successTitle: 'Thanks for your feedback!',
-    successMessage: 'We\'ve received your feedback and will review it shortly.',
-    successReference: 'Reference',
-    done: 'Done',
-  };
-
-  let {
-    open = $bindable(false),
-    email = "",
-    loading = false,
-    successReferenceId = "",
-    labels: userLabels = {},
-
-    // Callbacks
-    onsubmit,
-    onclose,
-  } = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  // Form state
-  let feedbackType = $state("bug");
-  let description = $state("");
-  let contactEmail = $state("");
-  let showSuccess = $state(false);
-
-  // Sync email prop
-  $effect(() => {
-    if (email && !contactEmail) {
-      contactEmail = email;
-    }
-  });
-
-  // Show success state when referenceId comes in
-  $effect(() => {
-    if (successReferenceId) {
-      showSuccess = true;
-    }
-  });
-
-  let placeholder = $derived(
-    feedbackType === "bug" ? labels.bugPlaceholder
-    : feedbackType === "feature" ? labels.featurePlaceholder
-    : labels.otherPlaceholder
-  );
-
-  let isDisabled = $derived(loading || !description.trim());
-
-  const typeOptions = $derived([
-    { value: "bug", label: labels.bugLabel },
-    { value: "feature", label: labels.featureLabel },
-    { value: "other", label: labels.otherLabel },
-  ]);
-
-  const handleSubmit = () => {
-    if (isDisabled) return;
-    onsubmit?.({
-      type: feedbackType,
-      description: description.trim(),
-      email: contactEmail,
-    });
-  };
-
-  const handleClose = () => {
-    if (loading) return;
-    resetForm();
-    open = false;
-    onclose?.();
-  };
-
-  const resetForm = () => {
-    feedbackType = "bug";
-    description = "";
-    showSuccess = false;
-  };
-</script>
-
-<Modal bind:open size="md" persistent={loading}>
-  {#snippet header()}
-    <div class="text-left">
-      <div class="flex justify-between items-start -mt-2 -mr-2 mb-2">
-        <h3 class={typography.h2}>
-          {showSuccess ? labels.successTitle : labels.title}
-        </h3>
-        <Button variant="icon" size="xs" onclick={handleClose} disabled={loading}>
-          <img src={Cancel} alt={labels.close} class="w-5 h-5" />
-        </Button>
-      </div>
-    </div>
-  {/snippet}
-
-  {#snippet body()}
-    {#if showSuccess}
-      <!-- Success state -->
-      <div class="text-left mt-4 space-y-4">
-        <p class={`${typography.smMuted} leading-relaxed`}>
-          {labels.successMessage}
-        </p>
-        {#if successReferenceId}
-          <div class="bg-gray-50 dark:bg-gray-700 rounded-lg px-4 py-3">
-            <p class="text-sm text-gray-500 dark:text-gray-400">{labels.successReference}</p>
-            <p class="text-lg font-mono font-semibold text-gray-900 dark:text-white">{successReferenceId}</p>
-          </div>
-        {/if}
-      </div>
-    {:else}
-      <!-- Form -->
-      <div class="text-left mt-4 space-y-4">
-        <!-- Type selector -->
-        <div class="flex gap-2">
-          {#each typeOptions as option}
-            <button
-              type="button"
-              class="px-3 py-1.5 text-sm rounded-full border transition-colors
-                {feedbackType === option.value
-                  ? 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 font-medium'
-                  : 'border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:border-gray-400 dark:hover:border-gray-500'}"
-              onclick={() => feedbackType = option.value}
-              disabled={loading}
-            >
-              {option.label}
-            </button>
-          {/each}
-        </div>
-
-        <!-- Description -->
-        <div>
-          <label for="feedback-description" class={`${typography.label} block mb-2`}>
-            {labels.descriptionLabel}
-          </label>
-          <textarea
-            id="feedback-description"
-            bind:value={description}
-            placeholder={placeholder}
-            rows={4}
-            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 {typography.body} rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
-            disabled={loading}
-          ></textarea>
-        </div>
-
-        <!-- Email -->
-        <div>
-          <label for="feedback-email" class={`${typography.label} block mb-2`}>
-            {labels.emailLabel}
-          </label>
-          <input
-            id="feedback-email"
-            type="email"
-            bind:value={contactEmail}
-            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg {typography.body} bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50"
-            disabled={loading}
-          />
-        </div>
-      </div>
-    {/if}
-  {/snippet}
-
-  {#snippet footer()}
-    {#if showSuccess}
-      <Button size="full" variant="blue-solid" onclick={handleClose}>
-        {labels.done}
-      </Button>
-    {:else}
-      <div class="flex gap-3">
-        <Button
-          size="full"
-          variant="alternative"
-          onclick={handleClose}
-          disabled={loading}
-        >
-          {labels.cancel}
-        </Button>
-        <Button
-          size="full"
-          variant="blue-solid"
-          onclick={handleSubmit}
-          disabled={isDisabled}
-          {loading}
-        >
-          {loading ? labels.sending : labels.submit}
-        </Button>
-      </div>
-    {/if}
-  {/snippet}
-</Modal>
+<script>
+  import Button from "../../primitives/Button/Button.svelte";
+  import Cancel from "../../assets/svg/cancel.svg";
+  import Modal from "../../primitives/Modal/Modal.svelte";
+  import { typography } from '../../tokens/typography';
+
+  const defaultLabels = {
+    title: 'Send Feedback',
+    bugLabel: 'Report a Bug',
+    featureLabel: 'Request a Feature',
+    otherLabel: 'Other',
+    bugPlaceholder: 'What happened? What were you trying to do?',
+    featurePlaceholder: 'What would you like to be able to do?',
+    otherPlaceholder: 'How can we help?',
+    emailLabel: 'Email',
+    descriptionLabel: 'Description',
+    submit: 'Submit',
+    cancel: 'Cancel',
+    close: 'Close',
+    sending: 'Sending...',
+    successTitle: 'Thanks for your feedback!',
+    successMessage: 'We\'ve received your feedback and will review it shortly.',
+    successReference: 'Reference',
+    done: 'Done',
+  };
+
+  let {
+    open = $bindable(false),
+    email = "",
+    loading = false,
+    successReferenceId = "",
+    labels: userLabels = {},
+
+    // Callbacks
+    onsubmit,
+    onclose,
+  } = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  // Form state
+  let feedbackType = $state("bug");
+  let description = $state("");
+  let contactEmail = $state("");
+  let showSuccess = $state(false);
+
+  // Sync email prop
+  $effect(() => {
+    if (email && !contactEmail) {
+      contactEmail = email;
+    }
+  });
+
+  // Show success state when referenceId comes in
+  $effect(() => {
+    if (successReferenceId) {
+      showSuccess = true;
+    }
+  });
+
+  let placeholder = $derived(
+    feedbackType === "bug" ? labels.bugPlaceholder
+    : feedbackType === "feature" ? labels.featurePlaceholder
+    : labels.otherPlaceholder
+  );
+
+  let isDisabled = $derived(loading || !description.trim());
+
+  const typeOptions = $derived([
+    { value: "bug", label: labels.bugLabel },
+    { value: "feature", label: labels.featureLabel },
+    { value: "other", label: labels.otherLabel },
+  ]);
+
+  const handleSubmit = () => {
+    if (isDisabled) return;
+    onsubmit?.({
+      type: feedbackType,
+      description: description.trim(),
+      email: contactEmail,
+    });
+  };
+
+  const handleClose = () => {
+    if (loading) return;
+    resetForm();
+    open = false;
+    onclose?.();
+  };
+
+  const resetForm = () => {
+    feedbackType = "bug";
+    description = "";
+    showSuccess = false;
+  };
+</script>
+
+<Modal bind:open size="md" persistent={loading}>
+  {#snippet header()}
+    <div class="text-left">
+      <div class="flex justify-between items-start -mt-2 -mr-2 mb-2">
+        <h3 class={typography.h2}>
+          {showSuccess ? labels.successTitle : labels.title}
+        </h3>
+        <Button variant="icon" size="xs" onclick={handleClose} disabled={loading}>
+          <img src={Cancel} alt={labels.close} class="w-5 h-5" />
+        </Button>
+      </div>
+    </div>
+  {/snippet}
+
+  {#snippet body()}
+    {#if showSuccess}
+      <!-- Success state -->
+      <div class="text-left mt-4 space-y-4">
+        <p class={`${typography.smMuted} leading-relaxed`}>
+          {labels.successMessage}
+        </p>
+        {#if successReferenceId}
+          <div class="bg-bg-secondary rounded-lg px-4 py-3">
+            <p class="text-sm text-muted-foreground">{labels.successReference}</p>
+            <p class="text-lg font-mono font-semibold text-text-primary">{successReferenceId}</p>
+          </div>
+        {/if}
+      </div>
+    {:else}
+      <!-- Form -->
+      <div class="text-left mt-4 space-y-4">
+        <!-- Type selector -->
+        <div class="flex gap-2">
+          {#each typeOptions as option}
+            <button
+              type="button"
+              class="px-3 py-1.5 text-sm rounded-full border transition-colors
+                {feedbackType === option.value
+                  ? 'bg-status-info-bg border-brand-primary text-brand-primary font-medium'
+                  : 'border-stroke-primary text-text-secondary hover:border-stroke-primary'}"
+              onclick={() => feedbackType = option.value}
+              disabled={loading}
+            >
+              {option.label}
+            </button>
+          {/each}
+        </div>
+
+        <!-- Description -->
+        <div>
+          <label for="feedback-description" class={`${typography.label} block mb-2`}>
+            {labels.descriptionLabel}
+          </label>
+          <textarea
+            id="feedback-description"
+            bind:value={description}
+            placeholder={placeholder}
+            rows={4}
+            class="w-full px-3 py-2 border border-stroke-primary bg-bg-secondary {typography.body} rounded-lg focus:outline-hidden focus:ring-2 focus:ring-focus-ring focus:border-transparent resize-none"
+            disabled={loading}
+          ></textarea>
+        </div>
+
+        <!-- Email -->
+        <div>
+          <label for="feedback-email" class={`${typography.label} block mb-2`}>
+            {labels.emailLabel}
+          </label>
+          <input
+            id="feedback-email"
+            type="email"
+            bind:value={contactEmail}
+            class="w-full px-3 py-2 border border-stroke-primary rounded-lg {typography.body} bg-card focus:ring-2 focus:ring-focus-ring focus:border-transparent disabled:opacity-50"
+            disabled={loading}
+          />
+        </div>
+      </div>
+    {/if}
+  {/snippet}
+
+  {#snippet footer()}
+    {#if showSuccess}
+      <Button size="full" variant="blue-solid" onclick={handleClose}>
+        {labels.done}
+      </Button>
+    {:else}
+      <div class="flex gap-3">
+        <Button
+          size="full"
+          variant="alternative"
+          onclick={handleClose}
+          disabled={loading}
+        >
+          {labels.cancel}
+        </Button>
+        <Button
+          size="full"
+          variant="blue-solid"
+          onclick={handleSubmit}
+          disabled={isDisabled}
+          {loading}
+        >
+          {loading ? labels.sending : labels.submit}
+        </Button>
+      </div>
+    {/if}
+  {/snippet}
+</Modal>

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

@@ -222,7 +222,7 @@ describe("InputModal Component Tests", () => {
       errorMessage: "Error"
     });
     const input = document.querySelector("input");
-    expect(input).toHaveClass("border-red-500");
+    expect(input).toHaveClass("border-status-error-border");
   });
 
   test("Textarea has error border when error is shown", () => {
@@ -232,7 +232,7 @@ describe("InputModal Component Tests", () => {
       errorMessage: "Error"
     });
     const textarea = document.querySelector("textarea");
-    expect(textarea).toHaveClass("border-red-500");
+    expect(textarea).toHaveClass("border-status-error-border");
   });
 
   test("Email error takes precedence over custom error message", async () => {
@@ -311,21 +311,21 @@ describe("InputModal Component Tests", () => {
     setupTest();
     const buttons = screen.getAllByText("Confirm");
     const primaryButton = buttons[0].closest("button");
-    expect(primaryButton).toHaveClass("bg-blue-700");
+    expect(primaryButton).toHaveClass("bg-brand-primary");
   });
 
   test("Primary button uses red-solid variant", () => {
     setupTest({ primaryButtonVariant: "red-solid" });
     const buttons = screen.getAllByText("Confirm");
     const primaryButton = buttons[0].closest("button");
-    expect(primaryButton).toHaveClass("bg-red-700");
+    expect(primaryButton).toHaveClass("bg-accent-danger");
   });
 
   test("Secondary button uses alternative variant", () => {
     setupTest();
     const buttons = screen.getAllByText("Cancel");
     const secondaryButton = buttons[0].closest("button");
-    expect(secondaryButton).toHaveClass("border-gray-200");
+    expect(secondaryButton).toHaveClass("border-border");
   });
 
   // Disabled state tests
@@ -589,7 +589,7 @@ describe("InputModal Component Tests", () => {
     setupTest();
     const input = document.querySelector("input");
     expect(input).toHaveClass("focus:ring-2");
-    expect(input).toHaveClass("focus:ring-blue-500");
+    expect(input).toHaveClass("focus:ring-focus-ring");
     expect(input).toHaveClass("focus:border-transparent");
   });
 
@@ -597,7 +597,7 @@ describe("InputModal Component Tests", () => {
     setupTest({ inputType: "textarea" });
     const textarea = document.querySelector("textarea");
     expect(textarea).toHaveClass("focus:ring-2");
-    expect(textarea).toHaveClass("focus:ring-blue-500");
+    expect(textarea).toHaveClass("focus:ring-focus-ring");
     expect(textarea).toHaveClass("focus:border-transparent");
   });
 
@@ -613,33 +613,33 @@ describe("InputModal Component Tests", () => {
     expect(label).toHaveClass("mb-2");
   });
 
-  // Dark mode styling tests
-  test("Input has dark mode classes", () => {
+  // Token-based styling tests
+  test("Input has token-based classes", () => {
     setupTest();
     const input = document.querySelector("input");
-    expect(input).toHaveClass("dark:bg-gray-700");
+    expect(input).toHaveClass("border");
   });
 
-  test("Textarea has dark mode classes", () => {
+  test("Textarea has token-based classes", () => {
     setupTest({ inputType: "textarea" });
     const textarea = document.querySelector("textarea");
-    expect(textarea).toHaveClass("dark:bg-gray-700");
-    expect(textarea).toHaveClass("dark:border-gray-600");
+    expect(textarea).toHaveClass("border");
+    expect(textarea).toHaveClass("resize-none");
   });
 
-  test("Input has dark mode border classes", () => {
+  test("Input has border classes", () => {
     setupTest();
     const input = document.querySelector("input");
-    expect(input).toHaveClass("dark:bg-gray-700");
+    expect(input).toHaveClass("border");
   });
 
-  test("Error message has dark mode classes", () => {
+  test("Error message has text styling", () => {
     setupTest({
       showError: true,
       errorMessage: "Test error"
     });
     const errorText = screen.getAllByText("Test error")[0];
-    expect(errorText).toHaveClass("dark:text-red-400");
+    expect(errorText).toBeInTheDocument();
   });
 
   // Integration tests