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

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

@@ -1,80 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import '@testing-library/jest-dom/vitest'
-
-import { screen } from '@testing-library/react'
-
-import { Tooltip } from '..'
-import { COLORS } from '../../../helix-design-system'
-import { POSITION_ABSOLUTE } from '../../../styles'
-import { renderWithProviders } from '../../../testing/utils'
-import { TOOLTIP_TOP } from '../../../tooltips'
-import { SPACING } from '../../../ui-style-constants'
-
-import type { ComponentProps, ReactNode } from 'react'
-
-const render = (props: ComponentProps<typeof Tooltip>) => {
-  return renderWithProviders(<Tooltip {...props} />)[0]
-}
-
-const placement = TOOLTIP_TOP
-const id = 'Tooltip_123'
-const tooltipRef = vi.fn()
-const tooltipStyle = {
-  position: POSITION_ABSOLUTE,
-  left: SPACING.spacing4,
-} as const
-const arrowRef = vi.fn()
-const arrowStyle = {
-  position: POSITION_ABSOLUTE,
-  left: SPACING.spacing8,
-} as const
-
-const MockTooltipProps = {
-  id: id,
-  placement: placement,
-  arrowStyle: arrowStyle,
-  arrowRef: arrowRef,
-  visible: true,
-  ref: tooltipRef,
-  style: tooltipStyle,
-}
-
-describe('Tooltip', () => {
-  let props: ComponentProps<typeof Tooltip>
-
-  beforeEach(() => {
-    props = {
-      children: 'mock children' as ReactNode,
-      tooltipProps: MockTooltipProps,
-      key: 'mock key',
-    }
-  })
-
-  it('renders correct children when the tooltip is visible', () => {
-    render(props)
-    const tooltip = screen.getByText('mock children')
-    expect(tooltip).toBeInTheDocument()
-    expect(tooltip).toHaveStyle('position: absolute')
-    expect(tooltip).toHaveStyle('left: 0.25rem')
-    expect(tooltip).toHaveStyle(`background: ${COLORS.black90}`)
-    expect(tooltip).toHaveStyle(`color: ${COLORS.white}`)
-    expect(tooltip).toHaveStyle('max-width: 8.75rem')
-    expect(tooltip).toHaveStyle('font-size: 0.625rem')
-    expect(tooltip).toHaveAttribute('role', 'tooltip')
-  })
-
-  it('renders correct children when the tooltip is visible with a specific with', () => {
-    props = { ...props, width: '3rem' }
-    render(props)
-    const tooltip = screen.getByText('mock children')
-    expect(tooltip).toHaveStyle('width: 3rem')
-  })
-
-  it('does not render children when the tooltip is invisible', () => {
-    MockTooltipProps.visible = false
-    render(props)
-    const tooltip = screen.queryByText('mock children')
-    expect(tooltip).not.toBeInTheDocument()
-  })
-})

package/src/atoms/Tooltip/index.tsx

@@ -1,37 +0,0 @@
-import { COLORS } from '../../helix-design-system'
-import { FLEX_MAX_CONTENT } from '../../styles'
-import { LegacyTooltip } from '../../tooltips'
-import { TYPOGRAPHY } from '../../ui-style-constants'
-
-import type { ReactNode } from 'react'
-import type { StyleProps } from '../../primitives'
-import type { UseTooltipResultTooltipProps } from '../../tooltips'
-
-export interface TooltipProps extends StyleProps {
-  children: ReactNode
-  tooltipProps: UseTooltipResultTooltipProps & { visible: boolean }
-  key?: string
-}
-
-export function Tooltip(props: TooltipProps): JSX.Element {
-  const {
-    children,
-    tooltipProps,
-    width = FLEX_MAX_CONTENT,
-    maxWidth = '8.75rem',
-    ...styleProps
-  } = props
-
-  return (
-    <LegacyTooltip
-      {...tooltipProps}
-      backgroundColor={COLORS.black90}
-      fontSize={TYPOGRAPHY.fontSizeCaption}
-      width={width}
-      maxWidth={maxWidth}
-      {...styleProps}
-    >
-      {children}
-    </LegacyTooltip>
-  )
-}

