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

package/src/primitives/types.ts

@@ -1,120 +0,0 @@
-// known style types
-import type { CSSProperties, StyledComponent } from 'styled-components'
-import type { ComponentType } from 'react'
-
-export interface ColorProps {
-  color?: string
-  backgroundColor?: string
-  opacity?: string | number
-}
-
-export interface TypographyProps {
-  fontSize?: string | number
-  fontWeight?: string | number
-  fontStyle?: string
-  lineHeight?: string | number
-  textAlign?: string
-  textTransform?: string
-  textDecoration?: string
-}
-
-export interface SpacingProps {
-  margin?: string | number
-  marginX?: string | number
-  marginY?: string | number
-  marginTop?: string | number
-  marginRight?: string | number
-  marginBottom?: string | number
-  marginLeft?: string | number
-  padding?: string | number
-  paddingX?: string | number
-  paddingY?: string | number
-  paddingTop?: string | number
-  paddingRight?: string | number
-  paddingBottom?: string | number
-  paddingLeft?: string | number
-}
-
-export interface BorderProps {
-  border?: string
-  borderTop?: string
-  borderRight?: string
-  borderBottom?: string
-  borderLeft?: string
-  borderRadius?: string | number
-  borderWidth?: string | number
-  borderColor?: string
-  boxShadow?: string
-}
-
-export interface FlexboxProps {
-  flex?: string | number
-  alignItems?: string
-  alignSelf?: string
-  justifyContent?: string
-  flexDirection?: string
-  flexWrap?: string
-  whiteSpace?: string
-}
-
-export interface GridProps {
-  columnGap?: string | number
-  gridGap?: string | number
-  gridTemplateAreas?: string
-  gridTemplateRows?: string
-  gridTemplateColumns?: string
-  gridArea?: string | number
-  gridRow?: string | number
-  gridColumn?: string | number
-}
-
-export interface LayoutProps {
-  display?: string
-  size?: string | number
-  width?: string | number
-  minWidth?: string | number
-  maxWidth?: string | number
-  height?: string | number
-  minHeight?: string | number
-  maxHeight?: string | number
-  overflow?: CSSProperties['overflow']
-  overflowX?: CSSProperties['overflowX']
-  overflowY?: CSSProperties['overflowY']
-  wordSpacing?: string | number
-  cursor?: CSSProperties['cursor']
-  overflowWrap?: string
-}
-
-export interface PositionProps {
-  position?: string
-  zIndex?: string | number
-  top?: string | number
-  right?: string | number
-  bottom?: string | number
-  left?: string | number
-  transform?: string
-  filter?: string
-  transformOrigin?: CSSProperties['transformOrigin']
-}
-
-export interface TransitionProps {
-  transition?: string
-}
-
-export interface StyleProps
-  extends ColorProps,
-    TypographyProps,
-    SpacingProps,
-    BorderProps,
-    FlexboxProps,
-    GridProps,
-    LayoutProps,
-    PositionProps,
-    TransitionProps {
-  className?: string
-}
-
-export type PrimitiveComponent<
-  Instance extends keyof JSX.IntrinsicElements | ComponentType<any>,
-  Props extends StyleProps = StyleProps
-> = StyledComponent<Instance, any, Props, any>

package/src/robot-types.ts

@@ -1,4 +0,0 @@
-export type {
-  PipetteChannels as Channels,
-  PipetteMount as Mount,
-} from '@opentrons/shared-data'

package/src/slotmap/OT2SlotMap.tsx

