@opentrons/components 0.1.6-alpha.9 → 0.1.7-alpha.1

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 { Meta, Story } 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,95 @@
+import cx from 'classnames'
+
+import { Icon } from '../icons'
+import styles from './forms.module.css'
+
+import type { ChangeEventHandler, ComponentProps } from 'react'
+
+/**
+ * Checkbox Field Properties.
+ */
+export interface DeprecatedCheckboxFieldProps {
+  /** change handler */
+  onChange: 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?: 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/FormGroup.stories.tsx

@@ -0,0 +1,30 @@
+import { DeprecatedCheckboxField } from './DeprecatedCheckboxField.stories'
+import { FormGroup as FormGroupComponent } from './FormGroup'
+
+import type { Meta, Story } from '@storybook/react'
+import type * as React from '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,55 @@
+import cx from 'classnames'
+
+import { Icon } from '../icons'
+import styles from './forms.module.css'
+
+import type { ReactNode } from 'react'
+import type { HoverTooltipHandlers } from '../tooltips'
+
+export interface FormGroupProps {
+  /** text label */
+  label?: string
+  /** form content */
+  children?: 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,42 @@
+import * as React from 'react'
+
+import { Box, SIZE_6 } from '@opentrons/components'
+
+import { LegacyInputField as InputFieldComponent } from './LegacyInputField'
+
+import type { Meta, Story } 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,130 @@
+import cx from 'classnames'
+
+import { Icon } from '../icons'
+import styles from './forms.module.css'
+
+import type {
+  ChangeEventHandler,
+  FocusEvent,
+  MouseEvent,
+  ReactNode,
+} from 'react'
+
+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?: 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?: 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: MouseEvent<HTMLInputElement>) => unknown
+  /** focus handler */
+  onFocus?: (event: FocusEvent<HTMLInputElement>) => unknown
+  /** blur handler */
+  onBlur?: (event: 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,45 @@
+import * as React from 'react'
+
+import { Box, SIZE_6 } from '@opentrons/components'
+
+import { RadioGroup as RadioGroupComponent } from './RadioGroup'
+
+import type { Meta, Story } 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,89 @@
+import cx from 'classnames'
+
+import { Icon } from '../icons'
+import styles from './forms.module.css'
+
+import type { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react'
+
+export interface RadioOption {
+  name: string
+  value: string
+  children?: ReactNode
+}
+
+export interface RadioGroupProps {
+  /** blur handler */
+  onBlur?: FocusEventHandler<HTMLInputElement>
+  /** change handler */
+  onChange: 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>
+  )
+}