@opentrons/components 0.1.7-alpha.1 → 0.2.0-alpha.1

package/src/modals/Modal.stories.tsx

@@ -1,45 +0,0 @@
-import { PrimaryButton, StyledText } from '../atoms'
-import { Flex, STYLE_PROPS } from '../primitives'
-import { JUSTIFY_END } from '../styles'
-import { SPACING } from '../ui-style-constants'
-import { Modal as ModalComponent } from './Modal'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof ModalComponent> = {
-  title: 'Helix/Molecules/Modal',
-  component: ModalComponent,
-  argTypes: {
-    // Disable all StyleProps
-    ...Object.fromEntries(
-      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
-        prop,
-        { table: { disable: true } },
-      ])
-    ),
-  },
-}
-export default meta
-type Story = StoryObj<typeof ModalComponent>
-const bodyText = 'Modal body goes here'
-
-const Children = (
-  <StyledText desktopStyle="bodyDefaultRegular">{bodyText}</StyledText>
-)
-
-const Footer = (
-  <Flex justifyContent={JUSTIFY_END} padding={SPACING.spacing24}>
-    <PrimaryButton onClick={() => {}}>{'btn text'}</PrimaryButton>
-  </Flex>
-)
-
-export const Modal: Story = {
-  args: {
-    type: 'info',
-    onClose: () => {},
-    closeOnOutsideClick: false,
-    title: 'Modal Title',
-    children: Children,
-    footer: Footer,
-  },
-}

package/src/modals/Modal.tsx

@@ -1,101 +0,0 @@
-import { COLORS } from '../helix-design-system'
-import { Box } from '../primitives'
-import { SPACING } from '../ui-style-constants'
-import { ModalHeader } from './ModalHeader'
-import { ModalShell } from './ModalShell'
-
-import type { MouseEventHandler, ReactNode } from 'react'
-import type { IconProps } from '../icons'
-import type { StyleProps } from '../primitives'
-import type { Position } from './ModalShell'
-
-type ModalType = 'info' | 'warning' | 'error'
-
-export interface ModalProps extends StyleProps {
-  type?: ModalType
-  onClose?: MouseEventHandler
-  closeOnOutsideClick?: boolean
-  title?: ReactNode
-  titleElement1?: JSX.Element
-  titleElement2?: JSX.Element
-  headerTagElement?: JSX.Element
-  fullPage?: boolean
-  childrenPadding?: string | number
-  children?: ReactNode
-  footer?: ReactNode
-  zIndexOverlay?: number
-  showOverlay?: boolean
-  position?: Position
-  hasHeader?: boolean
-}
-
-/**
- * For Desktop app and Helix (which includes Protocol Designer) use only.
- */
-export const Modal = (props: ModalProps): JSX.Element => {
-  const {
-    type = 'info',
-    onClose,
-    closeOnOutsideClick,
-    title,
-    childrenPadding = `${SPACING.spacing16} ${SPACING.spacing24} ${SPACING.spacing24}`,
-    children,
-    footer,
-    titleElement1,
-    titleElement2,
-    headerTagElement,
-    zIndexOverlay,
-    position,
-    showOverlay,
-    hasHeader = true,
-    ...styleProps
-  } = props
-
-  const iconColor = (type: ModalType): string => {
-    let iconColor: string = ''
-    switch (type) {
-      case 'warning':
-        iconColor = COLORS.yellow50
-        break
-      case 'error':
-        iconColor = COLORS.red50
-        break
-    }
-    return iconColor
-  }
-
-  const modalIcon: IconProps = {
-    name: 'ot-alert',
-    color: iconColor(type),
-    size: '1.25rem',
-  }
-
-  const modalHeader = (
-    <ModalHeader
-      onClose={onClose}
-      title={title}
-      titleElement1={titleElement1}
-      titleElement2={titleElement2}
-      tagElement={headerTagElement}
-      icon={['error', 'warning'].includes(type) ? modalIcon : undefined}
-      color={COLORS.black90}
-      backgroundColor={COLORS.white}
-    />
-  )
-  return (
-    <ModalShell
-      position={position}
-      showOverlay={showOverlay}
-      zIndexOverlay={zIndexOverlay}
-      width={styleProps.width ?? '31.25rem'}
-      header={hasHeader ? modalHeader : undefined}
-      onOutsideClick={closeOnOutsideClick ?? false ? onClose : undefined}
-      // center within viewport aside from nav
-      marginLeft={styleProps.marginLeft ?? '5.656rem'}
-      {...styleProps}
-      footer={footer}
-    >
-      <Box padding={childrenPadding}>{children}</Box>
-    </ModalShell>
-  )
-}

