@comicrelief/component-library 7.24.0 → 7.24.2

package/dist/components/Molecules/SingleMessageDS/SingleMessageDs.style.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,96 +9,132 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
-var boxShadow = 'box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15)';
-var Container = exports.Container = _styledComponents.default.div.withConfig({
+const boxShadow = 'box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15)';
+const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "SingleMessageDsstyle__Container",
   componentId: "sc-s8zd7s-0"
-})(["display:flex;position:relative;flex-direction:column;justify-content:space-around;background:", ";@media ", "{flex-direction:", ";}"], function (_ref) {
-  var theme = _ref.theme,
-    backgroundColor = _ref.backgroundColor;
+})(["display:flex;position:relative;flex-direction:column;justify-content:space-around;background:", ";@media ", "{flex-direction:", ";}"], _ref => {
+  let {
+    theme,
+    backgroundColor
+  } = _ref;
   return theme.color(backgroundColor);
-}, function (_ref2) {
-  var theme = _ref2.theme;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.breakpoint('small');
-}, function (_ref3) {
-  var imageLeft = _ref3.imageLeft;
+}, _ref3 => {
+  let {
+    imageLeft
+  } = _ref3;
   return imageLeft ? 'row' : 'row-reverse';
 });
-var Subtitle = exports.Subtitle = (0, _styledComponents.default)(_Text.default).withConfig({
+const Subtitle = exports.Subtitle = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "SingleMessageDsstyle__Subtitle",
   componentId: "sc-s8zd7s-1"
 })(["letter-spacing:0.03em;text-transform:uppercase;"]);
