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

package/src/controls/LabeledCheckbox.tsx

@@ -1,36 +0,0 @@
-import cx from 'classnames'
-
-import { DeprecatedCheckboxField } from '../forms'
-import { LabeledControl } from './LabeledControl'
-import styles from './styles.module.css'
-
-import type { ChangeEventHandler, ReactNode } from 'react'
-
-export interface LabeledCheckboxProps {
-  label: string
-  name: string
-  value: boolean
-  className?: string
-  children: ReactNode
-  onChange: ChangeEventHandler<HTMLInputElement>
-}
-
-export function LabeledCheckbox(props: LabeledCheckboxProps): JSX.Element {
-  const { label, value, name, onChange } = props
-  const checkboxClass = cx(styles.labeled_checkbox, props.className)
-  return (
-    <LabeledControl
-      label={label}
-      control={
-        <DeprecatedCheckboxField
-          className={checkboxClass}
-          name={name}
-          value={value}
-          onChange={onChange}
-        />
-      }
-    >
-      {props.children}
-    </LabeledControl>
-  )
-}

package/src/controls/LabeledControl.tsx

@@ -1,24 +0,0 @@
-import { ControlInfo } from './ControlInfo'
-import styles from './styles.module.css'
-
-import type { ReactNode } from 'react'
-
-export interface LabeledControlProps {
-  label: string
-  control: ReactNode
-  children?: ReactNode
-}
-
-export function LabeledControl(props: LabeledControlProps): JSX.Element {
-  const { label, control, children } = props
-
-  return (
-    <div className={styles.labeled_control_wrapper}>
-      <div className={styles.labeled_control}>
-        <p className={styles.labeled_control_label}>{label}</p>
-        {control}
-      </div>
-      {children && <ControlInfo>{children}</ControlInfo>}
-    </div>
-  )
-}

package/src/controls/LabeledRadioGroup.tsx

@@ -1,26 +0,0 @@
-import { RadioGroup } from '../forms'
-import { StackedLabeledControl } from './StackedLabeledControl'
-
-import type { ReactNode } from 'react'
-import type { RadioGroupProps } from '../forms'
-
-export interface LabeledRadioGroupProps extends RadioGroupProps {
-  label: string
-  children: ReactNode
-  'data-test'?: string
-}
-
-export function LabeledRadioGroup(props: LabeledRadioGroupProps): JSX.Element {
-  const { label, value, options, onChange } = props
-
-  return (
-    <StackedLabeledControl
-      label={label}
-      control={
-        <RadioGroup value={value} options={options} onChange={onChange} />
-      }
-    >
-      {props.children}
-    </StackedLabeledControl>
-  )
-}

package/src/controls/StackedLabeledControl.tsx

@@ -1,28 +0,0 @@
-import { ControlInfo } from './ControlInfo'
-import styles from './styles.module.css'
-
-import type { ReactNode } from 'react'
-
-export interface StackedLabeledControlProps {
-  label: string
-  control: ReactNode
-  children?: 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

@@ -1,69 +0,0 @@
-import { css } from 'styled-components'
-
-import { COLORS } from '../helix-design-system'
-import { Icon } from '../icons'
-import { Btn, Flex } from '../primitives'
-
-import type { MouseEvent } from 'react'
-import type { StyleProps } from '../primitives'
-
-const TOGGLE_DISABLED_STYLES = css`
-  color: ${COLORS.grey50};
-
-  &:hover {
-    color: ${COLORS.grey55};
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 3px ${COLORS.yellow50};
-  }
-
-  &:disabled {
-    color: ${COLORS.grey30};
-  }
-`
-
-const TOGGLE_ENABLED_STYLES = css`
-  color: ${COLORS.blue50};
-
-  &:hover {
-    color: ${COLORS.blue55};
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 3px ${COLORS.yellow50};
-  }
-
-  &:disabled {
-    color: ${COLORS.grey30};
-  }
-`
-
-interface ToggleButtonProps extends StyleProps {
-  toggledOn: boolean
-  label?: string | null
-  disabled?: boolean | null
-  id?: string
-  onClick?: (e: MouseEvent) => void
-}
-
-export function ToggleButton(props: ToggleButtonProps): JSX.Element {
-  const { label, toggledOn, disabled, size, ...buttonProps } = props
-  const iconName = toggledOn ? 'ot-toggle-input-on' : 'ot-toggle-input-off'
-
-  return (
-    <Btn
-      disabled={disabled ?? false}
-      role="switch"
-      aria-label={label}
-      aria-checked={toggledOn}
-      size={size ?? '2rem'}
-      css={props.toggledOn ? TOGGLE_ENABLED_STYLES : TOGGLE_DISABLED_STYLES}
-      {...buttonProps}
-    >
-      <Flex>
-        <Icon name={iconName} size="2rem" />
-      </Flex>
-    </Btn>
-  )
-}

package/src/controls/index.ts

@@ -1,8 +0,0 @@
-// 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 './LabeledButton'
-export * from './LabeledCheckbox'
-export * from './LabeledRadioGroup'

package/src/controls/styles.module.css

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