@comicrelief/component-library 8.48.2 → 8.49.0

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

@@ -33,14 +33,11 @@ exports[`renders Column view correctly 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   position: relative;
-  padding: 0.5rem 1.25rem;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-size: 1rem;
-  border-radius: 2rem;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-  height: 3.125rem;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  min-height: 2.5em;
   width: 100%;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
@@ -50,9 +47,14 @@ exports[`renders Column view correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  border: none;
   cursor: pointer;
+  padding: 0.6rem 1rem;
+  border-radius: 0.5rem;
+  background-color: #E52630;
+  color: #FFFFFF;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-  font-weight: 400;
+  font-weight: 700;
   text-transform: inherit;
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
@@ -60,14 +62,19 @@ exports[`renders Column view correctly 1`] = `
   letter-spacing: 0;
   font-size: 1rem;
   line-height: 1.25rem;
-  font-weight: 700;
-  background-color: #E52630;
-  color: #FFFFFF;
 }
 
-.c7:hover {
+.c7:hover,
+.c7:focus,
+.c7:focus-within,
+.c7:focus-visible {
   background-color: #890B11;
-  color: #FFFFFF;
+  outline-offset: 3px;
+}
+
+.c7:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .c9 {
@@ -158,13 +165,7 @@ exports[`renders Column view correctly 1`] = `
 
 @media (min-width:1024px) {
   .c7 {
-    background-color: #E52630;
-    color: #FFFFFF;
-  }
-
-  .c7:hover {
-    background-color: #890B11;
-    color: #FFFFFF;
+    width: auto;
   }
 }
 
@@ -213,7 +214,7 @@ exports[`renders Column view correctly 1`] = `
   <a
     aria-hidden="true"
     className="c1"
-    data-image-cta-copy="find out more"
+    data-image-cta-copy="Find out more"
     href="/home"
     tabIndex="-1"
     target="_blank"
@@ -252,13 +253,13 @@ exports[`renders Column view correctly 1`] = `
     <a
       className="c7"
       color="red"
-      data-button-cta-copy="find out more"
+      data-button-cta-copy="Find out more"
       href="/home"
       rel={null}
       target="_self"
       type="button"
     >
-      find out more
+      Find out more
       <span
         className="c8"
         type="button"
@@ -314,14 +315,11 @@ exports[`renders correctly 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   position: relative;
-  padding: 0.5rem 1.25rem;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-size: 1rem;
-  border-radius: 2rem;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-  height: 3.125rem;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  min-height: 2.5em;
   width: 100%;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
@@ -331,9 +329,14 @@ exports[`renders correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  border: none;
   cursor: pointer;
+  padding: 0.6rem 1rem;
+  border-radius: 0.5rem;
+  background-color: #E52630;
+  color: #FFFFFF;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-  font-weight: 400;
+  font-weight: 700;
   text-transform: inherit;
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
@@ -341,14 +344,19 @@ exports[`renders correctly 1`] = `
   letter-spacing: 0;
   font-size: 1rem;
   line-height: 1.25rem;
-  font-weight: 700;
-  background-color: #E52630;
-  color: #FFFFFF;
 }
 
-.c7:hover {
+.c7:hover,
+.c7:focus,
+.c7:focus-within,
+.c7:focus-visible {
   background-color: #890B11;
-  color: #FFFFFF;
+  outline-offset: 3px;
+}
+
+.c7:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .c9 {
@@ -439,13 +447,7 @@ exports[`renders correctly 1`] = `
 
 @media (min-width:1024px) {
   .c7 {
-    background-color: #E52630;
-    color: #FFFFFF;
-  }
-
-  .c7:hover {
-    background-color: #890B11;
-    color: #FFFFFF;
+    width: auto;
   }
 }
 

package/src/components/Molecules/Lookup/Lookup.js

@@ -1,22 +1,9 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
 import TextInputWithDropdown from '../../Atoms/TextInputWithDropdown/TextInputWithDropdown';
 import spacing from '../../../theme/shared/spacing';
 import ButtonWithStates from '../../Atoms/ButtonWithStates/ButtonWithStates';
 
-const StyledButton = styled(ButtonWithStates)`${({ theme }) => css`
-  color: ${theme.color('grey_dark')};
-  border: 2px solid ${theme.color('grey_dark')};
-  background-color: ${theme.color('white')};
-  padding-left: ${spacing('lg')};
-  padding-right: ${spacing('lg')};
-  &:hover {
-    color: ${theme.color('grey_dark')};
-    background-color: ${theme.color('white')};
-  }
-`}`;
-
 const KEY_CODE_ENTER = 13;
 
 /**
@@ -114,16 +101,18 @@ const Lookup = ({
         errorMsg={errorMessage}
         dropdownInstruction={dropdownInstruction}
       />
-      <StyledButton
+      <ButtonWithStates
         type="button"
         onClick={() => handler()}
         loading={isSearching}
         disabled={isSearching}
         loadingText="Searching"
         data-test="lookupButton"
+        buttonType="secondary"
+        color="black"
       >
         {buttonText}
-      </StyledButton>
+      </ButtonWithStates>
     </div>
   );
 };

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

@@ -72,14 +72,11 @@ exports[`renders Promo correctly 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   position: relative;
-  padding: 0.5rem 1.25rem;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-size: 1rem;
-  border-radius: 2rem;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-  height: 3.125rem;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  min-height: 2.5em;
   width: 100%;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
@@ -89,9 +86,14 @@ exports[`renders Promo correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  border: none;
   cursor: pointer;
+  padding: 0.6rem 1rem;
+  border-radius: 0.5rem;
+  background-color: #FFFFFF;
+  color: #000000;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-  font-weight: 400;
+  font-weight: 700;
   text-transform: inherit;
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
@@ -99,14 +101,19 @@ exports[`renders Promo correctly 1`] = `
   letter-spacing: 0;
   font-size: 1rem;
   line-height: 1.25rem;
-  font-weight: 700;
-  background-color: #FFFFFF;
-  color: #000000;
 }
 
-.c9:hover {
-  background-color: #969598;
-  color: #000000;
+.c9:hover,
+.c9:focus,
+.c9:focus-within,
+.c9:focus-visible {
+  background-color: #E1E2E3;
+  outline-offset: 3px;
+}
+
+.c9:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .c0 {
@@ -239,13 +246,7 @@ exports[`renders Promo correctly 1`] = `
 
 @media (min-width:1024px) {
   .c9 {
-    background-color: #FFFFFF;
-    color: #000000;
-  }
-
-  .c9:hover {
-    background-color: #969598;
-    color: #000000;
+    width: auto;
   }
 }
 
@@ -421,14 +422,11 @@ exports[`renders Promo correctly end position 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   position: relative;
-  padding: 0.5rem 1.25rem;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-size: 1rem;
-  border-radius: 2rem;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-  height: 3.125rem;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  min-height: 2.5em;
   width: 100%;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
@@ -438,9 +436,14 @@ exports[`renders Promo correctly end position 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  border: none;
   cursor: pointer;
+  padding: 0.6rem 1rem;
+  border-radius: 0.5rem;
+  background-color: #FFFFFF;
+  color: #000000;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-  font-weight: 400;
+  font-weight: 700;
   text-transform: inherit;
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
@@ -448,14 +451,19 @@ exports[`renders Promo correctly end position 1`] = `
   letter-spacing: 0;
   font-size: 1rem;
   line-height: 1.25rem;
-  font-weight: 700;
-  background-color: #FFFFFF;
-  color: #000000;
 }
 
-.c9:hover {
-  background-color: #969598;
-  color: #000000;
+.c9:hover,
+.c9:focus,
+.c9:focus-within,
+.c9:focus-visible {
+  background-color: #E1E2E3;
+  outline-offset: 3px;
+}
+
+.c9:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .c0 {
@@ -591,13 +599,7 @@ exports[`renders Promo correctly end position 1`] = `
 
 @media (min-width:1024px) {
   .c9 {
-    background-color: #FFFFFF;
-    color: #000000;
-  }
-
-  .c9:hover {
-    background-color: #969598;
-    color: #000000;
+    width: auto;
   }
 }
 

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

@@ -264,14 +264,11 @@ exports[`renders Single Message with Image correctly 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   position: relative;
-  padding: 0.5rem 1.25rem;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-size: 1rem;
-  border-radius: 2rem;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-  height: 3.125rem;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  min-height: 2.5em;
   width: 100%;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
@@ -281,9 +278,14 @@ exports[`renders Single Message with Image correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  border: none;
   cursor: pointer;
+  padding: 0.6rem 1rem;
+  border-radius: 0.5rem;
+  background-color: #FFFFFF;
+  color: #000000;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-  font-weight: 400;
+  font-weight: 700;
   text-transform: inherit;
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
@@ -291,14 +293,19 @@ exports[`renders Single Message with Image correctly 1`] = `
   letter-spacing: 0;
   font-size: 1rem;
   line-height: 1.25rem;
-  font-weight: 700;
-  background-color: #FFFFFF;
-  color: #000000;
 }
 
-.c8:hover {
-  background-color: #969598;
-  color: #000000;
+.c8:hover,
+.c8:focus,
+.c8:focus-within,
+.c8:focus-visible {
+  background-color: #E1E2E3;
+  outline-offset: 3px;
+}
+
+.c8:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .c0 {
@@ -392,13 +399,7 @@ exports[`renders Single Message with Image correctly 1`] = `
 
 @media (min-width:1024px) {
   .c8 {
-    background-color: #FFFFFF;
-    color: #000000;
-  }
-
-  .c8:hover {
-    background-color: #969598;
-    color: #000000;
+    width: auto;
   }
 }
 
@@ -824,14 +825,11 @@ exports[`renders Single Message with full width correctly 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   position: relative;
-  padding: 0.5rem 1.25rem;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-size: 1rem;
-  border-radius: 2rem;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-  height: 3.125rem;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  min-height: 2.5em;
   width: 100%;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
@@ -841,9 +839,14 @@ exports[`renders Single Message with full width correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  border: none;
   cursor: pointer;
+  padding: 0.6rem 1rem;
+  border-radius: 0.5rem;
+  background-color: #FFFFFF;
+  color: #000000;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-  font-weight: 400;
+  font-weight: 700;
   text-transform: inherit;
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
@@ -851,14 +854,19 @@ exports[`renders Single Message with full width correctly 1`] = `
   letter-spacing: 0;
   font-size: 1rem;
   line-height: 1.25rem;
-  font-weight: 700;
-  background-color: #FFFFFF;
-  color: #000000;
 }
 
-.c8:hover {
-  background-color: #969598;
-  color: #000000;
+.c8:hover,
+.c8:focus,
+.c8:focus-within,
+.c8:focus-visible {
+  background-color: #E1E2E3;
+  outline-offset: 3px;
+}
+
+.c8:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .c0 {
@@ -952,13 +960,7 @@ exports[`renders Single Message with full width correctly 1`] = `
 
 @media (min-width:1024px) {
   .c8 {
-    background-color: #FFFFFF;
-    color: #000000;
-  }
-
-  .c8:hover {
-    background-color: #969598;
-    color: #000000;
+    width: auto;
   }
 }
 

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

@@ -80,14 +80,11 @@ exports[`renders correctly 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   position: relative;
-  padding: 0.5rem 1.25rem;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-size: 1rem;
-  border-radius: 2rem;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-  height: 3.125rem;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  min-height: 2.5em;
   width: 100%;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
@@ -97,9 +94,14 @@ exports[`renders correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  border: none;
   cursor: pointer;
+  padding: 0.6rem 1rem;
+  border-radius: 0.5rem;
+  background-color: #2042AD;
+  color: #FFFFFF;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-  font-weight: 400;
+  font-weight: 700;
   text-transform: inherit;
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
@@ -107,14 +109,19 @@ exports[`renders correctly 1`] = `
   letter-spacing: 0;
   font-size: 1rem;
   line-height: 1.25rem;
-  font-weight: 700;
-  background-color: #2042AD;
-  color: #FFFFFF;
 }
 
-.c11:hover {
+.c11:hover,
+.c11:focus,
+.c11:focus-within,
+.c11:focus-visible {
   background-color: #274084;
-  color: #FFFFFF;
+  outline-offset: 3px;
+}
+
+.c11:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .c13 {
@@ -249,13 +256,7 @@ exports[`renders correctly 1`] = `
 
 @media (min-width:1024px) {
   .c11 {
-    background-color: #2042AD;
-    color: #FFFFFF;
-  }
-
-  .c11:hover {
-    background-color: #274084;
-    color: #FFFFFF;
+    width: auto;
   }
 }
 

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

@@ -60,14 +60,11 @@ it('renders correctly', () => {
       display: -ms-inline-flexbox;
       display: inline-flex;
       position: relative;
-      padding: 0.5rem 1.25rem;
       -webkit-text-decoration: none;
       text-decoration: none;
-      font-size: 1rem;
-      border-radius: 2rem;
-      -webkit-transition: all 0.3s;
-      transition: all 0.3s;
-      height: 3.125rem;
+      -webkit-transition: all 0.2s;
+      transition: all 0.2s;
+      min-height: 2.5em;
       width: 100%;
       -webkit-box-pack: center;
       -webkit-justify-content: center;
@@ -77,9 +74,14 @@ it('renders correctly', () => {
       -webkit-box-align: center;
       -ms-flex-align: center;
       align-items: center;
+      border: none;
       cursor: pointer;
+      padding: 0.6rem 1rem;
+      border-radius: 0.5rem;
+      background-color: #FFFFFF;
+      color: #000000;
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-      font-weight: 400;
+      font-weight: 700;
       text-transform: inherit;
       -webkit-letter-spacing: 0;
       -moz-letter-spacing: 0;
@@ -87,14 +89,19 @@ it('renders correctly', () => {
       letter-spacing: 0;
       font-size: 1rem;
       line-height: 1.25rem;
-      font-weight: 700;
-      background-color: #FFFFFF;
-      color: #000000;
     }
 
-    .c5:hover {
-      background-color: #969598;
-      color: #000000;
+    .c5:hover,
+    .c5:focus,
+    .c5:focus-within,
+    .c5:focus-visible {
+      background-color: #E1E2E3;
+      outline-offset: 3px;
+    }
+
+    .c5:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
     }
 
     .c0 {
@@ -168,13 +175,7 @@ it('renders correctly', () => {
 
     @media (min-width:1024px) {
       .c5 {
-        background-color: #FFFFFF;
-        color: #000000;
-      }
-
-      .c5:hover {
-        background-color: #969598;
-        color: #000000;
+        width: auto;
       }
     }
 

package/src/components/Organisms/EmailSignUp/_EmailSignUp.js

@@ -106,7 +106,7 @@ const EmailSignUp = ({
               loadingText="Submitting..."
               data-test="subscribe-button"
             >
-              <Text>{normalisedButtonText}</Text>
+              {normalisedButtonText}
             </ButtonWithStates>
           </ButtonWrapper>
         </FormInner>