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

package/src/legacy-hardware-sim/ModuleItem.tsx

@@ -1,145 +0,0 @@
-import cx from 'classnames'
-
-import {
-  getModuleDisplayName,
-  MAGNETIC_MODULE_V1,
-  MAGNETIC_MODULE_V2,
-  TEMPERATURE_MODULE_V1,
-  TEMPERATURE_MODULE_V2,
-  THERMOCYCLER_MODULE_V1,
-} from '@opentrons/shared-data'
-
-import { RobotCoordsForeignDiv } from '../hardware-sim/Deck'
-import { Icon } from '../icons'
-import styles from './ModuleItem.module.css'
-
-import type { DeckSlot, ModuleModel } from '@opentrons/shared-data'
-import type { IconName } from '../icons'
-
-const FLIPPED_SLOTS = ['3', '6', '9']
-export interface ModuleProps {
-  /** module model */
-  model: ModuleModel
-  /** display mode: 'default', 'present', 'missing', or 'info' */
-  mode: 'default' | 'present' | 'missing' | 'info'
-  /** slot details of the location of this module */
-  slot: DeckSlot
-  /** USB port detail of the connected module */
-  usbInfoString?: string
-}
-
-/**
- * Legacy App-specific Module Rendering. Removable after Protocol Upload Revamp release
- *
- * @deprecated Use {@link Module}
- */
-export function ModuleItem(props: ModuleProps): JSX.Element {
-  const { model, slot } = props
-  let x = 0
-  let y = 0
-  let { xDimension: width, yDimension: height } = slot.boundingBox
-  const shouldFlip = FLIPPED_SLOTS.includes(slot.id)
-
-  // TODO: BC 2019-7-23 get these from shared-data module defs, once available
-  switch (model) {
-    case MAGNETIC_MODULE_V1:
-    case MAGNETIC_MODULE_V2: {
-      width = 137
-      height = 91
-      x = -7
-      y = 4
-      break
-    }
-    case TEMPERATURE_MODULE_V1:
-    case TEMPERATURE_MODULE_V2: {
-      width = 196
-      height = 91
-      x = -66
-      y = 4
-      break
-    }
-    case THERMOCYCLER_MODULE_V1: {
-      // TODO: BC 2019-07-24 these are taken from snapshots of the cad file, they should
-      // be included in the module spec schema and added to the data
-      width = 172
-      height = 259.7
-      x = -22.125
-    }
-  }
-
-  return (
-    <RobotCoordsForeignDiv
-      width={width}
-      height={height}
-      x={x}
-      y={y - height}
-      transformWithSVG
-      extraTransform={`rotate(${shouldFlip ? 180 : 0}, ${
-        slot.boundingBox.xDimension / 2
-      }, ${slot.boundingBox.yDimension / -2})`}
-      innerDivProps={{
-        className: cx(styles.module, { [styles.flipped]: shouldFlip }),
-      }}
-    >
-      <ModuleItemContents {...props} shouldFlip={shouldFlip} />
-    </RobotCoordsForeignDiv>
-  )
-}
-
-interface ModuleItemContentsProps extends ModuleProps {
-  shouldFlip: boolean
-}
-
-function ModuleItemContents(props: ModuleItemContentsProps): JSX.Element {
-  const { mode, model, usbInfoString, shouldFlip } = props
-  const displayName = getModuleDisplayName(model)
-
-  const iconClassName = cx(styles.module_review_icon, {
-    [styles.module_review_icon_missing]: mode === 'missing',
-    [styles.module_review_icon_present]: mode === 'present',
-  })
-
-  const iconNameByMode: Record<string, IconName> = {
-    missing: 'alert-circle',
-    present: 'check-circle',
-    info: 'usb',
-    default: 'usb',
-  }
-
-  return (
-    <>
-      <div
-        className={
-          shouldFlip ? styles.flipped_module_wrapper : styles.module_wrapper
-        }
-      >
-        {mode !== 'missing' && usbInfoString && (
-          <p
-            key="usbPortInfo"
-            className={
-              usbInfoString.includes('N/A')
-                ? styles.module_port_text_na
-                : styles.module_port_text
-            }
-          >
-            {usbInfoString}
-          </p>
-        )}
-        <p key="displayName" className={styles.module_review_text}>
-          {displayName}
-        </p>
-        <div className={styles.module_connect_info_wrapper}>
-          <Icon
-            key="icon"
-            className={iconClassName}
-            x="8"
-            y="0"
-            svgWidth="12"
-            name={iconNameByMode[mode] || 'usb'}
-          />
-          <p>{mode === 'missing' ? 'Not connected' : 'Connected'}</p>
-        </div>
-      </div>
-    </>
-  )
-}

