@opentrons/components 0.2.0-alpha.0 → 0.2.0-alpha.4

package/src/hardware-sim/DeckConfigurator/AbsorbanceReaderItem.tsx

@@ -1,102 +0,0 @@
-import { useTranslation } from 'react-i18next'
-
-import { StyledText } from '../../atoms/StyledText/StyledText'
-import { COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { Btn } from '../../primitives'
-import { TYPOGRAPHY } from '../../ui-style-constants'
-import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
-import {
-  COLUMN_DEFAULT_X_ADJUSTMENT,
-  CONFIG_STYLE_EDITABLE,
-  CONFIG_STYLE_READ_ONLY,
-  CONFIG_STYLE_SELECTED,
-  FIXTURE_HEIGHT,
-  LARGE_SINGLE_ITEM_SLOT_WIDTH,
-  Y_ADJUSTMENT,
-} from './constants'
-
-import type {
-  AddressableAreaNamesWithFakes,
-  CutoutFixtureIdsWithFakes,
-  CutoutId,
-  DeckDefinition,
-} from '@opentrons/shared-data'
-
-interface AbsorbanceReaderItemProps {
-  deckDefinition: DeckDefinition
-  fixtureLocation: CutoutId
-  cutoutFixtureId: CutoutFixtureIdsWithFakes
-  addressableAreaId: AddressableAreaNamesWithFakes
-  handleClickRemove?: (
-    fixtureLocation: CutoutId,
-    cutoutFixtureId: CutoutFixtureIdsWithFakes,
-    addressableAreaId: AddressableAreaNamesWithFakes
-  ) => void
-  selected?: boolean
-}
-
-export function AbsorbanceReaderItem(
-  props: AbsorbanceReaderItemProps
-): JSX.Element {
-  const { t } = useTranslation('deck_configuration')
-
-  const {
-    deckDefinition,
-    handleClickRemove,
-    fixtureLocation,
-    cutoutFixtureId,
-    addressableAreaId,
-    selected = false,
-  } = props
-
-  const cutoutDef = deckDefinition.locations.cutouts.find(
-    cutout => cutout.id === fixtureLocation
-  )
-
-  /**
-   * deck definition cutout position is the position of the single slot located within that cutout
-   * so, to get the position of the cutout itself we must add an adjustment to the slot position
-   * the adjustment for x is different for right side/left side
-   */
-  const [xSlotPosition = 0, ySlotPosition = 0] = cutoutDef?.position ?? []
-
-  const x = xSlotPosition + COLUMN_DEFAULT_X_ADJUSTMENT
-
-  const y = ySlotPosition + Y_ADJUSTMENT
-
-  const editableStyle = selected ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE
-  const handleRemoveClick = (): void => {
-    if (handleClickRemove != null) {
-      handleClickRemove(fixtureLocation, cutoutFixtureId, addressableAreaId)
-    }
-  }
-  return (
-    <RobotCoordsForeignObject
-      width={LARGE_SINGLE_ITEM_SLOT_WIDTH}
-      height={FIXTURE_HEIGHT}
-      x={x}
-      y={y}
-      flexProps={{ flex: '1' }}
-      foreignObjectProps={{ flex: '1' }}
-    >
-      <Btn
-        css={handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY}
-        cursor={handleClickRemove != null ? 'pointer' : 'default'}
-        onClick={handleRemoveClick}
-        height="100%"
-      >
-        <StyledText
-          oddStyle="smallBodyTextSemiBold"
-          desktopStyle="bodyDefaultSemiBold"
-          css={TYPOGRAPHY.smallBodyTextSemiBold}
-        >
-          {t('absorbance')}
-        </StyledText>
-        {handleClickRemove != null ? (
-          <Icon name="remove" color={COLORS.white} size="2rem" />
-        ) : null}
-      </Btn>
-    </RobotCoordsForeignObject>
-  )
-}

package/src/hardware-sim/DeckConfigurator/DeckConfigurator.stories.tsx

@@ -1,109 +0,0 @@
-import {
-  SINGLE_CENTER_SLOT_FIXTURE,
-  SINGLE_LEFT_SLOT_FIXTURE,
-  STAGING_AREA_RIGHT_SLOT_FIXTURE,
-  TRASH_BIN_ADAPTER_FIXTURE,
-  WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE,
-} from '@opentrons/shared-data'
-
-import { DeckConfigurator } from '.'
-
-import type { Meta, Story } from '@storybook/react'
-import type * as React from 'react'
-import type { CutoutConfig } from '@opentrons/shared-data'
-
-export default {
-  title: 'Library/Molecules/Simulation/DeckConfigurator',
-} as Meta
-
-const Template: Story<React.ComponentProps<typeof DeckConfigurator>> = args => (
-  <DeckConfigurator {...args} />
-)
-const deckConfig: CutoutConfig[] = [
-  {
-    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,
-  },
-  {
-    cutoutFixtureId: SINGLE_CENTER_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',
-  },
-  {
-    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: WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE,
-  },
-]
-
-const staticFixtures = [
-  { location: 'cutoutB2', label: 'Tip rack' },
-  { location: 'cutoutC2', label: 'Labware' },
-  { location: 'cutoutD2', label: 'Labware' },
-]
-
-export const Default = Template.bind({})
-Default.args = {
-  deckConfig,
-  handleClickAdd: cutoutId => {
-    console.log(`add at ${cutoutId}`)
-  },
-  handleClickRemove: cutoutId => {
-    console.log(`remove at ${cutoutId}`)
-  },
-}
-
-export const ReadOnly = Template.bind({})
-ReadOnly.args = {
-  deckConfig,
-  handleClickAdd: cutoutId => {
-    console.log(`add at ${cutoutId}`)
-  },
-  handleClickRemove: cutoutId => {
-    console.log(`remove at ${cutoutId}`)
-  },
-  readOnly: true,
-}
-
-export const ReadOnlyWithStaticFixtures = Template.bind({})
-ReadOnlyWithStaticFixtures.args = {
-  deckConfig,
-  handleClickAdd: () => {},
-  handleClickRemove: () => {},
-  readOnly: true,
-  additionalStaticFixtures: staticFixtures,
-}

package/src/hardware-sim/DeckConfigurator/EmptyConfigItem.tsx

@@ -1,160 +0,0 @@
-import { css } from 'styled-components'
-
-import {
-  getAALocationForCutoutAndFixtureId,
-  isModuleAllowedOnAA,
-  SINGLE_LEFT_CUTOUTS,
-} from '@opentrons/shared-data'
-
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { Btn } from '../../primitives'
-import {
-  ALIGN_CENTER,
-  DISPLAY_FLEX,
-  JUSTIFY_CENTER,
-  SPACING_4,
-} from '../../styles'
-import { RESPONSIVENESS } from '../../ui-style-constants'
-import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
-import {
-  COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_1_X_ADJUSTMENT,
-  COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_DEFAULT_X_ADJUSTMENT,
-  FIXTURE_HEIGHT,
-  Y_ADJUSTMENT,
-} from './constants'
-
-import type {
-  AddressableAreaNamesWithFakes,
-  CutoutId,
-  DeckDefinition,
-  ModuleModel,
-} from '@opentrons/shared-data'
-
-interface EmptyConfigItemProps {
-  deckDefinition: DeckDefinition
-  fixtureLocation: CutoutId
-  addressableAreaId: AddressableAreaNamesWithFakes
-  editableCutoutIds: CutoutId[]
-  moduleModel?: ModuleModel
-  handleClickAdd: (
-    fixtureLocation: CutoutId,
-    addressableArea: AddressableAreaNamesWithFakes
-  ) => void
-}
-
-export function EmptyConfigItem(props: EmptyConfigItemProps): JSX.Element {
-  const {
-    deckDefinition,
-    handleClickAdd,
-    fixtureLocation,
-    addressableAreaId,
-    editableCutoutIds,
-    moduleModel,
-  } = props
-
-  const standardSlotCutout = deckDefinition.locations.cutouts.find(
-    cutout => cutout.id === fixtureLocation
-  )
-
-  const isAllowedOnSlot = moduleModel
-    ? isModuleAllowedOnAA(fixtureLocation, addressableAreaId, moduleModel)
-    : true
-  /**
-   * deck definition cutout position is the position of the single slot located within that cutout
-   * so, to get the position of the cutout itself we must add an adjustment to the slot position
-   * the adjustment for x is different for right side/left side
-   */
-  const [xSlotPosition = 0, ySlotPosition = 0] =
-    standardSlotCutout?.position ?? []
-  const offsetVector = getAALocationForCutoutAndFixtureId(
-    addressableAreaId,
-    deckDefinition
-  )
-
-  const x =
-    xSlotPosition +
-    (SINGLE_LEFT_CUTOUTS.includes(fixtureLocation)
-      ? COLUMN_1_X_ADJUSTMENT
-      : COLUMN_DEFAULT_X_ADJUSTMENT) +
-    offsetVector[0]
-  const width = SINGLE_LEFT_CUTOUTS.includes(fixtureLocation)
-    ? COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH
-    : COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH
-  const y = ySlotPosition + Y_ADJUSTMENT
-
-  const disableButton =
-    !editableCutoutIds.includes(fixtureLocation) || !isAllowedOnSlot
-
-  return (
-    <RobotCoordsForeignObject
-      width={width}
-      height={FIXTURE_HEIGHT}
-      x={x}
-      y={y}
-      flexProps={{ flex: '1' }}
-      foreignObjectProps={{ flex: '1' }}
-    >
-      <Btn
-        css={EMPTY_CONFIG_STYLE}
-        onClick={() => {
-          handleClickAdd(fixtureLocation, addressableAreaId)
-        }}
-        height="100%"
-        data-testid={addressableAreaId}
-        disabled={disableButton}
-      >
-        {!disableButton && (
-          <Icon name="add-circle" color={COLORS.blue50} size={SPACING_4} />
-        )}
-      </Btn>
-    </RobotCoordsForeignObject>
-  )
-}
-
-const EMPTY_CONFIG_STYLE = css`
-  display: ${DISPLAY_FLEX};
-  align-items: ${ALIGN_CENTER};
-  justify-content: ${JUSTIFY_CENTER};
-  background-color: ${COLORS.blue30};
-  border: 4px dashed ${COLORS.blue50};
-  border-radius: ${BORDERS.borderRadius4};
-  width: 100%;
-
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    background-color: ${COLORS.blue35};
-  }
-
-  &:active {
-    border: 3px solid ${COLORS.blue50};
-    background-color: ${COLORS.blue40};
-  }
-
-  &:focus {
-    border: 3px solid ${COLORS.blue50};
-    background-color: ${COLORS.blue40};
-  }
-
-  &:hover {
-    background-color: ${COLORS.blue35};
-  }
-
-  &:disabled,
-  &.disabled {
-    background-color: ${COLORS.grey35};
-    color: ${COLORS.grey35};
-    box-shadow: none;
-    border-color: transparent;
-  }
-
-  &:focus-visible {
-    border: 3px solid ${COLORS.blue50};
-    background-color: ${COLORS.blue35};
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      background-color: ${COLORS.blue40};
-    }
-  }
-`

package/src/hardware-sim/DeckConfigurator/FlexStackerItem.tsx

@@ -1,110 +0,0 @@
-import { useTranslation } from 'react-i18next'
-
-import { getAALocationForCutoutAndFixtureId } from '@opentrons/shared-data'
-
-import { StyledText } from '../../atoms/StyledText/StyledText'
-import { COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { Btn } from '../../primitives'
-import { TYPOGRAPHY } from '../../ui-style-constants'
-import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
-import {
-  COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH,
-  CONFIG_STYLE_EDITABLE,
-  CONFIG_STYLE_READ_ONLY,
-  CONFIG_STYLE_SELECTED,
-  FIXTURE_HEIGHT,
-  STACKER_X_ADJUSTMENT,
-  Y_ADJUSTMENT,
-} from './constants'
-
-import type {
-  AddressableAreaNamesWithFakes,
-  CutoutFixtureIdsWithFakes,
-  CutoutId,
-  DeckCutout,
-  DeckDefinition,
-} from '@opentrons/shared-data'
-
-interface FlexStackerItemProps {
-  deckDefinition: DeckDefinition
-  fixtureLocation: CutoutId
-  cutoutFixtureId: CutoutFixtureIdsWithFakes
-  addressableAreaId: AddressableAreaNamesWithFakes
-  hasWasteChute: boolean
-  handleClickRemove?: (
-    fixtureLocation: CutoutId,
-    cutoutFixtureId: CutoutFixtureIdsWithFakes,
-    addressableAreaId: AddressableAreaNamesWithFakes
-  ) => void
-  selected?: boolean
-}
-
-export function FlexStackerItem(props: FlexStackerItemProps): JSX.Element {
-  const {
-    deckDefinition,
-    handleClickRemove,
-    fixtureLocation,
-    cutoutFixtureId,
-    hasWasteChute,
-    addressableAreaId,
-    selected = false,
-  } = props
-
-  const { t } = useTranslation('deck_configuration')
-  const cutoutDef = deckDefinition.locations.cutouts.find(
-    (cutout: DeckCutout) => cutout.id === fixtureLocation
-  )
-  let displayName = t('flex_stacker_display_name')
-  if (hasWasteChute) {
-    displayName = t('flex_stacker_waste_chute_display_name')
-  }
-
-  /**
-   * deck definition cutout position is the position of the single slot located within that cutout
-   * so, to get the position of the cutout itself we must add an adjustment to the slot position
-   * the adjustment for x is different for right side/left side
-   */
-  const [xSlotPosition = 0, ySlotPosition = 0] = cutoutDef?.position ?? []
-  const offsetVector = getAALocationForCutoutAndFixtureId(
-    addressableAreaId,
-    deckDefinition
-  )
-  const y = ySlotPosition + Y_ADJUSTMENT
-  const x = xSlotPosition + offsetVector[0] + STACKER_X_ADJUSTMENT
-
-  const editableStyle = selected ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE
-  const handleRemoveClick = (): void => {
-    if (handleClickRemove != null) {
-      handleClickRemove(fixtureLocation, cutoutFixtureId, addressableAreaId)
-    }
-  }
-  return (
-    <RobotCoordsForeignObject
-      width={COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH}
-      height={FIXTURE_HEIGHT}
-      x={x}
-      y={y}
-      flexProps={{ flex: '1' }}
-      foreignObjectProps={{ flex: '1' }}
-    >
-      <Btn
-        css={handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY}
-        cursor={handleClickRemove != null ? 'pointer' : 'default'}
-        onClick={handleRemoveClick}
-        height="100%"
-      >
-        <StyledText
-          oddStyle="smallBodyTextSemiBold"
-          desktopStyle="bodyDefaultSemiBold"
-          css={TYPOGRAPHY.smallBodyTextSemiBold}
-        >
-          {displayName}
-        </StyledText>
-        {handleClickRemove != null ? (
-          <Icon name="remove" color={COLORS.white} size="2rem" />
-        ) : null}
-      </Btn>
-    </RobotCoordsForeignObject>
-  )
-}

package/src/hardware-sim/DeckConfigurator/HeaterShakerItem.tsx

@@ -1,114 +0,0 @@
-import { useTranslation } from 'react-i18next'
-
-import { SINGLE_LEFT_CUTOUTS } from '@opentrons/shared-data'
-
-import { StyledText } from '../../atoms/StyledText/StyledText'
-import { COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { Btn } from '../../primitives'
-import { TYPOGRAPHY } from '../../ui-style-constants'
-import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
-import {
-  COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_1_X_ADJUSTMENT,
-  COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_DEFAULT_X_ADJUSTMENT,
-  CONFIG_STYLE_EDITABLE,
-  CONFIG_STYLE_READ_ONLY,
-  CONFIG_STYLE_SELECTED,
-  FIXTURE_HEIGHT,
-  Y_ADJUSTMENT,
-} from './constants'
-
-import type {
-  AddressableAreaNamesWithFakes,
-  CutoutFixtureIdsWithFakes,
-  CutoutId,
-  DeckDefinition,
-} from '@opentrons/shared-data'
-
-// TODO(BC, 2024-03-21): This component is almost identical to TemperatureModuleFixture, consider consolidating?
-
-interface HeaterShakerItemProps {
-  deckDefinition: DeckDefinition
-  fixtureLocation: CutoutId
-  cutoutFixtureId: CutoutFixtureIdsWithFakes
-  addressableAreaId: AddressableAreaNamesWithFakes
-  handleClickRemove?: (
-    fixtureLocation: CutoutId,
-    cutoutFixtureId: CutoutFixtureIdsWithFakes,
-    addressableAreaId: AddressableAreaNamesWithFakes
-  ) => void
-  selected?: boolean
-}
-
-export function HeaterShakerItem(props: HeaterShakerItemProps): JSX.Element {
-  const { t } = useTranslation('deck_configuration')
-
-  const {
-    deckDefinition,
-    handleClickRemove,
-    fixtureLocation,
-    cutoutFixtureId,
-    addressableAreaId,
-    selected = false,
-  } = props
-
-  const cutoutDef = deckDefinition.locations.cutouts.find(
-    cutout => cutout.id === fixtureLocation
-  )
-
-  /**
-   * deck definition cutout position is the position of the single slot located within that cutout
-   * so, to get the position of the cutout itself we must add an adjustment to the slot position
-   * the adjustment for x is different for right side/left side
-   */
-  const [xSlotPosition = 0, ySlotPosition = 0] = cutoutDef?.position ?? []
-
-  const isColumnOne = SINGLE_LEFT_CUTOUTS.includes(fixtureLocation)
-  const xAdjustment = isColumnOne
-    ? COLUMN_1_X_ADJUSTMENT
-    : COLUMN_DEFAULT_X_ADJUSTMENT
-  const x = xSlotPosition + xAdjustment
-
-  const y = ySlotPosition + Y_ADJUSTMENT
-
-  const editableStyle = selected ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE
-  const handleRemoveClick = (): void => {
-    if (handleClickRemove != null) {
-      handleClickRemove(fixtureLocation, cutoutFixtureId, addressableAreaId)
-    }
-  }
-  return (
-    <RobotCoordsForeignObject
-      width={
-        isColumnOne
-          ? COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH
-          : COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH
-      }
-      height={FIXTURE_HEIGHT}
-      x={x}
-      y={y}
-      flexProps={{ flex: '1' }}
-      foreignObjectProps={{ flex: '1' }}
-    >
-      <Btn
-        css={handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY}
-        cursor={handleClickRemove != null ? 'pointer' : 'default'}
-        onClick={handleRemoveClick}
-        height="100%"
-      >
-        <StyledText
-          oddStyle="smallBodyTextSemiBold"
-          desktopStyle="bodyDefaultSemiBold"
-          css={TYPOGRAPHY.smallBodyTextSemiBold}
-        >
-          {t('heater_Shaker')}
-        </StyledText>
-        {handleClickRemove != null ? (
-          <Icon name="remove" color={COLORS.white} size="2rem" />
-        ) : null}
-      </Btn>
-    </RobotCoordsForeignObject>
-  )
-}

package/src/hardware-sim/DeckConfigurator/MagneticBlockItem.tsx

@@ -1,113 +0,0 @@
-import { useTranslation } from 'react-i18next'
-
-import { SINGLE_LEFT_CUTOUTS } from '@opentrons/shared-data'
-
-import { StyledText } from '../../atoms/StyledText/StyledText'
-import { COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { Btn } from '../../primitives'
-import { TYPOGRAPHY } from '../../ui-style-constants'
-import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
-import {
-  COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_1_X_ADJUSTMENT,
-  COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_DEFAULT_X_ADJUSTMENT,
-  CONFIG_STYLE_EDITABLE,
-  CONFIG_STYLE_READ_ONLY,
-  CONFIG_STYLE_SELECTED,
-  FIXTURE_HEIGHT,
-  Y_ADJUSTMENT,
-} from './constants'
-
-import type {
-  AddressableAreaNamesWithFakes,
-  CutoutFixtureIdsWithFakes,
-  CutoutId,
-  DeckDefinition,
-} from '@opentrons/shared-data'
-
-interface MagneticBlockItemProps {
-  deckDefinition: DeckDefinition
-  fixtureLocation: CutoutId
-  cutoutFixtureId: CutoutFixtureIdsWithFakes
-  addressableAreaId: AddressableAreaNamesWithFakes
-  handleClickRemove?: (
-    fixtureLocation: CutoutId,
-    cutoutFixtureId: CutoutFixtureIdsWithFakes,
-    addressableAreaId: AddressableAreaNamesWithFakes
-  ) => void
-  hasStagingArea?: boolean
-  selected?: boolean
-}
-
-export function MagneticBlockItem(props: MagneticBlockItemProps): JSX.Element {
-  const { t } = useTranslation('deck_configuration')
-
-  const {
-    deckDefinition,
-    fixtureLocation,
-    handleClickRemove,
-    cutoutFixtureId,
-    addressableAreaId,
-    selected = false,
-  } = props
-
-  const standardSlotCutout = deckDefinition.locations.cutouts.find(
-    cutout => cutout.id === fixtureLocation
-  )
-
-  /**
-   * deck definition cutout position is the position of the single slot located within that cutout
-   * so, to get the position of the cutout itself we must add an adjustment to the slot position
-   * the adjustment for x is different for right side/left side
-   */
-  const [xSlotPosition = 0, ySlotPosition = 0] =
-    standardSlotCutout?.position ?? []
-  const x =
-    xSlotPosition +
-    (SINGLE_LEFT_CUTOUTS.includes(fixtureLocation)
-      ? COLUMN_1_X_ADJUSTMENT
-      : COLUMN_DEFAULT_X_ADJUSTMENT)
-  const width = SINGLE_LEFT_CUTOUTS.includes(fixtureLocation)
-    ? COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH
-    : COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH
-
-  const y = ySlotPosition + Y_ADJUSTMENT
-
-  const editableStyle = selected ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE
-  const handleRemoveClick = (): void => {
-    if (handleClickRemove != null) {
-      handleClickRemove(fixtureLocation, cutoutFixtureId, addressableAreaId)
-    }
-  }
-  return (
-    <RobotCoordsForeignObject
-      width={width}
-      height={FIXTURE_HEIGHT}
-      x={x}
-      y={y}
-      flexProps={{ flex: '1' }}
-      foreignObjectProps={{ flex: '1' }}
-    >
-      <Btn
-        css={handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY}
-        cursor={handleClickRemove != null ? 'pointer' : 'default'}
-        onClick={handleRemoveClick}
-        height="100%"
-        data-testid={addressableAreaId}
-      >
-        <StyledText
-          oddStyle="smallBodyTextSemiBold"
-          desktopStyle="bodyDefaultSemiBold"
-          css={TYPOGRAPHY.smallBodyTextSemiBold}
-        >
-          {t('mag_block')}
-        </StyledText>
-        {handleClickRemove != null ? (
-          <Icon name="remove" color={COLORS.white} size="2rem" />
-        ) : null}
-      </Btn>
-    </RobotCoordsForeignObject>
-  )
-}