@getmicdrop/svelte-components 1.0.2 → 1.0.4

package/dist/components/Button/Button.spec.js

@@ -0,0 +1,211 @@
+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/);
+  });
+});

package/dist/components/Button/Button.stories.svelte

@@ -0,0 +1,111 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import Button from "./Button.svelte";
+  import ButtonSaveDemo from "./ButtonSaveDemo.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";
+
+  export const meta = {
+    title: "Components/Button",
+    component: Button,
+    argTypes: {
+      variant: {
+        control: "select",
+        options: ["blue-solid", "blue-outline", "gray-outline", "red-solid", "red-outline", "red-text"],
+      },
+      size: {
+        control: "select",
+        options: ["", "full", "lg", "md", "sm", "xs"],
+      },
+      disabled: { control: "boolean" },
+      loading: { control: "boolean" },
+      success: { control: "boolean" },
+      className: { control: "text" },
+    },
+  };
+
+  function handleAlert() {
+    alert("Hii, This is Function Alert");
+  }
+</script>
+
+<Template let:args>
+  <Button on:click={handleAlert} {...args}>{args.label}</Button>
+</Template>
+
+<!-- Primary (Blue Solid) Buttons -->
+<Story name="Blue Solid (Default)" args={{ label: "Primary Button" }} />
+
+<Story name="Blue Solid with Icon">
+  <Button on:click={handleAlert} beforeIcon={Add}>Add New</Button>
+</Story>
+
+<!-- Blue Outline Buttons -->
+<Story name="Blue Outline" args={{ label: "View Details", variant: "blue-outline" }} />
+
+<!-- Gray Outline Buttons -->
+<Story name="Gray Outline" args={{ label: "Cancel", variant: "gray-outline" }} />
+
+<!-- Red Solid Buttons -->
+<Story name="Red Solid" args={{ label: "Delete", variant: "red-solid" }} />
+
+<!-- Red Outline Buttons -->
+<Story name="Red Outline">
+  <Button variant="red-outline" on:click={handleAlert} beforeIcon={DeleteIcon}>
+    Delete Item
+  </Button>
+</Story>
+
+<!-- Red Text Buttons -->
+<Story name="Red Text">
+  <Button variant="red-text" on:click={handleAlert}>
+    Sign out
+  </Button>
+</Story>
+
+<!-- Size Variants -->
+<Story name="Size: Full Width" args={{ label: "Full Width Button", size: "full" }} />
+<Story name="Size: Large" args={{ label: "Large Button", size: "lg" }} />
+<Story name="Size: Medium" args={{ label: "Medium Button", size: "md" }} />
+<Story name="Size: Small" args={{ label: "Small Button", size: "sm" }} />
+<Story name="Size: Extra Small" args={{ label: "XS Button", size: "xs" }} />
+
+<!-- States -->
+<Story name="Disabled State" args={{ label: "Disabled", disabled: true }} />
+
+<Story name="Loading State" args={{ label: "Save", loading: true }} />
+
+<Story name="Success State" args={{ label: "Save", success: true }} />
+
+<Story name="Save Button Flow">
+  <ButtonSaveDemo />
+</Story>
+
+<!-- All Variants Grid -->
+<Story name="All Variants">
+  <div class="space-y-4 p-4">
+    <h3 class="text-lg font-semibold">All Button Variants</h3>
+    <div class="flex flex-wrap gap-4">
+      <Button>blue-solid (default)</Button>
+      <Button variant="blue-outline">blue-outline</Button>
+      <Button variant="gray-outline">gray-outline</Button>
+      <Button variant="red-solid">red-solid</Button>
+      <Button variant="red-outline">red-outline</Button>
+      <Button variant="red-text">red-text</Button>
+    </div>
+
+    <h3 class="text-lg font-semibold mt-6">All Sizes</h3>
+    <div class="space-y-2">
+      <div><Button size="full">size="full"</Button></div>
+      <div class="flex flex-wrap gap-2 items-end">
+        <Button size="lg">size="lg"</Button>
+        <Button size="md">size="md"</Button>
+        <Button>default</Button>
+        <Button size="sm">size="sm"</Button>
+        <Button size="xs">size="xs"</Button>
+      </div>
+    </div>
+  </div>
+</Story>

package/dist/components/Button/Button.stories.svelte.d.ts

@@ -0,0 +1,59 @@
+export namespace meta {
+    export let title: string;
+    export { Button as component };
+    export namespace argTypes {
+        namespace variant {
+            let control: string;
+            let options: string[];
+        }
+        namespace size {
+            let control_1: string;
+            export { control_1 as control };
+            let options_1: string[];
+            export { options_1 as options };
+        }
+        namespace disabled {
+            let control_2: string;
+            export { control_2 as control };
+        }
+        namespace loading {
+            let control_3: string;
+            export { control_3 as control };
+        }
+        namespace success {
+            let control_4: string;
+            export { control_4 as control };
+        }
+        namespace className {
+            let control_5: string;
+            export { control_5 as control };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  ButtonProps */
+/** @typedef {typeof __propDef.events}  ButtonEvents */
+/** @typedef {typeof __propDef.slots}  ButtonSlots */
+export default class Button extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+import Button from "./Button.svelte";
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=Button.stories.svelte.d.ts.map

package/dist/components/Button/Button.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Button/Button.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqHA,qDAAqD;AACrD,uDAAuD;AACvD,qDAAqD;AAErD;;;;;CACC;0BALa,OAAO,SAAS,CAAC,KAAK;2BACtB,OAAO,SAAS,CAAC,MAAM;0BACvB,OAAO,SAAS,CAAC,KAAK;mBAnHf,iBAAiB;gCAJN,QAAQ;AAoHxC;;;;;;;;;;EAAgF"}