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

package/src/atoms/buttons/__tests__/BasicButton.test.tsx

@@ -1,87 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { COLORS } from '../../../helix-design-system'
-import { CURSOR_NOT_ALLOWED, CURSOR_POINTER } from '../../../styles/cursor'
-import { renderWithProviders } from '../../../testing/utils'
-import { TYPOGRAPHY } from '../../../ui-style-constants'
-import { BasicButton } from '../BasicButton'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof BasicButton>) => {
-  return renderWithProviders(<BasicButton {...props} />)
-}
-
-describe('BasicButton', () => {
-  let props: ComponentProps<typeof BasicButton>
-
-  beforeEach(() => {
-    props = {
-      children: 'basic button',
-      onClick: vi.fn(),
-      isDisabled: false,
-      underLine: false,
-    }
-  })
-
-  it('renders basic button with text', async () => {
-    render(props)
-    const button = screen.getByRole('button', { name: 'basic button' })
-    expect(button).toHaveAttribute('aria-disabled', 'false')
-    expect(button).toHaveStyle(`cursor: ${CURSOR_POINTER}`)
-    expect(button).toHaveStyle(`color: ${COLORS.black90}`)
-    expect(button).toHaveStyle(`text-decoration: none`)
-  })
-
-  it('renders basic button with icon', async () => {
-    props.iconName = 'alert'
-    render(props)
-    screen.getByTestId('basic_button_alert')
-    screen.getByRole('button', { name: 'basic button' })
-  })
-
-  // TODO: need to update '@testing-library/user-event' v14+
-  // it('has hover styles when not disabled', async () => {
-  //   render(props)
-  //   const button = screen.getByRole('button', { name: 'basic button' })
-  //   await userEvent.hover(button)
-  //   expect(button).toHaveStyle(`color: ${COLORS.blue50}`)
-  // })
-
-  it('calls onClick when clicked', () => {
-    render(props)
-    const button = screen.getByRole('button', { name: 'basic button' })
-    fireEvent.click(button)
-    expect(props.onClick).toHaveBeenCalled()
-  })
-
-  it('renders basic button with text and aria-disabled', () => {
-    props.isDisabled = true
-    render(props)
-    const button = screen.getByRole('button', { name: 'basic button' })
-    expect(button).toHaveAttribute('aria-disabled', 'true')
-    expect(button).toHaveStyle(`cursor: ${CURSOR_NOT_ALLOWED}`)
-    expect(button).toHaveStyle(`color: ${COLORS.grey40}`)
-  })
-
-  it('renders basic button with text and underline', () => {
-    props.underLine = true
-    render(props)
-    const button = screen.getByRole('button', { name: 'basic button' })
-    expect(button).toHaveAttribute('aria-disabled', 'false')
-    expect(button).toHaveStyle(`cursor: ${CURSOR_POINTER}`)
-    expect(button).toHaveStyle(`color: ${COLORS.black90}`)
-    expect(button).toHaveStyle(
-      `text-decoration: ${TYPOGRAPHY.textDecorationUnderline}`
-    )
-  })
-
-  it('has hover styles when not disabled', () => {
-    render(props)
-    const button = screen.getByRole('button', { name: 'basic button' })
-    expect(button).toHaveStyle(`color: ${COLORS.black90}`)
-    expect(button).toHaveAttribute('aria-disabled', 'false')
-    expect(button).toHaveStyle(`cursor: ${CURSOR_POINTER}`)
-  })
-})

package/src/atoms/buttons/__tests__/EmptySelectorButton.test.tsx

