Skip to content

Commit 524b907

Browse files
asadali145Wassaf-Shahzadarslanashraf7
committed
feat!: footer legal links
Add the ability to configure footer links. BREAKING CHANGE: SHOW_ACCESSIBILITY_PAGE is replaced with the ACCESSIBILITY_URL config. --------- Co-authored-by: Wassaf-Shahzad <[email protected]> Co-authored-by: Arslan Ashraf <[email protected]>
1 parent 64fc8ad commit 524b907

File tree

10 files changed

+421
-27
lines changed

10 files changed

+421
-27
lines changed

‎.env.development‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1+
ABOUT_US_URL=null
12
ACCESS_TOKEN_COOKIE_NAME=edx-jwt-cookie-header-payload
3+
ACCESSIBILITY_URL=null
24
BASE_URL=localhost:8080
5+
CONTACT_URL=null
36
CREDENTIALS_BASE_URL=http://localhost:18150
47
CSRF_TOKEN_API_PATH=/csrf/api/v1/token
58
ECOMMERCE_BASE_URL=http://localhost:18130
9+
HONOR_CODE_URL=null
610
LANGUAGE_PREFERENCE_COOKIE_NAME=openedx-language-preference
711
LMS_BASE_URL=http://localhost:18000
812
LOGIN_URL=http://localhost:18000/login
@@ -12,12 +16,16 @@ TERMS_OF_SERVICE_URL=null
1216
PRIVACY_POLICY_URL=null
1317
SUPPORT_EMAIL=null
1418
STUDIO_BASE_URL=http://localhost:18010
15-
ENABLE_ACCESSIBILITY_PAGE=false
19+
TRADEMARK_TEXT=''
1620
ORDER_HISTORY_URL=localhost:1996/orders
1721
REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh
1822
SEGMENT_KEY=null
23+
SHOW_FOOTER_LOGO=true
1924
SITE_NAME=Open edX
25+
SUPPORT_CENTER_TEXT=''
26+
SUPPORT_CENTER_URL=null
2027
USER_INFO_COOKIE_NAME=edx-user-info
28+
FOOTER_LOGO_ALT_TEXT="Open edX Logo"
2129
LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
2230
LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
2331
LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg

‎README.rst‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,21 @@ This component requires that the following environment variable be set by the co
4343
* ``LMS_BASE_URL`` - The URL of the LMS of your Open edX instance.
4444
* ``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.
4545

46+
Optional Environment Variables
47+
=====================
48+
Apart from the required environment variables, this component also supports the following optional environment variables. These variables add the ability to display
49+
custom legal links in the footer. Optional environment variables can also be set by the consuming micro-frontend.
50+
51+
* ``ABOUT_US_URL`` - About Us page URL.
52+
* ``ACCESSIBILITY_URL`` - Accessibility page URL.
53+
* ``CONTACT_URL`` - Contact Us page URL.
54+
* ``HONOR_CODE_URL`` - Honor Code page URL.
55+
* ``FOOTER_LOGO_ALT_TEXT`` - Alt text for the footer logo.
56+
* ``SHOW_FOOTER_LOGO`` - Optionally display the logo.
57+
* ``SUPPORT_CENTER_TEXT`` - Text for the Support Center link i.e. `Help Center`.
58+
* ``SUPPORT_CENTER_URL`` - Support center URL.
59+
* ``TRADEMARK_TEXT`` - Trademark text.
60+
4661
Installation
4762
============
4863

‎src/_footer.scss‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,64 @@
11
$gray-footer: #fcfcfc !default;
2+
$link-blue: #006daa;
23

