@opentrons/components 0.1.6-alpha.16 → 0.1.6-alpha.18

package/src/forms/SelectField.tsx

@@ -0,0 +1,94 @@
+import type * as React from 'react'
+import cx from 'classnames'
+import find from 'lodash/find'
+
+import { Select } from './Select'
+import styles from './SelectField.module.css'
+
+import type { SelectProps } from './Select'
+import type { ActionMeta, MultiValue, SingleValue } from 'react-select'
+import type { SelectOption } from '.'
+
+export interface SelectFieldProps {
+  /** optional HTML id for container */
+  id?: SelectProps['id']
+  /** field name */
+  name: NonNullable<SelectProps['name']>
+  /** react-Select option, usually label, value */
+  options: NonNullable<SelectProps['options']>
+  /** currently selected value */
+  value?: string | null
+  /** disable the select */
+  disabled?: SelectProps['isDisabled']
+  /** optional placeholder  */
+  placeholder?: SelectProps['placeholder']
+  /** menuPosition prop to send to react-select */
+  menuPosition?: SelectProps['menuPosition']
+  /** render function for the option label passed to react-select */
+  formatOptionLabel?: SelectProps['formatOptionLabel']
+  /** optional className */
+  className?: string
+  /** optional caption. hidden when `error` is given */
+  caption?: React.ReactNode
+  /** if included, use error style and display error instead of caption */
+  error?: string | null
+  /** change handler called with (name, value) */
+  onValueChange?: (
+    name: string,
+    value: string,
+    actionMeta: ActionMeta<SelectOption>
+  ) => void
+  /** blur handler called with (name) */
+  onLoseFocus?: (name: string) => void
+}
+
+export function SelectField(props: SelectFieldProps): JSX.Element {
+  const {
+    id,
+    name,
+    options,
+    disabled,
+    placeholder,
+    menuPosition,
+    formatOptionLabel,
+    className,
+    error,
+    onValueChange,
+    onLoseFocus,
+  } = props
+  // @ts-expect-error(mc, 2021-03-19): resolve this error
+  const allOptions = options.flatMap(og => og.options || [og])
+  const value = find(allOptions, opt => opt.value === props.value) || null
+  const caption = error || props.caption
+  // @ts-expect-error(sa, 2021-6-23): cast value to boolean
+  const captionCx = cx(styles.select_caption, { [styles.error]: error })
+  // @ts-expect-error(sa, 2021-6-23): cast value to boolean
+  const fieldCx = cx(styles.select_field, { [styles.error]: error }, className)
+
+  return (
+    <div>
+      <Select
+        className={fieldCx}
+        id={id}
+        name={name}
+        options={options}
+        value={value}
+        isDisabled={disabled}
+        placeholder={placeholder}
+        menuPosition={menuPosition}
+        formatOptionLabel={formatOptionLabel}
+        onChange={(
+          opt: SingleValue<SelectOption> | MultiValue<SelectOption>,
+          e: ActionMeta<SelectOption>
+        ) => {
+          const value = (opt as SelectOption).value
+          onValueChange?.(name, value, e)
+        }}
+        onBlur={() => {
+          if (onLoseFocus != null) onLoseFocus(name)
+        }}
+      />
+      {caption != null ? <p className={captionCx}>{caption}</p> : null}
+    </div>
+  )
+}

package/src/forms/ToggleField.stories.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+import { ToggleField as ToggleFieldComponent } from './ToggleField'
+
+import type { Story, Meta } from '@storybook/react'
+
+const Template: Story<
+  React.ComponentProps<typeof ToggleFieldComponent>
+> = args => {
+  const [isOn, setIsOn] = React.useState<boolean>(false)
+  return (
+    <ToggleFieldComponent
+      {...args}
+      onChange={e => {
+        setIsOn(!isOn)
+        args.onChange(e)
+      }}
+      value={isOn}
+    />
+  )
+}
+
+export const ToggleField = Template.bind({})
+ToggleField.args = {
+  label: 'Toggle Me',
+}
+
+export default {
+  title: 'Library/Molecules/Forms/Toggle Field',
+  component: ToggleField,
+} as Meta

package/src/forms/ToggleField.tsx

