@comicrelief/component-library 6.4.0 → 6.5.0

package/dist/components/Organisms/Donate/Donate.js

@@ -15,6 +15,8 @@ var _size = require("../../../theme/shared/size");
 
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 
+var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
+
 var _Form = _interopRequireDefault(require("./Form/Form"));
 
 var _Donate = require("./Donate.style");
@@ -47,7 +49,7 @@ var Donate = function Donate(_ref) {
   return /*#__PURE__*/_react.default.createElement(_Donate.Container, {
     backgroundColor: backgroundColor,
     id: mbshipID
-  }, !isDesktop && mobileImages ? /*#__PURE__*/_react.default.createElement(_Donate.MobImage, {
+  }, !isDesktop && mobileImages ? /*#__PURE__*/_react.default.createElement(_Picture.default, {
     backgroundColor: backgroundColor,
     image: mobileImage,
     images: mobileImages,
@@ -67,7 +69,8 @@ var Donate = function Donate(_ref) {
     alt: alt,
     isBackgroundImage: true
   }) : null, /*#__PURE__*/_react.default.createElement(_Donate.Wrapper, {
-    formAlignRight: formAlignRight
+    formAlignRight: formAlignRight,
+    "aria-live": "polite"
   }, /*#__PURE__*/_react.default.createElement(_Donate.Header, {
     formAlignRight: formAlignRight
   }, /*#__PURE__*/_react.default.createElement(_Donate.HeaderInner, null, subtitle && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
@@ -110,7 +113,7 @@ Donate.defaultProps = {
   otherDescription: 'will help us fund amazing projects in the UK and around the world.',
   subtitle: '',
   noMoneyBuys: false,
-  PopUpText: "Will you become one of our valued monthly supporters by converting your single donation into a smaller, monthly donation? By giving monthly, you'll help us deliver long-term impact.",
+  PopUpText: 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
   chooseAmountText: ''
 };
 var _default = Donate;

package/dist/components/Organisms/Donate/Donate.md

@@ -111,7 +111,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   alt="Background image"
-  backgroundColor="blue_dark"
+  backgroundColor="transparent"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -136,7 +136,7 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
+  backgroundColor="transparent"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Legend = exports.OuterFieldset = exports.AmountField = exports.MoneyBuys = exports.Form = exports.Wrapper = exports.Label = exports.HeaderInner = exports.Header = exports.FormWrapper = exports.FormFieldset = exports.Error = exports.PopUp = exports.Container = exports.Copy = exports.Button = exports.MobImage = exports.BgImage = void 0;
+exports.Legend = exports.OuterFieldset = exports.AmountField = exports.MoneyBuys = exports.Form = exports.Wrapper = exports.Label = exports.HeaderInner = exports.Header = exports.FormWrapper = exports.FormFieldset = exports.Error = exports.PopUp = exports.Container = exports.Copy = exports.Button = exports.BgImage = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -42,22 +42,20 @@ var PopUp = _styledComponents.default.div.withConfig({
 })(["background:green;height:100px;"]);
 
 exports.PopUp = PopUp;
-var MobImage = (0, _styledComponents.default)(_Picture.default).withConfig({
-  displayName: "Donatestyle__MobImage",
-  componentId: "sc-8rjm3t-2"
-})([""]);
-exports.MobImage = MobImage;
 var BgImage = (0, _styledComponents.default)(_Picture.default).withConfig({
   displayName: "Donatestyle__BgImage",
-  componentId: "sc-8rjm3t-3"
-})(["display:block;position:absolute;bottom:0;left:0;right:0;height:100%;opacity:0.4;"]);
+  componentId: "sc-8rjm3t-2"
+})(["display:block;position:absolute;bottom:0;left:0;right:0;height:100%;", ""], function (_ref3) {
+  var backgroundColor = _ref3.backgroundColor;
+  return backgroundColor !== 'transparent' && "\n    opacity: 0.4;\n  ";
+});
 exports.BgImage = BgImage;
 
 var Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Wrapper",
-  componentId: "sc-8rjm3t-4"
-})(["position:relative;text-align:center;padding:", " ", ";flex-direction:row;align-items:center;display:block;width:100%;flex-direction:", ";", "{padding:", " ", ";}", "{display:flex;padding:", " 0;}"], (0, _spacing.default)('l'), (0, _spacing.default)('md'), function (_ref3) {
-  var formAlignRight = _ref3.formAlignRight;
+  componentId: "sc-8rjm3t-3"
+})(["position:relative;text-align:center;padding:", " ", ";flex-direction:row;align-items:center;display:block;width:100%;flex-direction:", ";", "{padding:", " ", ";}", "{display:flex;padding:", " 0;}"], (0, _spacing.default)('l'), (0, _spacing.default)('md'), function (_ref4) {
+  var formAlignRight = _ref4.formAlignRight;
   return formAlignRight === true ? 'row-reverse' : 'row';
 }, (0, _size.media)('small'), (0, _spacing.default)('xl'), (0, _spacing.default)('md'), (0, _size.media)('medium'), (0, _spacing.default)('xl'));
 
@@ -65,9 +63,9 @@ exports.Wrapper = Wrapper;
 
 var Header = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Header",
-  componentId: "sc-8rjm3t-5"
-})(["width:100%;display:flex;font-family:", ";", "{width:50%;padding:", ";align-items:center;}"], function (_ref4) {
-  var theme = _ref4.theme;
+  componentId: "sc-8rjm3t-4"
+})(["width:100%;display:flex;font-family:", ";", "{width:50%;padding:", ";align-items:center;}"], function (_ref5) {
+  var theme = _ref5.theme;
   return theme.fontFamilies(theme.font.regular);
 }, (0, _size.media)('medium'), (0, _spacing.default)('xl'));
 
@@ -75,37 +73,37 @@ exports.Header = Header;
 
 var HeaderInner = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__HeaderInner",
-  componentId: "sc-8rjm3t-6"
+  componentId: "sc-8rjm3t-5"
 })(["position:relative;text-align:left;"]);
 
 exports.HeaderInner = HeaderInner;
 
 var FormWrapper = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__FormWrapper",
