@comicrelief/component-library 8.43.0 → 8.44.0

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

@@ -25,36 +25,64 @@ it('renders article teaser correctly', () => {
 
   expect(tree).toMatchInlineSnapshot(`
     .c3 {
-      color: #222222;
-      font-size: 1rem;
-      line-height: 1rem;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: 400;
       text-transform: inherit;
-      font-weight: bold;
+      -webkit-letter-spacing: 0;
+      -moz-letter-spacing: 0;
+      -ms-letter-spacing: 0;
+      letter-spacing: 0;
+      font-size: 1rem;
+      line-height: 1.25rem;
+    }
+
+    .c3 {
+      font-size: 1rem;
       line-height: normal;
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: bold;
+      color: #222222;
+    }
+
+    .c7 {
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: 700;
+      text-transform: inherit;
+      -webkit-letter-spacing: 0;
+      -moz-letter-spacing: 0;
+      -ms-letter-spacing: 0;
+      letter-spacing: 0;
+      font-size: 1.25rem;
+      line-height: 1.5rem;
     }
 
     .c7 {
       font-size: 2rem;
-      line-height: 2rem;
-      text-transform: uppercase;
+      line-height: normal;
+      font-family: 'Anton',Impact,sans-serif;
       font-weight: normal;
       line-height: 2rem;
-      font-family: 'Anton',Impact,sans-serif;
-      -webkit-letter-spacing: 0.03rem;
-      -moz-letter-spacing: 0.03rem;
-      -ms-letter-spacing: 0.03rem;
-      letter-spacing: 0.03rem;
+      text-transform: uppercase;
     }
 
     .c10 {
-      color: #222222;
-      font-size: 0.75rem;
-      line-height: 0.75rem;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: 400;
       text-transform: inherit;
-      font-weight: normal;
+      -webkit-letter-spacing: 0;
+      -moz-letter-spacing: 0;
+      -ms-letter-spacing: 0;
+      letter-spacing: 0;
+      font-size: 1rem;
+      line-height: 1.25rem;
+    }
+
+    .c10 {
+      font-size: 0.75rem;
       line-height: normal;
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: normal;
+      color: #222222;
     }
 
     .c0 {
@@ -153,6 +181,48 @@ it('renders article teaser correctly', () => {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
+    @media (min-width:740px) {
+      .c3 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c3 {
+        font-size: 1.125rem;
+        line-height: 1.375rem;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c7 {
+        font-size: 1.25rem;
+        line-height: 1.5rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c7 {
+        font-size: 1.375rem;
+        line-height: 1.625rem;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c10 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c10 {
+        font-size: 1.125rem;
+        line-height: 1.375rem;
+      }
+    }
+
     <article
       className="c0"
     >

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

@@ -2,16 +2,38 @@
 
 exports[`renders correctly 1`] = `
 .c2 {
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 700;
+  text-transform: inherit;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 1.25rem;
+  line-height: 1.5rem;
+}
+
+.c2 {
+  font-size: undefined;
+  line-height: normal;
   text-transform: uppercase;
+}
+
+.c3 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  text-transform: inherit;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
 }
 
 .c3 {
   font-size: 1rem;
-  line-height: 1rem;
-  text-transform: inherit;
   line-height: normal;
-  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
 .c4 {
@@ -58,6 +80,34 @@ exports[`renders correctly 1`] = `
   flex-direction: column;
 }
 
+@media (min-width:740px) {
+  .c2 {
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c2 {
+    font-size: 1.375rem;
+    line-height: 1.625rem;
+  }
+}
+
+@media (min-width:740px) {
+  .c3 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c3 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;

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

@@ -18,12 +18,21 @@ it('renders correctly', () => {
 
   expect(tree).toMatchInlineSnapshot(`
     .c4 {
-      color: #FFFFFF;
-      font-size: 0.6875rem;
-      line-height: 0.6875rem;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: 400;
       text-transform: inherit;
+      -webkit-letter-spacing: 0;
+      -moz-letter-spacing: 0;
+      -ms-letter-spacing: 0;
+      letter-spacing: 0;
+      font-size: 1rem;
+      line-height: 1.25rem;
+    }
+
+    .c4 {
+      font-size: 0.6875rem;
       line-height: normal;
-      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      color: #FFFFFF;
     }
 
     .c2 {
@@ -114,6 +123,20 @@ it('renders correctly', () => {
       background-color: #E52630;
     }
 
+    @media (min-width:740px) {
+      .c4 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c4 {
+        font-size: 1.125rem;
+        line-height: 1.375rem;
+      }
+    }
+
     @media (min-width:740px) {
       .c6 {
         font-size: 1rem;

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

@@ -2,27 +2,42 @@
 
 exports[`renders Promo correctly 1`] = `
 .c7 {
-  color: #FFFFFF;
-  font-size: 5rem;
-  line-height: 5rem;
+  font-family: 'Anton',Impact,sans-serif;
+  font-weight: 400;
   text-transform: uppercase;
-  font-weight: normal;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 2rem;
+  line-height: 2rem;
+}
+
+.c7 {
+  font-size: 5rem;
+  line-height: normal;
   font-family: 'Anton',Impact,sans-serif;
-  -webkit-letter-spacing: 0.03rem;
-  -moz-letter-spacing: 0.03rem;
-  -ms-letter-spacing: 0.03rem;
-  letter-spacing: 0.03rem;
+  font-weight: normal;
+  text-transform: uppercase;
+  color: #FFFFFF;
   font-size: 3rem;
   line-height: 3rem;
 }
 
 .c8 {
-  color: #FFFFFF;
-  font-size: 1rem;
-  line-height: 1rem;
-  text-transform: inherit;
-  line-height: normal;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  text-transform: inherit;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
+}
+
+.c8 {
+  color: #FFFFFF;
 }
 
 .c2 {
@@ -137,6 +152,20 @@ exports[`renders Promo correctly 1`] = `
   align-items: center;
 }
 
+@media (min-width:740px) {
+  .c7 {
+    font-size: 2.5rem;
+    line-height: 2.5rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c7 {
+    font-size: 3rem;
+    line-height: 3rem;
+  }
+}
+
 @media (min-width:740px) {
   .c7 {
     font-size: 4rem;
@@ -153,6 +182,20 @@ exports[`renders Promo correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c8 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c8 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
 @media (min-width:740px) {
   .c9 {
     width: auto;
@@ -254,7 +297,6 @@ exports[`renders Promo correctly 1`] = `
         <p
           className="c8"
           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.
         </p>
@@ -277,27 +319,42 @@ exports[`renders Promo correctly 1`] = `
 
 exports[`renders Promo correctly end position 1`] = `
 .c7 {
-  color: #FFFFFF;
-  font-size: 5rem;
-  line-height: 5rem;
+  font-family: 'Anton',Impact,sans-serif;
+  font-weight: 400;
   text-transform: uppercase;
-  font-weight: normal;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 2rem;
+  line-height: 2rem;
+}
+
+.c7 {
+  font-size: 5rem;
+  line-height: normal;
   font-family: 'Anton',Impact,sans-serif;
-  -webkit-letter-spacing: 0.03rem;
-  -moz-letter-spacing: 0.03rem;
-  -ms-letter-spacing: 0.03rem;
-  letter-spacing: 0.03rem;
+  font-weight: normal;
+  text-transform: uppercase;
+  color: #FFFFFF;
   font-size: 3rem;
   line-height: 3rem;
 }
 
 .c8 {
-  color: #FFFFFF;
-  font-size: 1rem;
-  line-height: 1rem;
-  text-transform: inherit;
-  line-height: normal;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  text-transform: inherit;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
+}
+
+.c8 {
+  color: #FFFFFF;
 }
 
 .c2 {
@@ -415,6 +472,20 @@ exports[`renders Promo correctly end position 1`] = `
   align-items: center;
 }
 
+@media (min-width:740px) {
+  .c7 {
+    font-size: 2.5rem;
+    line-height: 2.5rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c7 {
+    font-size: 3rem;
+    line-height: 3rem;
+  }
+}
+
 @media (min-width:740px) {
   .c7 {
     font-size: 4rem;
@@ -431,6 +502,20 @@ exports[`renders Promo correctly end position 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c8 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c8 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
 @media (min-width:740px) {
   .c9 {
     width: auto;
@@ -540,7 +625,6 @@ exports[`renders Promo correctly end position 1`] = `
         <p
           className="c8"
           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.
         </p>

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

@@ -2,11 +2,15 @@
 
 exports[`renders correctly 1`] = `
 .c2 {
-  font-size: 1rem;
-  line-height: 1rem;
-  text-transform: inherit;
-  line-height: normal;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  text-transform: inherit;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
 }
 
 .c1 {
@@ -24,7 +28,15 @@ exports[`renders correctly 1`] = `
 
 .c3 {
   margin-bottom: 0.5rem;
-  font-weight: normal;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  text-transform: inherit;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
 }
 
 .c4 {
@@ -66,7 +78,7 @@ exports[`renders correctly 1`] = `
   border-radius: 0.5rem;
   font-size: inherit;
   z-index: 2;
-  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-family: inherit;
 }
 
 .c6:focus {
@@ -77,6 +89,34 @@ exports[`renders correctly 1`] = `
   position: relative;
 }
 
+@media (min-width:740px) {
+  .c2 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c2 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
+@media (min-width:740px) {
+  .c3 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c3 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
 @media (min-width:740px) {
 
 }
@@ -101,7 +141,6 @@ exports[`renders correctly 1`] = `
           "__html": "Enter the name or postcode of your school or nursery",
         }
       }
-      size="s"
     />
     <div
       className="c4"

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

@@ -16,11 +16,15 @@ it('renders correctly', () => {
 
   expect(tree).toMatchInlineSnapshot(`
     .c6 {
-      font-size: 1rem;
-      line-height: 1rem;
-      text-transform: inherit;
-      line-height: normal;
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: 400;
+      text-transform: inherit;
+      -webkit-letter-spacing: 0;
+      -moz-letter-spacing: 0;
+      -ms-letter-spacing: 0;
+      letter-spacing: 0;
+      font-size: 1rem;
+      line-height: 1.25rem;
     }
 
     .c4 {
@@ -90,7 +94,7 @@ it('renders correctly', () => {
       border-radius: 0.5rem;
       font-size: inherit;
       z-index: 2;
-      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-family: inherit;
     }
 
     .c10:focus {
@@ -133,6 +137,20 @@ it('renders correctly', () => {
       border: 0;
     }
 
+    @media (min-width:740px) {
+      .c6 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c6 {
+        font-size: 1.125rem;
+        line-height: 1.375rem;
+      }
+    }
+
     @media (min-width:740px) {
 
     }
@@ -173,7 +191,6 @@ it('renders correctly', () => {
                     "__html": "Search",
                   }
                 }
-                size="s"
               />
               <div
                 className="c8"