@comicrelief/component-library 8.1.2 → 8.2.0

package/dist/components/Molecules/Typeahead/Typeahead.js

@@ -15,14 +15,14 @@ const MIN_CHARS_FOR_FETCH = 2;
 const Typeahead = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     optionFetcher,
-    optionParser,
+    optionParser = null,
     onSelect,
     id,
     label,
     name,
-    dropdownInstruction,
+    dropdownInstruction = null,
     notFoundMessage,
-    fetchErrorHandler,
+    fetchErrorHandler = () => 'Sorry, there was an unexpected error. Please try again',
     ...rest
   } = _ref;
   const [options, setOptions] = (0, _react.useState)([]);
@@ -80,9 +80,4 @@ const Typeahead = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ref: ref
   }));
 });
-Typeahead.defaultProps = {
-  dropdownInstruction: null,
-  optionParser: null,
-  fetchErrorHandler: () => 'Sorry, there was an unexpected error. Please try again'
-};
 var _default = exports.default = Typeahead;

package/dist/components/Molecules/VideoBanner/VideoBanner.js

@@ -18,11 +18,11 @@ const VideoBanner = _ref => {
   let {
     video,
     poster,
-    controls,
-    autoPlay,
-    loop,
-    muted,
-    showPosterAfterPlaying
+    controls = false,
+    autoPlay = true,
+    loop = false,
+    muted = true,
+    showPosterAfterPlaying = true
   } = _ref;
   // Use the prop as our default
   const [isMuted, setIsMuted] = (0, _react.useState)(muted);
@@ -56,11 +56,4 @@ const VideoBanner = _ref => {
     muted: isMuted
   }, "Your browser does not support video.");
 };
-VideoBanner.defaultProps = {
-  showPosterAfterPlaying: true,
-  controls: false,
-  autoPlay: true,
-  loop: false,
-  muted: true
-};
 var _default = exports.default = VideoBanner;

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

@@ -16,41 +16,40 @@ var _utils = require("./_utils");
 var _Donate = require("./Donate.style");
 const Donate = _ref => {
   let {
-    alt,
+    alt = '',
+    data = {},
+    formAlignRight = true,
+    imageLow = null,
+    image = null,
+    images = null,
+    mobileImageLow = null,
+    mobileImage = null,
+    mobileImages = null,
+    mobileAlt = '',
+    desktopOverlayColor = 'transparent',
+    mobileBackgroundColor = 'blue_dark',
+    submitButtonColor = 'red',
+    textColor = 'white',
+    mbshipID = null,
+    otherAmountText = 'will help us fund amazing projects in the UK and around the world.',
+    subtitle = '',
+    noMoneyBuys = false,
+    PopUpText = 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
+    chooseAmountText = '',
+    isDesktopOverride = null,
+    otherAmountValue = null,
+    title = null,
+    additionalSingleCopy = null,
+    additionalMonthlyCopy = null,
+    defaultGivingType = null,
+    monthlyTitle = '',
+    monthlySubtitle = '',
     cartID,
     clientID,
-    desktopOverlayColor,
-    mobileBackgroundColor,
-    submitButtonColor,
-    textColor,
+    paddingOption = null,
     donateLink,
-    data,
-    title,
-    subtitle,
-    otherAmountText,
-    formAlignRight,
-    images,
-    image,
-    imageLow,
-    mobileImages,
-    mobileImage,
-    mobileImageLow,
-    mobileAlt,
-    mbshipID,
-    noMoneyBuys,
-    PopUpText,
-    chooseAmountText,
-    isDesktopOverride,
-    otherAmountValue,
-    additionalSingleCopy,
-    additionalMonthlyCopy,
-    defaultGivingType,
-    monthlyTitle,
-    monthlySubtitle,
-    paddingOption,
-    // Just to keep the function call character length under control
-    monthlyChooseAmountText: monthlyChoose,
-    monthlyOtherAmountText: monthlyOther
+    monthlyChooseAmountText: monthlyChoose = '',
+    monthlyOtherAmountText: monthlyOther = ''
   } = _ref;
   let isDesktop = (0, _reactResponsive.useMediaQuery)({
     query: "(min-width: ".concat(_allBreakpoints.breakpointValues.L, "px)")
@@ -141,37 +140,4 @@ const Donate = _ref => {
     changeGivingType: setGivingType
   })));
 };