-  componentId: "sc-8rjm3t-7"
-})(["position:relative;font-family:", ";", "{width:50%;}"], function (_ref5) {
-  var theme = _ref5.theme;
+  componentId: "sc-8rjm3t-6"
+})(["position:relative;font-family:", ";", "{width:50%;}"], function (_ref6) {
+  var theme = _ref6.theme;
   return theme.fontFamilies(theme.font.regular);
 }, (0, _size.media)('medium'));
 
 exports.FormWrapper = FormWrapper;
 var Error = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Donatestyle__Error",
-  componentId: "sc-8rjm3t-8"
-})(["color:", ";font-size:", ";font-weight:500;margin-top:", ";"], function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.color('red');
-}, function (_ref7) {
+  componentId: "sc-8rjm3t-7"
+})(["color:", ";font-size:", ";font-weight:500;margin-top:", ";"], function (_ref7) {
   var theme = _ref7.theme;
+  return theme.color('red');
+}, function (_ref8) {
+  var theme = _ref8.theme;
   return theme.fontSize('s');
 }, (0, _spacing.default)('l'));
 exports.Error = Error;
 
 var Form = _styledComponents.default.form.withConfig({
   displayName: "Donatestyle__Form",
-  componentId: "sc-8rjm3t-9"
-})(["position:relative;width:100%;background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;margin-top:", ";h3{margin-top:", ";}input{max-width:100%;margin:0;}input[type='submit']{margin:", " 0;}", "{width:450px;margin-right:auto;margin-left:auto;}"], function (_ref8) {
-  var theme = _ref8.theme;
+  componentId: "sc-8rjm3t-8"
+})(["position:relative;width:100%;background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;margin-top:", ";h3{margin-top:", ";}input{max-width:100%;margin:0;}input[type='submit']{margin:", " 0;}", "{width:450px;margin-right:auto;margin-left:auto;}"], function (_ref9) {
+  var theme = _ref9.theme;
   return theme.color('white');
 }, (0, _spacing.default)('md'), (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _size.media)('small'));
 
