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

package/src/atoms/Tag/index.tsx

@@ -0,0 +1,115 @@
+import { css } from 'styled-components'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
+import { ALIGN_CENTER, DIRECTION_ROW, FLEX_MAX_CONTENT } from '../../styles'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+import { Icon } from '../../icons'
+import { StyledText } from '../StyledText'
+
+import type { IconName } from '../../icons'
+
+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'
+  /** Tagicon */
+  iconName?: IconName
+  shrinkToContent?: boolean
+}
+
+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 } = props
+
+  const DEFAULT_CONTAINER_STYLE = 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 = css`
+    ${DEFAULT_CONTAINER_STYLE}
+    &: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};
+    }
+  `
+
+  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
+          : DEFAULT_CONTAINER_STYLE
+      }
+      gridGap={SPACING.spacing4}
+      data-testid={`Tag_${type}`}
+    >
+      {iconName != null && iconPosition === 'left' ? (
+        <Icon
+          name={iconName}
+          aria-label={`icon_left_${text}`}
+          css={ICON_STYLE}
+        />
+      ) : 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>
+  )
+}

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

@@ -0,0 +1,68 @@
+import * as React from 'react'
+
+import { Toast } from '.'
+import { SPACING, VIEWPORT } from '../../ui-style-constants'
+import { Flex } from '../../primitives'
+import {
+  DIRECTION_COLUMN,
+  DIRECTION_ROW,
+  JUSTIFY_CENTER,
+  POSITION_FIXED,
+} from '../../styles'
+import { PrimaryButton } from '../buttons'
+import { LegacyStyledText } from '../StyledText'
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'ODD/Atoms/Toast',
+  component: Toast,
+  parameters: VIEWPORT.touchScreenViewport,
+} 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}>
+          <LegacyStyledText as="p">
+            When clicking the button, the Toast shows up in the bottom.
+          </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 && (
+        <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

@@ -0,0 +1,64 @@
+import * as React from 'react'
+
+import { Toast } from './index'
+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 type { Story, Meta } 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

@@ -0,0 +1,179 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import { act, fireEvent, screen } from '@testing-library/react'
+import { renderWithProviders } from '../../../testing/utils'
+import { Toast, TOAST_ANIMATION_DURATION } from '..'
+
+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

@@ -0,0 +1,175 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import { act, fireEvent, screen } from '@testing-library/react'
+import { renderWithProviders } from '../../../testing/utils'
+import { Toast, TOAST_ANIMATION_DURATION } from '..'
+
+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()
+  })
+})