feat(protocol-designer): create file wizard redesign skeleton

components/src/atoms/buttons/LargeButton.tsx

@@ -133,7 +133,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
     color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].defaultColor};
     background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType]
       .defaultBackgroundColor};
-    cursor: default;
+    cursor: pointer;
     padding: ${SPACING.spacing16} ${SPACING.spacing24};
     text-align: ${TYPOGRAPHY.textAlignCenter};
     border-radius: ${BORDERS.borderRadiusFull};
@@ -148,7 +148,14 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
       ${activeIconStyle(buttonType)};
     }
 
+    &:disabled {
+      color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledColor};
+      background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType]
+        .disabledBackgroundColor};
+    }
+
     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      cursor: default;
       align-items: ${ALIGN_FLEX_START};
       flex-direction: ${DIRECTION_COLUMN};
       border-radius: ${BORDERS.borderRadius16};
@@ -184,12 +191,6 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
         background-clip: padding-box;
         box-shadow: none;
       }
-
-      &:disabled {
-        color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledColor};
-        background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType]
-          .disabledBackgroundColor};
-      }
     }
   `
   return (

components/src/atoms/buttons/RadioButton.tsx

@@ -88,7 +88,14 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
   `
 
   return (
-    <Flex width="100%">
+    <Flex
+      css={css`
+        width: auto;
+        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          width: 100%;
+        }
+      `}
+    >
       <SettingButton
         checked={isSelected}
         disabled={disabled}

protocol-designer/src/ProtocolRoutes.tsx

@@ -6,7 +6,7 @@ import { ProtocolOverview } from './pages/ProtocolOverview'
 import { Liquids } from './pages/Liquids'
 import { StartingDeckState } from './pages/StartingDeckState'
 import { ProtocolSteps } from './pages/ProtocolSteps'
-import { CreateNewProtocol } from './pages/CreateNewProtocol'
+import { CreateNewProtocolWizard } from './pages/CreateNewProtocolWizard'
 import { Navbar } from './Navbar'
 
 import type { RouteProps } from './types'
@@ -38,7 +38,7 @@ const pdRoutes: RouteProps[] = [
     path: '/steps',
   },
   {
-    Component: CreateNewProtocol,
+    Component: CreateNewProtocolWizard,
     name: 'Create new protocol',
     navLinkTo: '/createNew',
     path: '/createNew',

protocol-designer/src/components/modals/CreateFileWizard/PipetteTipsTile.tsx

@@ -22,7 +22,7 @@ import {
   Btn,
   JUSTIFY_END,
 } from '@opentrons/components'
-import { getPipetteSpecsV2 } from '@opentrons/shared-data'
+import { OT2_ROBOT_TYPE, getPipetteSpecsV2 } from '@opentrons/shared-data'
 import { getLabwareDefsByURI } from '../../../labware-defs/selectors'
 import { createCustomTiprackDef } from '../../../labware-defs/actions'
 import { getAllowAllTipracks } from '../../../feature-flags/selectors'
@@ -204,7 +204,7 @@ function PipetteTipsField(props: PipetteTipsFieldProps): JSX.Element | null {
       <Flex flexWrap="wrap" gridGap={SPACING.spacing4} alignSelf={ALIGN_CENTER}>
         {defaultTiprackOptions.map(o => (
           <EquipmentOption
-            robotType={fields.robotType}
+            robotType={fields.robotType ?? OT2_ROBOT_TYPE}
             key={o.name}
             isSelected={selectedValues.includes(o.value)}
             text={o.name}
@@ -275,7 +275,7 @@ function PipetteTipsField(props: PipetteTipsFieldProps): JSX.Element | null {
             >
               {customTiprackOptions.map(o => (
                 <EquipmentOption
-                  robotType={fields.robotType}
+                  robotType={fields.robotType ?? OT2_ROBOT_TYPE}
                   key={o.name}
                   isSelected={selectedValues.includes(o.value)}
                   text={o.name}

protocol-designer/src/components/modals/CreateFileWizard/PipetteTypeTile.tsx

@@ -181,7 +181,7 @@ function PipetteField(props: OT2FieldProps): JSX.Element {
     >
       {pipetteOptions.map(o => (
         <EquipmentOption
-          robotType={fields.robotType}
+          robotType={fields.robotType ?? OT2_ROBOT_TYPE}
           key={o.name}
           isSelected={currentValue === o.value}
           image={

protocol-designer/src/components/modals/CreateFileWizard/index.tsx

@@ -442,7 +442,9 @@ function CreateFileForm(props: CreateFileFormProps): JSX.Element {
                 {...formProps}
                 goBack={goBack}
                 proceed={() => {
-                  handleProceedRobotType(formProps.getValues().fields.robotType)
+                  handleProceedRobotType(
+                    formProps.getValues().fields.robotType ?? OT2_ROBOT_TYPE
+                  )
                   proceed()
                 }}
               />

protocol-designer/src/load-file/types.ts

@@ -18,7 +18,7 @@ export interface NewProtocolFields {
   name: string | null | undefined
   description: string | null | undefined
   organizationOrAuthor: string | null | undefined
-  robotType: RobotType
+  robotType: RobotType | undefined
 }
 export interface LoadFileAction {
   type: 'LOAD_FILE'

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

@@ -0,0 +1,19 @@
+{
+  "add_fixtures": "Add your fixtures",
+  "add_gripper": "Add a gripper",
+  "add_modules": "Add your modules",
+  "add_pip": "Add a pipette",
+  "basics": "Let’s start with the basics",
+  "need_gripper": "Does your protocol need a Flex Gripper?",
+  "pip_type": "Pipette type",
+  "pip_vol": "Pipette volume",
+  "name": "Name",
+  "description": "Description",
+  "author_org": "Author/Organization",
+  "questions": "We’re going to ask a few questions to help you get started building your protocol.",
+  "robot_type": "Which robot would you like to use?",
+  "tell_us": "Tell us about your protocol",
+  "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."
+}

protocol-designer/src/localization/en/index.ts

@@ -3,37 +3,39 @@ import application from './application.json'
 import button from './button.json'
 import card from './card.json'
 import context_menu from './context_menu.json'
+import create_new_protocol from './create_new_protocol.json'
 import deck from './deck.json'
 import feature_flags from './feature_flags.json'
 import form from './form.json'
+import liquids from './liquids.json'
 import modal from './modal.json'
 import modules from './modules.json'
 import nav from './nav.json'
-import shared from './shared.json'
-import tooltip from './tooltip.json'
-import well_selection from './well_selection.json'
-import liquids from './liquids.json'
 import protocol_overview from './protocol_overview.json'
 import protocol_steps from './protocol_steps.json'
+import shared from './shared.json'
 import starting_deck_state from './starting_deck_state.json'
+import tooltip from './tooltip.json'
+import well_selection from './well_selection.json'
 
 export const en = {
   alert,
   application,
   button,
   card,
   context_menu,
+  create_new_protocol,
   deck,
   feature_flags,
   form,
+  liquids,
   modal,
   modules,
   nav,
-  shared,
-  tooltip,
-  well_selection,
-  liquids,
   protocol_overview,
   protocol_steps,
+  shared,
   starting_deck_state,
+  tooltip,
+  well_selection,
 }

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

@@ -2,19 +2,28 @@
   "add": "add",
   "amount": "Amount:",
   "cancel": "Cancel",
+  "confirm_import": "Are you sure you want to upload this protocol?",
   "confirm_reorder": "Are you sure you want to reorder these steps, it may cause errors?",
-  "create_new_protocol": "Create new protocol",
+  "confirm": "Confirm",
   "create_a_protocol": "Create a protocol",
-  "confirm_import": "Are you sure you want to upload this protocol?",
+  "create_new_protocol": "Create new protocol",
   "done": "Done",
   "edit": "edit",
+  "eight_channel": "8-Channel",
   "exit": "exit",
-  "go_back": "go back",
+  "go_back": "Go back",
   "import_existing": "Import existing protocol",
   "import": "Import",
   "next": "next",
+  "ninety_six_channel": "96-Channel",
   "no-code-solution": "A no-code solution to create protocols that x, y and z meaning for your lab and workflow.",
+  "no": "No",
+  "one_channel": "1-Channel",
+  "opentrons_flex": "Opentrons Flex",
+  "ot2": "Opentrons OT-2",
   "remove": "remove",
+  "step_count": "Step {{current}}",
   "step": "Step {{current}} / {{max}}",
-  "welcome": "Welcome to Protocol Designer"
+  "welcome": "Welcome to Protocol Designer",
+  "yes": "Yes"
 }

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

@@ -0,0 +1,71 @@
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
+import {
+  DIRECTION_COLUMN,
+  Flex,
+  SPACING,
+  StyledText,
+  BORDERS,
+  TYPOGRAPHY,
+} from '@opentrons/components'
+import { InputField } from '../../components/modals/CreateFileWizard/InputField'
+import { WizardBody } from './WizardBody'
+
+import type { WizardTileProps } from './types'
+
+export function AddMetadata(props: WizardTileProps): JSX.Element | null {
+  const { goBack, proceed, watch, register } = props
+  const { t } = useTranslation(['create_new_protocol', 'shared'])
+  const fields = watch('fields')
+  const robotType = fields.robotType
+
+  return (
+    <WizardBody
+      stepNumber={robotType === FLEX_ROBOT_TYPE ? 6 : 4}
+      header={t('tell_us')}
+      disabled={false}
+      goBack={() => {
+        goBack(1)
+      }}
+      proceed={() => {
+        proceed(1)
+      }}
+    >
+      <>
+        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+          <StyledText desktopStyle="captionRegular">{t('name')}</StyledText>
+          {/* TODO(ja, 8/9/24): add new input field */}
+          <InputField autoFocus register={register} fieldName="fields.name" />
+        </Flex>
+        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+          <StyledText desktopStyle="captionRegular">
+            {t('description')}
+          </StyledText>
+          <DescriptionField {...register('fields.description')} />
+        </Flex>
+        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+          <StyledText desktopStyle="captionRegular">
+            {t('author_org')}
+          </StyledText>
+          {/* TODO(ja, 8/9/24): add new input field */}
+          <InputField
+            fieldName="fields.organizationOrAuthor"
+            register={register}
+          />
+        </Flex>
+      </>
+    </WizardBody>
+  )
+}
+
+const DescriptionField = styled.textarea`
+  min-height: 5rem;
+  width: 100%;
+  border: ${BORDERS.lineBorder};
+  border-radius: ${BORDERS.borderRadius4};
+  padding: ${SPACING.spacing8};
+  font-size: ${TYPOGRAPHY.fontSizeP};
+  resize: none;
+`

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

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Flex, SPACING, StyledText } from '@opentrons/components'
+import { WizardBody } from './WizardBody'
+
+import type { WizardTileProps } from './types'
+
+export function SelectFixtures(props: WizardTileProps): JSX.Element | null {
+  const { goBack, proceed } = props
+  const { t } = useTranslation(['create_new_protocol', 'shared'])
+
+  return (
+    <WizardBody
+      stepNumber={5}
+      header={t('add_fixtures')}
+      disabled={false}
+      goBack={() => {
+        goBack(1)
+      }}
+      proceed={() => {
+        proceed(1)
+      }}
+    >
+      <>
+        <StyledText
+          desktopStyle="headingSmallBold"
+          marginBottom={SPACING.spacing16}
+        >
+          {t('which_fixtures')}
+        </StyledText>
+        <Flex gridGap={SPACING.spacing4}>TODO: add fixture info</Flex>
+      </>
+    </WizardBody>
+  )
+}