feat: update footer (#37476)

* feat: update footer

* fix: update tests

* fix: clean up

* fix: rearrange links

* fix: update test

client/src/components/Footer/FooterCol.js

@@ -2,11 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Link from '../helpers/Link';
+import { dasherize } from '../../../../utils/slugs';
 
 function FooterCol({ title, links }) {
   return (
-    <div className='footer-col'>
+    <div className={`footer-col ${dasherize(title)}`}>
-      <div className='col-header'>{title}</div>
+      {title ? (
+        <div className={`col-header `}>{title}</div>
+      ) : (
+        <div className='col-spacer'></div>
+      )}
       {links.map(({ to, text, internal }, i) => (
         <Link external={!internal} key={`link-${i}`} to={to}>
           {text}

client/src/components/Footer/__snapshots__/Footer.test.js.snap

@@ -20,7 +20,12 @@ exports[`<Footer /> matches snapshot 1`] = `
           Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons - all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.
         </p>
         <p>
-          Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff. You can 
+          Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.
+        </p>
+        <p
+          className="footer-donation"
+        >
+          You can 
           <a
             className="inline"
             href="/donate"
@@ -31,10 +36,10 @@ exports[`<Footer /> matches snapshot 1`] = `
         </p>
       </div>
       <div
-        className="footer-col"
+        className="footer-col our-nonprofit"
       >
         <div
-          className="col-header"
+          className="col-header "
         >
           Our Nonprofit
         </div>
@@ -45,18 +50,6 @@ exports[`<Footer /> matches snapshot 1`] = `
         >
           About
         </a>
-        <a
-          href="/donate"
-        >
-          Donate
-        </a>
-        <a
-          href="/news/shop/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Shop
-        </a>
         <a
           href="https://www.linkedin.com/school/free-code-camp/people/"
           rel="noopener noreferrer"
@@ -71,6 +64,13 @@ exports[`<Footer /> matches snapshot 1`] = `
         >
           Open Source
         </a>
+        <a
+          href="/news/shop/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Shop
+        </a>
         <a
           href="/news/support/"
           rel="noopener noreferrer"
@@ -122,198 +122,12 @@ exports[`<Footer /> matches snapshot 1`] = `
         </a>
       </div>
       <div
-        className="footer-col"
+        className="footer-col trending-guides"
       >
         <div
-          className="col-header"
+          className="col-header "
         >
-          Best Tutorials
+          Trending Guides
-        </div>
-        <a
-          href="/news/best-python-tutorial/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Python Tutorial
-        </a>
-        <a
-          href="/news/best-git-tutorial/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Git Tutorial
-        </a>
-        <a
-          href="/news/the-best-linux-tutorials/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Linux Tutorial
-        </a>
-        <a
-          href="/news/best-javascript-tutorial/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          JavaScript Tutorial
-        </a>
-        <a
-          href="/news/best-react-javascript-tutorial/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          React Tutorial
-        </a>
-        <a
-          href="/news/best-html-html5-tutorial/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          HTML Tutorial
-        </a>
-        <a
-          href="/news/best-css-and-css3-tutorial/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          CSS Tutorial
-        </a>
-        <a
-          href="/news/best-sql-database-tutorial/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          SQL Tutorial
-        </a>
-        <a
-          href="/news/best-java-8-tutorial/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Java Tutorial
-        </a>
-        <a
-          href="/news/best-angular-tutorial-angularjs/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Angular Tutorial
-        </a>
-        <a
-          href="/news/best-wordpress-tutorial/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          WordPress Tutorial
-        </a>
-        <a
-          href="/news/best-bootstrap-tutorial-responsive-web-design/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Bootstrap Tutorial
-        </a>
-      </div>
-      <div
-        className="footer-col"
-      >
-        <div
-          className="col-header"
-        >
-          Best Examples
-        </div>
-        <a
-          href="/news/python-example/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Python Example
-        </a>
-        <a
-          href="/news/javascript-example/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          JavaScript Example
-        </a>
-        <a
-          href="/news/react-examples-reactjs/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          React Example
-        </a>
-        <a
-          href="/news/linux-example-bash-command-line/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Linux Example
-        </a>
-        <a
-          href="/news/html-and-html5-example/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          HTML Example
-        </a>
-        <a
-          href="/news/css-example-css3/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          CSS Example
-        </a>
-        <a
-          href="/news/sql-example/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          SQL Example
-        </a>
-        <a
-          href="/news/java-example/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Java Example
-        </a>
-        <a
-          href="/news/the-best-angular-examples/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Angular Example
-        </a>
-        <a
-          href="/news/the-best-jquery-examples/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          jQuery Example
-        </a>
-        <a
-          href="/news/the-best-bootstrap-examples/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Bootstrap Example
-        </a>
-        <a
-          href="/news/the-best-php-examples/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          PHP Example
-        </a>
-      </div>
-      <div
-        className="footer-col"
-      >
-        <div
-          className="col-header"
-        >
-          Trending Reference
         </div>
         <a
           href="/news/2019-web-developer-roadmap/"
@@ -323,53 +137,11 @@ exports[`<Footer /> matches snapshot 1`] = `
           2019 Web Developer Roadmap
         </a>
         <a
-          href="/news/linux-command-line-bash-tutorial/"
+          href="/news/best-python-tutorial/"
           rel="noopener noreferrer"
           target="_blank"
         >
-          Linux Command Line Guide
+          Python Tutorial
-        </a>
-        <a
-          href="/news/the-ultimate-guide-to-git-reset-and-git-revert/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Git Reset and Git Revert
-        </a>
-        <a
-          href="/news/the-ultimate-guide-to-git-merge-and-git-rebase/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Git Merge and Git Rebase
-        </a>
-        <a
-          href="/news/the-ultimate-guide-to-javascript-array-methods-map/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          JavaScript Array Map
-        </a>
-        <a
-          href="/news/the-ultimate-guide-to-javascript-array-methods-reduce/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          JavaScript Array Reduce
-        </a>
-        <a
-          href="/news/the-ultimate-guide-to-javascript-date-and-moment-js/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          JavaScript Date
-        </a>
-        <a
-          href="/news/the-ultimate-guide-to-javascript-string-methods-split/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          JavaScript String Split
         </a>
         <a
           href="/news/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af/"
@@ -379,18 +151,123 @@ exports[`<Footer /> matches snapshot 1`] = `
           CSS Flexbox Guide
         </a>
         <a
-          href="/news/11-things-i-learned-reading-the-css-grid-specification-fb3983aa5e0/"
+          href="/news/best-javascript-tutorial/"
           rel="noopener noreferrer"
           target="_blank"
         >
-          CSS Grid Guide
+          JavaScript Tutorial
         </a>
         <a
-          href="/news/the-ultimate-guide-to-linux-creating-a-sudo-user/"
+          href="/news/python-example/"
           rel="noopener noreferrer"
           target="_blank"
         >
-          Create a Linux Sudo User
+          Python Example
+        </a>
+        <a
+          href="/news/best-html-html5-tutorial/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          HTML Tutorial
+        </a>
+        <a
+          href="/news/linux-command-line-bash-tutorial/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Linux Command Line Guide
+        </a>
+        <a
+          href="/news/javascript-example/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          JavaScript Example
+        </a>
+        <a
+          href="/news/best-git-tutorial/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Git Tutorial
+        </a>
+        <a
+          href="/news/best-react-javascript-tutorial/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          React Tutorial
+        </a>
+        <a
+          href="/news/best-java-8-tutorial/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Java Tutorial
+        </a>
+      </div>
+      <div
+        className="footer-col "
+      >
+        <div
+          className="col-spacer"
+        />
+        <a
+          href="/news/the-best-linux-tutorials/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Linux Tutorial
+        </a>
+        <a
+          href="/news/best-css-and-css3-tutorial/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          CSS Tutorial
+        </a>
+        <a
+          href="/news/the-best-jquery-examples/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          jQuery Example
+        </a>
+        <a
+          href="/news/best-sql-database-tutorial/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          SQL Tutorial
+        </a>
+        <a
+          href="/news/css-example-css3/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          CSS Example
+        </a>
+        <a
+          href="/news/react-examples-reactjs/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          React Example
+        </a>
+        <a
+          href="/news/best-angular-tutorial-angularjs/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Angular Tutorial
+        </a>
+        <a
+          href="/news/the-best-bootstrap-examples/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Bootstrap Example
         </a>
         <a
           href="/news/the-ultimate-guide-to-ssh-setting-up-ssh-keys/"
@@ -399,6 +276,20 @@ exports[`<Footer /> matches snapshot 1`] = `
         >
           How to Set Up SSH Keys
         </a>
+        <a
+          href="/news/best-wordpress-tutorial/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          WordPress Tutorial
+        </a>
+        <a
+          href="/news/the-best-php-examples/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          PHP Example
+        </a>
       </div>
     </div>
   </div>

client/src/components/Footer/footer.css

@@ -23,6 +23,7 @@
   font-family: 'Lato', sans-serif;
   margin: 0 0 1.45rem;
   font-size: 15px;
+  line-height: 30px;
 }
 
 .footer-container a {
@@ -30,9 +31,11 @@
 }
 
 .footer-container .col-header {
-  padding-bottom: 5px;
+  padding-bottom: 30px;
   font-weight: 700;
+  font-size: 16px;
 }
+
 .footer-row {
   display: flex;
   flex-direction: row;
@@ -46,11 +49,11 @@
   padding-left: 15px;
   padding-right: 15px;
   font-size: 15px;
-  margin: 0 0 1.45rem;
+  margin: 0 0 3rem;
 }
-
 .footer-col a {
   text-decoration: none;
+  padding: 5px 0px;
 }
 
 .footer-col a:hover {
@@ -63,17 +66,34 @@
   flex-direction: column;
   padding-left: 15px;
   padding-right: 15px;
+  margin-bottom: 30px;
 }
 
 .footer-desc-col a {
   text-decoration: underline;
 }
 
+p.footer-donation {
+  font-weight: 700;
+  font-size: 18px;
+}
+
+.footer-container .col-spacer {
+  margin-top: -3rem;
+}
+
 @media (min-width: 500px) {
   .footer-col {
-    flex: 1 0 45%;
+    flex: 1 0 50%;
     height: auto;
     font-size: 16.5;
+    margin: 0 0 1.45rem;
+  }
+  .footer-col:last-of-type {
+    margin-left: 50%;
+  }
+  .footer-container .col-spacer {
+    margin-top: -1.45rem;
   }
 }
 
@@ -82,12 +102,20 @@
     width: 750px;
   }
   .footer-col {
-    flex: 1 0 100px;
+    flex: 1 0 25%;
     height: auto;
     font-size: 16.5;
   }
+
+  /* .our-nonprofit {
+    flex: 1 0 35%;
+  } */
   .footer-col:last-of-type {
-    flex: 1 0 180px;
+    /* flex: 1 0 30%; */
+    margin-left: 0px;
+  }
+  .footer-container .col-spacer {
+    margin-top: 54px;
   }
 }
 
@@ -102,12 +130,16 @@
     width: 1170px;
   }
   .footer-desc-col {
-    flex: 1 0 31%;
+    flex: 1 0 35%;
   }
   .footer-col {
-    flex: 1 0 120px;
+    flex: 1 0 9%;
   }
-  .footer-col:last-of-type {
+  .trending-guides {
-    flex: 4 0 100px;
+    flex: 1 0 15%;
+  }
+
+  p.footer-donation {
+    margin-top: 18px;
   }
 }

client/src/components/Footer/footerLinks.json

@@ -4,13 +4,12 @@
       "title": "Our Nonprofit",
       "links": [
         { "to": "/news/about/", "text": "About" },
-        { "to": "/donate", "text": "Donate", "internal": true },
-        { "to": "/news/shop/", "text": "Shop" },
         {
           "to": "https://www.linkedin.com/school/free-code-camp/people/",
           "text": "Alumni Network"
         },
         { "to": "https://github.com/freeCodeCamp/", "text": "Open Source" },
+        { "to": "/news/shop/", "text": "Shop" },
         { "to": "/news/support/", "text": "Support" },
         { "to": "/news/sponsors/", "text": "Sponsors" },
         {
@@ -24,125 +23,64 @@
       ]
     },
     {
-      "title": "Best Tutorials",
+      "title": "Trending Guides",
-      "links": [
-        { "to": "/news/best-python-tutorial/", "text": "Python Tutorial" },
-        { "to": "/news/best-git-tutorial/", "text": "Git Tutorial" },
-        { "to": "/news/the-best-linux-tutorials/", "text": "Linux Tutorial" },
-        {
-          "to": "/news/best-javascript-tutorial/",
-          "text": "JavaScript Tutorial"
-        },
-        {
-          "to": "/news/best-react-javascript-tutorial/",
-          "text": "React Tutorial"
-        },
-        { "to": "/news/best-html-html5-tutorial/", "text": "HTML Tutorial" },
-        { "to": "/news/best-css-and-css3-tutorial/", "text": "CSS Tutorial" },
-        { "to": "/news/best-sql-database-tutorial/", "text": "SQL Tutorial" },
-        { "to": "/news/best-java-8-tutorial/", "text": "Java Tutorial" },
-        {
-          "to": "/news/best-angular-tutorial-angularjs/",
-          "text": "Angular Tutorial"
-        },
-        {
-          "to": "/news/best-wordpress-tutorial/",
-          "text": "WordPress Tutorial"
-        },
-        {
-          "to": "/news/best-bootstrap-tutorial-responsive-web-design/",
-          "text": "Bootstrap Tutorial"
-        }
-      ]
-    },
-    {
-      "title": "Best Examples",
-      "links": [
-        { "to": "/news/python-example/", "text": "Python Example" },
-        { "to": "/news/javascript-example/", "text": "JavaScript Example" },
-        { "to": "/news/react-examples-reactjs/", "text": "React Example" },
-        {
-          "to": "/news/linux-example-bash-command-line/",
-          "text": "Linux Example"
-        },
-        { "to": "/news/html-and-html5-example/", "text": "HTML Example" },
-        { "to": "/news/css-example-css3/", "text": "CSS Example" },
-        { "to": "/news/sql-example/", "text": "SQL Example" },
-        { "to": "/news/java-example/", "text": "Java Example" },
-        {
-          "to": "/news/the-best-angular-examples/",
-          "text": "Angular Example"
-        },
-        { "to": "/news/the-best-jquery-examples/", "text": "jQuery Example" },
-        {
-          "to": "/news/the-best-bootstrap-examples/",
-          "text": "Bootstrap Example"
-        },
-        { "to": "/news/the-best-php-examples/", "text": "PHP Example" }
-      ]
-    },
-    {
-      "title": "Trending Reference",
       "links": [
         {
           "to": "/news/2019-web-developer-roadmap/",
           "text": "2019 Web Developer Roadmap"
         },
-
+        { "to": "/news/best-python-tutorial/", "text": "Python Tutorial" },
-        {
-          "to": "/news/linux-command-line-bash-tutorial/",
-          "text": "Linux Command Line Guide"
-        },
-
-        {
-          "to": "/news/the-ultimate-guide-to-git-reset-and-git-revert/",
-          "text": "Git Reset and Git Revert"
-        },
-
-        {
-          "to": "/news/the-ultimate-guide-to-git-merge-and-git-rebase/",
-          "text": "Git Merge and Git Rebase"
-        },
-
-        {
-          "to": "/news/the-ultimate-guide-to-javascript-array-methods-map/",
-          "text": "JavaScript Array Map"
-        },
-
-        {
-          "to": "/news/the-ultimate-guide-to-javascript-array-methods-reduce/",
-          "text": "JavaScript Array Reduce"
-        },
-
-        {
-          "to": "/news/the-ultimate-guide-to-javascript-date-and-moment-js/",
-          "text": "JavaScript Date"
-        },
-
-        {
-          "to": "/news/the-ultimate-guide-to-javascript-string-methods-split/",
-          "text": "JavaScript String Split"
-        },
-
         {
           "to": "/news/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af/",
           "text": "CSS Flexbox Guide"
         },
-
         {
-          "to": "/news/11-things-i-learned-reading-the-css-grid-specification-fb3983aa5e0/",
+          "to": "/news/best-javascript-tutorial/",
-          "text": "CSS Grid Guide"
+          "text": "JavaScript Tutorial"
         },
-
+        { "to": "/news/python-example/", "text": "Python Example" },
+        { "to": "/news/best-html-html5-tutorial/", "text": "HTML Tutorial" },
         {
-          "to": "/news/the-ultimate-guide-to-linux-creating-a-sudo-user/",
+          "to": "/news/linux-command-line-bash-tutorial/",
-          "text": "Create a Linux Sudo User"
+          "text": "Linux Command Line Guide"
         },
+        { "to": "/news/javascript-example/", "text": "JavaScript Example" },
 
+        { "to": "/news/best-git-tutorial/", "text": "Git Tutorial" },
+        {
+          "to": "/news/best-react-javascript-tutorial/",
+          "text": "React Tutorial"
+        },
+        { "to": "/news/best-java-8-tutorial/", "text": "Java Tutorial" }
+      ]
+    },
+    {
+      "title": "",
+      "links": [
+        { "to": "/news/the-best-linux-tutorials/", "text": "Linux Tutorial" },
+
+        { "to": "/news/best-css-and-css3-tutorial/", "text": "CSS Tutorial" },
+        { "to": "/news/the-best-jquery-examples/", "text": "jQuery Example" },
+        { "to": "/news/best-sql-database-tutorial/", "text": "SQL Tutorial" },
+        { "to": "/news/css-example-css3/", "text": "CSS Example" },
+        { "to": "/news/react-examples-reactjs/", "text": "React Example" },
+        {
+          "to": "/news/best-angular-tutorial-angularjs/",
+          "text": "Angular Tutorial"
+        },
+        {
+          "to": "/news/the-best-bootstrap-examples/",
+          "text": "Bootstrap Example"
+        },
         {
           "to": "/news/the-ultimate-guide-to-ssh-setting-up-ssh-keys/",
           "text": "How to Set Up SSH Keys"
-        }
+        },
+        {
+          "to": "/news/best-wordpress-tutorial/",
+          "text": "WordPress Tutorial"
+        },
+        { "to": "/news/the-best-php-examples/", "text": "PHP Example" }
       ]
     }
   ]

client/src/components/Footer/index.js

@@ -37,7 +37,10 @@ function Footer() {
             </p>
             <p>
               Donations to freeCodeCamp go toward our education initiatives, and
-              help pay for servers, services, and staff. You can&nbsp;
+              help pay for servers, services, and staff.
+            </p>
+            <p className='footer-donation'>
+              You can&nbsp;
               <Link className='inline' to='/donate'>
                 make a tax-deductible donation here
               </Link>