-Donate.defaultProps = {
-  alt: '',
-  data: {},
-  formAlignRight: true,
-  imageLow: null,
-  image: null,
-  images: null,
-  mobileImageLow: null,
-  mobileImage: null,
-  mobileImages: null,
-  mobileAlt: '',
-  desktopOverlayColor: 'transparent',
-  mobileBackgroundColor: 'blue_dark',
-  submitButtonColor: 'red',
-  textColor: 'white',
-  mbshipID: null,
-  otherAmountText: 'will help us fund amazing projects in the UK and around the world.',
-  subtitle: '',
-  noMoneyBuys: false,
-  PopUpText: 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
-  chooseAmountText: '',
-  isDesktopOverride: null,
-  otherAmountValue: null,
-  title: null,
-  additionalSingleCopy: null,
-  additionalMonthlyCopy: null,
-  defaultGivingType: null,
-  monthlyTitle: '',
-  monthlySubtitle: '',
-  monthlyChooseAmountText: '',
-  monthlyOtherAmountText: '',
-  paddingOption: null
-};
 var _default = exports.default = Donate;

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

@@ -24,18 +24,16 @@ const Signup = _ref => {
     clientID,
     cartID,
     mbshipID,
-    noMoneyBuys,
+    noMoneyBuys = false,
     PopUpText,
     chooseAmountText,
     submitButtonColor,
-    otherAmountValue,
-    additionalSingleCopy,
-    additionalMonthlyCopy,
-    defaultGivingType,
-    monthlyChooseAmountCopy,
-    monthlyOtherAmountCopy,
+    otherAmountValue = null,
+    additionalSingleCopy = null,
+    additionalMonthlyCopy = null,
+    defaultGivingType = null,
     changeGivingType,
-    givingType,
+    givingType = null,
     ...rest
   } = _ref;
   // const [givingType, setGivingType] = useState();
@@ -228,15 +226,4 @@ const Signup = _ref => {
     ref: buttonRef
   }, renderButtonText()))));
 };
-Signup.defaultProps = {
-  noMoneyBuys: false,
-  otherAmountValue: null,
-  data: {},
-  additionalSingleCopy: null,
-  additionalMonthlyCopy: null,
-  defaultGivingType: null,
-  monthlyChooseAmountCopy: null,
-  monthlyOtherAmountCopy: null,
-  givingType: null
-};
 var _default = exports.default = Signup;

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

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _GivingSelector = require("./GivingSelector.style");
 const GivingSelector = _ref => {
   let {
-    givingType,
+    givingType = null,
     changeGivingType,
     setPopOpen,
     mbshipID
@@ -47,7 +47,4 @@ const GivingSelector = _ref => {
     htmlFor: "give-monthly--".concat(mbshipID)
   }, "Monthly"), /*#__PURE__*/_react.default.createElement(_GivingSelector.Switch, null)));
 };
-GivingSelector.defaultProps = {
-  givingType: null
-};
 var _default = exports.default = GivingSelector;

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

@@ -67,9 +67,9 @@ const MoneyBuyButton = (0, _styledComponents.default)(_Input.default).withConfig
 const MoneyBuy = _ref11 => {
   let {
     setOtherAmount,
-    amount,
-    currency,
-    description,
+    amount = '10',
+    currency = '£',
+    description = 'description',
     ...rest
   } = _ref11;
   return /*#__PURE__*/_react.default.createElement(MoneyBuyButton, Object.assign({}, rest, {
@@ -81,9 +81,4 @@ const MoneyBuy = _ref11 => {
     onClick: setOtherAmount
   }));
 };
-MoneyBuy.defaultProps = {
-  amount: '10',
-  currency: '£',
-  description: 'description'
-};
 var _default = exports.default = MoneyBuy;

package/dist/components/Organisms/EmailSignUp/_EmailSignUp.js

@@ -30,10 +30,10 @@ const EmailSignUp = _ref => {
     topCopy,
     successCopy,
     privacyCopy,
-    backgroundColour,
-    buttonColour,
+    backgroundColour = 'deep_violet_dark',
+    buttonColour = 'red',
     formContext,
-    columnLayout,
+    columnLayout = false,
     ...rest
   } = _ref;
   const {
@@ -88,9 +88,4 @@ const EmailSignUp = _ref => {
     "data-test": "subscribe-button"
   }, /*#__PURE__*/_react.default.createElement(_Text.default, null, "Subscribe")))), isSubmitted && !isSubmitSuccessful && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, errors.formError !== undefined && /*#__PURE__*/_react.default.createElement(_ErrorText.default, null, errors.formError.message)), /*#__PURE__*/_react.default.createElement(_EmailSignUp.PrivacyCopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, privacyCopy)));
 };
