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

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

@@ -1,58 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-
-import '@testing-library/jest-dom/vitest'
-
-import { Checkbox } from '..'
-import { renderWithProviders } from '../../../testing/utils'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof Checkbox>) => {
-  return renderWithProviders(<Checkbox {...props} />)[0]
-}
-
-describe('Checkbox', () => {
-  let props: ComponentProps<typeof Checkbox>
-
-  beforeEach(() => {
-    props = {
-      onClick: vi.fn(),
-      isChecked: false,
-      labelText: 'fake checkbox label',
-      tabIndex: 1,
-      disabled: false,
-    }
-  })
-
-  afterEach(() => {
-    vi.resetAllMocks()
-  })
-
-  it('renders label with disabled true', () => {
-    props.disabled = true
-    render(props)
-    const checkBoxInput = screen.getByRole('checkbox', {
-      name: 'fake checkbox label',
-    })
-    expect(checkBoxInput).toBeDisabled()
-  })
-
-  it('renders label with correct style - tabIndex 1', () => {
-    props.tabIndex = 1
-    render(props)
-    const checkBoxInput = screen.getByRole('checkbox', {
-      name: 'fake checkbox label',
-    })
-    expect(checkBoxInput).toHaveAttribute('tabindex', '1')
-  })
-
-  it('calls mock function when clicking checkbox', () => {
-    render(props)
-    const checkBoxInput = screen.getByRole('checkbox', {
-      name: 'fake checkbox label',
-    })
-    fireEvent.click(checkBoxInput)
-    expect(props.onClick).toHaveBeenCalled()
-  })
-})

package/src/atoms/Checkbox/index.tsx

@@ -1,134 +0,0 @@
-import { css } from 'styled-components'
-
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { Flex } from '../../primitives'
-import {
-  ALIGN_CENTER,
-  CURSOR_AUTO,
-  CURSOR_DEFAULT,
-  CURSOR_POINTER,
-  DIRECTION_ROW,
-  FLEX_MAX_CONTENT,
-  JUSTIFY_SPACE_BETWEEN,
-} from '../../styles'
-import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
-import { StyledText } from '../StyledText'
-
-import type { MouseEventHandler } from 'react'
-
-export interface CheckboxProps {
-  /** checkbox is checked if value is true */
-  isChecked: boolean
-  /** label text that describes the option */
-  labelText: string
-  /** callback click/tap handler */
-  onClick: MouseEventHandler
-  /** html tabindex property */
-  tabIndex?: number
-  /** if disabled is true, mouse events will not trigger onClick callback */
-  disabled?: boolean
-  /** optional borderRadius type */
-  type?: 'round' | 'neutral'
-  /** optional width for helix */
-  width?: string
-}
-export function Checkbox(props: CheckboxProps): JSX.Element {
-  const {
-    isChecked,
-    labelText,
-    onClick,
-    tabIndex = 0,
-    disabled = false,
-    width = FLEX_MAX_CONTENT,
-    type = 'round',
-  } = props
-
-  const CHECKBOX_STYLE = css`
-    width: ${width};
-    grid-gap: ${SPACING.spacing12};
-    border: none;
-    align-items: ${ALIGN_CENTER};
-    flex-direction: ${DIRECTION_ROW};
-    color: ${isChecked ? COLORS.white : COLORS.black90};
-    background-color: ${isChecked ? COLORS.blue50 : COLORS.blue30};
-    border-radius: ${type === 'round'
-      ? BORDERS.borderRadiusFull
-      : BORDERS.borderRadius8};
-    padding: ${SPACING.spacing12} ${SPACING.spacing16};
-    justify-content: ${JUSTIFY_SPACE_BETWEEN};
-    cursor: ${CURSOR_POINTER};
-
-    &:active {
-      background-color: ${isChecked ? COLORS.blue55 : COLORS.blue40};
-    }
-    &:focus-visible {
-      background-color: ${isChecked ? COLORS.blue50 : COLORS.blue35};
-      outline: 3px ${BORDERS.styleSolid} ${COLORS.blue50};
-      outline-offset: 2px;
-    }
-    &:disabled {
-      background-color: ${COLORS.grey30};
-      color: ${COLORS.grey40};
-      cursor: ${CURSOR_DEFAULT};
-    }
-    &:disabled:hover {
-      background-color: ${COLORS.grey30}; /* Prevent hover from overriding */
-    }
-    &:hover {
-      background-color: ${isChecked ? COLORS.blue55 : COLORS.blue35};
-    }
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      padding: ${SPACING.spacing20};
-      border-radius: ${BORDERS.borderRadius16};
-      width: 100%;
-      cursor: ${CURSOR_AUTO};
-    }
-  `
-
-  return (
-    <Flex
-      as="button"
-      role="checkbox"
-      onClick={onClick}
-      tabIndex={tabIndex}
-      disabled={disabled}
-      css={CHECKBOX_STYLE}
-    >
-      <StyledText desktopStyle="bodyDefaultRegular" oddStyle="bodyTextSemiBold">
-        {labelText}
-      </StyledText>
-      <Check isChecked={isChecked} disabled={disabled} />
-    </Flex>
-  )
-}
-
-interface CheckProps {
-  isChecked: boolean
-  color?: string
-  disabled?: boolean
-}
-export function Check(props: CheckProps): JSX.Element {
-  const { isChecked, color = COLORS.white, disabled = false } = props
-  return isChecked ? (
-    <Flex css={CHECK_STYLE}>
-      <Icon name="ot-checkbox" color={color} />
-    </Flex>
-  ) : (
-    <Flex
-      css={CHECK_STYLE}
-      border={`2px solid ${disabled ? COLORS.grey40 : COLORS.black90}`}
-      borderRadius={BORDERS.borderRadius4}
-    />
-  )
-}
-
-const CHECK_STYLE = css`
-  width: 1rem;
-  height: 1rem;
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    width: 1.75rem;
-    height: 1.75rem;
-  }
-`

