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.

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

feat(redwood): add nau learning footer customization #3

Merged
merged 6 commits into from
Aug 27, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
.DS_Store
coverage
dist
node_modules
temp
dist

.idea/

src/i18n/transifex_input.json
temp/babel-plugin-react-intl
/.vscode
module.config.js
src/i18n/messages
src/i18n/messages
44 changes: 44 additions & 0 deletions README.rst
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,50 @@ The footer can be replaced using using `Frontend Plugin Framework <https://githu

Information on how to utilize the ``FooterSlot`` component to do so is available in the `frontend-slot-footer repository <https://github.com/openedx/frontend-slot-footer/>`_.

<AdditionalLogosSection /> component
====================================

This component is a child of the Footer component and is used to display additional logos in the footer.
It uses the ``FOOTER_ADDITIONAL_LOGOS`` environment variable to determine which logos to display.
If this variable is not set, the component will not render.

Configuration Example::

MFE_CONFIG["FOOTER_ADDITIONAL_LOGOS"] = '[
{"src": "https://nau-prod-richie-nau-media.rgw.nau.fccn.pt/media/filer_public_thumbnails/filer_public/db/4e/db4ed4cc-f3f0-48e1-82e6-e81f2cd042e6/modelos-barras-fundos-v04_4logos-feder_fse_nau.png__7501.0x842.0_subsampling-2.png",
"alt": "Feder, FSE, NAU",
"url": "https://www.fccn.pt/inovacao/projeto-nau-financiamento-sama/"},
{"src": "https://nau-prod-richie-nau-media.rgw.nau.fccn.pt/media/filer_public_thumbnails/filer_public/e2/fd/e2fd1cfb-c520-4e3d-9cf4-273332ab4d66/incode.png__185.0x27.0_subsampling-2.png",
"alt": "Incode",
"url": "https://www.incode2030.gov.pt/"},
{"src": "https://nau-prod-richie-nau-media.rgw.nau.fccn.pt/media/filer_public_thumbnails/filer_public/7d/c6/7dc6c932-e185-4dba-a659-d7e9867e150f/pt_digital_horizontal_60px.png__170.0x60.0_subsampling-2.png",
"alt": "Portugal Digital",
"url": "https://portugaldigital.gov.pt/"}
]'

<FooterLinks /> component
=========================

The FooterLinks component is a child of the Footer component and is used to display NAU links in the footer, similar to what happens in Richie and the Legacy LMS UI.
Links are provided in a list of objects, each with a title and a URL. The URL can be a string or an object containing the href to the available languages.

This list of links is set via an environment variable ``FOOTER_NAV_LINKS``.

Configuration Example::


MFE_CONFIG["FOOTER_NAV_LINKS"] = '[{"title": "footer.nau.title","menus": [{"title": "footer.nau.about","url": {"en": "https://www.nau.edu.pt/en/about/","pt": "https://www.nau.edu.pt/pt/sobre/"}},{"title": "footer.nau.courses","url": {"en": "https://www.nau.edu.pt/en/courses/","pt": "https://www.nau.edu.pt/pt/cursos/"}},{"title": "footer.nau.partner","url": {"en": "https://www.nau.edu.pt/en/partners/how-to-become-a-partner/","pt": "https://www.nau.edu.pt/pt/parceiros/como-se-tornar-parceiro/"}}]},{"title": "footer.nau.communication","menus": [{"title": "footer.nau.help","url": "https://ajuda.nau.edu.pt/"},{"title": "footer.nau.news","url": {"en": "https://www.nau.edu.pt/en/news/","pt": "https://www.nau.edu.pt/pt/noticias/"}},{"title": "footer.nau.mediakit","url": {"en": "https://www.nau.edu.pt/en/media-kit/","pt": "https://www.nau.edu.pt/pt/material-de-divulgacao/"}}]},{"title": "footer.nau.legal","menus": [{"title": "footer.nau.termsconditions","url": {"en": "https://www.nau.edu.pt/en/terms-and-conditions/","pt": "https://www.nau.edu.pt/pt/legal/termos-e-condicoes/"}},{"title": "footer.nau.privacypolicy","url": {"en": "https://www.nau.edu.pt/en/privacy-policy/","pt": "https://www.nau.edu.pt/pt/legal/politica-de-privacidade/"}},{"title": "footer.nau.cookies","url": {"en": "https://www.nau.edu.pt/en/legal/cookies-policy/","pt": "https://www.nau.edu.pt/pt/legal/cookies/"}},{"title": "footer.nau.certification","url": {"en": "https://www.nau.edu.pt/en/legal/politica-de-certificacao/","pt": "https://www.nau.edu.pt/pt/legal/politica-de-certificacao/"}},{"title": "footer.nau.codeofhonor","url": {"en": "https://www.nau.edu.pt/en/legal/codigo-de-honra/","pt": "https://www.nau.edu.pt/pt/legal/codigo-de-honra/"}}]}]'

