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

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

@@ -0,0 +1,430 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { screen } from '@testing-library/react'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+import { SPACING } from '../../../ui-style-constants'
+import { renderWithProviders } from '../../../testing/utils'
+import { Chip } from '..'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Chip>) => {
+  return renderWithProviders(<Chip {...props} />)
+}
+
+describe('Chip Touchscreen', () => {
+  let props: ComponentProps<typeof Chip>
+
+  it('should render text, icon, bgcolor with success colors', () => {
+    props = {
+      text: 'mockSuccess',
+      type: 'success',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_success')
+    const chipText = screen.getByText('mockSuccess')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.green35}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
+    const icon = screen.getByLabelText('icon_mockSuccess')
+    expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
+    // ToDo (kk:03/28/2024) seems that jsdom doesn't support switching via media query
+    // I will keep investigating this
+    // expect(icon).toHaveStyle(`width: 1.5rem`)
+  })
+
+  it('should render text, icon, no bgcolor with success colors and bg false', () => {
+    props = {
+      background: false,
+      text: 'mockSuccess',
+      type: 'success',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_success')
+    const chipText = screen.getByText('mockSuccess')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
+    const icon = screen.getByLabelText('icon_mockSuccess')
+    expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
+  })
+
+  it('should render text, icon, bgcolor with warning colors', () => {
+    props = {
+      text: 'mockWarning',
+      type: 'warning',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_warning')
+    const chipText = screen.getByText('mockWarning')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.yellow35}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.yellow60}`)
+    const icon = screen.getByLabelText('icon_mockWarning')
+    expect(icon).toHaveStyle(`color: ${COLORS.yellow60}`)
+  })
+
+  it('should render text, icon, no bgcolor with warning colors and bg false', () => {
+    props = {
+      background: false,
+      text: 'mockWarning',
+      type: 'warning',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_warning')
+    const chipText = screen.getByText('mockWarning')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.yellow60}`)
+    const icon = screen.getByLabelText('icon_mockWarning')
+    expect(icon).toHaveStyle(`color: ${COLORS.yellow60}`)
+  })
+
+  it('should render text, icon, bgcolor with neutral colors', () => {
+    props = {
+      text: 'mockNeutral',
+      type: 'neutral',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_neutral')
+    const chipText = screen.getByText('mockNeutral')
+    expect(chip).toHaveStyle(
+      `background-color: ${COLORS.black90}${COLORS.opacity20HexCode}`
+    )
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
+    const icon = screen.getByLabelText('icon_mockNeutral')
+    expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
+  })
+
+  it('should render text, icon, no bgcolor with neutral colors and bg false', () => {
+    props = {
+      background: false,
+      text: 'mockNeutral',
+      type: 'neutral',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_neutral')
+    const chipText = screen.getByText('mockNeutral')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
+    const icon = screen.getByLabelText('icon_mockNeutral')
+    expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
+  })
+
+  it('should render text, icon, bgcolor with error colors', () => {
+    props = {
+      text: 'mockError',
+      type: 'error',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_error')
+    const chipText = screen.getByText('mockError')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.red35}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.red60}`)
+    const icon = screen.getByLabelText('icon_mockError')
+    expect(icon).toHaveStyle(`color: ${COLORS.red60}`)
+  })
+
+  it('should render text, icon, no bgcolor with error colors and bg false', () => {
+    props = {
+      background: false,
+      text: 'mockError',
+      type: 'error',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_error')
+    const chipText = screen.getByText('mockError')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.red60}`)
+    const icon = screen.getByLabelText('icon_mockError')
+    expect(icon).toHaveStyle(`color: ${COLORS.red60}`)
+  })
+
+  it('should render text, icon, bgcolor with info colors', () => {
+    props = {
+      text: 'mockInfo',
+      type: 'info',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_info')
+    const chipText = screen.getByText('mockInfo')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.blue35}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.blue60}`)
+    const icon = screen.getByLabelText('icon_mockInfo')
+    expect(icon).toHaveStyle(`color: ${COLORS.blue60}`)
+  })
+
+  it('should render text, icon, no bgcolor with info colors and bg false', () => {
+    props = {
+      background: false,
+      text: 'mockInfo',
+      type: 'info',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_info')
+    const chipText = screen.getByText('mockInfo')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.blue60}`)
+    const icon = screen.getByLabelText('icon_mockInfo')
+    expect(icon).toHaveStyle(`color: ${COLORS.blue60}`)
+  })
+  it('renders no icon when hasIcon is false', () => {
+    props = {
+      text: 'mockInfo',
+      hasIcon: false,
+      type: 'info',
+    }
+    render(props)
+    expect(screen.queryByText('icon_mockInfo')).not.toBeInTheDocument()
+  })
+
+  it('render text with smaller padding and smaller icon when chip size is small and background is false', () => {
+    props = {
+      background: false,
+      text: 'mockInfo',
+      type: 'info',
+      chipSize: 'small',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_info')
+    expect(chip).toHaveStyle(`padding: ${SPACING.spacing4} 0`)
+    const icon = screen.getByLabelText('icon_mockInfo')
+    expect(icon).toHaveStyle(`width: 0.75rem`)
+  })
+
+  // ToDo (kk:03/28/2024) seems that jsdom doesn't support switching via media query
+  // I will keep investigating this
+  // it('render text with smaller padding and smaller icon when chip size is small and background is true', () => {
+  //   props = {
+  //     background: true,
+  //     text: 'mockInfo',
+  //     type: 'info',
+  //     chipSize: 'small',
+  //   }
+  //   render(props)
+  //   const chip = screen.getByTestId('Chip_info')
+  //   expect(chip).toHaveStyle(`padding: ${SPACING.spacing4} ${SPACING.spacing8}`)
+  //   const icon = screen.getByLabelText('icon_mockInfo')
+  //   expect(icon).toHaveStyle(`width: 1.25rem`)
+  // })
+})
+
+describe('Chip Web', () => {
+  let props: ComponentProps<typeof Chip>
+
+  beforeEach(() => {
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 1024,
+    })
+
+    Object.defineProperty(window, 'innerHeight', {
+      writable: true,
+      configurable: true,
+      value: 768,
+    })
+  })
+  it('should render text, icon, bgcolor with success colors', () => {
+    props = {
+      text: 'mockSuccess',
+      type: 'success',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_success')
+    const chipText = screen.getByText('mockSuccess')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.green35}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
+    // expect(chipText).toHaveStyle(
+    //   `padding: ${SPACING.spacing2} ${SPACING.spacing8}`
+    // )
+    const icon = screen.getByLabelText('icon_mockSuccess')
+    expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
+    expect(icon).toHaveStyle(`width: 1rem`)
+  })
+
+  it('should render text, icon, no bgcolor with success colors and bg false', () => {
+    props = {
+      background: false,
+      text: 'mockSuccess',
+      type: 'success',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_success')
+    const chipText = screen.getByText('mockSuccess')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
+    const icon = screen.getByLabelText('icon_mockSuccess')
+    expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
+  })
+
+  it('should render text, icon, bgcolor with warning colors', () => {
+    props = {
+      text: 'mockWarning',
+      type: 'warning',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_warning')
+    const chipText = screen.getByText('mockWarning')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.yellow35}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.yellow60}`)
+    const icon = screen.getByLabelText('icon_mockWarning')
+    expect(icon).toHaveStyle(`color: ${COLORS.yellow60}`)
+  })
+
+  it('should render text, icon, no bgcolor with warning colors and bg false', () => {
+    props = {
+      background: false,
+      text: 'mockWarning',
+      type: 'warning',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_warning')
+    const chipText = screen.getByText('mockWarning')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.yellow60}`)
+    const icon = screen.getByLabelText('icon_mockWarning')
+    expect(icon).toHaveStyle(`color: ${COLORS.yellow60}`)
+  })
+
+  it('should render text, icon, bgcolor with neutral colors', () => {
+    props = {
+      text: 'mockNeutral',
+      type: 'neutral',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_neutral')
+    const chipText = screen.getByText('mockNeutral')
+    expect(chip).toHaveStyle(
+      `background-color: ${COLORS.black90}${COLORS.opacity20HexCode}`
+    )
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
+    const icon = screen.getByLabelText('icon_mockNeutral')
+    expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
+  })
+
+  it('should render text, icon, no bgcolor with neutral colors and bg false', () => {
+    props = {
+      background: false,
+      text: 'mockNeutral',
+      type: 'neutral',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_neutral')
+    const chipText = screen.getByText('mockNeutral')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
+    const icon = screen.getByLabelText('icon_mockNeutral')
+    expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
+  })
+
+  it('should render text, icon, bgcolor with error colors', () => {
+    props = {
+      text: 'mockError',
+      type: 'error',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_error')
+    const chipText = screen.getByText('mockError')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.red35}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.red60}`)
+    const icon = screen.getByLabelText('icon_mockError')
+    expect(icon).toHaveStyle(`color: ${COLORS.red60}`)
+  })
+
+  it('should render text, icon, no bgcolor with error colors and bg false', () => {
+    props = {
+      background: false,
+      text: 'mockError',
+      type: 'error',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_error')
+    const chipText = screen.getByText('mockError')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.red60}`)
+    const icon = screen.getByLabelText('icon_mockError')
+    expect(icon).toHaveStyle(`color: ${COLORS.red60}`)
+  })
+
+  it('should render text, icon, bgcolor with info colors', () => {
+    props = {
+      text: 'mockInfo',
+      type: 'info',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_info')
+    const chipText = screen.getByText('mockInfo')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.blue35}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.blue60}`)
+    const icon = screen.getByLabelText('icon_mockInfo')
+    expect(icon).toHaveStyle(`color: ${COLORS.blue60}`)
+  })
+
+  it('should render text, icon, no bgcolor with info colors and bg false', () => {
+    props = {
+      background: false,
+      text: 'mockInfo',
+      type: 'info',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_info')
+    const chipText = screen.getByText('mockInfo')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.blue60}`)
+    const icon = screen.getByLabelText('icon_mockInfo')
+    expect(icon).toHaveStyle(`color: ${COLORS.blue60}`)
+  })
+  it('renders no icon when hasIcon is false', () => {
+    props = {
+      text: 'mockInfo',
+      hasIcon: false,
+      type: 'info',
+    }
+    render(props)
+    expect(screen.queryByText('icon_mockInfo')).not.toBeInTheDocument()
+  })
+
+  it('render text with smaller padding and smaller icon when chip size is small and background is false', () => {
+    props = {
+      background: false,
+      text: 'mockInfo',
+      type: 'info',
+      chipSize: 'small',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_info')
+    expect(chip).toHaveStyle(`padding: ${SPACING.spacing4} 0`)
+    const icon = screen.getByLabelText('icon_mockInfo')
+    expect(icon).toHaveStyle(`width: 0.75rem`)
+  })
+
+  it('render text with smaller padding and smaller icon when chip size is small and background is true', () => {
+    props = {
+      background: true,
+      text: 'mockInfo',
+      type: 'info',
+      chipSize: 'small',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_info')
+    expect(chip).toHaveStyle(`padding: ${SPACING.spacing4} ${SPACING.spacing6}`)
+    const icon = screen.getByLabelText('icon_mockInfo')
+    expect(icon).toHaveStyle(`width: 0.75rem`)
+  })
+})

