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

package/src/molecules/LiquidIcon/LiquidIcon.stories.tsx

@@ -1,54 +0,0 @@
-import { LiquidIcon } from '.'
-import { customViewports } from '../../../../.storybook/preview'
-import { Flex } from '../../primitives'
-import { SPACING } from '../../ui-style-constants'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof LiquidIcon> = {
-  title: 'Helix/Molecules/LiquidIcon',
-  argTypes: {
-    color: {
-      control: {
-        type: 'text',
-      },
-    },
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: ['small', 'medium'],
-    },
-  },
-  component: LiquidIcon,
-  parameters: {
-    viewport: {
-      viewports: customViewports,
-      defaultViewport: 'desktopSmall',
-    },
-  },
-  decorators: [
-    Story => (
-      <Flex padding={SPACING.spacing16} width="15rem" height="5rem">
-        <Story />
-      </Flex>
-    ),
-  ],
-}
-export default meta
-type Story = StoryObj<typeof LiquidIcon>
-
-export const MediumIcon: Story = {
-  args: {
-    size: 'medium',
-    color: 'green',
-    onClick: () => {},
-  },
-}
-
-export const SmallIcon: Story = {
-  args: {
-    color: 'red',
-    size: 'small',
-  },
-}

package/src/molecules/LiquidIcon/__tests__/LiquidIcon.test.tsx

@@ -1,51 +0,0 @@
-import { screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-import { LiquidIcon } from '..'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { renderWithProviders } from '../../../testing/utils'
-import { SPACING } from '../../../ui-style-constants'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof LiquidIcon>) => {
-  return renderWithProviders(<LiquidIcon {...props} />)
-}
-
-describe('LiquidIcon', () => {
-  let props: ComponentProps<typeof LiquidIcon>
-
-  it('should render the proper style for large icon', () => {
-    props = {
-      size: 'medium',
-      color: COLORS.red50,
-    }
-    render(props)
-    const LiquidIcon = screen.getByTestId(`LiquidIcon_${COLORS.red50}`)
-    expect(LiquidIcon).toHaveStyle(`padding: ${SPACING.spacing12}`)
-    expect(LiquidIcon).toHaveStyle('height: max-content')
-    expect(LiquidIcon).toHaveStyle('width: max-content')
-    expect(LiquidIcon).toHaveStyle(`background-color: ${COLORS.white}`)
-    expect(LiquidIcon).toHaveStyle(`border-style: ${BORDERS.styleSolid}`)
-    expect(LiquidIcon).toHaveStyle(`border-width: 1px`)
-    expect(LiquidIcon).toHaveStyle(`border-color: ${COLORS.grey30}`)
-    expect(LiquidIcon).toHaveStyle(`border-radius: ${BORDERS.borderRadius4}`)
-  })
-
-  it('should render the proper style for large icon', () => {
-    props = {
-      size: 'small',
-      color: COLORS.blue50,
-    }
-    render(props)
-    const LiquidIcon = screen.getByTestId(`LiquidIcon_${COLORS.blue50}`)
-    expect(LiquidIcon).toHaveStyle(`padding: ${SPACING.spacing8}`)
-    expect(LiquidIcon).toHaveStyle('height: max-content')
-    expect(LiquidIcon).toHaveStyle('width: max-content')
-    expect(LiquidIcon).toHaveStyle(`background-color: ${COLORS.white}`)
-    expect(LiquidIcon).toHaveStyle(`border-style: ${BORDERS.styleSolid}`)
-    expect(LiquidIcon).toHaveStyle(`border-width: 1px`)
-    expect(LiquidIcon).toHaveStyle(`border-color: ${COLORS.grey30}`)
-    expect(LiquidIcon).toHaveStyle(`border-radius: ${BORDERS.borderRadius4}`)
-  })
-})

package/src/molecules/LiquidIcon/index.tsx