@@ -113,70 +111,70 @@ exports.Form = Form;
 
 var OuterFieldset = _styledComponents.default.fieldset.withConfig({
   displayName: "Donatestyle__OuterFieldset",
-  componentId: "sc-8rjm3t-10"
+  componentId: "sc-8rjm3t-9"
 })(["padding:0 ", " ", ";margin:0;border:none;", "{padding:0 ", " ", ";}input[type='submit']{margin-bottom:0;}"], (0, _spacing.default)('md'), (0, _spacing.default)('md'), (0, _size.media)('small'), (0, _spacing.default)('l'), (0, _spacing.default)('l'));
 
 exports.OuterFieldset = OuterFieldset;
 
 var Legend = _styledComponents.default.legend.withConfig({
   displayName: "Donatestyle__Legend",
-  componentId: "sc-8rjm3t-11"
+  componentId: "sc-8rjm3t-10"
 })(["margin:0;padding:", " ", ";display:block;width:100%;"], (0, _spacing.default)('l'), (0, _spacing.default)('sm'));
 
 exports.Legend = Legend;
 
 var MoneyBuys = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__MoneyBuys",
-  componentId: "sc-8rjm3t-12"
+  componentId: "sc-8rjm3t-11"
 })(["display:flex;justify-content:space-between;flex-direction:column;margin-bottom:", ";", "{flex-direction:row;}label{flex:0 0 30%;margin-bottom:", ";", "{margin-bottom:0;}input{cursor:pointer;}}"], (0, _spacing.default)('l'), (0, _size.media)('small'), (0, _spacing.default)('sm'), (0, _size.media)('small'));
 
 exports.MoneyBuys = MoneyBuys;
 
 var FormFieldset = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__FormFieldset",
-  componentId: "sc-8rjm3t-13"
+  componentId: "sc-8rjm3t-12"
 })(["display:flex;align-items:center;justify-content:center;"]);
 
 exports.FormFieldset = FormFieldset;
 var Label = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Donatestyle__Label",
-  componentId: "sc-8rjm3t-14"
+  componentId: "sc-8rjm3t-13"
 })(["margin-right:", ";"], (0, _spacing.default)('sm'));
 exports.Label = Label;
 var AmountField = (0, _styledComponents.default)(_Input.default).withConfig({
   displayName: "Donatestyle__AmountField",
-  componentId: "sc-8rjm3t-15"
-})(["position:relative;flex-basis:50%;flex-shrink:0;flex-grow:0;font-weight:400;display:block;", "{flex-basis:60%;}span{position:absolute;font-size:20px;top:50%;transform:translateY(-50%);left:0px;font-weight:500;padding:0px 15px;", ";}input{height:48px;border:2px solid ", ";background:", ";border-radius:10px;padding:", " ", " ", " ", ";&:focus{outline:none;border:2px solid ", ";}}"], (0, _size.media)('small'), (0, _zIndex.default)('high'), function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.color('grey');
-}, function (_ref10) {
+  componentId: "sc-8rjm3t-14"
+})(["position:relative;flex-basis:50%;flex-shrink:0;flex-grow:0;font-weight:400;display:block;", "{flex-basis:60%;}span{position:absolute;font-size:20px;top:50%;transform:translateY(-50%);left:0px;font-weight:500;padding:0px 15px;", ";}input{height:48px;border:2px solid ", ";background:", ";border-radius:10px;padding:", " ", " ", " ", ";&:focus{outline:none;border:2px solid ", ";}}"], (0, _size.media)('small'), (0, _zIndex.default)('high'), function (_ref10) {
   var theme = _ref10.theme;
-  return theme.color('grey_light');
-}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), function (_ref11) {
+  return theme.color('grey');
+}, function (_ref11) {
   var theme = _ref11.theme;
+  return theme.color('grey_light');
+}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), function (_ref12) {
+  var theme = _ref12.theme;
   return theme.color('grey');
 });
 exports.AmountField = AmountField;
 var Copy = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Donatestyle__Copy",
