@comicrelief/component-library 7.31.1 → 7.32.0

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

@@ -47,6 +47,7 @@ const Donate = _ref => {
     defaultGivingType,
     monthlyTitle,
     monthlySubtitle,
+    paddingOption,
     // Just to keep the function call character length under control
     monthlyChooseAmountText: monthlyChoose,
     monthlyOtherAmountText: monthlyOther
@@ -105,7 +106,8 @@ const Donate = _ref => {
   }) : null, /*#__PURE__*/_react.default.createElement(_Donate.Wrapper, {
     formAlignRight: formAlignRight,
     "aria-live": "polite",
-    noTitlesAtAll: noTitlesAtAll
+    noTitlesAtAll: noTitlesAtAll,
+    paddingOption: paddingOption
   }, !noTitlesAtAll && /*#__PURE__*/_react.default.createElement(_Donate.TitleWrapperOuter, {
     formAlignRight: formAlignRight,
     "data-test": "this-one-here"
@@ -169,6 +171,7 @@ Donate.defaultProps = {
   monthlyTitle: '',
   monthlySubtitle: '',
   monthlyChooseAmountText: '',
-  monthlyOtherAmountText: ''
+  monthlyOtherAmountText: '',
+  paddingOption: null
 };
 var _default = exports.default = Donate;

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

@@ -1,6 +1,6 @@
 # Donate
 
-## Form align right, with red desktop overlay and purple mobile background colour, with a blue submit button
+## Form align right, with red desktop overlay and purple mobile background colour, with a blue submit button and 'no top padding' option
 
 ```js
 import data from './dev-data/data';
@@ -24,10 +24,11 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
+  paddingOption="upper_off"
 />;
 ```
 
-## Form align left, with custom message after choosing an "Other amount" to donate, high value cart.
+## Form align left, with custom message after choosing an "Other amount" to donate, high value cart, and 'no bottom padding' option
 ```js
 import data from './dev-data/data-high-value';
 const mobilePictures = require('../../../styleguide/data/data').mobileImages;
@@ -50,10 +51,11 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
   otherAmountText="Overridden via the 'Other amount text' prop"
+  paddingOption="lower_off"
 />;
 ```
 
-## Single Giving
+## Single Giving, with 'no padding' option
 
 ```js
 import data from './dev-data/data-single';
@@ -76,6 +78,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
+  paddingOption="both_off"
 />;
 ```
 

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

@@ -13,6 +13,7 @@ var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _size = require("../../../theme/shared/size");
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
+var _utils = _interopRequireDefault(require("../../../utils/_utils"));
 const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Container",
   componentId: "sc-8rjm3t-0"
@@ -45,7 +46,7 @@ const BgImage = exports.BgImage = (0, _styledComponents.default)(_Picture.defaul
 const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Wrapper",
   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'), _ref4 => {
+})(["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'), _ref4 => {
   let {
     formAlignRight
   } = _ref4;
@@ -55,14 +56,19 @@ const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
     noTitlesAtAll
   } = _ref5;
   return noTitlesAtAll === true && (0, _styledComponents.css)(["justify-content:center;"]);
-}, (0, _size.media)('small'), (0, _spacing.default)('xl'), (0, _spacing.default)('md'), (0, _size.media)('medium'), (0, _spacing.default)('xl'));
+}, (0, _size.media)('small'), (0, _spacing.default)('xl'), (0, _spacing.default)('md'), (0, _size.media)('medium'), (0, _spacing.default)('xl'), _ref6 => {
+  let {
+    paddingOption
+  } = _ref6;
+  return (0, _utils.default)(paddingOption);
+});
 const TitleWrapperOuter = exports.TitleWrapperOuter = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__TitleWrapperOuter",
   componentId: "sc-8rjm3t-4"
