Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat!: footer legal links #403

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat!: footer legal links #403

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion .env.development
View file
Open in desktop
asadali145 marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
ABOUT_US_URL=null
ACCESS_TOKEN_COOKIE_NAME=edx-jwt-cookie-header-payload
ACCESSIBILITY_URL=null
BASE_URL=localhost:8080
CONTACT_URL=null
CREDENTIALS_BASE_URL=http://localhost:18150
CSRF_TOKEN_API_PATH=/csrf/api/v1/token
ECOMMERCE_BASE_URL=http://localhost:18130
HONOR_CODE_URL=null
LANGUAGE_PREFERENCE_COOKIE_NAME=openedx-language-preference
LMS_BASE_URL=http://localhost:18000
LOGIN_URL=http://localhost:18000/login
Expand All @@ -12,12 +16,16 @@ TERMS_OF_SERVICE_URL=null
PRIVACY_POLICY_URL=null
SUPPORT_EMAIL=null
STUDIO_BASE_URL=http://localhost:18010
ENABLE_ACCESSIBILITY_PAGE=false
TRADEMARK_TEXT=''
ORDER_HISTORY_URL=localhost:1996/orders
REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh
SEGMENT_KEY=null
SHOW_FOOTER_LOGO=true
SITE_NAME=Open edX
SUPPORT_CENTER_TEXT=''
SUPPORT_CENTER_URL=null
USER_INFO_COOKIE_NAME=edx-user-info
FOOTER_LOGO_ALT_TEXT="Open edX Logo"
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
Expand Down
15 changes: 15 additions & 0 deletions README.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,21 @@ This component requires that the following environment variable be set by the co
* ``LMS_BASE_URL`` - The URL of the LMS of your Open edX instance.
* ``LOGO_TRADEMARK_URL`` - This is a URL to a logo for use in the footer. This is a different environment variable than ``LOGO_URL`` (used in frontend-component-header) to accommodate sites that would like to have additional trademark information on a logo in the footer, such as a (tm) or (r) symbol.

Optional Environment Variables
=====================
Apart from the required environment variables, this component also supports the following optional environment variables. These variables add the ability to display
custom legal links in the footer. Optional environment variables can also be set by the consuming micro-frontend.

* ``ABOUT_US_URL`` - About Us page URL.
* ``ACCESSIBILITY_URL`` - Accessibility page URL.
* ``CONTACT_URL`` - Contact Us page URL.
* ``HONOR_CODE_URL`` - Honor Code page URL.
* ``FOOTER_LOGO_ALT_TEXT`` - Alt text for the footer logo.
* ``SHOW_FOOTER_LOGO`` - Optionally display the logo.
* ``SUPPORT_CENTER_TEXT`` - Text for the Support Center link i.e. `Help Center`.
* ``SUPPORT_CENTER_URL`` - Support center URL.
* ``TRADEMARK_TEXT`` - Trademark text.

Installation
============

Expand Down
59 changes: 59 additions & 0 deletions src/_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,64 @@
$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;

.trademark-text {
color: #707070 !important;
font-size: 87.5%;
font-weight: 400;
}
}
}

.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;
}
}
}
}
68 changes: 65 additions & 3 deletions src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
import React from 'react';
import _ from 'lodash';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import { ensureConfig } from '@edx/frontend-platform';
import { AppContext } from '@edx/frontend-platform/react';
import {
APP_CONFIG_INITIALIZED,
ensureConfig,
getConfig,
mergeConfig,
subscribe,
} from '@edx/frontend-platform';

import messages from './Footer.messages';
import LanguageSelector from './LanguageSelector';
Expand All @@ -13,6 +20,22 @@ ensureConfig([
'LOGO_TRADEMARK_URL',
], 'Footer component');

subscribe(APP_CONFIG_INITIALIZED, () => {
mergeConfig({
ABOUT_US_URL: process.env.ABOUT_US_URL,
ACCESSIBILITY_URL: process.env.ACCESSIBILITY_URL,
CONTACT_URL: process.env.CONTACT_URL,
HONOR_CODE_URL: process.env.HONOR_CODE_URL,
FOOTER_LOGO_ALT_TEXT: process.env.FOOTER_LOGO_ALT_TEXT,
PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL,
SHOW_FOOTER_LOGO: process.env.SHOW_FOOTER_LOGO,
SUPPORT_CENTER_TEXT: process.env.SUPPORT_CENTER_TEXT,
SUPPORT_CENTER_URL: process.env.SUPPORT_CENTER_URL,
TERMS_OF_SERVICE_URL: process.env.TERMS_OF_SERVICE_URL,
TRADEMARK_TEXT: process.env.TRADEMARK_TEXT,
}, 'Footer additional config');
});

