@opentrons/components 0.1.6-alpha.16 → 0.1.6-alpha.17

package/src/tooltips/useHoverTooltip.ts

@@ -0,0 +1,47 @@
+import { useHover } from '../interaction-enhancers'
+import { useTooltip } from './useTooltip'
+
+import type { UseHoverTooltipOptions, UseHoverTooltipResult } from './types'
+
+const ENTER_DELAY_MS = 300
+const LEAVE_DELAY_MS = 0
+
+/**
+ * Hook to position a tooltip component relative to a target component on hover.
+ * Adds a default `enterDelay` of 300 ms before the tooltip will show
+ *
+ * @param {UseHoverTooltipOptions} [options={}] (change default options (see `useTooltip` and `useHover`))
+ * @returns {UseHoverTooltipResult}
+ * @example
+ * ```js
+ * import { useHoverTooltip, Tooltip } from '@opentrons/components'
+ *
+ * export function HelloWorld() {
+ *   const [targetProps, tooltipProps] = useHoverTooltip()
+ *
+ *   return (
+ *     <>
+ *       <span {...targetProps}>Hello</span>
+ *       <Tooltip {...tooltipProps}>World</Tooltip>
+ *     </>
+ *   )
+ * }
+ * ```
+ */
+export function useHoverTooltip(
+  options: UseHoverTooltipOptions = {}
+): UseHoverTooltipResult {
+  const {
+    enterDelay = ENTER_DELAY_MS,
+    leaveDelay = LEAVE_DELAY_MS,
+    ...useTooltipOptions
+  } = options
+
+  const [targetProps, tooltipProps] = useTooltip(useTooltipOptions)
+  const [visible, hoverHandlers] = useHover({ enterDelay, leaveDelay })
+
+  return [
+    { ...targetProps, ...hoverHandlers },
+    { ...tooltipProps, visible },
+  ]
+}

package/src/tooltips/usePopper.ts

@@ -0,0 +1,87 @@
+import { useRef, useLayoutEffect } from 'react'
+import { createPopper } from '@popperjs/core'
+
+import type {
+  UsePopperOptions,
+  UsePopperResult,
+  PopperOptions,
+  PopperModifer,
+  HandleStateUpdate,
+} from './types'
+
+const DISABLED_APPLY_STYLES_MODIFIER = {
+  name: 'applyStyles',
+  enabled: false,
+}
+
+const makeUpdateStateModifier = (
+  handleStateUpdate: HandleStateUpdate
+): PopperModifer<{}> => ({
+  name: 'updateUsePopperState',
+  enabled: true,
+  phase: 'write',
+  fn: ({ state }) => {
+    handleStateUpdate(state.placement, state.styles)
+  },
+})
+
+const makeOffsetModifier = (offset: number): Partial<PopperModifer<{}>> => ({
+  name: 'offset',
+  options: { offset: [0, offset] },
+})
+
+const makeArrowModifier = (arrow: Element): Partial<PopperModifer<{}>> => ({
+  name: 'arrow',
+  options: { element: arrow },
+})
+
+export function usePopper(options: UsePopperOptions): UsePopperResult {
+  const {
+    target,
+    tooltip,
+    arrow,
+    placement,
+    strategy,
+    offset,
+    onStateUpdate,
+  } = options
+
+  const popperRef = useRef<UsePopperResult | null>(null)
+
+  // useLayoutEffect instead of useEffect to avoid positioning flash
+  useLayoutEffect(() => {
+    if (target && tooltip) {
+      const options: Partial<PopperOptions> &
+        Pick<PopperOptions, 'modifiers'> = {
+        modifiers: [
+          DISABLED_APPLY_STYLES_MODIFIER,
+          makeUpdateStateModifier(onStateUpdate),
+        ],
+      }
+
+      if (offset != null) {
+        options.modifiers.push(makeOffsetModifier(offset))
+      }
+
+      if (arrow) {
+        options.modifiers.push(makeArrowModifier(arrow))
+      }
+
+      if (placement != null) options.placement = placement
+      if (strategy != null) options.strategy = strategy
+
+      const popperInstance = createPopper(target, tooltip, options)
+
+      // immediately force a synchronous update to avoid positioning flash
+      popperInstance.forceUpdate()
+      popperRef.current = popperInstance
+
+      return () => {
+        popperInstance.destroy()
+        popperRef.current = null
+      }
+    }
+  }, [target, tooltip, arrow, placement, strategy, offset, onStateUpdate])
+
+  return popperRef.current
+}

