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

package/src/atoms/Tag/index.tsx

@@ -1,133 +0,0 @@
-import { css } from 'styled-components'
-
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { LiquidIcon } from '../../molecules/LiquidIcon'
-import { Flex } from '../../primitives'
-import { ALIGN_CENTER, DIRECTION_ROW, FLEX_MAX_CONTENT } from '../../styles'
-import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
-import { StyledText } from '../StyledText'
-
-import type { FlattenSimpleInterpolation } from 'styled-components'
-import type { IconName } from '../../icons'
-import type { LiquidIconProps } from '../../molecules/LiquidIcon'
-
-export type TagType = 'default' | 'interactive' | 'branded' | 'onColor'
-
-export interface TagProps {
-  /** Tag content */
-  text: string
-  /** name constant of the text color and the icon color to display */
-  type: TagType
-  /** iconLocation */
-  iconPosition?: 'left' | 'right'
-  /** Tag icon */
-  iconName?: IconName
-  shrinkToContent?: boolean
-  /** liquid icon */
-  liquidIcon?: LiquidIconProps
-}
-
-const defaultColors = {
-  backgroundColor: `${COLORS.black90}${COLORS.opacity20HexCode}`,
-  color: COLORS.black90,
-}
-
-const TAG_PROPS_BY_TYPE: Record<
-  TagType,
-  {
-    backgroundColor: string
-    color: string
-  }
-> = {
-  default: defaultColors,
-  interactive: defaultColors,
-  branded: {
-    backgroundColor: COLORS.blue50,
-    color: COLORS.white,
-  },
-  onColor: {
-    backgroundColor: COLORS.white,
-    color: COLORS.black90,
-  },
-}
-
-export function Tag(props: TagProps): JSX.Element {
-  const {
-    iconName,
-    type,
-    text,
-    iconPosition,
-    shrinkToContent = false,
-    liquidIcon,
-  } = props
-
-  return (
-    <Flex
-      alignItems={ALIGN_CENTER}
-      flexDirection={DIRECTION_ROW}
-      color={TAG_PROPS_BY_TYPE[type].color}
-      backgroundColor={TAG_PROPS_BY_TYPE[type].backgroundColor}
-      css={
-        type === 'interactive'
-          ? INTERACTIVE_CONTAINER_STYLE(shrinkToContent)
-          : DEFAULT_CONTAINER_STYLE(shrinkToContent)
-      }
-      gridGap={SPACING.spacing4}
-      data-testid={`Tag_${type}`}
-    >
-      {iconName != null && iconPosition === 'left' ? (
-        <Icon
-          name={iconName}
-          aria-label={`icon_left_${text}`}
-          css={ICON_STYLE}
-        />
-      ) : null}
-      {liquidIcon != null ? <LiquidIcon {...liquidIcon} /> : null}
-      <StyledText desktopStyle="bodyDefaultRegular" oddStyle="bodyTextRegular">
-        {text}
-      </StyledText>
-      {iconName != null && iconPosition === 'right' ? (
-        <Icon
-          name={iconName}
-          aria-label={`icon_right_${text}`}
-          css={ICON_STYLE}
-        />
-      ) : null}
-    </Flex>
-  )
-}
-
-const DEFAULT_CONTAINER_STYLE = (
-  shrinkToContent: boolean
-): FlattenSimpleInterpolation => css`
-  padding: ${SPACING.spacing2} ${SPACING.spacing8};
-  border-radius: ${BORDERS.borderRadius4};
-  width: ${shrinkToContent ? FLEX_MAX_CONTENT : 'inherit'};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    border-radius: ${BORDERS.borderRadius8};
-    padding: ${SPACING.spacing8} ${SPACING.spacing12};
-  }
-`
-
-const INTERACTIVE_CONTAINER_STYLE = (
-  shrinkToContent: boolean
-): FlattenSimpleInterpolation => css`
-  ${DEFAULT_CONTAINER_STYLE(shrinkToContent)}
-  &:hover {
-    background-color: ${COLORS.black90}${COLORS.opacity40HexCode};
-  }
-  &:focus-visible {
-    box-shadow: 0 0 0 3px ${COLORS.blue50};
-    outline: none;
-  }
-`
-
-const ICON_STYLE = css`
-  width: ${SPACING.spacing16};
-  height: ${SPACING.spacing16};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    width: ${SPACING.spacing24};
-    height: ${SPACING.spacing24};
-  }
-`

package/src/atoms/Toast/ODDToast.stories.tsx