@@ -1,74 +0,0 @@
-import { css } from 'styled-components'
-
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { Btn, Flex } from '../../primitives'
-import { FLEX_MAX_CONTENT } from '../../styles'
-import { SPACING } from '../../ui-style-constants'
-
-type LiquidIconSize = 'xSmall' | 'small' | 'medium'
-
-export interface LiquidIconProps {
-  color: string
-  size?: LiquidIconSize
-  onClick?: () => void
-  hasError?: boolean
-}
-
-export function LiquidIcon(props: LiquidIconProps): JSX.Element {
-  const { color, size = 'small', onClick, hasError = false } = props
-
-  const sizeStylesMap: Record<
-    LiquidIconSize,
-    { iconSize: string; padding: string }
-  > = {
-    xSmall: { iconSize: SPACING.spacing6, padding: SPACING.spacing6 },
-    small: { iconSize: '0.5rem', padding: SPACING.spacing8 },
-    medium: { iconSize: '1rem', padding: SPACING.spacing12 },
-  }
-
-  const LIQUID_ICON_CONTAINER_STYLE = css`
-    height: max-content;
-    width: max-content;
-    background-color: ${COLORS.white};
-    border-style: ${BORDERS.styleSolid};
-    border-width: 1px;
-    border-color: ${hasError ? COLORS.red50 : COLORS.grey30};
-    border-radius: ${BORDERS.borderRadius4};
-
-    &:hover {
-      border-color: ${onClick != null ? COLORS.grey35 : COLORS.grey30};
-    }
-    &:active {
-      border-color: ${onClick != null ? COLORS.grey40 : COLORS.grey30};
-    }
-  `
-
-  const liquid = (
-    <Flex
-      css={LIQUID_ICON_CONTAINER_STYLE}
-      padding={sizeStylesMap[size].padding}
-      data-testid={`LiquidIcon_${color}`}
-    >
-      <Icon name="circle" color={color} size={sizeStylesMap[size].iconSize} />
-    </Flex>
-  )
-
-  return onClick != null ? (
-    <Btn
-      css={css`
-        width: ${FLEX_MAX_CONTENT};
-        &:focus-visible {
-          outline: 2px solid ${COLORS.white};
-          box-shadow: 0 0 0 4px ${COLORS.blue50};
-          border-radius: ${BORDERS.borderRadius4};
-        }
-      `}
-      onClick={onClick}
-    >
-      {liquid}
-    </Btn>
-  ) : (
-    liquid
-  )
-}

package/src/molecules/ListAccordion/ListAccordion.stories.tsx

