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

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

@@ -0,0 +1,104 @@
+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

@@ -0,0 +1,107 @@
+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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,92 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,78 @@
+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>
+    )
+  }
+)