Skip to content

Commit

Permalink
cherry pick custom footer link changes (#11)
Browse files Browse the repository at this point in the history
* 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]>
  • Loading branch information
3 people committed Jan 25, 2024
1 parent 62bf038 commit 0b76468
Showing 7 changed files with 289 additions and 27 deletions.
12 changes: 12 additions & 0 deletions .env.development
Original file line number Diff line number Diff line change
@@ -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=
35 changes: 23 additions & 12 deletions README.rst
Original file line number Diff line number Diff line change
@@ -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.
12 changes: 6 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
@@ -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",
53 changes: 53 additions & 0 deletions src/_footer.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
30 changes: 27 additions & 3 deletions src/components/Footer.jsx
Original file line number Diff line number Diff line change
@@ -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
Loading

0 comments on commit 0b76468

Please sign in to comment.