Add documentation & tests

docs/src/pages/ui/primitives/collection/react.mdx

@@ -2,6 +2,7 @@ import {
   Button,
   Card,
   Collection,
+  Flex,
   View,
   Text,
   Heading,
@@ -10,7 +11,7 @@ import { countries } from 'countries-list';
 import { CollectionDemo, ListCollectionExample } from './demo';
 import { Example } from '@/components/Example';
 
-A Collection wraps Flex and Grid components, and provides a way to display items in a collection from a data source. They come in `paginated` and `infiniteScrolling` versions. Both versions need paginated data.
+A Collection wraps Flex and Grid components, and provides a way to display items in a collection from a data source.
 
 ## Demo
 
@@ -82,25 +83,11 @@ const visitNewZealand = [
   </Collection>
 </Example>
 
-## Paginated collection
-
-A Collection can be paginated, using the special `isPaginated` property.
-
-```jsx
-<Collection type="list" items={countries} isPaginated>
-  {(country) => (
-    <Button>
-      {country.emoji} {country.name}
-    </Button>
-  )}
-</Collection>
-```
-
-### Collection types
+## Collection types
 
 Collection `type` options include `list`, `grid`, and `table`.
 
-**List collection type**
+### List
 
 The `list` collection type can be customized with any of following Flex props: `alignItems`, `alignContent`, `direction`, `gap`, `justifyContent`, `wrap`.
 
@@ -155,10 +142,78 @@ The `list` collection type can be customized with any of following Flex props: `
   </Collection>
 </Example>
 
-#### Grid collection type
+## Pagination
+
+A Collection can be paginated, adding a special `isPaginated` property. Change the page size passing a `itemsPerPage` property (default: 10).
+
+```jsx
+<Collection type="list" items={countries} isPaginated itemsPerPage={12}>
+  {(country) => (
+    <Button>
+      {country.emoji} {country.name}
+    </Button>
+  )}
+</Collection>
+```
+
+<Example>
+  <Collection
+    type="list"
+    direction="row"
+    wrap="wrap"
+    items={Object.values(countries).map(({ name, emoji }) => ({ name, emoji }))}
+    isPaginated
+    itemsPerPage={12}
+  >
+    {(country) => (
+      <Button grow="1">
+        {country.emoji} {country.name}
+      </Button>
+    )}
+  </Collection>
+</Example>
+
+## Search
+
+Collections can also be filtered, adding a `isSearchable` property. Pass a custom `searchFilter` function to enhance your search experience.
 
-TBD
+```jsx
+const startsWith = (country, keyword) => country.name.startsWith(keyword)
 
-#### Table collection type
+<Collection
+  type="grid"
+  items={countries}
+  itemsPerPage={9}
+  isSearchable
+  searchFilter={startsWith}
+  searchPlaceholder="Type to search..."
+>
+  {(country) => (
+    <Button grow="1">
+      {country.emoji} {country.name}
+    </Button>
+  )}
+</Collection>
+```
 
-TBD
+<Example>
+  <Collection
+    type="grid"
+    templateColumns="1fr 1fr 1fr"
+    gap="15px"
+    items={Object.values(countries).map(({ name, emoji }) => ({ name, emoji }))}
+    isSearchable
+    isPaginated
+    itemsPerPage={9}
+    searchPlaceholder="Type to search..."
+    searchFilter={(country, keyword) =>
+      country.name.toLowerCase().startsWith(keyword.toLowerCase())
+    }
+  >
+    {(country) => (
+      <Button grow="1">
+        {country.emoji} {country.name}
+      </Button>
+    )}
+  </Collection>
+</Example>

packages/react/src/primitives/Collection/__tests__/Collection.test.tsx

@@ -3,6 +3,7 @@ import { kebabCase } from 'lodash';
 
 import { Collection } from '../Collection';
 import { ComponentPropsToStylePropsMap } from '../../types';
+import { ComponentClassNames } from '../../shared/constants';
 
 const emojis = [
   {
@@ -22,9 +23,52 @@ const emojis = [
 describe('Collection component', () => {
   const testList = 'testList';
 
+  it('should render a Search box when isSearchable is true', async () => {
+    render(
+      <Collection testId={testList} type="list" items={emojis} isSearchable>
+        {(item, index) => (
+          <div key={index} aria-label={item.title}>
+            {item.emoji}
+          </div>
+        )}
+      </Collection>
+    );
+
+    const searchField = await screen.findByRole('searchbox');
+    expect(searchField).not.toBe(undefined);
+  });
+
+  it('should render pagination when isPaginated is true', async () => {
+    render(
+      <Collection
+        testId={testList}
+        type="list"
+        items={emojis}
+        isPaginated
+        itemsPerPage={1}
+      >
+        {(item, index) => (
+          <div key={index} aria-label={item.title}>
+            {item.emoji}
+          </div>
+        )}
+      </Collection>
+    );
+
+    const navigation = await screen.findByRole('navigation');
+
+    expect(navigation.classList).toContain(ComponentClassNames.Pagination);
+    expect(navigation).not.toBe(undefined);
+  });
+
   it('should render Flex when rendering list collection', async () => {
     render(
-      <Collection testId={testList} type="list" items={emojis}>
+      <Collection
+        testId={testList}
+        type="list"
+        direction="column"
+        items={emojis}
+      >
         {(item, index) => (
           <div key={index} aria-label={item.title}>
             {item.emoji}

packages/react/src/primitives/Pagination/Pagination.tsx

@@ -16,6 +16,7 @@ export const Pagination: React.FC<PaginationProps> = (props) => {
     onNext,
     onPrevious,
     onChange,
+    role = 'navigation',
     ...rest
   } = props;
 
@@ -31,6 +32,7 @@ export const Pagination: React.FC<PaginationProps> = (props) => {
   return (
     <View
       as="nav"
+      role={role}
       className={classNames(ComponentClassNames.Pagination, className)}
       {...rest}
     >

packages/react/src/primitives/SearchField/SearchField.tsx

@@ -77,7 +77,8 @@ export const SearchField: React.FC<SearchFieldProps> = ({
   className,
   labelHidden = true,
   label,
-  name = 'q',
+  name,
+  role = 'searchbox',
   onSubmit,
   onClear,
   size,
@@ -106,6 +107,7 @@ export const SearchField: React.FC<SearchFieldProps> = ({
       onInput={onInput}
       onKeyDown={onKeyDown}
       outerEndComponent={<SearchFieldButton onClick={onClick} size={size} />}
+      role={role}
       size={size}
       value={value}
       {...rest}