[component]: Search input

[Cian77]

Description

No response

Design

https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=2729-31193

Tokens

• [x] Tokens for this component are ready

Token proposal

• search-searchbutton-height
• search-clearbutton-height
• search-controls-border-radius (border radius of the search button and reset button)
• search-controls-gap (space between search button and reset button)
• search-padding-inline-end (padding the goes hover the two search buttons)

For the rest, reuse the token from the text input:

• input-bg (enabled)
• input-fg (enabled/hover/focus)
• input-border (width/style/color) (enabled/hover/focus)
• input-border-radius
• input-padding-inline
• input-padding-block (empty/filled)
• input-block-gap (space between value and label)
• input-label-font (size) (empty/filled)
• input-value-font-size

Requirements

• Use the native clear input value functionality (the small X) and style it appropriately where possible
• Keep in mind that the Design is not quite ready for this component, it has inconsistencies (see comments)

Tasks

### 💻 Tasks
- [ ] https://github.com/swisspost/design-system/issues/3270
- [x] Review Design (All states present? Possible to implement?)
- [ ] HTML/CSS implementation
- [ ] Documentation in Storybook
- [ ] Visual regression tests
- [ ] Design review

[Vandapanda]

@alionazherdetska Component is tokenized and reused input tokens where possible. Added new inline end paddings and a gap as we got 2 icons here. Also added you a border radius for the icons as suggested above. Let me know if you want them named controls instead of icon. If there are any questions let me know.

[alizedebray]

Resolution:

• In Figma, the search and the text input are different component, this will remain
• In the code, the search (<input type="search" />) is an input with a specific type, therefore it will use the styles of the input and only what is specific to the search will be tokenized and overriden.