From ff9811db859bd3220b6abc2907c1cc22f75407f1 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@disroot.org>
Date: Tue, 4 Jul 2023 21:09:21 +0530
Subject: [PATCH] feat: configure style via config api or settings

docs: update readme with MFE api customization options

test: update snapshot with context

feat: add option to configure link container classnames
---
 .env.development                              |   1 +
 README.rst                                    |  56 ++++-
 src/components/Footer.jsx                     |  57 +++--
 src/components/Footer.test.jsx                |  10 +
 src/components/LanguageSelector.jsx           |   2 +-
 .../__snapshots__/Footer.test.jsx.snap        | 230 +++++++++++-------
 6 files changed, 235 insertions(+), 121 deletions(-)

diff --git a/.env.development b/.env.development
index 303bf9ede2..ce12eee70f 100644
--- a/.env.development
+++ b/.env.development
@@ -17,3 +17,4 @@ LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+MFE_CONFIG_API_URL=http://localhost:18000/api/mfe_config/v1
diff --git a/README.rst b/README.rst
index d1a03d3dcc..334254ea27 100644
--- a/README.rst
+++ b/README.rst
@@ -51,22 +51,58 @@ This library has the following exports:
   language from its dropdown.
 * supportedLanguages: An array of objects representing available languages.  See example below for object shape.
 
+Customization via MFE config API
+================================
+
+Other than the environment variables listed above, it is also possible to customize the footer via `MFE config API <https://github.com/openedx/edx-platform/blob/master/lms/djangoapps/mfe_config_api/docs/decisions/0001-mfe-config-api.rst>`_. Below is the possible list of settings
+
+.. code-block:: python
+
+   MFE_CONFIG = {
+       # Update footer container styling
+       "FOOTER_CUSTOM_STYLE": {
+           "backgroundImage": "url(http://<some-image-url>)",
+           # to change opacity of background image
+           # "backgroundImage": "linear-gradient( rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85) ) , url(http://<some-image-url>)",
+       },
+       # Update footer container styling via bootstrap classes
+       "FOOTER_CUSTOM_CLASSNAMES": "py-5 px-4 text-center flex-column justify-content-center flex-wrap text-dark",
+       # Update footer logo styling
+       "FOOTER_LOGO_STYLE": {
+           "marginBottom": "2rem",
+       },
+       # Override environment variable
+       "LOGO_TRADEMARK_URL": "https://<logo url>",
+       # Add links to footer
+       "FOOTER_LINKS": [
+           {"url": "https://openedx.org/terms-of-use/", "text": "Terms of service"},
+           {"url": "https://openedx.org/code-of-conduct/", "text": "Code of conduct"},
+           {"url": "https://openedx.org/privacy-policy/", "text": "Privacy Policy"},
+       ],
+       # Update link container classes
+       "FOOTER_LINKS_CONTAINER_CLASSNAMES": "flex-wrap",
+       # Update link styling
+       "FOOTER_LINKS_CLASSNAMES": "text-dark font-weight-bold",
+   }
+
 Examples
 ========
 
-Component Usage Example::
+Component Usage Example
+
+.. code-block:: javascript
 
-  import Footer, { messages } from '@edx/frontend-component-footer';
+   import Footer, { messages } from '@edx/frontend-component-footer';
 
-  ...
+   ...
 
-  <Footer
-    onLanguageSelected={(languageCode) => {/* set language */}}
-    supportedLanguages={[
-      { label: 'English', value: 'en'},
-      { label: 'Español', value: 'es' },
-    ]}
-  />
+   <Footer
+     onLanguageSelected={(languageCode) => {/* set language */}}
+     supportedLanguages={[
+       { label: 'English', value: 'en'},
+       { label: 'Español', value: 'es' },
+     ]}
+   />
 
 * `An example of minimal component and messages usage. <https://github.com/openedx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L23>`_
 * `An example of SCSS file usage. <https://github.com/openedx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L9>`_
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index d8d414c94b..cea9606564 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -42,32 +42,45 @@ class SiteFooter extends React.Component {
     } = this.props;
     const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected;
     const { config } = this.context;
