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

package/src/lists/SidePanelGroup.tsx

@@ -0,0 +1,48 @@
+// SidePanelGroup component
+import type * as React from 'react'
+import cx from 'classnames'
+
+import styles from './lists.module.css'
+import { Icon } from '../icons'
+
+import type { IconName } from '../icons'
+
+// TODO(bc, 2021-03-31): this component is only used in one place
+// reconsider whether it belongs in components library
+export interface SidePanelGroupProps {
+  /** text of title */
+  title?: string
+  /** optional icon left of the title */
+  iconName?: IconName
+  /** children, most likely one or more TitledList */
+  children?: React.ReactNode
+  /** additional classnames */
+  className?: string
+  /** disables the whole SidePanelGroup if true */
+  disabled?: boolean
+}
+
+/**
+ * A component for grouping and titling multiple lists
+ */
+export function SidePanelGroup(props: SidePanelGroupProps): JSX.Element {
+  const { iconName, disabled } = props
+
+  const className = cx(styles.panel_group, props.className, {
+    [styles.disabled]: disabled,
+  })
+
+  return (
+    <div className={className}>
+      {props.title && (
+        <div className={styles.title_bar}>
+          {iconName && (
+            <Icon className={styles.title_bar_icon} name={iconName} />
+          )}
+          <h2 className={styles.title}>{props.title}</h2>
+        </div>
+      )}
+      {props.children}
+    </div>
+  )
+}

package/src/lists/TitledList.tsx

@@ -0,0 +1,155 @@
+// TitledList component
+import * as React from 'react'
+import cx from 'classnames'
+
+import { Icon } from '../icons'
+import { LegacyStyledText } from '../atoms'
+import { COLORS } from '../helix-design-system'
+import type { IconName, IconProps } from '../icons'
+
+import styles from './lists.module.css'
+
+// TODO(bc, 2021-03-31): reconsider whether this belongs in components library
+// it is bloated with application specific functionality
+
+export interface TitledListProps {
+  /** id attribute */
+  id?: string
+  /** text of title */
+  title: string
+  /** optional icon left of the title */
+  iconName?: IconName | null | undefined
+  /** props passed down to icon (`className` and `name` are ignored) */
+  iconProps?: Omit<IconProps, 'name'>
+  /** optional data test id for the container */
+  'data-test'?: string
+  // TODO(mc, 2018-01-25): enforce <li> children requirement with flow
+  /** children must all be `<li>` */
+  children?: React.ReactNode
+  /** additional classnames */
+  className?: string
+  /** component with descriptive text about the list */
+  description?: React.ReactNode
+  /** optional click action (on title div, not children) */
+  onClick?: (event: React.MouseEvent) => unknown
+  /** optional right click action (on wrapping div) */
+  onContextMenu?: (event: React.MouseEvent) => unknown
+  /** optional mouseEnter action */
+  onMouseEnter?: (event: React.MouseEvent) => unknown
+  /** optional mouseLeave action */
+  onMouseLeave?: (event: React.MouseEvent) => unknown
+  /** caret click action; if defined, list is expandable and carat is visible */
+  onCollapseToggle?: (event: React.MouseEvent) => unknown
+  /** collapse the list if true (false by default) */
+  collapsed?: boolean
+  /** set to true when TitledList is selected (eg, user clicked it) */
+  selected?: boolean
+  /** set to true when TitledList is hovered (but not when its contents are hovered) */
+  hovered?: boolean
+  /** disables the whole TitledList if true */
+  disabled?: boolean
+  /** appear disabled, but preserve collapsibility */
+  inert?: boolean
+}
+
+/**
+ * An ordered list with optional title, icon, and description.
+ */
+export function TitledList(props: TitledListProps): JSX.Element {
+  const {
+    id,
+    iconName,
+    disabled,
+    inert,
+    'data-test': dataTest,
+    onCollapseToggle,
+    iconProps,
+    onMouseEnter,
+    onMouseLeave,
+    onContextMenu,
+  } = props
+  const collapsible = onCollapseToggle != null
+
+  const onClick = !disabled ? props.onClick : undefined
+
+  // clicking on the carat will not call props.onClick,
+  // so prevent bubbling up if there is an onCollapseToggle fn
+  const handleCollapseToggle = (e: React.MouseEvent): void => {
+    if (onCollapseToggle && !disabled) {
+      e.stopPropagation()
+      onCollapseToggle(e)
+    }
+  }
+
+  const hasValidChildren = React.Children.toArray(props.children).some(
+    child => child
+  )
+
+  const className = cx(styles.titled_list, props.className, {
+    [styles.disabled]: disabled || inert,
+    [styles.titled_list_selected]: !disabled && props.selected,
+    [styles.hover_border]: !disabled && props.hovered,
+  })
+  // @ts-expect-error(sa, 2021-6-23): cast value to boolean
+  const titleBarClass = cx(styles.titled_list_title_bar, {
+    [styles.clickable]: props.onClick,
+  })
+
+  const iconClass = cx(
+    styles.title_bar_icon,
+    styles.icon_left_of_title,
+    iconProps && iconProps.className
+  )
+
+  let textColor = ''
+  if (disabled) {
+    //  the below hex code is for our legacy --c-font-disabled to match other text colors
+    textColor = '#9c9c9c'
+  } else if (props.selected && !disabled) {
+    //  the below hex code is for our legacy --c-highlight to match other text colors
+    textColor = '#5fd8ee'
+  }
+
+  return (
+    <div
+      id={id}
+      className={className}
+      data-test={dataTest}
+      {...{ onMouseEnter, onMouseLeave, onContextMenu }}
+    >
+      <div onClick={onClick} className={titleBarClass}>
+        {iconName && (
+          <Icon {...iconProps} className={iconClass} name={iconName} />
+        )}
+        <LegacyStyledText
+          as="h3"
+          backgroundColor={COLORS.white}
+          color={textColor}
+        >
+          {props.title}
+        </LegacyStyledText>
+        {collapsible && (
+          <div
+            onClick={handleCollapseToggle}
+            className={styles.title_bar_carat}
+          >
+            <Icon
+              className={styles.title_bar_icon}
+              name={
+                props.selected
+                  ? 'chevron-right'
+                  : props.collapsed
+                  ? 'chevron-down'
+                  : 'chevron-up'
+              }
+            />
+          </div>
+        )}
+      </div>
+      {!props.collapsed && props.description}
+      {!props.collapsed && hasValidChildren && (
+        <ol className={styles.list}>{props.children}</ol>
+      )}
+    </div>
+  )
+}

