replace FlexTrash with TrashBinFixture in configurator

components/src/hardware-sim/Deck/FlexTrash.tsx

@@ -1,22 +1,14 @@
 import * as React from 'react'
 
 import { Icon } from '../../icons'
-import { Btn, Flex } from '../../primitives'
-import {
-  ALIGN_CENTER,
-  DISPLAY_FLEX,
-  JUSTIFY_CENTER,
-  POSITION_ABSOLUTE,
-  POSITION_RELATIVE,
-} from '../../styles'
-import { BORDERS, COLORS, SPACING } from '../../ui-style-constants'
+import { Flex } from '../../primitives'
+import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
+import { BORDERS } from '../../ui-style-constants'
 import { RobotCoordsForeignObject } from './RobotCoordsForeignObject'
 
 import { getDeckDefFromRobotType } from '@opentrons/shared-data'
 import trashDef from '@opentrons/shared-data/labware/definitions/2/opentrons_1_trash_3200ml_fixed/1.json'
-
 import type { RobotType } from '@opentrons/shared-data'
-
 // only allow edge slots (columns 1 and 3)
 export type TrashSlotName =
   | 'A1'
@@ -27,12 +19,10 @@ export type TrashSlotName =
   | 'B3'
   | 'C3'
   | 'D3'
-
 interface FlexTrashProps {
   robotType: RobotType
   trashIconColor: string
   backgroundColor: string
-  handleClickRemove?: (trashSlotName: string) => void
   trashSlotName?: TrashSlotName
 }
 
