@comicrelief/component-library 8.44.2 → 8.44.4

package/src/components/Molecules/Descriptor/Descriptor.test.js

@@ -44,6 +44,11 @@ it('renders article teaser correctly', () => {
       color: #222222;
     }
 
+    .c3 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c7 {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
       font-weight: 700;
@@ -65,6 +70,11 @@ it('renders article teaser correctly', () => {
       text-transform: uppercase;
     }
 
+    .c7 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c10 {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
       font-weight: 400;
@@ -85,6 +95,11 @@ it('renders article teaser correctly', () => {
       color: #222222;
     }
 
+    .c10 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c0 {
       position: relative;
       width: 100%;
@@ -234,8 +249,6 @@ it('renders article teaser correctly', () => {
         >
           <span
             className="c3 c4"
-            color="grey_dark"
-            size="s"
           >
             15/06/2020
           </span>
@@ -261,9 +274,6 @@ it('renders article teaser correctly', () => {
         </div>
         <h3
           className="c7 c8"
-          color="inherit"
-          height="2rem"
-          size="xl"
         >
           Title
         </h3>
@@ -272,29 +282,21 @@ it('renders article teaser correctly', () => {
         >
           <span
             className="c10 c11"
-            color="grey_dark"
-            size="xs"
           >
             tag1
           </span>
           <span
             className="c10 c11"
-            color="grey_dark"
-            size="xs"
           >
             tag2
           </span>
           <span
             className="c10 c11"
-            color="grey_dark"
-            size="xs"
           >
             tag3
           </span>
           <span
             className="c10 c11"
-            color="grey_dark"
-            size="xs"
           >
             tag4
           </span>

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

@@ -19,6 +19,11 @@ exports[`renders correctly 1`] = `
   text-transform: uppercase;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c3 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -36,6 +41,11 @@ exports[`renders correctly 1`] = `
   line-height: normal;
 }
 
+.c3 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c4 {
   position: relative;
   display: inline;
@@ -130,15 +140,11 @@ exports[`renders correctly 1`] = `
   >
     <h3
       className="c2"
-      color="inherit"
-      size="md"
     >
       Project Name
     </h3>
     <p
       className="c3"
-      color="inherit"
-      size="s"
     >
       Hello There
     </p>
@@ -148,15 +154,11 @@ exports[`renders correctly 1`] = `
   >
     <h3
       className="c2"
-      color="inherit"
-      size="md"
     >
       End Date
     </h3>
     <p
       className="c3"
-      color="inherit"
-      size="s"
     >
       1st June 2020
     </p>
@@ -166,15 +168,11 @@ exports[`renders correctly 1`] = `
   >
     <h3
       className="c2"
-      color="inherit"
-      size="md"
     >
       Funding theme
     </h3>
     <p
       className="c3"
-      color="inherit"
-      size="s"
     >
       <a
         className="c4"
@@ -192,15 +190,11 @@ exports[`renders correctly 1`] = `
   >
     <h3
       className="c2"
-      color="inherit"
-      size="md"
     >
       Amount Awarded
     </h3>
     <p
       className="c3"
-      color="inherit"
-      size="s"
     >
       £2,000,000
     </p>
@@ -210,15 +204,11 @@ exports[`renders correctly 1`] = `
   >
     <h3
       className="c2"
-      color="inherit"
-      size="md"
     >
       Start Date
     </h3>
     <p
       className="c3"
-      color="inherit"
-      size="s"
     >
       1st June 2010
     </p>
@@ -228,15 +218,11 @@ exports[`renders correctly 1`] = `
   >
     <h3
       className="c2"
-      color="inherit"
-      size="md"
     >
       Beneficiary Country
     </h3>
     <p
       className="c3"
-      color="inherit"
-      size="s"
     >
       Uk
     </p>

package/src/components/Molecules/PartnerLink/PartnerLink.test.js

@@ -35,6 +35,11 @@ it('renders correctly', () => {
       color: #FFFFFF;
     }
 
+    .c4 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c2 {
       display: block;
       width: 100%;
@@ -170,8 +175,6 @@ it('renders correctly', () => {
       </div>
       <span
         className="c4 c5 c6"
-        color="white"
-        size="xxs"
       >
         Find out more
       </span>

package/src/components/Molecules/Promo/Promo.test.js

@@ -25,7 +25,7 @@ it('renders Promo correctly', () => {
       >
         Curabitur pretium tincidunt lacus
       </Text>
-      <Text tag="p" color="white">
+      <Text tag="p" color="white" size="s">
         Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
         turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
       </Text>
@@ -60,7 +60,7 @@ it('renders Promo correctly end position', () => {
       >
         Curabitur pretium tincidunt lacus
       </Text>
-      <Text tag="p" color="white">
+      <Text tag="p" color="white" size="s">
         Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
         turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
       </Text>

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

@@ -24,6 +24,11 @@ exports[`renders Promo correctly 1`] = `
   line-height: 3rem;
 }
 
+.c7 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c8 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -37,9 +42,16 @@ exports[`renders Promo correctly 1`] = `
 }
 
 .c8 {
+  font-size: 1rem;
+  line-height: normal;
   color: #FFFFFF;
 }
 
+.c8 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c2 {
   display: block;
   width: 100%;
@@ -289,14 +301,11 @@ exports[`renders Promo correctly 1`] = `
       >
         <h1
           className="c7"
-          color="white"
-          size="super"
         >
           Curabitur pretium tincidunt lacus
         </h1>
         <p
           className="c8"
-          color="white"
         >
           Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
         </p>
@@ -341,6 +350,11 @@ exports[`renders Promo correctly end position 1`] = `
   line-height: 3rem;
 }
 
+.c7 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c8 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -354,9 +368,16 @@ exports[`renders Promo correctly end position 1`] = `
 }
 
 .c8 {
+  font-size: 1rem;
+  line-height: normal;
   color: #FFFFFF;
 }
 
+.c8 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c2 {
   display: block;
   width: 100%;
@@ -617,14 +638,11 @@ exports[`renders Promo correctly end position 1`] = `
       >
         <h1
           className="c7"
-          color="white"
-          size="super"
         >
           Curabitur pretium tincidunt lacus
         </h1>
         <p
           className="c8"
-          color="white"
         >
           Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
         </p>

package/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.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": "Enter the name or postcode of your school or nursery",

package/src/components/Molecules/SearchInput/SearchInput.test.js

@@ -27,6 +27,11 @@ it('renders correctly', () => {
       line-height: 1.25rem;
     }
 
+    .c6 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c4 {
       width: 100%;
       position: relative;
@@ -185,7 +190,6 @@ it('renders correctly', () => {
             >
               <span
                 className="c6 c7"
-                color="inherit"
                 dangerouslySetInnerHTML={
                   Object {
                     "__html": "Search",

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

@@ -19,6 +19,11 @@ exports[`renders correctly in minimalist form 1`] = `
   text-transform: uppercase;
 }
 
+.c7 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c8 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 700;
@@ -37,6 +42,11 @@ exports[`renders correctly in minimalist form 1`] = `
   text-transform: uppercase;
 }
 
+.c8 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c4 {
   display: block;
   width: 100%;
@@ -196,15 +206,11 @@ exports[`renders correctly in minimalist form 1`] = `
     >
       <span
         className="c7"
-        color="inherit"
-        size="xs"
       >
          
       </span>
       <h3
         className="c8 c9"
-        color="inherit"
-        size="xl"
       >
         News article
       </h3>
@@ -233,6 +239,11 @@ exports[`renders correctly with copy 1`] = `
   text-transform: uppercase;
 }
 
+.c7 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c8 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 700;
@@ -251,6 +262,11 @@ exports[`renders correctly with copy 1`] = `
   text-transform: uppercase;
 }
 
+.c8 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c10 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -268,6 +284,11 @@ exports[`renders correctly with copy 1`] = `
   line-height: normal;
 }
 
+.c10 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c4 {
   display: block;
   width: 100%;
@@ -441,22 +462,16 @@ exports[`renders correctly with copy 1`] = `
     >
       <span
         className="c7"
-        color="inherit"
-        size="xs"
       >
          
       </span>
       <h3
         className="c8 c9"
-        color="inherit"
-        size="xl"
       >
         News article
       </h3>
       <p
         className="c10"
-        color="inherit"
-        size="m"
       >
         News article copy
       </p>
@@ -484,6 +499,11 @@ exports[`renders correctly with date 1`] = `
   text-transform: uppercase;
 }
 
+.c7 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c8 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 700;
@@ -502,6 +522,11 @@ exports[`renders correctly with date 1`] = `
   text-transform: uppercase;
 }
 
+.c8 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c4 {
   display: block;
   width: 100%;
@@ -661,15 +686,11 @@ exports[`renders correctly with date 1`] = `
     >
       <span
         className="c7"
-        color="inherit"
-        size="xs"
       >
          01 July 2019
       </span>
       <h3
         className="c8 c9"
-        color="inherit"
-        size="xl"
       >
         News article
       </h3>
@@ -698,6 +719,11 @@ exports[`renders correctly with date and type 1`] = `
   text-transform: uppercase;
 }
 
+.c7 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c8 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 700;
@@ -716,6 +742,11 @@ exports[`renders correctly with date and type 1`] = `
   text-transform: uppercase;
 }
 
+.c8 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c4 {
   display: block;
   width: 100%;
@@ -875,15 +906,11 @@ exports[`renders correctly with date and type 1`] = `
     >
       <span
         className="c7"
-        color="inherit"
-        size="xs"
       >
          article | 01 July 2019
       </span>
       <h3
         className="c8 c9"
-        color="inherit"
-        size="xl"
       >
         News article
       </h3>

package/src/components/Molecules/SingleMessage/SingleMessage.test.js

@@ -17,7 +17,7 @@ it('renders Single Message with Image correctly', () => {
       <Text tag="h1" color="white" size="xxl">
         title
       </Text>
-      <Text tag="p" color="white">
+      <Text tag="p" color="white" size="s">
         description
       </Text>
       <Link href="/" type="button" color="white">
@@ -55,7 +55,7 @@ it('renders Single Message with full width correctly', () => {
       <Text tag="h1" color="white" size="xxl">
         title
       </Text>
-      <Text tag="p" color="white">
+      <Text tag="p" color="white" size="s">
         description
       </Text>
       <Link href="/" type="button" color="white">

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

@@ -19,6 +19,11 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
   color: #FFFFFF;
 }
 
+.c6 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c3 {
   display: block;
   width: 100%;
@@ -185,8 +190,6 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
   >
     <p
       className="c6"
-      color="white"
-      size="xxl"
     >
       “The creativity that goes into helping people have a better life is extraordinary.”
     </p>
@@ -213,6 +216,11 @@ exports[`renders Single Message with Image correctly 1`] = `
   color: #FFFFFF;
 }
 
+.c6 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c7 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -226,9 +234,16 @@ exports[`renders Single Message with Image correctly 1`] = `
 }
 
 .c7 {
+  font-size: 1rem;
+  line-height: normal;
   color: #FFFFFF;
 }
 
+.c7 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c3 {
   display: block;
   width: 100%;
@@ -452,14 +467,11 @@ exports[`renders Single Message with Image correctly 1`] = `
   >
     <h1
       className="c6"
-      color="white"
-      size="xxl"
     >
       title
     </h1>
     <p
       className="c7"
-      color="white"
     >
       description
     </p>
@@ -495,6 +507,11 @@ exports[`renders Single Message with double image correctly 1`] = `
   color: #000000;
 }
 
+.c6 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c3 {
   display: block;
   width: 100%;
@@ -710,8 +727,6 @@ exports[`renders Single Message with double image correctly 1`] = `
   >
     <p
       className="c6"
-      color="black"
-      size="xxl"
     >
       “The creativity that goes into helping people have a better life is extraordinary.”
     </p>
@@ -738,6 +753,11 @@ exports[`renders Single Message with full width correctly 1`] = `
   color: #FFFFFF;
 }
 
+.c6 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c7 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -751,9 +771,16 @@ exports[`renders Single Message with full width correctly 1`] = `
 }
 
 .c7 {
+  font-size: 1rem;
+  line-height: normal;
   color: #FFFFFF;
 }
 
+.c7 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c3 {
   display: block;
   width: 100%;
@@ -1000,14 +1027,11 @@ exports[`renders Single Message with full width correctly 1`] = `
   >
     <h1
       className="c6"
-      color="white"
-      size="xxl"
     >
       title
     </h1>
     <p
       className="c7"
-      color="white"
     >
       description
     </p>
@@ -1178,6 +1202,11 @@ exports[`renders Single Message with no Image correctly 1`] = `
   color: #FFFFFF;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1302,8 +1331,6 @@ exports[`renders Single Message with no Image correctly 1`] = `
   >
     <p
       className="c2"
-      color="white"
-      size="xxl"
     >
       “The creativity that goes into helping people have a better life is extraordinary.”
     </p>

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

@@ -23,7 +23,7 @@ it('renders correctly', () => {
       imageLeft
       linkIcon={<Download />}
     >
-      <Text tag="p">
+      <Text tag="p" size="s">
         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.