@comicrelief/component-library 7.24.0 → 7.24.2

package/dist/components/Molecules/CardDs/CardDs.js

@@ -1,96 +1,121 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+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 _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _Link = _interopRequireDefault(require("../../Atoms/Link/Link"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
-var _excluded = ["icon", "backgroundColor", "imageLow", "images", "image", "imageAltText", "height", "width", "children", "link", "linkLabel", "target"];
-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 = _styledComponents.default.div.withConfig({
+const Container = _styledComponents.default.div.withConfig({
   displayName: "CardDs__Container",
   componentId: "sc-mayd3d-0"
-})(["display:flex;position:relative;flex-direction:column;height:100%;width:100%;background:", ";@media ", "{flex-direction:row;}@media ", "{flex-direction:column;}"], function (_ref) {
-  var theme = _ref.theme,
-    backgroundColor = _ref.backgroundColor;
+})(["display:flex;position:relative;flex-direction:column;height:100%;width:100%;background:", ";@media ", "{flex-direction:row;}@media ", "{flex-direction:column;}"], _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 theme = _ref3.theme;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme.breakpoint('large');
 });
-var Image = _styledComponents.default.div.withConfig({
+const Image = _styledComponents.default.div.withConfig({
   displayName: "CardDs__Image",
   componentId: "sc-mayd3d-1"
 })(["height:auto;margin:0 -", " 0 ", ";img{border-radius:", ";box-shadow:0 0 ", " rgba(0,0,0,0.15);}"], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('md'), (0, _spacing.default)('md'));
-var MediaLink = _styledComponents.default.a.withConfig({
+const MediaLink = _styledComponents.default.a.withConfig({
   displayName: "CardDs__MediaLink",
   componentId: "sc-mayd3d-2"
-})(["width:100%;@media ", "{width:calc(50% + 6rem);}@media ", "{width:100%;}"], function (_ref4) {
-  var theme = _ref4.theme;
+})(["width:100%;@media ", "{width:calc(50% + 6rem);}@media ", "{width:100%;}"], _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.breakpoint('small');
-}, function (_ref5) {
-  var theme = _ref5.theme;
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.breakpoint('large');
 });
-var Copy = _styledComponents.default.div.withConfig({
+const Copy = _styledComponents.default.div.withConfig({
   displayName: "CardDs__Copy",
   componentId: "sc-mayd3d-3"
-})(["padding:", ";", ";display:flex;flex-direction:column;border-radius:", ";box-shadow:0 0 ", " rgba(0,0,0,0.15);background:", ";width:100%;@media ", "{height:100%;}", ";", ";"], (0, _spacing.default)('l'), function (_ref6) {
-  var hasLink = _ref6.hasLink;
+})(["padding:", ";", ";display:flex;flex-direction:column;border-radius:", ";box-shadow:0 0 ", " rgba(0,0,0,0.15);background:", ";width:100%;@media ", "{height:100%;}", ";", ";"], (0, _spacing.default)('l'), _ref6 => {
+  let {
+    hasLink
+  } = _ref6;
   return hasLink && "padding-bottom: ".concat((0, _spacing.default)('xl'));
-}, (0, _spacing.default)('md'), (0, _spacing.default)('md'), function (_ref7) {
-  var theme = _ref7.theme,
-    backgroundColor = _ref7.backgroundColor;
+}, (0, _spacing.default)('md'), (0, _spacing.default)('md'), _ref7 => {
+  let {
+    theme,
+    backgroundColor
+  } = _ref7;
   return theme.color(backgroundColor);
-}, function (_ref8) {
-  var theme = _ref8.theme;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
   return theme.breakpoint('large');
-}, (0, _zIndex.default)('low'), function (_ref9) {
-  var hasImage = _ref9.hasImage;
-  return hasImage && (0, _styledComponents.css)(["margin-top:calc(-2 * ", ");min-height:calc(5 * ", ");@media ", "{margin:", " 0 -", " -", ";width:calc(50% + 6rem);}@media ", "{margin:calc(-2 * ", ") 0 -", " 0;width:100%;}"], (0, _spacing.default)('m'), (0, _spacing.default)('l'), function (_ref10) {
-    var theme = _ref10.theme;
+}, (0, _zIndex.default)('low'), _ref9 => {
+  let {
+    hasImage
+  } = _ref9;
+  return hasImage && (0, _styledComponents.css)(["margin-top:calc(-2 * ", ");min-height:calc(5 * ", ");@media ", "{margin:", " 0 -", " -", ";width:calc(50% + 6rem);}@media ", "{margin:calc(-2 * ", ") 0 -", " 0;width:100%;}"], (0, _spacing.default)('m'), (0, _spacing.default)('l'), _ref10 => {
+    let {
+      theme
+    } = _ref10;
     return theme.breakpoint('small');
-  }, (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('m'), function (_ref11) {
-    var theme = _ref11.theme;
+  }, (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('m'), _ref11 => {
+    let {
+      theme
+    } = _ref11;
     return theme.breakpoint('large');
   }, (0, _spacing.default)('m'), (0, _spacing.default)('m'));
 });
-var CTA = _styledComponents.default.div.withConfig({
+const CTA = _styledComponents.default.div.withConfig({
   displayName: "CardDs__CTA",
   componentId: "sc-mayd3d-4"
-})(["position:absolute;right:", ";bottom:-", ";", ";@media ", "{bottom:calc(-1 * (", " + ", "));", ";}"], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _zIndex.default)('medium'), function (_ref12) {
-  var theme = _ref12.theme;
+})(["position:absolute;right:", ";bottom:-", ";", ";@media ", "{bottom:calc(-1 * (", " + ", "));", ";}"], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _zIndex.default)('medium'), _ref12 => {
+  let {
+    theme
+  } = _ref12;
   return theme.breakpoint('small');
-}, (0, _spacing.default)('l'), (0, _spacing.default)('md'), function (_ref13) {
-  var hasImage = _ref13.hasImage;
+}, (0, _spacing.default)('l'), (0, _spacing.default)('md'), _ref13 => {
+  let {
+    hasImage
+  } = _ref13;
   return !hasImage && "bottom: -".concat((0, _spacing.default)('m'), ";");
 });
-var CardDs = function CardDs(_ref14) {
-  var icon = _ref14.icon,
-    backgroundColor = _ref14.backgroundColor,
-    imageLow = _ref14.imageLow,
-    images = _ref14.images,
-    image = _ref14.image,
-    imageAltText = _ref14.imageAltText,
-    height = _ref14.height,
-    width = _ref14.width,
-    children = _ref14.children,
-    link = _ref14.link,
-    linkLabel = _ref14.linkLabel,
-    target = _ref14.target,
-    rest = (0, _objectWithoutProperties2.default)(_ref14, _excluded);
-  var Media = /*#__PURE__*/_react.default.createElement(Image, {
+const CardDs = _ref14 => {
+  let {
+    icon,
+    backgroundColor,
+    imageLow,
+    images,
+    image,
+    imageAltText,
+    height,
+    width,
+    children,
+    link,
+    linkLabel,
+    target,
+    ...rest
+  } = _ref14;
+  const Media = /*#__PURE__*/_react.default.createElement(Image, {
     hasLink: link
   }, /*#__PURE__*/_react.default.createElement(_Picture.default, {
     alt: imageAltText,
@@ -101,7 +126,7 @@ var CardDs = function CardDs(_ref14) {
     width: width,
     height: height
   }));
-  var hasMedia = function hasMedia() {
+  const hasMedia = () => {
     if (imageLow && link) {
       return /*#__PURE__*/_react.default.createElement(MediaLink, Object.assign({
         "aria-hidden": "true",
@@ -116,7 +141,7 @@ var CardDs = function CardDs(_ref14) {
     }
     return null;
   };
-  var external = target === 'blank' ? 'noopener' : null;
+  const external = target === 'blank' ? 'noopener' : null;
   return /*#__PURE__*/_react.default.createElement(Container, rest, hasMedia(), /*#__PURE__*/_react.default.createElement(Copy, {
     hasImage: imageLow,
     hasLink: link,

package/dist/components/Molecules/CardDs/CardDs.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 _CardDs = _interopRequireDefault(require("./CardDs"));
 var _data = require("../../../styleguide/data/data");
 var _index = require("../../Atoms/Icons/index");
-it('renders correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_CardDs.default, {
+it('renders correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_CardDs.default, {
     target: "_blank",
     link: "/home",
     linkLabel: "Find out more",

package/dist/components/Molecules/Chip/Chip.js

@@ -1,17 +1,19 @@
 "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 _Chip = require("./Chip.style");
-var Chip = function Chip(_ref) {
-  var category = _ref.category,
-    handleToggle = _ref.handleToggle,
-    color = _ref.color,
-    checked = _ref.checked;
+const Chip = _ref => {
+  let {
+    category,
+    handleToggle,
+    color,
+    checked
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_Chip.CheckLabel, null, /*#__PURE__*/_react.default.createElement(_Chip.CheckInput, {
     onChange: handleToggle,
     type: "checkbox",

package/dist/components/Molecules/Chip/Chip.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
 });
@@ -19,7 +19,7 @@ var _CR_SafePlace = _interopRequireDefault(require("./assets/CR_SafePlace.svg"))
 var _CR_Partnerships = _interopRequireDefault(require("./assets/CR_Partnerships.svg"));
 var _CR_Children = _interopRequireDefault(require("./assets/CR_Children.svg"));
 var _clear = _interopRequireDefault(require("./assets/clear.svg"));
-var selectIcon = function selectIcon(name) {
+const selectIcon = name => {
   switch (name) {
     case 'How we Fund':
       return _CR_Funding.default;
@@ -43,54 +43,74 @@ var selectIcon = function selectIcon(name) {
       return null;
   }
 };
-var LabelGroup = exports.LabelGroup = _styledComponents.default.div.withConfig({
+const LabelGroup = exports.LabelGroup = _styledComponents.default.div.withConfig({
   displayName: "Chipstyle__LabelGroup",
   componentId: "sc-6s9oo3-0"
 })(["display:flex;flex-wrap:wrap;"]);
-var CheckLabel = exports.CheckLabel = _styledComponents.default.label.withConfig({
+const CheckLabel = exports.CheckLabel = _styledComponents.default.label.withConfig({
   displayName: "Chipstyle__CheckLabel",
   componentId: "sc-6s9oo3-1"
 })(["display:flex;align-items:center;width:auto;height:48px;border-radius:2rem;background-color:#d5d5d5;margin:", " ", " 0 0;padding:4px;padding-right:1rem;flex:0 0 auto;position:relative;", "{margin:", " ", " 0 0;}"], (0, _spacing.default)('sm'), (0, _spacing.default)('sm'), (0, _breakpoint.default)('small'), (0, _spacing.default)('md'), (0, _spacing.default)('md'));
-var Overlay = exports.Overlay = _styledComponents.default.span.withConfig({
+const Overlay = exports.Overlay = _styledComponents.default.span.withConfig({
   displayName: "Chipstyle__Overlay",
   componentId: "sc-6s9oo3-2"
-})(["display:block;position:absolute;width:100%;height:100%;opacity:0.2;border-radius:2rem;left:0;top:0;right:0;bottom:0;", ";:hover{background:", ";}"], (0, _zIndex.default)('low'), function (_ref) {
-  var theme = _ref.theme;
+})(["display:block;position:absolute;width:100%;height:100%;opacity:0.2;border-radius:2rem;left:0;top:0;right:0;bottom:0;", ";:hover{background:", ";}"], (0, _zIndex.default)('low'), _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.color('grey_medium');
 });
-var CheckInput = exports.CheckInput = _styledComponents.default.input.withConfig({
+const CheckInput = exports.CheckInput = _styledComponents.default.input.withConfig({
   displayName: "Chipstyle__CheckInput",
   componentId: "sc-6s9oo3-3"
-})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;left:0px;width:40px;height:40px;margin:0;border:1px solid ", ";+ span{background:url(", ") no-repeat center;background-size:24px;margin-right:", ";width:40px;height:40px;border-radius:50%;background-color:", ";float:left;", ";}:checked ~ span{background-size:24px;background-color:", ";}:focus + span{border-color:", ";border-width:3px;}:focus + span{border-color:", ";border-width:3px;}"], function (_ref2) {
-  var theme = _ref2.theme;
+})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;left:0px;width:40px;height:40px;margin:0;border:1px solid ", ";+ span{background:url(", ") no-repeat center;background-size:24px;margin-right:", ";width:40px;height:40px;border-radius:50%;background-color:", ";float:left;", ";}:checked ~ span{background-size:24px;background-color:", ";}:focus + span{border-color:", ";border-width:3px;}:focus + span{border-color:", ";border-width:3px;}"], _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.fontSize('sm');
-}, function (_ref3) {
-  var theme = _ref3.theme;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme.color('grey_for_forms');
-}, function (_ref4) {
-  var value = _ref4.value;
+}, _ref4 => {
+  let {
+    value
+  } = _ref4;
   return selectIcon(value);
-}, (0, _spacing.default)('md'), function (_ref5) {
-  var theme = _ref5.theme;
+}, (0, _spacing.default)('md'), _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.color('grey');
-}, (0, _zIndex.default)('medium'), function (_ref6) {
-  var theme = _ref6.theme,
-    color = _ref6.color;
+}, (0, _zIndex.default)('medium'), _ref6 => {
+  let {
+    theme,
+    color
+  } = _ref6;
   return theme.color(color);
-}, function (_ref7) {
-  var theme = _ref7.theme;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
   return theme.color('grey_for_forms');
-}, function (_ref8) {
-  var theme = _ref8.theme;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
   return theme.color('grey_for_forms');
 });
-var ClearButton = exports.ClearButton = _styledComponents.default.button.withConfig({
+const ClearButton = exports.ClearButton = _styledComponents.default.button.withConfig({
   displayName: "Chipstyle__ClearButton",
   componentId: "sc-6s9oo3-4"
-})(["border-radius:2rem;background:none;padding:", " ", ";margin:", " 0 0 0;border:1px solid ", ";outline:none;padding-left:3rem;position:relative;height:48px;:focus{border-color:", ";}:before{content:'';background:url(", ") no-repeat center;width:20px;height:20px;display:block;position:absolute;left:1rem;}"], (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('md'), function (_ref9) {
-  var theme = _ref9.theme;
+})(["border-radius:2rem;background:none;padding:", " ", ";margin:", " 0 0 0;border:1px solid ", ";outline:none;padding-left:3rem;position:relative;height:48px;:focus{border-color:", ";}:before{content:'';background:url(", ") no-repeat center;width:20px;height:20px;display:block;position:absolute;left:1rem;}"], (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('md'), _ref9 => {
+  let {
+    theme
+  } = _ref9;
   return theme.color('grey_medium');
-}, function (_ref10) {
-  var theme = _ref10.theme;
+}, _ref10 => {
+  let {
+    theme
+  } = _ref10;
   return theme.color('grey_for_forms');
 }, _clear.default);

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

@@ -1,15 +1,13 @@
 "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 _Chip = _interopRequireDefault(require("./Chip"));
-it('renders article teaser correctly', function () {
-  var handleToggle = function handleToggle(e) {
-    return e.target.value;
-  };
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Chip.default, {
+it('renders article teaser correctly', () => {
+  const handleToggle = e => e.target.value;
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Chip.default, {
     category: "Gender Justice",
     handleToggle: handleToggle
   })).toJSON();

package/dist/components/Molecules/Countdown/Countdown.js

@@ -1,57 +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 _moment = _interopRequireDefault(require("moment"));
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 var _Countdown = require("./Countdown.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 Countdown = function Countdown(_ref) {
-  var endDate = _ref.endDate,
-    color = _ref.color,
-    endMessage = _ref.endMessage,
-    introMessage = _ref.introMessage;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    countdownHasEnded = _useState2[0],
-    setCountdownHasEnded = _useState2[1];
-  var _useState3 = (0, _react.useState)({
-      days: '00',
-      hours: '00',
-      minutes: '00',
-      seconds: '00'
-    }),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    countdownTime = _useState4[0],
-    setCountdownTime = _useState4[1];
-  var countDownDate = (0, _moment.default)(endDate);
-  (0, _react.useEffect)(function () {
-    var interval = setInterval(function () {
-      var now = (0, _moment.default)();
-      var timeRemaining = (0, _moment.default)(countDownDate - now);
-      var days = timeRemaining.format('DDD');
-      var hours = timeRemaining.format('HH');
-      var minutes = timeRemaining.format('mm');
-      var seconds = timeRemaining.format('ss');
+const Countdown = _ref => {
+  let {
+    endDate,
+    color,
+    endMessage,
+    introMessage
+  } = _ref;
+  const [countdownHasEnded, setCountdownHasEnded] = (0, _react.useState)(false);
+  const [countdownTime, setCountdownTime] = (0, _react.useState)({
+    days: '00',
+    hours: '00',
+    minutes: '00',
+    seconds: '00'
+  });
+  const countDownDate = (0, _moment.default)(endDate);
+  (0, _react.useEffect)(() => {
+    const interval = setInterval(() => {
+      const now = (0, _moment.default)();
+      const timeRemaining = (0, _moment.default)(countDownDate - now);
+      const days = timeRemaining.format('DDD');
+      const hours = timeRemaining.format('HH');
+      const minutes = timeRemaining.format('mm');
+      const seconds = timeRemaining.format('ss');
       setCountdownTime({
         days: days - 1,
         hours: hours - 1,
-        minutes: minutes,
-        seconds: seconds
+        minutes,
+        seconds
       });
       if (countDownDate.diff(now, 'seconds') < 1) {
         setCountdownHasEnded(true);
       }
     }, 1000);
-    return function () {
-      return clearInterval(interval);
-    };
+    return () => clearInterval(interval);
   }, [countDownDate]);
   if (countdownHasEnded) return endMessage;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, introMessage, /*#__PURE__*/_react.default.createElement(_Countdown.Wrapper, null, /*#__PURE__*/_react.default.createElement(_Countdown.Digits, null, /*#__PURE__*/_react.default.createElement(_Text.default, {

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

@@ -1,17 +1,17 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Wrapper = exports.Digits = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-var Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
+const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Countdownstyle__Wrapper",
   componentId: "sc-zj2fle-0"
 })(["display:flex;"]);
-var Digits = exports.Digits = _styledComponents.default.div.withConfig({
+const Digits = exports.Digits = _styledComponents.default.div.withConfig({
   displayName: "Countdownstyle__Digits",
   componentId: "sc-zj2fle-1"
 })(["display:flex;flex-direction:column;align-items:center;margin:0 ", ";&:first-child{margin-left:0;}"], (0, _spacing.default)('sm'));

package/dist/components/Molecules/Descriptor/Descriptor.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
 });
@@ -22,34 +22,36 @@ var _CR__World = _interopRequireDefault(require("./assets/CR__World.svg"));
 var _CR__SafePlace = _interopRequireDefault(require("./assets/CR__SafePlace.svg"));
 var _CR__Environment = _interopRequireDefault(require("./assets/CR__Environment.svg"));
 var _CR__Partnerships = _interopRequireDefault(require("./assets/CR__Partnerships.svg"));
-var Wrapper = _styledComponents.default.article.withConfig({
+const Wrapper = _styledComponents.default.article.withConfig({
   displayName: "Descriptor__Wrapper",
   componentId: "sc-1np5gzw-0"
-})(["position:relative;width:100%;height:100%;display:flex;background-color:", ";border-radius:", ";box-shadow:0px 0px 20px rgba(0,0,0,0.15);"], function (_ref) {
-  var theme = _ref.theme;
+})(["position:relative;width:100%;height:100%;display:flex;background-color:", ";border-radius:", ";box-shadow:0px 0px 20px rgba(0,0,0,0.15);"], _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.color('white');
 }, (0, _spacing.default)('md'));
-var InnerWrapper = _styledComponents.default.div.withConfig({
+const InnerWrapper = _styledComponents.default.div.withConfig({
   displayName: "Descriptor__InnerWrapper",
   componentId: "sc-1np5gzw-1"
 })(["padding:", ";height:100%;display:flex;flex-direction:column;width:100%;"], (0, _spacing.default)('l'));
-var Header = _styledComponents.default.div.withConfig({
+const Header = _styledComponents.default.div.withConfig({
   displayName: "Descriptor__Header",
   componentId: "sc-1np5gzw-2"
 })(["display:block;"]);
-var Date = (0, _styledComponents.default)(_Text.default).withConfig({
+const Date = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Descriptor__Date",
   componentId: "sc-1np5gzw-3"
 })(["display:inline-block;margin-bottom:", ";"], (0, _spacing.default)('md'));
-var IconWrapper = _styledComponents.default.div.withConfig({
+const IconWrapper = _styledComponents.default.div.withConfig({
   displayName: "Descriptor__IconWrapper",
   componentId: "sc-1np5gzw-4"
 })(["display:flex;position:absolute;top:0;right:0;margin-right:", ";margin-top:", ";img:not(:last-child){margin-right:8px;}"], (0, _spacing.default)('l'), (0, _spacing.default)('m'));
-var Image = _styledComponents.default.img.withConfig({
+const Image = _styledComponents.default.img.withConfig({
   displayName: "Descriptor__Image",
   componentId: "sc-1np5gzw-5"
 })(["object-fit:cover;width:24px;height:24px;"]);
-var themeSwitcher = function themeSwitcher(theme) {
+const themeSwitcher = theme => {
   switch (theme) {
     case 'Partnerships':
       return _CR__Partnerships.default;
@@ -81,23 +83,25 @@ var themeSwitcher = function themeSwitcher(theme) {
       return _CR__Funding.default;
   }
 };
-var Title = (0, _styledComponents.default)(_Text.default).withConfig({
+const Title = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Descriptor__Title",
   componentId: "sc-1np5gzw-6"
 })(["margin:0 0 ", ";"], (0, _spacing.default)('m'));
-var TagWrapper = _styledComponents.default.div.withConfig({
+const TagWrapper = _styledComponents.default.div.withConfig({
   displayName: "Descriptor__TagWrapper",
   componentId: "sc-1np5gzw-7"
 })(["margin:0 0 ", " 0;display:flex;flex-wrap:wrap;span:not(:first-child){margin-left:", ";}span:not(:first-child)::before{content:'';position:absolute;left:-9px;bottom:5px;width:3px;height:3px;background-color:currentColor;border-radius:50%;}"], (0, _spacing.default)('md'), (0, _spacing.default)('md'));
-var Tag = (0, _styledComponents.default)(_Text.default).withConfig({
+const Tag = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Descriptor__Tag",
   componentId: "sc-1np5gzw-8"
 })(["position:relative;text-transform:uppercase;"]);
-var Description = _styledComponents.default.div.withConfig({
+const Description = _styledComponents.default.div.withConfig({
   displayName: "Descriptor__Description",
   componentId: "sc-1np5gzw-9"
-})(["font-family:", ";"], function (_ref2) {
-  var theme = _ref2.theme;
+})(["font-family:", ";"], _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.fontFamilies('Montserrat');
 });
 
@@ -105,14 +109,16 @@ var Description = _styledComponents.default.div.withConfig({
  * Descriptor component
  */
 
-var Descriptor = function Descriptor(_ref3) {
-  var date = _ref3.date,
-    title = _ref3.title,
-    categories = _ref3.categories,
-    tags = _ref3.tags,
-    children = _ref3.children;
-  var tagItems = tags.map(function (tag, index) {
-    var key = tag + index;
+const Descriptor = _ref3 => {
+  let {
+    date,
+    title,
+    categories,
+    tags,
+    children
+  } = _ref3;
+  const tagItems = tags.map((tag, index) => {
+    const key = tag + index;
     return /*#__PURE__*/_react.default.createElement(Tag, {
       size: "xs",
       weight: "normal",
@@ -121,8 +127,8 @@ var Descriptor = function Descriptor(_ref3) {
       key: key
     }, tag);
   });
-  var icons = categories.map(function (theme, index) {
-    var key = theme + index;
+  const icons = categories.map((theme, index) => {
+    const key = theme + index;
     return /*#__PURE__*/_react.default.createElement(Image, {
       src: themeSwitcher(theme),
       alt: "".concat(theme, " icon"),

package/dist/components/Molecules/Descriptor/Descriptor.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 _Descriptor = _interopRequireDefault(require("./Descriptor"));
-it('renders article teaser correctly', function () {
-  var tags = ['tag1', 'tag2', 'tag3', 'tag4'];
-  var categories = ['How we fund', 'Social Tech', 'Sport for Change'];
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Descriptor.default, {
+it('renders article teaser correctly', () => {
+  const tags = ['tag1', 'tag2', 'tag3', 'tag4'];
+  const categories = ['How we fund', 'Social Tech', 'Sport for Change'];
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Descriptor.default, {
     title: "Title",
     date: "15/06/2020",
     tags: tags,