DRY story and make sure it uses all props setup in the original template

fullofcaffeine · mirka · web-flow · commit e75e941cff68 · 2024-05-28T16:36:26.000-06:00
Co-authored-by: Lena Morita &lt;lena@jaguchi.com&gt;
diff --git a/packages/components/src/progress-bar/stories/index.story.tsx b/packages/components/src/progress-bar/stories/index.story.tsx
@@ -51,11 +51,15 @@ const withCustomWidthCustomCSS = `
  * }
  * ```
  */
-export const WithCustomWidth: StoryFn< typeof ProgressBar > = () => {
-	return (
+export const WithCustomWidth = Template.bind( {} );
+WithCustomWidth.args = {
+	className: 'custom-progress-bar',
+};
+WithCustomWidth.decorators = [
+	( Story ) => (
 		<>
 			<style>{ withCustomWidthCustomCSS }</style>
-			<ProgressBar className="custom-progress-bar" />
+			<Story />
 		</>
-	);
-};
+	),
+];
