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

package/src/molecules/LiquidIcon/index.tsx

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

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

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

@@ -0,0 +1,182 @@
+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};
+  }
+`

package/src/molecules/ParametersTable/ParametersTable.stories.tsx

@@ -0,0 +1,173 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import * as React from 'react-remove-scroll'
+
+import { Flex } from '../../primitives'
+import { SPACING } from '../../ui-style-constants'
+import { ParametersTable } from './index'
+
+import type { Meta, StoryObj } from '@storybook/react'
+import type { RunTimeParameter } from '@opentrons/shared-data'
+
+const runTimeParameters: RunTimeParameter[] = [
+  {
+    value: false,
+    displayName: 'Dry Run',
+    variableName: 'DRYRUN',
+    description: 'Is this a dry or wet run? Wet is true, dry is false',
+    type: 'bool',
+    default: false,
+  },
+  {
+    value: true,
+    displayName: 'Use Gripper',
+    variableName: 'USE_GRIPPER',
+    description: 'For using the gripper.',
+    type: 'bool',
+    default: true,
+  },
+  {
+    value: true,
+    displayName: 'Trash Tips',
+    variableName: 'TIP_TRASH',
+    description:
+      'to throw tip into the trash or to not throw tip into the trash',
+    type: 'bool',
+    default: true,
+  },
+  {
+    value: true,
+    displayName: 'Deactivate Temperatures',
+    variableName: 'DEACTIVATE_TEMP',
+    description: 'deactivate temperature on the module',
+    type: 'bool',
+    default: true,
+  },
+  {
+    value: 4,
+    displayName: 'Columns of Samples',
+    variableName: 'COLUMNS',
+    description: 'How many columns do you want?',
+    type: 'int',
+    min: 1,
+    max: 14,
+    default: 4,
+  },
+  {
+    value: 6,
+    displayName: 'PCR Cycles',
+    variableName: 'PCR_CYCLES',
+    description: 'number of PCR cycles on a thermocycler',
+    type: 'int',
+    min: 1,
+    max: 10,
+    default: 6,
+  },
+  {
+    value: 6.5,
+    displayName: 'EtoH Volume',
+    variableName: 'ETOH_VOLUME',
+    description: '70% ethanol volume',
+    type: 'float',
+    suffix: 'mL',
+    min: 1.5,
+    max: 10.0,
+    default: 6.5,
+  },
+  {
+    value: 'none',
+    displayName: 'Default Module Offsets',
+    variableName: 'DEFAULT_OFFSETS',
+    description: 'default module offsets for temp, H-S, and none',
+    type: 'str',
+    choices: [
+      {
+        displayName: 'No offsets',
+        value: 'none',
+      },
+      {
+        displayName: 'temp offset',
+        value: '1',
+      },
+      {
+        displayName: 'heater-shaker offset',
+        value: '2',
+      },
+    ],
+    default: 'none',
+  },
+  {
+    value: 'left',
+    displayName: 'pipette mount',
+    variableName: 'mont',
+    description: 'pipette mount',
+    type: 'str',
+    choices: [
+      {
+        displayName: 'Left',
+        value: 'left',
+      },
+      {
+        displayName: 'Right',
+        value: 'right',
+      },
+    ],
+    default: 'left',
+  },
+  {
+    value: 'flex',
+    displayName: 'short test case',
+    variableName: 'short 2 options',
+    description: 'this play 2 short options',
+    type: 'str',
+    choices: [
+      {
+        displayName: 'OT-2',
+        value: 'ot2',
+      },
+      {
+        displayName: 'Flex',
+        value: 'flex',
+      },
+    ],
+    default: 'flex',
+  },
+  {
+    value: 'flex',
+    displayName: 'long test case',
+    variableName: 'long 2 options',
+    description: 'this play 2 long options',
+    type: 'str',
+    choices: [
+      {
+        displayName: 'I am kind of long text version',
+        value: 'ot2',
+      },
+      {
+        displayName: 'I am kind of long text version. Today is 3/15',
+        value: 'flex',
+      },
+    ],
+    default: 'flex',
+  },
+]
+
+const meta: Meta<typeof ParametersTable> = {
+  title: 'Library/Molecules/ParametersTable',
+  component: ParametersTable,
+  decorators: [
+    Story => (
+      <Flex padding={SPACING.spacing16}>
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+export default meta
+
+type Story = StoryObj<typeof ParametersTable>
+
+export const DefaultParameterTable: Story = {
+  args: {
+    runTimeParameters: runTimeParameters,
+  },
+}