chore(app): extend props of intervention modal

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

@@ -70,36 +70,52 @@ type Story = StoryObj<typeof InterventionInfo>
 
 export const MoveBetweenSlots: Story = {
   args: {
+    layout: 'default',
     type: 'location-arrow-location',
     labwareName: 'Plate',
     currentLocationProps: {
-      slotName: 'A1',
+      deckLabel: 'A1',
     },
     newLocationProps: {
-      slotName: 'B2',
+      deckLabel: 'B2',
     },
   },
 }
 
 export const Refill: Story = {
   args: {
+    layout: 'default',
     type: 'location',
     labwareName: 'Tip Rack',
     currentLocationProps: {
-      slotName: 'A1',
+      deckLabel: 'A1',
     },
   },
 }
 
 export const Select: Story = {
   args: {
+    layout: 'default',
     type: 'location-colon-location',
     labwareName: 'Well',
     currentLocationProps: {
-      slotName: 'A1',
+      deckLabel: 'A1',
     },
     newLocationProps: {
-      slotName: 'B1',
+      deckLabel: 'B1',
+    },
+  },
+}
+
+export const LabwareWithLidAndQuantity: Story = {
+  args: {
+    layout: 'stacked',
+    type: 'location-colon-location',
+    labwareName: 'Labware with lid',
+    subText: 'With Tip Rack Lid',
+    tagText: 'Quantity: 3',
+    currentLocationProps: {
+      deckLabel: 'STACKER A',
     },
   },
 }

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

@@ -11,19 +11,35 @@ import {
   StyledText,
   ALIGN_CENTER,
   RESPONSIVENESS,
+  Tag,
+  SPACING_1,
+  SPACING_3,
+  TYPOGRAPHY,
 } from '@opentrons/components'
 import { Divider } from '/app/atoms/structure/Divider'
 
 import type { DeckInfoLabelProps } from '@opentrons/components'
 
-export interface InterventionInfoProps {
+export interface InterventionInfoDefaultProps {
+  layout: 'default'
   type: 'location-arrow-location' | 'location-colon-location' | 'location'
   labwareName: string
   labwareNickname?: string
   currentLocationProps: DeckInfoLabelProps
   newLocationProps?: DeckInfoLabelProps
 }
 
+export interface InterventionInfoStackedProps
+  extends Omit<InterventionInfoDefaultProps, 'layout'> {
+  layout: 'stacked'
+  subText: string
+  tagText: string
+}
+
+export type InterventionInfoProps =
+  | InterventionInfoDefaultProps
+  | InterventionInfoStackedProps
+
 export function InterventionInfo(props: InterventionInfoProps): JSX.Element {
   const content = buildContent(props)
 
@@ -39,32 +55,37 @@ export function InterventionInfo(props: InterventionInfoProps): JSX.Element {
           desktopStyle="bodyDefaultSemiBold"
           css={LINE_CLAMP_STYLE}
         >
-          {props.labwareName}
+          {props.labwareNickname ?? props.labwareName}
         </StyledText>
-        {props.labwareNickname != null ? (
-          <StyledText
-            oddStyle="hidden"
-            desktopStyle="bodyDefaultRegular"
-            color={COLORS.grey60}
-            css={css`
-              ${LINE_CLAMP_STYLE}
-              @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-                display: none;
-              }
-            `}
-          >
-            {props.labwareNickname}{' '}
-          </StyledText>
+        {props.layout === 'stacked' ? (
+          <>
+            <StyledText
+              oddStyle="hidden"
+              desktopStyle="bodyDefaultRegular"
+              color={COLORS.grey60}
+              css={css`
+                ${LINE_CLAMP_STYLE}
+                margin: ${SPACING_1} 0;
+                @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+                  font-size: ${TYPOGRAPHY.fontSize22};
+                }
+              `}
+            >
+              {props.subText}
+            </StyledText>
+            <Tag type="default" text={props.tagText} shrinkToContent={true} />
+            <Divider
+              borderColor={COLORS.grey35}
+              css={`
+                margin-top: ${SPACING_3};
+                @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+                  border-bottom-color: ${COLORS.grey60};
+                }
+              `}
+            />
+          </>
         ) : null}
       </Flex>
-      <Divider
-        borderColor={COLORS.grey35}
-        css={`
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-            display: none;
-          }
-        `}
-      />
       {content}
     </Flex>
   )

app/src/organisms/ErrorRecoveryFlows/shared/LeftColumnLabwareInfo.tsx

@@ -35,6 +35,7 @@ export function LeftColumnLabwareInfo({
     <InterventionContent
       headline={title}
       infoProps={{
+        layout: 'default',
         type,
         labwareName: failedLabwareName ?? '',
         labwareNickname: failedLabwareNickname ?? '',

app/src/organisms/ErrorRecoveryFlows/shared/__tests__/LeftColumnLabwareInfo.test.tsx

@@ -49,6 +49,7 @@ describe('LeftColumnLabwareInfo', () => {
       expect.objectContaining({
         headline: 'MOCK_TITLE',
         infoProps: {
+          layout: 'default',
           type: 'location',
           labwareName: 'MOCK_LW_NAME',
           labwareNickname: 'MOCK_LW_NICKNAME',