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

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

@@ -0,0 +1,127 @@
+import { screen } from '@testing-library/react'
+import { beforeEach, describe, it } from 'vitest'
+
+import { renderWithProviders } from '../../../testing/utils'
+import { ParametersTable } from '../index'
+
+import type { ComponentProps } from 'react'
+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: ComponentProps<typeof ParametersTable>) => {
+  return renderWithProviders(<ParametersTable {...props} />)
+}
+
+describe('ParametersTable', () => {
+  let props: 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,200 @@
+import styled, { css } from 'styled-components'
+
+import {
+  formatRunTimeParameterDefaultValue,
+  formatRunTimeParameterMinMax,
+  orderRuntimeParameterRangeOptions,
+} from '@opentrons/shared-data'
+
+import { Chip } from '../../atoms/Chip'
+import { StyledText } from '../../atoms/StyledText'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { TYPOGRAPHY } from '../../helix-design-system/product'
+import { Icon } from '../../icons'
+import { Flex } from '../../primitives'
+import { DISPLAY_INLINE, FLEX_MAX_CONTENT } from '../../styles'
+import { LegacyTooltip, useHoverTooltip } from '../../tooltips'
+import {
+  TYPOGRAPHY as LEGACY_TYPOGERAPHY,
+  SPACING,
+} from '../../ui-style-constants/index'
+
+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/ReleaseNotes/index.tsx

@@ -0,0 +1,70 @@
+import Markdown from 'react-markdown'
+
+import { LegacyStyledText } from '../../atoms'
+import { COLORS } from '../../helix-design-system'
+import { Box } from '../../primitives'
+import { SPACING } from '../../ui-style-constants'
+import styles from './styles.module.css'
+
+export interface ReleaseNotesProps {
+  isOEMMode: boolean
+  source?: string | null
+}
+
+const DEFAULT_RELEASE_NOTES = 'We recommend upgrading to the latest version.'
+
+export function ReleaseNotes(props: ReleaseNotesProps): JSX.Element {
+  const { source, isOEMMode } = props
+
+  return (
+    <div className={styles.release_notes}>
+      {source != null && !isOEMMode ? (
+        <Markdown
+          components={{
+            div: undefined,
+            ul: UnnumberedListText,
+            h2: HeaderText,
+            li: ListItemText,
+            p: ParagraphText,
+            a: ExternalLink,
+            hr: HorizontalRule,
+          }}
+        >
+          {source}
+        </Markdown>
+      ) : (
+        <p>{DEFAULT_RELEASE_NOTES}</p>
+      )}
+    </div>
+  )
+}
+
+function ExternalLink(props: JSX.IntrinsicAttributes): JSX.Element {
+  return <a {...props} target="_blank" rel="noopener noreferrer" />
+}
+
+function ParagraphText(props: JSX.IntrinsicAttributes): JSX.Element {
+  return <LegacyStyledText {...props} as="p" />
+}
+
+function HeaderText(props: JSX.IntrinsicAttributes): JSX.Element {
+  return <LegacyStyledText {...props} as="h3" />
+}
+
+function ListItemText(props: JSX.IntrinsicAttributes): JSX.Element {
+  return <LegacyStyledText {...props} as="li" />
+}
+
+function UnnumberedListText(props: JSX.IntrinsicAttributes): JSX.Element {
+  return <LegacyStyledText {...props} as="ul" />
+}
+
+function HorizontalRule(): JSX.Element {
+  return (
+    <Box
+      borderBottom={`1px solid ${COLORS.grey30}`}
+      marginY={SPACING.spacing16}
+      data-testid="divider"
+    />
+  )
+}

package/src/molecules/ReleaseNotes/styles.module.css

@@ -0,0 +1,66 @@
+@import '../../index.module.css';
+
+.release_notes {
+  width: 100%;
+  max-height: 100%;
+  padding: 0 0.5rem;
+
+  & > h1 {
+    font-size: var(--fs-header); /* from legacy --font-header-dark */
+    font-weight: var(--fw-semibold); /* from legacy --font-header-dark */
+    color: var(--c-font-dark); /* from legacy --font-header-dark */
+    margin-bottom: 1rem;
+  }
+
+  & > h2 {
+    font-size: var(--fs-header); /* from legacy --font-header-dark */
+    color: var(--c-font-dark); /* from legacy --font-header-dark */
+    font-weight: var(--fw-regular);
+    margin-top: 1rem;
+    margin-bottom: 0.75rem;
+  }
+
+  & > h3 {
+    font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
+    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
+    font-weight: var(--fw-semibold);
+    margin-top: 0.75rem;
+    margin-bottom: 0.5rem;
+  }
+
+  & ul,
+  & ol {
+    margin-left: 1.25rem;
+    margin-bottom: 0.25rem;
+    font-size: var(--fs-body-2);
+    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
+  }
+
+  & li {
+    margin: 0.25rem 0;
+    font-size: var(--fs-body-2);
+    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
+  }
+
+  & code {
+    font-family: monospace;
+    color: var(--c-font-dark);
+  }
+
+  & pre {
+    margin: 0.5rem 0;
+    padding: 0.5rem 0.75rem;
+    background-color: var(--c-font-dark);
+
+    & code {
+      color: var(--c-font-light);
+    }
+  }
+
+  & p {
+    font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
+    font-weight: var(--fw-regular); /* from legacy --font-body-2-dark */
+    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
+    margin-bottom: 1rem;
+  }
+}

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

@@ -0,0 +1,76 @@
+import { useArgs } from '@storybook/preview-api'
+
+import { Tabs as TabsComponent } from '.'
+import { VIEWPORT } from '../../ui-style-constants'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof TabsComponent> = {
+  title: 'Helix/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,92 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { BORDERS, COLORS } from '../../../helix-design-system'
+import { POSITION_RELATIVE } from '../../../styles'
+import { renderWithProviders } from '../../../testing/utils'
+import { SPACING } from '../../../ui-style-constants'
+import { Tabs } from '../index'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Tabs>) => {
+  return renderWithProviders(<Tabs {...props} />)
+}
+
+describe('Tabs', () => {
+  let props: 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()
+  })
+})