@comicrelief/component-library 8.47.0 → 8.47.2

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

@@ -60,7 +60,8 @@ const HeroBanner = _ref => {
   return /*#__PURE__*/_react.default.createElement(_HeroBanner.Container, {
     pageBackgroundColour: pageBackgroundColour,
     paddingTop: paddingTop,
-    paddingBottom: paddingBottom
+    paddingBottom: paddingBottom,
+    variant: variant
   }, /*#__PURE__*/_react.default.createElement(_HeroBanner.OuterWrapper, {
     variant: variant,
     textBannerCopyBackgroundColour: textBannerCopyBackgroundColour

package/dist/components/Molecules/HeroBanner/HeroBanner.md

@@ -16,6 +16,7 @@ import variants from './_variants';
     imageAltText="Image alt text"
     variant={variants.FULL_HEIGHT}
     copyLeft
+    paddingTop="2rem"
   >
     <Text tag="h1">
       Full Height: Copy Left
@@ -38,7 +39,7 @@ import variants from './_variants';
     paddingTop="2rem"
   >
     <Text tag="h1">
-      Full Height:  Additional Top Padding, Copy Right w/CTA, Same Tab
+      Full Height: Copy Right w/CTA, Same Tab
     </Text>
     <Text tag="p">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -56,6 +57,7 @@ import variants from './_variants';
     ctaUrl="http://www.comicrelief.com/register"
     ctaNewTab
     copyLeft
+    paddingTop="2rem"
   >
     <Text tag="h1">
       Full Height: Copy Left w/CTA, New Tab
@@ -65,6 +67,28 @@ import variants from './_variants';
     </Text>
   </HeroBanner>
 
+    <HeroBanner
+    pageBackgroundColour="teal_light"
+    imageSet={defaultData.heroBannerImage}
+    image={defaultData.heroBannerImage}
+    imageLow={defaultData.heroBannerImage}
+    imageAltText="Image alt text"
+    variant={variants.FULL_HEIGHT}
+    ctaText="Register to fundraise but longer"
+    ctaUrl="http://www.comicrelief.com/register"
+    ctaNewTab
+    copyLeft
+    paddingBottom="0"
+    paddingTop="0"
+  >
+    <Text tag="h1">
+      Full Height: ZERO padding
+    </Text>
+    <Text tag="p">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </Text>
+  </HeroBanner>
+
   <HeroBanner
     pageBackgroundColour="blue_dark"
     imageSet={defaultData.heroBannerImage}
@@ -74,7 +98,7 @@ import variants from './_variants';
     copyLeft={false}
   >
     <Text tag="h1">
-      Full Height: Copy Right (default variant prop value)
+      Full Height: Copy Right (default variant and padding prop values)
     </Text>
     <Text tag="p">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -88,6 +112,7 @@ import variants from './_variants';
     imageLow={defaultData.heroBannerImage}
     imageAltText="Image alt text"
     variant={variants.HALF_HEIGHT}
+    paddingTop="2rem"
   >
     <Text tag="h1">
       Half Height: min height
@@ -120,13 +145,13 @@ import variants from './_variants';
   </HeroBanner>
 
   <HeroBanner
-    pageBackgroundColour="grey_light"
+    pageBackgroundColour="grey"
     textBannerCopyBackgroundColour="deep_violet"
     variant={variants.TEXT_BANNER}
     copyColour="white"
   >
     <Text tag="h1">
-      Responsive Text Banner
+      Responsive Text Banner, default padding
     </Text>
     <Text tag="p">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
@@ -134,7 +159,7 @@ import variants from './_variants';
   </HeroBanner>
 
   <HeroBanner
-    pageBackgroundColour="grey_light"
+    pageBackgroundColour="grey"
     textBannerCopyBackgroundColour="deep_violet"
     variant={variants.TEXT_BANNER}
     ctaUrl="http://www.comicrelief.com/register"
@@ -152,15 +177,17 @@ import variants from './_variants';
   </HeroBanner>
 
   <HeroBanner
-    pageBackgroundColour="grey_light"
+    pageBackgroundColour="grey"
     textBannerCopyBackgroundColour="blue_light"
     variant={variants.TEXT_BANNER}
     textBannerCtaColour="red"
     ctaText="Register"
     ctaUrl="http://www.comicrelief.com/register"
+    paddingTop="2rem"
+    paddingBotton="2rem"
   >
     <Text tag="h1">
-      Responsive Text w/CTA, Same Tab
+      Responsive Text w/CTA, Same Tab, 2rem padding top and bottom
     </Text>
     <Text tag="p">
       Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

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,168 +39,185 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
   return theme.color(pageBackgroundColour);
 }, _ref2 => {
   let {
-    theme
+    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 => {
+    let {
+      theme
+    } = _ref3;
+    return theme.breakpoints2026('M');
+  });
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.breakpoints2026('L');
-}, _ref3 => {
+}, _ref5 => {
   let {
     paddingTop,
     paddingBottom
-  } = _ref3;
+  } = _ref5;
   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;", ""], _ref4 => {
+})(["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 => {
   let {
     theme
-  } = _ref4;
+  } = _ref6;
   return theme.breakpoints2026('L');
-}, _ref5 => {
+}, _ref7 => {
   let {
     variant
-  } = _ref5;
+  } = _ref7;
   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);}}}"], _ref6 => {