package/src/legacy-hardware-sim/index.ts

@@ -1,2 +0,0 @@
-export * from './LabwareNameOverlay'
-export * from './ModuleItem' // legacy App module rendering

package/src/lists/SidePanelGroup.tsx

@@ -1,48 +0,0 @@
-// SidePanelGroup component
-import cx from 'classnames'
-
-import { Icon } from '../icons'
-import styles from './lists.module.css'
-
-import type { ReactNode } from 'react'
-import type { IconName } from '../icons'
-
-// TODO(bc, 2021-03-31): this component is only used in one place
-// reconsider whether it belongs in components library
-export interface SidePanelGroupProps {
-  /** text of title */
-  title?: string
-  /** optional icon left of the title */
-  iconName?: IconName
-  /** children, most likely one or more TitledList */
-  children?: ReactNode
-  /** additional classnames */
-  className?: string
-  /** disables the whole SidePanelGroup if true */
-  disabled?: boolean
-}
-
-/**
- * A component for grouping and titling multiple lists
- */
-export function SidePanelGroup(props: SidePanelGroupProps): JSX.Element {
-  const { iconName, disabled } = props
-
-  const className = cx(styles.panel_group, props.className, {
-    [styles.disabled]: disabled,
-  })
-
-  return (
-    <div className={className}>
-      {props.title && (
-        <div className={styles.title_bar}>
-          {iconName && (
-            <Icon className={styles.title_bar_icon} name={iconName} />
-          )}
-          <h2 className={styles.title}>{props.title}</h2>
-        </div>
-      )}
-      {props.children}
-    </div>
-  )
-}

package/src/lists/TitledList.tsx

