@comicrelief/component-library 7.21.0 → 7.22.0

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

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ProgressRing = _interopRequireDefault(require("./_ProgressRing"));
+
+var _PromoVideoButton = require("./_PromoVideoButton.style");
+
+var _excluded = ["togglePlay"];
+
+var PromoVideoButton = function PromoVideoButton(_ref) {
+  var togglePlay = _ref.togglePlay,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_PromoVideoButton.PlayButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_PromoVideoButton.PlayButton, Object.assign({
+    onClick: function onClick() {
+      togglePlay();
+    }
+  }, rest), /*#__PURE__*/_react.default.createElement(_PromoVideoButton.Icon, rest), /*#__PURE__*/_react.default.createElement(_ProgressRing.default, rest)));
+};
+
+var _default = PromoVideoButton;
+exports.default = _default;

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

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Icon = exports.PlayButtonWrapper = exports.PlayButton = exports.ProgressRingCircle = exports.ProgressRingSVG = exports.ProgressRingWrapper = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _PlayWhite = _interopRequireDefault(require("./assets/Play--white.svg"));
+
+var _PauseWhite = _interopRequireDefault(require("./assets/Pause--white.svg"));
+
+var _PlayBlack = _interopRequireDefault(require("./assets/Play--black.svg"));
+
+var _PauseBlack = _interopRequireDefault(require("./assets/Pause--black.svg"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var PlayButton = _styledComponents.default.button.withConfig({
+  displayName: "_PromoVideoButtonstyle__PlayButton",
+  componentId: "sc-17cm3uc-0"
+})(["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:", ";opacity:0.75;transition:opacity 0.2s;&:hover,&:focus{opacity:1.0;}&:focus-visible{outline-style:outset;outline-width:medium;}", " ", " @media ", "{top:20px;right:20px;", "}"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.color('black');
+}, function (_ref2) {
+  var lightColouredVideo = _ref2.lightColouredVideo;
+  return !lightColouredVideo && (0, _styledComponents.css)(["background:", ";"], function (_ref3) {
+    var theme = _ref3.theme;
+    return theme.color('white');
+  });
+}, function (_ref4) {
+  var copyLeft = _ref4.copyLeft;
+  return !copyLeft && (0, _styledComponents.css)(["right:auto;left:10px;"]);
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.breakpoint('medium');
+}, function (_ref6) {
+  var copyLeft = _ref6.copyLeft;
+  return !copyLeft && (0, _styledComponents.css)(["right:auto;left:20px;"]);
+});
+
+exports.PlayButton = PlayButton;
+
+var PlayButtonWrapper = _styledComponents.default.div.withConfig({
+  displayName: "_PromoVideoButtonstyle__PlayButtonWrapper",
+  componentId: "sc-17cm3uc-1"
+})(["width:100%;height:100%;position:absolute;top:0;left:0;"]);
+
+exports.PlayButtonWrapper = PlayButtonWrapper;
+
+var ProgressRingWrapper = _styledComponents.default.span.withConfig({
+  displayName: "_PromoVideoButtonstyle__ProgressRingWrapper",
+  componentId: "sc-17cm3uc-2"
+})(["position:absolute;width:100%;height:100%;display:flex;"]);
+
+exports.ProgressRingWrapper = ProgressRingWrapper;
+
+var ProgressRingSVG = _styledComponents.default.svg.withConfig({
+  displayName: "_PromoVideoButtonstyle__ProgressRingSVG",
+  componentId: "sc-17cm3uc-3"
+})([""]);
+
+exports.ProgressRingSVG = ProgressRingSVG;
+
+var ProgressRingCircle = _styledComponents.default.circle.withConfig({
+  displayName: "_PromoVideoButtonstyle__ProgressRingCircle",
+  componentId: "sc-17cm3uc-4"
+})(["z-index:100;transition:stroke-dashoffset 0.5s;transform:rotate(-90deg);transform-origin:50% 50%;stroke-dashoffset:", ";stroke:white;fill:transparent;", " ", ""], function (_ref7) {
+  var strokeDashOffsetStyle = _ref7.strokeDashOffsetStyle;
+  return strokeDashOffsetStyle;
+}, function (_ref8) {
+  var lightColouredVideo = _ref8.lightColouredVideo;
+  return !lightColouredVideo && (0, _styledComponents.css)(["stroke:", ";"], function (_ref9) {
+    var theme = _ref9.theme;
+    return theme.color('black');
+  });
+}, function (_ref10) {
+  var isRestarting = _ref10.isRestarting;
+  return isRestarting && (0, _styledComponents.css)(["transition:none;"]);
+});
+
+exports.ProgressRingCircle = ProgressRingCircle;
+
+var Icon = _styledComponents.default.span.withConfig({
+  displayName: "_PromoVideoButtonstyle__Icon",
+  componentId: "sc-17cm3uc-5"
+})(["height:50px;width:50px;background:no-repeat center/50% url(", ") transparent;", " ", " ", " ", ""], _PlayWhite.default, function (_ref11) {
+  var lightColouredVideo = _ref11.lightColouredVideo,
+      isPlaying = _ref11.isPlaying;
+  return lightColouredVideo && !isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PlayWhite.default);
+}, function (_ref12) {
+  var lightColouredVideo = _ref12.lightColouredVideo,
+      isPlaying = _ref12.isPlaying;
+  return lightColouredVideo && isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PauseWhite.default);
+}, function (_ref13) {
+  var lightColouredVideo = _ref13.lightColouredVideo,
+      isPlaying = _ref13.isPlaying;
+  return !lightColouredVideo && !isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PlayBlack.default);
+}, function (_ref14) {
+  var lightColouredVideo = _ref14.lightColouredVideo,
+      isPlaying = _ref14.isPlaying;
+  return !lightColouredVideo && isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PauseBlack.default);
+});
+
+exports.Icon = Icon;

