@opentrons/components 0.2.0-alpha.0 → 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 {
-  fill: none;
-  stroke: var(--c-med-gray);
-}
-
-.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/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 {
-  padding: 0.5em;
-  border-radius: var(--bd-radius-pill);
-  color: var(--c-white);
-}
-
-.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%;
-    max-height: 100%;
-    transform: translate(-50%, -50%);
-  }
-}

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,5 +0,0 @@
-// structure components
-export * from './LabeledValue'
-export * from './Pill'
-export * from './Splash'
-export * from './TitleBar'

package/src/structure/structure.module.css

@@ -1,114 +0,0 @@
-/* TitleBar styles */
-@import '../index.module.css';
-
-.title_bar {
-  display: flex;
-  height: 3rem;
-  align-items: center;
-  background-color: var(--c-dark-gray);
-  text-transform: uppercase;
-}
-
-.title_bar,
-.title_bar a {
-  color: white;
-}
-
-.title,
-.subtitle,
-.separator {
-  margin: 0;
-  font-size: var(--fs-header);
-}
-
-.title,
-.separator {
-  font-weight: var(--fw-semibold);
-}
-
-.title {
-  overflow: hidden; /* from legacy --truncate */
-  min-width: 0; /* from legacy --truncate */
-  padding: 0 1.5rem;
-  text-overflow: ellipsis; /* from legacy --truncate */
-  white-space: nowrap; /* from legacy --truncate */
-}
-
-.subtitle {
-  padding: 0 1.5rem;
-  font-weight: normal;
-}
-
-.title.right {
-  margin-left: auto;
-}
-
-.title_button {
-  flex: none;
-}
-
-.page_tabs {
-  width: 100%;
-  text-align: center;
-}
-
-.tab_link {
-  display: inline-block;
-  width: 50%;
-  padding: 0.25rem 0;
-  background-color: var(--c-med-gray);
-  color: white;
-  font-size: var(--fs-huge);
-  opacity: 0.2;
-  text-transform: uppercase;
-}
-
-.active_tab_link {
-  opacity: 1;
-}
-
-.tab_title {
-  font-weight: normal;
-}
-
-.active_tab_link .tab_title {
-  font-weight: var(--fw-bold);
-}
-
-.disabled {
-  background-color: transparent;
-  pointer-events: none;
-
-  & * {
-    background-color: transparent;
-    color: var(--c-font-disabled);
-    fill: var(--c-font-disabled);
-  }
-}
-
-.labeled_value {
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
-  line-height: 1.5;
-
-  & svg {
-    height: var(--fs-body-2);
-  }
-}
-
-.labeled_value_label {
-  margin-top: 0;
-  margin-bottom: 0.25rem;
-  font-weight: var(--fw-semibold);
-}
-
-.labeled_value_value {
-  margin: 0;
-}
-
-.right_node {
-  display: flex;
-  justify-content: flex-end;
-  margin-left: auto;
-}

package/src/styles/borders.module.css

@@ -1,20 +0,0 @@
-@import './colors.module.css';
-
-:root {
-  /* borders */
-  --bd-radius-default: 2px;
-  --bd-radius-form-field: 3px;
-  --bd-radius-pill: 12px;
-  --bd-width-default: 1px;
-  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
-
-  /* dropshadows */
-
-  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
-  --shadow-lvl-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow-lvl-2:
-    0 3px 6px 0 rgba(0, 0, 0, 0.13),
-    0 3px 6px 0 rgba(0, 0, 0, 0.23);
-}

package/src/styles/borders.ts

@@ -1,16 +0,0 @@
-// border style constants
-import { C_LIGHT_GRAY, C_MED_GRAY } from './colors'
-
-export const BORDER_WIDTH_DEFAULT = '1px'
-
-export const BORDER_RADIUS_DEFAULT = '2px'
-export const BORDER_RADIUS_1 = '5px'
-
-export const BORDER_STYLE_NONE = 'none'
-export const BORDER_STYLE_SOLID = 'solid'
-
-export const BORDER_SOLID_LIGHT = `${BORDER_WIDTH_DEFAULT} ${BORDER_STYLE_SOLID} ${C_LIGHT_GRAY}`
-export const BORDER_SOLID_MEDIUM = `${BORDER_WIDTH_DEFAULT} ${BORDER_STYLE_SOLID} ${C_MED_GRAY}`
-
-export const SHADOW_LIGHT =
-  '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.2)'