@ippon-ui/ui 0.0.2

package/react/test/IpponButtonCard.spec.tsx

@@ -0,0 +1,162 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { render, screen, configure, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { IpponButtonCard } from '../src';
+
+configure({
+  testIdAttribute: 'data-selector',
+});
+
+describe('IpponButtonCard', () => {
+  afterEach(cleanup);
+
+  it('should be like pattern library', () => {
+    render(<IpponButtonCard dataSelector="ippon-button-card">Content</IpponButtonCard>);
+
+    const buttonCard = screen.getByTestId('ippon-button-card');
+
+    expect(buttonCard).toHaveClass('ippon-button-card');
+  });
+
+  it('should click', () => {
+    const onClick = vi.fn();
+
+    render(
+      <IpponButtonCard onClick={onClick} dataSelector="ippon-button-card">
+        Content
+      </IpponButtonCard>,
+    );
+
+    const buttonCard = screen.getByTestId('ippon-button-card');
+    buttonCard.click();
+
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  describe('Shadow', () => {
+    it.each([
+      {
+        level: 'l1',
+        className: '-shadow-l1',
+      },
+      {
+        level: 'l2',
+        className: '-shadow-l2',
+      },
+      {
+        level: 'l3',
+        className: '-shadow-l3',
+      },
+      {
+        level: 'l4',
+        className: '-shadow-l4',
+      },
+      {
+        level: 'l5',
+        className: '-shadow-l5',
+      },
+      {
+        level: 'l6',
+        className: '-shadow-l6',
+      },
+    ] as const)('should have $className for $level', ({ level, className }) => {
+      render(
+        <IpponButtonCard shadow={level} dataSelector="ippon-button-card">
+          Content
+        </IpponButtonCard>,
+      );
+
+      const card = screen.getByTestId('ippon-button-card');
+
+      expect(card).toHaveClass(className);
+    });
+  });
+
+  describe('Border', () => {
+    it('should not have -border class by default', () => {
+      render(<IpponButtonCard dataSelector="ippon-button-card">Content</IpponButtonCard>);
+
+      const card = screen.getByTestId('ippon-button-card');
+
+      expect(card).not.toHaveClass('-border');
+    });
+
+    it('should have -border class when border is present', () => {
+      render(
+        <IpponButtonCard border={true} dataSelector="ippon-button-card">
+          Content
+        </IpponButtonCard>,
+      );
+
+      const card = screen.getByTestId('ippon-button-card');
+
+      expect(card).toHaveClass('-border');
+    });
+
+    it('should not have -border class when border is not present', () => {
+      render(
+        <IpponButtonCard border={false} dataSelector="ippon-button-card">
+          Content
+        </IpponButtonCard>,
+      );
+
+      const card = screen.getByTestId('ippon-button-card');
+
+      expect(card).not.toHaveClass('-border');
+    });
+  });
+
+  describe('Full width', () => {
+    it('should not have -full-width class by default', () => {
+      render(<IpponButtonCard dataSelector="ippon-button-card">Content</IpponButtonCard>);
+
+      const card = screen.getByTestId('ippon-button-card');
+
+      expect(card).not.toHaveClass('-full-width');
+    });
+
+    it('should have -full-width class when fullWidth is present', () => {
+      render(
+        <IpponButtonCard fullWidth={true} dataSelector="ippon-button-card">
+          Content
+        </IpponButtonCard>,
+      );
+
+      const card = screen.getByTestId('ippon-button-card');
+
+      expect(card).toHaveClass('-full-width');
+    });
+  });
+
+  describe('Size', () => {
+    it('should not have size class by default', () => {
+      render(<IpponButtonCard dataSelector="ippon-button-card">Content</IpponButtonCard>);
+
+      const card = screen.getByTestId('ippon-button-card');
+
+      expect(card).not.toHaveClass('-small');
+      expect(card).not.toHaveClass('-large');
+    });
+
+    it.each([
+      {
+        size: 'small',
+        className: '-small',
+      },
+      {
+        size: 'large',
+        className: '-large',
+      },
+    ] as const)('should have $className for size $size', ({ size, className }) => {
+      render(
+        <IpponButtonCard size={size} dataSelector="ippon-button-card">
+          Content
+        </IpponButtonCard>,
+      );
+
+      const card = screen.getByTestId('ippon-button-card');
+
+      expect(card).toHaveClass(className);
+    });
+  });
+});

package/react/test/IpponCard.spec.tsx

@@ -0,0 +1,133 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, configure, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { IpponCard } from '../src';
+
+configure({
+  testIdAttribute: 'data-selector',
+});
+
+describe('IpponCard', () => {
+  afterEach(cleanup);
+
+  it('should be like pattern library', () => {
+    render(<IpponCard dataSelector="ippon-card">Content</IpponCard>);
+
+    const card = screen.getByTestId('ippon-card');
+
+    expect(card).toHaveClass('ippon-card');
+  });
+
+  it('should render children', () => {
+    render(<IpponCard dataSelector="ippon-card">Card Content</IpponCard>);
+
+    const card = screen.getByTestId('ippon-card');
+
+    expect(card).toHaveTextContent('Card Content');
+  });
+
+  describe('Shadow', () => {
+    it.each([
+      {
+        level: 'l1',
+        className: '-shadow-l1',
+      },
+      {
+        level: 'l2',
+        className: '-shadow-l2',
+      },
+      {
+        level: 'l3',
+        className: '-shadow-l3',
+      },
+      {
+        level: 'l4',
+        className: '-shadow-l4',
+      },
+      {
+        level: 'l5',
+        className: '-shadow-l5',
+      },
+      {
+        level: 'l6',
+        className: '-shadow-l6',
+      },
+    ] as const)('should have $className for $level', ({ level, className }) => {
+      render(
+        <IpponCard shadow={level} dataSelector="ippon-card">
+          Content
+        </IpponCard>,
+      );
+
+      const card = screen.getByTestId('ippon-card');
+
+      expect(card).toHaveClass(className);
+    });
+  });
+
+  describe('Border', () => {
+    it('should not have border class by default', () => {
+      render(<IpponCard dataSelector="ippon-card">Content</IpponCard>);
+
+      const card = screen.getByTestId('ippon-card');
+
+      expect(card).not.toHaveClass('-border');
+    });
+
+    it('should have border class when border is true', () => {
+      render(
+        <IpponCard border={true} dataSelector="ippon-card">
+          Content
+        </IpponCard>,
+      );
+
+      const card = screen.getByTestId('ippon-card');
+
+      expect(card).toHaveClass('-border');
+    });
+
+    it('should not have border class when border is false', () => {
+      render(
+        <IpponCard border={false} dataSelector="ippon-card">
+          Content
+        </IpponCard>,
+      );
+
+      const card = screen.getByTestId('ippon-card');
+
+      expect(card).not.toHaveClass('-border');
+    });
+  });
+
+  describe('Size', () => {
+    it('should not have size class by default', () => {
+      render(<IpponCard dataSelector="ippon-card">Content</IpponCard>);
+
+      const card = screen.getByTestId('ippon-card');
+
+      expect(card).not.toHaveClass('-small');
+      expect(card).not.toHaveClass('-large');
+    });
+
+    it.each([
+      {
+        size: 'small',
+        className: '-small',
+      },
+      {
+        size: 'large',
+        className: '-large',
+      },
+    ] as const)('should have $className for size $size', ({ size, className }) => {
+      render(
+        <IpponCard size={size} dataSelector="ippon-card">
+          Content
+        </IpponCard>,
+      );
+
+      const card = screen.getByTestId('ippon-card');
+
+      expect(card).toHaveClass(className);
+    });
+  });
+});

package/react/test/IpponContainer.spec.tsx

@@ -0,0 +1,56 @@
+import { cleanup, configure, render, screen } from '@testing-library/react';
+import { describe, it, expect, afterEach } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { IpponContainer } from '../src';
+
+configure({
+  testIdAttribute: 'data-selector',
+});
+
+describe('IpponContainer', () => {
+  afterEach(cleanup);
+
+  it('should be like pattern library', () => {
+    render(<IpponContainer dataSelector="ippon-container" />);
+
+    const ipponContainer = screen.getByTestId('ippon-container');
+
+    expect(ipponContainer).toHaveClass('ippon-container');
+  });
+
+  it('should render children', () => {
+    render(
+      <IpponContainer dataSelector="ippon-container">
+        <p>Test content</p>
+      </IpponContainer>,
+    );
+
+    const content = screen.getByText('Test content');
+
+    expect(content).toBeInTheDocument();
+  });
+
+  it('should render with default div tag', () => {
+    render(<IpponContainer dataSelector="ippon-container" />);
+
+    const element = screen.getByTestId('ippon-container');
+
+    expect(element.tagName).toBe('DIV');
+  });
+
+  it('should render with custom tag', () => {
+    render(<IpponContainer tag="section" dataSelector="ippon-container" />);
+
+    const element = screen.getByTestId('ippon-container');
+
+    expect(element.tagName).toBe('SECTION');
+  });
+
+  it('should render with article tag', () => {
+    render(<IpponContainer tag="article" dataSelector="ippon-container" />);
+
+    const element = screen.getByTestId('ippon-container');
+
+    expect(element.tagName).toBe('ARTICLE');
+  });
+});

package/react/test/IpponGrid.spec.tsx

@@ -0,0 +1,140 @@
+import { cleanup, configure, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { IpponGrid, IpponGridSlot } from '../src';
+
+configure({
+  testIdAttribute: 'data-selector',
+});
+
+describe('IpponGrid', () => {
+  afterEach(cleanup);
+
+  it('should be like pattern library', () => {
+    render(<IpponGrid dataSelector="ippon-grid">Content</IpponGrid>);
+
+    const grid = screen.getByTestId('ippon-grid');
+
+    expect(grid).toHaveClass('ippon-grid');
+  });
+
+  it('should render children', () => {
+    render(<IpponGrid dataSelector="ippon-grid">Grid content</IpponGrid>);
+
+    const grid = screen.getByTestId('ippon-grid');
+
+    expect(grid).toHaveTextContent('Grid content');
+  });
+
+  describe('Media layout', () => {
+    it('should have single media columns', () => {
+      render(<IpponGrid media={4} dataSelector="ippon-grid" />);
+
+      const grid = screen.getByTestId('ippon-grid');
+
+      expect(grid).toHaveClass('-media-4');
+    });
+
+    it('should have responsive media columns', () => {
+      render(<IpponGrid media={[4, 'desktop-m-12']} dataSelector="ippon-grid" />);
+
+      const grid = screen.getByTestId('ippon-grid');
+
+      expect(grid).toHaveClass('-media-4');
+      expect(grid).toHaveClass('-media-desktop-m-12');
+    });
+  });
+
+  describe('Container layout', () => {
+    it('should have single container columns', () => {
+      render(<IpponGrid container={4} dataSelector="ippon-grid" />);
+
+      const grid = screen.getByTestId('ippon-grid');
+
+      expect(grid).toHaveClass('-container-4');
+    });
+
+    it('should have responsive container columns', () => {
+      render(<IpponGrid container={[4, 'm-12']} dataSelector="ippon-grid" />);
+
+      const grid = screen.getByTestId('ippon-grid');
+
+      expect(grid).toHaveClass('-container-4');
+      expect(grid).toHaveClass('-container-m-12');
+    });
+  });
+
+  describe('Gap', () => {
+    it('should have single gap', () => {
+      render(<IpponGrid gap={24} dataSelector="ippon-grid" />);
+
+      const grid = screen.getByTestId('ippon-grid');
+
+      expect(grid).toHaveClass('-gap-24');
+    });
+
+    it('should have responsive gap', () => {
+      render(<IpponGrid gap={[16, 'm-12']} dataSelector="ippon-grid" />);
+
+      const grid = screen.getByTestId('ippon-grid');
+
+      expect(grid).toHaveClass('-gap-16');
+      expect(grid).toHaveClass('-gap-m-12');
+    });
+  });
+
+  describe('Slot', () => {
+    it('should be like pattern library', () => {
+      render(
+        <IpponGrid>
+          <IpponGridSlot dataSelector="ippon-grid-slot">Slot</IpponGridSlot>
+        </IpponGrid>,
+      );
+
+      const slot = screen.getByTestId('ippon-grid-slot');
+
+      expect(slot).toHaveClass('ippon-grid--slot');
+    });
+
+    it('should render children', () => {
+      render(
+        <IpponGrid>
+          <IpponGridSlot dataSelector="ippon-grid-slot">Slot content</IpponGridSlot>
+        </IpponGrid>,
+      );
+
+      const slot = screen.getByTestId('ippon-grid-slot');
+
+      expect(slot).toHaveTextContent('Slot content');
+    });
+
+    it('should have single col span', () => {
+      render(
+        <IpponGrid>
+          <IpponGridSlot col={4} dataSelector="ippon-grid-slot">
+            Slot
+          </IpponGridSlot>
+        </IpponGrid>,
+      );
+
+      const slot = screen.getByTestId('ippon-grid-slot');
+
+      expect(slot).toHaveClass('-col-4');
+    });
+
+    it('should have responsive col span', () => {
+      render(
+        <IpponGrid>
+          <IpponGridSlot col={[4, 'desktop-m-8']} dataSelector="ippon-grid-slot">
+            Slot
+          </IpponGridSlot>
+        </IpponGrid>,
+      );
+
+      const slot = screen.getByTestId('ippon-grid-slot');
+
+      expect(slot).toHaveClass('-col-4');
+      expect(slot).toHaveClass('-col-desktop-m-8');
+    });
+  });
+});

package/react/test/IpponHSpace.spec.tsx

@@ -0,0 +1,107 @@
+import { cleanup, configure, render, screen } from '@testing-library/react';
+import { describe, it, expect, afterEach } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { IpponHSpace, IpponHSpaceSlot } from '../src';
+
+configure({
+  testIdAttribute: 'data-selector',
+});
+
+describe('IpponHSpace', () => {
+  afterEach(cleanup);
+
+  it('should be like pattern library', () => {
+    render(<IpponHSpace dataSelector="ippon-h-space" />);
+
+    const ipponHSpace = screen.getByTestId('ippon-h-space');
+
+    expect(ipponHSpace).toHaveClass('ippon-h-space');
+  });
+
+  it.each([2, 16, 32] as const)('should have gap %s', (gap) => {
+    render(<IpponHSpace gap={gap} dataSelector="ippon-h-space" />);
+
+    const ipponHSpace = screen.getByTestId('ippon-h-space');
+
+    expect(ipponHSpace).toHaveClass(`-gap-${gap}`);
+  });
+
+  it.each(['left', 'right', 'middle', 'bottom'] as const)(
+    'should have alignment %s',
+    (alignment) => {
+      render(<IpponHSpace align={alignment} dataSelector="ippon-h-space" />);
+
+      const ipponHSpace = screen.getByTestId('ippon-h-space');
+
+      expect(ipponHSpace).toHaveClass(`-${alignment}`);
+    },
+  );
+
+  it('should mix alignments', () => {
+    render(<IpponHSpace align={['left', 'bottom']} dataSelector="ippon-h-space" />);
+
+    const ipponHSpace = screen.getByTestId('ippon-h-space');
+
+    expect(ipponHSpace).toHaveClass('-left', '-bottom');
+  });
+
+  it('should render with default div tag', () => {
+    render(<IpponHSpace dataSelector="ippon-h-space">Content</IpponHSpace>);
+
+    const ipponHSpace = screen.getByTestId('ippon-h-space');
+
+    expect(ipponHSpace.tagName).toBe('DIV');
+  });
+
+  it('should render with custom tag', () => {
+    render(
+      <IpponHSpace tag="section" dataSelector="ippon-h-space">
+        Content
+      </IpponHSpace>,
+    );
+
+    const ipponHSpace = screen.getByTestId('ippon-h-space');
+
+    expect(ipponHSpace.tagName).toBe('SECTION');
+  });
+
+  it('should wrap', () => {
+    render(
+      <IpponHSpace wrap dataSelector="ippon-h-space">
+        Content
+      </IpponHSpace>,
+    );
+
+    const ipponHSpace = screen.getByTestId('ippon-h-space');
+
+    expect(ipponHSpace).toHaveClass('-wrap');
+  });
+
+  describe('Slot', () => {
+    it('shouldbe minimal', () => {
+      render(
+        <IpponHSpace>
+          <IpponHSpaceSlot dataSelector="ippon-h-space-slot">Slot</IpponHSpaceSlot>
+        </IpponHSpace>,
+      );
+
+      const ipponHSpaceSlot = screen.getByTestId('ippon-h-space-slot');
+
+      expect(ipponHSpaceSlot).toHaveClass('ippon-h-space--slot');
+    });
+
+    it('should expand', () => {
+      render(
+        <IpponHSpace>
+          <IpponHSpaceSlot expand dataSelector="ippon-h-space-slot">
+            Slot
+          </IpponHSpaceSlot>
+        </IpponHSpace>,
+      );
+
+      const ipponHSpaceSlot = screen.getByTestId('ippon-h-space-slot');
+
+      expect(ipponHSpaceSlot).toHaveClass('ippon-h-space--slot', '-expand');
+    });
+  });
+});

package/react/test/IpponIcon.spec.tsx

@@ -0,0 +1,37 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { cleanup, configure, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { IpponIcon } from '../src';
+
+configure({
+  testIdAttribute: 'data-selector',
+});
+
+describe('IpponIcon', () => {
+  beforeEach(cleanup);
+
+  it('should be minimal', () => {
+    render(<IpponIcon name="paper-plane" dataSelector="ippon-icon" />);
+
+    const ipponIcon = screen.getByTestId('ippon-icon');
+
+    expect(ipponIcon).toHaveClass('ippon-icon', 'ippon-ion-paper-plane');
+    expect(ipponIcon).toHaveRole('presentation');
+  });
+
+  it('should have a size', () => {
+    render(<IpponIcon name="paper-plane" size={32} dataSelector="ippon-icon" />);
+
+    const ipponIcon = screen.getByTestId('ippon-icon');
+
+    expect(ipponIcon).toHaveClass('-size-32');
+  });
+
+  it('should have a color', () => {
+    render(<IpponIcon name="paper-plane" color="brand-primary" dataSelector="ippon-icon" />);
+
+    const ipponIcon = screen.getByTestId('ippon-icon');
+
+    expect(ipponIcon).toHaveClass('-color-brand-primary');
+  });
+});