@reshape-biotech/design-system 2.4.1 → 2.5.1

package/dist/components/stat-card/StatCard.test.js

@@ -1,54 +0,0 @@
-import { render, fireEvent, screen } from '@testing-library/svelte';
-import { tick } from 'svelte';
-import StatCard from './StatCard.svelte';
-import '@testing-library/jest-dom';
-import { describe, it, expect, vi } from 'vitest';
-describe('StatCard', () => {
-    it('should focus the input field when the pencil edit icon is clicked', async () => {
-        render(StatCard, {
-            props: {
-                title: 'Test Stat',
-                value: 'Initial Value',
-                editable: true,
-                onsubmit: vi.fn(),
-            },
-        });
-        const pencilButton = screen.getByRole('button');
-        await fireEvent.click(pencilButton);
-        // Wait for Svelte's reactivity and the $effect with tick() to apply focus
-        await tick();
-        const inputField = screen.getByRole('textbox');
-        expect(inputField).toHaveFocus();
-    });
-    it('should focus the input field when the card body is clicked', async () => {
-        render(StatCard, {
-            props: {
-                title: 'Clickable Stat',
-                value: 'Initial Value',
-                editable: true,
-                onsubmit: vi.fn(),
-            },
-        });
-        const cardBody = screen.getByTestId('stat-card-body');
-        await fireEvent.click(cardBody);
-        await tick(); // Wait for Svelte's reactivity
-        const inputField = screen.getByRole('textbox');
-        expect(inputField).toHaveFocus();
-    });
-    it('should not focus the input field when the card body is clicked, out of editable state', async () => {
-        render(StatCard, {
-            props: {
-                title: 'Clickable Stat',
-                value: 'Initial Value',
-                editable: false,
-                onsubmit: vi.fn(),
-            },
-        });
-        const cardBody = screen.getByTestId('stat-card-body');
-        await fireEvent.click(cardBody);
-        await tick(); // Wait for Svelte's reactivity
-        // When not editable, the input field should not be rendered
-        const inputField = screen.queryByRole('textbox');
-        expect(inputField).toBeNull();
-    });
-});

package/dist/components/table/Table.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/table/Table.test.js

@@ -1,97 +0,0 @@
-import { render, screen } from '@testing-library/svelte';
-import Table from './Table.test.svelte';
-const users = [
-    {
-        name: 'John Doe',
-        age: 25,
-        role: 'admin',
-    },
-    {
-        name: 'Jane Smith',
-        age: 32,
-        role: 'member',
-    },
-    {
-        name: 'Michael Johnson',
-        age: 41,
-        role: 'deactivated',
-    },
-    {
-        name: 'Emily Brown',
-        age: 28,
-        role: 'member',
-    },
-    {
-        name: 'David Lee',
-        age: 37,
-        role: 'admin',
-    },
-    {
-        name: 'Sarah Wilson',
-        age: 29,
-        role: 'member',
-    },
-    {
-        name: 'Robert Taylor',
-        age: 45,
-        role: 'deactivated',
-    },
-    {
-        name: 'Lisa Anderson',
-        age: 33,
-        role: 'member',
-    },
-    {
-        name: 'James Martinez',
-        age: 39,
-        role: 'admin',
-    },
-    {
-        name: 'Jennifer Garcia',
-        age: 31,
-        role: 'deactivated',
-    },
-];
-describe('Table Component', () => {
-    it('renders the table with correct headers', () => {
-        render(Table, { props: { users } });
-        expect(screen.getByText('Name')).toBeInTheDocument();
-        expect(screen.getByText('Age')).toBeInTheDocument();
-        expect(screen.getByText('Role')).toBeInTheDocument();
-    });
-    it('renders table rows with user data', () => {
-        render(Table, { props: { users } });
-        users.forEach((user) => {
-            expect(screen.getByTestId(`user-${user.name}`)).toBeInTheDocument();
-            expect(screen.getByTestId(`user-${user.name}-age`)).toBeInTheDocument();
-            expect(screen.getByTestId(`user-${user.name}-role`)).toBeInTheDocument();
-        });
-    });
-    it('applies disabled class to deactivated users', () => {
-        render(Table, { props: { users } });
-        const deactivatedUser = screen.getByText('Michael Johnson');
-        expect(deactivatedUser.closest('tr')).toHaveClass('disabled');
-    });
-    it('renders phone icon button for admin users', () => {
-        render(Table, { props: { users, userRole: 'admin' } });
-        const phoneIcon = screen.getAllByTestId('phone-icon');
-        expect(phoneIcon).toHaveLength(users.length);
-    });
-    it('does not render phone icon button for non-admin users', () => {
-        render(Table, { props: { users, userRole: 'member' } });
-        const phoneIcon = screen.queryAllByTestId('phone-icon');
-        expect(phoneIcon).toHaveLength(0);
-    });
-    it('applies disabled styles to td elements when disabled', () => {
-        render(Table, { props: { users, userRole: 'member' } });
-        const deactivatedUser = screen.getByText('Michael Johnson');
-        const tr = deactivatedUser.closest('tr');
-        if (tr) {
-            expect(tr.classList.contains('disabled')).toBe(true);
-            expect(tr.classList.contains('[&.disabled]:text-tertiary')).toBe(true);
-        }
-        else {
-            throw new Error('Tr element not found');
-        }
-    });
-});

