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
[x] The List component needs to have an embedded className called dcx-list
[x] The List component needs to provide: variant: ordered or unordered where ordered is <ul> and unordered is <ol>
[x] The List component needs to provide relevant classes for shared / reusable styling
[x] 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)
[x] The List component needs to provide the ability to specify other props (...listProps)
[x] The ListItem component needs to have a className called dcx-list-item
[x] The ListItem component needs to provide an optional property called value?: number
[x] The ListItem component needs to provide relevant classes for shared / reusable styling
[x] 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:
[x] Add unit tests
[x] Add Application code with commented props
[x] Add the ability to specify other props (...props)
[x] Add Demo use of component
[x] Add to storybook documentation file with examples (.mdx) in a section called Typography
As a developer I want to be able use a
List item
component so that I can easily add a list itemThe component should contain relevant classes for shared / reusable styling
dcx-list
variant: ordered or unordered
where ordered is<ul>
and unordered is<ol>
ListItem
(so the developer doesn't need to specify the same className for each item if they are all the same)dcx-list-item
value?: number
The final user will use in this way:
Tasks:
Please follow the below to create your branch