@@ -0,0 +1,59 @@
+import type * as React from 'react'
+import cx from 'classnames'
+import { Icon } from '../icons'
+
+import styles from './forms.module.css'
+
+export interface ToggleFieldProps {
+  /** change handler */
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown
+  /** checkbox is checked if value is true */
+  value?: boolean
+  /** classes to apply */
+  className?: string
+  /** classes to apply to inner label text div */
+  labelTextClassName?: string | null | undefined
+  /** name of field in form */
+  name?: string
+  /** label text for toggled off */
+  offLabel?: string
+  /** label text for toggled on */
+  onLabel?: string
+  /** checkbox is disabled if value is true */
+  disabled?: boolean
+  /** html tabindex property */
+  tabIndex?: number
+}
+
+export function ToggleField(props: ToggleFieldProps): JSX.Element {
+  const outerClassName = cx(styles.form_field, props.className, {
+    [styles.toggle_disabled]: props.disabled,
+  })
+
+  const innerDivClassName = cx(styles.toggle_icon, {
+    [styles.toggle_disabled]: props.disabled,
+  })
+
+  return (
+    <label className={outerClassName}>
+      <div className={innerDivClassName}>
+        <Icon
+          name={props.value ? 'ot-toggle-field-on' : 'ot-toggle-field-off'}
+          width="100%"
+        />
+      </div>
+      <input
+        className={cx(styles.input_field, styles.accessibly_hidden)}
+        type="checkbox"
+        name={props.name}
+        checked={props.value || false}
+        disabled={props.disabled}
+        onChange={props.onChange}
+        tabIndex={props.tabIndex}
+      />
+      <div className={cx(props.labelTextClassName, styles.label_text)}>
+        {props.value ? props.onLabel : props.offLabel}
+      </div>
+    </label>
+  )
+}

package/src/forms/__tests__/DeprecatedCheckboxField.test.tsx

@@ -0,0 +1,5 @@
+import { describe, it } from 'vitest'
+
+describe('DeprecatedCheckboxField', () => {
+  it.todo('replace deprecated enzyme test')
+})

package/src/forms/__tests__/DropdownField.test.tsx

@@ -0,0 +1,5 @@
+import { describe, it } from 'vitest'
+
+describe('DropdownField', () => {
+  it.todo('replace deprecated enzyme test')
+})

package/src/forms/__tests__/InputField.test.tsx

@@ -0,0 +1,5 @@
+import { describe, it } from 'vitest'
+
+describe('InputField', () => {
+  it.todo('replace deprecated enzyme test')
+})

package/src/forms/__tests__/Select.test.tsx

@@ -0,0 +1,5 @@
+import { describe, it } from 'vitest'
+
+describe('Select', () => {
+  it.todo('replace deprecated enzyme test')
+})

package/src/forms/__tests__/SelectField.test.tsx

@@ -0,0 +1,5 @@
+import { describe, it } from 'vitest'
+
+describe('SelectField', () => {
+  it.todo('replace deprecated enzyme test')
+})

package/src/forms/__tests__/ToggleField.test.tsx

@@ -0,0 +1,5 @@
+import { describe, it } from 'vitest'
+
+describe('ToggleField', () => {
+  it.todo('replace deprecated enzyme test')
+})

package/src/forms/forms.module.css

