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

package/src/atoms/ListButton/__tests__/ListButtonAccordion.test.tsx

@@ -1,36 +0,0 @@
-import { screen } from '@testing-library/react'
-import { beforeEach, describe, it } from 'vitest'
-
-import { ListButtonAccordion } from '..'
-import { renderWithProviders } from '../../../testing/utils'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof ListButtonAccordion>) =>
-  renderWithProviders(<ListButtonAccordion {...props} />)
-
-describe('ListButtonAccordion', () => {
-  let props: ComponentProps<typeof ListButtonAccordion>
-
-  beforeEach(() => {
-    props = {
-      children: <div>mock ListButtonAccordion content</div>,
-      headline: 'mock headline',
-      isExpanded: true,
-    }
-  })
-
-  it('should render non nested accordion', () => {
-    render(props)
-    screen.getByText('mock headline')
-    screen.getByText('mock ListButtonAccordion content')
-  })
-  it('should render non nested accordion with main headline', () => {
-    props.isNested = true
-    props.mainHeadline = 'mock main headline'
-    render(props)
-    screen.getByText('mock main headline')
-    screen.getByText('mock headline')
-    screen.getByText('mock ListButtonAccordion content')
-  })
-})

package/src/atoms/ListButton/index.tsx

@@ -1,147 +0,0 @@
-import { css } from 'styled-components'
-
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Flex } from '../../primitives'
-import { CURSOR_DEFAULT, CURSOR_POINTER } from '../../styles'
-import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
-
-import type { FlattenSimpleInterpolation } from 'styled-components'
-import type { ReactNode } from 'react'
-import type { StyleProps } from '../../primitives'
-
-export * from './ListButtonChildren/index'
-
-type ListButtonType = 'noActive' | 'connected' | 'notConnected' | 'onColor'
-
-interface ListButtonProps extends StyleProps {
-  /** ListButton type */
-  type: ListButtonType
-  /** ListButton content */
-  children: ReactNode
-  /** ListButton disabled state */
-  disabled?: boolean
-  /** ListButton onClick event */
-  onClick?: () => void
-  /** optional data-testid value for Cypress testing */
-  testId?: string
-}
-
-const DESKTOP_LIST_BUTTON_PROPS_BY_TYPE: Record<
-  ListButtonType,
-  { backgroundColor: string; hoverBackgroundColor: string }
-> = {
-  noActive: {
-    backgroundColor: COLORS.grey20,
-    hoverBackgroundColor: COLORS.grey30,
-  },
-  connected: {
-    backgroundColor: COLORS.green30,
-    hoverBackgroundColor: COLORS.green35,
-  },
-  notConnected: {
-    backgroundColor: COLORS.yellow30,
-    hoverBackgroundColor: COLORS.yellow35,
-  },
-  onColor: {
-    backgroundColor: COLORS.white,
-    hoverBackgroundColor: COLORS.grey10,
-  },
-}
-
-const ODD_LIST_BUTTON_PROPS_BY_TYPE: Record<
-  ListButtonType,
-  { backgroundColor: string; hoverBackgroundColor: string }
-> = {
-  noActive: {
-    backgroundColor: COLORS.grey35,
-    hoverBackgroundColor: COLORS.grey40,
-  },
-  connected: {
-    backgroundColor: COLORS.green35,
-    hoverBackgroundColor: COLORS.green40,
-  },
-  notConnected: {
-    backgroundColor: COLORS.yellow35,
-    hoverBackgroundColor: COLORS.yellow40,
-  },
-  onColor: {
-    backgroundColor: COLORS.white,
-    hoverBackgroundColor: COLORS.grey20,
-  },
-}
-
-/*
-  ListButton is used in helix 
-  TODO(ja, 8/12/24): shuld be used in ODD as well and need to add
-  odd stylings
-**/
-export function ListButton(props: ListButtonProps): JSX.Element {
-  const {
-    type,
-    children,
-    disabled = false,
-    onClick,
-    testId,
-    ...styleProps
-  } = props
-  const desktopListButtonProps = DESKTOP_LIST_BUTTON_PROPS_BY_TYPE[type]
-  const oddListButtonProps = ODD_LIST_BUTTON_PROPS_BY_TYPE[type]
-
-  return (
-    <Flex
-      data-testid={testId ?? `ListButton_${type}`}
-      onClick={(e: MouseEvent) => {
-        onClick?.()
-        e.stopPropagation()
-      }}
-      css={LIST_BUTTON_STYLE(
-        disabled,
-        styleProps,
-        desktopListButtonProps,
-        oddListButtonProps
-      )}
-      tabIndex={0}
-      max-width="26.875rem"
-      {...styleProps}
-    >
-      {children}
-    </Flex>
-  )
-}
-
-const LIST_BUTTON_STYLE = (
-  disabled: boolean,
-  styleProps: StyleProps,
-  desktopListButtonProps: Record<string, string>,
-  oddListButtonProps: Record<string, string>
-): FlattenSimpleInterpolation => css`
-  cursor: ${disabled ? CURSOR_DEFAULT : CURSOR_POINTER};
-  background-color: ${disabled
-    ? COLORS.grey20
-    : desktopListButtonProps.backgroundColor};
-  padding: ${styleProps.padding ?? `${SPACING.spacing20} ${SPACING.spacing24}`};
-  border-radius: ${BORDERS.borderRadius8};
-
-  &:hover {
-    background-color: ${disabled
-      ? COLORS.grey20
-      : desktopListButtonProps.hoverBackgroundColor};
-  }
-
-  &:focus-visible {
-    outline: 2px solid ${COLORS.blue50};
-    outline-offset: 0.125rem;
-  }
-
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    background-color: ${disabled
-      ? COLORS.grey35
-      : oddListButtonProps.backgroundColor};
-
-    &:hover {
-      background-color: ${disabled
-        ? COLORS.grey35
-        : oddListButtonProps.hoverBackgroundColor};
-    }
-  }
-`

