feat(protocol-designer): heater-shaker step form tools (#16342)

closes AUTH-811

components/src/atoms/Checkbox/index.tsx

@@ -98,11 +98,13 @@ export function Checkbox(props: CheckboxProps): JSX.Element {
 
 interface CheckProps {
   isChecked: boolean
+  color?: string
 }
-function Check(props: CheckProps): JSX.Element {
-  return props.isChecked ? (
+export function Check(props: CheckProps): JSX.Element {
+  const { isChecked, color = COLORS.white } = props
+  return isChecked ? (
     <Flex css={CHECK_STYLE}>
-      <Icon name="ot-checkbox" color={COLORS.white} />
+      <Icon name="ot-checkbox" color={color} />
     </Flex>
   ) : (
     <Flex

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

@@ -2,11 +2,16 @@
   "delete": "Delete step",
   "duplicate": "Duplicate step",
   "final_deck_state": "Final deck state",
+  "heater_shaker_settings": "Heater-shaker settings",
+  "module": "Module",
   "new_location": "New location",
   "protocol_steps": "Protocol steps",
   "protocol_timeline": "Protocol timeline",
   "rename": "Rename step",
   "select_labware": "Select labware",
+  "shake": "Shake",
   "starting_deck_state": "Starting deck state",
+  "temperature": "Temperature",
+  "time": "Time",
   "view_commands": "View commands"
 }

protocol-designer/src/atoms/Toggle/index.tsx

@@ -0,0 +1,70 @@
+import { css } from 'styled-components'
+import {
+  ALIGN_CENTER,
+  Btn,
+  COLORS,
+  Flex,
+  Icon,
+  SPACING,
+  StyledText,
+} from '@opentrons/components'
+
+interface ToggleProps {
+  isSelected: boolean
+  onClick: () => void
+  label: string
+  disabled?: boolean
+}
+export function Toggle(props: ToggleProps): JSX.Element {
+  const { isSelected, onClick, label, disabled = false } = props
+  return (
+    <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
+      <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
+        {label}
+      </StyledText>
+      <Btn
+        role="switch"
+        size="2rem"
+        css={isSelected ? TOGGLE_ENABLED_STYLES : TOGGLE_DISABLED_STYLES}
+        onClick={disabled ? undefined : onClick}
+      >
+        <Icon
+          name={isSelected ? 'ot-toggle-input-on' : 'ot-toggle-input-off'}
+          size="1rem"
+        />
+      </Btn>
+    </Flex>
+  )
+}
+
+const TOGGLE_DISABLED_STYLES = css`
+  color: ${COLORS.grey50};
+
+  &:hover {
+    color: ${COLORS.grey55};
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px ${COLORS.yellow50};
+  }
+
+  &:disabled {
+    color: ${COLORS.grey30};
+  }
+`
+
+const TOGGLE_ENABLED_STYLES = css`
+  color: ${COLORS.blue50};
+
+  &:hover {
+    color: ${COLORS.blue55};
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px ${COLORS.yellow50};
+  }
+
+  &:disabled {
+    color: ${COLORS.grey30};
+  }
+`

protocol-designer/src/atoms/index.ts

@@ -1 +1,2 @@
 export * from './constants'
+export * from './Toggle'

protocol-designer/src/molecules/CheckboxExpandStepFormField/index.tsx

@@ -0,0 +1,52 @@
+import {
+  ALIGN_CENTER,
+  Btn,
+  COLORS,
+  Check,
+  DIRECTION_COLUMN,
+  Flex,
+  JUSTIFY_SPACE_BETWEEN,
+  ListItem,
+  SPACING,
+  StyledText,
+} from '@opentrons/components'
+
+interface CheckboxExpandStepFormFieldProps {
+  title: string
+  checkboxUpdateValue: (value: unknown) => void
+  checkboxValue: unknown
+  isChecked: boolean
+  children: React.ReactNode
+}
+export function CheckboxExpandStepFormField(
+  props: CheckboxExpandStepFormFieldProps
+): JSX.Element {
+  const {
+    checkboxUpdateValue,
+    checkboxValue,
+    children,
+    isChecked,
+    title,
+  } = props
+  return (
+    <ListItem type="noActive">
+      <Flex
+        padding={SPACING.spacing12}
+        width="100%"
+        flexDirection={DIRECTION_COLUMN}
+      >
+        <Flex justifyContent={JUSTIFY_SPACE_BETWEEN} alignItems={ALIGN_CENTER}>
+          <StyledText desktopStyle="bodyDefaultRegular">{title}</StyledText>
+          <Btn
+            onClick={() => {
+              checkboxUpdateValue(!checkboxValue)
+            }}
+          >
+            <Check color={COLORS.blue50} isChecked={isChecked} />
+          </Btn>
+        </Flex>
+        {children}
+      </Flex>
+    </ListItem>
+  )
+}

protocol-designer/src/molecules/InputStepFormField/index.tsx

@@ -0,0 +1,81 @@
+import { useTranslation } from 'react-i18next'
+import {
+  COLORS,
+  DIRECTION_COLUMN,
+  Flex,
+  Icon,
+  InputField,
+  SPACING,
+  StyledText,
+  Tooltip,
+  useHoverTooltip,
+} from '@opentrons/components'
+import { getFieldDefaultTooltip } from '../../components/StepEditForm/utils'
+
+import type { FieldProps } from '../../components/StepEditForm/types'
+
+interface InputStepFormFieldProps extends FieldProps {
+  title: string
+  units: string
+  padding?: string
+  showTooltip?: boolean
+}
+
+export function InputStepFormField(
+  props: InputStepFormFieldProps
+): JSX.Element {
+  const {
+    errorToShow,
+    onFieldBlur,
+    onFieldFocus,
+    updateValue,
+    value,
+    name,
+    title,
+    units,
+    showTooltip = true,
+    padding = SPACING.spacing16,
+    ...otherProps
+  } = props
+  const { t } = useTranslation(['tooltip', 'application'])
+  const [targetProps, tooltipProps] = useHoverTooltip()
+
+  return (
+    <Flex flexDirection={DIRECTION_COLUMN} padding={padding}>
+      {title !== null ? (
+        <Flex gridGap={SPACING.spacing8} paddingBottom={SPACING.spacing8}>
+          <StyledText desktopStyle="captionRegular" color={COLORS.grey60}>
+            {title}
+          </StyledText>
+          {showTooltip ? (
+            <>
+              <Flex {...targetProps}>
+                <Icon
+                  name="information"
+                  size={SPACING.spacing12}
+                  color={COLORS.grey60}
+                  data-testid="information_icon"
+                />
+              </Flex>
+              <Tooltip tooltipProps={tooltipProps}>
+                {getFieldDefaultTooltip(name, t)}
+              </Tooltip>
+            </>
+          ) : null}
+        </Flex>
+      ) : null}
+      <InputField
+        {...otherProps}
+        name={name}
+        error={errorToShow}
+        onBlur={onFieldBlur}
+        onFocus={onFieldFocus}
+        onChange={e => {
+          updateValue(e.currentTarget.value)
+        }}
+        value={value ? String(value) : null}
+        units={units}
+      />
+    </Flex>
+  )
+}

protocol-designer/src/molecules/ToggleExpandStepFormField/index.tsx

@@ -0,0 +1,68 @@
+import {
+  ALIGN_CENTER,
+  DIRECTION_COLUMN,
+  Flex,
+  JUSTIFY_SPACE_BETWEEN,
+  ListItem,
+  SPACING,
+  StyledText,
+} from '@opentrons/components'
+import { Toggle } from '../../atoms'
+import { InputStepFormField } from '../InputStepFormField'
+import type { FieldProps } from '../../pages/Designer/ProtocolSteps/StepForm/types'
+
+interface ToggleExpandStepFormFieldProps extends FieldProps {
+  title: string
+  fieldTitle: string
+  isSelected: boolean
+  units: string
+  onLabel: string
+  offLabel: string
+  toggleUpdateValue: (value: unknown) => void
+  toggleValue: unknown
+}
+export function ToggleExpandStepFormField(
+  props: ToggleExpandStepFormFieldProps
+): JSX.Element {
+  const {
+    title,
+    isSelected,
+    onLabel,
+    offLabel,
+    fieldTitle,
+    units,
+    toggleUpdateValue,
+    toggleValue,
+    ...restProps
+  } = props
+
+  return (
+    <ListItem type="noActive">
+      <Flex
+        padding={SPACING.spacing12}
+        width="100%"
+        flexDirection={DIRECTION_COLUMN}
+      >
+        <Flex justifyContent={JUSTIFY_SPACE_BETWEEN} alignItems={ALIGN_CENTER}>
+          <StyledText desktopStyle="bodyDefaultRegular">{title}</StyledText>
+          <Toggle
+            onClick={() => {
+              toggleUpdateValue(!toggleValue)
+            }}
+            label={isSelected ? onLabel : offLabel}
+            isSelected={isSelected}
+          />
+        </Flex>
+        {isSelected ? (
+          <InputStepFormField
+            {...restProps}
+            padding="0"
+            showTooltip={false}
+            title={fieldTitle}
+            units={units}
+          />
+        ) : null}
+      </Flex>
+    </ListItem>
+  )
+}

protocol-designer/src/molecules/ToggleStepFormField/index.tsx

@@ -0,0 +1,72 @@
+import {
+  ALIGN_CENTER,
+  DIRECTION_COLUMN,
+  Flex,
+  JUSTIFY_SPACE_BETWEEN,
+  ListItem,
+  SPACING,
+  StyledText,
+  TOOLTIP_BOTTOM,
+  Tooltip,
+  useHoverTooltip,
+} from '@opentrons/components'
+import { Toggle } from '../../atoms'
+
+interface ToggleStepFormFieldProps {
+  title: string
+  isSelected: boolean
+  onLabel: string
+  offLabel: string
+  toggleUpdateValue: (value: unknown) => void
+  toggleValue: unknown
+  tooltipContent: string | null
+  isDisabled: boolean
+}
+export function ToggleStepFormField(
+  props: ToggleStepFormFieldProps
+): JSX.Element {
+  const {
+    title,
+    isSelected,
+    onLabel,
+    offLabel,
+    toggleUpdateValue,
+    toggleValue,
+    tooltipContent,
+    isDisabled,
+  } = props
+  const [targetProps, tooltipProps] = useHoverTooltip({
+    placement: TOOLTIP_BOTTOM,
+  })
+
+  return (
+    <>
+      <ListItem type="noActive">
+        <Flex
+          padding={SPACING.spacing12}
+          width="100%"
+          flexDirection={DIRECTION_COLUMN}
+        >
+          <Flex
+            justifyContent={JUSTIFY_SPACE_BETWEEN}
+            alignItems={ALIGN_CENTER}
+            {...targetProps}
+          >
+            <StyledText desktopStyle="bodyDefaultRegular">{title}</StyledText>
+            <Toggle
+              disabled={isDisabled}
+              onClick={() => {
+                toggleUpdateValue(!toggleValue)
+              }}
+              label={isSelected ? onLabel : offLabel}
+              isSelected={isSelected}
+            />
+          </Flex>
+        </Flex>
+      </ListItem>
+      {tooltipContent != null ? (
+        <Tooltip tooltipProps={tooltipProps}>{tooltipContent}</Tooltip>
+      ) : null}
+    </>
+  )
+}

protocol-designer/src/molecules/index.ts

@@ -1,3 +1,7 @@
+export * from './CheckboxExpandStepFormField'
 export * from './CheckboxStepFormField'
 export * from './DropdownStepFormField'
+export * from './InputStepFormField'
 export * from './SettingsIcon'
+export * from './ToggleExpandStepFormField'
+export * from './ToggleStepFormField'