+})(["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 => {
   let {
     theme
-  } = _ref6;
+  } = _ref8;
   return theme.breakpoints2026('L');
-}, 0.4, -1.15, 2.35, _ref7 => {
+}, 0.4, -1.15, 2.35, _ref9 => {
   let {
     variant
-  } = _ref7;
+  } = _ref9;
   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 ", "{width:calc(100% - 4rem);}@media ", "{position:relative;top:auto;left:auto;height:100%;width:100%;", " display:flex;align-items:center;margin:0 auto;justify-content:", ";", "}"], _ref8 => {
+})(["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 => {
   let {
     variant
-  } = _ref8;
-  return variant !== _variants.default.TEXT_BANNER ? 'margin: -2rem 1rem 2rem;' : 'margin: 2rem 1rem;';
-}, _ref9 => {
+  } = _ref10;
+  return variant !== _variants.default.TEXT_BANNER ? 'margin: -2rem 1rem 2rem;' : 'margin: 0; width: 100%;';
+}, _ref11 => {
   let {
     theme
-  } = _ref9;
+  } = _ref11;
   return theme.breakpoints2026('M');
-}, _ref10 => {
+}, _ref12 => {
+  let {
+    variant
+  } = _ref12;
+  return variant !== _variants.default.TEXT_BANNER ? 'margin: -2rem 2rem 2rem; width: calc(100% - (2 * 2rem));' : 'margin: 0; width: 100%;';
+}, _ref13 => {
   let {
     theme
-  } = _ref10;
+  } = _ref13;
   return theme.breakpoints2026('L');
-}, _ref11 => {
+}, _ref14 => {
   let {
     variant
-  } = _ref11;
+  } = _ref14;
   return variant !== _variants.default.TEXT_BANNER && 'max-width: 1200px;';
-}, _ref12 => {
+}, _ref15 => {
   let {
     variant,
     copyLeft
-  } = _ref12;
+  } = _ref15;
   if (variant === _variants.default.TEXT_BANNER) return 'center';
   return copyLeft ? 'flex-start' : 'flex-end';
-}, _ref13 => {
+}, _ref16 => {
   let {
     variant
-  } = _ref13;
+  } = _ref16;
   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:", ";background-color:", ";", ";", ";@media ", "{width:", ";}"], (0, _zIndex.default)('low'), _ref14 => {
+})(["width:100%;", ";border-radius:1rem;padding:", ";color:", ";background-color:", ";", ";", ";@media ", "{width:", ";}"], (0, _zIndex.default)('low'), _ref17 => {
   let {
     variant
-  } = _ref14;
+  } = _ref17;
   return variant === _variants.default.TEXT_BANNER ? '3rem 1.5rem' : '1.5rem';
-}, _ref15 => {
+}, _ref18 => {
   let {
     theme,
     copyColour
-  } = _ref15;
+  } = _ref18;
   return theme.color(copyColour);
