From 956590d949920813609f6d80aae1f31095b5d4b3 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 ++ .github/workflows/ci.yml | 2 +- README.rst | 24 +++ package-lock.json | 8 +- package.json | 16 +- src/_footer.scss | 53 ++++++ src/components/Footer.jsx | 30 +++- .../__snapshots__/Footer.test.jsx.snap | 162 +++++++++++++++++- src/setupTest.js | 12 ++ 9 files changed, 297 insertions(+), 22 deletions(-) diff --git a/.env.development b/.env.development index f35084803..765777edd 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/.github/workflows/ci.yml b/.github/workflows/ci.yml index 900a2f796..c5455ae09 100644 --- 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 index 82b8b4656..d92cfdb12 100644 --- a/README.rst +++ b/README.rst @@ -185,6 +185,30 @@ 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' }, + } + +* 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 index 2c730c4f0..28024d482 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "@edx/frontend-component-footer", + "name": "@mitodl/frontend-component-footer-mitol", "version": "1.0.0-semantically-released", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "@edx/frontend-component-footer", + "name": "@mitodl/frontend-component-footer-mitol", "version": "1.0.0-semantically-released", "license": "AGPL-3.0", "dependencies": { @@ -40,8 +40,8 @@ "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" } }, "node_modules/@aashutoshrathi/word-wrap": { diff --git a/package.json b/package.json index 30ee3e79b..05e71ab43 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" @@ -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 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 d8d414c94..89643c1bd 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 (