feat: custom footer link changes (#11)

* refactor: added configurable and consistant footer as per MITX specifications.

* fix(packge.json): add MITX info

* fix: updated packge name

* fix: updated author name

* refactor: added prepare script

* fix: updated read me  and removed prepare scrpt

* fix: updated packages to resolve conflicts

* fix: added caret ranges

* fix: updated node version

* docs: fix typos (#8)

* refactor: update package-lock

* fix: fix failing tests

---------

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

Author: 3 people

.env.development

@@ -22,3 +22,15 @@ 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
+ABOUT_US_URL=
+PRIVACY_POLICY_URL=
+HONOR_CODE_URL=
+TERMS_OF_SERVICE_URL=
+CONTACT_URL=
+SUPPORT_CENTER_URL=
+SUPPORT_CENTER_TEXT=
+TRADEMARK_TEXT=
+SITE_URL=
+LOGO_ALT_TEXT=
+SHOW_LOGO=
+SUPPORT_EMAIL=

README.rst

@@ -184,16 +184,27 @@ Reporting Security Issues
 =========================
 
 Please do not report security issues in public. Please email [email protected].
+=======
+***********
+Local Development
+***********
+
+For local development and testing follow these steps. (for convenience sake consider learning MFE as parent app)
+
+* Clone frontend-component-footer-mitol into frontend-app-learning directory.
+* CD into the frontend-component-footer-mitol and run the following commands::
+    
+    npm i
+
+    npm build
+* Verify a `dist/` directory has been created.
+* CD back into frontend-app-learning and create a module.config.js file
+* Place the following code in the module.config.js::
+
+    module.exports = {
+        localModules: [
+           { moduleName: '@edx/frontend-component-footer', dir: './frontend-component-footer-mitol' },
+    }
 
-.. |Build Status| image:: https://api.travis-ci.com/edx/frontend-component-footer.svg?branch=master
-   :target: https://travis-ci.com/edx/frontend-component-footer
-.. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-component-footer
-   :target: @edx/frontend-component-footer
-.. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-component-footer.svg
-   :target: @edx/frontend-component-footer
-.. |npm_downloads| image:: https://img.shields.io/npm/dt/@edx/frontend-component-footer.svg
-   :target: @edx/frontend-component-footer
-.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-component-footer.svg
-   :target: @edx/frontend-component-footer
-.. |semantic-release| image:: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
-   :target: https://github.com/semantic-release/semantic-release
+* Restart frontend-app-learning and verify it is using the local version  from @edx/frontend-component-footer
+* For css changes you might need to rebuild again.

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@edx/frontend-component-footer",
+  "name": "@mitodl/frontend-component-footer-mitol",
   "version": "1.0.0-semantically-released",
-  "description": "Footer component for use when building Open edX frontend applications",
+  "description": "Footer component for use when building Open edX frontend applications for MITX",
   "main": "dist/index.js",
   "publishConfig": {
     "access": "public"
@@ -25,14 +25,14 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/openedx/frontend-component-footer.git"
+    "url": "git+https://github.com/mitodl/frontend-component-footer-mitol"
   },
-  "author": "edX",
+  "author": "MIT",
   "license": "AGPL-3.0",
   "bugs": {
-    "url": "https://github.com/openedx/frontend-component-footer/issues"
+    "url": "https://github.com/mitodl/frontend-component-footer-mitol/issues"
   },
-  "homepage": "https://github.com/openedx/frontend-component-footer#readme",
+  "homepage": "https://github.com/mitodl/frontend-component-footer-mitol#readme",
   "devDependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "^1.1.1",

src/_footer.scss

@@ -1,5 +1,58 @@
 $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;
+  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

@@ -33,6 +33,10 @@ class SiteFooter extends React.Component {
     sendTrackEvent(eventName, properties);
   }
 
+  renderLinkIfExists(value, text) {
+    return value && <li><a href={value}>{text}</a></li>;
+  }
+
   render() {
     const {
       supportedLanguages,
@@ -42,24 +46,44 @@ 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={config.LMS_BASE_URL}
+            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 className="copyright-col">
+            {process.env.TRADEMARK_TEXT
+            && (
+            <div className="text-gray-500 small">
+                {process.env.TRADEMARK_TEXT}
+            </div>
+            )}
+            <div>
+              <ul className="footer-sub-nav">
+                {this.renderLinkIfExists(process.env.ABOUT_US_URL, 'About Us')}
+                {this.renderLinkIfExists(process.env.TERMS_OF_SERVICE_URL, 'Terms of Service')}
+                {this.renderLinkIfExists(process.env.PRIVACY_POLICY_URL, 'Privacy Policy')}
+                {this.renderLinkIfExists(process.env.HONOR_CODE_URL, 'Honor Code')}
+                {this.renderLinkIfExists(process.env.Contact, 'Contact')}
+                {this.renderLinkIfExists(process.env.SUPPORT_CENTER_URL, process.env.SUPPORT_CENTER_TEXT || 'FAQ & Help')}
+              </ul>
+            </div>
+          </div>
           <div className="flex-grow-1" />
           {showLanguageSelector && (
             <LanguageSelector