@comicrelief/component-library 8.55.0 → 8.55.1

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

@@ -31,7 +31,7 @@ const handleVariant = variant => {
 const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "HeroBannerstyle__Container",
   componentId: "sc-2ch4eo-0"
-})(["width:100%;height:auto;display:flex;position:relative;flex-direction:column;background:", ";justify-content:center;", ";@media ", "{", " align-items:center;}"], _ref => {
+})(["width:100%;height:auto;display:flex;position:relative;flex-direction:column;background:", ";justify-content:center;", " ", ";@media ", "{", " align-items:center;}"], _ref => {
   let {
     theme,
     pageBackgroundColour
@@ -39,185 +39,191 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
   return theme.color(pageBackgroundColour);
 }, _ref2 => {
   let {
-    variant,
     paddingTop,
     paddingBottom
   } = _ref2;
-  return variant === _variants.default.TEXT_BANNER && (0, _styledComponents.css)(["padding:", " 1rem ", ";@media ", "{padding-left:2rem;padding-right:2rem;}"], paddingTop, paddingBottom, _ref3 => {
+  return (0, _styledComponents.css)(["padding:", " 0 ", ";"], paddingTop, paddingBottom);
+}, _ref3 => {
+  let {
+    variant,
+    paddingTop,
+    paddingBottom
+  } = _ref3;
+  return variant === _variants.default.TEXT_BANNER && (0, _styledComponents.css)(["padding:", " 1rem ", ";@media ", "{padding-left:2rem;padding-right:2rem;}"], paddingTop, paddingBottom, _ref4 => {
     let {
       theme
-    } = _ref3;
+    } = _ref4;
     return theme.breakpoints2026('M');
   });
-}, _ref4 => {
+}, _ref5 => {
   let {
     theme
-  } = _ref4;
+  } = _ref5;
   return theme.breakpoints2026('L');
-}, _ref5 => {
+}, _ref6 => {
   let {
     paddingTop,
     paddingBottom
-  } = _ref5;
+  } = _ref6;
   return (0, _styledComponents.css)(["padding:", " 2rem ", ";"], paddingTop, paddingBottom);
 });
 const OuterWrapper = exports.OuterWrapper = _styledComponents.default.div.withConfig({
   displayName: "HeroBannerstyle__OuterWrapper",
   componentId: "sc-2ch4eo-1"
-})(["width:100%;max-width:none;position:relative;display:flex;flex-direction:column;align-items:center;@media ", "{width:100%;max-width:1500px;border-radius:1rem;overflow:hidden;", ""], _ref6 => {
+})(["width:100%;max-width:none;position:relative;display:flex;flex-direction:column;align-items:center;@media ", "{width:100%;max-width:1500px;border-radius:1rem;overflow:hidden;", ""], _ref7 => {
   let {
     theme
-  } = _ref6;
+  } = _ref7;
   return theme.breakpoints2026('L');
-}, _ref7 => {
+}, _ref8 => {
   let {
     variant
-  } = _ref7;
+  } = _ref8;
   return variant && (0, _styledComponents.css)(["", ""], handleVariant(variant));
 });
 const MediaWrapper = exports.MediaWrapper = _styledComponents.default.div.withConfig({
   displayName: "HeroBannerstyle__MediaWrapper",
   componentId: "sc-2ch4eo-2"
-})(["width:100%;height:100%;@media ", "{position:absolute;top:0;left:0;img{object-position:top center;height:100%;transform:scale(1.02);transition:transform ", "s cubic-bezier(0.68,", ",0.265,", ");", ";}&:has(+ div a:hover){> div > img{transform:scale(1.04);}}}"], _ref8 => {
+})(["width:100%;height:100%;@media ", "{position:absolute;top:0;left:0;img{object-position:top center;height:100%;transform:scale(1.02);transition:transform ", "s cubic-bezier(0.68,", ",0.265,", ");", ";}&:has(+ div a:hover){> div > img{transform:scale(1.04);}}}"], _ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   return theme.breakpoints2026('L');
-}, 0.4, -1.15, 2.35, _ref9 => {
+}, 0.4, -1.15, 2.35, _ref10 => {
   let {
     variant
-  } = _ref9;
+  } = _ref10;
   return variant === _variants.default.HALF_HEIGHT && 'min-height: 450px;';
 });
 const CopyOuterWrapper = exports.CopyOuterWrapper = _styledComponents.default.div.withConfig({
   displayName: "HeroBannerstyle__CopyOuterWrapper",
   componentId: "sc-2ch4eo-3"
-})(["position:relative;height:100%;left:0;right:0;display:flex;width:calc(100% - (2 * 1rem));", " @media ", "{", "}@media ", "{position:relative;top:auto;left:auto;height:100%;width:100%;", " display:flex;align-items:center;margin:0 auto;justify-content:", ";", "}"], _ref10 => {
+})(["position:relative;height:100%;left:0;right:0;display:flex;width:calc(100% - (2 * 1rem));", " @media ", "{", "}@media ", "{position:relative;top:auto;left:auto;height:100%;width:100%;", " display:flex;align-items:center;margin:0 auto;justify-content:", ";", "}"], _ref11 => {
   let {
     variant
-  } = _ref10;
-  return variant !== _variants.default.TEXT_BANNER ? 'margin: -2rem 1rem 2rem;' : 'margin: 0; width: 100%;';
-}, _ref11 => {
-  let {
-    theme
   } = _ref11;
-  return theme.breakpoints2026('M');
+  return variant !== _variants.default.TEXT_BANNER ? 'margin: -2rem 1rem 0;' : 'margin: 0; width: 100%;';
 }, _ref12 => {
   let {
-    variant
+    theme
   } = _ref12;
-  return variant !== _variants.default.TEXT_BANNER ? 'margin: -2rem 2rem 2rem; width: calc(100% - (2 * 2rem));' : 'margin: 0; width: 100%;';
+  return theme.breakpoints2026('M');
 }, _ref13 => {
   let {
-    theme
+    variant
   } = _ref13;
-  return theme.breakpoints2026('L');
+  return variant !== _variants.default.TEXT_BANNER ? 'margin: -2rem 2rem 0rem; width: calc(100% - (2 * 2rem));' : 'margin: 0; width: 100%;';
 }, _ref14 => {
   let {
-    variant
+    theme
   } = _ref14;
-  return variant !== _variants.default.TEXT_BANNER && 'max-width: 1200px;';
+  return theme.breakpoints2026('L');
 }, _ref15 => {
+  let {
+    variant
+  } = _ref15;
+  return variant !== _variants.default.TEXT_BANNER && 'max-width: 1200px;';
+}, _ref16 => {
   let {
     variant,
     copyLeft
-  } = _ref15;
+  } = _ref16;
   if (variant === _variants.default.TEXT_BANNER) return 'center';
   return copyLeft ? 'flex-start' : 'flex-end';
-}, _ref16 => {
+}, _ref17 => {
   let {
     variant
-  } = _ref16;
+  } = _ref17;
   return variant && (0, _styledComponents.css)(["", ""], handleVariant(variant));
 });
 const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   displayName: "HeroBannerstyle__Copy",
   componentId: "sc-2ch4eo-4"
