@comicrelief/component-library 8.44.2 → 8.44.4

package/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap

@@ -21,6 +21,11 @@ exports[`renders correctly 1`] = `
   color: #274084;
 }
 
+.c6 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c8 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -33,6 +38,16 @@ exports[`renders correctly 1`] = `
   line-height: 1.25rem;
 }
 
+.c8 {
+  font-size: 1rem;
+  line-height: normal;
+}
+
+.c8 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c3 {
   display: block;
   width: 100%;
@@ -332,14 +347,11 @@ exports[`renders correctly 1`] = `
   >
     <span
       className="c6 c7"
-      color="blue_dark"
-      size="s"
     >
       Subtitle
     </span>
     <p
       className="c8"
-      color="inherit"
     >
       Whatever you’ve got planned, the Sport Relief shop has everything you need to get you looking your best while you’re raising some cash. Also available in Sainsbury’s stores and online and in selected Argos stores.
     </p>

package/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap

@@ -13,6 +13,11 @@ exports[`renders correctly 1`] = `
   line-height: 1.25rem;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c1 {
   width: 100%;
   position: relative;
@@ -135,7 +140,6 @@ exports[`renders correctly 1`] = `
   >
     <span
       className="c2 c3"
-      color="inherit"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Typeahead test",

package/src/components/Organisms/CookieBanner/CookieBanner.test.js

@@ -35,6 +35,11 @@ it('renders correctly', () => {
       color: #FFFFFF;
     }
 
+    .c1 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c3 {
       position: relative;
       display: inline;
@@ -173,7 +178,6 @@ it('renders correctly', () => {
     >
       <p
         className="c1 c2"
-        color="white"
       >
         Hello! Comic Relief uses cookies to help make this website better and improve our services. You can learn more about
         <a
@@ -189,7 +193,6 @@ it('renders correctly', () => {
       </p>
       <p
         className="c1 c2"
-        color="white"
       >
         <a
           className="c5 c6"

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

@@ -22,6 +22,11 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   color: #FFFFFF;
 }
 
+.c4 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c5 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -40,6 +45,11 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   color: #FFFFFF;
 }
 
+.c5 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c16 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -58,6 +68,11 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   font-weight: bold;
 }
 
+.c16 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c20 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -70,6 +85,11 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   line-height: 1.25rem;
 }
 
+.c20 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c18 {
   width: 100%;
   position: relative;
@@ -645,15 +665,11 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
       >
         <h2
           className="c4"
-          color="white"
-          size="big"
         >
           Donate Now
         </h2>
         <p
           className="c5"
-          color="white"
-          size="m"
         >
           Please help us fund life-changing projects in the UK and around the world.
         </p>
@@ -717,8 +733,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
           >
             <span
               className="c16"
-              color="inherit"
-              size="l"
             >
               Enter an amount to give
             </span>
@@ -732,7 +746,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
             >
               <span
                 className="c20 c21"
-                color="inherit"
                 dangerouslySetInnerHTML={
                   Object {
                     "__html": "£",
@@ -812,6 +825,11 @@ exports[`Monthly donation renders correctly 1`] = `
   color: #FFFFFF;
 }
 
+.c4 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c5 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -830,6 +848,11 @@ exports[`Monthly donation renders correctly 1`] = `
   color: #FFFFFF;
 }
 
+.c5 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c15 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -848,6 +871,11 @@ exports[`Monthly donation renders correctly 1`] = `
   font-weight: bold;
 }
 
+.c15 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c17 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -866,6 +894,11 @@ exports[`Monthly donation renders correctly 1`] = `
   font-weight: 500;
 }
 
+.c17 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c21 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -878,6 +911,11 @@ exports[`Monthly donation renders correctly 1`] = `
   line-height: 1.25rem;
 }
 
