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

package/src/buttons/buttons.module.css

@@ -1,428 +0,0 @@
-/* button styling */
-@import '../index.module.css';
-
-:root {
-  --button-pad: 0.5rem;
-
-  --button-inverted: {
-    /* VVV from legacy --button-inverted VVV */
-    color: var(--c-font-light);
-    border-color: var(--c-font-light);
-
-    &:active {
-      font-weight: var(--fw-regular);
-      background-color: color-mod(var(--c-bg-dark) tint(10%));
-    }
-
-    &:focus {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    &:hover {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    &:disabled,
-    &.disabled {
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
-      /* from legacy --button-disabled */
-      border-color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      fill: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      cursor: default;
-
-      /* from legacy --button-disabled */
-      pointer-events: none;
-
-      /* from legacy --button-disabled */
-    }
-
-    &.hover {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    /* ^^^ from legacy --button-default ^^^ */
-  }
-}
-
-/* TODO(ka, 2017-2-14): standardize primary button vars */
-
-.button_primary {
-  /* VVV from legacy --button-default VVV */
-  display: inline-block;
-  text-decoration: none;
-  position: relative;
-  line-height: 1.4;
-  border: none;
-  padding: var(--button-pad);
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-semibold);
-  text-align: center;
-  text-transform: uppercase;
-  cursor: pointer;
-  background: transparent;
-  border-radius: var(--bd-radius-default);
-
-  /* ^^^ from legacy --button-default ^^^ */
-
-  width: 100%;
-  color: var(--c-font-light);
-  background-color: var(--c-bg-dark);
-
-  /* TODO(mc, 2017-12-07): pull shadows out to central file */
-  box-shadow:
-    0 0 2px rgba(0, 0, 0, 0.12),
-    0 2px 2px rgba(0, 0, 0, 0.24);
-
-  &:focus {
-    background-color: color-mod(var(--c-bg-dark) shade(30%));
-  }
-
-  &:hover {
-    background-color: color-mod(var(--c-bg-dark) shade(30%));
-  }
-
-  &.hover {
-    background-color: color-mod(var(--c-bg-dark) shade(30%));
-  }
-
-  &:active {
-    font-weight: var(--fw-regular);
-    background-color: color-mod(var(--c-bg-dark) tint(30%));
-
-    /* TODO(mc, 2017-12-07): pull shadows out to central file */
-    box-shadow:
-      0 0 8px rgba(0, 0, 0, 0.12),
-      0 8px 8px rgba(0, 0, 0, 0.24);
-  }
-
-  &.inverted {
-    background-color: var(--c-bg-light);
-    color: var(--c-font-dark);
-
-    &:focus,
-    &:hover,
-    &.hover {
-      background-color: color-mod(var(--c-bg-light) shade(5%));
-    }
-
-    &:active {
-      background-color: color-mod(var(--c-bg-light) shade(10%));
-    }
-  }
-
-  &:disabled,
-  &.disabled {
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
-    /* from legacy --button-disabled */
-    border-color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    fill: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    cursor: default;
-
-    /* from legacy --button-disabled */
-    pointer-events: none;
-
-    /* from legacy --button-disabled */
-
-    background-color: color-mod(var(--c-bg-dark) tint(70%));
-    box-shadow: none;
-    color: var(--c-font-disabled);
-  }
-}
-
-.button_flat {
-  /* VVV from legacy --button-default VVV */
-  display: inline-block;
-  text-decoration: none;
-  position: relative;
-  line-height: 1.4;
-  border: none;
-  padding: var(--button-pad);
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-semibold);
-  text-align: center;
-  text-transform: uppercase;
-  cursor: pointer;
-  color: var(--c-font-dark);
-  background: transparent;
-  border-radius: var(--bd-radius-default);
-
-  &:active {
-    font-weight: var(--fw-regular);
-    background-color: color-mod(var(--c-bg-light) shade(10%));
-  }
-
-  &:disabled,
-  &.disabled {
-    background-color: transparent;
-
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
-    /* from legacy --button-disabled */
-    border-color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    fill: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    cursor: default;
-
-    /* from legacy --button-disabled */
-    pointer-events: none;
-
-    /* from legacy --button-disabled */
-  }
-
-  &:focus {
-    background-color: color-mod(var(--c-med-gray) alpha(25%));
-  }
-
-  &:hover {
-    background-color: color-mod(var(--c-med-gray) alpha(25%));
-  }
-
-  &.hover {
-    background-color: color-mod(var(--c-med-gray) alpha(25%));
-  }
-
-  /* ^^^ from legacy --button-default ^^^ */
-
-  width: 9rem;
-
-  &.inverted {
-    /* VVV from legacy --button-inverted VVV */
-    color: var(--c-font-light);
-    border-color: var(--c-font-light);
-
-    &:active {
-      font-weight: var(--fw-regular);
-      background-color: color-mod(var(--c-bg-dark) tint(10%));
-    }
-
-    &:disabled,
-    &.disabled {
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
-      /* from legacy --button-disabled */
-      border-color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      fill: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      cursor: default;
-
-      /* from legacy --button-disabled */
-      pointer-events: none;
-
-      /* from legacy --button-disabled */
-    }
-
-    &:focus {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    &:hover {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    &.hover {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    /* ^^^ from legacy --button-default ^^^ */
-  }
-}
-
-.button_outline {
-  /* VVV from legacy --button-default VVV */
-  display: inline-block;
-  text-decoration: none;
-  position: relative;
-  line-height: 1.4;
-  padding: var(--button-pad);
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-semibold);
-  text-align: center;
-  text-transform: uppercase;
-  cursor: pointer;
-  color: var(--c-font-dark);
-  background: transparent;
-  border-radius: var(--bd-radius-default);
-
-  &:active {
-    font-weight: var(--fw-regular);
-    background-color: color-mod(var(--c-bg-light) shade(10%));
-  }
-
-  &:disabled,
-  &.disabled {
-    background-color: transparent;
-
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
-    /* from legacy --button-disabled */
-    border-color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    fill: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    cursor: default;
-
-    /* from legacy --button-disabled */
-    pointer-events: none;
-
-    /* from legacy --button-disabled */
-  }
-
-  &:focus {
-    background-color: color-mod(var(--c-med-gray) alpha(25%));
-  }
-
-  &:hover {
-    background-color: color-mod(var(--c-med-gray) alpha(25%));
-  }
-
-  &.hover {
-    background-color: color-mod(var(--c-med-gray) alpha(25%));
-  }
-
-  /* ^^^ from legacy --button-default ^^^ */
-
-  width: 9rem;
-  border: 1px solid var(--c-font-dark);
-
-  &.inverted {
-    /* VVV from legacy --button-inverted VVV */
-    color: var(--c-font-light);
-    border-color: var(--c-font-light);
-
-    &:active {
-      font-weight: var(--fw-regular);
-      background-color: color-mod(var(--c-bg-dark) tint(10%));
-    }
-
-    &:disabled,
-    &.disabled {
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
-      /* from legacy --button-disabled */
-      border-color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      fill: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      cursor: default;
-
-      /* from legacy --button-disabled */
-      pointer-events: none;
-
-      /* from legacy --button-disabled */
-    }
-
-    &:focus {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    &:hover {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    &.hover {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    /* ^^^ from legacy --button-default ^^^ */
-  }
-}
-
-/* style for IconButton */
-
-.button_icon {
-  width: auto;
-
-  & > * {
-    display: block;
-    height: 100%;
-    width: 100%;
-  }
-
-  &.inverted {
-    color: white;
-    fill: white;
-
-    /* TODO(mc, 2019-03-29): Is this correct? Our icons use only fill */
-    stroke: white;
-
-    &:disabled,
-    &.disabled {
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
-      /* from legacy --button-disabled */
-      border-color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      fill: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      cursor: default;
-
-      /* from legacy --button-disabled */
-      pointer-events: none;
-
-      /* from legacy --button-disabled */
-    }
-  }
-}
-
-/* style for the supplementary icon displayed by Button */
-.icon {
-  position: absolute;
-  top: var(--button-pad);
-  left: var(--button-pad);
-  height: calc(100% - 2 * var(--button-pad));
-}

package/src/buttons/index.ts

@@ -1,7 +0,0 @@
-// button components
-
-export * from './Button'
-export * from './FlatButton'
-export * from './DeprecatedPrimaryButton'
-export * from './IconButton'
-export * from './OutlineButton'

package/src/controls/ControlInfo.tsx

@@ -1,13 +0,0 @@
-import styles from './styles.module.css'
-
-import type { ReactNode } from 'react'
-
-export interface ControlInfoProps {
-  children: ReactNode
-  className?: string
-}
-
-export function ControlInfo(props: ControlInfoProps): JSX.Element {
-  const { children, className = styles.control_info } = props
-  return <div className={className}>{children}</div>
-}

package/src/controls/LabeledButton.tsx

@@ -1,28 +0,0 @@
-import cx from 'classnames'
-
-import { OutlineButton } from '../buttons'
-import { LabeledControl } from './LabeledControl'
-import styles from './styles.module.css'
-
-import type { ReactNode } from 'react'
-import type { ButtonProps } from '../buttons'
-
-export interface LabeledButtonProps {
-  label: string
-  buttonProps: ButtonProps
-  children: ReactNode
-}
-
-export function LabeledButton(props: LabeledButtonProps): JSX.Element {
-  const { label, buttonProps } = props
-  const buttonClass = cx(styles.labeled_button, buttonProps.className)
-
-  return (
-    <LabeledControl
-      label={label}
-      control={<OutlineButton {...buttonProps} className={buttonClass} />}
-    >
-      {props.children}
-    </LabeledControl>
-  )
-}

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'