@opentrons/components 0.1.6-alpha.15 → 0.1.6-alpha.17

package/src/hardware-sim/BaseDeck/StagingAreaFixture.tsx

@@ -0,0 +1,114 @@
+import type * as React from 'react'
+
+import { SlotBase } from './SlotBase'
+import { SlotClip } from './SlotClip'
+
+import type { DeckDefinition, ModuleType } from '@opentrons/shared-data'
+
+export type StagingAreaLocation =
+  | 'cutoutA3'
+  | 'cutoutB3'
+  | 'cutoutC3'
+  | 'cutoutD3'
+
+interface StagingAreaFixtureProps extends React.SVGProps<SVGGElement> {
+  cutoutId: StagingAreaLocation
+  deckDefinition: DeckDefinition
+  moduleType?: ModuleType
+  fixtureBaseColor?: React.SVGProps<SVGPathElement>['fill']
+  slotClipColor?: React.SVGProps<SVGPathElement>['stroke']
+  showExtensions?: boolean
+}
+
+export function StagingAreaFixture(
+  props: StagingAreaFixtureProps
+): JSX.Element | null {
+  const {
+    cutoutId,
+    deckDefinition,
+    fixtureBaseColor,
+    slotClipColor,
+    ...restProps
+  } = props
+
+  const cutoutDef = deckDefinition?.locations.cutouts.find(
+    s => s.id === cutoutId
+  )
+  if (cutoutDef == null) {
+    console.warn(
+      `cannot render StagingAreaFixture, no cutout named: ${cutoutDef} in deck def ${deckDefinition?.otId}`
+    )
+    return null
+  }
+
+  const contentsByCutoutLocation: {
+    [cutoutId in StagingAreaLocation]: JSX.Element
+  } = {
+    cutoutA3: (
+      <>
+        <SlotBase
+          d="M314.8,417.1h329.9c2.4,0,4.3-1.9,4.3-4.3v-97.4c0-2.4-1.9-4.3-4.3-4.3H314.8c-2.4,0-4.3,1.9-4.3,4.3v97.4C310.5,415.1,312.4,417.1,314.8,417.1z"
+          fill={fixtureBaseColor}
+        />
+        <SlotClip d="M326,398.9V409h10.8" stroke={slotClipColor} />,
+        <SlotClip d="M326,329.8v-10.5h10.6" stroke={slotClipColor} />,
+        <SlotClip d="M457.8,398.9V409H447" stroke={slotClipColor} />,
+        <SlotClip d="M457.8,329.8v-10.7H447" stroke={slotClipColor} />
+        <SlotClip d="M490,398.9v10.1h10.8" stroke={slotClipColor} />,
+        <SlotClip d="M490,329.8v-10.5h10.6" stroke={slotClipColor} />,
+        <SlotClip d="M621.8,398.9v10.1h-10.8" stroke={slotClipColor} />,
+        <SlotClip d="M621.8,329.8v-10.7h-10.8" stroke={slotClipColor} />
+      </>
+    ),
+    cutoutB3: (
+      <>
+        <SlotBase
+          d="M314.8,310h329.9c2.4,0,4.3-1.9,4.3-4.3v-97.2c0-2.4-1.9-4.3-4.3-4.3H314.8c-2.4,0-4.3,1.9-4.3,4.3v97.2C310.5,308.1,312.4,310,314.8,310z"
+          fill={fixtureBaseColor}
+        />
+        <SlotClip d="M326,291.9V302h10.8" stroke={slotClipColor} />,
+        <SlotClip d="M326,222.8v-10.5h10.6" stroke={slotClipColor} />,
+        <SlotClip d="M457.8,291.9V302H447" stroke={slotClipColor} />,
+        <SlotClip d="M457.8,222.8v-10.7H447" stroke={slotClipColor} />
+        <SlotClip d="M490,291.9v10.1h10.8" stroke={slotClipColor} />,
+        <SlotClip d="M490,222.8v-10.5h10.6" stroke={slotClipColor} />,
+        <SlotClip d="M621.8,291.9v10.1h-10.8" stroke={slotClipColor} />,
+        <SlotClip d="M621.8,222.8v-10.7h-10.8" stroke={slotClipColor} />
+      </>
+    ),
+    cutoutC3: (
+      <>
+        <SlotBase
+          d="M314.8,203.1h329.9c2.4,0,4.3-1.9,4.3-4.3v-97.4c0-2.4-1.9-4.3-4.3-4.3H314.8c-2.4,0-4.3,1.9-4.3,4.3v97.4C310.5,201.2,312.4,203.1,314.8,203.1z"
+          fill={fixtureBaseColor}
+        />
+        <SlotClip d="M326,185v10.1h10.8" stroke={slotClipColor} />,
+        <SlotClip d="M326,115.8v-10.5h10.6" stroke={slotClipColor} />,
+        <SlotClip d="M457.8,185v10.1H447" stroke={slotClipColor} />,
+        <SlotClip d="M457.8,115.8v-10.7H447" stroke={slotClipColor} />
+        <SlotClip d="M490,185v10.1h10.8" stroke={slotClipColor} />,
+        <SlotClip d="M490,115.8v-10.5h10.6" stroke={slotClipColor} />,
+        <SlotClip d="M621.8,185v10.1h-10.8" stroke={slotClipColor} />,
+        <SlotClip d="M621.8,115.8v-10.7h-10.8" stroke={slotClipColor} />
+      </>
+    ),
+    cutoutD3: (
+      <>
+        <SlotBase
+          d="M314.8,96.1h329.9c2.4,0,4.3-1.9,4.3-4.3V-5.6c0-2.4-1.9-4.3-4.3-4.3H314.8c-2.4,0-4.3,1.9-4.3,4.3v97.4C310.5,94.2,312.4,96.1,314.8,96.1z"
+          fill={fixtureBaseColor}
+        />
+        <SlotClip d="M326,77.9V88h10.8" stroke={slotClipColor} />
+        <SlotClip d="M326,8.8V-1.7h10.6" stroke={slotClipColor} />
+        <SlotClip d="M457.8,77.9V88H447" stroke={slotClipColor} />
+        <SlotClip d="M457.8,8.8V-1.9H447" stroke={slotClipColor} />
+        <SlotClip d="M490,77.9v10.1h10.8" stroke={slotClipColor} />,
+        <SlotClip d="M490,8.8v-10.5h10.6" stroke={slotClipColor} />,
+        <SlotClip d="M621.8,77.9v10.1h-10.8" stroke={slotClipColor} />,
+        <SlotClip d="M621.8,8.8v-10.7h-10.8" stroke={slotClipColor} />
+      </>
+    ),
+  }
+
+  return <g {...restProps}>{contentsByCutoutLocation[cutoutId]}</g>
+}

