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

package/src/primitives/types.ts

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

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

package/src/slotmap/OT2SlotMap.tsx

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

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

package/src/slotmap/index.ts

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

package/src/slotmap/styles.module.css

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

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

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

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

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

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

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

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

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

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

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

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

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