@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/primitives/Button/Button.spec.js

@@ -1,211 +1,223 @@
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { expect, describe, test, vi } from 'vitest';
-import Button from './Button.svelte';
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const onClick = vi.fn();
-  const { component } = render(Button, { props: { ...args } });
-  component.$on('click', onClick);
-  const button = screen.getByRole('button');
-  return {
-    user,
-    component,
-    onClick,
-    button,
-  };
-}
-
-describe('Button Component Tests', () => {
-  test('Renders Button with default props', () => {
-    const { button } = setupTest();
-    expect(button).toBeInTheDocument();
-  });
-
-  test('Handles click event', async () => {
-    const { user, button, onClick } = setupTest();
-    await user.click(button);
-    expect(onClick).toHaveBeenCalledOnce();
-  });
-
-  test('Disables button when disabled prop is true', async () => {
-    const { button, onClick } = setupTest({ disabled: true });
-    expect(button).toBeDisabled();
-    await userEvent.click(button);
-    expect(onClick).not.toHaveBeenCalled();
-  });
-
-  test('Renders with before and after icons', () => {
-    const { button } = setupTest({ beforeIcon: 'icon-before.png', afterIcon: 'icon-after.png' });
-
-    const beforeIcon = button.querySelector('img.mr-2');
-    const afterIcon = button.querySelector('img.ml-2');
-
-    expect(beforeIcon).toBeInTheDocument();
-    expect(beforeIcon).toHaveAttribute('src', 'icon-before.png');
-
-    expect(afterIcon).toBeInTheDocument();
-    expect(afterIcon).toHaveAttribute('src', 'icon-after.png');
-  });
-
-  test('Handles custom classes passed via className prop', () => {
-    const { button } = setupTest({ className: 'custom-class' });
-    expect(button).toHaveClass('custom-class');
-  });
-});
-
-describe('Button Variants', () => {
-  test('Default variant is blue-solid', () => {
-    const { button } = setupTest();
-    expect(button).toHaveClass('btn-blue-solid');
-  });
-
-  test('Blue outline variant', () => {
-    const { button } = setupTest({ variant: 'blue-outline' });
-    expect(button).toHaveClass('btn-blue-outline');
-  });
-
-  test('Gray outline variant', () => {
-    const { button } = setupTest({ variant: 'gray-outline' });
-    expect(button).toHaveClass('btn-gray-outline');
-  });
-
-  test('Red solid variant', () => {
-    const { button } = setupTest({ variant: 'red-solid' });
-    expect(button).toHaveClass('btn-red-solid');
-  });
-
-  test('Red outline variant', () => {
-    const { button } = setupTest({ variant: 'red-outline' });
-    expect(button).toHaveClass('btn-red-outline');
-  });
-
-  test('Red text variant', () => {
-    const { button } = setupTest({ variant: 'red-text' });
-    expect(button).toHaveClass('btn-red-text');
-  });
-
-  test('Gray text variant', () => {
-    const { button } = setupTest({ variant: 'gray-text' });
-    expect(button).toHaveClass('btn-gray-text');
-  });
-});
-
-describe('Button Sizes', () => {
-  test('Full width size', () => {
-    const { button } = setupTest({ size: 'full' });
-    expect(button).toHaveClass('w-full');
-  });
-
-  test('Full width on mobile, auto on desktop', () => {
-    const { button } = setupTest({ size: 'full-md-auto' });
-    expect(button).toHaveClass('w-full');
-    expect(button).toHaveClass('md:w-auto');
-  });
-
-  test('Large size', () => {
-    const { button } = setupTest({ size: 'lg' });
-    expect(button).toHaveClass('px-6');
-    expect(button).toHaveClass('py-3');
-  });
-
-  test('Medium size', () => {
-    const { button } = setupTest({ size: 'md' });
-    expect(button).toHaveClass('px-3');
-    expect(button).toHaveClass('py-3');
-  });
-
-  test('Small size', () => {
-    const { button } = setupTest({ size: 'sm' });
-    expect(button).toHaveClass('text-xs');
-    expect(button).toHaveClass('rounded-md');
-  });
-
-  test('Extra small size', () => {
-    const { button } = setupTest({ size: 'xs' });
-    expect(button).toHaveClass('text-xs');
-  });
-
-  test('Nav size', () => {
-    const { button } = setupTest({ size: 'nav' });
-    expect(button).toHaveClass('w-full');
-  });
-
-  test('Half width size', () => {
-    const { button } = setupTest({ size: 'half' });
-    expect(button.className).toMatch(/w-\[48%\]/);
-  });
-});
-
-describe('Button Min Width', () => {
-  test('Small min width', () => {
-    const { button } = setupTest({ minWidth: 'sm' });
-    expect(button.className).toMatch(/min-w-\[100px\]/);
-  });
-
-  test('Action min width', () => {
-    const { button } = setupTest({ minWidth: 'action' });
-    expect(button.className).toMatch(/min-w-\[150px\]/);
-  });
-
-  test('Modal min width', () => {
-    const { button } = setupTest({ minWidth: 'modal' });
-    expect(button.className).toMatch(/min-w-\[130px\]/);
-  });
-});
-
-describe('Button States', () => {
-  test('Loading state disables button', async () => {
-    const { button, onClick } = setupTest({ loading: true });
-
-    expect(button).toBeDisabled();
-    await userEvent.click(button);
-    expect(onClick).not.toHaveBeenCalled();
-  });
-
-  test('Success state shows checkmark and disables button', async () => {
-    const { button, onClick } = setupTest({ success: true });
-
-    expect(button).toBeDisabled();
-    expect(button).toHaveClass('btn-success');
-    await userEvent.click(button);
-    expect(onClick).not.toHaveBeenCalled();
-
-    // Should have checkmark SVG
-    expect(button.querySelector('svg')).toBeInTheDocument();
-  });
-
-  test('Active state for nav items', () => {
-    const { button } = setupTest({ active: true, size: 'nav' });
-    expect(button).toHaveClass('btn-active');
-  });
-
-  test('Responsive class adds microinteraction', () => {
-    const { button } = setupTest({ responsive: true });
-    expect(button).toHaveClass('btn-responsive');
-  });
-});
-
-describe('Button as Link', () => {
-  test('Renders as anchor when href is provided', () => {
-    render(Button, { props: { href: '/test-link' } });
-    const link = screen.getByRole('link');
-    expect(link).toBeInTheDocument();
-    expect(link).toHaveAttribute('href', '/test-link');
-  });
-
-  test('Does not render as anchor when href is not provided', () => {
-    setupTest();
-    expect(screen.queryByRole('link')).not.toBeInTheDocument();
-    expect(screen.getByRole('button')).toBeInTheDocument();
-  });
-});
-
-describe('Button Justify', () => {
-  test('Between justify for list-item style', () => {
-    const { button } = setupTest({ justify: 'between' });
-    // justify-between class is prefixed with ! to override default
-    expect(button.className).toMatch(/justify-between/);
-  });
-});
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi } from 'vitest';
+import Button from './Button.svelte';
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const onClick = vi.fn();
+  const { component } = render(Button, {
+    props: {
+      ...args,
+      onclick: onClick
+    }
+  });
+  const button = screen.getByRole('button');
+  return {
+    user,
+    component,
+    onClick,
+    button,
+  };
+}
+
+describe('Button Component Tests', () => {
+  test('Renders Button with default props', () => {
+    const { button } = setupTest();
+    expect(button).toBeInTheDocument();
+  });
+
+  test('Handles click event', async () => {
+    const { user, button, onClick } = setupTest();
+    await user.click(button);
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  test('Disables button when disabled prop is true', async () => {
+    const { button, onClick } = setupTest({ disabled: true });
+    expect(button).toBeDisabled();
+    await userEvent.click(button);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  test('Renders with text content', () => {
+    const { container } = render(Button);
+    const button = container.querySelector('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  test('Handles custom classes passed via class prop', () => {
+    const { button } = setupTest({ class: 'custom-class' });
+    expect(button).toHaveClass('custom-class');
+  });
+});
+
+describe('Button Variants', () => {
+  test('Default variant has blue background', () => {
+    const { button } = setupTest();
+    expect(button).toHaveClass('bg-blue-700');
+  });
+
+  test('Blue outline variant', () => {
+    const { button } = setupTest({ variant: 'outline' });
+    expect(button).toHaveClass('text-blue-700');
+    expect(button).toHaveClass('border-blue-700');
+  });
+
+  test('Gray outline variant (alternative)', () => {
+    const { button } = setupTest({ variant: 'alternative' });
+    expect(button).toHaveClass('text-gray-900');
+    expect(button).toHaveClass('border-gray-200');
+  });
+
+  test('Red solid variant', () => {
+    const { button } = setupTest({ variant: 'red' });
+    expect(button).toHaveClass('bg-red-700');
+  });
+
+  test('Red outline variant', () => {
+    const { button } = setupTest({ variant: 'red-outline' });
+    expect(button).toHaveClass('text-red-700');
+    expect(button).toHaveClass('border-red-700');
+  });
+
+  test('Red text variant (ghost-red)', () => {
+    const { button } = setupTest({ variant: 'ghost-red' });
+    expect(button).toHaveClass('text-red-700');
+    expect(button).toHaveClass('bg-transparent');
+  });
+
+  test('Gray text variant (ghost)', () => {
+    const { button } = setupTest({ variant: 'ghost' });
+    expect(button).toHaveClass('text-gray-500');
+    expect(button).toHaveClass('bg-transparent');
+  });
+
+  test('Legacy variant names still work', () => {
+    const { button } = setupTest({ variant: 'blue-solid' });
+    expect(button).toHaveClass('bg-blue-700');
+  });
+});
+
+describe('Button Sizes', () => {
+  test('Full width size', () => {
+    const { button } = setupTest({ size: 'full' });
+    expect(button).toHaveClass('w-full');
+    expect(button).toHaveClass('px-5');
+    expect(button).toHaveClass('py-3');
+  });
+
+  test('Full width on mobile, auto on desktop', () => {
+    const { button } = setupTest({ size: 'full-md-auto' });
+    expect(button).toHaveClass('w-full');
+    expect(button).toHaveClass('md:w-auto');
+  });
+
+  test('XL size', () => {
+    const { button } = setupTest({ size: 'xl' });
+    expect(button).toHaveClass('px-6');
+    expect(button).toHaveClass('py-3.5');
+    expect(button).toHaveClass('text-sm');
+  });
+
+  test('Large size', () => {
+    const { button } = setupTest({ size: 'lg' });
+    expect(button).toHaveClass('px-5');
+    expect(button).toHaveClass('py-3');
+    expect(button).toHaveClass('text-sm');
+  });
+
+  test('Medium size (default)', () => {
+    const { button } = setupTest({ size: 'md' });
+    expect(button).toHaveClass('px-4');
+    expect(button).toHaveClass('py-2.5');
+    expect(button).toHaveClass('text-sm');
+  });
+
+  test('Small size', () => {
+    const { button } = setupTest({ size: 'sm' });
+    expect(button).toHaveClass('px-3');
+    expect(button).toHaveClass('py-2');
+    expect(button).toHaveClass('text-sm');
+  });
+
+  test('Extra small size', () => {
+    const { button } = setupTest({ size: 'xs' });
+    expect(button).toHaveClass('px-3');
+    expect(button).toHaveClass('py-1.5');
+    expect(button).toHaveClass('text-xs');
+  });
+
+  test('Half width size', () => {
+    const { button } = setupTest({ size: 'half' });
+    expect(button).toHaveClass('w-1/2');
+  });
+});
+
+describe('Button States', () => {
+  test('Loading state disables button', async () => {
+    const { button, onClick } = setupTest({ loading: true });
+
+    expect(button).toBeDisabled();
+    await userEvent.click(button);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  test('Success state shows checkmark and disables button', async () => {
+    const { button, onClick } = setupTest({ success: true });
+
+    expect(button).toBeDisabled();
+    expect(button).toHaveClass('bg-green-600');
+    await userEvent.click(button);
+    expect(onClick).not.toHaveBeenCalled();
+
+    // Should have checkmark SVG
+    expect(button.querySelector('svg')).toBeInTheDocument();
+  });
+
+  test('Active state for nav items', () => {
+    const { button } = setupTest({ active: true, variant: 'nav' });
+    expect(button).toHaveClass('text-blue-600');
+  });
+
+  test('Active state for toggle variant', () => {
+    const { button } = setupTest({ active: true, variant: 'toggle' });
+    expect(button).toHaveClass('bg-blue-600');
+  });
+
+  test('Active state for ghost variant', () => {
+    const { button } = setupTest({ active: true, variant: 'ghost' });
+    expect(button).toHaveClass('text-blue-700');
+    expect(button).toHaveClass('bg-blue-50');
+  });
+});
+
+describe('Button as Link', () => {
+  test('Renders as anchor when href is provided', () => {
+    render(Button, { props: { href: '/test-link' } });
+    const link = screen.getByRole('link');
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '/test-link');
+  });
+
+  test('Does not render as anchor when href is not provided', () => {
+    setupTest();
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+});
+
+describe('Button with Trailing Content', () => {
+  test('Button with trailing content uses justify-between', () => {
+    const trailing = () => '→';
+    const { container } = render(Button, {
+      props: {
+        variant: 'menu-item',
+        children: () => 'Menu Item',
+        trailing,
+      }
+    });
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('justify-between');
+  });
+});

package/dist/primitives/Button/Button.stories.svelte

@@ -1,76 +1,76 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import Button from "./Button.svelte";
-  import ButtonSaveDemo from "./ButtonSaveDemo.svelte";
-  import ButtonVariantShowcase from "./ButtonVariantShowcase.svelte";
-
-  import Add from "./../../assets/svg/add-main.svg";
-  import ArrowLeft from "./../../assets/svg/arrow-left-02.svg";
-  import DeleteIcon from "./../../assets/svg/delete-02.svg";
-
-  const { Story } = defineMeta({
-    title: "Components/Button",
-    component: Button,
-    tags: ['autodocs'],
-    argTypes: {
-      variant: {
-        control: "select",
-        options: ["default", "alternative", "outline", "red", "red-outline", "ghost", "ghost-red", "link", "toggle", "icon"],
-      },
-      size: {
-        control: "select",
-        options: ["xs", "sm", "md", "lg", "xl", "xl-medium", "full", "full-md-auto", "half"],
-      },
-      disabled: { control: "boolean" },
-      loading: { control: "boolean" },
-      success: { control: "boolean" },
-      successText: { control: "text" },
-      active: { control: "boolean" },
-    },
-    args: {
-      children: "Button",
-    },
-  });
-</script>
-
-<!-- Full Showcase (uses dedicated component) -->
-<Story name="All Variants Showcase">
-  {#snippet template()}
-    <ButtonVariantShowcase />
-  {/snippet}
-</Story>
-
-<!-- Interactive Playground -->
-<Story name="Playground" args={{ children: "Click me" }} />
-
-<!-- ========== VARIANTS ========== -->
-<Story name="default" args={{ variant: "default", children: "Primary Button" }} />
-<Story name="alternative" args={{ variant: "alternative", children: "Secondary" }} />
-<Story name="outline" args={{ variant: "outline", children: "Outline" }} />
-<Story name="ghost" args={{ variant: "ghost", children: "Ghost" }} />
-<Story name="link" args={{ variant: "link", children: "Link style" }} />
-<Story name="red" args={{ variant: "red", children: "Delete" }} />
-<Story name="red-outline" args={{ variant: "red-outline", children: "Remove" }} />
-<Story name="ghost-red" args={{ variant: "ghost-red", children: "Sign out" }} />
-<Story name="toggle" args={{ variant: "toggle", children: "Filter" }} />
-<Story name="toggle (active)" args={{ variant: "toggle", active: true, children: "Selected" }} />
-
-<!-- ========== SIZES ========== -->
-<Story name="Size: xs" args={{ size: "xs", children: "Extra Small" }} />
-<Story name="Size: sm" args={{ size: "sm", children: "Small" }} />
-<Story name="Size: md" args={{ size: "md", children: "Medium" }} />
-<Story name="Size: lg" args={{ size: "lg", children: "Large" }} />
-<Story name="Size: xl" args={{ size: "xl", children: "Extra Large" }} />
-<Story name="Size: full" args={{ size: "full", children: "Full Width" }} />
-<Story name="Size: xl-medium" args={{ size: "xl-medium", children: "Login Button" }} />
-<Story name="Size: half" args={{ size: "half", children: "Half Width" }} />
-
-<!-- ========== STATES ========== -->
-<Story name="Disabled" args={{ disabled: true, children: "Disabled" }} />
-<Story name="Loading" args={{ loading: true, children: "Saving..." }} />
-<Story name="Success" args={{ success: true, successText: "Saved!", children: "Save" }} />
-
-<!-- ========== INTERACTIVE DEMO ========== -->
-<Story name="Save Flow Demo" asChild>
-  <ButtonSaveDemo />
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import Button from "./Button.svelte";
+  import ButtonSaveDemo from "./ButtonSaveDemo.svelte";
+  import ButtonVariantShowcase from "./ButtonVariantShowcase.svelte";
+
+  import Add from "./../../assets/svg/add-main.svg";
+  import ArrowLeft from "./../../assets/svg/arrow-left-02.svg";
+  import DeleteIcon from "./../../assets/svg/delete-02.svg";
+
+  const { Story } = defineMeta({
+    title: "Components/Button",
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: {
+      variant: {
+        control: "select",
+        options: ["default", "alternative", "outline", "red", "red-outline", "ghost", "ghost-red", "link", "toggle", "icon"],
+      },
+      size: {
+        control: "select",
+        options: ["xs", "sm", "md", "lg", "xl", "xl-medium", "full", "full-md-auto", "half"],
+      },
+      disabled: { control: "boolean" },
+      loading: { control: "boolean" },
+      success: { control: "boolean" },
+      successText: { control: "text" },
+      active: { control: "boolean" },
+    },
+    args: {
+      children: "Button",
+    },
+  });
+</script>
+
+<!-- Full Showcase (uses dedicated component) -->
+<Story name="All Variants Showcase">
+  {#snippet template()}
+    <ButtonVariantShowcase />
+  {/snippet}
+</Story>
+
+<!-- Interactive Playground -->
+<Story name="Playground" args={{ children: "Click me" }} />
+
+<!-- ========== VARIANTS ========== -->
+<Story name="default" args={{ variant: "default", children: "Primary Button" }} />
+<Story name="alternative" args={{ variant: "alternative", children: "Secondary" }} />
+<Story name="outline" args={{ variant: "outline", children: "Outline" }} />
+<Story name="ghost" args={{ variant: "ghost", children: "Ghost" }} />
+<Story name="link" args={{ variant: "link", children: "Link style" }} />
+<Story name="red" args={{ variant: "red", children: "Delete" }} />
+<Story name="red-outline" args={{ variant: "red-outline", children: "Remove" }} />
+<Story name="ghost-red" args={{ variant: "ghost-red", children: "Sign out" }} />
+<Story name="toggle" args={{ variant: "toggle", children: "Filter" }} />
+<Story name="toggle (active)" args={{ variant: "toggle", active: true, children: "Selected" }} />
+
+<!-- ========== SIZES ========== -->
+<Story name="Size: xs" args={{ size: "xs", children: "Extra Small" }} />
+<Story name="Size: sm" args={{ size: "sm", children: "Small" }} />
+<Story name="Size: md" args={{ size: "md", children: "Medium" }} />
+<Story name="Size: lg" args={{ size: "lg", children: "Large" }} />
+<Story name="Size: xl" args={{ size: "xl", children: "Extra Large" }} />
+<Story name="Size: full" args={{ size: "full", children: "Full Width" }} />
+<Story name="Size: xl-medium" args={{ size: "xl-medium", children: "Login Button" }} />
+<Story name="Size: half" args={{ size: "half", children: "Half Width" }} />
+
+<!-- ========== STATES ========== -->
+<Story name="Disabled" args={{ disabled: true, children: "Disabled" }} />
+<Story name="Loading" args={{ loading: true, children: "Saving..." }} />
+<Story name="Success" args={{ success: true, successText: "Saved!", children: "Save" }} />
+
+<!-- ========== INTERACTIVE DEMO ========== -->
+<Story name="Save Flow Demo" asChild>
+  <ButtonSaveDemo />
+</Story>