@@ -44,27 +34,22 @@ export const FlexTrash = ({
   robotType,
   trashIconColor,
   backgroundColor,
-  handleClickRemove,
   // default Flex trash slot position A3
   trashSlotName = 'A3',
 }: FlexTrashProps): JSX.Element | null => {
   // be sure we don't try to render for an OT-2
   if (robotType !== 'OT-3 Standard') return null
-
   const deckDef = getDeckDefFromRobotType(robotType)
   const trashSlot = deckDef.locations.orderedSlots.find(
     slot => slot.id === trashSlotName
   )
-
   // retrieve slot x,y positions and dimensions from deck definition for the given trash slot
   const [x = 0, y = 0] = trashSlot?.position ?? []
   const { xDimension: slotXDimension = 0, yDimension: slotYDimension = 0 } =
     trashSlot?.boundingBox ?? {}
-
   // adjust for dimensions from trash definition
   const { x: xAdjustment, y: yAdjustment } = trashDef.cornerOffsetFromSlot
   const { xDimension, yDimension } = trashDef.dimensions
-
   // rotate trash 180 degrees in column 1
   const rotateDegrees =
     trashSlotName === 'A1' ||
@@ -73,11 +58,9 @@ export const FlexTrash = ({
     trashSlotName === 'D1'
       ? '180'
       : '0'
-
   // rotate trash around x,y midpoint of standard slot bounding box
   const rotateXCoord = x + slotXDimension / 2
   const rotateYCoord = y + slotYDimension / 2
-
   return x != null && y != null && xDimension != null && yDimension != null ? (
     <g transform={`rotate(${rotateDegrees}, ${rotateXCoord}, ${rotateYCoord})`}>
       <RobotCoordsForeignObject
@@ -99,22 +82,10 @@ export const FlexTrash = ({
             name="trash"
             color={trashIconColor}
             height="3.5rem"
-            position={POSITION_RELATIVE}
             // rotate icon back 180 degrees
             transform={`rotate(${rotateDegrees}deg)`}
             transformOrigin="center"
           />
-          {handleClickRemove != null ? (
-            <Btn
-              display={DISPLAY_FLEX}
-              justifyContent={JUSTIFY_CENTER}
-              left={rotateDegrees === '180' ? SPACING.spacing60 : '9.375rem'}
-              position={POSITION_ABSOLUTE}
-              onClick={() => handleClickRemove(trashSlotName)}
-            >
-              <Icon name="remove" color={COLORS.white} height="2.25rem" />
-            </Btn>
-          ) : null}
         </Flex>
       </RobotCoordsForeignObject>
     </g>

components/src/hardware-sim/DeckConfigurator/TrashBinFixture.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react'
+
+import {
+  getDeckDefFromRobotType,
+  FLEX_ROBOT_TYPE,
+} from '@opentrons/shared-data'
+
+import { Icon } from '../../icons'
+import { Btn, Flex, Text } from '../../primitives'
+import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
+import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
+
+// TODO: replace stubs with JSON definitions when available
+const trashBinDef = {
+  schemaVersion: 1,
+  version: 1,
+  namespace: 'opentrons',
+  metadata: {
+    displayName: 'Trash bin',
+  },
+  parameters: {
+    loadName: 'trash_bin',
+  },
+  boundingBox: {
+    xDimension: 246.5,
+    yDimension: 106.0,
+    zDimension: 0,
+  },
+}
+
+interface TrashBinFixtureProps {
+  fixtureLocation: string
+  handleClickRemove?: (fixtureLocation: string) => void
+}
+
+export function TrashBinFixture(props: TrashBinFixtureProps): JSX.Element {
+  const { handleClickRemove, fixtureLocation } = props
+  const deckDef = getDeckDefFromRobotType(FLEX_ROBOT_TYPE)
+
+  // TODO: migrate to fixture location for v4
+  const trashBinSlot = deckDef.locations.orderedSlots.find(
+    slot => slot.id === fixtureLocation
+  )
+  const [xSlotPosition = 0, ySlotPosition = 0] = trashBinSlot?.position ?? []
+  // TODO: remove adjustment when reading from fixture position
+  // adjust x differently for right side/left side
+  const isLeftSideofDeck =
+    fixtureLocation === 'A1' ||
+    fixtureLocation === 'B1' ||
+    fixtureLocation === 'C1' ||
+    fixtureLocation === 'D1'
+  const xAdjustment = isLeftSideofDeck ? -101.5 : -17
+  const x = xSlotPosition + xAdjustment
+  const yAdjustment = -10
+  const y = ySlotPosition + yAdjustment
+
+  const { xDimension, yDimension } = trashBinDef.boundingBox
+
+  return (
+    <RobotCoordsForeignObject
+      width={xDimension}
+      height={yDimension}
+      x={x}
+      y={y}
+      flexProps={{ flex: '1' }}
+      foreignObjectProps={{ flex: '1' }}
+    >
+      <Flex
+        alignItems={ALIGN_CENTER}
+        backgroundColor={COLORS.grey2}
+        borderRadius={BORDERS.radiusSoftCorners}
+        color={COLORS.white}
+        gridGap={SPACING.spacing8}
+        justifyContent={JUSTIFY_CENTER}
+        width="100%"
+      >
+        {}
+        <Text css={TYPOGRAPHY.bodyTextSemiBold}>
+          {trashBinDef.metadata.displayName}
+        </Text>
+        {handleClickRemove != null ? (
+          <Btn
+            display={DISPLAY_FLEX}
+            justifyContent={JUSTIFY_CENTER}
+            onClick={() => handleClickRemove(fixtureLocation)}
+          >
+            <Icon name="remove" color={COLORS.white} height="2.25rem" />
+          </Btn>
+        ) : null}
+      </Flex>
+    </RobotCoordsForeignObject>
+  )
+}

components/src/hardware-sim/DeckConfigurator/index.tsx

@@ -11,14 +11,14 @@ import {
 
 import { COLORS } from '../../ui-style-constants'
 import { DeckSlotLocation } from '../DeckSlotLocation'
-import { FlexTrash, SlotLabels } from '../Deck'
+import { SlotLabels } from '../Deck'
 import { RobotCoordinateSpace } from '../RobotCoordinateSpace'
 import { EmptyFixture } from './EmptyFixture'
 import { StagingAreaFixture } from './StagingAreaFixture'
+import { TrashBinFixture } from './TrashBinFixture'
 import { WasteChuteFixture } from './WasteChuteFixture'
 
 import type { DeckConfiguration } from '@opentrons/shared-data'
-import type { TrashSlotName } from '../Deck'
 
 interface DeckConfiguratorProps {
   deckConfig: DeckConfiguration
@@ -106,13 +106,10 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
         />
       ))}
       {trashBinFixtures.map(fixture => (
-        <FlexTrash
+        <TrashBinFixture
           key={fixture.fixtureId}
-          backgroundColor={darkFill}
           handleClickRemove={handleClickRemove}
-          robotType={FLEX_ROBOT_TYPE}
-          trashIconColor={lightFill}
-          trashSlotName={fixture.fixtureLocation as TrashSlotName}
+          fixtureLocation={fixture.fixtureLocation}
         />
       ))}
       <SlotLabels robotType={FLEX_ROBOT_TYPE} color={darkFill} />