+.c21 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c19 {
   width: 100%;
   position: relative;
@@ -1428,15 +1466,11 @@ exports[`Monthly donation renders correctly 1`] = `
       >
         <h2
           className="c4"
-          color="white"
-          size="big"
         >
           Donate Now
         </h2>
         <p
           className="c5"
-          color="white"
-          size="m"
         >
           Please help us fund life-changing projects in the UK and around the world.
         </p>
@@ -1500,8 +1534,6 @@ exports[`Monthly donation renders correctly 1`] = `
           >
             <span
               className="c15"
-              color="inherit"
-              size="l"
             >
               Choose an amount to give
             </span>
@@ -1511,8 +1543,6 @@ exports[`Monthly donation renders correctly 1`] = `
           >
             <span
               className="c17 c18"
-              color="inherit"
-              size="s"
             >
               Other amount
             </span>
@@ -1522,7 +1552,6 @@ exports[`Monthly donation renders correctly 1`] = `
             >
               <span
                 className="c21 c22"
-                color="inherit"
                 dangerouslySetInnerHTML={
                   Object {
                     "__html": "£",
@@ -1601,6 +1630,11 @@ exports[`Single donation renders correctly 1`] = `
   color: #FFFFFF;
 }
 
+.c4 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c5 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -1619,6 +1653,11 @@ exports[`Single donation renders correctly 1`] = `
   color: #FFFFFF;
 }
 
+.c5 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c10 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -1637,6 +1676,11 @@ exports[`Single donation renders correctly 1`] = `
   font-weight: bold;
 }
 
+.c10 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c21 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -1655,6 +1699,11 @@ exports[`Single donation renders correctly 1`] = `
   font-weight: 500;
 }
 
+.c21 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c14 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -1667,6 +1716,11 @@ exports[`Single donation renders correctly 1`] = `
   line-height: 1.25rem;
 }
 
+.c14 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c12 {
   width: 100%;
   position: relative;
@@ -2236,15 +2290,11 @@ exports[`Single donation renders correctly 1`] = `
       >
         <h2
           className="c4"
-          color="white"
-          size="big"
         >
           Donate Now
         </h2>
         <p
           className="c5"
-          color="white"
-          size="m"
         >
           Please help us fund life-changing projects in the UK and around the world.
         </p>
@@ -2265,8 +2315,6 @@ exports[`Single donation renders correctly 1`] = `
           >
             <span
               className="c10"
-              color="inherit"
-              size="l"
             >
               Choose an amount to give
             </span>
@@ -2280,7 +2328,6 @@ exports[`Single donation renders correctly 1`] = `
             >
               <span
                 className="c14 c15"
-                color="inherit"
                 dangerouslySetInnerHTML={
                   Object {
                     "__html": "",
@@ -2317,7 +2364,6 @@ exports[`Single donation renders correctly 1`] = `
             >
               <span
                 className="c14 c15"
-                color="inherit"
                 dangerouslySetInnerHTML={
                   Object {
                     "__html": "",
@@ -2354,7 +2400,6 @@ exports[`Single donation renders correctly 1`] = `
             >
               <span
                 className="c14 c15"
-                color="inherit"
                 dangerouslySetInnerHTML={
                   Object {
                     "__html": "",
@@ -2391,8 +2436,6 @@ exports[`Single donation renders correctly 1`] = `
           >
             <span
               className="c21 c22"
-              color="inherit"
-              size="s"
             >
               Other amount
             </span>
@@ -2402,7 +2445,6 @@ exports[`Single donation renders correctly 1`] = `
             >
               <span
                 className="c14 c15"
-                color="inherit"
                 dangerouslySetInnerHTML={
                   Object {
                     "__html": "£",
@@ -2482,6 +2524,11 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   color: #FFFFFF;
 }
 
+.c4 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c5 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -2500,6 +2547,11 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   color: #FFFFFF;
 }
 
+.c5 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c10 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -2518,6 +2570,11 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   font-weight: bold;
 }
 
+.c10 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c14 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -2530,6 +2587,11 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   line-height: 1.25rem;
 }
 
+.c14 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c12 {
   width: 100%;
   position: relative;
@@ -2955,15 +3017,11 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
       >
         <h2
           className="c4"
-          color="white"
-          size="big"
         >
           Donate Now
         </h2>
         <p
           className="c5"
-          color="white"
-          size="m"
         >
           Please help us fund life-changing projects in the UK and around the world.
         </p>
@@ -2984,8 +3042,6 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
           >
             <span
               className="c10"
-              color="inherit"
-              size="l"
             >
               Overridden via the 'choose amount text' props
             </span>
@@ -2999,7 +3055,6 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
             >
               <span
                 className="c14 c15"
-                color="inherit"
                 dangerouslySetInnerHTML={
                   Object {
                     "__html": "£",

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

@@ -21,6 +21,11 @@ exports[`renders correctly 1`] = `
   text-transform: uppercase;
 }
 
+.c1 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c4 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -33,6 +38,11 @@ exports[`renders correctly 1`] = `
   line-height: 1.25rem;
 }
 
+.c4 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c15 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -332,8 +342,6 @@ exports[`renders correctly 1`] = `
   >
     <h2
       className="c1 c2"
-      color="inherit"
-      size="xxl"
     >
       sign up letter
     </h2>
@@ -342,7 +350,6 @@ exports[`renders correctly 1`] = `
     >
       <span
         className="c4"
-        color="inherit"
       >
         <div
           className="c5"
@@ -366,7 +373,6 @@ exports[`renders correctly 1`] = `
         >
           <span
             className="c4 c10"
-            color="inherit"
             dangerouslySetInnerHTML={
               Object {
                 "__html": "First Name",
@@ -402,7 +408,6 @@ exports[`renders correctly 1`] = `
         >
           <span
             className="c4 c10"
-            color="inherit"
             dangerouslySetInnerHTML={
               Object {
                 "__html": "Last Name",
@@ -439,7 +444,6 @@ exports[`renders correctly 1`] = `
       >
         <span
           className="c4 c10"
-          color="inherit"
           dangerouslySetInnerHTML={
             Object {
               "__html": "Email Address",
@@ -480,7 +484,6 @@ exports[`renders correctly 1`] = `
         >
           <span
             className="c4"
-            color="inherit"
           >
             Subscribe
           </span>
@@ -495,7 +498,6 @@ exports[`renders correctly 1`] = `
     >
       <span
         className="c4"
-        color="inherit"
       >
         <div
           className="c5"