@opentrons/components 0.1.6-alpha.2 → 0.1.6-alpha.20

package/src/primitives/Svg.tsx

@@ -0,0 +1,68 @@
+import styled from 'styled-components'
+
+import { styleProps, isntStyleProp } from './style-props'
+
+import type { StyleProps, PrimitiveComponent } from './types'
+
+export interface SvgProps extends StyleProps {
+  /** attach a width attribute to the <svg> element */
+  svgWidth?: string | number
+  /** attach a height attribute to the <svg> element */
+  svgHeight?: string | number
+  /**
+   * internal helper prop to remap width style-prop to CSS
+   * @internal
+   */
+  _cssWidth?: string | number
+  /**
+   * internal helper prop to remap height style-prop to CSS
+   * @internal
+   */
+  _cssHeight?: string | number
+}
+
+const SVG_VERSION = '1.1'
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg'
+
+const SVG_PROPS = ['svgWidth', 'svgHeight', '_cssWidth', '_cssHeight']
+
+/**
+ * SVG primitive
+ *
+ * @component
+ */
+export const Svg: PrimitiveComponent<'svg', SvgProps> = styled.svg
+  .withConfig({
+    shouldForwardProp: p => {
+      return (
+        // do not forward style-props or Svg-props to the underlying <svg>
+        (isntStyleProp(p) && !SVG_PROPS.includes(p)) ||
+        // unlike other primitives, allow width and height to be forwarded
+        p === 'width' ||
+        p === 'height'
+      )
+    },
+  })
+  .attrs(
+    (props: SvgProps): React.ComponentProps<PrimitiveComponent<'svg'>> => ({
+      version: SVG_VERSION,
+      xmlns: SVG_NAMESPACE,
+      // map the explicit svgWidth/Height props to width/height attrs
+      width: props.svgWidth,
+      height: props.svgHeight,
+      // map width and height style props to internal style props
+      _cssWidth: props.width,
+      _cssHeight: props.height,
+    })
+  )`
+  ${(props: Partial<SvgProps>) => {
+    const { width, height, ...otherProps } = props
+
+    // replace width and height attrs with internal style props
+    return styleProps({
+      ...otherProps,
+      width: otherProps._cssWidth,
+      height: otherProps._cssHeight,
+    })
+  }}
+`

package/src/primitives/Text.stories.tsx

@@ -0,0 +1,17 @@
+import type * as React from 'react'
+import { Text as TextComponent } from './Text'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Atoms/Text',
+} as Meta
+
+const Template: Story<React.ComponentProps<typeof TextComponent>> = args => (
+  <TextComponent {...args} />
+)
+export const Text = Template.bind({})
+Text.args = {
+  children: 'This is a bunch text of text',
+  color: 'grey',
+}

package/src/primitives/Text.tsx

@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+
+import { styleProps, isntStyleProp } from './style-props'
+
+import type { PrimitiveComponent } from './types'
+
+/**
+ * Text primitive
+ *
+ * @component
+ */
+export const Text: PrimitiveComponent<'p'> = styled.p.withConfig({
+  shouldForwardProp: isntStyleProp,
+})`
+  margin-top: 0;
+  margin-bottom: 0;
+  ${styleProps}
+`

package/src/primitives/index.ts

@@ -0,0 +1,10 @@
+export * from './style-props'
+export * from './Box'
+export * from './Btn'
+export * from './Flex'
+export * from './ForeignObject'
+export * from './Link'
+export * from './Svg'
+export * from './Text'
+
+export * from './types'

package/src/primitives/style-props.ts

