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

package/src/modals/ModalShell.tsx

@@ -0,0 +1,157 @@
+import styled from 'styled-components'
+import {
+  ALIGN_CENTER,
+  ALIGN_END,
+  CURSOR_DEFAULT,
+  DISPLAY_FLEX,
+  JUSTIFY_CENTER,
+  JUSTIFY_END,
+  OVERFLOW_AUTO,
+  POSITION_ABSOLUTE,
+  POSITION_RELATIVE,
+  POSITION_STICKY,
+} from '../styles'
+import { BORDERS, COLORS } from '../helix-design-system'
+import { RESPONSIVENESS, SPACING } from '../ui-style-constants'
+import { styleProps } from '../primitives'
+
+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

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

@@ -0,0 +1,35 @@
+// titled modal page component
+import cx from 'classnames'
+import { Overlay } from './Overlay'
+import { Icon } from '../icons'
+
+import styles from './modals.module.css'
+
+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

@@ -0,0 +1,29 @@
+// titled modal page component
+import { TitleBar } from '../structure'
+import { SpinnerModal } from './SpinnerModal'
+import styles from './modals.module.css'
+
+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

@@ -0,0 +1,66 @@
+//
+import '@testing-library/jest-dom/vitest'
+import { screen } from '@testing-library/react'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { renderWithProviders } from '../../testing/utils'
+import { COLORS } from '../../helix-design-system'
+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

@@ -0,0 +1,69 @@
+import { screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+import { renderWithProviders } from '../../testing/utils'
+import { COLORS } from '../../helix-design-system'
+import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
+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()
+  })
+})

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

@@ -0,0 +1,46 @@
+import '@testing-library/jest-dom/vitest'
+import { screen } from '@testing-library/react'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { renderWithProviders } from '../../testing/utils'
+import { ModalShell } from '../ModalShell'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ModalShell>) => {
+  return renderWithProviders(<ModalShell {...props} />)
+}
+
+describe('ModalShell', () => {
+  let props: ComponentProps<typeof ModalShell>
+
+  beforeEach(() => {
+    props = {
+      children: <div>mock modal shell</div>,
+      fullPage: false,
+    }
+  })
+
+  it('should render content', () => {
+    render(props)
+    screen.getByText('mock modal shell')
+    expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle(
+      'height: auto'
+    )
+  })
+
+  it('should render full size modal when fullSize is true', () => {
+    props.fullPage = true
+    render(props)
+    expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle(
+      'height: 100%'
+    )
+  })
+
+  it('should render header and footer', () => {
+    props.header = <div>mock header</div>
+    props.footer = <div>mock footer</div>
+    render(props)
+    screen.getByText('mock header')
+    screen.getByText('mock footer')
+  })
+})

package/src/modals/index.ts

@@ -0,0 +1,10 @@
+// modal components
+export * from './AlertModal'
+export * from './ContinueModal'
+export * from './LegacyModal'
+export * from './Modal'
+export * from './ModalHeader'
+export * from './ModalShell'
+export * from './Overlay'
+export * from './SpinnerModal'
+export * from './SpinnerModalPage'