@@ -1,45 +0,0 @@
-import '@testing-library/jest-dom/vitest'
-
-import { fireEvent, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { JUSTIFY_CENTER, JUSTIFY_START } from '../../../styles'
-import { renderWithProviders } from '../../../testing/utils'
-import { EmptySelectorButton } from '../EmptySelectorButton'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof EmptySelectorButton>) => {
-  return renderWithProviders(<EmptySelectorButton {...props} />)[0]
-}
-
-describe('EmptySelectorButton', () => {
-  let props: ComponentProps<typeof EmptySelectorButton>
-  beforeEach(() => {
-    props = {
-      onClick: vi.fn(),
-      text: 'mock text',
-      iconName: 'add',
-      textAlignment: 'left',
-    }
-  })
-  it('renders the props and button cta', () => {
-    render(props)
-    const button = screen.getByText('mock text')
-    fireEvent.click(button)
-    expect(props.onClick).toHaveBeenCalled()
-    screen.getByTestId('EmptySelectorButton_add')
-    expect(screen.getByTestId('EmptySelectorButton_container')).toHaveStyle(
-      `justify-content: ${JUSTIFY_START}`
-    )
-  })
-  it('renders middled aligned button', () => {
-    props.textAlignment = 'middle'
-    props.iconName = undefined
-    render(props)
-    expect(screen.getByTestId('EmptySelectorButton_container')).toHaveStyle(
-      `justify-content: ${JUSTIFY_CENTER}`
-    )
-    screen.queryByTestId('EmptySelectorButton_add')
-  })
-})

package/src/atoms/buttons/__tests__/LargeButton.test.tsx

