refactor(components, app): move StyledText from app to components (#1…

…4715) * refactor(components, app): move StyledText from app to components
Opentrons · May 20, 2024 · 27231c5 · 27231c5
1 parent 2aa081a
commit 27231c5
Show file tree

Hide file tree

Showing 390 changed files with 1,579 additions and 1,510 deletions.
diff --git a/app/src/App/DesktopAppFallback.tsx b/app/src/App/DesktopAppFallback.tsx
@@ -13,10 +13,10 @@ import {
   DIRECTION_COLUMN,
   Flex,
   SPACING,
+  StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
-import { StyledText } from '../atoms/text'
 import { LegacyModal } from '../molecules/LegacyModal'
 import { reloadUi } from '../redux/shell'
 

diff --git a/app/src/App/Navbar.tsx b/app/src/App/Navbar.tsx
@@ -16,14 +16,14 @@ import {
   Link,
   SIZE_2,
   SPACING,
+  StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
 import logoSvg from '../assets/images/logo_nav.svg'
 import logoSvgThree from '../assets/images/logo_nav_three.svg'
 
 import { NAV_BAR_WIDTH } from './constants'
-import { StyledText } from '../atoms/text'
 
 import type { RouteProps } from './types'
 

diff --git a/app/src/App/OnDeviceDisplayAppFallback.tsx b/app/src/App/OnDeviceDisplayAppFallback.tsx
@@ -9,14 +9,14 @@ import type { FallbackProps } from 'react-error-boundary'
 
 import {
   ALIGN_CENTER,
+  COLORS,
   DIRECTION_COLUMN,
   Flex,
   JUSTIFY_CENTER,
   SPACING,
-  COLORS,
+  StyledText,
 } from '@opentrons/components'
 
-import { StyledText } from '../atoms/text'
 import { MediumButton } from '../atoms/buttons'
 import { Modal } from '../molecules/Modal'
 import { appRestart, sendLog } from '../redux/shell'

diff --git a/app/src/DesignTokens/BorderRadius/BorderRadius.stories.tsx b/app/src/DesignTokens/BorderRadius/BorderRadius.stories.tsx
@@ -7,13 +7,12 @@ import {
   DIRECTION_COLUMN,
   Flex,
   SPACING,
+  StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
 import type { Story, Meta } from '@storybook/react'
 
-import { StyledText } from '../../atoms/text'
-
 export default {
   title: 'Design Tokens/BorderRadius',
 } as Meta

diff --git a/app/src/DesignTokens/Colors/Colors.stories.tsx b/app/src/DesignTokens/Colors/Colors.stories.tsx
@@ -8,11 +8,10 @@ import {
   Flex,
   JUSTIFY_CENTER,
   SPACING,
+  StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
-import { StyledText } from '../../atoms/text'
-
 import type { Story, Meta } from '@storybook/react'
 
 export default {

diff --git a/app/src/DesignTokens/Spacing/Spacing.stories.tsx b/app/src/DesignTokens/Spacing/Spacing.stories.tsx
@@ -1,18 +1,17 @@
 import * as React from 'react'
 import {
-  Flex,
+  ALIGN_FLEX_START,
+  Box,
   COLORS,
   DIRECTION_COLUMN,
+  Flex,
   SPACING,
+  StyledText,
   TYPOGRAPHY,
-  Box,
-  ALIGN_FLEX_START,
 } from '@opentrons/components'
 
 import type { Story, Meta } from '@storybook/react'
 
-import { StyledText } from '../../atoms/text'
-
 export default {
   title: 'Design Tokens/Spacing',
 } as Meta

diff --git a/app/src/atoms/Banner/Banner.stories.tsx b/app/src/atoms/Banner/Banner.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { TYPOGRAPHY } from '@opentrons/components'
-import { StyledText } from '../text'
+import { StyledText, TYPOGRAPHY } from '@opentrons/components'
 import { Banner } from './index'
 import type { Story, Meta } from '@storybook/react'
 

diff --git a/app/src/atoms/Chip/index.tsx b/app/src/atoms/Chip/index.tsx
@@ -8,11 +8,10 @@ import {
   Flex,
   Icon,
   SPACING,
+  StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
-import { StyledText } from '../text'
-
 import type { IconName, StyleProps } from '@opentrons/components'
 
 export type ChipType =

diff --git a/app/src/atoms/InlineNotification/index.tsx b/app/src/atoms/InlineNotification/index.tsx
@@ -7,14 +7,13 @@ import {
   DIRECTION_ROW,
   Flex,
   Icon,
-  IconProps,
   JUSTIFY_SPACE_BETWEEN,
   SPACING,
+  StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { StyledText } from '../text'
 
-import type { StyleProps } from '@opentrons/components'
+import type { IconProps, StyleProps } from '@opentrons/components'
 
 type InlineNotificationType = 'alert' | 'error' | 'neutral' | 'success'
 

diff --git a/app/src/atoms/InputField/index.tsx b/app/src/atoms/InputField/index.tsx
@@ -10,10 +10,10 @@ import {
   Flex,
   RESPONSIVENESS,
   SPACING,
-  TYPOGRAPHY,
+  StyledText,
   TEXT_ALIGN_RIGHT,
+  TYPOGRAPHY,
 } from '@opentrons/components'
-import { StyledText } from '../text'
 
 export const INPUT_TYPE_NUMBER = 'number' as const
 export const INPUT_TYPE_TEXT = 'text' as const

diff --git a/app/src/atoms/InstrumentContainer/index.tsx b/app/src/atoms/InstrumentContainer/index.tsx
@@ -1,8 +1,12 @@
 import * as React from 'react'
 
-import { Flex, BORDERS, COLORS, SPACING } from '@opentrons/components'
-
-import { StyledText } from '../text'
+import {
+  BORDERS,
+  COLORS,
+  Flex,
+  SPACING,
+  StyledText,
+} from '@opentrons/components'
 
 interface InstrumentContainerProps {
   displayName: string

diff --git a/app/src/atoms/Interstitial/InterstitiallTitleBar.tsx b/app/src/atoms/Interstitial/InterstitiallTitleBar.tsx
@@ -2,17 +2,18 @@ import * as React from 'react'
 import { css } from 'styled-components'
 import {
   Btn,
-  ButtonProps,
+  COLORS,
+  DIRECTION_ROW,
+  Flex,
   Icon,
+  JUSTIFY_SPACE_BETWEEN,
   POSITION_ABSOLUTE,
   SPACING,
+  StyledText,
   TYPOGRAPHY,
-  Flex,
-  COLORS,
-  DIRECTION_ROW,
-  JUSTIFY_SPACE_BETWEEN,
 } from '@opentrons/components'
-import { StyledText } from '../text'
+
+import type { ButtonProps } from '@opentrons/components'
 
 export interface InterstitialTitleBarProps {
   title: React.ReactNode

diff --git a/app/src/atoms/ListItem/ListItem.stories.tsx b/app/src/atoms/ListItem/ListItem.stories.tsx
@@ -1,7 +1,11 @@
 import * as React from 'react'
-import { DIRECTION_COLUMN, Flex, SPACING } from '@opentrons/components'
+import {
+  DIRECTION_COLUMN,
+  Flex,
+  SPACING,
+  StyledText,
+} from '@opentrons/components'
 import { touchScreenViewport } from '../../DesignTokens/constants'
-import { StyledText } from '../text'
 import { ListItem } from '.'
 import type { Story, Meta } from '@storybook/react'
 

diff --git a/app/src/atoms/MenuList/DropdownMenu.tsx b/app/src/atoms/MenuList/DropdownMenu.tsx
@@ -1,21 +1,21 @@
 import * as React from 'react'
 import { css } from 'styled-components'
 import {
-  Flex,
-  SPACING,
+  ALIGN_CENTER,
+  BORDERS,
   COLORS,
-  TYPOGRAPHY,
-  POSITION_ABSOLUTE,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
-  JUSTIFY_SPACE_BETWEEN,
-  ALIGN_CENTER,
-  BORDERS,
+  Flex,
   Icon,
+  JUSTIFY_SPACE_BETWEEN,
+  POSITION_ABSOLUTE,
+  SPACING,
+  StyledText,
+  TYPOGRAPHY,
   useOnClickOutside,
   POSITION_RELATIVE,
 } from '@opentrons/components'
-import { StyledText } from '../text'
 import { MenuItem } from './MenuItem'
 
 export interface DropdownOption {

diff --git a/app/src/atoms/ProgressBar/ProgressBar.stories.tsx b/app/src/atoms/ProgressBar/ProgressBar.stories.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react'
 
 import {
-  Flex,
-  DIRECTION_COLUMN,
-  SPACING,
   COLORS,
+  DIRECTION_COLUMN,
+  Flex,
   SecondaryButton,
+  SPACING,
+  StyledText,
 } from '@opentrons/components'
 
-import { StyledText } from '../text'
 import { ProgressBar } from './index'
 
 import type { Story, Meta } from '@storybook/react'

diff --git a/app/src/atoms/SelectField/index.tsx b/app/src/atoms/SelectField/index.tsx
@@ -5,11 +5,11 @@ import {
   COLORS,
   DIRECTION_COLUMN,
   Flex,
-  TYPOGRAPHY,
   SPACING,
+  StyledText,
+  TYPOGRAPHY,
 } from '@opentrons/components'
 import { css } from 'styled-components'
-import { StyledText } from '../text'
 
 import type { SelectProps, SelectOption } from './Select'
 import type { ActionMeta, MultiValue, SingleValue } from 'react-select'

diff --git a/app/src/atoms/Slideout/MultiSlideout.stories.tsx b/app/src/atoms/Slideout/MultiSlideout.stories.tsx
@@ -1,7 +1,11 @@
 import * as React from 'react'
-import { TYPOGRAPHY, PrimaryBtn, COLORS } from '@opentrons/components'
+import {
+  COLORS,
+  PrimaryBtn,
+  StyledText,
+  TYPOGRAPHY,
+} from '@opentrons/components'
 import { MultiSlideout } from './MultiSlideout'
-import { StyledText } from '../text'
 
 import type { Story, Meta } from '@storybook/react'
 

diff --git a/app/src/atoms/Slideout/Slideout.stories.tsx b/app/src/atoms/Slideout/Slideout.stories.tsx
@@ -1,7 +1,12 @@
 import * as React from 'react'
-import { TYPOGRAPHY, PrimaryBtn, COLORS, SPACING } from '@opentrons/components'
+import {
+  COLORS,
+  PrimaryBtn,
+  SPACING,
+  StyledText,
+  TYPOGRAPHY,
+} from '@opentrons/components'
 import { Slideout } from './index'
-import { StyledText } from '../text'
 
 import type { Story, Meta } from '@storybook/react'
 

diff --git a/app/src/atoms/Slideout/index.tsx b/app/src/atoms/Slideout/index.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react'
 import { css } from 'styled-components'
+import { useTranslation } from 'react-i18next'
+
 import {
   ALIGN_CENTER,
   Box,
@@ -14,12 +16,11 @@ import {
   Overlay,
   POSITION_FIXED,
   SPACING,
+  StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
 import { Divider } from '../structure'
-import { StyledText } from '../text'
-import { useTranslation } from 'react-i18next'
 
 export interface MultiSlideoutSpecs {
   currentStep: number

diff --git a/app/src/atoms/Snackbar/Snackbar.stories.tsx b/app/src/atoms/Snackbar/Snackbar.stories.tsx
@@ -7,8 +7,8 @@ import {
   JUSTIFY_CENTER,
   PrimaryButton,
   SPACING,
+  StyledText,
 } from '@opentrons/components'
-import { StyledText } from '../text'
 import { touchScreenViewport } from '../../DesignTokens/constants'
 
 import { Snackbar } from './index'

diff --git a/app/src/atoms/Snackbar/index.tsx b/app/src/atoms/Snackbar/index.tsx
@@ -2,16 +2,15 @@ import * as React from 'react'
 import { css } from 'styled-components'
 
 import {
-  Flex,
   ALIGN_CENTER,
   BORDERS,
   COLORS,
+  Flex,
   SPACING,
+  StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
-import { StyledText } from '../text'
-
 import type { StyleProps } from '@opentrons/components'
 
 export interface SnackbarProps extends StyleProps {

diff --git a/app/src/atoms/StatusLabel/index.tsx b/app/src/atoms/StatusLabel/index.tsx
@@ -2,16 +2,16 @@ import * as React from 'react'
 import capitalize from 'lodash/capitalize'
 
 import {
-  Flex,
-  Icon,
   ALIGN_CENTER,
   BORDERS,
   COLORS,
+  Flex,
+  Icon,
   SPACING,
+  StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
-import { StyledText } from '../text'
 interface StatusLabelProps {
   status: string
   backgroundColor: string

diff --git a/app/src/atoms/Toast/ODDToast.stories.tsx b/app/src/atoms/Toast/ODDToast.stories.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react'
 import {
-  Flex,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
+  Flex,
   JUSTIFY_CENTER,
   POSITION_FIXED,
   PrimaryButton,
   SPACING,
+  StyledText,
 } from '@opentrons/components'
 import { touchScreenViewport } from '../../DesignTokens/constants'
-import { StyledText } from '../text'
 import { Toast } from '.'
 import type { Story, Meta } from '@storybook/react'
 

diff --git a/app/src/atoms/Toast/Toast.stories.tsx b/app/src/atoms/Toast/Toast.stories.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
 import {
-  Flex,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
-  SPACING,
+  Flex,
   PrimaryButton,
+  SPACING,
+  StyledText,
 } from '@opentrons/components'
-import { StyledText } from '../text'
 import { Toast } from './index'
 import type { Story, Meta } from '@storybook/react'