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

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,78 +0,0 @@
-import { Flex } from '../../primitives'
-import { DIRECTION_ROW } from '../../styles'
-import { SPACING } from '../../ui-style-constants'
-import { AlertPrimaryButton } from './AlertPrimaryButton'
-import { AltPrimaryButton } from './AltPrimaryButton'
-import { PrimaryButton } from './PrimaryButton'
-import { SecondaryButton } from './SecondaryButton'
-
-import type { Meta, Story } from '@storybook/react'
-import type * as React from 'react'
-
-export default {
-  title: 'Helix/Atoms/Buttons',
-} as Meta
-
-const PrimaryButtonTemplate: Story<
-  React.ComponentProps<typeof PrimaryButton>
-> = args => {
-  const { children } = args
-  return (
-    <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing16}>
-      <PrimaryButton>{children}</PrimaryButton>
-    </Flex>
-  )
-}
-
-export const Primary = PrimaryButtonTemplate.bind({})
-Primary.args = {
-  children: 'primary button',
-}
-
-const SecondaryButtonTemplate: Story<
-  React.ComponentProps<typeof SecondaryButton>
-> = args => {
-  const { children } = args
-  return (
-    <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing16}>
-      <SecondaryButton>{children}</SecondaryButton>
-    </Flex>
-  )
-}
-
-export const Secondary = SecondaryButtonTemplate.bind({})
-Secondary.args = {
-  children: 'secondary button',
-}
-
-const AlertPrimaryButtonTemplate: Story<
-  React.ComponentProps<typeof AlertPrimaryButton>
-> = args => {
-  const { children } = args
-  return (
-    <Flex>
-      <AlertPrimaryButton>{children}</AlertPrimaryButton>
-    </Flex>
-  )
-}
-
-export const AlertPrimary = AlertPrimaryButtonTemplate.bind({})
-AlertPrimary.args = {
-  children: 'alert tertiary button',
-}
-
-const AltPrimaryButtonTemplate: Story<
-  React.ComponentProps<typeof AltPrimaryButton>
-> = args => {
-  const { children } = args
-  return (
-    <Flex>
-      <AltPrimaryButton>{children}</AltPrimaryButton>
-    </Flex>
-  )
-}
-
-export const AltPrimary = AltPrimaryButtonTemplate.bind({})
-AltPrimary.args = {
-  children: 'alt primary button',
-}

package/src/atoms/buttons/index.ts

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

package/src/atoms/index.ts

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

package/src/buttons/Button.tsx

@@ -1,95 +0,0 @@
-import cx from 'classnames'
-import omit from 'lodash/omit'
-
-import { Icon } from '../icons'
-import { BUTTON_TYPE_BUTTON } from '../primitives'
-import styles from './buttons.module.css'
-
-import type { ComponentType, MouseEventHandler, ReactNode } from 'react'
-import type { IconName } from '../icons'
-import type { BUTTON_TYPE_RESET, BUTTON_TYPE_SUBMIT } from '../primitives'
-import type { UseHoverTooltipTargetProps } from '../tooltips'
-
-export interface ButtonProps {
-  /** id attribute */
-  id?: string
-  /** click handler */
-  onClick?: MouseEventHandler
-  /** name attribute */
-  name?: string
-  /** title attribute */
-  title?: string
-  /** disabled attribute (setting disabled removes onClick) */
-  disabled?: boolean | null | undefined
-  /** use hover style even when not hovered */
-  hover?: boolean | null | undefined
-  /** optional Icon name */
-  iconName?: IconName
-  /** classes to apply */
-  className?: string
-  /** inverts the default color/background/border of default button style */
-  inverted?: boolean
-  /** contents of the button */
-  children?: ReactNode
-  /** type of button (default "button") */
-  type?:
-    | typeof BUTTON_TYPE_SUBMIT
-    | typeof BUTTON_TYPE_RESET
-    | typeof BUTTON_TYPE_BUTTON
-  /** ID of form that button is for */
-  form?: string
-  /** custom element or component to use instead of `<button>` */
-  Component?: ComponentType<any> | keyof JSX.IntrinsicElements
-  /** handlers for HoverTooltipComponent */
-  hoverTooltipHandlers?: UseHoverTooltipTargetProps | null | undefined
-  /** html tabindex property */
-  tabIndex?: number
-  /** catch all prop for pass-through props */
-  [name: string]: any
-}
-
-// props to strip if using a custom component
-const STRIP_PROPS = [
-  'inverted',
-  'iconName',
-  'children',
-  'Component',
-  'hoverTooltipHandlers',
-]
-
-/**
- * Basic, un-styled button. You probably want to use a styled button
- * instead. All buttons take the same props.
- *
- * If you need access to the ButtonProps type, you can:
- * ```js
- * import {type ButtonProps} from '@opentrons/components'
- * ```
- * @deprecated Use {@link Btn}
- */
-export function Button(props: ButtonProps): JSX.Element {
-  const { id, name, title, disabled, hover, tabIndex, form } = props
-  const className = cx(props.className, { [styles.hover]: hover })
-  const onClick = !disabled ? props.onClick : undefined
-  const Component: any = props.Component ?? 'button'
-  const type = props.type ?? BUTTON_TYPE_BUTTON
-
-  // pass all props if using a custom component
-  const buttonProps = !props.Component
-    ? { id, name, type, form, title, disabled, onClick, className, tabIndex }
-    : {
-        ...omit(props, STRIP_PROPS),
-        className: cx(className, { [styles.disabled]: disabled }),
-        onClick,
-      }
-
-  // TODO(mc, 2019-04-02): hoverTooltipHandlers should probably be named more
-  // generically, and the Button component should probably be configured as a
-  // ref forwarder
-  return (
-    <Component {...props.hoverTooltipHandlers} {...buttonProps}>
-      {props.iconName && <Icon name={props.iconName} className={styles.icon} />}
-      {props.children}
-    </Component>
-  )
-}

