@opentrons/components 0.1.6-alpha.2 → 0.1.6-alpha.20

package/src/forms/DeprecatedCheckboxField.tsx

@@ -0,0 +1,94 @@
+import type * as React from 'react'
+import cx from 'classnames'
+import { Icon } from '../icons'
+
+import styles from './forms.module.css'
+
+/**
+ * Checkbox Field Properties.
+ */
+export interface DeprecatedCheckboxFieldProps {
+  /** change handler */
+  onChange: React.ChangeEventHandler
+  /** checkbox is checked if value is true */
+  value?: boolean
+  /** classes to apply */
+  className?: string
+  /** classes to apply to inner label text div. Deprecated. use labelProps.className */
+  labelTextClassName?: string | null | undefined
+  /** name of field in form */
+  name?: string
+  /** label text for checkbox */
+  label?: string
+  /** if is included, checkbox will use error style. The content of the string is ignored. */
+  error?: string | null | undefined
+  /** checkbox is disabled if value is true */
+  disabled?: boolean
+  /** html tabindex property */
+  tabIndex?: number
+  /** props passed into label div. TODO IMMEDIATELY what is the Flow type? */
+  labelProps?: React.ComponentProps<'div'>
+  /** if true, render indeterminate icon */
+  isIndeterminate?: boolean
+}
+
+/**
+ * Checkbox Form Field
+ * @deprecated
+ */
+export function DeprecatedCheckboxField(
+  props: DeprecatedCheckboxFieldProps
+): JSX.Element {
+  const error = props.error != null
+  const outerClassName = cx(styles.form_field, props.className, {
+    [styles.checkbox_disabled]: props.disabled,
+  })
+
+  const innerDivClassName = cx(styles.checkbox_icon, {
+    [styles.error]: error,
+    [styles.checkbox_disabled]: props.disabled,
+  })
+
+  // TODO(bc, 2021-03-09): this usage of the indeterminate prop of input
+  // is in react types for input el. Remove ts expect error below and replace with
+  // ref on input el (see: Dan Abramov https://github.com/facebook/react/issues/1798#issuecomment-333414857)
+  const indeterminate = props.isIndeterminate ? 'true' : undefined
+
+  return (
+    <label className={outerClassName}>
+      <div className={innerDivClassName}>
+        <Icon
+          name={
+            props.isIndeterminate
+              ? 'minus-box'
+              : props.value
+              ? 'ot-checkbox'
+              : 'checkbox-blank-outline'
+          }
+          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}
+        /* @ts-expect-error */
+        indeterminate={indeterminate}
+      />
+      <div
+        {...props.labelProps}
+        className={cx(
+          props.labelTextClassName,
+          props.labelProps?.className,
+          styles.label_text
+        )}
+      >
+        {props.label}
+      </div>
+    </label>
+  )
+}

package/src/forms/DropdownField.stories.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+
+import { DropdownField as DropdownFieldComponent } from './DropdownField'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Molecules/Forms/Dropdown Field',
+  argTypes: { onChange: { action: 'clicked' } },
+} as Meta
+
+const Template: Story<
+  React.ComponentProps<typeof DropdownFieldComponent>
+> = args => {
+  const [selectedValue, setSelectedValue] = React.useState<string | null>(null)
+  return (
+    <DropdownFieldComponent
+      {...args}
+      onChange={e => {
+        setSelectedValue(e.target.value)
+        args.onChange(e)
+      }}
+      value={selectedValue}
+    />
+  )
+}
+export const DropdownField = Template.bind({})
+DropdownField.parameters = {
+  docs: {
+    description: {
+      component:
+        '`DropdownField` is similar to `SelectField`, but more normal. It uses a `<select>` component and has an onChange/onBlur/etc that use DOM events. When `value` prop is truthy, the "blank" option isn\'t shown.  When `value` is falsey, the "blank" option appears and is selected. You can\'t get back to blank state once you\'re selected something without external state manipulation. This is similar to how `RadioGroup` works. In order to always allow the user to select a blank value, add an option object to the `options` prop with a blank (empty string) value.',
+    },
+  },
+}
+DropdownField.args = {
+  options: [
+    { name: '', value: '' },
+    { name: 'DNA', value: 'dna' },
+    { name: 'RNA', value: 'rna' },
+    { name: 'Protein', value: 'protein' },
+  ],
+  isIndeterminate: false,
+}

