cherry pick 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]>
mitodl · Dec 7, 2023 · 956590d · 956590d
1 parent fc3c958
commit 956590d
Show file tree

Hide file tree

Showing 9 changed files with 297 additions and 22 deletions.
diff --git a/.env.development b/.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=
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -19,7 +19,7 @@ jobs:
     - name: Setup Nodejs
       uses: actions/setup-node@v4
       with:
-        node-version: ${{ env.NODE_VER }}
+        node-version: 18
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes

diff --git a/README.rst b/README.rst
@@ -185,6 +185,30 @@ 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' },
+    }
+
+* 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.
+
 .. |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

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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"
@@ -24,14 +24,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",
@@ -64,7 +64,7 @@
   "peerDependencies": {
     "@edx/frontend-platform": "^4.0.0 || ^5.0.0 || ^6.0.0",
     "prop-types": "^15.5.10",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   }
 }
diff --git a/src/_footer.scss b/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;
+      }
+    }
+  }
 }
diff --git a/src/components/Footer.jsx b/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