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

package/src/buttons/Button.tsx

@@ -1,95 +0,0 @@
-import cx from 'classnames'
-import omit from 'lodash/omit'
-
-import { Icon } from '../icons'
-import { BUTTON_TYPE_BUTTON } from '../primitives'
-import styles from './buttons.module.css'
-
-import type { ComponentType, MouseEventHandler, ReactNode } from 'react'
-import type { IconName } from '../icons'
-import type { BUTTON_TYPE_RESET, BUTTON_TYPE_SUBMIT } from '../primitives'
-import type { UseHoverTooltipTargetProps } from '../tooltips'
-
-export interface ButtonProps {
-  /** id attribute */
-  id?: string
-  /** click handler */
-  onClick?: MouseEventHandler
-  /** name attribute */
-  name?: string
-  /** title attribute */
-  title?: string
-  /** disabled attribute (setting disabled removes onClick) */
-  disabled?: boolean | null | undefined
-  /** use hover style even when not hovered */
-  hover?: boolean | null | undefined
-  /** optional Icon name */
-  iconName?: IconName
-  /** classes to apply */
-  className?: string
-  /** inverts the default color/background/border of default button style */
-  inverted?: boolean
-  /** contents of the button */
-  children?: ReactNode
-  /** type of button (default "button") */
-  type?:
-    | typeof BUTTON_TYPE_SUBMIT
-    | typeof BUTTON_TYPE_RESET
-    | typeof BUTTON_TYPE_BUTTON
-  /** ID of form that button is for */
-  form?: string
-  /** custom element or component to use instead of `<button>` */
-  Component?: ComponentType<any> | keyof JSX.IntrinsicElements
-  /** handlers for HoverTooltipComponent */
-  hoverTooltipHandlers?: UseHoverTooltipTargetProps | null | undefined
-  /** html tabindex property */
-  tabIndex?: number
-  /** catch all prop for pass-through props */
-  [name: string]: any
-}
-
-// props to strip if using a custom component
-const STRIP_PROPS = [
-  'inverted',
-  'iconName',
-  'children',
-  'Component',
-  'hoverTooltipHandlers',
-]
-
-/**
- * Basic, un-styled button. You probably want to use a styled button
- * instead. All buttons take the same props.
- *
- * If you need access to the ButtonProps type, you can:
- * ```js
- * import {type ButtonProps} from '@opentrons/components'
- * ```
- * @deprecated Use {@link Btn}
- */
-export function Button(props: ButtonProps): JSX.Element {
-  const { id, name, title, disabled, hover, tabIndex, form } = props
-  const className = cx(props.className, { [styles.hover]: hover })
-  const onClick = !disabled ? props.onClick : undefined
-  const Component: any = props.Component ?? 'button'
-  const type = props.type ?? BUTTON_TYPE_BUTTON
-
-  // pass all props if using a custom component
-  const buttonProps = !props.Component
-    ? { id, name, type, form, title, disabled, onClick, className, tabIndex }
-    : {
-        ...omit(props, STRIP_PROPS),
-        className: cx(className, { [styles.disabled]: disabled }),
-        onClick,
-      }
-
-  // TODO(mc, 2019-04-02): hoverTooltipHandlers should probably be named more
-  // generically, and the Button component should probably be configured as a
-  // ref forwarder
-  return (
-    <Component {...props.hoverTooltipHandlers} {...buttonProps}>
-      {props.iconName && <Icon name={props.iconName} className={styles.icon} />}
-      {props.children}
-    </Component>
-  )
-}

package/src/buttons/DeprecatedPrimaryButton.tsx

@@ -1,24 +0,0 @@
-import cx from 'classnames'
-
-import { Button } from './Button'
-import styles from './buttons.module.css'
-
-import type { ButtonProps } from './Button'
-
-/**
- * Primary application button. Fills its container and has a dark
- * background with white text
- *
- * @deprecated Use {@link PrimaryButton}
- */
-export function DeprecatedPrimaryButton(props: ButtonProps): JSX.Element {
-  const className = cx(styles.button_primary, props.className, {
-    [styles.inverted]: props.inverted,
-  })
-
-  return (
-    <Button {...props} className={className}>
-      {props.children}
-    </Button>
-  )
-}