@@ -1,154 +0,0 @@
-// TitledList component
-import { Children } from 'react'
-import cx from 'classnames'
-
-import { LegacyStyledText } from '../atoms'
-import { COLORS } from '../helix-design-system'
-import { Icon } from '../icons'
-import styles from './lists.module.css'
-
-import type { MouseEvent, ReactNode } from 'react'
-import type { IconName, IconProps } from '../icons'
-
-// TODO(bc, 2021-03-31): reconsider whether this belongs in components library
-// it is bloated with application specific functionality
-
-export interface TitledListProps {
-  /** id attribute */
-  id?: string
-  /** text of title */
-  title: string
-  /** optional icon left of the title */
-  iconName?: IconName | null | undefined
-  /** props passed down to icon (`className` and `name` are ignored) */
-  iconProps?: Omit<IconProps, 'name'>
-  /** optional data test id for the container */
-  'data-test'?: string
-  // TODO(mc, 2018-01-25): enforce <li> children requirement with flow
-  /** children must all be `<li>` */
-  children?: ReactNode
-  /** additional classnames */
-  className?: string
-  /** component with descriptive text about the list */
-  description?: ReactNode
-  /** optional click action (on title div, not children) */
-  onClick?: (event: MouseEvent) => unknown
-  /** optional right click action (on wrapping div) */
-  onContextMenu?: (event: MouseEvent) => unknown
-  /** optional mouseEnter action */
-  onMouseEnter?: (event: MouseEvent) => unknown
-  /** optional mouseLeave action */
-  onMouseLeave?: (event: MouseEvent) => unknown
-  /** caret click action; if defined, list is expandable and carat is visible */
-  onCollapseToggle?: (event: MouseEvent) => unknown
-  /** collapse the list if true (false by default) */
-  collapsed?: boolean
-  /** set to true when TitledList is selected (eg, user clicked it) */
-  selected?: boolean
-  /** set to true when TitledList is hovered (but not when its contents are hovered) */
-  hovered?: boolean
-  /** disables the whole TitledList if true */
-  disabled?: boolean
-  /** appear disabled, but preserve collapsibility */
-  inert?: boolean
-}
-
-/**
- * An ordered list with optional title, icon, and description.
- */
-export function TitledList(props: TitledListProps): JSX.Element {
-  const {
-    id,
-    iconName,
-    disabled,
-    inert,
-    'data-test': dataTest,
-    onCollapseToggle,
-    iconProps,
-    onMouseEnter,
-    onMouseLeave,
-    onContextMenu,
-  } = props
-  const collapsible = onCollapseToggle != null
-
-  const onClick = !disabled ? props.onClick : undefined
-
-  // clicking on the carat will not call props.onClick,
-  // so prevent bubbling up if there is an onCollapseToggle fn
-  const handleCollapseToggle = (e: MouseEvent): void => {
-    if (onCollapseToggle && !disabled) {
-      e.stopPropagation()
-      onCollapseToggle(e)
-    }
-  }
-
-  const hasValidChildren = Children.toArray(props.children).some(child => child)
-
-  const className = cx(styles.titled_list, props.className, {
-    [styles.disabled]: disabled || inert,
-    [styles.titled_list_selected]: !disabled && props.selected,
-    [styles.hover_border]: !disabled && props.hovered,
-  })
-  // @ts-expect-error(sa, 2021-6-23): cast value to boolean
-  const titleBarClass = cx(styles.titled_list_title_bar, {
-    [styles.clickable]: props.onClick,
-  })
-
-  const iconClass = cx(
-    styles.title_bar_icon,
-    styles.icon_left_of_title,
-    iconProps && iconProps.className
-  )
-
-  let textColor = ''
-  if (disabled) {
-    //  the below hex code is for our legacy --c-font-disabled to match other text colors
-    textColor = '#9c9c9c'
-  } else if (props.selected && !disabled) {
-    //  the below hex code is for our legacy --c-highlight to match other text colors
-    textColor = '#5fd8ee'
-  }
-
-  return (
-    <div
-      id={id}
-      className={className}
-      data-test={dataTest}
-      {...{ onMouseEnter, onMouseLeave, onContextMenu }}
-    >
-      <div onClick={onClick} className={titleBarClass}>
-        {iconName && (
-          <Icon {...iconProps} className={iconClass} name={iconName} />
-        )}
-        <LegacyStyledText
-          as="h3"
-          backgroundColor={COLORS.white}
-          color={textColor}
-        >
-          {props.title}
-        </LegacyStyledText>
-        {collapsible && (
-          <div
-            onClick={handleCollapseToggle}
-            className={styles.title_bar_carat}
-          >
-            <Icon
-              className={styles.title_bar_icon}
-              name={
-                props.selected
-                  ? 'chevron-right'
-                  : props.collapsed
-                  ? 'chevron-down'
-                  : 'chevron-up'
-              }
-            />
-          </div>
-        )}
-      </div>
-      {!props.collapsed && props.description}
-      {!props.collapsed && hasValidChildren && (
-        <ol className={styles.list}>{props.children}</ol>
-      )}
-    </div>
-  )
-}

package/src/lists/index.ts

@@ -1,3 +0,0 @@
-// list and list item components
-export * from './SidePanelGroup'
-export * from './TitledList'

package/src/lists/lists.module.css

