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

package/src/atoms/buttons/RadioButton.tsx

@@ -1,327 +0,0 @@
-import styled, { css } from 'styled-components'
-
-import {
-  ALIGN_CENTER,
-  ALIGN_START,
-  CURSOR_DEFAULT,
-  CURSOR_NOT_ALLOWED,
-  CURSOR_POINTER,
-  DIRECTION_COLUMN,
-  DIRECTION_ROW,
-  Icon,
-  JUSTIFY_SPACE_BETWEEN,
-  StyledText,
-  Tag,
-} from '../..'
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Flex } from '../../primitives'
-import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
-
-import type { FlattenSimpleInterpolation } from 'styled-components'
-import type { ChangeEventHandler, MouseEventHandler, ReactNode } from 'react'
-import type { IconName } from '../../icons'
-import type { StyleProps } from '../../primitives'
-
-export interface RadioButtonSubLabel {
-  /* Optional subtext */
-  label: ReactNode
-  /* The alignment relative to the primary label. Defaults to horizontal if unspecified. */
-  align?: 'horizontal' | 'vertical'
-}
-
-interface RadioButtonProps extends StyleProps {
-  /** Radio button label */
-  buttonLabel: string | ReactNode
-  /** Radio button value */
-  buttonValue: string | number
-  /** Radio button onChange handler */
-  onChange: ChangeEventHandler<HTMLInputElement>
-  /** Radio button disabled state. This will be replaced with aria-disabled in the future. */
-  disabled?: boolean
-  /** Radio button icon name */
-  iconName?: IconName
-  /** Radio button tag text */
-  tagText?: string
-  /** Radio button isSelected state */
-  isSelected?: boolean
-  /** Radio button largeDesktopBorderRadius state */
-  largeDesktopBorderRadius?: boolean
-  /** Radio button radioButtonType state */
-  radioButtonType?: 'large' | 'small'
-  /**
-   *  id is used for the special case in ODD where the screen has two radio buttons.
-   *  The screen that uses this prop is CSV runtime parameter CSV file selection screen.
-   *  Basically, this would not be used in desktop app/web app.
-   */
-  id?: string
-  /** Radio button maxLines for label */
-  maxLines?: number
-  /** used for mouseEnter and mouseLeave */
-  setNoHover?: () => void
-  setHovered?: () => void
-  // TODO wire up the error state for the radio button
-  error?: string | null
-  /** Radio button buttonSubLabel */
-  buttonSubLabel?: RadioButtonSubLabel
-  /** testid is used for testing */
-  testid?: string
-  /**
-   * with the changes in UX and accessibility support, 'disabled' will eventually be replaced with 'aria-disabled' in the future.
-   */
-  ariaDisabled?: boolean
-  /**
-   *  onClick is needed for RadioButton since onChange requires actual selected value change.
-   *  For this case, selected value change shouldn't be happened.
-   */
-  onClick?: MouseEventHandler
-}
-
-// used for ODD and helix
-export function RadioButton(props: RadioButtonProps): JSX.Element {
-  const {
-    buttonLabel,
-    buttonSubLabel,
-    buttonValue,
-    onChange,
-    disabled = false,
-    iconName,
-    tagText,
-    isSelected = false,
-    largeDesktopBorderRadius = false,
-    radioButtonType = 'large',
-    id = typeof buttonLabel === 'string'
-      ? buttonLabel
-      : `RadioButtonId_${buttonValue}`,
-    maxLines = 1,
-    setHovered,
-    setNoHover,
-    testid,
-    ariaDisabled = false,
-    onClick,
-  } = props
-  const isLarge = radioButtonType === 'large'
-
-  const getButtonStyle = (
-    isSelected: boolean,
-    disabled: boolean
-  ): FlattenSimpleInterpolation => {
-    if (disabled) return DISABLED_BUTTON_STYLE
-    if (isSelected) return SELECTED_BUTTON_STYLE(disabled)
-    return AVAILABLE_BUTTON_STYLE(disabled)
-  }
-
-  return (
-    <RadioButtonWrapper>
-      <SettingButton
-        checked={isSelected}
-        disabled={ariaDisabled ? false : disabled}
-        id={id}
-        onChange={ariaDisabled ? () => {} : onChange}
-        type="radio"
-        value={buttonValue}
-        onClick={onClick}
-      />
-      <SettingButtonLabel
-        data-testid={testid}
-        tabIndex={0}
-        isLarge={isLarge}
-        maxLines={maxLines}
-        largeDesktopBorderRadius={largeDesktopBorderRadius}
-        disabled={disabled}
-        isSelected={isSelected}
-        role="label"
-        htmlFor={id}
-        onMouseEnter={setHovered}
-        onMouseLeave={setNoHover}
-        css={getButtonStyle(isSelected, disabled)}
-        aria-selected={isSelected}
-        aria-disabled={ariaDisabled}
-      >
-        <Flex
-          flexDirection={DIRECTION_ROW}
-          gridGap={SPACING.spacing12}
-          alignItems={ALIGN_CENTER}
-        >
-          {iconName != null ? (
-            <Icon
-              name={iconName}
-              size="1rem"
-              data-testid={`icon_${iconName}`}
-            />
-          ) : null}
-          {tagText != null ? (
-            <Tag type={isSelected ? 'onColor' : 'default'} text={tagText} />
-          ) : null}
-          <Flex css={copyContainerStyle(buttonSubLabel)}>
-            {typeof buttonLabel === 'string' ? (
-              <StyledText
-                oddStyle={isLarge ? 'level4HeaderSemiBold' : 'bodyTextRegular'}
-                desktopStyle={
-                  isLarge ? 'bodyDefaultSemiBold' : 'bodyDefaultRegular'
-                }
-              >
-                {buttonLabel}
-              </StyledText>
-            ) : (
-              buttonLabel
-            )}
-            {buttonSubLabel && (
-              <Flex
-                css={SUBBUTTON_LABEL_STYLE(
-                  disabled,
-                  isSelected,
-                  buttonSubLabel
-                )}
-              >
-                <StyledText
-                  color={isSelected ? COLORS.white : COLORS.grey60}
-                  oddStyle="bodyTextRegular"
-                  desktopStyle="bodyDefaultRegular"
-                >
-                  {buttonSubLabel.label}
-                </StyledText>
-              </Flex>
-            )}
-          </Flex>
-        </Flex>
-      </SettingButtonLabel>
-    </RadioButtonWrapper>
-  )
-}
-
-const copyContainerStyle = (
-  buttonSubLabel: RadioButtonSubLabel | undefined
-): FlattenSimpleInterpolation => css`
-  flex-direction: ${buttonSubLabel?.align === 'vertical'
-    ? DIRECTION_COLUMN
-    : DIRECTION_ROW};
-  justify-content: ${JUSTIFY_SPACE_BETWEEN};
-  align-items: ${buttonSubLabel?.align === 'vertical'
-    ? ALIGN_START
-    : ALIGN_CENTER};
-  width: ${buttonSubLabel != null ? '100%' : ''};
-  word-break: break-word;
-`
-
-const AVAILABLE_BUTTON_STYLE = (
-  disabled: boolean
-): FlattenSimpleInterpolation => css`
-  background: ${COLORS.blue35};
-
-  &:hover,
-  &:active {
-    background-color: ${disabled ? COLORS.grey35 : COLORS.blue40};
-  }
-`
-
-const SELECTED_BUTTON_STYLE = (
-  disabled: boolean
-): FlattenSimpleInterpolation => css`
-  background: ${COLORS.blue50};
-  color: ${COLORS.white};
-
-  &:active {
-    background-color: ${disabled ? COLORS.grey35 : COLORS.blue60};
-  }
-`
-
-//  TODO: the max line to clamp for subtext
-const SUBBUTTON_LABEL_STYLE = (
-  disabled: boolean,
-  isSelected: boolean,
-  buttonSubLabel: RadioButtonSubLabel
-): FlattenSimpleInterpolation => css`
-  color: ${disabled
-    ? COLORS.grey50
-    : isSelected
-    ? COLORS.white
-    : COLORS.grey60};
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: ${buttonSubLabel?.align === 'vertical' ? 2 : 1};
-  overflow: hidden;
-  word-break: break-all;
-  text-overflow: ellipsis;
-`
-
-const DISABLED_BUTTON_STYLE = css`
-  background-color: ${COLORS.grey35};
-  color: ${COLORS.grey50};
-
-  &:hover,
-  &:active {
-    background-color: ${COLORS.grey35};
-  }
-
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    cursor: ${CURSOR_NOT_ALLOWED};
-  }
-`
-
-interface RadioButtonWrapperProps {
-  width?: string
-}
-
-const RadioButtonWrapper = styled(Flex)<RadioButtonWrapperProps>`
-  width: ${({ width }) => width ?? 'auto'};
-
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    width: 100%;
-  }
-`
-
-const SettingButton = styled.input`
-  display: none;
-`
-
-interface SettingsButtonLabelProps {
-  isSelected: boolean
-  disabled: boolean
-  largeDesktopBorderRadius: boolean
-  isLarge: boolean
-  maxLines?: number | null
-}
-
-const SettingButtonLabel = styled.label<SettingsButtonLabelProps>`
-  border-radius: ${({ largeDesktopBorderRadius }) =>
-    !largeDesktopBorderRadius ? BORDERS.borderRadius40 : BORDERS.borderRadius8};
-  cursor: ${CURSOR_POINTER};
-  padding: ${SPACING.spacing12} ${SPACING.spacing16};
-  width: 100%;
-
-  ${({ disabled }) => disabled && DISABLED_BUTTON_STYLE}
-
-  /* note this is to disable the black outline that is the browser’s default focus ring  */
-  &:focus {
-    outline: none;
-  }
-  &:focus-visible:not([aria-selected='true']) {
-    /* outline: 2px solid ${COLORS.blue55}; */
-    color: ${COLORS.blue55};
-    outline: 2px solid ${COLORS.blue55};
-    outline-offset: 0.12rem;
-  }
-
-  &[aria-disabled='true'] {
-    background-color: ${COLORS.grey35};
-    color: ${COLORS.grey50};
-
-    &:hover,
-    &:active {
-      background-color: ${COLORS.grey35};
-    }
-  }
-
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    cursor: ${CURSOR_DEFAULT};
-    padding: ${({ largeDesktopBorderRadius }) =>
-      largeDesktopBorderRadius ? SPACING.spacing24 : SPACING.spacing20};
-    border-radius: ${BORDERS.borderRadius16};
-    display: ${({ maxLines }) => (maxLines != null ? '-webkit-box' : 'none')};
-    -webkit-line-clamp: ${({ maxLines }) => maxLines ?? 'none'};
-    -webkit-box-orient: ${({ maxLines }) =>
-      maxLines != null ? 'vertical' : 'none'};
-    word-wrap: break-word;
-    word-break: break-all;
-  }
-`

