@comicrelief/component-library 7.22.0 → 7.23.0

package/dist/components/Molecules/Promo/Promo.md

@@ -1,7 +1,8 @@
 Promo
 
 ```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;
+import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 
 <div>
@@ -15,7 +16,6 @@ import Link from '../../Atoms/Link/Link';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   position="upper"
 >
   <Text
@@ -51,7 +51,6 @@ import Link from '../../Atoms/Link/Link';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   position="end"
 >
   <Text
@@ -87,7 +86,6 @@ import Link from '../../Atoms/Link/Link';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   position="lower"
 >
   <Text
@@ -123,7 +121,6 @@ import Link from '../../Atoms/Link/Link';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
 >
   <Text
     tag="h1"
@@ -164,7 +161,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 +170,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 +203,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 +212,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 +244,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 +270,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 +285,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 +294,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 +323,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 +332,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 +364,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 +373,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 +388,8 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
     uppercase
     weight="normal"
   >
-    Curabitur pretium tincidunt lacus
+    One-Line Special
   </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/dist/components/Molecules/Promo/Promo.style.js

@@ -1,30 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Video = exports.Media = exports.Copy = exports.Wrapper = exports.Container = void 0;
-
+exports.Wrapper = exports.Video = exports.Media = exports.Gradient = exports.Copy = exports.Container = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _size = require("../../../theme/shared/size");
-
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
-
-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 Container = _styledComponents.default.div.withConfig({
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }
+var Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "Promostyle__Container",
   componentId: "sc-kk4nna-0"
 })(["width:100%;display:flex;position:relative;flex-direction:column;overflow:hidden;background:", ";", "{flex-direction:row;}", " ", " ", ""], function (_ref) {
   var theme = _ref.theme,
-      backgroundColor = _ref.backgroundColor;
+    backgroundColor = _ref.backgroundColor;
   return theme.color(backgroundColor);
 }, (0, _size.media)('medium'), function (_ref2) {
   var position = _ref2.position;
@@ -36,44 +28,25 @@ var Container = _styledComponents.default.div.withConfig({
   var position = _ref4.position;
   return position === 'end' && (0, _styledComponents.css)(["clip-path:polygon(0 0,100% 0,100% 90%,0 101%);border-radius:0 0 0 2rem;", "{clip-path:polygon(0 0,100% 0,100% 85%,0% 101%);border-radius:0 0 0 4rem;}"], (0, _size.media)('medium'));
 });
-
-exports.Container = Container;
-
-var Wrapper = _styledComponents.default.div.withConfig({
+var Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Promostyle__Wrapper",
   componentId: "sc-kk4nna-1"
-})(["width:100%;max-width:", ";height:100%;left:0;right:0;margin:0 auto;display:flex;align-items:center;", ";", "{min-height:calc(100vh - 90px);}"], _size.container.medium, function (_ref5) {
+})(["width:100%;max-width:", ";height:100%;left:0;right:0;margin:0 auto;display:flex;align-items:center;position:relative;", ";", "{min-height:calc(100vh - 90px);}"], _size.container.medium, function (_ref5) {
   var copyLeft = _ref5.copyLeft;
   return !copyLeft && 'justify-content: flex-end';
 }, (0, _size.media)('medium'));
-
-exports.Wrapper = Wrapper;
-
-var Copy = _styledComponents.default.div.withConfig({
+var Copy = exports.Copy = _styledComponents.default.div.withConfig({
   displayName: "Promostyle__Copy",
   componentId: "sc-kk4nna-2"
-})(["width:100%;padding:", " ", " ", ";", ";", "{width:70%;padding:", " ", ";}", "{width:50%;padding:", " ", ";", " ", "}", ""], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('xl'), (0, _zIndex.default)('low'), (0, _size.media)('medium'), (0, _spacing.default)('xl'), (0, _spacing.default)('m'), (0, _size.media)('medium'), (0, _spacing.default)('xxl'), (0, _spacing.default)('m'), function (_ref6) {
-  var hasVideo = _ref6.hasVideo;
-  return hasVideo !== false && (0, _styledComponents.css)(["background-color:rgba(0,0,0,0.75);overflow:hidden;box-shadow:0px 0px 75px 100px rgba(0,0,0,0.75);"]);
-}, function (_ref7) {
-  var hasVideo = _ref7.hasVideo,
-      lightColouredVideo = _ref7.lightColouredVideo;
-  return hasVideo !== false && lightColouredVideo && (0, _styledComponents.css)(["background-color:rgba(255,255,255,0.75);box-shadow:0px 0px 75px 100px rgba(255,255,255,0.75);"]);
-}, function (_ref8) {
-  var position = _ref8.position;
+})(["width:100%;padding:", " ", " ", ";", ";", "{width:100%;padding:", " ", ";}", ""], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('xl'), (0, _zIndex.default)('low'), (0, _size.media)('medium'), (0, _spacing.default)('xxl'), (0, _spacing.default)('m'), function (_ref6) {
+  var position = _ref6.position;
   return position === 'lower' && (0, _styledComponents.css)(["padding:", " ", ";", "{padding:6rem ", ";margin-top:6rem;}"], (0, _spacing.default)('xl'), (0, _spacing.default)('m'), (0, _size.media)('medium'), (0, _spacing.default)('m'));
 });
-
-exports.Copy = Copy;
-
-var Media = _styledComponents.default.div.withConfig({
+var Media = exports.Media = _styledComponents.default.div.withConfig({
   displayName: "Promostyle__Media",
   componentId: "sc-kk4nna-3"
 })(["width:100%;height:auto;img{object-position:center;}", "{height:100%;position:absolute;}"], (0, _size.media)('medium'));
-
-exports.Media = Media;
-
-var Video = _styledComponents.default.video.attrs(function () {
+var Video = exports.Video = _styledComponents.default.video.attrs(function () {
   return {
     playsInline: true
   };
@@ -81,5 +54,14 @@ var Video = _styledComponents.default.video.attrs(function () {
   displayName: "Promostyle__Video",
   componentId: "sc-kk4nna-4"
 })(["width:100%;height:100%;object-fit:cover;"]);
-
-exports.Video = Video;
+var Gradient = exports.Gradient = _styledComponents.default.div.withConfig({
+  displayName: "Promostyle__Gradient",
+  componentId: "sc-kk4nna-5"
+})(["width:100%;height:100%;display:flex;align-items:center;", "{width:50%;position:absolute;top:0;left:0;", ";", ";}"], (0, _size.media)('medium'), function (_ref7) {
+  var copyLeft = _ref7.copyLeft;
+  return !copyLeft && (0, _styledComponents.css)(["left:auto;right:0;"]);
+}, function (_ref8) {
+  var hasVideo = _ref8.hasVideo,
+    behindTextGradient = _ref8.behindTextGradient;
+  return hasVideo !== false && behindTextGradient !== 'none' && (0, _styledComponents.css)(["overflow:hidden;background-color:", ";box-shadow:0px 0px 50px 60px ", ";"], behindTextGradient === 'black' ? 'rgba(0,0,0,0.5)' : 'rgba(255, 255, 255, 0.5)', behindTextGradient === 'black' ? 'rgba(0,0,0,0.5)' : 'rgba(255, 255, 255, 0.5)');
+});

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

@@ -1,21 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _react = _interopRequireDefault(require("react"));
-
 require("jest-styled-components");
-
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
-
 var _Promo = _interopRequireDefault(require("./Promo"));
-
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
-
 var _Link = _interopRequireDefault(require("../../Atoms/Link/Link"));
-
 var defaultData = require('../../../styleguide/data/data').defaultData;
-
 it('renders Promo correctly', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Promo.default, {
     backgroundColor: "blue_dark",

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

@@ -1,39 +1,28 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _PromoVideoButton = require("./_PromoVideoButton.style");
-
 var _excluded = ["videoProgress"];
-
-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; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }
 var ProgressRing = function ProgressRing(_ref) {
   var videoProgress = _ref.videoProgress,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var thisStroke = 4;
   var thisRadius = 28;
   var initNormRadius = thisRadius - thisStroke * 2;
   var thisCircumference = initNormRadius * 2 * Math.PI;
-
   var _useState = (0, _react.useState)(initNormRadius * 2 * Math.PI),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      thisDashOffset = _useState2[0],
-      setThisDashOffset = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    thisDashOffset = _useState2[0],
+    setThisDashOffset = _useState2[1];
   (0, _react.useEffect)(function () {
     var offset = thisCircumference - videoProgress / 100 * thisCircumference;
     setThisDashOffset(offset);
@@ -52,6 +41,4 @@ var ProgressRing = function ProgressRing(_ref) {
     cy: "".concat(thisRadius)
   }, rest))));
 };
-
-var _default = ProgressRing;
-exports.default = _default;
+var _default = exports.default = ProgressRing;

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

@@ -1,101 +1,90 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _Promo = require("./Promo.style");
-
 var _PromoVideoButton = _interopRequireDefault(require("./_PromoVideoButton"));
-
-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; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }
 var PromoVideo = function PromoVideo(_ref) {
-  var lightColouredVideo = _ref.lightColouredVideo,
-      copyLeft = _ref.copyLeft,
-      thisVideoSrc = _ref.thisVideoSrc,
-      thisPoster = _ref.thisPoster,
-      autoPlay = _ref.autoPlay,
-      loop = _ref.loop,
-      showPosterAfterPlaying = _ref.showPosterAfterPlaying;
-
+  var behindTextGradient = _ref.behindTextGradient,
+    copyLeft = _ref.copyLeft,
+    thisVideoSrc = _ref.thisVideoSrc,
+    thisPoster = _ref.thisPoster,
+    autoPlay = _ref.autoPlay,
+    loop = _ref.loop,
+    showPosterAfterPlaying = _ref.showPosterAfterPlaying,
+    blackPlayButton = _ref.blackPlayButton;
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isPlaying = _useState2[0],
-      setIsPlaying = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isPlaying = _useState2[0],
+    setIsPlaying = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      isRestarting = _useState4[0],
-      setIsRestarting = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isRestarting = _useState4[0],
+    setIsRestarting = _useState4[1];
   var _useState5 = (0, _react.useState)(0),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      videoProgress = _useState6[0],
-      setVideoProgress = _useState6[1];
-
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    videoProgress = _useState6[0],
+    setVideoProgress = _useState6[1];
   var videoEl = (0, _react.useRef)(null);
-
   var togglePlay = function togglePlay() {
-    if (isPlaying) videoEl.current.pause();else videoEl.current.play();
-    setIsPlaying(!isPlaying);
+    if (videoEl.current) {
+      if (isPlaying) videoEl.current.pause();else videoEl.current.play();
+      setIsPlaying(!isPlaying);
+    }
   };
-
   var updateTime = function updateTime() {
-    if (videoEl.current.duration) {
+    if (videoEl.current && videoEl.current.duration) {
       // Calculate the percentage of the video played:
-      var percentage = Math.round(videoEl.current.currentTime / videoEl.current.duration * 100); // Because a completely smooth animation is impossible with the 250ms-ish frequency of
+      var 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%.
-
       var nearest = 25;
       var roundedPercentage = percentage + nearest / 2 - (percentage + nearest / 2) % nearest;
       setVideoProgress(roundedPercentage);
     }
-  }; // Only loads once the initial screensize check is complete
-
+  };
 
+  // Only loads once the initial screensize check is complete
   (0, _react.useEffect)(function () {
     // 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
-
+      videoEl.current.addEventListener('timeupdate', updateTime);
+      // Trigger on-load autoplay if apppropriate
       if (autoPlay && !isPlaying) {
         togglePlay();
       }
-
       videoEl.current.addEventListener('ended', function () {
         // 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:
+        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:
-
+          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
-
+        }
 
+        // Grace period to allow the animation to reset
         setTimeout(function () {
           setIsRestarting(false);
         }, 100);
       });
-    } // CERTAINLY don't want this re-running for EACH of these variable updates, sorry Lint...
+    }
+    // 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 /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Promo.Video, {
     ref: videoEl,
@@ -107,10 +96,9 @@ var PromoVideo = function PromoVideo(_ref) {
     videoProgress: videoProgress,
     togglePlay: togglePlay,
     isPlaying: isPlaying,
-    lightColouredVideo: lightColouredVideo,
+    behindTextGradient: behindTextGradient,
+    blackPlayButton: blackPlayButton,
     isRestarting: isRestarting
   }));
 };
-
-var _default = PromoVideo;
-exports.default = _default;
+var _default = exports.default = PromoVideo;

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

@@ -1,31 +1,24 @@
 "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({
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_PromoVideoButton.PlayButtonWrapper, {
+    className: "weewee"
+  }, /*#__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;
+var _default = exports.default = PromoVideoButton;