@opentrons/components 0.1.6-alpha.16 → 0.1.6-alpha.18

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

@@ -0,0 +1,108 @@
+import styled, { css } from 'styled-components'
+import { SPACING } from '../../../ui-style-constants'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+import { Flex } from '../../../primitives'
+import { StyledText } from '../../StyledText'
+import { CURSOR_POINTER } from '../../../styles'
+
+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

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

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

@@ -0,0 +1,46 @@
+import type * as React from 'react'
+import { vi, describe, it, expect, beforeEach } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import { fireEvent, screen } from '@testing-library/react'
+import { renderWithProviders } from '../../../testing/utils'
+import { COLORS } from '../../../helix-design-system'
+
+import { ListButton } from '..'
+
+const render = (props: React.ComponentProps<typeof ListButton>) =>
+  renderWithProviders(<ListButton {...props} />)
+
+describe('ListButton', () => {
+  let props: React.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.grey30}`)
+  })
+  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 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

@@ -0,0 +1,35 @@
+import type * as React from 'react'
+import { describe, it, beforeEach } from 'vitest'
+import { screen } from '@testing-library/react'
+import { renderWithProviders } from '../../../testing/utils'
+
+import { ListButtonAccordion } from '..'
+
+const render = (props: React.ComponentProps<typeof ListButtonAccordion>) =>
+  renderWithProviders(<ListButtonAccordion {...props} />)
+
+describe('ListButtonAccordion', () => {
+  let props: React.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

@@ -0,0 +1,27 @@
+import type * as React from 'react'
+import { describe, it, beforeEach, vi, expect } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
+import { renderWithProviders } from '../../../testing/utils'
+
+import { ListButtonRadioButton } from '..'
+
+const render = (props: React.ComponentProps<typeof ListButtonRadioButton>) =>
+  renderWithProviders(<ListButtonRadioButton {...props} />)
+
+describe('ListButtonRadioButton', () => {
+  let props: React.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

@@ -0,0 +1,72 @@
+import type * as React from 'react'
+import { css } from 'styled-components'
+import { Flex } from '../../primitives'
+import { SPACING } from '../../ui-style-constants'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { CURSOR_POINTER } from '../../styles'
+import type { StyleProps } from '../../primitives'
+
+export * from './ListButtonChildren/index'
+
+export type ListButtonType = 'noActive' | 'connected' | 'notConnected'
+
+interface ListButtonProps extends StyleProps {
+  type: ListButtonType
+  children: React.ReactNode
+  disabled?: boolean
+  onClick?: () => void
+}
+
+const LISTBUTTON_PROPS_BY_TYPE: Record<
+  ListButtonType,
+  { backgroundColor: string; hoverBackgroundColor: string }
+> = {
+  noActive: {
+    backgroundColor: COLORS.grey30,
+    hoverBackgroundColor: COLORS.grey35,
+  },
+  connected: {
+    backgroundColor: COLORS.green30,
+    hoverBackgroundColor: COLORS.green35,
+  },
+  notConnected: {
+    backgroundColor: COLORS.yellow30,
+    hoverBackgroundColor: COLORS.yellow35,
+  },
+}
+
+/*
+  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, onClick, ...styleProps } = props
+  const listButtonProps = LISTBUTTON_PROPS_BY_TYPE[type]
+
+  const LIST_BUTTON_STYLE = css`
+    cursor: ${CURSOR_POINTER};
+    background-color: ${disabled
+      ? COLORS.grey35
+      : listButtonProps.backgroundColor};
+    max-width: 26.875rem;
+    padding: ${styleProps.padding ??
+    `${SPACING.spacing20} ${SPACING.spacing24}`};
+    border-radius: ${BORDERS.borderRadius8};
+
+    &:hover {
+      background-color: ${listButtonProps.hoverBackgroundColor};
+    }
+  `
+
+  return (
+    <Flex
+      data-testid={`ListButton_${type}`}
+      onClick={onClick}
+      css={LIST_BUTTON_STYLE}
+      {...styleProps}
+    >
+      {children}
+    </Flex>
+  )
+}

package/src/atoms/ListItem/ListItem.stories.tsx

@@ -0,0 +1,96 @@
+import { SPACING, VIEWPORT } from '../../ui-style-constants'
+import { DIRECTION_COLUMN } from '../../styles'
+import { Flex } from '../../primitives'
+import { LegacyStyledText } from '../StyledText'
+import { ListItemDescriptor } from './ListItemChildren/ListItemDescriptor'
+import { ListItem as ListItemComponent, ListItemCustomize } from '.'
+import exampleImage from '../../images/labware/measurement-guide/images/spacing/spacing-well-rectangular@3x.png'
+import type { Meta, StoryObj } from '@storybook/react'
+import type { DropdownMenuProps } from '../../molecules'
+
+const meta: Meta<typeof ListItemComponent> = {
+  title: 'Library/Atoms/ListItem',
+  component: ListItemComponent,
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+        options: ['error', 'noActive', 'success', 'warning'],
+      },
+    },
+  },
+  parameters: VIEWPORT.touchScreenViewport,
+}
+
+export default meta
+
+type Story = StoryObj<typeof ListItemComponent>
+
+export const ListItem: Story = {
+  args: {
+    type: 'noActive',
+    children: (
+      <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+        <LegacyStyledText as="p">
+          Slot Component: Replace me using the component panel.
+        </LegacyStyledText>
+        <LegacyStyledText as="p">
+          Slot Component: Replace me using the component panel.
+        </LegacyStyledText>
+        <LegacyStyledText as="p">
+          Slot Component: Replace me using the component panel.
+        </LegacyStyledText>
+      </Flex>
+    ),
+  },
+}
+
+export const ListItemDescriptorDefault: Story = {
+  args: {
+    type: 'noActive',
+    children: (
+      <ListItemDescriptor
+        type="large"
+        content={<div>mock content</div>}
+        description={<div>mock description</div>}
+      />
+    ),
+  },
+}
+
+export const ListItemDescriptorMini: Story = {
+  args: {
+    type: 'noActive',
+    children: (
+      <ListItemDescriptor
+        type="default"
+        content={<div>mock content</div>}
+        description={<div>mock description</div>}
+      />
+    ),
+  },
+}
+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: 'noActive',
+    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

@@ -0,0 +1,78 @@
+import { css } from 'styled-components'
+import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../../styles'
+import { COLORS } from '../../../helix-design-system'
+import { Flex, Link } from '../../../primitives'
+import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
+import { StyledText } from '../../StyledText'
+import { DropdownMenu } from '../../../molecules/DropdownMenu'
+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}>
+      <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={css`
+            width: 10%;
+            text-decoration: ${TYPOGRAPHY.textDecorationUnderline};
+            color: ${COLORS.grey60};
+            &:hover {
+              color: ${COLORS.grey40};
+            }
+          `}
+        >
+          <StyledText desktopStyle="bodyDefaultRegular">{linkText}</StyledText>
+        </Link>
+      ) : null}
+    </Flex>
+  )
+}

package/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx

@@ -0,0 +1,42 @@
+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 {
+  type: 'default' | 'large'
+  description: JSX.Element
+  content: JSX.Element
+  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

@@ -0,0 +1,2 @@
+export * from './ListItemCustomize'
+export * from './ListItemDescriptor'

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

@@ -0,0 +1,61 @@
+import type * as React from 'react'
+import { vi, describe, it, expect, beforeEach } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import { fireEvent, screen } from '@testing-library/react'
+import { renderWithProviders } from '../../../testing/utils'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+
+import { ListItem } from '..'
+
+const render = (props: React.ComponentProps<typeof ListItem>) =>
+  renderWithProviders(<ListItem {...props} />)
+
+describe('ListItem', () => {
+  let props: React.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 - noActive', () => {
+    props.type = 'noActive'
+    render(props)
+    screen.getByText('mock listitem content')
+    const listItem = screen.getByTestId('ListItem_noActive')
+    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 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,89 @@
+import type * as React from 'react'
+import { css } from 'styled-components'
+import { Flex } from '../../primitives'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { FLEX_MAX_CONTENT } from '../../styles'
+import type { StyleProps } from '../../primitives'
+
+export * from './ListItemChildren'
+
+export type ListItemType =
+  | 'error'
+  | 'noActive'
+  | 'success'
+  | 'warning'
+  | 'unavailable'
+
+interface ListItemProps extends StyleProps {
+  /** ListItem state type */
+  type: ListItemType
+  /** ListItem contents */
+  children: React.ReactNode
+  onClick?: () => void
+  onMouseEnter?: () => void
+  onMouseLeave?: () => void
+}
+
+const LISTITEM_PROPS_BY_TYPE: Record<
+  ListItemType,
+  { backgroundColor: string; color?: string }
+> = {
+  error: {
+    backgroundColor: COLORS.red35,
+  },
+  noActive: {
+    backgroundColor: COLORS.grey20,
+  },
+  success: {
+    backgroundColor: COLORS.green35,
+  },
+  warning: {
+    backgroundColor: COLORS.yellow35,
+  },
+  unavailable: {
+    backgroundColor: COLORS.grey20,
+    color: COLORS.grey40,
+  },
+}
+
+/*
+  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: ${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/MenuList/MenuItem.stories.tsx

@@ -0,0 +1,20 @@
+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: 'Library/Atoms/MenuItem',
+  component: MenuItemComponent,
+  parameters: VIEWPORT.touchScreenViewport,
+}
+export default meta
+
+type Story = StoryObj<typeof MenuItemComponent>
+
+export const MenuItem: Story = {
+  args: {
+    children: 'Example menu btn',
+    disabled: false,
+  },
+}