@@ -1,94 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import '@testing-library/jest-dom/vitest'
-
-import { fireEvent, screen } from '@testing-library/react'
-
-import { COLORS } from '../../../helix-design-system'
-import { renderWithProviders } from '../../../testing/utils'
-import { LargeButton } from '../LargeButton'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof LargeButton>) => {
-  return renderWithProviders(<LargeButton {...props} />)[0]
-}
-
-describe('LargeButton', () => {
-  let props: ComponentProps<typeof LargeButton>
-  beforeEach(() => {
-    props = {
-      onClick: vi.fn(),
-      buttonText: 'large button',
-      iconName: 'play-round-corners',
-    }
-  })
-  it('renders the default button and it works as expected', () => {
-    render(props)
-    fireEvent.click(screen.getByText('large button'))
-    expect(props.onClick).toHaveBeenCalled()
-  })
-  it('renders the alert button', () => {
-    props = {
-      ...props,
-      buttonType: 'alert',
-    }
-    render(props)
-    expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.red35}`
-    )
-  })
-  it('renders the secondary button', () => {
-    props = {
-      ...props,
-      buttonType: 'secondary',
-    }
-    render(props)
-    expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.blue35}`
-    )
-  })
-
-  it('renders the alertStroke button', () => {
-    props = {
-      ...props,
-      buttonType: 'alertStroke',
-    }
-    render(props)
-    expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.transparent}`
-    )
-  })
-
-  it('renders the alertAlt button', () => {
-    props = {
-      ...props,
-      buttonType: 'alertAlt',
-    }
-    render(props)
-    expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.white}`
-    )
-  })
-
-  it('renders the stroke button', () => {
-    props = {
-      ...props,
-      buttonType: 'stroke',
-    }
-    render(props)
-    expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.white}`
-    )
-    expect(screen.getByRole('button')).toHaveStyle(`color: ${COLORS.blue50}`)
-  })
-
-  it('renders the button as disabled', () => {
-    props = {
-      ...props,
-      disabled: true,
-    }
-    render(props)
-    expect(screen.getByRole('button')).toBeDisabled()
-  })
-})

package/src/atoms/buttons/__tests__/PrimaryButton.test.tsx

@@ -1,67 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it } from 'vitest'
-
-import '@testing-library/jest-dom/vitest'
-
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { renderWithProviders } from '../../../testing/utils'
-import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
-import { PrimaryButton } from '../PrimaryButton'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof PrimaryButton>) => {
-  return renderWithProviders(<PrimaryButton {...props} />)[0]
-}
-
-describe('PrimaryButton', () => {
-  let props: ComponentProps<typeof PrimaryButton>
-
-  beforeEach(() => {
-    props = {
-      children: 'primary button',
-    }
-  })
-
-  it('renders primary button with text', () => {
-    render(props)
-    const button = screen.getByText('primary button')
-    expect(button).toHaveStyle(`background-color: ${COLORS.blue50}`)
-    expect(button).toHaveStyle(
-      `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
-    )
-    expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeH3}`)
-    expect(button).toHaveStyle(`font-weight: ${TYPOGRAPHY.fontWeightSemiBold}`)
-    expect(button).toHaveStyle(`line-height: ${TYPOGRAPHY.lineHeight20}`)
-    expect(button).toHaveStyle(`border-radius: ${BORDERS.borderRadius8}`)
-    expect(button).toHaveStyle(
-      `text-transform: ${TYPOGRAPHY.textTransformNone}`
-    )
-    expect(button).toHaveStyle(`box-shadow: none`)
-    expect(button).toHaveStyle(`color: ${COLORS.white}`)
-  })
-
-  it('renders primary button with text and disabled', () => {
-    props.disabled = true
-    render(props)
-    const button = screen.getByText('primary button')
-    expect(button).toBeDisabled()
-    expect(button).toHaveStyle(`background-color: ${COLORS.grey30}`)
-    expect(button).toHaveStyle(`color: ${COLORS.grey40}`)
-  })
-
-  it('applies the correct states to the button - hover', () => {
-    render(props)
-    const button = screen.getByText('primary button')
-    fireEvent.mouseOver(button)
-    expect(button).toHaveStyle(`background-color: ${COLORS.blue55}`)
-  })
-
-  it('renders primary button with text and different background color', () => {
-    props.backgroundColor = COLORS.red50
-    render(props)
-    const button = screen.getByText('primary button')
-    expect(button).toHaveStyle(`background-color: ${COLORS.red50}`)
-    expect(button).toHaveStyle(`color: ${COLORS.white}`)
-  })
-})

package/src/atoms/buttons/__tests__/RadioButton.test.tsx

@@ -1,119 +0,0 @@
-import '@testing-library/jest-dom/vitest'
-
-import { queryByAttribute, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { COLORS } from '../../../helix-design-system'
-import { renderWithProviders } from '../../../testing/utils'
-import { SPACING } from '../../../ui-style-constants'
-import { RadioButton } from '../RadioButton'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof RadioButton>) => {
-  return renderWithProviders(<RadioButton {...props} />)[0]
-}
-
-describe('RadioButton', () => {
-  let props: ComponentProps<typeof RadioButton>
-  beforeEach(() => {
-    props = {
-      onChange: vi.fn(),
-      buttonLabel: 'radio button',
-      buttonValue: 1,
-    }
-  })
-
-  it('renders the large button', () => {
-    props = {
-      ...props,
-      radioButtonType: 'large',
-    }
-    render(props)
-    const label = screen.getByRole('label')
-    expect(label).toHaveStyle(`background-color: ${COLORS.blue35}`)
-    expect(label).toHaveStyle(
-      `padding: ${SPACING.spacing12} ${SPACING.spacing16}`
-    )
-  })
-
-  it('renders the large selected button', () => {
-    props = {
-      ...props,
-      isSelected: true,
-      radioButtonType: 'large',
-    }
-    render(props)
-    const label = screen.getByRole('label')
-    expect(label).toHaveStyle(`background-color: ${COLORS.blue50}`)
-    expect(label).toHaveStyle(
-      `padding: ${SPACING.spacing12} ${SPACING.spacing16}`
-    )
-  })
-
-  it('renders the small button with an icon', () => {
-    props = {
-      ...props,
-      radioButtonType: 'small',
-      iconName: 'alert-circle',
-    }
-    render(props)
-    const label = screen.getByRole('label')
-    expect(label).toHaveStyle(`background-color: ${COLORS.blue35}`)
-    expect(label).toHaveStyle(
-      `padding: ${SPACING.spacing12} ${SPACING.spacing16}`
-    )
-  })
-
-  it('renders the small selected button', () => {
-    props = {
-      ...props,
-      isSelected: true,
-      radioButtonType: 'small',
-    }
-    render(props)
-    const label = screen.getByRole('label')
-    expect(label).toHaveStyle(`background-color: ${COLORS.blue50}`)
-    expect(label).toHaveStyle(
-      `padding: ${SPACING.spacing12} ${SPACING.spacing16}`
-    )
-  })
-
-  it('renders id instead of buttonLabel when id is set', () => {
-    props = {
-      ...props,
-      id: 'mock-radio-button-id',
-    }
-    render(props)
-    const getById = queryByAttribute.bind(null, 'id')
-    const idRadioButton = getById(
-      render(props).container,
-      'mock-radio-button-id'
-    )
-    expect(idRadioButton).toBeInTheDocument()
-    const buttonLabelIdRadioButton = getById(
-      render(props).container,
-      //  @ts-expect-error(ja, 8/23/24): buttonLabel is a string type
-      props.buttonLabel
-    )
-    expect(buttonLabelIdRadioButton).not.toBeInTheDocument()
-  })
-
-  it('renders subtext if supplied', () => {
-    props = { ...props, buttonSubLabel: { label: 'test label' } }
-
-    render(props)
-  })
-
-  it('onClick is called when ariaDisabled is true', () => {
-    props = {
-      ...props,
-      ariaDisabled: true,
-      onClick: vi.fn(),
-    }
-    render(props)
-    const label = screen.getByRole('label')
-    label.click()
-    expect(props.onClick).toHaveBeenCalled()
-  })
-})

package/src/atoms/buttons/__tests__/SecondaryButton.test.tsx

@@ -1,56 +0,0 @@
-import { screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it } from 'vitest'
-
-import '@testing-library/jest-dom/vitest'
-
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { renderWithProviders } from '../../../testing/utils'
-import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
-import { SecondaryButton } from '../SecondaryButton'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof SecondaryButton>) => {
-  return renderWithProviders(<SecondaryButton {...props} />)[0]
-}
-
-describe('SecondaryButton', () => {
-  let props: ComponentProps<typeof SecondaryButton>
-
-  beforeEach(() => {
-    props = {
-      children: 'secondary button',
-    }
-  })
-
-  it('renders primary button with text', () => {
-    render(props)
-    const button = screen.getByText('secondary button')
-    expect(button).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(button).toHaveStyle(
-      `padding: ${SPACING.spacing8} ${SPACING.spacing16}`
-    )
-    expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeH3}`)
-    expect(button).toHaveStyle(`font-weight: ${TYPOGRAPHY.fontWeightSemiBold}`)
-    expect(button).toHaveStyle(`line-height: ${TYPOGRAPHY.lineHeight20}`)
-    expect(button).toHaveStyle(`border-radius: ${BORDERS.borderRadius8}`)
-    expect(button).toHaveStyle(
-      `text-transform: ${TYPOGRAPHY.textTransformNone}`
-    )
-    expect(button).toHaveStyle(`color: ${COLORS.blue50}`)
-  })
-
-  it('renders secondary button with text and disabled', () => {
-    props.disabled = true
-    render(props)
-    const button = screen.getByText('secondary button')
-    expect(button).toBeDisabled()
-  })
-
-  it('renders secondary button with text and different background color', () => {
-    props.color = COLORS.red50
-    render(props)
-    const button = screen.getByText('secondary button')
-    expect(button).toHaveStyle(`color: ${COLORS.red50}`)
-  })
-})

