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

package/src/atoms/Toast/__tests__/Toast.test.tsx

@@ -0,0 +1,178 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import '@testing-library/jest-dom/vitest'
+
+import { act, fireEvent, screen } from '@testing-library/react'
+
+import { Toast, TOAST_ANIMATION_DURATION } from '..'
+import { renderWithProviders } from '../../../testing/utils'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Toast>) => {
+  return renderWithProviders(<Toast {...props} displayType="desktop" />)[0]
+}
+
+describe('Toast', () => {
+  let props: ComponentProps<typeof Toast>
+  beforeEach(() => {
+    props = {
+      id: '1',
+      message: 'test message',
+      type: 'success',
+      closeButton: true,
+      onClose: vi.fn(),
+    }
+  })
+
+  it('renders correct message', () => {
+    render(props)
+    screen.getByText('test message')
+  })
+
+  it('calls onClose when close button is pressed', () => {
+    vi.useFakeTimers()
+    render(props)
+    const closeButton = screen.getByRole('button')
+    fireEvent.click(closeButton)
+    act(() => {
+      vi.advanceTimersByTime(TOAST_ANIMATION_DURATION)
+    })
+    expect(props.onClose).toHaveBeenCalled()
+  })
+
+  it('does not render x button if prop is false', () => {
+    props = {
+      ...props,
+      closeButton: false,
+    }
+    render(props)
+    expect(screen.queryByRole('button')).toBeNull()
+  })
+
+  it('should have success styling when passing success as type', () => {
+    render(props)
+    const successToast = screen.getByTestId('Toast_success')
+    expect(successToast).toHaveStyle(`color: #04aa65
+    background-color: #f3fffa`)
+    screen.getByLabelText('icon_success')
+  })
+
+  it('should have warning styling when passing warning as type', () => {
+    props = {
+      ...props,
+      type: 'warning',
+    }
+    render(props)
+    const warningToast = screen.getByTestId('Toast_warning')
+    expect(warningToast).toHaveStyle(`color: #f09d20
+    background-color: #fffcf5`)
+    screen.getByLabelText('icon_warning')
+  })
+
+  it('should have error styling when passing error as type', () => {
+    props = {
+      ...props,
+      type: 'error',
+    }
+    render(props)
+    const errorToast = screen.getByTestId('Toast_error')
+    expect(errorToast).toHaveStyle(`color: #bf0000
+    background-color: #fff3f3`)
+    screen.getByLabelText('icon_error')
+  })
+
+  it('should have info styling when passing info as type', () => {
+    props = {
+      ...props,
+      type: 'info',
+    }
+    render(props)
+    const infoToast = screen.getByTestId('Toast_info')
+    expect(infoToast).toHaveStyle(`color: #16212D
+    background-color: #eaeaeb`)
+    screen.getByLabelText('icon_info')
+  })
+
+  it('should stay more than 7 seconds when disableTimeout is true', async () => {
+    vi.useFakeTimers()
+    props = {
+      ...props,
+      disableTimeout: true,
+    }
+    render(props)
+    screen.getByText('test message')
+    act(() => {
+      vi.advanceTimersByTime(100)
+    })
+    expect(props.onClose).not.toHaveBeenCalled()
+    act(() => {
+      vi.advanceTimersByTime(7000)
+    })
+    expect(props.onClose).not.toHaveBeenCalled()
+  })
+
+  it('should not stay more than 7 seconds when disableTimeout is false', async () => {
+    vi.useFakeTimers()
+    props = {
+      ...props,
+      disableTimeout: false,
+    }
+    render(props)
+    screen.getByText('test message')
+    act(() => {
+      vi.advanceTimersByTime(100)
+    })
+    expect(props.onClose).not.toHaveBeenCalled()
+    act(() => {
+      vi.advanceTimersByTime(9000)
+    })
+    expect(props.onClose).toHaveBeenCalled()
+  })
+
+  it('should dismiss when a second toast appears', async () => {
+    vi.useFakeTimers()
+    props = {
+      ...props,
+      disableTimeout: true,
+      exitNow: true,
+    }
+    render(props)
+    screen.getByText('test message')
+    act(() => {
+      vi.advanceTimersByTime(100)
+    })
+    expect(props.onClose).not.toHaveBeenCalled()
+    act(() => {
+      vi.advanceTimersByTime(TOAST_ANIMATION_DURATION)
+    })
+    expect(props.onClose).toHaveBeenCalled()
+  })
+  it('renders link text with an optional callback', async () => {
+    vi.useFakeTimers()
+    props = {
+      ...props,
+      linkText: 'test link',
+      onLinkClick: vi.fn(),
+    }
+    render(props)
+    const clickableLink = screen.getByText('test link')
+    fireEvent.click(clickableLink)
+    expect(props.onLinkClick).toHaveBeenCalled()
+  })
+  it('toast will not disappear on a general click if both close button and clickable link present', async () => {
+    vi.useFakeTimers()
+    props = {
+      ...props,
+      linkText: 'test link',
+      closeButton: true,
+    }
+    render(props)
+    const clickableLink = screen.getByText('test message')
+    fireEvent.click(clickableLink)
+    act(() => {
+      vi.advanceTimersByTime(TOAST_ANIMATION_DURATION)
+    })
+    expect(props.onClose).not.toHaveBeenCalled()
+  })
+})

