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

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

@@ -0,0 +1,65 @@
+import { describe, it, beforeEach, expect } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+import { renderWithProviders } from '../../../testing/utils'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+import { TYPOGRAPHY, SPACING } 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.fontSizeP}`)
+    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.blue50}`)
+  })
+
+  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

@@ -0,0 +1,105 @@
+import '@testing-library/jest-dom/vitest'
+import { screen, queryByAttribute } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { renderWithProviders } from '../../../testing/utils'
+import { COLORS } from '../../../helix-design-system'
+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)
+  })
+})

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

@@ -0,0 +1,55 @@
+import { describe, it, beforeEach, expect } from 'vitest'
+import { screen } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+import { renderWithProviders } from '../../../testing/utils'
+import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+
+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.fontSizeP}`)
+    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

@@ -0,0 +1,78 @@
+import type * as React from 'react'
+import { SPACING } from '../../ui-style-constants'
+import { DIRECTION_ROW } from '../../styles'
+import { Flex } from '../../primitives'
+import { PrimaryButton } from './PrimaryButton'
+import { SecondaryButton } from './SecondaryButton'
+import { AlertPrimaryButton } from './AlertPrimaryButton'
+import { AltPrimaryButton } from './AltPrimaryButton'
+
+import type { Story, Meta } from '@storybook/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

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

@@ -0,0 +1,22 @@
+export * from './buttons'
+export * from './Checkbox'
+export * from './CheckboxField'
+export * from './Chip'
+export * from './Divider'
+export * from './InputField'
+export * from './ListButton'
+export * from './ListItem'
+export * from './ListItem/ListItemChildren//ListItemDescriptor'
+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 './Tag'
+export * from './Toast'
+export * from './ToggleGroup'
+export * from './Tooltip'
+export * from './ListTable'
+export * from './SubListTable'

package/src/barrel.ts

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

@@ -0,0 +1,96 @@
+import cx from 'classnames'
+import omit from 'lodash/omit'
+
+import { Icon } from '../icons'
+import styles from './buttons.module.css'
+
+import { BUTTON_TYPE_BUTTON } from '../primitives'
+
+import type { ComponentType, MouseEventHandler, ReactNode } from 'react'
+import type { BUTTON_TYPE_SUBMIT, BUTTON_TYPE_RESET } from '../primitives'
+import type { IconName } from '../icons'
+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

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

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

@@ -0,0 +1,37 @@
+import cx from 'classnames'
+
+import { Icon } from '../icons'
+import { FlatButton } from './FlatButton'
+
+import styles from './buttons.module.css'
+
+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

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