<FooterSocial /> component
==========================

This component render social icons. It is defined to accept ``facebook``, ``linkedin`` and ``instagram`` icons. Also included is the ``newsletter`` icon.
Footer social links can be loaded via environment variable ``FOOTER_SOCIAL_LINKS``.

Configuration Example::

MFE_CONFIG["FOOTER_SOCIAL_LINKS"] = '[{"platform": "facebook", "title": "footer.nau.social.facebook", "url": "https://www.facebook.com/plataformanau/"},{"platform": "linkedin", "title": "footer.nau.social.linkedin", "url": "https://www.linkedin.com/company/plataformanau/"},{"platform": "newsletter", "title": "footer.nau.social.newsletter", "url": "https://www.nau.edu.pt/newsletter"}]'

Examples
========

Expand Down
49 changes: 47 additions & 2 deletions src/_footer.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,50 @@
$gray-footer: #fcfcfc !default;
$gray-footer: #eee !default;
$logo-color: #4e4e4e !default;

.footer {
.footer-navigation {
background-color: $gray-footer;
}

.footer-copyright {
&__logo {
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 1479 309' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(1,0,0,1,-4011,-451)'%3E%3Cg id='Artboard3' transform='matrix(1.37114,0,0,0.917279,-1488.81,36.619)'%3E%3Crect x='4011.14' y='451.75' width='1078.65' height='336.336' style='fill:none;'/%3E%3Cg transform='matrix(2.41263,0,0,3.60636,-2939.58,388.811)'%3E%3Cg transform='matrix(0.585513,0,0,0.585513,2835.42,-381.681)'%3E%3Cg transform='matrix(50,0,0,50,475.265,750.862)'%3E%3Cpath d='M0.315,0.009C0.477,0.009 0.577,-0.067 0.577,-0.192C0.577,-0.299 0.508,-0.366 0.378,-0.393L0.283,-0.413C0.209,-0.429 0.164,-0.46 0.164,-0.517C0.164,-0.596 0.224,-0.629 0.314,-0.629C0.422,-0.629 0.472,-0.577 0.476,-0.501L0.565,-0.501C0.564,-0.625 0.466,-0.709 0.316,-0.709C0.161,-0.709 0.073,-0.635 0.073,-0.517C0.073,-0.41 0.138,-0.354 0.259,-0.328L0.361,-0.306C0.437,-0.29 0.486,-0.26 0.486,-0.192C0.486,-0.11 0.426,-0.07 0.315,-0.07C0.205,-0.07 0.144,-0.123 0.139,-0.21L0.05,-0.21C0.054,-0.078 0.145,0.009 0.315,0.009Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,511.335,750.862)'%3E%3Cpath d='M0.1,-0L0.55,-0L0.55,-0.079L0.187,-0.079L0.187,-0.321L0.519,-0.321L0.519,-0.401L0.187,-0.401L0.187,-0.62L0.55,-0.62L0.55,-0.7L0.1,-0.7L0.1,-0Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,546.304,750.862)'%3E%3Cpath d='M0.1,-0L0.183,-0L0.183,-0.564L0.187,-0.564L0.435,-0.12L0.445,-0.12L0.693,-0.561L0.697,-0.561L0.697,-0L0.78,-0L0.78,-0.7L0.679,-0.7L0.443,-0.273L0.439,-0.273L0.203,-0.7L0.1,-0.7L0.1,-0Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,594.773,750.862)'%3E%3Cpath d='M0.1,-0L0.187,-0L0.187,-0.254L0.358,-0.254C0.499,-0.254 0.589,-0.345 0.589,-0.479C0.589,-0.609 0.501,-0.7 0.358,-0.7L0.1,-0.7L0.1,-0ZM0.187,-0.334L0.187,-0.621L0.347,-0.621C0.441,-0.621 0.499,-0.569 0.499,-0.479C0.499,-0.385 0.444,-0.334 0.347,-0.334L0.187,-0.334Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,631.693,750.862)'%3E%3Cpath d='M0.448,-0.288C0.539,-0.314 0.599,-0.386 0.599,-0.49C0.599,-0.609 0.52,-0.7 0.377,-0.7L0.1,-0.7L0.1,-0L0.187,-0L0.187,-0.277L0.357,-0.277L0.541,-0L0.636,-0L0.636,-0.01L0.448,-0.288ZM0.187,-0.62L0.372,-0.62C0.46,-0.62 0.508,-0.571 0.508,-0.489C0.508,-0.405 0.46,-0.357 0.372,-0.357L0.187,-0.357L0.187,-0.62Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,669.662,750.862)'%3E%3Cpath d='M0.1,-0L0.55,-0L0.55,-0.079L0.187,-0.079L0.187,-0.321L0.519,-0.321L0.519,-0.401L0.187,-0.401L0.187,-0.62L0.55,-0.62L0.55,-0.7L0.1,-0.7L0.1,-0Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,475.265,806.07)'%3E%3Cpath d='M0.394,-0.7L0.287,-0.7L0.03,-0.01L0.03,-0L0.121,-0L0.187,-0.183L0.493,-0.183L0.559,-0L0.652,-0L0.652,-0.01L0.394,-0.7ZM0.215,-0.261L0.338,-0.603L0.342,-0.603L0.465,-0.261L0.215,-0.261Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,528.835,806.07)'%3E%3Cpath d='M0.394,-0.7L0.287,-0.7L0.03,-0.01L0.03,-0L0.121,-0L0.187,-0.183L0.493,-0.183L0.559,-0L0.652,-0L0.652,-0.01L0.394,-0.7ZM0.215,-0.261L0.338,-0.603L0.342,-0.603L0.465,-0.261L0.215,-0.261Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,567.404,806.07)'%3E%3Cpath d='M0.1,-0L0.187,-0L0.187,-0.254L0.358,-0.254C0.499,-0.254 0.589,-0.345 0.589,-0.479C0.589,-0.609 0.501,-0.7 0.358,-0.7L0.1,-0.7L0.1,-0ZM0.187,-0.334L0.187,-0.621L0.347,-0.621C0.441,-0.621 0.499,-0.569 0.499,-0.479C0.499,-0.385 0.444,-0.334 0.347,-0.334L0.187,-0.334Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,604.323,806.07)'%3E%3Cpath d='M0.448,-0.288C0.539,-0.314 0.599,-0.386 0.599,-0.49C0.599,-0.609 0.52,-0.7 0.377,-0.7L0.1,-0.7L0.1,-0L0.187,-0L0.187,-0.277L0.357,-0.277L0.541,-0L0.636,-0L0.636,-0.01L0.448,-0.288ZM0.187,-0.62L0.372,-0.62C0.46,-0.62 0.508,-0.571 0.508,-0.489C0.508,-0.405 0.46,-0.357 0.372,-0.357L0.187,-0.357L0.187,-0.62Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,642.293,806.07)'%3E%3Cpath d='M0.1,-0L0.55,-0L0.55,-0.079L0.187,-0.079L0.187,-0.321L0.519,-0.321L0.519,-0.401L0.187,-0.401L0.187,-0.62L0.55,-0.62L0.55,-0.7L0.1,-0.7L0.1,-0Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,677.262,806.07)'%3E%3Cpath d='M0.1,-0L0.185,-0L0.185,-0.554L0.189,-0.554L0.547,-0L0.643,-0L0.643,-0.7L0.557,-0.7L0.557,-0.143L0.553,-0.143L0.195,-0.7L0.1,-0.7L0.1,-0Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,718.882,806.07)'%3E%3Cpath d='M0.1,-0L0.332,-0C0.541,-0 0.644,-0.155 0.644,-0.35C0.644,-0.56 0.531,-0.7 0.332,-0.7L0.1,-0.7L0.1,-0ZM0.187,-0.079L0.187,-0.62L0.323,-0.62C0.484,-0.62 0.554,-0.495 0.554,-0.35C0.554,-0.204 0.484,-0.079 0.323,-0.079L0.187,-0.079Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,758.551,806.07)'%3E%3Cpath d='M0.1,-0L0.55,-0L0.55,-0.079L0.187,-0.079L0.187,-0.321L0.519,-0.321L0.519,-0.401L0.187,-0.401L0.187,-0.62L0.55,-0.62L0.55,-0.7L0.1,-0.7L0.1,-0Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,793.52,806.07)'%3E%3Cpath d='M0.448,-0.288C0.539,-0.314 0.599,-0.386 0.599,-0.49C0.599,-0.609 0.52,-0.7 0.377,-0.7L0.1,-0.7L0.1,-0L0.187,-0L0.187,-0.277L0.357,-0.277L0.541,-0L0.636,-0L0.636,-0.01L0.448,-0.288ZM0.187,-0.62L0.372,-0.62C0.46,-0.62 0.508,-0.571 0.508,-0.489C0.508,-0.405 0.46,-0.357 0.372,-0.357L0.187,-0.357L0.187,-0.62Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(1.04521,0,0,1.04521,2811.99,-89.5631)'%3E%3Cpath d='M184.924,172.141C179.682,176.013 173.205,178.308 166.188,178.308C162.853,178.308 159.638,177.791 156.62,176.832C148.211,174.162 142.619,166.188 142.62,157.365L142.623,132.031L142.621,132.03C142.621,124.914 138.76,119.692 135.027,118.888L135.027,115.043L145.272,115.043C150.437,115.043 155.036,117.456 158.011,121.213C163.253,117.339 169.732,115.043 176.75,115.043C180.085,115.043 183.3,115.56 186.318,116.519C194.727,119.189 200.318,127.163 200.318,135.986L200.315,161.321L200.316,161.322C200.316,168.437 204.179,173.659 207.911,174.463L207.911,178.308L197.666,178.308C192.501,178.308 187.9,175.898 184.924,172.141ZM214.946,162.265C214.946,171.041 222.027,178.155 230.803,178.155L230.983,178.155C236.997,178.155 243.045,175.516 247.541,171.76L247.541,176.749L271.335,176.749L271.335,172.904L270.433,172.904C267.993,172.904 266.014,170.925 266.014,168.485L266.014,124.637C266.014,122.197 267.993,120.218 270.433,120.218L271.335,120.218L271.335,116.373L247.541,116.378L247.541,159.883C247.541,166.305 233.521,169.708 233.521,159.299L233.521,131.033C233.521,122.201 226.362,115.043 217.531,115.043L207.481,115.043L207.481,118.827C211.155,119.619 214.956,124.758 214.956,131.762L214.957,131.762L214.946,162.265ZM128.57,130.934L128.558,161.436L128.56,161.437C128.56,168.44 132.361,173.579 136.034,174.371L136.034,178.155L125.984,178.155C117.153,178.155 109.994,170.996 109.994,162.166L109.994,133.9C109.994,123.49 95.975,126.894 95.975,133.315L95.975,176.745L72.18,176.749L72.18,172.903L73.082,172.903C75.522,172.903 77.501,170.925 77.501,168.484L77.501,124.637C77.501,122.197 75.522,120.218 73.082,120.218L72.18,120.218L72.18,116.373L95.975,116.373L95.975,121.438C100.47,117.682 106.518,115.043 112.533,115.043L112.712,115.043C121.488,115.043 128.57,122.157 128.57,130.934ZM159.239,122.991L159.249,123.009C159.413,123.284 159.566,123.565 159.714,123.85C159.744,123.91 159.775,123.969 159.805,124.029C159.953,124.323 160.094,124.622 160.224,124.926C161.057,126.881 161.518,129.031 161.518,131.289L161.518,153.5L161.522,153.499C161.522,162.873 169.122,168.946 178.496,168.946C179.951,168.946 181.362,168.761 182.709,168.416C181.879,166.464 181.42,164.317 181.42,162.062L181.42,139.851L181.416,139.853C181.416,130.478 173.816,124.406 164.442,124.406C162.987,124.406 161.576,124.591 160.228,124.936C159.942,124.262 159.61,123.613 159.239,122.991Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: top left;
padding-left: 140px;
color: $logo-color;
}

span {
font-size: 0.7rem;
display: block;
line-height: 1.1;
}
}

.footer-links-navigation {
flex-basis: 260px;
min-width: 200px;
font-size: 0.9rem;

span {
font-weight: 600;
}

ul {
list-style: none;
padding: 0;
margin: 0;

a {
color: black;
}
}
}

.footer-social {
flex-basis: 50px;

&__badge {
margin-right: 1.5rem;
}
}
77 changes: 61 additions & 16 deletions src/components/Footer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,14 @@ import React from 'react';
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 { ensureConfig, getConfig } from '@edx/frontend-platform';
import { AppContext } from '@edx/frontend-platform/react';

import messages from './Footer.messages';
import LanguageSelector from './LanguageSelector';
import FooterLinks from './footer-links/FooterNavLinks';
import FooterSocial from './footer-links/FooterSocialLinks';
import parseEnvSettings from '../utils/parseData';

ensureConfig([
'LMS_BASE_URL',
Expand All @@ -17,6 +20,43 @@ const EVENT_NAMES = {
FOOTER_LINK: 'edx.bi.footer.link',
};

const AdditionalLogosSection = () => {
const FOOTER_ADDITIONAL_LOGOS = getConfig().FOOTER_ADDITIONAL_LOGOS || process.env.FOOTER_ADDITIONAL_LOGOS;

const logos = parseEnvSettings(FOOTER_ADDITIONAL_LOGOS);

if (!logos) { return null; }

return (
<section className="footer-additional-logos">
<div className="d-md-flex justify-content-between px-4">
{logos.map((logo) => (
<div className="py-3">
<a href={logo.url} target="_blank" rel="noopener noreferrer">
<img src={logo.src} alt={logo.alt} style={{ maxHeight: '45px', maxWidth: '280px' }} />
</a>
</div>
))}
</div>
</section>
);
};

const FooterCopyrightSection = ({ intl }) => (
<section className="footer-copyright py-3 px-4">
<div className="footer-copyright__logo">
<span>&copy; {new Date().getFullYear()} - FCT|FCCN
<br />
{intl.formatMessage(messages['footer.copyright.message'])}
</span>
</div>
</section>
);

FooterCopyrightSection.propTypes = {
intl: intlShape.isRequired,
};

class SiteFooter extends React.Component {
constructor(props) {
super(props);
Expand Down Expand Up @@ -46,28 +86,33 @@ class SiteFooter extends React.Component {
return (
<footer
role="contentinfo"
className="footer d-flex border-top py-3 px-4"
>
<div className="container-fluid d-flex">
<a
className="d-block"
href={config.LMS_BASE_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'])}
/>
</a>
<div className="flex-grow-1" />
<section className="footer-navigation container-fluid d-md-flex justify-content-between py-3 px-4">
<div className="footer-navigation__brand d-flex flex-column justify-content-between">
<a
className="d-block"
href={config.LMS_BASE_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'])}
/>
</a>
<FooterSocial intl={intl} />
</div>
<FooterLinks intl={intl} />

{showLanguageSelector && (
<LanguageSelector
options={supportedLanguages}
onSubmit={onLanguageSelected}
/>
)}
</div>
</section>
<AdditionalLogosSection />
<FooterCopyrightSection intl={intl} />
</footer>
);
}
Expand Down
Loading
Loading