package/src/atoms/Toast/index.tsx

@@ -0,0 +1,434 @@
+import { useState } from 'react'
+import { css } from 'styled-components'
+
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
+import { Btn, Flex, Link } from '../../primitives'
+import {
+  ALIGN_CENTER,
+  DIRECTION_COLUMN,
+  DIRECTION_ROW,
+  JUSTIFY_SPACE_BETWEEN,
+  NO_WRAP,
+} from '../../styles'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { truncateString } from '../../utils'
+import { StyledText } from '../StyledText'
+
+import type {
+  DefaultTheme,
+  FlattenSimpleInterpolation,
+  ThemedCssFunction,
+} from 'styled-components'
+import type { IconName, IconProps } from '../../icons'
+import type { StyleProps } from '../../primitives'
+
+export const SUCCESS_TOAST: 'success' = 'success'
+export const WARNING_TOAST: 'warning' = 'warning'
+export const ERROR_TOAST: 'error' = 'error'
+export const INFO_TOAST: 'info' = 'info'
+
+export type ToastType =
+  | typeof SUCCESS_TOAST
+  | typeof WARNING_TOAST
+  | typeof ERROR_TOAST
+  | typeof INFO_TOAST
+
+export interface ToastProps extends StyleProps {
+  id: string
+  message: string
+  type: ToastType
+  icon?: IconProps
+  closeButton?: boolean
+  buttonText?: string
+  onClose?: () => void
+  disableTimeout?: boolean
+  duration?: number
+  heading?: string
+  displayType?: 'desktop' | 'odd'
+  exitNow?: boolean
+  linkText?: string
+  onLinkClick?: () => void
+}
+
+// TODO: (jh: 08/10/23) refactor toast component and render logic.
+
+export const TOAST_ANIMATION_DURATION = 500
+
+export function Toast(props: ToastProps): JSX.Element {
+  const {
+    buttonText,
+    message,
+    type,
+    icon,
+    closeButton,
+    onClose,
+    disableTimeout = false,
+    duration = 7000,
+    heading,
+    displayType,
+    exitNow = false,
+    linkText,
+    onLinkClick = () => null,
+    ...styleProps
+  } = props
+  const [isClosed, setIsClosed] = useState<boolean>(exitNow)
+
+  // We want to be able to storybook both the ODD and the Desktop versions,
+  // so let it (and unit tests, for that matter) be able to pass in a parameter
+  // that overrides the app's hardware selector.
+  let showODDStyle = false
+  if (displayType === 'desktop') {
+    showODDStyle = false
+  } else if (displayType === 'odd') {
+    showODDStyle = true
+  }
+
+  let closeText: string | null = null
+  if (buttonText != null) {
+    closeText = buttonText
+  } else if (closeButton) {
+    if (displayType === 'odd') {
+      closeText = 'Close'
+    } else {
+      closeText = ''
+    }
+  }
+
+  const ANIMATION_OVERFLOW = `
+  overflow: hidden;
+  `
+  const ODD_ANIMATION_OPTIMIZATIONS = `
+  backface-visibility: hidden;
+  perspective: 1000;
+  will-change: opacity, transform;
+  `
+  const DESKTOP_ANIMATION_SLIDE_UP_AND_IN = css`
+    animation-duration: ${TOAST_ANIMATION_DURATION}ms;
+    animation-name: slidein;
+    ${ANIMATION_OVERFLOW}
+
+    @keyframes slidein {
+      from {
+        transform: translateX(100%);
+      }
+      to {
+        transform: translateX(0%);
+      }
+    }
+  `
+  const DESKTOP_ANIMATION_SLIDE_DOWN_AND_OUT = css`
+    animation-duration: ${TOAST_ANIMATION_DURATION}ms;
+    animation-name: slideout;
+    ${ANIMATION_OVERFLOW}
+
+    @keyframes slideout {
+      from {
+        transform: translateX(0%);
+      }
+      to {
+        transform: translateX(100%);
+      }
+    }
+  `
+
+  const desktopAnimation = isClosed
+    ? DESKTOP_ANIMATION_SLIDE_DOWN_AND_OUT
+    : DESKTOP_ANIMATION_SLIDE_UP_AND_IN
+
+  const ODD_ANIMATION_SLIDE_UP_AND_IN = css`
+    animation-duration: ${TOAST_ANIMATION_DURATION}ms;
+    animation-name: slideup;
+    ${ANIMATION_OVERFLOW}
+    ${ODD_ANIMATION_OPTIMIZATIONS}
+
+    @keyframes slideup {
+      from {
+        transform: translate3d(0%, 50%, 0);
+        filter: opacity(0);
+      }
+      to {
+        transform: translate3d(0%, 0%, 0);
+        filter: opacity(100%);
+      }
+    }
+  `
+  const ODD_ANIMATION_SLIDE_DOWN_AND_OUT = css`
+    animation-duration: ${TOAST_ANIMATION_DURATION}ms;
+    animation-name: slidedown;
+    ${ANIMATION_OVERFLOW}
+    ${ODD_ANIMATION_OPTIMIZATIONS}
+
+    @keyframes slidedown {
+      from {
+        filter: opacity(100%);
+      }
+      to {
+        filter: opacity(0);
+      }
+    }
+  `
+  const ODD_ANIMATION_FADE_UP_AND_OUT = css`
+    animation-duration: ${TOAST_ANIMATION_DURATION}ms;
+    animation-name: fadeUpAndOut;
+    ${ANIMATION_OVERFLOW}
+    ${ODD_ANIMATION_OPTIMIZATIONS}
+
+    @keyframes fadeUpAndOut {
+      from {
+        filter: opacity(100%);
+      }
+      to {
+        filter: opacity(0%);
+      }
+    }
+  `
+
+  const ODD_ANIMATION_NONE = css``
+
+  let oddAnimation: FlattenSimpleInterpolation | ThemedCssFunction<DefaultTheme>
+
+  if (isClosed) {
+    if (exitNow) {
+      oddAnimation = ODD_ANIMATION_FADE_UP_AND_OUT
+    } else {
+      oddAnimation = ODD_ANIMATION_SLIDE_DOWN_AND_OUT
+    }
+  } else {
+    if (exitNow) {
+      oddAnimation = ODD_ANIMATION_NONE
+    } else {
+      oddAnimation = ODD_ANIMATION_SLIDE_UP_AND_IN
+    }
+  }
+
+  const toastStyleByType: {
+    [k in ToastType]: {
+      iconName: IconName
+      color: string
+      backgroundColor: string
+    }
+  } = {
+    [ERROR_TOAST]: {
+      iconName: 'ot-alert',
+      color: COLORS.red60,
+      backgroundColor: `${showODDStyle ? COLORS.red30 : COLORS.red20}`,
+    },
+    [INFO_TOAST]: {
+      iconName: 'information',
+      color: COLORS.blue60,
+      backgroundColor: `${showODDStyle ? COLORS.blue30 : COLORS.blue20}`,
+    },
+    [SUCCESS_TOAST]: {
+      iconName: 'ot-check',
+      color: COLORS.green60,
+      backgroundColor: `${showODDStyle ? COLORS.green30 : COLORS.green20}`,
+    },
+    [WARNING_TOAST]: {
+      iconName: 'ot-alert',
+      color: `${COLORS.yellow60}`,
+      backgroundColor: `${showODDStyle ? COLORS.yellow30 : COLORS.yellow20}`,
+    },
+  }
+
+  const headingText =
+    heading !== undefined
+      ? showODDStyle
+        ? truncateString(heading, 45, 40)
+        : heading
+      : ''
+
+  const calculatedDuration = (
+    message: string,
+    heading: string,
+    duration: number | undefined
+  ): number => {
+    const combinedDuration = (message.length + heading.length) * 50
+    if (exitNow) return 0
+    if (duration !== undefined) {
+      return duration
+    }
+    if (combinedDuration < 2000) {
+      return 2000
+    }
+    if (combinedDuration > 7000) {
+      return 7000
+    }
+    return combinedDuration
+  }
+
+  // Handle dismissal of toast when no timer is set.
+  const onCloseHandler = (): void => {
+    setIsClosed(true)
+    setTimeout(() => {
+      onClose?.()
+    }, TOAST_ANIMATION_DURATION - 50)
+  }
+
+  const isAutomaticAnimationExit = !disableTimeout || exitNow
+
+  if (isAutomaticAnimationExit) {
+    setTimeout(() => {
+      setIsClosed(true)
+      setTimeout(() => {
+        onClose?.()
+      }, TOAST_ANIMATION_DURATION - 50)
+    }, calculatedDuration(message, headingText, duration))
+  }
+
+  // Require intentional clicking if links and close button present on toast.
+  const toastClose = (): void => {
+    if (closeButton == null || linkText == null) onCloseHandler()
+  }
+
+  return (
+    <Flex
+      css={showODDStyle ? oddAnimation : desktopAnimation}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      alignItems={ALIGN_CENTER}
+      borderRadius={
+        showODDStyle ? BORDERS.borderRadius8 : BORDERS.borderRadius4
+      }
+      borderColor={toastStyleByType[type].color}
+      borderWidth={showODDStyle ? BORDERS.borderRadius4 : '1px'}
+      border={BORDERS.styleSolid}
+      boxShadow={BORDERS.shadowBig}
+      backgroundColor={toastStyleByType[type].backgroundColor}
+      onClick={toastClose}
+      // adjust padding when heading is present and creates extra column
+      padding={
+        showODDStyle
+          ? `${SPACING.spacing16} ${SPACING.spacing24}`
+          : `${heading != null ? SPACING.spacing4 : SPACING.spacing8} ${
+              SPACING.spacing8
+            } ${heading != null ? SPACING.spacing4 : SPACING.spacing8} ${
+              SPACING.spacing12
+            }`
+      }
+      data-testid={`Toast_${type}`}
+      height={showODDStyle ? '5.76rem' : 'auto'}
+      maxWidth={showODDStyle ? '60rem' : '88%'}
+      minWidth={showODDStyle ? '60rem' : '24rem'}
+      {...styleProps}
+    >
+      <Flex
+        alignItems={ALIGN_CENTER}
+        flexDirection={DIRECTION_ROW}
+        gridGap={SPACING.spacing8}
+        overflow="hidden"
+        width="100%"
+      >
+        <Icon
+          name={icon?.name ?? toastStyleByType[type].iconName}
+          color={toastStyleByType[type].color}
+          maxWidth={showODDStyle ? SPACING.spacing32 : SPACING.spacing16}
+          minWidth={showODDStyle ? SPACING.spacing32 : SPACING.spacing16}
+          marginRight={showODDStyle ? SPACING.spacing8 : '0'}
+          spin={icon?.spin != null ? icon.spin : false}
+          aria-label={`icon_${type}`}
+        />
+        <Flex
+          flexDirection={showODDStyle ? DIRECTION_ROW : DIRECTION_COLUMN}
+          overflow="hidden"
+          width={showODDStyle ? 'auto' : '100%'}
+        >
+          {headingText.length > 0 ? (
+            <StyledText
+              oddStyle="bodyTextSemiBold"
+              desktopStyle="bodyDefaultRegular"
+              marginRight={showODDStyle ? SPACING.spacing4 : undefined}
+              maxWidth={showODDStyle ? '30.375rem' : 'auto'}
+              overflow="hidden"
+              textOverflow="ellipsis"
+              whiteSpace={NO_WRAP}
+            >
+              {headingText}
+            </StyledText>
+          ) : null}
+          <Flex alignItems={ALIGN_CENTER}>
+            <StyledText
+              oddStyle="bodyTextSemiBold"
+              desktopStyle="bodyDefaultRegular"
+              overflow="hidden"
+              text-overflow="ellipsis"
+              white-space="nowrap"
+            >
+              {message}
+            </StyledText>
+          </Flex>
+        </Flex>
+      </Flex>
+
+      <Flex alignItems={ALIGN_CENTER}>
+        {linkText ? (
+          <Link
+            role="button"
+            onClick={() => {
+              onLinkClick()
+              onCloseHandler()
+            }}
+            marginLeft={SPACING.spacing4}
+            marginRight={SPACING.spacing8}
+          >
+            <StyledText
+              fontSize={
+                showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP
+              }
+              fontWeight={
+                showODDStyle
+                  ? TYPOGRAPHY.fontWeightSemiBold
+                  : TYPOGRAPHY.fontWeightRegular
+              }
+              lineHeight={
+                showODDStyle ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
+              }
+              textDecoration={
+                showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
+              }
+              textTransform={TYPOGRAPHY.textTransformCapitalize}
+              whiteSpace={NO_WRAP}
+            >
+              {linkText}
+            </StyledText>
+          </Link>
+        ) : null}
+        {closeText ? (
+          <Link
+            role="button"
+            onClick={() => {
+              onCloseHandler()
+            }}
+            padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
+          >
+            <StyledText
+              oddStyle="bodyTextSemiBold"
+              desktopStyle="bodyDefaultRegular"
+              textDecoration={
+                showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
+              }
+              textTransform={TYPOGRAPHY.textTransformCapitalize}
+              whiteSpace={NO_WRAP}
+            >
+              {closeText}
+            </StyledText>
+          </Link>
+        ) : null}
+      </Flex>
+      {!closeText && closeButton ? (
+        <Btn
+          onClick={() => {
+            onCloseHandler()
+          }}
+        >
+          <Icon
+            width={SPACING.spacing24}
+            height={SPACING.spacing24}
+            marginTop={SPACING.spacing6}
+            name="close"
+            aria-label="close_icon"
+          />
+        </Btn>
+      ) : null}
+    </Flex>
+  )
+}

