Add optional step to SimpleStepper

Signed-off-by: Arnthor Jonsson <arnthorj@spotify.com>

.changeset/cyan-seahorses-itch.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': minor
+---
+
+Add optional step to SimpleStepper

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;

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();
+  });
 });

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}

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 = {