package/src/atoms/buttons/SecondaryButton.tsx

@@ -1,97 +0,0 @@
-import styled from 'styled-components'
-
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { CURSOR_DEFAULT, CURSOR_POINTER } from '../../index'
-import { isntStyleProp, styleProps } from '../../primitives'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-
-import type { StyleProps } from '../../index'
-
-interface SecondaryButtonProps extends StyleProps {
-  /** button action is dangerous and may have non-reversible side-effects for user */
-  isDangerous?: boolean
-  'aria-disabled'?: boolean
-}
-export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
-  shouldForwardProp: p => isntStyleProp(p) && p !== 'isDangerous',
-})<SecondaryButtonProps>`
-  appearance: none;
-  cursor: ${props =>
-    props['aria-disabled'] ? CURSOR_DEFAULT : CURSOR_POINTER};
-  color: ${props => {
-    if (props['aria-disabled']) return COLORS.grey40
-    return props.isDangerous ? COLORS.red50 : COLORS.blue50
-  }};
-  border: ${BORDERS.lineBorder};
-  border-color: ${props => {
-    if (props['aria-disabled']) return COLORS.grey30
-    return props.isDangerous ? COLORS.red50 : 'initial'
-  }};
-  border-radius: ${BORDERS.borderRadius8};
-  padding: ${SPACING.spacing8} ${SPACING.spacing16};
-  text-transform: ${TYPOGRAPHY.textTransformNone};
-  background-color: ${COLORS.transparent};
-  font-size: ${TYPOGRAPHY.fontSizeH3};
-  font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
-  line-height: ${TYPOGRAPHY.lineHeight20};
-
-  &:hover,
-  &:focus {
-    box-shadow: ${props =>
-      props['aria-disabled'] ? 'none' : '0px 3px 6px 0px rgba(0, 0, 0, 0.23)'};
-  }
-
-  &:hover {
-    color: ${props => {
-      if (props['aria-disabled']) return COLORS.grey40
-      return props.isDangerous ? COLORS.red55 : COLORS.blue55
-    }};
-    border-color: ${props => {
-      if (props['aria-disabled']) return COLORS.grey30
-      return props.isDangerous ? COLORS.red50 : COLORS.blue55
-    }};
-    box-shadow: ${props => (props['aria-disabled'] ? 'none' : '0 0 0')};
-  }
-
-  &:focus-visible {
-    color: ${props => {
-      if (props['aria-disabled']) return COLORS.grey40
-      return props.isDangerous ? COLORS.red60 : COLORS.blue60
-    }};
-    border-color: ${props => {
-      if (props['aria-disabled']) return COLORS.grey30
-      return props.isDangerous ? COLORS.red50 : COLORS.blue60
-    }};
-    box-shadow: ${props =>
-      props['aria-disabled']
-        ? 'none'
-        : `outline: 2px solid ${COLORS.blue50};
-    outline-offset: 0.25rem;`};
-  }
-
-  &:active {
-    box-shadow: none;
-    color: ${props => {
-      if (props['aria-disabled']) return COLORS.grey40
-      return props.isDangerous ? COLORS.red60 : COLORS.blue60
-    }};
-    border-color: ${props => {
-      if (props['aria-disabled']) return COLORS.grey30
-      return props.isDangerous ? COLORS.red60 : COLORS.blue60
-    }};
-  }
-
-  &:disabled,
-  &.disabled {
-    box-shadow: none;
-    border-color: ${COLORS.grey30};
-    color: ${COLORS.grey40};
-    cursor: ${CURSOR_DEFAULT};
-  }
-
-  ${styleProps}
-`
-
-SecondaryButton.defaultProps = {
-  'aria-disabled': false,
-}

