diff --git a/.env.development b/.env.development index 8dddff8c57..b9b3653ad3 100644 --- a/.env.development +++ b/.env.development @@ -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 @@ -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 diff --git a/README.rst b/README.rst index 82b8b46569..b628ebc195 100644 --- a/README.rst +++ b/README.rst @@ -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 ============ diff --git a/src/_footer.scss b/src/_footer.scss index 2d2e859f2b..3de1057288 100644 --- a/src/_footer.scss +++ b/src/_footer.scss @@ -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; + } + } + } } diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 418da244fa..e9daf010cf 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -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, + getConfig, + mergeConfig, + subscribe, +} from '@edx/frontend-platform'; import messages from './Footer.messages'; import LanguageSelector from './LanguageSelector'; @@ -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', }; @@ -33,6 +56,10 @@ class SiteFooter extends React.Component { sendTrackEvent(eventName, properties); } + renderLinkIfExists(value, text) { + return !_.isEmpty(value) &&
  • {text}
    • ; + } + render() { const { supportedLanguages, @@ -42,13 +69,14 @@ class SiteFooter extends React.Component { } = this.props; const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected; const { config } = this.context; - return (