feat: Convert defaultProps to argument defaults (#668)

* feat: Convert defaultProps to argument defaults * fix: Button wrapper comment * Convert defaultProps to argument defaults in ButtonWithStates * Convert defaultProps to argument defaults in Checkbox * Convert defaultProps to argument defaults for icons * Convert defaultProps to argument defaults for input * fix lint error * fix unit test failure / Convert defaultProps to argument defaults for label * Convert defaultProps to argument defaults for link and logo * Convert defaultProps to argument defaults for Pagination / Picture / RichText / Select * Convert defaultProps to argument defaults for SocialIcons / Text / TextArea / TextInputWithDropdown * Convert defaultProps to argument defaults for ArticleTeaser / Banner / Box / Card * Convert defaultProps to argument defaults for CardDs Chip Countdown Logos Lookup Promo * Convert defaultProps to argument defaults for all the rest Molecules components * Convert defaultProps to argument defaults for all the Organisms components * Convert defaultProps to argument defaults for Donate / Donate Form * fix lint error / fix unit test failure * modify monthlyChooseAmountText and monthlyOtherAmountText --------- Co-authored-by: HadeerAshrafElNagar <hadeer.ashraf@camelcasetech.com>
comicrelief · Aug 16, 2024 · 5fd95c8 · 5fd95c8
1 parent 3e97285
commit 5fd95c8
Show file tree

Hide file tree

Showing 60 changed files with 290 additions and 767 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -15,6 +15,7 @@
       "exceptions": [""]
     }],
     "arrow-parens": [2, "as-needed", { "requireForBlockBody": false }],
+    "react/require-default-props": "off",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "react/jsx-filename-extension": "off",

diff --git a/src/components/Atoms/Button/Button.js b/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;
diff --git a/src/components/Atoms/ButtonWithStates/ButtonWithStates.js b/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;
diff --git a/src/components/Atoms/Checkbox/Checkbox.js b/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;
diff --git a/src/components/Atoms/Confetti/Confetti.js b/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

diff --git a/src/components/Atoms/Icons/Arrow.js b/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);
diff --git a/src/components/Atoms/Icons/AtSign.js b/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);
diff --git a/src/components/Atoms/Icons/Chevron.js b/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);
diff --git a/src/components/Atoms/Icons/Download.js b/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);
diff --git a/src/components/Atoms/Icons/External.js b/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);
diff --git a/src/components/Atoms/Icons/Favourite.js b/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);
diff --git a/src/components/Atoms/Icons/Internal.js b/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);
diff --git a/src/components/Atoms/Input/Input.js b/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;
diff --git a/src/components/Atoms/Label/Label.js b/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;
diff --git a/src/components/Atoms/Link/Link.js b/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;
diff --git a/src/components/Atoms/Logo/Logo.js b/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;