List item

[Ibabalola]

As a developer
I want to be able use a List item component
so that I can easily add a list item

The component should contain relevant classes for shared / reusable styling

• The List component needs to have an embedded className called dcx-list
• The List component needs to provide: variant: ordered or unordered where ordered is <ul> and unordered is <ol>
• The List component needs to provide relevant classes for shared / reusable styling
• The List component needs to provide an itemClassName that will apply the same class to every ListItem (so the developer doesn't need to specify the same className for each item if they are all the same)
• The List component needs to provide the ability to specify other props (...listProps)
• The ListItem component needs to have a className called dcx-list-item
• The ListItem component needs to provide an optional property called value?: number
• The ListItem component needs to provide relevant classes for shared / reusable styling
• The ListItem component needs to provide the ability to specify other props (...listItemProps)

The final user will use in this way:

<List type="ordered | unordered" className="list-classname" itemClassName="list-item classname" {...listProps}>
  <ListItem className="list-item-1" value="100" {...listItemProps}>
    List item example
  </ListItem>
  <ListItem className="list-item-2" value="100" {...itemProps}>
    List item example
  </ListItem>
</List>

Tasks:

• Add unit tests
• Add Application code with commented props
• Add the ability to specify other props (...props)
• Add Demo use of component
• Add to storybook documentation file with examples (.mdx) in a section called Typography
• Add to live demo

Please follow the below to create your branch

git checkout release/0.8
git pull
git checkout -b 'feature/list-item'

[daniele-zurico]

closed by #495