From 1ff019d228efcb6c5c3e1730a47caf764e025d2c Mon Sep 17 00:00:00 2001
From: Rafael Zaleski <rafaelzaleski@users.noreply.github.com>
Date: Wed, 21 Jun 2023 17:04:27 -0300
Subject: [PATCH] Refactor the ProgressBar component to use TypeScript (#6245)

---
 changelog/dev-ts-refactor-progress-bar          |  4 ++++
 .../progress-bar/{index.js => index.tsx}        | 17 ++++++++++++++++-
 .../{index.js.snap => index.tsx.snap}           |  0
 .../progress-bar/test/{index.js => index.tsx}   |  1 +
 4 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 changelog/dev-ts-refactor-progress-bar
 rename client/components/progress-bar/{index.js => index.tsx} (71%)
 rename client/components/progress-bar/test/__snapshots__/{index.js.snap => index.tsx.snap} (100%)
 rename client/components/progress-bar/test/{index.js => index.tsx} (96%)

diff --git a/changelog/dev-ts-refactor-progress-bar b/changelog/dev-ts-refactor-progress-bar
new file mode 100644
index 00000000000..2b4c9b80dc2
--- /dev/null
+++ b/changelog/dev-ts-refactor-progress-bar
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+minor tsx refactor
diff --git a/client/components/progress-bar/index.js b/client/components/progress-bar/index.tsx
similarity index 71%
rename from client/components/progress-bar/index.js
rename to client/components/progress-bar/index.tsx
index 0b28b53cbcc..620a9aab6cd 100644
--- a/client/components/progress-bar/index.js
+++ b/client/components/progress-bar/index.tsx
@@ -1,10 +1,25 @@
 /** @format */
+/**
+ * External dependencies
+ */
+import React from 'react';
+
 /**
  * Internal dependencies
  */
 import './style.scss';
 
-const ProgressBar = ( { progressLabel, totalLabel, progress } ) => {
+interface ProgressBarProps {
+	progressLabel: string;
+	totalLabel: string;
+	progress: number;
+}
+
+const ProgressBar: React.FunctionComponent< ProgressBarProps > = ( {
+	progressLabel,
+	totalLabel,
+	progress,
+} ) => {
 	const useInnerLabel = 0.5 < progress;
 	return (
 		<div className="progressbar">
diff --git a/client/components/progress-bar/test/__snapshots__/index.js.snap b/client/components/progress-bar/test/__snapshots__/index.tsx.snap
similarity index 100%
rename from client/components/progress-bar/test/__snapshots__/index.js.snap
rename to client/components/progress-bar/test/__snapshots__/index.tsx.snap
diff --git a/client/components/progress-bar/test/index.js b/client/components/progress-bar/test/index.tsx
similarity index 96%
rename from client/components/progress-bar/test/index.js
rename to client/components/progress-bar/test/index.tsx
index 64ba1f00cf8..02771e89732 100644
--- a/client/components/progress-bar/test/index.js
+++ b/client/components/progress-bar/test/index.tsx
@@ -3,6 +3,7 @@
  * External dependencies
  */
 import { render } from '@testing-library/react';
+import React from 'react';
 
 /**
  * Internal dependencies