@@ -0,0 +1,239 @@
+@import '../index.module.css';
+
+.accessibly_hidden {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+}
+
+.form_field {
+  font-size: var(--fs-body-1); /* from legacy --font-form-default */
+  font-weight: var(--fw-regular); /* from legacy --font-form-default */
+  color: var(--c-font-dark); /* from legacy --font-form-default */
+  display: flex;
+  align-items: center;
+  line-height: 1;
+}
+
+.label_text {
+  flex: 0 0 auto;
+  padding: 0 0.5rem;
+
+  &:empty {
+    padding: 0;
+  }
+}
+
+.form_group_label {
+  font-size: var(--fs-body-1); /* from legacy --font-form-default */
+  color: var(--c-font-dark); /* from legacy --font-form-default */
+  font-weight: var(--fw-semibold);
+  margin-bottom: 0.15rem;
+  text-transform: capitalize;
+
+  &::after {
+    content: ':';
+  }
+}
+
+.form_group_label_pipette_settings_slideout {
+  font-weight: var(--fw-semibold);
+  margin-bottom: 0.5rem;
+  text-transform: capitalize;
+  font-size: 13px;
+  color: #16212d;
+}
+
+.checkbox_icon {
+  /* Icon for radiobutton and for checkbox */
+  width: 1.25rem;
+  min-width: 1.25rem;
+  color: var(--c-font-dark);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:not(.checkbox_disabled):hover {
+    cursor: pointer;
+  }
+
+  &.error {
+    color: var(--c-warning-dark);
+  }
+}
+
+.checkbox_icon.checked {
+  color: var(--c-blue);
+}
+
+.toggle_icon {
+  /* Icon for radiobutton and for checkbox */
+  display: block;
+  width: 2rem;
+  min-width: 2rem;
+  color: var(--c-font-dark);
+
+  &:not(.toggle_disabled):hover {
+    cursor: pointer;
+  }
+}
+
+.dropdown_disabled,
+.checkbox_disabled,
+.toggle_disabled {
+  opacity: 0.5;
+}
+
+.input_field_container {
+  width: 100%;
+}
+
+.input_field {
+  display: flex;
+  flex: 1 1;
+  background-color: var(--c-light-gray);
+  border-radius: var(--bd-radius-form-field);
+  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
+
+  & input {
+    font-size: var(--fs-body-1); /* from legacy --font-form-default */
+    font-weight: var(--fw-regular); /* from legacy --font-form-default */
+    color: var(--c-font-dark); /* from legacy --font-form-default */
+    background-color: inherit;
+    border-radius: inherit;
+    border: none;
+    flex: 1 1 auto;
+    width: 100%;
+    height: 1rem;
+
+    /* TODO: Ian 2018-09-14 Firefox has 1px padding on input element,
+    * but I can't figure out how to fix it in Firefox without breaking it in Chrome.
+    * Better CSS reset for inputs needed?
+    */
+
+    /* padding: 1px; */
+  }
+
+  & input:focus {
+    outline: none;
+  }
+
+  & input::placeholder {
+    color: var(--c-med-gray);
+  }
+
+  &:focus-within {
+    background-color: var(--c-white);
+    box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
+  }
+
+  & .suffix {
+    font-size: var(--fs-body-1); /* from legacy --font-form-default */
+    color: var(--c-font-dark); /* from legacy --font-form-default */
+    font-weight: var(--fw-semibold);
+    display: inline-block;
+    flex: 1 0;
+    text-align: right;
+    align-self: center;
+  }
+}
+
+.input_caption {
+  font-size: var(--fs-caption); /* from legacy --font-form-caption */
+  font-weight: var(--fw-semibold); /* from legacy --font-form-caption */
+  color: var(--c-med-gray); /* from legacy --font-form-caption */
+  line-height: 1.2;
+
+  & .right {
+    float: right;
+  }
+}
+
+.inline {
+  display: flex;
+
+  & .label_text {
+    padding-right: 1.5rem;
+  }
+}
+
+.inline_item {
+  flex: 1;
+}
+
+.error div,
+.error span {
+  color: var(--c-warning-dark);
+}
+
+.error select,
+.error .input_field {
+  background-color: var(--c-warning-light);
+}
+
+.dropdown {
+  background-color: var(--c-light-gray);
+}
+
+.dropdown_field {
+  position: relative;
+
+  & select {
+    font-size: var(--fs-body-1); /* from legacy --font-form-default */
+    font-weight: var(--fw-regular); /* from legacy --font-form-default */
+    color: var(--c-font-dark); /* from legacy --font-form-default */
+    border: 0;
+    padding: 0.25rem 0.5rem;
+    outline: none;
+    height: 1.5rem;
+    border-radius: var(--bd-radius-form-field);
+    font-family: inherit;
+    width: 100%;
+    appearance: none;
+    overflow: hidden;
+
+    &:focus {
+      background-color: var(--c-white);
+      box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
+    }
+  }
+
+  & .dropdown_icon {
+    position: absolute;
+    top: 0.2rem;
+    right: 0.25rem;
+    width: 1.25rem;
+    pointer-events: none;
+
+    & svg {
+      color: var(--c-dark-gray);
+    }
+  }
+}
+
+.error_icon {
+  display: inline-block;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  padding-right: 0.5rem;
+}
+
+.disabled {
+  /* Disable mouse interaction. NOTE: User can still tab to focus a field */
+  pointer-events: none;
+
+  & .form_group_label {
+    color: var(--c-light-gray);
+  }
+
+  /* stylelint-disable no-descending-specificity */
+  & input,
+  & .suffix {
+    color: var(--c-med-gray);
+  }
+}