package/src/atoms/buttons/buttons.stories.tsx

@@ -1,114 +0,0 @@
-import { ICON_DATA_BY_NAME } from '../../icons/icon-data'
-import { Flex, STYLE_PROPS } from '../../primitives'
-import { DIRECTION_ROW } from '../../styles'
-import { SPACING } from '../../ui-style-constants'
-import { AlertPrimaryButton as AlertPrimaryButtonComponent } from './AlertPrimaryButton'
-import { AltPrimaryButton as AltPrimaryButtonComponent } from './AltPrimaryButton'
-import { BasicButton as BasicButtonComponent } from './BasicButton'
-import { PrimaryButton as PrimaryButtonComponent } from './PrimaryButton'
-import { SecondaryButton as SecondaryButtonComponent } from './SecondaryButton'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta = {
-  title: 'Helix/Atoms/Buttons',
-  argTypes: {
-    ...Object.fromEntries(
-      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
-        prop,
-        { table: { disable: true } },
-      ])
-    ),
-    children: {
-      control: {
-        type: 'text',
-      },
-    },
-    'aria-disabled': {
-      control: {
-        type: 'boolean',
-      },
-    },
-    isDangerous: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-}
-
-export default meta
-
-export const PrimaryButton: StoryObj<typeof PrimaryButtonComponent> = {
-  args: {
-    children: 'primary button',
-  },
-  render: args => (
-    <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing16}>
-      <PrimaryButtonComponent {...args} />
-    </Flex>
-  ),
-}
-
-export const SecondaryButton: StoryObj<typeof SecondaryButtonComponent> = {
-  args: {
-    children: 'secondary button',
-  },
-  render: args => (
-    <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing16}>
-      <SecondaryButtonComponent {...args} />
-    </Flex>
-  ),
-}
-
-export const AlertPrimaryButton: StoryObj<
-  typeof AlertPrimaryButtonComponent
-> = {
-  args: {
-    children: 'alert tertiary button',
-  },
-  render: args => (
-    <Flex>
-      <AlertPrimaryButtonComponent {...args} />
-    </Flex>
-  ),
-}
-
-export const AltPrimaryButton: StoryObj<typeof AltPrimaryButtonComponent> = {
-  args: {
-    children: 'alt primary button',
-  },
-  render: args => (
-    <Flex>
-      <AltPrimaryButtonComponent {...args} />
-    </Flex>
-  ),
-}
-
-export const BasicButton: StoryObj<typeof BasicButtonComponent> = {
-  args: {
-    children: 'basic button',
-  },
-  argTypes: {
-    underLine: {
-      control: {
-        type: 'boolean',
-      },
-      description:
-        'Toggles the underline style for the button text (BasicButton only).',
-    },
-    iconName: {
-      options: Object.keys(ICON_DATA_BY_NAME),
-      control: {
-        type: 'select',
-      },
-      description:
-        'Optional icon to display alongside the button text (BasicButton only).',
-    },
-  },
-  render: args => (
-    <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing16}>
-      <BasicButtonComponent {...args} />
-    </Flex>
-  ),
-}