package/src/atoms/buttons/TertiaryButton.tsx

@@ -1,89 +0,0 @@
-import styled, { css } from 'styled-components'
-
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Btn } from '../../primitives'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-
-const BASE_STYLES = css`
-  border-radius: ${BORDERS.borderRadiusFull};
-  box-shadow: none;
-  overflow: hidden;
-  padding: ${SPACING.spacing8} ${SPACING.spacing16};
-  text-transform: ${TYPOGRAPHY.textTransformNone};
-`
-
-const STYLE_MAP = {
-  primary: css`
-    background-color: ${COLORS.blue50};
-    color: ${COLORS.white};
-
-    &:hover {
-      background-color: ${COLORS.blue55};
-    }
-
-    &:active {
-      background-color: ${COLORS.blue60};
-    }
-
-    &:disabled {
-      background-color: ${COLORS.grey30};
-      color: ${COLORS.grey40};
-    }
-  `,
-  secondary: css`
-    background-color: ${COLORS.white};
-    color: ${COLORS.blue50};
-    border: 1px solid ${COLORS.blue50};
-
-    &:hover {
-      background-color: ${COLORS.white};
-      color: ${COLORS.blue50}${COLORS.opacity60HexCode};
-      border: 1px solid ${COLORS.blue50}${COLORS.opacity60HexCode};
-    }
-
-    &:active {
-      background-color: ${COLORS.white};
-      color: ${COLORS.blue50};
-      border: 1px solid ${COLORS.blue50};
-    }
-
-    &:focus-visible {
-      background-color: ${COLORS.white};
-      color: ${COLORS.blue50};
-      border: 1px solid ${COLORS.blue50};
-    }
-
-    &:disabled {
-      background-color: ${COLORS.white};
-      color: ${COLORS.grey40};
-      border: 1px solid ${COLORS.grey30};
-    }
-  `,
-  white: css`
-    background-color: ${COLORS.transparent};
-    color: ${COLORS.grey60};
-
-    &:hover {
-      background-color: ${COLORS.grey30};
-    }
-
-    &:active {
-      background-color: ${COLORS.grey35};
-    }
-
-    &:focus-visible {
-      background-color: ${COLORS.grey30};
-    }
-
-    &:disabled {
-      color: ${COLORS.grey40};
-    }
-  `,
-}
-
-export const TertiaryButton = styled(Btn)<{
-  buttonType: 'primary' | 'secondary' | 'white'
-}>`
-  ${BASE_STYLES}
-  ${({ buttonType }) => STYLE_MAP[buttonType] || ''}
-`

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

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

@@ -1,60 +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 { AltPrimaryButton } from '../AltPrimaryButton'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof AltPrimaryButton>) => {
-  return renderWithProviders(<AltPrimaryButton {...props} />)[0]
-}
-
-describe('AltPrimaryButton', () => {
-  let props: 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.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.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}`)
-  //   })
-})