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

package/src/lists/lists.module.css

@@ -0,0 +1,171 @@
+@import '../index.module.css';
+
+:root {
+  --list-padding-large: 1rem;
+  --list-padding-small: 0.75rem;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.disabled {
+  background-color: transparent;
+
+  & * {
+    color: var(--c-font-disabled);
+    outline-color: #eee;
+    fill: var(--c-font-disabled);
+    background-color: transparent;
+  }
+}
+
+.panel_group,
+.titled_list,
+.list_item {
+  background-color: white;
+}
+
+.panel_group {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.33);
+}
+
+.hover_border {
+  outline: var(--bd-width-default) solid var(--c-highlight);
+}
+
+.header_text {
+  text-transform: uppercase;
+  font-size: var(--fs-caption);
+  font-weight: var(--fw-semibold);
+  color: var(--c-font-disabled);
+}
+
+/*
+  TODO(IL, 2021-07-30): when consumers of this class are migrated to CSS-in-JS, keep in mind
+  the meaning of .title_bar is vague, it is widely used by several unrelated components.
+  Also, it's almost the same as .titled_list_title_bar -- they are the same
+  except for flex-related rules.
+*/
+.title_bar {
+  position: relative;
+  display: flex;
+  text-decoration: none;
+  padding: var(--list-padding-large) var(--list-padding-small);
+  flex-direction: column;
+}
+
+/* Specifically for TitledList */
+.titled_list_title_bar {
+  position: relative;
+  display: flex;
+  text-decoration: none;
+  padding: var(--list-padding-large) var(--list-padding-small);
+  flex-direction: row;
+  align-items: center;
+}
+
+.titled_list_selected {
+  & .title_bar {
+    background-color: var(--c-bg-selected);
+
+    & * {
+      color: var(--c-selected-dark);
+      font-weight: var(--fw-semibold);
+    }
+  }
+}
+
+.title {
+  font-size: var(--fs-body-2);
+  font-weight: var(--fw-regular);
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.title_enabled {
+  color: var(--c-font-dark);
+}
+
+.title_disabled {
+  color: var(--c-font-disabled);
+}
+
+.title_bar_icon {
+  color: var(--c-font-dark);
+  height: 1.5rem;
+}
+
+.title_bar_error {
+  background-color: var(--c-error-light);
+}
+
+.icon_left_of_title {
+  margin-right: 0.5rem;
+  height: 1.2rem;
+}
+
+.icon_left_of_title_container {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.title_bar_carat {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  padding: calc(var(--list-padding-small) - var(--bd-width-default));
+  padding-top: 1rem;
+
+  &:hover {
+    background-color: color-mod(var(--c-black) alpha(5%));
+  }
+}
+
+.list {
+  list-style-type: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.list_item {
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  line-height: 1.25;
+  margin: 0;
+  padding: var(--list-padding-small);
+
+  &:hover {
+    background-color: var(--c-bg-hover);
+  }
+
+  &.active {
+    background-color: var(--c-bg-selected);
+  }
+}
+
+a.list_item {
+  text-decoration: none;
+}
+
+.list_alert {
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+  width: 100%;
+  padding: var(--list-padding-small);
+  background-color: var(--c-bg-light);
+  font-style: italic;
+}
+
+.item_icon {
+  flex: none;
+  height: calc(1.25 * var(--fs-body-1));
+  margin-right: 0.5rem;
+}

package/src/modals/AlertModal.tsx

@@ -0,0 +1,89 @@
+import cx from 'classnames'
+
+import { OutlineButton } from '../buttons'
+import { Icon } from '../icons'
+import { LegacyModal } from './LegacyModal'
+import styles from './modals.module.css'
+
+import type { ReactNode } from 'react'
+import type { ButtonProps } from '../buttons'
+import type { IconName } from '../icons'
+
+export interface AlertModalProps {
+  /** optional handler for overlay click */
+  onCloseClick?: () => unknown
+  /** optional modal heading */
+  heading?: ReactNode
+  /** optional array of `ButtonProps` for `OutlineButton`s at bottom of modal */
+  buttons?: Array<ButtonProps | null | undefined>
+  /** modal contents */
+  children: 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,61 @@
+import { Fragment } from 'react'
+import cx from 'classnames'
+import { RemoveScroll } from 'react-remove-scroll'
+
+import { Overlay } from './Overlay'
+import styles from './modals.module.css'
+
+import type { MouseEventHandler, ReactNode, Ref } from 'react'
+
+export interface LegacyModalProps {
+  /** handler to close the modal (attached to `Overlay` onClick) */
+  onCloseClick?: MouseEventHandler
+  /** Optional styled heading **/
+  heading?: string
+  /** modal contents */
+  children: 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?: 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 : 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,45 @@
+import { PrimaryButton, StyledText } from '../atoms'
+import { SPACING } from '../ui-style-constants'
+import { Flex, STYLE_PROPS } from '../primitives'
+import { JUSTIFY_END } from '../styles'
+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 { 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 { 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 { Icon } from '../icons'
+import { Box, Btn, Flex } from '../primitives'
+import { StyledText } from '../atoms'
+import {
+  ALIGN_CENTER,
+  DISPLAY_FLEX,
+  JUSTIFY_CENTER,
+  JUSTIFY_SPACE_BETWEEN,
+} from '../styles'
+import { SPACING } from '../ui-style-constants'
+import { COLORS } from '../helix-design-system'
+
+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};
+  }
+`