@getmicdrop/svelte-components 5.5.1 → 5.5.5

package/dist/primitives/Checkbox/Checkbox.spec.js

@@ -0,0 +1,252 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi } from 'vitest';
+import Checkbox from './Checkbox.svelte';
+
+describe('Checkbox Component', () => {
+  test('renders a checkbox input', () => {
+    const { container } = render(Checkbox);
+    expect(container.querySelector('input[type="checkbox"]')).toBeInTheDocument();
+  });
+
+  test('renders with label element', () => {
+    const { container } = render(Checkbox);
+    expect(container.querySelector('label')).toBeInTheDocument();
+  });
+
+  test('checkbox is inside label', () => {
+    const { container } = render(Checkbox);
+    expect(container.querySelector('label input[type="checkbox"]')).toBeInTheDocument();
+  });
+
+  test('applies custom className to label', () => {
+    const { container } = render(Checkbox, { props: { class: 'custom-checkbox' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('custom-checkbox');
+  });
+
+  test('passes through additional props', () => {
+    const { container } = render(Checkbox, { props: { 'data-testid': 'my-checkbox' } });
+    const label = container.querySelector('[data-testid="my-checkbox"]');
+    expect(label).toBeInTheDocument();
+  });
+});
+
+describe('Checkbox Props', () => {
+  test('checked defaults to false', () => {
+    const { container } = render(Checkbox);
+    const input = container.querySelector('input');
+    expect(input).not.toBeChecked();
+  });
+
+  test('checked can be set to true', () => {
+    const { container } = render(Checkbox, { props: { checked: true } });
+    const input = container.querySelector('input');
+    expect(input).toBeChecked();
+  });
+
+  test('name prop is applied to input', () => {
+    const { container } = render(Checkbox, { props: { name: 'agree' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveAttribute('name', 'agree');
+  });
+
+  test('value prop is applied to input', () => {
+    const { container } = render(Checkbox, { props: { value: 'yes' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveAttribute('value', 'yes');
+  });
+
+  test('disabled prop disables the input', () => {
+    const { container } = render(Checkbox, { props: { disabled: true } });
+    const input = container.querySelector('input');
+    expect(input).toBeDisabled();
+  });
+});
+
+describe('Checkbox Colors', () => {
+  test('default color is blue', () => {
+    const { container } = render(Checkbox);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('text-blue-600');
+  });
+
+  test('red color applies text-red-600', () => {
+    const { container } = render(Checkbox, { props: { color: 'red' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('text-red-600');
+  });
+
+  test('green color applies text-green-600', () => {
+    const { container } = render(Checkbox, { props: { color: 'green' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('text-green-600');
+  });
+
+  test('purple color applies text-purple-600', () => {
+    const { container } = render(Checkbox, { props: { color: 'purple' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('text-purple-600');
+  });
+
+  test('orange color applies text-orange-500', () => {
+    const { container } = render(Checkbox, { props: { color: 'orange' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('text-orange-500');
+  });
+
+  test('yellow color applies text-yellow-400', () => {
+    const { container } = render(Checkbox, { props: { color: 'yellow' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('text-yellow-400');
+  });
+});
+
+describe('Checkbox Input Styling', () => {
+  test('has w-4 and h-4 size', () => {
+    const { container } = render(Checkbox);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('w-4');
+    expect(input).toHaveClass('h-4');
+  });
+
+  test('has rounded corners', () => {
+    const { container } = render(Checkbox);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('rounded');
+  });
+
+  test('has bg-gray-100 background', () => {
+    const { container } = render(Checkbox);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('bg-gray-100');
+  });
+
+  test('has border-gray-300 border', () => {
+    const { container } = render(Checkbox);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('border-gray-300');
+  });
+
+  test('has dark mode background', () => {
+    const { container } = render(Checkbox);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('dark:bg-gray-700');
+  });
+
+  test('has dark mode border', () => {
+    const { container } = render(Checkbox);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('dark:border-gray-600');
+  });
+
+  test('has focus:outline-none', () => {
+    const { container } = render(Checkbox);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('focus:outline-none');
+  });
+
+  test('has cursor-pointer when not disabled', () => {
+    const { container } = render(Checkbox, { props: { disabled: false } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('cursor-pointer');
+  });
+
+  test('has cursor-not-allowed when disabled', () => {
+    const { container } = render(Checkbox, { props: { disabled: true } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('cursor-not-allowed');
+  });
+
+  test('has opacity-50 when disabled', () => {
+    const { container } = render(Checkbox, { props: { disabled: true } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('opacity-50');
+  });
+});
+
+describe('Checkbox Label Styling', () => {
+  test('label has inline-flex layout', () => {
+    const { container } = render(Checkbox);
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('inline-flex');
+  });
+
+  test('label has items-center alignment', () => {
+    const { container } = render(Checkbox);
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('items-center');
+  });
+
+  test('label has gap-2 spacing', () => {
+    const { container } = render(Checkbox);
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('gap-2');
+  });
+
+  test('label has select-none', () => {
+    const { container } = render(Checkbox);
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('select-none');
+  });
+
+  test('label has cursor-pointer when not disabled', () => {
+    const { container } = render(Checkbox, { props: { disabled: false } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('cursor-pointer');
+  });
+
+  test('label has cursor-not-allowed when disabled', () => {
+    const { container } = render(Checkbox, { props: { disabled: true } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('cursor-not-allowed');
+  });
+});
+
+describe('Checkbox Event Handling', () => {
+  test('calls onchange when checked state changes', async () => {
+    const user = userEvent.setup();
+    const onchange = vi.fn();
+    const { container } = render(Checkbox, { props: { onchange, value: 'test' } });
+
+    const input = container.querySelector('input');
+    await user.click(input);
+    expect(onchange).toHaveBeenCalledWith({ checked: true, value: 'test' });
+  });
+
+  test('calls onclick when clicked', async () => {
+    const user = userEvent.setup();
+    const onclick = vi.fn();
+    const { container } = render(Checkbox, { props: { onclick } });
+
+    const input = container.querySelector('input');
+    await user.click(input);
+    expect(onclick).toHaveBeenCalled();
+  });
+
+  test('calls onfocus when focused', async () => {
+    const user = userEvent.setup();
+    const onfocus = vi.fn();
+    const { container } = render(Checkbox, { props: { onfocus } });
+
+    const input = container.querySelector('input');
+    await user.click(input);
+    expect(onfocus).toHaveBeenCalled();
+  });
+});
+
+describe('Checkbox Toggle Behavior', () => {
+  test('clicking toggles checked state', async () => {
+    const user = userEvent.setup();
+    const { container } = render(Checkbox, { props: { checked: false } });
+
+    const input = container.querySelector('input');
+    expect(input).not.toBeChecked();
+
+    await user.click(input);
+    expect(input).toBeChecked();
+
+    await user.click(input);
+    expect(input).not.toBeChecked();
+  });
+});

package/dist/primitives/Checkbox/Checkbox.stories.svelte

@@ -1,84 +1,84 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Checkbox from './Checkbox.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Checkbox',
-    component: Checkbox,
-    tags: ['autodocs'],
-    argTypes: {
-      label: { control: 'text' },
-      checked: { control: 'boolean' },
-      disabled: { control: 'boolean' },
-      required: { control: 'boolean' },
-    },
-    parameters: {
-      docs: {
-        description: {
-          component: 'Checkbox input component for boolean selections.',
-        },
-      },
-    },
-  });
-
-  let checked = $state(false);
-  let checkedItems = $state({ terms: false, updates: true, marketing: false });
-</script>
-
-<Story name="Default" args={{ label: 'Accept terms' }}>
-  {#snippet template(args)}
-    <Checkbox {...args} />
-  {/snippet}
-</Story>
-
-<Story name="Checked" args={{ label: 'Already checked', checked: true }}>
-  {#snippet template(args)}
-    <Checkbox {...args} />
-  {/snippet}
-</Story>
-
-<Story name="Disabled" args={{ label: 'Disabled checkbox', disabled: true }}>
-  {#snippet template(args)}
-    <Checkbox {...args} />
-  {/snippet}
-</Story>
-
-<Story name="Disabled Checked" args={{ label: 'Disabled and checked', disabled: true, checked: true }}>
-  {#snippet template(args)}
-    <Checkbox {...args} />
-  {/snippet}
-</Story>
-
-<Story name="Interactive">
-  {#snippet template()}
-    <div class="space-y-4">
-      <Checkbox label="Click to toggle" bind:checked={checked} />
-      <p class="text-sm text-gray-500">Checked: {checked ? 'Yes' : 'No'}</p>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Group">
-  {#snippet template()}
-    <div class="space-y-3">
-      <p class="text-sm font-medium text-gray-700">Notification preferences:</p>
-      <Checkbox label="I accept the terms and conditions" bind:checked={checkedItems.terms} />
-      <Checkbox label="Send me product updates" bind:checked={checkedItems.updates} />
-      <Checkbox label="Send me marketing emails" bind:checked={checkedItems.marketing} />
-      <p class="text-xs text-gray-500 mt-2">
-        Selected: {Object.entries(checkedItems).filter(([_, v]) => v).map(([k]) => k).join(', ') || 'none'}
-      </p>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="All States">
-  {#snippet template()}
-    <div class="space-y-4">
-      <Checkbox label="Unchecked" />
-      <Checkbox label="Checked" checked={true} />
-      <Checkbox label="Disabled unchecked" disabled />
-      <Checkbox label="Disabled checked" disabled checked={true} />
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Checkbox from './Checkbox.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Checkbox',
+    component: Checkbox,
+    tags: ['autodocs'],
+    argTypes: {
+      label: { control: 'text' },
+      checked: { control: 'boolean' },
+      disabled: { control: 'boolean' },
+      required: { control: 'boolean' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Checkbox input component for boolean selections.',
+        },
+      },
+    },
+  });
+
+  let checked = $state(false);
+  let checkedItems = $state({ terms: false, updates: true, marketing: false });
+</script>
+
+<Story name="Default" args={{ label: 'Accept terms' }}>
+  {#snippet template(args)}
+    <Checkbox {...args} />
+  {/snippet}
+</Story>
+
+<Story name="Checked" args={{ label: 'Already checked', checked: true }}>
+  {#snippet template(args)}
+    <Checkbox {...args} />
+  {/snippet}
+</Story>
+
+<Story name="Disabled" args={{ label: 'Disabled checkbox', disabled: true }}>
+  {#snippet template(args)}
+    <Checkbox {...args} />
+  {/snippet}
+</Story>
+
+<Story name="Disabled Checked" args={{ label: 'Disabled and checked', disabled: true, checked: true }}>
+  {#snippet template(args)}
+    <Checkbox {...args} />
+  {/snippet}
+</Story>
+
+<Story name="Interactive">
+  {#snippet template()}
+    <div class="space-y-4">
+      <Checkbox label="Click to toggle" bind:checked={checked} />
+      <p class="text-sm text-gray-500">Checked: {checked ? 'Yes' : 'No'}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Group">
+  {#snippet template()}
+    <div class="space-y-3">
+      <p class="text-sm font-medium text-gray-700">Notification preferences:</p>
+      <Checkbox label="I accept the terms and conditions" bind:checked={checkedItems.terms} />
+      <Checkbox label="Send me product updates" bind:checked={checkedItems.updates} />
+      <Checkbox label="Send me marketing emails" bind:checked={checkedItems.marketing} />
+      <p class="text-xs text-gray-500 mt-2">
+        Selected: {Object.entries(checkedItems).filter(([_, v]) => v).map(([k]) => k).join(', ') || 'none'}
+      </p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="All States">
+  {#snippet template()}
+    <div class="space-y-4">
+      <Checkbox label="Unchecked" />
+      <Checkbox label="Checked" checked={true} />
+      <Checkbox label="Disabled unchecked" disabled />
+      <Checkbox label="Disabled checked" disabled checked={true} />
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Checkbox/Checkbox.svelte

@@ -1,88 +1,88 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    checked?: boolean;
-    value?: string;
-    name?: string;
-    disabled?: boolean;
-    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow';
-    class?: string;
-    onchange?: (detail: { checked: boolean; value: string }) => void;
-    onclick?: () => void;
-    onfocus?: () => void;
-    onblur?: () => void;
-    onkeydown?: (e: KeyboardEvent) => void;
-    onkeyup?: (e: KeyboardEvent) => void;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  let {
-    checked = $bindable(false),
-    value = "",
-    name = "",
-    disabled = false,
-    color = "blue",
-    class: className = "",
-    onchange,
-    onclick,
-    onfocus,
-    onblur,
-    onkeydown,
-    onkeyup,
-    children,
-    ...restProps
-  }: Props = $props();
-
-  function handleChange(event: Event) {
-    const target = event.target as HTMLInputElement;
-    checked = target.checked;
-    onchange?.({ checked, value });
-  }
-
-  const colorClasses = {
-    blue: "text-blue-600",
-    red: "text-red-600",
-    green: "text-green-600",
-    purple: "text-purple-600",
-    orange: "text-orange-500",
-    yellow: "text-yellow-400"
-  };
-
-  let colorClass = $derived(colorClasses[color] || colorClasses.blue);
-
-  let inputClasses = $derived([
-    "w-4 h-4 rounded",
-    "bg-gray-100 border-gray-300",
-    "dark:bg-gray-700 dark:border-gray-600",
-    "focus:outline-none",
-    colorClass,
-    disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
-  ].join(" "));
-</script>
-
-<label
-  class="inline-flex items-center gap-2 {disabled ? 'cursor-not-allowed' : 'cursor-pointer'} select-none {className}"
-  {...restProps}
->
-  <input
-    type="checkbox"
-    {name}
-    {value}
-    {disabled}
-    bind:checked
-    onchange={handleChange}
-    {onclick}
-    {onfocus}
-    {onblur}
-    {onkeydown}
-    {onkeyup}
-    class={inputClasses}
-  />
-  {#if children}
-    <span class="text-sm font-medium text-gray-900 dark:text-gray-300">
-      {@render children()}
-    </span>
-  {/if}
-</label>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    checked?: boolean;
+    value?: string;
+    name?: string;
+    disabled?: boolean;
+    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow';
+    class?: string;
+    onchange?: (detail: { checked: boolean; value: string }) => void;
+    onclick?: () => void;
+    onfocus?: () => void;
+    onblur?: () => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+    onkeyup?: (e: KeyboardEvent) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    checked = $bindable(false),
+    value = "",
+    name = "",
+    disabled = false,
+    color = "blue",
+    class: className = "",
+    onchange,
+    onclick,
+    onfocus,
+    onblur,
+    onkeydown,
+    onkeyup,
+    children,
+    ...restProps
+  }: Props = $props();
+
+  function handleChange(event: Event) {
+    const target = event.target as HTMLInputElement;
+    checked = target.checked;
+    onchange?.({ checked, value });
+  }
+
+  const colorClasses = {
+    blue: "text-blue-600",
+    red: "text-red-600",
+    green: "text-green-600",
+    purple: "text-purple-600",
+    orange: "text-orange-500",
+    yellow: "text-yellow-400"
+  };
+
+  let colorClass = $derived(colorClasses[color] || colorClasses.blue);
+
+  let inputClasses = $derived([
+    "w-4 h-4 rounded",
+    "bg-gray-100 border-gray-300",
+    "dark:bg-gray-700 dark:border-gray-600",
+    "focus:outline-none",
+    colorClass,
+    disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+  ].join(" "));
+</script>
+
+<label
+  class="inline-flex items-center gap-2 {disabled ? 'cursor-not-allowed' : 'cursor-pointer'} select-none {className}"
+  {...restProps}
+>
+  <input
+    type="checkbox"
+    {name}
+    {value}
+    {disabled}
+    bind:checked
+    onchange={handleChange}
+    {onclick}
+    {onfocus}
+    {onblur}
+    {onkeydown}
+    {onkeyup}
+    class={inputClasses}
+  />
+  {#if children}
+    <span class="text-sm font-medium text-gray-900 dark:text-gray-300">
+      {@render children()}
+    </span>
+  {/if}
+</label>