@opentrons/components 0.1.6-alpha.15 → 0.1.6-alpha.17

package/src/atoms/Checkbox/index.tsx

@@ -0,0 +1,127 @@
+import type * as React from 'react'
+import { css } from 'styled-components'
+import { COLORS, BORDERS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
+import { Icon } from '../../icons'
+import {
+  ALIGN_CENTER,
+  CURSOR_AUTO,
+  CURSOR_POINTER,
+  DIRECTION_ROW,
+  FLEX_MAX_CONTENT,
+  JUSTIFY_SPACE_BETWEEN,
+} from '../../styles'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+import { StyledText } from '../StyledText'
+
+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: React.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.grey35};
+      color: ${COLORS.grey50};
+    }
+    &: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} />
+    </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

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { CheckboxField as CheckboxFieldComponent } from './index'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/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

@@ -0,0 +1,141 @@
+import type * as React from 'react'
+import { describe, beforeEach, afterEach, vi, expect, it } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../../styles'
+import { renderWithProviders } from '../../../testing/utils'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
+import { CheckboxField } from '..'
+
+const render = (props: React.ComponentProps<typeof CheckboxField>) => {
+  return renderWithProviders(<CheckboxField {...props} />)[0]
+}
+
+describe('CheckboxField', () => {
+  let props: React.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: ${String(COLORS.grey50)}`)
+    expect(checkBoxIcon).toHaveStyle(`display: flex`)
+    expect(checkBoxIcon).toHaveStyle(
+      `border-radius: ${String(BORDERS.borderRadius2)}`
+    )
+    expect(checkBoxIcon).toHaveStyle(
+      `justify-content: ${String(JUSTIFY_CENTER)}`
+    )
+    expect(checkBoxIcon).toHaveStyle(`align-items: ${String(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: ${String(TYPOGRAPHY.fontSizeP)}`
+    )
+    expect(checkBoxFieldBox).toHaveStyle(
+      `font-weight: ${String(TYPOGRAPHY.fontWeightRegular)}`
+    )
+    expect(checkBoxFieldBox).toHaveStyle(`color: ${String(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: ${String(COLORS.blue50)}`)
+    expect(checkBoxIcon).toHaveStyle(`display: flex`)
+    expect(checkBoxIcon).toHaveStyle(
+      `border-radius: ${String(BORDERS.borderRadius2)}`
+    )
+    expect(checkBoxIcon).toHaveStyle(
+      `justify-content: ${String(JUSTIFY_CENTER)}`
+    )
+    expect(checkBoxIcon).toHaveStyle(`align-items: ${String(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: ${String(COLORS.grey50)}`)
+    expect(checkBoxIcon).toHaveStyle(`display: flex`)
+    expect(checkBoxIcon).toHaveStyle(
+      `border-radius: ${String(BORDERS.borderRadius2)}`
+    )
+    expect(checkBoxIcon).toHaveStyle(
+      `justify-content: ${String(JUSTIFY_CENTER)}`
+    )
+    expect(checkBoxIcon).toHaveStyle(`align-items: ${String(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',
+    })
+    const checkBoxFieldBox = screen.getByText('checkMockCheckboxField')
+    expect(checkBoxInput).toHaveAttribute('tabindex', '1')
+    expect(checkBoxFieldBox).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

@@ -0,0 +1,171 @@
+import type * as React from 'react'
+import { css } from 'styled-components'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { COLORS, BORDERS } from '../../helix-design-system'
+import { Flex, Box } from '../../primitives'
+import { Icon } from '../../icons'
+import {
+  ALIGN_CENTER,
+  CURSOR_AUTO,
+  CURSOR_POINTER,
+  JUSTIFY_CENTER,
+} from '../../styles'
+
+export interface CheckboxFieldProps {
+  /** change handler */
+  onChange: React.ChangeEventHandler
+  /** checkbox is checked if value is true */
+  value?: boolean
+  /** name of field in form */
+  name?: string
+  /** label text for checkbox */
+  label?: React.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?: React.ComponentProps<'div'>
+  /** if true, render indeterminate icon */
+  isIndeterminate?: boolean
+}
+
+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 = 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;
+`
+
+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};
+  }
+`
+
+const LABEL_TEXT_STYLE = css`
+  font-size: ${TYPOGRAPHY.fontSizeP};
+  font-weight: ${TYPOGRAPHY.fontWeightRegular};
+  color: ${COLORS.black90};
+  flex: 0 0 auto;
+  padding: ${SPACING.spacing8} ${SPACING.spacing8};
+
+  &:empty {
+    padding: 0;
+  }
+`
+
+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}>
+      {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} tabIndex={tabIndex}>
+        {label}
+      </Box>
+    </label>
+  )
+}

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

@@ -0,0 +1,59 @@
+import { Flex } from '../../primitives'
+import { COLORS } from '../../helix-design-system'
+import { SPACING, VIEWPORT } from '../../ui-style-constants'
+import { Chip as ChipComponent } from '.'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof ChipComponent> = {
+  title: 'Library/Atoms/Chip',
+  argTypes: {
+    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',
+  },
+}