@@ -1,78 +0,0 @@
-import * as React from 'react'
-
-import { Toast } from '.'
-import { Flex, STYLE_PROPS } from '../../primitives'
-import {
-  DIRECTION_COLUMN,
-  DIRECTION_ROW,
-  JUSTIFY_CENTER,
-  POSITION_FIXED,
-} from '../../styles'
-import { SPACING, VIEWPORT } from '../../ui-style-constants'
-import { PrimaryButton } from '../buttons'
-import { StyledText } from '../StyledText'
-
-import type { Meta, Story } from '@storybook/react'
-
-export default {
-  title: 'ODD/Atoms/Toast',
-  component: Toast,
-  parameters: VIEWPORT.touchScreenViewport,
-  argTypes: {
-    // Disable all StyleProps
-    ...Object.fromEntries(
-      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
-        prop,
-        { table: { disable: true } },
-      ])
-    ),
-  },
-} as Meta
-
-const Template: Story<React.ComponentProps<typeof Toast>> = args => {
-  const [isShowToast, setIsShowToast] = React.useState<boolean>(false)
-
-  const handleClick = (): void => {
-    setIsShowToast(true)
-  }
-
-  return (
-    <>
-      <Flex flexDirection={DIRECTION_ROW} marginY={SPACING.spacing16}>
-        <PrimaryButton onClick={handleClick}>Click me</PrimaryButton>
-        <Flex flexDirection={DIRECTION_COLUMN} marginLeft={SPACING.spacing8}>
-          <StyledText as="p">
-            When clicking the button, the Toast shows up in the bottom.
-          </StyledText>
-          <StyledText as="p">
-            Unless you set a duration or disable the timeout, the Toast will
-            disappear between 2 and 7 seconds depending on the length of the
-            text.
-          </StyledText>
-        </Flex>
-      </Flex>
-      {isShowToast && (
-        <Flex
-          justifyContent={JUSTIFY_CENTER}
-          position={POSITION_FIXED}
-          bottom={SPACING.spacing16}
-          zIndex={1000}
-        >
-          <Toast
-            {...args}
-            onClose={() => {
-              setIsShowToast(false)
-            }}
-          />
-        </Flex>
-      )}
-    </>
-  )
-}
-
-export const ToastComponent = Template.bind({})
-ToastComponent.args = {
-  message: 'Success Toast message',
-  type: 'success',
-  displayType: 'odd',
-}

package/src/atoms/Toast/Toast.stories.tsx

@@ -1,65 +0,0 @@
-import * as React from 'react'
-
-import { Flex, STYLE_PROPS } from '../../primitives'
-import { DIRECTION_COLUMN, DIRECTION_ROW } from '../../styles'
-import { SPACING } from '../../ui-style-constants'
-import { PrimaryButton } from '../buttons'
-import { LegacyStyledText } from '../StyledText'
-import { Toast } from './index'
-
-import type { Meta, Story } from '@storybook/react'
-
-export default {
-  title: 'Helix/Atoms/Toast',
-  component: Toast,
-  argTypes: {
-    // Disable all StyleProps
-    ...Object.fromEntries(
-      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
-        prop,
-        { table: { disable: true } },
-      ])
-    ),
-  },
-} as Meta
-
-const TemplateWithTimeout: Story<React.ComponentProps<typeof Toast>> = args => {
-  const [isShowToast, setIsShowToast] = React.useState<boolean>(false)
-
-  const handleClick = (): void => {
-    setIsShowToast(true)
-  }
-
-  return (
-    <>
-      <Flex flexDirection={DIRECTION_ROW} marginY={SPACING.spacing16}>
-        <PrimaryButton onClick={handleClick}>Click me</PrimaryButton>
-        <Flex flexDirection={DIRECTION_COLUMN} marginLeft={SPACING.spacing8}>
-          <LegacyStyledText as="p">
-            When clicking the button, the Toast shows up below.
-          </LegacyStyledText>
-          <LegacyStyledText as="p">
-            Unless you set a duration or disable the timeout, the Toast will
-            disappear between 2 and 7 seconds depending on the length of the
-            text.
-          </LegacyStyledText>
-        </Flex>
-      </Flex>
-      {isShowToast && (
-        <Toast
-          {...args}
-          onClose={() => {
-            setIsShowToast(false)
-          }}
-        />
-      )}
-    </>
-  )
-}
-
-export const ToastComponent = TemplateWithTimeout.bind({})
-ToastComponent.args = {
-  message: 'Success Toast message',
-  type: 'success',
-  displayType: 'desktop',
-}

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

@@ -1,182 +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="odd" />)[0]
-}
-
-describe('Toast', () => {
-  let props: ComponentProps<typeof Toast>
-  beforeEach(() => {
-    props = {
-      id: '1',
-      message: 'test message',
-      heading: 'heading message',
-      type: 'success',
-      closeButton: true,
-      buttonText: 'Close',
-      onClose: vi.fn(),
-      displayType: 'odd',
-      exitNow: false,
-    }
-  })
-
-  it('renders correct message', () => {
-    render(props)
-    screen.getByText('test message')
-    screen.getByText('heading message')
-  })
-  it('truncates heading message whern too long', () => {
-    props = {
-      ...props,
-      heading: 'Super-long-protocol-file-name-that-the-user-made.py',
-    }
-    render(props)
-    screen.getByText('Super-long-protocol-file-name-that-the-u...py')
-  })
-  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 close button if buttonText and closeButton are undefined', () => {
-    props = {
-      ...props,
-      buttonText: undefined,
-      closeButton: undefined,
-    }
-    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: ##baffcd`)
-    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: #ffe9be`)
-    screen.getByLabelText('icon_warning')
-  })
-
-  it('after 7 seconds the toast should be closed automatically', async () => {
-    vi.useFakeTimers()
-    props = {
-      ...props,
-      duration: 7000,
-    }
-    render(props)
-    screen.getByText('test message')
-    act(() => {
-      vi.advanceTimersByTime(100)
-    })
-    expect(props.onClose).not.toHaveBeenCalled()
-    act(() => {
-      vi.advanceTimersByTime(8000)
-    })
-    expect(props.onClose).toHaveBeenCalled()
-  })
-
-  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/__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()
-  })
-})