34
.footer {
45
background-color: $gray-footer;
6+
7+
.copyright-col {
8+
display: flex;
9+
flex-direction: column;
10+
padding-left: 20px;
11+
padding-right: 20px;
12+
13+
.trademark-text {
14+
color: #707070 !important;
15+
font-size: 87.5%;
16+
font-weight: 400;
17+
}
18+
}
19+
}
20+
21+
.footer-sub-nav {
22+
padding: 0;
23+
margin: 0 0 5px;
24+
list-style: none;
25+
font-size: 15px;
26+
line-height: 20px;
27+
28+
@include media-breakpoint-down(md) {
29+
text-align: left;
30+
}
31+
32+
@include media-breakpoint-up(md) {
33+
margin: 0;
34+
}
35+
36+
li {
37+
display: inline-block;
38+
vertical-align: top;
39+
margin: 0;
40+
41+
@include media-breakpoint-down(md) {
42+
display: block;
43+
margin: 0;
44+
padding: 0 0 7px;
45+
46+
&::before {
47+
display: none;
48+
}
49+
}
50+
51+
&::before {
52+
content: "-";
53+
padding-left: 5px;
54+
padding-right: 5px;
55+
color: $link-blue
56+
}
57+
58+
&:first-child {
59+
&::before {
60+
display: none;
61+
}
62+
}
63+
}
564
}

‎src/components/Footer.jsx‎

Lines changed: 65 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
import React from 'react';
2+
import _ from 'lodash';
23
import PropTypes from 'prop-types';
34
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
45
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
5-
import { ensureConfig } from '@edx/frontend-platform';
66
import { AppContext } from '@edx/frontend-platform/react';
7+
import {
8+
APP_CONFIG_INITIALIZED,
9+
ensureConfig,
10+
getConfig,
11+
mergeConfig,
12+
subscribe,
13+
} from '@edx/frontend-platform';
714

815
import messages from './Footer.messages';
916
import LanguageSelector from './LanguageSelector';
@@ -13,6 +20,22 @@ ensureConfig([
1320
'LOGO_TRADEMARK_URL',
1421
], 'Footer component');
1522

23+
subscribe(APP_CONFIG_INITIALIZED, () => {
24+
mergeConfig({
25+
ABOUT_US_URL: process.env.ABOUT_US_URL,
26+
ACCESSIBILITY_URL: process.env.ACCESSIBILITY_URL,
27+
CONTACT_URL: process.env.CONTACT_URL,
28+
HONOR_CODE_URL: process.env.HONOR_CODE_URL,
29+
FOOTER_LOGO_ALT_TEXT: process.env.FOOTER_LOGO_ALT_TEXT,
30+
PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL,
31+
SHOW_FOOTER_LOGO: process.env.SHOW_FOOTER_LOGO,
32+
SUPPORT_CENTER_TEXT: process.env.SUPPORT_CENTER_TEXT,
33+
SUPPORT_CENTER_URL: process.env.SUPPORT_CENTER_URL,
34+
TERMS_OF_SERVICE_URL: process.env.TERMS_OF_SERVICE_URL,
35+
TRADEMARK_TEXT: process.env.TRADEMARK_TEXT,
36+
}, 'Footer additional config');
37+
});
38+
1639
const EVENT_NAMES = {
1740
FOOTER_LINK: 'edx.bi.footer.link',
1841
};
@@ -33,6 +56,10 @@ class SiteFooter extends React.Component {
3356
sendTrackEvent(eventName, properties);
3457
}
3558

