@comicrelief/component-library 7.22.0 → 7.22.1

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders Promo correctly 1`] = `
-.c6 {
+.c7 {
   color: #FFFFFF;
   font-size: 5rem;
   line-height: 5rem;
@@ -16,7 +16,7 @@ exports[`renders Promo correctly 1`] = `
   line-height: 3rem;
 }
 
-.c7 {
+.c8 {
   color: #FFFFFF;
   font-size: 1rem;
   line-height: 1rem;
@@ -39,7 +39,7 @@ exports[`renders Promo correctly 1`] = `
   object-fit: cover;
 }
 
-.c8 {
+.c9 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -68,7 +68,7 @@ exports[`renders Promo correctly 1`] = `
   color: #000000;
 }
 
-.c8:hover {
+.c9:hover {
   background-color: #969598;
   color: #000000;
 }
@@ -102,13 +102,14 @@ exports[`renders Promo correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  position: relative;
   -webkit-box-pack: end;
   -webkit-justify-content: flex-end;
   -ms-flex-pack: end;
   justify-content: flex-end;
 }
 
-.c5 {
+.c6 {
   width: 100%;
   padding: 1.5rem 1.5rem 4rem;
   z-index: 1;
@@ -123,8 +124,21 @@ exports[`renders Promo correctly 1`] = `
   object-position: center;
 }
 
+.c5 {
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 @media (min-width:740px) {
-  .c6 {
+  .c7 {
     font-size: 4rem;
     line-height: 4rem;
     margin-bottom: 2rem;
@@ -132,7 +146,7 @@ exports[`renders Promo correctly 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c6 {
+  .c7 {
     font-size: 5rem;
     line-height: 5rem;
     margin-bottom: 2rem;
@@ -140,7 +154,7 @@ exports[`renders Promo correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c8 {
+  .c9 {
     width: auto;
   }
 }
@@ -160,23 +174,27 @@ exports[`renders Promo correctly 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c5 {
-    width: 70%;
-    padding: 4rem 1.5rem;
+  .c6 {
+    width: 100%;
+    padding: 8rem 1.5rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c5 {
-    width: 50%;
-    padding: 8rem 1.5rem;
+  .c1 {
+    height: 100%;
+    position: absolute;
   }
 }
 
 @media (min-width:1024px) {
-  .c1 {
-    height: 100%;
+  .c5 {
+    width: 50%;
     position: absolute;
+    top: 0;
+    left: 0;
+    left: auto;
+    right: 0;
   }
 }
 
@@ -211,38 +229,42 @@ exports[`renders Promo correctly 1`] = `
     <div
       className="c5"
     >
-      <h1
+      <div
         className="c6"
-        color="white"
-        size="super"
-      >
-        Curabitur pretium tincidunt lacus
-      </h1>
-      <p
-        className="c7"
-        color="white"
-        size="s"
       >
-        Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
-      </p>
-      <span>
-        <a
+        <h1
+          className="c7"
+          color="white"
+          size="super"
+        >
+          Curabitur pretium tincidunt lacus
+        </h1>
+        <p
           className="c8"
           color="white"
-          href="/"
-          target="_self"
-          type="button"
+          size="s"
         >
-          Show me this
-        </a>
-      </span>
+          Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+        </p>
+        <span>
+          <a
+            className="c9"
+            color="white"
+            href="/"
+            target="_self"
+            type="button"
+          >
+            Show me this
+          </a>
+        </span>
+      </div>
     </div>
   </div>
 </div>
 `;
 
 exports[`renders Promo correctly end position 1`] = `
-.c6 {
+.c7 {
   color: #FFFFFF;
   font-size: 5rem;
   line-height: 5rem;
@@ -257,7 +279,7 @@ exports[`renders Promo correctly end position 1`] = `
   line-height: 3rem;
 }
 
-.c7 {
+.c8 {
   color: #FFFFFF;
   font-size: 1rem;
   line-height: 1rem;
@@ -280,7 +302,7 @@ exports[`renders Promo correctly end position 1`] = `
   object-fit: cover;
 }
 
-.c8 {
+.c9 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -309,7 +331,7 @@ exports[`renders Promo correctly end position 1`] = `
   color: #000000;
 }
 
-.c8:hover {
+.c9:hover {
   background-color: #969598;
   color: #000000;
 }
@@ -346,13 +368,14 @@ exports[`renders Promo correctly end position 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  position: relative;
   -webkit-box-pack: end;
   -webkit-justify-content: flex-end;
   -ms-flex-pack: end;
   justify-content: flex-end;
 }
 
-.c5 {
+.c6 {
   width: 100%;
   padding: 1.5rem 1.5rem 4rem;
   z-index: 1;
@@ -367,8 +390,21 @@ exports[`renders Promo correctly end position 1`] = `
   object-position: center;
 }
 
+.c5 {
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 @media (min-width:740px) {
-  .c6 {
+  .c7 {
     font-size: 4rem;
     line-height: 4rem;
     margin-bottom: 2rem;
@@ -376,7 +412,7 @@ exports[`renders Promo correctly end position 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c6 {
+  .c7 {
     font-size: 5rem;
     line-height: 5rem;
     margin-bottom: 2rem;
@@ -384,7 +420,7 @@ exports[`renders Promo correctly end position 1`] = `
 }
 
 @media (min-width:740px) {
-  .c8 {
+  .c9 {
     width: auto;
   }
 }
@@ -412,23 +448,27 @@ exports[`renders Promo correctly end position 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c5 {
-    width: 70%;
-    padding: 4rem 1.5rem;
+  .c6 {
+    width: 100%;
+    padding: 8rem 1.5rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c5 {
-    width: 50%;
-    padding: 8rem 1.5rem;
+  .c1 {
+    height: 100%;
+    position: absolute;
   }
 }
 
 @media (min-width:1024px) {
-  .c1 {
-    height: 100%;
+  .c5 {
+    width: 50%;
     position: absolute;
+    top: 0;
+    left: 0;
+    left: auto;
+    right: 0;
   }
 }
 
@@ -463,31 +503,35 @@ exports[`renders Promo correctly end position 1`] = `
     <div
       className="c5"
     >
-      <h1
+      <div
         className="c6"
-        color="white"
-        size="super"
-      >
-        Curabitur pretium tincidunt lacus
-      </h1>
-      <p
-        className="c7"
-        color="white"
-        size="s"
       >
-        Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
-      </p>
-      <span>
-        <a
+        <h1
+          className="c7"
+          color="white"
+          size="super"
+        >
+          Curabitur pretium tincidunt lacus
+        </h1>
+        <p
           className="c8"
           color="white"
-          href="/"
-          target="_self"
-          type="button"
+          size="s"
         >
-          Show me this
-        </a>
-      </span>
+          Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+        </p>
+        <span>
+          <a
+            className="c9"
+            color="white"
+            href="/"
+            target="_self"
+            type="button"
+          >
+            Show me this
+          </a>
+        </span>
+      </div>
     </div>
   </div>
 </div>

package/package.json

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

package/src/components/Molecules/Promo/Promo.js

@@ -6,7 +6,7 @@ import { sizes } from '../../../theme/shared/breakpoint';
 import Picture from '../../Atoms/Picture/Picture';
 
 import {
-  Container, Wrapper, Copy, Media
+  Container, Wrapper, Copy, Media, Gradient
 } from './Promo.style';
 
 const Promo = ({
@@ -25,7 +25,8 @@ const Promo = ({
   showPosterAfterPlaying,
   videoSrc,
   mobileVideoSrc,
-  lightColouredVideo
+  behindTextGradient,
+  blackPlayButton
 }) => {
   // Store the appropriate prop in state, dependent on the breakpoint
   const [thisVideoSrc, setThisVideoSrc] = useState(null);
@@ -80,7 +81,8 @@ const Promo = ({
         <>
           <PromoVideo
             copyLeft={copyLeft}
-            lightColouredVideo={lightColouredVideo}
+            behindTextGradient={behindTextGradient}
+            blackPlayButton={blackPlayButton}
             thisVideoSrc={thisVideoSrc}
             thisPoster={thisPoster}
             showPosterAfterPlaying={showPosterAfterPlaying}
@@ -92,9 +94,11 @@ const Promo = ({
       </Media>
 
       <Wrapper copyLeft={copyLeft}>
-        <Copy position={position} hasVideo={hasVideo} lightColouredVideo={lightColouredVideo}>
-          {children}
-        </Copy>
+        <Gradient hasVideo={hasVideo} behindTextGradient={behindTextGradient} copyLeft={copyLeft}>
+          <Copy position={position} hasVideo={hasVideo} behindTextGradient={behindTextGradient}>
+            {children}
+          </Copy>
+        </Gradient>
       </Wrapper>
     </Container>
   );
@@ -116,7 +120,8 @@ Promo.propTypes = {
   poster: PropTypes.string,
   mobilePoster: PropTypes.string,
   showPosterAfterPlaying: PropTypes.bool,
-  lightColouredVideo: PropTypes.bool
+  behindTextGradient: PropTypes.oneOf(['black', 'white', 'none']),
+  blackPlayButton: PropTypes.bool
 };
 
 Promo.defaultProps = {
@@ -135,7 +140,8 @@ Promo.defaultProps = {
   videoSrc: null,
   mobileVideoSrc: null,
   showPosterAfterPlaying: true,
-  lightColouredVideo: false
+  behindTextGradient: 'none',
+  blackPlayButton: false
 };
 
 export default Promo;

package/src/components/Molecules/Promo/Promo.md

@@ -15,7 +15,6 @@ import Link from '../../Atoms/Link/Link';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   position="upper"
 >
   <Text
@@ -51,7 +50,6 @@ import Link from '../../Atoms/Link/Link';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   position="end"
 >
   <Text
@@ -87,7 +85,6 @@ import Link from '../../Atoms/Link/Link';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   position="lower"
 >
   <Text
@@ -123,7 +120,6 @@ import Link from '../../Atoms/Link/Link';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
 >
   <Text
     tag="h1"
@@ -164,7 +160,7 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
 
 <div>
 <Text tag="h2" size="xl" color="black">
-  Promo Upper w/Video (autoplay and loop)
+  Promo Upper w/Video (autoplay and loop, black text gradient overlay)
 </Text>
 <Promo
   backgroundColor="blue_dark"
@@ -173,12 +169,12 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   position="upper"
   videoSrc={videoSrc}
   poster={poster}
   loop={true}
   autoplay={true}
+  behindTextGradient='black'
 >
   <Text
     tag="h1"
@@ -206,7 +202,7 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
 <br />
 
 <Text tag="h2" size="xl" color="black">
-  Promo End w/Video (loop only)
+  Promo End w/Video (loop only, no text gradient overlay)
 </Text>
 <Promo
   backgroundColor="blue_dark"
@@ -215,7 +211,6 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   position="end"
   videoSrc={videoSrc}
   poster={poster}
@@ -248,25 +243,25 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
 <br />
 
 <Text tag="h2" size="xl" color="black">
-  Promo Lower w/Video (autoplay only)
+  Promo Lower w/Video (autoplay only, white text gradient overlay)
 </Text>
 <Promo
-  backgroundColor="blue_dark"
+  backgroundColor="blue_light"
   imageSet={defaultData.promoImage}
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   position="lower"
   videoSrc={videoSrc}
   poster={poster}
   loop={false}
   autoPlay={true}
+  behindTextGradient='white'
 >
   <Text
     tag="h1"
-    color="white"
+    color="black"
     size="super"
     family="Anton"
     uppercase
@@ -274,12 +269,12 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
   >
     Curabitur pretium tincidunt lacus
   </Text>
-  <Text tag="p" color="white">
+  <Text tag="p" color="black">
     Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
     turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
   </Text>
   <span>
-    <Link href="/" type="button" color="white">
+    <Link href="/" type="button" color="black">
       <Text>
         Show me this
       </Text>
@@ -289,7 +284,7 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
 
 <br />
 <Text tag="h2" size="xl" color="black">
-  Promo None w/Video (no loop or autoplay)
+  Promo None w/Video (no loop or autoplay, no text gradient overlay, copy right aligned)
 </Text>
 <Promo
   backgroundColor="blue_dark"
@@ -298,7 +293,6 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={false}
-  hasOverlay={true}
   videoSrc={videoSrc}
   poster={poster}
   loop={false}
@@ -328,7 +322,7 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
 </Promo>
 
 <Text tag="h2" size="xl" color="black">
-  Promo None w/Video (no loop or autoplay, 'light-coloured video' setting, different videos and posters for mobile and desktop)
+  Promo None w/Video (no loop or autoplay, white text gradient overlay, different videos and posters for mobile and desktop)
 </Text>
 <Promo
   backgroundColor="blue_light"
@@ -337,14 +331,13 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   videoSrc={videoSrc}
   mobileVideoSrc={mobileVideoSrc}
   poster={poster}
   mobilePoster={mobilePoster}
   loop={false}
   autoPlay={false}
-  lightColouredVideo={true}
+  behindTextGradient='white'
 >
   <Text
     tag="h1"
@@ -370,7 +363,7 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
 </Promo>
 
 <Text tag="h2" size="xl" color="black">
-  Promo None w/Video (no loop or autoplay, 'light-coloured video' setting, mobile-only video and poster)
+  Promo None w/Video (no loop or autoplay, white text gradient overlay, mobile-only video and poster, black play button)
 </Text>
 <Promo
   backgroundColor="blue_light"
@@ -379,12 +372,12 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   mobileVideoSrc={mobileVideoSrc}
   mobilePoster={mobilePoster}
   loop={false}
   autoPlay={false}
-  lightColouredVideo={true}
+  behindTextGradient='white'
+  blackPlayButton={true}
 >
   <Text
     tag="h1"
@@ -394,19 +387,8 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
     uppercase
     weight="normal"
   >
-    Curabitur pretium tincidunt lacus
-  </Text>
-  <Text tag="p" color="black">
-    Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
-    turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+    One-Line Special
   </Text>
-  <span>
-    <Link href="/" type="button" color="black">
-      <Text>
-        Show me this
-      </Text>
-    </Link>
-  </span>
 </Promo>
 
 </div>

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

@@ -44,6 +44,7 @@ const Wrapper = styled.div`
   margin: 0 auto;
   display: flex;
   align-items: center;
+  position: relative;
 
   ${({ copyLeft }) => !copyLeft && 'justify-content: flex-end'};
   ${media('medium')} {
@@ -57,22 +58,8 @@ const Copy = styled.div`
   ${zIndex('low')};
 
   ${media('medium')} {
-    width: 70%;
-    padding: ${spacing('xl')} ${spacing('m')};
-  }
-  ${media('medium')} {
-    width: 50%;
+    width: 100%;
     padding: ${spacing('xxl')} ${spacing('m')};
-
-    ${({ hasVideo }) => hasVideo !== false && css`
-      background-color: rgba(0,0,0,0.75);
-      overflow: hidden;
-      box-shadow: 0px 0px 75px 100px rgba(0, 0, 0, 0.75);
-    `}
-    ${({ hasVideo, lightColouredVideo }) => (hasVideo !== false && lightColouredVideo) && css`
-    background-color: rgba(255, 255, 255, 0.75);
-    box-shadow: 0px 0px 75px 100px rgba(255, 255, 255, 0.75);
-  `}
   }
 
   ${({ position }) => position === 'lower' && css`
@@ -104,6 +91,31 @@ const Video = styled.video.attrs(() => ({
   object-fit: cover;
 `;
 
+const Gradient = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  ${media('medium')} {
+    width: 50%;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    ${({ copyLeft }) => (!copyLeft) && css`
+      left: auto;
+      right: 0;
+    `};
+
+    ${({ hasVideo, behindTextGradient }) => (hasVideo !== false && behindTextGradient !== 'none') && css`
+      overflow: hidden;
+      background-color:${behindTextGradient === 'black' ? 'rgba(0,0,0,0.5)' : 'rgba(255, 255, 255, 0.5)'};
+      box-shadow: 0px 0px 50px 60px ${behindTextGradient === 'black' ? 'rgba(0,0,0,0.5)' : 'rgba(255, 255, 255, 0.5)'};
+   `};
+  }
+`;
+
 export {
-  Container, Wrapper, Copy, Media, Video
+  Container, Wrapper, Copy, Media, Video, Gradient
 };