@opentrons/components 0.1.6-alpha.16 → 0.1.6-alpha.17

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

@@ -0,0 +1,47 @@
+import type * as React from 'react'
+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 { BORDERS, COLORS } from '../../../helix-design-system'
+import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
+
+import { AlertPrimaryButton } from '../AlertPrimaryButton'
+
+const render = (props: React.ComponentProps<typeof AlertPrimaryButton>) => {
+  return renderWithProviders(<AlertPrimaryButton {...props} />)[0]
+}
+
+describe('AlertPrimaryButton', () => {
+  let props: React.ComponentProps<typeof AlertPrimaryButton>
+
+  beforeEach(() => {
+    props = {
+      children: 'alert primary button',
+    }
+  })
+
+  it('renders alert primary button with text', () => {
+    render(props)
+    const button = screen.getByText('alert primary button')
+    expect(button).toHaveStyle(`background-color: ${COLORS.red50}`)
+    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: 0 0 0')
+  })
+
+  it('renders alert primary button with text and disabled', () => {
+    props.disabled = true
+    render(props)
+    const button = screen.getByText('alert primary button')
+    expect(button).toBeDisabled()
+  })
+})

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

@@ -0,0 +1,57 @@
+import type * as React from 'react'
+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 { BORDERS, COLORS } from '../../../helix-design-system'
+import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
+import { AltPrimaryButton } from '../AltPrimaryButton'
+
+const render = (props: React.ComponentProps<typeof AltPrimaryButton>) => {
+  return renderWithProviders(<AltPrimaryButton {...props} />)[0]
+}
+
+describe('AltPrimaryButton', () => {
+  let props: React.ComponentProps<typeof AltPrimaryButton>
+
+  beforeEach(() => {
+    props = {
+      children: 'alt primary button',
+    }
+  })
+
+  it('renders alt primary button with text', () => {
+    render(props)
+    const button = screen.getByText('alt primary button')
+    expect(button).toHaveStyle(`background-color: ${COLORS.grey30}`)
+    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.black90}`)
+  })
+
+  it('renders alt primary button with text and disabled', () => {
+    props.disabled = true
+    render(props)
+    const button = screen.getByText('alt primary button')
+    expect(button).toBeDisabled()
+    expect(button).toHaveStyle(`background-color: ${COLORS.grey30}`)
+    expect(button).toHaveStyle(`color: ${COLORS.grey40}`)
+  })
+
+  // (kk: 09/23/2024) hover test needs jsdom update so this will be activated later
+  //   it('applies the correct states to the button - hover', () => {
+  //     render(props)
+  //     const button = screen.getByText('alt primary button')
+  //     fireEvent.mouseOver(button)
+  //     expect(button).toHaveStyle(`background-color: ${COLORS.grey35}`)
+  //   })
+})

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

@@ -0,0 +1,42 @@
+import type * as React from 'react'
+import '@testing-library/jest-dom/vitest'
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { renderWithProviders } from '../../../testing/utils'
+import { JUSTIFY_CENTER, JUSTIFY_START } from '../../../styles'
+import { EmptySelectorButton } from '../EmptySelectorButton'
+
+const render = (props: React.ComponentProps<typeof EmptySelectorButton>) => {
+  return renderWithProviders(<EmptySelectorButton {...props} />)[0]
+}
+
+describe('EmptySelectorButton', () => {
+  let props: React.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

@@ -0,0 +1,91 @@
+import type * as React from 'react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import { fireEvent, screen } from '@testing-library/react'
+
+import { renderWithProviders } from '../../../testing/utils'
+import { COLORS } from '../../../helix-design-system'
+import { LargeButton } from '../LargeButton'
+
+const render = (props: React.ComponentProps<typeof LargeButton>) => {
+  return renderWithProviders(<LargeButton {...props} />)[0]
+}
+
+describe('LargeButton', () => {
+  let props: React.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

@@ -0,0 +1,64 @@
+import type * as React from 'react'
+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'
+
+const render = (props: React.ComponentProps<typeof PrimaryButton>) => {
+  return renderWithProviders(<PrimaryButton {...props} />)[0]
+}
+
+describe('PrimaryButton', () => {
+  let props: React.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,98 @@
+import type * as React from 'react'
+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'
+
+const render = (props: React.ComponentProps<typeof RadioButton>) => {
+  return renderWithProviders(<RadioButton {...props} />)[0]
+}
+
+describe('RadioButton', () => {
+  let props: React.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()
+  })
+})

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

@@ -0,0 +1,54 @@
+import type * as React from 'react'
+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'
+
+const render = (props: React.ComponentProps<typeof SecondaryButton>) => {
+  return renderWithProviders(<SecondaryButton {...props} />)[0]
+}
+
+describe('SecondaryButton', () => {
+  let props: React.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: 'Library/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,6 @@
+export * from './AlertPrimaryButton'
+export * from './EmptySelectorButton'
+export * from './LargeButton'
+export * from './PrimaryButton'
+export * from './RadioButton'
+export * from './SecondaryButton'

package/src/atoms/index.ts

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

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 type * as React from 'react'
+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 { 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?: React.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?: React.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?: React.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>
+  )
+}