-  componentId: "sc-8rjm3t-16"
+  componentId: "sc-8rjm3t-15"
 })(["line-height:1.5;margin-top:", ";"], (0, _spacing.default)('l'));
 exports.Copy = Copy;
 
 var Button = _styledComponents.default.button.withConfig({
   displayName: "Donatestyle__Button",
-  componentId: "sc-8rjm3t-17"
-})(["width:100%;margin:", " 0 ", ";color:", ";font-size:", ";font-weight:bold;cursor:pointer;min-height:48px;background:", ";text-decoration:none;border-radius:2rem;border:none;box-shadow:0px 0px 16px rgba(0,0,0,0.15);appearance:none;:active,:focus,:hover{outline:none;background-color:", ";}", "{padding:", " ", ";}"], (0, _spacing.default)('l'), (0, _spacing.default)('l'), function (_ref12) {
-  var theme = _ref12.theme;
-  return theme.color('white');
-}, function (_ref13) {
+  componentId: "sc-8rjm3t-16"
+})(["width:100%;margin:", " 0 ", ";color:", ";font-size:", ";font-weight:bold;cursor:pointer;min-height:48px;background:", ";text-decoration:none;border-radius:2rem;border:none;box-shadow:0px 0px 16px rgba(0,0,0,0.15);appearance:none;:active,:focus,:hover{outline:none;background-color:", ";}", "{padding:", " ", ";}"], (0, _spacing.default)('l'), (0, _spacing.default)('l'), function (_ref13) {
   var theme = _ref13.theme;
-  return theme.fontSize('s');
+  return theme.color('white');
 }, function (_ref14) {
   var theme = _ref14.theme;
-  return theme.color('red');
+  return theme.fontSize('s');
 }, function (_ref15) {
   var theme = _ref15.theme;
+  return theme.color('red');
+}, function (_ref16) {
+  var theme = _ref16.theme;
   return theme.color('coral_dark');
 }, (0, _size.media)('small'), (0, _spacing.default)('md'), (0, _spacing.default)('l'));
 

package/dist/components/Organisms/Donate/Form/Form.js

