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
openedx · Jul 28, 2023 · ff9811d · ff9811d
1 parent 0d6c99a
commit ff9811d
Show file tree

Hide file tree

Showing 6 changed files with 235 additions and 121 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -13,7 +13,7 @@ const LanguageSelector = ({
 
   return (
     <form
-      className="form-inline"
+      className="form-inline justify-content-center"
       onSubmit={handleSubmit}
       {...props}
     >