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

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

@@ -0,0 +1,172 @@
+// 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,
+  },
+}

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

@@ -0,0 +1,126 @@
+import type * as React from 'react'
+import { renderWithProviders } from '../../../testing/utils'
+import { describe, it, beforeEach } from 'vitest'
+import { screen } from '@testing-library/react'
+import { ParametersTable } from '../index'
+
+import type { RunTimeParameter } from '@opentrons/shared-data'
+
+const tMock = (key: string) => key
+const mockRunTimeParameter: RunTimeParameter[] = [
+  {
+    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: 'EtoH Volume',
+    variableName: 'ETOH_VOLUME',
+    description: '70% ethanol volume',
+    type: 'float',
+    suffix: 'mL',
+    min: 1.5,
+    max: 10.0,
+    default: 6.5,
+    value: 6.5,
+  },
+  {
+    displayName: 'Default Module Offsets',
+    variableName: 'DEFAULT_OFFSETS',
+    description: 'default module offsets for temp, H-S, and none',
+    type: 'str',
+    value: 'none',
+    choices: [
+      {
+        displayName: 'No offsets',
+        value: 'none',
+      },
+      {
+        displayName: 'temp offset',
+        value: '1',
+      },
+      {
+        displayName: 'heater-shaker offset',
+        value: '2',
+      },
+    ],
+    default: 'none',
+  },
+  {
+    displayName: 'pipette mount',
+    variableName: 'mont',
+    description: 'pipette mount',
+    type: 'str',
+    value: 'left',
+    choices: [
+      {
+        displayName: 'Left',
+        value: 'left',
+      },
+      {
+        displayName: 'Right',
+        value: 'right',
+      },
+    ],
+    default: 'left',
+  },
+]
+
+const render = (props: React.ComponentProps<typeof ParametersTable>) => {
+  return renderWithProviders(<ParametersTable {...props} />)
+}
+
+describe('ParametersTable', () => {
+  let props: React.ComponentProps<typeof ParametersTable>
+
+  beforeEach(() => {
+    props = {
+      runTimeParameters: mockRunTimeParameter,
+    }
+  })
+
+  it('should render table header', () => {
+    render(props)
+    screen.getByText('Name')
+    screen.getByText('Default Value')
+    screen.getByText('Range')
+  })
+
+  it('should render parameters default information', () => {
+    render(props)
+    screen.getByText('Trash Tips')
+    screen.getByText('On')
+    screen.getByText('On, off')
+
+    screen.getByText('EtoH Volume')
+    screen.getByText('6.5 mL')
+    screen.getByText('1.5-10.0')
+
+    // more than 2 options
+    screen.getByText('Default Module Offsets')
+    screen.getByText('No offsets')
+    screen.getByText('3 options')
+
+    // 2 options
+    screen.getByText('pipette mount')
+    screen.getByText('Left')
+    screen.getByText('Left, Right')
+  })
+
+  it('should render the raw i18n values if a t prop is provided', () => {
+    props.t = tMock
+    render(props)
+    screen.getByText('name')
+    screen.getByText('default_value')
+    screen.getByText('range')
+  })
+
+  it('should render a description icon if description is provided', () => {
+    render(props)
+    screen.getByTestId('Icon_0')
+  })
+})

package/src/molecules/ParametersTable/index.tsx

