@opentrons/components 0.1.6-alpha.8 → 0.1.7-alpha.0

package/src/forms/Select.module.css

@@ -0,0 +1,118 @@
+/* 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) {
+    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 */
+    display: flex;
+    position: relative;
+    background-color: var(--c-light-gray);
+    border: none;
+    padding: 0.25rem 0;
+    outline: none;
+    border-radius: var(--bd-radius-form-field);
+    height: 1.75rem;
+    box-shadow: 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) {
+    font-size: var(--fs-caption); /* from legacy --font-form-caption */
+    font-weight: var(--fw-semibold); /* from legacy --font-form-caption */
+    color: var(--c-med-gray); /* from legacy --font-form-caption */
+    text-transform: uppercase;
+    margin-left: 0.5rem;
+  }
+
+  & :global(.ot_select__single-value) {
+    display: flex;
+  }
+
+  & :global(.ot_select__group):not(:first-child) {
+    margin-top: 0.25rem;
+    border-top: 1px solid color-mod(var(--c-med-gray) alpha(0.4));
+    padding-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 {
+  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 */
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 99;
+  background-color: var(--c-white);
+  box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
+  border-bottom-left-radius: var(--bd-radius-form-field);
+  border-bottom-right-radius: var(--bd-radius-form-field);
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.menu_control_bridge {
+  position: absolute;
+  background-color: var(--c-white);
+  top: calc(100% - 2px);
+  left: 0;
+  right: 0;
+  z-index: 99;
+  height: 4px;
+}

package/src/forms/Select.stories.tsx

@@ -0,0 +1,117 @@
+import type * as React from 'react'
+
+import { Select } from './Select'
+import styles from './Select.module.css'
+
+import type { Story, Meta } from '@storybook/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

@@ -0,0 +1,132 @@
+import ReactSelect, { components as reactSelectComponents } from 'react-select'
+
+import cx from 'classnames'
+
+import { Icon } from '../icons'
+import styles from './Select.module.css'
+import type {
+  DropdownIndicatorProps,
+  Props as ReactSelectProps,
+  MenuProps,
+  StylesConfig,
+  CSSObjectWithLabel,
+} 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

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

@@ -0,0 +1,94 @@
+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 { SelectProps } from './Select'
+import type { SelectOption } from '.'
+
+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

@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+import { ToggleField as ToggleFieldComponent } from './ToggleField'
+
+import type { Story, Meta } 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

@@ -0,0 +1,60 @@
+import cx from 'classnames'
+import { Icon } from '../icons'
+
+import type { ChangeEvent } from 'react'
+
+import styles from './forms.module.css'
+
+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>
+  )
+}

package/src/forms/__tests__/DeprecatedCheckboxField.test.tsx

@@ -0,0 +1,5 @@
+import { describe, it } from 'vitest'
+
+describe('DeprecatedCheckboxField', () => {
+  it.todo('replace deprecated enzyme test')
+})

package/src/forms/__tests__/InputField.test.tsx

@@ -0,0 +1,5 @@
+import { describe, it } from 'vitest'
+
+describe('InputField', () => {
+  it.todo('replace deprecated enzyme test')
+})

package/src/forms/__tests__/Select.test.tsx

@@ -0,0 +1,5 @@
+import { describe, it } from 'vitest'
+
+describe('Select', () => {
+  it.todo('replace deprecated enzyme test')
+})

package/src/forms/__tests__/SelectField.test.tsx

@@ -0,0 +1,5 @@
+import { describe, it } from 'vitest'
+
+describe('SelectField', () => {
+  it.todo('replace deprecated enzyme test')
+})

package/src/forms/__tests__/ToggleField.test.tsx

@@ -0,0 +1,5 @@
+import { describe, it } from 'vitest'
+
+describe('ToggleField', () => {
+  it.todo('replace deprecated enzyme test')
+})