package/src/atoms/buttons/AlertPrimaryButton.tsx

@@ -1,27 +0,0 @@
-import styled from 'styled-components'
-
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { NewAlertPrimaryBtn, styleProps } from '../../primitives'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-
-export const AlertPrimaryButton = styled(NewAlertPrimaryBtn)`
-  background-color: ${COLORS.red50};
-  border-radius: ${BORDERS.borderRadius8};
-  padding-left: ${SPACING.spacing16};
-  padding-right: ${SPACING.spacing16};
-  text-transform: ${TYPOGRAPHY.textTransformNone};
-  box-shadow: 0 0 0;
-  ${TYPOGRAPHY.pSemiBold}
-
-  ${styleProps}
-
-  &:hover {
-    box-shadow: 0 0 0;
-    background-color: ${COLORS.red55};
-  }
-
-  &:disabled {
-    background-color: ${COLORS.grey30};
-    color: ${COLORS.grey40};
-  }
-`

package/src/atoms/buttons/AltPrimaryButton.tsx

@@ -1,31 +0,0 @@
-import styled from 'styled-components'
-
-import { PrimaryButton } from '../..'
-import { COLORS } from '../../helix-design-system'
-import { styleProps } from '../../primitives'
-
-export const AltPrimaryButton = styled(PrimaryButton)`
-  background-color: ${COLORS.grey30};
-  color: ${COLORS.black90};
-
-  ${styleProps}
-
-  &:focus {
-    background-color: ${COLORS.grey35};
-    box-shadow: none;
-  }
-
-  &:active {
-    background-color: ${COLORS.grey40};
-  }
-
-  &:hover {
-    box-shadow: 0 0 0;
-    background-color: ${COLORS.grey35};
-  }
-
-  &:disabled {
-    background-color: ${COLORS.grey30};
-    color: ${COLORS.grey40};
-  }
-`

package/src/atoms/buttons/BasicButton.tsx

