@getmicdrop/svelte-components 5.5.4 → 5.5.5

package/dist/primitives/Typography/Typography.spec.js

@@ -0,0 +1,183 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import Typography from './Typography.svelte';
+
+describe('Typography Component', () => {
+  test('renders a p element by default', () => {
+    const { container } = render(Typography);
+    expect(container.querySelector('p')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Typography, { props: { class: 'custom-text' } });
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('custom-text');
+  });
+
+  test('passes through additional props', () => {
+    const { container } = render(Typography, { props: { 'data-testid': 'my-text' } });
+    const element = container.querySelector('[data-testid="my-text"]');
+    expect(element).toBeInTheDocument();
+  });
+});
+
+describe('Typography Variants', () => {
+  test('h1 variant renders h1 element', () => {
+    const { container } = render(Typography, { props: { variant: 'h1' } });
+    expect(container.querySelector('h1')).toBeInTheDocument();
+  });
+
+  test('h2 variant renders h2 element', () => {
+    const { container } = render(Typography, { props: { variant: 'h2' } });
+    expect(container.querySelector('h2')).toBeInTheDocument();
+  });
+
+  test('h3 variant renders h3 element', () => {
+    const { container } = render(Typography, { props: { variant: 'h3' } });
+    expect(container.querySelector('h3')).toBeInTheDocument();
+  });
+
+  test('h4 variant renders h4 element', () => {
+    const { container } = render(Typography, { props: { variant: 'h4' } });
+    expect(container.querySelector('h4')).toBeInTheDocument();
+  });
+
+  test('h5 variant renders h5 element', () => {
+    const { container } = render(Typography, { props: { variant: 'h5' } });
+    expect(container.querySelector('h5')).toBeInTheDocument();
+  });
+
+  test('h6 variant renders h6 element', () => {
+    const { container } = render(Typography, { props: { variant: 'h6' } });
+    expect(container.querySelector('h6')).toBeInTheDocument();
+  });
+
+  test('p variant renders p element', () => {
+    const { container } = render(Typography, { props: { variant: 'p' } });
+    expect(container.querySelector('p')).toBeInTheDocument();
+  });
+});
+
+describe('Typography Size Classes', () => {
+  test('h1 has text-3xl', () => {
+    const { container } = render(Typography, { props: { variant: 'h1' } });
+    const h1 = container.querySelector('h1');
+    expect(h1).toHaveClass('text-3xl');
+  });
+
+  test('h2 has text-2xl', () => {
+    const { container } = render(Typography, { props: { variant: 'h2' } });
+    const h2 = container.querySelector('h2');
+    expect(h2).toHaveClass('text-2xl');
+  });
+
+  test('h3 has text-xl', () => {
+    const { container } = render(Typography, { props: { variant: 'h3' } });
+    const h3 = container.querySelector('h3');
+    expect(h3).toHaveClass('text-xl');
+  });
+
+  test('h4 has text-lg', () => {
+    const { container } = render(Typography, { props: { variant: 'h4' } });
+    const h4 = container.querySelector('h4');
+    expect(h4).toHaveClass('text-lg');
+  });
+
+  test('h5 has text-base', () => {
+    const { container } = render(Typography, { props: { variant: 'h5' } });
+    const h5 = container.querySelector('h5');
+    expect(h5).toHaveClass('text-base');
+  });
+
+  test('h6 has text-xs', () => {
+    const { container } = render(Typography, { props: { variant: 'h6' } });
+    const h6 = container.querySelector('h6');
+    expect(h6).toHaveClass('text-xs');
+  });
+
+  test('p has text-sm', () => {
+    const { container } = render(Typography);
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('text-sm');
+  });
+});
+
+describe('Typography Weight Classes', () => {
+  test('default weight is regular (font-normal)', () => {
+    const { container } = render(Typography);
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('font-normal');
+  });
+
+  test('bold weight applies font-bold', () => {
+    const { container } = render(Typography, { props: { weight: 'bold' } });
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('font-bold');
+  });
+
+  test('semibold weight applies font-semibold', () => {
+    const { container } = render(Typography, { props: { weight: 'semibold' } });
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('font-semibold');
+  });
+
+  test('medium weight applies font-medium', () => {
+    const { container } = render(Typography, { props: { weight: 'medium' } });
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('font-medium');
+  });
+
+  test('regular weight applies font-normal', () => {
+    const { container } = render(Typography, { props: { weight: 'regular' } });
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('font-normal');
+  });
+});
+
+describe('Typography Text Content', () => {
+  test('renders text prop content', () => {
+    render(Typography, { props: { text: 'Hello World' } });
+    expect(screen.getByText('Hello World')).toBeInTheDocument();
+  });
+
+  test('text prop takes precedence over children', () => {
+    // When text prop is provided, it's rendered
+    const { container } = render(Typography, { props: { text: 'Text Content' } });
+    expect(container.textContent).toBe('Text Content');
+  });
+});
+
+describe('Typography Class Composition', () => {
+  test('combines variant size, weight, and custom class', () => {
+    const { container } = render(Typography, {
+      props: { variant: 'h2', weight: 'bold', class: 'extra-class' }
+    });
+    const h2 = container.querySelector('h2');
+    expect(h2).toHaveClass('text-2xl'); // from variant
+    expect(h2).toHaveClass('font-bold'); // from weight
+    expect(h2).toHaveClass('extra-class'); // from custom class
+  });
+});
+
+describe('Typography with Different Combinations', () => {
+  test('h1 bold', () => {
+    const { container } = render(Typography, { props: { variant: 'h1', weight: 'bold' } });
+    const h1 = container.querySelector('h1');
+    expect(h1).toHaveClass('text-3xl');
+    expect(h1).toHaveClass('font-bold');
+  });
+
+  test('h3 semibold', () => {
+    const { container } = render(Typography, { props: { variant: 'h3', weight: 'semibold' } });
+    const h3 = container.querySelector('h3');
+    expect(h3).toHaveClass('text-xl');
+    expect(h3).toHaveClass('font-semibold');
+  });
+
+  test('p medium', () => {
+    const { container } = render(Typography, { props: { variant: 'p', weight: 'medium' } });
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('text-sm');
+    expect(p).toHaveClass('font-medium');
+  });
+});

