feat: change language selector to dropdown

fccn/nau-technical#53

README.rst

@@ -50,7 +50,7 @@ Optionally, use the following variables to configure the Terms of Service Modal
 * ``TERMS_OF_SERVICE_URL`` - The URL for the terms of service.
 * ``TOS_AND_HONOR_CODE`` - The URL for the honor code.
 * ``ENABLE_FOOTER_LANG_SELECTOR`` - A boolean to enable the lnaguage selector in the footer component.
-* ``SITE_SUPPORTED_LENGUAGES`` - A list with all the languages to display in the selector.
+* ``SITE_SUPPORTED_LANGUAGES`` - A list with all the languages to display in the selector.
 
 Installation
 ============

src/_footer.scss

@@ -8,6 +8,15 @@ $footer-links-navigation-color: $footer-text;
   background-color: $footer-background-color;
   padding-top: 2rem;
   padding-bottom: 2rem;
+
+  .language-selector {
+    button {
+      color: $footer-text;
+      padding: 0;
+      border: unset;
+      background-color: unset;
+    }
+  }
 }
 
 .footer-copyright {

src/components/Footer.jsx

@@ -137,17 +137,19 @@ class SiteFooter extends React.Component {
                 />
               </a>
               <FooterCopyrightSection intl={intl} />
+              {config.ENABLE_FOOTER_LANG_SELECTOR && (
+                <div class="mb-2">
+                  <LanguageSelector
+                    options={parseEnvSettings(config.SITE_SUPPORTED_LANGUAGES)}
+                    authenticatedUser={authenticatedUser}
+                  />
+                </div>
+              )}
               <FooterSocial intl={intl} />
               <FooterPoweredBy intl={intl} />
             </div>
             <FooterLinks intl={intl} />
 
-            {config.ENABLE_FOOTER_LANG_SELECTOR && (
-              <LanguageSelector
-                options={config.SITE_SUPPORTED_LENGUAGES}
-                authenticatedUser={authenticatedUser}
-              />
-            )}
           </div>
         </section>
         <AdditionalLogosSection />

src/components/Footer.test.jsx

@@ -44,7 +44,7 @@ const FooterWithLanguageSelector = () => {
       LMS_BASE_URL: process.env.LMS_BASE_URL,
       SITE_NAME: process.env.SITE_NAME,
       ENABLE_FOOTER_LANG_SELECTOR: true,
-      SITE_SUPPORTED_LENGUAGES: [
+      SITE_SUPPORTED_LANGUAGES: [
         { label: 'English', value: 'en' },
         { label: 'Português', value: 'pt-pt' },
       ],

src/components/LanguageSelector.jsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGlobe } from '@fortawesome/free-solid-svg-icons';
 import { publish } from '@edx/frontend-platform';
 import {
   getLocale, injectIntl, intlShape, FormattedMessage, LOCALE_CHANGED, handleRtl,
 } from '@edx/frontend-platform/i18n';
+import { Dropdown } from '@openedx/paragon';
 import { logError } from '@edx/frontend-platform/logging';
 
 import { patchPreferences, postSetLang } from './data/api';
@@ -22,49 +25,58 @@ const onLanguageSelected = async (username, selectedLanguageCode) => {
 };
 
 const LanguageSelector = ({
-  intl, options, authenticatedUser, ...props
+  intl, options, authenticatedUser, compact, ...props
 }) => {
-  const handleSubmit = (e) => {
-    e.preventDefault();
+
+  const languageLabel = (languageCode) => {
+    const option = options.find( ({ value, label }) => value === languageCode )
+    return option ? option.label : null
+  }
+
+  const handleChange = (languageCode, event) => {
     const previousSiteLanguage = getLocale();
-    const languageCode = e.target.elements['site-footer-language-select'].value;
+    console.debug(previousSiteLanguage, languageCode, authenticatedUser);
+
     if (previousSiteLanguage !== languageCode) {
       onLanguageSelected(authenticatedUser?.username, languageCode);
     }
+
+    event.target.parentElement.parentElement.querySelector(".languageLabel").innerHTML = languageLabel(languageCode);
   };
 
+  const currentLangLabel = languageLabel(intl.locale)
+  const showLabel = !Boolean(compact || false);
+
   return (
-    <form
-      className="form-inline"
-      onSubmit={handleSubmit}
-      {...props}
-    >
-      <div className="form-group">
-        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-        <label htmlFor="site-footer-language-select" className="d-inline-block m-0">
-          <FormattedMessage
-            id="footer.languageForm.select.label"
-            defaultMessage="Choose Language"
-            description="The label for the laguage select part of the language selection form."
-          />
-        </label>
-        <select
-          id="site-footer-language-select"
-          className="form-control-sm mx-2"
-          name="site-footer-language-select"
-          defaultValue={intl.locale}
-        >
-          {options.map(({ value, label }) => <option key={value} value={value}>{label}</option>)}
-        </select>
-        <button data-testid="site-footer-submit-btn" className="btn btn-outline-primary btn-sm" type="submit">
-          <FormattedMessage
-            id="footer.languageForm.submit.label"
-            defaultMessage="Apply"
-            description="The label for button to submit the language selection form."
-          />
-        </button>
-      </div>
-    </form>
+    <>
+      <Dropdown className="language-selector">
+        <Dropdown.Toggle variant="outline-primary">
+          <FontAwesomeIcon icon={faGlobe} />
+          {showLabel && (
+            currentLangLabel ? (
+              <span class="pl-1 languageLabel">
+                {currentLangLabel}
+              </span>
+            ) : (
+              <span class="pl-1">
+                <FormattedMessage
+                  id="footer.languageForm.select.label"
+                  defaultMessage="Choose Language"
+                  description="The label for the laguage select part of the language selection form."
+                />
+              </span>
+            )
+          )}
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+        {options.map(({ value, label }) => (
+          <Dropdown.Item key={value} eventKey={value} onSelect={handleChange}>
+            {label}
+          </Dropdown.Item>
+        ))}
+        </Dropdown.Menu>
+      </Dropdown>
+    </>
   );
 };
 
@@ -73,6 +85,7 @@ LanguageSelector.propTypes = {
     username: PropTypes.string,
   }).isRequired,
   intl: intlShape.isRequired,
+  compact: PropTypes.bool,
   options: PropTypes.arrayOf(PropTypes.shape({
     value: PropTypes.string,
     label: PropTypes.string,