@opentrons/components 0.1.6-alpha.2 → 0.1.6-alpha.21

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/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/index.tsx

@@ -0,0 +1,94 @@
+import { css } from 'styled-components'
+import { TYPOGRAPHY, SPACING, RESPONSIVENESS } from '../../ui-style-constants'
+import { COLORS, BORDERS } from '../../helix-design-system'
+import { POSITION_RELATIVE, DIRECTION_ROW } from '../../styles'
+import { Btn, Flex } from '../../primitives'
+
+const DEFAULT_TAB_STYLE = css`
+  ${TYPOGRAPHY.pSemiBold}
+  background-color: ${COLORS.purple30};
+  border-radius: ${BORDERS.borderRadius8};
+  padding: ${SPACING.spacing8} ${SPACING.spacing16};
+  position: ${POSITION_RELATIVE};
+
+  &:hover {
+    background-color: ${COLORS.purple35};
+  }
+
+  &:focus-visible {
+    outline-offset: 2px;
+    outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
+  }
+
+  &:disabled {
+    background-color: ${COLORS.grey30};
+    color: ${COLORS.grey40};
+
+    &:hover {
+      background-color: ${COLORS.grey30};
+    }
+  }
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    border-radius: ${BORDERS.borderRadius16};
+    box-shadow: none;
+    font-size: ${TYPOGRAPHY.fontSize22};
+    font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+    line-height: ${TYPOGRAPHY.lineHeight28};
+    padding: ${SPACING.spacing16} ${SPACING.spacing24};
+    text-transform: ${TYPOGRAPHY.textTransformNone};
+
+    &:focus-visible {
+      outline-offset: 3px;
+      outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
+    }
+  }
+`
+const CURRENT_TAB_STYLE = css`
+  ${DEFAULT_TAB_STYLE}
+  color: ${COLORS.white};
+  background-color: ${COLORS.purple50};
+
+  &:hover {
+    background-color: ${COLORS.purple55};
+  }
+`
+const DEFAULT_CONTAINER_STYLE = css`
+  grid-gap: ${SPACING.spacing4};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    grid-gap: ${SPACING.spacing8};
+  }
+`
+
+export interface TabProps {
+  text: string
+  onClick: () => void
+  isActive?: boolean
+  disabled?: boolean
+}
+
+export interface TabsProps {
+  tabs: TabProps[]
+}
+
+export function Tabs(props: TabsProps): JSX.Element {
+  const { tabs } = props
+
+  return (
+    <Flex flexDirection={DIRECTION_ROW} css={DEFAULT_CONTAINER_STYLE}>
+      {tabs.map((tab, index) => (
+        <Btn
+          data-testid={`tab_${index}_${tab.text}`}
+          key={index}
+          onClick={() => {
+            tab.onClick()
+          }}
+          css={tab.isActive === true ? CURRENT_TAB_STYLE : DEFAULT_TAB_STYLE}
+          disabled={tab.disabled}
+        >
+          {tab.text}
+        </Btn>
+      ))}
+    </Flex>
+  )
+}

package/src/molecules/index.ts

@@ -0,0 +1,8 @@
+export * from './Banner'
+export * from './DeckInfoLabel'
+export * from './DeckLabel'
+export * from './DropdownMenu'
+export * from './InfoScreen'
+export * from './LiquidIcon'
+export * from './ParametersTable'
+export * from './Tabs'

package/src/nav/SidePanel.stories.tsx

@@ -0,0 +1,29 @@
+import type * as React from 'react'
+import { SidePanel as SidePanelComponent } from './SidePanel'
+import { Text, Flex, JUSTIFY_CENTER, ALIGN_CENTER } from '@opentrons/components'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Molecules/Side Panel',
+  decorators: [
+    Story => (
+      <Flex>
+        <Story />
+      </Flex>
+    ),
+  ],
+} as Meta
+
+const Template: Story<
+  React.ComponentProps<typeof SidePanelComponent>
+> = args => <SidePanelComponent {...args} />
+export const SidePanel = Template.bind({})
+SidePanel.args = {
+  title: 'Title goes here',
+  children: (
+    <Flex justifyContent={JUSTIFY_CENTER} alignItems={ALIGN_CENTER}>
+      <Text>Side Panel Children</Text>
+    </Flex>
+  ),
+}

package/src/nav/SidePanel.tsx

@@ -0,0 +1,21 @@
+// collapsable side panel
+import type * as React from 'react'
+import styles from './SidePanel.module.css'
+
+export interface SidePanelProps {
+  title?: string
+  children?: React.ReactNode
+}
+
+export function SidePanel(props: SidePanelProps): JSX.Element {
+  return (
+    <div className={styles.panel}>
+      {props.title != null ? (
+        <div className={styles.title_bar}>
+          <h2 className={styles.title}>{props.title}</h2>
+        </div>
+      ) : null}
+      <div className={styles.panel_contents}>{props.children}</div>
+    </div>
+  )
+}

package/src/nav/index.ts

@@ -0,0 +1,2 @@
+// navigational components
+export * from './SidePanel'

package/src/organisms/DeckLabelSet/DeckLabelSet.stories.tsx

@@ -0,0 +1,46 @@
+import { BORDERS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
+import { SPACING } from '../../ui-style-constants'
+
+import { DeckLabelSet as DeckLabelSetComponent } from '.'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const mockDeckLabels = [
+  {
+    text: 'Label',
+    isSelected: false,
+    labelBorderRadius: BORDERS.borderRadius4,
+  },
+  {
+    text: 'Label',
+    isSelected: false,
+    labelBorderRadius: BORDERS.borderRadius4,
+  },
+]
+
+const meta: Meta<typeof DeckLabelSetComponent> = {
+  title: 'Library/Organisms/DeckLabelSet',
+  component: DeckLabelSetComponent,
+  decorators: [
+    Story => (
+      <Flex padding={SPACING.spacing16}>
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+export default meta
+
+type Story = StoryObj<typeof DeckLabelSetComponent>
+
+export const DeckLabel: Story = {
+  args: {
+    // width and height from Figma
+    deckLabels: mockDeckLabels,
+    width: 31.9375,
+    height: 5.75,
+    x: 0,
+    y: 0,
+  },
+}