package/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx

@@ -0,0 +1,114 @@
+import type * as React from 'react'
+
+import { Icon } from '../../icons'
+import { Flex, Text } from '../../primitives'
+import {
+  ALIGN_CENTER,
+  DIRECTION_COLUMN,
+  JUSTIFY_CENTER,
+  TEXT_ALIGN_CENTER,
+} from '../../styles'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { COLORS } from '../../helix-design-system'
+import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
+import { SlotBase } from './SlotBase'
+import type {
+  WASTE_CHUTE_CUTOUT,
+  DeckDefinition,
+  ModuleType,
+} from '@opentrons/shared-data'
+
+interface WasteChuteFixtureProps extends React.SVGProps<SVGGElement> {
+  cutoutId: typeof WASTE_CHUTE_CUTOUT
+  deckDefinition: DeckDefinition
+  moduleType?: ModuleType
+  fixtureBaseColor?: React.SVGProps<SVGPathElement>['fill']
+  wasteChuteColor?: string
+  showExtensions?: boolean
+}
+
+export function WasteChuteFixture(
+  props: WasteChuteFixtureProps
+): JSX.Element | null {
+  const {
+    cutoutId,
+    deckDefinition,
+    fixtureBaseColor = COLORS.grey35,
+    wasteChuteColor = COLORS.grey50,
+    ...restProps
+  } = props
+
+  if (cutoutId !== 'cutoutD3') {
+    console.warn(
+      `cannot render WasteChuteFixture in given cutout location ${cutoutId}`
+    )
+    return null
+  }
+
+  const cutoutDef = deckDefinition?.locations.cutouts.find(
+    s => s.id === cutoutId
+  )
+  if (cutoutDef == null) {
+    console.warn(
+      `cannot render WasteChuteFixture, no cutout named: ${cutoutDef} in deck def ${deckDefinition?.otId}`
+    )
+    return null
+  }
+
+  return (
+    <g {...restProps}>
+      <SlotBase
+        d="M314.8,96.1h238.9c2.4,0,4.3-1.9,4.3-4.3V-5.6c0-2.4-1.9-4.3-4.3-4.3H314.8c-2.4,0-4.3,1.9-4.3,4.3v97.4C310.5,94.2,312.4,96.1,314.8,96.1z"
+        fill={fixtureBaseColor}
+      />
+      <WasteChute
+        backgroundColor={wasteChuteColor}
+        wasteIconColor={fixtureBaseColor}
+      />
+    </g>
+  )
+}
+
+interface WasteChuteProps {
+  wasteIconColor: string
+  backgroundColor: string
+}
+
+/**
+ * a deck map foreign object representing the physical location of the waste chute connected to the deck
+ */
+export function WasteChute(props: WasteChuteProps): JSX.Element {
+  const { wasteIconColor, backgroundColor } = props
+
+  return (
+    <RobotCoordsForeignObject
+      width={130}
+      height={138}
+      x={322}
+      y={-51}
+      flexProps={{ flex: '1' }}
+      foreignObjectProps={{ flex: '1' }}
+    >
+      <Flex
+        alignItems={ALIGN_CENTER}
+        backgroundColor={backgroundColor}
+        borderRadius="6px"
+        color={wasteIconColor}
+        flexDirection={DIRECTION_COLUMN}
+        gridGap={SPACING.spacing4}
+        justifyContent={JUSTIFY_CENTER}
+        padding={SPACING.spacing8}
+        width="100%"
+      >
+        <Icon name="trash" color={wasteIconColor} height="2rem" />
+        <Text
+          color={COLORS.white}
+          textAlign={TEXT_ALIGN_CENTER}
+          css={TYPOGRAPHY.bodyTextSemiBold}
+        >
+          Waste chute
+        </Text>
+      </Flex>
+    </RobotCoordsForeignObject>
+  )
+}

