@comicrelief/component-library 8.52.2 → 8.53.0

package/dist/components/Organisms/DonateBanner/Form/PopUpComponent.js

@@ -0,0 +1,70 @@
+"use strict";
+
+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 _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
+var _close = _interopRequireDefault(require("../assets/close.svg"));
+const closeDuration = 0.6;
+const fadeClose = (0, _styledComponents.keyframes)(["0%{opacity:1;max-height:350px;}100%{opacity:0;max-height:0px;display:none;margin-top:-16px;}"]);
+const fadeOpen = (0, _styledComponents.keyframes)(["0%{opacity:0;max-height:0px;display:none;margin-top:-16px;}100%{opacity:1;max-height:350px;}"]);
+const StyledPopUp = _styledComponents.default.div.withConfig({
+  displayName: "PopUpComponent__StyledPopUp",
+  componentId: "sc-1yo8hql-0"
+})(["display:grid;overflow:hidden;max-height:350px;opacity:1;animation:0.4s ", " ease;", " background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:0.5rem;@media ", "{width:450px;margin-right:auto;margin-left:auto;}"], props => props.fadeOpen, props => props.isClosed && (0, _styledComponents.css)(["animation:", "s ", " ease forwards;"], closeDuration, props.fadeClose), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.color('blue_light');
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.allBreakpoints('M');
+});
+const TextWrapper = _styledComponents.default.div.withConfig({
+  displayName: "PopUpComponent__TextWrapper",
+  componentId: "sc-1yo8hql-1"
+})(["margin:0 32px 32px;"]);
+const Button = _styledComponents.default.button.withConfig({
+  displayName: "PopUpComponent__Button",
+  componentId: "sc-1yo8hql-2"
+})(["justify-self:end;background-color:transparent;border:0;cursor:pointer;width:30px;height:30px;margin:3px;:active,:focus,:hover{outline:none;border:1px solid ", ";}img{width:15px;height:15px;vertical-align:middle;}"], _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.color('grey');
+});
+const PopUpComponent = _ref4 => {
+  let {
+    popUpText,
+    setPopOpen
+  } = _ref4;
+  const [isClosed, setIsClosed] = (0, _react.useState)(false);
+
+  // Only update centralised state - which renders
+  // this component - once the closing animation is complete
+  const handleCloser = () => {
+    setIsClosed(true);
+    setTimeout(() => {
+      setPopOpen(false);
+    }, closeDuration * 1000);
+  };
+  return /*#__PURE__*/_react.default.createElement(StyledPopUp, {
+    isClosed: isClosed,
+    fadeOpen: fadeOpen,
+    fadeClose: fadeClose
+  }, /*#__PURE__*/_react.default.createElement(Button, {
+    onClick: () => handleCloser(),
+    "aria-label": "Close"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _close.default,
+    alt: "Close cross icon"
+  })), /*#__PURE__*/_react.default.createElement(TextWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, popUpText)));
+};
+var _default = exports.default = PopUpComponent;

