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

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>
-  )
-}

package/src/atoms/ListTable/ListTable.stories.tsx

@@ -1,70 +0,0 @@
-import { css } from 'styled-components'
-
-import { Flex, VIEWPORT } from '@opentrons/components'
-
-import { ListTable as ListTableComponent } from '.'
-
-import type { Meta, Story } from '@storybook/react'
-import type { ComponentProps } from 'react'
-
-export default {
-  title: 'Helix/Atoms/ListTable',
-  component: ListTableComponent,
-  argTypes: {
-    headers: {
-      control: 'array',
-      description: 'Headers for the list table',
-    },
-    tagCount: {
-      control: { type: 'range', min: 1, max: 99, step: 1 },
-      description:
-        'Number of Tag components to include as example child components.',
-    },
-    devNote: {
-      description:
-        'Prefer this component over SubListTable, since it contains the semantic HTML table tags. Include tr tags in the children when applicable. If a table is nested in ListTable, use SubListTable for the nested table.',
-    },
-  },
-  parameters: VIEWPORT.touchScreenViewport,
-} as Meta
-
-interface ListTableStoryProps
-  extends ComponentProps<typeof ListTableComponent> {
-  tagCount: number
-}
-
-const Template: Story<ListTableStoryProps> = args => {
-  const { tagCount, ...listTableProps } = args
-
-  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-  const renderRows = () => {
-    return Array.from({ length: tagCount }, (_, i) => {
-      return (
-        <Flex key={`tag-${i}`} width="100%">
-          <Flex css={CHILD_STYLE}>Child Component</Flex>
-        </Flex>
-      )
-    })
-  }
-
-  return (
-    <ListTableComponent {...listTableProps}>{renderRows()}</ListTableComponent>
-  )
-}
-
-export const ListTable = Template.bind({})
-ListTable.args = {
-  headers: ['Name', 'Type', 'Description'],
-  tagCount: 3,
-}
-
-export const ListTableNoHeader = Template.bind({})
-ListTableNoHeader.args = {
-  tagCount: 3,
-}
-
-const CHILD_STYLE = css`
-  width: 100%;
-  background-color: #a864ff10;
-  border: 2px dashed #a864ff;
-`

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

@@ -1,81 +0,0 @@
-import { screen } from '@testing-library/react'
-import { beforeEach, describe, it } from 'vitest'
-
-import { ListTable } from '..'
-import { renderWithProviders } from '../../../testing/utils'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof ListTable>) => {
-  return renderWithProviders(<ListTable {...props} />)[0]
-}
-
-describe('ListTable', () => {
-  let props: ComponentProps<typeof ListTable>
-
-  beforeEach(() => {
-    props = {
-      children: 'Table content',
-    }
-  })
-
-  it('renders children correctly', () => {
-    render(props)
-
-    screen.getByText('Table content')
-  })
-
-  it('renders with single header correctly', () => {
-    props = {
-      children: 'Table content',
-      headers: ['Header 1', undefined, undefined],
-    }
-
-    render(props)
-
-    screen.getByText('Table content')
-    screen.getByText('Header 1')
-  })
-
-  it('renders with multiple headers correctly', () => {
-    props = {
-      children: 'Table content',
-      headers: ['Header 1', 'Header 2', 'Header 3'],
-    }
-    render(props)
-
-    screen.getByText('Table content')
-    screen.getByText('Header 1')
-    screen.getByText('Header 2')
-    screen.getByText('Header 3')
-  })
-
-  it('renders without headers correctly', () => {
-    props = {
-      children: 'Table content',
-      headers: undefined,
-    }
-
-    render(props)
-
-    screen.getByText('Table content')
-  })
-
-  it('renders multiple children correctly', () => {
-    props = {
-      children: (
-        <>
-          <div>First child</div>
-          <div>Second child</div>
-          <div>Third child</div>
-        </>
-      ),
-    }
-
-    render(props)
-
-    screen.getByText('First child')
-    screen.getByText('Second child')
-    screen.getByText('Third child')
-  })
-})

package/src/atoms/ListTable/index.tsx

