How it works: UI text and translations

Translations

Quick start

You should not add UI text directly in your typescript files. All UI text needs to be defined in ui-components/src/locales/general.json and passed through the method t() to get the corresponding translation.

For example:

DO NOT DO THE FOLLOWING: 
<label className="field-label">Rent Range</label>

DO THE FOLLOWING: 
<label className="field-label">{t(filterState.rentRange)}</label>

where filterState.rentRange is defined in general.json as follows:

{
  // ... Other translation definitions
  "filterState": { 
    "rentRange": "Rent range"
  } 
}

Every time you add a new English UI string, you also need to add the corresponding Spanish, Bengali, and Arabic translations.

For the above example you would add the Spanish translation to ui-components/src/locales/es.json as follows:

{
  // ... Other translation definitions
  "filterState": { 
    "rentRange": "Rango de alquiler"
  } 
}

And also add Bengali (bn.json) and Arabic (ar.json) translations in a similar way.

Where translations are stored

The UI translation json files are stored in ui-components/src/locales/, with the English strings stored in general.json, the Spanish strings in es.json, the Bengali strings in bn.json, and the Arabic strings in ar.json.

Overriding translations for site specific strings

Sometimes you may need to override a translation that already exists in ui-components/src/locales/general.json to make it site specific. These overrides are stored in sites/public/page_content/locale_overrides/ for the public site and sites/partner/page_content/locale_overrides/. For example, we needed to override region.name, which is defined in ui-components/src/locales/general.json to be "Local Region" to make it Detroit specific as follows:

{
  // Other translation overrides
  "region": {
    "name": "Detroit"
  }
}

Required languages

We need the following translations for Detroit:

• Spanish (stored in es.json)
• Bengali (stored in bn.json)
• Arabic (stored in ar.json)

You will also find the following languages in the repository Vietnamese (vi.json) and Chinese (zh.json). These are present because they are available in the upstream Bloom repository, but we are not actively using them for Detroit. You do not need to add translations to these files.

Regenerating the translation files using Google translate

Adding a new language