From 4f768afe543bbf9e1857c41d03804f8e37ab3512 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 29 Sep 2023 21:29:45 +0200
Subject: refactor(components): rewrite List component

* change `items` prop to children
* replace `kind` prop with `isHierarchical`, `isOrdered` & `isInline` props
* add `hideMarker` prop
* add `spacing` prop to control item spacing
* move lists styles to Sass placeholders to avoid repeats because of
headless WordPress
---
 src/components/atoms/lists/list/list.test.tsx | 110 ++++++++++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100644 src/components/atoms/lists/list/list.test.tsx

(limited to 'src/components/atoms/lists/list/list.test.tsx')

diff --git a/src/components/atoms/lists/list/list.test.tsx b/src/components/atoms/lists/list/list.test.tsx
new file mode 100644
index 0000000..d8001f5
--- /dev/null
+++ b/src/components/atoms/lists/list/list.test.tsx
@@ -0,0 +1,110 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { List } from './list';
+import { ListItem } from './list-item';
+
+const items = [
+  { id: 'item-1', label: 'Item 1' },
+  { id: 'item-2', label: 'Item 2' },
+  { id: 'item-3', label: 'Item 3' },
+  { id: 'item-4', label: 'Item 4' },
+];
+
+describe('List', () => {
+  it('renders a list of items', () => {
+    render(
+      <List>
+        {items.map((item) => (
+          <ListItem key={item.id}>{item.label}</ListItem>
+        ))}
+      </List>
+    );
+
+    expect(rtlScreen.getByRole('list')).toBeInTheDocument();
+    expect(rtlScreen.getAllByRole('listitem')).toHaveLength(items.length);
+  });
+
+  it('can render an ordered list', () => {
+    render(
+      <List isOrdered>
+        {items.map((item) => (
+          <ListItem key={item.id}>{item.label}</ListItem>
+        ))}
+      </List>
+    );
+
+    expect(rtlScreen.getByRole('list')).toHaveClass('list--ordered');
+  });
+
+  it('can render a hierarchical list', () => {
+    render(
+      <List isHierarchical isOrdered>
+        {items.map((item) => (
+          <ListItem key={item.id}>{item.label}</ListItem>
+        ))}
+      </List>
+    );
+
+    expect(rtlScreen.getByRole('list')).toHaveClass('list--hierarchical');
+  });
+
+  it('can render an unordered list', () => {
+    render(
+      <List isOrdered={false}>
+        {items.map((item) => (
+          <ListItem key={item.id}>{item.label}</ListItem>
+        ))}
+      </List>
+    );
+
+    expect(rtlScreen.getByRole('list')).toHaveClass('list--unordered');
+  });
+
+  it('can render list items in a row', () => {
+    render(
+      <List isInline>
+        {items.map((item) => (
+          <ListItem key={item.id}>{item.label}</ListItem>
+        ))}
+      </List>
+    );
+
+    expect(rtlScreen.getByRole('list')).toHaveClass('list--inline');
+  });
+
+  it('can render list items as one column', () => {
+    render(
+      <List isInline={false}>
+        {items.map((item) => (
+          <ListItem key={item.id}>{item.label}</ListItem>
+        ))}
+      </List>
+    );
+
+    expect(rtlScreen.getByRole('list')).toHaveClass('list--stack');
+  });
+
+  it('can render a list with marker', () => {
+    render(
+      <List hideMarker={false}>
+        {items.map((item) => (
+          <ListItem key={item.id}>{item.label}</ListItem>
+        ))}
+      </List>
+    );
+
+    expect(rtlScreen.getByRole('list')).toHaveClass('list--has-marker');
+  });
+
+  it('can render a list without marker', () => {
+    render(
+      <List hideMarker>
+        {items.map((item) => (
+          <ListItem key={item.id}>{item.label}</ListItem>
+        ))}
+      </List>
+    );
+
+    expect(rtlScreen.getByRole('list')).toHaveClass('list--no-marker');
+  });
+});
-- 
cgit v1.2.3