-exports.EmailSignUp = EmailSignUp;
-EmailSignUp.defaultProps = {
-  backgroundColour: 'deep_violet_dark',
-  buttonColour: 'red',
-  columnLayout: false
-};
+exports.EmailSignUp = EmailSignUp;

package/dist/components/Organisms/EmailSignUp/_TextInput.js

@@ -13,9 +13,9 @@ const TextInput = _ref => {
   let {
     fieldName,
     label,
-    optional,
-    fieldType,
-    formContext,
+    optional = null,
+    fieldType = 'text',
+    formContext = null,
     ...rest
   } = _ref;
   const {
@@ -36,9 +36,4 @@ const TextInput = _ref => {
   };
   return /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({}, props, register(fieldName)));
 };
-TextInput.defaultProps = {
-  optional: null,
-  fieldType: 'text',
-  formContext: null
-};
 var _default = exports.default = TextInput;

package/dist/components/Organisms/Footer/Footer.js

@@ -13,15 +13,17 @@ var _SocialIcons = _interopRequireDefault(require("../../Atoms/SocialIcons/Socia
 var _Footer = require("./Footer.style");
 const Footer = _ref => {
   let {
-    navItems,
-    footerCopy,
-    campaign,
-    additionalLegalLine,
+    navItems = {},
+    footerCopy = '',
+    campaign = 'Comic Relief',
+    additionalLegalLine = '',
+    overrideallowList = false,
     ...rest
   } = _ref;
   // Remove white space between words
   const campaignName = campaign.replace(/\s/g, '').toLowerCase();
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Footer.FooterWrapper, Object.assign({
+    overrideallowList: overrideallowList,
     navItems: true
   }, rest), /*#__PURE__*/_react.default.createElement(_Footer.InnerWrapper, null, additionalLegalLine && /*#__PURE__*/_react.default.createElement(_Footer.FooterLegalLine, {
     tag: "p",
@@ -43,11 +45,4 @@ const Footer = _ref => {
     color: "grey"
   }, footerCopy)))));
 };
-Footer.defaultProps = {
-  navItems: {},
-  footerCopy: '',
-  campaign: 'Comic Relief',
-  overrideallowList: false,
-  additionalLegalLine: ''
-};
 var _default = exports.default = Footer;

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

@@ -14,7 +14,7 @@ var _internalLinkHelper = require("../../../../utils/internalLinkHelper");
 var _Nav = require("./Nav.style");
 const FooterNav = _ref => {
   let {
-    navItems,
+    navItems = {},
     ...rest
   } = _ref;
   const {
@@ -99,7 +99,4 @@ const FooterNav = _ref => {
     }, child.title)));
   }))))));
 };
-FooterNav.defaultProps = {
-  navItems: {}
-};
 var _default = exports.default = FooterNav;

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

@@ -11,9 +11,9 @@ var _Nav = _interopRequireDefault(require("./Nav/Nav"));
 var _Header = require("./Header.style");
 const Header = _ref => {
   let {
-    navItems,
+    navItems = {},
     metaIcons,
-    campaign,
+    campaign = 'Comic Relief',
     ...rest
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_Header.HeaderWrapper, Object.assign({
@@ -24,8 +24,4 @@ const Header = _ref => {
     navItems: navItems
   }), /*#__PURE__*/_react.default.createElement(_Header.MetaIcons, null, metaIcons)));
 };
-Header.defaultProps = {
-  navItems: {},
-  campaign: 'Comic Relief'
-};
 var _default = exports.default = Header;

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

@@ -17,7 +17,7 @@ var _chevronDown = _interopRequireDefault(require("./chevron-down.svg"));
 var _Nav = require("./Nav.style");
 const MainNav = _ref => {
   let {
-    navItems
+    navItems = {}
   } = _ref;
   const {
     menuGroups
@@ -134,7 +134,4 @@ const MainNav = _ref => {
     isExpandable: isExpandable
   }, "Open"));
 };
-MainNav.defaultProps = {
-  navItems: {}
-};
 var _default = exports.default = MainNav;

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