-})(["width:100%;display:flex;font-family:", ";", "{width:50%;padding:", ";align-items:center;}"], _ref6 => {
+})(["width:100%;display:flex;font-family:", ";", "{width:50%;padding:", ";align-items:center;}"], _ref7 => {
   let {
     theme
-  } = _ref6;
+  } = _ref7;
   return theme.fontFamilies(theme.font.regular);
 }, (0, _size.media)('medium'), (0, _spacing.default)('xl'));
 const TitleWrapperInner = exports.TitleWrapperInner = _styledComponents.default.div.withConfig({
@@ -72,33 +78,33 @@ const TitleWrapperInner = exports.TitleWrapperInner = _styledComponents.default.
 const FormWrapper = exports.FormWrapper = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__FormWrapper",
   componentId: "sc-8rjm3t-6"
-})(["position:relative;font-family:", ";", "{width:50%;}"], _ref7 => {
+})(["position:relative;font-family:", ";", "{width:50%;}"], _ref8 => {
   let {
     theme
-  } = _ref7;
+  } = _ref8;
   return theme.fontFamilies(theme.font.regular);
 }, (0, _size.media)('medium'));
 const Error = exports.Error = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Donatestyle__Error",
   componentId: "sc-8rjm3t-7"
-})(["color:", ";font-size:", ";font-weight:500;margin-top:", ";"], _ref8 => {
+})(["color:", ";font-size:", ";font-weight:500;margin-top:", ";"], _ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   return theme.color('red');
-}, _ref9 => {
+}, _ref10 => {
   let {
     theme
-  } = _ref9;
+  } = _ref10;
   return theme.fontSize('s');
 }, (0, _spacing.default)('l'));
 const Form = exports.Form = _styledComponents.default.form.withConfig({
   displayName: "Donatestyle__Form",
   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;}"], _ref10 => {
+})(["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;}"], _ref11 => {
   let {
     theme
-  } = _ref10;
+  } = _ref11;
   return theme.color('white');
 }, (0, _spacing.default)('md'), (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _size.media)('small'));
 const OuterFieldset = exports.OuterFieldset = _styledComponents.default.fieldset.withConfig({
@@ -124,20 +130,20 @@ const Label = exports.Label = (0, _styledComponents.default)(_Text.default).with
 const AmountField = exports.AmountField = (0, _styledComponents.default)(_Input.default).withConfig({
   displayName: "Donatestyle__AmountField",
   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'), _ref11 => {
+})(["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'), _ref12 => {
   let {
     theme
-  } = _ref11;
+  } = _ref12;
   return theme.color('grey');
-}, _ref12 => {
+}, _ref13 => {
   let {
     theme
-  } = _ref12;
+  } = _ref13;
   return theme.color('grey_light');
-}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), _ref13 => {
+}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), _ref14 => {
   let {
     theme
-  } = _ref13;
+  } = _ref14;
   return theme.color('grey');
 });
 const Copy = exports.Copy = (0, _styledComponents.default)(_Text.default).withConfig({
@@ -147,25 +153,25 @@ const Copy = exports.Copy = (0, _styledComponents.default)(_Text.default).withCo
 const Button = exports.Button = _styledComponents.default.button.withConfig({
   displayName: "Donatestyle__Button",
   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'), _ref14 => {
+})(["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'), _ref15 => {
   let {
     theme
-  } = _ref14;
+  } = _ref15;
   return theme.color('white');
-}, _ref15 => {
+}, _ref16 => {
   let {
     theme
-  } = _ref15;
+  } = _ref16;
   return theme.fontSize('s');
-}, _ref16 => {
+}, _ref17 => {
   let {
     theme,
     color
-  } = _ref16;
+  } = _ref17;
   return theme.color(color);
-}, _ref17 => {
+}, _ref18 => {
   let {
     theme
-  } = _ref17;
+  } = _ref18;
   return theme.color('coral_dark');
 }, (0, _size.media)('small'), (0, _spacing.default)('md'), (0, _spacing.default)('l'));

package/dist/utils/_utils.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const handlePadding = paddingOption => {
+  switch (paddingOption) {
+    case 'upper_off':
+      return 'padding-top: 0;';
+    case 'lower_off':
+      return 'padding-bottom: 0;';
+    case 'both_off':
+      return 'padding-top: 0; padding-bottom: 0';
+    // To leave pre-existing styles untouched
+    case 'both_on':
+      return null;
+    // Just in case
+    default:
+      return null;
+  }
+};
+var _default = exports.default = handlePadding;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.31.1",
+  "version": "7.32.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Organisms/Donate/Donate.js