package/src/forms/DropdownField.tsx

@@ -0,0 +1,106 @@
+import type * as React from 'react'
+import cx from 'classnames'
+
+import { Icon } from '..'
+import styles from './forms.module.css'
+
+export interface LegacyDropdownOption {
+  name: string
+  value: string
+  disabled?: boolean
+}
+
+export type Options = LegacyDropdownOption[]
+
+export interface DropdownFieldProps {
+  /** change handler */
+  onChange: React.ChangeEventHandler<HTMLSelectElement>
+  /** focus handler */
+  onFocus?: React.FocusEventHandler<HTMLSelectElement>
+  /** blur handler */
+  onBlur?: React.FocusEventHandler<HTMLSelectElement>
+  /** value that is selected */
+  value?: string | null | undefined
+  /** optional id for the <select> element */
+  id?: string
+  /** name of field in form */
+  name?: string
+  /** Array of {name, value} data */
+  options: Options
+  /** classes to apply */
+  className?: string
+  /** optional caption. hidden when `error` is given */
+  caption?: string
+  /** if included, DropdownField will use error style and display error instead of caption */
+  error?: string | null | undefined
+  /** dropdown is disabled if value is true */
+  disabled?: boolean
+  /** html tabindex property */
+  tabIndex?: number
+  /** automatically focus field on render */
+  autoFocus?: boolean
+  /** if true, render indeterminate unselectable option */
+  isIndeterminate?: boolean
+}
+
+const BLANK_OPTION: LegacyDropdownOption = { name: '', value: '' }
+const INDETERMINATE_OPTION: LegacyDropdownOption = {
+  name: '-',
+  value: '',
+  disabled: true,
+}
+
+export function DropdownField(props: DropdownFieldProps): JSX.Element {
+  let options = []
+  // add in disabled, unselectable "-" mixed option when isIndeterminate is true
+  // add in "blank" option if there is no `value`, unless `options` already has a blank option
+  if (props.isIndeterminate) {
+    options = [INDETERMINATE_OPTION, ...props.options]
+  } else if (props.value || props.options.some(opt => opt.value === '')) {
+    options = props.options
+  } else {
+    options = [BLANK_OPTION, ...props.options]
+  }
+
+  const error = props.error != null
+  const className = cx(props.className, {
+    [styles.error]: error,
+    [styles.dropdown_disabled]: props.disabled,
+  })
+
+  return (
+    <div className={className}>
+      <div className={styles.dropdown_field}>
+        <select
+          id={props.id}
+          value={props.value || ''}
+          name={props.name}
+          onChange={props.onChange}
+          onBlur={props.onBlur}
+          onFocus={props.onFocus}
+          disabled={props.disabled}
+          className={styles.dropdown}
+          tabIndex={props.tabIndex}
+          autoFocus={props.autoFocus}
+        >
+          {options.map(opt => (
+            <option
+              key={opt.value}
+              value={opt.value}
+              disabled={Boolean(opt.disabled)}
+            >
+              {opt.name}
+            </option>
+          ))}
+        </select>
+
+        <div className={styles.dropdown_icon}>
+          <Icon name="menu-down-pd" width="100%" />
+        </div>
+      </div>
+      <div className={styles.input_caption}>
+        <span>{error ? props.error : props.caption}</span>
+      </div>
+    </div>
+  )
+}

package/src/forms/FormGroup.stories.tsx

