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

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

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

package/src/atoms/ListButton/__tests__/ListButtonAccordion.test.tsx

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

package/src/atoms/ListButton/__tests__/ListButtonRadioButton.test.tsx

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

package/src/atoms/ListButton/index.tsx

@@ -1,9 +1,11 @@
 import { css } from 'styled-components'
-import { Flex } from '../../primitives'
-import { SPACING, RESPONSIVENESS } from '../../ui-style-constants'
+
 import { BORDERS, COLORS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
 import { CURSOR_DEFAULT, CURSOR_POINTER } from '../../styles'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 
+import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { ReactNode } from 'react'
 import type { StyleProps } from '../../primitives'
 
@@ -12,14 +14,19 @@ export * from './ListButtonChildren/index'
 type ListButtonType = 'noActive' | 'connected' | 'notConnected' | 'onColor'
 
 interface ListButtonProps extends StyleProps {
+  /** ListButton type */
   type: ListButtonType
+  /** ListButton content */
   children: ReactNode
+  /** ListButton disabled state */
   disabled?: boolean
+  /** ListButton onClick event */
   onClick?: () => void
+  /** optional data-testid value for Cypress testing */
   testId?: string
 }
 
-const DESKTOP_LISTBUTTON_PROPS_BY_TYPE: Record<
+const DESKTOP_LIST_BUTTON_PROPS_BY_TYPE: Record<
   ListButtonType,
   { backgroundColor: string; hoverBackgroundColor: string }
 > = {
@@ -41,7 +48,7 @@ const DESKTOP_LISTBUTTON_PROPS_BY_TYPE: Record<
   },
 }
 
-const ODD_LISTBUTTON_PROPS_BY_TYPE: Record<
+const ODD_LIST_BUTTON_PROPS_BY_TYPE: Record<
   ListButtonType,
   { backgroundColor: string; hoverBackgroundColor: string }
 > = {
@@ -74,44 +81,11 @@ export function ListButton(props: ListButtonProps): JSX.Element {
     children,
     disabled = false,
     onClick,
-    testId, // optional data-testid value for Cypress testing
+    testId,
     ...styleProps
   } = props
-  const desktopListButtonProps = DESKTOP_LISTBUTTON_PROPS_BY_TYPE[type]
-  const oddListButtonProps = ODD_LISTBUTTON_PROPS_BY_TYPE[type]
-
-  const LIST_BUTTON_STYLE = css`
-    cursor: ${disabled ? CURSOR_DEFAULT : CURSOR_POINTER};
-    background-color: ${disabled
-      ? COLORS.grey20
-      : desktopListButtonProps.backgroundColor};
-    padding: ${styleProps.padding ??
-    `${SPACING.spacing20} ${SPACING.spacing24}`};
-    border-radius: ${BORDERS.borderRadius8};
-
-    &:hover {
-      background-color: ${disabled
-        ? COLORS.grey20
-        : desktopListButtonProps.hoverBackgroundColor};
-    }
-
-    &:focus-visible {
-      outline: 2px solid ${COLORS.blue50};
-      outline-offset: 0.125rem;
-    }
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      background-color: ${disabled
-        ? COLORS.grey35
-        : oddListButtonProps.backgroundColor};
-
-      &:hover {
-        background-color: ${disabled
-          ? COLORS.grey35
-          : oddListButtonProps.hoverBackgroundColor};
-      }
-    }
-  `
+  const desktopListButtonProps = DESKTOP_LIST_BUTTON_PROPS_BY_TYPE[type]
+  const oddListButtonProps = ODD_LIST_BUTTON_PROPS_BY_TYPE[type]
 
   return (
     <Flex
@@ -120,7 +94,12 @@ export function ListButton(props: ListButtonProps): JSX.Element {
         onClick?.()
         e.stopPropagation()
       }}
-      css={LIST_BUTTON_STYLE}
+      css={LIST_BUTTON_STYLE(
+        disabled,
+        styleProps,
+        desktopListButtonProps,
+        oddListButtonProps
+      )}
       tabIndex={0}
       max-width="26.875rem"
       {...styleProps}
@@ -129,3 +108,40 @@ export function ListButton(props: ListButtonProps): JSX.Element {
     </Flex>
   )
 }