package/src/modals/ModalHeader.tsx

@@ -1,110 +0,0 @@
-import styled, { css } from 'styled-components'
-
-import { StyledText } from '../atoms'
-import { COLORS } from '../helix-design-system'
-import { Icon } from '../icons'
-import { Box, Btn, Flex } from '../primitives'
-import {
-  ALIGN_CENTER,
-  DISPLAY_FLEX,
-  JUSTIFY_CENTER,
-  JUSTIFY_SPACE_BETWEEN,
-} from '../styles'
-import { SPACING } from '../ui-style-constants'
-
-import type { MouseEventHandler, ReactNode } from 'react'
-import type { IconProps } from '../icons'
-
-export interface ModalHeaderProps {
-  title: ReactNode
-  onClose?: MouseEventHandler
-  titleElement1?: JSX.Element
-  titleElement2?: JSX.Element
-  tagElement?: JSX.Element
-  backgroundColor?: string
-  color?: string
-  icon?: IconProps
-  closeButton?: ReactNode
-}
-
-export const ModalHeader = (props: ModalHeaderProps): JSX.Element => {
-  const {
-    icon,
-    onClose,
-    title,
-    titleElement1,
-    titleElement2,
-    backgroundColor,
-    tagElement,
-    color = COLORS.black90,
-    closeButton,
-  } = props
-  return (
-    <>
-      <StyledModalHeader
-        backgroundColor={backgroundColor}
-        data-testid="Modal_header"
-        role="heading"
-      >
-        <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing16}>
-          {icon != null && <Icon {...icon} data-testid="Modal_header_icon" />}
-          {titleElement1}
-          {titleElement2}
-          <StyledText color={color} desktopStyle="bodyLargeSemiBold">
-            {title}
-          </StyledText>
-        </Flex>
-        <Flex gridGap={SPACING.spacing4}>
-          {tagElement}
-          {closeButton != null ||
-            (onClose != null && (
-              <Btn
-                onClick={onClose}
-                css={closeIconStyles}
-                data-testid={`ModalHeader_icon_close${
-                  typeof title === 'string' ? `_${title}` : ''
-                }`}
-              >
-                <Icon
-                  name="close"
-                  width={SPACING.spacing24}
-                  height={SPACING.spacing24}
-                  color={color}
-                />
-              </Btn>
-            ))}
-        </Flex>
-      </StyledModalHeader>
-      <StyledDivider data-testid="divider" />
-    </>
-  )
-}
-
-const StyledModalHeader = styled(Flex)`
-  padding: ${SPACING.spacing16} ${SPACING.spacing24};
-  justify-content: ${JUSTIFY_SPACE_BETWEEN};
-  align-items: ${ALIGN_CENTER};
-  background-color: ${props => props.backgroundColor};
-`
-
-const StyledDivider = styled(Box)`
-  border-bottom: 1px solid ${COLORS.grey30};
-  margin: 0;
-  width: 100%;
-`
-
-const closeIconStyles = css`
-  display: ${DISPLAY_FLEX};
-  justify-content: ${JUSTIFY_CENTER};
-  align-items: ${ALIGN_CENTER};
-  border-radius: 0.875rem;
-  width: 1.625rem;
-  height: 1.625rem;
-  &:hover {
-    background-color: ${COLORS.grey30};
-  }
-
-  &:active {
-    background-color: ${COLORS.grey35};
-  }
-`

package/src/modals/ModalShell.tsx

