feat!: footer legal links

Add the ability to configure footer links.

BREAKING CHANGE: SHOW_ACCESSIBILITY_PAGE is replaced with the ACCESSIBILITY_URL config.
---------

Co-authored-by: Wassaf-Shahzad <[email protected]>
Co-authored-by: Arslan Ashraf <[email protected]>

Author: 3 people

.env.development

@@ -1,8 +1,12 @@
+ABOUT_US_URL=null
 ACCESS_TOKEN_COOKIE_NAME=edx-jwt-cookie-header-payload
+ACCESSIBILITY_URL=null
 BASE_URL=localhost:8080
+CONTACT_URL=null
 CREDENTIALS_BASE_URL=http://localhost:18150
 CSRF_TOKEN_API_PATH=/csrf/api/v1/token
 ECOMMERCE_BASE_URL=http://localhost:18130
+HONOR_CODE_URL=null
 LANGUAGE_PREFERENCE_COOKIE_NAME=openedx-language-preference
 LMS_BASE_URL=http://localhost:18000
 LOGIN_URL=http://localhost:18000/login
@@ -12,12 +16,16 @@ TERMS_OF_SERVICE_URL=null
 PRIVACY_POLICY_URL=null
 SUPPORT_EMAIL=null
 STUDIO_BASE_URL=http://localhost:18010
-ENABLE_ACCESSIBILITY_PAGE=false
+TRADEMARK_TEXT=''
 ORDER_HISTORY_URL=localhost:1996/orders
 REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh
 SEGMENT_KEY=null
+SHOW_FOOTER_LOGO=true
 SITE_NAME=Open edX
+SUPPORT_CENTER_TEXT=''
+SUPPORT_CENTER_URL=null
 USER_INFO_COOKIE_NAME=edx-user-info
+FOOTER_LOGO_ALT_TEXT="Open edX Logo"
 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

README.rst

@@ -43,6 +43,21 @@ This component requires that the following environment variable be set by the co
 * ``LMS_BASE_URL`` - The URL of the LMS of your Open edX instance.
 * ``LOGO_TRADEMARK_URL`` - This is a URL to a logo for use in the footer.  This is a different environment variable than ``LOGO_URL`` (used in frontend-component-header) to accommodate sites that would like to have additional trademark information on a logo in the footer, such as a (tm) or (r) symbol.
 
+Optional Environment Variables
+=====================
+Apart from the required environment variables, this component also supports the following optional environment variables. These variables add the ability to display
+custom legal links in the footer. Optional environment variables can also be set by the consuming micro-frontend.
+
+* ``ABOUT_US_URL`` - About Us page URL.
+* ``ACCESSIBILITY_URL`` - Accessibility page URL.
+* ``CONTACT_URL`` - Contact Us page URL.
+* ``HONOR_CODE_URL`` - Honor Code page URL.
+* ``FOOTER_LOGO_ALT_TEXT`` - Alt text for the footer logo.
+* ``SHOW_FOOTER_LOGO`` - Optionally display the logo.
+* ``SUPPORT_CENTER_TEXT`` - Text for the Support Center link i.e. `Help Center`.
+* ``SUPPORT_CENTER_URL`` - Support center URL.
+* ``TRADEMARK_TEXT`` - Trademark text.
+
 Installation
 ============
 

src/_footer.scss

@@ -1,5 +1,64 @@
 $gray-footer: #fcfcfc !default;
+$link-blue: #006daa;
 
 .footer {
   background-color: $gray-footer;
+
+  .copyright-col {
+    display: flex;
+    flex-direction: column;
+    padding-left: 20px;
+    padding-right: 20px;
+
+    .trademark-text {
+      color: #707070 !important;
+      font-size: 87.5%;
+      font-weight: 400;
+    }
+  }
+}
+
+.footer-sub-nav {
+  padding: 0;
+  margin: 0 0 5px;
+  list-style: none;
+  font-size: 15px;
+  line-height: 20px;
+
+  @include media-breakpoint-down(md) {
+    text-align: left;
+  }
+
+  @include media-breakpoint-up(md) {
+    margin: 0;
+  }
+
+  li {
+    display: inline-block;
+    vertical-align: top;
+    margin: 0;
+
+    @include media-breakpoint-down(md) {
+      display: block;
+      margin: 0;
+      padding: 0 0 7px;
+      
+      &::before {
+        display: none;
+      }
+    }
+    
+    &::before {
+      content: "-";
+      padding-left: 5px;
+      padding-right: 5px;
+      color: $link-blue
+    }
+
+    &:first-child {
+      &::before {
+        display: none;
+      }
+    }
+  }
 }

src/components/Footer.jsx

@@ -1,9 +1,16 @@
 import React from 'react';