package/src/hardware-sim/BaseDeck/WasteChuteStagingAreaFixture.tsx

@@ -0,0 +1,68 @@
+import type * as React from 'react'
+
+import { WASTE_CHUTE_CUTOUT } from '@opentrons/shared-data'
+
+import { COLORS } from '../../helix-design-system'
+import { SlotBase } from './SlotBase'
+import { SlotClip } from './SlotClip'
+import { WasteChute } from './WasteChuteFixture'
+
+import type { DeckDefinition, ModuleType } from '@opentrons/shared-data'
+
+interface WasteChuteStagingAreaFixtureProps
+  extends React.SVGProps<SVGGElement> {
+  cutoutId: typeof WASTE_CHUTE_CUTOUT
+  deckDefinition: DeckDefinition
+  moduleType?: ModuleType
+  fixtureBaseColor?: React.SVGProps<SVGPathElement>['fill']
+  slotClipColor?: React.SVGProps<SVGPathElement>['stroke']
+  wasteChuteColor?: string
+  showExtensions?: boolean
+}
+
+export function WasteChuteStagingAreaFixture(
+  props: WasteChuteStagingAreaFixtureProps
+): JSX.Element | null {
+  const {
+    cutoutId,
+    deckDefinition,
+    fixtureBaseColor = COLORS.grey35,
+    slotClipColor = COLORS.grey60,
+    wasteChuteColor = COLORS.grey50,
+    ...restProps
+  } = props
+
+  if (cutoutId !== WASTE_CHUTE_CUTOUT) {
+    console.warn(
+      `cannot render WasteChuteStagingAreaFixture in given cutout location ${cutoutId}`
+    )
+    return null
+  }
+
+  const cutoutDef = deckDefinition?.locations.cutouts.find(
+    s => s.id === cutoutId
+  )
+  if (cutoutDef == null) {
+    console.warn(
+      `cannot render WasteChuteStagingAreaFixture, no cutout named: ${cutoutDef} in deck def ${deckDefinition?.otId}`
+    )
+    return null
+  }
+
+  return (
+    <g {...restProps}>
+      <SlotBase
+        d="M314.8,96.1h329.9c2.4,0,4.3-1.9,4.3-4.3V-5.6c0-2.4-1.9-4.3-4.3-4.3H314.8c-2.4,0-4.3,1.9-4.3,4.3v97.4C310.5,94.2,312.4,96.1,314.8,96.1z"
+        fill={fixtureBaseColor}
+      />
+      <SlotClip d="M490,77.9v10.1h10.8" stroke={slotClipColor} />,
+      <SlotClip d="M490,8.8v-10.5h10.6" stroke={slotClipColor} />,
+      <SlotClip d="M621.8,77.9v10.1h-10.8" stroke={slotClipColor} />,
+      <SlotClip d="M621.8,8.8v-10.7h-10.8" stroke={slotClipColor} />
+      <WasteChute
+        wasteIconColor={fixtureBaseColor}
+        backgroundColor={wasteChuteColor}
+      />
+    </g>
+  )
+}