package/src/buttons/FlatButton.tsx

@@ -1,21 +0,0 @@
-import classnames from 'classnames'
-
-import { Button } from './Button'
-import styles from './buttons.module.css'
-
-import type { ButtonProps } from './Button'
-
-/**
- * Flat-styled button with a default width of `9rem` and no background fill
- */
-export function FlatButton(props: ButtonProps): JSX.Element {
-  const className = classnames(styles.button_flat, props.className, {
-    [styles.inverted]: props.inverted,
-  })
-
-  return (
-    <Button {...props} className={className}>
-      {props.children}
-    </Button>
-  )
-}

package/src/buttons/IconButton.tsx

@@ -1,36 +0,0 @@
-import cx from 'classnames'
-
-import { Icon } from '../icons'
-import styles from './buttons.module.css'
-import { FlatButton } from './FlatButton'
-
-import type { IconProps } from '../icons'
-import type { ButtonProps } from './Button'
-
-interface Props extends ButtonProps {
-  name: IconProps['name']
-  spin?: IconProps['spin']
-}
-
-/**
- * FlatButton variant for a button that is a single icon. Takes props of
- * both Button _and_ Icon. Use `name` to specify icon name.
- *
- * @deprecated Use {@link Btn} and {@link Icon}
- */
-export function IconButton(props: Props): JSX.Element {
-  // TODO(mc, 2020-02-04): ButtonProps::name conflicts with IconProps::name
-  // this component will need to be redone so underlying `button` can still
-  // receive an HTML name for a11y
-  const { name, spin, ...buttonProps } = props
-  const iconProps = { name, spin }
-  const className = cx(styles.button_icon, props.className, {
-    [styles.inverted]: props.inverted,
-  })
-
-  return (
-    <FlatButton {...buttonProps} className={className} iconName={undefined}>
-      <Icon {...iconProps} />
-    </FlatButton>
-  )
-}

package/src/buttons/OutlineButton.tsx

@@ -1,24 +0,0 @@
-import cx from 'classnames'
-
-import { Button } from './Button'
-import styles from './buttons.module.css'
-
-import type { ButtonProps } from './Button'
-
-/**
- * Button with no background fill and a dark border.
- * Use inverted prop for buttons on dark backgrounds.
- *
- * @deprecated Use {@link SecondaryBtn}
- */
-export function OutlineButton(props: ButtonProps): JSX.Element {
-  const className = cx(styles.button_outline, props.className, {
-    [styles.inverted]: props.inverted,
-  })
-
-  return (
-    <Button {...props} className={className}>
-      {props.children}
-    </Button>
-  )
-}

package/src/buttons/buttons.module.css

