Design: List

[GewoonMaarten]

The List and List related components needs to be styled according to the Figma design.

Acceptance criteria

Components

• [x] List

• [x] ListItem

• [x] ListItemIcon

• [x] ListItemText

• [x] ListSubHeader

• [x] ListItemSecondaryAction

ListItem variants implemented

• [x] Normal
• [x] With Arrow (on the right side)
• [x] With Action (on the right side)

ListItem sizes implemented

• [x] One line
• [x] Two lines (with subtitle ListItemText secondary attribute)

ListItem states implemented

• [x] Normal
• [x] Hover
• [x] Focus
• [x] Active

ListItem icon support (ListItemIcon)

• [x] Icon can provided
• [x] Icon can be placed on the left side

Material-UI Components which we do not use

• [x] ListItemAvatar

ListSubHeader variants implemented

• [x] Normal

List variants implemented

• [x] Normal

Requirements

• [x] Alignment requirements are met
• [ ] Classes use the BEM naming convention
• [x] Design tokens are identified > proposed > implemented
• [x] Only the props and possible values for these props which are necessary in our use-case are exposed. All other Material-UI and standard HTML props which are not deemed necessary in our use-case should not be allowed/forwarded to the underlying component.

[DanielvanVliet]

This will likely involve making changes to List related components:

• List
• ListItem
• ListItemIcon?
• ListItemAvatar?
• ListItemSecondaryAction?
• ListItemText
• ListSubHeader

And possibly overlaps with menu:

• MenuList?
• MenuItem?