@comicrelief/component-library 8.44.3 → 8.45.0

package/src/components/Organisms/Footer/__snapshots__/Footer.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-.c12 {
+.c13 {
   font-family: 'Anton',Impact,sans-serif;
   font-weight: 400;
   text-transform: uppercase;
@@ -13,17 +13,17 @@ exports[`renders correctly 1`] = `
   line-height: 1.5rem;
 }
 
-.c12 {
+.c13 {
   font-size: 1rem;
   line-height: normal;
 }
 
-.c12 span {
+.c13 span {
   font-size: inherit;
   line-height: inherit;
 }
 
-.c15 {
+.c16 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
   text-transform: inherit;
@@ -35,19 +35,19 @@ exports[`renders correctly 1`] = `
   line-height: 1.25rem;
 }
 
-.c15 {
+.c16 {
   font-size: 1rem;
   line-height: normal;
   font-weight: bold;
   color: #FFFFFF;
 }
 
-.c15 span {
+.c16 span {
   font-size: inherit;
   line-height: inherit;
 }
 
-.c20 {
+.c21 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
   text-transform: inherit;
@@ -59,18 +59,18 @@ exports[`renders correctly 1`] = `
   line-height: 1.25rem;
 }
 
-.c20 {
+.c21 {
   font-size: 1rem;
   line-height: normal;
   color: #FFFFFF;
 }
 
-.c20 span {
+.c21 span {
   font-size: inherit;
   line-height: inherit;
 }
 
-.c25 {
+.c26 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
   text-transform: inherit;
@@ -82,18 +82,18 @@ exports[`renders correctly 1`] = `
   line-height: 1.25rem;
 }
 
-.c25 {
+.c26 {
   font-size: 1rem;
   line-height: normal;
   color: #969598;
 }
 
-.c25 span {
+.c26 span {
   font-size: inherit;
   line-height: inherit;
 }
 
-.c10 {
+.c11 {
   object-fit: cover;
   width: 100%;
   display: block;
@@ -101,7 +101,7 @@ exports[`renders correctly 1`] = `
   margin-right: 1rem;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   z-index: 3;
   width: 48px;
@@ -111,21 +111,21 @@ exports[`renders correctly 1`] = `
   vertical-align: bottom;
 }
 
-.c7 {
+.c8 {
   position: relative;
   display: inline;
   color: #000000;
   font-weight: normal;
 }
 
-.c7:hover,
-.c7:focus {
+.c8:hover,
+.c8:focus {
   color: #000000;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c23 {
+.c24 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -155,7 +155,7 @@ exports[`renders correctly 1`] = `
   opacity: 0.6;
 }
 
-.c6 {
+.c7 {
   width: 100%;
 }
 
@@ -165,11 +165,11 @@ exports[`renders correctly 1`] = `
   display: -ms-flexbox;
   display: flex;
   list-style-type: none;
-  margin: 0 auto;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
+  -webkit-box-pack: space-around;
+  -webkit-justify-content: space-around;
+  -ms-flex-pack: space-around;
+  justify-content: space-around;
+  margin: 0 auto 0 0;
   padding: 0;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -178,11 +178,15 @@ exports[`renders correctly 1`] = `
 }
 
 .c4 {
-  width: 32px;
+  width: 48px;
   margin-right: 1.5rem;
 }
 
-.c18 {
+.c6 {
+  width: auto;
+}
+
+.c19 {
   border: 0;
   height: 46px;
   width: 100%;
@@ -191,18 +195,18 @@ exports[`renders correctly 1`] = `
   text-decoration: none;
 }
 
-.c18:hover,
-.c18:focus {
+.c19:hover,
+.c19:focus {
   border-bottom: none;
 }
 
-.c11 {
+.c12 {
   display: block;
   width: 100%;
   text-align: left;
 }
 
-.c11 > h2 {
+.c12 > h2 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -217,7 +221,7 @@ exports[`renders correctly 1`] = `
   width: 1px;
 }
 
-.c16 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -234,18 +238,18 @@ exports[`renders correctly 1`] = `
   flex-direction: column;
 }
 
-.c16 > li a {
+.c17 > li a {
   display: none;
   font-size: 15px;
   font-weight: 500;
   cursor: pointer;
 }
 
-.c16 > li a:after {
+.c17 > li a:after {
   content: none;
 }
 
-.c21 {
+.c22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -262,52 +266,52 @@ exports[`renders correctly 1`] = `
   flex-direction: column;
 }
 
-.c21 > li a {
+.c22 > li a {
   display: none;
   font-size: 15px;
   font-weight: 500;
   cursor: pointer;
 }
 
-.c21 > li a:after {
+.c22 > li a:after {
   content: none;
 }
 
-.c17 {
+.c18 {
   height: 40px;
   width: 100%;
   background-color: inherit;
   padding: 8px 0;
 }
 
-.c22 {
+.c23 {
   height: 40px;
   width: 100%;
   background-color: inherit;
   padding: 8px 0;
 }
 
-.c19 {
+.c20 {
   padding: 14px 21px;
   height: auto;
   position: relative;
 }
 
-.c13 {
+.c14 {
   background-color: inherit;
   list-style: none outside;
   padding: 0 0 4rem;
   border-bottom: 1px solid #FFFFFF;
 }
 
-.c14 {
+.c15 {
   position: relative;
   font-weight: 700;
   margin: 0;
   margin-bottom: 1rem;
 }
 
-.c14 a {
+.c15 a {
   width: auto;
   padding: 0;
   height: auto;
@@ -318,7 +322,7 @@ exports[`renders correctly 1`] = `
   font-weight: 700;
 }
 
-.c14 a:after {
+.c15 a:after {
   content: '\\2303';
   position: absolute;
   font-family: Arial;
@@ -372,7 +376,7 @@ exports[`renders correctly 1`] = `
   align-items: center;
 }
 
-.c24 {
+.c25 {
   display: block;
   width: 100%;
   height: 100%;
@@ -380,79 +384,79 @@ exports[`renders correctly 1`] = `
   margin-top: 0;
 }
 
-.c24 p {
+.c25 p {
   font-size: 15px;
   line-height: 24px;
   margin-bottom: 5px;
 }
 
-.c8 {
+.c9 {
   color: transparent;
   border: 0;
 }
 
-.c8:hover {
+.c9:hover {
   border: 0;
 }
 
 @media (min-width:740px) {
-  .c12 {
+  .c13 {
     font-size: 1.875rem;
     line-height: 1.875rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c12 {
+  .c13 {
     font-size: 2rem;
     line-height: 2rem;
   }
 }
 
 @media (min-width:740px) {
-  .c15 {
+  .c16 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c15 {
+  .c16 {
     font-size: 1.125rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:740px) {
-  .c20 {
+  .c21 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c20 {
+  .c21 {
     font-size: 1.125rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:740px) {
-  .c25 {
+  .c26 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c25 {
+  .c26 {
     font-size: 1.125rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:1150px) {
-  .c9 {
+  .c10 {
     width: 72px;
   }
 }
@@ -463,29 +467,30 @@ exports[`renders correctly 1`] = `
     -webkit-justify-content: start;
     -ms-flex-pack: start;
     justify-content: start;
+    margin: 0 auto 0 0;
   }
 }
 
 @media (min-width:740px) {
   .c4 {
-    width: 48px;
+    margin-right: 1.5rem;
   }
 }
 
 @media (min-width:740px) {
-  .c16 {
+  .c17 {
     max-height: none;
     height: auto;
   }
 
-  .c16 > li a {
+  .c17 > li a {
     display: inline;
     line-height: 24px;
   }
 }
 
 @media (min-width:740px) {
-  .c21 {
+  .c22 {
     max-height: none;
     height: auto;
     -webkit-flex-direction: row;
@@ -496,35 +501,35 @@ exports[`renders correctly 1`] = `
     flex-wrap: wrap;
   }
 
-  .c21 > li a {
+  .c22 > li a {
     display: inline;
     line-height: 24px;
   }
 }
 
 @media (min-width:740px) {
-  .c17 {
+  .c18 {
     height: auto;
     margin-top: 12px;
     padding: 0;
   }
 
-  .c17 a {
+  .c18 a {
     background-color: inherit;
     height: auto;
   }
 
-  .c17 a:after {
+  .c18 a:after {
     content: none !important;
   }
 
-  .c17 a:hover,
-  .c17 a:focus {
+  .c18 a:hover,
+  .c18 a:focus {
     border-bottom: 2px solid #fff;
   }
 
-  .c17 a:hover span,
-  .c17 a:focus span {
+  .c18 a:hover span,
+  .c18 a:focus span {
     border-bottom: 0;
     padding-bottom: 2px;
   }
@@ -535,7 +540,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c22 {
+  .c23 {
     height: auto;
     margin-top: 12px;
     padding: 0;
@@ -544,29 +549,29 @@ exports[`renders correctly 1`] = `
     flex: 0 0 100%;
   }
 
-  .c22 a {
+  .c23 a {
     background-color: inherit;
     height: auto;
   }
 
-  .c22 a:after {
+  .c23 a:after {
     content: none !important;
   }
 
-  .c22 a:hover,
-  .c22 a:focus {
+  .c23 a:hover,
+  .c23 a:focus {
     border-bottom: 2px solid #fff;
   }
 
-  .c22 a:hover span,
-  .c22 a:focus span {
+  .c23 a:hover span,
+  .c23 a:focus span {
     border-bottom: 0;
     padding-bottom: 2px;
   }
 }
 
 @media (min-width:1024px) {
-  .c22 {
+  .c23 {
     -webkit-flex: 0 0 100%;
     -ms-flex: 0 0 100%;
     flex: 0 0 100%;
@@ -574,7 +579,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c13 {
+  .c14 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -590,7 +595,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c14 {
+  .c15 {
     -webkit-flex: 0 0 30%;
     -ms-flex: 0 0 30%;
     flex: 0 0 30%;
@@ -599,7 +604,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c14 {
+  .c15 {
     -webkit-flex: 0 0 calc(25% - 1rem);
     -ms-flex: 0 0 calc(25% - 1rem);
     flex: 0 0 calc(25% - 1rem);
@@ -607,25 +612,25 @@ exports[`renders correctly 1`] = `
     margin-bottom: 1rem;
   }
 
-  .c14 > span {
+  .c15 > span {
     padding: 0;
   }
 }
 
 @media (min-width:740px) {
-  .c14 a {
+  .c15 a {
     font-size: 20px;
     line-height: 40px;
   }
 }
 
 @media (min-width:740px) {
-  .c14 a {
+  .c15 a {
     cursor: default;
     display: inline;
   }
 
-  .c14 a:after {
+  .c15 a:after {
     content: none;
   }
 }
@@ -643,7 +648,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c24 p {
+  .c25 p {
     font-size: 16px;
     line-height: 27px;
   }
@@ -671,7 +676,7 @@ exports[`renders correctly 1`] = `
               className="c4"
             >
               <a
-                className="c5"
+                className="c5 c6"
                 data-test="icon-facebook"
                 href="https://www.facebook.com/comicrelief"
                 rel="noopener noreferrer"
@@ -680,7 +685,7 @@ exports[`renders correctly 1`] = `
               >
                 <img
                   alt="facebook"
-                  className="c6"
+                  className="c7"
                   src="mock.asset"
                 />
               </a>
@@ -689,7 +694,7 @@ exports[`renders correctly 1`] = `
               className="c4"
             >
               <a
-                className="c5"
+                className="c5 c6"
                 data-test="icon-instagram"
                 href="https://www.instagram.com/comicrelief"
                 rel="noopener noreferrer"
@@ -698,7 +703,7 @@ exports[`renders correctly 1`] = `
               >
                 <img
                   alt="instagram"
-                  className="c6"
+                  className="c7"
                   src="mock.asset"
                 />
               </a>
@@ -707,7 +712,7 @@ exports[`renders correctly 1`] = `
               className="c4"
             >
               <a
-                className="c5"
+                className="c5 c6"
                 data-test="icon-twitter"
                 href="https://twitter.com/comicrelief"
                 rel="noopener noreferrer"
@@ -716,7 +721,7 @@ exports[`renders correctly 1`] = `
               >
                 <img
                   alt="twitter"
-                  className="c6"
+                  className="c7"
                   src="mock.asset"
                 />
               </a>
@@ -725,7 +730,7 @@ exports[`renders correctly 1`] = `
               className="c4"
             >
               <a
-                className="c5"
+                className="c5 c6"
                 data-test="icon-youtube"
                 href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
                 rel="noopener noreferrer"
@@ -734,7 +739,7 @@ exports[`renders correctly 1`] = `
               >
                 <img
                   alt="youtube"
-                  className="c6"
+                  className="c7"
                   src="mock.asset"
                 />
               </a>
@@ -742,7 +747,7 @@ exports[`renders correctly 1`] = `
           </ul>
         </div>
         <a
-          className="c7 c8"
+          className="c8 c9"
           color="red"
           href="/"
           target="_self"
@@ -750,12 +755,12 @@ exports[`renders correctly 1`] = `
           type="standard"
         >
           <div
-            className="c9"
+            className="c10"
             rotate={0}
           >
             <img
               alt="Comic Relief logo"
-              className="c10"
+              className="c11"
               src="mock.asset"
             />
           </div>
@@ -763,42 +768,38 @@ exports[`renders correctly 1`] = `
       </div>
       <nav
         aria-label="main-menu"
-        className="c11"
+        className="c12"
         role="navigation"
       >
         <h2
-          className="c12"
-          color="inherit"
+          className="c13"
           id="footer-menu"
-          size="s"
         >
           Footer navigation
         </h2>
         <ul
-          className="c13"
+          className="c14"
           role="menubar"
         >
           <li
-            className="c14"
+            className="c15"
             role="none"
           >
             <span
-              className="c15"
-              color="white"
-              size="s"
+              className="c16"
             >
               Hear from us
             </span>
             <ul
               aria-label="Hear from us"
-              className="c16"
+              className="c17"
               role="list"
             >
               <li
-                className="c17"
+                className="c18"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="https://www.comicrelief.com/#"
                   role="menuitem"
@@ -806,19 +807,17 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     Get the newsletter
                   </span>
                 </a>
               </li>
               <li
-                className="c17"
+                className="c18"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="https://www.comicrelief.com/update-your-preferences"
                   role="menuitem"
@@ -826,9 +825,7 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     How we contact you
                   </span>
@@ -837,26 +834,24 @@ exports[`renders correctly 1`] = `
             </ul>
           </li>
           <li
-            className="c14"
+            className="c15"
             role="none"
           >
             <span
-              className="c15"
-              color="white"
-              size="s"
+              className="c16"
             >
               Get in touch
             </span>
             <ul
               aria-label="Get in touch"
-              className="c21"
+              className="c22"
               role="list"
             >
               <li
-                className="c22"
+                className="c23"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="/contact-us"
                   role="menuitem"
@@ -864,19 +859,17 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     Contact us
                   </span>
                 </a>
               </li>
               <li
-                className="c22"
+                className="c23"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="https://giftaid.comicrelief.com/update"
                   role="menuitem"
@@ -884,19 +877,17 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     Your Gift Aid
                   </span>
                 </a>
               </li>
               <li
-                className="c22"
+                className="c23"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="https://www.comicrelief.com/frequently-asked-questions"
                   role="menuitem"
@@ -904,19 +895,17 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     FAQs
                   </span>
                 </a>
               </li>
               <li
-                className="c22"
+                className="c23"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="https://www.comicrelief.com/red-nose-days-frequently-asked-questions"
                   role="menuitem"
@@ -924,9 +913,7 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     Red Nose Day 2019 FAQs
                   </span>
@@ -935,26 +922,24 @@ exports[`renders correctly 1`] = `
             </ul>
           </li>
           <li
-            className="c14"
+            className="c15"
             role="none"
           >
             <span
-              className="c15"
-              color="white"
-              size="s"
+              className="c16"
             >
               About us
             </span>
             <ul
               aria-label="About us"
-              className="c21"
+              className="c22"
               role="list"
             >
               <li
-                className="c22"
+                className="c23"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="https://www.comicrelief.com/about-comic-relief"
                   role="menuitem"
@@ -962,19 +947,17 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     Mission
                   </span>
                 </a>
               </li>
               <li
-                className="c22"
+                className="c23"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="https://www.comicrelief.com/about-comic-relief/history"
                   role="menuitem"
@@ -982,19 +965,17 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     Our history
                   </span>
                 </a>
               </li>
               <li
-                className="c22"
+                className="c23"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="https://www.comicrelief.com/about-comic-relief/finances"
                   role="menuitem"
@@ -1002,19 +983,17 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     Finances
                   </span>
                 </a>
               </li>
               <li
-                className="c22"
+                className="c23"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="https://www.comicrelief.com/working-with-us"
                   role="menuitem"
@@ -1022,19 +1001,17 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     Partners
                   </span>
                 </a>
               </li>
               <li
-                className="c22"
+                className="c23"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="https://www.comicrelief.com/about-comic-relief/meet-the-team"
                   role="menuitem"
@@ -1042,19 +1019,17 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     Meet the team
                   </span>
                 </a>
               </li>
               <li
-                className="c22"
+                className="c23"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="https://www.sportrelief.com/"
                   role="menuitem"
@@ -1062,9 +1037,7 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     Sport Relief
                   </span>
@@ -1073,26 +1046,24 @@ exports[`renders correctly 1`] = `
             </ul>
           </li>
           <li
-            className="c14"
+            className="c15"
             role="none"
           >
             <span
-              className="c15"
-              color="white"
-              size="s"
+              className="c16"
             >
               Careers
             </span>
             <ul
               aria-label="Careers"
-              className="c16"
+              className="c17"
               role="list"
             >
               <li
-                className="c17"
+                className="c18"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="https://www.comicrelief.com/careers"
                   role="menuitem"
@@ -1100,19 +1071,17 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     Working at Comic Relief
                   </span>
                 </a>
               </li>
               <li
-                className="c17"
+                className="c18"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="https://app.beapplied.com/org/comic-relief"
                   role="menuitem"
@@ -1120,9 +1089,7 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     Open roles
                   </span>
@@ -1131,26 +1098,24 @@ exports[`renders correctly 1`] = `
             </ul>
           </li>
           <li
-            className="c14"
+            className="c15"
             role="none"
           >
             <span
-              className="c15"
-              color="white"
-              size="s"
+              className="c16"
             >
               News
             </span>
             <ul
               aria-label="News"
-              className="c16"
+              className="c17"
               role="list"
             >
               <li
-                className="c17"
+                className="c18"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="https://www.comicrelief.com/news"
                   role="menuitem"
@@ -1158,19 +1123,17 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     News
                   </span>
                 </a>
               </li>
               <li
-                className="c17"
+                className="c18"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="https://www.comicrelief.com/press-releases"
                   role="menuitem"
@@ -1178,9 +1141,7 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     Press area
                   </span>
@@ -1189,26 +1150,24 @@ exports[`renders correctly 1`] = `
             </ul>
           </li>
           <li
-            className="c14"
+            className="c15"
             role="none"
           >
             <span
-              className="c15"
-              color="white"
-              size="s"
+              className="c16"
             >
               Legal
             </span>
             <ul
               aria-label="Legal"
-              className="c16"
+              className="c17"
               role="list"
             >
               <li
-                className="c17"
+                className="c18"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="/homepage"
                   role="menuitem"
@@ -1216,19 +1175,17 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     Link comp with both URL and Ref
                   </span>
                 </a>
               </li>
               <li
-                className="c17"
+                className="c18"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="/this-is-a-test"
                   role="menuitem"
@@ -1236,19 +1193,17 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     Link comp with only Ref
                   </span>
                 </a>
               </li>
               <li
-                className="c17"
+                className="c18"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="https://www.yahoo.com"
                   role="menuitem"
@@ -1256,24 +1211,22 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     Link comp with only URL
                   </span>
                   <span
-                    className="c23"
+                    className="c24"
                   >
                     (opens in new window)
                   </span>
                 </a>
               </li>
               <li
-                className="c17"
+                className="c18"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="https://www.sportrelief.com"
                   role="menuitem"
@@ -1281,19 +1234,17 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     Test allowListed external link
                   </span>
                 </a>
               </li>
               <li
-                className="c17"
+                className="c18"
               >
                 <a
-                  className="c7 c18 c19"
+                  className="c8 c19 c20"
                   color="red"
                   href="https://bing.com"
                   role="menuitem"
@@ -1301,14 +1252,12 @@ exports[`renders correctly 1`] = `
                   type="standard"
                 >
                   <span
-                    className="c20"
-                    color="white"
-                    size="s"
+                    className="c21"
                   >
                     Test non-allowListed external link
                   </span>
                   <span
-                    className="c23"
+                    className="c24"
                   >
                     (opens in new window)
                   </span>
@@ -1319,12 +1268,10 @@ exports[`renders correctly 1`] = `
         </ul>
       </nav>
       <div
-        className="c24"
+        className="c25"
       >
         <p
-          className="c25"
-          color="grey"
-          size="s"
+          className="c26"
         >
           Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414). Registered address: 6th Floor, The White Chapel Building, 10 Whitechapel High Street, London, E1 8QS.
         </p>