From 0fa81aca84ac44e0ca784c4c19de6e827133895c Mon Sep 17 00:00:00 2001
From: Michael Stedman <46408716+recondesigns@users.noreply.github.com>
Date: Tue, 5 Mar 2024 20:07:59 -0600
Subject: [PATCH] migrated ProgressIndicator files to .tsx and updated
 screenshots

---
 .../UpdateProfileForm.test.js.snap            |  2 +-
 ...ressIndicator.js => ProgressIndicator.tsx} | 28 ++++++------
 ...ories.js => ProgressIndicator.stories.tsx} | 45 ++++++++++---------
 ...tor.test.js => ProgressIndicator.test.tsx} |  0
 ...s.snap => ProgressIndicator.test.tsx.snap} |  2 +-
 5 files changed, 41 insertions(+), 36 deletions(-)
 rename components/ProgressIndicator/{ProgressIndicator.js => ProgressIndicator.tsx} (67%)
 rename components/ProgressIndicator/__stories__/{ProgressIndicator.stories.js => ProgressIndicator.stories.tsx} (84%)
 rename components/ProgressIndicator/__tests__/{ProgressIndicator.test.js => ProgressIndicator.test.tsx} (100%)
 rename components/ProgressIndicator/__tests__/__snapshots__/{ProgressIndicator.test.js.snap => ProgressIndicator.test.tsx.snap} (87%)

diff --git a/components/Forms/UpdateProfileForm/__tests__/__snapshots__/UpdateProfileForm.test.js.snap b/components/Forms/UpdateProfileForm/__tests__/__snapshots__/UpdateProfileForm.test.js.snap
index c70db6a74..0c25435d3 100644
--- a/components/Forms/UpdateProfileForm/__tests__/__snapshots__/UpdateProfileForm.test.js.snap
+++ b/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"
diff --git a/components/ProgressIndicator/ProgressIndicator.js b/components/ProgressIndicator/ProgressIndicator.tsx
similarity index 67%
rename from components/ProgressIndicator/ProgressIndicator.js
rename to components/ProgressIndicator/ProgressIndicator.tsx
index 5ddf39208..0a9b89429 100644
--- a/components/ProgressIndicator/ProgressIndicator.js
+++ b/components/ProgressIndicator/ProgressIndicator.tsx
@@ -1,28 +1,30 @@
-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);
@@ -30,7 +32,7 @@ export default function ProgressIndicator({ stepNumber, totalSteps }) {
   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>
diff --git a/components/ProgressIndicator/__stories__/ProgressIndicator.stories.js b/components/ProgressIndicator/__stories__/ProgressIndicator.stories.tsx
similarity index 84%
rename from components/ProgressIndicator/__stories__/ProgressIndicator.stories.js
rename to components/ProgressIndicator/__stories__/ProgressIndicator.stories.tsx
index 711cea993..b3239bf99 100644
--- a/components/ProgressIndicator/__stories__/ProgressIndicator.stories.js
+++ b/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,
+  },
+};
diff --git a/components/ProgressIndicator/__tests__/ProgressIndicator.test.js b/components/ProgressIndicator/__tests__/ProgressIndicator.test.tsx
similarity index 100%
rename from components/ProgressIndicator/__tests__/ProgressIndicator.test.js
rename to components/ProgressIndicator/__tests__/ProgressIndicator.test.tsx
diff --git a/components/ProgressIndicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap b/components/ProgressIndicator/__tests__/__snapshots__/ProgressIndicator.test.tsx.snap
similarity index 87%
rename from components/ProgressIndicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap
rename to components/ProgressIndicator/__tests__/__snapshots__/ProgressIndicator.test.tsx.snap
index 99303655c..9eb10a379 100644
--- a/components/ProgressIndicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap
+++ b/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"