package/src/lists/index.ts

@@ -0,0 +1,3 @@
+// list and list item components
+export * from './SidePanelGroup'
+export * from './TitledList'

package/src/modals/AlertModal.tsx

@@ -0,0 +1,89 @@
+import type * as React from 'react'
+import cx from 'classnames'
+
+import { OutlineButton } from '../buttons'
+import { Icon } from '../icons'
+import { LegacyModal } from './LegacyModal'
+import styles from './modals.module.css'
+
+import type { ButtonProps } from '../buttons'
+import type { IconName } from '../icons'
+
+export interface AlertModalProps {
+  /** optional handler for overlay click */
+  onCloseClick?: () => unknown
+  /** optional modal heading */
+  heading?: React.ReactNode
+  /** optional array of `ButtonProps` for `OutlineButton`s at bottom of modal */
+  buttons?: Array<ButtonProps | null | undefined>
+  /** modal contents */
+  children: React.ReactNode
+  /** optional classes to apply */
+  className?: string
+  /** optional classes to apply */
+  contentsClassName?: string
+  /** lightens overlay (alert modal over existing modal) */
+  alertOverlay?: boolean
+  /** override default alert icon */
+  iconName?: IconName | null | undefined
+  /** restricts scroll outside of Modal when open, true by default */
+  restrictOuterScroll?: boolean
+}
+
+/**
+ * @deprecated use Modal instead
+ * Generic alert modal with a heading and a set of buttons at the bottom
+ */
+export function AlertModal(props: AlertModalProps): JSX.Element {
+  const {
+    heading,
+    buttons,
+    className,
+    onCloseClick,
+    alertOverlay,
+    restrictOuterScroll,
+  } = props
+  const iconName = props.iconName || 'alert'
+  const wrapperStyle = cx(
+    styles.alert_modal_wrapper,
+    {
+      [styles.no_alert_header]: !heading,
+    },
+    props.contentsClassName
+  )
+
+  return (
+    <LegacyModal
+      className={className}
+      contentsClassName={wrapperStyle}
+      onCloseClick={onCloseClick}
+      alertOverlay={alertOverlay}
+      restrictOuterScroll={restrictOuterScroll}
+    >
+      {heading && (
+        <div
+          className={cx(styles.alert_modal_heading, {
+            [styles.no_icon_heading]: props.iconName === null,
+          })}
+        >
+          {props.iconName !== null && (
+            <Icon name={iconName} className={styles.alert_modal_icon} />
+          )}
+          {heading}
+        </div>
+      )}
+      <div className={styles.alert_modal_contents}>{props.children}</div>
+      {buttons && (
+        <div className={styles.alert_modal_buttons}>
+          {(buttons.filter(Boolean) as ButtonProps[]).map((button, index) => (
+            <OutlineButton
+              {...button}
+              className={cx(styles.alert_button, button.className)}
+              key={index}
+            />
+          ))}
+        </div>
+      )}
+    </LegacyModal>
+  )
+}