@@ -0,0 +1,31 @@
+import type * as React from 'react'
+
+import { FormGroup as FormGroupComponent } from './FormGroup'
+import { DeprecatedCheckboxField } from './DeprecatedCheckboxField.stories'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Molecules/Forms/Form Group',
+  argTypes: { onChange: { action: 'clicked' } },
+} as Meta
+
+const Template: Story<
+  React.ComponentProps<typeof FormGroupComponent>
+> = args => <FormGroupComponent {...args} />
+export const FormGroup = Template.bind({})
+FormGroup.args = {
+  label: 'This is a FormGroup',
+  children: [
+    <DeprecatedCheckboxField
+      onChange={e => {}}
+      key="first"
+      label="first field"
+    />,
+    <DeprecatedCheckboxField
+      onChange={e => {}}
+      key="second"
+      label="second field"
+    />,
+  ],
+}

package/src/forms/FormGroup.tsx

@@ -0,0 +1,53 @@
+import type * as React from 'react'
+import cx from 'classnames'
+import { Icon } from '../icons'
+import styles from './forms.module.css'
+import type { HoverTooltipHandlers } from '../tooltips'
+
+export interface FormGroupProps {
+  /** text label */
+  label?: string
+  /** form content */
+  children?: React.ReactNode
+  /** classes to apply */
+  className?: string | null | undefined
+  /** if is included, FormGroup title will use error style. The content of the string is ignored. */
+  error?: string | null | undefined
+  /** enable disabled style. Overridden by truthy `error` */
+  disabled?: boolean | null | undefined
+  /** handlers for HoverTooltipComponent */
+  hoverTooltipHandlers?: HoverTooltipHandlers | null | undefined
+  /** boolean indicating formGroup used in pipette Settings slideout */
+  isPipetteSettingsSlideout?: boolean
+}
+
+export function FormGroup(props: FormGroupProps): JSX.Element {
+  const error = props.error != null
+  const className = cx(props.className, {
+    [styles.error]: error,
+    [styles.disabled]: !error && props.disabled,
+  })
+
+  return (
+    <div className={className}>
+      {props.label && (
+        <div
+          {...props.hoverTooltipHandlers}
+          className={
+            props.isPipetteSettingsSlideout
+              ? styles.form_group_label_pipette_settings_slideout
+              : styles.form_group_label
+          }
+        >
+          {error && (
+            <div className={styles.error_icon}>
+              <Icon name="alert" />
+            </div>
+          )}
+          {props.label}
+        </div>
+      )}
+      {props.children}
+    </div>
+  )
+}

package/src/forms/InputField.stories.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import { Box, SIZE_6 } from '@opentrons/components'
+
+import { LegacyInputField as InputFieldComponent } from './LegacyInputField'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Molecules/Forms/Input Field',
+} as Meta
+
+const Template: Story<React.ComponentProps<typeof InputFieldComponent>> = ({
+  value,
+  onChange,
+  ...args
+}) => {
+  const [controlledValue, setControlledValue] = React.useState('')
+  const secondaryCaption = controlledValue.length + '/12'
+  const error = controlledValue.length > 12 ? 'Too many characters' : undefined
+  return (
+    <Box width={SIZE_6}>
+      <InputFieldComponent
+        {...args}
+        error={error}
+        secondaryCaption={secondaryCaption}
+        value={controlledValue}
+        onChange={e => {
+          setControlledValue(e.target.value)
+        }}
+      />
+    </Box>
+  )
+}
+export const InputField = Template.bind({})
+InputField.args = {
+  label: 'Input field',
+  placeholder: 'Placeholder Text',
+  units: 'μL',
+  caption: 'caption here',
+  isIndeterminate: false,
+}

package/src/forms/LegacyInputField.tsx

