Remove defaultProps from components and use Javascript default parame…

…ters instead (#1063) * removed default paramaters from CheckBox.js * removed default paramaters from DateModified.js * removed default paramaters from DSButton.js * removed defaultProps from Link.js * removed defaultProps from MultiTextField.js * removed defaultProps from RadioButton.js * removed defaultProps from RadioField.js * removed defaultProps from SelectField.js * removed defaultProps from TextField.js * removed defaultProps from Collapse.js * removed defaultProps from CopyToClipboard.js * removed defaultProps from ErrorBox.js * removed defaultProps from OptionalListField.js * removed defaultProps from OptionalTextField.js * removed defaultProps from Footer.js * removed defaultProps from Button.jsx * removed defaultProps from Header.jsx
DTS-STN · Jul 5, 2024 · 329e152 · 329e152
1 parent b5c8b0b
commit 329e152
Show file tree

Hide file tree

Showing 17 changed files with 108 additions and 159 deletions.
diff --git a/components/atoms/CheckBox.js b/components/atoms/CheckBox.js
@@ -3,10 +3,15 @@ import PropTypes from "prop-types";
 /**
  * check box component for forms
  */
-export function CheckBox(props) {
+export function CheckBox({
+  checked = false,
+  value = "true",
+  showRequiredLabel = false,
+  ...props
+}) {
   const ifControlledProps = !props.uncontrolled
     ? {
-        checked: props.checked,
+        checked: checked,
       }
     : {};
   return (
@@ -19,13 +24,13 @@ export function CheckBox(props) {
         className="control-input cursor-pointer appearance-none w-40px h-40px absolute left-0 m-0 z-1 opacity-0"
         id={props.id}
         name={props.name}
-        value={props.value}
+        value={value}
         type="checkbox"
         onChange={(e) =>
           props.onChange(
-            props.uncontrolled ? !e.currentTarget.checked : props.checked,
+            props.uncontrolled ? !e.currentTarget.checked : checked,
             props.name,
-            props.value
+            value
           )
         }
         aria-required={props.required}
@@ -40,7 +45,7 @@ export function CheckBox(props) {
         } font-body${props.error ? " text-error-border-red" : undefined}`}
         htmlFor={props.id}
       >
-        {props.showRequiredLabel ? (
+        {showRequiredLabel ? (
           <b className="text-error-border-red" aria-hidden="true">
             *
           </b>
@@ -51,12 +56,6 @@ export function CheckBox(props) {
   );
 }
 
-CheckBox.defaultProps = {
-  checked: false,
-  value: "true",
-  showRequiredLabel: false,
-};
-
 CheckBox.propTypes = {
   /**
    * additional css for the component

diff --git a/components/atoms/DSButton.js b/components/atoms/DSButton.js
@@ -3,7 +3,13 @@ import { Image } from "./Image";
 
 // Button used in HelpIcon.js and CTA.js
 // Use ActionButton.js for all other buttons in the app
-export function DSButton(props) {
+export function DSButton({
+  id = "btn1",
+  styling = "supertask",
+  text = "default",
+  href = "no ref",
+  ...props
+}) {
   //Styling for buttons and links
   const PRIMARY =
     "text-multi-neutrals-white bg-multi-blue-blue70 hover:bg-multi-blue-blue60g focus:bg-multi-blue-blue60g";
@@ -16,25 +22,25 @@ export function DSButton(props) {
   const LINK =
     "text-multi-blue-blue60c hover:text-multi-blue-blue50b focus:text-multi-blue-blue60f";
 
-  const styling =
-    props.styling === "primary"
+  styling =
+    styling === "primary"
       ? PRIMARY
-      : props.styling === "secondary"
+      : styling === "secondary"
       ? SECONDARY
-      : props.styling === "supertask"
+      : styling === "supertask"
       ? SUPERTASK
-      : props.styling === "danger"
+      : styling === "danger"
       ? DANGER
-      : props.styling === "link"
+      : styling === "link"
       ? LINK
       : "";
 
-  return props.href === "no ref" ? (
+  return href === "no ref" ? (
     <button
       className={`flex flex-row px-[16px] py-[8px] ${styling} rounded-sm focus:ring focus:ring-offset-4 ${props.className} `}
       onClick={props.onClick}
       type={props.type}
-      id={props.id}
+      id={id}
       disabled={props.disabled}
       {...props.attributes}
       alt={props.iconAltText}
@@ -46,10 +52,10 @@ export function DSButton(props) {
       ) : undefined}
       <span
         className={`grid place-items-center ${
-          props.styling === "supertask" ? "h-8" : ""
+          styling === "supertask" ? "h-8" : ""
         }`}
       >
-        {props.text}
+        {text}
       </span>
       {props.children}
       {props.icon && props.iconEnd ? (
@@ -60,12 +66,12 @@ export function DSButton(props) {
     </button>
   ) : (
     <a
-      href={props.href}
+      href={href}
       className={`flex flex-row ${
-        props.styling !== "none" ? "btn-link" : ""
+        styling !== "none" ? "btn-link" : ""
       } focus:ring focus:ring-offset-4 ${props.className}`}
       onClick={props.onClick}
-      id={props.id}
+      id={id}
       disabled={props.disabled}
       role="button"
     >
@@ -76,7 +82,7 @@ export function DSButton(props) {
           alt={props.iconAltText}
         />
       ) : undefined}
-      {props.text}
+      {text}
       {props.children}
       {props.icon && props.iconEnd ? (
         <div className="grid place-items-center h-8 w-8">
@@ -91,13 +97,6 @@ export function DSButton(props) {
   );
 }
 
-DSButton.defaultProps = {
-  id: "btn1",
-  styling: "supertask",
-  text: "default",
-  href: "no ref",
-};
-
 DSButton.propTypes = {
   /**
    * Identify which button being clicked

diff --git a/components/atoms/DateModified.js b/components/atoms/DateModified.js
@@ -1,14 +1,14 @@
 import PropTypes from "prop-types";
 import { useTranslation } from "next-i18next";
 
-export function DateModified(props) {
+export function DateModified({ date = process.env.NEXT_PUBLIC_BUILD_DATE }) {
   const { t } = useTranslation("common");
   // TeamCity build dates are received in the format yyyyMMdd
   let dateFormatted = "NA";
-  if (props.date) {
-    if (!props.date.match(/(?=\S*['-])([a-zA-Z'-]+)/gm)) {
-      dateFormatted = props.date.replace(/^(.{4})(.{2})/gm, "$1-$2-");
-    } else dateFormatted = props.date;
+  if (date) {
+    if (!date.match(/(?=\S*['-])([a-zA-Z'-]+)/gm)) {
+      dateFormatted = date.replace(/^(.{4})(.{2})/gm, "$1-$2-");
+    } else dateFormatted = date;
   }
 
   return (
@@ -25,10 +25,6 @@ export function DateModified(props) {
   );
 }
 
-DateModified.defaultProps = {
-  date: process.env.NEXT_PUBLIC_BUILD_DATE,
-};
-
 DateModified.propTypes = {
   // Date string in format yyyyMMdd
   date: PropTypes.string,

diff --git a/components/atoms/Link.js b/components/atoms/Link.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 // Use this component for Footer link and use Next.js <Link>
 // for all links within the site
-export function Link(props) {
+export function Link({ target = "_self", href = "#", ...props }) {
   //Styling for links based on Figma Design
   let basicStyle = "";
   switch (props.linkStyle) {
@@ -45,15 +45,15 @@ export function Link(props) {
 
   return Component !== "a" ? (
     <Component
-      href={props.href}
+      href={href}
       disabled={props.disabled}
       lang={props.lang}
-      target={props.target}
+      target={target}
       aria-label={props.ariaLabel || props.text}
       role="link"
     >
       <a
-        href={props.href}
+        href={href}
         locale={props.locale}
         onClick={props.onClick ? props.onClick : undefined}
         id={props.id}
@@ -73,12 +73,12 @@ export function Link(props) {
     </Component>
   ) : (
     <a
-      href={props.href}
+      href={href}
       className={`${basicStyle}`}
       id={props.id}
       disabled={props.disabled}
       lang={props.lang}
-      target={props.target}
+      target={target}
       aria-label={props.ariaLabel || props.text}
       locale={props.locale}
       onClick={props.onClick ? props.onClick : undefined}
@@ -96,11 +96,6 @@ export function Link(props) {
   );
 }
 
-Link.defaultProps = {
-  target: "_self",
-  href: "#",
-};
-
 Link.propTypes = {
   /**
    * The text that Text Link will display

diff --git a/components/atoms/MultiTextField.js b/components/atoms/MultiTextField.js
@@ -5,7 +5,7 @@ import { useTranslation } from "next-i18next";
 /**
  * multi line text field
  */
-export function MultiTextField(props) {
+export function MultiTextField({ spellCheck = true, wrap = "soft", ...props }) {
   const { t } = useTranslation("common");
 
   return (
@@ -41,8 +41,8 @@ export function MultiTextField(props) {
         onChange={(e) => props.onChange(e.currentTarget.value)}
         cols={props.cols}
         rows={props.rows}
-        spellCheck={props.spellCheck}
-        wrap={props.wrap}
+        spellCheck={spellCheck}
+        wrap={wrap}
         required={props.required}
         data-testid={props.dataTestId}
         data-cy={props.dataCy}
@@ -54,11 +54,6 @@ export function MultiTextField(props) {
   );
 }
 
-MultiTextField.defaultProps = {
-  spellCheck: true,
-  wrap: "soft",
-};
-
 MultiTextField.propTypes = {
   /**
    * additional css for the component

diff --git a/components/atoms/RadioButton.js b/components/atoms/RadioButton.js
@@ -3,13 +3,13 @@ import PropTypes from "prop-types";
 /**
  * Radio input styled as a button
  **/
-export function RadioButton(props) {
+export function RadioButton({ checked = false, ...props }) {
   const ifControlledProps = !props.uncontrolled
     ? {
-        checked: props.checked,
+        checked: checked,
       }
     : {
-        defaultChecked: props.checked || false,
+        defaultChecked: checked || false,
       };
   return (
     <div className="flex relative">
@@ -48,10 +48,6 @@ export function RadioButton(props) {
   );
 }
 
-RadioButton.defaultProps = {
-  checked: false,
-};
-
 RadioButton.propTypes = {
   /**
    * the id for the input

diff --git a/components/atoms/RadioField.js b/components/atoms/RadioField.js
@@ -3,10 +3,10 @@ import PropTypes from "prop-types";
 /**
  * radio field
  */
-export function RadioField(props) {
+export function RadioField({ checked = false, value = "true", ...props }) {
   const ifControlledProps = !props.uncontrolled
     ? {
-        checked: props.checked,
+        checked: checked,
       }
     : {};
   return (
@@ -19,13 +19,13 @@ export function RadioField(props) {
         className="control-input cursor-pointer appearance-none w-40px h-40px absolute left-0 m-0 z-1 opacity-0"
         id={props.id}
         name={props.name}
-        value={props.value}
+        value={value}
         type="radio"
         onChange={(e) =>
           props.onChange(
-            props.uncontrolled ? !e.currentTarget.checked : props.checked,
+            props.uncontrolled ? !e.currentTarget.checked : checked,
             props.name,
-            props.value
+            value
           )
         }
         aria-required={props.required}
@@ -39,19 +39,14 @@ export function RadioField(props) {
           props.error ? " text-error-border-red" : undefined
         }`}
         htmlFor={props.id}
-        onClick={() => props.onChange(props.checked, props.name, props.value)}
+        onClick={() => props.onChange(checked, props.name, value)}
       >
         {props.label}
       </label>
     </div>
   );
 }
 
-RadioField.defaultProps = {
-  checked: false,
-  value: "true",
-};
-
 RadioField.propTypes = {
   /**
    * additional css for the component

diff --git a/components/atoms/SelectField.js b/components/atoms/SelectField.js
@@ -2,12 +2,12 @@ import PropTypes from "prop-types";
 import { ErrorLabel } from "./ErrorLabel";
 import { useTranslation } from "next-i18next";
 
-export function SelectField(props) {
+export function SelectField({ value = "", ...props }) {
   const { t } = useTranslation("common");
 
   const ifControlledProps = !props.uncontrolled
     ? {
-        value: props.value,
+        value: value,
       }
     : {};
 
@@ -81,10 +81,6 @@ export function SelectField(props) {
   );
 }
 
-SelectField.defaultProps = {
-  value: "",
-};
-
 SelectField.propTypes = {
   /**
    * additional css for the component