@opentrons/components 0.1.6-alpha.2 → 0.1.6-alpha.20

package/src/modals/ModalShell.tsx

@@ -0,0 +1,155 @@
+import type * as React from 'react'
+import styled from 'styled-components'
+import {
+  ALIGN_CENTER,
+  ALIGN_END,
+  CURSOR_DEFAULT,
+  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 { StyleProps } from '../primitives'
+
+export type Position = 'center' | 'bottomRight'
+export interface ModalShellProps extends StyleProps {
+  /** Modal content */
+  children: React.ReactNode
+  /** Optional close on outside click **/
+  onOutsideClick?: React.MouseEventHandler
+  /** Optional sticky header */
+  header?: React.ReactNode
+  /** Optional sticky footer */
+  footer?: React.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: React.MouseEvent) => {
+        e.stopPropagation()
+        if (onOutsideClick != null) onOutsideClick(e)
+      }}
+    >
+      <ContentArea zIndex={zIndex} position={position} noPadding={noPadding}>
+        <ModalArea
+          aria-label="ModalShell_ModalArea"
+          isFullPage={fullPage}
+          onClick={(e: React.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: 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,38 @@
+import type * as React from 'react'
+import { Flex, POSITION_FIXED } from '..'
+
+export interface OverlayProps extends React.ComponentProps<typeof Flex> {
+  /** optional onClick handler */
+  onClick?: React.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,30 @@
+// titled modal page component
+import type * as React from 'react'
+
+import { TitleBar } from '../structure'
+import { SpinnerModal } from './SpinnerModal'
+import styles from './modals.module.css'
+
+import type { TitleBarProps } from '../structure'
+
+// TODO(mc, 2018-06-20): s/titleBar/titleBarProps
+export interface SpinnerModalPageProps
+  extends React.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/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'

package/src/molecules/Banner/Banner.stories.tsx

@@ -0,0 +1,41 @@
+import { StyledText } from '../../atoms/StyledText'
+import { Banner } from './index'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof Banner> = {
+  title: 'Library/Molecules/Banner',
+  component: Banner,
+}
+
+export default meta
+
+type Story = StoryObj<typeof Banner>
+
+export const Primary: Story = {
+  args: {
+    children: 'Banner component',
+    type: 'success',
+  },
+}
+
+export const OverriddenIcon: Story = {
+  args: {
+    type: 'warning',
+    children: 'Banner component',
+    icon: { name: 'ot-hot-to-touch' },
+  },
+}
+
+export const OverriddenExitIcon: Story = {
+  args: {
+    type: 'informing',
+    children: 'Banner component',
+    onCloseClick: () => {
+      console.log('close')
+    },
+    closeButton: (
+      <StyledText desktopStyle="bodyDefaultRegular">{'Exit'}</StyledText>
+    ),
+  },
+}

package/src/molecules/Banner/index.tsx

@@ -0,0 +1,147 @@
+import type * as React from 'react'
+import { css } from 'styled-components'
+import { Btn, Flex } from '../../primitives'
+import { Icon } from '../../icons'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import {
+  ALIGN_CENTER,
+  DIRECTION_ROW,
+  JUSTIFY_SPACE_BETWEEN,
+} from '../../styles'
+import type { StyleProps } from '../../primitives'
+import type { IconProps } from '../../icons'
+
+export type BannerType =
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'updating'
+  | 'informing'
+
+export interface BannerProps extends StyleProps {
+  /** name constant of the icon to display */
+  type: BannerType
+  /** Banner contents */
+  children?: React.ReactNode
+  /** optional handler to show close button/clear alert  */
+  onCloseClick?: (() => void) | React.MouseEventHandler<HTMLButtonElement>
+  /** Override the default Alert Icon */
+  icon?: IconProps
+  /** some banner onCloseClicks fire events, this allows a spinner after click but before event finishes */
+  isCloseActionLoading?: boolean
+  /** Override the Exit icon */
+  closeButton?: React.ReactNode
+  /** Icon margin right for large banners */
+  iconMarginRight?: string
+  /** Icon margin left for large banners */
+  iconMarginLeft?: string
+}
+
+const BANNER_PROPS_BY_TYPE: Record<
+  BannerType,
+  { icon: IconProps; backgroundColor: string; color: string }
+> = {
+  success: {
+    icon: { name: 'check-circle' },
+    backgroundColor: COLORS.green30,
+    color: COLORS.green60,
+  },
+  error: {
+    icon: { name: 'alert-circle' },
+    backgroundColor: COLORS.red30,
+    color: COLORS.red60,
+  },
+  warning: {
+    icon: { name: 'alert-circle' },
+    backgroundColor: COLORS.yellow30,
+    color: COLORS.yellow60,
+  },
+  updating: {
+    icon: { name: 'ot-spinner' },
+    backgroundColor: COLORS.grey30,
+    color: COLORS.grey60,
+  },
+  informing: {
+    icon: { name: 'information' },
+    backgroundColor: COLORS.blue30,
+    color: COLORS.blue60,
+  },
+}
+
+export function Banner(props: BannerProps): JSX.Element {
+  const {
+    type,
+    onCloseClick,
+    icon,
+    children,
+    isCloseActionLoading = false,
+    padding,
+    closeButton,
+    iconMarginLeft,
+    iconMarginRight,
+    size,
+    ...styleProps
+  } = props
+  const bannerProps = BANNER_PROPS_BY_TYPE[type]
+  const iconProps = {
+    ...(icon ?? bannerProps.icon),
+    size: size ?? '1rem',
+    marginRight: iconMarginRight ?? SPACING.spacing8,
+    marginLeft: iconMarginLeft ?? '0rem',
+    color: BANNER_PROPS_BY_TYPE[type].color,
+  }
+  const BANNER_STYLE = css`
+    font-size: ${TYPOGRAPHY.fontSizeP};
+    font-weight: ${TYPOGRAPHY.fontWeightRegular};
+    border-radius: ${SPACING.spacing4};
+
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      font-size: 1.25rem;
+      font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+      background-color: ${COLORS.yellow35};
+      border-radius: ${BORDERS.borderRadius12};
+      line-height: 1.5rem;
+    }
+  `
+  return (
+    <Flex
+      backgroundColor={BANNER_PROPS_BY_TYPE[type].backgroundColor}
+      css={BANNER_STYLE}
+      flexDirection={DIRECTION_ROW}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      alignItems={ALIGN_CENTER}
+      padding={padding ?? SPACING.spacing8}
+      onClick={(e: React.MouseEvent) => {
+        e.stopPropagation()
+      }}
+      data-testid={`Banner_${type}`}
+      {...styleProps}
+    >
+      <Icon
+        {...iconProps}
+        aria-label={`icon_${type}`}
+        spin={BANNER_PROPS_BY_TYPE[type].icon.name === 'ot-spinner'}
+      />
+      <Flex flex="1" alignItems={ALIGN_CENTER}>
+        {props.children}
+      </Flex>
+      {onCloseClick != null && !(isCloseActionLoading ?? false) ? (
+        <Btn data-testid="Banner_close-button" onClick={props.onCloseClick}>
+          {closeButton ?? (
+            <Icon
+              width={SPACING.spacing24}
+              height={SPACING.spacing24}
+              marginTop={SPACING.spacing6}
+              name="close"
+              aria-label="close_icon"
+            />
+          )}
+        </Btn>
+      ) : null}
+      {(isCloseActionLoading ?? false) && (
+        <Icon name="ot-spinner" size="1rem" aria-label="ot-spinner" spin />
+      )}
+    </Flex>
+  )
+}

package/src/molecules/DeckInfoLabel/DeckInfoLabel.stories.tsx

@@ -0,0 +1,65 @@
+import { customViewports } from '../../../../.storybook/preview'
+import { Flex } from '../../primitives'
+import { SPACING } from '../../ui-style-constants'
+import { DeckInfoLabel } from '.'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof DeckInfoLabel> = {
+  title: 'Library/Molecules/DeckInfoLabel',
+  argTypes: {
+    iconName: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'ot-magnet-v2',
+        'ot-heater-shaker',
+        'ot-temperature-v2',
+        'ot-magnet-v2',
+        'ot-thermocycler',
+        'ot-absorbance',
+        'stacked',
+      ],
+    },
+    deckLabel: {
+      control: {
+        type: 'text',
+      },
+      defaultValue: 'A1',
+    },
+  },
+  component: DeckInfoLabel,
+  parameters: {
+    controls: { include: ['highlight', 'iconName', 'deckLabel'] },
+    viewport: {
+      viewports: customViewports,
+      defaultViewport: 'onDeviceDisplay',
+    },
+  },
+  decorators: [
+    Story => (
+      <Flex padding={SPACING.spacing16} width="15rem" height="5rem">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+export default meta
+type Story = StoryObj<typeof DeckInfoLabel>
+
+export const DisplaySlot: Story = {
+  args: {
+    deckLabel: 'A1',
+    iconName: undefined,
+    highlight: false,
+  },
+}
+
+export const DisplayIcon: Story = {
+  args: {
+    deckLabel: undefined,
+    iconName: 'ot-temperature-v2',
+    highlight: false,
+  },
+}

package/src/molecules/DeckInfoLabel/index.tsx

@@ -0,0 +1,95 @@
+import styled from 'styled-components'
+
+import { StyledText } from '../../atoms/StyledText'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
+import { Flex } from '../../primitives'
+import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+
+import type { ModuleIconName } from '../../icons'
+import type { StyleProps } from '../../primitives'
+
+interface DeckLabelProps extends StyleProps {
+  /** deck label to display */
+  deckLabel: string
+  iconName?: undefined
+}
+
+interface HardwareIconProps extends StyleProps {
+  /** hardware icon name */
+  iconName: ModuleIconName | 'stacked'
+  deckLabel?: undefined
+}
+
+// type union requires one of deckLabel or iconName, but not both
+export type DeckInfoLabelProps = (DeckLabelProps | HardwareIconProps) & {
+  highlight?: boolean
+  svgSize?: string | number
+}
+
+export const DeckInfoLabel = styled(DeckInfoLabelComponent)`
+  align-items: ${ALIGN_CENTER};
+  background-color: ${props =>
+    props.highlight ?? false ? COLORS.blue50 : 'inherit'};
+  border: 1px solid
+    ${props => (props.highlight ?? false ? 'transparent' : COLORS.black90)};
+  width: ${props => props.width ?? 'max-content'};
+  padding: ${SPACING.spacing2} ${SPACING.spacing4};
+  border-radius: ${BORDERS.borderRadius8};
+  justify-content: ${JUSTIFY_CENTER};
+  height: ${props =>
+    props.height ?? SPACING.spacing20}; // prevents the icon from being squished
+
+  > svg {
+    height: ${props => props.svgSize ?? '0.875rem'};
+    width: ${props => props.svgSize ?? '0.875rem'};
+  }
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    border-width: 2px;
+    border-radius: ${BORDERS.borderRadius12};
+    height: ${props => props.height ?? SPACING.spacing32};
+    padding: ${SPACING.spacing4}
+      ${props =>
+        props.deckLabel != null ? SPACING.spacing8 : SPACING.spacing6};
+    > svg {
+      height: ${props => props.svgSize ?? '1.25rem'};
+      width: ${props => props.svgSize ?? '1.25rem'};
+    }
+  }
+`
+
+function DeckInfoLabelComponent({
+  deckLabel,
+  iconName,
+  highlight = false,
+  ...styleProps
+}: DeckInfoLabelProps): JSX.Element {
+  return (
+    <Flex
+      data-testid={
+        deckLabel != null
+          ? `DeckInfoLabel_${deckLabel}`
+          : `DeckInfoLabel_${iconName}`
+      }
+      {...styleProps}
+    >
+      {iconName != null ? (
+        <Icon
+          name={iconName}
+          color={highlight ? COLORS.white : COLORS.black90}
+          aria-label={iconName}
+        />
+      ) : (
+        <StyledText
+          desktopStyle="captionBold"
+          oddStyle="smallBodyTextBold"
+          color={highlight ? COLORS.white : COLORS.black90}
+        >
+          {deckLabel}
+        </StyledText>
+      )}
+    </Flex>
+  )
+}

package/src/molecules/DeckLabel/DeckLabel.stories.tsx

@@ -0,0 +1,31 @@
+import { DeckLabel as DeckLabelComponent } from '.'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof DeckLabelComponent> = {
+  title: 'Library/Molecules/DeckLabel',
+  component: DeckLabelComponent,
+  argTypes: {
+    isSelected: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    isLast: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof DeckLabelComponent>
+
+export const DeckLabel: Story = {
+  args: {
+    text: 'Label',
+    isSelected: false,
+    isLast: true,
+  },
+}