package/src/atoms/CheckboxField/CheckboxField.stories.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react'
-
-import { CheckboxField as CheckboxFieldComponent } from './index'
-
-import type { Meta, Story } from '@storybook/react'
-
-export default {
-  title: 'Helix/Atoms/Checkbox Field',
-  component: CheckboxFieldComponent,
-} as Meta
-
-const Template: Story<
-  React.ComponentProps<typeof CheckboxFieldComponent>
-> = args => {
-  const [isChecked, setIsChecked] = React.useState<boolean>(false)
-  return (
-    <CheckboxFieldComponent
-      {...args}
-      onChange={e => {
-        setIsChecked(!isChecked)
-        args.onChange(e)
-      }}
-      value={isChecked}
-    />
-  )
-}
-export const CheckboxField = Template.bind({})
-CheckboxField.args = {
-  label: 'Remember this setting?',
-  isIndeterminate: false,
-}

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

@@ -1,128 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-
-import '@testing-library/jest-dom/vitest'
-
-import { CheckboxField } from '..'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../../styles'
-import { renderWithProviders } from '../../../testing/utils'
-import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof CheckboxField>) => {
-  return renderWithProviders(<CheckboxField {...props} />)[0]
-}
-
-describe('CheckboxField', () => {
-  let props: ComponentProps<typeof CheckboxField>
-
-  beforeEach(() => {
-    props = {
-      onChange: vi.fn(),
-      value: false,
-      name: 'mockCheckboxField',
-      label: 'checkMockCheckboxField',
-      disabled: false,
-      isIndeterminate: false,
-    }
-  })
-
-  afterEach(() => {
-    vi.resetAllMocks()
-  })
-
-  it('renders label with correct style', () => {
-    render(props)
-    const checkBoxInput = screen.getByRole('checkbox', {
-      name: 'checkMockCheckboxField',
-    })
-    const checkBoxFieldBox = screen.getByText('checkMockCheckboxField')
-    const checkBoxIcon = screen.getByTestId('CheckboxField_icon')
-
-    // INNER_STYLE_NO_VALUE
-    expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`)
-    expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
-    expect(checkBoxIcon).toHaveStyle(`color: ${COLORS.grey50}`)
-    expect(checkBoxIcon).toHaveStyle(`display: flex`)
-    expect(checkBoxIcon).toHaveStyle(`border-radius: ${BORDERS.borderRadius2}`)
-    expect(checkBoxIcon).toHaveStyle(`justify-content: ${JUSTIFY_CENTER}`)
-    expect(checkBoxIcon).toHaveStyle(`align-items: ${ALIGN_CENTER}`)
-
-    // INPUT_STYLE
-    expect(checkBoxInput).toHaveStyle(`position: absolute`)
-    expect(checkBoxInput).toHaveStyle(`overflow: hidden`)
-    expect(checkBoxInput).toHaveStyle(`clip: rect(0 0 0 0)`)
-    expect(checkBoxInput).toHaveStyle(`height: 1px`)
-    expect(checkBoxInput).toHaveStyle(`width: 1px`)
-    expect(checkBoxInput).toHaveStyle(`margin: -1px`)
-    expect(checkBoxInput).toHaveStyle(`padding: 0`)
-    expect(checkBoxInput).toHaveStyle(`border: 0`)
-    expect(checkBoxInput).toHaveAttribute('tabindex', '0')
-
-    // LABEL_TEXT_STYLE
-    expect(checkBoxFieldBox).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeH3}`)
-    expect(checkBoxFieldBox).toHaveStyle(
-      `font-weight: ${TYPOGRAPHY.fontWeightRegular}`
-    )
-    expect(checkBoxFieldBox).toHaveStyle(`color: ${COLORS.black90}`)
-    expect(checkBoxFieldBox).toHaveStyle(`flex: 0 0 auto`)
-    expect(checkBoxFieldBox).toHaveStyle(
-      `padding: ${SPACING.spacing8} ${SPACING.spacing8}`
-    )
-  })
-
-  it('render icon with correct style - value true', () => {
-    props.value = true
-    render(props)
-    const checkBoxIcon = screen.getByTestId('CheckboxField_icon')
-    expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`)
-    expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
-    expect(checkBoxIcon).toHaveStyle(`color: ${COLORS.blue50}`)
-    expect(checkBoxIcon).toHaveStyle(`display: flex`)
-    expect(checkBoxIcon).toHaveStyle(`border-radius: ${BORDERS.borderRadius2}`)
-    expect(checkBoxIcon).toHaveStyle(`justify-content: ${JUSTIFY_CENTER}`)
-    expect(checkBoxIcon).toHaveStyle(`align-items: ${ALIGN_CENTER}`)
-  })
-
-  it('renders label with correct style - value undefined', () => {
-    props.value = undefined
-    render(props)
-    const checkBoxIcon = screen.getByTestId('CheckboxField_icon')
-    expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`)
-    expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
-    expect(checkBoxIcon).toHaveStyle(`color: ${COLORS.grey50}`)
-    expect(checkBoxIcon).toHaveStyle(`display: flex`)
-    expect(checkBoxIcon).toHaveStyle(`border-radius: ${BORDERS.borderRadius2}`)
-    expect(checkBoxIcon).toHaveStyle(`justify-content: ${JUSTIFY_CENTER}`)
-    expect(checkBoxIcon).toHaveStyle(`align-items: ${ALIGN_CENTER}`)
-  })
-
-  it('renders label with correct style - disabled true', () => {
-    props.disabled = true
-    render(props)
-    const checkBoxInput = screen.getByRole('checkbox', {
-      name: 'checkMockCheckboxField',
-    })
-    expect(checkBoxInput).toBeDisabled()
-  })
-
-  it('renders label with correct style - tabIndex 1', () => {
-    props.tabIndex = 1
-    render(props)
-    const checkBoxInput = screen.getByRole('checkbox', {
-      name: 'checkMockCheckboxField',
-    })
-    expect(checkBoxInput).toHaveAttribute('tabindex', '1')
-  })
-
-  it('calls mock function when clicking checkboxfield', () => {
-    render(props)
-    const checkBoxInput = screen.getByRole('checkbox', {
-      name: 'checkMockCheckboxField',
-    })
-    fireEvent.click(checkBoxInput)
-    expect(props.onChange).toHaveBeenCalled()
-  })
-})

