@comicrelief/component-library 7.22.0 → 7.23.0

package/dist/components/Organisms/Header/Nav/Nav.js

@@ -1,73 +1,52 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
-
 var _BurgerMenu = _interopRequireDefault(require("../Burger/BurgerMenu"));
-
 var _breakpoint = require("../../../../theme/shared/breakpoint");
-
 var _navHelper = _interopRequireDefault(require("../../../../utils/navHelper"));
-
 var _internalLinkHelper = require("../../../../utils/internalLinkHelper");
-
 var _allowListed = _interopRequireDefault(require("../../../../utils/allowListed"));
-
 var _chevronDown = _interopRequireDefault(require("./chevron-down.svg"));
-
 var _Nav = require("./Nav.style");
-
-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 MainNav = function MainNav(_ref) {
   var navItems = _ref.navItems;
   var menuGroups = navItems.menuGroups;
-
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isExpandable = _useState2[0],
-      setIsExpandable = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isExpandable = _useState2[0],
+    setIsExpandable = _useState2[1];
   var _useState3 = (0, _react.useState)({}),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      isSubMenuOpen = _useState4[0],
-      setIsSubMenuOpen = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isSubMenuOpen = _useState4[0],
+    setIsSubMenuOpen = _useState4[1];
   var _useState5 = (0, _react.useState)({}),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      isKeyPressed = _useState6[0],
-      setIsKeyPressed = _useState6[1];
-
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isKeyPressed = _useState6[0],
+    setIsKeyPressed = _useState6[1];
   var _useState7 = (0, _react.useState)(false),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      isMobile = _useState8[0],
-      setIsMobile = _useState8[1];
-
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    isMobile = _useState8[0],
+    setIsMobile = _useState8[1];
   var toggleBurgerMenu = function toggleBurgerMenu(event) {
     event.preventDefault();
     setIsExpandable(!isExpandable);
   };
-
   var toggleSubMenu = function toggleSubMenu(e, item) {
     e.preventDefault();
     setIsSubMenuOpen((0, _defineProperty2.default)({}, item, !isSubMenuOpen[item]));
-  }; // Handle tab key on menu nav
-
+  };
 
