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

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,53 @@
+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 '..'
+
+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

@@ -0,0 +1,36 @@
+import { describe, it, beforeEach } from 'vitest'
+import { screen } from '@testing-library/react'
+import { renderWithProviders } from '../../../testing/utils'
+
+import { ListButtonAccordion } from '..'
+
+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

@@ -0,0 +1,28 @@
+import { describe, it, beforeEach, vi, expect } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
+import { renderWithProviders } from '../../../testing/utils'
+
+import { ListButtonRadioButton } from '..'
+
+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

@@ -0,0 +1,131 @@
+import { css } from 'styled-components'
+import { Flex } from '../../primitives'
+import { SPACING, RESPONSIVENESS } from '../../ui-style-constants'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { CURSOR_DEFAULT, CURSOR_POINTER } from '../../styles'
+
+import type { ReactNode } from 'react'
+import type { StyleProps } from '../../primitives'
+
+export * from './ListButtonChildren/index'
+
+type ListButtonType = 'noActive' | 'connected' | 'notConnected' | 'onColor'
+
+interface ListButtonProps extends StyleProps {
+  type: ListButtonType
+  children: ReactNode
+  disabled?: boolean
+  onClick?: () => void
+  testId?: string
+}
+
+const DESKTOP_LISTBUTTON_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_LISTBUTTON_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, // optional data-testid value for Cypress testing
+    ...styleProps
+  } = props
+  const desktopListButtonProps = DESKTOP_LISTBUTTON_PROPS_BY_TYPE[type]
+  const oddListButtonProps = ODD_LISTBUTTON_PROPS_BY_TYPE[type]
+
+  const LIST_BUTTON_STYLE = 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};
+      }
+    }
+  `
+
+  return (
+    <Flex
+      data-testid={testId ?? `ListButton_${type}`}
+      onClick={(e: MouseEvent) => {
+        onClick?.()
+        e.stopPropagation()
+      }}
+      css={LIST_BUTTON_STYLE}
+      tabIndex={0}
+      max-width="26.875rem"
+      {...styleProps}
+    >
+      {children}
+    </Flex>
+  )
+}

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

@@ -0,0 +1,126 @@
+import { SPACING, VIEWPORT } from '../../ui-style-constants'
+import { DIRECTION_COLUMN } from '../../styles'
+import { Flex } from '../../primitives'
+import { StyledText } 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: '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

@@ -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'