-}, _ref16 => {
+}, _ref19 => {
   let {
     theme,
     variant,
     textBannerCopyBackgroundColour
-  } = _ref16;
+  } = _ref19;
   return variant === _variants.default.TEXT_BANNER ? theme.color(textBannerCopyBackgroundColour) : theme.color('white');
-}, _ref17 => {
+}, _ref20 => {
   let {
     variant,
     theme
-  } = _ref17;
+  } = _ref20;
   return variant !== _variants.default.TEXT_BANNER && `
     @media ${theme.breakpoints2026('L')} {
       padding: 2rem 2rem 1.75rem;
     }
   `;
-}, _ref18 => {
+}, _ref21 => {
   let {
     variant,
     theme
-  } = _ref18;
+  } = _ref21;
   return variant === _variants.default.TEXT_BANNER && `
     text-align: center;
     @media ${theme.breakpoints2026('M')} {
       padding: 4rem 11%;
     }
   `;
-}, _ref19 => {
+}, _ref22 => {
   let {
     theme
-  } = _ref19;
+  } = _ref22;
   return theme.breakpoints2026('L');
-}, _ref20 => {
+}, _ref23 => {
   let {
     variant
-  } = _ref20;
+  } = _ref23;
   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;@media ", "{height:auto;", ";", ";justify-content:", ";}"], _ref21 => {
+})(["width:100%;height:100%;display:flex;align-items:center;@media ", "{height:auto;", ";", ";justify-content:", ";}"], _ref24 => {
   let {
     theme
-  } = _ref21;
+  } = _ref24;
   return theme.breakpoints2026('L');
-}, _ref22 => {
+}, _ref25 => {
   let {
     variant
-  } = _ref22;
+  } = _ref25;
   return variant === _variants.default.TEXT_BANNER ? (0, _styledComponents.css)(["width:100%;"]) : (0, _styledComponents.css)(["width:50%;"]);
-}, _ref23 => {
+}, _ref26 => {
   let {
     variant
-  } = _ref23;
+  } = _ref26;
   return variant === _variants.default.TEXT_BANNER ? (0, _styledComponents.css)(["margin:0;"]) : (0, _styledComponents.css)(["margin:2rem 0;"]);
-}, _ref24 => {
+}, _ref27 => {
   let {
     copyLeft
-  } = _ref24;
+  } = _ref27;
   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 0;margin-top:1.25rem;", ""], _ref25 => {
+})(["width:100%;height:auto;position:relative;padding:0.5rem 0;margin-top:1.25rem;", ""], _ref28 => {
   let {
     variant
-  } = _ref25;
-  return variant !== _variants.default.TEXT_BANNER && (0, _styledComponents.css)(["span{font-weight:bold;color:", ";}"], _ref26 => {
+  } = _ref28;
+  return variant !== _variants.default.TEXT_BANNER && (0, _styledComponents.css)(["span{font-weight:bold;color:", ";}"], _ref29 => {
     let {
       theme
-    } = _ref26;
+    } = _ref29;
     return theme.color('red');
   });
 });
@@ -219,14 +236,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;@media ", "{", " width:", ";> div{width:100%;}&:hover{img.cta-text-underline{opacity:1;}}}"], _ref27 => {
+})(["text-decoration:none;width:100%;@media ", "{", " width:", ";> div{width:100%;}&:hover{img.cta-text-underline{opacity:1;}}}"], _ref30 => {
   let {
     theme
-  } = _ref27;
+  } = _ref30;
   return theme.breakpoints2026('L');
-}, (0, _animations.bounceUpAnimation)(true, 10, 2), _ref28 => {
+}, (0, _animations.bounceUpAnimation)(true, 10, 2), _ref31 => {
   let {
     variant
-  } = _ref28;
+  } = _ref31;
   return variant !== _variants.default.TEXT_BANNER ? '92%' : '100%';
 });

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

@@ -209,7 +209,8 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
 
 @media (min-width:740px) {
   .c5 {
-    width: calc(100% - 4rem);
+    margin: -2rem 2rem 2rem;
+    width: calc(100% - (2 * 2rem));
   }
 }
 
