diff --git a/docs/src/pages/ui/primitives/collection/react.mdx b/docs/src/pages/ui/primitives/collection/react.mdx index 27cc96460ea..df164bd9197 100644 --- a/docs/src/pages/ui/primitives/collection/react.mdx +++ b/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 = [ -## Paginated collection - -A Collection can be paginated, using the special `isPaginated` property. - -```jsx - - {(country) => ( - - )} - -``` - -### 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: ` -#### 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 + + {(country) => ( + + )} + +``` + + + ({ name, emoji }))} + isPaginated + itemsPerPage={12} + > + {(country) => ( + + )} + + + +## 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 + + {(country) => ( + + )} + +``` -TBD + + ({ name, emoji }))} + isSearchable + isPaginated + itemsPerPage={9} + searchPlaceholder="Type to search..." + searchFilter={(country, keyword) => + country.name.toLowerCase().startsWith(keyword.toLowerCase()) + } + > + {(country) => ( + + )} + + diff --git a/packages/react/src/primitives/Collection/__tests__/Collection.test.tsx b/packages/react/src/primitives/Collection/__tests__/Collection.test.tsx index 23f90beb4b6..777a5c50493 100644 --- a/packages/react/src/primitives/Collection/__tests__/Collection.test.tsx +++ b/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( + + {(item, index) => ( +
+ {item.emoji} +
+ )} + + ); + + const searchField = await screen.findByRole('searchbox'); + expect(searchField).not.toBe(undefined); + }); + + it('should render pagination when isPaginated is true', async () => { + render( + + {(item, index) => ( +
+ {item.emoji} +
+ )} + + ); + + 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( - + {(item, index) => (
{item.emoji} diff --git a/packages/react/src/primitives/Pagination/Pagination.tsx b/packages/react/src/primitives/Pagination/Pagination.tsx index c220dcf3f04..2192f4fd4f1 100644 --- a/packages/react/src/primitives/Pagination/Pagination.tsx +++ b/packages/react/src/primitives/Pagination/Pagination.tsx @@ -16,6 +16,7 @@ export const Pagination: React.FC = (props) => { onNext, onPrevious, onChange, + role = 'navigation', ...rest } = props; @@ -31,6 +32,7 @@ export const Pagination: React.FC = (props) => { return ( diff --git a/packages/react/src/primitives/SearchField/SearchField.tsx b/packages/react/src/primitives/SearchField/SearchField.tsx index 69cc58781af..e8e81c9f305 100644 --- a/packages/react/src/primitives/SearchField/SearchField.tsx +++ b/packages/react/src/primitives/SearchField/SearchField.tsx @@ -77,7 +77,8 @@ export const SearchField: React.FC = ({ className, labelHidden = true, label, - name = 'q', + name, + role = 'searchbox', onSubmit, onClear, size, @@ -106,6 +107,7 @@ export const SearchField: React.FC = ({ onInput={onInput} onKeyDown={onKeyDown} outerEndComponent={} + role={role} size={size} value={value} {...rest} diff --git a/yarn.lock b/yarn.lock index 4699fe10a30..566b22b4d82 100644 --- a/yarn.lock +++ b/yarn.lock @@ -413,14 +413,6 @@ qrcode "^1.4.4" uuid "^8.2.0" -"@aws-amplify/ui-components@1.9.0": - version "1.9.0" - resolved "https://registry.yarnpkg.com/@aws-amplify/ui-components/-/ui-components-1.9.0.tgz#c1b72a071ac75e6bf650aece0983f7243b826279" - integrity sha512-fkYBaM3WDSJOGmpROlgzg638D19ai/3Z4CQ4Cbm/HKNsooDRyq3yXY3Y/2L/+4OMCnt9NTQ9DjnOjbP8wFHQxw== - dependencies: - qrcode "^1.4.4" - uuid "^8.2.0" - "@aws-amplify/ui-react-v1@npm:@aws-amplify/ui-react": version "1.2.19" resolved "https://registry.yarnpkg.com/@aws-amplify/ui-react/-/ui-react-1.2.19.tgz#8721fb33151522faf2a49aaf1ff641c809260927" @@ -435,13 +427,6 @@ dependencies: "@aws-amplify/ui-components" "1.7.2" -"@aws-amplify/ui-react@^1.2.5": - version "1.2.20" - resolved "https://registry.yarnpkg.com/@aws-amplify/ui-react/-/ui-react-1.2.20.tgz#913433348cb54dd836d236bd011617f869831d0a" - integrity sha512-R2znqKXc/kPwzUUIIOaQnM7PIo7fu1dupz6r+t7eUlhkWa8pPSYS0UantQWEyZi7yGh0rkhPRcmZQ7baqlkJhw== - dependencies: - "@aws-amplify/ui-components" "1.9.0" - "@aws-amplify/ui@2.0.3": version "2.0.3" resolved "https://registry.yarnpkg.com/@aws-amplify/ui/-/ui-2.0.3.tgz#7a88a416942aedbc6a6ea9850a2c98693c80340a"