package/src/atoms/ListItem/ListItem.stories.tsx

@@ -1,128 +0,0 @@
-import { ListItem as ListItemComponent, ListItemCustomize } from '.'
-import { Flex } from '../../primitives'
-import { DIRECTION_COLUMN } from '../../styles'
-import { SPACING, VIEWPORT } from '../../ui-style-constants'
-import { StyledText } from '../StyledText'
-import { ListItemDescriptor } from './ListItemChildren/ListItemDescriptor'
-
-import type { Meta, StoryObj } from '@storybook/react'
-import type { DropdownMenuProps } from '../../molecules'
-
-import exampleImage from '../../images/labware/measurement-guide/images/spacing/spacing-well-rectangular@3x.png'
-
-const meta: Meta<typeof ListItemComponent> = {
-  title: 'Helix/Atoms/ListItem',
-  component: ListItemComponent,
-  argTypes: {
-    type: {
-      control: {
-        type: 'select',
-        options: [
-          'error',
-          'default',
-          'success',
-          'warning',
-          'unavailable',
-          'defaultOnColor',
-          'successOnColor',
-          'warningOnColor',
-          'errorOnColor',
-        ],
-      },
-    },
-  },
-  parameters: VIEWPORT.touchScreenViewport,
-}
-
-export default meta
-
-type Story = StoryObj<typeof ListItemComponent>
-
-export const ListItem: Story = {
-  args: {
-    type: 'default',
-    children: (
-      <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
-        <StyledText as="p">
-          Slot Component: Replace me using the component panel.
-        </StyledText>
-        <StyledText as="p">
-          Slot Component: Replace me using the component panel.
-        </StyledText>
-        <StyledText as="p">
-          Slot Component: Replace me using the component panel.
-        </StyledText>
-      </Flex>
-    ),
-  },
-}
-
-export const ListItemDescriptorDefault: Story = {
-  args: {
-    type: 'default',
-    children: (
-      <ListItemDescriptor
-        type="large"
-        content={<div>mock content</div>}
-        description={<div>mock description</div>}
-      />
-    ),
-  },
-}
-
-export const ListItemDescriptorMini: Story = {
-  args: {
-    type: 'default',
-    children: (
-      <ListItemDescriptor
-        type="default"
-        content={<div>mock content</div>}
-        description={<div>mock description</div>}
-      />
-    ),
-  },
-}
-
-export const ListItemOnColorVariants: Story = {
-  render: args => (
-    <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>
-      <ListItemComponent type="defaultOnColor">
-        <StyledText as="p">Default on Color Variant</StyledText>
-      </ListItemComponent>
-      <ListItemComponent type="successOnColor">
-        <StyledText as="p">Success on Color Variant</StyledText>
-      </ListItemComponent>
-      <ListItemComponent type="warningOnColor">
-        <StyledText as="p">Warning on Color Variant</StyledText>
-      </ListItemComponent>
-      <ListItemComponent type="errorOnColor">
-        <StyledText as="p">Error on Color Variant</StyledText>
-      </ListItemComponent>
-    </Flex>
-  ),
-}
-
-const dropdownProps: DropdownMenuProps = {
-  filterOptions: [
-    { name: '1', value: '1' },
-    { name: '2', value: '2' },
-  ],
-  onClick: () => {},
-  currentOption: { name: '1', value: '1' },
-  dropdownType: 'neutral',
-}
-export const ListItemCustomizeImage: Story = {
-  args: {
-    type: 'default',
-    children: (
-      <ListItemCustomize
-        header="Header"
-        leftHeaderItem={<img width="60px" height="60px" src={exampleImage} />}
-        linkText="Link text"
-        label="Label"
-        dropdown={dropdownProps}
-        onClick={() => {}}
-      />
-    ),
-  },
-}