-var Image = exports.Image = _styledComponents.default.div.withConfig({
+const Image = exports.Image = _styledComponents.default.div.withConfig({
   displayName: "SingleMessageDsstyle__Image",
   componentId: "sc-s8zd7s-2"
-})(["height:100%;@media ", "{height:448px;}img{border-radius:1rem;", ";}"], function (_ref4) {
-  var theme = _ref4.theme;
+})(["height:100%;@media ", "{height:448px;}img{border-radius:1rem;", ";}"], _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.breakpoint('small');
 }, boxShadow);
-var MediaLink = exports.MediaLink = _styledComponents.default.a.withConfig({
+const MediaLink = exports.MediaLink = _styledComponents.default.a.withConfig({
   displayName: "SingleMessageDsstyle__MediaLink",
   componentId: "sc-s8zd7s-3"
-})(["", ";@media ", "{margin:0;height:448px;flex-grow:0;flex-shrink:0;flex-basis:50%;}"], function (_ref5) {
-  var imageLeft = _ref5.imageLeft;
+})(["", ";@media ", "{margin:0;height:448px;flex-grow:0;flex-shrink:0;flex-basis:50%;}"], _ref5 => {
+  let {
+    imageLeft
+  } = _ref5;
   return imageLeft ? "margin-right: ".concat((0, _spacing.default)('m')) : "margin-left: ".concat((0, _spacing.default)('m'));
-}, function (_ref6) {
-  var theme = _ref6.theme;
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
   return theme.breakpoint('small');
 });
-var PlayHolder = exports.PlayHolder = _styledComponents.default.div.withConfig({
+const PlayHolder = exports.PlayHolder = _styledComponents.default.div.withConfig({
   displayName: "SingleMessageDsstyle__PlayHolder",
   componentId: "sc-s8zd7s-4"
 })(["position:relative;"]);
-var PlayImage = exports.PlayImage = _styledComponents.default.img.withConfig({
+const PlayImage = exports.PlayImage = _styledComponents.default.img.withConfig({
   displayName: "SingleMessageDsstyle__PlayImage",
   componentId: "sc-s8zd7s-5"
 })(["position:absolute;margin:auto;", ";top:0;right:0;bottom:0;left:0;"], (0, _zIndex.default)('medium'));
-var CloseButton = exports.CloseButton = _styledComponents.default.button.withConfig({
+const CloseButton = exports.CloseButton = _styledComponents.default.button.withConfig({
   displayName: "SingleMessageDsstyle__CloseButton",
   componentId: "sc-s8zd7s-6"
 })(["position:absolute;z-index:2;top:-45px;right:0px;display:inline-block;width:35px;height:35px;overflow:hidden;border:none;background:transparent;:before{content:'';position:absolute;height:2px;width:100%;top:50%;left:0;margin-top:-1px;background:#fff;border-radius:5px;margin-top:-6px;transform:rotate(45deg);}:after{content:'';position:absolute;height:2px;width:100%;top:50%;left:0;margin-top:-1px;background:#fff;border-radius:5px;margin-top:-6px;transform:rotate(-45deg);}"]);
-var CTA = exports.CTA = _styledComponents.default.div.withConfig({
+const CTA = exports.CTA = _styledComponents.default.div.withConfig({
   displayName: "SingleMessageDsstyle__CTA",
   componentId: "sc-s8zd7s-7"
-})(["position:absolute;bottom:-", ";", ";a{font-family:", ";}@media ", "{", "}"], (0, _spacing.default)('m'), (0, _zIndex.default)('medium'), function (_ref7) {
-  var theme = _ref7.theme;
+})(["position:absolute;bottom:-", ";", ";a{font-family:", ";}@media ", "{", "}"], (0, _spacing.default)('m'), (0, _zIndex.default)('medium'), _ref7 => {
+  let {
+    theme
+  } = _ref7;
   return theme.fontFamilies('Montserrat');
-}, function (_ref8) {
-  var theme = _ref8.theme;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
   return theme.breakpoint('small');
-}, function (_ref9) {
-  var hasImage = _ref9.hasImage;
+}, _ref9 => {
+  let {
+    hasImage
+  } = _ref9;
   return !hasImage && "bottom: -".concat((0, _spacing.default)('m'), ";");
 });
-var Copy = exports.Copy = _styledComponents.default.div.withConfig({
+const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   displayName: "SingleMessageDsstyle__Copy",
   componentId: "sc-s8zd7s-8"
-})(["position:relative;height:auto;padding:", ";", ";display:flex;flex-direction:column;border-radius:1rem;", ";background:", ";", ";", ";@media ", "{min-height:448px;height:auto;width:calc(50% + 1.5rem);flex-grow:0;flex-shrink:0;flex-basis:calc(50% + 1.5rem);padding:", ";", ";", ";}@media ", "{padding:calc(", " * 2);", ";margin:", ";}"], (0, _spacing.default)('m'), (0, _zIndex.default)('low'), boxShadow, function (_ref10) {
-  var theme = _ref10.theme,
-    backgroundColor = _ref10.backgroundColor;
+})(["position:relative;height:auto;padding:", ";", ";display:flex;flex-direction:column;border-radius:1rem;", ";background:", ";", ";", ";@media ", "{min-height:448px;height:auto;width:calc(50% + 1.5rem);flex-grow:0;flex-shrink:0;flex-basis:calc(50% + 1.5rem);padding:", ";", ";", ";}@media ", "{padding:calc(", " * 2);", ";margin:", ";}"], (0, _spacing.default)('m'), (0, _zIndex.default)('low'), boxShadow, _ref10 => {
+  let {
+    theme,
+    backgroundColor
+  } = _ref10;
   return theme.color(backgroundColor);
-}, function (_ref11) {
-  var hasLink = _ref11.hasLink;
+}, _ref11 => {
+  let {
+    hasLink
+  } = _ref11;
   return hasLink && "padding-bottom: calc(".concat((0, _spacing.default)('l'), " + ").concat((0, _spacing.default)('m'), ")");
-}, function (_ref12) {
-  var imageLeft = _ref12.imageLeft;
+}, _ref12 => {
+  let {
+    imageLeft
+  } = _ref12;
   return imageLeft ? "margin: -".concat((0, _spacing.default)('m'), " 0 ").concat((0, _spacing.default)('m'), " ").concat((0, _spacing.default)('m'), "; ").concat(CTA, " { right: ").concat((0, _spacing.default)('m'), ";}") : "margin: -".concat((0, _spacing.default)('m'), " ").concat((0, _spacing.default)('m'), " ").concat((0, _spacing.default)('m'), " 0; ").concat(CTA, " { left: ").concat((0, _spacing.default)('m'), ";}");
-}, function (_ref13) {
-  var theme = _ref13.theme;
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
   return theme.breakpoint('small');
-}, (0, _spacing.default)('l'), function (_ref14) {
-  var hasLink = _ref14.hasLink;
+}, (0, _spacing.default)('l'), _ref14 => {
+  let {
+    hasLink
+  } = _ref14;
   return hasLink && "padding-bottom: calc(".concat((0, _spacing.default)('l'), " + ").concat((0, _spacing.default)('m'), ")");
-}, function (_ref15) {
-  var imageLeft = _ref15.imageLeft;
+}, _ref15 => {
+  let {
+    imageLeft
+  } = _ref15;
   return imageLeft ? "margin: ".concat((0, _spacing.default)('l'), " 0 ").concat((0, _spacing.default)('m'), " -").concat((0, _spacing.default)('m')) : "margin: ".concat((0, _spacing.default)('l'), " -").concat((0, _spacing.default)('m'), " ").concat((0, _spacing.default)('m'), " 0");
-}, function (_ref16) {
-  var theme = _ref16.theme;
+}, _ref16 => {
+  let {
+    theme
+  } = _ref16;
   return theme.breakpoint('large');
-}, (0, _spacing.default)('m'), function (_ref17) {
-  var hasLink = _ref17.hasLink;
+}, (0, _spacing.default)('m'), _ref17 => {
+  let {
+    hasLink
+  } = _ref17;
   return hasLink && "padding-bottom: calc(".concat((0, _spacing.default)('m'), " * 3)");
-}, function (_ref18) {
-  var imageLeft = _ref18.imageLeft;
+}, _ref18 => {
+  let {
+    imageLeft
+  } = _ref18;
   return imageLeft ? "".concat((0, _spacing.default)('l'), " 0 ").concat((0, _spacing.default)('m'), " -").concat((0, _spacing.default)('l')) : "".concat((0, _spacing.default)('l'), " -").concat((0, _spacing.default)('l'), " ").concat((0, _spacing.default)('m'), " 0");
 });

package/dist/components/Molecules/SingleMessageDS/SingleMessageDs.test.js

@@ -1,6 +1,6 @@
 "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"));
@@ -8,8 +8,8 @@ var _SingleMessageDs = _interopRequireDefault(require("./SingleMessageDs"));
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 var _Download = _interopRequireDefault(require("../../Atoms/Icons/Download"));
 var _data = require("../../../styleguide/data/data");
-it('renders correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SingleMessageDs.default, {
+it('renders correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SingleMessageDs.default, {
     target: "_blank",
     link: "/home",
     linkLabel: "Check out the shop",

package/dist/components/Molecules/Typeahead/Typeahead.js

@@ -1,107 +1,72 @@
 "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 _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _lodash = require("lodash");
 var _TextInputWithDropdown = _interopRequireDefault(require("../../Atoms/TextInputWithDropdown/TextInputWithDropdown"));
-var _excluded = ["optionFetcher", "optionParser", "onSelect", "id", "label", "name", "dropdownInstruction", "notFoundMessage", "fetchErrorHandler"];
-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; }
 // These just felt about right to me but could be changed.
-var DELAY_DURATION = 300;
-var MIN_CHARS_FOR_FETCH = 2;
-var Typeahead = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var optionFetcher = _ref.optionFetcher,
-    optionParser = _ref.optionParser,
-    _onSelect = _ref.onSelect,
-    id = _ref.id,
-    label = _ref.label,
-    name = _ref.name,
-    dropdownInstruction = _ref.dropdownInstruction,
-    notFoundMessage = _ref.notFoundMessage,
-    fetchErrorHandler = _ref.fetchErrorHandler,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useState = (0, _react.useState)([]),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    options = _useState2[0],
-    setOptions = _useState2[1];
-  var _useState3 = (0, _react.useState)(''),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    errorMsg = _useState4[0],
-    setErrorMsg = _useState4[1];
-  var handleChange = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(query) {
-      var queryTrimmed, newOptions, newErrorMessage;
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              // Resetting options / errorMsg as soon as the input changes seemed to me to be the nicest UX
-              // (but happy to take advice on this!)
-              setOptions([]);
-              setErrorMsg('');
-              queryTrimmed = query.trim();
-              if (!(queryTrimmed.length < MIN_CHARS_FOR_FETCH)) {
-                _context.next = 5;
-                break;
-              }
-              return _context.abrupt("return");
-            case 5:
-              _context.prev = 5;
-              _context.next = 8;
-              return optionFetcher(query);
-            case 8:
-              newOptions = _context.sent;
-              if (newOptions.length > 0) {
-                setOptions(newOptions);
-              } else {
-                setErrorMsg(notFoundMessage);
-              }
-              _context.next = 16;
-              break;
-            case 12:
-              _context.prev = 12;
-              _context.t0 = _context["catch"](5);
-              newErrorMessage = fetchErrorHandler(_context.t0);
-              setErrorMsg(newErrorMessage || '');
-            case 16:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, null, [[5, 12]]);
-    }));
-    return function handleChange(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+const DELAY_DURATION = 300;
+const MIN_CHARS_FOR_FETCH = 2;
+const Typeahead = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    optionFetcher,
+    optionParser,
+    onSelect,
+    id,
+    label,
+    name,
+    dropdownInstruction,
+    notFoundMessage,
+    fetchErrorHandler,
+    ...rest
+  } = _ref;
+  const [options, setOptions] = (0, _react.useState)([]);
+  const [errorMsg, setErrorMsg] = (0, _react.useState)('');
+  const handleChange = async query => {
+    // Resetting options / errorMsg as soon as the input changes seemed to me to be the nicest UX
+    // (but happy to take advice on this!)
+    setOptions([]);
+    setErrorMsg('');
+    const queryTrimmed = query.trim();
+    if (queryTrimmed.length < MIN_CHARS_FOR_FETCH) {
+      return;
+    }
+    try {
+      const newOptions = await optionFetcher(query);
+      if (newOptions.length > 0) {
+        setOptions(newOptions);
+      } else {
+        setErrorMsg(notFoundMessage);
+      }
+    } catch (err) {
+      const newErrorMessage = fetchErrorHandler(err);
+      setErrorMsg(newErrorMessage || '');
+    }
+  };
 
   // useCallback is needed so that the debounced function is not recreated on each render.
   // (Dependency array needs to be empty to ensure that this is the case).
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  var debouncedHandleChange = (0, _react.useCallback)((0, _lodash.debounce)(handleChange, DELAY_DURATION), []);
+  const debouncedHandleChange = (0, _react.useCallback)((0, _lodash.debounce)(handleChange, DELAY_DURATION), []);
   return /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.default, Object.assign({
     defaultValue: "",
     options: optionParser ? options.map(optionParser) : options,
     errorMsg: errorMsg,
-    onChange: function onChange(e) {
-      var newValue = e.currentTarget.value;
+    onChange: e => {
+      const newValue = e.currentTarget.value;
       debouncedHandleChange(newValue);
     },
-    onSelect: function onSelect(parsedOption, optionIndex) {
+    onSelect: (parsedOption, optionIndex) => {
       // return the original option, not the parsed value
-      var selectedOption = options[optionIndex];
+      const selectedOption = options[optionIndex];
 
       // pass the selected value up to the parent via callback
-      _onSelect(selectedOption);
+      onSelect(selectedOption);
 
       // reset
       setOptions([]);
@@ -118,8 +83,6 @@ var Typeahead = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 Typeahead.defaultProps = {
   dropdownInstruction: null,
   optionParser: null,
-  fetchErrorHandler: function fetchErrorHandler() {
-    return 'Sorry, there was an unexpected error. Please try again';
-  }
+  fetchErrorHandler: () => 'Sorry, there was an unexpected error. Please try again'
 };
 var _default = exports.default = Typeahead;

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

@@ -1,46 +1,23 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _axios = _interopRequireDefault(require("axios"));
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _Typeahead = _interopRequireDefault(require("./Typeahead"));
-var schoolsLookup = /*#__PURE__*/function () {
-  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(query) {
-    var response;
-    return _regenerator.default.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return _axios.default.get('https://lookups.sls.comicrelief.com/schools/lookup', {
-              params: {
-                query: query
-              }
-            });
-          case 2:
-            response = _context.sent;
-            return _context.abrupt("return", response.data.data.schools.map(function (school) {
-              return school.name;
-            }));
-          case 4:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee);
-  }));
-  return function schoolsLookup(_x) {
-    return _ref.apply(this, arguments);
-  };
-}();
-it('renders correctly', function () {
-  var renderer = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Typeahead.default, {
+const schoolsLookup = async query => {
+  const response = await _axios.default.get('https://lookups.sls.comicrelief.com/schools/lookup', {
+    params: {
+      query
+    }
+  });
+  return response.data.data.schools.map(school => school.name);
+};
+it('renders correctly', () => {
+  const renderer = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Typeahead.default, {
     optionFetcher: schoolsLookup,
-    onSelect: function onSelect() {},
+    onSelect: () => {},
     id: "typeahead-test",
     label: "Typeahead test",
     name: "q",

package/dist/components/Molecules/VideoBanner/VideoBanner.js

@@ -1,41 +1,36 @@
 "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 _styledComponents = _interopRequireDefault(require("styled-components"));
-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 Video = _styledComponents.default.video.attrs(function () {
-  return {
-    playsInline: true
-  };
-}).withConfig({
+const Video = _styledComponents.default.video.attrs(() => ({
+  playsInline: true
+})).withConfig({
   displayName: "VideoBanner__Video",
   componentId: "sc-wxn2ep-0"
 })(["width:100%;height:100%;"]);
-var VideoBanner = function VideoBanner(_ref) {
-  var video = _ref.video,
-    poster = _ref.poster,
-    controls = _ref.controls,
-    autoPlay = _ref.autoPlay,
-    loop = _ref.loop,
-    muted = _ref.muted,
-    showPosterAfterPlaying = _ref.showPosterAfterPlaying;
+const VideoBanner = _ref => {
+  let {
+    video,
+    poster,
+    controls,
+    autoPlay,
+    loop,
+    muted,
+    showPosterAfterPlaying
+  } = _ref;
   // Use the prop as our default
-  var _useState = (0, _react.useState)(muted),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isMuted = _useState2[0],
-    setIsMuted = _useState2[1];
-  var videoEl = (0, _react.useRef)(null);
-  var triggerPlay = function triggerPlay() {
+  const [isMuted, setIsMuted] = (0, _react.useState)(muted);
+  const videoEl = (0, _react.useRef)(null);
+  const triggerPlay = () => {
     videoEl.current.play();
   };
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     // Trigger onload autoplay based on prop:
     if (autoPlay) {
       // As it's a Chrome requirement to mute any autoplay videos,
@@ -46,7 +41,7 @@ var VideoBanner = function VideoBanner(_ref) {
 
     // And attach event listener based on prop:
     if (!loop && showPosterAfterPlaying) {
-      videoEl.current.addEventListener('ended', function () {
+      videoEl.current.addEventListener('ended', () => {
         // Reloads video, which re-shows poster
         videoEl.current.load();
       });

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

@@ -1,14 +1,14 @@
 "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 _VideoBanner = _interopRequireDefault(require("./VideoBanner"));
 var _VideoBannerPosterImage = _interopRequireDefault(require("../../../styleguide/assets/VideoBannerPosterImage.png"));
-it("renders correctly", function () {
-  var src = "https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4";
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_VideoBanner.default, {
+it("renders correctly", () => {
+  const src = "https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4";
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_VideoBanner.default, {
     poster: _VideoBannerPosterImage.default,
     video: src
   })).toJSON();

package/dist/components/Organisms/CookieBanner/CookieBanner.js

@@ -1,16 +1,18 @@
 "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 _react = _interopRequireDefault(require("react"));
 var _CookieBanner = require("./CookieBanner.style");
-var CookieBanner = function CookieBanner(_ref) {
-  var acceptCookie = _ref.acceptCookie,
-    denyCookie = _ref.denyCookie,
-    cookiePolicyUrl = _ref.cookiePolicyUrl;
+const CookieBanner = _ref => {
+  let {
+    acceptCookie,
+    denyCookie,
+    cookiePolicyUrl
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_CookieBanner.CookieWrapper, null, /*#__PURE__*/_react.default.createElement(_CookieBanner.CookieText, {
     tag: "p",
     color: "white"

package/dist/components/Organisms/CookieBanner/CookieBanner.style.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,31 +10,39 @@ var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 var _Link = _interopRequireDefault(require("../../Atoms/Link/Link"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-var CookieWrapper = exports.CookieWrapper = _styledComponents.default.div.withConfig({
+const CookieWrapper = exports.CookieWrapper = _styledComponents.default.div.withConfig({
   displayName: "CookieBannerstyle__CookieWrapper",
   componentId: "sc-m69qcz-0"
-})(["display:flex;position:relative;padding:", ";background:", ";flex-direction:column;", ";"], (0, _spacing.default)('md'), function (_ref) {
-  var theme = _ref.theme;
+})(["display:flex;position:relative;padding:", ";background:", ";flex-direction:column;", ";"], (0, _spacing.default)('md'), _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.color('deep_violet_dark');
 }, (0, _zIndex.default)('high'));
-var CookieText = exports.CookieText = (0, _styledComponents.default)(_Text.default).withConfig({
+const CookieText = exports.CookieText = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "CookieBannerstyle__CookieText",
   componentId: "sc-m69qcz-1"
-})(["line-height:1.5;margin:0;&:first-of-type{margin-bottom:", ";}@media ", "{width:75%;margin:", " auto;&:first-of-type{margin-bottom:", ";}}"], (0, _spacing.default)('sm'), function (_ref2) {
-  var theme = _ref2.theme;
+})(["line-height:1.5;margin:0;&:first-of-type{margin-bottom:", ";}@media ", "{width:75%;margin:", " auto;&:first-of-type{margin-bottom:", ";}}"], (0, _spacing.default)('sm'), _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.breakpoint('small');
 }, (0, _spacing.default)('none'), (0, _spacing.default)('md'));
-var AcceptCookieBtn = exports.AcceptCookieBtn = (0, _styledComponents.default)(_Link.default).withConfig({
+const AcceptCookieBtn = exports.AcceptCookieBtn = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "CookieBannerstyle__AcceptCookieBtn",
   componentId: "sc-m69qcz-2"
-})(["padding:", " ", ";display:block;margin-bottom:10px;@media ", "{margin:0 ", " 0 0;display:inline-block;}"], (0, _spacing.default)('sm'), (0, _spacing.default)('md'), function (_ref3) {
-  var theme = _ref3.theme;
+})(["padding:", " ", ";display:block;margin-bottom:10px;@media ", "{margin:0 ", " 0 0;display:inline-block;}"], (0, _spacing.default)('sm'), (0, _spacing.default)('md'), _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme.breakpoint('small');
 }, (0, _spacing.default)('xsm'));
-var LinkStyle = exports.LinkStyle = (0, _styledComponents.default)(_Link.default).withConfig({
+const LinkStyle = exports.LinkStyle = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "CookieBannerstyle__LinkStyle",
   componentId: "sc-m69qcz-3"
-})(["color:", ";padding:0 ", " 1px;border-bottom:2px solid;"], function (_ref4) {
-  var theme = _ref4.theme;
+})(["color:", ";padding:0 ", " 1px;border-bottom:2px solid;"], _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.color('white');
 }, (0, _spacing.default)('xsm'));

package/dist/components/Organisms/CookieBanner/CookieBanner.test.js

@@ -1,17 +1,17 @@
 "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 _CookieBanner = _interopRequireDefault(require("./CookieBanner"));
-it('renders correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_CookieBanner.default, {
-    acceptCookie: function acceptCookie(e) {
+it('renders correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_CookieBanner.default, {
+    acceptCookie: e => {
       e.preventDefault();
       return 'User accept';
     },
-    denyCookie: function denyCookie(e) {
+    denyCookie: e => {
       e.preventDefault();
       return 'User does not accept cookies';
     },