feat(components, protocol-designer): wire up create file pages and ma…

…ke ListItemCustomize

closes AUTH-647 AUTH-664

components/src/atoms/ListItem/ListItem.stories.tsx

@@ -9,6 +9,7 @@ import { ListItem as ListItemComponent } from './index'
 import sampleImg from '../../images/labware/measurement-guide/images/depth/[email protected]'
 
 import type { Meta, StoryObj } from '@storybook/react'
+import type { DropdownMenuProps } from '../../molecules'
 
 const meta: Meta<typeof ListItemComponent> = {
   title: 'Library/Atoms/ListItem',
@@ -73,15 +74,26 @@ export const ListItemDescriptorMini: Story = {
   },
 }
 
+const exampleDropDown: DropdownMenuProps = {
+  dropdownType: 'neutral',
+  onClick: () => {},
+  currentOption: { name: 'option 1', value: '1' },
+  filterOptions: [
+    { name: 'option 1', value: '1' },
+    { name: 'option 2', value: '2' },
+  ],
+}
+
 export const ListItemCustomizeDefault: Story = {
   args: {
     type: 'noActive',
     children: (
       <ListItemCustomize
         header="Header"
         onClick={() => {}}
+        dropdown={exampleDropDown}
         label="Label"
-        imgSrc={sampleImg}
+        image={<img src={sampleImg} height="60px" width="60px" />}
         linkText="Text"
       />
     ),

components/src/atoms/ListItem/ListItemChildren/ListItemCustomize.tsx

@@ -4,20 +4,21 @@ import { COLORS } from '../../../helix-design-system'
 import { Flex, Link } from '../../../primitives'
 import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
 import { StyledText } from '../../StyledText'
-
+import { DropdownMenu } from '../../../molecules/DropdownMenu'
+import type { DropdownMenuProps } from '../../../molecules/DropdownMenu'
 interface ListItemCustomizeProps {
   header: string
   image?: JSX.Element
   label?: string
   linkText?: string
   onClick?: () => void
-  // dropdown
+  dropdown?: DropdownMenuProps
 }
 
 export const ListItemCustomize = (
   props: ListItemCustomizeProps
 ): JSX.Element => {
-  const { header, image, onClick, label, linkText } = props
+  const { header, image, onClick, label, linkText, dropdown } = props
   return (
     <Flex width="100%" alignItems={ALIGN_CENTER} padding={SPACING.spacing12}>
       <Flex gridGap={SPACING.spacing8} width="50%" alignItems={ALIGN_CENTER}>
@@ -27,11 +28,12 @@ export const ListItemCustomize = (
       <Flex
         width={onClick != null && linkText != null ? '40%' : '50%'}
         gridGap={SPACING.spacing8}
+        alignItems={ALIGN_CENTER}
       >
         <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
           {label}
         </StyledText>
-        {/* add dropdown menu */}
+        {dropdown != null ? <DropdownMenu {...dropdown} /> : null}
       </Flex>
       {onClick != null && linkText != null ? (
         <Flex width="10%" textDecoration={TYPOGRAPHY.textDecorationUnderline}>

protocol-designer/src/localization/en/create_new_protocol.json

@@ -8,26 +8,33 @@
   "basics": "Let’s start with the basics",
   "description": "Description",
   "edit": "Edit",
-  "name": "Name",
-  "quantity": "Quantity",
+  "fixtures_added": "Fixtures added",
   "modules_added": "Modules added",
-  "pip": "{{mount}} pipette",
+  "name": "Name",
   "need_gripper": "Does your protocol need a Flex Gripper?",
   "pip_gen": "Pipette generation",
   "pip_tips": "Pipette tips",
   "pip_type": "Pipette type",
   "pip_vol": "Pipette volume",
+  "pip": "{{mount}} pipette",
+  "quantity": "Quantity",
   "questions": "We’re going to ask a few questions to help you get started building your protocol.",
   "remove": "Remove",
+  "robot_pips": "Robot pipettes",
   "robot_type": "Which robot would you like to use?",
   "show_all_tips": "Show all tips",
   "show_default_tips": "Show default tips",
+  "stagingArea_cutoutA3": "Staging area A3",
+  "stagingArea_cutoutB3": "Staging area B3",
+  "stagingArea_cutoutC3": "Staging area C3",
+  "stagingArea_cutoutD3": "Staging area D3",
   "swap": "Swap",
   "tell_us": "Tell us about your protocol",
+  "trashBin": "Trash bin",
   "vol_label": "{{volume}} uL",
-  "robot_pips": "Robot pipettes",
-  "your_pips": "Your pipettes",
+  "wasteChute": "Waste chute",
   "which_fixtures": "Which fixtures will you be using?",
   "which_mods": "Which modules will you be using?",
-  "which_pip": "Tell us what pipette and tips you want to use."
+  "which_pip": "Tell us what pipette and tips you want to use.",
+  "your_pips": "Your pipettes"
 }

protocol-designer/src/pages/CreateNewProtocolWizard/SelectFixtures.tsx

@@ -1,13 +1,38 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Flex, SPACING, StyledText } from '@opentrons/components'
+import without from 'lodash/without'
+import {
+  DIRECTION_COLUMN,
+  EmptySelectorButton,
+  Flex,
+  ListItem,
+  ListItemCustomize,
+  SPACING,
+  StyledText,
+} from '@opentrons/components'
 import { WizardBody } from './WizardBody'
+import { AdditionalEquipmentDiagram } from './utils'
 
-import type { WizardTileProps } from './types'
+import type { AdditionalEquipment, WizardTileProps } from './types'
 
+const ADDITIONAL_EQUIPMENT: AdditionalEquipment[] = [
+  'wasteChute',
+  'trashBin',
+  'stagingArea_cutoutA3',
+  'stagingArea_cutoutB3',
+  'stagingArea_cutoutC3',
+  'stagingArea_cutoutD3',
+]
 export function SelectFixtures(props: WizardTileProps): JSX.Element | null {
-  const { goBack, proceed } = props
+  const { goBack, proceed, setValue, watch } = props
+  const additionalEquipment = watch('additionalEquipment')
   const { t } = useTranslation(['create_new_protocol', 'shared'])
+  const filteredAdditionalEquipmentWithoutGripper = additionalEquipment.filter(
+    ae => ae !== 'gripper'
+  )
+  const filteredAdditionalEquipment = ADDITIONAL_EQUIPMENT.filter(
+    equipment => !filteredAdditionalEquipmentWithoutGripper.includes(equipment)
+  )
 
   return (
     <WizardBody
@@ -21,15 +46,60 @@ export function SelectFixtures(props: WizardTileProps): JSX.Element | null {
         proceed(1)
       }}
     >
-      <>
-        <StyledText
-          desktopStyle="headingSmallBold"
-          marginBottom={SPACING.spacing16}
-        >
-          {t('which_fixtures')}
-        </StyledText>
-        <Flex gridGap={SPACING.spacing4}>TODO: add fixture info</Flex>
-      </>
+      <Flex marginTop={SPACING.spacing60} flexDirection={DIRECTION_COLUMN}>
+        <Flex flexDirection={DIRECTION_COLUMN}>
+          <StyledText
+            desktopStyle="headingSmallBold"
+            marginBottom={SPACING.spacing12}
+          >
+            {t('which_fixtures')}
+          </StyledText>
+        </Flex>
+        <Flex gridGap={SPACING.spacing4} flexWrap="wrap">
+          {filteredAdditionalEquipment.map(equipment => (
+            <EmptySelectorButton
+              key={equipment}
+              textAlignment="left"
+              size="small"
+              iconName="plus"
+              text={t(`${equipment}`)}
+              onClick={() => {
+                setValue('additionalEquipment', [
+                  ...additionalEquipment,
+                  equipment,
+                ])
+              }}
+            />
+          ))}
+        </Flex>
+        <Flex marginTop={SPACING.spacing32} flexDirection={DIRECTION_COLUMN}>
+          <StyledText
+            desktopStyle="headingSmallBold"
+            marginBottom={SPACING.spacing12}
+          >
+            {t('fixtures_added')}
+          </StyledText>
+          <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+            {filteredAdditionalEquipmentWithoutGripper.map(ae => (
+              <ListItem type="noActive" key={ae}>
+                <ListItemCustomize
+                  linkText={t('remove')}
+                  onClick={() => {
+                    setValue(
+                      'additionalEquipment',
+                      without(additionalEquipment, ae)
+                    )
+                  }}
+                  header={t(`${ae}`)}
+                  image={
+                    <AdditionalEquipmentDiagram additionalEquipment={ae} />
+                  }
+                />
+              </ListItem>
+            ))}
+          </Flex>
+        </Flex>
+      </Flex>
     </WizardBody>
   )
 }