@opentrons/components 0.1.6-alpha.9 → 0.1.7-alpha.1

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

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

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

package/src/lists/SidePanelGroup.tsx

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

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

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

package/src/lists/lists.module.css

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

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

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

@@ -0,0 +1,61 @@
+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>
+  )
+}