package/src/buttons/DeprecatedPrimaryButton.tsx

@@ -1,24 +0,0 @@
-import cx from 'classnames'
-
-import { Button } from './Button'
-import styles from './buttons.module.css'
-
-import type { ButtonProps } from './Button'
-
-/**
- * Primary application button. Fills its container and has a dark
- * background with white text
- *
- * @deprecated Use {@link PrimaryButton}
- */
-export function DeprecatedPrimaryButton(props: ButtonProps): JSX.Element {
-  const className = cx(styles.button_primary, props.className, {
-    [styles.inverted]: props.inverted,
-  })
-
-  return (
-    <Button {...props} className={className}>
-      {props.children}
-    </Button>
-  )
-}

package/src/buttons/FlatButton.tsx

@@ -1,21 +0,0 @@
-import classnames from 'classnames'
-
-import { Button } from './Button'
-import styles from './buttons.module.css'
-
-import type { ButtonProps } from './Button'
-
-/**
- * Flat-styled button with a default width of `9rem` and no background fill
- */
-export function FlatButton(props: ButtonProps): JSX.Element {
-  const className = classnames(styles.button_flat, props.className, {
-    [styles.inverted]: props.inverted,
-  })
-
-  return (
-    <Button {...props} className={className}>
-      {props.children}
-    </Button>
-  )
-}

package/src/buttons/IconButton.tsx

@@ -1,36 +0,0 @@
-import cx from 'classnames'
-
-import { Icon } from '../icons'
-import styles from './buttons.module.css'
-import { FlatButton } from './FlatButton'
-
-import type { IconProps } from '../icons'
-import type { ButtonProps } from './Button'
-
-interface Props extends ButtonProps {
-  name: IconProps['name']
-  spin?: IconProps['spin']
-}
-
-/**
- * FlatButton variant for a button that is a single icon. Takes props of
- * both Button _and_ Icon. Use `name` to specify icon name.
- *
- * @deprecated Use {@link Btn} and {@link Icon}
- */
-export function IconButton(props: Props): JSX.Element {
-  // TODO(mc, 2020-02-04): ButtonProps::name conflicts with IconProps::name
-  // this component will need to be redone so underlying `button` can still
-  // receive an HTML name for a11y
-  const { name, spin, ...buttonProps } = props
-  const iconProps = { name, spin }
-  const className = cx(styles.button_icon, props.className, {
-    [styles.inverted]: props.inverted,
-  })
-
-  return (
-    <FlatButton {...buttonProps} className={className} iconName={undefined}>
-      <Icon {...iconProps} />
-    </FlatButton>
-  )
-}

package/src/buttons/OutlineButton.tsx

@@ -1,24 +0,0 @@
-import cx from 'classnames'
-
-import { Button } from './Button'
-import styles from './buttons.module.css'
-
-import type { ButtonProps } from './Button'
-
-/**
- * Button with no background fill and a dark border.
- * Use inverted prop for buttons on dark backgrounds.
- *
- * @deprecated Use {@link SecondaryBtn}
- */
-export function OutlineButton(props: ButtonProps): JSX.Element {
-  const className = cx(styles.button_outline, props.className, {
-    [styles.inverted]: props.inverted,
-  })
-
-  return (
-    <Button {...props} className={className}>
-      {props.children}
-    </Button>
-  )
-}