@@ -1,158 +0,0 @@
-import styled from 'styled-components'
-
-import { BORDERS, COLORS } from '../helix-design-system'
-import { styleProps } from '../primitives'
-import {
-  ALIGN_CENTER,
-  ALIGN_END,
-  CURSOR_DEFAULT,
-  DISPLAY_FLEX,
-  JUSTIFY_CENTER,
-  JUSTIFY_END,
-  OVERFLOW_AUTO,
-  POSITION_ABSOLUTE,
-  POSITION_RELATIVE,
-  POSITION_STICKY,
-} from '../styles'
-import { RESPONSIVENESS, SPACING } from '../ui-style-constants'
-
-import type { MouseEvent, MouseEventHandler, ReactNode } from 'react'
-import type { StyleProps } from '../primitives'
-
-export type Position = 'center' | 'bottomRight'
-export interface ModalShellProps extends StyleProps {
-  /** Modal content */
-  children: ReactNode
-  /** Optional close on outside click **/
-  onOutsideClick?: MouseEventHandler
-  /** Optional sticky header */
-  header?: ReactNode
-  /** Optional sticky footer */
-  footer?: ReactNode
-  /** Optional full page takeover */
-  fullPage?: boolean
-  /** Optional zIndex for the overlay */
-  zIndexOverlay?: number
-  /** Optional position to make the modal appear at the center or bottom right */
-  position?: Position
-  /** Optional visible overlay */
-  showOverlay?: boolean
-  /** Optional remove padding */
-  noPadding?: boolean
-}
-
-/**
- * A ModalShell is a layout component for building more specific modals.
- *
- * It includes:
- * - An overlay
- * - A content area, with `overflow-y: auto` and customizable with style props
- * - An optional sticky header
- * - An optional sticky footer
- * - An optional onOutsideClick function
- */
-export function ModalShell(props: ModalShellProps): JSX.Element {
-  const {
-    onOutsideClick,
-    zIndex = 10,
-    header,
-    footer,
-    fullPage = false,
-    children,
-    zIndexOverlay = 1,
-    position = 'center',
-    showOverlay = true,
-    noPadding = false,
-    ...styleProps
-  } = props
-
-  return (
-    <Overlay
-      showOverlay={showOverlay}
-      zIndex={zIndexOverlay}
-      aria-label="BackgroundOverlay_ModalShell"
-      onClick={(e: MouseEvent) => {
-        e.stopPropagation()
-        if (onOutsideClick != null) onOutsideClick(e)
-      }}
-    >
-      <ContentArea zIndex={zIndex} position={position} noPadding={noPadding}>
-        <ModalArea
-          aria-label="ModalShell_ModalArea"
-          isFullPage={fullPage}
-          onClick={(e: MouseEvent) => {
-            e.stopPropagation()
-          }}
-          {...styleProps}
-        >
-          {header != null ? <Header>{header}</Header> : null}
-          {children}
-          {footer != null ? <Footer>{footer}</Footer> : null}
-        </ModalArea>
-      </ContentArea>
-    </Overlay>
-  )
-}
-const Overlay = styled.div<{ zIndex: string | number; showOverlay: boolean }>`
-  position: ${POSITION_ABSOLUTE};
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: ${({ zIndex }) => zIndex};
-  background-color: ${({ showOverlay }) =>
-    showOverlay
-      ? `${COLORS.black90}${COLORS.opacity40HexCode}`
-      : COLORS.transparent};
-  cursor: ${CURSOR_DEFAULT};
-`
-
-const ContentArea = styled.div<{
-  zIndex: string | number
-  position: Position
-  noPadding: boolean
-}>`
-  display: ${DISPLAY_FLEX};
-  position: ${POSITION_ABSOLUTE};
-  align-items: ${({ position }) =>
-    position === 'center' ? ALIGN_CENTER : ALIGN_END};
-  justify-content: ${({ position }) =>
-    position === 'center' ? JUSTIFY_CENTER : JUSTIFY_END};
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: ${({ zIndex }) => zIndex};
-  padding: ${({ noPadding }) => (noPadding ? 0 : SPACING.spacing16)};
-`
-
-const ModalArea = styled.div<
-  { isFullPage: boolean; backgroundColor?: string } & StyleProps
->`
-  position: ${POSITION_RELATIVE};
-  overflow-y: ${OVERFLOW_AUTO};
-  max-height: 100%;
-  width: 100%;
-  border-radius: ${BORDERS.borderRadius8};
-  box-shadow: ${BORDERS.smallDropShadow};
-  height: ${({ isFullPage }) => (isFullPage ? '100%' : 'auto')};
-  background-color: ${COLORS.white};
-
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    border-radius: ${BORDERS.borderRadius16};
-  }
-  ${styleProps};
-`
-
-const Footer = styled.div`
-  background-color: ${COLORS.white};
-  position: ${POSITION_STICKY};
-  bottom: 0;
-`
-const Header = styled.div`
-  background-color: ${COLORS.white};
-  position: ${POSITION_STICKY};
-  top: 0;
-`