package/src/tooltips/useTooltip.ts

@@ -0,0 +1,100 @@
+import { useState, useCallback, useRef } from 'react'
+import uniqueId from 'lodash/uniqueId'
+import { usePopper } from './usePopper'
+import * as Styles from './styles'
+
+import type { CSSProperties } from 'react'
+import type { UseTooltipOptions, UseTooltipResult, Placement } from './types'
+
+interface TooltipState {
+  placement: Placement | null
+  tooltipStyle: CSSProperties
+  arrowStyle: CSSProperties
+}
+
+const TOOLTIP_ID_PREFIX = 'Tooltip__'
+
+/**
+ * Hook to position a tooltip component relative to a target component
+ *
+ * @param {UseTooltipOptions} [options={}] (change the default `position`, `strategy`, or `offset` of the tooltip)
+ * @returns {UseTooltipResult}
+ * @example
+ * ```js
+ * import {
+ *   useTooltip,
+ *   Tooltip,
+ *   TOOLTIP_TOP,
+ *   TOOLTIP_FIXED
+ * } from '@opentrons/components'
+ *
+ * export function HelloWorld() {
+ *   const [targetProps, tooltipProps] = useTooltip({
+ *     position: TOOLTIP_TOP,
+ *     strategy: TOOLTIP_FIXED
+ *   })
+ *
+ *   return (
+ *     <>
+ *       <span {...targetProps}>Hello</span>
+ *       <Tooltip visible={true} {...tooltipProps}>World</Tooltip>
+ *     </>
+ *   )
+ * }
+ * ```
+ */
+export function useTooltip(options: UseTooltipOptions = {}): UseTooltipResult {
+  const { placement, strategy, offset = Styles.TOOLTIP_OFFSET_PX } = options
+  const tooltipId = useRef(uniqueId(TOOLTIP_ID_PREFIX)).current
+  const [target, targetRef] = useState<Element | null>(null)
+  const [tooltip, tooltipRef] = useState<HTMLElement | null>(null)
+  const [arrow, arrowRef] = useState<HTMLElement | null>(null)
+  const [tooltipState, setTooltipState] = useState<TooltipState>({
+    placement: null,
+    tooltipStyle: Styles.INITIAL_TOOLTIP_STYLE,
+    arrowStyle: Styles.INITIAL_ARROW_STYLE,
+  })
+
+  const onStateUpdate = useCallback(
+    (
+      placement: Placement | null,
+      styles: {
+        popper?: CSSProperties
+        arrow?: CSSProperties
+      }
+    ) => {
+      setTooltipState({
+        placement,
+        tooltipStyle: styles.popper ?? Styles.INITIAL_TOOLTIP_STYLE,
+        arrowStyle: styles.arrow ?? Styles.INITIAL_ARROW_STYLE,
+      })
+    },
+    []
+  )
+
+  usePopper({
+    target,
+    tooltip,
+    arrow,
+    placement,
+    strategy,
+    offset,
+    onStateUpdate,
+  })
+
+  const targetProps = {
+    ref: targetRef,
+    'aria-describedby': tooltipId,
+  }
+
+  const tooltipProps = {
+    id: tooltipId,
+    ref: tooltipRef,
+    style: tooltipState.tooltipStyle,
+    arrowStyle: tooltipState.arrowStyle,
+    placement: tooltipState.placement,
+    arrowRef,
+  }
+
+  return [targetProps, tooltipProps]
+}

package/src/ui-style-constants/index.ts

@@ -0,0 +1,4 @@
+export * as RESPONSIVENESS from './responsiveness'
+export * as SPACING from './spacing'
+export * as TYPOGRAPHY from './typography'
+export * as VIEWPORT from './viewport'

package/src/ui-style-constants/responsiveness.ts

