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 ( + + + This is the content for step 1 + + + This is the content for step 2 + + + ); +}; + +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( + + + step0 + + + step1 + + + step2 + + + step3 + + , + ); + + 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 = ({ ); +const SkipBtn = ({ text, handleClick, disabled, stepIndex }: SkipBtnProps) => ( + + {text || 'Skip'} + +); + const BackBtn = ({ text, handleClick, disabled, stepIndex }: BackBtnProps) => ( )} + {actions.showSkip && ( + = stepperLength) || + (!!actions.canSkip && !actions.canSkip()) + } + stepIndex={stepIndex} + /> + )} {[undefined, true].includes(actions.showNext) && ( boolean; onRestart?: () => void; restartText?: string; + + showSkip?: boolean; + canSkip?: () => boolean; + onSkip?: () => void; + skipText?: string; }; export type StepProps = {