feat(protocol-designer): deck setup tools

closes AUTh-673

components/src/atoms/ListButton/ListButtonChildren/ListButtonAccordion.tsx

@@ -5,14 +5,14 @@ import { SPACING } from '../../../ui-style-constants'
 import { StyledText } from '../../StyledText'
 
 interface ListButtonAccordionProps {
-  headline: string
   children: React.ReactNode
   // determines if the accordion is expanded or not
   isExpanded?: boolean
   // is it nested into another accordion?
   isNested?: boolean
   // optional main headline for the top level accordion
   mainHeadline?: string
+  headline?: string
 }
 
 /*
@@ -33,7 +33,11 @@ export function ListButtonAccordion(
   return (
     <Flex flexDirection={DIRECTION_COLUMN} width="100%">
       {mainHeadline != null ? (
-        <Flex marginBottom={isExpanded ? SPACING.spacing40 : '0'}>
+        <Flex
+          marginBottom={
+            isExpanded && headline != null ? SPACING.spacing40 : '0'
+          }
+        >
           <StyledText desktopStyle="bodyDefaultSemiBold">
             {mainHeadline}
           </StyledText>
@@ -46,11 +50,13 @@ export function ListButtonAccordion(
           gridGap={SPACING.spacing4}
           marginLeft={isNested ? SPACING.spacing40 : '0'}
         >
-          <Flex marginBottom={SPACING.spacing4}>
-            <StyledText desktopStyle="bodyDefaultSemiBold">
-              {headline}
-            </StyledText>
-          </Flex>
+          {headline != null ? (
+            <Flex marginBottom={SPACING.spacing4}>
+              <StyledText desktopStyle="bodyDefaultSemiBold">
+                {headline}
+              </StyledText>
+            </Flex>
+          ) : null}
           <Flex flexDirection={DIRECTION_COLUMN}>{children}</Flex>
         </Flex>
       ) : null}

components/src/atoms/index.ts

@@ -3,6 +3,7 @@ export * from './Checkbox'
 export * from './CheckboxField'
 export * from './Chip'
 export * from './InputField'
+export * from './ListButton'
 export * from './ListItem'
 export * from './ListItem/ListItemChildren//ListItemDescriptor'
 export * from './MenuList'

components/src/index.ts

@@ -21,7 +21,7 @@ export * from './primitives'
 export * from './slotmap'
 export * from './structure'
 export * from './tooltips'
-
+export * from './organisms'
 // styles
 export * from './styles'
 // new ui-overhaul style vars

components/src/organisms/Toolbox/Toolbox.stories.tsx

@@ -20,5 +20,6 @@ export const Toolbox: Story = {
     onCloseClick: () => {},
     titleIconName: 'swap-horizontal',
     closeButtonText: 'Text link',
+    onConfirmClick: () => {},
   },
 }

components/src/organisms/Toolbox/__tests__/Toolbox.test.tsx

@@ -19,12 +19,13 @@ describe('Toolbox', () => {
       titleIconName: 'swap-horizontal',
       onCloseClick: vi.fn(),
       closeButtonText: 'exit',
+      onConfirmClick: vi.fn(),
     }
     render(props)
     screen.getByText('header')
     screen.getByText('done')
     fireEvent.click(screen.getByTestId('Toolbox_confirmButton'))
-    expect(props.onCloseClick).toHaveBeenCalled()
+    expect(props.onConfirmClick).toHaveBeenCalled()
     screen.getByText('mock children')
     screen.getByText('exit')
     fireEvent.click(screen.getByTestId('Toolbox_exit'))

components/src/organisms/Toolbox/index.tsx

@@ -17,10 +17,11 @@ export interface ToolboxProps {
   title: string
   children: React.ReactNode
   confirmButtonText: string
+  onConfirmClick: () => void
   onCloseClick: () => void
-  titleIconName: IconName
-  closeButtonText?: string
+  closeButtonText: string
   width?: string
+  titleIconName?: IconName
 }
 
 export function Toolbox(props: ToolboxProps): JSX.Element {
@@ -29,6 +30,7 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
     children,
     confirmButtonText,
     onCloseClick,
+    onConfirmClick,
     titleIconName,
     closeButtonText,
     width = '19.5rem',
@@ -76,10 +78,11 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
           borderBottom={`1px solid ${COLORS.grey30}`}
         >
           <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
-            <Icon name={titleIconName} size="1.25rem" />
+            {titleIconName != null ? (
+              <Icon name={titleIconName} size="1.25rem" />
+            ) : null}
             <StyledText desktopStyle="bodyLargeSemiBold">{title}</StyledText>
           </Flex>
-
           <Btn
             onClick={onCloseClick}
             textDecoration={textDecorationUnderline}
@@ -110,7 +113,7 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
           <PrimaryButton
             width="100%"
             data-testid="Toolbox_confirmButton"
-            onClick={onCloseClick}
+            onClick={onConfirmClick}
           >
             {confirmButtonText}
           </PrimaryButton>

components/src/organisms/index.ts

@@ -1 +1,2 @@
 export * from './DeckLabelSet'
+export * from './Toolbox'

protocol-designer/src/assets/localization/en/shared.json

@@ -29,9 +29,13 @@
   "protocol_designer": "Protocol Designer",
   "remove": "remove",
   "slot_stack_information": "Slot Stack Information",
+  "stagingArea": "Staging area",
   "step_count": "Step {{current}}",
   "step": "Step {{current}} / {{max}}",
+  "trashBin": "Trash bin",
   "version": "Version # {{version}}",
+  "wasteChute": "Waste chute",
+  "wasteChuteAndStagingArea": "Waste chute and staging area",
   "welcome": "Welcome to Protocol Designer",
   "yes": "Yes"
 }

protocol-designer/src/assets/localization/en/starting_deck_state.json

@@ -1,5 +1,19 @@
 {
+  "adapter": "Adapter",
+  "adapter_compatible_lab": "Adapter compatible labware",
+  "add_fixture": "Add a fixture",
   "add_labware": "Add labware",
+  "add_module": "Add a module",
+  "aluminumBlock": "Aluminum block",
+  "clear": "Clear",
+  "customize_slot": "Customize slot {{slotName}}",
+  "deck_hardware": "Deck hardware",
+  "done": "Done",
   "edit": "Edit",
-  "starting_deck_state": "Starting deck state"
+  "labware": "Labware",
+  "reservoir": "Reservoir",
+  "starting_deck_state": "Starting deck state",
+  "tiprack": "Tiprack",
+  "tubeRack": "Tube rack",
+  "wellPlate": "Well plate"
 }