@getmicdrop/svelte-components 2.0.4 → 2.0.6

package/dist/components/Icons/Icon.spec.js

@@ -1,175 +1,175 @@
-import { render, screen } from "@testing-library/svelte";
-import { expect, describe, test } from "vitest";
-import Icon from "./Icon.svelte";
-
-describe("Icon Component Tests", () => {
-  test("Renders Home icon", () => {
-    const { container } = render(Icon, { props: { name: "Home" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Shows icon", () => {
-    const { container } = render(Icon, { props: { name: "Shows" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Availability icon", () => {
-    const { container } = render(Icon, { props: { name: "Availability" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Profile icon", () => {
-    const { container } = render(Icon, { props: { name: "Profile" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Payment icon", () => {
-    const { container } = render(Icon, { props: { name: "Payment" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Notification icon", () => {
-    const { container } = render(Icon, { props: { name: "Notification" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Signout icon", () => {
-    const { container } = render(Icon, { props: { name: "Signout" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ChevronLeft icon", () => {
-    const { container } = render(Icon, { props: { name: "ChevronLeft" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ChevronRight icon", () => {
-    const { container } = render(Icon, { props: { name: "ChevronRight" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders CheckCircle icon", () => {
-    const { container } = render(Icon, { props: { name: "CheckCircle" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ErrorCircle icon", () => {
-    const { container } = render(Icon, { props: { name: "ErrorCircle" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ArrowLeft icon", () => {
-    const { container } = render(Icon, { props: { name: "ArrowLeft" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Back icon", () => {
-    const { container } = render(Icon, { props: { name: "Back" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Shows error message for unknown icon", () => {
-    render(Icon, { props: { name: "UnknownIcon" } });
-    expect(screen.getByText('Icon "UnknownIcon" not found.')).toBeInTheDocument();
-  });
-
-  test("Default size is 20", () => {
-    const { container } = render(Icon, { props: { name: "Home" } });
-    const svg = container.querySelector("svg");
-    // Check width or height attribute
-    expect(svg).toHaveAttribute("width", "20");
-  });
-
-  test("Accepts custom size prop", () => {
-    const { container } = render(Icon, { props: { name: "Home", size: "32" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveAttribute("width", "32");
-  });
-
-  test("Default color is currentColor", () => {
-    const { container } = render(Icon, { props: { name: "Home" } });
-    const svg = container.querySelector("svg");
-    // Color is typically applied to stroke or fill
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Accepts custom color prop", () => {
-    const { container } = render(Icon, { props: { name: "Home", color: "red" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders More icon", () => {
-    const { container } = render(Icon, { props: { name: "More" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Info icon", () => {
-    const { container } = render(Icon, { props: { name: "Info" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Message icon", () => {
-    const { container } = render(Icon, { props: { name: "Message" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Reload icon", () => {
-    const { container } = render(Icon, { props: { name: "Reload" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Copy icon", () => {
-    const { container } = render(Icon, { props: { name: "Copy" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Cross icon", () => {
-    const { container } = render(Icon, { props: { name: "Cross" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ArrowRight icon", () => {
-    const { container } = render(Icon, { props: { name: "ArrowRight" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders DownArrow icon", () => {
-    const { container } = render(Icon, { props: { name: "DownArrow" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders MoreHori icon", () => {
-    const { container } = render(Icon, { props: { name: "MoreHori" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders CheckCircleOutline icon", () => {
-    const { container } = render(Icon, { props: { name: "CheckCircleOutline" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-});
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import Icon from "./Icon.svelte";
+
+describe("Icon Component Tests", () => {
+  test("Renders Home icon", () => {
+    const { container } = render(Icon, { props: { name: "Home" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Shows icon", () => {
+    const { container } = render(Icon, { props: { name: "Shows" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Availability icon", () => {
+    const { container } = render(Icon, { props: { name: "Availability" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Profile icon", () => {
+    const { container } = render(Icon, { props: { name: "Profile" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Payment icon", () => {
+    const { container } = render(Icon, { props: { name: "Payment" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Notification icon", () => {
+    const { container } = render(Icon, { props: { name: "Notification" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Signout icon", () => {
+    const { container } = render(Icon, { props: { name: "Signout" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ChevronLeft icon", () => {
+    const { container } = render(Icon, { props: { name: "ChevronLeft" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ChevronRight icon", () => {
+    const { container } = render(Icon, { props: { name: "ChevronRight" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders CheckCircle icon", () => {
+    const { container } = render(Icon, { props: { name: "CheckCircle" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ErrorCircle icon", () => {
+    const { container } = render(Icon, { props: { name: "ErrorCircle" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ArrowLeft icon", () => {
+    const { container } = render(Icon, { props: { name: "ArrowLeft" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Back icon", () => {
+    const { container } = render(Icon, { props: { name: "Back" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Shows error message for unknown icon", () => {
+    render(Icon, { props: { name: "UnknownIcon" } });
+    expect(screen.getByText('Icon "UnknownIcon" not found.')).toBeInTheDocument();
+  });
+
+  test("Default size is 20", () => {
+    const { container } = render(Icon, { props: { name: "Home" } });
+    const svg = container.querySelector("svg");
+    // Check width or height attribute
+    expect(svg).toHaveAttribute("width", "20");
+  });
+
+  test("Accepts custom size prop", () => {
+    const { container } = render(Icon, { props: { name: "Home", size: "32" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveAttribute("width", "32");
+  });
+
+  test("Default color is currentColor", () => {
+    const { container } = render(Icon, { props: { name: "Home" } });
+    const svg = container.querySelector("svg");
+    // Color is typically applied to stroke or fill
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Accepts custom color prop", () => {
+    const { container } = render(Icon, { props: { name: "Home", color: "red" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders More icon", () => {
+    const { container } = render(Icon, { props: { name: "More" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Info icon", () => {
+    const { container } = render(Icon, { props: { name: "Info" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Message icon", () => {
+    const { container } = render(Icon, { props: { name: "Message" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Reload icon", () => {
+    const { container } = render(Icon, { props: { name: "Reload" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Copy icon", () => {
+    const { container } = render(Icon, { props: { name: "Copy" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Cross icon", () => {
+    const { container } = render(Icon, { props: { name: "Cross" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ArrowRight icon", () => {
+    const { container } = render(Icon, { props: { name: "ArrowRight" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders DownArrow icon", () => {
+    const { container } = render(Icon, { props: { name: "DownArrow" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders MoreHori icon", () => {
+    const { container } = render(Icon, { props: { name: "MoreHori" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders CheckCircleOutline icon", () => {
+    const { container } = render(Icon, { props: { name: "CheckCircleOutline" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+});

package/dist/components/Icons/MoreHori.spec.js

@@ -1,67 +1,67 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/svelte';
-import MoreHori from './MoreHori.svelte';
-
-describe('MoreHori Icon', () => {
-  it('renders an svg element', () => {
-    const { container } = render(MoreHori);
-    const svg = container.querySelector('svg');
-    expect(svg).toBeTruthy();
-  });
-
-  it('uses default size of 20', () => {
-    const { container } = render(MoreHori);
-    const svg = container.querySelector('svg');
-    expect(svg.getAttribute('width')).toBe('20');
-    expect(svg.getAttribute('height')).toBe('20');
-  });
-
-  it('accepts custom size', () => {
-    const { container } = render(MoreHori, { props: { size: '32' } });
-    const svg = container.querySelector('svg');
-    expect(svg.getAttribute('width')).toBe('32');
-    expect(svg.getAttribute('height')).toBe('32');
-  });
-
-  it('uses default color of currentColor', () => {
-    const { container } = render(MoreHori);
-    const path = container.querySelector('path');
-    expect(path.getAttribute('stroke')).toBe('currentColor');
-  });
-
-  it('accepts custom color', () => {
-    const { container } = render(MoreHori, { props: { color: 'red' } });
-    const path = container.querySelector('path');
-    expect(path.getAttribute('stroke')).toBe('red');
-  });
-
-  it('renders three horizontal dots (three paths)', () => {
-    const { container } = render(MoreHori);
-    const paths = container.querySelectorAll('path');
-    expect(paths.length).toBe(3);
-  });
-
-  it('has correct viewBox', () => {
-    const { container } = render(MoreHori);
-    const svg = container.querySelector('svg');
-    expect(svg.getAttribute('viewBox')).toBe('0 0 16 16');
-  });
-
-  it('has stroke-linecap="round" on paths', () => {
-    const { container } = render(MoreHori);
-    const path = container.querySelector('path');
-    expect(path.getAttribute('stroke-linecap')).toBe('round');
-  });
-
-  it('has stroke-linejoin="round" on paths', () => {
-    const { container } = render(MoreHori);
-    const path = container.querySelector('path');
-    expect(path.getAttribute('stroke-linejoin')).toBe('round');
-  });
-
-  it('has fill="none" on svg', () => {
-    const { container } = render(MoreHori);
-    const svg = container.querySelector('svg');
-    expect(svg.getAttribute('fill')).toBe('none');
-  });
-});
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import MoreHori from './MoreHori.svelte';
+
+describe('MoreHori Icon', () => {
+  it('renders an svg element', () => {
+    const { container } = render(MoreHori);
+    const svg = container.querySelector('svg');
+    expect(svg).toBeTruthy();
+  });
+
+  it('uses default size of 20', () => {
+    const { container } = render(MoreHori);
+    const svg = container.querySelector('svg');
+    expect(svg.getAttribute('width')).toBe('20');
+    expect(svg.getAttribute('height')).toBe('20');
+  });
+
+  it('accepts custom size', () => {
+    const { container } = render(MoreHori, { props: { size: '32' } });
+    const svg = container.querySelector('svg');
+    expect(svg.getAttribute('width')).toBe('32');
+    expect(svg.getAttribute('height')).toBe('32');
+  });
+
+  it('uses default color of currentColor', () => {
+    const { container } = render(MoreHori);
+    const path = container.querySelector('path');
+    expect(path.getAttribute('stroke')).toBe('currentColor');
+  });
+
+  it('accepts custom color', () => {
+    const { container } = render(MoreHori, { props: { color: 'red' } });
+    const path = container.querySelector('path');
+    expect(path.getAttribute('stroke')).toBe('red');
+  });
+
+  it('renders three horizontal dots (three paths)', () => {
+    const { container } = render(MoreHori);
+    const paths = container.querySelectorAll('path');
+    expect(paths.length).toBe(3);
+  });
+
+  it('has correct viewBox', () => {
+    const { container } = render(MoreHori);
+    const svg = container.querySelector('svg');
+    expect(svg.getAttribute('viewBox')).toBe('0 0 16 16');
+  });
+
+  it('has stroke-linecap="round" on paths', () => {
+    const { container } = render(MoreHori);
+    const path = container.querySelector('path');
+    expect(path.getAttribute('stroke-linecap')).toBe('round');
+  });
+
+  it('has stroke-linejoin="round" on paths', () => {
+    const { container } = render(MoreHori);
+    const path = container.querySelector('path');
+    expect(path.getAttribute('stroke-linejoin')).toBe('round');
+  });
+
+  it('has fill="none" on svg', () => {
+    const { container } = render(MoreHori);
+    const svg = container.querySelector('svg');
+    expect(svg.getAttribute('fill')).toBe('none');
+  });
+});

package/dist/components/Icons/WarningIcon.spec.js

@@ -1,30 +1,30 @@
-import { render } from "@testing-library/svelte";
-import { expect, describe, test } from "vitest";
-import WarningIcon from "./WarningIcon.svelte";
-
-describe("WarningIcon Component Tests", () => {
-  test("Renders warning icon SVG", () => {
-    const { container } = render(WarningIcon);
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Has default dimensions", () => {
-    const { container } = render(WarningIcon);
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveAttribute("width", "12");
-    expect(svg).toHaveAttribute("height", "12");
-  });
-
-  test("Accepts custom className", () => {
-    const { container } = render(WarningIcon, { props: { className: "custom-class" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveClass("custom-class");
-  });
-
-  test("Has aria-hidden attribute", () => {
-    const { container } = render(WarningIcon);
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveAttribute("aria-hidden", "true");
-  });
-});
+import { render } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import WarningIcon from "./WarningIcon.svelte";
+
+describe("WarningIcon Component Tests", () => {
+  test("Renders warning icon SVG", () => {
+    const { container } = render(WarningIcon);
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Has default dimensions", () => {
+    const { container } = render(WarningIcon);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveAttribute("width", "12");
+    expect(svg).toHaveAttribute("height", "12");
+  });
+
+  test("Accepts custom className", () => {
+    const { container } = render(WarningIcon, { props: { className: "custom-class" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveClass("custom-class");
+  });
+
+  test("Has aria-hidden attribute", () => {
+    const { container } = render(WarningIcon);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveAttribute("aria-hidden", "true");
+  });
+});