feat(app): create multiSlideout and plug into ChooseRobotSlideout

[jerader]

closes https://opentrons.atlassian.net/browse/AUTH-97

Overview

This created the MultiSlideout component and then plugs it into the ChooseRobotSlideout

Test Plan

in the app, turn on the RTP ff, click to start protocol setup. the choose robot slideout should have 2 steps. the first step should be completed and the 2nd step should have a todo. The buttons should match designs

Changelog

• create MultiSlideout and modify Slideout to accommodate multi steps
• modify ChooseRobotSlideout and ChooseRobotToRunProtocolSlideout
• fix tests

Review requests

see test plan

Risk assessment

low

[koji]

From the error message, we will need to change something like below.
tested the following code and it worked the same as you wrote on Storybook.

Suggested change

	const Children = (
	<React.Fragment>
	<StyledText
	fontWeight={TYPOGRAPHY.fontWeightSemiBold}
	fontSize={TYPOGRAPHY.fontSizeP}
	>
	{firstPage ? 'first page body' : 'second page body'}
	</StyledText>
	<PrimaryBtn
	marginTop="28rem"
	onClick={togglePage}
	backgroundColor={COLORS.blue50}
	textTransform={TYPOGRAPHY.textTransformNone}
	>
	<StyledText
	fontWeight={TYPOGRAPHY.fontWeightRegular}
	fontSize={TYPOGRAPHY.fontSizeP}
	>
	{firstPage ? 'Go to Second Page' : 'Go to First Page'}
	</StyledText>
	</PrimaryBtn>
	</React.Fragment>
	)
	return (
	<MultiSlideout
	{...args}
	children={Children}
	currentStep={firstPage ? 1 : 2}
	/>
	)
	}
	return (
	<MultiSlideout {...args} currentStep={firstPage ? 1 : 2}>
	<StyledText as="p">
	{firstPage ? 'first page body' : 'second page body'}
	</StyledText>
	<PrimaryBtn
	marginTop="28rem"
	onClick={togglePage}
	backgroundColor={COLORS.blue50}
	textTransform={TYPOGRAPHY.textTransformNone}
	>
	<StyledText as="p">
	{firstPage ? 'Go to Second Page' : 'Go to First Page'}
	</StyledText>
	</PrimaryBtn>
	</MultiSlideout>
	)

[jerader]

oh ya i fixed this in my last commit, thank you!!

[koji]

LGTM!
thank you for adding a storybook!