@comicrelief/component-library 8.53.0 → 8.53.1

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

@@ -74,7 +74,7 @@ import variants from './_variants';
     imageLow={defaultData.heroBannerImage}
     imageAltText="Image alt text"
     variant={variants.FULL_HEIGHT}
-    ctaText="Register to fundraise but longer"
+    ctaText="Register to fundraise but very very very very long oh it's a big link this one"
     ctaUrl="http://www.comicrelief.com/register"
     ctaNewTab
     copyLeft

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

@@ -133,7 +133,7 @@ const CopyOuterWrapper = exports.CopyOuterWrapper = _styledComponents.default.di
 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'), _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'), _ref17 => {
   let {
     variant
   } = _ref17;
@@ -186,7 +186,7 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
 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:", ";}"], _ref24 => {
+})(["width:100%;height:100%;display:flex;align-items:center;border-radius:1rem;@media ", "{height:auto;", ";", ";justify-content:", ";}"], _ref24 => {
   let {
     theme
   } = _ref24;
@@ -210,7 +210,7 @@ const CopyInnerWrapper = exports.CopyInnerWrapper = _styledComponents.default.di
 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;", ""], _ref28 => {
+})(["width:100%;height:auto;position:relative;padding:0.5rem 2.5rem 0 0;margin-top:1.25rem;", ""], _ref28 => {
   let {
     variant
   } = _ref28;
@@ -236,7 +236,7 @@ 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%;@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;}}}"], _ref30 => {
   let {
     theme
   } = _ref30;

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

@@ -116,6 +116,7 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
   border-radius: 1rem;
   padding: 1.5rem;
   color: #000000;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1.5rem;
   background-color: #FFFFFF;
 }
 
@@ -130,6 +131,7 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  border-radius: 1rem;
 }
 
 @media (min-width:740px) {
@@ -435,6 +437,7 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
   border-radius: 1rem;
   padding: 1.5rem;
   color: #000000;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1.5rem;
   background-color: #FFFFFF;
 }
 
@@ -449,6 +452,7 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  border-radius: 1rem;
 }
 
 @media (min-width:740px) {
@@ -736,6 +740,7 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
   border-radius: 1rem;
   padding: 3rem 1.5rem;
   color: #000000;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1.5rem;
   background-color: #2C0230;
   text-align: center;
 }
@@ -751,6 +756,7 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  border-radius: 1rem;
 }
 
 @media (min-width:740px) {

package/package.json

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

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

@@ -74,7 +74,7 @@ import variants from './_variants';
     imageLow={defaultData.heroBannerImage}
     imageAltText="Image alt text"
     variant={variants.FULL_HEIGHT}
-    ctaText="Register to fundraise but longer"
+    ctaText="Register to fundraise but very very very very long oh it's a big link this one"
     ctaUrl="http://www.comicrelief.com/register"
     ctaNewTab
     copyLeft

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

@@ -136,6 +136,7 @@ const Copy = styled.div`
   border-radius: 1rem;
   padding: ${({ variant }) => (variant === variants.TEXT_BANNER ? '3rem 1.5rem' : '1.5rem')};   
   color: ${({ theme, copyColour }) => theme.color(copyColour)};
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 1.5rem;
 
   background-color: ${({ theme, variant, textBannerCopyBackgroundColour }) => (variant === variants.TEXT_BANNER
     ? theme.color(textBannerCopyBackgroundColour)
@@ -165,6 +166,7 @@ const CopyInnerWrapper = styled.div`
   height: 100%;
   display: flex;
   align-items: center;
+  border-radius: 1rem;
 
   @media ${({ theme }) => theme.breakpoints2026('L')} {
     height: auto;
@@ -184,7 +186,7 @@ const CTAWrapper = styled.div`
   width: 100%;
   height: auto;
   position: relative;
-  padding: 0.5rem 0;
+  padding: 0.5rem 2.5rem 0 0;
   margin-top: 1.25rem;
 
   ${({ variant }) => (variant !== variants.TEXT_BANNER && css`
@@ -221,7 +223,18 @@ const CtaTextUnderline = styled.img`
 const HeroBannerLink = styled.a`
   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 ${({ theme }) => theme.breakpoints2026('L')} {
 
     ${bounceUpAnimation(true, 10, 2)}

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

@@ -116,6 +116,7 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
   border-radius: 1rem;
   padding: 1.5rem;
   color: #000000;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1.5rem;
   background-color: #FFFFFF;
 }
 
@@ -130,6 +131,7 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  border-radius: 1rem;
 }
 
 @media (min-width:740px) {
@@ -435,6 +437,7 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
   border-radius: 1rem;
   padding: 1.5rem;
   color: #000000;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1.5rem;
   background-color: #FFFFFF;
 }
 
@@ -449,6 +452,7 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  border-radius: 1rem;
 }
 
 @media (min-width:740px) {
@@ -736,6 +740,7 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
   border-radius: 1rem;
   padding: 3rem 1.5rem;
   color: #000000;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1.5rem;
   background-color: #2C0230;
   text-align: center;
 }
@@ -751,6 +756,7 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  border-radius: 1rem;
 }
 
 @media (min-width:740px) {