Localization in components

[gfellerph]

There are (at least) two ways how localisation in Design Systems can work:

1. Composition: Every text is defined in the markup either in a slot or a prop
2. Configuration: A centralised translation file has to be provided to the components

Composition

<post-alert>
  <h3>Eine Meldung</h3>
  <p>Ein Text einer Meldung</p>

  <!-- A dismissable alert has a button, a non-dismissible alert simply does not have this button, can be automatically assigned to correct slot -->
  <post-closebutton>Schliessen</post-closebutton>
</post-alert>

+ No need to document a way to do translations
+ No setup required, no additional load/bundle times for translation files
+ More granularity for accessible texts, e.g. "Close alert about system downtime" instead of just a generic "Close". Every text can precisely be tuned for the specific use case
+ Easy SSR
+ Works with any translation system
+ Our current components work like this
+ Easy runtime text changes

- More markup per component, large components have deeply nested structures (header)
- Makes it harder to implement complex components like AG Grid, Datepicker, etc.

? What are the limitations of the composition approach

Configuration

<script src="/assets/translations/de.js" module></script>
<post-alert dismissible>
  <h3>Eine Meldung</h3>
  <p>Ein Text einer Meldung</p>
  
  <!-- Close button text comes from de.js -->
</post-alert>

+ Less markup, complex components can easily be abstracted
+ Easy to re-use translations
+ DE, FR, IT, EN translations can be provided by the Design System Team
+ The internet header works like this
+ Weblate could be used

- Changes to translation keys need to be documented in migrations (larger change surface)
- More complicated project setup
- Possibly incompatible with project specific translation setup
- SSR?
- Not so easy runtime text changes

References

• AntD (configuration), https://ant.design/docs/react/i18n
• Shoelace (configuration), https://shoelace.style/getting-started/localization
• Lion (configuration), https://lion-web.netlify.app/fundamentals/systems/localize/overview/

Avoiding prop drilling

https://www.geeksforgeeks.org/how-to-use-the-context-api-to-avoid-prop-drilling/

[gfellerph]

Resolution:

• Use composition in the components package
• Use configuration for the header
• Discuss if we need to implement a big component (organism/"modules" in Figma)