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

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

@@ -1,9 +1,12 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import '@testing-library/jest-dom/vitest'
-import { screen, act } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
+
+import { act, screen } from '@testing-library/react'
+
 import { Snackbar } from '..'
 import { COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/atoms/Snackbar/index.tsx

@@ -1,8 +1,9 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { css } from 'styled-components'
-import { ALIGN_CENTER } from '../../styles'
-import { Flex } from '../../primitives'
+
 import { BORDERS, COLORS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
+import { ALIGN_CENTER } from '../../styles'
 import { SPACING } from '../../ui-style-constants'
 import { StyledText } from '../StyledText'
 
@@ -15,14 +16,59 @@ export interface SnackbarProps extends StyleProps {
 }
 
 const SNACKBAR_ANIMATION_DURATION = 500
-
 const ODD_ANIMATION_OPTIMIZATIONS = `
   backface-visibility: hidden;
   perspective: 1000;
   will-change: opacity;
   `
 
+export function Snackbar(props: SnackbarProps): JSX.Element {
+  const { message, onClose, duration = 4000, ...styleProps } = props
+  const [isClosed, setIsClosed] = useState<boolean>(false)
+
+  const animationStyle = isClosed ? CLOSE_STYLE : OPEN_STYLE
+
+  // Manages the snackbar closing sequencing
+  useEffect(() => {
+    if (duration == null || duration === 0) return
+
+    const closeTimer = setTimeout(() => {
+      // Trigger the closing animation
+      setIsClosed(true)
+
+      // Call onClose after animation completes, if it exists
+      onClose != null && setTimeout(onClose, SNACKBAR_ANIMATION_DURATION - 50)
+    }, duration)
+
+    return () => {
+      clearTimeout(closeTimer)
+    }
+  }, [duration, onClose])
+
+  return (
+    <Flex css={animationStyle} data-testid="Snackbar" {...styleProps}>
+      <StyledText
+        oddStyle="bodyTextSemiBold"
+        desktopStyle="bodyDefaultSemiBold"
+      >
+        {message}
+      </StyledText>
+    </Flex>
+  )
+}
+
+const COMMON_STYLE = css`
+  align-items: ${ALIGN_CENTER};
+  border-radius: ${BORDERS.borderRadius8};
+  box-shadow: ${BORDERS.shadowSmall};
+  background-color: ${COLORS.black90};
+  max-width: max-content;
+  padding: ${SPACING.spacing20} ${SPACING.spacing24};
+  color: ${COLORS.white};
+`
+
 const OPEN_STYLE = css`
+  ${COMMON_STYLE}
   animation-duration: ${SNACKBAR_ANIMATION_DURATION}ms;
   animation-name: fadein;
   overflow: hidden;
@@ -39,6 +85,7 @@ const OPEN_STYLE = css`
 `
 
 const CLOSE_STYLE = css`
+  ${COMMON_STYLE}
   animation-duration: ${SNACKBAR_ANIMATION_DURATION}ms;
   animation-name: fadeout;
   overflow: hidden;
@@ -53,39 +100,3 @@ const CLOSE_STYLE = css`
     }
   }
 `
-
-export function Snackbar(props: SnackbarProps): JSX.Element {
-  const { message, onClose, duration = 4000, ...styleProps } = props
-  const [isClosed, setIsClosed] = useState<boolean>(false)
-
-  const animationStyle = isClosed ? CLOSE_STYLE : OPEN_STYLE
-
-  setTimeout(() => {
-    setIsClosed(true)
-    setTimeout(() => {
-      onClose?.()
-    }, SNACKBAR_ANIMATION_DURATION - 50)
-  }, duration)
-
-  return (
-    <Flex
-      css={animationStyle}
-      alignItems={ALIGN_CENTER}
-      borderRadius={BORDERS.borderRadius8}
-      boxShadow={BORDERS.shadowSmall}
-      backgroundColor={COLORS.black90}
-      maxWidth="max-content"
-      padding={`${SPACING.spacing20} ${SPACING.spacing24}`}
-      data-testid="Snackbar"
-      color={COLORS.white}
-      {...styleProps}
-    >
-      <StyledText
-        oddStyle="bodyTextSemiBold"
-        desktopStyle="bodyDefaultSemiBold"
-      >
-        {message}
-      </StyledText>
-    </Flex>
-  )
-}

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

@@ -0,0 +1,45 @@
+import { screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { StepMeter } from '../'
+import { COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
+
+import type { ComponentProps } from 'react'
+
+const renderer = (props: ComponentProps<typeof StepMeter>) => {
+  return renderWithProviders(<StepMeter {...props} />)
+}
+
+describe('StepMeter', () => {
+  let props: ComponentProps<typeof StepMeter>
+
+  beforeEach(() => {
+    props = {
+      totalSteps: 10,
+      currentStep: 5,
+    }
+  })
+
+  it('should render StepMeterContainer', () => {
+    renderer(props)
+
+    const stepMeterContainer = screen.getByTestId(
+      'StepMeter_StepMeterContainer'
+    )
+    expect(stepMeterContainer).toHaveStyle({
+      height: '0.25rem',
+      backgroundColor: COLORS.grey30,
+    })
+  })
+  it('should render StepMeterBar 50%', () => {
+    renderer(props)
+
+    const stepMeterBar = screen.getByTestId('StepMeter_StepMeterBar')
+    expect(stepMeterBar).toHaveStyle({
+      width: '50%',
+      height: '100%',
+      backgroundColor: COLORS.blue50,
+    })
+  })
+})

package/src/atoms/StepMeter/index.tsx

@@ -1,9 +1,11 @@
 import { css } from 'styled-components'
-import { Box } from '../../primitives'
-import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+
 import { COLORS } from '../../helix-design-system'
+import { Box } from '../../primitives'
 import { POSITION_ABSOLUTE, POSITION_RELATIVE } from '../../styles'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 
+import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { StyleProps } from '../../primitives'
 
 interface StepMeterProps extends StyleProps {
@@ -21,33 +23,40 @@ export const StepMeter = (props: StepMeterProps): JSX.Element => {
       : (progress / totalSteps) * 100
   }%`
 
-  const StepMeterContainer = css`
-    position: ${styleProps.position ? styleProps.position : POSITION_RELATIVE};
-    height: ${SPACING.spacing4};
-    background-color: ${COLORS.grey30};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      height: ${SPACING.spacing12};
-    }
-  `
-  const StepMeterBar = css`
-    position: ${POSITION_ABSOLUTE};
-    top: 0;
-    height: 100%;
-    background-color: ${COLORS.blue50};
-    width: ${percentComplete};
-    webkit-transition: width 0.5s ease-in-out;
-    moz-transition: width 0.5s ease-in-out;
-    o-transition: width 0.5s ease-in-out;
-    transition: width 0.5s ease-in-out;
-  `
-
   return (
     <Box
       data-testid="StepMeter_StepMeterContainer"
-      css={StepMeterContainer}
+      css={StepMeterContainer(styleProps)}
       {...styleProps}
     >
-      <Box data-testid="StepMeter_StepMeterBar" css={StepMeterBar} />
+      <Box
+        data-testid="StepMeter_StepMeterBar"
+        css={StepMeterBar(percentComplete)}
+      />
     </Box>
   )
 }
+
+const StepMeterContainer = (
+  styleProps: StyleProps
+): FlattenSimpleInterpolation => css`
+  position: ${styleProps.position ? styleProps.position : POSITION_RELATIVE};
+  height: ${SPACING.spacing4};
+  background-color: ${COLORS.grey30};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    height: ${SPACING.spacing12};
+  }
+`
+const StepMeterBar = (
+  percentComplete: string
+): FlattenSimpleInterpolation => css`
+  position: ${POSITION_ABSOLUTE};
+  top: 0;
+  height: 100%;
+  background-color: ${COLORS.blue50};
+  width: ${percentComplete};
+  webkit-transition: width 0.5s ease-in-out;
+  moz-transition: width 0.5s ease-in-out;
+  o-transition: width 0.5s ease-in-out;
+  transition: width 0.5s ease-in-out;
+`

package/src/atoms/StyledText/LegacyStyledText.stories.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable storybook/prefer-pascal-case */
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { Flex } from '../../primitives'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { LegacyStyledText } from './index'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof LegacyStyledText> = {

package/src/atoms/StyledText/LegacyStyledText.tsx

@@ -1,9 +1,10 @@
 import styled, { css } from 'styled-components'
+
 import { Text } from '../../primitives'
-import { TYPOGRAPHY, RESPONSIVENESS } from '../../ui-style-constants'
+import { RESPONSIVENESS, TYPOGRAPHY } from '../../ui-style-constants'
 
-import type { ComponentProps, ReactNode } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { ComponentProps, ReactNode } from 'react'
 
 export interface LegacyProps extends ComponentProps<typeof Text> {
   children?: ReactNode

package/src/atoms/StyledText/PlaceholderStyledText.tsx

@@ -0,0 +1,46 @@
+import clsx from 'clsx'
+
+import styles from './placeholderstyledtext.module.css'
+
+import type { ReactNode } from 'react'
+
+type StyleKey =
+  | 'headingSmallBold'
+  | 'captionBold'
+  | 'bodyDefaultSemiBold'
+  | 'smallBodyTextBold'
+
+interface PlaceholderStyledTextProps {
+  children: ReactNode
+  color?: string
+  desktopStyle?: string
+  oddStyle?: string
+}
+
+/**
+ * @deprecated: NOTE: YOU SHOULD NOT BE USING THIS - THIS IS A TEMP COMPONENT
+ * USED FOR PROTOCOL LIBRARY TO NOT USE STYLED-COMPONENTS. USE THIS
+ * UNTIL WE MIGRATE STYLEDTEXT PROPERLY
+ */
+export const PlaceholderStyledText = (
+  props: PlaceholderStyledTextProps
+): JSX.Element => {
+  const { children, color, desktopStyle, oddStyle } = props
+
+  const styleMap: Record<StyleKey, string> = {
+    headingSmallBold: styles.heading_small_bold,
+    captionBold: styles.caption_bold,
+    bodyDefaultSemiBold: styles.body_default_semi_bold,
+    smallBodyTextBold: styles.small_body_text_bold,
+  }
+  const combinedClassName = clsx(
+    desktopStyle != null ? styleMap[desktopStyle as StyleKey] : null,
+    oddStyle != null ? styleMap[oddStyle as StyleKey] : null
+  )
+
+  return (
+    <text className={combinedClassName} style={{ color: color ?? '' }}>
+      {children}
+    </text>
+  )
+}

package/src/atoms/StyledText/StyledText.stories.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable storybook/prefer-pascal-case */
-import { SPACING } from '../../ui-style-constants'
 import { Flex } from '../../primitives'
-import { StyledText, ODD_STYLES, HELIX_STYLES } from './index'
+import { SPACING } from '../../ui-style-constants'
+import { HELIX_STYLES, ODD_STYLES, StyledText } from './index'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof StyledText> = {

package/src/atoms/StyledText/StyledText.tsx

@@ -1,10 +1,11 @@
 import styled, { css } from 'styled-components'
-import { Text } from '../../primitives'
-import { TYPOGRAPHY, RESPONSIVENESS } from '../../ui-style-constants'
+
 import { TYPOGRAPHY as HELIX_TYPOGRAPHY } from '../../helix-design-system/product'
+import { Text } from '../../primitives'
+import { RESPONSIVENESS, TYPOGRAPHY } from '../../ui-style-constants'
 
-import type { ComponentProps, ReactNode } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { ComponentProps, ReactNode } from 'react'
 
 const helixProductStyleMap = {
   displayBold: {

package/src/atoms/StyledText/index.ts

@@ -1,2 +1,3 @@
 export * from './StyledText'
 export * from './LegacyStyledText'
+export * from './PlaceholderStyledText'

package/src/atoms/StyledText/placeholderstyledtext.module.css

@@ -0,0 +1,25 @@
+.heading_small_bold {
+  @media not (height: 600px) and (width: 1024px) {
+    font: var(--font-weight-bold) 1.125rem/var(--line-height-24);
+  }
+}
+
+.caption_bold {
+  @media not (height: 600px) and (width: 1024px) {
+    font: var(--font-weight-bold) var(--font-size-h4)/var(--line-height-16);
+  }
+}
+
+.body_default_semi_bold {
+  @media not (height: 600px) and (width: 1024px) {
+    font: var(--font-weight-semi-bold) var(--font-size-h3)/var(--line-height-20);
+  }
+}
+
+.small_body_text_bold {
+  @media (height: 600px) and (width: 1024px) {
+    font-size: var(--font-size-20);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-height-24);
+  }
+}

package/src/atoms/SubListTable/SubListTable.stories.tsx

@@ -4,8 +4,8 @@ import { Flex, VIEWPORT } from '@opentrons/components'
 
 import { SubListTable as SubListTableComponent } from './index'
 
+import type { Meta, Story } from '@storybook/react'
 import type { ComponentProps } from 'react'
-import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'Helix/Atoms/SubListTable',

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

@@ -1,8 +1,8 @@
-import { describe, it, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
+import { beforeEach, describe, it } from 'vitest'
 
-import { renderWithProviders } from '../../../testing/utils'
 import { SubListTable } from '..'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/atoms/SubListTable/index.tsx

@@ -1,13 +1,13 @@
 import { css } from 'styled-components'
 
-import { StyledText } from '../StyledText'
-import { DIRECTION_COLUMN, DISPLAY_GRID } from '../../styles'
-import { SPACING, RESPONSIVENESS } from '../../ui-style-constants'
 import { COLORS } from '../../helix-design-system'
 import { Flex } from '../../primitives'
+import { DIRECTION_COLUMN, DISPLAY_GRID } from '../../styles'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+import { StyledText } from '../StyledText'
 
-import type { ReactNode } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { ReactNode } from 'react'
 
 export interface SubListTableProps {
   children: ReactNode

package/src/atoms/Tag/Tag.stories.tsx

@@ -1,7 +1,8 @@
+import { ICON_DATA_BY_NAME } from '../../icons/icon-data'
 import { Flex } from '../../primitives'
 import { SPACING, VIEWPORT } from '../../ui-style-constants'
 import { Tag as TagComponent } from './index'
-import { ICON_DATA_BY_NAME } from '../../icons/icon-data'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof TagComponent> = {

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

@@ -1,5 +1,6 @@
-import { describe, it, expect } from 'vitest'
 import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
 import { COLORS } from '../../../helix-design-system'
 import { renderWithProviders } from '../../../testing/utils'
 import { Tag } from '../index'

package/src/atoms/Tag/index.tsx

@@ -1,12 +1,16 @@
 import { css } from 'styled-components'
+
 import { BORDERS, COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
+import { LiquidIcon } from '../../molecules/LiquidIcon'
 import { Flex } from '../../primitives'
 import { ALIGN_CENTER, DIRECTION_ROW, FLEX_MAX_CONTENT } from '../../styles'
 import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
-import { Icon } from '../../icons'
 import { StyledText } from '../StyledText'
 
+import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { IconName } from '../../icons'
+import type { LiquidIconProps } from '../../molecules/LiquidIcon'
 
 export type TagType = 'default' | 'interactive' | 'branded' | 'onColor'
 
@@ -17,9 +21,11 @@ export interface TagProps {
   type: TagType
   /** iconLocation */
   iconPosition?: 'left' | 'right'
-  /** Tagicon */
+  /** Tag icon */
   iconName?: IconName
   shrinkToContent?: boolean
+  /** liquid icon */
+  liquidIcon?: LiquidIconProps
 }
 
 const defaultColors = {
@@ -47,37 +53,14 @@ const TAG_PROPS_BY_TYPE: Record<
 }
 
 export function Tag(props: TagProps): JSX.Element {
-  const { iconName, type, text, iconPosition, shrinkToContent = false } = props
-
-  const DEFAULT_CONTAINER_STYLE = css`
-    padding: ${SPACING.spacing2} ${SPACING.spacing8};
-    border-radius: ${BORDERS.borderRadius4};
-    width: ${shrinkToContent ? FLEX_MAX_CONTENT : 'inherit'};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      border-radius: ${BORDERS.borderRadius8};
-      padding: ${SPACING.spacing8} ${SPACING.spacing12};
-    }
-  `
-
-  const INTERACTIVE_CONTAINER_STYLE = css`
-    ${DEFAULT_CONTAINER_STYLE}
-    &:hover {
-      background-color: ${COLORS.black90}${COLORS.opacity40HexCode};
-    }
-    &:focus-visible {
-      box-shadow: 0 0 0 3px ${COLORS.blue50};
-      outline: none;
-    }
-  `
-
-  const ICON_STYLE = css`
-    width: ${SPACING.spacing16};
-    height: ${SPACING.spacing16};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      width: ${SPACING.spacing24};
-      height: ${SPACING.spacing24};
-    }
-  `
+  const {
+    iconName,
+    type,
+    text,
+    iconPosition,
+    shrinkToContent = false,
+    liquidIcon,
+  } = props
 
   return (
     <Flex
@@ -87,8 +70,8 @@ export function Tag(props: TagProps): JSX.Element {
       backgroundColor={TAG_PROPS_BY_TYPE[type].backgroundColor}
       css={
         type === 'interactive'
-          ? INTERACTIVE_CONTAINER_STYLE
-          : DEFAULT_CONTAINER_STYLE
+          ? INTERACTIVE_CONTAINER_STYLE(shrinkToContent)
+          : DEFAULT_CONTAINER_STYLE(shrinkToContent)
       }
       gridGap={SPACING.spacing4}
       data-testid={`Tag_${type}`}
@@ -100,6 +83,7 @@ export function Tag(props: TagProps): JSX.Element {
           css={ICON_STYLE}
         />
       ) : null}
+      {liquidIcon != null ? <LiquidIcon {...liquidIcon} /> : null}
       <StyledText desktopStyle="bodyDefaultRegular" oddStyle="bodyTextRegular">
         {text}
       </StyledText>
@@ -113,3 +97,37 @@ export function Tag(props: TagProps): JSX.Element {
     </Flex>
   )
 }
+
+const DEFAULT_CONTAINER_STYLE = (
+  shrinkToContent: boolean
+): FlattenSimpleInterpolation => css`
+  padding: ${SPACING.spacing2} ${SPACING.spacing8};
+  border-radius: ${BORDERS.borderRadius4};
+  width: ${shrinkToContent ? FLEX_MAX_CONTENT : 'inherit'};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    border-radius: ${BORDERS.borderRadius8};
+    padding: ${SPACING.spacing8} ${SPACING.spacing12};
+  }
+`
+
+const INTERACTIVE_CONTAINER_STYLE = (
+  shrinkToContent: boolean
+): FlattenSimpleInterpolation => css`
+  ${DEFAULT_CONTAINER_STYLE(shrinkToContent)}
+  &:hover {
+    background-color: ${COLORS.black90}${COLORS.opacity40HexCode};
+  }
+  &:focus-visible {
+    box-shadow: 0 0 0 3px ${COLORS.blue50};
+    outline: none;
+  }
+`
+
+const ICON_STYLE = css`
+  width: ${SPACING.spacing16};
+  height: ${SPACING.spacing16};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    width: ${SPACING.spacing24};
+    height: ${SPACING.spacing24};
+  }
+`

package/src/atoms/Toast/ODDToast.stories.tsx

@@ -1,22 +1,32 @@
 import * as React from 'react'
 
 import { Toast } from '.'
-import { SPACING, VIEWPORT } from '../../ui-style-constants'
-import { Flex } from '../../primitives'
+import { Flex, STYLE_PROPS } from '../../primitives'
 import {
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   JUSTIFY_CENTER,
   POSITION_FIXED,
 } from '../../styles'
+import { SPACING, VIEWPORT } from '../../ui-style-constants'
 import { PrimaryButton } from '../buttons'
-import { LegacyStyledText } from '../StyledText'
-import type { Story, Meta } from '@storybook/react'
+import { StyledText } from '../StyledText'
+
+import type { Meta, Story } from '@storybook/react'
 
 export default {
   title: 'ODD/Atoms/Toast',
   component: Toast,
   parameters: VIEWPORT.touchScreenViewport,
+  argTypes: {
+    // Disable all StyleProps
+    ...Object.fromEntries(
+      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
+        prop,
+        { table: { disable: true } },
+      ])
+    ),
+  },
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof Toast>> = args => {
@@ -31,14 +41,14 @@ const Template: Story<React.ComponentProps<typeof Toast>> = args => {
       <Flex flexDirection={DIRECTION_ROW} marginY={SPACING.spacing16}>
         <PrimaryButton onClick={handleClick}>Click me</PrimaryButton>
         <Flex flexDirection={DIRECTION_COLUMN} marginLeft={SPACING.spacing8}>
-          <LegacyStyledText as="p">
+          <StyledText as="p">
             When clicking the button, the Toast shows up in the bottom.
-          </LegacyStyledText>
-          <LegacyStyledText as="p">
+          </StyledText>
+          <StyledText as="p">
             Unless you set a duration or disable the timeout, the Toast will
             disappear between 2 and 7 seconds depending on the length of the
             text.
-          </LegacyStyledText>
+          </StyledText>
         </Flex>
       </Flex>
       {isShowToast && (

package/src/atoms/Toast/Toast.stories.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react'
 
-import { Toast } from './index'
 import { Flex, STYLE_PROPS } from '../../primitives'
 import { DIRECTION_COLUMN, DIRECTION_ROW } from '../../styles'
 import { SPACING } from '../../ui-style-constants'
 import { PrimaryButton } from '../buttons'
 import { LegacyStyledText } from '../StyledText'
-import type { Story, Meta } from '@storybook/react'
+import { Toast } from './index'
+
+import type { Meta, Story } from '@storybook/react'
 
 export default {
   title: 'Helix/Atoms/Toast',

package/src/atoms/Toast/__tests__/ODDToast.test.tsx

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