[component]: Validation

[schaertim]

It was decided that validation should be implemented separately and reused in all components requiring it. A dedicated token set has to be provided first.

### Tasks
- [ ] Add new token set for validation
- [ ] Implment validation styles (which should be reusable in all components requiring validation)

[gfellerph]

@gfellerph add more information

[alizedebray]

• How should we handle the two different error message variants ?
• How do we know which variant applies to which component ?

[gfellerph]

Tokens: post-validation-valid-fg post-validation-invalid-fg

Variant 1: <p class="validation invalid icon">Error</p>

Variant 2: [type="checkbox"] ~ .validation { // Show icon }

Resolution:

• Variant to be used is inferred by type of component used (variant 2)

[myrta2302]

Tokens

post.validation.error #B200000 post.validation.success #107800 post.validation.font-size 14px post.validation.text.padding.block.text 6px post.validation.text.padding.inline.text 2px post.validation.list.gap.inline 8/6/4px post.validation.list.padding.block.text 1px post.validation.list.icon.size 24/22/20px post.validation.list.icon.padding 0/1/2px

[Vandapanda]

Added this one to the pattern discussion as its connected to the other issue I got

[myrta2302]

• Will the rest of the input types be designed
• Success and Error colors on Dark theme?

[oliverschuerch]

Let's concentrate on the components needed for PPNL:

• Text input
• Select
• Textarea
• Checkbox
• Radio Button
• Card Control (if it does not take to much time)

[Vandapanda]

Tokenised and implemented in some examples. Link for Input Link for Group

[myrta2302]

@sandra-post ->Design Review: https://preview-3824--swisspost-design-system-next.netlify.app/

[sandra-post]

@myrta2302 Design Review feedback for Validation

• Re: text input, text area, select - Validation message can not co-exist with assistive text of input component (this is maybe covered in the implementation of the components itself)
• Re: checkbox, radio button - Icon for "Invalid": Wrong, IS: white "X", should be "Warning_16_2_0_OPTIC" (exclamation mark)
• Re: card control - No design yet available, needs to be reviewed when design available
• General: I did not review top and bottom spacings since dependencies to input component implementation. Needs to be checked as total (when component impelemntation done)