package/dist/components/table/Table.test.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-  import Table from './Table.svelte';
-  import IconButton from '../icon-button/IconButton.svelte';
-  import { Icon } from '../icons';
-
-  interface Props {
-    users?: { name: string; age: number; role: string }[];
-    userRole?: 'admin' | 'member' | 'deactivated';
-  }
-
-  let { users = [], userRole = 'admin' }: Props = $props();
-</script>
-
-<Table>
-  {#snippet children({ THead, TBody, Tr, Th, Td })}
-    <THead>
-      <Tr>
-        <Th>Name</Th>
-        <Th>Age</Th>
-        <Th class="w-[100px]">Role</Th>
-        <Th class="w-6"></Th>
-      </Tr>
-    </THead>
-    <TBody>
-      {#each users as user}
-        <Tr disabled={user.role === 'deactivated'}>
-          <Td dataTestId={`user-${user.name}`}>{user.name}</Td>
-          <Td dataTestId={`user-${user.name}-age`}>{user.age}</Td>
-          <Td dataTestId={`user-${user.name}-role`}>{user.role}</Td>
-          {#if 'admin' === userRole}
-            <Td dataTestId="phone-icon"><IconButton><Icon iconName="Phone" /></IconButton></Td>
-          {/if}
-        </Tr>
-      {/each}
-    </TBody>
-  {/snippet}
-</Table>

package/dist/components/table/Table.test.svelte.d.ts

@@ -1,12 +0,0 @@
-import Table from './Table.svelte';
-interface Props {
-    users?: {
-        name: string;
-        age: number;
-        role: string;
-    }[];
-    userRole?: 'admin' | 'member' | 'deactivated';
-}
-declare const Table: import("svelte").Component<Props, {}, "">;
-type Table = ReturnType<typeof Table>;
-export default Table;

package/dist/components/textarea/Textarea.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/textarea/Textarea.test.js

@@ -1,90 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/svelte';
-import Textarea from './Textarea.svelte';
-import { describe, it, expect, vi } from 'vitest';
-describe('Textarea component', () => {
-    it('renders with default props', () => {
-        render(Textarea, { props: { value: '' } });
-        const textarea = screen.getByRole('textbox');
-        expect(textarea).toBeInTheDocument();
-        expect(textarea).not.toHaveClass('!border-error'); // Default valid state
-    });
-    it('binds the value correctly', async () => {
-        const { component } = render(Textarea, { props: { value: 'Initial' } });
-        const textarea = screen.getByRole('textbox');
-        expect(textarea.value).toBe('Initial');
-        // Simulate user typing
-        await fireEvent.input(textarea, { target: { value: 'Changed' } });
-        expect(textarea.value).toBe('Changed'); // Check the DOM element's value directly
-    });
-    it('applies placeholder, name, required, readonly, maxlength attributes', () => {
-        render(Textarea, {
-            props: {
-                value: '',
-                placeholder: 'Enter text',
-                name: 'myTextarea',
-                required: true,
-                readonly: true,
-                maxlength: 50,
-            },
-        });
-        const textarea = screen.getByRole('textbox');
-        expect(textarea).toHaveAttribute('placeholder', 'Enter text');
-        expect(textarea).toHaveAttribute('name', 'myTextarea');
-        expect(textarea).toBeRequired();
-        expect(textarea).toHaveAttribute('readonly');
-        expect(textarea).toHaveAttribute('maxlength', '50');
-    });
-    it('calls onInput, onBlur, onKeydown event handlers', async () => {
-        const handleInput = vi.fn();
-        const handleBlur = vi.fn();
-        const handleKeydown = vi.fn();
-        render(Textarea, {
-            props: {
-                value: '',
-                oninput: handleInput,
-                onblur: handleBlur,
-                onkeydown: handleKeydown,
-            },
-        });
-        const textarea = screen.getByRole('textbox');
-        await fireEvent.input(textarea, { target: { value: 'test' } });
-        expect(handleInput).toHaveBeenCalledTimes(1);
-        await fireEvent.blur(textarea);
-        expect(handleBlur).toHaveBeenCalledTimes(1);
-        await fireEvent.keyDown(textarea, { key: 'Enter' });
-        expect(handleKeydown).toHaveBeenCalledTimes(1);
-    });
-    it('auto-resizes correctly on input', async () => {
-        // Mock scrollHeight to simulate content height
-        const mockScrollHeight = 200;
-        Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
-            configurable: true,
-            get() {
-                return mockScrollHeight;
-            },
-        });
-        render(Textarea, { props: { value: 'Short', size: 'dynamic' } });
-        const textarea = screen.getByRole('textbox');
-        // Simulate typing more content
-        await fireEvent.input(textarea, {
-            target: {
-                value: 'This is a much longer line of text that should definitely exceed the initial height and cause a resize.',
-            },
-        });
-        // Verify height was set to scrollHeight
-        expect(textarea.style.height).toBe(`${mockScrollHeight}px`);
-    });
-    it('calls focus function when exported focus() is called', () => {
-        const { component } = render(Textarea, { props: { value: '' } });
-        const textarea = screen.getByRole('textbox');
-        vi.spyOn(textarea, 'focus');
-        component.focus();
-        expect(textarea.focus).toHaveBeenCalled();
-    });
-    it('applies custom class', () => {
-        const customClass = 'my-custom-textarea';
-        render(Textarea, { props: { value: '', class: customClass } });
-        const textarea = screen.getByRole('textbox');
-        expect(textarea).toHaveClass(customClass);
-    });
-});

package/dist/components/toggle-icon-button/ToggleIconButton.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/toggle-icon-button/ToggleIconButton.test.js

@@ -1,100 +0,0 @@
-import { render, fireEvent } from '@testing-library/svelte';
-import { describe, it, expect, vi } from 'vitest';
-import ToggleIconButton from './ToggleIconButton.svelte';
-describe('ToggleIconButton component', () => {
-    it('renders correctly', () => {
-        const { getByRole } = render(ToggleIconButton);
-        expect(getByRole('button')).toBeTruthy();
-    });
-    it('applies the correct variant class for secondary (default)', () => {
-        const { getByRole } = render(ToggleIconButton);
-        const button = getByRole('button');
-        expect(button.classList.toString()).toContain('bg-neutral text-icon-primary');
-    });
-    it('applies the correct variant class for primary-inverse', () => {
-        const { getByRole } = render(ToggleIconButton, {
-            props: {
-                variant: 'primary-inverse',
-            },
-        });
-        const button = getByRole('button');
-        expect(button.classList.toString()).toContain('bg-base-inverse text-icon-primary-inverse');
-    });
-    it('applies the active state class when isActive is true for secondary', () => {
-        const { getByRole, container } = render(ToggleIconButton, {
-            props: {
-                variant: 'secondary',
-                isActive: true,
-            },
-        });
-        const activeElement = container.querySelector('div');
-        expect(activeElement?.classList.toString()).toContain('bg-neutral-hover text-icon-primary');
-    });
-    it('applies the active state class when isActive is true for primary-inverse', () => {
-        const { getByRole, container } = render(ToggleIconButton, {
-            props: {
-                variant: 'primary-inverse',
-                isActive: true,
-            },
-        });
-        const activeElement = container.querySelector('div');
-        expect(activeElement?.classList.toString()).toContain('bg-accent-inverse text-icon-primary-inverse');
-    });
-    it('applies the size class', () => {
-        const { getByRole } = render(ToggleIconButton, {
-            props: {
-                size: 'lg',
-            },
-        });
-        const button = getByRole('button');
-        expect(button.classList.toString()).toContain('h-12 w-12');
-    });
-    it('applies the rounded-full class when rounded is true', () => {
-        const { getByRole } = render(ToggleIconButton, {
-            props: {
-                rounded: true,
-            },
-        });
-        const button = getByRole('button');
-        expect(button.classList.contains('rounded-full')).toBe(true);
-    });
-    it('applies the rounded-md class when rounded is false', () => {
-        const { getByRole } = render(ToggleIconButton, {
-            props: {
-                rounded: false,
-            },
-        });
-        const button = getByRole('button');
-        expect(button.classList.contains('rounded-md')).toBe(true);
-    });
-    it('calls onclick handler when clicked', async () => {
-        const handleClick = vi.fn();
-        const { getByRole } = render(ToggleIconButton, {
-            props: {
-                onclick: handleClick,
-            },
-        });
-        const button = getByRole('button');
-        await fireEvent.click(button);
-        expect(handleClick).toHaveBeenCalledTimes(1);
-    });
-    it('is disabled when disabled prop is true', () => {
-        const { getByRole } = render(ToggleIconButton, {
-            props: {
-                disabled: true,
-            },
-        });
-        const button = getByRole('button');
-        expect(button.hasAttribute('disabled')).toBe(true);
-        expect(button.classList.contains('disabled:bg-neutral')).toBe(true);
-    });
-    it('shows spinner when loading is true', () => {
-        const { container } = render(ToggleIconButton, {
-            props: {
-                loading: true,
-            },
-        });
-        // Spinner should be present
-        expect(container.innerHTML).toContain('spinner');
-    });
-});

package/dist/components/tooltip/Tooltip.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/tooltip/Tooltip.test.js

@@ -1,81 +0,0 @@
-import { render } from '@testing-library/svelte';
-import { describe, it, expect } from 'vitest';
-import TooltipTest from './TooltipTest.svelte';
-// We test via a wrapper component because testing Svelte 5 snippets directly is complex
-describe('Tooltip component', () => {
-    it('renders trigger content when forced open', () => {
-        const { getByText } = render(TooltipTest, {
-            props: {
-                forceOpen: true,
-                triggerText: 'Hover me',
-                contentText: 'Tooltip content',
-            },
-        });
-        expect(getByText('Hover me')).toBeInTheDocument();
-        expect(getByText('Tooltip content')).toBeInTheDocument();
-    });
-    it('applies custom class when forced open', () => {
-        render(TooltipTest, {
-            props: {
-                forceOpen: true,
-                class: 'custom-tooltip',
-                triggerText: 'Hover me',
-                contentText: 'Tooltip content',
-            },
-        });
-        // Tooltip content is portaled to document.body, so we search the entire document
-        const tooltipContent = document.querySelector('.custom-tooltip');
-        expect(tooltipContent).toBeInTheDocument();
-    });
-    it('applies design system tokens correctly when forced open', () => {
-        render(TooltipTest, {
-            props: {
-                forceOpen: true,
-                triggerText: 'Hover me',
-                contentText: 'Tooltip content',
-            },
-        });
-        // Tooltip content is portaled to document.body
-        const tooltipContent = document.querySelector('.bg-base-inverse');
-        expect(tooltipContent).toBeInTheDocument();
-        const textElement = document.querySelector('.text-primary-inverse');
-        expect(textElement).toBeInTheDocument();
-    });
-    it('renders with arrow by default when forced open', () => {
-        render(TooltipTest, {
-            props: {
-                forceOpen: true,
-                triggerText: 'Hover me',
-                contentText: 'Tooltip content',
-            },
-        });
-        // Arrow is part of the portaled content - bits-ui renders it as an SVG
-        const arrow = document.querySelector('svg[data-arrow]') || document.querySelector('[data-arrow]');
-        expect(arrow).toBeInTheDocument();
-    });
-    it('hides arrow when showArrow is false', () => {
-        render(TooltipTest, {
-            props: {
-                forceOpen: true,
-                showArrow: false,
-                triggerText: 'Hover me',
-                contentText: 'Tooltip content',
-            },
-        });
-        const arrow = document.querySelector('svg[data-arrow]') || document.querySelector('[data-arrow]');
-        expect(arrow).toBeNull();
-    });
-    it('applies correct placement when forced open', () => {
-        render(TooltipTest, {
-            props: {
-                forceOpen: true,
-                placement: 'bottom',
-                triggerText: 'Hover me',
-                contentText: 'Tooltip content',
-            },
-        });
-        // Check data attribute on portaled content
-        const tooltipContent = document.querySelector('[data-side="bottom"]');
-        expect(tooltipContent).toBeInTheDocument();
-    });
-});