Language Switcher

A UI molecule for changing the language of the current page.

<form class="mzp-c-language-switcher " method="get"
 action="#">
  <a class="mzp-c-language-switcher-link" href="https://www.mozilla.org/locales/">Language</a>
  <label
   for="mzp-c-language-switcher-select">Language</label>
  <select id="mzp-c-language-switcher-select"
   class="mzp-js-language-switcher-select" name="lang">
    <option value="en-US">English (US)</option>
    <option value="de">Deutsch</option>
    <option value="fr">Français</option>
    <option value="es-ES">Español</option>
    <option value="ja">日本語</option>
  </select>
  <!-- form submit button is shown when JavaScript is not enabled -->
  <button type="submit">Go</button>
</form>

<script
 src="../../../assets/protocol/protocol/js/protocol-lang-switcher.js">
</script>

<script>
  (function() {
    'use strict';
    // a custom callback can be passed to the lang switcher for analytics purposes.
    Mzp.LangSwitcher.init(function(previousLanguage,
      newLanguage) {
      console.log('Previous language: ',
        previousLanguage);
      console.log('New language: ', newLanguage);
    })
  })();
</script>

Notes

Assumes the first path in the page URL immediately after hostname is a valid locale code e.g. https://www.mozilla.org/en-US/firefox/.
This molecule can be displayed inside the Footer organism, but could also be used elsewhere if more appropriate.
The link mzp-c-cta-link is optional, and should be used only if a website has a page dedicated to language selection. If omitted, the form <label> will be displayed visually instead.
An optional theme class mzp-t-dark can be applied for use on dark backgrounds.
Inline JavaScript in this example is for demo purposes only. Use external files in production code.