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

package/src/modals/Modal.stories.tsx

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

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

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

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

@@ -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 { 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

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

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

@@ -0,0 +1,71 @@
+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()
+  })
+})