chore(app): extend props of intervention modal

app/src/molecules/InterventionModal/InterventionContent/InterventionInfo.stories.tsx

@@ -73,10 +73,10 @@ export const MoveBetweenSlots: Story = {
     type: 'location-arrow-location',
     labwareName: 'Plate',
     currentLocationProps: {
-      slotName: 'A1',
+      deckLabel: 'A1',
     },
     newLocationProps: {
-      slotName: 'B2',
+      deckLabel: 'B2',
     },
   },
 }
@@ -86,7 +86,7 @@ export const Refill: Story = {
     type: 'location',
     labwareName: 'Tip Rack',
     currentLocationProps: {
-      slotName: 'A1',
+      deckLabel: 'A1',
     },
   },
 }
@@ -96,10 +96,22 @@ export const Select: Story = {
     type: 'location-colon-location',
     labwareName: 'Well',
     currentLocationProps: {
-      slotName: 'A1',
+      deckLabel: 'A1',
     },
     newLocationProps: {
-      slotName: 'B1',
+      deckLabel: 'B1',
+    },
+  },
+}
+
+export const LabwareWithLidAndQuantity: Story = {
+  args: {
+    type: 'location-colon-location',
+    labwareName: 'Labware with lid',
+    subtext: 'With Tip Rack Lid',
+    tagtext: '3',
+    currentLocationProps: {
+      deckLabel: 'STACKER A',
     },
   },
 }

app/src/molecules/InterventionModal/InterventionContent/InterventionInfo.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
 
 import {
@@ -11,6 +12,7 @@
   StyledText,
   ALIGN_CENTER,
   RESPONSIVENESS,
+  Tag,
 } from '@opentrons/components'
 import { Divider } from '/app/atoms/structure/Divider'
 
@@ -20,12 +22,15 @@
   type: 'location-arrow-location' | 'location-colon-location' | 'location'
   labwareName: string
   labwareNickname?: string
+  subtext?: string
+  tagtext?: string
   currentLocationProps: DeckInfoLabelProps
   newLocationProps?: DeckInfoLabelProps
 }
 
 export function InterventionInfo(props: InterventionInfoProps): JSX.Element {
   const content = buildContent(props)
+  const { t } = useTranslation('protocol_setup')
 
   return (
     <Flex
@@ -39,23 +44,31 @@
           desktopStyle="bodyDefaultSemiBold"
           css={LINE_CLAMP_STYLE}
         >
-          {props.labwareName}
+          {props.labwareNickname ?? props.labwareName}
         </StyledText>
-        {props.labwareNickname != null ? (
+        {props.subtext != null ? (
           <StyledText
             oddStyle="hidden"
             desktopStyle="bodyDefaultRegular"
             color={COLORS.grey60}
             css={css`
               ${LINE_CLAMP_STYLE}
+              margin-bottom: 0.25rem
               @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
                 display: none;
               }
             `}
           >
-            {props.labwareNickname}{' '}
+            {props.subtext}{' '}
           </StyledText>
         ) : null}
+        {props.tagtext != null ? (
+          <Tag
+            type="default"
+            text={t('labware_quantity', { quantity: props.tagtext })}
+            shrinkToContent={true}
+          />
+        ) : null}
       </Flex>
       <Divider
         borderColor={COLORS.grey35}