[component]: Language switch

[gfellerph]

Create a standalone language switch component. The current implementation (https://github.com/swisspost/design-system/tree/main/packages/internet-header/src/components/post-language-switch) relies on a config file, the new component should be usable without that configuration.

Design

https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=2908-30439&t=saHtog1amMMrG60S-4

Props

• caption: A title for the list, e.g. "Sprachnavigation"
• description: A descriptive text, e.g. "Die ausgewählte Sprache ist Deutsch"
• variant: list (default)|dropdown determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header)
• mode: link (default)|events determines if the language-switch navigates to a different page or just emits events

Slots

• post-language-option: Used for displaying the available options

Requirements

• Responsive: The language switch should be a menu dropdown on desktop and a horizontal list on mobile
• Placement: The placement will be handled by the <post-header> component, so the language switch should expose auto-slot behaviour <post-language-switch slot="post-language-switch">

Proposed markup

List

<!-- Default with links -->
<post-language-switch variant=events title=Sprachnavigation description="Die aktuelle Sprache ist Deutsch">
  <post-language-option active lang=de title=Deutsch url="/de">DE</post-language-option>
</post-language-switch>

<!-- Event driven with buttons -->
<post-language-switch variant=events title=Sprachnavigation description="Die aktuelle Sprache ist Deutsch">
  <post-language-option active lang=de title=Deutsch>DE</post-language-option>
</post-language-switch>

<!-- Mobile rendering -->
<Host>
  <post-list>
    <h3>{this.title}, {this.description}</h3>
    <slot></slot>
  </post-list>
</Host>

<!-- Desktop rendering -->
<Host>
  <post-menu-toggle>
    <button>
      {this.title}, {this.description}
    </button>
  </post-menu-toggle>
  <post-menu>
    <post-list>
      <h3>{this.title}</h3>
      <slot></slot>
    </post-list>
  </post-menu>
</Host>

Tasks

Beta Give feedback

1. [component]: Menu #1242
   📦 components +1
   
2. [component]: List #3544
   5 of 5
   good first issue 📦 components +2
   
3. [component]: Langage switch option #3757
   3 of 3
   📦 components +1
   
4. Create a <post-language-switch> component
5. Add documentation
6. e2e tests
7. Visual regression tests
8. Design review

[gfellerph]

Component naming possibilities:

• post-language-switch
• post-languageswitch
• post-i18n
• post-language-dropdown
• post-language-menu

[gfellerph]

Should this component be made only from <post-menu> and <post-list> with according styles from the styles package?