@comicrelief/component-library 8.48.2 → 8.49.1

package/dist/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;
+  height: 2.5rem;
   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;
+  height: 2.5rem;
   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/dist/components/Molecules/SearchResult/SearchResult.js

@@ -93,12 +93,10 @@ const SearchResult = _ref7 => {
     objectFit: "cover",
     alt: alt
   })), /*#__PURE__*/_react.default.createElement(CopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    size: "xs",
-    uppercase: true
+    size: "xs"
   }, `${type ? ` ${type} |` : ''} ${date}`), /*#__PURE__*/_react.default.createElement(Title, {
     size: "xl",
-    tag: "h3",
-    uppercase: true
+    tag: "h3"
   }, title), copy && /*#__PURE__*/_react.default.createElement(_Text.default, {
     size: "m",
     tag: "p"

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

@@ -16,7 +16,6 @@ exports[`renders correctly in minimalist form 1`] = `
 .c7 {
   font-size: 0.75rem;
   line-height: normal;
-  text-transform: uppercase;
 }
 
 .c7 span {
@@ -39,7 +38,6 @@ exports[`renders correctly in minimalist form 1`] = `
 .c8 {
   font-size: 2rem;
   line-height: normal;
-  text-transform: uppercase;
 }
 
 .c8 span {
@@ -236,7 +234,6 @@ exports[`renders correctly with copy 1`] = `
 .c7 {
   font-size: 0.75rem;
   line-height: normal;
-  text-transform: uppercase;
 }
 
 .c7 span {
@@ -259,7 +256,6 @@ exports[`renders correctly with copy 1`] = `
 .c8 {
   font-size: 2rem;
   line-height: normal;
-  text-transform: uppercase;
 }
 
 .c8 span {
@@ -496,7 +492,6 @@ exports[`renders correctly with date 1`] = `
 .c7 {
   font-size: 0.75rem;
   line-height: normal;
-  text-transform: uppercase;
 }
 
 .c7 span {
@@ -519,7 +514,6 @@ exports[`renders correctly with date 1`] = `
 .c8 {
   font-size: 2rem;
   line-height: normal;
-  text-transform: uppercase;
 }
 
 .c8 span {
@@ -716,7 +710,6 @@ exports[`renders correctly with date and type 1`] = `
 .c7 {
   font-size: 0.75rem;
   line-height: normal;
-  text-transform: uppercase;
 }
 
 .c7 span {
@@ -739,7 +732,6 @@ exports[`renders correctly with date and type 1`] = `
 .c8 {
   font-size: 2rem;
   line-height: normal;
-  text-transform: uppercase;
 }
 
 .c8 span {

package/dist/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;
+  height: 2.5rem;
   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;
+  height: 2.5rem;
   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/dist/components/Molecules/SingleMessageDS/SingleMessageDs.style.js

@@ -33,7 +33,7 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
 const Subtitle = exports.Subtitle = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "SingleMessageDsstyle__Subtitle",
   componentId: "sc-s8zd7s-1"
-})(["letter-spacing:0.03em;text-transform:uppercase;"]);
+})(["letter-spacing:0.03em;"]);
 const Image = exports.Image = _styledComponents.default.div.withConfig({
   displayName: "SingleMessageDsstyle__Image",
   componentId: "sc-s8zd7s-2"

package/dist/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;
+  height: 2.5rem;
   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 {
@@ -142,7 +149,6 @@ exports[`renders correctly 1`] = `
   -moz-letter-spacing: 0.03em;
   -ms-letter-spacing: 0.03em;
   letter-spacing: 0.03em;
-  text-transform: uppercase;
 }
 
 .c2 {
@@ -249,13 +255,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/dist/components/Organisms/CookieBanner/CookieBanner.test.js

@@ -59,14 +59,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;
+      height: 2.5rem;
       width: 100%;
       -webkit-box-pack: center;
       -webkit-justify-content: center;
@@ -76,9 +73,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;
@@ -86,14 +88,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 {
@@ -167,13 +174,7 @@ it('renders correctly', () => {
 
     @media (min-width:1024px) {
       .c5 {
-        background-color: #FFFFFF;
-        color: #000000;
-      }
-
-      .c5:hover {
-        background-color: #969598;
-        color: #000000;
+        width: auto;
       }
     }
 

package/dist/components/Organisms/Donate/Donate.js

@@ -114,8 +114,7 @@ const Donate = _ref => {
     color: textColor,
     size: "big",
     family: "Anton",
-    weight: "normal",
-    uppercase: true
+    weight: "normal"
   }, thisTitle), /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
     color: textColor,

package/dist/components/Organisms/Donate/__snapshots__/Donate.test.js.snap

@@ -18,7 +18,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   line-height: normal;
   font-family: 'Anton',Impact,sans-serif;
   font-weight: normal;
-  text-transform: uppercase;
   color: #FFFFFF;
 }
 
@@ -821,7 +820,6 @@ exports[`Monthly donation renders correctly 1`] = `
   line-height: normal;
   font-family: 'Anton',Impact,sans-serif;
   font-weight: normal;
-  text-transform: uppercase;
   color: #FFFFFF;
 }
 
@@ -1626,7 +1624,6 @@ exports[`Single donation renders correctly 1`] = `
   line-height: normal;
   font-family: 'Anton',Impact,sans-serif;
   font-weight: normal;
-  text-transform: uppercase;
   color: #FFFFFF;
 }
 
@@ -2520,7 +2517,6 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   line-height: normal;
   font-family: 'Anton',Impact,sans-serif;
   font-weight: normal;
-  text-transform: uppercase;
   color: #FFFFFF;
 }
 

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

@@ -57,8 +57,7 @@ const EmailSignUp = _ref => {
     tag: "h2",
     size: "xxl",
     weight: "400",
-    family: "Anton",
-    uppercase: true
+    family: "Anton"
   }, title), !isSubmitted ? /*#__PURE__*/_react.default.createElement(_EmailSignUp.TopCopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, topCopy)) : isSubmitSuccessful && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Confetti.default, {
     trigger: isSubmitSuccessful
   }), /*#__PURE__*/_react.default.createElement(_EmailSignUp.TopCopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, successCopy))), !isSubmitSuccessful && /*#__PURE__*/_react.default.createElement(_EmailSignUp.FormInner, null, /*#__PURE__*/_react.default.createElement(_EmailSignUp.NameWrapper, {
@@ -95,7 +94,7 @@ const EmailSignUp = _ref => {
     loading: isSubmitting,
     loadingText: "Submitting...",
     "data-test": "subscribe-button"
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, normalisedButtonText)))), isSubmitted && !isSubmitSuccessful && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, errors.formError !== undefined && /*#__PURE__*/_react.default.createElement(_ErrorText.default, {
+  }, normalisedButtonText))), isSubmitted && !isSubmitSuccessful && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, errors.formError !== undefined && /*#__PURE__*/_react.default.createElement(_ErrorText.default, {
     size: "error"
   }, errors.formError.message)), /*#__PURE__*/_react.default.createElement(_EmailSignUp.PrivacyCopyWrapper, {
     textColour: textColour