@opentrons/components 0.1.7-alpha.1 → 0.2.0-alpha.1

package/src/controls/styles.module.css

@@ -1,103 +0,0 @@
-@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

@@ -1,31 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,130 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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>
-  )
-}