task: Remove deprecated usage of defaultProps for functional components

src/components/CommonLinks.tsx

@@ -30,7 +30,7 @@ interface UpdateInstitutionProfileProperties {
 }
 
 function UpdateInstitutionProfile({
-  isCallToAction,
+  isCallToAction = false,
   className = 'font-normal',
 }: UpdateInstitutionProfileProperties): ReactElement {
   const { lei } = useParams();
@@ -44,8 +44,6 @@ function UpdateInstitutionProfile({
   );
 }
 
-UpdateInstitutionProfile.defaultProps = { isCallToAction: false };
-
 interface UpdateFilingDetailsProperties {
   // eslint-disable-next-line react/require-default-props
   label?: string;

src/components/FormButtonGroup.tsx

@@ -7,22 +7,13 @@ interface FormButtonGroupProperties {
 
 function FormButtonGroup({
   className,
-  isFilingStep,
+  isFilingStep = false,
   children,
 }: FormButtonGroupProperties & JSX.IntrinsicElements['div']): JSX.Element {
-  return (
-    <div
-      className={`mt-[1.875rem] flex ${
-        isFilingStep ? 'gap-[1.125rem]' : 'gap-[0.625rem]'
-      } ${className}`}
-    >
-      {children}
-    </div>
-  );
+  const classnames = ['mt-[1.875rem]'];
+  classnames.push(isFilingStep ? 'gap-[1.125rem]' : 'gap-[0.625rem]');
+  if (className) classnames.push(className);
+  return <div className={classnames.join(' ')}>{children}</div>;
 }
 
-FormButtonGroup.defaultProps = {
-  isFilingStep: false,
-};
-
 export default FormButtonGroup;

src/components/FormErrorHeader.tsx

@@ -27,7 +27,7 @@ function FormErrorHeader<
   M extends FieldValues,
   T extends Record<string, string>,
 >({
-  alertHeading,
+  alertHeading = 'There was a problem completing your user profile',
   errors,
   id,
   keyLogicFunc,
@@ -120,10 +120,4 @@ function FormErrorHeader<
   );
 }
 
-FormErrorHeader.defaultProps = {
-  alertHeading: 'There was a problem completing your user profile',
-  errors: null,
-  showKeyIndexNumber: false,
-};
-
 export default FormErrorHeader;

src/components/FormWrapper.tsx

@@ -7,7 +7,7 @@ interface FormWrapperProperties {
 
 function FormWrapper({
   children,
-  isMarginTop,
+  isMarginTop = true,
 }: FormWrapperProperties): JSX.Element {
   const marginTop = isMarginTop ? 'mt-[2.8125rem]' : '';
   return (
@@ -19,8 +19,4 @@ function FormWrapper({
   );
 }
 
-FormWrapper.defaultProps = {
-  isMarginTop: true,
-};
-
 export default FormWrapper;

src/components/GovBanner.tsx

@@ -33,7 +33,3 @@ export default function GovBanner(): JSX.Element {
     />
   );
 }
-
-GovBanner.defaultProps = {
-  currentLanguage: 'en',
-};

src/components/InputErrorMessage.tsx

@@ -9,7 +9,7 @@ interface InputErrorMessageProperties {
 
 function InputErrorMessage({
   children,
-  status,
+  status = 'error',
 }: InputErrorMessageProperties): JSX.Element {
   return (
     <div className='mt-[0.9375rem] max-w-[41.875rem]'>
@@ -21,8 +21,4 @@ function InputErrorMessage({
   );
 }
 
-InputErrorMessage.defaultProps = {
-  status: 'error',
-};
-
 export default InputErrorMessage;

src/components/Loading.tsx

@@ -4,8 +4,6 @@ import { useHeaderAuthLinks } from 'utils/useHeaderAuthLinks';
 import FooterCfGovWrapper from './FooterCfGovWrapper';
 
 export interface LoadingType {
-  // TODO: Do we need this rule? Adding Loading.defaultProps = {...} does not fix the error.
-  // eslint-disable-next-line react/require-default-props
   message?: ReactElement | string;
 }
 

src/components/RadioButtonGroup.tsx

@@ -48,10 +48,4 @@ function RadioButtonGroup({
   );
 }
 
-RadioButtonGroup.defaultProps = {
-  id: 'radio-button-group',
-  label: 'Radio Group',
-  onChange: undefined,
-};
-
 export default RadioButtonGroup;

src/pages/Filing/FilingApp/FieldEntry.tsx

@@ -178,8 +178,4 @@ function FieldEntry({
   );
 }
 
-FieldEntry.defaultProps = {
-  isWarning: false,
-};
-
 export default FieldEntry;

src/pages/Filing/FilingApp/FieldSummary.tsx

@@ -18,14 +18,14 @@ interface FieldProperties {
 function FieldSummary({
   heading,
   fieldArray,
-  bottomMargin,
+  bottomMargin = false,
   children,
   id,
   className = '',
   lei,
   submissionId,
   filingPeriod,
-  isWarning,
+  isWarning = false,
 }: FieldProperties & JSX.IntrinsicElements['div']): JSX.Element {
   return (
     <div
@@ -46,9 +46,4 @@ function FieldSummary({
   );
 }
 
-FieldSummary.defaultProps = {
-  bottomMargin: false,
-  isWarning: false,
-};
-
 export default FieldSummary;

src/pages/Filing/FilingApp/FilingErrors/FilingErrorsWarningsLimit.tsx

@@ -26,7 +26,7 @@ interface FilingErrorsWarningsLimitProperties {
 }
 
 function FilingErrorsWarningsLimit({
-  isWarning,
+  isWarning = false,
 }: FilingErrorsWarningsLimitProperties): JSX.Element {
   return (
     <div className='my-[1.875rem] max-w-[41.875rem]'>
@@ -52,8 +52,4 @@ function FilingErrorsWarningsLimit({
   );
 }
 
-FilingErrorsWarningsLimit.defaultProps = {
-  isWarning: false,
-};
-
 export default FilingErrorsWarningsLimit;

src/pages/Filing/FilingApp/InstitutionCard.tsx

@@ -182,15 +182,12 @@ function InstitutionCardDataWrapper({
  */
 export function InstitutionCard({
   lei,
+  name = '<NO NAME>',
+  status = '<NO STATUS>',
   ...others
 }: InstitutionDataType): JSXElement {
   if (!lei) return null;
-  return <InstitutionCardDataWrapper {...{ lei, ...others }} />;
+  return <InstitutionCardDataWrapper {...{ lei, name, status, ...others }} />;
 }
 
-InstitutionCard.defaultProps = {
-  name: '<NO NAME>',
-  status: '<NO STATUS>',
-};
-
 export default InstitutionCard;

src/pages/Filing/ProcessStep.tsx

@@ -10,7 +10,7 @@ interface ProcessStepProperties {
 
 export default function ProcessStep({
   number,
-  size,
+  size = 'h4',
   heading,
   children,
 }: ProcessStepNumberProperties & ProcessStepProperties): JSX.Element {
@@ -24,7 +24,3 @@ export default function ProcessStep({
     </div>
   );
 }
-
-ProcessStep.defaultProps = {
-  ...ProcessStepNumber.defaultProps,
-};

src/pages/Filing/ProcessStepNumber.tsx

@@ -17,7 +17,7 @@ export interface ProcessStepNumberProperties {
 export function ProcessStepNumber({
   number,
   withBg,
-  size,
+  size = 'h4',
 }: ProcessStepNumberProperties): ReactElement {
   const StepIcons: Record<number | string, string> = {
     '1': 'one',
@@ -39,8 +39,3 @@ export function ProcessStepNumber({
     <Icon name={name} size={size} ariaLabel={`Step ${StepIcons[number]}`} />
   );
 }
-
-ProcessStepNumber.defaultProps = {
-  size: 'h4',
-  withBg: false,
-};

src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx

@@ -17,7 +17,7 @@ const parentRssd = 'parent_rssd_id';
 const topHolderRssd = 'top_holder_rssd_id';
 
 function UpdateAffiliateInformation({
-  heading,
+  heading = 'Update your financial institution affiliate information',
   register,
   formErrors,
   watch,
@@ -121,8 +121,4 @@ function UpdateAffiliateInformation({
   );
 }
 
-UpdateAffiliateInformation.defaultProps = {
-  heading: 'Update your financial institution affiliate information',
-};
-
 export default UpdateAffiliateInformation;

src/pages/Filing/ViewInstitutionProfile/AlertInstitutionApiUnreachable.tsx

@@ -11,7 +11,7 @@ export interface InstitutionApiErrorWrapperType {
 
 // Shared page-level alert for Institution API errors
 export function AlertInstitutionApiUnreachable({
-  isError,
+  isError = false,
   children,
 }: InstitutionApiErrorWrapperType): JSX.Element {
   if (isError)
@@ -31,8 +31,4 @@ export function AlertInstitutionApiUnreachable({
   return <>{children}</>;
 }
 
-AlertInstitutionApiUnreachable.defaultProps = {
-  isError: false,
-};
-
 export default AlertInstitutionApiUnreachable;

src/pages/Filing/ViewInstitutionProfile/DisplayField.tsx

@@ -59,8 +59,8 @@ export function DisplayField({
   label,
   value,
   className,
-  fallbackValue,
-  alertStatus,
+  fallbackValue = NOT_APPLICABLE,
+  alertStatus = 'warning',
 }: DisplayFieldProperties): JSX.Element {
   // This is needed otherwise a falsy value will only fallback if value is null or undefined
   // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
@@ -83,11 +83,3 @@ export function DisplayField({
     </div>
   );
 }
-
-DisplayField.defaultProps = {
-  alertStatus: 'warning',
-  className: undefined,
-  fallbackValue: NOT_APPLICABLE,
-  label: undefined,
-  value: undefined,
-};

src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx

@@ -39,10 +39,10 @@ const defaultDescription = (
 
 export function FinancialInstitutionDetails({
   data = {} as InstitutionDetailsApiType,
-  heading,
+  heading = 'Financial institution details',
   isDomainsVisible = true,
   description = defaultDescription,
-  alertStatus,
+  alertStatus = 'warning',
 }: {
   data: InstitutionDetailsApiType | undefined;
   heading?: ReactNode;
@@ -112,9 +112,4 @@ export function FinancialInstitutionDetails({
   );
 }
 
-FinancialInstitutionDetails.defaultProps = {
-  alertStatus: 'warning',
-  heading: 'Financial institution details',
-};
-
 export default FinancialInstitutionDetails;

src/pages/Filing/ViewInstitutionProfile/IdentifyingInformation.tsx

@@ -24,7 +24,7 @@ export function IdentifyingInformation({
   data = {} as InstitutionDetailsApiType,
   heading = 'Financial institution identifying information',
   description = defaultDescription,
-  alertStatus,
+  alertStatus = 'warning',
 }: {
   data: InstitutionDetailsApiType | undefined;
   heading?: string;
@@ -94,7 +94,4 @@ export function IdentifyingInformation({
   );
 }
 
-IdentifyingInformation.defaultProps = {
-  alertStatus: 'warning',
-};
 export default IdentifyingInformation;

src/pages/FilingDetails/VoluntaryReporterStatus.tsx

@@ -1,8 +1,8 @@
 import Links from 'components/CommonLinks';
 import FieldGroup from 'components/FieldGroup';
+import InputErrorMessage from 'components/InputErrorMessage';
 import SectionIntro from 'components/SectionIntro';
 import { RadioButton } from 'design-system-react';
-import InputErrorMessage from 'components/InputErrorMessage';
 import type { FieldErrors } from 'react-hook-form';
 import type { FilingDetailsSchema } from 'types/formTypes';
 import RadioButtonGroup from '../../components/RadioButtonGroup';
@@ -69,11 +69,4 @@ function VoluntaryReporterStatus({
   );
 }
 
-VoluntaryReporterStatus.defaultProps = {
-  disabled: false,
-  formErrors: undefined,
-  onChange: undefined,
-  value: undefined,
-};
-
 export default VoluntaryReporterStatus;

src/pages/FilingDetails/index.tsx

@@ -26,6 +26,7 @@ import {
   VrsFormHeaderErrors,
 } from 'components/FormErrorHeader.data';
 import FormMain from 'components/FormMain';
+import FormParagraph from 'components/FormParagraph';
 import InputErrorMessage from 'components/InputErrorMessage';
 import { Link } from 'components/Link';
 import { LoadingContent } from 'components/Loading';
@@ -50,12 +51,11 @@ import useFilingStatus from 'utils/useFilingStatus';
 import useInstitutionDetails from 'utils/useInstitutionDetails';
 import useSubmitPointOfContact from 'utils/useSubmitPointOfContact';
 import useSubmitVoluntaryReporterStatus from 'utils/useSubmitVoluntaryReporterStatus';
-import VoluntaryReporterStatus from './VoluntaryReporterStatus';
 import {
   formatPointOfContactObject,
   formatVoluntaryReporterStatusObject,
 } from './FilingDetailsUtils';
-import FormParagraph from 'components/FormParagraph';
+import VoluntaryReporterStatus from './VoluntaryReporterStatus';
 
 const defaultValuesPOC = {
   isVoluntary: undefined,
@@ -485,8 +485,4 @@ function FilingDetails(): JSX.Element {
   );
 }
 
-FilingDetails.defaultProps = {
-  onSubmit: undefined,
-};
-
 export default FilingDetails;