package/dist/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/dist/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/dist/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/dist/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>

package/package.json

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

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

@@ -1,5 +1,8 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import PromoVideo from './_PromoVideo';
+import { sizes } from '../../../theme/shared/breakpoint';
+
 import Picture from '../../Atoms/Picture/Picture';
 
 import {
@@ -7,21 +10,60 @@ import {
 } from './Promo.style';
 
 const Promo = ({
-  copyFirst,
+  copyLeft,
   backgroundColor,
   imageLow,
   imageSet,
   image,
   imageAltText,
   children,
-  position
+  position,
+  autoPlay,
+  loop,
+  poster,
+  mobilePoster,
+  showPosterAfterPlaying,
+  videoSrc,
+  mobileVideoSrc,
+  lightColouredVideo
 }) => {
-  const hasImage = imageSet || false;
+  // Store the appropriate prop in state, dependent on the breakpoint
+  const [thisVideoSrc, setThisVideoSrc] = useState(null);
+  const [thisPoster, setThisPoster] = useState(null);
+
+  // Let either field define this, just in case
+  const hasVideo = Boolean(videoSrc || mobileVideoSrc);
+  // A 'video-y' Promo will override and ignore any 'non-Video' images;
+  // none of these fields are required so we have to handle them accordingly:
+  const hasImage = Boolean(imageSet && !hasVideo);
+
+  // Runs on initial load:
+  useEffect(() => {
+    if (hasVideo) {
+      // Checks size on load ONLY; don't want to mess about with listeners:
+      const isDesktop = window.innerWidth >= sizes.nav; // 1024+ px
+      let currentPoster; let currentSrc;
+
+      // If we've got both desktop AND mobile videos, let the
+      // *current* screen width define which video src to use:
+      if (videoSrc && mobileVideoSrc) {
+        currentSrc = isDesktop ? videoSrc : mobileVideoSrc;
+        currentPoster = isDesktop ? poster : mobilePoster;
+      } else {
+        // Else, pick whatever we DO actually have:
+        currentSrc = videoSrc || mobileVideoSrc;
+        currentPoster = poster || mobilePoster;
+      }
+
+      setThisVideoSrc(currentSrc);
+      setThisPoster(currentPoster);
+    }
+  }, [hasVideo, videoSrc, mobileVideoSrc, mobilePoster, poster]);
 
   return (
     <Container backgroundColor={backgroundColor} position={position}>
-      {hasImage && (
-      <Media imageRight={copyFirst}>
+      <Media imageRight={copyLeft}>
+        {(hasImage && !hasVideo) && (
         <Picture
           alt={imageAltText}
           imageLow={imageLow}
@@ -31,10 +73,28 @@ const Promo = ({
           width="100%"
           height="100%"
         />
+        )}
+        {/* If no poster image is supplied, it'll gracefully
+        fall back to the first frame, so only checking for a src here */}
+        {(hasVideo && thisVideoSrc) && (
+        <>
+          <PromoVideo
+            copyLeft={copyLeft}
+            lightColouredVideo={lightColouredVideo}
+            thisVideoSrc={thisVideoSrc}
+            thisPoster={thisPoster}
+            showPosterAfterPlaying={showPosterAfterPlaying}
+            autoPlay={autoPlay}
+            loop={loop}
+          />
+        </>
+        )}
       </Media>
-      )}
-      <Wrapper copyFirst={copyFirst}>
-        <Copy position={position}>{children}</Copy>
+
+      <Wrapper copyLeft={copyLeft}>
+        <Copy position={position} hasVideo={hasVideo} lightColouredVideo={lightColouredVideo}>
+          {children}
+        </Copy>
       </Wrapper>
     </Container>
   );
@@ -42,24 +102,40 @@ const Promo = ({
 
 Promo.propTypes = {
   backgroundColor: PropTypes.string,
-  copyFirst: PropTypes.bool,
+  copyLeft: PropTypes.bool,
   imageLow: PropTypes.string,
   imageSet: PropTypes.string,
   image: PropTypes.string,
   imageAltText: PropTypes.string,
   children: PropTypes.node,
-  position: PropTypes.oneOf(['upper', 'lower', 'end', 'none'])
+  position: PropTypes.oneOf(['upper', 'lower', 'end', 'none']),
+  autoPlay: PropTypes.bool,
+  loop: PropTypes.bool,
+  videoSrc: PropTypes.string,
+  mobileVideoSrc: PropTypes.string,
+  poster: PropTypes.string,
+  mobilePoster: PropTypes.string,
+  showPosterAfterPlaying: PropTypes.bool,
+  lightColouredVideo: PropTypes.bool
 };
 
 Promo.defaultProps = {
   backgroundColor: 'white',
-  copyFirst: false,
+  copyLeft: false,
   imageSet: null,
   imageLow: null,
   image: null,
   imageAltText: '',
   children: null,
-  position: 'none'
+  position: 'none',
+  autoPlay: true,
+  loop: true,
+  poster: null,
+  mobilePoster: null,
+  videoSrc: null,
+  mobileVideoSrc: null,
+  showPosterAfterPlaying: true,
+  lightColouredVideo: false
 };
 
 export default Promo;

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
 };