@comicrelief/component-library 8.77.7 → 8.78.0

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

@@ -1,6 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly in minimalist form 1`] = `
+.c4 {
+  display: block;
+  width: 100%;
+  height: auto;
+  position: relative;
+}
+
+.c5 {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: cover;
+}
+
 .c7 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -52,20 +66,6 @@ exports[`renders correctly in minimalist form 1`] = `
   text-decoration: none;
 }
 
-.c4 {
-  display: block;
-  width: 100%;
-  height: auto;
-  position: relative;
-}
-
-.c5 {
-  width: 100%;
-  height: auto;
-  display: block;
-  object-fit: cover;
-}
-
 .c0 {
   width: 100%;
   height: 100%;
@@ -194,6 +194,20 @@ exports[`renders correctly in minimalist form 1`] = `
 `;
 
 exports[`renders correctly with copy 1`] = `
+.c4 {
+  display: block;
+  width: 100%;
+  height: auto;
+  position: relative;
+}
+
+.c5 {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: cover;
+}
+
 .c7 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -264,20 +278,6 @@ exports[`renders correctly with copy 1`] = `
   text-decoration: none;
 }
 
-.c4 {
-  display: block;
-  width: 100%;
-  height: auto;
-  position: relative;
-}
-
-.c5 {
-  width: 100%;
-  height: auto;
-  display: block;
-  object-fit: cover;
-}
-
 .c0 {
   width: 100%;
   height: 100%;
@@ -425,6 +425,20 @@ exports[`renders correctly with copy 1`] = `
 `;
 
 exports[`renders correctly with date 1`] = `
+.c4 {
+  display: block;
+  width: 100%;
+  height: auto;
+  position: relative;
+}
+
+.c5 {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: cover;
+}
+
 .c7 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -476,20 +490,6 @@ exports[`renders correctly with date 1`] = `
   text-decoration: none;
 }
 
-.c4 {
-  display: block;
-  width: 100%;
-  height: auto;
-  position: relative;
-}
-
-.c5 {
-  width: 100%;
-  height: auto;
-  display: block;
-  object-fit: cover;
-}
-
 .c0 {
   width: 100%;
   height: 100%;
@@ -618,6 +618,20 @@ exports[`renders correctly with date 1`] = `
 `;
 
 exports[`renders correctly with date and type 1`] = `
