Merge pull request #1355 from guardian/update-progressStepper-story

ProgressIndicator and ProgressStepper seperate stories

client/components/mma/shared/ProgressIndicator.stories.tsx

@@ -1,54 +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 Default: StoryFn<typeof ProgressStepper> = () => {
-	return (
-		<>
-			<ProgressStepper
-				steps={[{ title: 'Reason' }, { title: 'Review' }]}
-			/>
-			<ProgressStepper
+export const OldVersion: StoryObj<typeof ProgressIndicator> = {
+	render: () => {
+		return (
+			<ProgressIndicator
 				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
-			steps={[
-				{ title: 'Reason' },
-				{ title: 'Review', isCurrentStep: true },
-				{ title: 'Confirmation' },
-			]}
-		/>
-	);
+		);
+	},
 };

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;
 }

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 }, {}]} />;
+	},
+};