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

package/src/atoms/Tag/Tag.stories.tsx

@@ -0,0 +1,50 @@
+import { ICON_DATA_BY_NAME } from '../../icons/icon-data'
+import { Flex } from '../../primitives'
+import { SPACING, VIEWPORT } from '../../ui-style-constants'
+import { Tag as TagComponent } from './index'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof TagComponent> = {
+  title: 'Helix/Atoms/Tag',
+  argTypes: {
+    type: {
+      options: ['default', 'interactive', 'branded', 'onColor'],
+      control: {
+        type: 'select',
+      },
+    },
+    iconName: {
+      options: Object.keys(ICON_DATA_BY_NAME),
+      control: {
+        type: 'select',
+      },
+    },
+    iconPosition: {
+      options: ['left', 'right'],
+      control: {
+        type: 'select',
+      },
+    },
+  },
+  component: TagComponent,
+  parameters: VIEWPORT.touchScreenViewport,
+  decorators: [
+    Story => (
+      <Flex padding={SPACING.spacing16} width="59rem">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof TagComponent>
+
+export const Tag: Story = {
+  args: {
+    type: 'default',
+    text: 'Text',
+    iconPosition: undefined,
+  },
+}

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

@@ -0,0 +1,57 @@
+import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
+import { Tag } from '../index'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Tag>) => {
+  return renderWithProviders(<Tag {...props} />)
+}
+
+describe('Tag', () => {
+  let props: ComponentProps<typeof Tag>
+
+  it('should render text, icon with default', () => {
+    props = {
+      text: 'mockDefault',
+      type: 'default',
+      iconName: 'ot-alert',
+      iconPosition: 'left',
+    }
+    render(props)
+    const tag = screen.getByTestId('Tag_default')
+    screen.getByText('mockDefault')
+    expect(tag).toHaveStyle(
+      `background-color: ${COLORS.black90}${COLORS.opacity20HexCode}`
+    )
+    screen.getByLabelText('icon_left_mockDefault')
+  })
+  it('should render text, right icon with branded', () => {
+    props = {
+      text: 'mockBranded',
+      type: 'branded',
+      iconName: 'ot-alert',
+      iconPosition: 'right',
+    }
+    render(props)
+    const tag = screen.getByTestId('Tag_branded')
+    screen.getByText('mockBranded')
+    expect(tag).toHaveStyle(`background-color: ${COLORS.blue50}`)
+    screen.getByLabelText('icon_right_mockBranded')
+  })
+  it('should render text with interactive', () => {
+    props = {
+      text: 'mockInteractive',
+      type: 'interactive',
+    }
+    render(props)
+    const tag = screen.getByTestId('Tag_interactive')
+    screen.getByText('mockInteractive')
+    expect(tag).toHaveStyle(
+      `background-color: ${COLORS.black90}${COLORS.opacity20HexCode}`
+    )
+  })
+})

package/src/atoms/Tag/index.tsx

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

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

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

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