-
     return (
       <footer
         role="contentinfo"
-        className="footer d-flex border-top py-3 px-4"
+        className={`footer d-flex border-top py-3 px-4 ${config.FOOTER_CUSTOM_CLASSNAMES || ''}`}
+        style={config.FOOTER_CUSTOM_STYLE}
       >
-        <div className="container-fluid d-flex">
-          <a
-            className="d-block"
-            href={config.LMS_BASE_URL}
-            aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
-          >
-            <img
-              style={{ maxHeight: 45 }}
-              src={logo || config.LOGO_TRADEMARK_URL}
-              alt={intl.formatMessage(messages['footer.logo.altText'])}
-            />
-          </a>
-          <div className="flex-grow-1" />
-          {showLanguageSelector && (
-            <LanguageSelector
-              options={supportedLanguages}
-              onSubmit={onLanguageSelected}
-            />
-          )}
-        </div>
+        <a
+          className="d-block"
+          href={config.LMS_BASE_URL}
+          aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
+        >
+          <img
+            style={{ maxHeight: 45, ...config.FOOTER_LOGO_STYLE }}
+            src={logo || config.LOGO_TRADEMARK_URL}
+            alt={intl.formatMessage(messages['footer.logo.altText'])}
+          />
+        </a>
+        <div className="flex-grow-1" />
+        {Array.isArray(config.FOOTER_LINKS) && (
+          <div className={`d-flex align-items-center justify-content-center ${config.FOOTER_LINKS_CONTAINER_CLASSNAMES || ''}`}>
+            {config.FOOTER_LINKS.map(element => (
+              <a
+                key={element.url}
+                className={`px-3 ${config.FOOTER_LINKS_CLASSNAMES}`}
+                href={element.url}
+                target={element.target || 'blank'}
+              >
+                {element.text}
+              </a>
+            )).reduce((prev, curr) => [prev, '|', curr])}
+          </div>
+        )}
+        {showLanguageSelector && (
+          <LanguageSelector
+            options={supportedLanguages}
+            onSubmit={onLanguageSelected}
+          />
+        )}
+
       </footer>
     );
   }
diff --git a/src/components/Footer.test.jsx b/src/components/Footer.test.jsx
index ff75473f66..e4d4d42581 100644
--- a/src/components/Footer.test.jsx
+++ b/src/components/Footer.test.jsx
@@ -13,6 +13,16 @@ const FooterWithContext = ({ locale = 'es' }) => {
     config: {
       LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
       LMS_BASE_URL: process.env.LMS_BASE_URL,
+      FOOTER_CUSTOM_STYLE: { color: 'black' },
+      FOOTER_CUSTOM_CLASSNAMES: 'text-center',
+      FOOTER_LOGO_STYLE: { color: 'white' },
+      FOOTER_LINKS: [
+        { url: 'https://openedx.org/terms-of-use/', text: 'Terms of service' },
+        { url: 'https://openedx.org/code-of-conduct/', text: 'Code of conduct' },
+        { url: 'https://openedx.org/privacy-policy/', text: 'Privacy Policy' },
+      ],
+      FOOTER_LINKS_CONTAINER_CLASSNAMES: 'flex-wrap',
+      FOOTER_LINKS_CLASSNAMES: 'text-dark font-weight-bold',
     },
   }), []);
 