@@ -527,7 +528,8 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
 
 @media (min-width:740px) {
   .c5 {
-    width: calc(100% - 4rem);
+    margin: -2rem 2rem 2rem;
+    width: calc(100% - (2 * 2rem));
   }
 }
 
@@ -694,6 +696,7 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  padding: 0rem 1rem 2rem;
 }
 
 .c1 {
@@ -723,7 +726,8 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
   display: -ms-flexbox;
   display: flex;
   width: calc(100% - (2 * 1rem));
-  margin: 2rem 1rem;
+  margin: 0;
+  width: 100%;
 }
 
 .c4 {
@@ -777,6 +781,13 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c0 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
 @media (min-width:1024px) {
   .c0 {
     padding: 0rem 2rem 2rem;
@@ -798,7 +809,8 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
 
 @media (min-width:740px) {
   .c2 {
-    width: calc(100% - 4rem);
+    margin: 0;
+    width: 100%;
   }
 }
 

package/package.json

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

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

@@ -88,6 +88,7 @@ const HeroBanner = ({
       pageBackgroundColour={pageBackgroundColour}
       paddingTop={paddingTop}
       paddingBottom={paddingBottom}
+      variant={variant}
     >
 
       <OuterWrapper

package/src/components/Molecules/HeroBanner/HeroBanner.md

@@ -16,6 +16,7 @@ import variants from './_variants';
     imageAltText="Image alt text"
     variant={variants.FULL_HEIGHT}
     copyLeft
+    paddingTop="2rem"
   >
     <Text tag="h1">
       Full Height: Copy Left
@@ -38,7 +39,7 @@ import variants from './_variants';
     paddingTop="2rem"
   >
     <Text tag="h1">
-      Full Height:  Additional Top Padding, Copy Right w/CTA, Same Tab
+      Full Height: Copy Right w/CTA, Same Tab
     </Text>
     <Text tag="p">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -56,6 +57,7 @@ import variants from './_variants';
     ctaUrl="http://www.comicrelief.com/register"
     ctaNewTab
     copyLeft
+    paddingTop="2rem"
   >
     <Text tag="h1">
       Full Height: Copy Left w/CTA, New Tab
@@ -65,6 +67,28 @@ import variants from './_variants';
     </Text>
   </HeroBanner>
 
+    <HeroBanner
+    pageBackgroundColour="teal_light"
+    imageSet={defaultData.heroBannerImage}
+    image={defaultData.heroBannerImage}
+    imageLow={defaultData.heroBannerImage}
+    imageAltText="Image alt text"
+    variant={variants.FULL_HEIGHT}
+    ctaText="Register to fundraise but longer"
+    ctaUrl="http://www.comicrelief.com/register"
+    ctaNewTab
+    copyLeft
+    paddingBottom="0"
+    paddingTop="0"
+  >
+    <Text tag="h1">
+      Full Height: ZERO padding
+    </Text>
+    <Text tag="p">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </Text>
+  </HeroBanner>
+
   <HeroBanner
     pageBackgroundColour="blue_dark"
     imageSet={defaultData.heroBannerImage}
@@ -74,7 +98,7 @@ import variants from './_variants';
     copyLeft={false}
   >
     <Text tag="h1">
-      Full Height: Copy Right (default variant prop value)
+      Full Height: Copy Right (default variant and padding prop values)
     </Text>
     <Text tag="p">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -88,6 +112,7 @@ import variants from './_variants';
     imageLow={defaultData.heroBannerImage}
     imageAltText="Image alt text"
     variant={variants.HALF_HEIGHT}
+    paddingTop="2rem"
   >
     <Text tag="h1">
       Half Height: min height
@@ -120,13 +145,13 @@ import variants from './_variants';
   </HeroBanner>
 
   <HeroBanner
-    pageBackgroundColour="grey_light"
+    pageBackgroundColour="grey"
     textBannerCopyBackgroundColour="deep_violet"
     variant={variants.TEXT_BANNER}
     copyColour="white"
   >
     <Text tag="h1">
-      Responsive Text Banner
+      Responsive Text Banner, default padding
     </Text>
     <Text tag="p">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
@@ -134,7 +159,7 @@ import variants from './_variants';
   </HeroBanner>
 
   <HeroBanner
-    pageBackgroundColour="grey_light"
+    pageBackgroundColour="grey"
     textBannerCopyBackgroundColour="deep_violet"
     variant={variants.TEXT_BANNER}
     ctaUrl="http://www.comicrelief.com/register"
@@ -152,15 +177,17 @@ import variants from './_variants';
   </HeroBanner>
 
   <HeroBanner
-    pageBackgroundColour="grey_light"
+    pageBackgroundColour="grey"
     textBannerCopyBackgroundColour="blue_light"
     variant={variants.TEXT_BANNER}
     textBannerCtaColour="red"
     ctaText="Register"
     ctaUrl="http://www.comicrelief.com/register"
+    paddingTop="2rem"
+    paddingBotton="2rem"
   >
     <Text tag="h1">
-      Responsive Text w/CTA, Same Tab
+      Responsive Text w/CTA, Same Tab, 2rem padding top and bottom
     </Text>
     <Text tag="p">
       Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

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

@@ -31,6 +31,14 @@ const Container = styled.div`
   background: ${({ theme, pageBackgroundColour }) => theme.color(pageBackgroundColour)}; 
   justify-content: center; 
 
+  ${({ variant, paddingTop, paddingBottom }) => (variant === variants.TEXT_BANNER && css`
+    padding: ${paddingTop} 1rem ${paddingBottom};
+
+    @media ${({ theme }) => theme.breakpoints2026('M')} {
+      padding-left: 2rem; padding-right: 2rem;
+    }
+  `)};
+
   @media ${({ theme }) => theme.breakpoints2026('L')} {
     ${({ paddingTop, paddingBottom }) => css`padding: ${paddingTop} 2rem ${paddingBottom};`}
     align-items: center;
@@ -91,11 +99,13 @@ const CopyOuterWrapper = styled.div`
   right: 0;
   display: flex;
   width: calc(100% - (2 * 1rem)); 
-
-  ${({ variant }) => (variant !== variants.TEXT_BANNER ? 'margin: -2rem 1rem 2rem;' : 'margin: 2rem 1rem;')}
+  
+  ${({ variant }) => (variant !== variants.TEXT_BANNER ? 'margin: -2rem 1rem 2rem;' : 'margin: 0; width: 100%;')}
 
   @media ${({ theme }) => theme.breakpoints2026('M')} {
-    width: calc(100% - 4rem); 
+    ${({ variant }) => (variant !== variants.TEXT_BANNER
+    ? 'margin: -2rem 2rem 2rem; width: calc(100% - (2 * 2rem));'
+    : 'margin: 0; width: 100%;')}
   }
 
   @media ${({ theme }) => theme.breakpoints2026('L')} {
@@ -211,6 +221,7 @@ const CtaTextUnderline = styled.img`
 
 const HeroBannerLink = styled.a`
   text-decoration: none;
+  width: 100%;
   
   @media ${({ theme }) => theme.breakpoints2026('L')} {
 

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

@@ -209,7 +209,8 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
 
 @media (min-width:740px) {
   .c5 {
-    width: calc(100% - 4rem);
+    margin: -2rem 2rem 2rem;
+    width: calc(100% - (2 * 2rem));
   }
 }
 
@@ -527,7 +528,8 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
 
 @media (min-width:740px) {
   .c5 {
-    width: calc(100% - 4rem);
+    margin: -2rem 2rem 2rem;
+    width: calc(100% - (2 * 2rem));
   }
 }
 
@@ -694,6 +696,7 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  padding: 0rem 1rem 2rem;
 }
 
 .c1 {
@@ -723,7 +726,8 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
   display: -ms-flexbox;
   display: flex;
   width: calc(100% - (2 * 1rem));
-  margin: 2rem 1rem;
+  margin: 0;
+  width: 100%;
 }
 
 .c4 {
@@ -777,6 +781,13 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c0 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
 @media (min-width:1024px) {
   .c0 {
     padding: 0rem 2rem 2rem;
@@ -798,7 +809,8 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
 
 @media (min-width:740px) {
   .c2 {
-    width: calc(100% - 4rem);
+    margin: 0;
+    width: 100%;
   }
 }