package/src/modals/Overlay.tsx

@@ -1,39 +0,0 @@
-import { Flex, POSITION_FIXED } from '..'
-
-import type { ComponentProps, MouseEventHandler } from 'react'
-
-export interface OverlayProps extends ComponentProps<typeof Flex> {
-  /** optional onClick handler */
-  onClick?: MouseEventHandler
-  alertOverlay?: boolean | null
-  backgroundColor?: string
-}
-
-export function Overlay(props: OverlayProps): JSX.Element {
-  const {
-    alertOverlay,
-    backgroundColor = 'rgba(0, 0, 0, 0.9)',
-    onClick,
-    ...flexProps
-  } = props
-
-  const alertOverlayBackgroundColor = 'rgba(115, 115, 115, 0.9)'
-
-  return (
-    <Flex
-      position={POSITION_FIXED}
-      left="0"
-      right="0"
-      top="0"
-      bottom="0"
-      zIndex="1"
-      backgroundColor={
-        alertOverlay != null && alertOverlay
-          ? alertOverlayBackgroundColor
-          : backgroundColor
-      }
-      onClick={onClick}
-      {...flexProps}
-    />
-  )
-}

package/src/modals/SpinnerModal.tsx

@@ -1,35 +0,0 @@
-// titled modal page component
-import cx from 'classnames'
-
-import { Icon } from '../icons'
-import styles from './modals.module.css'
-import { Overlay } from './Overlay'
-
-export interface SpinnerModalProps {
-  /** Additional/Override style */
-  contentsClassName?: string
-  /** Optional message to display as italic text below spinner */
-  message?: string
-  /** lightens overlay (alert modal over existing modal) */
-  alertOverlay?: boolean
-}
-
-// TODO(ja, 8/2/24): this modal and SpinnerModalPage are only used in utils
-// that are no longer in use, investigate deleting them
-/**
- * @deprecated use Modal instead
- * Spinner Modal with no background and optional message
- */
-export function SpinnerModal(props: SpinnerModalProps): JSX.Element {
-  return (
-    <div className={styles.modal}>
-      <Overlay alertOverlay={props.alertOverlay} />
-      <div
-        className={cx(styles.spinner_modal_contents, props.contentsClassName)}
-      >
-        <Icon name="ot-spinner" className={styles.spinner_modal_icon} spin />
-        <p>{props.message}</p>
-      </div>
-    </div>
-  )
-}

package/src/modals/SpinnerModalPage.tsx

@@ -1,29 +0,0 @@
-// titled modal page component
-import { TitleBar } from '../structure'
-import styles from './modals.module.css'
-import { SpinnerModal } from './SpinnerModal'
-
-import type { ComponentProps } from 'react'
-import type { TitleBarProps } from '../structure'
-
-// TODO(mc, 2018-06-20): s/titleBar/titleBarProps
-export interface SpinnerModalPageProps
-  extends ComponentProps<typeof SpinnerModal> {
-  /** Props for title bar at top of modal page */
-  titleBar: TitleBarProps
-}
-
-/**
- * @deprecated use Modal instead
- * Spinner Modal variant with TitleBar
- */
-export function SpinnerModalPage(props: SpinnerModalPageProps): JSX.Element {
-  const { titleBar, ...spinnerModalProps } = props
-
-  return (
-    <div className={styles.modal}>
-      <TitleBar {...titleBar} className={styles.title_bar} />
-      <SpinnerModal {...spinnerModalProps} />
-    </div>
-  )
-}

package/src/modals/__tests__/Modal.test.tsx

