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

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>
-  )
-}

package/src/forms/Select.module.css

@@ -1,118 +0,0 @@
-/* stylelint-disable selector-class-pattern */
-@import '../index.module.css';
-
-/* NOTE(mc, 2021-04-27): this class only used by storybook */
-.example_select_override {
-  & :global(.ot_select__control) {
-    background-color: blue;
-  }
-}
-
-.select {
-  position: relative;
-
-  & :global(.ot_select__control) {
-    position: relative;
-    display: flex;
-    height: 1.75rem;
-    padding: 0.25rem 0;
-    border: none;
-    border-radius: var(--bd-radius-form-field);
-    background-color: var(--c-light-gray);
-    box-shadow: none;
-    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 */
-    outline: none;
-  }
-
-  & :global(.ot_select__control--menu-is-open) {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  & :global(.ot_select__control--menu-is-open),
-  & :global(.ot_select__control--is-focused) {
-    background-color: var(--c-white);
-    box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
-  }
-
-  & :global(.ot_select__option) {
-    display: flex;
-    padding: 0.25rem 0.75rem;
-    cursor: default;
-  }
-
-  & :global(.ot_select__option--is-focused) {
-    background-color: var(--c-light-gray);
-  }
-
-  & :global(.ot_select__option--is-disabled) {
-    color: var(--c-font-disabled);
-  }
-
-  & :global(.ot_select__group-heading) {
-    margin-left: 0.5rem;
-    color: var(--c-med-gray); /* from legacy --font-form-caption */
-    font-size: var(--fs-caption); /* from legacy --font-form-caption */
-    font-weight: var(--fw-semibold); /* from legacy --font-form-caption */
-    text-transform: uppercase;
-  }
-
-  & :global(.ot_select__single-value) {
-    display: flex;
-  }
-
-  & :global(.ot_select__group):not(:first-child) {
-    padding-top: 0.25rem;
-    border-top: 1px solid color-mod(var(--c-med-gray) alpha(0.4));
-    margin-top: 0.25rem;
-  }
-}
-
-.dropdown_indicator {
-  position: absolute;
-  top: 0.25rem;
-  right: 0.25rem;
-  width: 1.25rem;
-  pointer-events: none;
-
-  & > svg {
-    color: var(--c-dark-gray);
-  }
-
-  &.flipped > svg {
-    transform: rotate(180deg);
-  }
-}
-
-.dropdown_indicator_icon {
-  width: 100%;
-}
-
-.menu {
-  position: absolute;
-  z-index: 99;
-  top: 100%;
-  right: 0;
-  left: 0;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  background-color: var(--c-white);
-  border-bottom-left-radius: var(--bd-radius-form-field);
-  border-bottom-right-radius: var(--bd-radius-form-field);
-  box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
-  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 */
-}
-
-.menu_control_bridge {
-  position: absolute;
-  z-index: 99;
-  top: calc(100% - 2px);
-  right: 0;
-  left: 0;
-  height: 4px;
-  background-color: var(--c-white);
-}

package/src/forms/Select.stories.tsx

@@ -1,116 +0,0 @@
-import { Select } from './Select'
-import styles from './Select.module.css'
-
-import type { Meta, Story } from '@storybook/react'
-import type * as React from 'react'
-
-export default {
-  title: 'Library/Molecules/Forms/Select',
-  component: Select,
-} as Meta
-
-const Template: Story<React.ComponentProps<typeof Select>> = args => (
-  <Select {...args} />
-)
-export const Basic = Template.bind({})
-Basic.parameters = {
-  docs: {
-    description: {
-      component:
-        'Thin wrapper around `react-select` to apply our Opentrons-specific styles. All props are passed directly to [`react-select`](https://react-select.com/props) except for `styles`, `components`, and `classNamePrefix`. The `className` prop appends to the `className` we pass `react-select`. Those props are not passed directly because they provide the base styling of the component',
-    },
-  },
-}
-Basic.args = {
-  options: [
-    { label: 'DNA', value: 'dna' },
-    { label: 'RNA', value: 'rna' },
-    { label: 'Protein', value: 'protein', isDisabled: true },
-  ],
-}
-
-export const GroupedOptions = Template.bind({})
-GroupedOptions.parameters = {
-  docs: {
-    description: {
-      component: 'You can also pass grouped options:',
-    },
-  },
-}
-GroupedOptions.args = {
-  options: [
-    {
-      label: 'Nucleic Acids',
-      options: [
-        { label: 'DNA', value: 'dna' },
-        { label: 'RNA', value: 'rna' },
-      ],
-    },
-    {
-      label: 'Polypeptides',
-      options: [
-        { label: 'Dipeptide', value: 'dipeptide' },
-        { label: 'Tripeptide', value: 'Tripeptide' },
-      ],
-    },
-  ],
-}
-
-export const Controlled = Template.bind({})
-Controlled.parameters = {
-  docs: {
-    description: {
-      component:
-        'Passing `value` controls the input. **Note that `value` has the same format as an entry in `options`**',
-    },
-  },
-}
-Controlled.args = {
-  value: { label: 'DNA', value: 'dna' },
-  options: [
-    { label: 'DNA', value: 'dna' },
-    { label: 'RNA', value: 'rna' },
-    { label: 'Protein', value: 'protein' },
-  ],
-}
-
-export const FormattedOptionLabel = Template.bind({})
-FormattedOptionLabel.parameters = {
-  docs: {
-    description: {
-      component:
-        'You can control the renders of individual options with the `formatOptionLabel` prop:',
-    },
-  },
-}
-FormattedOptionLabel.args = {
-  options: [
-    { label: 'DNA', value: 'dna' },
-    { label: 'RNA', value: 'rna' },
-    { label: 'Protein', value: 'protein' },
-  ],
-  formatOptionLabel: (option, { context }) =>
-    context === 'menu' && option.value === 'rna' ? (
-      <span style={{ color: 'green' }}>{option.label}</span>
-    ) : (
-      option.label
-    ),
-}
-
-export const StyleOverride = Template.bind({})
-StyleOverride.parameters = {
-  docs: {
-    description: {
-      component:
-        "To override any styling, we use [`react-select`'s BEM](https://react-select.com/styles#using-classnames) class names with our specific prefix, which is `ot_select`. See `SelectField` for a specific example, where the background color of the `Control` element is modified if the field has an error",
-    },
-  },
-}
-StyleOverride.args = {
-  className: styles.example_select_override,
-  options: [
-    { label: 'DNA', value: 'dna' },
-    { label: 'RNA', value: 'rna' },
-    { label: 'Protein', value: 'protein' },
-  ],
-}

package/src/forms/Select.tsx

@@ -1,132 +0,0 @@
-import ReactSelect, { components as reactSelectComponents } from 'react-select'
-import cx from 'classnames'
-
-import { Icon } from '../icons'
-import styles from './Select.module.css'
-
-import type {
-  CSSObjectWithLabel,
-  DropdownIndicatorProps,
-  MenuProps,
-  Props as ReactSelectProps,
-  StylesConfig,
-} from 'react-select'
-import type { POSITION_ABSOLUTE, POSITION_FIXED } from '../styles'
-
-export { reactSelectComponents }
-
-export const PLACEMENT_AUTO: 'auto' = 'auto'
-export const PLACEMENT_BOTTOM: 'bottom' = 'bottom'
-export const PLACEMENT_TOP: 'top' = 'top'
-
-export const CONTEXT_MENU: 'menu' = 'menu'
-export const CONTEXT_VALUE: 'value' = 'value'
-
-export const SELECT_CX_PREFIX = 'ot_select'
-
-export type ChangeAction =
-  | 'select-option'
-  | 'deselect-option'
-  | 'remove-value'
-  | 'pop-value'
-  | 'set-value'
-  | 'clear'
-  | 'create-option'
-
-export interface SelectOption {
-  value: string
-  label?: string
-  isDisabled?: boolean
-}
-
-export interface SelectOptionGroup {
-  options: SelectOption[]
-  label?: string
-}
-
-// deprecated this type shouldn't be directly needed as the types for react-select
-// combine options and groups for us now
-export type SelectOptionOrGroup = SelectOption | SelectOptionGroup
-
-export type SelectPlacement =
-  | typeof PLACEMENT_AUTO
-  | typeof PLACEMENT_BOTTOM
-  | typeof PLACEMENT_TOP
-
-export type SelectPosition = typeof POSITION_ABSOLUTE | typeof POSITION_FIXED
-
-export type SelectOptionContext = typeof CONTEXT_MENU | typeof CONTEXT_VALUE
-
-export type SelectProps = ReactSelectProps<SelectOption>
-
-const VOID_STYLE: unknown = undefined
-const NO_STYLE_FN = (): CSSObjectWithLabel => VOID_STYLE as CSSObjectWithLabel
-
-const CLEAR_STYLES: StylesConfig<SelectOption> = {
-  clearIndicator: NO_STYLE_FN,
-  container: NO_STYLE_FN,
-  control: NO_STYLE_FN,
-  dropdownIndicator: NO_STYLE_FN,
-  group: NO_STYLE_FN,
-  groupHeading: NO_STYLE_FN,
-  indicatorsContainer: NO_STYLE_FN,
-  indicatorSeparator: NO_STYLE_FN,
-  input: (styles: CSSObjectWithLabel) => ({
-    ...styles,
-    zIndex: 2,
-    position: 'absolute',
-  }),
-  loadingIndicator: NO_STYLE_FN,
-  loadingMessage: NO_STYLE_FN,
-  menu: NO_STYLE_FN,
-  menuList: NO_STYLE_FN,
-  multiValue: NO_STYLE_FN,
-  multiValueLabel: NO_STYLE_FN,
-  multiValueRemove: NO_STYLE_FN,
-  option: NO_STYLE_FN,
-  // the following should not be cleared to ensure proper positioning
-  // included as comments so we can see what we're not touching
-  // noOptionsMessage: NO_STYLE_FN,
-  // menuPortal: _ => _,
-  // placeholder: _ => _,
-  // singleValue: _ => _,
-  // valueContainer: _ => _,
-}
-
-export function Select(props: SelectProps): JSX.Element {
-  return (
-    <ReactSelect
-      {...props}
-      styles={CLEAR_STYLES}
-      classNamePrefix={SELECT_CX_PREFIX}
-      className={cx(styles.select, props.className)}
-      components={{ DropdownIndicator, Menu }}
-    />
-  )
-}
-
-function DropdownIndicator(
-  props: DropdownIndicatorProps<SelectOption>
-): JSX.Element {
-  return (
-    <reactSelectComponents.DropdownIndicator {...props}>
-      <div
-        className={cx(styles.dropdown_indicator, {
-          [styles.flipped]: props.selectProps.menuIsOpen,
-        })}
-      >
-        <Icon
-          name="menu-down-pd"
-          className={cx(styles.dropdown_indicator_icon)}
-        />
-      </div>
-    </reactSelectComponents.DropdownIndicator>
-  )
-}
-
-const Menu = (props: MenuProps<SelectOption>): JSX.Element => (
-  <reactSelectComponents.Menu {...props}>
-    <div className={styles.menu}>{props.children}</div>
-    <div className={styles.menu_control_bridge} />
-  </reactSelectComponents.Menu>
-)

package/src/forms/SelectField.module.css

@@ -1,16 +0,0 @@
-@import '@opentrons/components/styles';
-
-.select_field.error {
-  & :global(.ot_select__control) {
-    background-color: var(--c-warning-light);
-  }
-}
-
-.select_caption {
-  font-size: var(--fs-caption);
-
-  &.error {
-    color: var(--c-warning-dark);
-    font-weight: var(--fw-semibold);
-  }
-}

package/src/forms/SelectField.tsx

@@ -1,94 +0,0 @@
-import cx from 'classnames'
-import find from 'lodash/find'
-
-import { Select } from './Select'
-import styles from './SelectField.module.css'
-
-import type { ReactNode } from 'react'
-import type { ActionMeta, MultiValue, SingleValue } from 'react-select'
-import type { SelectOption } from '.'
-import type { SelectProps } from './Select'
-
-export interface SelectFieldProps {
-  /** optional HTML id for container */
-  id?: SelectProps['id']
-  /** field name */
-  name: NonNullable<SelectProps['name']>
-  /** react-Select option, usually label, value */
-  options: NonNullable<SelectProps['options']>
-  /** currently selected value */
-  value?: string | null
-  /** disable the select */
-  disabled?: SelectProps['isDisabled']
-  /** optional placeholder  */
-  placeholder?: SelectProps['placeholder']
-  /** menuPosition prop to send to react-select */
-  menuPosition?: SelectProps['menuPosition']
-  /** render function for the option label passed to react-select */
-  formatOptionLabel?: SelectProps['formatOptionLabel']
-  /** optional className */
-  className?: string
-  /** optional caption. hidden when `error` is given */
-  caption?: ReactNode
-  /** if included, use error style and display error instead of caption */
-  error?: string | null
-  /** change handler called with (name, value) */
-  onValueChange?: (
-    name: string,
-    value: string,
-    actionMeta: ActionMeta<SelectOption>
-  ) => void
-  /** blur handler called with (name) */
-  onLoseFocus?: (name: string) => void
-}
-
-export function SelectField(props: SelectFieldProps): JSX.Element {
-  const {
-    id,
-    name,
-    options,
-    disabled,
-    placeholder,
-    menuPosition,
-    formatOptionLabel,
-    className,
-    error,
-    onValueChange,
-    onLoseFocus,
-  } = props
-  // @ts-expect-error(mc, 2021-03-19): resolve this error
-  const allOptions = options.flatMap(og => og.options || [og])
-  const value = find(allOptions, opt => opt.value === props.value) || null
-  const caption = error || props.caption
-  // @ts-expect-error(sa, 2021-6-23): cast value to boolean
-  const captionCx = cx(styles.select_caption, { [styles.error]: error })
-  // @ts-expect-error(sa, 2021-6-23): cast value to boolean
-  const fieldCx = cx(styles.select_field, { [styles.error]: error }, className)
-
-  return (
-    <div>
-      <Select
-        className={fieldCx}
-        id={id}
-        name={name}
-        options={options}
-        value={value}
-        isDisabled={disabled}
-        placeholder={placeholder}
-        menuPosition={menuPosition}
-        formatOptionLabel={formatOptionLabel}
-        onChange={(
-          opt: SingleValue<SelectOption> | MultiValue<SelectOption>,
-          e: ActionMeta<SelectOption>
-        ) => {
-          const value = (opt as SelectOption).value
-          onValueChange?.(name, value, e)
-        }}
-        onBlur={() => {
-          if (onLoseFocus != null) onLoseFocus(name)
-        }}
-      />
-      {caption != null ? <p className={captionCx}>{caption}</p> : null}
-    </div>
-  )
-}

package/src/forms/ToggleField.stories.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react'
-
-import { ToggleField as ToggleFieldComponent } from './ToggleField'
-
-import type { Meta, Story } from '@storybook/react'
-
-const Template: Story<
-  React.ComponentProps<typeof ToggleFieldComponent>
-> = args => {
-  const [isOn, setIsOn] = React.useState<boolean>(false)
-  return (
-    <ToggleFieldComponent
-      {...args}
-      onChange={e => {
-        setIsOn(!isOn)
-        args.onChange(e)
-      }}
-      value={isOn}
-    />
-  )
-}
-
-export const ToggleField = Template.bind({})
-ToggleField.args = {
-  label: 'Toggle Me',
-}
-
-export default {
-  title: 'Library/Molecules/Forms/Toggle Field',
-  component: ToggleField,
-} as Meta

package/src/forms/ToggleField.tsx

@@ -1,60 +0,0 @@
-import cx from 'classnames'
-
-import { Icon } from '../icons'
-import styles from './forms.module.css'
-
-import type { ChangeEvent } from 'react'
-
-export interface ToggleFieldProps {
-  /** change handler */
-  onChange: (event: ChangeEvent<HTMLInputElement>) => unknown
-  /** checkbox is checked if value is true */
-  value?: boolean
-  /** classes to apply */
-  className?: string
-  /** classes to apply to inner label text div */
-  labelTextClassName?: string | null | undefined
-  /** name of field in form */
-  name?: string
-  /** label text for toggled off */
-  offLabel?: string
-  /** label text for toggled on */
-  onLabel?: string
-  /** checkbox is disabled if value is true */
-  disabled?: boolean
-  /** html tabindex property */
-  tabIndex?: number
-}
-
-export function ToggleField(props: ToggleFieldProps): JSX.Element {
-  const outerClassName = cx(styles.form_field, props.className, {
-    [styles.toggle_disabled]: props.disabled,
-  })
-
-  const innerDivClassName = cx(styles.toggle_icon, {
-    [styles.toggle_disabled]: props.disabled,
-  })
-
-  return (
-    <label className={outerClassName}>
-      <div className={innerDivClassName}>
-        <Icon
-          name={props.value ? 'ot-toggle-field-on' : 'ot-toggle-field-off'}
-          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}
-      />
-      <div className={cx(props.labelTextClassName, styles.label_text)}>
-        {props.value ? props.onLabel : props.offLabel}
-      </div>
-    </label>
-  )
-}