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

package/src/instrument/__tests__/InstrumentInfo.test.tsx

@@ -1,56 +0,0 @@
-import { screen } from '@testing-library/react'
-import { describe, beforeEach, it, vi } from 'vitest'
-import { LEFT, RIGHT, fixtureP1000SingleV2Specs } from '@opentrons/shared-data'
-import { renderWithProviders } from '../../testing/utils'
-import { InstrumentInfo } from '../InstrumentInfo'
-import { InstrumentDiagram } from '../InstrumentDiagram'
-
-import type { ComponentProps } from 'react'
-
-vi.mock('../InstrumentDiagram')
-
-const render = (props: ComponentProps<typeof InstrumentInfo>) => {
-  return renderWithProviders(<InstrumentInfo {...props} />)[0]
-}
-
-describe('InstrumentInfo', () => {
-  let props: ComponentProps<typeof InstrumentInfo>
-
-  beforeEach(() => {
-    props = {
-      mount: LEFT,
-      description: 'mock description',
-      pipetteSpecs: fixtureP1000SingleV2Specs,
-      tiprackModels: ['mock1', 'mock2'],
-      showMountLabel: true,
-    }
-    vi.mocked(InstrumentDiagram).mockReturnValue(
-      <div>mock instrumentDiagram</div>
-    )
-  })
-  it('renders a p1000 pipette with 2 tiprack models for left mount', () => {
-    render(props)
-    screen.getByText('mock instrumentDiagram')
-    screen.getByText('left pipette')
-    screen.getByText('mock description')
-    screen.getByText('Tip rack')
-    screen.getByText('mock1')
-    screen.getByText('mock2')
-  })
-  it('renders a p1000 pipette with 1 tiprack model for right mount', () => {
-    props.mount = RIGHT
-    props.tiprackModels = ['mock1']
-    render(props)
-    screen.getByText('mock instrumentDiagram')
-    screen.getByText('right pipette')
-    screen.getByText('mock description')
-    screen.getByText('Tip rack')
-    screen.getByText('mock1')
-  })
-  it('renders none for pip and tiprack if none are selected', () => {
-    props.pipetteSpecs = undefined
-    props.tiprackModels = undefined
-    render(props)
-    screen.getByText('None')
-  })
-})

package/src/instrument/__tests__/PipetteSelect.test.tsx

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

package/src/instrument/instrument.module.css

@@ -1,45 +0,0 @@
-@import '@opentrons/components/styles';
-
-.pipette_group {
-  margin: 0 auto;
-  max-width: 46rem;
-  padding-bottom: 2rem;
-  display: grid;
-  grid-template-columns: 50% 50%;
-  grid-template-areas: 'left right';
-}
-
-.right {
-  grid-area: right;
-  grid-template-columns: 40% 80%;
-  grid-template-areas: 'img info';
-}
-
-.pipette_info {
-  grid-area: info;
-  min-height: 8rem;
-}
-
-.flipped_image {
-  transform: scaleX(-1);
-  filter: FlipH;
-}
-
-.pipette_icon {
-  grid-area: img;
-  text-align: center;
-}
-
-.title {
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-semibold);
-  color: var(--c-font-dark);
-  text-transform: capitalize;
-  margin: 2rem 0 0.25rem;
-}
-
-.value {
-  font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
-  font-weight: var(--fw-regular); /* from legacy --font-body-2-dark */
-  color: var(--c-font-dark); /* from legacy --font-body-2-dark */
-}

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 { Icon } from '../icons'
-import { RobotCoordsForeignDiv } from '../hardware-sim/Deck'
-import styles from './ModuleItem.module.css'
-
-import type { IconName } from '../icons'
-import type { ModuleModel, DeckSlot } from '@opentrons/shared-data'
-
-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/lists/TitledList.tsx

@@ -1,155 +0,0 @@
-// TitledList component
-import { Children } from 'react'
-import cx from 'classnames'
-
-import { Icon } from '../icons'
-import { LegacyStyledText } from '../atoms'
-import { COLORS } from '../helix-design-system'
-
-import type { MouseEvent, ReactNode } from 'react'
-import type { IconName, IconProps } from '../icons'
-
-import styles from './lists.module.css'
-
-// 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/structure/Card.stories.tsx

@@ -1,28 +0,0 @@
-import type * as React from 'react'
-import { Card as CardComponent } from './Card'
-import { Box, Text, SIZE_4, SPACING_3 } from '@opentrons/components'
-
-import type { Story, Meta } from '@storybook/react'
-
-export default {
-  title: 'Library/Molecules/Card',
-} as Meta
-
-const Template: Story<React.ComponentProps<typeof CardComponent>> = args => (
-  <CardComponent {...args} />
-)
-export const Card = Template.bind({})
-Card.args = {
-  title: 'Main Title Goes Here',
-  disabled: false,
-  children: (
-    <>
-      <Box size={SIZE_4} padding={SPACING_3}>
-        <Text>Some text contents</Text>
-      </Box>
-      <Box size={SIZE_4} padding={SPACING_3}>
-        <Text>Some more text contents</Text>
-      </Box>
-    </>
-  ),
-}

package/src/structure/Card.tsx

@@ -1,63 +0,0 @@
-// Card component with drop shadow
-import styled, { css } from 'styled-components'
-import { isntStyleProp, styleProps } from '../primitives'
-import * as styles from '../styles'
-
-import type { ReactNode } from 'react'
-import type { StyleProps, PrimitiveComponent } from '../primitives'
-export interface CardProps extends StyleProps {
-  /** Title for card, all cards should receive a title. */
-  title?: ReactNode
-  /** Card contents */
-  children?: ReactNode
-  /** If card can not be used, gray it out and remove pointer events */
-  disabled?: boolean
-  /** Additional class names */
-  className?: string
-}
-
-/**
- * Renders a basic card element with a white background, dropshadow, and zero padding.
- *
- * Titles and other children handle their own styles and layout.
- */
-export function Card(props: CardProps): JSX.Element {
-  const { title, children, className, disabled, ...styleProps } = props
-
-  return (
-    <Section disabled={disabled} className={className} {...styleProps}>
-      {title && <Title className={className}>{title}</Title>}
-      {children}
-    </Section>
-  )
-}
-
-const Section: PrimitiveComponent<'section'> = styled.section.withConfig({
-  shouldForwardProp: isntStyleProp,
-})`
-  font-size: ${styles.FONT_SIZE_BODY_2};
-  position: relative;
-  overflow: visible;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.33);
-  ${({ disabled }) =>
-    disabled &&
-    css`
-      pointer-events: none;
-      background-color: transparent;
-
-      & * {
-        color: ${styles.C_FONT_DISABLED};
-        fill: ${styles.C_FONT_DISABLED};
-        background-color: transparent;
-      }
-    `}
-  ${styleProps}
-`
-
-const Title = styled.h3`
-  ${styles.FONT_HEADER_DARK}
-  font-weight: ${styles.FONT_WEIGHT_REGULAR};
-  margin: 0;
-  padding: ${styles.SPACING_3} ${styles.SPACING_3} 0;
-  text-transform: capitalize;
-`