From aaec2d986fc34c45e8af45adb79288d3c5c4d612 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Mon, 21 Nov 2022 19:04:42 +0530
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=90=9B=20fix(progress=20bar):=20progr?=
 =?UTF-8?q?essbar=20harbar=20error=20fix.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/progress-bar-elements.stories.js                   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-progress-bar/docs/progress-bar-elements.stories.js b/packages/react-progress-bar/docs/progress-bar-elements.stories.js
index 23c64e2d..cfc68c97 100644
--- a/packages/react-progress-bar/docs/progress-bar-elements.stories.js
+++ b/packages/react-progress-bar/docs/progress-bar-elements.stories.js
@@ -114,7 +114,7 @@ export const Loader = () => {
 			]}
 			isLast={true}
 		>
-			<ProgressBar now={30} hasCancel={false} hasBar={false} hasLabel={false} />
+			<ProgressBar now={30} hasCancel={false} hasLabel={false} />
 		</Section>
 	);
 };
@@ -132,7 +132,7 @@ export const Percent = () => {
 			]}
 			isLast={true}
 		>
-			<ProgressBar hasLoader={false} hasCancel={false} hasBar={false} now={30} />
+			<ProgressBar hasLoader={false} hasCancel={false} now={30} />
 		</Section>
 	);
 };
@@ -152,7 +152,7 @@ export const Cancel = () => {
 			]}
 			isLast={true}
 		>
-			<ProgressBar now={30} hasLoader={false} hasBar={false} hasLabel={false} />
+			<ProgressBar now={30} hasLoader={false} hasLabel={false} />
 		</Section>
 	);
 };

From ef3a61c4370f72048f5f964fe0cbdc8e80d0be2c Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 22 Nov 2022 11:26:37 +0530
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=90=9B=20fix(progress=20bar):=20progr?=
 =?UTF-8?q?ess=20bar=20description=20array=20key=20fix.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/progress-bar-elements.stories.js     | 54 +++++++------------
 .../docs/progress-bar-modifiers.stories.js    | 20 +++----
 2 files changed, 30 insertions(+), 44 deletions(-)

diff --git a/packages/react-progress-bar/docs/progress-bar-elements.stories.js b/packages/react-progress-bar/docs/progress-bar-elements.stories.js
index cfc68c97..ae7d5e7b 100644
--- a/packages/react-progress-bar/docs/progress-bar-elements.stories.js
+++ b/packages/react-progress-bar/docs/progress-bar-elements.stories.js
@@ -105,13 +105,11 @@ export const Loader = () => {
 	return (
 		<Section
 			title="Loading Wheel"
-			description={[
-				'By default, the component shows the loading wheel but you can hide it by setting ',
-				<code style={{ fontSize: 11 }}>hasLoader</code>,
-				' property to ',
-				<code style={{ fontSize: 11 }}>false</code>,
-				'.',
-			]}
+			description={
+				<>
+					By default, the component shows the loading wheel but you can hide it by setting <code style={{ fontSize: 11 }}>hasLoader</code> property to <code style={{ fontSize: 11 }}>false</code>.
+				</>
+			}
 			isLast={true}
 		>
 			<ProgressBar now={30} hasCancel={false} hasLabel={false} />
@@ -123,13 +121,11 @@ export const Percent = () => {
 	return (
 		<Section
 			title="Percentage Text"
-			description={[
-				'By default, the component shows the progress value or percentage, but you can hide it by setting ',
-				<code style={{ fontSize: 11 }}>hasLabel</code>,
-				' property to ',
-				<code style={{ fontSize: 11 }}>false</code>,
-				'.',
-			]}
+			description={
+				<>
+					By default, the component shows the progress value or percentage, but you can hide it by setting <code style={{ fontSize: 11 }}>hasLabel</code> property to <code style={{ fontSize: 11 }}>false</code>.
+				</>
+			}
 			isLast={true}
 		>
 			<ProgressBar hasLoader={false} hasCancel={false} now={30} />
@@ -141,15 +137,11 @@ export const Cancel = () => {
 	return (
 		<Section
 			title="Cancel Button"
-			description={[
-				'By default, the component shows the cancel button, but you can hide it by setting ',
-				<code style={{ fontSize: 11 }}>hasCancel</code>,
-				' property to ',
-				<code style={{ fontSize: 11 }}>false</code>,
-				'. You can also pass a function when clicking on it by using the ',
-				<code style={{ fontSize: 11 }}>cbFunction</code>,
-				' property.',
-			]}
+			description={
+				<>
+					By default, the component shows the cancel button, but you can hide it by setting <code style={{ fontSize: 11 }}>hasCancel</code> property to <code style={{ fontSize: 11 }}>false</code>. You can also pass a function when clicking on it by using the <code style={{ fontSize: 11 }}>cbFunction</code> property.
+				</>
+			}
 			isLast={true}
 		>
 			<ProgressBar now={30} hasLoader={false} hasLabel={false} />
@@ -162,17 +154,11 @@ export const Legend = () => {
 		<>
 			<Section
 				title="Legend Text"
-				description={[
-					'This text appears below the progress bar and only when ',
-					<code style={{ fontSize: 11 }}>hasFrame</code>,
-					' and ',
-					<code style={{ fontSize: 11 }}>hasLegend</code>,
-					' properties are set to ',
-					<code style={{ fontSize: 11 }}>true</code>,
-					'. You can edit the text using ',
-					<code style={{ fontSize: 11 }}>sourceLang</code>,
-					' property.',
-				]}
+				description={
+					<>
+						This text appears below the progress bar and only when <code style={{ fontSize: 11 }}>hasFrame</code> and <code style={{ fontSize: 11 }}>hasLegend</code> properties are set to <code style={{ fontSize: 11 }}>true</code>. You can edit the text using <code style={{ fontSize: 11 }}>sourceLang</code> property.
+					</>
+				}
 				isLast={true}
 			>
 				<ProgressBar
diff --git a/packages/react-progress-bar/docs/progress-bar-modifiers.stories.js b/packages/react-progress-bar/docs/progress-bar-modifiers.stories.js
index 9b34d3bd..ce72e563 100644
--- a/packages/react-progress-bar/docs/progress-bar-modifiers.stories.js
+++ b/packages/react-progress-bar/docs/progress-bar-modifiers.stories.js
@@ -115,11 +115,11 @@ export const Design = () => {
 
 			<Section
 				title="Boxed Simple"
-				description={[
-					'Using the ',
-					<code style={{ fontSize: 11 }}>hasFrame</code>,
-					' property, you can display a gray border with inner spacing around the progress bar and its elements.',
-				]}
+				description={
+					<>
+						Using the <code style={{ fontSize: 11 }}>hasFrame</code> property, you can display a gray border with inner spacing around the progress bar and its elements.
+					</>
+				}
 				code="&lt;ProgressBar now={ 30 } hasFrame={ true } hasLegend={ false } /&gt;"
 			>
 				<ProgressBar now={30} hasFrame={true} hasLegend={false} />
@@ -127,11 +127,11 @@ export const Design = () => {
 
 			<Section
 				title="Boxed with Legend"
-				description={[
-					'The boxed variation can come with a legend at the bottom if necessary that you can display using the ',
-					<code style={{ fontSize: 11 }}>hasLegend</code>,
-					' property.',
-				]}
+				description={
+					<>
+						The boxed variation can come with a legend at the bottom if necessary that you can display using the <code style={{ fontSize: 11 }}>hasLegend</code> property.
+					</>
+				}
 				code="&lt;ProgressBar now={ 30 } hasFrame={ true } hasLegend={ true } /&gt;"
 				isLast={true}
 			>