@comicrelief/component-library 7.20.0 → 7.22.0

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

@@ -14,7 +14,7 @@ import Link from '../../Atoms/Link/Link';
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
-  copyFirst={true}
+  copyLeft={true}
   hasOverlay={true}
   position="upper"
 >
@@ -50,7 +50,7 @@ import Link from '../../Atoms/Link/Link';
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
-  copyFirst={true}
+  copyLeft={true}
   hasOverlay={true}
   position="end"
 >
@@ -86,7 +86,7 @@ import Link from '../../Atoms/Link/Link';
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
-  copyFirst={true}
+  copyLeft={true}
   hasOverlay={true}
   position="lower"
 >
@@ -122,7 +122,7 @@ import Link from '../../Atoms/Link/Link';
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
-  copyFirst={true}
+  copyLeft={true}
   hasOverlay={true}
 >
   <Text
@@ -149,3 +149,265 @@ import Link from '../../Atoms/Link/Link';
 </Promo>
 </div>
 ```
+
+Promo w/Video
+
+```js
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+import poster from '../../../styleguide/assets/VideoBannerPosterImage.png';
+import mobilePoster from '../../../styleguide/assets/mobileVideoPosterImage.png';
+const videoSrc =
+  'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
+
+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)
+</Text>
+<Promo
+  backgroundColor="blue_dark"
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
+  imageAltText=""
+  copyLeft={true}
+  hasOverlay={true}
+  position="upper"
+  videoSrc={videoSrc}
+  poster={poster}
+  loop={true}
+  autoplay={true}
+>
+  <Text
+    tag="h1"
+    color="white"
+    size="super"
+    family="Anton"
+    uppercase
+    weight="normal"
+  >
+    Curabitur pretium tincidunt lacus
+  </Text>
+  <Text tag="p" color="white">
+    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">
+      <Text>
+        Show me this
+      </Text>
+    </Link>
+  </span>
+</Promo>
+
+<br />
+
+<Text tag="h2" size="xl" color="black">
+  Promo End w/Video (loop only)
+</Text>
+<Promo
+  backgroundColor="blue_dark"
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
+  imageAltText=""
+  copyLeft={true}
+  hasOverlay={true}
+  position="end"
+  videoSrc={videoSrc}
+  poster={poster}
+  loop={true}
+  autoPlay={false}
+>
+  <Text
+    tag="h1"
+    color="white"
+    size="super"
+    family="Anton"
+    uppercase
+    weight="normal"
+  >
+    Curabitur pretium tincidunt lacus
+  </Text>
+  <Text tag="p" color="white">
+    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">
+      <Text>
+        Show me this
+      </Text>
+    </Link>
+  </span>
+</Promo>
+
+<br />
+
+<Text tag="h2" size="xl" color="black">
+  Promo Lower w/Video (autoplay only)
+</Text>
+<Promo
+  backgroundColor="blue_dark"
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
+  imageAltText=""
+  copyLeft={true}
+  hasOverlay={true}
+  position="lower"
+  videoSrc={videoSrc}
+  poster={poster}
+  loop={false}
+  autoPlay={true}
+>
+  <Text
+    tag="h1"
+    color="white"
+    size="super"
+    family="Anton"
+    uppercase
+    weight="normal"
+  >
+    Curabitur pretium tincidunt lacus
+  </Text>
+  <Text tag="p" color="white">
+    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">
+      <Text>
+        Show me this
+      </Text>
+    </Link>
+  </span>
+</Promo>
+
+<br />
+<Text tag="h2" size="xl" color="black">
+  Promo None w/Video (no loop or autoplay)
+</Text>
+<Promo
+  backgroundColor="blue_dark"
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
+  imageAltText=""
+  copyLeft={false}
+  hasOverlay={true}
+  videoSrc={videoSrc}
+  poster={poster}
+  loop={false}
+  autoPlay={false}
+>
+  <Text
+    tag="h1"
+    color="white"
+    size="super"
+    family="Anton"
+    uppercase
+    weight="normal"
+  >
+    Curabitur pretium tincidunt lacus
+  </Text>
+  <Text tag="p" color="white">
+    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">
+      <Text>
+        Show me this
+      </Text>
+    </Link>
+  </span>
+</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)
+</Text>
+<Promo
+  backgroundColor="blue_light"
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
+  imageAltText=""
+  copyLeft={true}
+  hasOverlay={true}
+  videoSrc={videoSrc}
+  mobileVideoSrc={mobileVideoSrc}
+  poster={poster}
+  mobilePoster={mobilePoster}
+  loop={false}
+  autoPlay={false}
+  lightColouredVideo={true}
+>
+  <Text
+    tag="h1"
+    color="black"
+    size="super"
+    family="Anton"
+    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.
+  </Text>
+  <span>
+    <Link href="/" type="button" color="black">
+      <Text>
+        Show me this
+      </Text>
+    </Link>
+  </span>
+</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)
+</Text>
+<Promo
+  backgroundColor="blue_light"
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
+  imageAltText=""
+  copyLeft={true}
+  hasOverlay={true}
+  mobileVideoSrc={mobileVideoSrc}
+  mobilePoster={mobilePoster}
+  loop={false}
+  autoPlay={false}
+  lightColouredVideo={true}
+>
+  <Text
+    tag="h1"
+    color="black"
+    size="super"
+    family="Anton"
+    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.
+  </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,7 +44,8 @@ const Wrapper = styled.div`
   margin: 0 auto;
   display: flex;
   align-items: center;
-  ${({ copyFirst }) => !copyFirst && 'justify-content: flex-end'};
+
+  ${({ copyLeft }) => !copyLeft && 'justify-content: flex-end'};
   ${media('medium')} {
     min-height: calc(100vh - 90px);
   }
@@ -54,6 +55,7 @@ const Copy = styled.div`
   width: 100%;
   padding: ${spacing('m')} ${spacing('m')} ${spacing('xl')};
   ${zIndex('low')};
