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

package/src/Components.mdx

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Helix/AboutHelix" />
+
+# About Helix
+
+Helix is a design system for building user interfaces for Opentrons.
+Currently, it is used by the Desktop app, Touchscreen app, Protocol Designer, and Opentrons AI client.
+
+Figma: <a href="https://www.figma.com/design/1ot18My22DALIcjdLl5LJh/Helix-Design-System?node-id=302-1785&m=dev" target="_blank">Helix Design System</a>
+
+Contents will be added soon.

package/src/__tests__/utils.test.ts

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

package/src/alerts/AlertItem.stories.tsx

@@ -1,7 +1,7 @@
-import type * as React from 'react'
 import { AlertItem } from './AlertItem'
 
-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/AlertItem',

package/src/alerts/AlertItem.tsx

@@ -1,6 +1,7 @@
 import cx from 'classnames'
-import { Icon } from '../icons'
+
 import { IconButton } from '../buttons'
+import { Icon } from '../icons'
 import styles from './alerts.module.css'
 
 import type { ReactNode } from 'react'

package/src/alerts/alerts.module.css

@@ -12,8 +12,8 @@
 .title_bar {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   padding: 0.5rem 1rem;
   font-weight: var(--fw-semibold);
 }
@@ -79,8 +79,8 @@
   background-color: white;
 
   & a {
-    text-decoration: underline;
     color: inherit;
+    text-decoration: underline;
   }
 
   &:empty {

package/src/assets/localization/en/deck_configuration.json

@@ -0,0 +1,12 @@
+{
+  "flex_stacker_display_name": "Stacker",
+  "flex_stacker_waste_chute_display_name": "Stacker + Waste chute",
+  "absorbance": "Absorbance",
+  "heater_Shaker": "Heater-Shaker",
+  "mag_block": "Mag",
+  "staging_area": "Stage",
+  "temperature": "Temperature",
+  "thermocycler": "Thermocycler",
+  "trash_bin": "Trash bin",
+  "waste": "Waste"
+}

package/src/assets/localization/en/index.ts

@@ -1,3 +1,4 @@
+import deck_configuration from './deck_configuration.json'
 import protocol_command_text from './protocol_command_text.json'
 
 // i18n files needed for unit testing. this is the quick fix for now until we figure out
@@ -5,4 +6,5 @@ import protocol_command_text from './protocol_command_text.json'
 // translation across multiple projects
 export const en = {
   protocol_command_text,
+  deck_configuration,
 }

package/src/assets/localization/en/protocol_command_text.json

@@ -32,12 +32,18 @@
   "drop_tip_in_place": "Dropping tip in place",
   "dropping_tip_in_trash": "Dropping tip in {{trash}}",
   "engaging_magnetic_module": "Engaging Magnetic Module",
+  "extension_mount": "extension mount",
+  "extension_z": "extension Z",
+  "extension_jaw": "extension jaw",
   "fixed_trash": "Fixed Trash",
   "get_next_tip": "Calculating position of the next available tip",
   "home_gantry": "Homing all gantry, pipette, and plunger axes",
   "in_location": "in {{location}}",
   "latching_hs_latch": "Latching labware on Heater-Shaker",
   "left": "Left",
+  "left_mount": "left mount",
+  "left_plunger": "left plunger",
+  "left_z": "left Z",
   "load_labware_to_display_location": "Load {{labware}} {{display_location}}",
   "load_liquid_class": "Loading {{liquidClassDisplayName}} Liquid Class",
   "load_liquids_info_protocol_setup": "Load {{liquid}} into {{labware}}",
@@ -54,7 +60,7 @@
   "move_to_addressable_area_drop_tip": "Moving to {{addressable_area}}",
   "move_to_coordinates": "Moving to (X: {{x}}, Y: {{y}}, Z: {{z}})",
   "move_to_slot": "Moving to Slot {{slot_name}}",
-  "move_to_well": "Moving to well {{well_name}} of {{labware}} in {{labware_location}}",
+  "move_to_well": "Moving to X {{xOffset}} Y {{yOffset}} Z {{zOffset}} relative to {{positionRelative}} of well {{wellName}} of {{labware}} in {{displayLocation}}",
   "multiple": "multiple",
   "notes": "notes",
   "off_deck": "off deck",
@@ -69,6 +75,14 @@
   "reloading_labware": "Reloading {{labware}}",
   "return_tip": "Returning tip to {{well_name}} of {{labware}} in {{labware_location}}",
   "right": "Right",
+  "right_mount": "right mount",
+  "right_plunger": "right plunger",
+  "right_z": "right Z",
+  "robot_close_gripper_jaw": "Closing robot gripper jaw",
+  "robot_move_to": "Moving {{mount}} to (X: {{x}}, Y: {{y}}, Z: {{z}})",
+  "robot_move_axes_relative": "Moving robot by {{displacement}}",
+  "robot_move_axes_to": "Moving robot to {{position}}",
+  "robot_open_gripper_jaw": "Opening robot gripper jaw",
   "row_layout": "row layout",
   "save_position": "Saving position",
   "set_and_await_hs_shake": "Setting Heater-Shaker to shake at {{rpm}} rpm and waiting until reached",

package/src/atoms/AnimationVideo/__tests__/AnimationVideo.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { AnimationVideo } from '..'
+
+describe('AnimationVideo', () => {
+  it('should have default props', () => {
+    render(<AnimationVideo data-testid="subject" />)
+    const videoNode = screen.getByTestId('subject')
+    expect(videoNode).toHaveAttribute('autoplay')
+    expect(videoNode).toHaveAttribute('loop')
+    expect(videoNode).not.toHaveAttribute('controls')
+    expect(videoNode).toHaveAttribute('disableRemotePlayback')
+    expect(videoNode).toHaveAttribute('disablePictureInPicture')
+    expect((videoNode as HTMLVideoElement).muted).toBeTruthy()
+  })
+
+  it('should merge default props with custom props', () => {
+    render(<AnimationVideo data-testid="subject" preload="auto" loop={false} />)
+    const videoNode = screen.getByTestId('subject')
+    expect(videoNode).toHaveAttribute('autoplay')
+    expect(videoNode).not.toHaveAttribute('loop') // Default overridden by custom.
+    expect(videoNode).not.toHaveAttribute('controls')
+    expect(videoNode).toHaveAttribute('disableRemotePlayback')
+    expect(videoNode).toHaveAttribute('disablePictureInPicture')
+    expect((videoNode as HTMLVideoElement).muted).toBeTruthy()
+    expect(videoNode).toHaveAttribute('preload', 'auto') // Custom-only.
+  })
+
+  it('should render children', () => {
+    render(
+      <AnimationVideo>
+        <source data-testid="source1"></source>
+        <source data-testid="source2"></source>
+      </AnimationVideo>
+    )
+    screen.getByTestId('source1')
+    screen.getByTestId('source2')
+  })
+})

package/src/atoms/AnimationVideo/index.tsx

@@ -0,0 +1,44 @@
+import type { ComponentProps } from 'react'
+
+export type AnimationVideoProps = ComponentProps<'video'>
+
+/**
+ * A `<video>` tag with default props for showing a looping animation.
+ *
+ * @example
+ * ```jsx
+ * <AnimationVideo>
+ *   <source src="foo.webm" />
+ * </AnimationVideo>
+ * ```
+ */
+export function AnimationVideo(props: AnimationVideoProps): JSX.Element {
+  const {
+    autoPlay = true,
+    loop = true,
+    // Our animations don't have audio, but we apparently need to pass `muted` anyway.
+    // It prevents the browser from trying to play audio on connected Bluetooth
+    // headphones, which would interrupt audio coming from other devices.
+    //
+    // Because of some React nonsense, the rendered DOM node will not have a `muted`
+    // attribute, but its `muted` property will be true, which is good enough.
+    // https://github.com/facebook/react/issues/10389
+    muted = true,
+    controls = false,
+    disableRemotePlayback = true,
+    disablePictureInPicture = true,
+    ...restProps
+  } = props
+  return (
+    <video
+      autoPlay={autoPlay}
+      loop={loop}
+      muted={muted}
+      controls={controls}
+      disableRemotePlayback={disableRemotePlayback}
+      disablePictureInPicture={disablePictureInPicture}
+      {...restProps}
+      // Child <source>s rendered via {...restProps} spreading above.
+    />
+  )
+}

package/src/atoms/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import { Checkbox } from './index'
 
-import type { StoryObj, Meta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof Checkbox> = {
   title: 'Helix/Atoms/Checkbox',

package/src/atoms/Checkbox/__tests__/Checkbox.test.tsx

@@ -1,8 +1,10 @@
-import { describe, beforeEach, afterEach, vi, expect, it } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
 import '@testing-library/jest-dom/vitest'
-import { renderWithProviders } from '../../../testing/utils'
+
 import { Checkbox } from '..'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/atoms/Checkbox/index.tsx

@@ -1,7 +1,8 @@
 import { css } from 'styled-components'
-import { COLORS, BORDERS } from '../../helix-design-system'
-import { Flex } from '../../primitives'
+
+import { BORDERS, COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
+import { Flex } from '../../primitives'
 import {
   ALIGN_CENTER,
   CURSOR_AUTO,

package/src/atoms/CheckboxField/CheckboxField.stories.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react'
+
 import { CheckboxField as CheckboxFieldComponent } from './index'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
 
 export default {
-  title: 'Library/Atoms/Checkbox Field',
+  title: 'Helix/Atoms/Checkbox Field',
   component: CheckboxFieldComponent,
 } as Meta
 

package/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx

@@ -1,11 +1,13 @@
-import { describe, beforeEach, afterEach, vi, expect, it } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
 import '@testing-library/jest-dom/vitest'
+
+import { CheckboxField } from '..'
+import { BORDERS, COLORS } from '../../../helix-design-system'
 import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../../styles'
 import { renderWithProviders } from '../../../testing/utils'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
-import { CheckboxField } from '..'
+import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
 
 import type { ComponentProps } from 'react'
 
@@ -40,17 +42,12 @@ describe('CheckboxField', () => {
     const checkBoxIcon = screen.getByTestId('CheckboxField_icon')
 
     // INNER_STYLE_NO_VALUE
-    expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`)
     expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
-    expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey50)}`)
+    expect(checkBoxIcon).toHaveStyle(`color: ${COLORS.grey50}`)
     expect(checkBoxIcon).toHaveStyle(`display: flex`)
-    expect(checkBoxIcon).toHaveStyle(
-      `border-radius: ${String(BORDERS.borderRadius2)}`
-    )
-    expect(checkBoxIcon).toHaveStyle(
-      `justify-content: ${String(JUSTIFY_CENTER)}`
-    )
-    expect(checkBoxIcon).toHaveStyle(`align-items: ${String(ALIGN_CENTER)}`)
+    expect(checkBoxIcon).toHaveStyle(`border-radius: ${BORDERS.borderRadius2}`)
+    expect(checkBoxIcon).toHaveStyle(`justify-content: ${JUSTIFY_CENTER}`)
+    expect(checkBoxIcon).toHaveStyle(`align-items: ${ALIGN_CENTER}`)
 
     // INPUT_STYLE
     expect(checkBoxInput).toHaveStyle(`position: absolute`)
@@ -64,13 +61,11 @@ describe('CheckboxField', () => {
     expect(checkBoxInput).toHaveAttribute('tabindex', '0')
 
     // LABEL_TEXT_STYLE
+    expect(checkBoxFieldBox).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeH3}`)
     expect(checkBoxFieldBox).toHaveStyle(
-      `font-size: ${String(TYPOGRAPHY.fontSizeP)}`
+      `font-weight: ${TYPOGRAPHY.fontWeightRegular}`
     )
-    expect(checkBoxFieldBox).toHaveStyle(
-      `font-weight: ${String(TYPOGRAPHY.fontWeightRegular)}`
-    )
-    expect(checkBoxFieldBox).toHaveStyle(`color: ${String(COLORS.black90)}`)
+    expect(checkBoxFieldBox).toHaveStyle(`color: ${COLORS.black90}`)
     expect(checkBoxFieldBox).toHaveStyle(`flex: 0 0 auto`)
     expect(checkBoxFieldBox).toHaveStyle(
       `padding: ${SPACING.spacing8} ${SPACING.spacing8}`
@@ -81,34 +76,24 @@ describe('CheckboxField', () => {
     props.value = true
     render(props)
     const checkBoxIcon = screen.getByTestId('CheckboxField_icon')
-    expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`)
     expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
-    expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.blue50)}`)
+    expect(checkBoxIcon).toHaveStyle(`color: ${COLORS.blue50}`)
     expect(checkBoxIcon).toHaveStyle(`display: flex`)
-    expect(checkBoxIcon).toHaveStyle(
-      `border-radius: ${String(BORDERS.borderRadius2)}`
-    )
-    expect(checkBoxIcon).toHaveStyle(
-      `justify-content: ${String(JUSTIFY_CENTER)}`
-    )
-    expect(checkBoxIcon).toHaveStyle(`align-items: ${String(ALIGN_CENTER)}`)
+    expect(checkBoxIcon).toHaveStyle(`border-radius: ${BORDERS.borderRadius2}`)
+    expect(checkBoxIcon).toHaveStyle(`justify-content: ${JUSTIFY_CENTER}`)
+    expect(checkBoxIcon).toHaveStyle(`align-items: ${ALIGN_CENTER}`)
   })
 
   it('renders label with correct style - value undefined', () => {
     props.value = undefined
     render(props)
     const checkBoxIcon = screen.getByTestId('CheckboxField_icon')
-    expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`)
     expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
-    expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey50)}`)
+    expect(checkBoxIcon).toHaveStyle(`color: ${COLORS.grey50}`)
     expect(checkBoxIcon).toHaveStyle(`display: flex`)
-    expect(checkBoxIcon).toHaveStyle(
-      `border-radius: ${String(BORDERS.borderRadius2)}`
-    )
-    expect(checkBoxIcon).toHaveStyle(
-      `justify-content: ${String(JUSTIFY_CENTER)}`
-    )
-    expect(checkBoxIcon).toHaveStyle(`align-items: ${String(ALIGN_CENTER)}`)
+    expect(checkBoxIcon).toHaveStyle(`border-radius: ${BORDERS.borderRadius2}`)
+    expect(checkBoxIcon).toHaveStyle(`justify-content: ${JUSTIFY_CENTER}`)
+    expect(checkBoxIcon).toHaveStyle(`align-items: ${ALIGN_CENTER}`)
   })
 
   it('renders label with correct style - disabled true', () => {
@@ -126,9 +111,7 @@ describe('CheckboxField', () => {
     const checkBoxInput = screen.getByRole('checkbox', {
       name: 'checkMockCheckboxField',
     })
-    const checkBoxFieldBox = screen.getByText('checkMockCheckboxField')
     expect(checkBoxInput).toHaveAttribute('tabindex', '1')
-    expect(checkBoxFieldBox).toHaveAttribute('tabindex', '1')
   })
 
   it('calls mock function when clicking checkboxfield', () => {

package/src/atoms/CheckboxField/index.tsx

@@ -1,15 +1,17 @@
 import { css } from 'styled-components'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { COLORS, BORDERS } from '../../helix-design-system'
-import { Flex, Box } from '../../primitives'
+
+import { BORDERS, COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
+import { Box, Flex } from '../../primitives'
 import {
   ALIGN_CENTER,
   CURSOR_AUTO,
   CURSOR_POINTER,
   JUSTIFY_CENTER,
 } from '../../styles'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 
+import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { ChangeEventHandler, ComponentProps, ReactNode } from 'react'
 
 export interface CheckboxFieldProps {
@@ -31,6 +33,58 @@ export interface CheckboxFieldProps {
   isIndeterminate?: boolean
 }
 
+export function CheckboxField(props: CheckboxFieldProps): JSX.Element {
+  const {
+    onChange,
+    value,
+    name,
+    label,
+    disabled,
+    tabIndex = 0,
+    isIndeterminate,
+  } = props
+  const indeterminate = isIndeterminate ?? false ? 'true' : undefined
+
+  return (
+    <label css={OUTER_STYLE(value ?? false)}>
+      {props.isIndeterminate ?? false ? (
+        <Flex
+          alignItems={ALIGN_CENTER}
+          justifyContent={JUSTIFY_CENTER}
+          borderRadius={BORDERS.borderRadius2}
+          backgroundColor={COLORS.grey30}
+          size="1.25rem"
+        >
+          <Box
+            height="1.5px"
+            width="0.375rem"
+            backgroundColor={COLORS.grey50}
+          />
+        </Flex>
+      ) : (
+        <Icon
+          css={value ?? false ? INNER_STYLE_VALUE : INNER_STYLE_NO_VALUE}
+          name={value ?? false ? 'ot-checkbox' : 'checkbox-blank-outline'}
+          width="1.25rem"
+          data-testid="CheckboxField_icon"
+        />
+      )}
+      <input
+        css={INPUT_STYLE}
+        type="checkbox"
+        name={name}
+        checked={(value ?? false) || false}
+        disabled={disabled}
+        onChange={onChange}
+        tabIndex={tabIndex}
+        /* @ts-expect-error */
+        indeterminate={indeterminate}
+      />
+      <Box css={LABEL_TEXT_STYLE}>{label}</Box>
+    </label>
+  )
+}
+
 const INPUT_STYLE = css`
   position: absolute;
   overflow: hidden;
@@ -41,7 +95,8 @@ const INPUT_STYLE = css`
   padding: 0;
   border: 0;
 `
-const OUTER_STYLE = css`
+
+const OUTER_STYLE = (value?: boolean): FlattenSimpleInterpolation => css`
   font-size: var(--fs-body-1); /* from legacy --font-form-default */
   font-weight: var(--fw-regular); /* from legacy --font-form-default */
   color: var(--c-font-dark); /* from legacy --font-form-default */
@@ -49,6 +104,27 @@ const OUTER_STYLE = css`
   display: flex;
   align-items: ${ALIGN_CENTER};
   line-height: 1;
+
+  &:has(input[type='checkbox']:focus-visible) {
+    [data-testid='CheckboxField_icon'] {
+      color: ${value === true ? COLORS.blue50 : COLORS.grey55};
+      outline: 2px solid ${COLORS.blue50};
+      outline-offset: 0.25rem;
+    }
+  }
+`
+
+const LABEL_TEXT_STYLE = css`
+  font-size: ${TYPOGRAPHY.fontSizeH3};
+  font-weight: ${TYPOGRAPHY.fontWeightRegular};
+  line-height: ${TYPOGRAPHY.lineHeight20};
+  color: ${COLORS.black90};
+  flex: 0 0 auto;
+  padding: ${SPACING.spacing8} ${SPACING.spacing8};
+
+  &:empty {
+    padding: 0;
+  }
 `
 
 const INNER_STYLE_VALUE = css`
@@ -72,6 +148,7 @@ const INNER_STYLE_VALUE = css`
   &:focus {
     box-shadow: 0 0 0 3px ${COLORS.blue50};
   }
+
   &:disabled {
     color: ${COLORS.blue60};
   }
@@ -104,69 +181,3 @@ const INNER_STYLE_NO_VALUE = css`
     cursor: ${CURSOR_AUTO};
   }
 `
-
-const LABEL_TEXT_STYLE = css`
-  font-size: ${TYPOGRAPHY.fontSizeP};
-  font-weight: ${TYPOGRAPHY.fontWeightRegular};
-  color: ${COLORS.black90};
-  flex: 0 0 auto;
-  padding: ${SPACING.spacing8} ${SPACING.spacing8};
-
-  &:empty {
-    padding: 0;
-  }
-`
-
-export function CheckboxField(props: CheckboxFieldProps): JSX.Element {
-  const {
-    onChange,
-    value,
-    name,
-    label,
-    disabled,
-    tabIndex = 0,
-    isIndeterminate,
-  } = props
-  const indeterminate = isIndeterminate ?? false ? 'true' : undefined
-
-  return (
-    <label css={OUTER_STYLE}>
-      {props.isIndeterminate ?? false ? (
-        <Flex
-          alignItems={ALIGN_CENTER}
-          justifyContent={JUSTIFY_CENTER}
-          borderRadius={BORDERS.borderRadius2}
-          backgroundColor={COLORS.grey30}
-          size="1.25rem"
-        >
-          <Box
-            height="1.5px"
-            width="0.375rem"
-            backgroundColor={COLORS.grey50}
-          />
-        </Flex>
-      ) : (
-        <Icon
-          css={value ?? false ? INNER_STYLE_VALUE : INNER_STYLE_NO_VALUE}
-          name={value ?? false ? 'ot-checkbox' : 'checkbox-blank-outline'}
-          width="100%"
-          data-testid="CheckboxField_icon"
-        />
-      )}
-      <input
-        css={INPUT_STYLE}
-        type="checkbox"
-        name={name}
-        checked={(value ?? false) || false}
-        disabled={disabled}
-        onChange={onChange}
-        tabIndex={tabIndex}
-        /* @ts-expect-error */
-        indeterminate={indeterminate}
-      />
-      <Box css={LABEL_TEXT_STYLE} tabIndex={tabIndex}>
-        {label}
-      </Box>
-    </label>
-  )
-}

package/src/atoms/Chip/Chip.stories.tsx

@@ -1,7 +1,8 @@
-import { Flex, STYLE_PROPS } from '../../primitives'
+import { Chip as ChipComponent } from '.'
 import { COLORS } from '../../helix-design-system'
+import { Flex, STYLE_PROPS } from '../../primitives'
 import { SPACING, VIEWPORT } from '../../ui-style-constants'
-import { Chip as ChipComponent } from '.'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof ChipComponent> = {

package/src/atoms/Chip/__tests__/Chip.test.tsx

@@ -1,9 +1,10 @@
-import { describe, it, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { Chip } from '..'
 import { BORDERS, COLORS } from '../../../helix-design-system'
-import { SPACING } from '../../../ui-style-constants'
 import { renderWithProviders } from '../../../testing/utils'
-import { Chip } from '..'
+import { SPACING } from '../../../ui-style-constants'
 
 import type { ComponentProps } from 'react'
 
@@ -212,6 +213,24 @@ describe('Chip Touchscreen', () => {
   //   const icon = screen.getByLabelText('icon_mockInfo')
   //   expect(icon).toHaveStyle(`width: 1.25rem`)
   // })
+  it('renders a pulsing icon when pulseIcon is true', () => {
+    props = { text: 'mockPulse', type: 'info', pulseIcon: true }
+    render(props)
+    const animate = screen.getByTestId('Chip_info_icon_animate')
+    expect(animate).toHaveAttribute('attributeName', 'fill')
+    expect(animate).toHaveAttribute('values', `${COLORS.blue60}; transparent`)
+    expect(animate).toHaveAttribute('dur', '1s')
+    expect(animate).toHaveAttribute('calcMode', 'discrete')
+    expect(animate).toHaveAttribute('repeatCount', 'indefinite')
+  })
+
+  it('does not render a pulsing icon when pulseIcon is false', () => {
+    props = { text: 'mockNoPulse', type: 'info', pulseIcon: false }
+    render(props)
+    expect(
+      screen.queryByTestId('Chip_info_icon_animate')
+    ).not.toBeInTheDocument()
+  })
 })
 
 describe('Chip Web', () => {
@@ -427,4 +446,23 @@ describe('Chip Web', () => {
     const icon = screen.getByLabelText('icon_mockInfo')
     expect(icon).toHaveStyle(`width: 0.75rem`)
   })
+
+  it('renders a pulsing icon when pulseIcon is true', () => {
+    props = { text: 'mockPulse', type: 'success', pulseIcon: true }
+    render(props)
+    const animate = screen.getByTestId('Chip_success_icon_animate')
+    expect(animate).toHaveAttribute('attributeName', 'fill')
+    expect(animate).toHaveAttribute('values', `${COLORS.green60}; transparent`)
+    expect(animate).toHaveAttribute('dur', '1s')
+    expect(animate).toHaveAttribute('calcMode', 'discrete')
+    expect(animate).toHaveAttribute('repeatCount', 'indefinite')
+  })
+
+  it('does not render a pulsing icon when pulseIcon is false', () => {
+    props = { text: 'mockNoPulse', type: 'success', pulseIcon: false }
+    render(props)
+    expect(
+      screen.queryByTestId('Chip_success_icon_animate')
+    ).not.toBeInTheDocument()
+  })
 })