@@ -21,10 +21,10 @@ const ImpactSlider = _ref => {
     items,
     step,
     max,
-    backgroundColour,
-    opacityAnimation,
+    backgroundColour = 'grey_extra_light',
+    opacityAnimation = false,
     children,
-    defaultSliderValue
+    defaultSliderValue = null
   } = _ref;
   // Use the lowest possible amount as our default:
   const [currentAmount, setCurrentAmount] = (0, _react.useState)(defaultSliderValue || step);
@@ -65,9 +65,4 @@ const ImpactSlider = _ref => {
     disabled: currentAmount === 0
   }, "Donate \xA3", currentAmount, ' ', "now")));
 };
-ImpactSlider.defaultProps = {
-  opacityAnimation: false,
-  defaultSliderValue: null,
-  backgroundColour: 'grey_extra_light'
-};
 var _default = exports.default = ImpactSlider;

package/dist/components/Organisms/MarketingPreferencesDS/_CheckAnswer.js

@@ -12,8 +12,8 @@ const CheckAnswer = _ref => {
   let {
     name,
     mpValidationOptions,
-    userSelection,
-    formContext
+    userSelection = null,
+    formContext = null
   } = _ref;
   const {
     setValue,
@@ -62,8 +62,4 @@ const CheckAnswer = _ref => {
     onChange: onChange
   })), /*#__PURE__*/_react.default.createElement("span", null), _AssociatedFields.default[name].label));
 };
-CheckAnswer.defaultProps = {
-  userSelection: null,
-  formContext: null
-};
 var _default = exports.default = CheckAnswer;

package/dist/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js

@@ -27,11 +27,11 @@ var _MarketingPreferencesDS = require("./MarketingPreferencesDS.style");
 var _MarketingPrefsConfig = require("./_MarketingPrefsConfig");
 const MarketingPreferencesDS = _ref => {
   let {
-    copyTop,
-    copyBottom,
+    copyTop = _DefaultCopy.defaultCopyTop,
+    copyBottom = _DefaultCopy.defaultCopyBottom,
     mpValidationOptions,
-    id,
-    formContext
+    id = null,
+    formContext = null
   } = _ref;
   const {
     formState: {
@@ -212,23 +212,13 @@ const MarketingPreferencesDS = _ref => {
 exports.MarketingPreferencesDS = MarketingPreferencesDS;
 const MaybeDisabled = _ref2 => {
   let {
-    children,
-    disabled
+    children = null,
+    disabled = false
   } = _ref2;
   if (disabled) return null;
   return children;
 };
-MarketingPreferencesDS.defaultProps = {
-  copyTop: _DefaultCopy.defaultCopyTop,
-  copyBottom: _DefaultCopy.defaultCopyBottom,
-  id: null,
-  formContext: null
-};
 MaybeDisabled.propTypes = {
   children: _propTypes.default.node,
   disabled: _propTypes.default.bool
-};
-MaybeDisabled.defaultProps = {
-  children: null,
-  disabled: false
 };

package/dist/components/Organisms/MarketingPreferencesDS/_TextInput.js

@@ -11,9 +11,9 @@ const TextInput = _ref => {
   let {
     fieldName,
     label,
-    optional,
-    fieldType,
-    formContext,
+    optional = null,
+    fieldType = 'text',
+    formContext = null,
     ...rest
   } = _ref;
   const {
@@ -34,9 +34,4 @@ const TextInput = _ref => {
   };
   return /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({}, props, register(fieldName)));
 };
-TextInput.defaultProps = {
-  optional: null,
-  fieldType: 'text',
-  formContext: null
-};
 var _default = exports.default = TextInput;

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

@@ -18,7 +18,7 @@ const Signup = _ref => {
     },
     donateLink,
     otherDescription,
-    clientID,
+    clientID = 'the_fix',
     cartID,
     mbshipID,
     ...rest
@@ -157,8 +157,4 @@ const Signup = _ref => {
     as: "p"
   }, moneyBuyCopy))));
 };
-Signup.defaultProps = {
-  clientID: 'the_fix',
-  data: {}
-};
 var _default = exports.default = Signup;

package/dist/components/Organisms/Membership/Membership.js

@@ -11,19 +11,19 @@ var _Form = _interopRequireDefault(require("./Form/Form"));
 var _Membership = require("./Membership.style");
 const Membership = _ref => {
   let {
-    alt,
+    alt = '',
+    data = {},
+    formAligntRight = true,
+    imageLow = null,
+    image = null,
+    images = null,
+    backgroundColor = null,
+    mbshipID = null,
     cartID,
-    backgroundColor,
     donateLink,
-    data,
     title,
     subtitle,
-    otherDescription,
-    formAligntRight,
-    images,
-    image,
-    imageLow,
-    mbshipID
+    otherDescription
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_Membership.Container, {
     formAligntRight: formAligntRight,
@@ -52,14 +52,4 @@ const Membership = _ref => {
     donateLink: donateLink
   })));
 };