@@ -0,0 +1,123 @@
+import type * as React from 'react'
+import cx from 'classnames'
+import { Icon } from '../icons'
+import styles from './forms.module.css'
+
+export const INPUT_TYPE_TEXT: 'text' = 'text'
+export const INPUT_TYPE_PASSWORD: 'password' = 'password'
+
+// TODO: Ian 2018-09-14 remove 'label' prop when IngredientPropertiesForm gets updated
+
+export interface LegacyInputFieldProps {
+  /** field is disabled if value is true */
+  disabled?: boolean
+  /** change handler */
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  /** classes to apply to outer element */
+  className?: string
+  /** inline label text. DEPRECATED */
+  label?: string
+  /** classes to apply to inner label text div */
+  labelTextClassName?: string | null | undefined
+  /** name of field in form */
+  name?: string
+  /** optional ID of <input> element */
+  id?: string
+  /** placeholder text */
+  placeholder?: string
+  /** optional suffix component, appears to the right of input text */
+  units?: React.ReactNode // TODO: Ian 2018-10-30 rename to 'suffix'
+  /** current value of text in box, defaults to '' */
+  value?: string | null | undefined
+  /** if included, InputField will use error style and display error instead of caption */
+  error?: string | null | undefined
+  /** optional caption. hidden when `error` is given */
+  caption?: string | null | undefined
+  /** appears to the right of the caption. Used for character limits, eg '0/45' */
+  secondaryCaption?: string | null | undefined
+  /** optional input type (default "text") */
+  type?: typeof INPUT_TYPE_TEXT | typeof INPUT_TYPE_PASSWORD
+  /** mouse click handler */
+  onClick?: (event: React.MouseEvent<HTMLInputElement>) => unknown
+  /** focus handler */
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown
+  /** blur handler */
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown
+  /** makes input field read-only */
+  readOnly?: boolean | undefined
+  /** html tabindex property */
+  tabIndex?: number
+  /** automatically focus field on render */
+  autoFocus?: boolean
+  /** if true, clear out value and add '-' placeholder */
+  isIndeterminate?: boolean
+}
+
+/**
+ * @deprecated Use `InputField`
+ */
+
+export function LegacyInputField(props: LegacyInputFieldProps): JSX.Element {
+  const error = props.error != null
+  const labelClass = cx(styles.form_field, props.className, {
+    [styles.error]: error,
+    [styles.disabled]: props.disabled,
+  })
+
+  if (!props.label) {
+    return (
+      <div className={labelClass}>
+        <Input {...props} />
+      </div>
+    )
+  }
+
+  return (
+    <label className={labelClass}>
+      <div className={cx(props.labelTextClassName, styles.label_text)}>
+        {props.label && error && (
+          <div className={styles.error_icon}>
+            <Icon name="alert" />
+          </div>
+        )}
+        {props.label}
+      </div>
+      <Input {...props} />
+    </label>
+  )
+}
+
+// TODO(mc, 2018-02-21): maybe simplify further and split out?
+function Input(props: LegacyInputFieldProps): JSX.Element {
+  const error = props.error != null
+  const value = props.isIndeterminate ? '' : props.value ?? ''
+  const placeHolder = props.isIndeterminate ? '-' : props.placeholder
+
+  return (
+    <div className={styles.input_field_container}>
+      <div className={styles.input_field}>
+        <input
+          disabled={props.disabled}
+          id={props.id}
+          type={props.type ?? INPUT_TYPE_TEXT}
+          value={value}
+          name={props.name}
+          placeholder={placeHolder}
+          onChange={props.disabled ? undefined : props.onChange}
+          onFocus={props.disabled ? undefined : props.onFocus}
+          onBlur={props.onBlur}
+          onClick={props.disabled ? undefined : props.onClick}
+          readOnly={props.readOnly}
+          tabIndex={props.tabIndex}
+          autoFocus={props.autoFocus}
+        />
+        {props.units && <div className={styles.suffix}>{props.units}</div>}
+      </div>
+      {/* TODO(mc, 2018-10-20): do not render if no caption */}
+      <div className={styles.input_caption}>
+        <span>{error ? props.error : props.caption}</span>
+        <span className={styles.right}>{props.secondaryCaption}</span>
+      </div>
+    </div>
+  )
+}

