[component]: Text input

[Cian77]

Description

Create a HTML/CSS component using the current markup that implements as many features as possible from the new Design. Remove any dependencies on bootstrap for this component. This is done for backwards compatibility reasons. The current structure will eventually be deprecated. These styles will give us the necessary time to come up with a solid input component strategy.

Open issues:

Design:

• [x] Integrated and tested new Typography
• [x] Integrated new Icons
• [ ] Spacing is defined

Tokens:

• [x] text

Design

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

Tokens

• [X] Tokens for this component are ready Depends on #3402

@use 'sass:map';
@use './../tokens/components' as tokens;

// to see the available component tokens
@each $key in map.keys(tokens.$post-text-input) {
  @debug $key;
}

input {
  {property}: map.get(tokens.$post-text-input, {token-name});
}

Tasks

### 💻 Tasks
- [x] Review figma design (states complete, ability to implement)
- [ ] HTML/CSS implementation
- [ ] Remove any references to bootstrap
- [ ] Remove any unused scss variables for this component
- [ ] Documentation in Storybook
- [ ] Visual regression tests
- [ ] Design review

[gfellerph]

After discussion with @sandrahohl-post, small variants and dark mode will be added in a later iteration.

[gfellerph]

Open point: validation message (create a component? is icon in validation message?) -> https://github.com/swisspost/design-system/discussions/3353

Component token names are under discussion as well -> https://github.com/swisspost/design-system/issues/3356

[Cian77]

Integrated new Typography and Icons.

[alizedebray]

Waiting for the tokens to be updated.