package/src/hardware-sim/BaseDeck/__fixtures__/index.ts

@@ -0,0 +1,165 @@
+import {
+  SINGLE_LEFT_SLOT_FIXTURE,
+  SINGLE_CENTER_SLOT_FIXTURE,
+  TRASH_BIN_ADAPTER_FIXTURE,
+  SINGLE_RIGHT_SLOT_FIXTURE,
+  STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE,
+} from '@opentrons/shared-data'
+
+import type { DeckConfiguration } from '@opentrons/shared-data'
+
+export const STANDARD_SLOT_DECK_CONFIG_FIXTURE: DeckConfiguration = [
+  {
+    cutoutId: 'cutoutA1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutB1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutC1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutD1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutA2',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutB2',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutC2',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutD2',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutA3',
+    cutoutFixtureId: TRASH_BIN_ADAPTER_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutB3',
+    cutoutFixtureId: SINGLE_RIGHT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutC3',
+    cutoutFixtureId: SINGLE_RIGHT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutD3',
+    cutoutFixtureId: SINGLE_RIGHT_SLOT_FIXTURE,
+  },
+]
+
+// contains staging area fixtures
+export const EXTENDED_DECK_CONFIG_FIXTURE: DeckConfiguration = [
+  {
+    cutoutId: 'cutoutA1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutB1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutC1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutD1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutA2',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutB2',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutC2',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutD2',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutA3',
+    cutoutFixtureId: TRASH_BIN_ADAPTER_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutB3',
+    cutoutFixtureId: STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutC3',
+    cutoutFixtureId: STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutD3',
+    cutoutFixtureId: STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  },
+]
+
+// contains waste chute fixture
+export const WASTE_CHUTE_DECK_CONFIG_FIXTURE: DeckConfiguration = [
+  {
+    cutoutId: 'cutoutA1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutB1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutC1',
+    cutoutFixtureId: TRASH_BIN_ADAPTER_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutD1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutA2',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutB2',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutC2',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutD2',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutA3',
+    cutoutFixtureId: SINGLE_RIGHT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutB3',
+    cutoutFixtureId: STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutC3',
+    cutoutFixtureId: STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutD3',
+    cutoutFixtureId: WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE,
+  },
+]

package/src/hardware-sim/BaseDeck/index.ts

@@ -0,0 +1,5 @@
+export * from './BaseDeck'
+export * from './SingleSlotFixture'
+export * from './StagingAreaFixture'
+export * from './WasteChuteFixture'
+export * from './WasteChuteStagingAreaFixture'

package/src/hardware-sim/Deck/DeckFromLayers.tsx

@@ -0,0 +1,58 @@
+import { OT2_ROBOT_TYPE } from '@opentrons/shared-data'
+import {
+  FixedBase,
+  FixedTrash,
+  DoorStops,
+  MetalFrame,
+  RemovableDeckOutline,
+  SlotRidges,
+  SlotNumbers,
+  CalibrationMarkings,
+  RemovalHandle,
+  ScrewHoles,
+} from './OT2Layers'
+import { ALL_OT2_DECK_LAYERS } from './constants'
+
+import type { RobotType } from '@opentrons/shared-data'
+
+export interface DeckFromLayersProps {
+  robotType: RobotType
+  layerBlocklist: string[]
+}
+
+const OT2_LAYER_MAP: {
+  [layer in typeof ALL_OT2_DECK_LAYERS[number]]: () => JSX.Element
+} = {
+  fixedBase: () => <FixedBase />,
+  fixedTrash: () => <FixedTrash />,
+  doorStops: () => <DoorStops />,
+  metalFrame: () => <MetalFrame />,
+  removableDeckOutline: () => <RemovableDeckOutline />,
+  slotRidges: () => <SlotRidges />,
+  slotNumbers: () => <SlotNumbers />,
+  calibrationMarkings: () => <CalibrationMarkings />,
+  removalHandle: () => <RemovalHandle />,
+  screwHoles: () => <ScrewHoles />,
+}
+
+/**
+ * a component that renders an OT-2 deck from the V3 deck definition layers property
+ * takes a robot type prop to protect against an attempted Flex render
+ */
+export function DeckFromLayers(props: DeckFromLayersProps): JSX.Element | null {
+  const { robotType, layerBlocklist = [] } = props
+
+  // early return null if not OT-2
+  if (robotType !== OT2_ROBOT_TYPE) return null
+
+  return (
+    <g id="deckLayers">
+      {ALL_OT2_DECK_LAYERS.filter(layer => !layerBlocklist.includes(layer)).map(
+        layer => {
+          const LayerComponent = OT2_LAYER_MAP[layer]
+          return <LayerComponent key={layer} />
+        }
+      )}
+    </g>
+  )
+}

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

