migrated ProgressIndicator files to .tsx and updated screenshots

components/Forms/UpdateProfileForm/__tests__/__snapshots__/UpdateProfileForm.test.js.snap

@@ -13,7 +13,7 @@ exports[`UpdateProfileForm > should render with required props 1`] = `
     Professional Details
   </h3>
   <div
-    className="flex flex-col my-6 mx-0 items-center"
+    className="flex flex-col items-center mx-0 my-6"
   >
     <label
       htmlFor="steps-indicator"

components/ProgressIndicator/ProgressIndicator.js → components/ProgressIndicator/ProgressIndicator.tsx

@@ -1,36 +1,38 @@
-import { number } from 'prop-types';
-
 export const developmentErrors = {
   currentStepTooLow: '"currentStep" cannot be negative',
   currentStepTooHigh: '"currentStep" cannot be greater than "totalSteps"',
   totalStepsTooLow: '"totalSteps" must be greater than zero',
 };
 
-const throwDevelopmentException = (expression, message) => {
+const throwDevelopmentException = (expression: boolean, message: string) => {
   if (process.env.NODE_ENV !== 'production' && expression) {
     throw new Error(message);
   }
 };
 
-ProgressIndicator.propTypes = {
-  stepNumber: number,
-  totalSteps: number,
-};
-
-ProgressIndicator.defaultProps = {
-  stepNumber: 0,
-  totalSteps: 1,
+export type ProgressIndicatorPropsType = {
+  /**
+   * Sets the current step number.
+   */
+  stepNumber: number;
+  /**
+   * Sets the total number of steps.
+   */
+  totalSteps: number;
 };
 
-export default function ProgressIndicator({ stepNumber, totalSteps }) {
+export default function ProgressIndicator({
+  stepNumber = 0,
+  totalSteps = 1,
+}: ProgressIndicatorPropsType) {
   throwDevelopmentException(totalSteps < 1, developmentErrors.totalStepsTooLow);
   throwDevelopmentException(stepNumber < 0, developmentErrors.currentStepTooLow);
   throwDevelopmentException(stepNumber > totalSteps, developmentErrors.currentStepTooHigh);
 
   const percentageCompleted = (stepNumber / totalSteps) * 100;
 
   return (
-    <div className="flex flex-col my-6 mx-0 items-center">
+    <div className="flex flex-col items-center mx-0 my-6">
       <label htmlFor="steps-indicator">
         {stepNumber}/{totalSteps} Complete
       </label>

components/ProgressIndicator/__stories__/ProgressIndicator.stories.js → components/ProgressIndicator/__stories__/ProgressIndicator.stories.tsx

@@ -1,3 +1,4 @@
+import { Meta, StoryObj } from '@storybook/react';
 import {
   Title,
   ArgTypes,
@@ -9,28 +10,10 @@ import {
 } from '@storybook/blocks';
 import ProgressIndicator from '../ProgressIndicator';
 
-export const Default = {
-  render: args => <ProgressIndicator {...args} />,
-};
-
-export const TotalSteps = {
-  render: args => <ProgressIndicator {...args} />,
-  args: {
-    stepNumber: 0,
-    totalSteps: 100,
-  },
-};
-
-export const StepNumber = {
-  render: args => <ProgressIndicator {...args} />,
-  args: {
-    stepNumber: 40,
-    totalSteps: 100,
-  },
-};
+type ProgressIndicatorStoryType = StoryObj<typeof ProgressIndicator>;
 
-const meta = {
-  title: 'Progress Indicator',
+const meta: Meta<typeof ProgressIndicator> = {
+  title: 'ProgressIndicator',
   component: ProgressIndicator,
   argTypes: {
     stepNumber: {
@@ -90,3 +73,23 @@ const meta = {
 };
 
 export default meta;
+
+export const Default: ProgressIndicatorStoryType = {
+  render: args => <ProgressIndicator {...args} />,
+};
+
+export const TotalSteps: ProgressIndicatorStoryType = {
+  ...Default,
+  args: {
+    stepNumber: 0,
+    totalSteps: 100,
+  },
+};
+
+export const StepNumber: ProgressIndicatorStoryType = {
+  ...Default,
+  args: {
+    stepNumber: 40,
+    totalSteps: 100,
+  },
+};

components/ProgressIndicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap → components/ProgressIndicator/__tests__/__snapshots__/ProgressIndicator.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`ProgressIndicator > should render with required props 1`] = `
 <div
-  className="flex flex-col my-6 mx-0 items-center"
+  className="flex flex-col items-center mx-0 my-6"
 >
   <label
     htmlFor="steps-indicator"