@@ -48,6 +48,7 @@ const Donate = ({
   defaultGivingType,
   monthlyTitle,
   monthlySubtitle,
+  paddingOption,
   // Just to keep the function call character length under control
   monthlyChooseAmountText: monthlyChoose,
   monthlyOtherAmountText: monthlyOther
@@ -113,7 +114,7 @@ const Donate = ({
         />
       ) : null}
 
-      <Wrapper formAlignRight={formAlignRight} aria-live="polite" noTitlesAtAll={noTitlesAtAll}>
+      <Wrapper formAlignRight={formAlignRight} aria-live="polite" noTitlesAtAll={noTitlesAtAll} paddingOption={paddingOption}>
 
         {/* Only render if there is SOME title copy; otherwise,
         we need to the space to centre-align the form */}
@@ -197,7 +198,8 @@ Donate.propTypes = {
   monthlyTitle: PropTypes.string,
   monthlySubtitle: PropTypes.string,
   monthlyChooseAmountText: PropTypes.string,
-  monthlyOtherAmountText: PropTypes.string
+  monthlyOtherAmountText: PropTypes.string,
+  paddingOption: PropTypes.string
 };
 
 Donate.defaultProps = {
@@ -231,7 +233,8 @@ Donate.defaultProps = {
   monthlyTitle: '',
   monthlySubtitle: '',
   monthlyChooseAmountText: '',
-  monthlyOtherAmountText: ''
+  monthlyOtherAmountText: '',
+  paddingOption: null
 };
 
 export default Donate;

package/src/components/Organisms/Donate/Donate.md

@@ -1,6 +1,6 @@
 # Donate
 
-## Form align right, with red desktop overlay and purple mobile background colour, with a blue submit button
+## Form align right, with red desktop overlay and purple mobile background colour, with a blue submit button and 'no top padding' option
 
 ```js
 import data from './dev-data/data';
@@ -24,10 +24,11 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
+  paddingOption="upper_off"
 />;
 ```
 
-## Form align left, with custom message after choosing an "Other amount" to donate, high value cart.
+## Form align left, with custom message after choosing an "Other amount" to donate, high value cart, and 'no bottom padding' option
 ```js
 import data from './dev-data/data-high-value';
 const mobilePictures = require('../../../styleguide/data/data').mobileImages;
@@ -50,10 +51,11 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
   otherAmountText="Overridden via the 'Other amount text' prop"
+  paddingOption="lower_off"
 />;
 ```
 
-## Single Giving
+## Single Giving, with 'no padding' option
 
 ```js
 import data from './dev-data/data-single';
@@ -76,6 +78,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
+  paddingOption="both_off"
 />;
 ```
 

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

@@ -6,6 +6,7 @@ import spacing from '../../../theme/shared/spacing';
 import { media } from '../../../theme/shared/size';
 import Picture from '../../Atoms/Picture/Picture';
 import zIndex from '../../../theme/shared/zIndex';
+import handlePadding from '../../../utils/_utils';
 
 const Container = styled.div`
   position: relative;
@@ -58,9 +59,11 @@ const Wrapper = styled.div`
   ${media('small')} {
     padding: ${spacing('xl')} ${spacing('md')};
   }
+
   ${media('medium')} {
     display: flex;
     padding: ${spacing('xl')} 0;
+    ${({ paddingOption }) => handlePadding(paddingOption)};
   }
 `;
 

package/src/utils/_utils.js

@@ -0,0 +1,18 @@
+const handlePadding = paddingOption => {
+  switch (paddingOption) {
+    case 'upper_off':
+      return 'padding-top: 0;';
+    case 'lower_off':
+      return 'padding-bottom: 0;';
+    case 'both_off':
+      return 'padding-top: 0; padding-bottom: 0';
+      // To leave pre-existing styles untouched
+    case 'both_on':
+      return null;
+      // Just in case
+    default:
+      return null;
+  }
+};
+
+export default handlePadding;