@@ -0,0 +1,15 @@
+// TODO(BC, 2023-04-20): this is media not sufficient to determine that we are on the
+// touch-only On Device Display of the flex. For development purposes, we are omitting
+// the (hover: none) to allow for off device testing. The hover rule should be reintroduced
+// before the release of this code to prevent Funny desktop app behavior when the viewport
+// is precisely 600x1024
+export const touchscreenMediaQuerySpecs = '(height: 600px) and (width: 1024px)'
+
+// This needs to be recalculated on-render to work with storybook viewport settings, so
+// if you need to support both media types in js use the function
+export const isTouchscreenDynamic = (): boolean =>
+  typeof window === 'object' && window.matchMedia != null
+    ? window.matchMedia(touchscreenMediaQuerySpecs).matches
+    : false
+
+export const isTouchscreen = isTouchscreenDynamic()

package/src/ui-style-constants/spacing.ts

@@ -0,0 +1,18 @@
+export const spacing2 = '0.125rem' as const // 2px
+export const spacing4 = '0.25rem' as const // 4px
+export const spacing6 = '0.375rem' as const // 6px
+export const spacing8 = '0.5rem' as const // 8px
+export const spacing10 = '0.625rem' as const // 10px
+export const spacing12 = '0.75rem' as const // 12px
+export const spacing16 = '1rem' as const // 16px
+export const spacing20 = '1.25rem' as const // 20px
+export const spacing24 = '1.5rem' as const // 24px
+export const spacing32 = '2rem' as const // 32px
+export const spacing40 = '2.5rem' as const // 40px
+export const spacing44 = '2.75rem' as const // 44px
+export const spacing48 = '3rem' as const // 48px
+export const spacing60 = '3.75rem' as const // 60px
+export const spacing68 = '4.25rem' as const // 68px
+export const spacing80 = '5rem' as const // 80px
+export const spacing120 = '7.5rem' as const // 120px
+export const spacingAuto = 'auto' as const // auto

package/src/ui-style-constants/typography.ts

@@ -0,0 +1,258 @@
+import { css } from 'styled-components'
+import { COLORS } from '../helix-design-system'
+
+// Font Sizes
+export const fontSize80 = '5rem' // 80px
+export const fontSize38 = '2.375rem' // 38px
+export const fontSize32 = '2rem' // 32px
+export const fontSize28 = '1.75rem' // 28px
+export const fontSize22 = '1.375rem' // 22px
+export const fontSize20 = '1.25rem' // 20px
+export const fontSizeH1 = '1.188rem' // 19px
+export const fontSizeH2 = '0.9375rem' // 15px
+export const fontSizeH3 = '0.875rem' // 14px
+export const fontSizeH4 = '0.813rem' //  13px
+export const fontSizeH6 = '0.563rem' // 9px
+export const fontSizeP = '0.8125rem' // 13px
+export const fontSizeLabel = '0.6875rem' // 11px
+export const fontSizeCaption = '0.625rem' // 10px
+
+// Font Weights
+export const fontWeightBold = 700
+export const fontWeightSemiBold = 600
+export const fontWeightRegular = 400
+export const fontWeightLight = 300
+
+// Line Heights
+export const lineHeight96 = '6rem' // 96px
+export const lineHeight48 = '3rem' // 48px
+export const lineHeight42 = '2.625rem' // 42px
+export const lineHeight36 = '2.25rem' // 36px
+export const lineHeight28 = '1.75rem' // 28px
+export const lineHeight24 = '1.5rem' // 24px
+export const lineHeight20 = '1.25rem' // 20px
+export const lineHeight18 = '1.125rem' // 18px
+export const lineHeight16 = '1rem' // 16px
+export const lineHeight12 = '0.75rem' // 12px
+export const lineHeightNormal = 'normal' // normal
+
+// font styles
+export const fontStyleNormal = 'normal'
+export const fontStyleItalic = 'italic'
+
+// text transforms
+export const textTransformNone = 'none'
+export const textTransformCapitalize = 'capitalize'
+export const textTransformUppercase = 'uppercase'
+export const textTransformLowercase = 'lowercase'
+
+export const textAlignLeft = 'left'
+export const textAlignRight = 'right'
+export const textAlignCenter = 'center'
+export const textAlignJustify = 'justify'
+
+// text decoration
+export const textDecorationUnderline = 'underline'
+
+// Default font styles, color agnostic for first pass
+export const h1Default = css`
+  font-size: ${fontSizeH1};
+  font-weight: ${fontWeightSemiBold};
+  line-height: ${lineHeight24};
+`
+
+export const h2Regular = css`
+  font-size: ${fontSizeH2};
+  font-weight: ${fontWeightRegular};
+  line-height: ${lineHeight20};
+`
+
+export const h2SemiBold = css`
+  font-size: ${fontSizeH2};
+  font-weight: ${fontWeightSemiBold};
+  line-height: ${lineHeight20};
+`
+export const h3Regular = css`
+  font-size: ${fontSizeH3};
+  font-weight: ${fontWeightRegular};
+  line-height: ${lineHeight20};
+`
+
+export const h3SemiBold = css`
+  font-size: ${fontSizeH3};
+  font-weight: ${fontWeightSemiBold};
+  line-height: ${lineHeight20};
+`
+
+export const h6Default = css`
+  font-size: ${fontSizeH6};
+  font-weight: ${fontWeightRegular};
+  line-height: ${lineHeight12};
+  text-transform: ${textTransformUppercase};
+`
+
+export const h6SemiBold = css`
+  font-size: ${fontSizeH6};
+  font-weight: ${fontWeightSemiBold};
+  line-height: ${lineHeight12};
+`
+
+export const pRegular = css`
+  font-size: ${fontSizeP};
+  font-weight: ${fontWeightRegular};
+  line-height: ${lineHeight20};
+`
+
+export const pSemiBold = css`
+  font-size: ${fontSizeP};
+  font-weight: ${fontWeightSemiBold};
+  line-height: ${lineHeight20};
+`
+
+export const labelRegular = css`
+  font-size: ${fontSizeLabel};
+  font-weight: ${fontWeightRegular};
+  line-height: ${lineHeight12};
+`
+
+export const labelSemiBold = css`
+  font-size: ${fontSizeLabel};
+  font-weight: ${fontWeightSemiBold};
+  line-height: ${lineHeight12};
+`
+
+export const linkPSemiBold = css`
+  font-size: ${fontSizeP};
+  font-weight: ${fontWeightSemiBold};
+  line-height: ${lineHeight20};
+  color: ${COLORS.blue50};
+
+  &:hover {
+    color: ${COLORS.blue55};
+  }
+`
+
+// font styles for touchscreen
+export const level1Header = css`
+  font-size: ${fontSize80};
+  font-weight: ${fontWeightBold};
+  line-height: ${lineHeight96};
+`
+
+export const level2HeaderBold = css`
+  font-size: ${fontSize38};
+  line-height: ${lineHeight48};
+  font-weight: ${fontWeightBold};
+`
+
+export const level2HeaderSemiBold = css`
+  font-size: ${fontSize38};
+  line-height: ${lineHeight48};
+  font-weight: ${fontWeightSemiBold};
+`
+
+export const level2HeaderRegular = css`
+  font-size: ${fontSize38};
+  line-height: ${lineHeight48};
+  font-weight: ${fontWeightRegular};
+`
+
+export const level3HeaderBold = css`
+  font-size: ${fontSize32};
+  line-height: ${lineHeight42};
+  font-weight: ${fontWeightBold};
+`
+
+export const level3HeaderSemiBold = css`
+  font-size: ${fontSize32};
+  line-height: ${lineHeight42};
+  font-weight: ${fontWeightSemiBold};
+`
+
+export const level3HeaderRegular = css`
+  font-size: ${fontSize32};
+  line-height: ${lineHeight42};
+  font-weight: ${fontWeightRegular};
+`
+
+export const level4HeaderBold = css`
+  font-size: ${fontSize28};
+  line-height: ${lineHeight36};
+  font-weight: ${fontWeightBold};
+`
+
+export const level4HeaderSemiBold = css`
+  font-size: ${fontSize28};
+  line-height: ${lineHeight36};
+  font-weight: ${fontWeightSemiBold};
+`
+
+export const level4HeaderRegular = css`
+  font-size: ${fontSize28};
+  line-height: ${lineHeight36};
+  font-weight: ${fontWeightRegular};
+`
+
+export const bodyTextBold = css`
+  font-size: ${fontSize22};
+  line-height: ${lineHeight28};
+  font-weight: ${fontWeightBold};
+`
+
+export const bodyTextSemiBold = css`
+  font-size: ${fontSize22};
+  line-height: ${lineHeight28};
+  font-weight: ${fontWeightSemiBold};
+`
+
+export const bodyTextRegular = css`
+  font-size: ${fontSize22};
+  line-height: ${lineHeight28};
+  font-weight: ${fontWeightRegular};
+`
+
+export const smallBodyTextBold = css`
+  font-size: ${fontSize20};
+  line-height: ${lineHeight24};
+  font-weight: ${fontWeightBold};
+`
+
+export const smallBodyTextSemiBold = css`
+  font-size: ${fontSize20};
+  line-height: ${lineHeight24};
+  font-weight: ${fontWeightSemiBold};
+`
+
+export const smallBodyTextRegular = css`
+  font-size: ${fontSize20};
+  line-height: ${lineHeight24};
+  font-weight: ${fontWeightRegular};
+`
+
+export const darkLinkH4SemiBold = css`
+  font-size: ${fontSizeH4};
+  font-weight: ${fontWeightSemiBold};
+  line-height: ${lineHeight20};
+  color: ${COLORS.grey50};
+  &:hover {
+    color: ${COLORS.black90};
+  }
+`
+
+export const darkLinkLabelSemiBold = css`
+  font-size: ${fontSizeLabel};
+  font-weight: ${fontWeightSemiBold};
+  line-height: ${lineHeight20};
+  color: ${COLORS.grey60};
+  &:hover {
+    color: ${COLORS.black90};
+  }
+`
+
+export const darkLinkLabelSemiBoldDisabled = css`
+  font-size: ${fontSizeLabel};
+  font-weight: ${fontWeightSemiBold};
+  line-height: ${lineHeight20};
+  color: ${COLORS.grey60};
+  cursor: not-allowed;
+`

package/src/ui-style-constants/viewport.ts

@@ -0,0 +1,18 @@
+// Note (kk:08/29/2023) Needed this in this ts file to avoid check-js errors on CI
+const customViewports = {
+  onDeviceDisplay: {
+    name: 'Touchscreen',
+    type: 'tablet',
+    styles: {
+      width: '1024px',
+      height: '600px',
+    },
+  },
+}
+
+export const touchScreenViewport = {
+  viewport: {
+    viewports: customViewports,
+    defaultViewport: 'onDeviceDisplay',
+  },
+}

package/src/utils.ts

@@ -0,0 +1,56 @@
+export const humanizeLabwareType = (labwareType: string): string => {
+  return labwareType.replace(/-|_/g, ' ')
+}
+
+export const wellNameSplit = (wellName: string): [string, string] => {
+  // Eg B9 => ['B', '9']
+  const raw = wellName.split(/(\D+)(\d+)/)
+
+  if (raw.length !== 4) {
+    throw Error('expected /\\D+\\d+/ regexp to split wellName, got ' + wellName)
+  }
+
+  const letters = raw[1]
+
+  if (letters.length !== 1) {
+    throw Error(
+      'expected 1 letter in wellName, got ' +
+        letters +
+        ' in wellName: ' +
+        wellName
+    )
+  }
+
+  const numbers = raw[2]
+
+  return [letters, numbers]
+}
+
+/**
+ * Truncate a long string to display it
+ * @example
+ * truncateString('Illumina DNA Prep with Enrichment: Part 1 - Tagmentation, Clean Up, Amplify Tagmlo1234567ted', 88, 66);
+ * Illumina DNA Prep with Enrichment: Part 1 - Tagmentation, Clean Up...fy Tagmlo1234567ted
+ *
+ * @param {string} text - A string param
+ * @param {number} maxLength - A maximum length of display
+ * @param {number} breakPoint - Optional A point to insert three dots
+ *
+ * @returns {string} Returns the truncated string
+ */
+export function truncateString(
+  text: string,
+  maxLength: number,
+  breakPoint?: number
+): string {
+  const dots = '...'
+  if (text.length > maxLength)
+    if (breakPoint != null) {
+      return `${text.substring(0, breakPoint)}${dots}${text.slice(
+        breakPoint - maxLength + dots.length
+      )}`
+    } else {
+      return `${text.slice(0, maxLength - dots.length)}${dots}`
+    }
+  else return text
+}