@@ -1,100 +0,0 @@
-import styled from 'styled-components'
-
-import { COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { Flex } from '../../primitives'
-import { ALIGN_CENTER } from '../../styles'
-import { CURSOR_NOT_ALLOWED, CURSOR_POINTER } from '../../styles/cursor'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { StyledText } from '../StyledText/StyledText'
-
-import type { MouseEvent } from 'react'
-import type { IconName } from '../../icons'
-
-interface BasicButtonProps {
-  children: string // Content of basic button
-  onClick: (event: MouseEvent<HTMLButtonElement>) => void // Function to handle button click events
-  isDisabled?: boolean // Optional prop to control button aria-disabled
-  underLine?: boolean // Optional prop to control underline styling
-  tabIndex?: number // Optional prop for tab index
-  iconName?: IconName // Optional prop for icon
-}
-
-export function BasicButton({
-  children,
-  onClick,
-  isDisabled = false,
-  underLine = false,
-  tabIndex = 0,
-  iconName,
-  ...props
-}: BasicButtonProps): JSX.Element {
-  const handleButtonClick = (event: MouseEvent<HTMLButtonElement>): void => {
-    if (isDisabled) {
-      event.preventDefault()
-      return
-    }
-    if (onClick != null) {
-      onClick(event)
-    }
-  }
-
-  return (
-    <StyledButton
-      data-testid={`basic_button_${children}`}
-      onClick={handleButtonClick}
-      aria-disabled={isDisabled}
-      underLine={underLine}
-      tabIndex={tabIndex}
-      {...props}
-    >
-      {iconName != null ? (
-        <Flex alignItems={ALIGN_CENTER} gap={SPACING.spacing8}>
-          <Icon
-            name={iconName}
-            size="1.25rem"
-            data-testid={`basic_button_${iconName}`}
-          />
-          <StyledText desktopStyle="bodyDefaultRegular">{children}</StyledText>
-        </Flex>
-      ) : (
-        <StyledText desktopStyle="bodyDefaultRegular">{children}</StyledText>
-      )}
-    </StyledButton>
-  )
-}
-
-const StyledButton = styled.button<{
-  underLine?: boolean
-  'aria-disabled'?: boolean
-}>`
-  background: none;
-  border: none;
-  padding: ${SPACING.spacing4};
-
-  color: ${props => (props['aria-disabled'] ? COLORS.grey40 : COLORS.black90)};
-  cursor: ${props =>
-    props['aria-disabled'] ? CURSOR_NOT_ALLOWED : CURSOR_POINTER};
-
-  text-decoration: ${props =>
-    props.underLine ? TYPOGRAPHY.textDecorationUnderline : 'none'};
-
-  ${props =>
-    !props['aria-disabled']
-      ? `
-        &:hover {
-          color: ${COLORS.blue50};
-        }
-
-        &:focus-visible {
-          color: ${COLORS.blue50};
-          outline: 2px solid ${COLORS.blue50};
-          outline-offset: ${SPACING.spacing4};
-        }
-      `
-      : undefined}
-
-  &[aria-disabled="true"] {
-    outline: none;
-  }
-`

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

@@ -1,37 +0,0 @@
-import { Box } from '../../primitives'
-import { EmptySelectorButton as EmptySelectorButtonComponent } from './EmptySelectorButton'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof EmptySelectorButtonComponent> = {
-  title: 'Helix/Atoms/Buttons/EmptySelectorButton',
-  component: EmptySelectorButtonComponent,
-  argTypes: {
-    textAlignment: {
-      controls: {
-        type: 'select',
-        options: ['left', 'middle'],
-      },
-      defaultValue: 'left',
-    },
-  },
-  decorators: [
-    (Story, context) => (
-      <Box width="39.25rem" height="8.5rem">
-        <Story id="content" />
-      </Box>
-    ),
-  ],
-}
-export default meta
-
-type Story = StoryObj<typeof EmptySelectorButtonComponent>
-
-export const EmptySelectorButton: Story = {
-  args: {
-    text: 'mock text',
-    iconName: 'plus',
-    textAlignment: 'left',
-    onClick: () => {},
-  },
-}

package/src/atoms/buttons/EmptySelectorButton.tsx

@@ -1,89 +0,0 @@
-import styled from 'styled-components'
-
-import { BORDERS, COLORS } from '../../helix-design-system'
-import {
-  ALIGN_CENTER,
-  CURSOR_DEFAULT,
-  CURSOR_POINTER,
-  Icon,
-  JUSTIFY_CENTER,
-  JUSTIFY_START,
-  SPACING,
-  StyledText,
-} from '../../index'
-import { Flex } from '../../primitives'
-
-import type { IconName } from '../../index'
-
-interface EmptySelectorButtonProps {
-  onClick: () => void
-  text: string
-  textAlignment: 'left' | 'middle'
-  iconName?: IconName
-  disabled?: boolean
-}
-
-//  used for helix and Opentrons Ai
-export function EmptySelectorButton(
-  props: EmptySelectorButtonProps
-): JSX.Element {
-  const { onClick, text, iconName, textAlignment, disabled = false } = props
-
-  return (
-    <StyledButton
-      onClick={onClick}
-      disabled={disabled}
-      data-testid="EmptySelectorButton_click"
-    >
-      <Flex
-        gridGap={SPACING.spacing4}
-        padding={SPACING.spacing12}
-        color={disabled ? COLORS.grey40 : COLORS.black90}
-        border={`2px dashed ${disabled ? COLORS.grey40 : COLORS.blue50}`}
-        borderRadius={BORDERS.borderRadius8}
-        width="100%"
-        height="100%"
-        alignItems={ALIGN_CENTER}
-        data-testid="EmptySelectorButton_container"
-        justifyContent={
-          textAlignment === 'middle' ? JUSTIFY_CENTER : JUSTIFY_START
-        }
-      >
-        {iconName != null ? (
-          <Icon
-            name={iconName}
-            size="1.25rem"
-            data-testid={`EmptySelectorButton_${iconName}`}
-          />
-        ) : null}
-        <StyledText desktopStyle="bodyDefaultSemiBold">{text}</StyledText>
-      </Flex>
-    </StyledButton>
-  )
-}
-
-interface ButtonProps {
-  disabled: boolean
-}
-
-const StyledButton = styled.button<ButtonProps>`
-  border: none;
-  width: 100%;
-  height: 100%;
-  cursor: ${CURSOR_POINTER};
-  background-color: ${COLORS.blue30};
-  border-radius: ${BORDERS.borderRadius8};
-
-  &:focus-visible {
-    outline: 2px solid ${COLORS.white};
-    box-shadow: 0 0 0 4px ${COLORS.blue50};
-    border-radius: ${BORDERS.borderRadius8};
-  }
-  &:hover {
-    background-color: ${COLORS.blue35};
-  }
-  &:disabled {
-    background-color: ${COLORS.grey20};
-    cursor: ${CURSOR_DEFAULT};
-  }
-`

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

@@ -1,106 +0,0 @@
-import { COLORS } from '../../helix-design-system'
-import { ICON_DATA_BY_NAME } from '../../icons'
-import { Box, STYLE_PROPS } from '../../primitives'
-import { SPACING } from '../../ui-style-constants'
-import { LargeButton } from './LargeButton'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof LargeButton> = {
-  title: 'Helix/Atoms/Buttons/LargeButton',
-  component: LargeButton,
-  argTypes: {
-    // Disable all StyleProps
-    ...Object.fromEntries(
-      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
-        prop,
-        { table: { disable: true } },
-      ])
-    ),
-    onClick: { action: 'clicked' },
-    iconName: {
-      control: {
-        type: 'select',
-      },
-      options: Object.keys(ICON_DATA_BY_NAME),
-    },
-  },
-  parameters: {
-    viewport: {
-      defaultViewport: 'Touchscreen',
-    },
-    pseudo: {
-      rootSelector: '#content',
-    },
-  },
-  decorators: [
-    (Story, context) => (
-      <Box
-        width={'fit-content'}
-        padding={SPACING.spacing32}
-        backgroundColor={
-          ['alertStroke', 'alertAlt'].includes(context.args.buttonType)
-            ? COLORS.black90
-            : COLORS.white
-        }
-      >
-        <Story id={'content'} />
-      </Box>
-    ),
-  ],
-}
-
-export default meta
-
-type Story = StoryObj<typeof LargeButton>
-
-export const Primary: Story = {
-  args: {
-    buttonText: 'Button text',
-    disabled: false,
-    iconName: 'play-round-corners',
-  },
-}
-export const Secondary: Story = {
-  args: {
-    buttonText: 'Button text',
-    buttonType: 'secondary',
-    disabled: false,
-    iconName: 'build',
-  },
-}
-export const Alert: Story = {
-  args: {
-    buttonText: 'Button text',
-    buttonType: 'alert',
-    disabled: false,
-    iconName: 'reset',
-  },
-}
-
-export const AlertStroke: Story = {
-  args: {
-    buttonType: 'alertStroke',
-    buttonText: 'Button text',
-    disabled: false,
-    iconName: 'ot-alert',
-  },
-}
-
-export const AlertAlt: Story = {
-  args: {
-    buttonType: 'alertAlt',
-    buttonText: 'Button text',
-    disabled: false,
-    iconName: 'ot-check',
-  },
-}
-
-export const Stroke: Story = {
-  args: {
-    buttonType: 'stroke',
-    buttonText: 'Button text',
-    disabled: false,
-    iconName: 'ot-check',
-  },
-}