package/dist/components/Organisms/DonateBanner/GivingSelector/GivingSelector.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _GivingSelector = require("./GivingSelector.style");
+const GivingSelector = _ref => {
+  let {
+    givingType = null,
+    changeGivingType,
+    setPopOpen,
+    mbshipID
+  } = _ref;
+  // Only updates giving type and popup status when appropriate
+  const handleGivingTypeChange = (thisButtonType, currentGivingType) => {
+    if (currentGivingType !== thisButtonType) {
+      changeGivingType(thisButtonType);
+      setPopOpen(thisButtonType === 'single');
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_GivingSelector.Wrapper, null, /*#__PURE__*/_react.default.createElement(_GivingSelector.MoneyBox, null, /*#__PURE__*/_react.default.createElement("input", {
+    className: "give-once",
+    "aria-label": "Single",
+    id: `give-once--${mbshipID}`,
+    value: "Single",
+    type: "radio",
+    label: "",
+    checked: givingType === 'single',
+    onChange: () => handleGivingTypeChange('single', givingType)
+  }), /*#__PURE__*/_react.default.createElement(_GivingSelector.Label, {
+    active: givingType === 'single',
+    htmlFor: `give-once--${mbshipID}`
+  }, "Single"), /*#__PURE__*/_react.default.createElement("input", {
+    className: "give-monthly",
+    "aria-label": "Monthly",
+    id: `give-monthly--${mbshipID}`,
+    value: "Monthly",
+    type: "radio",
+    label: "",
+    checked: givingType === 'monthly',
+    onChange: () => handleGivingTypeChange('monthly', givingType)
+  }), /*#__PURE__*/_react.default.createElement(_GivingSelector.Label, {
+    active: givingType === 'monthly',
+    htmlFor: `give-monthly--${mbshipID}`
+  }, "Monthly"), /*#__PURE__*/_react.default.createElement(_GivingSelector.Switch, null)));
+};
+var _default = exports.default = GivingSelector;

package/dist/components/Organisms/DonateBanner/GivingSelector/GivingSelector.style.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.Switch = exports.MoneyBox = exports.Label = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _spacing = _interopRequireDefault(require("../../../../theme/shared/spacing"));
+var _zIndex = _interopRequireDefault(require("../../../../theme/shared/zIndex"));
+var _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hideVisually"));
+const Switch = exports.Switch = _styledComponents.default.span.withConfig({
+  displayName: "GivingSelectorstyle__Switch",
+  componentId: "sc-bcwmru-0"
+})(["width:50%;height:48px;", ";display:block;position:absolute;transition:left 0.15s ease-out;background-color:", ";"], (0, _zIndex.default)('low'), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.color('red');
+});
+const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "GivingSelectorstyle__Wrapper",
+  componentId: "sc-bcwmru-1"
+})(["display:flex;margin:", " 0;"], (0, _spacing.default)('md'));
+const MoneyBox = exports.MoneyBox = _styledComponents.default.div.withConfig({
+  displayName: "GivingSelectorstyle__MoneyBox",
+  componentId: "sc-bcwmru-2"
+})(["width:100%;position:relative;display:flex;flex-direction:row;margin:", " 0;overflow:hidden;border-radius:0.5rem;border:1px solid ", ";background:", ";@media ", "{margin:0 auto;}.give-monthly:checked ~ ", "{left:calc(50%);}input{", "}"], (0, _spacing.default)('sm'), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.color('grey');
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.color('white');
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.allBreakpoints('M');
+}, Switch, _hideVisually.default);
+const Label = exports.Label = _styledComponents.default.label.withConfig({
+  displayName: "GivingSelectorstyle__Label",
+  componentId: "sc-bcwmru-3"
+})(["font-size:", ";font-family:", ";font-weight:bold;min-height:48px;align-items:center;justify-content:center;display:flex;flex-basis:50%;border:none;transition:color 0.15s ease-out;", ";cursor:", ";border-radius:2rem;color:", ";&:active:focus{box-shadow:none;}&:focus{border:none;outline:none;box-shadow:inset 0 0 0 4px ", ";}"], _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.fontSize('s');
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.fontFamilies('Montserrat');
+}, (0, _zIndex.default)('medium'), _ref7 => {
+  let {
+    active
+  } = _ref7;
+  return active === true ? 'default' : 'pointer';
+}, _ref8 => {
+  let {
+    active,
+    theme
+  } = _ref8;
+  return active === true ? theme.color('white') : theme.color('black');
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.color('red');
+});

package/dist/components/Organisms/DonateBanner/MoneyBuy/MoneyBuy.js

@@ -0,0 +1,83 @@
+"use strict";
+
+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 _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Input = _interopRequireDefault(require("../../../Atoms/Input/Input"));
+const MoneyBuyButton = (0, _styledComponents.default)(_Input.default).withConfig({
+  displayName: "MoneyBuy__MoneyBuyButton",
+  componentId: "sc-1ggxiga-0"
+})(["display:block;input{border:none;background-color:", ";color:", ";font-size:", ";font-family:", ";font-weight:normal;border-radius:0.5rem;height:4rem;border:1px solid ", ";&:focus{border:1px solid ", ";}", "}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.color('white');
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.color('black');
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.fontSize('l');
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.fontFamilies('Anton');
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.color('grey');
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.color('red');
+}, _ref7 => {
+  let {
+    isSelected
+  } = _ref7;
+  return isSelected && (0, _styledComponents.css)(["background-color:", ";border:1px solid ", ";color:", ";"], _ref8 => {
+    let {
+      theme
+    } = _ref8;
+    return theme.color('red');
+  }, _ref9 => {
+    let {
+      theme
+    } = _ref9;
+    return theme.color('red');
+  }, _ref10 => {
+    let {
+      theme
+    } = _ref10;
+    return theme.color('white');
+  });
+});
+const MoneyBuy = _ref11 => {
+  let {
+    setOtherAmount,
+    amount = '10',
+    currency = '£',
+    description = 'description',
+    ...rest
+  } = _ref11;
+  return /*#__PURE__*/_react.default.createElement(MoneyBuyButton, Object.assign({}, rest, {
+    label: description,
+    showLabel: false,
+    value: `${currency} ${amount}`,
+    type: "button",
+    errorMsg: "",
+    onClick: setOtherAmount
+  }));
+};
+var _default = exports.default = MoneyBuy;