@comicrelief/component-library 8.48.2 → 8.49.0

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;
+  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/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;
+  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/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;
+      min-height: 2.5em;
       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/EmailSignUp/_EmailSignUp.js

@@ -95,7 +95,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

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

@@ -49,15 +49,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-weight: 700;
-  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.5rem;
   width: 100%;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
@@ -69,8 +65,19 @@ exports[`renders correctly 1`] = `
   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: 700;
+  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;
 }
 
 .c15 > a {
@@ -78,9 +85,17 @@ exports[`renders correctly 1`] = `
   text-decoration: none;
 }
 
-.c15:hover {
+.c15:hover,
+.c15:focus,
+.c15:focus-within,
+.c15:focus-visible {
   background-color: #890B11;
-  color: #FFFFFF;
+  outline-offset: 3px;
+}
+
+.c15:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .c8 {
@@ -161,7 +176,7 @@ exports[`renders correctly 1`] = `
 
 .c16:disabled {
   cursor: not-allowed;
-  opacity: 0.75;
+  opacity: 0.5;
 }
 
 .c0 {
@@ -278,6 +293,20 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c15 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c15 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
 @media (min-width:740px) {
   .c15 {
     width: auto;
@@ -287,8 +316,6 @@ exports[`renders correctly 1`] = `
 @media (min-width:1024px) {
   .c15 {
     width: auto;
-    padding: 1rem 2rem;
-    margin: 0 auto 2rem;
   }
 }
 
@@ -478,15 +505,12 @@ exports[`renders correctly 1`] = `
       >
         <button
           className="c15 c16"
+          color="red"
           data-test="subscribe-button"
           disabled={true}
           type="submit"
         >
-          <span
-            className="c4"
-          >
-            Subscribe
-          </span>
+          Subscribe
           <div
             className=""
           />

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

@@ -66,15 +66,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-weight: 700;
-  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.5rem;
   width: 100%;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
@@ -86,8 +82,19 @@ exports[`renders correctly 1`] = `
   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: 700;
+  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;
 }
 
 .c23 > a {
@@ -95,9 +102,17 @@ exports[`renders correctly 1`] = `
   text-decoration: none;
 }
 
-.c23:hover {
-  background-color: #969598;
-  color: #000000;
+.c23:hover,
+.c23:focus,
+.c23:focus-within,
+.c23:focus-visible {
+  background-color: #E1E2E3;
+  outline-offset: 3px;
+}
+
+.c23:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .c15 {
@@ -788,6 +803,20 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c23 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c23 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
 @media (min-width:740px) {
   .c23 {
     width: auto;
@@ -797,8 +826,6 @@ exports[`renders correctly 1`] = `
 @media (min-width:1024px) {
   .c23 {
     width: auto;
-    padding: 1rem 2rem;
-    margin: 0 auto 2rem;
   }
 }
 

package/dist/components/Organisms/Header2025/Header2025.style.js

@@ -51,7 +51,7 @@ const Brand = exports.Brand = _styledComponents.default.div.withConfig({
 const DonateButtonWrapperTop = exports.DonateButtonWrapperTop = _styledComponents.default.div.withConfig({
   displayName: "Header2025style__DonateButtonWrapperTop",
   componentId: "sc-7gs40r-3"
-})(["width:100px;display:flex;justify-content:center;margin-left:5px;height:2.8rem;a{width:100%;height:inherit;transition:width 0.4s cubic-bezier(0.5,1.5,0.5,0.80);&:hover,&:focus{width:100%;box-shadow:rgba(0,0,0,0.1) 0 0 20px 0;}}"]);
+})(["width:100px;display:flex;justify-content:center;margin-left:5px;height:2.8rem;a{width:100%;height:inherit;transition:all 0.3s cubic-bezier(0.5,1.5,0.5,0.80);&:hover,&:focus{width:100%;box-shadow:rgba(0,0,0,0.1) 0 0 20px 0;}}"]);
 const Header2025MetaIcons = exports.Header2025MetaIcons = _styledComponents.default.div.withConfig({
   displayName: "Header2025style__Header2025MetaIcons",
   componentId: "sc-7gs40r-4"

package/dist/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.style.js

@@ -305,7 +305,7 @@ const StyledText = exports.StyledText = (0, _styledComponents.default)(_Text.def
 const DonateButtonWrapperBottom = exports.DonateButtonWrapperBottom = _styledComponents.default.div.withConfig({
   displayName: "HeaderNav2025style__DonateButtonWrapperBottom",
   componentId: "sc-xflhtq-12"
-})(["display:flex;justify-content:center;padding:35px 20px;background-color:inherit;a{width:calc(100% - 10px);transition:width 0.35s cubic-bezier(0.5,1.5,0.5,0.9);&:hover,&:focus{width:100%;box-shadow:rgba(0,0,0,0.1) 0 0 20px 0;}}@media ", "{display:none;}"], _ref43 => {
+})(["display:flex;justify-content:center;padding:35px 20px;background-color:inherit;a{width:calc(100% - 10px);transition:all 0.3s cubic-bezier(0.5,1.5,0.5,0.9);&:hover,&:focus{width:100%;box-shadow:rgba(0,0,0,0.1) 0 0 20px 0;}}@media ", "{display:none;}"], _ref43 => {
   let {
     theme
   } = _ref43;