@opentrons/components 0.1.7-alpha.1 → 0.2.0-alpha.1

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

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

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

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

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