From 09184c820e4a0e73783d651175b25394eabab888 Mon Sep 17 00:00:00 2001 From: Asad Ali Date: Wed, 22 Feb 2023 18:19:02 +0500 Subject: [PATCH] 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 Co-authored-by: Arslan Ashraf <34372316+arslanashraf7@users.noreply.github.com> --- .env.development | 12 ++ README.rst | 35 ++-- package.json | 12 +- src/_footer.scss | 53 ++++++ src/components/Footer.jsx | 30 +++- .../__snapshots__/Footer.test.jsx.snap | 162 +++++++++++++++++- src/setupTest.js | 12 ++ 7 files changed, 289 insertions(+), 27 deletions(-) diff --git a/.env.development b/.env.development index 8dddff8c5..493cfe2ed 100644 --- 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/README.rst b/README.rst index 66dcc6dc5..973b7d163 100644 --- a/README.rst +++ b/README.rst @@ -192,16 +192,27 @@ Reporting Security Issues ========================= Please do not report security issues in public. Please email security@openedx.org. +======= +*********** +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. diff --git a/package.json b/package.json index 55f439e46..bfdf1c9bb 100644 --- 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" @@ -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", diff --git a/src/_footer.scss b/src/_footer.scss index 2d2e859f2..8c68a77b9 100644 --- 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 index 418da244f..715df89b6 100644 --- 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 &&
  • {text}
    • ; + } + 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 (