feat: add option to configure link container classnames

openedx · Jul 6, 2023 · 0ae617e · 0ae617e
1 parent d1e6938
commit 0ae617e
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 3 deletions.
diff --git a/README.rst b/README.rst
@@ -79,6 +79,8 @@ Other than the environment variables listed above, it is also possible to custom
            {"url": "https://openedx.org/code-of-conduct/", "text": "Code of conduct"},
            {"url": "https://openedx.org/privacy-policy/", "text": "Privacy Policy"},
        ],
+       # Update link container classes
+       "FOOTER_LINKS_CONTAINER_CLASSNAMES": "flex-wrap",
        # Update link styling
        "FOOTER_LINKS_CLASSNAMES": "text-dark font-weight-bold",
    }

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -61,7 +61,7 @@ class SiteFooter extends React.Component {
         </a>
         <div className="flex-grow-1" />
         {Array.isArray(config.FOOTER_LINKS) && (
-          <div className="d-flex align-items-center justify-content-center">
+          <div className={`d-flex align-items-center justify-content-center ${config.FOOTER_LINKS_CONTAINER_CLASSNAMES || ''}`}>
             {config.FOOTER_LINKS.map(element => (
               <a
                 key={element.url}

diff --git a/src/components/Footer.test.jsx b/src/components/Footer.test.jsx
@@ -21,6 +21,7 @@ const FooterWithContext = ({ locale = 'es' }) => {
         { url: 'https://openedx.org/code-of-conduct/', text: 'Code of conduct' },
         { url: 'https://openedx.org/privacy-policy/', text: 'Privacy Policy' },
       ],
+      FOOTER_LINKS_CONTAINER_CLASSNAMES: 'flex-wrap',
       FOOTER_LINKS_CLASSNAMES: 'text-dark font-weight-bold',
     },
   }), []);

diff --git a/src/components/__snapshots__/Footer.test.jsx.snap b/src/components/__snapshots__/Footer.test.jsx.snap
@@ -94,7 +94,7 @@ exports[`<Footer /> renders correctly renders without a language selector 1`] =
     className="flex-grow-1"
   />
   <div
-    className="d-flex align-items-center justify-content-center"
+    className="d-flex align-items-center justify-content-center flex-wrap"
   >
     <a
       className="px-3 text-dark font-weight-bold"
@@ -153,7 +153,7 @@ exports[`<Footer /> renders correctly renders without a language selector in es
     className="flex-grow-1"
   />
   <div
-    className="d-flex align-items-center justify-content-center"
+    className="d-flex align-items-center justify-content-center flex-wrap"
   >
     <a
       className="px-3 text-dark font-weight-bold"