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

package/src/atoms/ListButton/ListButtonChildren/ListButtonRadioButton.tsx

@@ -1,109 +0,0 @@
-import styled, { css } from 'styled-components'
-
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { Flex } from '../../../primitives'
-import { CURSOR_POINTER } from '../../../styles'
-import { SPACING } from '../../../ui-style-constants'
-import { StyledText } from '../../StyledText'
-
-import type { ChangeEventHandler, MouseEvent } from 'react'
-import type { StyleProps } from '../../../primitives'
-
-interface ListButtonRadioButtonProps extends StyleProps {
-  buttonText: string
-  buttonValue: string | number
-  onChange: ChangeEventHandler<HTMLInputElement>
-  setNoHover?: () => void
-  setHovered?: () => void
-  disabled?: boolean
-  isSelected?: boolean
-  id?: string
-}
-
-//  used for helix and as a child button to ListButtonAccordion
-export function ListButtonRadioButton(
-  props: ListButtonRadioButtonProps
-): JSX.Element {
-  const {
-    buttonText,
-    buttonValue,
-    isSelected = false,
-    onChange,
-    disabled = false,
-    setHovered,
-    setNoHover,
-    id = buttonText,
-  } = props
-
-  return (
-    <Flex
-      width="100%"
-      margin={SPACING.spacing4}
-      onClick={(e: MouseEvent) => {
-        e.stopPropagation()
-      }}
-    >
-      <SettingButton
-        checked={isSelected}
-        id={id}
-        disabled={disabled}
-        onChange={onChange}
-        type="radio"
-        value={buttonValue}
-      />
-      <SettingButtonLabel
-        role="label"
-        isSelected={isSelected}
-        disabled={disabled}
-        htmlFor={id}
-        onMouseEnter={setHovered}
-        onMouseLeave={setNoHover}
-      >
-        <StyledText desktopStyle="bodyDefaultRegular">{buttonText}</StyledText>
-      </SettingButtonLabel>
-    </Flex>
-  )
-}
-
-const SettingButton = styled.input`
-  display: none;
-`
-
-const AVAILABLE_BUTTON_STYLE = css`
-  background: ${COLORS.white};
-  color: ${COLORS.black90};
-
-  &:hover {
-    background-color: ${COLORS.grey10};
-  }
-`
-
-const SELECTED_BUTTON_STYLE = css`
-  background: ${COLORS.blue50};
-  color: ${COLORS.white};
-
-  &:active {
-    background-color: ${COLORS.blue60};
-  }
-`
-
-const DISABLED_STYLE = css`
-  color: ${COLORS.grey40};
-  background-color: ${COLORS.grey10};
-`
-
-interface ButtonLabelProps {
-  isSelected: boolean
-  disabled: boolean
-}
-
-const SettingButtonLabel = styled.label<ButtonLabelProps>`
-  border-radius: ${BORDERS.borderRadius8};
-  cursor: ${CURSOR_POINTER};
-  padding: 14px ${SPACING.spacing12};
-  width: 100%;
-
-  ${({ isSelected }) =>
-    isSelected ? SELECTED_BUTTON_STYLE : AVAILABLE_BUTTON_STYLE}
-  ${({ disabled }) => disabled && DISABLED_STYLE}
-`

package/src/atoms/ListButton/ListButtonChildren/index.ts

@@ -1,3 +0,0 @@
-export * from './ListButtonAccordion'
-export * from './ListButtonAccordionContainer'
-export * from './ListButtonRadioButton'

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

@@ -1,55 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import '@testing-library/jest-dom/vitest'
-
-import { fireEvent, screen } from '@testing-library/react'
-
-import { ListButton } from '..'
-import { COLORS } from '../../../helix-design-system'
-import { renderWithProviders } from '../../../testing/utils'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof ListButton>) =>
-  renderWithProviders(<ListButton {...props} />)
-
-describe('ListButton', () => {
-  let props: ComponentProps<typeof ListButton>
-
-  beforeEach(() => {
-    props = {
-      type: 'noActive',
-      children: <div>mock ListButton content</div>,
-      onClick: vi.fn(),
-    }
-  })
-
-  it('should render correct style - noActive', () => {
-    render(props)
-    const listButton = screen.getByTestId('ListButton_noActive')
-    expect(listButton).toHaveStyle(`backgroundColor: ${COLORS.grey20}`)
-  })
-  it('should render correct style - connected', () => {
-    props.type = 'connected'
-    render(props)
-    const listButton = screen.getByTestId('ListButton_connected')
-    expect(listButton).toHaveStyle(`backgroundColor: ${COLORS.green30}`)
-  })
-  it('should render correct style - notConnected', () => {
-    props.type = 'notConnected'
-    render(props)
-    const listButton = screen.getByTestId('ListButton_notConnected')
-    expect(listButton).toHaveStyle(`backgroundColor: ${COLORS.yellow30}`)
-  })
-  it('should render correct style - onColor', () => {
-    props.type = 'onColor'
-    render(props)
-    const listButton = screen.getByTestId('ListButton_onColor')
-    expect(listButton).toHaveStyle(`backgroundColor: ${COLORS.white}`)
-  })
-  it('should call on click when pressed', () => {
-    render(props)
-    fireEvent.click(screen.getByText('mock ListButton content'))
-    expect(props.onClick).toHaveBeenCalled()
-  })
-})

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/__tests__/ListButtonRadioButton.test.tsx

@@ -1,28 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { ListButtonRadioButton } from '..'
-import { renderWithProviders } from '../../../testing/utils'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof ListButtonRadioButton>) =>
-  renderWithProviders(<ListButtonRadioButton {...props} />)
-
-describe('ListButtonRadioButton', () => {
-  let props: ComponentProps<typeof ListButtonRadioButton>
-
-  beforeEach(() => {
-    props = {
-      buttonText: 'mock text',
-      buttonValue: 'mockValue',
-      onChange: vi.fn(),
-    }
-  })
-
-  it('should render non nested accordion', () => {
-    render(props)
-    fireEvent.click(screen.getByText('mock text'))
-    expect(props.onChange).toHaveBeenCalled()
-  })
-})

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_FLEX_START,
-  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_FLEX_START}
-      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'