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

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,76 +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={OVERFLOW_MENU_BUTTON_STYLE} {...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>
-    )
-  }
-)
-
-const OVERFLOW_MENU_BUTTON_STYLE = 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: ${COLORS.transparent};
-  }
-
-  &:focus-visible circle {
-    fill: ${COLORS.grey60};
-  }
-
-  &:disabled circle {
-    fill: ${COLORS.grey40};
-  }
-  &:disabled {
-    background-color: ${COLORS.transparent};
-  }
-`

package/src/atoms/MenuList/__tests__/MenuItem.test.tsx

@@ -1,50 +0,0 @@
-import { screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it } from 'vitest'
-
-import { COLORS } from '../../../helix-design-system'
-import { renderWithProviders } from '../../../testing/utils'
-import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
-import { MenuItem } from '../MenuItem'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof MenuItem>) => {
-  return renderWithProviders(<MenuItem {...props} />)[0]
-}
-
-describe('MenuItem', () => {
-  let props: ComponentProps<typeof MenuItem>
-
-  beforeEach(() => {
-    props = {
-      children: 'mockMenuItem',
-      isAlert: false,
-    }
-  })
-
-  it('render button with styles', () => {
-    render(props)
-    const menuItem = screen.getByText('mockMenuItem')
-    expect(menuItem).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(menuItem).toHaveStyle(`color: ${COLORS.black90}`)
-    expect(menuItem)
-      .toHaveStyle(`padding: ${SPACING.spacing8} ${SPACING.spacing12} ${SPACING.spacing8}
-    ${SPACING.spacing12}`)
-    expect(menuItem).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeP}`)
-  })
-
-  it('render button with styles disabled', () => {
-    props = {
-      ...props,
-      disabled: true,
-    }
-    render(props)
-    const menuItem = screen.getByText('mockMenuItem')
-    expect(menuItem).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(menuItem).toHaveStyle(`color: ${COLORS.grey40}`)
-    expect(menuItem)
-      .toHaveStyle(`padding: ${SPACING.spacing8} ${SPACING.spacing12} ${SPACING.spacing8}
-    ${SPACING.spacing12}`)
-    expect(menuItem).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeP}`)
-  })
-})

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

@@ -1,37 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { MenuList } from '..'
-import { renderWithProviders } from '../../../testing/utils'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof MenuList>) => {
-  return renderWithProviders(<MenuList {...props} />)[0]
-}
-
-const mockBtn = <div key="fakeKey">mockBtn</div>
-
-describe('MenuList', () => {
-  let props: ComponentProps<typeof MenuList>
-  beforeEach(() => {
-    props = {
-      children: mockBtn,
-    }
-  })
-
-  it('renders a child not on device', () => {
-    render(props)
-    screen.getByText('mockBtn')
-  })
-  it('renders isOnDevice child, clicking background overlay calls onClick', () => {
-    props = {
-      ...props,
-      isOnDevice: true,
-      onClick: vi.fn(),
-    }
-    render(props)
-    fireEvent.click(screen.getByLabelText('BackgroundOverlay_ModalShell'))
-    expect(props.onClick).toHaveBeenCalled()
-  })
-})

package/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx

@@ -1,34 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
-
-import { COLORS } from '../../../helix-design-system'
-import { renderWithProviders } from '../../../testing/utils'
-import { OverflowBtn } from '../OverflowBtn'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof OverflowBtn>) => {
-  return renderWithProviders(<OverflowBtn {...props} />)[0]
-}
-
-describe('OverflowBtn', () => {
-  it('renders a clickable button', () => {
-    const handleClick = vi.fn()
-    render({
-      onClick: handleClick,
-    })
-
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-    expect(handleClick).toHaveBeenCalledTimes(1)
-  })
-
-  it('renders a hover state', () => {
-    render({
-      onClick: vi.fn(),
-    })
-    expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.transparent}`
-    )
-  })
-})

package/src/atoms/MenuList/index.tsx

@@ -1,50 +0,0 @@
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { ModalShell } from '../../modals'
-import { Flex } from '../../primitives'
-import {
-  DIRECTION_COLUMN,
-  JUSTIFY_CENTER,
-  POSITION_ABSOLUTE,
-} from '../../styles'
-import { SPACING } from '../../ui-style-constants'
-
-import type { MouseEventHandler, ReactNode } from 'react'
-
-interface MenuListProps {
-  children: ReactNode
-  isOnDevice?: boolean
-  onClick?: MouseEventHandler
-}
-
-export const MenuList = (props: MenuListProps): JSX.Element | null => {
-  const { children, isOnDevice = false, onClick = null } = props
-  return isOnDevice && onClick != null ? (
-    <ModalShell
-      borderRadius={BORDERS.borderRadius16}
-      width="max-content"
-      onOutsideClick={onClick}
-    >
-      <Flex
-        boxShadow={BORDERS.shadowSmall}
-        flexDirection={DIRECTION_COLUMN}
-        justifyContent={JUSTIFY_CENTER}
-      >
-        {children}
-      </Flex>
-    </ModalShell>
-  ) : (
-    <Flex
-      borderRadius="4px 4px 0px 0px"
-      zIndex={10}
-      boxShadow="0px 1px 3px rgba(0, 0, 0, 0.2)"
-      position={POSITION_ABSOLUTE}
-      backgroundColor={COLORS.white}
-      top="2.6rem"
-      right={`calc(50% + ${SPACING.spacing4})`}
-      flexDirection={DIRECTION_COLUMN}
-      width="max-content"
-    >
-      {children}
-    </Flex>
-  )
-}