@comicrelief/component-library 8.1.2 → 8.2.0

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

@@ -17,41 +17,41 @@ import {
 } from './Donate.style';
 
 const Donate = ({
-  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 = ''
 }) => {
   let isDesktop = useMediaQuery({ query: `(min-width: ${breakpointValues.L}px)` });
 
@@ -202,39 +202,4 @@ Donate.propTypes = {
   paddingOption: PropTypes.string
 };
 
-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
-};
-
 export default Donate;

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

@@ -33,18 +33,16 @@ const Signup = ({
   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
 }) => {
   // const [givingType, setGivingType] = useState();
@@ -345,22 +343,8 @@ Signup.propTypes = {
   additionalSingleCopy: PropTypes.string,
   additionalMonthlyCopy: PropTypes.string,
   defaultGivingType: PropTypes.string,
-  monthlyChooseAmountCopy: PropTypes.string,
-  monthlyOtherAmountCopy: PropTypes.string,
   changeGivingType: PropTypes.func.isRequired,
   givingType: PropTypes.string
 };
 
-Signup.defaultProps = {
-  noMoneyBuys: false,
-  otherAmountValue: null,
-  data: {},
-  additionalSingleCopy: null,
-  additionalMonthlyCopy: null,
-  defaultGivingType: null,
-  monthlyChooseAmountCopy: null,
-  monthlyOtherAmountCopy: null,
-  givingType: null
-};
-
 export default Signup;

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

@@ -6,7 +6,7 @@ import {
 } from './GivingSelector.style';
 
 const GivingSelector = ({
-  givingType, changeGivingType, setPopOpen, mbshipID
+  givingType = null, changeGivingType, setPopOpen, mbshipID
 }) => {
   // Only updates giving type and popup status when appropriate
   const handleGivingTypeChange = (thisButtonType, currentGivingType) => {
@@ -51,10 +51,6 @@ const GivingSelector = ({
   );
 };
 
-GivingSelector.defaultProps = {
-  givingType: null
-};
-
 GivingSelector.propTypes = {
   givingType: PropTypes.string,
   changeGivingType: PropTypes.func.isRequired,

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

@@ -45,9 +45,9 @@ const MoneyBuyButton = styled(Input)`
 
 const MoneyBuy = ({
   setOtherAmount,
-  amount,
-  currency,
-  description,
+  amount = '10',
+  currency = '£',
+  description = 'description',
   ...rest
 }) => (
   <MoneyBuyButton
@@ -69,10 +69,4 @@ MoneyBuy.propTypes = {
   setOtherAmount: PropTypes.func.isRequired
 };
 
-MoneyBuy.defaultProps = {
-  amount: '10',
-  currency: '£',
-  description: 'description'
-};
-
 export default MoneyBuy;

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

@@ -22,10 +22,10 @@ const EmailSignUp = ({
   topCopy,
   successCopy,
   privacyCopy,
-  backgroundColour,
-  buttonColour,
+  backgroundColour = 'deep_violet_dark',
+  buttonColour = 'red',
   formContext,
-  columnLayout,
+  columnLayout = false,
   ...rest
 }) => {
   const {
@@ -126,10 +126,4 @@ EmailSignUp.propTypes = {
   columnLayout: PropTypes.bool
 };
 
-EmailSignUp.defaultProps = {
-  backgroundColour: 'deep_violet_dark',
-  buttonColour: 'red',
-  columnLayout: false
-};
-
 export { EmailSignUp, buildEsuValidationSchema, ESU_FIELDS };

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

@@ -7,9 +7,9 @@ import Input from '../../Atoms/Input/Input';
 const TextInput = ({
   fieldName,
   label,
-  optional,
-  fieldType,
-  formContext,
+  optional = null,
+  fieldType = 'text',
+  formContext = null,
   ...rest
 }) => {
   const { formState: { errors }, register } = formContext;
@@ -28,12 +28,6 @@ const TextInput = ({
   return <Input {...props} {...register(fieldName)} />;
 };
 
-TextInput.defaultProps = {
-  optional: null,
-  fieldType: 'text',
-  formContext: null
-};
-
 TextInput.propTypes = {
   fieldName: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,

package/src/components/Organisms/Footer/Footer.js

@@ -16,14 +16,14 @@ import {
 } from './Footer.style';
 
 const Footer = ({
-  navItems, footerCopy, campaign, additionalLegalLine, ...rest
+  navItems = {}, footerCopy = '', campaign = 'Comic Relief', additionalLegalLine = '', overrideallowList = false, ...rest
 }) => {
   // Remove white space between words
   const campaignName = campaign.replace(/\s/g, '').toLowerCase();
 
   return (
     <div>
-      <FooterWrapper navItems {...rest}>
+      <FooterWrapper overrideallowList={overrideallowList} navItems {...rest}>
         <InnerWrapper>
           {additionalLegalLine
             && <FooterLegalLine tag="p" color="grey">{additionalLegalLine}</FooterLegalLine>
@@ -56,12 +56,4 @@ Footer.propTypes = {
   additionalLegalLine: PropTypes.string
 };
 
-Footer.defaultProps = {
-  navItems: {},
-  footerCopy: '',
-  campaign: 'Comic Relief',
-  overrideallowList: false,
-  additionalLegalLine: ''
-};
-
 export default Footer;

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

@@ -16,7 +16,7 @@ import {
   SubNavLink
 } from './Nav.style';
 
-const FooterNav = ({ navItems, ...rest }) => {
+const FooterNav = ({ navItems = {}, ...rest }) => {
   const { menuGroups } = navItems;
   const [isExpandable] = useState(false);
   const [isSubMenuOpen, setIsSubMenuOpen] = useState({});
@@ -123,8 +123,4 @@ FooterNav.propTypes = {
   navItems: PropTypes.objectOf(PropTypes.shape)
 };
 
-FooterNav.defaultProps = {
-  navItems: {}
-};
-
 export default FooterNav;

package/src/components/Organisms/Header/Header.js

@@ -8,7 +8,7 @@ import {
 } from './Header.style';
 
 const Header = ({
-  navItems, metaIcons, campaign, ...rest
+  navItems = {}, metaIcons, campaign = 'Comic Relief', ...rest
 }) => (
   <HeaderWrapper navItems {...rest}>
     <InnerWrapper>
@@ -29,9 +29,4 @@ Header.propTypes = {
   campaign: PropTypes.string
 };
 
-Header.defaultProps = {
-  navItems: {},
-  campaign: 'Comic Relief'
-};
-
 export default Header;

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

@@ -21,7 +21,7 @@ import {
   ChevronWrapper
 } from './Nav.style';
 
-const MainNav = ({ navItems }) => {
+const MainNav = ({ navItems = {} }) => {
   const { menuGroups } = navItems;
   const [isExpandable, setIsExpandable] = useState(false);
   const [isSubMenuOpen, setIsSubMenuOpen] = useState({});
@@ -180,8 +180,4 @@ MainNav.propTypes = {
   navItems: PropTypes.objectOf(PropTypes.shape)
 };
 
-MainNav.defaultProps = {
-  navItems: {}
-};
-
 export default MainNav;

package/src/components/Organisms/ImpactSlider/ImpactSlider.js

@@ -11,7 +11,7 @@ import {
 
 const ImpactSlider = ({
   heading, cartID, donateLink, rowID, items, step, max,
-  backgroundColour, opacityAnimation, children, defaultSliderValue
+  backgroundColour = 'grey_extra_light', opacityAnimation = false, children, defaultSliderValue = null
 }) => {
   // Use the lowest possible amount as our default:
   const [currentAmount, setCurrentAmount] = useState(defaultSliderValue || step);
@@ -65,12 +65,6 @@ const ImpactSlider = ({
   );
 };
 
-ImpactSlider.defaultProps = {
-  opacityAnimation: false,
-  defaultSliderValue: null,
-  backgroundColour: 'grey_extra_light'
-};
-
 ImpactSlider.propTypes = {
   heading: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,

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

@@ -9,7 +9,7 @@ import {
 } from './MarketingPreferencesDS.style';
 
 const CheckAnswer = ({
-  name, mpValidationOptions, userSelection, formContext
+  name, mpValidationOptions, userSelection = null, formContext = null
 }) => {
   const { setValue, clearErrors, register } = formContext;
 
@@ -63,11 +63,6 @@ const CheckAnswer = ({
   );
 };
 
-CheckAnswer.defaultProps = {
-  userSelection: null,
-  formContext: null
-};
-
 CheckAnswer.propTypes = {
   name: PropTypes.string.isRequired,
   /* These options are created in _MarketingPrefsConfig.js, passed to react-hook-form

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

@@ -15,11 +15,11 @@ import {
 } from './_MarketingPrefsConfig';
 
 const MarketingPreferencesDS = ({
-  copyTop,
-  copyBottom,
+  copyTop = defaultCopyTop,
+  copyBottom = defaultCopyBottom,
   mpValidationOptions,
-  id,
-  formContext
+  id = null,
+  formContext = null
 }) => {
   const { formState: { errors }, control } = formContext;
 
@@ -241,7 +241,7 @@ const MarketingPreferencesDS = ({
 };
 
 // removes from DOM completely
-const MaybeDisabled = ({ children, disabled }) => {
+const MaybeDisabled = ({ children = null, disabled = false }) => {
   if (disabled) return null;
   return children;
 };
@@ -256,23 +256,11 @@ MarketingPreferencesDS.propTypes = {
   formContext: PropTypes.shape()
 };
 
-MarketingPreferencesDS.defaultProps = {
-  copyTop: defaultCopyTop,
-  copyBottom: defaultCopyBottom,
-  id: null,
-  formContext: null
-};
-
 MaybeDisabled.propTypes = {
   children: PropTypes.node,
   disabled: PropTypes.bool
 };
 
-MaybeDisabled.defaultProps = {
-  children: null,
-  disabled: false
-};
-
 export {
   MarketingPreferencesDS, setInitialValues, buildValidationSchema
 };

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

@@ -4,7 +4,7 @@ import Input from '../../Atoms/Input/Input';
 
 const TextInput = ({
   fieldName, label,
-  optional, fieldType, formContext, ...rest
+  optional = null, fieldType = 'text', formContext = null, ...rest
 }) => {
   const { formState: { errors }, register } = formContext;
 
@@ -23,12 +23,6 @@ const TextInput = ({
   return <Input {...props} {...register(fieldName)} />;
 };
 
-TextInput.defaultProps = {
-  optional: null,
-  fieldType: 'text',
-  formContext: null
-};
-
 TextInput.propTypes = {
   fieldName: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,

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

@@ -27,7 +27,7 @@ const Signup = ({
   data: { regularGiving },
   donateLink,
   otherDescription,
-  clientID,
+  clientID = 'the_fix',
   cartID,
   mbshipID,
   ...rest
@@ -204,8 +204,4 @@ Signup.propTypes = {
   data: PropTypes.objectOf(PropTypes.shape)
 };
 
-Signup.defaultProps = {
-  clientID: 'the_fix',
-  data: {}
-};
 export default Signup;

package/src/components/Organisms/Membership/Membership.js

@@ -8,19 +8,19 @@ import {
 } from './Membership.style';
 
 const Membership = ({
-  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
 }) => (
   <Container
     formAligntRight={formAligntRight}
@@ -72,14 +72,4 @@ Membership.propTypes = {
   mbshipID: PropTypes.string
 };
 
-Membership.defaultProps = {
-  alt: '',
-  data: {},
-  formAligntRight: true,
-  imageLow: null,
-  image: null,
-  images: null,
-  backgroundColor: null,
-  mbshipID: null
-};
 export default Membership;

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

@@ -24,9 +24,9 @@ const MoneyBox = styled(Input)`
 
 const MoneyBuy = ({
   setOtherAmount,
-  amount,
-  currency,
-  description,
+  amount = '10',
+  currency = '£',
+  description = 'description',
   ...rest
 }) => (
   <MoneyBox
@@ -48,10 +48,4 @@ MoneyBuy.propTypes = {
   setOtherAmount: PropTypes.func.isRequired
 };
 
-MoneyBuy.defaultProps = {
-  amount: '10',
-  currency: '£',
-  description: 'description'
-};
-
 export default MoneyBuy;