@opentrons/components 0.1.7-alpha.1 → 0.2.0-alpha.0

package/src/hardware-sim/DeckConfigurator/{TrashBinConfigFixture.tsx → TrashBinConfigItem.tsx}

@@ -1,45 +1,56 @@
+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, Text } from '../../primitives'
+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_3_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_3_X_ADJUSTMENT,
+  COLUMN_DEFAULT_X_ADJUSTMENT,
   CONFIG_STYLE_EDITABLE,
   CONFIG_STYLE_READ_ONLY,
   CONFIG_STYLE_SELECTED,
   FIXTURE_HEIGHT,
-  TRASH_BIN_DISPLAY_NAME,
+  LARGE_SINGLE_ITEM_SLOT_WIDTH,
   Y_ADJUSTMENT,
 } from './constants'
 
 import type {
-  CutoutFixtureId,
+  AddressableAreaNamesWithFakes,
+  CutoutFixtureIdsWithFakes,
   CutoutId,
   DeckDefinition,
 } from '@opentrons/shared-data'
 
-interface TrashBinConfigFixtureProps {
+interface TrashBinConfigItemProps {
   deckDefinition: DeckDefinition
   fixtureLocation: CutoutId
-  cutoutFixtureId: CutoutFixtureId
+  cutoutFixtureId: CutoutFixtureIdsWithFakes
+  addressableAreaId: AddressableAreaNamesWithFakes
   handleClickRemove?: (
     fixtureLocation: CutoutId,
-    cutoutFixtureId: CutoutFixtureId
+    cutoutFixtureId: CutoutFixtureIdsWithFakes,
+    addressableAreaId: AddressableAreaNamesWithFakes
   ) => void
   selected?: boolean
 }
 
-export function TrashBinConfigFixture(
-  props: TrashBinConfigFixtureProps
+export function TrashBinConfigItem(
+  props: TrashBinConfigItemProps
 ): JSX.Element {
+  const { t } = useTranslation('deck_configuration')
+
   const {
     deckDefinition,
     handleClickRemove,
     fixtureLocation,
     cutoutFixtureId,
+    addressableAreaId,
     selected = false,
   } = props
 
@@ -54,22 +65,27 @@ export function TrashBinConfigFixture(
    */
   const [xSlotPosition = 0, ySlotPosition = 0] = trashBinCutout?.position ?? []
 
-  const isColumnOne =
-    fixtureLocation === 'cutoutA1' ||
-    fixtureLocation === 'cutoutB1' ||
-    fixtureLocation === 'cutoutC1' ||
-    fixtureLocation === 'cutoutD1'
+  const isColumnOne = SINGLE_LEFT_CUTOUTS.includes(fixtureLocation)
   const xAdjustment = isColumnOne
     ? COLUMN_1_X_ADJUSTMENT
-    : COLUMN_3_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={COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH}
+      width={
+        isColumnOne
+          ? COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH
+          : LARGE_SINGLE_ITEM_SLOT_WIDTH
+      }
       height={FIXTURE_HEIGHT}
       x={x}
       y={y}
@@ -79,17 +95,16 @@ export function TrashBinConfigFixture(
       <Btn
         css={handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY}
         cursor={handleClickRemove != null ? 'pointer' : 'default'}
-        onClick={
-          handleClickRemove != null
-            ? () => {
-                handleClickRemove(fixtureLocation, cutoutFixtureId)
-              }
-            : () => {}
-        }
+        onClick={handleRemoveClick}
+        height="100%"
       >
-        <Text css={TYPOGRAPHY.smallBodyTextSemiBold}>
-          {TRASH_BIN_DISPLAY_NAME}
-        </Text>
+        <StyledText
+          oddStyle="smallBodyTextSemiBold"
+          desktopStyle="bodyDefaultSemiBold"
+          css={TYPOGRAPHY.smallBodyTextSemiBold}
+        >
+          {t('trash_bin')}
+        </StyledText>
         {handleClickRemove != null ? (
           <Icon name="remove" color={COLORS.white} size="2rem" />
         ) : null}

package/src/hardware-sim/DeckConfigurator/{WasteChuteConfigFixture.tsx → WasteChuteConfigItem.tsx}

@@ -1,47 +1,53 @@
+import { useTranslation } from 'react-i18next'
+
+import { DEFAULT_AA_FOR_WASTE_CHUTE } from '@opentrons/shared-data'
+
+import { StyledText } from '../../atoms/StyledText/StyledText'
 import { COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
-import { Btn, Text } from '../../primitives'
+import { Btn } from '../../primitives'
 import { TYPOGRAPHY } from '../../ui-style-constants'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
 import {
-  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_3_X_ADJUSTMENT,
+  COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH,
+  COLUMN_DEFAULT_X_ADJUSTMENT,
   CONFIG_STYLE_EDITABLE,
   CONFIG_STYLE_READ_ONLY,
   CONFIG_STYLE_SELECTED,
   FIXTURE_HEIGHT,
-  STAGING_AREA_FIXTURE_WIDTH,
-  WASTE_CHUTE_DISPLAY_NAME,
   Y_ADJUSTMENT,
 } from './constants'
 
 import type {
-  CutoutFixtureId,
+  AddressableAreaNamesWithFakes,
+  CutoutFixtureIdsWithFakes,
   CutoutId,
   DeckDefinition,
 } from '@opentrons/shared-data'
 
-interface WasteChuteConfigFixtureProps {
+interface WasteChuteConfigItemProps {
   deckDefinition: DeckDefinition
   fixtureLocation: CutoutId
-  cutoutFixtureId: CutoutFixtureId
+  cutoutFixtureId: CutoutFixtureIdsWithFakes
   handleClickRemove?: (
     fixtureLocation: CutoutId,
-    cutoutFixtureId: CutoutFixtureId
+    cutoutFixtureId: CutoutFixtureIdsWithFakes,
+    addressableAreaId: AddressableAreaNamesWithFakes
   ) => void
   hasStagingAreas?: boolean
   selected?: boolean
 }
 
 export function WasteChuteConfigFixture(
-  props: WasteChuteConfigFixtureProps
+  props: WasteChuteConfigItemProps
 ): JSX.Element {
+  const { t } = useTranslation('deck_configuration')
+
   const {
     deckDefinition,
     handleClickRemove,
     fixtureLocation,
     cutoutFixtureId,
-    hasStagingAreas = false,
     selected = false,
   } = props
 
@@ -56,17 +62,22 @@ export function WasteChuteConfigFixture(
   const [xSlotPosition = 0, ySlotPosition = 0] =
     wasteChuteCutout?.position ?? []
 
-  const x = xSlotPosition + COLUMN_3_X_ADJUSTMENT
+  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,
+        DEFAULT_AA_FOR_WASTE_CHUTE
+      )
+    }
+  }
   return (
     <RobotCoordsForeignObject
-      width={
-        hasStagingAreas
-          ? STAGING_AREA_FIXTURE_WIDTH
-          : COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH
-      }
+      width={COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH}
       height={FIXTURE_HEIGHT}
       x={x}
       y={y}
@@ -76,17 +87,17 @@ export function WasteChuteConfigFixture(
       <Btn
         css={handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY}
         cursor={handleClickRemove != null ? 'pointer' : 'default'}
-        onClick={
-          handleClickRemove != null
-            ? () => {
-                handleClickRemove(fixtureLocation, cutoutFixtureId)
-              }
-            : () => {}
-        }
+        onClick={handleRemoveClick}
+        height="100%"
       >
-        <Text css={TYPOGRAPHY.smallBodyTextSemiBold}>
-          {WASTE_CHUTE_DISPLAY_NAME}
-        </Text>
+        <StyledText
+          oddStyle="smallBodyTextSemiBold"
+          desktopStyle="bodyDefaultSemiBold"
+          css={TYPOGRAPHY.smallBodyTextSemiBold}
+        >
+          {t('waste')}
+        </StyledText>
+
         {handleClickRemove != null ? (
           <Icon name="remove" color={COLORS.white} size="2rem" />
         ) : null}

package/src/hardware-sim/DeckConfigurator/constants.ts

@@ -11,19 +11,15 @@ import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 export const FIXTURE_HEIGHT = 102.0
 export const THERMOCYCLER_FIXTURE_HEIGHT = 290.0
 export const COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH = 243.5
-export const COLUMN_2_SINGLE_SLOT_FIXTURE_WIDTH = 159.0
-export const COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH = 243.5
-export const STAGING_AREA_FIXTURE_WIDTH = 314.5
+export const COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH = 159.0
+export const LARGE_SINGLE_ITEM_SLOT_WIDTH = 250
+export const THERMOCYCLER_FIXTURE_WIDTH = 243.5
 
 export const COLUMN_1_X_ADJUSTMENT = -100
-export const COLUMN_2_X_ADJUSTMENT = -15.5
-export const COLUMN_3_X_ADJUSTMENT = -15.5
+export const COLUMN_DEFAULT_X_ADJUSTMENT = -15.5
+export const STACKER_X_ADJUSTMENT = -12.5
 export const Y_ADJUSTMENT = -8
 
-export const STAGING_AREA_DISPLAY_NAME = 'Staging area'
-export const TRASH_BIN_DISPLAY_NAME = 'Trash bin'
-export const WASTE_CHUTE_DISPLAY_NAME = 'Waste chute'
-
 // common config styles for staging area, trash bin, waste chute
 export const CONFIG_STYLE_READ_ONLY = css`
   display: ${DISPLAY_FLEX};