package/src/forms/index.ts

@@ -0,0 +1,8 @@
+export * from './DeprecatedCheckboxField'
+export * from './DropdownField'
+export * from './FormGroup'
+export * from './LegacyInputField'
+export * from './RadioGroup'
+export * from './Select'
+export * from './SelectField'
+export * from './ToggleField'

package/src/hardware-sim/BaseDeck/BaseDeck.stories.tsx

@@ -0,0 +1,94 @@
+import type * as React from 'react'
+import {
+  fixture96Plate,
+  fixtureTiprack1000ul,
+  FLEX_ROBOT_TYPE,
+  HEATERSHAKER_MODULE_V1,
+  MAGNETIC_BLOCK_V1,
+  TEMPERATURE_MODULE_V2,
+  THERMOCYCLER_MODULE_V2,
+} from '@opentrons/shared-data'
+
+import {
+  EXTENDED_DECK_CONFIG_FIXTURE,
+  STANDARD_SLOT_DECK_CONFIG_FIXTURE,
+  WASTE_CHUTE_DECK_CONFIG_FIXTURE,
+} from './__fixtures__'
+import { BaseDeck as BaseDeckComponent } from './BaseDeck'
+
+import type { Meta, StoryObj } from '@storybook/react'
+import type {
+  DeckConfiguration,
+  LabwareDefinition2,
+} from '@opentrons/shared-data'
+
+const meta: Meta<React.ComponentProps<typeof BaseDeckComponent>> = {
+  component: BaseDeckComponent,
+  title: 'Library/Molecules/Simulation/BaseDeck',
+  argTypes: {
+    deckConfig: {
+      options: ['single slot deck', 'staging area deck', 'waste chute deck'],
+      control: { type: 'radio' },
+    },
+  },
+} as Meta
+
+export default meta
+type Story = StoryObj<React.ComponentProps<typeof BaseDeckComponent>>
+
+const getDeckConfig = (args: any): DeckConfiguration => {
+  switch (args.deckConfig) {
+    case 'staging area deck':
+      return EXTENDED_DECK_CONFIG_FIXTURE
+    case 'waste chute deck':
+      return WASTE_CHUTE_DECK_CONFIG_FIXTURE
+    default:
+      return STANDARD_SLOT_DECK_CONFIG_FIXTURE
+  }
+}
+
+export const BaseDeck: Story = {
+  args: {
+    robotType: FLEX_ROBOT_TYPE,
+    deckConfig: EXTENDED_DECK_CONFIG_FIXTURE,
+    labwareOnDeck: [
+      {
+        labwareLocation: { slotName: 'C2' },
+        definition: fixture96Plate as LabwareDefinition2,
+      },
+      {
+        labwareLocation: { slotName: 'C3' },
+        definition: fixtureTiprack1000ul as LabwareDefinition2,
+      },
+    ],
+    modulesOnDeck: [
+      {
+        moduleLocation: { slotName: 'B1' },
+        moduleModel: THERMOCYCLER_MODULE_V2,
+        nestedLabwareDef: fixture96Plate as LabwareDefinition2,
+        innerProps: { lidMotorState: 'open' },
+      },
+      {
+        moduleLocation: { slotName: 'D1' },
+        moduleModel: TEMPERATURE_MODULE_V2,
+        nestedLabwareDef: fixture96Plate as LabwareDefinition2,
+      },
+      {
+        moduleLocation: { slotName: 'B3' },
+        moduleModel: HEATERSHAKER_MODULE_V1,
+        nestedLabwareDef: fixture96Plate as LabwareDefinition2,
+      },
+      {
+        moduleLocation: { slotName: 'D2' },
+        moduleModel: MAGNETIC_BLOCK_V1,
+        nestedLabwareDef: fixture96Plate as LabwareDefinition2,
+      },
+    ],
+    darkFill: 'rebeccapurple',
+    lightFill: 'lavender',
+  },
+  render: args => {
+    const deckConfig = getDeckConfig(args)
+    return <BaseDeckComponent {...args} deckConfig={deckConfig} />
+  },
+}