package/src/atoms/CheckboxField/index.tsx

@@ -1,183 +0,0 @@
-import { css } from 'styled-components'
-
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { Box, Flex } from '../../primitives'
-import {
-  ALIGN_CENTER,
-  CURSOR_AUTO,
-  CURSOR_POINTER,
-  JUSTIFY_CENTER,
-} from '../../styles'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-
-import type { FlattenSimpleInterpolation } from 'styled-components'
-import type { ChangeEventHandler, ComponentProps, ReactNode } from 'react'
-
-export interface CheckboxFieldProps {
-  /** change handler */
-  onChange: ChangeEventHandler
-  /** checkbox is checked if value is true */
-  value?: boolean
-  /** name of field in form */
-  name?: string
-  /** label text for checkbox */
-  label?: ReactNode
-  /** checkbox is disabled if value is true */
-  disabled?: boolean
-  /** html tabindex property */
-  tabIndex?: number
-  /** props passed into label div. TODO IMMEDIATELY what is the Flow type? */
-  labelProps?: ComponentProps<'div'>
-  /** if true, render indeterminate icon */
-  isIndeterminate?: boolean
-}
-
-export function CheckboxField(props: CheckboxFieldProps): JSX.Element {
-  const {
-    onChange,
-    value,
-    name,
-    label,
-    disabled,
-    tabIndex = 0,
-    isIndeterminate,
-  } = props
-  const indeterminate = isIndeterminate ?? false ? 'true' : undefined
-
-  return (
-    <label css={OUTER_STYLE(value ?? false)}>
-      {props.isIndeterminate ?? false ? (
-        <Flex
-          alignItems={ALIGN_CENTER}
-          justifyContent={JUSTIFY_CENTER}
-          borderRadius={BORDERS.borderRadius2}
-          backgroundColor={COLORS.grey30}
-          size="1.25rem"
-        >
-          <Box
-            height="1.5px"
-            width="0.375rem"
-            backgroundColor={COLORS.grey50}
-          />
-        </Flex>
-      ) : (
-        <Icon
-          css={value ?? false ? INNER_STYLE_VALUE : INNER_STYLE_NO_VALUE}
-          name={value ?? false ? 'ot-checkbox' : 'checkbox-blank-outline'}
-          width="100%"
-          data-testid="CheckboxField_icon"
-        />
-      )}
-      <input
-        css={INPUT_STYLE}
-        type="checkbox"
-        name={name}
-        checked={(value ?? false) || false}
-        disabled={disabled}
-        onChange={onChange}
-        tabIndex={tabIndex}
-        /* @ts-expect-error */
-        indeterminate={indeterminate}
-      />
-      <Box css={LABEL_TEXT_STYLE}>{label}</Box>
-    </label>
-  )
-}
-
-const INPUT_STYLE = css`
-  position: absolute;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-`
-
-const OUTER_STYLE = (value?: boolean): FlattenSimpleInterpolation => css`
-  font-size: var(--fs-body-1); /* from legacy --font-form-default */
-  font-weight: var(--fw-regular); /* from legacy --font-form-default */
-  color: var(--c-font-dark); /* from legacy --font-form-default */
-
-  display: flex;
-  align-items: ${ALIGN_CENTER};
-  line-height: 1;
-
-  &:has(input[type='checkbox']:focus-visible) {
-    [data-testid='CheckboxField_icon'] {
-      color: ${value === true ? COLORS.blue50 : COLORS.grey55};
-      outline: 2px solid ${COLORS.blue50};
-      outline-offset: 0.25rem;
-    }
-  }
-`
-
-const LABEL_TEXT_STYLE = css`
-  font-size: ${TYPOGRAPHY.fontSizeH3};
-  font-weight: ${TYPOGRAPHY.fontWeightRegular};
-  line-height: ${TYPOGRAPHY.lineHeight20};
-  color: ${COLORS.black90};
-  flex: 0 0 auto;
-  padding: ${SPACING.spacing8} ${SPACING.spacing8};
-
-  &:empty {
-    padding: 0;
-  }
-`
-
-const INNER_STYLE_VALUE = css`
-  width: ${SPACING.spacing20};
-  min-width: ${SPACING.spacing20};
-  color: ${COLORS.blue50};
-  display: flex;
-  border-radius: ${BORDERS.borderRadius2};
-  justify-content: ${JUSTIFY_CENTER};
-  align-items: ${ALIGN_CENTER};
-
-  &:hover {
-    cursor: ${CURSOR_POINTER};
-    color: ${COLORS.blue55};
-  }
-
-  &:active {
-    color: ${COLORS.blue60};
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 3px ${COLORS.blue50};
-  }
-
-  &:disabled {
-    color: ${COLORS.blue60};
-  }
-`
-
-const INNER_STYLE_NO_VALUE = css`
-  width: ${SPACING.spacing20};
-  min-width: ${SPACING.spacing20};
-  color: ${COLORS.grey50};
-  display: flex;
-  border-radius: ${BORDERS.borderRadius2};
-  justify-content: ${JUSTIFY_CENTER};
-  align-items: ${ALIGN_CENTER};
-
-  &:hover {
-    cursor: ${CURSOR_POINTER};
-    color: ${COLORS.grey60};
-  }
-
-  &:active {
-    color: ${COLORS.grey60};
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 3px ${COLORS.blue50};
-  }
-
-  &:disabled {
-    color: ${COLORS.grey50};
-    cursor: ${CURSOR_AUTO};
-  }
-`