diff --git a/src/components/LanguageSelector.jsx b/src/components/LanguageSelector.jsx
index dc088197ac..b14e19e584 100644
--- a/src/components/LanguageSelector.jsx
+++ b/src/components/LanguageSelector.jsx
@@ -13,7 +13,7 @@ const LanguageSelector = ({
 
   return (
     <form
-      className="form-inline"
+      className="form-inline justify-content-center"
       onSubmit={handleSubmit}
       {...props}
     >
diff --git a/src/components/__snapshots__/Footer.test.jsx.snap b/src/components/__snapshots__/Footer.test.jsx.snap
index aa388b21a7..ab162127c2 100644
--- a/src/components/__snapshots__/Footer.test.jsx.snap
+++ b/src/components/__snapshots__/Footer.test.jsx.snap
@@ -2,128 +2,182 @@
 
 exports[`<Footer /> renders correctly renders with a language selector 1`] = `
 <footer
-  className="footer d-flex border-top py-3 px-4"
+  className="footer d-flex border-top py-3 px-4 "
   role="contentinfo"
 >
-  <div
-    className="container-fluid d-flex"
+  <a
+    aria-label="edX Home"
+    className="d-block"
+    href="http://localhost:18000"
   >
-    <a
-      aria-label="edX Home"
-      className="d-block"
-      href="http://localhost:18000"
-    >
-      <img
-        alt="Powered by Open edX"
-        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
-        style={
-          Object {
-            "maxHeight": 45,
-          }
+    <img
+      alt="Powered by Open edX"
+      src="https://edx-cdn.org/v3/default/logo-trademark.svg"
+      style={
+        Object {
+          "maxHeight": 45,
         }
-      />
-    </a>
-    <div
-      className="flex-grow-1"
+      }
     />
-    <form
-      className="form-inline"
-      onSubmit={[Function]}
+  </a>
+  <div
+    className="flex-grow-1"
+  />
+  <form
+    className="form-inline justify-content-center"
+    onSubmit={[Function]}
+  >
+    <div
+      className="form-group"
     >
-      <div
-        className="form-group"
+      <label
+        className="d-inline-block m-0"
+        htmlFor="site-footer-language-select"
       >
-        <label
-          className="d-inline-block m-0"
-          htmlFor="site-footer-language-select"
-        >
-          Choose Language
-        </label>
-        <select
-          className="form-control-sm mx-2"
-          defaultValue="en"
-          id="site-footer-language-select"
-          name="site-footer-language-select"
+        Choose Language
+      </label>
+      <select
+        className="form-control-sm mx-2"
+        defaultValue="en"
+        id="site-footer-language-select"
+        name="site-footer-language-select"
+      >
+        <option
+          value="en"
         >
-          <option
-            value="en"
-          >
-            English
-          </option>
-          <option
-            value="es"
-          >
-            Español
-          </option>
-        </select>
-        <button
-          className="btn btn-outline-primary btn-sm"
-          type="submit"
+          English
+        </option>
+        <option
+          value="es"
         >
-          Apply
-        </button>
-      </div>
-    </form>
-  </div>
+          Español
+        </option>
+      </select>
+      <button
+        className="btn btn-outline-primary btn-sm"
+        type="submit"
+      >
+        Apply
+      </button>
+    </div>
+  </form>
 </footer>
 `;
 
 exports[`<Footer /> renders correctly renders without a language selector 1`] = `
 <footer
-  className="footer d-flex border-top py-3 px-4"
+  className="footer d-flex border-top py-3 px-4 text-center"
   role="contentinfo"
+  style={
+    Object {
+      "color": "black",
+    }
+  }
 >
+  <a
+    aria-label="edX Home"
+    className="d-block"
+    href="http://localhost:18000"
+  >
+    <img
+      alt="Powered by Open edX"
+      src="https://edx-cdn.org/v3/default/logo-trademark.svg"
+      style={
+        Object {
+          "color": "white",
+          "maxHeight": 45,
+        }
+      }
+    />
+  </a>
   <div
-    className="container-fluid d-flex"
+    className="flex-grow-1"
+  />
+  <div
+    className="d-flex align-items-center justify-content-center flex-wrap"
   >
     <a
-      aria-label="edX Home"
-      className="d-block"
-      href="http://localhost:18000"
+      className="px-3 text-dark font-weight-bold"
+      href="https://openedx.org/terms-of-use/"
+      target="blank"
     >
-      <img
-        alt="Powered by Open edX"
-        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
-        style={
-          Object {
-            "maxHeight": 45,
-          }
-        }
-      />
+      Terms of service
+    </a>
+    |
+    <a
+      className="px-3 text-dark font-weight-bold"
+      href="https://openedx.org/code-of-conduct/"
+      target="blank"
+    >
+      Code of conduct
+    </a>
+    |
+    <a
+      className="px-3 text-dark font-weight-bold"
+      href="https://openedx.org/privacy-policy/"
+      target="blank"
+    >
+      Privacy Policy
     </a>
-    <div
-      className="flex-grow-1"
-    />
   </div>
 </footer>
 `;
 
 exports[`<Footer /> renders correctly renders without a language selector in es 1`] = `
 <footer
-  className="footer d-flex border-top py-3 px-4"
+  className="footer d-flex border-top py-3 px-4 text-center"
   role="contentinfo"
+  style={
+    Object {
+      "color": "black",
+    }
+  }
 >
+  <a
+    aria-label="edX Home"
+    className="d-block"
+    href="http://localhost:18000"
+  >
+    <img
+      alt="Powered by Open edX"
+      src="https://edx-cdn.org/v3/default/logo-trademark.svg"
+      style={
+        Object {
+          "color": "white",
+          "maxHeight": 45,
+        }
+      }
+    />
+  </a>
+  <div
+    className="flex-grow-1"
+  />
   <div
-    className="container-fluid d-flex"
+    className="d-flex align-items-center justify-content-center flex-wrap"
   >
     <a
-      aria-label="edX Home"
-      className="d-block"
-      href="http://localhost:18000"
+      className="px-3 text-dark font-weight-bold"
+      href="https://openedx.org/terms-of-use/"
+      target="blank"
     >
-      <img
-        alt="Powered by Open edX"
-        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
-        style={
-          Object {
-            "maxHeight": 45,
-          }
-        }
-      />
+      Terms of service
+    </a>
+    |
+    <a
+      className="px-3 text-dark font-weight-bold"
+      href="https://openedx.org/code-of-conduct/"
+      target="blank"
+    >
+      Code of conduct
+    </a>
+    |
+    <a
+      className="px-3 text-dark font-weight-bold"
+      href="https://openedx.org/privacy-policy/"
+      target="blank"
+    >
+      Privacy Policy
     </a>
-    <div
-      className="flex-grow-1"
-    />
   </div>
 </footer>
 `;