@@ -107,12 +107,19 @@ var Signup = function Signup(_ref) {
 
   var givingData = givingType === 'single' ? singleGiving : regularGiving;
   var showGivingSelector = singleGiving !== null && regularGiving !== null;
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      popOpen = _useState10[0],
+      setPopOpen = _useState10[1];
+
   return /*#__PURE__*/_react.default.createElement(_Donate.FormWrapper, null, showGivingSelector && /*#__PURE__*/_react.default.createElement(_GivingSelector.default, {
     givingType: givingType,
     changeGivingType: function changeGivingType(data) {
       return setGivingType(data);
-    }
-  }), givingType === 'single' && showGivingSelector && /*#__PURE__*/_react.default.createElement(_PopUpComponent.default, {
+    },
+    setPopOpen: setPopOpen
+  }), popOpen && /*#__PURE__*/_react.default.createElement(_PopUpComponent.default, {
     PopUpText: PopUpText
   }), /*#__PURE__*/_react.default.createElement(_Donate.Form, {
     onSubmit: function onSubmit(e) {

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

@@ -11,12 +11,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
 
-var _spacing = _interopRequireDefault(require("../../../../theme/shared/spacing"));
-
 var _size = require("../../../../theme/shared/size");
 
 var _close = _interopRequireDefault(require("../assets/close.svg"));
@@ -26,14 +24,16 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 /* eslint-disable */
+var fadeClose = (0, _styledComponents.keyframes)(["0%{opacity:1;max-height:350px;}100%{opacity:0;max-height:0px;display:none;margin-top:-16px;}"]);
+
 var StyledPopUp = _styledComponents.default.div.withConfig({
   displayName: "PopUpComponent__StyledPopUp",
   componentId: "sc-1d7imlo-0"
-})(["display:", ";gap:", ";background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:8px;", "{width:450px;margin-right:auto;margin-left:auto;}"], function (props) {
-  return props.isPop ? "grid" : "none";
-}, (0, _spacing.default)('sm'), function (_ref) {
+})(["display:grid;overflow:hidden;max-height:350px;opacity:1;", " background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;", "{width:450px;margin-right:auto;margin-left:auto;}"], function (props) {
+  return props.isClosed && (0, _styledComponents.css)(["animation:0.6s ", " ease forwards;"], fadeClose);
+}, function (_ref) {
   var theme = _ref.theme;
-  return theme.color('white');
+  return theme.color('blue_light');
 }, (0, _size.media)('small'));
 
 var TextWrapper = _styledComponents.default.div.withConfig({
@@ -44,7 +44,7 @@ var TextWrapper = _styledComponents.default.div.withConfig({
 var Button = _styledComponents.default.button.withConfig({
   displayName: "PopUpComponent__Button",
   componentId: "sc-1d7imlo-2"
-})(["justify-self:end;background:transparent;border:0;cursor:pointer;:active,:focus,:hover{outline:none;border:1px solid ", ";}margin:17px 17px 0;width:20px;"], function (_ref2) {
+})(["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;}"], function (_ref2) {
   var theme = _ref2.theme;
   return theme.color('grey');
 });
@@ -52,16 +52,16 @@ var Button = _styledComponents.default.button.withConfig({
 var PopUpComponent = function PopUpComponent(_ref3) {
   var PopUpText = _ref3.PopUpText;
 
-  var _useState = (0, _react.useState)(true),
+  var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isPop = _useState2[0],
-      setIsPop = _useState2[1];
+      isClosed = _useState2[0],
+      setIsClosed = _useState2[1];
 
   return /*#__PURE__*/_react.default.createElement(StyledPopUp, {
-    isPop: isPop
+    isClosed: isClosed
   }, /*#__PURE__*/_react.default.createElement(Button, {
     onClick: function onClick() {
-      return setIsPop(false);
+      return setIsClosed(true);
     },
     "aria-label": "Close"
   }, /*#__PURE__*/_react.default.createElement("img", {

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

@@ -70,7 +70,8 @@ var Label = _styledComponents.default.label.withConfig({
 
 var GivingSelector = function GivingSelector(_ref10) {
   var givingType = _ref10.givingType,
-      changeGivingType = _ref10.changeGivingType;
+      changeGivingType = _ref10.changeGivingType,
+      setPopOpen = _ref10.setPopOpen;
   return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(MoneyBox, null, /*#__PURE__*/_react.default.createElement("input", {
     "aria-label": "Single",
     id: "give-once",
@@ -81,6 +82,7 @@ var GivingSelector = function GivingSelector(_ref10) {
     checked: givingType === 'single',
     onClick: function onClick() {
       changeGivingType('single');
+      setPopOpen(true);
     }
   }), /*#__PURE__*/_react.default.createElement(Label, {
     active: givingType === 'single',
@@ -95,6 +97,7 @@ var GivingSelector = function GivingSelector(_ref10) {
     checked: givingType === 'monthly',
     onClick: function onClick() {
       changeGivingType('monthly');
+      setPopOpen(false);
     }
   }), /*#__PURE__*/_react.default.createElement(Label, {
     active: givingType === 'monthly',