package/src/atoms/ToggleGroup/ToggleGroup.stories.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+
+import { ToggleGroup as ToggleGroupComponent } from './index'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof ToggleGroupComponent> = {
+  title: 'Library/Atoms/ToggleGroup',
+  component: ToggleGroupComponent,
+}
+
+export default meta
+
+type Story = StoryObj<typeof ToggleGroupComponent>
+type ToggleGroupComponentProps = React.ComponentProps<
+  typeof ToggleGroupComponent
+>
+
+const Template = (args: ToggleGroupComponentProps): JSX.Element => {
+  const [value, setValue] = React.useState<'left' | 'right'>('left')
+
+  return (
+    <ToggleGroupComponent
+      {...args}
+      leftClick={() => {
+        setValue('left')
+      }}
+      rightClick={() => {
+        setValue('right')
+      }}
+      selectedValue={value === 'left' ? 'left button' : 'right button'}
+    />
+  )
+}
+export const ToggleGroup: Story = {
+  render: Template,
+  args: {
+    leftText: 'left button',
+    rightText: 'right button',
+  },
+}

package/src/atoms/ToggleGroup/__tests__/ToggleGroup.test.tsx

@@ -0,0 +1,30 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { renderWithProviders } from '../../../testing/utils'
+import { ToggleGroup } from '../index'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ToggleGroup>) => {
+  return renderWithProviders(<ToggleGroup {...props} />)
+}
+
+describe('ToggleGroup', () => {
+  let props: ComponentProps<typeof ToggleGroup>
+
+  it('should render text and buttons', () => {
+    props = {
+      leftText: 'mock leftText',
+      rightText: 'mock rightText',
+      leftClick: vi.fn(),
+      rightClick: vi.fn(),
+      selectedValue: 'mock leftText',
+    }
+    render(props)
+    fireEvent.click(screen.getByText('mock leftText'))
+    expect(props.leftClick).toHaveBeenCalled()
+    fireEvent.click(screen.getByText('mock rightText'))
+    expect(props.rightClick).toHaveBeenCalled()
+  })
+})