@@ -1,428 +0,0 @@
-/* button styling */
-@import '../index.module.css';
-
-:root {
-  --button-pad: 0.5rem;
-
-  --button-inverted: {
-    border-color: var(--c-font-light);
-
-    /* VVV from legacy --button-inverted VVV */
-    color: var(--c-font-light);
-
-    &:active {
-      background-color: color-mod(var(--c-bg-dark) tint(10%));
-      font-weight: var(--fw-regular);
-    }
-
-    &:focus {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    &:hover {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    &:disabled,
-    &.disabled {
-      /* from legacy --button-disabled */
-      border-color: var(--c-font-disabled);
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      cursor: default;
-
-      /* from legacy --button-disabled */
-      fill: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
-      /* 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 {
-  position: relative;
-
-  /* VVV from legacy --button-default VVV */
-  display: inline-block;
-
-  /* ^^^ from legacy --button-default ^^^ */
-
-  width: 100%;
-  padding: var(--button-pad);
-  border: none;
-  border-radius: var(--bd-radius-default);
-  background: transparent;
-  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);
-  color: var(--c-font-light);
-  cursor: pointer;
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-semibold);
-  line-height: 1.4;
-  text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
-
-  &: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 {
-    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);
-    font-weight: var(--fw-regular);
-  }
-
-  &.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 */
-    border-color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-
-    background-color: color-mod(var(--c-bg-dark) tint(70%));
-    box-shadow: none;
-    color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    cursor: default;
-
-    /* from legacy --button-disabled */
-    fill: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
-    /* from legacy --button-disabled */
-    pointer-events: none;
-  }
-}
-
-.button_flat {
-  position: relative;
-
-  /* VVV from legacy --button-default VVV */
-  display: inline-block;
-
-  /* ^^^ from legacy --button-default ^^^ */
-
-  width: 9rem;
-  padding: var(--button-pad);
-  border: none;
-  border-radius: var(--bd-radius-default);
-  background: transparent;
-  color: var(--c-font-dark);
-  cursor: pointer;
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-semibold);
-  line-height: 1.4;
-  text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
-
-  &:active {
-    background-color: color-mod(var(--c-bg-light) shade(10%));
-    font-weight: var(--fw-regular);
-  }
-
-  &:disabled,
-  &.disabled {
-    /* from legacy --button-disabled */
-    border-color: var(--c-font-disabled);
-    background-color: transparent;
-
-    /* from legacy --button-disabled */
-    color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    cursor: default;
-
-    /* from legacy --button-disabled */
-    fill: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
-    /* 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%));
-  }
-
-  &.inverted {
-    border-color: var(--c-font-light);
-
-    /* VVV from legacy --button-inverted VVV */
-    color: var(--c-font-light);
-
-    &:active {
-      background-color: color-mod(var(--c-bg-dark) tint(10%));
-      font-weight: var(--fw-regular);
-    }
-
-    &:disabled,
-    &.disabled {
-      /* from legacy --button-disabled */
-      border-color: var(--c-font-disabled);
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      cursor: default;
-
-      /* from legacy --button-disabled */
-      fill: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
-      /* 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 {
-  position: relative;
-
-  /* VVV from legacy --button-default VVV */
-  display: inline-block;
-
-  /* ^^^ from legacy --button-default ^^^ */
-
-  width: 9rem;
-  padding: var(--button-pad);
-  border: 1px solid var(--c-font-dark);
-  border-radius: var(--bd-radius-default);
-  background: transparent;
-  color: var(--c-font-dark);
-  cursor: pointer;
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-semibold);
-  line-height: 1.4;
-  text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
-
-  &:active {
-    background-color: color-mod(var(--c-bg-light) shade(10%));
-    font-weight: var(--fw-regular);
-  }
-
-  &:disabled,
-  &.disabled {
-    /* from legacy --button-disabled */
-    border-color: var(--c-font-disabled);
-    background-color: transparent;
-
-    /* from legacy --button-disabled */
-    color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    cursor: default;
-
-    /* from legacy --button-disabled */
-    fill: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
-    /* 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%));
-  }
-
-  &.inverted {
-    border-color: var(--c-font-light);
-
-    /* VVV from legacy --button-inverted VVV */
-    color: var(--c-font-light);
-
-    &:active {
-      background-color: color-mod(var(--c-bg-dark) tint(10%));
-      font-weight: var(--fw-regular);
-    }
-
-    &:disabled,
-    &.disabled {
-      /* from legacy --button-disabled */
-      border-color: var(--c-font-disabled);
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      cursor: default;
-
-      /* from legacy --button-disabled */
-      fill: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
-      /* 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;
-    width: 100%;
-    height: 100%;
-  }
-
-  &.inverted {
-    color: white;
-    fill: white;
-
-    /* TODO(mc, 2019-03-29): Is this correct? Our icons use only fill */
-    stroke: white;
-
-    &:disabled,
-    &.disabled {
-      /* from legacy --button-disabled */
-      border-color: var(--c-font-disabled);
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      cursor: default;
-
-      /* from legacy --button-disabled */
-      fill: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
-      /* 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>
-  )
-}