feat: add powered by logo settings

fccn · Oct 29, 2024 · 80abf68 · 80abf68
1 parent be68e8a
commit 80abf68
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 12 deletions.
diff --git a/src/_footer.scss b/src/_footer.scss
@@ -6,10 +6,11 @@ $logo-color: #4e4e4e !default;
 }
 
 .footer-copyright {
-    color: $logo-color;
-    font-size: 0.7rem;
-    display: block;
-    line-height: 1.1;
+  color: $logo-color;
+  font-size: 0.7rem;
+  display: block;
+  line-height: 1.1;
+  padding: .8rem 0;
 }
 
 .footer-links-navigation {

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -14,6 +14,7 @@ import parseEnvSettings from '../utils/parseData';
 ensureConfig([
   'LMS_BASE_URL',
   'LOGO_TRADEMARK_URL',
+  'LOGO_POWERED_BY',
 ], 'Footer component');
 
 const EVENT_NAMES = {
@@ -52,6 +53,28 @@ FooterCopyrightSection.propTypes = {
   intl: intlShape.isRequired,
 };
 
+const FooterPoweredBy = ({ intl }) => {
+  const POWERED_BY = getConfig().LOGO_POWERED_BY || process.env.LOGO_POWERED_BY;
+
+  const poweredBy = parseEnvSettings(POWERED_BY);
+
+  if (!poweredBy) { return null; }
+
+  return (
+    <a className="footer-powered-by" href={poweredBy.url} target="_blank" rel="noopener noreferrer">
+      <img
+        src={poweredBy.src}
+        alt={intl.formatMessage(messages['footer.poweredBy.altText'])}
+        style={{ width: '6rem' }}
+      />
+    </a>
+  );
+};
+
+FooterPoweredBy.propTypes = {
+  intl: intlShape.isRequired,
+};
+
 class SiteFooter extends React.Component {
   constructor(props) {
     super(props);
@@ -83,8 +106,8 @@ class SiteFooter extends React.Component {
         role="contentinfo"
       >
         <section className="footer-navigation">
-          <div className="container d-md-flex justify-content-between py-3 px-4">
-            <div className="footer-navigation__brand d-flex flex-column justify-content-between">
+          <div className="container d-md-flex justify-content-between py-3">
+            <div className="footer-navigation__brand d-flex flex-column justify-content-between px-4">
               <a
                 className="d-block"
                 href={config.LMS_BASE_URL}
@@ -98,6 +121,7 @@ class SiteFooter extends React.Component {
               </a>
               <FooterCopyrightSection intl={intl} />
               <FooterSocial intl={intl} />
+              <FooterPoweredBy intl={intl} />
             </div>
             <FooterLinks intl={intl} />
 

diff --git a/src/components/Footer.messages.js b/src/components/Footer.messages.js
@@ -121,6 +121,11 @@ const messages = defineMessages({
     defaultMessage: 'Follow us on Instagram',
     description: 'The label for the link to the nau instagram page.',
   },
+  'footer.poweredBy.altText': {
+    id: 'footer.poweredBy.altText',
+    defaultMessage: 'Powered by Open edX',
+    description: 'The alt text for the open edx logo image.',
+  },
 });
 
 export default messages;
diff --git a/src/components/__snapshots__/Footer.test.jsx.snap b/src/components/__snapshots__/Footer.test.jsx.snap
@@ -8,10 +8,10 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
     className="footer-navigation"
   >
     <div
-      className="container d-md-flex justify-content-between py-3 px-4"
+      className="container d-md-flex justify-content-between py-3"
     >
       <div
-        className="footer-navigation__brand d-flex flex-column justify-content-between"
+        className="footer-navigation__brand d-flex flex-column justify-content-between px-4"
       >
         <a
           aria-label="edX Home"
@@ -89,10 +89,10 @@ exports[`<Footer /> renders correctly renders without a language selector 1`] =
     className="footer-navigation"
   >
     <div
-      className="container d-md-flex justify-content-between py-3 px-4"
+      className="container d-md-flex justify-content-between py-3"
     >
       <div
-        className="footer-navigation__brand d-flex flex-column justify-content-between"
+        className="footer-navigation__brand d-flex flex-column justify-content-between px-4"
       >
         <a
           aria-label="edX Home"
@@ -131,10 +131,10 @@ exports[`<Footer /> renders correctly renders without a language selector in pt-
     className="footer-navigation"
   >
     <div
-      className="container d-md-flex justify-content-between py-3 px-4"
+      className="container d-md-flex justify-content-between py-3"
     >
       <div
-        className="footer-navigation__brand d-flex flex-column justify-content-between"
+        className="footer-navigation__brand d-flex flex-column justify-content-between px-4"
       >
         <a
           aria-label="edX Home"