@comicrelief/component-library 8.51.3 → 8.51.4

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

@@ -90,7 +90,7 @@ const ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div.with
 const StyledEmailSignUpButton = exports.StyledEmailSignUpButton = (0, _styledComponents.default)(_Button.default).withConfig({
   displayName: "EmailSignUpstyle__StyledEmailSignUpButton",
   componentId: "sc-d38yg6-7"
-})(["margin:0;font-family:", ";height:44px;padding:0 ", ";border-radius:0.5rem;overflow:hidden;min-width:max-content;width:100%;max-width:123px;@media ", "{margin:0;}.emailSignUpButtonContent{display:inline-grid;grid-auto-flow:column;grid-template-columns:auto 18px;column-gap:0.5rem;align-items:center;justify-content:center;line-height:1;white-space:nowrap;}.emailSignUpButtonLabel{display:inline-block;font-size:16px;line-height:1;transform:translateX(13px);transition:transform 0.22s ease;will-change:transform;white-space:nowrap;}.emailSignUpButtonArrow{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;opacity:0;transform:translateX(-13px);transition:opacity 0.22s ease,transform 0.22s ease;will-change:transform,opacity;svg{fill:currentColor !important;}}&:hover,&:focus{background-color:", ";color:", ";.emailSignUpButtonLabel{transform:translateX(0);}.emailSignUpButtonArrow{opacity:1;transform:translateX(0);}}"], _ref10 => {
+})(["margin:0;font-family:", ";height:44px;padding:0 ", ";border-radius:0.5rem;overflow:hidden;min-width:max-content;width:100%;@media ", "{margin:0;max-width:123px;}.emailSignUpButtonContent{display:inline-grid;grid-auto-flow:column;grid-template-columns:auto 18px;column-gap:0.5rem;align-items:center;justify-content:center;line-height:1;white-space:nowrap;}.emailSignUpButtonLabel{display:inline-block;font-size:16px;line-height:1;transform:translateX(13px);transition:transform 0.22s ease;will-change:transform;white-space:nowrap;}.emailSignUpButtonArrow{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;opacity:0;transform:translateX(-13px);transition:opacity 0.22s ease,transform 0.22s ease;will-change:transform,opacity;svg{fill:currentColor !important;}}&:hover,&:focus{background-color:", ";color:", ";.emailSignUpButtonLabel{transform:translateX(0);}.emailSignUpButtonArrow{opacity:1;transform:translateX(0);}}"], _ref10 => {
   let {
     theme
   } = _ref10;

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

@@ -34,7 +34,7 @@ const FooterWrapper = exports.FooterWrapper = _styledComponents.default.footer.a
 const InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withConfig({
   displayName: "FooterNewstyle__InnerWrapper",
   componentId: "sc-17mkhu6-1"
-})(["position:relative;display:block;width:100%;height:100%;max-width:1488px;margin:0 auto;padding:0 ", ";@media ", "{padding:0 ", ";}@media ", "{padding:0 9rem;}"], (0, _spacing.default)('md'), _ref4 => {
+})(["position:relative;display:block;width:100%;height:100%;max-width:1424px;margin:0 auto;padding:0 ", ";@media ", "{padding:0 ", ";}@media ", "{padding:0 ", ";}"], (0, _spacing.default)('md'), _ref4 => {
   let {
     theme
   } = _ref4;
@@ -44,7 +44,7 @@ const InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withCo
     theme
   } = _ref5;
   return theme.breakpoints2026('L');
-});
+}, (0, _spacing.default)('xl'));
 const FooterLegalLine = exports.FooterLegalLine = (0, _styledComponents.default)(_Text.default).attrs({
   tag: 'p'
 }).withConfig({

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

@@ -418,7 +418,6 @@ exports[`does not render copyright text when not supplied 1`] = `
   min-width: -moz-max-content;
   min-width: max-content;
   width: 100%;
-  max-width: 123px;
 }
 
 .c24 .emailSignUpButtonContent {
@@ -514,7 +513,7 @@ exports[`does not render copyright text when not supplied 1`] = `
   display: block;
   width: 100%;
   height: 100%;
-  max-width: 1488px;
+  max-width: 1424px;
   margin: 0 auto;
   padding: 0 1rem;
 }
@@ -939,6 +938,7 @@ exports[`does not render copyright text when not supplied 1`] = `
 @media (min-width:740px) {
   .c24 {
     margin: 0;
+    max-width: 123px;
   }
 }
 
@@ -963,7 +963,7 @@ exports[`does not render copyright text when not supplied 1`] = `
 
 @media (min-width:1024px) {
   .c1 {
-    padding: 0 9rem;
+    padding: 0 4rem;
   }
 }
 
@@ -2051,7 +2051,6 @@ exports[`renders correctly 1`] = `
   min-width: -moz-max-content;
   min-width: max-content;
   width: 100%;
-  max-width: 123px;
 }
 
 .c24 .emailSignUpButtonContent {
@@ -2147,7 +2146,7 @@ exports[`renders correctly 1`] = `
   display: block;
   width: 100%;
   height: 100%;
-  max-width: 1488px;
+  max-width: 1424px;
   margin: 0 auto;
   padding: 0 1rem;
 }