package/src/forms/RadioGroup.stories.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+import { Box, SIZE_6 } from '@opentrons/components'
+
+import { RadioGroup as RadioGroupComponent } from './RadioGroup'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Molecules/Forms/Radio Group',
+} as Meta
+
+const OPTIONS = [
+  { name: 'Hazelnut', value: 'hazelnut' },
+  { name: 'Chocolate', value: 'chocolate' },
+  { name: 'Ginger', value: 'ginger' },
+]
+
+const Template: Story<React.ComponentProps<typeof RadioGroupComponent>> = ({
+  value,
+  onChange,
+  ...args
+}) => {
+  const [controlledValue, setControlledValue] = React.useState<string>(
+    args?.options?.[0] != null ? args.options[0].value : ''
+  )
+  return (
+    <Box width={SIZE_6}>
+      <RadioGroupComponent
+        {...args}
+        value={controlledValue}
+        onChange={e => {
+          setControlledValue(
+            'value' in e.target ? (e.target.value as string) : ''
+          )
+        }}
+      />
+    </Box>
+  )
+}
+export const RadioGroup = Template.bind({})
+RadioGroup.args = {
+  options: OPTIONS,
+  inline: false,
+}

package/src/forms/RadioGroup.tsx

@@ -0,0 +1,87 @@
+import type * as React from 'react'
+import cx from 'classnames'
+import { Icon } from '../icons'
+import styles from './forms.module.css'
+
+export interface RadioOption {
+  name: string
+  value: string
+  children?: React.ReactNode
+}
+
+export interface RadioGroupProps {
+  /** blur handler */
+  onBlur?: React.FocusEventHandler<HTMLInputElement>
+  /** change handler */
+  onChange: React.ChangeEventHandler
+  /** value that is checked */
+  value?: string
+  /** Array of {name, value} data with optional children */
+  options?: RadioOption[]
+  /** Show radio buttons inline instead of stacked */
+  inline?: boolean
+  /** classes to apply to outer div */
+  className?: string
+  /** classes to apply to inner label text div */
+  labelTextClassName?: string | null | undefined
+  /** if is included, RadioGroup will use error style. The content of the string is ignored. */
+  error?: string | null | undefined
+  /** 'name' attr of input */
+  name?: string
+  /** optional prop to turn radio field blue when checked */
+  useBlueChecked?: boolean
+}
+
+export function RadioGroup(props: RadioGroupProps): JSX.Element {
+  const error = props.error != null
+
+  const outerClassName = cx({
+    [styles.inline]: props.inline,
+    [styles.error]: error,
+  })
+
+  const itemClassName = cx(styles.form_field, props.className, {
+    [styles.inline_item]: props.inline,
+  })
+
+  return (
+    <div className={outerClassName}>
+      {props.options?.map(radio => {
+        const useStyleUpdates =
+          props.useBlueChecked && radio.value === props.value
+        return (
+          <label key={radio.value} id={radio.value} className={itemClassName}>
+            <div
+              className={cx(styles.checkbox_icon, {
+                [styles.checked]: useStyleUpdates,
+              })}
+            >
+              <Icon
+                name={
+                  radio.value === props.value
+                    ? 'radiobox-marked'
+                    : 'radiobox-blank'
+                }
+                width={props.useBlueChecked ? '75%' : '100%'}
+              />
+            </div>
+
+            <input
+              className={cx(styles.input_field, styles.accessibly_hidden)}
+              type="radio"
+              name={props.name}
+              value={radio.value}
+              checked={radio.value === props.value}
+              onBlur={props.onBlur}
+              onChange={props.onChange}
+            />
+            <div className={cx(props.labelTextClassName, styles.label_text)}>
+              {radio.name}
+            </div>
+            {radio.children}
+          </label>
+        )
+      })}
+    </div>
+  )
+}