@@ -1,92 +0,0 @@
-import { css } from 'styled-components'
-
-import { COLORS } from '../../helix-design-system'
-import {
-  DIRECTION_COLUMN,
-  DISPLAY_FLEX,
-  DISPLAY_GRID,
-  FLEX_MAX_CONTENT,
-} from '../../styles'
-import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
-import { StyledText } from '../StyledText'
-
-import type { FlattenSimpleInterpolation } from 'styled-components'
-import type { ReactNode } from 'react'
-
-export interface ListTableProps {
-  children: ReactNode
-  headers?: [ReactNode?, ReactNode?, ReactNode?, ReactNode?] // maximum of 4
-}
-
-// ListTable contains the semantic HTML table identity.
-// This is a table-focused version of SubListTable, and children should include proper
-// <tr> tags when applicable.
-export function ListTable({ headers, children }: ListTableProps): JSX.Element {
-  const numHeaders = headers ? headers.filter(Boolean).length : 0
-
-  return (
-    <table css={TABLE_STYLE}>
-      {headers != null && headers.some(header => header !== undefined) && (
-        <thead>
-          <tr css={trStyle(numHeaders)}>
-            {headers.map(header => (
-              <th key={header + Math.random().toString()} css={TH_STYLE}>
-                {header && (
-                  <StyledText
-                    oddStyle="bodyTextSemiBold"
-                    desktopStyle="bodyDefaultRegular"
-                    css={HEADER_ITEM_STYLE}
-                  >
-                    {header}
-                  </StyledText>
-                )}
-              </th>
-            ))}
-          </tr>
-        </thead>
-      )}
-      <tbody css={TBODY_STYLE}>{children}</tbody>
-    </table>
-  )
-}
-
-const TABLE_STYLE = css`
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-`
-
-// TODO(jh, 03-19-25): Work with Design to decide whether they want the
-//  column spacing to be opinionated. Various component designs conflict with feature designs (ex, LPC).
-const trStyle = (numHeaders: number): FlattenSimpleInterpolation => css`
-  display: ${DISPLAY_GRID};
-  grid-template-columns: ${numHeaders === 3
-    ? `${FLEX_MAX_CONTENT} 1fr ${FLEX_MAX_CONTENT}`
-    : `repeat(${numHeaders}, 1fr)`};
-  gap: ${SPACING.spacing24};
-
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    grid-template-columns: repeat(${numHeaders}, 1fr);
-  }
-`
-
-const TH_STYLE = css`
-  padding: 0 ${SPACING.spacing12};
-  text-align: left;
-  font-weight: normal;
-`
-
-const TBODY_STYLE = css`
-  display: ${DISPLAY_FLEX};
-  flex-direction: ${DIRECTION_COLUMN};
-  gap: ${SPACING.spacing4};
-  padding-top: ${SPACING.spacing8};
-
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    gap: ${SPACING.spacing8};
-  }
-`
-
-const HEADER_ITEM_STYLE = css`
-  color: ${COLORS.grey60};
-`

package/src/atoms/MenuList/MenuItem.stories.tsx

@@ -1,30 +0,0 @@
-import { STYLE_PROPS } from '../../primitives'
-import { VIEWPORT } from '../../ui-style-constants'
-import { MenuItem as MenuItemComponent } from './MenuItem'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof MenuItemComponent> = {
-  title: 'Helix/Atoms/MenuItem',
-  component: MenuItemComponent,
-  parameters: VIEWPORT.touchScreenViewport,
-  argTypes: {
-    // Disable all StyleProps
-    ...Object.fromEntries(
-      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
-        prop,
-        { table: { disable: true } },
-      ])
-    ),
-  },
-}
-export default meta
-
-type Story = StoryObj<typeof MenuItemComponent>
-
-export const MenuItem: Story = {
-  args: {
-    children: 'Example menu btn',
-    disabled: false,
-  },
-}

package/src/atoms/MenuList/MenuItem.tsx

@@ -1,58 +0,0 @@
-import styled from 'styled-components'
-
-import { COLORS } from '../../helix-design-system'
-import { ALIGN_CENTER, CURSOR_POINTER } from '../../styles'
-import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-
-import type { StyleProps } from '../../primitives'
-
-interface ButtonProps extends StyleProps {
-  /** optional isAlert boolean to turn the background red, only seen in ODD */
-  isAlert?: boolean
-}
-export const MenuItem = styled.button<ButtonProps>`
-  cursor: ${CURSOR_POINTER};
-  text-align: ${TYPOGRAPHY.textAlignLeft};
-  font-size: ${TYPOGRAPHY.fontSizeP};
-  background-color: ${COLORS.transparent};
-  color: ${COLORS.black90};
-  padding: ${SPACING.spacing8} ${SPACING.spacing12} ${SPACING.spacing8}
-    ${SPACING.spacing12};
-  border: ${props => (props.border != null ? props.border : 'inherit')};
-  border-radius: ${props =>
-    props.borderRadius != null ? props.borderRadius : 'inherit'};
-
-  &:hover {
-    background-color: ${COLORS.blue10};
-  }
-
-  &:disabled {
-    background-color: ${COLORS.transparent};
-    color: ${COLORS.grey40};
-  }
-
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    align-items: ${ALIGN_CENTER};
-    text-align: ${TYPOGRAPHY.textAlignCenter};
-    font-size: ${TYPOGRAPHY.fontSize28};
-    background-color: ${({ isAlert }) =>
-      isAlert != null ? COLORS.red50 : COLORS.transparent};
-    color: ${({ isAlert }) =>
-      isAlert != null ? COLORS.white : COLORS.black90};
-    padding: ${SPACING.spacing24};
-    height: 5.5rem;
-    line-height: ${TYPOGRAPHY.lineHeight36};
-    &:hover,
-    &:active {
-      background-color: ${({ isAlert }) =>
-        isAlert != null ? COLORS.red50 : COLORS.grey35};
-    }
-
-    &:disabled {
-      background-color: ${({ isAlert }) =>
-        isAlert != null ? COLORS.red50 : COLORS.transparent};
-      color: ${({ isAlert }) =>
-        isAlert != null ? COLORS.white : COLORS.grey50};
-    }
-  }
-`