package/src/atoms/buttons/index.ts

@@ -1,8 +0,0 @@
-export * from './AlertPrimaryButton'
-export * from './BasicButton'
-export * from './EmptySelectorButton'
-export * from './LargeButton'
-export * from './PrimaryButton'
-export * from './RadioButton'
-export * from './SecondaryButton'
-export * from './TertiaryButton'

package/src/atoms/index.ts

@@ -1,24 +0,0 @@
-export * from './AnimationVideo'
-export * from './buttons'
-export * from './Checkbox'
-export * from './CheckboxField'
-export * from './Chip'
-export * from './Divider'
-export * from './InlineNotification'
-export * from './InputField'
-export * from './ListButton'
-export * from './ListItem'
-export * from './ListItem/ListItemChildren//ListItemDescriptor'
-export * from './ListTable'
-export * from './MenuList'
-export * from './MenuList/MenuItem'
-export * from './MenuList/OverflowBtn'
-export * from './Snackbar'
-export * from './StepMeter'
-export * from './StepMeter'
-export * from './StyledText'
-export * from './SubListTable'
-export * from './Tag'
-export * from './Toast'
-export * from './ToggleGroup'
-export * from './Tooltip'

package/src/barrel.ts

@@ -1,10 +0,0 @@
-// TODO(BC, 2024-01-04): This is intentionally a subset of the exports from
-// index.ts.  Once the cruft is removed from index.ts, these two files should probably converge
-
-// opentrons components library package
-
-export * from './hardware-sim'
-
-export * from './primitives'
-
-export * from './ui-style-constants'