-})(["width:100%;", ";border-radius:1rem;padding:", ";color:", ";box-shadow:rgba(0,0,0,0.15) 0px 0px 1.5rem;background-color:", ";", ";", ";@media ", "{width:", ";}"], (0, _zIndex.default)('low'), _ref17 => {
+})(["width:100%;", ";border-radius:1rem;padding:", ";color:", ";box-shadow:rgba(0,0,0,0.15) 0px 0px 1.5rem;background-color:", ";", ";", ";@media ", "{width:", ";}"], (0, _zIndex.default)('low'), _ref18 => {
   let {
     variant
-  } = _ref17;
+  } = _ref18;
   return variant === _variants.default.TEXT_BANNER ? '3rem 1.5rem' : '1.5rem';
-}, _ref18 => {
+}, _ref19 => {
   let {
     theme,
     copyColour
-  } = _ref18;
+  } = _ref19;
   return theme.color(copyColour);
-}, _ref19 => {
+}, _ref20 => {
   let {
     theme,
     variant,
     textBannerCopyBackgroundColour
-  } = _ref19;
+  } = _ref20;
   return variant === _variants.default.TEXT_BANNER ? theme.color(textBannerCopyBackgroundColour) : theme.color('white');
-}, _ref20 => {
+}, _ref21 => {
   let {
     variant,
     theme
-  } = _ref20;
+  } = _ref21;
   return variant !== _variants.default.TEXT_BANNER && `
     @media ${theme.breakpoints2026('L')} {
       padding: 2rem 2rem 1.75rem;
     }
   `;
