feat(app): create multiSlideout and plug into ChooseRobotSlideout

closes AUTH-97

app/src/assets/localization/en/shared.json

@@ -6,15 +6,18 @@
   "before_you_begin": "Before you begin",
   "browse": "browse",
   "cancel": "cancel",
+  "change_robot": "Change robot",
   "clear_data": "clear data",
   "close_robot_door": "Close the robot door before starting the run.",
   "close": "close",
   "computer_in_app_is_controlling_robot": "A computer with the Opentrons App is currently controlling this robot.",
   "confirm_placement": "Confirm placement",
   "confirm_position": "Confirm position",
   "confirm_terminate": "This will immediately stop the activity begun on a computer. You, or another user, may lose progress or see an error in the Opentrons App.",
+  "confirm_values": "Confirm values",
   "confirm": "Confirm",
   "continue_activity": "Continue activity",
+  "continue_to_param": "Continue to parameters",
   "continue": "continue",
   "delete": "Delete",
   "did_pipette_pick_up_tip": "Did pipette pick up tip successfully?",

app/src/atoms/Slideout/MultiSlideout.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { Slideout } from './index'
+
+interface MultiSlideoutProps {
+  title: string | React.ReactElement
+  children: React.ReactNode
+  onCloseClick: () => void
+  currentStep: number
+  maxSteps: number
+  //  isExpanded is for collapse and expand animation
+  isExpanded?: boolean
+  footer?: React.ReactNode
+}
+
+export const MultiSlideout = (props: MultiSlideoutProps): JSX.Element => {
+  const {
+    isExpanded,
+    title,
+    onCloseClick,
+    children,
+    footer,
+    maxSteps,
+    currentStep,
+  } = props
+
+  return (
+    <Slideout
+      title={title}
+      isExpanded={isExpanded}
+      footer={footer}
+      onCloseClick={onCloseClick}
+      multiSlideoutSpecs={{ currentStep, maxSteps }}
+    >
+      {children}
+    </Slideout>
+  )
+}

app/src/atoms/Slideout/index.tsx

@@ -19,14 +19,20 @@ import {
 
 import { Divider } from '../structure'
 import { StyledText } from '../text'
+import { useTranslation } from 'react-i18next'
 
+export interface MultiSlideoutSpecs {
+  currentStep: number
+  maxSteps: number
+}
 export interface SlideoutProps {
   title: string | React.ReactElement
   children: React.ReactNode
-  onCloseClick: () => unknown
+  onCloseClick: () => void
   //  isExpanded is for collapse and expand animation
   isExpanded?: boolean
   footer?: React.ReactNode
+  multiSlideoutSpecs?: MultiSlideoutSpecs
 }
 
 const SHARED_STYLE = css`
@@ -108,10 +114,17 @@ const CLOSE_ICON_STYLE = css`
 `
 
 export const Slideout = (props: SlideoutProps): JSX.Element => {
-  const { isExpanded, title, onCloseClick, children, footer } = props
+  const {
+    isExpanded,
+    title,
+    onCloseClick,
+    children,
+    footer,
+    multiSlideoutSpecs,
+  } = props
+  const { t } = useTranslation('shared')
   const slideOutRef = React.useRef<HTMLDivElement>(null)
   const [isReachedBottom, setIsReachedBottom] = React.useState<boolean>(false)
-
   const hasBeenExpanded = React.useRef<boolean>(isExpanded ?? false)
   const handleScroll = (): void => {
     if (slideOutRef.current == null) return
@@ -166,6 +179,19 @@ export const Slideout = (props: SlideoutProps): JSX.Element => {
           flexDirection={DIRECTION_COLUMN}
           justifyContent={JUSTIFY_SPACE_BETWEEN}
         >
+          {multiSlideoutSpecs == null ? null : (
+            <StyledText
+              as="p"
+              color={COLORS.grey60}
+              alignItems={ALIGN_CENTER}
+              paddingX={SPACING.spacing16}
+            >
+              {t('step', {
+                current: multiSlideoutSpecs.currentStep,
+                max: multiSlideoutSpecs.maxSteps,
+              })}
+            </StyledText>
+          )}
           {typeof title === 'string' ? (
             <Flex
               flexDirection={DIRECTION_ROW}

app/src/organisms/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx

@@ -127,6 +127,32 @@ describe('ChooseRobotSlideout', () => {
     expect(vi.mocked(startDiscovery)).toHaveBeenCalled()
     expect(dispatch).toHaveBeenCalledWith({ type: 'mockStartDiscovery' })
   })
+  it('renders the multi slideout page 1', () => {
+    render({
+      onCloseClick: vi.fn(),
+      isExpanded: true,
+      isSelectedRobotOnDifferentSoftwareVersion: false,
+      selectedRobot: null,
+      setSelectedRobot: mockSetSelectedRobot,
+      title: 'choose robot slideout title',
+      robotType: 'OT-2 Standard',
+      multiSlideout: { currentPage: 1 },
+    })
+    screen.getByText('Step 1 / 2')
+  })
+  it('renders the multi slideout page 2', () => {
+    render({
+      onCloseClick: vi.fn(),
+      isExpanded: true,
+      isSelectedRobotOnDifferentSoftwareVersion: false,
+      selectedRobot: null,
+      setSelectedRobot: mockSetSelectedRobot,
+      title: 'choose robot slideout title',
+      robotType: 'OT-2 Standard',
+      multiSlideout: { currentPage: 2 },
+    })
+    screen.getByText('Step 2 / 2')
+  })
   it('defaults to first available robot and allows an available robot to be selected', () => {
     vi.mocked(getConnectableRobots).mockReturnValue([
       { ...mockConnectableRobot, name: 'otherRobot', ip: 'otherIp' },