+.c4 {
+  display: block;
+  width: 100%;
+  height: auto;
+  position: relative;
+}
+
+.c5 {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: cover;
+}
+
 .c7 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -669,20 +683,6 @@ exports[`renders correctly with date and type 1`] = `
   text-decoration: none;
 }
 
-.c4 {
-  display: block;
-  width: 100%;
-  height: auto;
-  position: relative;
-}
-
-.c5 {
-  width: 100%;
-  height: auto;
-  display: block;
-  object-fit: cover;
-}
-
 .c0 {
   width: 100%;
   height: 100%;

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

@@ -1,6 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders Single Message with 100% vertical height image correctly 1`] = `
+.c3 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c4 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c6 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -21,20 +35,6 @@ exports[`renders Single Message with 100% vertical height image 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 {
   display: flex;
   position: relative;
@@ -173,6 +173,20 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
 `;
 
 exports[`renders Single Message with Image correctly 1`] = `
+.c3 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c4 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c6 {
   font-family: 'Anton',Impact,sans-serif;
   font-weight: 400;
@@ -218,7 +232,8 @@ exports[`renders Single Message with Image 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;
@@ -241,6 +256,7 @@ exports[`renders Single Message with Image correctly 1`] = `
 .c8:focus-within,
 .c8:focus-visible {
   background-color: #E1E2E3;
+  color: #000000;
   outline-offset: 3px;
 }
 
@@ -249,20 +265,6 @@ exports[`renders Single Message with Image correctly 1`] = `
   opacity: 0.5;
 }
 
-.c3 {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.c4 {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
 .c0 {
   display: flex;
   position: relative;
@@ -446,6 +448,20 @@ exports[`renders Single Message with Image correctly 1`] = `
 `;
 
 exports[`renders Single Message with double image correctly 1`] = `
+.c3 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c4 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c6 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -466,20 +482,6 @@ exports[`renders Single Message with double image 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 {
   display: flex;
   position: relative;
@@ -633,6 +635,20 @@ exports[`renders Single Message with double image correctly 1`] = `
 `;
 
 exports[`renders Single Message with full width correctly 1`] = `
+.c3 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c4 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c6 {
   font-family: 'Anton',Impact,sans-serif;
   font-weight: 400;
@@ -678,7 +694,8 @@ exports[`renders Single Message with full width 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;
@@ -701,6 +718,7 @@ exports[`renders Single Message with full width correctly 1`] = `
 .c8:focus-within,
 .c8:focus-visible {
   background-color: #E1E2E3;
+  color: #000000;
   outline-offset: 3px;
 }
 
@@ -709,20 +727,6 @@ exports[`renders Single Message with full width correctly 1`] = `
   opacity: 0.5;
 }
 
-.c3 {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.c4 {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
 .c0 {
   display: flex;
   position: relative;

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

@@ -1,6 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
+.c3 {
+  display: block;
+  width: 100%;
+  height: auto;
+  position: relative;
+}
+
+.c4 {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: cover;
+}
+
 .c6 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -54,7 +68,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;
@@ -77,6 +92,7 @@ exports[`renders correctly 1`] = `
 .c11:focus-within,
 .c11:focus-visible {
   background-color: #274084;
+  color: #FFFFFF;
   outline-offset: 3px;
 }
 
@@ -85,20 +101,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;
-}
-
 .c13 {
   fill: #FFFFFF;
 }

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

@@ -55,7 +55,8 @@ it('renders correctly', () => {
   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;
@@ -78,6 +79,7 @@ it('renders correctly', () => {
 .c5:focus-within,
 .c5:focus-visible {
   background-color: #E1E2E3;
+  color: #000000;
   outline-offset: 3px;
 }
 

package/src/components/Organisms/DonateBanner/DonateBanner.style.js

@@ -180,8 +180,11 @@ const Button = styled.button`
   color: ${({ theme }) => theme.color('white')};
   font-size: ${({ theme }) => theme.fontSize('s')};
   font-weight: bold;
-  min-height: 44px;
+  height: auto;
+  min-height: 3rem;
   cursor: pointer;
+  padding: 0.6rem 1rem;
+
   background: ${({ theme, $color }) => theme.color($color)};
   text-decoration: none;
   border-radius: 0.5rem;

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

@@ -271,8 +271,10 @@ exports[`Monthly donation renders correctly 1`] = `
   color: #FFFFFF;
   font-size: 1rem;
   font-weight: bold;
-  min-height: 44px;
+  height: auto;
+  min-height: 3rem;
   cursor: pointer;
+  padding: 0.6rem 1rem;
   background: #E52630;
   text-decoration: none;
   border-radius: 0.5rem;
@@ -1055,8 +1057,10 @@ exports[`Single donation renders correctly 1`] = `
   color: #FFFFFF;
   font-size: 1rem;
   font-weight: bold;
-  min-height: 44px;
+  height: auto;
+  min-height: 3rem;
   cursor: pointer;
+  padding: 0.6rem 1rem;
   background: #E52630;
   text-decoration: none;
   border-radius: 0.5rem;
@@ -1706,8 +1710,10 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   color: #FFFFFF;
   font-size: 1rem;
   font-weight: bold;
-  min-height: 44px;
+  height: auto;
+  min-height: 3rem;
   cursor: pointer;
+  padding: 0.6rem 1rem;
   background: #E52630;
   text-decoration: none;
   border-radius: 0.5rem;
@@ -2218,8 +2224,10 @@ exports[`Text-only donate widget renders correctly 1`] = `
   color: #FFFFFF;
   font-size: 1rem;
   font-weight: bold;
-  min-height: 44px;
+  height: auto;
+  min-height: 3rem;
   cursor: pointer;
+  padding: 0.6rem 1rem;
   background: #E52630;
   text-decoration: none;
   border-radius: 0.5rem;

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

@@ -261,6 +261,12 @@ exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
   }
 }
 
+@media (min-width: 1024px) {
+  .c23 {
+    fill: #000000;
+  }
+}
+
 @media (min-width: 1024px) {
   .c11 {
     margin-top: 84px;
@@ -582,9 +588,7 @@ exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
           </span>
           <svg
             className="c23"
-            colour="black"
             height={16}
-            mobileColour={null}
             viewBox="0 0 96 96"
             width={16}
             xmlns="http://www.w3.org/2000/svg"
@@ -797,6 +801,12 @@ exports[`renders an empty Dynamic Gallery with no options set 1`] = `
   }
 }
 
+@media (min-width: 1024px) {
+  .c17 {
+    fill: #000000;
+  }
+}
+
 @media (min-width: 1024px) {
   .c5 {
     margin-top: 84px;
@@ -1001,9 +1011,7 @@ exports[`renders an empty Dynamic Gallery with no options set 1`] = `
           </span>
           <svg
             className="c17"
-            colour="black"
             height={16}
-            mobileColour={null}
             viewBox="0 0 96 96"
             width={16}
             xmlns="http://www.w3.org/2000/svg"

package/src/components/Organisms/EmailBanner/EmailBanner.style.js

@@ -113,13 +113,6 @@ const ButtonWrapper = styled.div`
 
   button {
     width: 100%;
-    min-height: 48px;
-  }
-
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    button {
-      padding: ${spacing('md')} ${spacing('l')};
-    }
   }
 `;