[Component] Create component - Tags

[B3nz01d]

Description

As a user of thelibrary
I want to be able to use the component checkbox
So that I can add configurable chexboxes 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
I want to access the component
So that I can understand how to use it:

• while using the demo 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

Design guidelines

unified-design-system.orange.com

Context

The component is described in the Figma boards and some rules defined in the SharePoint playbook.

Definition of Done

Main topics

• Implement the chebokx component
• Update documentation (both DocC catalog and Swift source doc)
• Add if needed unit tests
• Add UI tests on component look and feel

Related to implementation

For layouts:

• default
• inverse / RTL
• checkox only

For selection status:

• selected
• unselected
• underterminate
• error variant

For states:

• enabled
• hover
• pressed
• loading
• disabled
• focus
• read only
• skeleton

For options:

• Icon
• helper text
• divider

For a11y:

• keyboard navigation
• Voice Over navigation
• click on label select the box
• define accessibilty label even of icon only checbkoxes

For tokenator:

• Use of component tokens

Other details picked from playbook (v0.4):

• ​All the "list item" can be clicked to check/uncheck the corresponding checkbox
• You can't mix item with divider and item without in a same list. All divider status must be the same between item of a list.​