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..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,16 +105,14 @@ 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} hasBar={false} hasLabel={false} />
+			<ProgressBar now={30} hasCancel={false} hasLabel={false} />
 		</Section>
 	);
 };
@@ -123,16 +121,14 @@ 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} hasBar={false} now={30} />
+			<ProgressBar hasLoader={false} hasCancel={false} now={30} />
 		</Section>
 	);
 };
@@ -141,18 +137,14 @@ 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} hasBar={false} hasLabel={false} />
+			<ProgressBar now={30} hasLoader={false} hasLabel={false} />
 		</Section>
 	);
 };
@@ -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}
 			>