@@ -1,128 +0,0 @@
-import { css } from 'styled-components'
-
-import {
-  Flex,
-  Icon,
-  RESPONSIVENESS,
-  Tag,
-  VIEWPORT,
-} from '@opentrons/components'
-
-import { ListAccordion as ListAccordionComponent } from '.'
-import { DISPLAY_FLEX, DISPLAY_GRID } from '../../styles'
-
-import type { Meta, Story } from '@storybook/react'
-import type { ComponentProps } from 'react'
-
-export default {
-  title: 'Helix/Molecules/ListAccordion',
-  component: ListAccordionComponent,
-  argTypes: {
-    alertKind: {
-      control: 'radio',
-      options: ['default', 'warning'],
-      description: 'Kind of alert, changes background color',
-    },
-    icon: {
-      control: 'text',
-      description:
-        'Name of icon to display (only shown when alertKind is default). Note that in code that a full Icon child component is passed, not a string.',
-    },
-    tagCount: {
-      control: { type: 'range', min: 1, max: 99, step: 1 },
-      description:
-        'Number of Tag components to include as example child components.',
-    },
-    headerText: {
-      control: 'text',
-      description:
-        'Text to display in the example Tag component header. NOTE: This is for Storybook ease-of-use only and overrides the "headerChild" behavior (which is what is used in practice in code).',
-    },
-    headerChild: {
-      control: '',
-      description: 'See header text. Does nothing in Storybook.',
-    },
-  },
-  parameters: VIEWPORT.touchScreenViewport,
-} as Meta
-
-interface ListAccordionStoryProps
-  extends Omit<
-    ComponentProps<typeof ListAccordionComponent>,
-    'headerChild' | 'children'
-  > {
-  tagCount: number
-  headerText: string
-}
-
-const Template: Story<ListAccordionStoryProps> = args => {
-  const { tagCount, headerText, icon, ...listAccordionProps } = args
-
-  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-  const renderRows = () => {
-    const rows = []
-    for (let i = 0; i < tagCount; i++) {
-      rows.push(
-        // @ts-expect-error Works.
-        <tr key={`tag-${i}`} css={TR_STYLE}>
-          {/* @ts-expect-error Works. */}
-          <td css={TD_STYLE}>
-            <Flex css={FLEX_STYLE}>
-              <Tag
-                text={`Tag ${i + 1}`}
-                type="default"
-                iconName={i % 2 === 0 ? 'alert-circle' : 'check-circle'}
-                iconPosition={i % 2 === 0 ? 'left' : 'right'}
-              />
-            </Flex>
-          </td>
-        </tr>
-      )
-    }
-    return rows
-  }
-
-  return (
-    <ListAccordionComponent
-      {...listAccordionProps}
-      headerChild={<Tag text={headerText} type="default" />}
-      // @ts-expect-error For storybook only, specify the icon name for convenience.
-      icon={icon != null ? <Icon name={icon} css={ICON_STYLE} /> : null}
-    >
-      {renderRows()}
-    </ListAccordionComponent>
-  )
-}
-
-export const ListAccordion = Template.bind({})
-ListAccordion.args = {
-  alertKind: 'default',
-  tagCount: 5,
-  headerText: 'Example Header',
-  tableHeaders: ['Name', 'Status', 'Description'],
-}
-
-const TR_STYLE = css`
-  width: 100%;
-  display: ${DISPLAY_GRID};
-  grid-template-columns: 1fr;
-`
-
-const TD_STYLE = css`
-  width: 100%;
-`
-
-const FLEX_STYLE = css`
-  width: 100%;
-  display: ${DISPLAY_FLEX};
-`
-
-const ICON_STYLE = css`
-  height: 20px;
-  width: 20px;
-
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    height: 32px;
-    width: 32px;
-  }
-`

package/src/molecules/ListAccordion/__tests__/ListAccordion.test.tsx