+  // Handle tab key on menu nav
   var keyPressed = function keyPressed(item) {
     return function () {
       window.onkeyup = function (e) {
@@ -79,7 +58,6 @@ var MainNav = function MainNav(_ref) {
       };
     };
   };
-
   (0, _react.useEffect)(function () {
     var width = window.innerWidth;
     setIsMobile(width < _breakpoint.sizes.nav);
@@ -100,8 +78,8 @@ var MainNav = function MainNav(_ref) {
   }, menuGroups.map(function (group, index) {
     /* Grab the first links properties to use for our parent/button */
     var thisFirstChild = group.links[0];
-    /* Determine which field represents our url path */
 
+    /* Determine which field represents our url path */
     var thisUrl = (0, _navHelper.default)(thisFirstChild);
     var relNoopener = !(0, _allowListed.default)(thisUrl) && 'noopener';
     var hasSubMenu = group.links && group.links.length > 1;
@@ -142,8 +120,8 @@ var MainNav = function MainNav(_ref) {
     }, group.links.map(function (child, childIndex) {
       var thisSubUrl = (0, _navHelper.default)(child);
       thisSubUrl = (0, _internalLinkHelper.InternalLinkHelper)(thisSubUrl);
-      /* Wrap our first child item with special tags */
 
+      /* Wrap our first child item with special tags */
       if (childIndex === 0) {
         return /*#__PURE__*/_react.default.createElement(_Nav.SubNavItem, {
           role: "none",
@@ -154,7 +132,6 @@ var MainNav = function MainNav(_ref) {
           role: "menuitem"
         }, /*#__PURE__*/_react.default.createElement(_Text.default, null, child.title)));
       }
-
       return /*#__PURE__*/_react.default.createElement(_Nav.SubNavItem, {
         key: thisSubUrl
       }, /*#__PURE__*/_react.default.createElement(_Nav.SubNavLink, {
@@ -168,9 +145,7 @@ var MainNav = function MainNav(_ref) {
     isExpandable: isExpandable
   }, "Open"));
 };
-
 MainNav.defaultProps = {
   navItems: {}
 };
-var _default = MainNav;
-exports.default = _default;
+var _default = exports.default = MainNav;

package/dist/components/Organisms/Header/Nav/Nav.style.js

@@ -1,22 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChevronWrapper = exports.SubNavLinkUnderline = exports.SubNavLink = exports.SubNavItem = exports.SubNavMenu = exports.NavLink = exports.NavItem = exports.NavMenu = exports.Nav = void 0;
-
+exports.SubNavMenu = exports.SubNavLinkUnderline = exports.SubNavLink = exports.SubNavItem = exports.NavMenu = exports.NavLink = exports.NavItem = exports.Nav = exports.ChevronWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _Link = _interopRequireDefault(require("../../../Atoms/Link/Link"));
-
 var _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hideVisually"));
-
 var _zIndex = _interopRequireDefault(require("../../../../theme/shared/zIndex"));
-
 var _size = require("../../../../theme/shared/size");
-
 var NavLinkClass = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "Navstyle__NavLinkClass",
   componentId: "sc-1ss3uk2-0"
@@ -27,11 +20,11 @@ var NavLinkClass = (0, _styledComponents.default)(_Link.default).withConfig({
   var theme = _ref2.theme;
   return theme.color('deep_violet_dark');
 });
+
 /**
  * Navigation menu
  */
-
-var Nav = _styledComponents.default.nav.withConfig({
+var Nav = exports.Nav = _styledComponents.default.nav.withConfig({
   displayName: "Navstyle__Nav",
   componentId: "sc-1ss3uk2-1"
 })(["display:", ";width:100%;position:absolute;top:75px;left:0;", ";@media (min-width:", "){width:50%;right:0;left:inherit;}@media ", "{", ";position:relative;top:0;display:block;margin:0 10px;width:auto;height:100%;}> h2{", ";}"], function (_ref3) {
@@ -41,14 +34,11 @@ var Nav = _styledComponents.default.nav.withConfig({
   var theme = _ref4.theme;
   return theme.breakpoint('nav');
 }, (0, _zIndex.default)('medium'), _hideVisually.default);
+
 /**
  * Sub Navigation Menu (second level)
  */
-
-
-exports.Nav = Nav;
-
-var SubNavMenu = _styledComponents.default.ul.withConfig({
+var SubNavMenu = exports.SubNavMenu = _styledComponents.default.ul.withConfig({
   displayName: "Navstyle__SubNavMenu",
   componentId: "sc-1ss3uk2-2"
 })(["display:", ";padding:0;position:relative;list-style:none outside;left:0;top:0;flex-direction:column;justify-content:center;align-items:center;background-color:", ";@media ", "{display:none;display:", ";top:90px;position:absolute;padding:0 0 20px;width:250px;height:auto;}"], function (_ref5) {
@@ -64,14 +54,11 @@ var SubNavMenu = _styledComponents.default.ul.withConfig({
   var isKeyPressed = _ref8.isKeyPressed;
   return isKeyPressed ? 'flex' : 'none';
 });
+
 /**
  * Sub Menu list items
  */
-
-
-exports.SubNavMenu = SubNavMenu;
-
-var SubNavItem = _styledComponents.default.li.withConfig({
+var SubNavItem = exports.SubNavItem = _styledComponents.default.li.withConfig({
   displayName: "Navstyle__SubNavItem",
   componentId: "sc-1ss3uk2-3"
 })(["padding:0;height:100%;width:100%;:hover{background-color:", ";span{border-bottom:0;padding-bottom:2px;color:", ";}}"], function (_ref9) {
@@ -81,25 +68,22 @@ var SubNavItem = _styledComponents.default.li.withConfig({
   var theme = _ref10.theme;
   return theme.color('white');
 });
+
 /**
  * Sub menu link item
  */
-
-
-exports.SubNavItem = SubNavItem;
-var SubNavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
+var SubNavLink = exports.SubNavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
   displayName: "Navstyle__SubNavLink",
   componentId: "sc-1ss3uk2-4"
 })(["padding:14px 14px 7px 21px;color:", ";height:auto;position:relative;"], function (_ref11) {
   var theme = _ref11.theme;
   return theme.color('white');
 });
+
 /**
  * Sub menu link item underline
  */
-
-exports.SubNavLink = SubNavLink;
-var SubNavLinkUnderline = (0, _styledComponents.default)(SubNavLink).withConfig({
+var SubNavLinkUnderline = exports.SubNavLinkUnderline = (0, _styledComponents.default)(SubNavLink).withConfig({
   displayName: "Navstyle__SubNavLinkUnderline",
   componentId: "sc-1ss3uk2-5"
 })(["padding:26px 21px;::after{content:'';position:absolute;width:14px;border-bottom:2px solid ", ";left:12px;top:auto;bottom:10px;margin:0 10px;}@media ", "{::before{display:block;position:absolute;content:'';left:34px;width:10px;height:10px;border:11px solid transparent;border-bottom-color:", ";top:-22px;}:hover::before{border-bottom-color:", ";}}"], function (_ref12) {
@@ -115,13 +99,11 @@ var SubNavLinkUnderline = (0, _styledComponents.default)(SubNavLink).withConfig(
   var theme = _ref15.theme;
   return theme.color('deep_violet_light');
 });
+
 /**
  * Navigation Menu (first level)
  */
-
-exports.SubNavLinkUnderline = SubNavLinkUnderline;
-
-var NavMenu = _styledComponents.default.ul.withConfig({
+var NavMenu = exports.NavMenu = _styledComponents.default.ul.withConfig({
   displayName: "Navstyle__NavMenu",
   componentId: "sc-1ss3uk2-6"
 })(["background-color:", ";list-style:none outside;padding:0;margin:0;@media ", "{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;background-color:", ";}"], function (_ref16) {
@@ -134,13 +116,11 @@ var NavMenu = _styledComponents.default.ul.withConfig({
   var theme = _ref18.theme;
   return theme.color('white');
 });
+
 /**
  * Menu item link
  */
-
-
-exports.NavMenu = NavMenu;
-var NavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
+var NavLink = exports.NavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
   displayName: "Navstyle__NavLink",
   componentId: "sc-1ss3uk2-7"
 })(["display:flex;gap:4px;font-family:", ";@media ", "{padding:10px 0;height:auto;:focus + ", "{display:flex;}}"], function (_ref19) {
@@ -150,13 +130,11 @@ var NavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
   var theme = _ref20.theme;
   return theme.breakpoint('nav');
 }, SubNavMenu);
+
 /**
  * Menu list items
  */
-
-exports.NavLink = NavLink;
-
-var NavItem = _styledComponents.default.li.withConfig({
+var NavItem = exports.NavItem = _styledComponents.default.li.withConfig({
   displayName: "Navstyle__NavItem",
   componentId: "sc-1ss3uk2-8"
 })(["", ";position:relative;font-weight:700;:hover{li{span{border-bottom:none;padding-bottom:0;}}}li{span{border-bottom:none;padding-bottom:0;}:hover{span{border-bottom:none;padding-bottom:0;}}}:hover{background-color:", ";}@media ", "{margin:0 4px;padding:25px 5px;:hover > ", ",:focus-within > ", "{visibility:visible;opacity:1;display:flex;}:hover{background-color:transparent;", ";span{border-bottom:2px solid ", ";padding-bottom:2px;}", "{display:flex;flex-direction:column;}}}"], (0, _zIndex.default)('medium'), function (_ref21) {
@@ -169,12 +147,7 @@ var NavItem = _styledComponents.default.li.withConfig({
   var theme = _ref23.theme;
   return theme.color('black');
 }, SubNavMenu);
-
-exports.NavItem = NavItem;
-
-var ChevronWrapper = _styledComponents.default.div.withConfig({
+var ChevronWrapper = exports.ChevronWrapper = _styledComponents.default.div.withConfig({
   displayName: "Navstyle__ChevronWrapper",
   componentId: "sc-1ss3uk2-9"
-})(["width:12px;padding-top:2px;"]);
-
-exports.ChevronWrapper = ChevronWrapper;
+})(["width:12px;padding-top:2px;"]);

package/dist/components/Organisms/Header/data/data.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = {
+var _default = exports.default = {
   title: 'Header',
   menuGroups: [{
     title: 'Fundraising - menu group',
@@ -164,5 +164,4 @@ var _default = {
       }
     }]
   }]
-};
-exports.default = _default;
+};

package/dist/components/Organisms/Header/header.test.js

@@ -1,14 +1,16 @@
 "use strict";
 
 require("jest-styled-components");
-
 /* eslint-disable react/jsx-wrap-multilines */
 // import React from 'react';
+
 // import renderWithTheme from '../../../hoc/shallowWithTheme';
 // import Header from './Header';
+
 // import data from './data/data';
 // import Link from '../../Atoms/Link/Link';
-it('renders correctly', function () {// const tree = renderWithTheme(
+it('renders correctly', function () {
+  // const tree = renderWithTheme(
   //   <Header
   //     navItems={data}
   //     metaIcons={
@@ -18,5 +20,6 @@ it('renders correctly', function () {// const tree = renderWithTheme(
   //     }
   //   />
   // ).toJSON();
+
   // expect(tree).toMatchSnapshot();
 });

package/dist/components/Organisms/ImpactSlider/ImpactMoneybuys.style.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OrLabel = exports.MoneybuyWrapper = exports.MoneybuyImage = exports.MoneybuyDescription = exports.MoneybuyAmount = exports.Moneybuy = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
+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 MoneybuyWrapper = exports.MoneybuyWrapper = _styledComponents.default.div.withConfig({
+  displayName: "ImpactMoneybuysstyle__MoneybuyWrapper",
+  componentId: "sc-1lsmpzi-0"
+})(["margin-top:32px;width:100%;display:flex;align-content:space-between;flex-direction:column;justify-content:space-between;align-items:center;@media ", "{flex-direction:row;align-items:stretch;}"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.breakpoint('medium');
+});
+var Moneybuy = exports.Moneybuy = _styledComponents.default.div.withConfig({
+  displayName: "ImpactMoneybuysstyle__Moneybuy",
+  componentId: "sc-1lsmpzi-1"
+})(["display:inherit;width:100%;padding:8px 20px;height:auto;background-color:white;border-radius:10px;border:1px solid ", ";;position:relative;flex-direction:row;align-items:center;justify-content:flex-start;opacity:1;", " @media ", "{width:70%;padding:8px 40px;}@media ", "{padding:20px 14px;flex-direction:column;width:18%;max-height:none;}"], function (props) {
+  return props.theme.color('black');
+}, function (props) {
+  return props.isInactive && (0, _styledComponents.css)(["opacity:0.5;"]);
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.breakpoint('small');
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.breakpoint('medium');
+});
+var OrLabel = exports.OrLabel = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "ImpactMoneybuysstyle__OrLabel",
+  componentId: "sc-1lsmpzi-2"
+})(["display:inherit;align-items:center;margin:8px 0;font-size:14px;"]);
+var MoneybuyImage = exports.MoneybuyImage = _styledComponents.default.span.withConfig({
+  displayName: "ImpactMoneybuysstyle__MoneybuyImage",
+  componentId: "sc-1lsmpzi-3"
+})(["background:center / 65% no-repeat url(\"", "\"),", ";width:48px;height:48px;border-radius:48px;@media ", "{width:0;height:0;padding:30%;border-radius:100%;}"], function (props) {
+  return props.imageURL;
+}, function (props) {
+  return props.theme.color('grey_extra_light');
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.breakpoint('medium');
+});
+var MoneybuyAmount = exports.MoneybuyAmount = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "ImpactMoneybuysstyle__MoneybuyAmount",
+  componentId: "sc-1lsmpzi-4"
+})(["text-align:center;margin:0 10px;width:25%;@media ", "{margin:8px 15px 2px;width:auto;}"], function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.breakpoint('medium');
+});
+var MoneybuyDescription = exports.MoneybuyDescription = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "ImpactMoneybuysstyle__MoneybuyDescription",
+  componentId: "sc-1lsmpzi-5"
+})(["text-align:left;width:50%;@media ", "{width:100%;text-align:center;}"], function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.breakpoint('medium');
+});

package/dist/components/Organisms/ImpactSlider/ImpactSlider.js

@@ -0,0 +1,71 @@
+"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 _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
+var _Slider = _interopRequireDefault(require("./_Slider"));
+var _ImpactMoneybuys = _interopRequireDefault(require("./_ImpactMoneybuys"));
+var _utils = _interopRequireDefault(require("./_utils"));
+var _ImpactSlider = require("./ImpactSlider.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 ImpactSlider = function ImpactSlider(_ref) {
+  var heading = _ref.heading,
+    cartID = _ref.cartID,
+    donateLink = _ref.donateLink,
+    rowID = _ref.rowID,
+    items = _ref.items,
+    step = _ref.step,
+    max = _ref.max,
+    opacityAnimation = _ref.opacityAnimation,
+    children = _ref.children,
+    defaultSliderValue = _ref.defaultSliderValue;
+  // Use the lowest possible amount as our default:
+  var _useState = (0, _react.useState)(defaultSliderValue || step),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    currentAmount = _useState2[0],
+    setCurrentAmount = _useState2[1];
+  var handleChange = function handleChange(thisValue) {
+    if (thisValue) {
+      // Return the value of the 'thumb' we care about:
+      setCurrentAmount(thisValue[1]);
+    }
+  };
+  var handleSubmit = function handleSubmit() {
+    (0, _utils.default)(currentAmount, donateLink, cartID, rowID);
+  };
+  return /*#__PURE__*/_react.default.createElement(_ImpactSlider.OuterWrapper, null, /*#__PURE__*/_react.default.createElement(_ImpactSlider.InnerWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    tag: "h1",
+    family: "Anton",
+    uppercase: true,
+    weight: "normal",
+    size: "xl"
+  }, heading), /*#__PURE__*/_react.default.createElement(_ImpactSlider.Copy, null, children), /*#__PURE__*/_react.default.createElement(_ImpactSlider.CurrentAmountCopy, {
+    tag: "p",
+    size: "s"
+  }, "A donation of", ' ', "\xA3", currentAmount, ' ', "could help pay for:"), /*#__PURE__*/_react.default.createElement(_Slider.default, {
+    currentAmount: currentAmount,
+    min: step,
+    max: max,
+    handleChange: handleChange,
+    steps: step
+  }), /*#__PURE__*/_react.default.createElement(_ImpactMoneybuys.default, {
+    items: items,
+    currentAmount: currentAmount,
+    opacityAnimation: opacityAnimation
+  }), /*#__PURE__*/_react.default.createElement(_ImpactSlider.SubmitButton, {
+    type: "submit",
+    onClick: handleSubmit,
+    disabled: currentAmount === 0
+  }, "Donate \xA3", currentAmount, ' ', "now")));
+};
+ImpactSlider.defaultProps = {
+  opacityAnimation: false,
+  defaultSliderValue: null
+};
+var _default = exports.default = ImpactSlider;

package/dist/components/Organisms/ImpactSlider/ImpactSlider.md

@@ -0,0 +1,42 @@
+# Impact Slider (w/opacity animation)
+
+```js
+const { testImpactSliderItems} = require('../../../styleguide/data/data');
+import Text from '../../Atoms/Text/Text';
+
+<ImpactSlider
+  heading="Your donations will change lives"
+  donateLink="https://donation-staging.spa.comicrelief.com"
+  rowID="to-come-from-the-cms"
+  cartID="to-also-come-from-the-cms"
+  items={testImpactSliderItems}
+  step={5}
+  max={100}
+  opacityAnimation={true}
+  >
+    <Text tag="p" color="black">
+      Use this slider to see how your donation can make a difference to lives in the UK and around the globe this winter.
+    </Text>
+  </ImpactSlider>
+```
+
+# Impact Slider (w/o opacity animation, w/default value)
+```js
+const { testImpactSliderItems} = require('../../../styleguide/data/data');
+import Text from '../../Atoms/Text/Text';
+
+<ImpactSlider
+  heading="Your donations will change lives"
+  donateLink="https://donation-staging.spa.comicrelief.com"
+  rowID="to-come-from-the-cms"
+  cartID="to-also-come-from-the-cms"
+  items={testImpactSliderItems}
+  step={5}
+  max={100}
+  defaultSliderValue={45}
+  >
+    <Text tag="p" color="black">
+      Use this slider to see how your donation can make a difference to lives in the UK and around the globe this winter.
+    </Text>
+  </ImpactSlider>
+```

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SubmitButton = exports.OuterWrapper = exports.InnerWrapper = exports.CurrentAmountCopy = exports.Copy = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
+var _Button = _interopRequireDefault(require("../../Atoms/Button/Button"));
+var OuterWrapper = exports.OuterWrapper = _styledComponents.default.div.withConfig({
+  displayName: "ImpactSliderstyle__OuterWrapper",
+  componentId: "sc-1fpimol-0"
+})(["position:relative;margin:0 auto;max-width:100%;background-color:", ";padding:32px 16px;@media ", "{padding:50px;}@media ", "{padding:64px 0;}"], function (props) {
+  return props.theme.color('grey_extra_light');
+}, function (_ref) {
+  var theme = _ref.theme;
+  return theme.breakpoint('small');
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.breakpoint('medium');
+});
+var InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withConfig({
+  displayName: "ImpactSliderstyle__InnerWrapper",
+  componentId: "sc-1fpimol-1"
+})(["width:100%;max-width:780px;margin:0 auto;@media ", "{h1{font-size:48px;line-height:48px;}}"], function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.breakpoint('medium');
+});
+var Copy = exports.Copy = _styledComponents.default.div.withConfig({
+  displayName: "ImpactSliderstyle__Copy",
+  componentId: "sc-1fpimol-2"
+})(["position:relative;@media ", "{p{font-size:20px;line-height:24.38px;}}"], function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.breakpoint('medium');
+});
+var CurrentAmountCopy = exports.CurrentAmountCopy = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "ImpactSliderstyle__CurrentAmountCopy",
+  componentId: "sc-1fpimol-3"
+})(["font-weight:bold;margin-top:16px;@media ", "{font-size:20px;line-height:24.38px;margin:24px 0 38px;}"], function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.breakpoint('medium');
+});
+var SubmitButton = exports.SubmitButton = (0, _styledComponents.default)(_Button.default).withConfig({
+  displayName: "ImpactSliderstyle__SubmitButton",
+  componentId: "sc-1fpimol-4"
+})(["margin:32px auto 0;width:100%;font-family:", ";display:block;@media ", "{width:70%;margin:40px auto 0;}@media ", "{width:100%;}"], function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.fontFamilies(theme.font.regular);
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.breakpoint('small');
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.breakpoint('medium');
+});

package/dist/components/Organisms/ImpactSlider/Slider.style.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledRangerSlider = exports.SliderWrapper = exports.SliderLabel = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactRangeSliderInput = _interopRequireDefault(require("react-range-slider-input"));
+var thumbSize = 30;
+var outlineSize = thumbSize / 2.5;
+var sizeMultiplier = 1.4;
+var StyledRangerSlider = exports.StyledRangerSlider = (0, _styledComponents.default)(_reactRangeSliderInput.default).withConfig({
+  displayName: "Sliderstyle__StyledRangerSlider",
+  componentId: "sc-pyds3x-0"
+})(["background:white;height:16px;border-radius:16px;border:1px solid ", ";.range-slider__range{height:14px;border-radius:10px;background-color:", ";z-index:2;}.range-slider__thumb[data-upper]{&:after{background-color:white;width:", "px;height:", "px;content:\"\";position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;border-radius:50%;border:", "px solid ", ";transition-property:width,height,border-width;transition-duration:0.15s;}&:hover{&:after{width:", "px;height:", "px;border-width:", "px;}}}.range-slider__thumb[data-lower]{width:0;}"], function (props) {
+  return props.theme.color('black');
+}, function (props) {
+  return props.theme.color('red');
+}, thumbSize, thumbSize, outlineSize, function (props) {
+  return props.theme.color('red');
+}, thumbSize * sizeMultiplier, thumbSize * sizeMultiplier, outlineSize);
+var SliderWrapper = exports.SliderWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Sliderstyle__SliderWrapper",
+  componentId: "sc-pyds3x-1"
+})(["width:100%;margin-top:25px;"]);
+var SliderLabel = exports.SliderLabel = _styledComponents.default.label.withConfig({
+  displayName: "Sliderstyle__SliderLabel",
+  componentId: "sc-pyds3x-2"
+})(["border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;"]);

package/dist/components/Organisms/ImpactSlider/_ImpactMoneybuys.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ImpactMoneybuys = require("./ImpactMoneybuys.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 Moneybuys = function Moneybuys(_ref) {
+  var items = _ref.items,
+    currentAmount = _ref.currentAmount,
+    opacityAnimation = _ref.opacityAnimation;
+  return /*#__PURE__*/_react.default.createElement(_ImpactMoneybuys.MoneybuyWrapper, null, items.map(function (item, index) {
+    var roundedPerPound = Math.floor(item.poundsPerItem);
+    var thisAmount = Math.floor(currentAmount / roundedPerPound);
+    var isInactive = !(!opacityAnimation || currentAmount >= roundedPerPound);
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+      key: roundedPerPound
+    }, /*#__PURE__*/_react.default.createElement(_ImpactMoneybuys.Moneybuy, {
+      isInactive: isInactive,
+      "data-testid": "impact-slider--moneybuy-".concat(index + 1)
+    }, /*#__PURE__*/_react.default.createElement(_ImpactMoneybuys.MoneybuyImage, {
+      imageURL: item.imageURL
+    }), /*#__PURE__*/_react.default.createElement(_ImpactMoneybuys.MoneybuyAmount, {
+      tag: "p",
+      family: "Anton",
+      uppercase: true,
+      weight: "normal",
+      size: "xl",
+      "data-testid": "moneybuy-amount"
+    }, thisAmount), /*#__PURE__*/_react.default.createElement(_ImpactMoneybuys.MoneybuyDescription, {
+      tag: "p",
+      size: "sm",
+      "data-testid": "moneybuy-description"
+    }, item.description)), index < items.length - 1 && /*#__PURE__*/_react.default.createElement(_ImpactMoneybuys.OrLabel, {
+      tag: "span"
+    }, "Or"));
+  }));
+};
+var _default = exports.default = Moneybuys;