package/src/atoms/MenuList/MenuList.stories.tsx

@@ -1,32 +0,0 @@
-import { action } from '@storybook/addon-actions'
-
-import { MenuList as MenuListComponent } from './index'
-import { MenuItem } from './MenuItem'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const menuBtn = 'example menu btn'
-
-const meta: Meta<typeof MenuListComponent> = {
-  title: 'Helix/Atoms/MenuList',
-  component: MenuListComponent,
-  args: {
-    onClick: action('clicked'),
-  },
-}
-
-export default meta
-
-type Story = StoryObj<typeof MenuListComponent>
-
-export const MenuList: Story = {
-  args: {
-    children: (
-      <>
-        <MenuItem>{menuBtn}</MenuItem>
-        <MenuItem>{menuBtn}</MenuItem>
-        <MenuItem>{menuBtn}</MenuItem>
-      </>
-    ),
-  },
-}

package/src/atoms/MenuList/OverflowBtn.stories.tsx

@@ -1,17 +0,0 @@
-import { OverflowBtn as OverflowBtnComponent } from './OverflowBtn'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof OverflowBtnComponent> = {
-  title: 'Helix/Atoms/MenuList/OverflowBtn',
-  component: OverflowBtnComponent,
-}
-export default meta
-
-type Story = StoryObj<typeof OverflowBtnComponent>
-
-export const OverflowBtn: Story = {
-  args: {
-    title: 'overflow btn with all the states',
-  },
-}

package/src/atoms/MenuList/OverflowBtn.tsx

@@ -1,78 +0,0 @@
-import { forwardRef } from 'react'
-import { css } from 'styled-components'
-
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Btn } from '../../primitives'
-import { SPACING } from '../../ui-style-constants'
-
-import type { ComponentProps, ForwardedRef, ReactNode } from 'react'
-
-interface OverflowBtnProps extends ComponentProps<typeof Btn> {
-  fillColor?: string
-}
-export const OverflowBtn: (
-  props: OverflowBtnProps,
-  ref: ForwardedRef<HTMLInputElement>
-) => ReactNode = forwardRef(
-  (
-    props: OverflowBtnProps,
-    ref: ForwardedRef<HTMLInputElement>
-  ): JSX.Element => {
-    const { fillColor, ...restProps } = props
-    return (
-      <Btn
-        css={css`
-          border-radius: ${BORDERS.borderRadius4};
-          max-height: ${SPACING.spacing32};
-
-          &:hover {
-            background-color: ${COLORS.grey30};
-          }
-          &:hover circle {
-            fill: ${COLORS.grey55};
-          }
-
-          &:active,
-          &:focus {
-            background-color: ${COLORS.grey35};
-          }
-
-          &:active circle,
-          &:focus circle {
-            fill: ${COLORS.grey60};
-          }
-
-          &:focus-visible {
-            box-shadow: ${`0 0 0 3px ${COLORS.yellow50}`};
-            background-color: ${'transparent'};
-          }
-
-          &:focus-visible circle {
-            fill: ${COLORS.grey60};
-          }
-
-          &:disabled circle {
-            fill: ${COLORS.grey40};
-          }
-          &:disabled {
-            background-color: transparent;
-          }
-        `}
-        {...restProps}
-        ref={ref}
-      >
-        <svg
-          width="19"
-          height="31"
-          viewBox="0 0 19 31"
-          fill={fillColor ?? COLORS.grey50}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle cx="9.5" cy="9.5" r="1.5" />
-          <circle cx="9.5" cy="15.5" r="1.5" />
-          <circle cx="9.5" cy="21.5" r="1.5" />
-        </svg>
-      </Btn>
-    )
-  }
-)