-Membership.defaultProps = {
-  alt: '',
-  data: {},
-  formAligntRight: true,
-  imageLow: null,
-  image: null,
-  images: null,
-  backgroundColor: null,
-  mbshipID: null
-};
 var _default = exports.default = Membership;

package/dist/components/Organisms/Membership/MoneyBox/MoneyBox.js

@@ -48,9 +48,9 @@ const MoneyBox = (0, _styledComponents.default)(_Input.default).withConfig({
 const MoneyBuy = _ref7 => {
   let {
     setOtherAmount,
-    amount,
-    currency,
-    description,
+    amount = '10',
+    currency = '£',
+    description = 'description',
     ...rest
   } = _ref7;
   return /*#__PURE__*/_react.default.createElement(MoneyBox, Object.assign({}, rest, {
@@ -62,9 +62,4 @@ const MoneyBuy = _ref7 => {
     onClick: setOtherAmount
   }));
 };
-MoneyBuy.defaultProps = {
-  amount: '10',
-  currency: '£',
-  description: 'description'
-};
 var _default = exports.default = MoneyBuy;

package/package.json

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

package/src/components/Atoms/Button/Button.js

@@ -33,20 +33,15 @@ const StyledButton = styled.button`
   }
 `;
 
-const Button = React.forwardRef(({ children, wrapper, ...rest }, ref) => (
+const Button = React.forwardRef(({ children, wrapper = false, ...rest }, ref) => (
   <StyledButton {...rest} as={wrapper ? 'span' : 'button'} ref={ref}>
     {children}
   </StyledButton>
 ));
 
 Button.propTypes = {
-  /** Buttons as span */
-  wrapper: PropTypes.bool,
-  children: PropTypes.node.isRequired
-};
-
-Button.defaultProps = {
-  wrapper: false
+  children: PropTypes.node.isRequired,
+  wrapper: PropTypes.bool // Buttons as span
 };
 
 export default Button;

package/src/components/Atoms/ButtonWithStates/ButtonWithStates.js

@@ -19,7 +19,7 @@ const LoaderContainer = styled.div`${({ withMargin }) => (withMargin ? `
 
 // A button with loading and disabled states.
 const ButtonWithStates = React.forwardRef(({
-  children, loadingText, loading, disabled, ...rest
+  children, loadingText = 'Loading', loading = false, disabled = false, ...rest
 }, ref) => {
   const [loaderColour, setLoaderColour] = useState(null);
 
@@ -55,10 +55,4 @@ ButtonWithStates.propTypes = {
   disabled: PropTypes.bool
 };
 
-ButtonWithStates.defaultProps = {
-  loading: false,
-  disabled: false,
-  loadingText: 'Loading'
-};
-
 export default ButtonWithStates;

package/src/components/Atoms/Checkbox/Checkbox.js

@@ -45,7 +45,7 @@ const Label = styled.label`
 `;
 
 const Checkbox = React.forwardRef(({
-  label, value, children, ...rest
+  label = undefined, value, children = undefined, ...rest
 }, ref) => (
   <Label hasLabelAsString={!!label}>
     <StyledCheckboxInput {...rest} value={value} ref={ref} />
@@ -61,9 +61,4 @@ Checkbox.propTypes = {
   children: PropTypes.node
 };
 
-Checkbox.defaultProps = {
-  label: undefined,
-  children: undefined
-};
-
 export default Checkbox;

package/src/components/Atoms/Confetti/Confetti.js

@@ -31,7 +31,7 @@ function getAnimationSettings(originXA, originXB) {
   };
 }
 
-export default function Confetti({ trigger, duration }) {
+export default function Confetti({ trigger, duration = 3000 }) {
   const refAnimationInstance = useRef(null);
   const [intervalId, setIntervalId] = useState();
 
@@ -96,10 +96,6 @@ export default function Confetti({ trigger, duration }) {
   );
 }
 
-Confetti.defaultProps = {
-  duration: 3000
-};
-
 Confetti.propTypes = {
   trigger: PropTypes.bool.isRequired,
   duration: PropTypes.number