@@ -1,68 +0,0 @@
-//
-import '@testing-library/jest-dom/vitest'
-
-import { screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it } from 'vitest'
-
-import { COLORS } from '../../helix-design-system'
-import { renderWithProviders } from '../../testing/utils'
-import { Modal } from '../Modal'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof Modal>) => {
-  return renderWithProviders(<Modal {...props} />)
-}
-
-describe('Modal', () => {
-  let props: ComponentProps<typeof Modal>
-
-  beforeEach(() => {
-    props = {
-      type: 'info',
-      title: 'mock info modal',
-      children: <div>mock modal content</div>,
-    }
-  })
-
-  it('should render modal without header icon when type is info', () => {
-    render(props)
-    expect(screen.queryByTestId('Modal_header_icon')).not.toBeInTheDocument()
-    screen.getByText('mock info modal')
-    expect(screen.getByTestId('Modal_header')).toHaveStyle(
-      `background-color: ${COLORS.white}`
-    )
-  })
-
-  it('should render modal with orange header icon when type is warning', () => {
-    props.type = 'warning'
-    render(props)
-    const headerIcon = screen.getByTestId('Modal_header_icon')
-    expect(headerIcon).toBeInTheDocument()
-    expect(headerIcon).toHaveStyle(`color: ${COLORS.yellow50}`)
-    expect(screen.getByTestId('Modal_header')).toHaveStyle(
-      `background-color: ${COLORS.white}`
-    )
-  })
-
-  it('should render modal with red header icon when type is error', () => {
-    props.type = 'error'
-    render(props)
-    const headerIcon = screen.getByTestId('Modal_header_icon')
-    expect(headerIcon).toBeInTheDocument()
-    expect(headerIcon).toHaveStyle(`color: ${COLORS.red50}`)
-    expect(screen.getByTestId('Modal_header')).toHaveStyle(
-      `background-color: ${COLORS.white}`
-    )
-  })
-
-  it('should supply a default margin to account for the sidebar, aligning the modal in the center of the app', () => {
-    render(props)
-    expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle(
-      'width: 31.25rem'
-    )
-    expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle(
-      'margin-left: 5.656rem'
-    )
-  })
-})

package/src/modals/__tests__/ModalHeader.test.tsx

@@ -1,71 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react'
-
-import '@testing-library/jest-dom/vitest'
-
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { COLORS } from '../../helix-design-system'
-import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
-import { renderWithProviders } from '../../testing/utils'
-import { ModalHeader } from '../ModalHeader'
-
-import type { ComponentProps } from 'react'
-
-const mockClose = vi.fn()
-
-const render = (props: ComponentProps<typeof ModalHeader>) => {
-  return renderWithProviders(<ModalHeader {...props} />)
-}
-
-describe('ModalHeader', () => {
-  let props: ComponentProps<typeof ModalHeader>
-
-  beforeEach(() => {
-    props = {
-      onClose: mockClose,
-      title: 'mock modal header title',
-      backgroundColor: COLORS.white,
-      color: COLORS.black90,
-    }
-  })
-
-  it('should render text and close icon', () => {
-    render(props)
-    const title = screen.getByText('mock modal header title')
-    expect(title).toHaveStyle(`color: ${COLORS.black90}`)
-    screen.getByTestId('ModalHeader_icon_close_mock modal header title')
-  })
-
-  it('should render text, icon, and close icon', () => {
-    props.icon = {
-      name: 'ot-alert',
-      color: COLORS.black90,
-      size: '1.25rem',
-    }
-    render(props)
-    expect(screen.getByTestId('Modal_header_icon')).toHaveStyle(
-      `color: ${COLORS.black90}`
-    )
-    expect(screen.getByTestId('Modal_header_icon')).toHaveStyle(
-      `width: 1.25rem`
-    )
-    expect(screen.getByTestId('Modal_header_icon')).toHaveStyle(
-      `height: 1.25rem`
-    )
-  })
-
-  it('should call a mock function when clicking close icon', () => {
-    render(props)
-    const closeIcon = screen.getByTestId(
-      'ModalHeader_icon_close_mock modal header title'
-    )
-    expect(closeIcon).toHaveStyle('width: 1.625rem')
-    expect(closeIcon).toHaveStyle('height: 1.625rem')
-    expect(closeIcon).toHaveStyle('display: flex')
-    expect(closeIcon).toHaveStyle(`justify-content: ${JUSTIFY_CENTER}`)
-    expect(closeIcon).toHaveStyle(`align-items: ${ALIGN_CENTER}`)
-    expect(closeIcon).toHaveStyle('border-radius: 0.875rem')
-    fireEvent.click(closeIcon)
-    expect(mockClose).toHaveBeenCalled()
-  })
-})