@comicrelief/component-library 8.1.1 → 8.2.0

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.1",
+  "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

package/src/components/Atoms/Icons/Arrow.js

@@ -22,7 +22,7 @@ const Icon = styled.svg`
 `;
 
 const Arrow = ({
-  colour, mobileColour, theme, size, direction, ...rest
+  colour = 'white', mobileColour = null, theme, size = 24, direction = 'up', ...rest
 }) => (
   <Icon
     direction={direction}
@@ -46,11 +46,4 @@ Arrow.propTypes = {
   theme: PropTypes.objectOf(PropTypes.shape).isRequired
 };
 
-Arrow.defaultProps = {
-  colour: 'white',
-  mobileColour: null,
-  size: 24,
-  direction: 'up'
-};
-
 export default withTheme(Arrow);

package/src/components/Atoms/Icons/AtSign.js

@@ -15,7 +15,7 @@ const StyledSVG = styled.svg`
 `;
 
 const AtSign = ({
-  theme, size, colour, mobileColour, ...rest
+  theme, size = 24, colour = 'white', mobileColour = null, ...rest
 }) => (
   <StyledSVG
     width={size}
@@ -36,10 +36,4 @@ AtSign.propTypes = {
   mobileColour: PropTypes.string
 };
 
-AtSign.defaultProps = {
-  size: 24,
-  colour: 'white',
-  mobileColour: null
-};
-
 export default withTheme(AtSign);

package/src/components/Atoms/Icons/Chevron.js

@@ -22,7 +22,7 @@ const Icon = styled.svg`
 `;
 
 const Chevron = ({
-  colour, mobileColour, theme, size, direction, ...rest
+  colour = 'white', mobileColour = null, theme, size = 24, direction = 'up', ...rest
 }) => (
   <Icon
     direction={direction}
@@ -47,11 +47,4 @@ Chevron.propTypes = {
   theme: PropTypes.objectOf(PropTypes.shape).isRequired
 };
 
-Chevron.defaultProps = {
-  colour: 'white',
-  mobileColour: null,
-  size: 24,
-  direction: 'up'
-};
-
 export default withTheme(Chevron);

package/src/components/Atoms/Icons/Download.js

@@ -13,7 +13,7 @@ const StyledSVG = styled.svg`
 `;
 
 const Download = ({
-  colour, mobileColour, theme, size, ...rest
+  colour = 'white', mobileColour = null, theme, size = 24, ...rest
 }) => (
   <StyledSVG
     {...rest}
@@ -36,10 +36,4 @@ Download.propTypes = {
   theme: PropTypes.objectOf(PropTypes.shape).isRequired
 };
 
-Download.defaultProps = {
-  colour: 'white',
-  mobileColour: null,
-  size: 24
-};
-
 export default withTheme(Download);

package/src/components/Atoms/Icons/External.js

@@ -13,7 +13,7 @@ const StyledSVG = styled.svg`
 `;
 
 const External = ({
-  colour, mobileColour, theme, size, ...rest
+  colour = 'white', mobileColour = null, theme, size = 24, ...rest
 }) => (
   <StyledSVG
     {...rest}
@@ -36,10 +36,4 @@ External.propTypes = {
   theme: PropTypes.objectOf(PropTypes.shape).isRequired
 };
 
-External.defaultProps = {
-  colour: 'white',
-  mobileColour: null,
-  size: 24
-};
-
 export default withTheme(External);

package/src/components/Atoms/Icons/Favourite.js

@@ -13,7 +13,7 @@ const StyledSVG = styled.svg`
 `;
 
 const Favourite = ({
-  colour, mobileColour, theme, size, ...rest
+  colour = 'white', mobileColour = null, theme, size = 24, ...rest
 }) => (
   <StyledSVG
     {...rest}
@@ -36,10 +36,4 @@ Favourite.propTypes = {
   theme: PropTypes.objectOf(PropTypes.shape).isRequired
 };
 
-Favourite.defaultProps = {
-  colour: 'white',
-  mobileColour: null,
-  size: 24
-};
-
 export default withTheme(Favourite);

package/src/components/Atoms/Icons/Internal.js

@@ -13,7 +13,7 @@ const StyledSVG = styled.svg`
 `;
 
 const Internal = ({
-  colour, mobileColour, theme, size, ...rest
+  colour = 'white', mobileColour = null, theme, size = 24, ...rest
 }) => (
   <StyledSVG
     {...rest}
@@ -36,10 +36,4 @@ Internal.propTypes = {
   theme: PropTypes.objectOf(PropTypes.shape).isRequired
 };
 
-Internal.defaultProps = {
-  colour: 'white',
-  mobileColour: null,
-  size: 24
-};
-
 export default withTheme(Internal);

package/src/components/Atoms/Input/Input.js

@@ -62,16 +62,17 @@ const Prefix = styled.div`
 const Input = React.forwardRef(
   (
     {
-      errorMsg,
+      errorMsg = '',
       id,
       label,
-      showLabel,
+      showLabel = true,
       type,
-      hasAria,
-      className,
-      labelProps,
-      prefix,
-      optional,
+      hasAria = true,
+      className = '',
+      placeholder = '',
+      labelProps = {},
+      prefix = '',
+      optional = null,
       ...rest
     },
     ref
@@ -90,6 +91,7 @@ const Input = React.forwardRef(
         <InputField
           id={id}
           type={type}
+          placeholder={placeholder}
           error={!!errorMsg}
           aria-describedby={hasAria ? id : undefined}
           ref={ref}
@@ -127,15 +129,4 @@ Input.propTypes = {
   optional: PropTypes.bool
 };
 
-Input.defaultProps = {
-  showLabel: true,
-  hasAria: true,
-  placeholder: '',
-  errorMsg: '',
-  labelProps: {},
-  className: '',
-  prefix: '',
-  optional: null
-};
-
 export default Input;

package/src/components/Atoms/Label/Label.js

@@ -47,10 +47,10 @@ const LabelText = ({
  * @constructor
  */
 const Label = ({
-  children,
+  children = null,
   label,
-  hideLabel,
-  optional,
+  hideLabel = false,
+  optional = null,
   ...rest
 }) => (
   <LabelElement {...rest} optional={optional}>
@@ -70,12 +70,6 @@ Label.propTypes = {
   optional: PropTypes.bool
 };
 
-Label.defaultProps = {
-  hideLabel: false,
-  children: null,
-  optional: null
-};
-
 LabelText.propTypes = {
   label: PropTypes.oneOfType([
     PropTypes.string,
@@ -85,8 +79,4 @@ LabelText.propTypes = {
   children: PropTypes.node
 };
 
-LabelText.defaultProps = {
-  hideLabel: false,
-  children: null
-};
 export default Label;

package/src/components/Atoms/Link/Link.js

@@ -9,15 +9,15 @@ let window = '';
 
 const Link = ({
   children,
-  color,
-  mobileColour,
+  color = 'red',
+  mobileColour = null,
   href,
-  target,
-  type,
-  home,
-  underline,
-  icon,
-  iconFirst,
+  target = null,
+  type = 'standard',
+  home = false,
+  underline = true,
+  icon = null,
+  iconFirst = false,
   ...rest
 }) => {
   const [documentHost, setDocumentHost] = useState('');
@@ -59,6 +59,7 @@ const Link = ({
       href={href}
       target={window}
       type={type}
+      home={home}
       iconFirst={iconFirst}
       underline={underline}
     >
@@ -89,15 +90,4 @@ Link.propTypes = {
   icon: PropTypes.node
 };
 
-Link.defaultProps = {
-  type: 'standard',
-  color: 'red',
-  mobileColour: null,
-  target: null,
-  home: false,
-  underline: true,
-  iconFirst: false,
-  icon: null
-};
-
 export default Link;

package/src/components/Atoms/Logo/Logo.js

@@ -46,7 +46,7 @@ const themeSwitcher = theme => {
 };
 
 const Logo = ({
-  rotate, sizeSm, sizeMd, campaign
+  rotate = false, sizeSm = '51px', sizeMd = '70px', campaign = 'Comic Relief'
 }) => (
   <LogoWrapper rotate={rotate ? 1 : 0} sizeSm={sizeSm} sizeMd={sizeMd}>
     <Image
@@ -68,11 +68,4 @@ Logo.propTypes = {
   campaign: PropTypes.string
 };
 
-Logo.defaultProps = {
-  rotate: false,
-  sizeSm: '51px', // - to work with the header 75px height and 12px padding
-  sizeMd: '70px',
-  campaign: 'Comic Relief'
-};
-
 export default Logo;