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

package/src/controls/LabeledToggle.tsx

@@ -0,0 +1,35 @@
+import type * as React from 'react'
+
+import { LabeledControl } from './LabeledControl'
+import { ToggleButton } from './ToggleButton'
+import styles from './styles.module.css'
+
+export interface LabeledToggleProps {
+  label: string
+  toggledOn: boolean
+  disabled?: boolean
+  children?: React.ReactNode
+  onClick: () => unknown
+  /** optional data test id for the container */
+  'data-test'?: string
+}
+
+export function LabeledToggle(props: LabeledToggleProps): JSX.Element {
+  const { label, toggledOn, disabled, onClick } = props
+
+  return (
+    <LabeledControl
+      label={label}
+      control={
+        <ToggleButton
+          className={styles.labeled_toggle_button}
+          toggledOn={toggledOn}
+          disabled={disabled}
+          onClick={onClick}
+        />
+      }
+    >
+      {props.children}
+    </LabeledControl>
+  )
+}

package/src/controls/StackedLabeledControl.tsx

@@ -0,0 +1,28 @@
+import type * as React from 'react'
+
+import { ControlInfo } from './ControlInfo'
+import styles from './styles.module.css'
+
+export interface StackedLabeledControlProps {
+  label: string
+  control: React.ReactNode
+  children?: React.ReactNode
+}
+
+export function StackedLabeledControl(
+  props: StackedLabeledControlProps
+): JSX.Element {
+  const { label, control, children } = props
+
+  return (
+    <div className={styles.labeled_control_wrapper}>
+      <p className={styles.stacked_labeled_control_label}>{label}</p>
+      {children && (
+        <ControlInfo className={styles.stacked_control_info}>
+          {children}
+        </ControlInfo>
+      )}
+      <div className={styles.stacked_labeled_control}>{control}</div>
+    </div>
+  )
+}

package/src/controls/ToggleButton.tsx

@@ -0,0 +1,25 @@
+// reusable toggle button with on off styling for connect to robot and opt in/out
+import cx from 'classnames'
+import { IconButton } from '../buttons'
+import styles from './styles.module.css'
+
+import type { ButtonProps } from '../buttons'
+
+export interface ToggleButtonProps extends ButtonProps {
+  toggledOn: boolean
+}
+
+export function ToggleButton(props: ToggleButtonProps): JSX.Element {
+  // TODO(mc, 2020-02-04): destructuring `name` to avoid flow error
+  // ButtonProps::name conflicts with IconProps::name, and IconButton
+  // has `name` prop to pass to Icon. IconButton will need to be redone
+  const { toggledOn, name, ...buttonProps } = props
+  const className = cx(styles.robot_item_icon, props.className, {
+    [styles.toggled_on]: toggledOn,
+    [styles.toggled_off]: !toggledOn,
+  })
+
+  const toggleIcon = toggledOn ? 'ot-toggle-switch-on' : 'ot-toggle-switch-off'
+
+  return <IconButton {...buttonProps} name={toggleIcon} className={className} />
+}

package/src/controls/index.ts

@@ -0,0 +1,10 @@
+// TODO: All of these are not actually reusable and shouldn't be in the
+// components library. They belong in the app components (and they also
+// belong in the please-refactor-these-to-use-primitives-and-styled-components
+// category). We should move them all.
+export * from './ToggleButton'
+export * from './LabeledToggle'
+export * from './LabeledButton'
+export * from './LabeledSelect'
+export * from './LabeledCheckbox'
+export * from './LabeledRadioGroup'

package/src/controls/styles.module.css

@@ -0,0 +1,103 @@
+@import '../index.module.css';
+
+:root {
+  --mw-labeled-toggle: 25rem;
+}
+
+/* Toggle Button */
+.toggled_on {
+  fill: #0ec9eb;
+  color: #0ec9eb;
+}
+
+.toggled_off {
+  fill: var(--c-dark-gray);
+}
+
+.labeled_control_wrapper {
+  width: 100%;
+  padding: 1rem;
+  display: block;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid var(--c-light-gray);
+  }
+}
+
+.labeled_control {
+  display: block;
+}
+
+.stacked_labeled_control {
+  display: block;
+  margin-left: 1rem;
+  margin-top: 0.5rem;
+}
+
+.stacked_labeled_control_label {
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+  display: inline-block;
+  font-weight: var(--fw-semibold);
+}
+
+.labeled_control_label {
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+  max-width: var(--mw-labeled-toggle);
+  display: inline-block;
+  font-weight: var(--fw-semibold);
+}
+
+.labeled_toggle_button {
+  float: right;
+  width: 2rem;
+  margin-right: 1rem;
+  padding: 0;
+
+  &:hover {
+    background-color: transparent;
+  }
+}
+
+.labeled_button,
+.labeled_select {
+  float: right;
+  width: 9rem;
+  margin-top: 0.5rem;
+}
+
+.labeled_select {
+  font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
+  font-weight: var(--fw-regular); /* from legacy --font-body-2-dark */
+  color: var(--c-font-dark); /* from legacy --font-body-2-dark */
+}
+
+.labeled_checkbox {
+  float: right;
+}
+
+.stacked_control_info {
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+
+  & > p {
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+    line-height: 1.5;
+  }
+}
+
+.control_info {
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+  max-width: var(--mw-labeled-toggle);
+
+  & > p {
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+    line-height: 1.5;
+  }
+}

package/src/forms/DeprecatedCheckboxField.stories.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+import { DeprecatedCheckboxField as DeprecatedCheckboxComponent } from './DeprecatedCheckboxField'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Molecules/Forms/Deprecated Checkbox Field',
+  component: DeprecatedCheckboxComponent,
+} as Meta
+
+const Template: Story<
+  React.ComponentProps<typeof DeprecatedCheckboxComponent>
+> = args => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(false)
+  return (
+    <DeprecatedCheckboxComponent
+      {...args}
+      onChange={e => {
+        setIsChecked(!isChecked)
+        args.onChange(e)
+      }}
+      value={isChecked}
+    />
+  )
+}
+export const DeprecatedCheckboxField = Template.bind({})
+DeprecatedCheckboxField.args = {
+  label: 'Remember this setting?',
+  isIndeterminate: false,
+}

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,
+}