+
   ${media('medium')} {
     width: 70%;
     padding: ${spacing('xl')} ${spacing('m')};
@@ -61,7 +63,18 @@ const Copy = styled.div`
   ${media('medium')} {
     width: 50%;
     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`
     padding: ${spacing('xl')} ${spacing('m')};
     ${media('medium')} {
@@ -83,6 +96,14 @@ const Media = styled.div`
   }
 `;
 
+const Video = styled.video.attrs(() => ({
+  playsInline: true
+}))`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+
 export {
-  Container, Wrapper, Copy, Media
+  Container, Wrapper, Copy, Media, Video
 };

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

@@ -13,7 +13,7 @@ it('renders Promo correctly', () => {
       imageSet={defaultData.promoImage}
       image={defaultData.promoImage}
       imageAltText=""
-      copyFirst={false}
+      copyLeft={false}
     >
       <Text
         tag="h1"
@@ -47,7 +47,7 @@ it('renders Promo correctly end position', () => {
       imageSet={defaultData.promoImage}
       image={defaultData.promoImage}
       imageAltText=""
-      copyFirst={false}
+      copyLeft={false}
       position="end"
     >
       <Text

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

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  ProgressRingWrapper, ProgressRingSVG, ProgressRingCircle
+} from './_PromoVideoButton.style';
+
+const ProgressRing = ({
+  videoProgress, ...rest
+}) => {
+  const thisStroke = 4;
+  const thisRadius = 28;
+  const initNormRadius = thisRadius - thisStroke * 2;
+  const thisCircumference = initNormRadius * 2 * Math.PI;
+  const [thisDashOffset, setThisDashOffset] = useState(initNormRadius * 2 * Math.PI);
+
+  useEffect(() => {
+    const offset = thisCircumference - ((videoProgress / 100) * thisCircumference);
+    setThisDashOffset(offset);
+  }, [videoProgress, thisCircumference]);
+
+  return (
+    <ProgressRingWrapper videoProgress={videoProgress}>
+      <ProgressRingSVG height={thisRadius * 2} width={thisRadius * 2}>
+        <ProgressRingCircle
+          strokeDasharray={`${thisCircumference} ${thisCircumference}`}
+          strokeDashOffsetStyle={thisDashOffset}
+          strokeWidth={`${thisStroke}`}
+          r={`${initNormRadius}`}
+          cx={`${thisRadius}`}
+          cy={`${thisRadius}`}
+          {...rest}
+        />
+      </ProgressRingSVG>
+    </ProgressRingWrapper>
+  );
+};
+
+ProgressRing.propTypes = {
+  videoProgress: PropTypes.number.isRequired
+};
+
+export default ProgressRing;

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

@@ -0,0 +1,105 @@
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Video } from './Promo.style';
+import PromoVideoButton from './_PromoVideoButton';
+
+const PromoVideo = ({
+  lightColouredVideo,
+  copyLeft,
+  thisVideoSrc,
+  thisPoster,
+  autoPlay,
+  loop,
+  showPosterAfterPlaying
+}) => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isRestarting, setIsRestarting] = useState(false);
+  const [videoProgress, setVideoProgress] = useState(0);
+  const videoEl = useRef(null);
+
+  const togglePlay = () => {
+    if (isPlaying) videoEl.current.pause();
+    else videoEl.current.play();
+    setIsPlaying(!isPlaying);
+  };
+
+  const updateTime = () => {
+    if (videoEl.current.duration) {
+      // Calculate the percentage of the video played:
+      const percentage = Math.round((videoEl.current.currentTime / videoEl.current.duration) * 100);
+      // Because a completely smooth animation is impossible with the 250ms-ish frequency of
+      // the 'timeupdate' event, we're electing to just update the ring every 25%.
+      const nearest = 25;
+      const roundedPercentage = (percentage + nearest / 2) - ((percentage + nearest / 2) % nearest);
+      setVideoProgress(roundedPercentage);
+    }
+  };
+
+  // Only loads once the initial screensize check is complete
+  useEffect(() => {
+    // Use truthy comparison so either a null OR undefined value won't work
+    if (thisVideoSrc != null) {
+      videoEl.current.addEventListener('timeupdate', updateTime);
+      // Trigger on-load autoplay if apppropriate
+      if (autoPlay && !isPlaying) {
+        togglePlay();
+      }
+
+      videoEl.current.addEventListener('ended', () => {
+        // Used purely to halt the CSS animation:
+        setIsRestarting(true);
+
+        // If this is a non-looping video, add a listener to update our local state
+        // once the video's ended, to let the user retrigger it manually:
+        if (!loop) {
+          setIsPlaying(false);
+          setVideoProgress(0);
+          // Reload the video to show the poster image:
+          if (showPosterAfterPlaying) videoEl.current.load();
+        } else {
+          // Rather than using the Video 'loop' property, we retrigger
+          // it in *code* as there's no 'restarted' to hook into:
+          togglePlay();
+        }
+
+        // Grace period to allow the animation to reset
+        setTimeout(() => { setIsRestarting(false); }, 100);
+      });
+    }
+    // CERTAINLY don't want this re-running for EACH of these variable updates, sorry Lint...
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [thisVideoSrc]);
+
+  return (
+    <>
+      <Video
+        ref={videoEl}
+        src={thisVideoSrc}
+        poster={thisPoster}
+        muted
+      >
+        Your browser does not support this video filetype.
+      </Video>
+      <PromoVideoButton
+        copyLeft={copyLeft}
+        videoProgress={videoProgress}
+        togglePlay={togglePlay}
+        isPlaying={isPlaying}
+        lightColouredVideo={lightColouredVideo}
+        isRestarting={isRestarting}
+      />
+    </>
+  );
+};
+
+PromoVideo.propTypes = {
+  copyLeft: PropTypes.bool.isRequired,
+  lightColouredVideo: PropTypes.bool.isRequired,
+  thisVideoSrc: PropTypes.string.isRequired,
+  thisPoster: PropTypes.string.isRequired,
+  autoPlay: PropTypes.bool.isRequired,
+  loop: PropTypes.bool.isRequired,
+  showPosterAfterPlaying: PropTypes.bool.isRequired
+};
+
+export default PromoVideo;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ProgressRing from './_ProgressRing';
+import { PlayButtonWrapper, PlayButton, Icon } from './_PromoVideoButton.style';
+
+const PromoVideoButton = ({
+  togglePlay, ...rest
+}) => (
+  <PlayButtonWrapper>
+    <PlayButton
+      onClick={() => { togglePlay(); }}
+      {...rest}
+    >
+      <Icon {...rest} />
+      <ProgressRing
+        {...rest}
+      />
+    </PlayButton>
+  </PlayButtonWrapper>
+);
+
+PromoVideoButton.propTypes = {
+  togglePlay: PropTypes.func.isRequired
+};
+
+export default PromoVideoButton;

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

@@ -0,0 +1,121 @@
+import styled, { css } from 'styled-components';
+import playWhite from './assets/Play--white.svg';
+import pauseWhite from './assets/Pause--white.svg';
+import playBlack from './assets/Play--black.svg';
+import pauseBlack from './assets/Pause--black.svg';
+
+const PlayButton = styled.button`
+  display: flex;
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  border-radius: 50%;
+  background: ${({ theme }) => theme.color('black')};
+  opacity: 0.75;
+  transition: opacity 0.2s;
+
+  &:hover,
+  &:focus {
+    opacity: 1.0;
+  }
+
+  &:focus-visible {
+    outline-style: outset;
+    outline-width: medium;
+  }
+
+  // Non-light coloured video:
+  ${({ lightColouredVideo }) => !lightColouredVideo && css`
+    background: ${({ theme }) => theme.color('white')};
+  `}
+
+  ${({ copyLeft }) => !copyLeft && css`
+    right: auto;
+    left: 10px;
+  `}
+
+  @media ${({ theme }) => theme.breakpoint('medium')} {
+    top: 20px;
+    right: 20px;
+
+      ${({ copyLeft }) => !copyLeft && css`
+      right: auto;
+      left: 20px;
+    `}
+  }
+`;
+
+const PlayButtonWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+
+const ProgressRingWrapper = styled.span`
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+`;
+
+const ProgressRingSVG = styled.svg`
+ //
+`;
+
+const ProgressRingCircle = styled.circle`
+    z-index: 100;
+    transition: stroke-dashoffset 0.5s;
+
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+    stroke-dashoffset: ${({ strokeDashOffsetStyle }) => strokeDashOffsetStyle};
+    stroke: white; // need to changed based on Promo settings
+    fill: transparent;
+
+    // Non-light coloured video, white button, black stroke
+    ${({ lightColouredVideo }) => !lightColouredVideo && css`
+      stroke: ${({ theme }) => theme.color('black')};
+    `}
+
+    // Cancel the animation
+    ${({ isRestarting }) => (isRestarting) && css`
+     transition: none;
+    `}
+`;
+
+const Icon = styled.span`
+  height: 50px;
+  width: 50px;
+  background: no-repeat center/50% url(${playWhite}) transparent;
+
+  // Light-coloured video, black button, white icons
+  ${({ lightColouredVideo, isPlaying }) => (lightColouredVideo && !isPlaying) && css`
+    background-image: url(${playWhite});
+  `}
+
+  ${({ lightColouredVideo, isPlaying }) => (lightColouredVideo && isPlaying) && css`
+    background-image: url(${pauseWhite});
+  `}
+
+  // Non-light coloured video, white button, black icons
+  ${({ lightColouredVideo, isPlaying }) => (!lightColouredVideo && !isPlaying) && css`
+    background-image: url(${playBlack});
+  `}
+
+  ${({ lightColouredVideo, isPlaying }) => (!lightColouredVideo && isPlaying) && css`
+    background-image: url(${pauseBlack});
+  `}
+`;
+
+export {
+  ProgressRingWrapper, ProgressRingSVG, ProgressRingCircle, PlayButton, PlayButtonWrapper, Icon
+};

package/src/components/Molecules/Promo/assets/Pause--black.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C10.8954 6 10 6.89543 10 8V40C10 41.1046 10.8954 42 12 42H17C18.1046 42 19 41.1046 19 40V8C19 6.89543 18.1046 6 17 6H12ZM31 6C29.8954 6 29 6.89543 29 8V40C29 41.1046 29.8954 42 31 42H36C37.1046 42 38 41.1046 38 40V8C38 6.89543 37.1046 6 36 6H31Z" fill="#222222"/>
+</svg>

package/src/components/Molecules/Promo/assets/Pause--white.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C10.8954 6 10 6.89543 10 8V40C10 41.1046 10.8954 42 12 42H17C18.1046 42 19 41.1046 19 40V8C19 6.89543 18.1046 6 17 6H12ZM31 6C29.8954 6 29 6.89543 29 8V40C29 41.1046 29.8954 42 31 42H36C37.1046 42 38 41.1046 38 40V8C38 6.89543 37.1046 6 36 6H31Z" fill="#FFFFFF"/>
+</svg>

package/src/components/Molecules/Promo/assets/Play--black.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.6845 22.5846L11.457 6.22056C10.9505 5.92706 10.326 5.92656 9.819 6.21856C9.3125 6.51056 9 7.05156 9 7.63656V40.3641C9 40.9491 9.3125 41.4901 9.8195 41.7821C10.0725 41.9276 10.3545 42.0001 10.6365 42.0001C10.92 42.0001 11.2035 41.9266 11.4575 41.7796L39.685 25.4161C40.189 25.1231 40.5 24.5836 40.5 24.0001C40.5 23.4166 40.189 22.8771 39.6845 22.5846Z" fill="#222222"/>
+</svg>

package/src/components/Molecules/Promo/assets/Play--white.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.6845 22.5846L11.457 6.22056C10.9505 5.92706 10.326 5.92656 9.819 6.21856C9.3125 6.51056 9 7.05156 9 7.63656V40.3641C9 40.9491 9.3125 41.4901 9.8195 41.7821C10.0725 41.9276 10.3545 42.0001 10.6365 42.0001C10.92 42.0001 11.2035 41.9266 11.4575 41.7796L39.685 25.4161C40.189 25.1231 40.5 24.5836 40.5 24.0001C40.5 23.4166 40.189 22.8771 39.6845 22.5846Z" fill="#FFFFFF"/>
+</svg>