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

package/src/molecules/DropdownMenu/index.tsx

@@ -0,0 +1,343 @@
+import * as React from 'react'
+import { css } from 'styled-components'
+
+import { BORDERS, COLORS } from '../../helix-design-system'
+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 { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { Flex } from '../../primitives'
+import { Icon } from '../../icons'
+import { useHoverTooltip } from '../../tooltips'
+import { useOnClickOutside } from '../../interaction-enhancers'
+import { LegacyStyledText } from '../../atoms/StyledText/LegacyStyledText'
+import { MenuItem } from '../../atoms/MenuList/MenuItem'
+import { Tooltip } from '../../atoms/Tooltip'
+import { StyledText } from '../../atoms/StyledText'
+import { LiquidIcon } from '../LiquidIcon'
+
+/** this is the max height to display 10 items */
+const MAX_HEIGHT = 316
+
+/** this is for adjustment variable for the case that the space of the bottom and the space of the top are very close */
+const HEIGHT_ADJUSTMENT = 100
+
+export interface DropdownOption {
+  name: string
+  value: string
+  /** optional dropdown option for adding the liquid color icon */
+  liquidColor?: string
+  disabled?: boolean
+  tooltipText?: string
+}
+
+export type DropdownBorder = 'rounded' | 'neutral'
+
+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?: React.FocusEventHandler<HTMLButtonElement>
+  /** blur handler */
+  onBlur?: React.FocusEventHandler<HTMLButtonElement>
+  /** optional disabled */
+  disabled?: boolean
+  /** optional placement of the menu */
+  menuPlacement?: 'auto' | 'top' | 'bottom'
+}
+
+// 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,
+    menuPlacement = 'auto',
+  } = props
+  const [targetProps, tooltipProps] = useHoverTooltip()
+  const [showDropdownMenu, setShowDropdownMenu] = React.useState<boolean>(false)
+  const [optionTargetProps, optionTooltipProps] = useHoverTooltip({
+    placement: 'top-end',
+  })
+
+  const [dropdownPosition, setDropdownPosition] = React.useState<
+    'top' | 'bottom'
+  >('bottom')
+  const dropDownMenuWrapperRef = useOnClickOutside<HTMLDivElement>({
+    onClickOutside: () => {
+      setShowDropdownMenu(false)
+    },
+  })
+
+  React.useEffect(() => {
+    if (menuPlacement !== 'auto') {
+      setDropdownPosition(menuPlacement)
+      return
+    }
+
+    const handlePositionCalculation = (): void => {
+      const dropdownRect = dropDownMenuWrapperRef.current?.getBoundingClientRect()
+      if (dropdownRect != null) {
+        const parentElement = dropDownMenuWrapperRef?.current?.parentElement
+        const grandParentElement = parentElement?.parentElement?.parentElement
+        let availableHeight = window.innerHeight
+        let scrollOffset = 0
+
+        if (grandParentElement != null) {
+          const grandParentRect = grandParentElement.getBoundingClientRect()
+          availableHeight = grandParentRect.bottom - grandParentRect.top
+          scrollOffset = grandParentRect.top
+        } else if (parentElement != null) {
+          const parentRect = parentElement.getBoundingClientRect()
+          availableHeight = parentRect.bottom - parentRect.top
+          scrollOffset = parentRect.top
+        }
+
+        const downSpace =
+          filterOptions.length + 1 > 10
+            ? MAX_HEIGHT
+            : (filterOptions.length + 1) * 34
+        const dropdownBottom = dropdownRect.bottom + downSpace - scrollOffset
+
+        setDropdownPosition(
+          dropdownBottom > availableHeight &&
+            Math.abs(dropdownBottom - availableHeight) > HEIGHT_ADJUSTMENT
+            ? 'top'
+            : 'bottom'
+        )
+      }
+    }
+
+    window.addEventListener('resize', handlePositionCalculation)
+    window.addEventListener('scroll', handlePositionCalculation)
+    handlePositionCalculation()
+
+    return () => {
+      window.removeEventListener('resize', handlePositionCalculation)
+      window.removeEventListener('scroll', handlePositionCalculation)
+    }
+  }, [filterOptions.length, dropDownMenuWrapperRef])
+
+  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.preventDefault()
+            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}
+            <Flex
+              css={css`
+                font-weight: ${dropdownType === 'rounded'
+                  ? TYPOGRAPHY.pSemiBold
+                  : TYPOGRAPHY.pRegular};
+              `}
+            >
+              <StyledText
+                desktopStyle="captionRegular"
+                css={LINE_CLAMP_TEXT_STYLE}
+              >
+                {currentOption.name}
+              </StyledText>
+            </Flex>
+          </Flex>
+          {showDropdownMenu ? (
+            <Icon size="0.75rem" name="menu-down" transform="rotate(180deg)" />
+          ) : (
+            <Icon size="0.75rem" name="menu-down" />
+          )}
+        </Flex>
+        {showDropdownMenu && (
+          <Flex
+            zIndex={3}
+            borderRadius={BORDERS.borderRadius8}
+            boxShadow={BORDERS.tinyDropShadow}
+            position={POSITION_ABSOLUTE}
+            backgroundColor={COLORS.white}
+            flexDirection={DIRECTION_COLUMN}
+            width={width}
+            top={dropdownPosition === 'bottom' ? '2.5rem' : undefined}
+            bottom={dropdownPosition === 'top' ? '2.5rem' : undefined}
+            overflowY={OVERFLOW_AUTO}
+            maxHeight="20rem" // Set the maximum display number to 10.
+          >
+            {filterOptions.map((option, index) => (
+              <React.Fragment key={`${option.name}-${index}`}>
+                <MenuItem
+                  disabled={option.disabled}
+                  zIndex={3}
+                  key={`${option.name}-${index}`}
+                  onClick={() => {
+                    onClick(option.value)
+                    setShowDropdownMenu(false)
+                  }}
+                  border="none"
+                >
+                  <Flex
+                    gridGap={SPACING.spacing8}
+                    alignItems={ALIGN_CENTER}
+                    {...optionTargetProps}
+                  >
+                    {option.liquidColor != null ? (
+                      <LiquidIcon color={option.liquidColor} />
+                    ) : null}
+                    {option.name}
+                  </Flex>
+                </MenuItem>
+                {option.tooltipText != null ? (
+                  <Tooltip tooltipProps={optionTooltipProps}>
+                    {option.tooltipText}
+                  </Tooltip>
+                ) : null}
+              </React.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 LINE_CLAMP_TEXT_STYLE = css`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: ${OVERFLOW_HIDDEN};
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  -webkit-line-clamp: 1;
+  word-break: break-all;
+`

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: 'Library/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,40 @@
+import type * as React from 'react'
+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 '..'
+
+const render = (props: React.ComponentProps<typeof InfoScreen>) => {
+  return renderWithProviders(<InfoScreen {...props} />)
+}
+
+describe('InfoScreen', () => {
+  let props: React.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}`
+    )
+  })
+})

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,
+}: 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: 'Library/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,50 @@
+import type * as React from 'react'
+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 '..'
+
+const render = (props: React.ComponentProps<typeof LiquidIcon>) => {
+  return renderWithProviders(<LiquidIcon {...props} />)
+}
+
+describe('LiquidIcon', () => {
+  let props: React.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}`)
+  })
+})

package/src/molecules/LiquidIcon/index.tsx

@@ -0,0 +1,68 @@
+import { css } from 'styled-components'
+import { Btn, Flex } from '../../primitives'
+import { SPACING } from '../../ui-style-constants'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
+import { FLEX_MAX_CONTENT } from '../../styles'
+
+type LiquidIconSize = 'small' | 'medium'
+
+interface LiquidIconProps {
+  color: string
+  size?: LiquidIconSize
+  onClick?: () => void
+  hasError?: boolean
+}
+
+export function LiquidIcon(props: LiquidIconProps): JSX.Element {
+  const { color, size = 'small', onClick, hasError = false } = props
+
+  const LIQUID_ICON_CONTAINER_STYLE = css`
+    height: max-content;
+    width: max-content;
+    background-color: ${COLORS.white};
+    border-style: ${BORDERS.styleSolid};
+    border-width: 1px;
+    border-color: ${hasError ? COLORS.red50 : COLORS.grey30};
+    border-radius: ${BORDERS.borderRadius4};
+
+    &:hover {
+      border-color: ${onClick != null ? COLORS.grey35 : COLORS.grey30};
+    }
+    &:active {
+      border-color: ${onClick != null ? COLORS.grey40 : COLORS.grey30};
+    }
+  `
+
+  const liquid = (
+    <Flex
+      css={LIQUID_ICON_CONTAINER_STYLE}
+      padding={size === 'medium' ? SPACING.spacing12 : SPACING.spacing8}
+      data-testid={`LiquidIcon_${color}`}
+    >
+      <Icon
+        name="circle"
+        color={color}
+        size={size === 'medium' ? '1rem' : '0.5rem'}
+      />
+    </Flex>
+  )
+
+  return onClick != null ? (
+    <Btn
+      css={css`
+        width: ${FLEX_MAX_CONTENT};
+        &:focus-visible {
+          outline: 2px solid ${COLORS.white};
+          box-shadow: 0 0 0 4px ${COLORS.blue50};
+          border-radius: ${BORDERS.borderRadius4};
+        }
+      `}
+      onClick={onClick}
+    >
+      {liquid}
+    </Btn>
+  ) : (
+    liquid
+  )
+}