@@ -1,171 +0,0 @@
-@import '../index.module.css';
-
-:root {
-  --list-padding-large: 1rem;
-  --list-padding-small: 0.75rem;
-}
-
-.clickable {
-  cursor: pointer;
-}
-
-.disabled {
-  background-color: transparent;
-
-  & * {
-    color: var(--c-font-disabled);
-    outline-color: #eee;
-    fill: var(--c-font-disabled);
-    background-color: transparent;
-  }
-}
-
-.panel_group,
-.titled_list,
-.list_item {
-  background-color: white;
-}
-
-.panel_group {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.33);
-}
-
-.hover_border {
-  outline: var(--bd-width-default) solid var(--c-highlight);
-}
-
-.header_text {
-  text-transform: uppercase;
-  font-size: var(--fs-caption);
-  font-weight: var(--fw-semibold);
-  color: var(--c-font-disabled);
-}
-
-/*
-  TODO(IL, 2021-07-30): when consumers of this class are migrated to CSS-in-JS, keep in mind
-  the meaning of .title_bar is vague, it is widely used by several unrelated components.
-  Also, it's almost the same as .titled_list_title_bar -- they are the same
-  except for flex-related rules.
-*/
-.title_bar {
-  position: relative;
-  display: flex;
-  text-decoration: none;
-  padding: var(--list-padding-large) var(--list-padding-small);
-  flex-direction: column;
-}
-
-/* Specifically for TitledList */
-.titled_list_title_bar {
-  position: relative;
-  display: flex;
-  text-decoration: none;
-  padding: var(--list-padding-large) var(--list-padding-small);
-  flex-direction: row;
-  align-items: center;
-}
-
-.titled_list_selected {
-  & .title_bar {
-    background-color: var(--c-bg-selected);
-
-    & * {
-      color: var(--c-selected-dark);
-      font-weight: var(--fw-semibold);
-    }
-  }
-}
-
-.title {
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-regular);
-  margin: 0;
-  text-transform: uppercase;
-}
-
-.title_enabled {
-  color: var(--c-font-dark);
-}
-
-.title_disabled {
-  color: var(--c-font-disabled);
-}
-
-.title_bar_icon {
-  color: var(--c-font-dark);
-  height: 1.5rem;
-}
-
-.title_bar_error {
-  background-color: var(--c-error-light);
-}
-
-.icon_left_of_title {
-  margin-right: 0.5rem;
-  height: 1.2rem;
-}
-
-.icon_left_of_title_container {
-  display: flex;
-  justify-content: flex-start;
-}
-
-.title_bar_carat {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  padding: calc(var(--list-padding-small) - var(--bd-width-default));
-  padding-top: 1rem;
-
-  &:hover {
-    background-color: color-mod(var(--c-black) alpha(5%));
-  }
-}
-
-.list {
-  list-style-type: none;
-  padding-left: 0;
-  margin: 0;
-}
-
-.list_item {
-  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;
-  flex-direction: row;
-  align-items: center;
-  width: 100%;
-  line-height: 1.25;
-  margin: 0;
-  padding: var(--list-padding-small);
-
-  &:hover {
-    background-color: var(--c-bg-hover);
-  }
-
-  &.active {
-    background-color: var(--c-bg-selected);
-  }
-}
-
-a.list_item {
-  text-decoration: none;
-}
-
-.list_alert {
-  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 */
-  width: 100%;
-  padding: var(--list-padding-small);
-  background-color: var(--c-bg-light);
-  font-style: italic;
-}
-
-.item_icon {
-  flex: none;
-  height: calc(1.25 * var(--fs-body-1));
-  margin-right: 0.5rem;
-}

package/src/modals/AlertModal.tsx

@@ -1,89 +0,0 @@
-import cx from 'classnames'
-
-import { OutlineButton } from '../buttons'
-import { Icon } from '../icons'
-import { LegacyModal } from './LegacyModal'
-import styles from './modals.module.css'
-
-import type { ReactNode } from 'react'
-import type { ButtonProps } from '../buttons'
-import type { IconName } from '../icons'
-
-export interface AlertModalProps {
-  /** optional handler for overlay click */
-  onCloseClick?: () => unknown
-  /** optional modal heading */
-  heading?: ReactNode
-  /** optional array of `ButtonProps` for `OutlineButton`s at bottom of modal */
-  buttons?: Array<ButtonProps | null | undefined>
-  /** modal contents */
-  children: ReactNode
-  /** optional classes to apply */
-  className?: string
-  /** optional classes to apply */
-  contentsClassName?: string
-  /** lightens overlay (alert modal over existing modal) */
-  alertOverlay?: boolean
-  /** override default alert icon */
-  iconName?: IconName | null | undefined
-  /** restricts scroll outside of Modal when open, true by default */
-  restrictOuterScroll?: boolean
-}
-
-/**
- * @deprecated use Modal instead
- * Generic alert modal with a heading and a set of buttons at the bottom
- */
-export function AlertModal(props: AlertModalProps): JSX.Element {
-  const {
-    heading,
-    buttons,
-    className,
-    onCloseClick,
-    alertOverlay,
-    restrictOuterScroll,
-  } = props
-  const iconName = props.iconName || 'alert'
-  const wrapperStyle = cx(
-    styles.alert_modal_wrapper,
-    {
-      [styles.no_alert_header]: !heading,
-    },
-    props.contentsClassName
-  )
-
-  return (
-    <LegacyModal
-      className={className}
-      contentsClassName={wrapperStyle}
-      onCloseClick={onCloseClick}
-      alertOverlay={alertOverlay}
-      restrictOuterScroll={restrictOuterScroll}
-    >
-      {heading && (
-        <div
-          className={cx(styles.alert_modal_heading, {
-            [styles.no_icon_heading]: props.iconName === null,
-          })}
-        >
-          {props.iconName !== null && (
-            <Icon name={iconName} className={styles.alert_modal_icon} />
-          )}
-          {heading}
-        </div>
-      )}
-      <div className={styles.alert_modal_contents}>{props.children}</div>
-      {buttons && (
-        <div className={styles.alert_modal_buttons}>
-          {(buttons.filter(Boolean) as ButtonProps[]).map((button, index) => (
-            <OutlineButton
-              {...button}
-              className={cx(styles.alert_button, button.className)}
-              key={index}
-            />
-          ))}
-        </div>
-      )}
-    </LegacyModal>
-  )
-}