package/src/atoms/ListItem/ListItemChildren/ListItemCustomize.tsx

@@ -1,84 +0,0 @@
-import { css } from 'styled-components'
-
-import { COLORS } from '../../../helix-design-system'
-import { DropdownMenu } from '../../../molecules/DropdownMenu'
-import { Flex, Link } from '../../../primitives'
-import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../../styles'
-import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
-import { StyledText } from '../../StyledText'
-import { Tag } from '../../Tag/index'
-
-import type { DropdownMenuProps } from '../../../molecules/DropdownMenu'
-import type { TagProps } from '../../Tag/index'
-
-interface ListItemCustomizeProps {
-  header: string
-  //  this is either an image or an icon
-  leftHeaderItem?: JSX.Element
-  onClick?: () => void
-  linkText?: string
-  //  these are the middle prop options
-  label?: string
-  dropdown?: DropdownMenuProps
-  tag?: TagProps
-  /** optional placement of the menu */
-  menuPlacement?: 'auto' | 'top' | 'bottom'
-}
-
-export function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element {
-  const {
-    header,
-    leftHeaderItem,
-    onClick,
-    label,
-    linkText,
-    dropdown,
-    tag,
-    menuPlacement = 'auto',
-  } = props
-  return (
-    <Flex
-      width="100%"
-      alignItems={ALIGN_CENTER}
-      padding={SPACING.spacing12}
-      gridGap={SPACING.spacing8}
-    >
-      <Flex gridGap={SPACING.spacing16} width="50%" alignItems={ALIGN_CENTER}>
-        {leftHeaderItem != null ? (
-          <Flex size="3.75rem">{leftHeaderItem}</Flex>
-        ) : null}
-        <StyledText desktopStyle="bodyDefaultSemiBold">{header}</StyledText>
-      </Flex>
-      <Flex
-        width={onClick != null && linkText != null ? '40%' : '50%'}
-        gridGap={SPACING.spacing8}
-        alignItems={ALIGN_CENTER}
-        justifyContent={JUSTIFY_CENTER}
-      >
-        {label != null ? (
-          <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
-            {label}
-          </StyledText>
-        ) : null}
-        {dropdown != null ? (
-          <DropdownMenu {...dropdown} menuPlacement={menuPlacement} />
-        ) : null}
-        {tag != null ? <Tag {...tag} /> : null}
-      </Flex>
-      {onClick != null && linkText != null ? (
-        <Link role="button" onClick={onClick} css={LINK_STYLE}>
-          <StyledText desktopStyle="bodyDefaultRegular">{linkText}</StyledText>
-        </Link>
-      ) : null}
-    </Flex>
-  )
-}
-
-const LINK_STYLE = css`
-  width: 10%;
-  text-decoration: ${TYPOGRAPHY.textDecorationUnderline};
-  color: ${COLORS.grey60};
-  &:hover {
-    color: ${COLORS.grey40};
-  }
-`