-}, _ref21 => {
+}, _ref22 => {
   let {
     variant,
     theme
-  } = _ref21;
+  } = _ref22;
   return variant === _variants.default.TEXT_BANNER && `
     text-align: center;
     @media ${theme.breakpoints2026('M')} {
       padding: 4rem 11%;
     }
   `;
-}, _ref22 => {
+}, _ref23 => {
   let {
     theme
-  } = _ref22;
+  } = _ref23;
   return theme.breakpoints2026('L');
-}, _ref23 => {
+}, _ref24 => {
   let {
     variant
-  } = _ref23;
+  } = _ref24;
   return variant !== _variants.default.TEXT_BANNER ? '92%' : '100%';
 });
 const CopyInnerWrapper = exports.CopyInnerWrapper = _styledComponents.default.div.withConfig({
   displayName: "HeroBannerstyle__CopyInnerWrapper",
   componentId: "sc-2ch4eo-5"
-})(["width:100%;height:100%;display:flex;align-items:center;border-radius:1rem;@media ", "{height:auto;", ";", ";justify-content:", ";}"], _ref24 => {
+})(["width:100%;height:100%;display:flex;align-items:center;border-radius:1rem;@media ", "{height:auto;", ";", ";justify-content:", ";}"], _ref25 => {
   let {
     theme
-  } = _ref24;
+  } = _ref25;
   return theme.breakpoints2026('L');
-}, _ref25 => {
+}, _ref26 => {
   let {
     variant
-  } = _ref25;
+  } = _ref26;
   return variant === _variants.default.TEXT_BANNER ? (0, _styledComponents.css)(["width:100%;"]) : (0, _styledComponents.css)(["width:50%;"]);
-}, _ref26 => {
+}, _ref27 => {
   let {
     variant
-  } = _ref26;
+  } = _ref27;
   return variant === _variants.default.TEXT_BANNER ? (0, _styledComponents.css)(["margin:0;"]) : (0, _styledComponents.css)(["margin:2rem 0;"]);
-}, _ref27 => {
+}, _ref28 => {
   let {
     copyLeft
-  } = _ref27;
+  } = _ref28;
   return copyLeft ? (0, _styledComponents.css)([" flex-end;"]) : (0, _styledComponents.css)([" flex-start;"]);
 });
 const CTAWrapper = exports.CTAWrapper = _styledComponents.default.div.withConfig({
   displayName: "HeroBannerstyle__CTAWrapper",
   componentId: "sc-2ch4eo-6"
-})(["width:100%;height:auto;position:relative;padding:0.5rem 2.5rem 0 0;margin-top:1.25rem;", ""], _ref28 => {
+})(["width:100%;height:auto;position:relative;padding:0.5rem 2.5rem 0 0;margin-top:1.25rem;", ""], _ref29 => {
   let {
     variant
-  } = _ref28;
-  return variant !== _variants.default.TEXT_BANNER && (0, _styledComponents.css)(["span{font-weight:bold;color:", ";}"], _ref29 => {
+  } = _ref29;
+  return variant !== _variants.default.TEXT_BANNER && (0, _styledComponents.css)(["span{font-weight:bold;color:", ";}"], _ref30 => {
     let {
       theme
-    } = _ref29;
+    } = _ref30;
     return theme.color('red');
   });
 });
@@ -236,14 +242,14 @@ const CtaTextUnderline = exports.CtaTextUnderline = _styledComponents.default.im
 const HeroBannerLink = exports.HeroBannerLink = _styledComponents.default.a.withConfig({
   displayName: "HeroBannerstyle__HeroBannerLink",
   componentId: "sc-2ch4eo-10"
-})(["text-decoration:none;width:100%;> div{transition:box-shadow 0.35s;box-shadow:rgba(0,0,0,0.15) 0px 0px 1.5rem;}&:hover{> div{box-shadow:rgba(0,0,0,0.25) 0px 0px 1.5rem;}}@media ", "{", " width:", ";> div{width:100%;}&:hover{img.cta-text-underline{opacity:1;}}}"], _ref30 => {
+})(["text-decoration:none;width:100%;> div{transition:box-shadow 0.35s;box-shadow:rgba(0,0,0,0.15) 0px 0px 1.5rem;}&:hover{> div{box-shadow:rgba(0,0,0,0.25) 0px 0px 1.5rem;}}@media ", "{", " width:", ";> div{width:100%;}&:hover{img.cta-text-underline{opacity:1;}}}"], _ref31 => {
   let {
     theme
-  } = _ref30;
+  } = _ref31;
   return theme.breakpoints2026('L');
-}, (0, _animations.bounceUpAnimation)(true, 10, 2), _ref31 => {
+}, (0, _animations.bounceUpAnimation)(true, 10, 2, true), _ref32 => {
   let {
     variant
-  } = _ref31;
+  } = _ref32;
   return variant !== _variants.default.TEXT_BANNER ? '92%' : '100%';
 });

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