@@ -0,0 +1,128 @@
+import {
+  FLEX_ROBOT_TYPE,
+  getDeckDefFromRobotType,
+  opentrons1Trash3200MlFixedV1 as trashLabwareDef,
+} from '@opentrons/shared-data'
+import { Icon } from '../../icons'
+import { Flex, Text } from '../../primitives'
+import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { COLORS, BORDERS } from '../../helix-design-system'
+import { RobotCoordsForeignObject } from './RobotCoordsForeignObject'
+
+import type { RobotType } from '@opentrons/shared-data'
+
+// only allow edge cutout locations (columns 1 and 3)
+export type TrashCutoutId =
+  | 'cutoutA1'
+  | 'cutoutB1'
+  | 'cutoutC1'
+  | 'cutoutD1'
+  | 'cutoutA3'
+  | 'cutoutB3'
+  | 'cutoutC3'
+  | 'cutoutD3'
+
+interface FlexTrashProps {
+  robotType: RobotType
+  trashIconColor: string
+  backgroundColor: string
+  trashCutoutId?: TrashCutoutId
+}
+
+/**
+ * Component to render Opentrons Flex trash
+ * For use as a RobotWorkspace child component
+ */
+
+export const FlexTrash = ({
+  robotType,
+  trashIconColor,
+  backgroundColor,
+  trashCutoutId,
+}: FlexTrashProps): JSX.Element | null => {
+  // be sure we don't try to render for an OT-2
+  if (robotType !== FLEX_ROBOT_TYPE) return null
+
+  const deckDefinition = getDeckDefFromRobotType(robotType)
+
+  const trashCutout = deckDefinition.locations.cutouts.find(
+    cutout => cutout.id === trashCutoutId
+  )
+
+  // retrieve slot x,y positions and dimensions from deck definition for the given trash cutout location
+  const [x = 0, y = 0] = trashCutout?.position ?? []
+
+  // a standard addressable area slot bounding box dimension
+  const {
+    xDimension: slotXDimension = 0,
+    yDimension: slotYDimension = 0,
+  } = deckDefinition.locations.addressableAreas[0].boundingBox
+
+  // adjust for dimensions from trash definition
+  const {
+    x: xAdjustment,
+    y: yAdjustment,
+  } = trashLabwareDef.cornerOffsetFromSlot
+  const { xDimension, yDimension } = trashLabwareDef.dimensions
+
+  // rotate trash 180 degrees in column 1
+  const rotateDegrees =
+    trashCutoutId === 'cutoutA1' ||
+    trashCutoutId === 'cutoutB1' ||
+    trashCutoutId === 'cutoutC1' ||
+    trashCutoutId === 'cutoutD1'
+      ? '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
+        width={xDimension}
+        height={yDimension}
+        x={x + xAdjustment}
+        y={y + yAdjustment}
+        flexProps={{ flex: '1' }}
+        foreignObjectProps={{ flex: '1' }}
+      >
+        <Flex
+          alignItems={ALIGN_CENTER}
+          backgroundColor={backgroundColor}
+          borderRadius={BORDERS.borderRadius4}
+          justifyContent={JUSTIFY_CENTER}
+          gridGap={SPACING.spacing8}
+          width="100%"
+        >
+          {rotateDegrees === '180' ? (
+            <Text
+              color={COLORS.white}
+              // rotate text back 180 degrees
+              transform={`rotate(${rotateDegrees}deg)`}
+              transformOrigin="center"
+              css={TYPOGRAPHY.bodyTextSemiBold}
+            >
+              Trash bin
+            </Text>
+          ) : null}
+          <Icon
+            name="trash"
+            color={trashIconColor}
+            height="2rem"
+            // rotate icon back 180 degrees
+            transform={`rotate(${rotateDegrees}deg)`}
+            transformOrigin="center"
+          />
+          {rotateDegrees === '0' ? (
+            <Text color={COLORS.white} css={TYPOGRAPHY.bodyTextSemiBold}>
+              Trash bin
+            </Text>
+          ) : null}
+        </Flex>
+      </RobotCoordsForeignObject>
+    </g>
+  ) : null
+}