The Language Selector

Usage

The Language Selector a special switch-like component that shows the language used on the platform. It can be used to toggle the platform language from German to English or vice versa. It can be placed in the header, footer or settings section of a platform.

Like the Switch component, The Language Selector is a two-step action: selection and execution. Selection of the language triggers the execution of the language change across the platform.

Types

There are 2 styles of The Language Selector component: On light background and On Lila background, that will be used as name suggests based on the background in which they are placed.

If our applications will require more than two languages another type of The Language Selector with multiple choice of languages can be created.

Anatomy and Behavior

1. Container - The area that encloses the component
2. Language symbol - The clickable area which can be clicked to select the language used across the platform. When it is in a selected state, it is not clickable. The default language for all our apps is DE (German)
3. Divider - visual separator

Behavior

• The full form of the abbreviated language is shown on hover state of the language selector in a Tooltip. The language shown varies depending on which abbreviated form the user hovers over.
  • DE: Deutsch
  • EN: English
• The initially set language is pulled from the users browser settings. If the browser language is unavailable, the component will set the default language to English.

States

Both DE and EN statuses can have hover, active, focus, and Selected states. At any given point of time, one of the two languages is in a Selected state and the other in the default state.

Gaps and Sizes

• Language symbol clickable area height: M+
• Language symbol clickable area width: L
• Container height and width: Adapt to the content
• Divider width: 3XS
• Divider height: Mplus (or 100% of the height)
• Gap between language symbol and divider: 2XS

Tokens

SCSS Variable

Value

$theLanguageSelector-color

--color-grey-54

$theLanguageSelector-color--hovered

--color-grey-25

$theLanguageSelector-color--active

--color-grey-54

$theLanguageSelector-outline-color--focus

--color-azure-45

$theLanguageSelector-color--selected

--bds-brand-primary-color

$theLanguageSelector-divider-color

--color-grey-54

$theLanguageSelector-onLilaBg-color

--color-lila-70

$theLanguageSelector-onLilaBg-color--hovered

--color-lila-54

$theLanguageSelector-onLilaBg-color--active

--color-lila-70

$theLanguageSelector-onLilaBg-outline-color--focus

--color-azure-45

$theLanguageSelector-onLilaBg-color--selected

--color-grey-98

$theLanguageSelector-onLilaBg-divider-color

--color-lila-70

Properties

export interface TheLanguageSelectorProps {
  /**
  * suppress translation of site title and meta tags
  * */
  noMetaTranslate?: boolean;
  /**
   * whether to initially set the language based on the client's browser language
   */
  deriveLangFromClient?: boolean;
  onLilaBg?: boolean;
}

export interface TheLanguageSelectorMultiProps extends TheLanguageSelectorProps {
  hideLabel?: boolean;
}

If you choose to let TheLanguageSelector handle the translation of the meta information and site title make sure to include the corresponding locale keys in your translations (see Internationalization)