fix(app-degree-pages): refactor defaultProps to use JS default params

oatkar · oatkar · commit d6ac389ab932 · 2025-10-23T15:35:06.000-07:00
diff --git a/packages/app-rfi/src/components/AsuRfi/index.js b/packages/app-rfi/src/components/AsuRfi/index.js
@@ -29,24 +29,24 @@ const currentScriptPath = getCurrentScriptPath();
 const AsuRfi = props => {
   const {
     appPathFolder,
-    variant,
-    campus,
-    actualCampus,
-    college,
-    department,
-    studentType,
-    areaOfInterest,
-    areaOfInterestOptional,
-    programOfInterest,
-    programOfInterestOptional,
-    isCertMinor,
-    country,
-    stateProvince,
-    successMsg,
-    test,
-    dataSourceDegreeSearch,
-    dataSourceAsuOnline,
-    dataSourceCountriesStates,
+    variant = undefined,
+    campus = undefined,
+    actualCampus = undefined,
+    college = undefined,
+    department = undefined,
+    studentType = undefined,
+    areaOfInterest = undefined,
+    areaOfInterestOptional = false,
+    programOfInterest = undefined,
+    programOfInterestOptional = false,
+    isCertMinor = false,
+    country = undefined,
+    stateProvince = undefined,
+    successMsg = undefined,
+    test = false,
+    dataSourceDegreeSearch = DATA_SOURCE.DEGREE_SEARCH,
+    dataSourceAsuOnline = DATA_SOURCE.ASU_ONLINE,
+    dataSourceCountriesStates = DATA_SOURCE.COUNTRIES_STATES,
     submissionUrl,
   } = props;
 
@@ -134,28 +134,6 @@ const AsuRfi = props => {
 
 export { AsuRfi };
 
-// Props
-AsuRfi.defaultProps = {
-  variant: undefined, // default set in appState
-  campus: undefined,
-  actualCampus: undefined,
-  college: undefined,
-  department: undefined,
-  studentType: undefined,
-  areaOfInterest: undefined,
-  areaOfInterestOptional: false,
-  programOfInterest: undefined,
-  programOfInterestOptional: false,
-  isCertMinor: false,
-  country: undefined,
-  stateProvince: undefined,
-  successMsg: undefined,
-  test: false,
-  dataSourceDegreeSearch: DATA_SOURCE.DEGREE_SEARCH,
-  dataSourceAsuOnline: DATA_SOURCE.ASU_ONLINE,
-  dataSourceCountriesStates: DATA_SOURCE.COUNTRIES_STATES,
-};
-
 AsuRfi.propTypes = {
   appPathFolder: PropTypes.string,
   variant: PropTypes.oneOf(["rfiVariant1", "rfiVariant2"]),
diff --git a/packages/app-rfi/src/components/controls/RfiCheckboxSingle.js b/packages/app-rfi/src/components/controls/RfiCheckboxSingle.js
@@ -11,8 +11,8 @@ const RfiCheckboxSingle = ({
   id,
   name,
   value,
-  requiredIcon,
-  required,
+  requiredIcon = undefined,
+  required = undefined,
   onBlur,
 }) => {
   const [field, meta] = useField({ name, type: "checkbox" });
@@ -41,11 +41,6 @@ const RfiCheckboxSingle = ({
   );
 };
 
-RfiCheckboxSingle.defaultProps = {
-  requiredIcon: undefined,
-  required: undefined,
-};
-
 RfiCheckboxSingle.propTypes = {
   children: PropTypes.node.isRequired,
   onBlur: PropTypes.func,
diff --git a/packages/app-rfi/src/components/controls/RfiDateInput.js b/packages/app-rfi/src/components/controls/RfiDateInput.js
@@ -10,11 +10,11 @@ import { RfiLabel, RfiError } from "./controls-helpers";
 const RfiDateInput = ({
   label,
   name,
-  id,
-  requiredIcon,
-  required,
-  helperText,
-  autoFocus,
+  id = undefined,
+  requiredIcon = undefined,
+  required = undefined,
+  helperText = undefined,
+  autoFocus = undefined,
   onBlur,
 }) => {
   // Surface values from Formik context
@@ -75,14 +75,6 @@ const RfiDateInput = ({
 // duplicate the setting in our props got displaying the required icon until
 // Formik has a better way to do it.
 
-RfiDateInput.defaultProps = {
-  id: undefined,
-  requiredIcon: undefined,
-  required: undefined,
-  autoFocus: undefined,
-  helperText: undefined,
-};
-
 RfiDateInput.propTypes = {
   label: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
diff --git a/packages/app-rfi/src/components/controls/RfiEmailInput.js b/packages/app-rfi/src/components/controls/RfiEmailInput.js
@@ -10,10 +10,10 @@ import { RfiLabel, RfiError } from "./controls-helpers";
 const RfiEmailInput = ({
   name,
   label,
-  id,
-  requiredIcon,
-  required,
-  autoFocus,
+  id = undefined,
+  requiredIcon = undefined,
+  required = undefined,
+  autoFocus = undefined,
   onBlur,
 }) => (
   <Field name={name}>
@@ -45,13 +45,6 @@ const RfiEmailInput = ({
   </Field>
 );
 
-RfiEmailInput.defaultProps = {
-  id: undefined,
-  requiredIcon: undefined,
-  required: undefined,
-  autoFocus: undefined,
-};
-
 RfiEmailInput.propTypes = {
   id: PropTypes.string,
   label: PropTypes.string.isRequired,
diff --git a/packages/app-rfi/src/components/controls/RfiPhone.js b/packages/app-rfi/src/components/controls/RfiPhone.js
@@ -14,10 +14,10 @@ import { RfiLabel, RfiError } from "./controls-helpers";
 const RfiPhone = ({
   label,
   name,
-  id,
-  requiredIcon,
-  required,
-  helperText,
+  id = undefined,
+  requiredIcon = undefined,
+  required = undefined,
+  helperText = undefined,
   onBlur,
 }) => {
   // Surface values from Formik context
@@ -85,13 +85,6 @@ const RfiPhone = ({
 // duplicate the setting in our props got displaying the required icon until
 // Formik has a better way to do it.
 
-RfiPhone.defaultProps = {
-  id: undefined,
-  requiredIcon: undefined,
-  required: undefined,
-  helperText: undefined,
-};
-
 RfiPhone.propTypes = {
   label: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
diff --git a/packages/app-rfi/src/components/controls/RfiSelect.js b/packages/app-rfi/src/components/controls/RfiSelect.js
@@ -11,14 +11,14 @@ import { RfiLabel, RfiError } from "./controls-helpers";
 // experienced using solely one of the other.
 
 const RfiSelect = ({
-  id,
+  id = undefined,
   label,
   name,
-  requiredIcon,
-  required,
+  requiredIcon = undefined,
+  required = undefined,
   options,
-  disabled,
-  autoFocus,
+  disabled = undefined,
+  autoFocus = undefined,
   onBlur,
 }) => {
   const [field, meta, helpers] = useField({ name });
@@ -74,14 +74,6 @@ const RfiSelect = ({
 // duplicate the setting in our props for displaying the required icon until
 // Formik has a better way to do it.
 
-RfiSelect.defaultProps = {
-  id: undefined,
-  requiredIcon: undefined,
-  required: undefined,
-  autoFocus: undefined,
-  disabled: false,
-};
-
 RfiSelect.propTypes = {
   id: PropTypes.string,
   label: PropTypes.string.isRequired,
diff --git a/packages/app-rfi/src/components/controls/RfiTextArea.js b/packages/app-rfi/src/components/controls/RfiTextArea.js
@@ -10,12 +10,12 @@ import { RfiLabel, RfiError } from "./controls-helpers";
 const RfiTextArea = ({
   label,
   name,
-  id,
-  requiredIcon,
-  required,
-  autoFocus,
-  disabled,
-  helperText,
+  id = undefined,
+  requiredIcon = undefined,
+  required = undefined,
+  autoFocus = undefined,
+  disabled = undefined,
+  helperText = undefined,
   onBlur,
 }) => (
   <Field name={name}>
@@ -52,15 +52,6 @@ const RfiTextArea = ({
 // duplicate the setting in our props got displaying the required icon until
 // Formik has a better way to do it.
 
-RfiTextArea.defaultProps = {
-  id: undefined,
-  requiredIcon: undefined,
-  required: undefined,
-  autoFocus: undefined,
-  disabled: false,
-  helperText: undefined,
-};
-
 RfiTextArea.propTypes = {
   label: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
diff --git a/packages/app-rfi/src/components/controls/RfiTextInput.js b/packages/app-rfi/src/components/controls/RfiTextInput.js
@@ -10,11 +10,11 @@ import { RfiLabel, RfiError } from "./controls-helpers";
 const RfiTextInput = ({
   label,
   name,
-  id,
-  requiredIcon,
-  required,
-  helperText,
-  autoFocus,
+  id = undefined,
+  requiredIcon = undefined,
+  required = undefined,
+  helperText = undefined,
+  autoFocus = undefined,
   onBlur,
 }) => {
   // Surface values from Formik context
@@ -69,14 +69,6 @@ const RfiTextInput = ({
 // duplicate the setting in our props got displaying the required icon until
 // Formik has a better way to do it.
 
-RfiTextInput.defaultProps = {
-  id: undefined,
-  requiredIcon: undefined,
-  required: undefined,
-  autoFocus: undefined,
-  helperText: undefined,
-};
-
 RfiTextInput.propTypes = {
   label: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
diff --git a/packages/app-rfi/src/components/controls/controls-helpers.js b/packages/app-rfi/src/components/controls/controls-helpers.js
@@ -15,7 +15,7 @@ const GaEventPropTypes = {
   text: PropTypes.string,
 };
 
-const RfiLabel = ({ label, name, id, requiredIcon }) => (
+const RfiLabel = ({ label, name, id = undefined, requiredIcon = undefined }) => (
   <label htmlFor={id || name}>
     {requiredIcon && (
       <>
@@ -29,7 +29,7 @@ const RfiLabel = ({ label, name, id, requiredIcon }) => (
   </label>
 );
 
-const RfiLegend = ({ label, requiredIcon }) => (
+const RfiLegend = ({ label = undefined, requiredIcon = undefined }) => (
   <legend className="fw-bold">
     {requiredIcon && (
       <>
@@ -43,7 +43,7 @@ const RfiLegend = ({ label, requiredIcon }) => (
   </legend>
 );
 
-const RfiError = ({ isError, metaError }) => (
+const RfiError = ({ isError = undefined, metaError = undefined }) => (
   <div role="alert">
     {isError && (
       <small className="form-text invalid-feedback">
@@ -59,33 +59,18 @@ const RfiError = ({ isError, metaError }) => (
 // duplicate the setting in our props got displaying the required icon until
 // Formik has a better way to do it.
 
-RfiLabel.defaultProps = {
-  id: undefined,
-  requiredIcon: undefined,
-};
-
 RfiLabel.propTypes = {
   label: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   id: PropTypes.string,
   requiredIcon: PropTypes.bool,
 };
 
-RfiLegend.defaultProps = {
-  label: undefined,
-  requiredIcon: undefined,
-};
-
 RfiLegend.propTypes = {
   label: PropTypes.string.isRequired,
   requiredIcon: PropTypes.bool,
 };
 
-RfiError.defaultProps = {
-  isError: undefined,
-  metaError: undefined,
-};
-
 RfiError.propTypes = {
   isError: PropTypes.bool,
   metaError: PropTypes.string,
diff --git a/packages/component-footer/src/components/Contact/index.js b/packages/component-footer/src/components/Contact/index.js
@@ -11,7 +11,7 @@ import { ColumnSection } from "../ColumnSection";
  */
 
 const Contact = ({
-  contact: { title, contactLink, contributionLink, columns },
+  contact: { title = "", contactLink = "", contributionLink = "", columns = []},
 }) => {
   return (
     <div className="wrapper" id="wrapper-footer-columns" data-testid="contact">
@@ -72,12 +72,4 @@ Contact.propTypes = {
   }),
 };
 
-Contact.defaultProps = {
-  contact: {
-    title: "",
-    contactLink: "",
-    contributionLink: "",
-  },
-};
-
 export { Contact };
diff --git a/packages/component-footer/src/components/Social/index.js b/packages/component-footer/src/components/Social/index.js
@@ -28,7 +28,7 @@ const DEFAULT_GA_EVENT = {
  * @returns {JSX.Element}
  */
 
-const Social = ({ social: { logoUrl, unitLogo, mediaLinks } }) => {
+const Social = ({ social: { logoUrl, unitLogo = endorsedLogo, mediaLinks = {facebook: "", twitter: "", linkedIn: "", instagram: "", youtube: ""} } }) => {
   return (
     <div className="wrapper" id="wrapper-endorsed-footer" data-testid="social">
       <div className="container" id="endorsed-footer">
@@ -166,17 +166,4 @@ Social.propTypes = {
   }),
 };
 
-Social.defaultProps = {
-  social: {
-    unitLogo: endorsedLogo,
-    mediaLinks: {
-      facebook: "",
-      twitter: "",
-      linkedIn: "",
-      instagram: "",
-      youtube: "",
-    },
-  },
-};
-
 export { Social };
diff --git a/packages/component-header-footer/src/footer/components/Social/index.js b/packages/component-header-footer/src/footer/components/Social/index.js
diff --git a/packages/component-header/src/header.js b/packages/component-header/src/header.js
diff --git a/packages/component-news/src/components/CardCarouselNews/index.jsx b/packages/component-news/src/components/CardCarouselNews/index.jsx
diff --git a/packages/component-news/src/components/CardGridNews/index.jsx b/packages/component-news/src/components/CardGridNews/index.jsx
diff --git a/packages/component-news/src/components/CardListlNews/index.jsx b/packages/component-news/src/components/CardListlNews/index.jsx