package/src/atoms/Chip/Chip.stories.tsx

@@ -1,67 +0,0 @@
-import { Chip as ChipComponent } from '.'
-import { COLORS } from '../../helix-design-system'
-import { Flex, STYLE_PROPS } from '../../primitives'
-import { SPACING, VIEWPORT } from '../../ui-style-constants'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof ChipComponent> = {
-  title: 'Helix/Atoms/Chip',
-  argTypes: {
-    // Disable all StyleProps
-    ...Object.fromEntries(
-      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
-        prop,
-        { table: { disable: true } },
-      ])
-    ),
-    type: {
-      options: ['error', 'info', 'neutral', 'success', 'warning'],
-      control: {
-        type: 'select',
-      },
-    },
-    hasIcon: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    chipSize: {
-      options: ['medium', 'small'],
-      control: {
-        type: 'select',
-      },
-    },
-    iconName: {
-      options: ['connection-status', 'ot-check', 'ot-alert'],
-      control: {
-        type: 'select',
-      },
-    },
-  },
-  component: ChipComponent,
-  parameters: VIEWPORT.touchScreenViewport,
-  decorators: [
-    Story => (
-      <Flex
-        padding={SPACING.spacing16}
-        backgroundColor={COLORS.grey50}
-        width="59rem"
-      >
-        <Story />
-      </Flex>
-    ),
-  ],
-}
-
-export default meta
-type Story = StoryObj<typeof ChipComponent>
-
-export const Chip: Story = {
-  args: {
-    type: 'success',
-    text: 'Chip component',
-    hasIcon: true,
-    chipSize: 'medium',
-  },
-}