package/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx

@@ -1,46 +0,0 @@
-import { Flex } from '../../../primitives'
-import {
-  ALIGN_CENTER,
-  DIRECTION_COLUMN,
-  DIRECTION_ROW,
-  JUSTIFY_FLEX_START,
-  JUSTIFY_SPACE_BETWEEN,
-} from '../../../styles'
-import { SPACING } from '../../../ui-style-constants'
-
-interface ListItemDescriptorProps {
-  /** ListItemDescriptor size type */
-  type: 'default' | 'large'
-  /** ListItemDescriptor description */
-  description: JSX.Element
-  /** ListItemDescriptor content */
-  content: JSX.Element
-  /** ListItemDescriptor flex direction */
-  changeFlexDirection?: boolean
-}
-
-export const ListItemDescriptor = (
-  props: ListItemDescriptorProps
-): JSX.Element => {
-  const { description, content, type, changeFlexDirection = false } = props
-  let justifyContent = 'none'
-  if (type === 'default' && changeFlexDirection) {
-    justifyContent = JUSTIFY_FLEX_START
-  } else if (type === 'default') {
-    justifyContent = JUSTIFY_SPACE_BETWEEN
-  }
-
-  return (
-    <Flex
-      flexDirection={changeFlexDirection ? DIRECTION_COLUMN : DIRECTION_ROW}
-      gridGap={SPACING.spacing8}
-      width="100%"
-      alignItems={ALIGN_CENTER}
-      justifyContent={justifyContent}
-      padding={type === 'default' ? SPACING.spacing4 : SPACING.spacing12}
-    >
-      {description}
-      {content}
-    </Flex>
-  )
-}

package/src/atoms/ListItem/ListItemChildren/index.ts

@@ -1,2 +0,0 @@
-export * from './ListItemCustomize'
-export * from './ListItemDescriptor'

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

@@ -1,104 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import '@testing-library/jest-dom/vitest'
-
-import { fireEvent, screen } from '@testing-library/react'
-
-import { ListItem } from '..'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { renderWithProviders } from '../../../testing/utils'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof ListItem>) =>
-  renderWithProviders(<ListItem {...props} />)
-
-describe('ListItem', () => {
-  let props: ComponentProps<typeof ListItem>
-
-  beforeEach(() => {
-    props = {
-      type: 'error',
-      children: <div>mock listitem content</div>,
-      onClick: vi.fn(),
-    }
-  })
-
-  it('should render correct style - error', () => {
-    render(props)
-    screen.getByText('mock listitem content')
-    const listItem = screen.getByTestId('ListItem_error')
-    expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.red35}`)
-    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`)
-  })
-
-  it('should render correct style - default', () => {
-    props.type = 'default'
-    render(props)
-    screen.getByText('mock listitem content')
-    const listItem = screen.getByTestId('ListItem_default')
-    expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.grey20}`)
-    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`)
-  })
-
-  it('should render correct style - success', () => {
-    props.type = 'success'
-    render(props)
-    screen.getByText('mock listitem content')
-    const listItem = screen.getByTestId('ListItem_success')
-    expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.green35}`)
-    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`)
-  })
-
-  it('should render correct style - warning', () => {
-    props.type = 'warning'
-    render(props)
-    screen.getByText('mock listitem content')
-    const listItem = screen.getByTestId('ListItem_warning')
-    expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.yellow35}`)
-    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`)
-  })
-
-  it('should render correct style - defaultOnColor', () => {
-    props.type = 'defaultOnColor'
-    render(props)
-    screen.getByText('mock listitem content')
-    const listItem = screen.getByTestId('ListItem_defaultOnColor')
-    expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.white}`)
-    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`)
-  })
-
-  it('should render correct style - successOnColor', () => {
-    props.type = 'successOnColor'
-    render(props)
-    screen.getByText('mock listitem content')
-    const listItem = screen.getByTestId('ListItem_successOnColor')
-    expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.green20}`)
-    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`)
-  })
-
-  it('should render correct style - warningOnColor', () => {
-    props.type = 'warningOnColor'
-    render(props)
-    screen.getByText('mock listitem content')
-    const listItem = screen.getByTestId('ListItem_warningOnColor')
-    expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.yellow20}`)
-    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`)
-  })
-
-  it('should render correct style - errorOnColor', () => {
-    props.type = 'errorOnColor'
-    render(props)
-    screen.getByText('mock listitem content')
-    const listItem = screen.getByTestId('ListItem_errorOnColor')
-    expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.red20}`)
-    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`)
-  })
-
-  it('should call on click when pressed', () => {
-    render(props)
-    const listItem = screen.getByText('mock listitem content')
-    fireEvent.click(listItem)
-    expect(props.onClick).toHaveBeenCalled()
-  })
-})

