@comicrelief/component-library 7.24.0 → 7.24.2

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

@@ -1,59 +1,53 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 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 _PromoVideo = _interopRequireDefault(require("./_PromoVideo"));
 var _breakpoint = require("../../../theme/shared/breakpoint");
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _Promo = require("./Promo.style");
-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 Promo = function Promo(_ref) {
-  var copyLeft = _ref.copyLeft,
-    backgroundColor = _ref.backgroundColor,
-    imageLow = _ref.imageLow,
-    imageSet = _ref.imageSet,
-    image = _ref.image,
-    imageAltText = _ref.imageAltText,
-    children = _ref.children,
-    position = _ref.position,
-    autoPlay = _ref.autoPlay,
-    loop = _ref.loop,
-    poster = _ref.poster,
-    mobilePoster = _ref.mobilePoster,
-    showPosterAfterPlaying = _ref.showPosterAfterPlaying,
-    videoSrc = _ref.videoSrc,
-    mobileVideoSrc = _ref.mobileVideoSrc,
-    behindTextGradient = _ref.behindTextGradient,
-    blackPlayButton = _ref.blackPlayButton;
+const Promo = _ref => {
+  let {
+    copyLeft,
+    backgroundColor,
+    imageLow,
+    imageSet,
+    image,
+    imageAltText,
+    children,
+    position,
+    autoPlay,
+    loop,
+    poster,
+    mobilePoster,
+    showPosterAfterPlaying,
+    videoSrc,
+    mobileVideoSrc,
+    behindTextGradient,
+    blackPlayButton
+  } = _ref;
   // Store the appropriate prop in state, dependent on the breakpoint
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    thisVideoSrc = _useState2[0],
-    setThisVideoSrc = _useState2[1];
-  var _useState3 = (0, _react.useState)(null),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    thisPoster = _useState4[0],
-    setThisPoster = _useState4[1];
+  const [thisVideoSrc, setThisVideoSrc] = (0, _react.useState)(null);
+  const [thisPoster, setThisPoster] = (0, _react.useState)(null);
 
   // Let either field define this, just in case
-  var hasVideo = Boolean(videoSrc || mobileVideoSrc);
+  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:
-  var hasImage = Boolean(imageSet && !hasVideo);
+  const hasImage = Boolean(imageSet && !hasVideo);
 
   // Runs on initial load:
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (hasVideo) {
       // Checks size on load ONLY; don't want to mess about with listeners:
-      var isDesktop = window.innerWidth >= _breakpoint.sizes.nav; // 1024+ px
-      var currentPoster;
-      var currentSrc;
+      const isDesktop = window.innerWidth >= _breakpoint.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:

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

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,59 +10,71 @@ 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(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({
+const 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;
+})(["width:100%;display:flex;position:relative;flex-direction:column;overflow:hidden;background:", ";", "{flex-direction:row;}", " ", " ", ""], _ref => {
+  let {
+    theme,
+    backgroundColor
+  } = _ref;
   return theme.color(backgroundColor);
-}, (0, _size.media)('medium'), function (_ref2) {
-  var position = _ref2.position;
+}, (0, _size.media)('medium'), _ref2 => {
+  let {
+    position
+  } = _ref2;
   return position === 'upper' && (0, _styledComponents.css)(["clip-path:polygon(0 0,100% 0,100% 90%,0 100%);", "{clip-path:polygon(0 0,100% 0,100% 85%,0 100%);}"], (0, _size.media)('medium'));
-}, function (_ref3) {
-  var position = _ref3.position;
+}, _ref3 => {
+  let {
+    position
+  } = _ref3;
   return position === 'lower' && (0, _styledComponents.css)(["clip-path:polygon(0 10%,100% 0,100% 100%,0 100%);", "{clip-path:polygon(0 15%,100% 0,100% 100%,0 100%);}"], (0, _size.media)('medium'));
-}, function (_ref4) {
-  var position = _ref4.position;
+}, _ref4 => {
+  let {
+    position
+  } = _ref4;
   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'));
 });
-var Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
+const 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;position:relative;", ";", "{min-height:calc(100vh - 90px);}"], _size.container.medium, function (_ref5) {
-  var copyLeft = _ref5.copyLeft;
+})(["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, _ref5 => {
+  let {
+    copyLeft
+  } = _ref5;
   return !copyLeft && 'justify-content: flex-end';
 }, (0, _size.media)('medium'));
-var Copy = exports.Copy = _styledComponents.default.div.withConfig({
+const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   displayName: "Promostyle__Copy",
   componentId: "sc-kk4nna-2"
-})(["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;
+})(["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'), _ref6 => {
+  let {
+    position
+  } = _ref6;
   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'));
 });
-var Media = exports.Media = _styledComponents.default.div.withConfig({
+const 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'));
-var Video = exports.Video = _styledComponents.default.video.attrs(function () {
-  return {
-    playsInline: true
-  };
-}).withConfig({
+const Video = exports.Video = _styledComponents.default.video.attrs(() => ({
+  playsInline: true
+})).withConfig({
   displayName: "Promostyle__Video",
   componentId: "sc-kk4nna-4"
 })(["width:100%;height:100%;object-fit:cover;"]);
-var Gradient = exports.Gradient = _styledComponents.default.div.withConfig({
+const 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;
+})(["width:100%;height:100%;display:flex;align-items:center;", "{width:50%;position:absolute;top:0;left:0;", ";", ";}"], (0, _size.media)('medium'), _ref7 => {
+  let {
+    copyLeft
+  } = _ref7;
   return !copyLeft && (0, _styledComponents.css)(["left:auto;right:0;"]);
-}, function (_ref8) {
-  var hasVideo = _ref8.hasVideo,
-    behindTextGradient = _ref8.behindTextGradient;
+}, _ref8 => {
+  let {
+    hasVideo,
+    behindTextGradient
+  } = _ref8;
   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,15 +1,15 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 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, {
+const defaultData = require('../../../styleguide/data/data').defaultData;
+it('renders Promo correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Promo.default, {
     backgroundColor: "blue_dark",
     imageSet: defaultData.promoImage,
     image: defaultData.promoImage,
@@ -32,8 +32,8 @@ it('renders Promo correctly', function () {
   }, "Show me this")))).toJSON();
   expect(tree).toMatchSnapshot();
 });
-it('renders Promo correctly end position', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Promo.default, {
+it('renders Promo correctly end position', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Promo.default, {
     backgroundColor: "blue_dark",
     imageSet: defaultData.promoImage,
     image: defaultData.promoImage,

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

@@ -1,30 +1,24 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 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(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);
-  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];
-  (0, _react.useEffect)(function () {
-    var offset = thisCircumference - videoProgress / 100 * thisCircumference;
+const ProgressRing = _ref => {
+  let {
+    videoProgress,
+    ...rest
+  } = _ref;
+  const thisStroke = 4;
+  const thisRadius = 28;
+  const initNormRadius = thisRadius - thisStroke * 2;
+  const thisCircumference = initNormRadius * 2 * Math.PI;
+  const [thisDashOffset, setThisDashOffset] = (0, _react.useState)(initNormRadius * 2 * Math.PI);
+  (0, _react.useEffect)(() => {
+    const offset = thisCircumference - videoProgress / 100 * thisCircumference;
     setThisDashOffset(offset);
   }, [videoProgress, thisCircumference]);
   return /*#__PURE__*/_react.default.createElement(_PromoVideoButton.ProgressRingWrapper, {

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

@@ -1,58 +1,49 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 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(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 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];
-  var _useState3 = (0, _react.useState)(false),
-    _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];
-  var videoEl = (0, _react.useRef)(null);
-  var togglePlay = function togglePlay() {
+const PromoVideo = _ref => {
+  let {
+    behindTextGradient,
+    copyLeft,
+    thisVideoSrc,
+    thisPoster,
+    autoPlay,
+    loop,
+    showPosterAfterPlaying,
+    blackPlayButton
+  } = _ref;
+  const [isPlaying, setIsPlaying] = (0, _react.useState)(false);
+  const [isRestarting, setIsRestarting] = (0, _react.useState)(false);
+  const [videoProgress, setVideoProgress] = (0, _react.useState)(0);
+  const videoEl = (0, _react.useRef)(null);
+  const togglePlay = () => {
     if (videoEl.current) {
       if (isPlaying) videoEl.current.pause();else videoEl.current.play();
       setIsPlaying(!isPlaying);
     }
   };
-  var updateTime = function updateTime() {
+  const updateTime = () => {
     if (videoEl.current && videoEl.current.duration) {
       // Calculate the percentage of the video played:
-      var percentage = Math.round(videoEl.current.currentTime / videoEl.current.duration * 100);
+      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%.
-      var nearest = 25;
-      var roundedPercentage = percentage + nearest / 2 - (percentage + nearest / 2) % nearest;
+      const nearest = 25;
+      const roundedPercentage = percentage + nearest / 2 - (percentage + nearest / 2) % nearest;
       setVideoProgress(roundedPercentage);
     }
   };
 
   // Only loads once the initial screensize check is complete
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     // Use truthy comparison so either a null OR undefined value won't work
     if (thisVideoSrc != null) {
       videoEl.current.addEventListener('timeupdate', updateTime);
@@ -60,7 +51,7 @@ var PromoVideo = function PromoVideo(_ref) {
       if (autoPlay && !isPlaying) {
         togglePlay();
       }
-      videoEl.current.addEventListener('ended', function () {
+      videoEl.current.addEventListener('ended', () => {
         // Used purely to halt the CSS animation:
         setIsRestarting(true);
 
@@ -78,7 +69,7 @@ var PromoVideo = function PromoVideo(_ref) {
         }
 
         // Grace period to allow the animation to reset
-        setTimeout(function () {
+        setTimeout(() => {
           setIsRestarting(false);
         }, 100);
       });

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

@@ -1,22 +1,22 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 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);
+const PromoVideoButton = _ref => {
+  let {
+    togglePlay,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_PromoVideoButton.PlayButtonWrapper, {
     className: "weewee"
   }, /*#__PURE__*/_react.default.createElement(_PromoVideoButton.PlayButton, Object.assign({
-    onClick: function onClick() {
+    onClick: () => {
       togglePlay();
     }
   }, rest), /*#__PURE__*/_react.default.createElement(_PromoVideoButton.Icon, rest), /*#__PURE__*/_react.default.createElement(_ProgressRing.default, rest)));

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

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,75 +11,101 @@ 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(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 PlayButtonWrapper = exports.PlayButtonWrapper = _styledComponents.default.div.withConfig({
+const PlayButtonWrapper = exports.PlayButtonWrapper = _styledComponents.default.div.withConfig({
   displayName: "_PromoVideoButtonstyle__PlayButtonWrapper",
   componentId: "sc-17cm3uc-0"
 })(["width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;&:after{content:\"\";background-image:url(", "),url(", "),url(", "),url(", "),none;}"], _PlayWhite.default, _PauseWhite.default, _PlayBlack.default, _PauseBlack.default);
-var PlayButton = exports.PlayButton = _styledComponents.default.button.withConfig({
+const PlayButton = exports.PlayButton = _styledComponents.default.button.withConfig({
   displayName: "_PromoVideoButtonstyle__PlayButton",
   componentId: "sc-17cm3uc-1"
-})(["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.8;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;
+})(["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.8;transition:opacity 0.2s;&:hover,&:focus{opacity:1.0;}&:focus-visible{outline-style:outset;outline-width:medium;}", " ", " @media ", "{top:20px;right:20px;", "}"], _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.color('white');
-}, function (_ref2) {
-  var blackPlayButton = _ref2.blackPlayButton;
-  return blackPlayButton && (0, _styledComponents.css)(["background:", ";"], function (_ref3) {
-    var theme = _ref3.theme;
+}, _ref2 => {
+  let {
+    blackPlayButton
+  } = _ref2;
+  return blackPlayButton && (0, _styledComponents.css)(["background:", ";"], _ref3 => {
+    let {
+      theme
+    } = _ref3;
     return theme.color('black');
   });
-}, function (_ref4) {
-  var copyLeft = _ref4.copyLeft;
+}, _ref4 => {
+  let {
+    copyLeft
+  } = _ref4;
   return !copyLeft && (0, _styledComponents.css)(["right:auto;left:10px;"]);
-}, function (_ref5) {
-  var theme = _ref5.theme;
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.breakpoint('medium');
-}, function (_ref6) {
-  var copyLeft = _ref6.copyLeft;
+}, _ref6 => {
+  let {
+    copyLeft
+  } = _ref6;
   return !copyLeft && (0, _styledComponents.css)(["right:auto;left:20px;"]);
 });
-var ProgressRingWrapper = exports.ProgressRingWrapper = _styledComponents.default.span.withConfig({
+const ProgressRingWrapper = exports.ProgressRingWrapper = _styledComponents.default.span.withConfig({
   displayName: "_PromoVideoButtonstyle__ProgressRingWrapper",
   componentId: "sc-17cm3uc-2"
 })(["position:absolute;width:100%;height:100%;display:flex;"]);
-var ProgressRingSVG = exports.ProgressRingSVG = _styledComponents.default.svg.withConfig({
+const ProgressRingSVG = exports.ProgressRingSVG = _styledComponents.default.svg.withConfig({
   displayName: "_PromoVideoButtonstyle__ProgressRingSVG",
   componentId: "sc-17cm3uc-3"
 })([""]);
-var ProgressRingCircle = exports.ProgressRingCircle = _styledComponents.default.circle.withConfig({
+const ProgressRingCircle = exports.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;
+})(["z-index:100;transition:stroke-dashoffset 0.5s;transform:rotate(-90deg);transform-origin:50% 50%;stroke-dashoffset:", ";stroke:white;fill:transparent;", " ", ""], _ref7 => {
+  let {
+    strokeDashOffsetStyle
+  } = _ref7;
   return strokeDashOffsetStyle;
-}, function (_ref8) {
-  var blackPlayButton = _ref8.blackPlayButton;
-  return !blackPlayButton && (0, _styledComponents.css)(["stroke:", ";"], function (_ref9) {
-    var theme = _ref9.theme;
+}, _ref8 => {
+  let {
+    blackPlayButton
+  } = _ref8;
+  return !blackPlayButton && (0, _styledComponents.css)(["stroke:", ";"], _ref9 => {
+    let {
+      theme
+    } = _ref9;
     return theme.color('black');
   });
-}, function (_ref10) {
-  var isRestarting = _ref10.isRestarting;
+}, _ref10 => {
+  let {
+    isRestarting
+  } = _ref10;
   return isRestarting && (0, _styledComponents.css)(["transition:none;"]);
 });
-var Icon = exports.Icon = _styledComponents.default.span.withConfig({
+const Icon = exports.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 blackPlayButton = _ref11.blackPlayButton,
-    isPlaying = _ref11.isPlaying;
+})(["height:50px;width:50px;background:no-repeat center/50% url(", ") transparent;", " ", " ", " ", ""], _PlayWhite.default, _ref11 => {
+  let {
+    blackPlayButton,
+    isPlaying
+  } = _ref11;
   return blackPlayButton && !isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PlayWhite.default);
-}, function (_ref12) {
-  var blackPlayButton = _ref12.blackPlayButton,
-    isPlaying = _ref12.isPlaying;
+}, _ref12 => {
+  let {
+    blackPlayButton,
+    isPlaying
+  } = _ref12;
   return blackPlayButton && isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PauseWhite.default);
-}, function (_ref13) {
-  var blackPlayButton = _ref13.blackPlayButton,
-    isPlaying = _ref13.isPlaying;
+}, _ref13 => {
+  let {
+    blackPlayButton,
+    isPlaying
+  } = _ref13;
   return !blackPlayButton && !isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PlayBlack.default);
-}, function (_ref14) {
-  var blackPlayButton = _ref14.blackPlayButton,
-    isPlaying = _ref14.isPlaying;
+}, _ref14 => {
+  let {
+    blackPlayButton,
+    isPlaying
+  } = _ref14;
   return !blackPlayButton && isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PauseBlack.default);
 });