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

package/src/atoms/buttons/RadioButton.tsx

@@ -1,7 +1,5 @@
 import styled, { css } from 'styled-components'
-import { Flex } from '../../primitives'
-import { COLORS, BORDERS } from '../../helix-design-system'
-import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+
 import {
   ALIGN_CENTER,
   ALIGN_START,
@@ -11,13 +9,16 @@ import {
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   Icon,
-  Tag,
   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 { ChangeEventHandler, ReactNode } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { ChangeEventHandler, MouseEventHandler, ReactNode } from 'react'
 import type { IconName } from '../../icons'
 import type { StyleProps } from '../../primitives'
 
@@ -29,23 +30,50 @@ export interface RadioButtonSubLabel {
 }
 
 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
+  /** 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
@@ -67,61 +95,34 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
     maxLines = 1,
     setHovered,
     setNoHover,
+    testid,
+    ariaDisabled = false,
+    onClick,
   } = props
   const isLarge = radioButtonType === 'large'
 
-  const AVAILABLE_BUTTON_STYLE = css`
-    background: ${COLORS.blue35};
-
-    &:hover,
-    &:active {
-      background-color: ${disabled ? COLORS.grey35 : COLORS.blue40};
-    }
-  `
-
-  const SELECTED_BUTTON_STYLE = 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 = 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 getButtonStyle = (
     isSelected: boolean,
     disabled: boolean
   ): FlattenSimpleInterpolation => {
     if (disabled) return DISABLED_BUTTON_STYLE
-    if (isSelected) return SELECTED_BUTTON_STYLE
-    return AVAILABLE_BUTTON_STYLE
+    if (isSelected) return SELECTED_BUTTON_STYLE(disabled)
+    return AVAILABLE_BUTTON_STYLE(disabled)
   }
 
   return (
     <RadioButtonWrapper>
       <SettingButton
         checked={isSelected}
-        disabled={disabled}
+        disabled={ariaDisabled ? false : disabled}
         id={id}
-        onChange={onChange}
+        onChange={ariaDisabled ? () => {} : onChange}
         type="radio"
         value={buttonValue}
+        onClick={onClick}
       />
       <SettingButtonLabel
+        data-testid={testid}
         tabIndex={0}
         isLarge={isLarge}
         maxLines={maxLines}
@@ -134,6 +135,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
         onMouseLeave={setNoHover}
         css={getButtonStyle(isSelected, disabled)}
         aria-selected={isSelected}
+        aria-disabled={ariaDisabled}
       >
         <Flex
           flexDirection={DIRECTION_ROW}
@@ -164,7 +166,13 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
               buttonLabel
             )}
             {buttonSubLabel && (
-              <Flex css={SUBBUTTON_LABEL_STYLE}>
+              <Flex
+                css={SUBBUTTON_LABEL_STYLE(
+                  disabled,
+                  isSelected,
+                  buttonSubLabel
+                )}
+              >
                 <StyledText
                   color={isSelected ? COLORS.white : COLORS.grey60}
                   oddStyle="bodyTextRegular"
@@ -195,6 +203,47 @@ const copyContainerStyle = (
   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};
@@ -253,6 +302,16 @@ const SettingButtonLabel = styled.label<SettingsButtonLabelProps>`
     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 }) =>

package/src/atoms/buttons/SecondaryButton.tsx

@@ -1,9 +1,10 @@
 import styled from 'styled-components'
 
-import { TYPOGRAPHY, SPACING } from '../../ui-style-constants'
-import { isntStyleProp, styleProps } from '../../primitives'
 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 {
@@ -12,8 +13,7 @@ interface SecondaryButtonProps extends StyleProps {
   'aria-disabled'?: boolean
 }
 export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
-  shouldForwardProp: p =>
-    isntStyleProp(p) && p !== 'isDangerous' && p !== 'aria-disabled',
+  shouldForwardProp: p => isntStyleProp(p) && p !== 'isDangerous',
 })<SecondaryButtonProps>`
   appearance: none;
   cursor: ${props =>
@@ -31,7 +31,9 @@ export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
   padding: ${SPACING.spacing8} ${SPACING.spacing16};
   text-transform: ${TYPOGRAPHY.textTransformNone};
   background-color: ${COLORS.transparent};
-  ${TYPOGRAPHY.pSemiBold}
+  font-size: ${TYPOGRAPHY.fontSizeH3};
+  font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+  line-height: ${TYPOGRAPHY.lineHeight20};
 
   &:hover,
   &:focus {
@@ -42,7 +44,7 @@ export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
   &:hover {
     color: ${props => {
       if (props['aria-disabled']) return COLORS.grey40
-      return props.isDangerous ? COLORS.red50 : COLORS.blue60
+      return props.isDangerous ? COLORS.red55 : COLORS.blue55
     }};
     border-color: ${props => {
       if (props['aria-disabled']) return COLORS.grey30
@@ -61,18 +63,21 @@ export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
       return props.isDangerous ? COLORS.red50 : COLORS.blue60
     }};
     box-shadow: ${props =>
-      props['aria-disabled'] ? 'none' : `0 0 0 3px ${COLORS.yellow50}`};
+      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.blue55
+      return props.isDangerous ? COLORS.red60 : COLORS.blue60
     }};
     border-color: ${props => {
       if (props['aria-disabled']) return COLORS.grey30
-      return props.isDangerous ? COLORS.red60 : COLORS.blue55
+      return props.isDangerous ? COLORS.red60 : COLORS.blue60
     }};
   }
 
@@ -86,3 +91,7 @@ export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
 
   ${styleProps}
 `
+
+SecondaryButton.defaultProps = {
+  'aria-disabled': false,
+}

package/src/atoms/buttons/TertiaryButton.tsx

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components'
+
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { Btn } from '../../primitives'
 import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'

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

@@ -1,10 +1,11 @@
-import { describe, it, beforeEach, expect } from 'vitest'
 import { screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
+
 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 { 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'

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

@@ -1,9 +1,11 @@
-import { describe, it, beforeEach, expect } from 'vitest'
 import { screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
+
 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 { renderWithProviders } from '../../../testing/utils'
+import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
 import { AltPrimaryButton } from '../AltPrimaryButton'
 
 import type { ComponentProps } from 'react'
@@ -28,7 +30,7 @@ describe('AltPrimaryButton', () => {
     expect(button).toHaveStyle(
       `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
     )
-    expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeP}`)
+    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}`)

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

@@ -0,0 +1,87 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { COLORS } from '../../../helix-design-system'
+import { CURSOR_NOT_ALLOWED, CURSOR_POINTER } from '../../../styles/cursor'
+import { renderWithProviders } from '../../../testing/utils'
+import { TYPOGRAPHY } from '../../../ui-style-constants'
+import { BasicButton } from '../BasicButton'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof BasicButton>) => {
+  return renderWithProviders(<BasicButton {...props} />)
+}
+
+describe('BasicButton', () => {
+  let props: ComponentProps<typeof BasicButton>
+
+  beforeEach(() => {
+    props = {
+      children: 'basic button',
+      onClick: vi.fn(),
+      isDisabled: false,
+      underLine: false,
+    }
+  })
+
+  it('renders basic button with text', async () => {
+    render(props)
+    const button = screen.getByRole('button', { name: 'basic button' })
+    expect(button).toHaveAttribute('aria-disabled', 'false')
+    expect(button).toHaveStyle(`cursor: ${CURSOR_POINTER}`)
+    expect(button).toHaveStyle(`color: ${COLORS.black90}`)
+    expect(button).toHaveStyle(`text-decoration: none`)
+  })
+
+  it('renders basic button with icon', async () => {
+    props.iconName = 'alert'
+    render(props)
+    screen.getByTestId('basic_button_alert')
+    screen.getByRole('button', { name: 'basic button' })
+  })
+
+  // TODO: need to update '@testing-library/user-event' v14+
+  // it('has hover styles when not disabled', async () => {
+  //   render(props)
+  //   const button = screen.getByRole('button', { name: 'basic button' })
+  //   await userEvent.hover(button)
+  //   expect(button).toHaveStyle(`color: ${COLORS.blue50}`)
+  // })
+
+  it('calls onClick when clicked', () => {
+    render(props)
+    const button = screen.getByRole('button', { name: 'basic button' })
+    fireEvent.click(button)
+    expect(props.onClick).toHaveBeenCalled()
+  })
+
+  it('renders basic button with text and aria-disabled', () => {
+    props.isDisabled = true
+    render(props)
+    const button = screen.getByRole('button', { name: 'basic button' })
+    expect(button).toHaveAttribute('aria-disabled', 'true')
+    expect(button).toHaveStyle(`cursor: ${CURSOR_NOT_ALLOWED}`)
+    expect(button).toHaveStyle(`color: ${COLORS.grey40}`)
+  })
+
+  it('renders basic button with text and underline', () => {
+    props.underLine = true
+    render(props)
+    const button = screen.getByRole('button', { name: 'basic button' })
+    expect(button).toHaveAttribute('aria-disabled', 'false')
+    expect(button).toHaveStyle(`cursor: ${CURSOR_POINTER}`)
+    expect(button).toHaveStyle(`color: ${COLORS.black90}`)
+    expect(button).toHaveStyle(
+      `text-decoration: ${TYPOGRAPHY.textDecorationUnderline}`
+    )
+  })
+
+  it('has hover styles when not disabled', () => {
+    render(props)
+    const button = screen.getByRole('button', { name: 'basic button' })
+    expect(button).toHaveStyle(`color: ${COLORS.black90}`)
+    expect(button).toHaveAttribute('aria-disabled', 'false')
+    expect(button).toHaveStyle(`cursor: ${CURSOR_POINTER}`)
+  })
+})

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

@@ -1,8 +1,10 @@
 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 { 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'

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

@@ -1,9 +1,11 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { beforeEach, describe, expect, it, vi } 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 { renderWithProviders } from '../../../testing/utils'
 import { LargeButton } from '../LargeButton'
 
 import type { ComponentProps } from 'react'

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

@@ -1,9 +1,11 @@
-import { describe, it, beforeEach, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
+
 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 { renderWithProviders } from '../../../testing/utils'
+import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
 import { PrimaryButton } from '../PrimaryButton'
 
 import type { ComponentProps } from 'react'
@@ -28,7 +30,7 @@ describe('PrimaryButton', () => {
     expect(button).toHaveStyle(
       `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
     )
-    expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeP}`)
+    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}`)
@@ -52,7 +54,7 @@ describe('PrimaryButton', () => {
     render(props)
     const button = screen.getByText('primary button')
     fireEvent.mouseOver(button)
-    expect(button).toHaveStyle(`background-color: ${COLORS.blue50}`)
+    expect(button).toHaveStyle(`background-color: ${COLORS.blue55}`)
   })
 
   it('renders primary button with text and different background color', () => {

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

@@ -1,8 +1,10 @@
 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 { queryByAttribute, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import { COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
 import { SPACING } from '../../../ui-style-constants'
 import { RadioButton } from '../RadioButton'
 
@@ -102,4 +104,16 @@ describe('RadioButton', () => {
 
     render(props)
   })
+
+  it('onClick is called when ariaDisabled is true', () => {
+    props = {
+      ...props,
+      ariaDisabled: true,
+      onClick: vi.fn(),
+    }
+    render(props)
+    const label = screen.getByRole('label')
+    label.click()
+    expect(props.onClick).toHaveBeenCalled()
+  })
 })

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

@@ -1,10 +1,11 @@
-import { describe, it, beforeEach, expect } from 'vitest'
 import { screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
+
 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 { BORDERS, COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
+import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
 import { SecondaryButton } from '../SecondaryButton'
 
 import type { ComponentProps } from 'react'
@@ -29,7 +30,7 @@ describe('SecondaryButton', () => {
     expect(button).toHaveStyle(
       `padding: ${SPACING.spacing8} ${SPACING.spacing16}`
     )
-    expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeP}`)
+    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}`)