package/src/atoms/Chip/index.tsx

@@ -0,0 +1,172 @@
+import { css } from 'styled-components'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
+import { LegacyStyledText } from '../StyledText'
+import { ALIGN_CENTER, DIRECTION_ROW, FLEX_MAX_CONTENT } from '../../styles'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { Icon } from '../../icons'
+
+import type { IconName } from '../../icons'
+import type { StyleProps } from '../../primitives'
+
+export type ChipType = 'error' | 'info' | 'neutral' | 'success' | 'warning'
+
+type ChipSize = 'medium' | 'small'
+
+interface ChipProps extends StyleProps {
+  /** Display background color? */
+  background?: boolean
+  /** Chip icon */
+  iconName?: IconName
+  /** Chip content */
+  text: string
+  /** name constant of the text color and the icon color to display */
+  type: ChipType
+  /** has icon */
+  hasIcon?: boolean
+  /** Chip size medium is the default size */
+  chipSize?: ChipSize
+}
+
+const CHIP_PROPS_BY_TYPE: Record<
+  ChipType,
+  {
+    backgroundColor: string
+    borderRadius: string
+    iconColor?: string
+    iconName?: IconName
+    textColor: string
+  }
+> = {
+  error: {
+    backgroundColor: COLORS.red35,
+    borderRadius: BORDERS.borderRadiusFull,
+    iconColor: COLORS.red60,
+    textColor: COLORS.red60,
+  },
+  info: {
+    backgroundColor: COLORS.blue35,
+    borderRadius: BORDERS.borderRadiusFull,
+    iconColor: COLORS.blue60,
+    textColor: COLORS.blue60,
+  },
+  neutral: {
+    backgroundColor: `${COLORS.black90}${COLORS.opacity20HexCode}`,
+    borderRadius: BORDERS.borderRadiusFull,
+    iconColor: COLORS.grey60,
+    textColor: COLORS.grey60,
+  },
+  success: {
+    backgroundColor: COLORS.green35,
+    borderRadius: BORDERS.borderRadiusFull,
+    iconColor: COLORS.green60,
+    iconName: 'ot-check',
+    textColor: COLORS.green60,
+  },
+  warning: {
+    backgroundColor: COLORS.yellow35,
+    borderRadius: BORDERS.borderRadiusFull,
+    iconColor: COLORS.yellow60,
+    textColor: COLORS.yellow60,
+  },
+}
+
+export function Chip(props: ChipProps): JSX.Element {
+  const {
+    background,
+    iconName,
+    type,
+    text,
+    hasIcon = true,
+    chipSize = 'medium',
+    ...styleProps
+  } = props
+  const backgroundColor =
+    background === false
+      ? COLORS.transparent
+      : CHIP_PROPS_BY_TYPE[type].backgroundColor
+  const icon = iconName ?? CHIP_PROPS_BY_TYPE[type].iconName ?? 'ot-alert'
+
+  const MEDIUM_CONTAINER_STYLE = css`
+    padding: ${SPACING.spacing2} ${background === false ? 0 : SPACING.spacing8};
+    grid-gap: ${SPACING.spacing4};
+
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      padding: ${SPACING.spacing8}
+        ${background === false ? 0 : SPACING.spacing16};
+      grid-gap: ${SPACING.spacing8};
+    }
+  `
+
+  const SMALL_CONTAINER_STYLE = css`
+    padding: ${SPACING.spacing4} ${background === false ? 0 : SPACING.spacing6};
+    grid-gap: ${SPACING.spacing4};
+
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      padding: ${SPACING.spacing4}
+        ${background === false ? 0 : SPACING.spacing8};
+      grid-gap: ${SPACING.spacing4};
+    }
+  `
+
+  const ICON_STYLE = css`
+    width: ${chipSize === 'medium' ? '1rem' : '0.75rem'};
+    height: ${chipSize === 'medium' ? '1rem' : '0.75rem'};
+
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      width: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
+      height: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
+    }
+  `
+
+  const TEXT_STYLE = css`
+    ${chipSize === 'medium' ? WEB_MEDIUM_TEXT_STYLE : WEB_SMALL_TEXT_STYLE}
+
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      ${chipSize === 'medium'
+        ? TYPOGRAPHY.bodyTextSemiBold
+        : TYPOGRAPHY.smallBodyTextSemiBold}
+    }
+  `
+
+  return (
+    <Flex
+      alignItems={ALIGN_CENTER}
+      backgroundColor={backgroundColor}
+      borderRadius={CHIP_PROPS_BY_TYPE[type].borderRadius}
+      flexDirection={DIRECTION_ROW}
+      height={FLEX_MAX_CONTENT}
+      css={
+        chipSize === 'medium' ? MEDIUM_CONTAINER_STYLE : SMALL_CONTAINER_STYLE
+      }
+      data-testid={`Chip_${type}`}
+      {...styleProps}
+    >
+      {hasIcon ? (
+        <Icon
+          name={icon}
+          color={CHIP_PROPS_BY_TYPE[type].iconColor}
+          aria-label={`icon_${text}`}
+          css={ICON_STYLE}
+        />
+      ) : null}
+      <LegacyStyledText
+        css={TEXT_STYLE}
+        color={CHIP_PROPS_BY_TYPE[type].textColor}
+      >
+        {text}
+      </LegacyStyledText>
+    </Flex>
+  )
+}
+
+const WEB_MEDIUM_TEXT_STYLE = css`
+  font-size: ${TYPOGRAPHY.fontSizeH4};
+  line-height: ${TYPOGRAPHY.lineHeight20};
+  font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+`
+const WEB_SMALL_TEXT_STYLE = css`
+  font-size: ${TYPOGRAPHY.fontSizeLabel};
+  line-height: ${TYPOGRAPHY.lineHeight12};
+  font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+`