package/src/modals/ContinueModal.tsx

@@ -0,0 +1,32 @@
+import { AlertModal } from './AlertModal'
+
+import type { AlertModalProps } from './AlertModal'
+
+export interface ContinueModalProps extends Omit<AlertModalProps, 'buttons'> {
+  onCancelClick: () => unknown
+  onContinueClick: () => unknown
+}
+
+const CANCEL = 'Cancel'
+const CONTINUE = 'Continue'
+
+/**
+ * * @deprecated use Modal instead
+ * AlertModal variant to prompt user to "Cancel" or "Continue" a given action
+ */
+export function ContinueModal(props: ContinueModalProps): JSX.Element {
+  const { onCancelClick, onContinueClick, ...passThruProps } = props
+  const buttons = [
+    { title: CANCEL, children: CANCEL, onClick: onCancelClick },
+    { title: CONTINUE, children: CONTINUE, onClick: onContinueClick },
+  ]
+
+  return (
+    <AlertModal
+      restrictOuterScroll={false}
+      onCloseClick={onCancelClick}
+      {...passThruProps}
+      buttons={buttons}
+    />
+  )
+}

package/src/modals/LegacyModal.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react'
+import cx from 'classnames'
+import { RemoveScroll } from 'react-remove-scroll'
+
+import { Overlay } from './Overlay'
+import styles from './modals.module.css'
+
+export interface LegacyModalProps {
+  /** handler to close the modal (attached to `Overlay` onClick) */
+  onCloseClick?: React.MouseEventHandler
+  /** Optional styled heading **/
+  heading?: string
+  /** modal contents */
+  children: React.ReactNode
+  /** classes to apply */
+  className?: string
+  /** classes to apply to the contents box */
+  contentsClassName?: string
+  /** lightens overlay (alert modal over existing modal) */
+  alertOverlay?: boolean
+  /** restricts scroll outside of Modal when open, true by default */
+  restrictOuterScroll?: boolean
+  innerRef?: React.Ref<HTMLDivElement>
+}
+
+/**
+ * @deprecated use Modal instead
+ * Base modal component that fills its nearest `display:relative` ancestor
+ * with a dark overlay and displays `children` as its contents in a white box
+ */
+export function LegacyModal(props: LegacyModalProps): JSX.Element {
+  const {
+    contentsClassName,
+    alertOverlay,
+    onCloseClick,
+    heading,
+    innerRef,
+    restrictOuterScroll = true,
+  } = props
+  const Wrapper = restrictOuterScroll ? RemoveScroll : React.Fragment
+  return (
+    <Wrapper>
+      <div
+        className={cx(styles.modal, props.className, {
+          [styles.alert_modal]: alertOverlay,
+        })}
+      >
+        <Overlay onClick={onCloseClick} alertOverlay={alertOverlay} />
+        <div
+          ref={innerRef}
+          className={cx(styles.modal_contents, contentsClassName)}
+        >
+          {heading && <h3 className={styles.modal_heading}>{heading}</h3>}
+          {props.children}
+        </div>
+      </div>
+    </Wrapper>
+  )
+}

package/src/modals/Modal.stories.tsx