@@ -0,0 +1,197 @@
+// common styling props you can apply to any primitive component
+// props are string type for flexibility, but try to use constants for safety
+
+import pick from 'lodash/pick'
+
+import type * as Types from './types'
+
+import type { CSSObject } from 'styled-components'
+
+const COLOR_PROPS = ['color', 'backgroundColor', 'opacity'] as const
+
+const TYPOGRAPHY_PROPS = [
+  'fontSize',
+  'fontWeight',
+  'fontStyle',
+  'lineHeight',
+  'textAlign',
+  'textTransform',
+  'textDecoration',
+  'textOverflow',
+] as const
+
+const SPACING_PROPS = [
+  'margin',
+  'marginX',
+  'marginY',
+  'marginTop',
+  'marginRight',
+  'marginBottom',
+  'marginLeft',
+  'padding',
+  'paddingX',
+  'paddingY',
+  'paddingTop',
+  'paddingRight',
+  'paddingBottom',
+  'paddingLeft',
+] as const
+
+const BORDER_PROPS = [
+  'border',
+  'borderTop',
+  'borderRight',
+  'borderBottom',
+  'borderLeft',
+  'borderRadius',
+  'borderWidth',
+  'borderColor',
+  'boxShadow',
+] as const
+
+const FLEXBOX_PROPS = [
+  'flex',
+  'alignItems',
+  'justifyContent',
+  'flexDirection',
+  'flexGrow',
+  'flexWrap',
+  'alignSelf',
+  'whiteSpace',
+  'gap',
+] as const
+
+const GRID_PROPS = [
+  'columnGap',
+  'gridGap',
+  'gridTemplateAreas',
+  'gridTemplateRows',
+  'gridTemplateColumns',
+  'gridArea',
+  'gridRow',
+  'gridColumn',
+] as const
+
+const LAYOUT_PROPS = [
+  'display',
+  'size',
+  'width',
+  'minWidth',
+  'maxWidth',
+  'height',
+  'minHeight',
+  'maxHeight',
+  'overflow',
+  'overflowX',
+  'overflowY',
+  'whiteSpace',
+  'wordSpacing',
+  'cursor',
+  'overflowWrap',
+] as const
+
+const POSITION_PROPS = [
+  'position',
+  'zIndex',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'transform',
+  'transformOrigin',
+  'filter',
+] as const
+
+const TRANSITION_PROPS = ['transition'] as const
+
+const STYLE_PROPS = [
+  ...COLOR_PROPS,
+  ...TYPOGRAPHY_PROPS,
+  ...SPACING_PROPS,
+  ...BORDER_PROPS,
+  ...FLEXBOX_PROPS,
+  ...GRID_PROPS,
+  ...LAYOUT_PROPS,
+  ...POSITION_PROPS,
+  ...TRANSITION_PROPS,
+]
+
+const colorStyles = (props: Types.StyleProps): CSSObject => {
+  return pick(props, COLOR_PROPS) as CSSObject
+}
+
+const typographyStyles = (props: Types.StyleProps): CSSObject => {
+  return pick(props, TYPOGRAPHY_PROPS) as CSSObject
+}
+
+const spacingStyles = (props: Types.StyleProps): CSSObject => {
+  const { marginX, marginY, paddingX, paddingY, ...styles } = pick(
+    props,
+    SPACING_PROPS
+  )
+
+  if (marginX != null) {
+    styles.marginRight = styles.marginRight ?? marginX
+    styles.marginLeft = styles.marginLeft ?? marginX
+  }
+  if (marginY != null) {
+    styles.marginTop = styles.marginTop ?? marginY
+    styles.marginBottom = styles.marginBottom ?? marginY
+  }
+  if (paddingX != null) {
+    styles.paddingRight = styles.paddingRight ?? paddingX
+    styles.paddingLeft = styles.paddingLeft ?? paddingX
+  }
+  if (paddingY != null) {
+    styles.paddingTop = styles.paddingTop ?? paddingY
+    styles.paddingBottom = styles.paddingBottom ?? paddingY
+  }
+
+  return styles as CSSObject
+}
+
+const borderStyles = (props: Types.StyleProps): CSSObject => {
+  return pick(props, BORDER_PROPS) as CSSObject
+}
+
+const flexboxStyles = (props: Types.StyleProps): CSSObject => {
+  return pick(props, FLEXBOX_PROPS) as CSSObject
+}
+
+const gridStyles = (props: Types.StyleProps): CSSObject => {
+  return pick(props, GRID_PROPS) as CSSObject
+}
+
+const layoutStyles = (props: Types.StyleProps): CSSObject => {
+  const { size, ...styles } = pick(props, LAYOUT_PROPS) as CSSObject
+
+  if (size != null) {
+    styles.width = styles.width ?? ((size as unknown) as typeof styles.width)
+    styles.height = styles.height ?? ((size as unknown) as typeof styles.height)
+  }
+
+  return styles
+}
+
+const positionStyles = (props: Types.StyleProps): CSSObject => {
+  return pick(props, POSITION_PROPS) as CSSObject
+}
+
+const transitionStyles = (props: Types.StyleProps): CSSObject => {
+  return pick(props, TRANSITION_PROPS)
+}
+
+export const styleProps = (props: Types.StyleProps): CSSObject => ({
+  ...colorStyles(props),
+  ...typographyStyles(props),
+  ...spacingStyles(props),
+  ...borderStyles(props),
+  ...flexboxStyles(props),
+  ...gridStyles(props),
+  ...layoutStyles(props),
+  ...positionStyles(props),
+  ...transitionStyles(props),
+})
+
+export const isntStyleProp = (prop: string | React.ReactText): boolean =>
+  !STYLE_PROPS.includes(prop as typeof STYLE_PROPS[number])

package/src/primitives/types.ts

@@ -0,0 +1,120 @@
+// known style types
+
+import type { StyledComponent, CSSProperties } from 'styled-components'
+
+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 | React.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,73 @@
+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/index.ts

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

package/src/structure/Card.stories.tsx

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

@@ -0,0 +1,64 @@
+// Card component with drop shadow
+
+import type * as React from 'react'
+import styled, { css } from 'styled-components'
+import { isntStyleProp, styleProps } from '../primitives'
+import * as styles from '../styles'
+
+import type { StyleProps, PrimitiveComponent } from '../primitives'
+export interface CardProps extends StyleProps {
+  /** Title for card, all cards should receive a title. */
+  title?: React.ReactNode
+  /** Card contents */
+  children?: React.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 type * as React from 'react'
+import { LabeledValue as LabeledValueComponent } from './LabeledValue'
+
+import type { Story, Meta } from '@storybook/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 type * as React from 'react'
+import cx from 'classnames'
+
+import styles from './structure.module.css'
+
+export interface LabeledValueProps {
+  /** Label */
+  label: React.ReactNode
+  /** Value */
+  value: React.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.tsx

@@ -0,0 +1,43 @@
+import type * as React from 'react'
+import cx from 'classnames'
+
+import styles from './Pill.module.css'
+
+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?: React.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>
+  )
+}