In `library`, add `list item` component

[B3nz01d]

Description

As a user of the OUDS library
I want to be able to use the component
So that I can add an OUDS component in my own projects

As a user of the library
I want to be able to use the component
So that I have access to the documentation on how to use it

As a user of the Design System Toolbox pp
I want to access the Component
So that I can understand how to use it:

• while using the design system toolbox app I can interact with the available options and observe the changes on the component itself
• I can see the code associated to the component customization
• I can copy and paste the code from the app based on the selected customization
• or when looking into the code of the app itself, I would also understand how to use it

Figma reference

Details

Verbatims from @MaximeTonnerre about prioritization of the component below.
Note that a component in version 0 must be seen as draft.

v0.1

- Grouped + Separated usage (I’ll let you see what that means technically)
- Layout: Next/External (I think it’s more relevant for you to handle it at the same time as the next one)
- Size: Default
- Alignement: Center
- State: All
- Leading: Icon
- Overline
- Label
- Extra label
- Description
- Divider: True/False
- Background: True/False
+ Déclinaison "Static"

v0.2

- Size: Small
- Leading: Picture/Video
- Trailing: Text, Tag, Badge, Icon, Picture/Video
- Slot
+ Déclinaison "Static"

v0.3

- Layout: Back
- Alignement: Top
- Leading: Avatar, Flag
- Trailing: Avatar, Flag
+ Déclinaison "Static"

v0.4

- Outlined: True/False
- Rounded corner: True/False
- Helper text
+ Déclinaison "Static"

Specific use cases

• Let users add a custom view instead of image / icon in leading position but with sizes constrained to the 3 available
• Let users change the color of the texts (or maybe at least the text above)

Other notes

Here is an initial list of usage rules that we can already identify:

The management of the “Rounded corner” variant is the same as for the other affected components. It is not possible to have both renderings on the same product (except for the “Grouped + Divider” use case where the rounded corner is not applicable).
The “Size” variant must be applied to the entire list (the “Grouped” use case).