@opentrons/components 0.1.6-alpha.2 → 0.1.6-alpha.20

package/src/icons/index.ts

@@ -0,0 +1,6 @@
+// icons icons icons!
+
+export * from './Icon'
+export * from './NotificationIcon'
+export * from './ModuleIcon'
+export * from './icon-data'

package/src/images/index.ts

@@ -0,0 +1 @@
+export * from './labware'

package/src/images/labware/index.ts

@@ -0,0 +1 @@
+export * from './measurement-guide'

package/src/images/labware/measurement-guide/index.ts

@@ -0,0 +1,272 @@
+export interface DiagramProps {
+  guideType?: string
+  category?: string
+  insertCategory?: string
+  shape?: string
+  wellBottomShape?: string
+  guideVisible?: boolean
+  irregular?: boolean
+  isMultiRow?: boolean
+}
+
+type Diagrams = Record<string, string[]>
+
+const FOOTPRINT_IMAGE_RELATIVE_PATH = './images/dimensions/footprint@3x.png'
+const DIMENSIONS_HEIGHT_PLATE_IMAGE_RELATIVE_PATH =
+  './images/dimensions/height-plate-and-reservoir@3x.png'
+const DIMENSIONS_HEIGHT_TIP_RACK_IMAGE_RELATIVE_PATH =
+  './images/dimensions/height-tip-rack@3x.png'
+
+const DIMENSIONS_HEIGHT_TUBE_RACK_IMAGE_RELATIVE_PATH =
+  './images/dimensions/height-tube-rack@3x.png'
+
+const DIMENSIONS_HEIGHT_TUBE_RACK_IMAGE_IRREGULAR_RELATIVE_PATH =
+  './images/dimensions/height-tube-rack-irregular@3x.png'
+
+const HEIGHT_ALUM_BLOCK_TUBES_IMAGE_RELATIVE_PATH =
+  './images/dimensions/height-alum-block-tubes@3x.png'
+
+const HEIGHT_ALUM_BLOCK_PLATE_IMAGE_RELATIVE_PATH =
+  './images/dimensions/height-alum-block-plate@3x.png'
+
+const OFFSET_RESEVOIR_IMAGE_RELATIVE_PATH =
+  './images/offset/offset-reservoir@3x.png'
+
+const SPACING_RESEVOIR_IMAGE_RELATIVE_PATH =
+  './images/spacing/spacing-reservoir@3x.png'
+
+const SPACING_RESEVOIR_MULTI_ROW_IMAGE_RELATIVE_PATH =
+  './images/spacing/spacing-reservoir-multi-row@3x.png'
+
+const OFFSET_WELL_CIRCULAR_IMAGE_RELATIVE_PATH =
+  './images/offset/offset-well-circular@3x.png'
+
+const SPACING_WELL_CIRCULAR_IMAGE_RELATIVE_PATH =
+  './images/spacing/spacing-well-circular@3x.png'
+
+const OFFSET_WELL_RECTANGULAR_IMAGE_RELATIVE_PATH =
+  './images/offset/offset-well-rectangular@3x.png'
+
+const SPACING_WELL_RECTANGULAR_IMAGE_RELATIVE_PATH =
+  './images/spacing/spacing-well-rectangular@3x.png'
+
+const DEPTH_LENGTH_TIP_RACK_IMAGE_RELATIVE_PATH =
+  './images/depth/length-tip-rack@3x.png'
+
+const SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH =
+  './images/shape/shape-circular@3x.png'
+
+const DEPTH_PLATE_FLAT_IMAGE_RELATIVE_PATH =
+  './images/depth/depth-plate-flat@3x.png'
+
+const SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH =
+  './images/shape/shape-rectangular@3x.png'
+
+const DEPTH_PLATE_ROUND_IMAGE_RELATIVE_PATH =
+  './images/depth/depth-plate-round@3x.png'
+
+const DEPTH_PLATE_V_SHAPE_IMAGE_RELATIVE_PATH =
+  './images/depth/depth-plate-v@3x.png'
+
+const DEPTH_RESEVOIR_AND_TUBES_FLAT_IMAGE_RELATIVE_PATH =
+  './images/depth/depth-reservoir-and-tubes-flat@3x.png'
+
+const DEPTH_RESEVOIR_AND_TUBES_ROUND_IMAGE_RELATIVE_PATH =
+  './images/depth/depth-reservoir-and-tubes-round@3x.png'
+
+const DEPTH_RESEVOIR_AND_TUBES_V_SHAPE_IMAGE_RELATIVE_PATH =
+  './images/depth/depth-reservoir-and-tubes-v@3x.png'
+
+const FOOTPRINT_DIAGRAMS: Diagrams = {
+  wellPlate: [
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_PLATE_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  ],
+  tipRack: [
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_TIP_RACK_IMAGE_RELATIVE_PATH, import.meta.url)
+      .href,
+  ],
+  tubeRack: [
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_TUBE_RACK_IMAGE_RELATIVE_PATH, import.meta.url)
+      .href,
+  ],
+  reservoir: [
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_PLATE_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  ],
+  irregular: [
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(
+      DIMENSIONS_HEIGHT_TUBE_RACK_IMAGE_IRREGULAR_RELATIVE_PATH,
+      import.meta.url
+    ).href,
+  ],
+  adapter: [
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_PLATE_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  ],
+  lid: [
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_PLATE_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  ],
+}
+
+const ALUM_BLOCK_FOOTPRINTS: Diagrams = {
+  tubeRack: [
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(HEIGHT_ALUM_BLOCK_TUBES_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  ],
+  wellPlate: [
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(HEIGHT_ALUM_BLOCK_PLATE_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  ],
+}
+
+const RESERVOIR_SPACING_DIAGRAMS: Diagrams = {
+  singleRow: [
+    new URL(OFFSET_RESEVOIR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(SPACING_RESEVOIR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  ],
+  multiRow: [
+    new URL(OFFSET_RESEVOIR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(SPACING_RESEVOIR_MULTI_ROW_IMAGE_RELATIVE_PATH, import.meta.url)
+      .href,
+  ],
+}
+
+const SPACING_DIAGRAMS: Diagrams = {
+  circular: [
+    new URL(OFFSET_WELL_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(SPACING_WELL_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  ],
+  rectangular: [
+    new URL(OFFSET_WELL_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(SPACING_WELL_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  ],
+}
+
+const TIPRACK_MEASUREMENT_DIAGRAMS: string[] = [
+  new URL(DEPTH_LENGTH_TIP_RACK_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+]
+
+type NestedDiagrams = Record<string, Record<string, string[]>>
+
+const PLATE_MEASUREMENT_DIAGRAMS: NestedDiagrams = {
+  flat: {
+    circular: [
+      new URL(DEPTH_PLATE_FLAT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+    rectangular: [
+      new URL(DEPTH_PLATE_FLAT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+  },
+  u: {
+    circular: [
+      new URL(DEPTH_PLATE_ROUND_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+    rectangular: [
+      new URL(DEPTH_PLATE_ROUND_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+  },
+  v: {
+    circular: [
+      new URL(DEPTH_PLATE_V_SHAPE_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+    rectangular: [
+      new URL(DEPTH_PLATE_V_SHAPE_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+  },
+}
+const MEASUREMENT_DIAGRAMS: NestedDiagrams = {
+  flat: {
+    circular: [
+      new URL(
+        DEPTH_RESEVOIR_AND_TUBES_FLAT_IMAGE_RELATIVE_PATH,
+        import.meta.url
+      ).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+    rectangular: [
+      new URL(
+        DEPTH_RESEVOIR_AND_TUBES_FLAT_IMAGE_RELATIVE_PATH,
+        import.meta.url
+      ).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+  },
+  u: {
+    circular: [
+      new URL(
+        DEPTH_RESEVOIR_AND_TUBES_ROUND_IMAGE_RELATIVE_PATH,
+        import.meta.url
+      ).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+    rectangular: [
+      new URL(
+        DEPTH_RESEVOIR_AND_TUBES_ROUND_IMAGE_RELATIVE_PATH,
+        import.meta.url
+      ).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+  },
+  v: {
+    circular: [
+      new URL(
+        DEPTH_RESEVOIR_AND_TUBES_V_SHAPE_IMAGE_RELATIVE_PATH,
+        import.meta.url
+      ).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+    rectangular: [
+      new URL(
+        DEPTH_RESEVOIR_AND_TUBES_V_SHAPE_IMAGE_RELATIVE_PATH,
+        import.meta.url
+      ).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+  },
+}
+
+export function getFootprintDiagram(props: DiagramProps): string[] {
+  const { category, insertCategory, irregular } = props
+  if (category === 'aluminumBlock') {
+    return insertCategory ? ALUM_BLOCK_FOOTPRINTS[insertCategory] : []
+  } else if (category === 'tubeRack' && irregular) {
+    return FOOTPRINT_DIAGRAMS.irregular
+  }
+  return category ? FOOTPRINT_DIAGRAMS[category] : []
+}
+
+export function getSpacingDiagram(props: DiagramProps): string[] {
+  const { category, isMultiRow, shape } = props
+  if (category === 'reservoir') {
+    return isMultiRow
+      ? RESERVOIR_SPACING_DIAGRAMS.multiRow
+      : RESERVOIR_SPACING_DIAGRAMS.singleRow
+  }
+
+  return shape ? SPACING_DIAGRAMS[shape] : []
+}
+
+export function getMeasurementDiagram(props: DiagramProps): string[] {
+  const { category, wellBottomShape, shape } = props
+  if (category === 'tipRack') return TIPRACK_MEASUREMENT_DIAGRAMS
+  else if (category === 'wellPlate') {
+    return wellBottomShape && shape
+      ? PLATE_MEASUREMENT_DIAGRAMS[wellBottomShape][shape]
+      : []
+  }
+  return wellBottomShape && shape
+    ? MEASUREMENT_DIAGRAMS[wellBottomShape][shape]
+    : []
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { ProtocolDeck } from './hardware-sim/ProtocolDeck'
+export { LabwareRender } from './hardware-sim/Labware'

package/src/instrument/InstrumentDiagram.stories.tsx

@@ -0,0 +1,42 @@
+import type * as React from 'react'
+import keyBy from 'lodash/keyBy'
+import { getAllPipetteNames, getPipetteNameSpecs } from '@opentrons/shared-data'
+
+import { InstrumentDiagram as InstrumentDiagramComponent } from './InstrumentDiagram'
+
+import type { Story, Meta } from '@storybook/react'
+
+const allPipetteSpecsByDisplayNames = keyBy(
+  getAllPipetteNames().map(getPipetteNameSpecs),
+  'displayName'
+)
+
+export default {
+  title: 'Library/Organisms/Instrument Diagram',
+  argTypes: {
+    mount: {
+      control: {
+        type: 'select',
+        options: ['left', 'right'],
+      },
+      defaultValue: 'left',
+    },
+    pipetteSpecs: {
+      control: {
+        type: 'select',
+        options: Object.keys(allPipetteSpecsByDisplayNames),
+      },
+      defaultValue: Object.keys(allPipetteSpecsByDisplayNames)[0],
+    },
+  },
+} as Meta
+
+const Template: Story<
+  React.ComponentProps<typeof InstrumentDiagramComponent>
+> = ({ pipetteSpecs, ...args }) => (
+  <InstrumentDiagramComponent
+    {...args}
+    pipetteSpecs={allPipetteSpecsByDisplayNames[pipetteSpecs]}
+  />
+)
+export const InstrumentDiagram = Template.bind({})

package/src/instrument/InstrumentDiagram.tsx

@@ -0,0 +1,58 @@
+import { Flex } from '../primitives'
+import { ALIGN_CENTER, JUSTIFY_CENTER } from '../styles'
+import singleSrc from './single_channel_GEN1_800px.png'
+import multiSrc from './multi-channel_GEN1_800px.png'
+import singleGEN2Src from './single-channel_GEN2_800px.png'
+import multiGEN2Src from './multi-channel_GEN2_800px.png'
+import singleFlexSrc from './single-channel-flex.png'
+import eightChannelFlexSrc from './eight-channel-flex.png'
+import ninetySixSrc from './ninety-six-channel-gen1.png'
+
+import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { PipetteV2Specs } from '@opentrons/shared-data'
+import type { Mount } from '../robot-types'
+import type { StyleProps } from '..'
+
+export interface InstrumentDiagramProps extends StyleProps {
+  mount: Mount
+  pipetteSpecs?: Pick<PipetteV2Specs, 'displayCategory' | 'channels'> | null
+  className?: string
+  imageStyle?: FlattenSimpleInterpolation
+}
+
+export function InstrumentDiagram(props: InstrumentDiagramProps): JSX.Element {
+  const { mount, pipetteSpecs, className, imageStyle, ...styleProps } = props
+  const { displayCategory, channels } = pipetteSpecs || {}
+
+  let imgSrc
+  switch (displayCategory) {
+    case 'FLEX': {
+      imgSrc = channels === 1 ? singleFlexSrc : eightChannelFlexSrc
+      break
+    }
+    case 'GEN2': {
+      imgSrc = channels === 1 ? singleGEN2Src : multiGEN2Src
+      break
+    }
+    case 'GEN1':
+    default: {
+      imgSrc = channels === 1 ? singleSrc : multiSrc
+    }
+  }
+  return (
+    <Flex
+      className={className}
+      transform={mount === 'right' ? 'scaleX(-1)' : ''}
+      filter={mount === 'right' ? 'FlipH' : ''}
+      {...styleProps}
+      alignItems={ALIGN_CENTER}
+      justifyContent={JUSTIFY_CENTER}
+    >
+      <img
+        src={channels === 96 ? ninetySixSrc : imgSrc}
+        css={imageStyle}
+        height="100%"
+      />
+    </Flex>
+  )
+}

package/src/instrument/InstrumentGroup.stories.tsx

@@ -0,0 +1,88 @@
+import type * as React from 'react'
+import reduce from 'lodash/reduce'
+import keyBy from 'lodash/keyBy'
+import { getAllPipetteNames, getPipetteNameSpecs } from '@opentrons/shared-data'
+
+import { InstrumentGroup as InstrumentGroupComponent } from './InstrumentGroup'
+
+import type { Story, Meta } from '@storybook/react'
+
+const allPipetteSpecsByDisplayNames = keyBy(
+  getAllPipetteNames().map(getPipetteNameSpecs),
+  'displayName'
+)
+const leftPipettesByName = reduce(
+  allPipetteSpecsByDisplayNames,
+  (acc, pipetteSpecs, displayName) => {
+    return {
+      ...acc,
+      [displayName]: {
+        mount: 'left',
+        description: displayName,
+        pipetteSpecs,
+        isDisabled: false,
+      },
+    }
+  },
+  {}
+)
+const rightPipettesByName = reduce(
+  allPipetteSpecsByDisplayNames,
+  (acc, pipetteSpecs, displayName) => {
+    return {
+      ...acc,
+      [displayName]: {
+        mount: 'right',
+        description: displayName,
+        pipetteSpecs,
+        isDisabled: false,
+      },
+    }
+  },
+  {}
+)
+
+export default {
+  title: 'Library/Organisms/Instrument Group',
+  argTypes: {
+    left: {
+      control: {
+        type: 'select',
+        options: Object.keys(leftPipettesByName),
+      },
+      defaultValue: Object.keys(leftPipettesByName)[0],
+    },
+    right: {
+      control: {
+        type: 'select',
+        options: Object.keys(rightPipettesByName),
+      },
+      defaultValue: Object.keys(rightPipettesByName)[0],
+    },
+  },
+} as Meta
+
+const Template: Story<
+  React.ComponentProps<typeof InstrumentGroupComponent>
+> = ({ left, right, ...args }) => (
+  <InstrumentGroupComponent
+    {...args}
+    left={leftPipettesByName[left]}
+    right={rightPipettesByName[right]}
+  />
+)
+export const InstrumentGroup = Template.bind({})
+InstrumentGroup.args = {
+  left: {
+    mount: 'left',
+    description: 'p300 8-Channel',
+    pipetteSpecs: { channels: 8, displayCategory: 'GEN1' },
+    isDisabled: false,
+  },
+  right: {
+    mount: 'right',
+    description: 'p10 Single',
+    pipetteSpecs: { channels: 1, displayCategory: 'GEN2' },
+    isDisabled: true,
+  },
+}

package/src/instrument/InstrumentGroup.tsx

@@ -0,0 +1,35 @@
+import { InstrumentInfo } from './InstrumentInfo'
+import styles from './instrument.module.css'
+
+import type { InstrumentInfoProps } from './InstrumentInfo'
+
+export interface InstrumentGroupProps {
+  showMountLabel?: boolean | null | undefined
+  left?: InstrumentInfoProps | null | undefined
+  right?: InstrumentInfoProps | null | undefined
+}
+
+const EMPTY_INSTRUMENT_PROPS = {
+  description: 'None',
+  tiprackModel: 'N/A',
+  isDisabled: false,
+}
+
+/**
+ * Renders a left and right pipette diagram & info.
+ * Takes child `InstrumentInfo` props in `right` and `left` props.
+ */
+export function InstrumentGroup(props: InstrumentGroupProps): JSX.Element {
+  const { left, right, showMountLabel } = props
+
+  const leftProps = left || { ...EMPTY_INSTRUMENT_PROPS, mount: 'left' }
+  const rightProps = right || { ...EMPTY_INSTRUMENT_PROPS, mount: 'right' }
+  return (
+    <section className={styles.pipette_group}>
+      <InstrumentInfo {...leftProps} showMountLabel={showMountLabel} />
+      {leftProps.pipetteSpecs?.channels === 96 ? null : (
+        <InstrumentInfo {...rightProps} showMountLabel={showMountLabel} />
+      )}
+    </section>
+  )
+}

package/src/instrument/InstrumentInfo.tsx

@@ -0,0 +1,107 @@
+import type * as React from 'react'
+
+import { LEFT, RIGHT } from '@opentrons/shared-data'
+import { Flex } from '../primitives'
+import { SPACING, TYPOGRAPHY } from '../ui-style-constants'
+import { LegacyStyledText } from '../atoms'
+import { DIRECTION_COLUMN, JUSTIFY_CENTER } from '../styles'
+import { InstrumentDiagram } from './InstrumentDiagram'
+
+import type { Mount } from '../robot-types'
+import type { InstrumentDiagramProps } from './InstrumentDiagram'
+
+import styles from './instrument.module.css'
+
+export interface InstrumentInfoProps {
+  /** 'left' or 'right' */
+  mount: Mount
+  /** human-readable description, eg 'p300 Single-channel' */
+  description: string
+  /** specs of mounted pipette */
+  pipetteSpecs?: InstrumentDiagramProps['pipetteSpecs'] | null
+  /** paired tiprack models */
+  tiprackModels?: string[]
+  /** children to display under the info */
+  children?: React.ReactNode
+  /** if true, show labels 'LEFT PIPETTE' / 'RIGHT PIPETTE' */
+  showMountLabel?: boolean | null
+}
+
+const MAX_WIDTH = '14rem'
+
+export function InstrumentInfo(props: InstrumentInfoProps): JSX.Element {
+  const {
+    mount,
+    showMountLabel,
+    description,
+    tiprackModels,
+    pipetteSpecs,
+    children,
+  } = props
+
+  const has96Channel = pipetteSpecs?.channels === 96
+  return (
+    <Flex justifyContent={JUSTIFY_CENTER} gridGap={SPACING.spacing16}>
+      {mount === RIGHT && pipetteSpecs ? (
+        <InstrumentDiagram
+          pipetteSpecs={pipetteSpecs}
+          className={styles.pipette_icon}
+          mount={mount}
+        />
+      ) : null}
+      {/* NOTE: the color is our legacy c-font-dark, which matches the other colors in this component **/}
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        color="#4a4a4a"
+        gridGap={SPACING.spacing8}
+      >
+        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+          <LegacyStyledText
+            as="h3"
+            fontWeight={TYPOGRAPHY.fontWeightSemiBold}
+            textTransform={TYPOGRAPHY.textTransformCapitalize}
+          >
+            {showMountLabel && !has96Channel ? `${mount} pipette` : 'pipette'}
+          </LegacyStyledText>
+          <LegacyStyledText as="p" width="max-content" maxWidth={MAX_WIDTH}>
+            {description}
+          </LegacyStyledText>
+        </Flex>
+
+        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+          <LegacyStyledText as="h3" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
+            {'Tip rack'}
+          </LegacyStyledText>
+          <ul>
+            {tiprackModels != null && tiprackModels.length > 0 ? (
+              tiprackModels.map((model, index) => (
+                <li key={`${model}_${index}`}>
+                  <LegacyStyledText
+                    as="p"
+                    width="max-content"
+                    maxWidth={MAX_WIDTH}
+                  >
+                    {model}
+                  </LegacyStyledText>
+                </li>
+              ))
+            ) : (
+              <LegacyStyledText as="p" width="max-content" maxWidth={MAX_WIDTH}>
+                {'None'}
+              </LegacyStyledText>
+            )}
+          </ul>
+        </Flex>
+      </Flex>
+
+      {children}
+      {mount === LEFT && pipetteSpecs ? (
+        <InstrumentDiagram
+          pipetteSpecs={pipetteSpecs}
+          className={styles.pipette_icon}
+          mount={mount}
+        />
+      ) : null}
+    </Flex>
+  )
+}