@@ -1,123 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { ListAccordion } from '..'
-import { ListTable } from '../../../atoms/ListTable'
-import { Icon } from '../../../icons'
-import { renderWithProviders } from '../../../testing/utils'
-
-import type { ComponentProps } from 'react'
-
-vi.mock('../../../atoms/ListTable')
-
-const render = (props: ComponentProps<typeof ListAccordion>) => {
-  return renderWithProviders(<ListAccordion {...props} />)[0]
-}
-
-describe('ListAccordion', () => {
-  let props: ComponentProps<typeof ListAccordion>
-
-  beforeEach(() => {
-    props = {
-      headerChild: <div>Header Content</div>,
-      alertKind: 'default',
-      tableHeaders: ['Header 1', 'Header 2', 'Header 3'],
-      children: <div>Accordion Content</div>,
-    }
-  })
-
-  it('renders the headerChild correctly', () => {
-    render(props)
-
-    screen.getByText('Header Content')
-  })
-
-  it('renders with ListTable component', () => {
-    render(props)
-
-    expect(ListTable).toHaveBeenCalledWith(
-      expect.objectContaining({
-        headers: props.tableHeaders,
-        children: props.children,
-      }),
-      expect.anything()
-    )
-  })
-
-  it('renders with default alertKind and no icon', () => {
-    render(props)
-
-    expect(screen.queryByTestId('alert-circle')).not.toBeInTheDocument()
-  })
-
-  it('renders with warning alertKind and shows alert icon', () => {
-    props.alertKind = 'warning'
-
-    render(props)
-
-    expect(screen.getByTestId('alert-circle')).toBeInTheDocument()
-  })
-
-  it('renders custom icon when provided and alertKind is default', () => {
-    const customIcon = <Icon name="info" data-testid="icon-info" />
-    props.icon = customIcon
-
-    render(props)
-
-    expect(screen.getByTestId('icon-info')).toBeInTheDocument()
-  })
-
-  it('prioritizes alert icon over custom icon when alertKind is warning', () => {
-    const customIcon = <Icon name="info" data-testid="icon-info" />
-    props.alertKind = 'warning'
-    props.icon = customIcon
-
-    render(props)
-
-    expect(screen.getByTestId('alert-circle')).toBeInTheDocument()
-    expect(screen.queryByTestId('icon-info')).not.toBeInTheDocument()
-  })
-
-  it('toggles open with proper icon state when header is clicked', () => {
-    render(props)
-
-    expect(screen.getByTestId('chevron-down')).toBeInTheDocument()
-
-    fireEvent.click(screen.getByText('Header Content'))
-
-    expect(screen.queryByTestId('chevron-down')).not.toBeInTheDocument()
-    expect(screen.getByTestId('chevron-up')).toBeInTheDocument()
-
-    fireEvent.click(screen.getByText('Header Content'))
-
-    expect(screen.getByTestId('chevron-down')).toBeInTheDocument()
-    expect(screen.queryByTestId('chevron-up')).not.toBeInTheDocument()
-  })
-
-  it('passes correct headers to ListTable', () => {
-    props.tableHeaders = ['Custom Header 1', 'Custom Header 2']
-
-    render(props)
-
-    expect(ListTable).toHaveBeenCalledWith(
-      expect.objectContaining({
-        headers: ['Custom Header 1', 'Custom Header 2'],
-      }),
-      expect.anything()
-    )
-  })
-
-  it('passes children to ListTable correctly', () => {
-    const testChildren = <div>Test Children Content</div>
-    props.children = testChildren
-
-    render(props)
-
-    expect(ListTable).toHaveBeenCalledWith(
-      expect.objectContaining({
-        children: testChildren,
-      }),
-      expect.anything()
-    )
-  })
-})

package/src/molecules/ListAccordion/index.tsx