package/src/atoms/Divider/index.tsx

@@ -0,0 +1,16 @@
+import { Box, COLORS, SPACING } from '../..'
+
+import type { ComponentProps } from 'react'
+
+type Props = ComponentProps<typeof Box>
+
+export function Divider(props: Props): JSX.Element {
+  return (
+    <Box
+      borderBottom={`1px solid ${String(COLORS.grey30)}`}
+      marginY={SPACING.spacing4}
+      {...props}
+      data-testid="divider"
+    />
+  )
+}

package/src/atoms/InputField/InputField.stories.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react'
+import {
+  DIRECTION_COLUMN,
+  Flex,
+  SPACING,
+  VIEWPORT,
+} from '@opentrons/components'
+import { InputField as InputFieldComponent } from './index'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof InputFieldComponent> = {
+  // ToDo (kk05/02/2024) this should be in Library but at this moment there is the same name component in components
+  // The unification for this component will be done when the old component is retired completely.
+  title: 'App/Atoms/InputField',
+  component: InputFieldComponent,
+  parameters: VIEWPORT.touchScreenViewport,
+  argTypes: {
+    units: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof InputFieldComponent>
+
+export const InputField: Story = args => {
+  const [value, setValue] = React.useState(args.value)
+  return (
+    <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+      <InputFieldComponent
+        {...args}
+        value={value}
+        width="100%"
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          setValue(e.target.value)
+        }}
+        units={args.units ? 'rem' : undefined}
+      />
+    </Flex>
+  )
+}
+
+InputField.args = {
+  value: 200,
+  type: 'number',
+  caption: 'example caption',
+  max: 200,
+  min: 10,
+}
+
+export const InputFieldWithError: Story = args => {
+  const [value, setValue] = React.useState(args.value)
+  return (
+    <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+      <InputFieldComponent
+        {...args}
+        value={value}
+        width="100%"
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          setValue(e.target.value)
+        }}
+        units={args.type !== 'number' ? undefined : args.units}
+      />
+    </Flex>
+  )
+}
+
+InputFieldWithError.args = {
+  value: 300,
+  type: 'number',
+  max: 200,
+  min: 10,
+  error: 'input is not in the range',
+}