fccn · sandroscosta · Mar 20, 2024 · Mar 19, 2024 · Mar 19, 2024
diff --git a/README.rst b/README.rst
@@ -93,6 +93,67 @@ This library has the following exports:
   language from its dropdown.
 * supportedLanguages: An array of objects representing available languages.  See example below for object shape.
 
+<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::
+
+  FOOTER_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.
+
+The file is available on ``src/data/footerLinks.js`` and it is used to provide the links to the FooterLinks component.
+
+Configuration Example::
+
+  const links = [
+  {
+    title: 'footer.nau.title', //section title
+    menus: [
+      {
+        title: 'footer.nau.about', //menu item title
+        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/'
+        }
+      }
+    ]
+  }];
+
+
+
 Examples
 ========
 

diff --git a/src/_footer.scss b/src/_footer.scss
@@ -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;
+  }
+}
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -2,11 +2,16 @@ 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/config';
+import { ensureConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFacebookF, faLinkedinIn } from '@fortawesome/free-brands-svg-icons';
+import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
 
 import messages from './Footer.messages';
 import LanguageSelector from './LanguageSelector';
+import { links, social } from '../data/footerLinks';
+import FooterLinks from './footer-links/FooterLinks';
 
 ensureConfig([
   'LMS_BASE_URL',
@@ -17,6 +22,69 @@ const EVENT_NAMES = {
   FOOTER_LINK: 'edx.bi.footer.link',
 };
 
+const FOOTER_LOGOS = process.env.FOOTER_ADDITIONAL_LOGOS;
+
+const FooterSocial = ({ intl }) => (
+  <div className="footer-social d-flex mt-2">
+    <a className="footer-social__badge" href={social?.newsletter} target="_blank" rel="noopener noreferrer" title={intl.formatMessage(messages['footer.nau.social.newsletter'])}>
+      <FontAwesomeIcon icon={faEnvelope} />
+    </a>
+    <a className="footer-social__badge" href={social?.facebook} target="_blank" rel="noopener noreferrer" title={intl.formatMessage(messages['footer.nau.social.facebook'])}>
+      <FontAwesomeIcon icon={faFacebookF} />
+    </a>
+    <a className="footer-social__badge" href={social?.linkedin} target="_blank" rel="noopener noreferrer" title={intl.formatMessage(messages['footer.nau.social.linkedin'])}>
+      <FontAwesomeIcon icon={faLinkedinIn} />
+    </a>
+  </div>
+);
+
+FooterSocial.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+const AdditionalLogosSection = () => {
+  const parseFooterLogos = () => {
+    try {
+      return JSON.parse(FOOTER_LOGOS);
+    } catch (e) {
+      return null;
+    }
+  };
+
+  const logos = parseFooterLogos();
+
+  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);
@@ -46,28 +114,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 links={links} intl={intl} />
+
           {showLanguageSelector && (
             <LanguageSelector
               options={supportedLanguages}
               onSubmit={onLanguageSelected}
             />
           )}
-        </div>
+        </section>
+        <AdditionalLogosSection />
+        <FooterCopyrightSection intl={intl} />
       </footer>
     );
   }