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

package/src/atoms/buttons/RadioButton.tsx

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

@@ -0,0 +1,94 @@
+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' && p !== 'aria-disabled',
+})<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}
+`

package/src/atoms/buttons/TertiaryButton.tsx

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

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

@@ -0,0 +1,60 @@
+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}`)
+  //   })
+})

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

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