@@ -1,74 +0,0 @@
-import cx from 'classnames'
-
-import { Icon } from '../icons'
-import styles from './styles.module.css'
-
-// TODO(bc, 2021-03-29): this component is only used in PD
-// reconsider whether it belongs in components library
-
-export interface SlotMapProps {
-  /** Slot(s) to highlight */
-  occupiedSlots: string[]
-  /** Optional collision warning */
-  collisionSlots?: string[]
-  /** Optional error styling */
-  isError?: boolean
-}
-
-const OT2_SLOT_MAP_SLOTS = [
-  ['10', '11'],
-  ['7', '8', '9'],
-  ['4', '5', '6'],
-  ['1', '2', '3'],
-]
-
-const slotWidth = 33
-const slotHeight = 23
-const iconSize = 20
-const numRows = 4
-const numCols = 3
-
-export function OT2SlotMap(props: SlotMapProps): JSX.Element {
-  const { collisionSlots, occupiedSlots, isError } = props
-  const slots = OT2_SLOT_MAP_SLOTS
-  return (
-    <svg
-      viewBox={`-1,-1,${slotWidth * numCols + 2}, ${slotHeight * numRows + 2}`}
-    >
-      {slots.flatMap((row, rowIndex) =>
-        row.map((slot, colIndex) => {
-          const isCollisionSlot =
-            collisionSlots && collisionSlots.includes(slot)
-          const isOccupiedSlot = occupiedSlots.includes(slot)
-          return (
-            <g
-              key={slot}
-              transform={`translate(${colIndex * slotWidth} ${
-                rowIndex * slotHeight
-              })`}
-            >
-              <rect
-                className={cx(styles.slot_rect, {
-                  [styles.slot_occupied]: isOccupiedSlot,
-                  [styles.slot_error]: isError,
-                })}
-                width={slotWidth}
-                height={slotHeight}
-              />
-              {isCollisionSlot && (
-                <Icon
-                  className={styles.collision_icon}
-                  name="information"
-                  svgWidth={iconSize}
-                  svgHeight={iconSize}
-                  x={slotWidth / 2 - iconSize / 2}
-                  y={slotHeight / 2 - iconSize / 2}
-                />
-              )}
-            </g>
-          )
-        })
-      )}
-    </svg>
-  )
-}

package/src/slotmap/__tests__/OT2SlotMap.test.tsx

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

package/src/slotmap/index.ts

@@ -1 +0,0 @@
-export * from './OT2SlotMap'

package/src/slotmap/styles.module.css

@@ -1,18 +0,0 @@
-@import '../index.module.css';
-
-.slot_rect {
-  stroke: var(--c-med-gray);
-  fill: none;
-}
-
-.slot_occupied {
-  fill: var(--c-light-gray);
-}
-
-.slot_occupied.slot_error {
-  fill: var(--c-warning-light);
-}
-
-.collision_icon {
-  color: var(--c-med-gray);
-}

package/src/structure/Card.stories.tsx

