Translation & Localization

In the translations dictionary, the keys are designed to stay the same between all supported languages. The values of the keys are differentiated based on the languages you provide translations for. If you would like to support more languages than the ones described at the beginning of this guide, then you must provide the additional language code and key-value pairs in its associated dictionary.

These language objects are assigned a key which are specific names our system looks for. The naming convention is a combination of a lowercase language code ISO 639-1, hyphenated with an uppercase country code ISO-3166-1 alpha-2 (e.g. en-US). While Tecton will natively switch the language to whatever code you pass to it, when Tecton expands language functionality it will be following this convention, and you should follow this convention to avoid bugs later down the line.

In SDK extensions, the translations dictionary typically takes the form of a collection of JSON files located at MyExtensionName/frontend/public/assets/languages. These are often scoped to a specific language per file.

Example

MyExtensionName/
└── frontend/
    └── public/
        └── assets/
            └── languages/
                ├── en-US.json
                └── es-MX.json

Read more about setting up translation dictionaries with the SDK here.

loadDesignSystem is provided by the q2-tecton-sdk package, and does a couple of things under the hood to set your application up with the Tecton Design System. Read more.

For the internationalization system, loadDesignsSystem accepts two configuration options, and also returns two functions:

• language - The language to start the system with (defaults to en-US).
• translations - An object holding the different translation key-value pairs
• changeLanguage - a function to programmatically change the current language being used for translations
• loc - a function that accepts translation keys and returns their translated value. Read more.

Example

import { loadDesignSystem } from "q2-tecton-sdk";

const { changeLanguage, loc } = await loadDesignSystem({
  language: "es-MX", //provide a starting language if not using English
  translations: {
    "en-US":{
      "myKey": "My value"
    },
    "es-MX":{
      "myKey": "Mi valor"
    },
  },
});

The loadDesignSystem function from q2-tecton-sdk provides a way to alter the language at runtime. Read more.

If you are using the connect function to initialize an extension and want to access the current language code used by the host Tecton platform, use the getCurrentLanguageCode capability.

Example

import { connect } from 'q2-tecton-sdk';
connect().then((tecton) => {
  const languageCode = tecton.sources.getCurrentLanguageCode();
  console.log(languageCode);
});

setupDesignSystem is provided by the q2-design-system package. As the name suggets sets up your application to use the Tecton Design System. Read more.

For the internationalization system setupDesignSystem accepts a translations object passed as an argument.

Example

import setupDesignSystem from 'q2-design-system'

setupDesignSystem({
  translations: {
    "en-US":{
      "myKey": "My value"
    },
    "es-MX":{
      "myKey": "Mi valor"
    },
  },
}

If you wish to override translations that are shipped with Tecton components by default, you must add the exact key the component is consuming and provide your own value to the translations dictionary.

Example

Translation consumed by Calendar component:

'tecton.element.calendar.invalid': 'Date is invalid'

Your override in your translations dictionary:

'tecton.element.calendar.invalid': 'Unacceptable Date',