From 9161f00cd52276728fb501418c5e4776383c1c5f Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@disroot.org>
Date: Thu, 6 Jul 2023 17:48:56 +0530
Subject: [PATCH] feat: add option to configure link container classnames

---
 README.rst                                        | 2 ++
 src/components/Footer.jsx                         | 2 +-
 src/components/Footer.test.jsx                    | 1 +
 src/components/__snapshots__/Footer.test.jsx.snap | 4 ++--
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/README.rst b/README.rst
index bb90f5ae7b..334254ea27 100644
--- 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
index ecc93d7fc3..cea9606564 100644
--- 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
index 53eb2199bf..e4d4d42581 100644
--- 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
index bfb568542c..ab162127c2 100644
--- 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"