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

package/src/hardware-sim/DeckConfigurator/{FlexStackerFixture.tsx → AbsorbanceReaderItem.tsx}

@@ -1,61 +1,58 @@
+import { useTranslation } from 'react-i18next'
+
+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 { COLORS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
 import {
-  COLUMN_3_X_ADJUSTMENT,
+  COLUMN_DEFAULT_X_ADJUSTMENT,
   CONFIG_STYLE_EDITABLE,
   CONFIG_STYLE_READ_ONLY,
+  CONFIG_STYLE_SELECTED,
   FIXTURE_HEIGHT,
-  STAGING_AREA_FIXTURE_WIDTH,
+  LARGE_SINGLE_ITEM_SLOT_WIDTH,
   Y_ADJUSTMENT,
-  CONFIG_STYLE_SELECTED,
 } from './constants'
 
 import type {
-  CutoutFixtureId,
+  AddressableAreaNamesWithFakes,
+  CutoutFixtureIdsWithFakes,
   CutoutId,
   DeckDefinition,
 } from '@opentrons/shared-data'
 
-interface FlexStackerFixtureProps {
+interface AbsorbanceReaderItemProps {
   deckDefinition: DeckDefinition
   fixtureLocation: CutoutId
-  cutoutFixtureId: CutoutFixtureId
-  hasWasteChute: boolean
+  cutoutFixtureId: CutoutFixtureIdsWithFakes
+  addressableAreaId: AddressableAreaNamesWithFakes
   handleClickRemove?: (
     fixtureLocation: CutoutId,
-    cutoutFixtureId: CutoutFixtureId
+    cutoutFixtureId: CutoutFixtureIdsWithFakes,
+    addressableAreaId: AddressableAreaNamesWithFakes
   ) => void
   selected?: boolean
 }
 
-const FLEX_STACKER_FIXTURE_DISPLAY_NAME = 'Stacker'
-const FLEX_STACKER_WASTE_CHUTE_DISPLAY_NAME = 'Stacker + Waste chute'
-const FLEX_STACKER_MAG_BLOCK_DISPLAY_NAME = 'Stacker + Mag Block'
-
-export function FlexStackerFixture(
-  props: FlexStackerFixtureProps
+export function AbsorbanceReaderItem(
+  props: AbsorbanceReaderItemProps
 ): JSX.Element {
+  const { t } = useTranslation('deck_configuration')
+
   const {
     deckDefinition,
     handleClickRemove,
     fixtureLocation,
     cutoutFixtureId,
-    hasWasteChute,
+    addressableAreaId,
     selected = false,
   } = props
 
   const cutoutDef = deckDefinition.locations.cutouts.find(
     cutout => cutout.id === fixtureLocation
   )
-  let displayName = FLEX_STACKER_FIXTURE_DISPLAY_NAME
-  if (hasWasteChute) {
-    displayName = FLEX_STACKER_WASTE_CHUTE_DISPLAY_NAME
-  } else if (cutoutFixtureId === 'flexStackerModuleV1WithMagneticBlockV1') {
-    displayName = FLEX_STACKER_MAG_BLOCK_DISPLAY_NAME
-  }
 
   /**
    * deck definition cutout position is the position of the single slot located within that cutout
@@ -64,14 +61,19 @@ export function FlexStackerFixture(
    */
   const [xSlotPosition = 0, ySlotPosition = 0] = cutoutDef?.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, addressableAreaId)
+    }
+  }
   return (
     <RobotCoordsForeignObject
-      width={STAGING_AREA_FIXTURE_WIDTH}
+      width={LARGE_SINGLE_ITEM_SLOT_WIDTH}
       height={FIXTURE_HEIGHT}
       x={x}
       y={y}
@@ -81,15 +83,16 @@ export function FlexStackerFixture(
       <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}>{displayName}</Text>
+        <StyledText
+          oddStyle="smallBodyTextSemiBold"
+          desktopStyle="bodyDefaultSemiBold"
+          css={TYPOGRAPHY.smallBodyTextSemiBold}
+        >
+          {t('absorbance')}
+        </StyledText>
         {handleClickRemove != null ? (
           <Icon name="remove" color={COLORS.white} size="2rem" />
         ) : null}

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

@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import {
   SINGLE_CENTER_SLOT_FIXTURE,
   SINGLE_LEFT_SLOT_FIXTURE,
@@ -10,7 +8,8 @@ import {
 
 import { DeckConfigurator } from '.'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 import type { CutoutConfig } from '@opentrons/shared-data'
 
 export default {

package/src/hardware-sim/DeckConfigurator/{EmptyConfigFixture.tsx → EmptyConfigItem.tsx}

@@ -1,39 +1,67 @@
 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 } from '../../styles'
+import {
+  ALIGN_CENTER,
+  DISPLAY_FLEX,
+  JUSTIFY_CENTER,
+  SPACING_4,
+} from '../../styles'
 import { RESPONSIVENESS } from '../../ui-style-constants'
-import { BORDERS, COLORS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
 import {
   COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_2_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
   COLUMN_1_X_ADJUSTMENT,
-  COLUMN_2_X_ADJUSTMENT,
-  COLUMN_3_X_ADJUSTMENT,
+  COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH,
+  COLUMN_DEFAULT_X_ADJUSTMENT,
   FIXTURE_HEIGHT,
   Y_ADJUSTMENT,
 } from './constants'
 
-import type { CutoutId, DeckDefinition } from '@opentrons/shared-data'
+import type {
+  AddressableAreaNamesWithFakes,
+  CutoutId,
+  DeckDefinition,
+  ModuleModel,
+} from '@opentrons/shared-data'
 
-interface EmptyConfigFixtureProps {
+interface EmptyConfigItemProps {
   deckDefinition: DeckDefinition
   fixtureLocation: CutoutId
-  handleClickAdd: (fixtureLocation: CutoutId) => void
+  addressableAreaId: AddressableAreaNamesWithFakes
+  editableCutoutIds: CutoutId[]
+  moduleModel?: ModuleModel
+  handleClickAdd: (
+    fixtureLocation: CutoutId,
+    addressableArea: AddressableAreaNamesWithFakes
+  ) => void
 }
 
-export function EmptyConfigFixture(
-  props: EmptyConfigFixtureProps
-): JSX.Element {
-  const { deckDefinition, handleClickAdd, fixtureLocation } = props
+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
@@ -41,37 +69,25 @@ export function EmptyConfigFixture(
    */
   const [xSlotPosition = 0, ySlotPosition = 0] =
     standardSlotCutout?.position ?? []
-  let x = xSlotPosition
-  let width = 0
-  switch (fixtureLocation) {
-    case 'cutoutA1':
-    case 'cutoutB1':
-    case 'cutoutC1':
-    case 'cutoutD1': {
-      x = xSlotPosition + COLUMN_1_X_ADJUSTMENT
-      width = COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH
-      break
-    }
-    case 'cutoutA2':
-    case 'cutoutB2':
-    case 'cutoutC2':
-    case 'cutoutD2': {
-      x = xSlotPosition + COLUMN_2_X_ADJUSTMENT
-      width = COLUMN_2_SINGLE_SLOT_FIXTURE_WIDTH
-      break
-    }
-    case 'cutoutA3':
-    case 'cutoutB3':
-    case 'cutoutC3':
-    case 'cutoutD3': {
-      x = xSlotPosition + COLUMN_3_X_ADJUSTMENT
-      width = COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH
-      break
-    }
-  }
+  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}
@@ -84,10 +100,15 @@ export function EmptyConfigFixture(
       <Btn
         css={EMPTY_CONFIG_STYLE}
         onClick={() => {
-          handleClickAdd(fixtureLocation)
+          handleClickAdd(fixtureLocation, addressableAreaId)
         }}
+        height="100%"
+        data-testid={addressableAreaId}
+        disabled={disableButton}
       >
-        <Icon name="add" color={COLORS.blue50} size="2rem" />
+        {!disableButton && (
+          <Icon name="add-circle" color={COLORS.blue50} size={SPACING_4} />
+        )}
       </Btn>
     </RobotCoordsForeignObject>
   )
@@ -98,7 +119,7 @@ const EMPTY_CONFIG_STYLE = css`
   align-items: ${ALIGN_CENTER};
   justify-content: ${JUSTIFY_CENTER};
   background-color: ${COLORS.blue30};
-  border: 3px dashed ${COLORS.blue50};
+  border: 4px dashed ${COLORS.blue50};
   border-radius: ${BORDERS.borderRadius4};
   width: 100%;
 
@@ -120,6 +141,14 @@ const EMPTY_CONFIG_STYLE = css`
     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};

package/src/hardware-sim/DeckConfigurator/{AbsorbanceReaderFixture.tsx → FlexStackerItem.tsx}

@@ -1,51 +1,64 @@
+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, Text } from '../../primitives'
+import { Btn } from '../../primitives'
 import { TYPOGRAPHY } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
 import {
-  COLUMN_3_X_ADJUSTMENT,
+  COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH,
   CONFIG_STYLE_EDITABLE,
   CONFIG_STYLE_READ_ONLY,
+  CONFIG_STYLE_SELECTED,
   FIXTURE_HEIGHT,
-  STAGING_AREA_FIXTURE_WIDTH,
+  STACKER_X_ADJUSTMENT,
   Y_ADJUSTMENT,
-  CONFIG_STYLE_SELECTED,
 } from './constants'
 
 import type {
-  CutoutFixtureId,
+  AddressableAreaNamesWithFakes,
+  CutoutFixtureIdsWithFakes,
   CutoutId,
+  DeckCutout,
   DeckDefinition,
 } from '@opentrons/shared-data'
 
-interface AbsorbanceReaderFixtureProps {
+interface FlexStackerItemProps {
   deckDefinition: DeckDefinition
   fixtureLocation: CutoutId
-  cutoutFixtureId: CutoutFixtureId
+  cutoutFixtureId: CutoutFixtureIdsWithFakes
+  addressableAreaId: AddressableAreaNamesWithFakes
+  hasWasteChute: boolean
   handleClickRemove?: (
     fixtureLocation: CutoutId,
-    cutoutFixtureId: CutoutFixtureId
+    cutoutFixtureId: CutoutFixtureIdsWithFakes,
+    addressableAreaId: AddressableAreaNamesWithFakes
   ) => void
   selected?: boolean
 }
 
-const ABSORBANCE_READER_FIXTURE_DISPLAY_NAME = 'Absorbance'
-
-export function AbsorbanceReaderFixture(
-  props: AbsorbanceReaderFixtureProps
-): JSX.Element {
+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 => cutout.id === fixtureLocation
+    (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
@@ -53,15 +66,22 @@ export function AbsorbanceReaderFixture(
    * the adjustment for x is different for right side/left side
    */
   const [xSlotPosition = 0, ySlotPosition = 0] = cutoutDef?.position ?? []
-
-  const x = xSlotPosition + COLUMN_3_X_ADJUSTMENT
-
+  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={STAGING_AREA_FIXTURE_WIDTH}
+      width={COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH}
       height={FIXTURE_HEIGHT}
       x={x}
       y={y}
@@ -71,17 +91,16 @@ export function AbsorbanceReaderFixture(
       <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}>
-          {ABSORBANCE_READER_FIXTURE_DISPLAY_NAME}
-        </Text>
+        <StyledText
+          oddStyle="smallBodyTextSemiBold"
+          desktopStyle="bodyDefaultSemiBold"
+          css={TYPOGRAPHY.smallBodyTextSemiBold}
+        >
+          {displayName}
+        </StyledText>
         {handleClickRemove != null ? (
           <Icon name="remove" color={COLORS.white} size="2rem" />
         ) : null}

package/src/hardware-sim/DeckConfigurator/{HeaterShakerFixture.tsx → HeaterShakerItem.tsx}

@@ -1,48 +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 { COLORS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
 import {
+  COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH,
   COLUMN_1_X_ADJUSTMENT,
-  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,
-  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
   Y_ADJUSTMENT,
-  CONFIG_STYLE_SELECTED,
 } from './constants'
 
 import type {
-  CutoutFixtureId,
+  AddressableAreaNamesWithFakes,
+  CutoutFixtureIdsWithFakes,
   CutoutId,
   DeckDefinition,
 } from '@opentrons/shared-data'
 
 // TODO(BC, 2024-03-21): This component is almost identical to TemperatureModuleFixture, consider consolidating?
 
-interface HeaterShakerFixtureProps {
+interface HeaterShakerItemProps {
   deckDefinition: DeckDefinition
   fixtureLocation: CutoutId
-  cutoutFixtureId: CutoutFixtureId
+  cutoutFixtureId: CutoutFixtureIdsWithFakes
+  addressableAreaId: AddressableAreaNamesWithFakes
   handleClickRemove?: (
     fixtureLocation: CutoutId,
-    cutoutFixtureId: CutoutFixtureId
+    cutoutFixtureId: CutoutFixtureIdsWithFakes,
+    addressableAreaId: AddressableAreaNamesWithFakes
   ) => void
   selected?: boolean
 }
 
-const HEATER_SHAKER_MODULE_FIXTURE_DISPLAY_NAME = 'Heater-Shaker'
+export function HeaterShakerItem(props: HeaterShakerItemProps): JSX.Element {
+  const { t } = useTranslation('deck_configuration')
 
-export function HeaterShakerFixture(
-  props: HeaterShakerFixtureProps
-): JSX.Element {
   const {
     deckDefinition,
     handleClickRemove,
     fixtureLocation,
     cutoutFixtureId,
+    addressableAreaId,
     selected = false,
   } = props
 
@@ -57,22 +65,27 @@ export function HeaterShakerFixture(
    */
   const [xSlotPosition = 0, ySlotPosition = 0] = cutoutDef?.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
+          : COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH
+      }
       height={FIXTURE_HEIGHT}
       x={x}
       y={y}
@@ -82,17 +95,16 @@ export function HeaterShakerFixture(
       <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}>
-          {HEATER_SHAKER_MODULE_FIXTURE_DISPLAY_NAME}
-        </Text>
+        <StyledText
+          oddStyle="smallBodyTextSemiBold"
+          desktopStyle="bodyDefaultSemiBold"
+          css={TYPOGRAPHY.smallBodyTextSemiBold}
+        >
+          {t('heater_Shaker')}
+        </StyledText>
         {handleClickRemove != null ? (
           <Icon name="remove" color={COLORS.white} size="2rem" />
         ) : null}