+
+const LIST_BUTTON_STYLE = (
+  disabled: boolean,
+  styleProps: StyleProps,
+  desktopListButtonProps: Record<string, string>,
+  oddListButtonProps: Record<string, string>
+): FlattenSimpleInterpolation => css`
+  cursor: ${disabled ? CURSOR_DEFAULT : CURSOR_POINTER};
+  background-color: ${disabled
+    ? COLORS.grey20
+    : desktopListButtonProps.backgroundColor};
+  padding: ${styleProps.padding ?? `${SPACING.spacing20} ${SPACING.spacing24}`};
+  border-radius: ${BORDERS.borderRadius8};
+
+  &:hover {
+    background-color: ${disabled
+      ? COLORS.grey20
+      : desktopListButtonProps.hoverBackgroundColor};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${COLORS.blue50};
+    outline-offset: 0.125rem;
+  }
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    background-color: ${disabled
+      ? COLORS.grey35
+      : oddListButtonProps.backgroundColor};
+
+    &:hover {
+      background-color: ${disabled
+        ? COLORS.grey35
+        : oddListButtonProps.hoverBackgroundColor};
+    }
+  }
+`

package/src/atoms/ListItem/ListItem.stories.tsx

@@ -1,15 +1,17 @@
-import { SPACING, VIEWPORT } from '../../ui-style-constants'
-import { DIRECTION_COLUMN } from '../../styles'
+import { ListItem as ListItemComponent, ListItemCustomize } from '.'
 import { Flex } from '../../primitives'
+import { DIRECTION_COLUMN } from '../../styles'
+import { SPACING, VIEWPORT } from '../../ui-style-constants'
 import { StyledText } from '../StyledText'
 import { ListItemDescriptor } from './ListItemChildren/ListItemDescriptor'
-import { ListItem as ListItemComponent, ListItemCustomize } from '.'
-import exampleImage from '../../images/labware/measurement-guide/images/spacing/spacing-well-rectangular@3x.png'
+
 import type { Meta, StoryObj } from '@storybook/react'
 import type { DropdownMenuProps } from '../../molecules'
 