@@ -2572,6 +2571,7 @@ exports[`renders correctly 1`] = `
 @media (min-width:740px) {
   .c24 {
     margin: 0;
+    max-width: 123px;
   }
 }
 
@@ -2596,7 +2596,7 @@ exports[`renders correctly 1`] = `
 
 @media (min-width:1024px) {
   .c1 {
-    padding: 0 9rem;
+    padding: 0 4rem;
   }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.51.3",
+  "version": "8.51.4",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

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

@@ -106,10 +106,10 @@ export const StyledEmailSignUpButton = styled(Button)`
   overflow: hidden;
   min-width: max-content;
   width: 100%;
-  max-width: 123px;
 
   @media ${({ theme }) => theme.breakpoints2026('M')} {
     margin: 0;
+    max-width: 123px;
   }
 
   .emailSignUpButtonContent {

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

@@ -25,7 +25,7 @@ const InnerWrapper = styled.div`
   display: block;
   width: 100%;
   height: 100%;
-  max-width: 1488px; // 1200 + 144px padding on each side
+  max-width: 1424px; // 1200 + 64px padding on each side
   margin: 0 auto;
   padding: 0 ${spacing('md')};
 
@@ -34,7 +34,7 @@ const InnerWrapper = styled.div`
   }
 
   @media ${({ theme }) => theme.breakpoints2026('L')} {
-    padding: 0 9rem;
+    padding: 0 ${spacing('xl')};
   }
 `;
 

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

@@ -418,7 +418,6 @@ exports[`does not render copyright text when not supplied 1`] = `
   min-width: -moz-max-content;
   min-width: max-content;
   width: 100%;
-  max-width: 123px;
 }
 
 .c24 .emailSignUpButtonContent {
@@ -514,7 +513,7 @@ exports[`does not render copyright text when not supplied 1`] = `
   display: block;
   width: 100%;
   height: 100%;
-  max-width: 1488px;
+  max-width: 1424px;
   margin: 0 auto;
   padding: 0 1rem;
 }
@@ -939,6 +938,7 @@ exports[`does not render copyright text when not supplied 1`] = `
 @media (min-width:740px) {
   .c24 {
     margin: 0;
+    max-width: 123px;
   }
 }
 
@@ -963,7 +963,7 @@ exports[`does not render copyright text when not supplied 1`] = `
 
 @media (min-width:1024px) {
   .c1 {
-    padding: 0 9rem;
+    padding: 0 4rem;
   }
 }
 
@@ -2051,7 +2051,6 @@ exports[`renders correctly 1`] = `
   min-width: -moz-max-content;
   min-width: max-content;
   width: 100%;
-  max-width: 123px;
 }
 
 .c24 .emailSignUpButtonContent {
@@ -2147,7 +2146,7 @@ exports[`renders correctly 1`] = `
   display: block;
   width: 100%;
   height: 100%;
-  max-width: 1488px;
+  max-width: 1424px;
   margin: 0 auto;
   padding: 0 1rem;
 }
@@ -2572,6 +2571,7 @@ exports[`renders correctly 1`] = `
 @media (min-width:740px) {
   .c24 {
     margin: 0;
+    max-width: 123px;
   }
 }
 
@@ -2596,7 +2596,7 @@ exports[`renders correctly 1`] = `
 
 @media (min-width:1024px) {
   .c1 {
-    padding: 0 9rem;
+    padding: 0 4rem;
   }
 }