@opentrons/components 0.1.7-alpha.0 → 0.1.7-alpha.1

package/src/molecules/DropdownMenu/index.tsx

@@ -1,7 +1,6 @@
 import { Fragment, useEffect, useRef, useState } from 'react'
-import type { FocusEventHandler } from 'react'
 import { css } from 'styled-components'
-import type { FlattenSimpleInterpolation } from 'styled-components'
+
 import { MenuItem } from '../../atoms/MenuList/MenuItem'
 import { StyledText } from '../../atoms/StyledText'
 import { LegacyStyledText } from '../../atoms/StyledText/LegacyStyledText'
@@ -27,6 +26,9 @@ import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { DeckInfoLabel } from '../DeckInfoLabel'
 import { LiquidIcon } from '../LiquidIcon'
 
+import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { FocusEventHandler } from 'react'
+
 export interface DropdownOption {
   /** dropdown option name */
   name: string
@@ -290,6 +292,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
           onFocus={onFocus}
           onBlur={onBlur}
           css={DROPDOWN_STYLE}
+          data-testId="dropdownMenu"
           tabIndex={tabIndex}
         >
           <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>

package/src/molecules/InfoScreen/InfoScreen.stories.tsx

@@ -1,8 +1,9 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import * as React from 'react-remove-scroll'
+
+import { COLORS } from '../../helix-design-system'
 import { Flex } from '../../primitives'
 import { SPACING } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
 import { InfoScreen as InfoScreenComponent } from './index'
 
 import type { Meta, StoryObj } from '@storybook/react'

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

@@ -1,9 +1,9 @@
 import { screen } from '@testing-library/react'
-import { describe, it, expect, beforeEach } from 'vitest'
+import { beforeEach, describe, expect, it } from 'vitest'
 
-import { renderWithProviders } from '../../../testing/utils'
-import { BORDERS, COLORS } from '../../../helix-design-system'
 import { InfoScreen } from '..'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/molecules/InfoScreen/index.tsx

@@ -1,9 +1,9 @@
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { SPACING } from '../../ui-style-constants/index'
 import { StyledText } from '../../atoms/StyledText'
+import { BORDERS, COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
 import { Flex } from '../../primitives'
 import { ALIGN_CENTER, DIRECTION_COLUMN, JUSTIFY_CENTER } from '../../styles'
+import { SPACING } from '../../ui-style-constants/index'
 
 interface InfoScreenProps {
   content: string

package/src/molecules/LiquidIcon/LiquidIcon.stories.tsx

@@ -1,7 +1,8 @@
+import { LiquidIcon } from '.'
+import { customViewports } from '../../../../.storybook/preview'
 import { Flex } from '../../primitives'
 import { SPACING } from '../../ui-style-constants'
-import { customViewports } from '../../../../.storybook/preview'
-import { LiquidIcon } from '.'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof LiquidIcon> = {

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

@@ -1,10 +1,10 @@
-import { describe, it, expect } from 'vitest'
-import { renderWithProviders } from '../../../testing/utils'
 import { screen } from '@testing-library/react'
-import { SPACING } from '../../../ui-style-constants'
-import { BORDERS, COLORS } from '../../../helix-design-system'
+import { describe, expect, it } from 'vitest'
 
 import { LiquidIcon } from '..'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
+import { SPACING } from '../../../ui-style-constants'
 
 import type { ComponentProps } from 'react'
 

package/src/molecules/LiquidIcon/index.tsx

@@ -1,13 +1,14 @@
 import { css } from 'styled-components'
-import { Btn, Flex } from '../../primitives'
-import { SPACING } from '../../ui-style-constants'
+
 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 = 'small' | 'medium'
+type LiquidIconSize = 'xSmall' | 'small' | 'medium'
 
-interface LiquidIconProps {
+export interface LiquidIconProps {
   color: string
   size?: LiquidIconSize
   onClick?: () => void
@@ -17,6 +18,15 @@ interface LiquidIconProps {
 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;
@@ -37,14 +47,10 @@ export function LiquidIcon(props: LiquidIconProps): JSX.Element {
   const liquid = (
     <Flex
       css={LIQUID_ICON_CONTAINER_STYLE}
-      padding={size === 'medium' ? SPACING.spacing12 : SPACING.spacing8}
+      padding={sizeStylesMap[size].padding}
       data-testid={`LiquidIcon_${color}`}
     >
-      <Icon
-        name="circle"
-        color={color}
-        size={size === 'medium' ? '1rem' : '0.5rem'}
-      />
+      <Icon name="circle" color={color} size={sizeStylesMap[size].iconSize} />
     </Flex>
   )
 

package/src/molecules/ListAccordion/ListAccordion.stories.tsx

@@ -2,17 +2,17 @@ import { css } from 'styled-components'
 
 import {
   Flex,
-  Tag,
   Icon,
-  VIEWPORT,
   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'
-import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'Helix/Molecules/ListAccordion',

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

@@ -1,10 +1,10 @@
-import { describe, expect, it, beforeEach, vi } from 'vitest'
-import { screen, fireEvent } from '@testing-library/react'
+import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { renderWithProviders } from '../../../testing/utils'
 import { ListAccordion } from '..'
 import { ListTable } from '../../../atoms/ListTable'
 import { Icon } from '../../../icons'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/molecules/ListAccordion/index.tsx

@@ -2,19 +2,19 @@ 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 {
-  DIRECTION_COLUMN,
-  JUSTIFY_SPACE_BETWEEN,
   ALIGN_CENTER,
   CURSOR_POINTER,
+  DIRECTION_COLUMN,
+  JUSTIFY_SPACE_BETWEEN,
 } from '../../styles'
-import { SPACING, RESPONSIVENESS } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
-import { Flex, Box } from '../../primitives'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 
-import type { ReactNode } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { ReactNode } from 'react'
 import type { ListTableProps } from '../../atoms/ListTable'
 
 const TRANSITION_STYLE = 'all 150ms ease-in'

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

@@ -1,5 +1,6 @@
 // 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'

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

@@ -1,6 +1,7 @@
-import { renderWithProviders } from '../../../testing/utils'
-import { describe, it, beforeEach } from 'vitest'
 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'

package/src/molecules/ParametersTable/index.tsx

@@ -1,21 +1,23 @@
 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 { 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'
 

package/src/molecules/ReleaseNotes/index.tsx

@@ -1,9 +1,9 @@
 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 {

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

@@ -1,6 +1,8 @@
 import { useArgs } from '@storybook/preview-api'
-import { VIEWPORT } from '../../ui-style-constants'
+
 import { Tabs as TabsComponent } from '.'
+import { VIEWPORT } from '../../ui-style-constants'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof TabsComponent> = {

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

@@ -1,9 +1,10 @@
-import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import { BORDERS, COLORS } from '../../../helix-design-system'
-import { SPACING } from '../../../ui-style-constants'
 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'

package/src/molecules/Tabs/index.tsx

@@ -1,10 +1,11 @@
 import { css } from 'styled-components'
+
 import { Tooltip } from '../../atoms'
-import { COLORS, BORDERS } from '../../helix-design-system'
+import { BORDERS, COLORS } from '../../helix-design-system'
 import { Btn, Flex } from '../../primitives'
-import { POSITION_RELATIVE, DIRECTION_ROW } from '../../styles'
+import { DIRECTION_ROW, POSITION_RELATIVE } from '../../styles'
 import { useHoverTooltip } from '../../tooltips'
-import { TYPOGRAPHY, SPACING, RESPONSIVENESS } from '../../ui-style-constants'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 
 const DEFAULT_TAB_STYLE = css`
   ${TYPOGRAPHY.pSemiBold}

package/src/molecules/TextListTableContent/TextListTableContent.stories.tsx

@@ -5,8 +5,8 @@ import { StyledText } from '../../atoms'
 import { DISPLAY_GRID } from '../../styles'
 import { SPACING, VIEWPORT } from '../../ui-style-constants'
 
+import type { Meta, Story } from '@storybook/react'
 import type { ComponentProps } from 'react'
-import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'Helix/Molecules/TextListTableContent',

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

@@ -1,9 +1,9 @@
-import { describe, it, beforeEach, vi } from 'vitest'
 import { screen } from '@testing-library/react'
+import { beforeEach, describe, it, vi } from 'vitest'
 
-import { renderWithProviders } from '../../../testing/utils'
 import { TextListTableContent } from '..'
 import { ListTable } from '../../../atoms/ListTable'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/molecules/TextListTableContent/index.tsx

@@ -1,10 +1,10 @@
 import { css } from 'styled-components'
 
-import { SPACING, RESPONSIVENESS } from '../../ui-style-constants'
-import { ListTable } from '../../atoms/ListTable'
 import { StyledText } from '../../atoms'
+import { ListTable } from '../../atoms/ListTable'
 import { Flex } from '../../primitives'
 import { DIRECTION_COLUMN } from '../../styles'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 
 import type { ReactNode } from 'react'
 import type { ListTableProps } from '../../atoms/ListTable'

package/src/nav/SidePanel.stories.tsx

@@ -1,8 +1,9 @@
-import type * as React from 'react'
+import { ALIGN_CENTER, Flex, JUSTIFY_CENTER, Text } from '@opentrons/components'
+
 import { SidePanel as SidePanelComponent } from './SidePanel'
-import { Text, Flex, JUSTIFY_CENTER, ALIGN_CENTER } from '@opentrons/components'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Molecules/Side Panel',

package/src/organisms/CommandText/CommandText.stories.tsx

@@ -1,9 +1,10 @@
 import * as Fixtures from '../../../../app/src/molecules/Command/__fixtures__'
-import { getLabwareDefinitionsFromCommands } from './useCommandTextString/utils'
 import { Box } from '../../primitives'
 import { CommandText as CommandTextComponent } from './index'
-import type { RobotType } from '@opentrons/shared-data'
+import { getLabwareDefinitionsFromCommands } from './useCommandTextString/utils'
+
 import type { Meta, StoryObj } from '@storybook/react'
+import type { RobotType } from '@opentrons/shared-data'
 
 interface StorybookArgs {
   onDevice: boolean

package/src/organisms/CommandText/__tests__/CommandText.test.tsx

@@ -1,13 +1,16 @@
-import { it, expect, describe } from 'vitest'
 import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
 
 import {
   FLEX_ROBOT_TYPE,
-  OT2_ROBOT_TYPE,
   GRIPPER_WASTE_CHUTE_ADDRESSABLE_AREA,
+  OT2_ROBOT_TYPE,
 } from '@opentrons/shared-data'
+
 import { i18n } from '../../../i18n'
 import { renderWithProviders } from '../../../testing/utils'
+import { getCommandTextData } from '../../ProtocolTimelineScrubber/utils'
+import { mockRobotSideAnalysis } from '../fixtures'
 import { CommandText } from '../index'
 
 import type {
@@ -22,17 +25,15 @@ import type {
   DropTipRunTimeCommand,
   LabwareDefinition2,
   LoadLabwareRunTimeCommand,
+  LoadLiquidClassRunTimeCommand,
   LoadLiquidRunTimeCommand,
+  MoveToAddressableAreaForDropTipRunTimeCommand,
   MoveToAddressableAreaRunTimeCommand,
   MoveToWellRunTimeCommand,
   PrepareToAspirateRunTimeCommand,
   RunTimeCommand,
-  MoveToAddressableAreaForDropTipRunTimeCommand,
-  LoadLiquidClassRunTimeCommand,
 } from '@opentrons/shared-data'
 import type { CommandTextData } from '../../ProtocolTimelineScrubber'
-import { getCommandTextData } from '../../ProtocolTimelineScrubber/utils'
-import { mockRobotSideAnalysis } from '../fixtures'
 
 const mockCommandTextData: CommandTextData = {
   commands: mockRobotSideAnalysis.commands,

package/src/organisms/CommandText/fixtures/index.ts

@@ -1,4 +1,5 @@
 import robotSideAnalysis from './mockRobotSideAnalysis.json'
+
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
 
 export const mockRobotSideAnalysis: CompletedProtocolAnalysis = robotSideAnalysis as CompletedProtocolAnalysis

package/src/organisms/CommandText/index.tsx

@@ -1,10 +1,12 @@
 import pick from 'lodash/pick'
 import { css } from 'styled-components'
+
 import { LegacyStyledText, StyledText } from '../../atoms'
+import { Flex } from '../../primitives'
 import { ALIGN_CENTER, DIRECTION_COLUMN } from '../../styles'
 import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
-import { Flex } from '../../primitives'
 import { useCommandTextString } from './useCommandTextString'
+
 import type { ComponentProps } from 'react'
 import type {
   LabwareDefinition2,
@@ -12,11 +14,11 @@ import type {
   RunTimeCommand,
 } from '@opentrons/shared-data'
 import type { StyleProps } from '../../primitives'
+import type { CommandTextData } from '../ProtocolTimelineScrubber/types'
 import type {
   GetTCRunExtendedProfileCommandTextResult,
   GetTCRunProfileCommandTextResult,
 } from './useCommandTextString'
-import type { CommandTextData } from '../ProtocolTimelineScrubber/types'
 
 export * from './useCommandTextString'
 interface LegacySTProps {

package/src/organisms/CommandText/useCommandTextString/index.ts

@@ -1,17 +1,18 @@
 import { useTranslation } from 'react-i18next'
+
 import * as utils from './utils'
 
 import type { TFunction } from 'i18next'
 import type {
-  RunTimeCommand,
-  RobotType,
   LabwareDefinition2,
+  RobotType,
+  RunTimeCommand,
 } from '@opentrons/shared-data'
 import type { CommandTextData } from '../../ProtocolTimelineScrubber/types'
 import type {
-  TCProfileStepText,
-  TCProfileCycleText,
   GetDirectTranslationCommandText,
+  TCProfileCycleText,
+  TCProfileStepText,
 } from './utils'
 
 export * from './utils'
@@ -53,7 +54,7 @@ export function useCommandTextString(
   params: UseCommandTextStringParams
 ): GetCommandTextResult {
   const { command } = params
-  const { t } = useTranslation('protocol_command_text')
+  const { t } = useTranslation(['protocol_command_text', 'branded'])
 
   const fullParams = { ...params, t }
 
@@ -147,6 +148,18 @@ export function useCommandTextString(
           command,
         }),
       }
+    case 'flexStacker/retrieve':
+    case 'flexStacker/store':
+    case 'flexStacker/setStoredLabware':
+    case 'flexStacker/empty':
+    case 'flexStacker/fill':
+      return {
+        kind: 'generic',
+        commandText: utils.getFlexStackerCommandText({
+          ...fullParams,
+          command,
+        }),
+      }
     case 'thermocycler/runProfile':
       return utils.getTCRunProfileCommandText({ ...fullParams, command })
 
@@ -298,6 +311,16 @@ export function useCommandTextString(
         commandText: utils.getRailLightsCommandText({ ...fullParams, command }),
       }
 
+    case 'robot/moveTo':
+    case 'robot/moveAxesTo':
+    case 'robot/moveAxesRelative':
+    case 'robot/openGripperJaw':
+    case 'robot/closeGripperJaw':
+      return {
+        kind: 'generic',
+        commandText: utils.getRobotCommandText({ ...fullParams, command }),
+      }
+
     case undefined:
     case null:
       return { kind: 'generic', commandText: '' }

package/src/organisms/CommandText/useCommandTextString/utils/__tests__/formatDuration.test.tsx

@@ -1,4 +1,5 @@
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
+
 import { formatDuration, formatDurationLabeled } from '../formatDuration'
 
 describe('formatDuration', () => {

package/src/organisms/CommandText/useCommandTextString/utils/__tests__/getFinalLabwareLocation.test.ts

@@ -1,6 +1,9 @@
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
+
 import { fixtureTiprack10ul } from '@opentrons/shared-data'
+
 import { getFinalLabwareLocation } from '../getFinalLabwareLocation'
+
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
 describe('getFinalLabwareLocation', () => {

package/src/organisms/CommandText/useCommandTextString/utils/__tests__/getLabwareDisplayLocation.test.tsx

@@ -1,17 +1,18 @@
-import { describe, it, expect, vi } from 'vitest'
-import { screen } from '@testing-library/react'
 import { useTranslation } from 'react-i18next'
+import { screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
 
 import {
   FLEX_ROBOT_TYPE,
+  getLabwareDefURI,
+  getLabwareDisplayName,
   getModuleDisplayName,
   getModuleType,
   getOccludedSlotCountForModule,
-  getLabwareDefURI,
-  getLabwareDisplayName,
 } from '@opentrons/shared-data'
-import { renderWithProviders } from '../../../../../testing/utils'
+
 import { i18n } from '../../../../../i18n'
+import { renderWithProviders } from '../../../../../testing/utils'
 import { getLabwareDisplayLocation } from '../getLabwareDisplayLocation'
 import { getModuleDisplayLocation } from '../getModuleDisplayLocation'
 import { getModuleModel } from '../getModuleModel'