package/src/modals/ContinueModal.tsx

@@ -1,32 +0,0 @@
-import { AlertModal } from './AlertModal'
-
-import type { AlertModalProps } from './AlertModal'
-
-export interface ContinueModalProps extends Omit<AlertModalProps, 'buttons'> {
-  onCancelClick: () => unknown
-  onContinueClick: () => unknown
-}
-
-const CANCEL = 'Cancel'
-const CONTINUE = 'Continue'
-
-/**
- * * @deprecated use Modal instead
- * AlertModal variant to prompt user to "Cancel" or "Continue" a given action
- */
-export function ContinueModal(props: ContinueModalProps): JSX.Element {
-  const { onCancelClick, onContinueClick, ...passThruProps } = props
-  const buttons = [
-    { title: CANCEL, children: CANCEL, onClick: onCancelClick },
-    { title: CONTINUE, children: CONTINUE, onClick: onContinueClick },
-  ]
-
-  return (
-    <AlertModal
-      restrictOuterScroll={false}
-      onCloseClick={onCancelClick}
-      {...passThruProps}
-      buttons={buttons}
-    />
-  )
-}

package/src/modals/LegacyModal.tsx

@@ -1,61 +0,0 @@
-import { Fragment } from 'react'
-import { RemoveScroll } from 'react-remove-scroll'
-import cx from 'classnames'
-
-import styles from './modals.module.css'
-import { Overlay } from './Overlay'
-
-import type { MouseEventHandler, ReactNode, Ref } from 'react'
-
-export interface LegacyModalProps {
-  /** handler to close the modal (attached to `Overlay` onClick) */
-  onCloseClick?: MouseEventHandler
-  /** Optional styled heading **/
-  heading?: string
-  /** modal contents */
-  children: ReactNode
-  /** classes to apply */
-  className?: string
-  /** classes to apply to the contents box */
-  contentsClassName?: string
-  /** lightens overlay (alert modal over existing modal) */
-  alertOverlay?: boolean
-  /** restricts scroll outside of Modal when open, true by default */
-  restrictOuterScroll?: boolean
-  innerRef?: Ref<HTMLDivElement>
-}
-
-/**
- * @deprecated use Modal instead
- * Base modal component that fills its nearest `display:relative` ancestor
- * with a dark overlay and displays `children` as its contents in a white box
- */
-export function LegacyModal(props: LegacyModalProps): JSX.Element {
-  const {
-    contentsClassName,
-    alertOverlay,
-    onCloseClick,
-    heading,
-    innerRef,
-    restrictOuterScroll = true,
-  } = props
-  const Wrapper = restrictOuterScroll ? RemoveScroll : Fragment
-  return (
-    <Wrapper>
-      <div
-        className={cx(styles.modal, props.className, {
-          [styles.alert_modal]: alertOverlay,
-        })}
-      >
-        <Overlay onClick={onCloseClick} alertOverlay={alertOverlay} />
-        <div
-          ref={innerRef}
-          className={cx(styles.modal_contents, contentsClassName)}
-        >
-          {heading && <h3 className={styles.modal_heading}>{heading}</h3>}
-          {props.children}
-        </div>
-      </div>
-    </Wrapper>
-  )
-}