feat(app): Add InterventionInfo: Move component (#15387)

Adds the Move component, used in InterventionModal, to the app.

app/src/molecules/InterventionModal/InterventionStep/Move.stories.tsx

@@ -0,0 +1,89 @@
+import { ICON_DATA_BY_NAME } from '@opentrons/components'
+
+import { Move } from './Move'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof Move> = {
+  title: 'App/Organisms/InterventionModal/InterventionStep/Move',
+  component: Move,
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+        options: ['move', 'refill', 'select'],
+      },
+    },
+    labwareName: {
+      control: 'text',
+    },
+    currentLocationProps: {
+      control: {
+        type: 'object',
+      },
+      slotName: {
+        control: 'text',
+      },
+      iconName: {
+        control: {
+          type: 'select',
+          options: Object.keys(ICON_DATA_BY_NAME),
+        },
+      },
+    },
+    newLocationProps: {
+      control: {
+        type: 'object',
+      },
+      slotName: {
+        control: 'text',
+      },
+      iconName: {
+        control: {
+          type: 'select',
+          options: Object.keys(ICON_DATA_BY_NAME),
+        },
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Move>
+
+export const MoveBetweenSlots: Story = {
+  args: {
+    type: 'move',
+    labwareName: 'Plate',
+    currentLocationProps: {
+      slotName: 'A1',
+    },
+    newLocationProps: {
+      slotName: 'B2',
+    },
+  },
+}
+
+export const Refill: Story = {
+  args: {
+    type: 'refill',
+    labwareName: 'Tip Rack',
+    currentLocationProps: {
+      slotName: 'A1',
+    },
+  },
+}
+
+export const Select: Story = {
+  args: {
+    type: 'select',
+    labwareName: 'Well',
+    currentLocationProps: {
+      slotName: 'A1',
+    },
+    newLocationProps: {
+      slotName: 'B1',
+    },
+  },
+}

app/src/molecules/InterventionModal/InterventionStep/Move.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react'
+import { css } from 'styled-components'
+
+import {
+  LocationIcon,
+  Flex,
+  Icon,
+  COLORS,
+  BORDERS,
+  SPACING,
+  DIRECTION_COLUMN,
+  StyledText,
+  ALIGN_CENTER,
+} from '@opentrons/components'
+
+import type { LocationIconProps } from '@opentrons/components'
+
+export interface MoveProps {
+  type: 'move' | 'refill' | 'select'
+  labwareName: string
+  currentLocationProps: LocationIconProps
+  newLocationProps?: LocationIconProps
+}
+
+export function Move(props: MoveProps): JSX.Element {
+  const content = buildContent(props)
+
+  return (
+    <Flex css={CARD_STYLE}>
+      <StyledText as="pBold">{props.labwareName}</StyledText>
+      {content}
+    </Flex>
+  )
+}
+
+const buildContent = (props: MoveProps): JSX.Element => {
+  switch (props.type) {
+    case 'move':
+      return buildMove(props)
+    case 'refill':
+      return buildRefill(props)
+    case 'select':
+      return buildSelect(props)
+  }
+}
+
+const buildMove = (props: MoveProps): JSX.Element => {
+  const { currentLocationProps, newLocationProps } = props
+
+  if (newLocationProps != null) {
+    return (
+      <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
+        <LocationIcon {...currentLocationProps} />
+        <Icon name="arrow-right" css={ICON_STYLE} />
+        <LocationIcon {...newLocationProps} />
+      </Flex>
+    )
+  } else {
+    return buildRefill(props)
+  }
+}
+
+const buildRefill = ({ currentLocationProps }: MoveProps): JSX.Element => {
+  return (
+    <Flex gridGap={SPACING.spacing8}>
+      <LocationIcon {...currentLocationProps} />
+    </Flex>
+  )
+}
+
+const buildSelect = (props: MoveProps): JSX.Element => {
+  const { currentLocationProps, newLocationProps } = props
+
+  if (newLocationProps != null) {
+    return (
+      <Flex gridGap={SPACING.spacing8}>
+        <LocationIcon {...currentLocationProps} />
+        <Icon name="colon" css={ICON_STYLE} />
+        <LocationIcon {...newLocationProps} />
+      </Flex>
+    )
+  } else {
+    return buildRefill(props)
+  }
+}
+
+const ICON_STYLE = css`
+  width: ${SPACING.spacing40};
+  height: ${SPACING.spacing40};
+`
+
+const CARD_STYLE = css`
+  flex-direction: ${DIRECTION_COLUMN};
+  background-color: ${COLORS.grey35};
+  width: 26.75rem;
+  padding: ${SPACING.spacing16};
+  grid-gap: ${SPACING.spacing8};
+  border-radius: ${BORDERS.borderRadius8};
+`

app/src/molecules/InterventionModal/InterventionStep/index.tsx

@@ -0,0 +1,3 @@
+export { Move } from './Move'
+
+export type { MoveProps } from './Move'

components/src/molecules/LocationIcon/index.tsx

@@ -23,7 +23,7 @@ interface HardwareIconProps extends StyleProps {
 }
 
 // type union requires one of slotName or iconName, but not both
-type LocationIconProps = SlotLocationProps | HardwareIconProps
+export type LocationIconProps = SlotLocationProps | HardwareIconProps
 
 const LOCATION_ICON_STYLE = css<{
   slotName?: string