From f36127f5fe044d6ed2a6211c6777199ddd39ae5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arn=C3=BE=C3=B3r=20J=C3=B3nsson?= <arnthorj@spotify.com>
Date: Wed, 9 Nov 2022 18:42:19 +0100
Subject: [PATCH] Add optional step to SimpleStepper

Signed-off-by: Arnthor Jonsson <arnthorj@spotify.com>
---
 .changeset/cyan-seahorses-itch.md             |  5 ++++
 .../SimpleStepper/SimpleStepper.stories.tsx   | 20 +++++++++++++
 .../SimpleStepper/SimpleStepper.test.tsx      | 28 +++++++++++++++++++
 .../SimpleStepper/SimpleStepperFooter.tsx     | 27 ++++++++++++++++++
 .../src/components/SimpleStepper/types.ts     |  5 ++++
 5 files changed, 85 insertions(+)
 create mode 100644 .changeset/cyan-seahorses-itch.md

diff --git a/.changeset/cyan-seahorses-itch.md b/.changeset/cyan-seahorses-itch.md
new file mode 100644
index 0000000000..c3ced5ceb7
--- /dev/null
+++ b/.changeset/cyan-seahorses-itch.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': minor
+---
+
+Add optional step to SimpleStepper
diff --git a/packages/core-components/src/components/SimpleStepper/SimpleStepper.stories.tsx b/packages/core-components/src/components/SimpleStepper/SimpleStepper.stories.tsx
index 2f3f26f23e..aedd5e6b80 100644
--- a/packages/core-components/src/components/SimpleStepper/SimpleStepper.stories.tsx
+++ b/packages/core-components/src/components/SimpleStepper/SimpleStepper.stories.tsx
@@ -91,3 +91,23 @@ export const CompletionStep = (args: StepperProps) => {
 };
 
 CompletionStep.args = defaultArgs;
+
+export const OptionalStep = (args: StepperProps) => {
+  return (
+    <SimpleStepper {...args}>
+      <SimpleStepperStep
+        title="Step 1 (Optional)"
+        actions={{
+          showSkip: true,
+        }}
+      >
+        <div>This is the content for step 1</div>
+      </SimpleStepperStep>
+      <SimpleStepperStep title="Step 2">
+        <div>This is the content for step 2</div>
+      </SimpleStepperStep>
+    </SimpleStepper>
+  );
+};
+
+ConditionalButtons.args = defaultArgs;
diff --git a/packages/core-components/src/components/SimpleStepper/SimpleStepper.test.tsx b/packages/core-components/src/components/SimpleStepper/SimpleStepper.test.tsx
index 5897054ed5..73baff8db2 100644
--- a/packages/core-components/src/components/SimpleStepper/SimpleStepper.test.tsx
+++ b/packages/core-components/src/components/SimpleStepper/SimpleStepper.test.tsx
@@ -145,4 +145,32 @@ describe('Stepper', () => {
 
     expect(rendered.getByText('FinalStepNext')).toBeInTheDocument();
   });
+
+  it('Handles skipStep property', async () => {
+    const rendered = await renderInTestApp(
+      <Stepper>
+        <Step title="Step 0" data-testid="step0">
+          <div>step0</div>
+        </Step>
+        <Step title="Step 1" actions={{ showSkip: true }} data-testid="step1">
+          <div>step1</div>
+        </Step>
+        <Step title="Step 2" data-testid="step2">
+          <div>step2</div>
+        </Step>
+        <Step title="Step 3" data-testid="step3">
+          <div>step3</div>
+        </Step>
+      </Stepper>,
+    );
+
+    fireEvent.click(getTextInSlide(rendered, 0)('Next') as Node);
+    expect(rendered.getByText('step1')).toBeInTheDocument();
+
+    fireEvent.click(getTextInSlide(rendered, 1)('Skip') as Node);
+    expect(rendered.getByText('step2')).toBeInTheDocument();
+
+    fireEvent.click(getTextInSlide(rendered, 2)('Back') as Node);
+    expect(rendered.getByText('step1')).toBeInTheDocument();
+  });
 });
diff --git a/packages/core-components/src/components/SimpleStepper/SimpleStepperFooter.tsx b/packages/core-components/src/components/SimpleStepper/SimpleStepperFooter.tsx
index 5f4bdbf0c6..0f7d604eb0 100644
--- a/packages/core-components/src/components/SimpleStepper/SimpleStepperFooter.tsx
+++ b/packages/core-components/src/components/SimpleStepper/SimpleStepperFooter.tsx
@@ -45,6 +45,10 @@ interface NextBtnProps extends CommonBtnProps {
   last?: boolean;
   stepIndex: number;
 }
+interface SkipBtnProps extends CommonBtnProps {
+  disabled?: boolean;
+  stepIndex: number;
+}
 interface BackBtnProps extends CommonBtnProps {
   disabled?: boolean;
   stepIndex: number;
@@ -71,6 +75,18 @@ const NextBtn = ({
   </Button>
 );
 
+const SkipBtn = ({ text, handleClick, disabled, stepIndex }: SkipBtnProps) => (
+  <Button
+    variant="outlined"
+    color="primary"
+    disabled={disabled}
+    data-testid={`skipButton-${stepIndex}`}
+    onClick={handleClick}
+  >
+    {text || 'Skip'}
+  </Button>
+);
+
 const BackBtn = ({ text, handleClick, disabled, stepIndex }: BackBtnProps) => (
   <Button
     onClick={handleClick}
@@ -138,6 +154,17 @@ export const SimpleStepperFooter = ({
           stepIndex={stepIndex}
         />
       )}
+      {actions.showSkip && (
+        <SkipBtn
+          text={actions.skipText}
+          handleClick={handleNext}
+          disabled={
+            (!!stepperLength && stepIndex >= stepperLength) ||
+            (!!actions.canSkip && !actions.canSkip())
+          }
+          stepIndex={stepIndex}
+        />
+      )}
       {[undefined, true].includes(actions.showNext) && (
         <NextBtn
           text={actions.nextText}
diff --git a/packages/core-components/src/components/SimpleStepper/types.ts b/packages/core-components/src/components/SimpleStepper/types.ts
index ef0fc46a84..eacfc94065 100644
--- a/packages/core-components/src/components/SimpleStepper/types.ts
+++ b/packages/core-components/src/components/SimpleStepper/types.ts
@@ -31,6 +31,11 @@ export type StepActions = {
   canRestart?: () => boolean;
   onRestart?: () => void;
   restartText?: string;
+
+  showSkip?: boolean;
+  canSkip?: () => boolean;
+  onSkip?: () => void;
+  skipText?: string;
 };
 
 export type StepProps = {