@@ -0,0 +1,198 @@
+import styled, { css } from 'styled-components'
+import {
+  formatRunTimeParameterDefaultValue,
+  formatRunTimeParameterMinMax,
+  orderRuntimeParameterRangeOptions,
+} from '@opentrons/shared-data'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import {
+  SPACING,
+  TYPOGRAPHY as LEGACY_TYPOGERAPHY,
+} from '../../ui-style-constants/index'
+import { TYPOGRAPHY } from '../../helix-design-system/product'
+import { Chip } from '../../atoms/Chip'
+import { StyledText } from '../../atoms/StyledText'
+import { LegacyTooltip, useHoverTooltip } from '../../tooltips'
+import { Icon } from '../../icons'
+import { Flex } from '../../primitives'
+import { DISPLAY_INLINE, FLEX_MAX_CONTENT } from '../../styles'
+
+import type { RunTimeParameter } from '@opentrons/shared-data'
+
+interface ProtocolParameterItemsProps {
+  runTimeParameters: RunTimeParameter[]
+  t?: any
+}
+
+/** used in both the desktop app and Protocol Library
+ * to display the run time parameters table
+ */
+export function ParametersTable({
+  runTimeParameters,
+  t,
+}: ProtocolParameterItemsProps): JSX.Element {
+  const formatRange = (runTimeParameter: RunTimeParameter): string => {
+    const { type } = runTimeParameter
+    const minMax = formatRunTimeParameterMinMax(runTimeParameter)
+    const choices =
+      'choices' in runTimeParameter ? runTimeParameter.choices : []
+    const count = choices.length
+
+    if (count > 0) {
+      return count > 2
+        ? t != null
+          ? t('num_options', { num: count })
+          : `${count} options`
+        : orderRuntimeParameterRangeOptions(choices)
+    }
+
+    switch (type) {
+      case 'int':
+      case 'float':
+        return minMax
+      case 'bool':
+        return t != null ? t('on_off') : 'On, off'
+      default:
+        return ''
+    }
+  }
+
+  return (
+    <StyledTable>
+      <thead>
+        <StyledTableHeader>{t != null ? t('name') : 'Name'}</StyledTableHeader>
+        <StyledTableHeader>
+          {t != null ? t('default_value') : 'Default Value'}
+        </StyledTableHeader>
+        <StyledTableHeader>
+          {t != null ? t('range') : 'Range'}
+        </StyledTableHeader>
+      </thead>
+      <tbody>
+        {runTimeParameters
+          .sort((a, b) =>
+            a.type === 'csv_file' && b.type !== 'csv_file' ? -1 : 0
+          )
+          .map((parameter: RunTimeParameter, index: number) => {
+            const isLast = index === runTimeParameters.length - 1
+            return (
+              <StyledTableRow isLast={isLast} key={`runTimeParameter-${index}`}>
+                <ParameterName
+                  displayName={parameter.displayName}
+                  description={parameter.description}
+                  isLast={isLast}
+                  index={index}
+                />
+                <StyledTableCell isLast={isLast}>
+                  {parameter.type === 'csv_file' ? (
+                    <Chip
+                      text={t('protocol_details:requires_upload')}
+                      type="warning"
+                      hasIcon={false}
+                      width={FLEX_MAX_CONTENT}
+                    />
+                  ) : (
+                    <StyledText desktopStyle="bodyDefaultRegular">
+                      {formatRunTimeParameterDefaultValue(parameter, t)}
+                    </StyledText>
+                  )}
+                </StyledTableCell>
+                <StyledTableCell isLast={isLast} paddingRight="0">
+                  <StyledText desktopStyle="bodyDefaultRegular">
+                    {parameter.type === 'csv_file'
+                      ? t('n_a')
+                      : formatRange(parameter)}
+                  </StyledText>
+                </StyledTableCell>
+              </StyledTableRow>
+            )
+          })}
+      </tbody>
+    </StyledTable>
+  )
+}
+
+interface ParameterNameProps {
+  displayName: string
+  description: string | null
+  isLast: boolean
+  index: number
+}
+
+const ParameterName = (props: ParameterNameProps): JSX.Element => {
+  const { displayName, description, isLast, index } = props
+  const [targetProps, tooltipProps] = useHoverTooltip()
+
+  return (
+    <StyledTableCell display="span" isLast={isLast}>
+      <StyledText
+        desktopStyle="bodyDefaultRegular"
+        css={css`
+          display: ${DISPLAY_INLINE};
+          padding-right: ${SPACING.spacing8};
+        `}
+      >
+        {displayName}
+      </StyledText>
+      {description != null ? (
+        <>
+          <Flex display={DISPLAY_INLINE} {...targetProps}>
+            <Icon
+              name="information"
+              size="1rem"
+              color={COLORS.grey60}
+              data-testid={`Icon_${index}`}
+              paddingTop={SPACING.spacing4}
+            />
+          </Flex>
+          <LegacyTooltip
+            {...tooltipProps}
+            backgroundColor={COLORS.black90}
+            css={LEGACY_TYPOGERAPHY.labelRegular}
+            width="8.75rem"
+          >
+            {description}
+          </LegacyTooltip>
+        </>
+      ) : null}
+    </StyledTableCell>
+  )
+}
+
+const StyledTable = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+`
+
+const StyledTableHeader = styled.th`
+  font: ${TYPOGRAPHY.fontStyleBodyDefaultRegular};
+  color: ${COLORS.grey60};
+  grid-gap: ${SPACING.spacing16};
+  padding-bottom: ${SPACING.spacing8};
+  border-bottom: ${BORDERS.lineBorder};
+`
+
+interface StyledTableRowProps {
+  isLast: boolean
+}
+
+const StyledTableRow = styled.tr<StyledTableRowProps>`
+  grid-gap: ${SPACING.spacing16};
+  border-bottom: ${props => (props.isLast ? 'none' : BORDERS.lineBorder)};
+`
+
+interface StyledTableCellProps {
+  isLast: boolean
+  paddingRight?: string
+  display?: string
+}
+
+const StyledTableCell = styled.td<StyledTableCellProps>`
+  width: 33%;
+  display: ${props => (props.display != null ? props.display : 'table-cell')};
+  padding-top: ${SPACING.spacing12};
+  padding-bottom: ${props => (props.isLast ? 0 : SPACING.spacing12)};
+  padding-right: ${props =>
+    props.paddingRight != null ? props.paddingRight : SPACING.spacing16};
+`

package/src/molecules/Tabs/Tabs.stories.tsx

@@ -0,0 +1,74 @@
+import { useArgs } from '@storybook/preview-api'
+import { VIEWPORT } from '../../ui-style-constants'
+import { Tabs as TabsComponent } from '.'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof TabsComponent> = {
+  title: 'Library/Molecules/Tabs',
+  component: TabsComponent,
+  parameters: VIEWPORT.touchScreenViewport,
+  argTypes: {
+    tabs: {
+      control: {
+        type: 'array',
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof TabsComponent>
+
+export const Tabs: Story = {
+  args: {
+    tabs: [
+      {
+        text: 'Setup',
+        isActive: true,
+        disabled: false,
+        onClick: () => {},
+      },
+      {
+        text: 'Parameters',
+        isActive: false,
+        disabled: false,
+        onClick: () => {},
+      },
+      {
+        text: 'Module Controls',
+        isActive: false,
+        disabled: false,
+        onClick: () => {},
+      },
+      {
+        text: 'Run Preview',
+        isActive: false,
+        disabled: false,
+        onClick: () => {},
+      },
+    ],
+  },
+  render: function TabsStory() {
+    const [args, setArgs] = useArgs<
+      React.ComponentProps<typeof TabsComponent>
+    >()
+
+    const modifiedTabs = args.tabs.map((tab, index) => {
+      const modifiedTabs = {
+        ...tab,
+        onClick: () => {
+          const updatedButtons = args.tabs.map((btn, i) => ({
+            ...btn,
+            isActive: i === index,
+          }))
+          setArgs({ ...args, tabs: updatedButtons })
+          tab.onClick()
+        },
+      }
+      return modifiedTabs
+    })
+
+    return <TabsComponent tabs={modifiedTabs} />
+  },
+}

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

@@ -0,0 +1,90 @@
+import type * as React from 'react'
+import { vi, describe, it, expect, beforeEach } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+import { SPACING } from '../../../ui-style-constants'
+import { POSITION_RELATIVE } from '../../../styles'
+import { renderWithProviders } from '../../../testing/utils'
+import { Tabs } from '../index'
+
+const render = (props: React.ComponentProps<typeof Tabs>) => {
+  return renderWithProviders(<Tabs {...props} />)
+}
+
+describe('Tabs', () => {
+  let props: React.ComponentProps<typeof Tabs>
+
+  beforeEach(() => {
+    props = {
+      tabs: [
+        { text: 'set up', onClick: vi.fn() },
+        { text: 'parameters', onClick: vi.fn() },
+        { text: 'module controls', onClick: vi.fn() },
+      ],
+    }
+  })
+
+  it('renders unclicked tabs with text', () => {
+    render(props)
+
+    const tabTexts = ['set up', 'parameters', 'module controls']
+    const tabStyles = {
+      backgroundColor: COLORS.purple30,
+      borderRadius: BORDERS.borderRadius8,
+      padding: `${SPACING.spacing8} ${SPACING.spacing16}`,
+      position: POSITION_RELATIVE,
+    }
+
+    tabTexts.forEach(text => {
+      const tab = screen.getByText(text)
+      expect(tab).not.toBeNull()
+
+      Object.entries(tabStyles).forEach(([key, value]) => {
+        expect(tab).toHaveStyle(`${key}: ${value}`)
+      })
+    })
+  })
+
+  it('renders an active tab', () => {
+    props.tabs[0].isActive = true
+
+    render(props)
+
+    const tab1 = screen.getByText('set up')
+
+    expect(tab1).toHaveStyle(`background-color: ${COLORS.purple50}`)
+    expect(tab1).toHaveStyle(`color: ${COLORS.white}`)
+  })
+
+  it('should call the right click handler when clicked', () => {
+    render(props)
+
+    const tabList = props.tabs
+
+    fireEvent.click(screen.getByText('set up'))
+    expect(tabList[0].onClick).toHaveBeenCalled()
+
+    fireEvent.click(screen.getByText('parameters'))
+    expect(tabList[1].onClick).toHaveBeenCalled()
+
+    fireEvent.click(screen.getByText('module controls'))
+    expect(tabList[2].onClick).toHaveBeenCalled()
+  })
+
+  it('should show right style when disabled', () => {
+    props = {
+      tabs: [
+        { text: 'set up', onClick: vi.fn(), disabled: true },
+        { text: 'parameters', onClick: vi.fn() },
+        { text: 'module controls', onClick: vi.fn() },
+      ],
+    }
+    render(props)
+    const tab = screen.getByText('set up')
+    expect(tab).toHaveStyle(`background-color: ${COLORS.grey30}`)
+    expect(tab).toHaveStyle(`color: ${COLORS.grey40}`)
+
+    fireEvent.click(tab)
+    expect(props.tabs[0].onClick).not.toHaveBeenCalled()
+  })
+})