package/dist/primitives/ValidationError.spec.js

@@ -39,7 +39,7 @@ describe('ValidationError Component', () => {
       props: { error: 'Error message' },
     });
     const alert = container.querySelector('[role="alert"]');
-    expect(alert.classList.contains('text-red-500')).toBe(true);
+    expect(alert.classList.contains('text-red-600')).toBe(true);
   });
 
   it('renders WarningIcon', () => {

package/dist/primitives/index.d.ts

@@ -19,6 +19,7 @@ export { default as Input } from "./Input/Input.svelte";
 export { default as Select } from "./Input/Select.svelte";
 export { default as Textarea } from "./Input/Textarea.svelte";
 export { default as Label } from "./Label/Label.svelte";
+export { default as NumberInput } from "./NumberInput/NumberInput.svelte";
 export { default as Modal } from "./Modal/Modal.svelte";
 export { default as Pagination } from "./Pagination/Pagination.svelte";
 export { default as Radio } from "./Radio/Radio.svelte";

package/dist/primitives/index.js

@@ -52,6 +52,9 @@ export { default as Textarea } from './Input/Textarea.svelte';
 // Label
 export { default as Label } from './Label/Label.svelte';
 
+// NumberInput
+export { default as NumberInput } from './NumberInput/NumberInput.svelte';
+
 // Modal (base only - composite modals are in recipes/modals)
 export { default as Modal } from './Modal/Modal.svelte';
 

package/dist/recipes/CropImage/CropImage.spec.js

@@ -1,13 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
-
-// Mock svelte-easy-crop with the mock Svelte component
-vi.mock('svelte-easy-crop', async () => {
-  const MockCropper = await import('../../__mocks__/svelte-easy-crop.svelte');
-  return { default: MockCropper.default };
-});
-
-// Import after mock is set up
 import CropImage from './CropImage.svelte';
 
 describe('CropImage', () => {
@@ -81,7 +73,7 @@ describe('CropImage', () => {
       const onCancel = vi.fn();
       render(CropImage, { props: { ...defaultProps, onCancel } });
 
-      await fireEvent.click(screen.getByLabelText('Close'));
+      await fireEvent.click(screen.getByLabelText('Close modal'));
       expect(onCancel).toHaveBeenCalled();
     });
 

package/dist/recipes/ImageUploader/ImageUploader.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ImageUploader.spec.d.ts.map

package/dist/recipes/ImageUploader/ImageUploader.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploader.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/ImageUploader/ImageUploader.spec.js"],"names":[],"mappings":""}