package/src/atoms/ListItem/index.tsx

@@ -1,107 +0,0 @@
-import { css } from 'styled-components'
-
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Flex } from '../../primitives'
-import { FLEX_MAX_CONTENT } from '../../styles'
-import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
-
-import type { ReactNode } from 'react'
-import type { StyleProps } from '../../primitives'
-
-export * from './ListItemChildren'
-
-export type ListItemType =
-  | 'error'
-  | 'default'
-  | 'success'
-  | 'warning'
-  | 'unavailable'
-  | 'defaultOnColor'
-  | 'successOnColor'
-  | 'warningOnColor'
-  | 'errorOnColor'
-
-interface ListItemProps extends StyleProps {
-  /** ListItem state type */
-  type: ListItemType
-  /** ListItem contents */
-  children: ReactNode
-  onClick?: () => void
-  onMouseEnter?: () => void
-  onMouseLeave?: () => void
-}
-
-const LISTITEM_PROPS_BY_TYPE: Record<
-  ListItemType,
-  { backgroundColor: string; color?: string }
-> = {
-  error: {
-    backgroundColor: COLORS.red35,
-  },
-  default: {
-    backgroundColor: COLORS.grey20,
-  },
-  success: {
-    backgroundColor: COLORS.green35,
-  },
-  warning: {
-    backgroundColor: COLORS.yellow35,
-  },
-  unavailable: {
-    backgroundColor: COLORS.grey20,
-    color: COLORS.grey40,
-  },
-  defaultOnColor: {
-    backgroundColor: COLORS.white,
-  },
-  successOnColor: {
-    backgroundColor: COLORS.green20,
-  },
-  warningOnColor: {
-    backgroundColor: COLORS.yellow20,
-  },
-  errorOnColor: {
-    backgroundColor: COLORS.red20,
-  },
-}
-
-/*
-  ListItem is used in ODD and helix
-**/
-export function ListItem(props: ListItemProps): JSX.Element {
-  const {
-    type,
-    children,
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
-    ...styleProps
-  } = props
-  const listItemProps = LISTITEM_PROPS_BY_TYPE[type]
-
-  const LIST_ITEM_STYLE = css`
-    background-color: ${props.backgroundColor ?? listItemProps.backgroundColor};
-    color: ${listItemProps.color ?? COLORS.black90};
-    width: 100%;
-    height: ${FLEX_MAX_CONTENT};
-    border-radius: ${BORDERS.borderRadius4};
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      padding: ${SPACING.spacing16} ${SPACING.spacing24};
-      border-radius: ${BORDERS.borderRadius12};
-    }
-  `
-
-  return (
-    <Flex
-      data-testid={`ListItem_${type}`}
-      onClick={onClick}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      css={LIST_ITEM_STYLE}
-      {...styleProps}
-    >
-      {children}
-    </Flex>
-  )
-}