@@ -73,6 +73,7 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  padding: 0rem 0 2rem;
 }
 
 .c1 {
@@ -107,7 +108,7 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
   display: -ms-flexbox;
   display: flex;
   width: calc(100% - (2 * 1rem));
-  margin: -2rem 1rem 2rem;
+  margin: -2rem 1rem 0;
 }
 
 .c7 {
@@ -211,7 +212,7 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
 
 @media (min-width:740px) {
   .c5 {
-    margin: -2rem 2rem 2rem;
+    margin: -2rem 2rem 0rem;
     width: calc(100% - (2 * 2rem));
   }
 }
@@ -394,6 +395,7 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  padding: 0rem 0 2rem;
 }
 
 .c1 {
@@ -428,7 +430,7 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
   display: -ms-flexbox;
   display: flex;
   width: calc(100% - (2 * 1rem));
-  margin: -2rem 1rem 2rem;
+  margin: -2rem 1rem 0;
 }
 
 .c7 {
@@ -532,7 +534,7 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
 
 @media (min-width:740px) {
   .c5 {
-    margin: -2rem 2rem 2rem;
+    margin: -2rem 2rem 0rem;
     width: calc(100% - (2 * 2rem));
   }
 }
@@ -700,6 +702,7 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  padding: 0rem 0 2rem;
   padding: 0rem 1rem 2rem;
 }
 

package/dist/theme/shared/animations.js

