@comicrelief/component-library 7.22.1 → 7.23.0

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;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("react-range-slider-input/dist/style.css");
+var _Slider = require("./Slider.style");
+var Slider = function Slider(_ref) {
+  var min = _ref.min,
+    max = _ref.max,
+    currentAmount = _ref.currentAmount,
+    handleChange = _ref.handleChange,
+    steps = _ref.steps;
+  return /*#__PURE__*/_react.default.createElement(_Slider.SliderWrapper, null, /*#__PURE__*/_react.default.createElement(_Slider.SliderLabel, {
+    htmlFor: "ImpactSlider"
+  }, "Slider label to be hidden"), /*#__PURE__*/_react.default.createElement(_Slider.StyledRangerSlider, {
+    id: "ImpactSlider",
+    name: "ImpactSlider",
+    min: min,
+    max: max,
+    width: "100%",
+    value: [0, currentAmount],
+    onInput: handleChange,
+    step: steps,
+    thumbsDisabled: [true, false],
+    rangeSlideDisabled: true
+  }));
+};
+var _default = exports.default = Slider;

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var getUrlParameter = function getUrlParameter(name) {
+  var text = name.replace(/\[]/, '\\[').replace(/[\]]/, '\\]');
+  var regex = new RegExp("[\\?&]".concat(text, "=([^&#]*)"));
+  var results = regex.exec(window.location.search);
+  var param = results === null ? 'generic' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+  return param;
+};
+var handleSubmission = function handleSubmission(amount, donateLink, cartID, rowID) {
+  var currentpageUrl = window.location.href;
+  var affiliateValue = getUrlParameter(currentpageUrl);
+  var reg = /[#?|[\]\\]/g;
+  if (currentpageUrl.match(reg) !== null) {
+    var thisMatch = currentpageUrl.match(reg)[0];
+    currentpageUrl = currentpageUrl.substring(0, currentpageUrl.indexOf(thisMatch));
+  }
+
+  // - Q: do we need client IDs? A: 99% of examples just use 'donate' (or 'test' for staging)
+  //
+  // - I guess we still need rowID for the back-browsing scroll stuff?
+  // - TO-DO: add in said scroll stuff
+  var forwardingUrl = "".concat(donateLink, "/?cartID=").concat(cartID, "&amount=").concat(amount, "&clientOverride=donate&currency=GBP&givingType=single&affiliate=").concat(affiliateValue, "&siteurl=").concat(currentpageUrl, "&rowID=").concat(rowID);
+  window.location.href = forwardingUrl;
+};
+var _default = exports.default = handleSubmission;