From 562a60f68c79d7351f2ba4a33fd7ee870391d111 Mon Sep 17 00:00:00 2001
From: Richard Bangay <richard.bangay@guardian.co.uk>
Date: Mon, 8 Jul 2024 17:17:46 +0100
Subject: [PATCH 1/2] update progress stories to make it clear the difference
 between the old progressIndicator component and the newer progressStepper
 component

---
 .../mma/shared/ProgressIndicator.stories.tsx  | 31 -------------------
 .../mma/shared/ProgressStepper.stories.tsx    | 30 ++++++++++++++++++
 2 files changed, 30 insertions(+), 31 deletions(-)
 create mode 100644 client/components/mma/shared/ProgressStepper.stories.tsx

diff --git a/client/components/mma/shared/ProgressIndicator.stories.tsx b/client/components/mma/shared/ProgressIndicator.stories.tsx
index b6392d10a..1b1a1d540 100644
--- a/client/components/mma/shared/ProgressIndicator.stories.tsx
+++ b/client/components/mma/shared/ProgressIndicator.stories.tsx
@@ -10,37 +10,6 @@ export default {
 	},
 } as Meta<typeof ProgressStepper>;
 
-export const Default: StoryFn<typeof ProgressStepper> = () => {
-	return (
-		<>
-			<ProgressStepper
-				steps={[{ title: 'Reason' }, { title: 'Review' }]}
-			/>
-			<ProgressStepper
-				steps={[
-					{ title: 'Reason' },
-					{ title: 'Review', isCurrentStep: true },
-					{ title: 'Confirmation' },
-				]}
-			/>
-			<ProgressStepper
-				steps={[
-					{ title: 'Reason', isCurrentStep: true },
-					{ title: 'Review' },
-					{ title: 'Confirmation' },
-				]}
-			/>
-			<ProgressStepper
-				steps={[
-					{ title: 'Reason' },
-					{ title: 'Review' },
-					{ title: 'Confirmation', isCurrentStep: true },
-				]}
-			/>
-		</>
-	);
-};
-
 export const OldVersion: StoryFn<typeof ProgressIndicator> = () => {
 	return (
 		<ProgressIndicator
diff --git a/client/components/mma/shared/ProgressStepper.stories.tsx b/client/components/mma/shared/ProgressStepper.stories.tsx
new file mode 100644
index 000000000..36196f904
--- /dev/null
+++ b/client/components/mma/shared/ProgressStepper.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProgressStepper } from './ProgressStepper';
+
+export default {
+	title: 'Components/ProgressStepper',
+	component: ProgressStepper,
+	parameters: {
+		layout: 'fullscreen',
+	},
+} as Meta<typeof ProgressStepper>;
+
+export const WithTitleWithCurrentStep: StoryObj<typeof ProgressStepper> = {
+	render: () => {
+		return (
+			<ProgressStepper
+				steps={[
+					{ title: 'Reason' },
+					{ title: 'Review', isCurrentStep: true },
+					{ title: 'Confirmation' },
+				]}
+			/>
+		);
+	},
+};
+
+export const WithoutTitleWithCurrentStep: StoryObj<typeof ProgressStepper> = {
+	render: () => {
+		return <ProgressStepper steps={[{}, { isCurrentStep: true }, {}]} />;
+	},
+};

From 25ce833e0c229069b90f180310cc4dbc92cb5641 Mon Sep 17 00:00:00 2001
From: Richard Bangay <richard.bangay@guardian.co.uk>
Date: Mon, 8 Jul 2024 17:35:19 +0100
Subject: [PATCH 2/2] fix unnecessary references to progressStepper component
 inside the progressIndicator story

---
 .../mma/shared/ProgressIndicator.stories.tsx  | 29 ++++++++++---------
 .../mma/shared/ProgressIndicator.tsx          |  2 +-
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/client/components/mma/shared/ProgressIndicator.stories.tsx b/client/components/mma/shared/ProgressIndicator.stories.tsx
index 1b1a1d540..9a3109aea 100644
--- a/client/components/mma/shared/ProgressIndicator.stories.tsx
+++ b/client/components/mma/shared/ProgressIndicator.stories.tsx
@@ -1,23 +1,24 @@
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { ProgressIndicator } from './ProgressIndicator';
-import { ProgressStepper } from './ProgressStepper';
 
 export default {
 	title: 'Components/ProgressIndicator',
-	component: ProgressStepper,
+	component: ProgressIndicator,
 	parameters: {
 		layout: 'fullscreen',
 	},
-} as Meta<typeof ProgressStepper>;
+} as Meta<typeof ProgressIndicator>;
 
-export const OldVersion: StoryFn<typeof ProgressIndicator> = () => {
-	return (
-		<ProgressIndicator
-			steps={[
-				{ title: 'Reason' },
-				{ title: 'Review', isCurrentStep: true },
-				{ title: 'Confirmation' },
-			]}
-		/>
-	);
+export const OldVersion: StoryObj<typeof ProgressIndicator> = {
+	render: () => {
+		return (
+			<ProgressIndicator
+				steps={[
+					{ title: 'Reason' },
+					{ title: 'Review', isCurrentStep: true },
+					{ title: 'Confirmation' },
+				]}
+			/>
+		);
+	},
 };
diff --git a/client/components/mma/shared/ProgressIndicator.tsx b/client/components/mma/shared/ProgressIndicator.tsx
index ad7df1215..e50b943b4 100644
--- a/client/components/mma/shared/ProgressIndicator.tsx
+++ b/client/components/mma/shared/ProgressIndicator.tsx
@@ -8,7 +8,7 @@ interface Step {
 	isCurrentStep?: true;
 }
 
-interface ProgressIndicatorProps {
+export interface ProgressIndicatorProps {
 	steps: [Step, Step, ...Step[]];
 	additionalCSS?: SerializedStyles;
 }