@@ -67,18 +67,27 @@ const formFieldInputAnimation = function () {
  * @param {boolean} animateScale - Whether to enable the scale animation
  * @param {number} pixelMovement - Amount of movement to apply on hover
  * @param {number} bounceIntensity - Intensity of the springy bounce effect (0-3, default: 1)
+ * @param {boolean} targetChild - Where to apply the transform
+
  * @returns {css} template literal for the animation
  */
 exports.formFieldInputAnimation = formFieldInputAnimation;
 const bounceUpAnimation = function (animateScale) {
   let pixelMovement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
   let bounceIntensity = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  let targetChild = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   if (!animateScale) {
     return (0, _styledComponents.css)([""]);
   }
   const pullBack = -0.55 - bounceIntensity * 0.3;
   const overshoot = 1.55 + bounceIntensity * 0.4;
   const duration = 0.2 + bounceIntensity * 0.1;
+
+  // The Hero Banner requires us to apply the transform inside
+  // the anchor, in order to address the 'infinity bounce' bug
+  if (targetChild) {
+    return (0, _styledComponents.css)(["> div{transition:transform ", "s cubic-bezier(0.68,", ",0.265,", ");transform-origin:center;}&:hover,&:focus{> div{transform:translateY(-", "px);}}"], duration, pullBack, overshoot, pixelMovement);
+  }
   return (0, _styledComponents.css)(["transition:transform ", "s cubic-bezier(0.68,", ",0.265,", ");transform-origin:center;&:hover,&:focus{transform:translateY(-", "px);}"], duration, pullBack, overshoot, pixelMovement);
 };
 exports.bounceUpAnimation = bounceUpAnimation;

package/package.json

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

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

@@ -30,6 +30,7 @@ const Container = styled.div`
   flex-direction: column;
   background: ${({ theme, pageBackgroundColour }) => theme.color(pageBackgroundColour)}; 
   justify-content: center; 
+  ${({ paddingTop, paddingBottom }) => css`padding: ${paddingTop} 0 ${paddingBottom};`}
 
   ${({ variant, paddingTop, paddingBottom }) => (variant === variants.TEXT_BANNER && css`
     padding: ${paddingTop} 1rem ${paddingBottom};
@@ -100,11 +101,11 @@ const CopyOuterWrapper = styled.div`
   display: flex;
   width: calc(100% - (2 * 1rem)); 
   
-  ${({ variant }) => (variant !== variants.TEXT_BANNER ? 'margin: -2rem 1rem 2rem;' : 'margin: 0; width: 100%;')}
+  ${({ variant }) => (variant !== variants.TEXT_BANNER ? 'margin: -2rem 1rem 0;' : 'margin: 0; width: 100%;')}
 
   @media ${({ theme }) => theme.breakpoints2026('M')} {
     ${({ variant }) => (variant !== variants.TEXT_BANNER
-    ? 'margin: -2rem 2rem 2rem; width: calc(100% - (2 * 2rem));'
+    ? 'margin: -2rem 2rem 0rem; width: calc(100% - (2 * 2rem));'
     : 'margin: 0; width: 100%;')}
   }
 
@@ -237,7 +238,7 @@ const HeroBannerLink = styled.a`
 
   @media ${({ theme }) => theme.breakpoints2026('L')} {
 
-    ${bounceUpAnimation(true, 10, 2)}
+    ${bounceUpAnimation(true, 10, 2, true)}
 
     // As the link is now wrapping the content, it'll take over width duties from 'Copy':
     width: ${({ variant }) => (variant !== variants.TEXT_BANNER ? '92%' : '100%')};

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

@@ -73,6 +73,7 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  padding: 0rem 0 2rem;
 }
 
 .c1 {
@@ -107,7 +108,7 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
   display: -ms-flexbox;
   display: flex;
   width: calc(100% - (2 * 1rem));
-  margin: -2rem 1rem 2rem;
+  margin: -2rem 1rem 0;
 }
 
 .c7 {
@@ -211,7 +212,7 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
 
 @media (min-width:740px) {
   .c5 {
-    margin: -2rem 2rem 2rem;
+    margin: -2rem 2rem 0rem;
     width: calc(100% - (2 * 2rem));
   }
 }
@@ -394,6 +395,7 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  padding: 0rem 0 2rem;
 }
 
 .c1 {
@@ -428,7 +430,7 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
   display: -ms-flexbox;
   display: flex;
   width: calc(100% - (2 * 1rem));
-  margin: -2rem 1rem 2rem;
+  margin: -2rem 1rem 0;
 }
 
 .c7 {
@@ -532,7 +534,7 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
 
 @media (min-width:740px) {
   .c5 {
-    margin: -2rem 2rem 2rem;
+    margin: -2rem 2rem 0rem;
     width: calc(100% - (2 * 2rem));
   }
 }
@@ -700,6 +702,7 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  padding: 0rem 0 2rem;
   padding: 0rem 1rem 2rem;
 }
 

package/src/theme/shared/animations.js

@@ -123,9 +123,14 @@ const formFieldInputAnimation = (shiftPx = 4) => css`
  * @param {boolean} animateScale - Whether to enable the scale animation
  * @param {number} pixelMovement - Amount of movement to apply on hover
  * @param {number} bounceIntensity - Intensity of the springy bounce effect (0-3, default: 1)
+ * @param {boolean} targetChild - Where to apply the transform
+
  * @returns {css} template literal for the animation
  */
-const bounceUpAnimation = (animateScale, pixelMovement = 10, bounceIntensity = 1) => {
+const bounceUpAnimation = (animateScale,
+  pixelMovement = 10,
+  bounceIntensity = 1,
+  targetChild = false) => {
   if (!animateScale) {
     return css``;
   }
@@ -134,6 +139,24 @@ const bounceUpAnimation = (animateScale, pixelMovement = 10, bounceIntensity = 1
   const overshoot = 1.55 + (bounceIntensity * 0.4);
   const duration = 0.2 + (bounceIntensity * 0.1);
 
+  // The Hero Banner requires us to apply the transform inside
+  // the anchor, in order to address the 'infinity bounce' bug
+  if (targetChild) {
+    return css`
+    > div {
+      transition: transform ${duration}s cubic-bezier(0.68, ${pullBack}, 0.265, ${overshoot});
+      transform-origin: center;
+    }
+
+    &:hover,
+    &:focus {
+      > div {
+        transform: translateY(-${pixelMovement}px);
+      }
+    }
+  `;
+  }
+
   return css`
     transition: transform ${duration}s cubic-bezier(0.68, ${pullBack}, 0.265, ${overshoot});
     transform-origin: center;