+import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { ensureConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
+import {
+  APP_CONFIG_INITIALIZED,
+  getConfig,
+  mergeConfig,
+  subscribe,
+} from '@edx/frontend-platform';
 
 import messages from './Footer.messages';
 import LanguageSelector from './LanguageSelector';
@@ -13,6 +20,22 @@ ensureConfig([
   'LOGO_TRADEMARK_URL',
 ], 'Footer component');
 
+subscribe(APP_CONFIG_INITIALIZED, () => {
+  mergeConfig({
+    ABOUT_US_URL: process.env.ABOUT_US_URL,
+    ACCESSIBILITY_URL: process.env.ACCESSIBILITY_URL,
+    CONTACT_URL: process.env.CONTACT_URL,
+    HONOR_CODE_URL: process.env.HONOR_CODE_URL,
+    FOOTER_LOGO_ALT_TEXT: process.env.FOOTER_LOGO_ALT_TEXT,
+    PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL,
+    SHOW_FOOTER_LOGO: process.env.SHOW_FOOTER_LOGO,
+    SUPPORT_CENTER_TEXT: process.env.SUPPORT_CENTER_TEXT,
+    SUPPORT_CENTER_URL: process.env.SUPPORT_CENTER_URL,
+    TERMS_OF_SERVICE_URL: process.env.TERMS_OF_SERVICE_URL,
+    TRADEMARK_TEXT: process.env.TRADEMARK_TEXT,
+  }, 'Footer additional config');
+});
+
 const EVENT_NAMES = {
   FOOTER_LINK: 'edx.bi.footer.link',
 };
@@ -33,6 +56,10 @@ class SiteFooter extends React.Component {
     sendTrackEvent(eventName, properties);
   }
 
+  renderLinkIfExists(value, text) {
+    return !_.isEmpty(value) && <li><a href={value}>{text}</a></li>;
+  }
+
   render() {
     const {
       supportedLanguages,
@@ -42,13 +69,14 @@ 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"
       >
         <div className="container-fluid d-flex">
+          { getConfig().SHOW_FOOTER_LOGO
+          && (
           <a
             className="d-block"
             href={config.LMS_BASE_URL}
@@ -57,9 +85,43 @@ class SiteFooter extends React.Component {
             <img
               style={{ maxHeight: 45 }}
               src={logo || config.LOGO_TRADEMARK_URL}
-              alt={intl.formatMessage(messages['footer.logo.altText'])}
+              alt={getConfig().FOOTER_LOGO_ALT_TEXT || intl.formatMessage(messages['footer.logo.altText'])}
             />
           </a>
+          )}
+          <div className="copyright-col">
+            {getConfig().TRADEMARK_TEXT
+            && (
+            <div className="trademark-text">
+                {getConfig().TRADEMARK_TEXT}
+            </div>
+            )}
+            <div>
+              <ul className="footer-sub-nav">
+                {
+                  this.renderLinkIfExists(getConfig().ABOUT_US_URL, intl.formatMessage(messages['footer.edxLinks.aboutUs']))
+                }
+                {
+                  this.renderLinkIfExists(getConfig().TERMS_OF_SERVICE_URL, intl.formatMessage(messages['footer.legalLinks.termsOfService']))
+                }
+                {
+                  this.renderLinkIfExists(getConfig().PRIVACY_POLICY_URL, intl.formatMessage(messages['footer.legalLinks.privacyPolicy']))
+                }
+                {
+                  this.renderLinkIfExists(getConfig().HONOR_CODE_URL, intl.formatMessage(messages['footer.legalLinks.honorCode']))
+                }
+                {
+                  this.renderLinkIfExists(getConfig().CONTACT_URL, intl.formatMessage(messages['footer.connectLinks.contact']))
+                }
+                {
+                  this.renderLinkIfExists(getConfig().ACCESSIBILITY_URL, intl.formatMessage(messages['footer.legalLinks.a11yPolicy']))
+                }
+                {
+                  this.renderLinkIfExists(getConfig().SUPPORT_CENTER_URL, getConfig().SUPPORT_CENTER_TEXT || intl.formatMessage(messages['footer.connectLinks.help']))
+                }
+              </ul>
+            </div>
+          </div>
           <div className="flex-grow-1" />
           {showLanguageSelector && (
             <LanguageSelector

src/components/Footer.messages.js

@@ -39,7 +39,12 @@ const messages = defineMessages({
   'footer.edxLinks.about': {
     id: 'footer.edxLinks.about',
     defaultMessage: 'About',
-    description: 'The label for the link to the about edX page.',
+    description: 'The label for the link to the about page.',
+  },
+  'footer.edxLinks.aboutUs': {
+    id: 'footer.edxLinks.aboutUs',
+    defaultMessage: 'About Us',
+    description: 'The label for the link to the about us page.',
   },
   'footer.edxLinks.business': {
     id: 'footer.edxLinks.business',
@@ -59,12 +64,12 @@ const messages = defineMessages({
   'footer.edxLinks.careers': {
     id: 'footer.edxLinks.careers',
     defaultMessage: 'Careers',
-    description: 'The label for the link to the edX Careers page.',
+    description: 'The label for the link to the Careers page.',
   },
   'footer.edxLinks.news': {
     id: 'footer.edxLinks.news',
     defaultMessage: 'News',
-    description: 'The label for the link to the edX news page.',
+    description: 'The label for the link to the news page.',
   },
   'footer.legalLinks.heading': {
     id: 'footer.legalLinks.heading',
@@ -73,28 +78,33 @@ const messages = defineMessages({
   },
   'footer.legalLinks.termsOfService': {
     id: 'footer.legalLinks.termsOfService',
-    defaultMessage: 'Terms of Service & Honor Code',
-    description: 'The label for the link to the edX terms of service page.',
+    defaultMessage: 'Terms of Service',
+    description: 'The label for the link to the terms of service page.',
+  },
+  'footer.legalLinks.honorCode': {
+    id: 'footer.legalLinks.honorCode',
+    defaultMessage: 'Honor Code',
+    description: 'The label for the link to the honor code page.',
   },
   'footer.legalLinks.privacyPolicy': {
     id: 'footer.legalLinks.privacyPolicy',
     defaultMessage: 'Privacy Policy',
-    description: 'The label for the link to the edX privacy policy page.',
+    description: 'The label for the link to the privacy policy page.',
   },
   'footer.legalLinks.a11yPolicy': {
     id: 'footer.legalLinks.a11yPolicy',
     defaultMessage: 'Accessibility Policy',
-    description: 'The label for the link to the edX accessibility policy page.',
+    description: 'The label for the link to the accessibility policy page.',
   },
   'footer.legalLinks.trademarkPolicy': {
     id: 'footer.legalLinks.trademarkPolicy',
     defaultMessage: 'Trademark Policy',
-    description: 'The label for the link to the edX trademark policy page.',
+    description: 'The label for the link to the trademark policy page.',
   },
   'footer.legalLinks.sitemap': {
     id: 'footer.legalLinks.sitemap',
     defaultMessage: 'Sitemap',
-    description: 'The label for the link to the edX sitemap page.',
+    description: 'The label for the link to the sitemap page.',
   },
   'footer.connectLinks.heading': {
     id: 'footer.connectLinks.heading',
@@ -109,12 +119,12 @@ const messages = defineMessages({
   'footer.connectLinks.contact': {
     id: 'footer.connectLinks.contact',
     defaultMessage: 'Contact Us',
-    description: 'The label for the link to the contact edX page.',
+    description: 'The label for the link to the contact page.',
   },
   'footer.connectLinks.help': {
     id: 'footer.connectLinks.help',
     defaultMessage: 'Help Center',
-    description: 'The label for the link to the edX help center.',
+    description: 'The label for the link to the help center.',
   },
   'footer.connectLinks.mediaKit': {
     id: 'footer.connectLinks.mediaKit',

src/components/Footer.test.jsx

@@ -13,6 +13,17 @@ const FooterWithContext = ({ locale = 'es' }) => {
     config: {
       LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
       LMS_BASE_URL: process.env.LMS_BASE_URL,
+      ABOUT_US_URL: process.env.ABOUT_US_URL,
+      ACCESSIBILITY_URL: process.env.ACCESSIBILITY_URL,
+      CONTACT_URL: process.env.CONTACT_URL,
+      HONOR_CODE_URL: process.env.HONOR_CODE_URL,
+      FOOTER_LOGO_ALT_TEXT: process.env.FOOTER_LOGO_ALT_TEXT,
+      PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL,
+      SHOW_FOOTER_LOGO: process.env.SHOW_FOOTER_LOGO,
+      SUPPORT_CENTER_TEXT: process.env.SUPPORT_CENTER_TEXT,
+      SUPPORT_CENTER_URL: process.env.SUPPORT_CENTER_URL,
+      TERMS_OF_SERVICE_URL: process.env.TERMS_OF_SERVICE_URL,
+      TRADEMARK_TEXT: process.env.TRADEMARK_TEXT,
     },
   }), []);
 
@@ -33,6 +44,17 @@ const FooterWithLanguageSelector = ({ languageSelected = () => {} }) => {
     config: {
       LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
       LMS_BASE_URL: process.env.LMS_BASE_URL,
+      ABOUT_US_URL: process.env.ABOUT_US_URL,
+      ACCESSIBILITY_URL: process.env.ACCESSIBILITY_URL,
+      CONTACT_URL: process.env.CONTACT_URL,
+      HONOR_CODE_URL: process.env.HONOR_CODE_URL,
+      FOOTER_LOGO_ALT_TEXT: process.env.FOOTER_LOGO_ALT_TEXT,
+      PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL,
+      SHOW_FOOTER_LOGO: process.env.SHOW_FOOTER_LOGO,
+      SUPPORT_CENTER_TEXT: process.env.SUPPORT_CENTER_TEXT,
+      SUPPORT_CENTER_URL: process.env.SUPPORT_CENTER_URL,
+      TERMS_OF_SERVICE_URL: process.env.TERMS_OF_SERVICE_URL,
+      TRADEMARK_TEXT: process.env.TRADEMARK_TEXT,
     },
   }), []);