Commit de3d9199 authored by Alexandru Munteanu's avatar Alexandru Munteanu

feat(list-component): remove children as list items; pass data test id

parent 90b223c4
......@@ -16,7 +16,8 @@ const Root = styled.div.attrs({
`
const Item = styled.div.attrs({
className: 'list-item',
// we could make a helper for this
'data-test-id': props => props['data-test-id'] || 'list-item',
})`
${override('ui.List.Item')};
`
......@@ -41,12 +42,11 @@ const List = ({
{items.map(item => (
<Component key={get(item, itemKey)} {...item} {...rest} />
))}
{children}
</Root>
)
List.propTypes = {
items: PropTypes.array,
items: PropTypes.array.isRequired,
itemKey: PropTypes.string,
onItemClick: PropTypes.func,
}
......
......@@ -4,7 +4,6 @@ A component that displays items in a vertical list. Can be customized with a cus
```js
const items = [{ id: 1, name: 'First item' }, { id: 2, name: 'Second item' }]
;<List items={items} />
```
......@@ -12,7 +11,6 @@ const items = [{ id: 1, name: 'First item' }, { id: 2, name: 'Second item' }]
```js
const items = [{ id: 1, name: 'First item' }, { id: 2, name: 'Second item' }]
;<List items={items} itemKey="name" />
```
......@@ -20,7 +18,6 @@ const items = [{ id: 1, name: 'First item' }, { id: 2, name: 'Second item' }]
```js
const items = [{ id: 1, name: 'First item' }, { id: 2, name: 'Second item' }]
;<List
items={items}
onItemClick={item => console.log('I clicked on: ', item)}
......@@ -39,29 +36,5 @@ const CustomItem = item => (
{` ${item.name}`}
</span>
)
;<List items={items} component={CustomItem} />
```
* Items as children
```js
<List>
<span>First item</span>
<span>Second item</span>
<span>Third item</span>
</List>
```
* Why not both?
Items passed as props to the List component will be displayed first.
```js
const items = [{ id: 1, name: 'First item' }, { id: 2, name: 'Second item' }]
;<List items={items}>
<span>First child</span>
<span>Second child</span>
<span>Third child</span>
</List>
```
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment