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

package/src/molecules/DropdownMenu/index.tsx

@@ -0,0 +1,432 @@
+import { Fragment, useEffect, useRef, useState } from 'react'
+import type { FocusEventHandler } from 'react'
+import { css } from 'styled-components'
+import type { FlattenSimpleInterpolation } from 'styled-components'
+import { MenuItem } from '../../atoms/MenuList/MenuItem'
+import { StyledText } from '../../atoms/StyledText'
+import { LegacyStyledText } from '../../atoms/StyledText/LegacyStyledText'
+import { Tooltip } from '../../atoms/Tooltip'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
+import { useOnClickOutside } from '../../interaction-enhancers'
+import { Flex } from '../../primitives'
+import {
+  ALIGN_CENTER,
+  CURSOR_DEFAULT,
+  CURSOR_POINTER,
+  DIRECTION_COLUMN,
+  DIRECTION_ROW,
+  JUSTIFY_SPACE_BETWEEN,
+  OVERFLOW_AUTO,
+  OVERFLOW_HIDDEN,
+  POSITION_ABSOLUTE,
+  POSITION_RELATIVE,
+} from '../../styles'
+import { useHoverTooltip } from '../../tooltips'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { DeckInfoLabel } from '../DeckInfoLabel'
+import { LiquidIcon } from '../LiquidIcon'
+
+export interface DropdownOption {
+  /** dropdown option name */
+  name: string
+  /** dropdown option value */
+  value: string
+  /** optional dropdown option for adding the liquid color icon */
+  liquidColor?: string
+  /** optional dropdown option for adding the deck label */
+  deckLabel?: string
+  /** subtext below the name */
+  subtext?: string
+  /** optional disabled */
+  disabled?: boolean
+  /** optional tooltip text */
+  tooltipText?: string | null
+}
+
+export type DropdownBorder = 'rounded' | 'neutral'
+
+type MenuPlacement = 'auto' | 'top' | 'bottom'
+
+export interface DropdownMenuProps {
+  /** dropdown options */
+  filterOptions: DropdownOption[]
+  /** click handler */
+  onClick: (value: string) => void
+  /** current selected option */
+  currentOption: DropdownOption
+  /** dropdown */
+  width?: string
+  /** dropdown style type  */
+  dropdownType?: DropdownBorder
+  /** dropdown title */
+  title?: string
+  /** dropdown item caption */
+  caption?: string | null
+  /** text for tooltip */
+  tooltipText?: string | null
+  /** html tabindex property */
+  tabIndex?: number
+  /** optional error */
+  error?: string | null
+  /** focus handler */
+  onFocus?: FocusEventHandler<HTMLButtonElement>
+  /** blur handler */
+  onBlur?: FocusEventHandler<HTMLButtonElement>
+  /** optional disabled */
+  disabled?: boolean
+  /** optional placement of the menu */
+  menuPlacement?: MenuPlacement
+  /** optional enter handler */
+  onEnter?: (id: string) => void
+  /** optional exit handler */
+  onExit?: () => void
+}
+
+// TODO: (smb: 4/15/22) refactor this to use html select for accessibility
+
+export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
+  const {
+    filterOptions,
+    onClick,
+    currentOption,
+    width = '9.125rem',
+    dropdownType = 'rounded',
+    title,
+    caption,
+    tooltipText,
+    tabIndex = 0,
+    error,
+    disabled = false,
+    onFocus,
+    onBlur,
+    onEnter,
+    onExit,
+    menuPlacement = 'auto',
+  } = props
+  const [targetProps, tooltipProps] = useHoverTooltip()
+  const [showDropdownMenu, setShowDropdownMenu] = useState<boolean>(false)
+  const [optionTargetProps, optionTooltipProps] = useHoverTooltip({
+    placement: 'top-end',
+  })
+
+  const [dropdownPosition, setDropdownPosition] = useState<
+    Omit<MenuPlacement, 'auto'>
+  >('bottom')
+  const dropDownMenuWrapperRef = useOnClickOutside<HTMLDivElement>({
+    onClickOutside: () => {
+      setShowDropdownMenu(false)
+    },
+  })
+
+  const menuItemsContainerRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (
+      !dropDownMenuWrapperRef.current ||
+      !showDropdownMenu ||
+      !menuItemsContainerRef.current ||
+      menuPlacement !== 'auto'
+    ) {
+      return
+    }
+
+    const dropdownRect = dropDownMenuWrapperRef.current.getBoundingClientRect()
+    let potentialMenuHeight = 0
+    if (menuItemsContainerRef.current) {
+      potentialMenuHeight = menuItemsContainerRef.current.scrollHeight
+    }
+
+    const viewportHeight = window.innerHeight
+    const spaceAbove = dropdownRect.top
+    const spaceBelow = viewportHeight - dropdownRect.bottom
+
+    let newPosition: 'top' | 'bottom' = 'bottom'
+
+    if (menuPlacement === 'auto') {
+      const fitsBelow = spaceBelow >= potentialMenuHeight
+      const fitsAbove = spaceAbove >= potentialMenuHeight
+
+      if (fitsBelow) {
+        newPosition = 'bottom'
+      } else if (fitsAbove) {
+        newPosition = 'top'
+      } else {
+        newPosition = spaceBelow >= spaceAbove ? 'bottom' : 'top'
+      }
+    } else {
+      newPosition = menuPlacement
+    }
+    setDropdownPosition(newPosition)
+
+    const handlePositionCalculation = (): void => {
+      if (
+        !dropDownMenuWrapperRef.current ||
+        !showDropdownMenu ||
+        !menuItemsContainerRef.current
+      )
+        return
+      const currentTriggerRect = dropDownMenuWrapperRef.current.getBoundingClientRect()
+      const currentMenuHeight = menuItemsContainerRef.current.scrollHeight
+      const currentViewportHeight = window.innerHeight
+      const currentSpaceAbove = currentTriggerRect.top
+      const currentSpaceBelow =
+        currentViewportHeight - currentTriggerRect.bottom
+      let determinedPosition = 'bottom'
+      if (menuPlacement === 'auto') {
+        const currentFitsBelow = currentSpaceBelow >= currentMenuHeight
+        const currentFitsAbove = currentSpaceAbove >= currentMenuHeight
+        if (currentFitsBelow) determinedPosition = 'bottom'
+        else if (currentFitsAbove) determinedPosition = 'top'
+        else
+          determinedPosition =
+            currentSpaceBelow >= currentSpaceAbove ? 'bottom' : 'top'
+      } else {
+        determinedPosition = menuPlacement
+      }
+      setDropdownPosition(determinedPosition as 'top' | 'bottom')
+    }
+
+    window.addEventListener('resize', handlePositionCalculation)
+    window.addEventListener('scroll', handlePositionCalculation, true)
+
+    return () => {
+      window.removeEventListener('resize', handlePositionCalculation)
+      window.removeEventListener('scroll', handlePositionCalculation, true)
+    }
+  }, [
+    showDropdownMenu,
+    filterOptions.length,
+    menuPlacement,
+    dropDownMenuWrapperRef,
+    menuItemsContainerRef,
+  ])
+
+  const toggleSetShowDropdownMenu = (): void => {
+    if (!isDisabled) {
+      setShowDropdownMenu(!showDropdownMenu)
+    }
+  }
+
+  const isDisabled = filterOptions.length === 0
+
+  let defaultBorderColor = COLORS.grey50
+  let hoverBorderColor = COLORS.grey55
+  if (showDropdownMenu) {
+    defaultBorderColor = COLORS.blue50
+    hoverBorderColor = COLORS.blue50
+  } else if (error) {
+    defaultBorderColor = COLORS.red50
+    hoverBorderColor = COLORS.red50
+  }
+
+  const DROPDOWN_STYLE = css`
+    flex-direction: ${DIRECTION_ROW};
+    color: ${disabled ? COLORS.grey40 : COLORS.black90};
+    background-color: ${COLORS.white};
+    cursor: ${isDisabled ? CURSOR_DEFAULT : CURSOR_POINTER};
+    padding: ${SPACING.spacing8} ${SPACING.spacing12};
+    border: 1px ${BORDERS.styleSolid}
+      ${disabled ? COLORS.grey35 : defaultBorderColor};
+    border-radius: ${dropdownType === 'rounded'
+      ? BORDERS.borderRadiusFull
+      : BORDERS.borderRadius4};
+    align-items: ${ALIGN_CENTER};
+    justify-content: ${JUSTIFY_SPACE_BETWEEN};
+    width: ${width};
+    height: 2.25rem;
+
+    &:hover {
+      border: 1px ${BORDERS.styleSolid}
+        ${disabled ? COLORS.grey35 : hoverBorderColor};
+    }
+
+    &:active {
+      border: 1px ${BORDERS.styleSolid} ${error ? COLORS.red50 : COLORS.blue50};
+    }
+
+    &:focus-visible {
+      border: 1px ${BORDERS.styleSolid} ${COLORS.grey55};
+      outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
+      outline-offset: 2px;
+    }
+  `
+  return (
+    <Flex
+      flexDirection={DIRECTION_COLUMN}
+      ref={dropDownMenuWrapperRef}
+      gridGap={SPACING.spacing8}
+      width={width}
+    >
+      {title !== null ? (
+        <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
+          <StyledText
+            desktopStyle="bodyDefaultRegular"
+            color={disabled ? COLORS.grey35 : COLORS.grey60}
+          >
+            {title}
+          </StyledText>
+          {tooltipText != null ? (
+            <>
+              <Flex {...targetProps}>
+                <Icon
+                  name="information"
+                  size={SPACING.spacing12}
+                  color={COLORS.grey60}
+                  data-testid="information_icon"
+                />
+              </Flex>
+              <Tooltip tooltipProps={tooltipProps}>{tooltipText}</Tooltip>
+            </>
+          ) : null}
+        </Flex>
+      ) : null}
+      <Flex flexDirection={DIRECTION_COLUMN} position={POSITION_RELATIVE}>
+        <Flex
+          onClick={(e: MouseEvent) => {
+            e.stopPropagation()
+            toggleSetShowDropdownMenu()
+          }}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          css={DROPDOWN_STYLE}
+          tabIndex={tabIndex}
+        >
+          <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
+            {currentOption.liquidColor != null ? (
+              <LiquidIcon color={currentOption.liquidColor} />
+            ) : null}
+            {currentOption.deckLabel != null ? (
+              <DeckInfoLabel deckLabel={currentOption.deckLabel} svgSize={13} />
+            ) : null}
+            <Flex
+              flexDirection={DIRECTION_COLUMN}
+              css={css`
+                font-weight: ${dropdownType === 'rounded'
+                  ? TYPOGRAPHY.pSemiBold
+                  : TYPOGRAPHY.pRegular};
+              `}
+            >
+              <StyledText
+                desktopStyle="captionRegular"
+                css={LINE_CLAMP_TEXT_STYLE(1)}
+              >
+                {currentOption.name}
+              </StyledText>
+            </Flex>
+          </Flex>
+          <Icon
+            size="0.75rem"
+            name="menu-down"
+            transform={showDropdownMenu ? 'rotate(180deg)' : undefined}
+          />
+        </Flex>
+        {showDropdownMenu && (
+          <Flex
+            ref={menuItemsContainerRef}
+            css={MENU_ITEM_CONTAINER_STYLE(width, dropdownPosition)}
+            role="listbox"
+          >
+            {filterOptions.map((option, index) => (
+              <Fragment key={`${option.name}-${index}`}>
+                <MenuItem
+                  disabled={option.disabled}
+                  zIndex={3}
+                  key={`${option.name}-${index}`}
+                  onClick={e => {
+                    onClick(option.value)
+                    setShowDropdownMenu(false)
+                    e.stopPropagation()
+                  }}
+                  border="none"
+                  onMouseEnter={() => onEnter?.(option.value)}
+                  onMouseLeave={onExit}
+                >
+                  <Flex
+                    gridGap={SPACING.spacing8}
+                    alignItems={ALIGN_CENTER}
+                    {...optionTargetProps}
+                  >
+                    {option.liquidColor != null ? (
+                      <LiquidIcon color={option.liquidColor} />
+                    ) : null}
+                    {option.deckLabel != null ? (
+                      <DeckInfoLabel
+                        deckLabel={option.deckLabel}
+                        svgSize={13}
+                      />
+                    ) : null}
+                    <Flex
+                      flexDirection={DIRECTION_COLUMN}
+                      gridGap={option.subtext != null ? SPACING.spacing4 : '0'}
+                    >
+                      <StyledText
+                        desktopStyle="captionRegular"
+                        css={LINE_CLAMP_TEXT_STYLE(3, true)}
+                      >
+                        {option.name}
+                      </StyledText>
+                      <StyledText
+                        desktopStyle="captionRegular"
+                        color={COLORS.grey60}
+                      >
+                        {option.subtext}
+                      </StyledText>
+                    </Flex>
+                  </Flex>
+                </MenuItem>
+                {option.tooltipText != null ? (
+                  <Tooltip tooltipProps={optionTooltipProps}>
+                    {option.tooltipText}
+                  </Tooltip>
+                ) : null}
+              </Fragment>
+            ))}
+          </Flex>
+        )}
+      </Flex>
+      {caption != null ? (
+        <LegacyStyledText as="label" color={COLORS.grey60}>
+          {caption}
+        </LegacyStyledText>
+      ) : null}
+      {error != null ? (
+        <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.red50}>
+          {error}
+        </StyledText>
+      ) : null}
+    </Flex>
+  )
+}
+
+const MENU_ITEM_CONTAINER_STYLE = (
+  width: string,
+  dropdownPosition: Omit<MenuPlacement, 'auto'>
+): FlattenSimpleInterpolation => css`
+  position: ${POSITION_ABSOLUTE};
+  z-index: 3;
+  width: ${width};
+  flex-direction: ${DIRECTION_COLUMN};
+  border-radius: ${BORDERS.borderRadius8};
+  background-color: ${COLORS.white};
+  box-shadow: ${BORDERS.tinyDropShadow};
+  top: ${dropdownPosition === 'bottom' ? '2.5rem' : undefined};
+  bottom: ${dropdownPosition === 'top' ? '2.5rem' : undefined};
+  overflow-y: ${OVERFLOW_AUTO};
+  max-height: 20rem;
+`
+
+export const LINE_CLAMP_TEXT_STYLE = (
+  lineClamp?: number,
+  wordBreak?: boolean
+): FlattenSimpleInterpolation => css`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: ${OVERFLOW_HIDDEN};
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  -webkit-line-clamp: ${lineClamp ?? 1};
+  word-break: ${wordBreak === true
+    ? 'normal'
+    : 'break-all'}; // normal for tile and break-all for a non word case like aaaaaaaa
+`

package/src/molecules/InfoScreen/InfoScreen.stories.tsx

@@ -0,0 +1,50 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import * as React from 'react-remove-scroll'
+import { Flex } from '../../primitives'
+import { SPACING } from '../../ui-style-constants'
+import { COLORS } from '../../helix-design-system'
+import { InfoScreen as InfoScreenComponent } from './index'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const mockContent = [
+  'No deck hardware',
+  'No labware',
+  'No liquids',
+  'No protocol files included',
+]
+
+const meta: Meta<typeof InfoScreenComponent> = {
+  title: 'Helix/Molecules/InfoScreen',
+  component: InfoScreenComponent,
+  argTypes: {
+    content: {
+      control: {
+        type: 'select',
+      },
+      options: mockContent,
+    },
+    backgroundColor: {
+      control: {
+        type: 'select',
+      },
+      options: COLORS,
+    },
+  },
+  decorators: [
+    Story => (
+      <Flex padding={SPACING.spacing16}>
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+export default meta
+
+type Story = StoryObj<typeof InfoScreenComponent>
+
+export const InfoScreen: Story = {
+  args: {
+    content: 'No protocol files included',
+  },
+}

package/src/molecules/InfoScreen/__tests__/InfoScreen.test.tsx

@@ -0,0 +1,57 @@
+import { screen } from '@testing-library/react'
+import { describe, it, expect, beforeEach } from 'vitest'
+
+import { renderWithProviders } from '../../../testing/utils'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+import { InfoScreen } from '..'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InfoScreen>) => {
+  return renderWithProviders(<InfoScreen {...props} />)
+}
+
+describe('InfoScreen', () => {
+  let props: ComponentProps<typeof InfoScreen>
+
+  beforeEach(() => {
+    props = {
+      content: 'mock info text',
+    }
+  })
+
+  it('should render text and icon with proper color - labware', () => {
+    render(props)
+    screen.getByLabelText('alert')
+    screen.getByText('mock info text')
+  })
+
+  it('should have proper styles', () => {
+    render(props)
+    expect(screen.getByTestId('InfoScreen')).toHaveStyle(
+      `background-color: ${COLORS.grey30}`
+    )
+    expect(screen.getByTestId('InfoScreen')).toHaveStyle(
+      `border-radius: ${BORDERS.borderRadius8}`
+    )
+    expect(screen.getByLabelText('alert')).toHaveStyle(
+      `color: ${COLORS.grey60}`
+    )
+    expect(screen.getByTestId('InfoScreen')).toHaveStyle(`height: 100%`)
+  })
+
+  it('should render set height, subContent and backgroundColor', () => {
+    props = {
+      ...props,
+      subContent: 'mock sub content',
+      backgroundColor: COLORS.blue50,
+      height: '10rem',
+    }
+    render(props)
+    screen.getByText('mock sub content')
+    expect(screen.getByTestId('InfoScreen')).toHaveStyle(
+      `background-color: ${COLORS.blue50}`
+    )
+    expect(screen.getByTestId('InfoScreen')).toHaveStyle(`height: 10rem`)
+  })
+})

package/src/molecules/InfoScreen/index.tsx

@@ -0,0 +1,54 @@
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { SPACING } from '../../ui-style-constants/index'
+import { StyledText } from '../../atoms/StyledText'
+import { Icon } from '../../icons'
+import { Flex } from '../../primitives'
+import { ALIGN_CENTER, DIRECTION_COLUMN, JUSTIFY_CENTER } from '../../styles'
+
+interface InfoScreenProps {
+  content: string
+  subContent?: string
+  backgroundColor?: string
+  height?: string
+}
+
+export function InfoScreen({
+  content,
+  subContent,
+  backgroundColor = COLORS.grey30,
+  height = '100%',
+}: InfoScreenProps): JSX.Element {
+  return (
+    <Flex
+      alignItems={ALIGN_CENTER}
+      justifyContent={JUSTIFY_CENTER}
+      width="100%"
+      height={height}
+      flexDirection={DIRECTION_COLUMN}
+      gridGap={SPACING.spacing12}
+      backgroundColor={backgroundColor}
+      borderRadius={BORDERS.borderRadius8}
+      padding={`${SPACING.spacing40} ${SPACING.spacing16}`}
+      data-testid="InfoScreen"
+    >
+      <Icon
+        name="ot-alert"
+        size="1.25rem"
+        color={COLORS.grey60}
+        aria-label="alert"
+      />
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        alignItems={ALIGN_CENTER}
+        gridGap={SPACING.spacing4}
+      >
+        <StyledText desktopStyle="bodyDefaultSemiBold">{content}</StyledText>
+        {subContent != null ? (
+          <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
+            {subContent}
+          </StyledText>
+        ) : null}
+      </Flex>
+    </Flex>
+  )
+}

package/src/molecules/LiquidIcon/LiquidIcon.stories.tsx

@@ -0,0 +1,53 @@
+import { Flex } from '../../primitives'
+import { SPACING } from '../../ui-style-constants'
+import { customViewports } from '../../../../.storybook/preview'
+import { LiquidIcon } from '.'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof LiquidIcon> = {
+  title: 'Helix/Molecules/LiquidIcon',
+  argTypes: {
+    color: {
+      control: {
+        type: 'text',
+      },
+    },
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['small', 'medium'],
+    },
+  },
+  component: LiquidIcon,
+  parameters: {
+    viewport: {
+      viewports: customViewports,
+      defaultViewport: 'desktopSmall',
+    },
+  },
+  decorators: [
+    Story => (
+      <Flex padding={SPACING.spacing16} width="15rem" height="5rem">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+export default meta
+type Story = StoryObj<typeof LiquidIcon>
+
+export const MediumIcon: Story = {
+  args: {
+    size: 'medium',
+    color: 'green',
+    onClick: () => {},
+  },
+}
+
+export const SmallIcon: Story = {
+  args: {
+    color: 'red',
+    size: 'small',
+  },
+}

package/src/molecules/LiquidIcon/__tests__/LiquidIcon.test.tsx

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest'
+import { renderWithProviders } from '../../../testing/utils'
+import { screen } from '@testing-library/react'
+import { SPACING } from '../../../ui-style-constants'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+
+import { LiquidIcon } from '..'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof LiquidIcon>) => {
+  return renderWithProviders(<LiquidIcon {...props} />)
+}
+
+describe('LiquidIcon', () => {
+  let props: ComponentProps<typeof LiquidIcon>
+
+  it('should render the proper style for large icon', () => {
+    props = {
+      size: 'medium',
+      color: COLORS.red50,
+    }
+    render(props)
+    const LiquidIcon = screen.getByTestId(`LiquidIcon_${COLORS.red50}`)
+    expect(LiquidIcon).toHaveStyle(`padding: ${SPACING.spacing12}`)
+    expect(LiquidIcon).toHaveStyle('height: max-content')
+    expect(LiquidIcon).toHaveStyle('width: max-content')
+    expect(LiquidIcon).toHaveStyle(`background-color: ${COLORS.white}`)
+    expect(LiquidIcon).toHaveStyle(`border-style: ${BORDERS.styleSolid}`)
+    expect(LiquidIcon).toHaveStyle(`border-width: 1px`)
+    expect(LiquidIcon).toHaveStyle(`border-color: ${COLORS.grey30}`)
+    expect(LiquidIcon).toHaveStyle(`border-radius: ${BORDERS.borderRadius4}`)
+  })
+
+  it('should render the proper style for large icon', () => {
+    props = {
+      size: 'small',
+      color: COLORS.blue50,
+    }
+    render(props)
+    const LiquidIcon = screen.getByTestId(`LiquidIcon_${COLORS.blue50}`)
+    expect(LiquidIcon).toHaveStyle(`padding: ${SPACING.spacing8}`)
+    expect(LiquidIcon).toHaveStyle('height: max-content')
+    expect(LiquidIcon).toHaveStyle('width: max-content')
+    expect(LiquidIcon).toHaveStyle(`background-color: ${COLORS.white}`)
+    expect(LiquidIcon).toHaveStyle(`border-style: ${BORDERS.styleSolid}`)
+    expect(LiquidIcon).toHaveStyle(`border-width: 1px`)
+    expect(LiquidIcon).toHaveStyle(`border-color: ${COLORS.grey30}`)
+    expect(LiquidIcon).toHaveStyle(`border-radius: ${BORDERS.borderRadius4}`)
+  })
+})