@@ -0,0 +1,52 @@
+import type * as React from 'react'
+
+import { LegacyStyledText } from '../atoms'
+import { SPACING, TYPOGRAPHY } from '../ui-style-constants'
+import { PrimaryBtn } from '../primitives'
+import { COLORS } from '../helix-design-system'
+import { Modal } from './Modal'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Molecules/modals/Modal',
+  component: Modal,
+} as Meta
+
+const Template: Story<React.ComponentProps<typeof Modal>> = args => (
+  <Modal {...args} />
+)
+
+const Children = (
+  <>
+    <LegacyStyledText
+      fontWeight={TYPOGRAPHY.fontWeightSemiBold}
+      fontSize={TYPOGRAPHY.fontSizeP}
+      paddingTop={SPACING.spacing4}
+    >
+      {'Modal body goes here'}
+    </LegacyStyledText>
+
+    <PrimaryBtn
+      backgroundColor={COLORS.blue50}
+      marginTop="28rem"
+      textTransform={TYPOGRAPHY.textTransformNone}
+    >
+      <LegacyStyledText
+        fontWeight={TYPOGRAPHY.fontWeightRegular}
+        fontSize={TYPOGRAPHY.fontSizeP}
+      >
+        {'btn text'}
+      </LegacyStyledText>
+    </PrimaryBtn>
+  </>
+)
+
+export const Primary = Template.bind({})
+Primary.args = {
+  type: 'info',
+  onClose: () => {},
+  closeOnOutsideClick: false,
+  title: 'Modal Title',
+  children: Children,
+}

package/src/modals/Modal.tsx

@@ -0,0 +1,96 @@
+import type * as React from 'react'
+import { Box } from '../primitives'
+import { SPACING } from '../ui-style-constants'
+import { COLORS } from '../helix-design-system'
+import { ModalHeader } from './ModalHeader'
+import { ModalShell } from './ModalShell'
+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?: React.MouseEventHandler
+  closeOnOutsideClick?: boolean
+  title?: React.ReactNode
+  titleElement1?: JSX.Element
+  titleElement2?: JSX.Element
+  fullPage?: boolean
+  childrenPadding?: string | number
+  children?: React.ReactNode
+  footer?: React.ReactNode
+  zIndexOverlay?: number
+  showOverlay?: boolean
+  position?: Position
+}
+
+/**
+ * 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,
+    zIndexOverlay,
+    position,
+    showOverlay,
+    ...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',
+    marginRight: SPACING.spacing8,
+  }
+
+  const modalHeader = (
+    <ModalHeader
+      onClose={onClose}
+      title={title}
+      titleElement1={titleElement1}
+      titleElement2={titleElement2}
+      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={modalHeader}
+      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,100 @@
+import type * as React from 'react'
+import { css } from 'styled-components'
+
+import { Icon } from '../icons'
+import { Box, Btn, Flex } from '../primitives'
+import { LegacyStyledText } from '../atoms'
+import { ALIGN_CENTER, JUSTIFY_CENTER, JUSTIFY_SPACE_BETWEEN } from '../styles'
+import { SPACING, TYPOGRAPHY } from '../ui-style-constants'
+import { COLORS } from '../helix-design-system'
+import type { IconProps } from '../icons'
+
+export interface ModalHeaderProps {
+  title: React.ReactNode
+  onClose?: React.MouseEventHandler
+  titleElement1?: JSX.Element
+  titleElement2?: JSX.Element
+  backgroundColor?: string
+  color?: string
+  icon?: IconProps
+  closeButton?: React.ReactNode
+}
+
+const closeIconStyles = css`
+  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};
+  }
+`
+
+export const ModalHeader = (props: ModalHeaderProps): JSX.Element => {
+  const {
+    icon,
+    onClose,
+    title,
+    titleElement1,
+    titleElement2,
+    backgroundColor,
+    color,
+    closeButton,
+  } = props
+  return (
+    <>
+      <Flex
+        alignItems={ALIGN_CENTER}
+        justifyContent={JUSTIFY_SPACE_BETWEEN}
+        paddingX={SPACING.spacing24}
+        paddingY={SPACING.spacing16}
+        backgroundColor={backgroundColor}
+        data-testid="Modal_header"
+      >
+        <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing8}>
+          {icon != null && <Icon {...icon} data-testid="Modal_header_icon" />}
+          {titleElement1}
+          {titleElement2}
+          {/* TODO (nd: 08/07/2024) Convert to StyledText once designs are resolved */}
+          <LegacyStyledText
+            as="h3"
+            fontWeight={TYPOGRAPHY.fontWeightSemiBold}
+            color={color}
+          >
+            {title}
+          </LegacyStyledText>
+        </Flex>
+        {closeButton != null
+          ? closeButton
+          : 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>
+      <Box
+        borderBottom={`1px solid ${COLORS.grey30}`}
+        marginY="0"
+        width="100%"
+        data-testid="divider"
+      />
+    </>
+  )
+}