@comicrelief/component-library 8.77.6 → 8.78.0

package/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap

@@ -1,6 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`handles data structure correctly 1`] = `
+.c11 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c12 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c15 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -28,20 +42,6 @@ exports[`handles data structure correctly 1`] = `
   text-decoration: none;
 }
 
-.c11 {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.c12 {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
 .c20 {
   height: 4px;
   width: 100%;
@@ -703,6 +703,20 @@ exports[`handles data structure correctly 1`] = `
 `;
 
 exports[`renders 2 columns layout correctly 1`] = `
+.c11 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c12 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c15 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -730,20 +744,6 @@ exports[`renders 2 columns layout correctly 1`] = `
   text-decoration: none;
 }
 
-.c11 {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.c12 {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
 .c20 {
   height: 4px;
   width: 100%;
@@ -1438,6 +1438,20 @@ exports[`renders 2 columns layout correctly 1`] = `
 `;
 
 exports[`renders carousel mode correctly 1`] = `
+.c11 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c12 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c15 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -1465,20 +1479,6 @@ exports[`renders carousel mode correctly 1`] = `
   text-decoration: none;
 }
 
-.c11 {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.c12 {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
 .c20 {
   height: 4px;
   width: 100%;
@@ -2153,6 +2153,20 @@ exports[`renders carousel mode correctly 1`] = `
 `;
 
 exports[`renders correctly with data prop 1`] = `
+.c11 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c12 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c15 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -2180,20 +2194,6 @@ exports[`renders correctly with data prop 1`] = `
   text-decoration: none;
 }
 
-.c11 {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.c12 {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
 .c20 {
   height: 4px;
   width: 100%;

package/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap

@@ -1,6 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly with data prop 1`] = `
+.c9 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c10 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c14 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -28,20 +42,6 @@ exports[`renders correctly with data prop 1`] = `
   text-decoration: none;
 }
 
-.c9 {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.c10 {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
 .c19 {
   height: 4px;
   width: 100%;

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

@@ -1,6 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders Column view correctly 1`] = `
+.c3 {
+  display: block;
+  width: 100%;
+  height: auto;
+  position: relative;
+}
+
+.c4 {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: cover;
+}
+
 .c9 {
   fill: #FFFFFF;
 }
@@ -17,7 +31,8 @@ exports[`renders Column view correctly 1`] = `
   position: relative;
   text-decoration: none;
   transition: all 0.2s;
-  height: 2.5rem;
+  height: auto;
+  min-height: 3rem;
   width: 100%;
   justify-content: center;
   align-items: center;
@@ -40,6 +55,7 @@ exports[`renders Column view correctly 1`] = `
 .c7:focus-within,
 .c7:focus-visible {
   background-color: #890B11;
+  color: #FFFFFF;
   outline-offset: 3px;
 }
 
@@ -48,20 +64,6 @@ exports[`renders Column view correctly 1`] = `
   opacity: 0.5;
 }
 
-.c3 {
-  display: block;
-  width: 100%;
-  height: auto;
-  position: relative;
-}
-
-.c4 {
-  width: 100%;
-  height: auto;
-  display: block;
-  object-fit: cover;
-}
-
 .c0 {
   display: flex;
   position: relative;
@@ -251,6 +253,20 @@ exports[`renders Column view correctly 1`] = `
 `;
 
 exports[`renders correctly 1`] = `
+.c3 {
+  display: block;
+  width: 100%;
+  height: auto;
+  position: relative;
+}
+
+.c4 {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: cover;
+}
+
 .c9 {
   fill: #FFFFFF;
 }
@@ -267,7 +283,8 @@ exports[`renders correctly 1`] = `
   position: relative;
   text-decoration: none;
   transition: all 0.2s;
-  height: 2.5rem;
+  height: auto;
+  min-height: 3rem;
   width: 100%;
   justify-content: center;
   align-items: center;
@@ -290,6 +307,7 @@ exports[`renders correctly 1`] = `
 .c7:focus-within,
 .c7:focus-visible {
   background-color: #890B11;
+  color: #FFFFFF;
   outline-offset: 3px;
 }
 
@@ -298,20 +316,6 @@ exports[`renders correctly 1`] = `
   opacity: 0.5;
 }
 
-.c3 {
-  display: block;
-  width: 100%;
-  height: auto;
-  position: relative;
-}
-
-.c4 {
-  width: 100%;
-  height: auto;
-  display: block;
-  object-fit: cover;
-}
-
 .c0 {
   display: flex;
   position: relative;

package/src/components/Molecules/EmailSignUp/EmailSignUp.style.js

@@ -105,6 +105,8 @@ export const StyledEmailSignUpButton = styled(Button)`
   border-radius: 0.5rem;
   overflow: hidden;
   min-width: max-content;
+  // Customised for this context
+  min-height: 2.25rem;
   width: 100%;
 
   @media ${({ theme }) => theme.breakpoints2026('M')} {

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

@@ -1,6 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
+.c3 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c4 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c8 {
   font-family: 'Anton',Impact,sans-serif;
   font-weight: 400;
@@ -37,20 +51,6 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
   line-height: inherit;
 }
 
-.c3 {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.c4 {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
 .c0 {
   width: 100%;
   height: auto;
@@ -276,6 +276,20 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
 `;
 
 exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
+.c3 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c4 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c8 {
   font-family: 'Anton',Impact,sans-serif;
   font-weight: 400;
@@ -312,20 +326,6 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
   line-height: inherit;
 }
 
-.c3 {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.c4 {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
 .c0 {
   width: 100%;
   height: auto;
@@ -769,34 +769,6 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
 `;
 
 exports[`renders "Text Banner" Hero Banner correctly 2`] = `
-.c8 {
-  font-family: 'Anton',Impact,sans-serif;
-  font-weight: 400;
-  text-transform: uppercase;
-  letter-spacing: 0;
-  font-size: 2rem;
-  line-height: 2rem;
-}
-
-.c8 span {
-  font-size: inherit;
-  line-height: inherit;
-}
-
-.c9 {
-  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-  font-weight: 400;
-  text-transform: inherit;
-  letter-spacing: 0;
-  font-size: 1rem;
-  line-height: 1.25rem;
-}
-
-.c9 span {
-  font-size: inherit;
-  line-height: inherit;
-}
-
 .c3 {
   display: block;
   width: 100%;
@@ -825,6 +797,34 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
   object-fit: contain;
 }
 
+.c8 {
+  font-family: 'Anton',Impact,sans-serif;
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 0;
+  font-size: 2rem;
+  line-height: 2rem;
+}
+
+.c8 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.c9 {
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  text-transform: inherit;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
+}
+
+.c9 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c0 {
   width: 100%;
   height: auto;

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

@@ -17,6 +17,20 @@ it('renders correctly', () => {
   ).toJSON();
 
   expect(tree).toMatchInlineSnapshot(`
+.c2 {
+  display: block;
+  width: 100%;
+  height: auto;
+  position: relative;
+}
+
+.c3 {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: none;
+}
+
 .c4 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -50,20 +64,6 @@ it('renders correctly', () => {
   text-decoration: none;
 }
 
-.c2 {
-  display: block;
-  width: 100%;
-  height: auto;
-  position: relative;
-}
-
-.c3 {
-  width: 100%;
-  height: auto;
-  display: block;
-  object-fit: none;
-}
-
 .c6 {
   border: 0;
   clip: rect(0 0 0 0);

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

@@ -1,6 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders Promo correctly 1`] = `
+.c2 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c3 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c7 {
   font-family: 'Anton',Impact,sans-serif;
   font-weight: 400;
@@ -51,7 +65,8 @@ exports[`renders Promo correctly 1`] = `
   position: relative;
   text-decoration: none;
   transition: all 0.2s;
-  height: 2.5rem;
+  height: auto;
+  min-height: 3rem;
   width: 100%;
   justify-content: center;
   align-items: center;
@@ -74,6 +89,7 @@ exports[`renders Promo correctly 1`] = `
 .c9:focus-within,
 .c9:focus-visible {
   background-color: #E1E2E3;
+  color: #000000;
   outline-offset: 3px;
 }
 
@@ -82,20 +98,6 @@ exports[`renders Promo correctly 1`] = `
   opacity: 0.5;
 }
 
-.c2 {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.c3 {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
 .c0 {
   width: 100%;
   display: flex;
@@ -306,6 +308,20 @@ exports[`renders Promo correctly 1`] = `
 `;
 
 exports[`renders Promo correctly end position 1`] = `
+.c2 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c3 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c7 {
   font-family: 'Anton',Impact,sans-serif;
   font-weight: 400;
@@ -356,7 +372,8 @@ exports[`renders Promo correctly end position 1`] = `
   position: relative;
   text-decoration: none;
   transition: all 0.2s;
-  height: 2.5rem;
+  height: auto;
+  min-height: 3rem;
   width: 100%;
   justify-content: center;
   align-items: center;
@@ -379,6 +396,7 @@ exports[`renders Promo correctly end position 1`] = `
 .c9:focus-within,
 .c9:focus-visible {
   background-color: #E1E2E3;
+  color: #000000;
   outline-offset: 3px;
 }
 
@@ -387,20 +405,6 @@ exports[`renders Promo correctly end position 1`] = `
   opacity: 0.5;
 }
 
-.c2 {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.c3 {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
 .c0 {
   width: 100%;
   display: flex;

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

@@ -38,7 +38,8 @@ exports[`renders a Quote Slice with basic props 1`] = `
   position: relative;
   text-decoration: none;
   transition: all 0.2s;
-  height: 2.5rem;
+  height: auto;
+  min-height: 3rem;
   width: 100%;
   justify-content: center;
   align-items: center;
@@ -61,6 +62,7 @@ exports[`renders a Quote Slice with basic props 1`] = `
 .c8:focus-within,
 .c8:focus-visible {
   background-color: #E1E2E3;
+  color: #000000;
   outline-offset: 3px;
 }