59+
renderLinkIfExists(value, text) {
60+
return !_.isEmpty(value) && <li><a href={value}>{text}</a></li>;
61+
}
62+
3663
render() {
3764
const {
3865
supportedLanguages,
@@ -42,13 +69,14 @@ class SiteFooter extends React.Component {
4269
} = this.props;
4370
const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected;
4471
const { config } = this.context;
45-
4672
return (
4773
<footer
4874
role="contentinfo"
4975
className="footer d-flex border-top py-3 px-4"
5076
>
5177
<div className="container-fluid d-flex">
78+
{ getConfig().SHOW_FOOTER_LOGO
79+
&& (
5280
<a
5381
className="d-block"
5482
href={config.LMS_BASE_URL}
@@ -57,9 +85,43 @@ class SiteFooter extends React.Component {
5785
<img
5886
style={{ maxHeight: 45 }}
5987
src={logo || config.LOGO_TRADEMARK_URL}
60-
alt={intl.formatMessage(messages['footer.logo.altText'])}
88+
alt={getConfig().FOOTER_LOGO_ALT_TEXT || intl.formatMessage(messages['footer.logo.altText'])}
6189
/>
6290
</a>
91+
)}
92+
<div className="copyright-col">
93+
{getConfig().TRADEMARK_TEXT
94+
&& (
95+
<div className="trademark-text">
96+
{getConfig().TRADEMARK_TEXT}
97+
</div>
98+
)}
99+
<div>
100+
<ul className="footer-sub-nav">
101+
{
102+
this.renderLinkIfExists(getConfig().ABOUT_US_URL, intl.formatMessage(messages['footer.edxLinks.aboutUs']))
103+
}
104+
{
105+
this.renderLinkIfExists(getConfig().TERMS_OF_SERVICE_URL, intl.formatMessage(messages['footer.legalLinks.termsOfService']))
106+
}
107+
{
108+
this.renderLinkIfExists(getConfig().PRIVACY_POLICY_URL, intl.formatMessage(messages['footer.legalLinks.privacyPolicy']))
109+
}
110+
{
111+
this.renderLinkIfExists(getConfig().HONOR_CODE_URL, intl.formatMessage(messages['footer.legalLinks.honorCode']))
112+
}
113+
{
114+
this.renderLinkIfExists(getConfig().CONTACT_URL, intl.formatMessage(messages['footer.connectLinks.contact']))
115+
}
116+
{
117+
this.renderLinkIfExists(getConfig().ACCESSIBILITY_URL, intl.formatMessage(messages['footer.legalLinks.a11yPolicy']))
118+
}
119+
{
120+
this.renderLinkIfExists(getConfig().SUPPORT_CENTER_URL, getConfig().SUPPORT_CENTER_TEXT || intl.formatMessage(messages['footer.connectLinks.help']))
121+
}
122+
</ul>
123+
</div>
124+
</div>
63125
<div className="flex-grow-1" />
64126
{showLanguageSelector && (
65127
<LanguageSelector

‎src/components/Footer.messages.js‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,12 @@ const messages = defineMessages({
3939
'footer.edxLinks.about': {
4040
id: 'footer.edxLinks.about',
4141
defaultMessage: 'About',
42-
description: 'The label for the link to the about edX page.',
42+
description: 'The label for the link to the about page.',
43+
},
44+
'footer.edxLinks.aboutUs': {
45+
id: 'footer.edxLinks.aboutUs',
46+
defaultMessage: 'About Us',
47+
description: 'The label for the link to the about us page.',
4348
},
4449
'footer.edxLinks.business': {
4550
id: 'footer.edxLinks.business',
@@ -59,12 +64,12 @@ const messages = defineMessages({
5964
'footer.edxLinks.careers': {
6065
id: 'footer.edxLinks.careers',
6166
defaultMessage: 'Careers',
62-
description: 'The label for the link to the edX Careers page.',
67+
description: 'The label for the link to the Careers page.',
6368
},
6469
'footer.edxLinks.news': {
6570
id: 'footer.edxLinks.news',
6671
defaultMessage: 'News',
67-
description: 'The label for the link to the edX news page.',
72+
description: 'The label for the link to the news page.',
6873
},
6974
'footer.legalLinks.heading': {
7075
id: 'footer.legalLinks.heading',
@@ -73,28 +78,33 @@ const messages = defineMessages({
7378
},
7479
'footer.legalLinks.termsOfService': {
7580
id: 'footer.legalLinks.termsOfService',
76-
defaultMessage: 'Terms of Service & Honor Code',
77-
description: 'The label for the link to the edX terms of service page.',
81+
defaultMessage: 'Terms of Service',
82+
description: 'The label for the link to the terms of service page.',
83+
},
84+
'footer.legalLinks.honorCode': {
85+
id: 'footer.legalLinks.honorCode',
86+
defaultMessage: 'Honor Code',
87+
description: 'The label for the link to the honor code page.',
7888
},
7989
'footer.legalLinks.privacyPolicy': {
8090
id: 'footer.legalLinks.privacyPolicy',
8191
defaultMessage: 'Privacy Policy',
82-
description: 'The label for the link to the edX privacy policy page.',
92+
description: 'The label for the link to the privacy policy page.',
8393
},
8494
'footer.legalLinks.a11yPolicy': {
8595
id: 'footer.legalLinks.a11yPolicy',
8696
defaultMessage: 'Accessibility Policy',
87-
description: 'The label for the link to the edX accessibility policy page.',
97+
description: 'The label for the link to the accessibility policy page.',
8898
},
8999
'footer.legalLinks.trademarkPolicy': {
90100
id: 'footer.legalLinks.trademarkPolicy',
91101
defaultMessage: 'Trademark Policy',
92-
description: 'The label for the link to the edX trademark policy page.',
102+
description: 'The label for the link to the trademark policy page.',
93103
},
94104
'footer.legalLinks.sitemap': {
95105
id: 'footer.legalLinks.sitemap',
96106
defaultMessage: 'Sitemap',
97-
description: 'The label for the link to the edX sitemap page.',
107+
description: 'The label for the link to the sitemap page.',
98108
},
99109
'footer.connectLinks.heading': {
100110
id: 'footer.connectLinks.heading',
@@ -109,12 +119,12 @@ const messages = defineMessages({
109119
'footer.connectLinks.contact': {
110120
id: 'footer.connectLinks.contact',
111121
defaultMessage: 'Contact Us',
112-
description: 'The label for the link to the contact edX page.',
122+
description: 'The label for the link to the contact page.',
113123
},
114124
'footer.connectLinks.help': {
115125
id: 'footer.connectLinks.help',
116126
defaultMessage: 'Help Center',
117-
description: 'The label for the link to the edX help center.',
127+
description: 'The label for the link to the help center.',
118128
},
119129
'footer.connectLinks.mediaKit': {
120130
id: 'footer.connectLinks.mediaKit',

‎src/components/Footer.test.jsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,17 @@ const FooterWithContext = ({ locale = 'es' }) => {
1313
config: {
1414
LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
1515
LMS_BASE_URL: process.env.LMS_BASE_URL,
16+
ABOUT_US_URL: process.env.ABOUT_US_URL,
17+
ACCESSIBILITY_URL: process.env.ACCESSIBILITY_URL,
18+
CONTACT_URL: process.env.CONTACT_URL,
19+
HONOR_CODE_URL: process.env.HONOR_CODE_URL,
20+
FOOTER_LOGO_ALT_TEXT: process.env.FOOTER_LOGO_ALT_TEXT,
21+
PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL,
22+
SHOW_FOOTER_LOGO: process.env.SHOW_FOOTER_LOGO,
23+
SUPPORT_CENTER_TEXT: process.env.SUPPORT_CENTER_TEXT,
24+
SUPPORT_CENTER_URL: process.env.SUPPORT_CENTER_URL,
25+
TERMS_OF_SERVICE_URL: process.env.TERMS_OF_SERVICE_URL,
26+
TRADEMARK_TEXT: process.env.TRADEMARK_TEXT,
1627
},
1728
}), []);
1829

@@ -33,6 +44,17 @@ const FooterWithLanguageSelector = ({ languageSelected = () => {} }) => {
3344
config: {
3445
LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
3546
LMS_BASE_URL: process.env.LMS_BASE_URL,
47+
ABOUT_US_URL: process.env.ABOUT_US_URL,
48+
ACCESSIBILITY_URL: process.env.ACCESSIBILITY_URL,
49+
CONTACT_URL: process.env.CONTACT_URL,
50+
HONOR_CODE_URL: process.env.HONOR_CODE_URL,
51+
FOOTER_LOGO_ALT_TEXT: process.env.FOOTER_LOGO_ALT_TEXT,
52+
PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL,
53+
SHOW_FOOTER_LOGO: process.env.SHOW_FOOTER_LOGO,
54+
SUPPORT_CENTER_TEXT: process.env.SUPPORT_CENTER_TEXT,
55+
SUPPORT_CENTER_URL: process.env.SUPPORT_CENTER_URL,
56+
TERMS_OF_SERVICE_URL: process.env.TERMS_OF_SERVICE_URL,
57+
TRADEMARK_TEXT: process.env.TRADEMARK_TEXT,
3658
},
3759
}), []);
3860

0 commit comments

Comments
 (0)