@comicrelief/component-library 8.53.0 → 8.53.2

package/dist/components/Molecules/CTA/shared/CTACard.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Picture = _interopRequireDefault(require("../../../Atoms/Picture/Picture"));
+var _Link = _interopRequireDefault(require("../../../Atoms/Link/Link"));
 var _ArrowIcon = _interopRequireDefault(require("./_ArrowIcon"));
 var _alt_cta_underline = _interopRequireDefault(require("../../../../theme/shared/assets/alt_cta_underline.svg"));
 var _CTACard = require("./CTACard.style");
@@ -40,7 +41,7 @@ const CTACard = _ref => {
     isFullWidth: effectiveIsFullWidth,
     columns: columns
   }, /*#__PURE__*/_react.default.createElement(_CTACard.CardLink, Object.assign({
-    as: hasLink ? 'a' : 'div'
+    as: hasLink ? _Link.default : 'div'
   }, hasLink ? {
     href: link,
     target,

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.2",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap

@@ -17,10 +17,12 @@ exports[`handles data structure correctly 1`] = `
           className="CTACardstyle__CardWrapper-sc-si8xx1-6 iSFtcX"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            color="red"
             href="/test"
             rel={null}
-            target="self"
+            target="_self"
+            type="standard"
           >
             <div
               className="CTACardstyle__ImageWrapper-sc-si8xx1-0 etphrL"
@@ -148,10 +150,12 @@ exports[`handles data structure correctly 1`] = `
           className="CTACardstyle__CardWrapper-sc-si8xx1-6 iSFtcX"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            color="red"
             href="/test"
             rel={null}
-            target="self"
+            target="_self"
+            type="standard"
           >
             <div
               className="CTACardstyle__ImageWrapper-sc-si8xx1-0 etphrL"
@@ -233,10 +237,12 @@ exports[`handles data structure correctly 1`] = `
           className="CTACardstyle__CardWrapper-sc-si8xx1-6 iSFtcX"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            color="red"
             href="/test-no-image"
             rel={null}
-            target="self"
+            target="_self"
+            type="standard"
           >
             <div
               className="CTACardstyle__CopyAndLinkSection-sc-si8xx1-7 cCIYkv"
@@ -312,10 +318,12 @@ exports[`renders 2 columns layout correctly 1`] = `
           className="CTACardstyle__CardWrapper-sc-si8xx1-6 gBbrVV"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            color="red"
             href="/test"
             rel={null}
-            target="self"
+            target="_self"
+            type="standard"
           >
             <div
               className="CTACardstyle__ImageWrapper-sc-si8xx1-0 etphrL"
@@ -443,10 +451,12 @@ exports[`renders 2 columns layout correctly 1`] = `
           className="CTACardstyle__CardWrapper-sc-si8xx1-6 gBbrVV"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            color="red"
             href="/test"
             rel={null}
-            target="self"
+            target="_self"
+            type="standard"
           >
             <div
               className="CTACardstyle__ImageWrapper-sc-si8xx1-0 etphrL"
@@ -528,10 +538,12 @@ exports[`renders 2 columns layout correctly 1`] = `
           className="CTACardstyle__CardWrapper-sc-si8xx1-6 gBbrVV"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            color="red"
             href="/test-no-image"
             rel={null}
-            target="self"
+            target="_self"
+            type="standard"
           >
             <div
               className="CTACardstyle__CopyAndLinkSection-sc-si8xx1-7 cCIYkv"
@@ -607,10 +619,12 @@ exports[`renders carousel mode correctly 1`] = `
           className="CTACardstyle__CardWrapper-sc-si8xx1-6 kNLFm"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            color="red"
             href="/test"
             rel={null}
-            target="self"
+            target="_self"
+            type="standard"
           >
             <div
               className="CTACardstyle__ImageWrapper-sc-si8xx1-0 etphrL"
@@ -738,10 +752,12 @@ exports[`renders carousel mode correctly 1`] = `
           className="CTACardstyle__CardWrapper-sc-si8xx1-6 kNLFm"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            color="red"
             href="/test"
             rel={null}
-            target="self"
+            target="_self"
+            type="standard"
           >
             <div
               className="CTACardstyle__ImageWrapper-sc-si8xx1-0 etphrL"
@@ -823,10 +839,12 @@ exports[`renders carousel mode correctly 1`] = `
           className="CTACardstyle__CardWrapper-sc-si8xx1-6 kNLFm"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            color="red"
             href="/test-no-image"
             rel={null}
-            target="self"
+            target="_self"
+            type="standard"
           >
             <div
               className="CTACardstyle__CopyAndLinkSection-sc-si8xx1-7 cCIYkv"
@@ -902,10 +920,12 @@ exports[`renders correctly with data prop 1`] = `
           className="CTACardstyle__CardWrapper-sc-si8xx1-6 kNLFm"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            color="red"
             href="/test"
             rel={null}
-            target="self"
+            target="_self"
+            type="standard"
           >
             <div
               className="CTACardstyle__ImageWrapper-sc-si8xx1-0 etphrL"
@@ -1033,10 +1053,12 @@ exports[`renders correctly with data prop 1`] = `
           className="CTACardstyle__CardWrapper-sc-si8xx1-6 kNLFm"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            color="red"
             href="/test"
             rel={null}
-            target="self"
+            target="_self"
+            type="standard"
           >
             <div
               className="CTACardstyle__ImageWrapper-sc-si8xx1-0 etphrL"
@@ -1118,10 +1140,12 @@ exports[`renders correctly with data prop 1`] = `
           className="CTACardstyle__CardWrapper-sc-si8xx1-6 kNLFm"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-5 jlRIUG"
+            color="red"
             href="/test-no-image"
             rel={null}
-            target="self"
+            target="_self"
+            type="standard"
           >
             <div
               className="CTACardstyle__CopyAndLinkSection-sc-si8xx1-7 cCIYkv"