Support Translations

[ArakTaiRoth]

Info

Requested by Tim Chen

It's been requested of us that we have support for additional languages. Considering we are a multi-language nation, we should probably at the very least be capable of supporting French, but support for other languages should be built in so that later it's easy to add other languages as needed.

Acceptance Criteria:

1. Be able to resolve the chosen language
   • Do this by accepting a lang attribute added to the html tag or any other kind of block level tag (div, section, etc....)
   • This would be the priority level, html --> other parent component --> en-CA
   • French language would be supported via fr-CA, fr-FR is another language (France French)
   • en-CA would be the default language if nothing else is supplied
2. Have an interface created with all messages that would need to be translated, such as:
   • Similar text shared by models shouldn't be placed in a model specific location so we don't have to duplicate translations

export interface GoaMessages {
  pagination: {
    page: string;
    of: string;
    previous: string;
    next: string;
  };
  fileUpload: {
    dropFiles: string;
    or: string;
    browseFiles: string;
    maximumFileSize: (size: string) => string;
  };
  modal: {
    label: string;
    close: string;
  };
}

3. Build out the corresponding language files, en-CA and fr-CA for starters.
   • Considering we don't use full sentences, Google Translate should be good enough for this
4. Replace all instances of hardcoded text with the message locations
   • This includes visual text, and aria text
5. Add some examples of localization on the website (html based, sub level component based, etc...)

DO NOT use localization based on location for things like months and days. That could very easily conflict with the localization provided by the lang attribute as again there is no designated French only location in Canada. Translate months and days, etc... based on the lang attribute like everything else