From 3f7acdaa2fd9cef2c4cc99eef1ca0f5fee818dc7 Mon Sep 17 00:00:00 2001
From: Wassaf-Shahzad <wassaf.shahzad@arbisoft.com>
Date: Wed, 29 Sep 2021 17:35:07 +0500
Subject: [PATCH] Added configurable and consistant footer as per MITX
 speacifications.

---
 .env.development          | 12 ++++++++-
 src/_footer.scss          | 54 +++++++++++++++++++++++++++++++++++++++
 src/components/Footer.jsx | 21 ++++++++++++---
 3 files changed, 83 insertions(+), 4 deletions(-)

diff --git a/.env.development b/.env.development
index 303bf9ede2..cf4c80e758 100644
--- a/.env.development
+++ b/.env.development
@@ -14,6 +14,16 @@ SEGMENT_KEY=null
 SITE_NAME=Open edX
 USER_INFO_COOKIE_NAME=edx-user-info
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
-LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LOGO_TRADEMARK_URL=https://rc.mitxonline.mit.edu/static/images/mit-logo.jpg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+ABOUT_US_URL=http://mitx.odl.local:8013/about-us/
+PRIVACY_POLICY_URL=http://mitx.odl.local:8013/privacy-policy/
+HONOR_CODE_URL=http://mitx.odl.local:8013/honor-code/
+TERMS_OF_SERVICE_URL=http://mitx.odl.local:8013/terms-of-service/
+CONTACT_URL=
+TRADEMARK_TEXT=© MITx Online. All rights reserved except where noted.
+SITE_URL=
+LOGO_ALT_TEXT=
+SHOW_LOGO=
+SUPPORT_EMAIL='mitxonline-support@mit.edu'
\ No newline at end of file
diff --git a/src/_footer.scss b/src/_footer.scss
index 2d2e859f2b..de24f85310 100644
--- a/src/_footer.scss
+++ b/src/_footer.scss
@@ -1,5 +1,59 @@
 $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;
+  }
+}
+
+.footer-sub-nav {
+  padding: 0;
+  margin: 0 0 5px;
+  list-style: none;
+  text-align: right;
+  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(sm) {
+      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;
+      }
+    }
+  }
 }
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index ba7ba7b2d7..3a783f9bb4 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -49,24 +49,39 @@ 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">
+          { process.env.SHOW_LOGO && 
           <a
             className="d-block"
-            href="https://open.edx.org"
+            href={process.env.SITE_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'])}
+              alt={ process.env.LOGO_ALT_TEXT || intl.formatMessage(messages['footer.logo.altText'])}
             />
           </a>
+          }
+          <div class="copyright-col">
+            <div class="text-gray-500 small">
+              {process.env.TRADEMARK_TEXT}
+            </div>
+            <div>
+              <ul class="footer-sub-nav">
+                <li><a href={process.env.ABOUT_US_URL}>About Us</a></li>
+                <li><a href={process.env.TERMS_OF_SERVICE_URL}>Terms of Service</a></li>
+                <li><a href={process.env.PRIVACY_POLICY_URL}>Privacy Policy</a></li>
+                <li><a href={process.env.HONOR_CODE_URL}>Honor Code</a></li>
+                <li><a href={`mailto:${process.env.SUPPORT_EMAIL}`}>Contact</a></li>
+              </ul>
+           </div>
+          </div>
           <div className="flex-grow-1" />
           {showLanguageSelector && (
             <LanguageSelector