+import exampleImage from '../../images/labware/measurement-guide/images/spacing/spacing-well-rectangular@3x.png'
+
 const meta: Meta<typeof ListItemComponent> = {
-  title: 'ListItem',
+  title: 'Helix/Atoms/ListItem',
   component: ListItemComponent,
   argTypes: {
     type: {

package/src/atoms/ListItem/ListItemChildren/ListItemCustomize.tsx

@@ -1,13 +1,16 @@
 import { css } from 'styled-components'
-import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../../styles'
+
 import { COLORS } from '../../../helix-design-system'
+import { DropdownMenu } from '../../../molecules/DropdownMenu'
 import { Flex, Link } from '../../../primitives'
+import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../../styles'
 import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
 import { StyledText } from '../../StyledText'
-import { DropdownMenu } from '../../../molecules/DropdownMenu'
 import { Tag } from '../../Tag/index'
+
 import type { DropdownMenuProps } from '../../../molecules/DropdownMenu'
 import type { TagProps } from '../../Tag/index'
+
 interface ListItemCustomizeProps {
   header: string
   //  this is either an image or an icon
@@ -34,7 +37,12 @@ export function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element {
     menuPlacement = 'auto',
   } = props
   return (
-    <Flex width="100%" alignItems={ALIGN_CENTER} padding={SPACING.spacing12}>
+    <Flex
+      width="100%"
+      alignItems={ALIGN_CENTER}
+      padding={SPACING.spacing12}
+      gridGap={SPACING.spacing8}
+    >
       <Flex gridGap={SPACING.spacing16} width="50%" alignItems={ALIGN_CENTER}>
         {leftHeaderItem != null ? (
           <Flex size="3.75rem">{leftHeaderItem}</Flex>
@@ -58,21 +66,19 @@ export function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element {
         {tag != null ? <Tag {...tag} /> : null}
       </Flex>
       {onClick != null && linkText != null ? (
-        <Link
-          role="button"
-          onClick={onClick}
-          css={css`
-            width: 10%;
-            text-decoration: ${TYPOGRAPHY.textDecorationUnderline};
-            color: ${COLORS.grey60};
-            &:hover {
-              color: ${COLORS.grey40};
-            }
-          `}
-        >
+        <Link role="button" onClick={onClick} css={LINK_STYLE}>
           <StyledText desktopStyle="bodyDefaultRegular">{linkText}</StyledText>
         </Link>
       ) : null}
     </Flex>
   )
 }
+
+const LINK_STYLE = css`
+  width: 10%;
+  text-decoration: ${TYPOGRAPHY.textDecorationUnderline};
+  color: ${COLORS.grey60};
+  &:hover {
+    color: ${COLORS.grey40};
+  }
+`

package/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx

@@ -9,9 +9,13 @@ import {
 import { SPACING } from '../../../ui-style-constants'
 
 interface ListItemDescriptorProps {
+  /** ListItemDescriptor size type */
   type: 'default' | 'large'
+  /** ListItemDescriptor description */
   description: JSX.Element
+  /** ListItemDescriptor content */
   content: JSX.Element
+  /** ListItemDescriptor flex direction */
   changeFlexDirection?: boolean
 }
 

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

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

package/src/atoms/ListItem/index.tsx

@@ -1,8 +1,9 @@
 import { css } from 'styled-components'
-import { Flex } from '../../primitives'
-import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+
 import { BORDERS, COLORS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
 import { FLEX_MAX_CONTENT } from '../../styles'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 
 import type { ReactNode } from 'react'
 import type { StyleProps } from '../../primitives'

package/src/atoms/ListTable/ListTable.stories.tsx

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

package/src/atoms/ListTable/__tests__/ListTable.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 { ListTable } from '..'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/atoms/ListTable/index.tsx

@@ -1,17 +1,17 @@
 import { css } from 'styled-components'
 
-import { StyledText } from '../StyledText'
+import { COLORS } from '../../helix-design-system'
 import {
   DIRECTION_COLUMN,
   DISPLAY_FLEX,
   DISPLAY_GRID,
   FLEX_MAX_CONTENT,
 } from '../../styles'
-import { SPACING, RESPONSIVENESS } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
+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 ListTableProps {
   children: ReactNode

package/src/atoms/MenuList/MenuItem.stories.tsx

@@ -1,5 +1,5 @@
-import { VIEWPORT } from '../../ui-style-constants'
 import { STYLE_PROPS } from '../../primitives'
+import { VIEWPORT } from '../../ui-style-constants'
 import { MenuItem as MenuItemComponent } from './MenuItem'
 
 import type { Meta, StoryObj } from '@storybook/react'

package/src/atoms/MenuList/MenuItem.tsx

@@ -1,7 +1,9 @@
 import styled from 'styled-components'
+
 import { COLORS } from '../../helix-design-system'
+import { ALIGN_CENTER, CURSOR_POINTER } from '../../styles'
 import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { ALIGN_CENTER } from '../../styles'
+
 import type { StyleProps } from '../../primitives'
 
 interface ButtonProps extends StyleProps {
@@ -9,6 +11,7 @@ interface ButtonProps extends StyleProps {
   isAlert?: boolean
 }
 export const MenuItem = styled.button<ButtonProps>`
+  cursor: ${CURSOR_POINTER};
   text-align: ${TYPOGRAPHY.textAlignLeft};
   font-size: ${TYPOGRAPHY.fontSizeP};
   background-color: ${COLORS.transparent};

package/src/atoms/MenuList/MenuList.stories.tsx

@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions'
+
 import { MenuList as MenuListComponent } from './index'
 import { MenuItem } from './MenuItem'
 

package/src/atoms/MenuList/OverflowBtn.tsx

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react'
 import { css } from 'styled-components'
 
-import { Btn } from '../../primitives'
 import { BORDERS, COLORS } from '../../helix-design-system'
+import { Btn } from '../../primitives'
 import { SPACING } from '../../ui-style-constants'
 
 import type { ComponentProps, ForwardedRef, ReactNode } from 'react'

package/src/atoms/MenuList/__tests__/MenuItem.test.tsx

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

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

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

package/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx

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

package/src/atoms/MenuList/index.tsx

@@ -1,12 +1,12 @@
 import { BORDERS, COLORS } from '../../helix-design-system'
+import { ModalShell } from '../../modals'
+import { Flex } from '../../primitives'
 import {
   DIRECTION_COLUMN,
   JUSTIFY_CENTER,
   POSITION_ABSOLUTE,
 } from '../../styles'
-import { Flex } from '../../primitives'
 import { SPACING } from '../../ui-style-constants'
-import { ModalShell } from '../../modals'
 
 import type { MouseEventHandler, ReactNode } from 'react'
 

package/src/atoms/Snackbar/Snackbar.stories.tsx

@@ -1,18 +1,20 @@
 import * as React from 'react'
+
 import {
   ALIGN_CENTER,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   Flex,
   JUSTIFY_CENTER,
+  LegacyStyledText,
   PrimaryButton,
   SPACING,
-  LegacyStyledText,
   VIEWPORT,
 } from '@opentrons/components'
 
 import { Snackbar } from './index'
-import type { Story, Meta } from '@storybook/react'
+
+import type { Meta, Story } from '@storybook/react'
 
 export default {
   title: 'Helix/Atoms/Snackbar',

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 { 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'
 

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