const EVENT_NAMES = {
FOOTER_LINK: 'edx.bi.footer.link',
};
Expand All @@ -33,6 +56,10 @@ class SiteFooter extends React.Component {
sendTrackEvent(eventName, properties);
}

renderLinkIfExists(value, text) {
return !_.isEmpty(value) && <li><a href={value}>{text}</a></li>;
}

render() {
const {
supportedLanguages,
Expand All @@ -42,13 +69,14 @@ 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">
{ getConfig().SHOW_FOOTER_LOGO
&& (
<a
className="d-block"
href={config.LMS_BASE_URL}
Expand All @@ -57,9 +85,43 @@ class SiteFooter extends React.Component {
<img
style={{ maxHeight: 45 }}
src={logo || config.LOGO_TRADEMARK_URL}
alt={intl.formatMessage(messages['footer.logo.altText'])}
alt={getConfig().FOOTER_LOGO_ALT_TEXT || intl.formatMessage(messages['footer.logo.altText'])}
/>
</a>
)}
<div className="copyright-col">
{getConfig().TRADEMARK_TEXT
&& (
<div className="trademark-text">
{getConfig().TRADEMARK_TEXT}
</div>
)}
<div>
<ul className="footer-sub-nav">
{
this.renderLinkIfExists(getConfig().ABOUT_US_URL, intl.formatMessage(messages['footer.edxLinks.aboutUs']))
}
{
this.renderLinkIfExists(getConfig().TERMS_OF_SERVICE_URL, intl.formatMessage(messages['footer.legalLinks.termsOfService']))
}
{
this.renderLinkIfExists(getConfig().PRIVACY_POLICY_URL, intl.formatMessage(messages['footer.legalLinks.privacyPolicy']))
}
{
this.renderLinkIfExists(getConfig().HONOR_CODE_URL, intl.formatMessage(messages['footer.legalLinks.honorCode']))
}
{
this.renderLinkIfExists(getConfig().CONTACT_URL, intl.formatMessage(messages['footer.connectLinks.contact']))
}
{
this.renderLinkIfExists(getConfig().ACCESSIBILITY_URL, intl.formatMessage(messages['footer.legalLinks.a11yPolicy']))
}
{
this.renderLinkIfExists(getConfig().SUPPORT_CENTER_URL, getConfig().SUPPORT_CENTER_TEXT || intl.formatMessage(messages['footer.connectLinks.help']))
}
</ul>
</div>
</div>
<div className="flex-grow-1" />
{showLanguageSelector && (
<LanguageSelector
Expand Down
32 changes: 21 additions & 11 deletions src/components/Footer.messages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,12 @@ const messages = defineMessages({
'footer.edxLinks.about': {
id: 'footer.edxLinks.about',
defaultMessage: 'About',
description: 'The label for the link to the about edX page.',
description: 'The label for the link to the about page.',
},
'footer.edxLinks.aboutUs': {
id: 'footer.edxLinks.aboutUs',
defaultMessage: 'About Us',
description: 'The label for the link to the about us page.',
},
'footer.edxLinks.business': {
id: 'footer.edxLinks.business',
Expand All @@ -59,12 +64,12 @@ const messages = defineMessages({
'footer.edxLinks.careers': {
id: 'footer.edxLinks.careers',
defaultMessage: 'Careers',
description: 'The label for the link to the edX Careers page.',
description: 'The label for the link to the Careers page.',
},
'footer.edxLinks.news': {
id: 'footer.edxLinks.news',
defaultMessage: 'News',
description: 'The label for the link to the edX news page.',
description: 'The label for the link to the news page.',
},
'footer.legalLinks.heading': {
id: 'footer.legalLinks.heading',
Expand All @@ -73,28 +78,33 @@ const messages = defineMessages({
},
'footer.legalLinks.termsOfService': {
id: 'footer.legalLinks.termsOfService',
defaultMessage: 'Terms of Service & Honor Code',
description: 'The label for the link to the edX terms of service page.',
defaultMessage: 'Terms of Service',
description: 'The label for the link to the terms of service page.',
},
'footer.legalLinks.honorCode': {
id: 'footer.legalLinks.honorCode',
defaultMessage: 'Honor Code',
description: 'The label for the link to the honor code page.',
},
'footer.legalLinks.privacyPolicy': {
id: 'footer.legalLinks.privacyPolicy',
defaultMessage: 'Privacy Policy',
description: 'The label for the link to the edX privacy policy page.',
description: 'The label for the link to the privacy policy page.',
},
'footer.legalLinks.a11yPolicy': {
id: 'footer.legalLinks.a11yPolicy',
defaultMessage: 'Accessibility Policy',
description: 'The label for the link to the edX accessibility policy page.',
description: 'The label for the link to the accessibility policy page.',
},
'footer.legalLinks.trademarkPolicy': {
id: 'footer.legalLinks.trademarkPolicy',
defaultMessage: 'Trademark Policy',
description: 'The label for the link to the edX trademark policy page.',
description: 'The label for the link to the trademark policy page.',
},
'footer.legalLinks.sitemap': {
id: 'footer.legalLinks.sitemap',
defaultMessage: 'Sitemap',
description: 'The label for the link to the edX sitemap page.',
description: 'The label for the link to the sitemap page.',
},
'footer.connectLinks.heading': {
id: 'footer.connectLinks.heading',
Expand All @@ -109,12 +119,12 @@ const messages = defineMessages({
'footer.connectLinks.contact': {
id: 'footer.connectLinks.contact',
defaultMessage: 'Contact Us',
description: 'The label for the link to the contact edX page.',
description: 'The label for the link to the contact page.',
},
'footer.connectLinks.help': {
id: 'footer.connectLinks.help',
defaultMessage: 'Help Center',
description: 'The label for the link to the edX help center.',
description: 'The label for the link to the help center.',
},
'footer.connectLinks.mediaKit': {
id: 'footer.connectLinks.mediaKit',
Expand Down
22 changes: 22 additions & 0 deletions src/components/Footer.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,17 @@ const FooterWithContext = ({ locale = 'es' }) => {
config: {
LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
LMS_BASE_URL: process.env.LMS_BASE_URL,
ABOUT_US_URL: process.env.ABOUT_US_URL,
ACCESSIBILITY_URL: process.env.ACCESSIBILITY_URL,
CONTACT_URL: process.env.CONTACT_URL,
HONOR_CODE_URL: process.env.HONOR_CODE_URL,
FOOTER_LOGO_ALT_TEXT: process.env.FOOTER_LOGO_ALT_TEXT,
PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL,
SHOW_FOOTER_LOGO: process.env.SHOW_FOOTER_LOGO,
SUPPORT_CENTER_TEXT: process.env.SUPPORT_CENTER_TEXT,
SUPPORT_CENTER_URL: process.env.SUPPORT_CENTER_URL,
TERMS_OF_SERVICE_URL: process.env.TERMS_OF_SERVICE_URL,
TRADEMARK_TEXT: process.env.TRADEMARK_TEXT,
},
}), []);

Expand All @@ -33,6 +44,17 @@ const FooterWithLanguageSelector = ({ languageSelected = () => {} }) => {
config: {
LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
LMS_BASE_URL: process.env.LMS_BASE_URL,
ABOUT_US_URL: process.env.ABOUT_US_URL,
ACCESSIBILITY_URL: process.env.ACCESSIBILITY_URL,
CONTACT_URL: process.env.CONTACT_URL,
HONOR_CODE_URL: process.env.HONOR_CODE_URL,
FOOTER_LOGO_ALT_TEXT: process.env.FOOTER_LOGO_ALT_TEXT,
PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL,
SHOW_FOOTER_LOGO: process.env.SHOW_FOOTER_LOGO,
SUPPORT_CENTER_TEXT: process.env.SUPPORT_CENTER_TEXT,
SUPPORT_CENTER_URL: process.env.SUPPORT_CENTER_URL,
TERMS_OF_SERVICE_URL: process.env.TERMS_OF_SERVICE_URL,
TRADEMARK_TEXT: process.env.TRADEMARK_TEXT,
},
}), []);

Expand Down
Loading
Loading