@@ -1,182 +0,0 @@
-import { useState } from 'react'
-import { css } from 'styled-components'
-
-import { ListTable } from '../../atoms/ListTable'
-import { COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { Box, Flex } from '../../primitives'
-import {
-  ALIGN_CENTER,
-  CURSOR_POINTER,
-  DIRECTION_COLUMN,
-  JUSTIFY_SPACE_BETWEEN,
-} from '../../styles'
-import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
-
-import type { FlattenSimpleInterpolation } from 'styled-components'
-import type { ReactNode } from 'react'
-import type { ListTableProps } from '../../atoms/ListTable'
-
-const TRANSITION_STYLE = 'all 150ms ease-in'
-
-export type ListAccordionAlertKind = 'default' | 'warning'
-
-export interface ListAccordionProps {
-  /* The "above the fold" content that is always present regardless of open/close state. */
-  headerChild: ReactNode
-  alertKind: ListAccordionAlertKind
-  /* The "below the fold" table headers. */
-  tableHeaders: ListTableProps['headers']
-  /* The "below the fold" content. */
-  children: ListTableProps['children']
-  /* Specific alertKinds override an optional icon if supplied. */
-  icon?: JSX.Element
-}
-
-export function ListAccordion({
-  headerChild,
-  alertKind,
-  icon,
-  children,
-  tableHeaders,
-}: ListAccordionProps): JSX.Element {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <Flex css={containerStyle(alertKind)}>
-      <Flex
-        css={HEADER_CONTAINER_STYLE}
-        onClick={() => {
-          setIsOpen(!isOpen)
-        }}
-      >
-        <Flex css={HEADER_ICON_CHILD_STYLE}>
-          {alertKind !== 'default' ? (
-            <Icon
-              name="alert-circle"
-              css={ALERT_ICON_STYLE}
-              data-testid="alert-circle"
-            />
-          ) : (
-            icon
-          )}
-          <Box css={HEADER_CHILD_WRAPPER}>{headerChild}</Box>
-        </Flex>
-        <Icon
-          name={isOpen ? 'chevron-up' : 'chevron-down'}
-          data-testid={isOpen ? 'chevron-up' : 'chevron-down'}
-          css={CHEVRON_STYLE}
-        />
-      </Flex>
-      <Box css={contentContainerStyle(isOpen)}>
-        <ListTable headers={tableHeaders}>{children}</ListTable>
-      </Box>
-    </Flex>
-  )
-}
-
-const containerStyle = (
-  alertKind: ListAccordionAlertKind
-): FlattenSimpleInterpolation => {
-  return css`
-    width: 100%;
-    flex-direction: ${DIRECTION_COLUMN};
-    padding: ${SPACING.spacing12};
-    border-radius: ${SPACING.spacing8};
-    gap: ${SPACING.spacing8};
-    background-color: ${alertKind === 'warning'
-      ? COLORS.yellow30
-      : COLORS.grey20};
-    transition: ${TRANSITION_STYLE};
-
-    &:focus-visible {
-      border-color: ${COLORS.blue50};
-      border-width: 3px;
-    }
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      padding: ${SPACING.spacing24};
-      gap: ${SPACING.spacing24};
-      border-radius: ${SPACING.spacing16};
-      background-color: ${alertKind === 'warning'
-        ? COLORS.yellow35
-        : COLORS.grey35};
-
-      &:active {
-        background-color: ${alertKind === 'warning'
-          ? COLORS.yellow40
-          : COLORS.grey40};
-      }
-    }
-
-    @media not all and ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      &:hover {
-        background-color: ${alertKind === 'warning'
-          ? COLORS.yellow30
-          : COLORS.grey30};
-      }
-    }
-  `
-}
-
-const contentContainerStyle = (isOpen: boolean): FlattenSimpleInterpolation => {
-  return css`
-    width: 100%;
-    display: block;
-    max-height: ${isOpen ? '10000000px' : '0px'};
-    opacity: ${isOpen ? 1 : 0};
-    overflow: hidden;
-    margin-top: ${isOpen ? '0px' : `-${SPACING.spacing8}`};
-    transition: ${TRANSITION_STYLE};
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      margin-top: ${isOpen ? '0px' : `-${SPACING.spacing24}`};
-    }
-  `
-}
-
-const HEADER_CONTAINER_STYLE = css`
-  width: 100%;
-  justify-content: ${JUSTIFY_SPACE_BETWEEN};
-  gap: ${SPACING.spacing24};
-  cursor: ${CURSOR_POINTER};
-
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    gap: ${SPACING.spacing40};
-  }
-`
-
-const HEADER_ICON_CHILD_STYLE = css`
-  display: flex;
-  flex-grow: 1;
-  gap: ${SPACING.spacing12};
-  align-items: ${ALIGN_CENTER};
-`
-
-const HEADER_CHILD_WRAPPER = css`
-  flex-grow: 1;
-  width: 100%;
-`
-
-const ALERT_ICON_STYLE = css`
-  color: ${COLORS.yellow60};
-  height: ${SPACING.spacing20};
-  width: ${SPACING.spacing20};
-  flex-shrink: 0;
-
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    height: ${SPACING.spacing32};
-    width: ${SPACING.spacing32};
-  }
-`
-
-const CHEVRON_STYLE = css`
-  height: ${SPACING.spacing24};
-  width: ${SPACING.spacing24};
-  flex-shrink: 0;
-
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    height: ${SPACING.spacing48};
-    width: ${SPACING.spacing48};
-  }
-`