@@ -1,29 +0,0 @@
-import { Box, SIZE_4, SPACING_3, Text } from '@opentrons/components'
-
-import { Card as CardComponent } from './Card'
-
-import type { Meta, Story } from '@storybook/react'
-import type * as React from '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,65 +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 { PrimitiveComponent, StyleProps } 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;
-`

package/src/structure/LabeledValue.stories.tsx

@@ -1,17 +0,0 @@
-import { LabeledValue as LabeledValueComponent } from './LabeledValue'
-
-import type { Meta, Story } from '@storybook/react'
-import type * as React from 'react'
-
-export default {
-  title: 'Library/Molecules/Labeled Value',
-} as Meta
-
-const Template: Story<
-  React.ComponentProps<typeof LabeledValueComponent>
-> = args => <LabeledValueComponent {...args} />
-export const LabeledValue = Template.bind({})
-LabeledValue.args = {
-  label: 'Here is the label',
-  value: 'This is the value that needs a label',
-}

package/src/structure/LabeledValue.tsx

@@ -1,31 +0,0 @@
-// Card component with drop shadow
-import cx from 'classnames'
-
-import styles from './structure.module.css'
-
-import type { ReactNode } from 'react'
-
-export interface LabeledValueProps {
-  /** Label */
-  label: ReactNode
-  /** Value */
-  value: ReactNode
-  /** Additional className */
-  className?: string
-  /** Additional value className */
-  valueClassName?: string
-}
-
-export function LabeledValue(props: LabeledValueProps): JSX.Element {
-  const { label, value } = props
-  const className = cx(styles.labeled_value, props.className)
-
-  return (
-    <div className={className}>
-      <p className={styles.labeled_value_label}>{label}:</p>
-      <p className={cx(styles.labeled_value_value, props.valueClassName)}>
-        {value}
-      </p>
-    </div>
-  )
-}

package/src/structure/Pill.module.css

@@ -1,16 +0,0 @@
-@import '../index.module.css';
-
-.pill {
-  border-radius: var(--bd-radius-pill);
-  color: var(--c-white);
-  padding: 0.5em;
-}
-
-.pill:empty::before {
-  /* zero width space to give empty pill the same line height */
-  content: "\200b";
-}
-
-.invert_text {
-  color: var(--c-black);
-}

package/src/structure/Pill.tsx

@@ -1,43 +0,0 @@
-import cx from 'classnames'
-
-import styles from './Pill.module.css'
-
-import type { ReactNode } from 'react'
-import type { UseHoverTooltipTargetProps } from '../tooltips'
-
-// TODO(bc, 2021-03-29): this component is only used in PD
-// reconsider whether it belongs in components library
-// TODO(bc, 2021-03-05): can this color prop actually be null or undefined if not present?
-// if no, then remove the cast to string
-export interface PillProps {
-  /** background color of pill (any CSS color string) */
-  color?: string | null | undefined
-  /** text black, instead of default white */
-  invertTextColor?: boolean | null | undefined
-  /** additional class name */
-  className?: string
-  /** contents of the pill */
-  children?: ReactNode
-  /** handlers for HoverTooltipComponent */
-  hoverTooltipHandlers?: UseHoverTooltipTargetProps | null | undefined
-}
-
-/**
- * Colored Pill containing text or other contents
- */
-export function Pill(props: PillProps): JSX.Element {
-  const className = cx(styles.pill, props.className, {
-    [styles.invert_text]: props.invertTextColor,
-  })
-  const { color, children, hoverTooltipHandlers } = props
-
-  return (
-    <span
-      style={{ backgroundColor: color as string }}
-      className={className}
-      {...hoverTooltipHandlers}
-    >
-      {children}
-    </span>
-  )
-}

package/src/structure/Splash.module.css

@@ -1,16 +0,0 @@
-@import '@opentrons/components/styles';
-
-.splash {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  color: var(--c-light-gray);
-
-  & > * {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    max-height: 100%;
-  }
-}

package/src/structure/Splash.stories.tsx

@@ -1,25 +0,0 @@
-import { Box } from '@opentrons/components'
-
-import { Splash as SplashComponent } from './Splash'
-
-import type { Meta, Story } from '@storybook/react'
-import type * as React from 'react'
-
-export default {
-  title: 'Library/Molecules/Splash',
-  decorators: [
-    Story => (
-      <Box height="20rem" width="100%">
-        <Story />
-      </Box>
-    ),
-  ],
-} as Meta
-
-const Template: Story<React.ComponentProps<typeof SplashComponent>> = args => (
-  <SplashComponent {...args} />
-)
-export const Splash = Template.bind({})
-Splash.args = {
-  iconName: 'ot-logo',
-}

package/src/structure/Splash.tsx

@@ -1,22 +0,0 @@
-/** A full-page icon in a muted color */
-import cx from 'classnames'
-
-import { Icon } from '../icons'
-import styles from './Splash.module.css'
-
-import type { IconName } from '../icons'
-
-export interface SplashProps {
-  /** optional alternative icon name. Defaults to 'logo'. */
-  iconName?: IconName
-  /** additional className for Splash */
-  className?: string
-}
-
-export function Splash(props: SplashProps): JSX.Element {
-  return (
-    <div className={cx(styles.splash, props.className)}>
-      <Icon name={props.iconName || 'ot-logo'} />
-    </div>
-  )
-}

package/src/structure/TitleBar.stories.tsx

@@ -1,43 +0,0 @@
-import { Icon, SIZE_1, Text } from '@opentrons/components'
-
-import { TitleBar } from './TitleBar'
-
-import type { Meta, Story } from '@storybook/react'
-import type * as React from 'react'
-
-export default {
-  title: 'Library/Molecules/TitleBar',
-} as Meta
-
-const Template: Story<React.ComponentProps<typeof TitleBar>> = args => (
-  <TitleBar {...args} />
-)
-export const Basic = Template.bind({})
-Basic.args = {
-  title: 'Main Title Goes Here',
-  subtitle: "I'm the sub-title",
-}
-
-export const TitlesAsReactNodes = Template.bind({})
-TitlesAsReactNodes.args = {
-  title: (
-    <Text as="span">
-      Fancy Title With Icon <Icon size={SIZE_1} name="wifi" />
-    </Text>
-  ),
-  subtitle: (
-    <Text as="a" href="#">
-      sub-title as link
-    </Text>
-  ),
-}
-
-export const WithBackButton = Template.bind({})
-WithBackButton.args = {
-  title: 'Main Title Goes Here',
-  subtitle: "I'm the sub-title",
-  back: {
-    children: 'back',
-    onClick: () => {},
-  },
-}

package/src/structure/TitleBar.tsx

@@ -1,80 +0,0 @@
-// TitleBar component
-import cx from 'classnames'
-
-import { FlatButton } from '../buttons'
-import styles from './structure.module.css'
-
-import type { ReactNode } from 'react'
-import type { ButtonProps } from '../buttons'
-
-export interface TitleBarProps {
-  id?: string
-  title: ReactNode
-  subtitle?: ReactNode
-  back?: ButtonProps
-  rightNode?: ReactNode
-  className?: string
-
-  // TODO(mc, 2018-04-13): deprecate these props
-  onBackClick?: () => unknown
-  backClickDisabled?: boolean
-  backButtonLabel?: string
-}
-
-/**
- * @deprecated Use 'ModalHeader' instead
- */
-
-export function TitleBar(props: TitleBarProps): JSX.Element {
-  const {
-    title,
-    subtitle,
-    className,
-    onBackClick,
-    backClickDisabled,
-    backButtonLabel,
-    id,
-  } = props
-  let { back, rightNode } = props
-
-  const separator = subtitle && <span className={styles.separator}>|</span>
-
-  const subheading = subtitle && <h2 className={styles.subtitle}>{subtitle}</h2>
-
-  const rightNodeContainer = rightNode && (
-    <div className={styles.right_node}>{rightNode}</div>
-  )
-
-  // TODO(mc, 2018-04-13): deprecate these props
-  if (!back && onBackClick) {
-    back = {
-      onClick: onBackClick,
-      disabled: backClickDisabled,
-      title: backButtonLabel || 'Back',
-      children: backButtonLabel || 'back',
-    }
-  }
-
-  if (back) {
-    back.children = back.children || 'back'
-    back.title = back.title || 'Back'
-  }
-
-  return (
-    <header id={id} className={cx(styles.title_bar, className)}>
-      {back && (
-        <FlatButton
-          inverted
-          iconName={'chevron-left'}
-          className={styles.title_button}
-          {...back}
-        />
-      )}
-      {/*  @ts-expect-error(sa, 2021-6-23): cast value to boolean */}
-      <h1 className={cx(styles.title, { [styles.right]: back })}>{title}</h1>
-      {separator}
-      {subheading}
-      {rightNodeContainer}
-    </header>
-  )
-}

package/src/structure/index.ts

@@ -1,7 +0,0 @@
-// structure components
-
-export * from './TitleBar'
-export * from './Card'
-export * from './Splash'
-export * from './LabeledValue'
-export * from './Pill'