From 36be38e9790400583f5483b666039ecb2404066e Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Mon, 17 Jul 2023 22:02:02 -0700
Subject: [PATCH] Update Text import paths: /multichain (#20061)

* Updating import paths for Text component

* Updating snapshots

* Adding story for TokenCell

* Updating banner in account details

* Fixing lint issue by removing unused import
---
 .../__snapshots__/token-cell.test.js.snap     |  6 ++--
 .../app/token-cell/token-cell.stories.js      | 33 +++++++++++++++++++
 .../account-details-authenticate.js           | 10 +++---
 .../account-details/account-details-key.js    |  3 +-
 .../account-details/account-details.js        |  2 +-
 .../account-list-item-menu.js                 |  2 +-
 .../account-list-item.test.js.snap            |  8 ++---
 .../account-list-item/account-list-item.js    |  2 +-
 .../account-list-menu/account-list-menu.js    |  2 +-
 .../__snapshots__/account-picker.test.js.snap |  2 +-
 .../account-picker/account-picker.js          |  2 +-
 .../__snapshots__/app-header.test.js.snap     |  2 +-
 .../multichain/global-menu/global-menu.js     | 11 ++++---
 .../__snapshots__/json.test.tsx.snap          |  2 +-
 .../import-account/import-account.js          |  3 +-
 .../multichain/import-account/json.js         |  2 +-
 .../network-list-menu/network-list-menu.js    |  2 +-
 .../product-tour-popover.js                   |  9 +++--
 .../token-list-item.test.js.snap              |  6 ++--
 .../token-list-item/token-list-item.js        |  2 +-
 20 files changed, 77 insertions(+), 34 deletions(-)
 create mode 100644 ui/components/app/token-cell/token-cell.stories.js

diff --git a/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap b/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
index bfc4fd66e..6013ae4af 100644
--- a/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
+++ b/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
@@ -51,7 +51,7 @@ exports[`Token Cell should match snapshot 1`] = `
                 title=""
               >
                 <p
-                  class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                  class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
                 >
                   TEST
                 </p>
@@ -59,11 +59,11 @@ exports[`Token Cell should match snapshot 1`] = `
             </div>
           </div>
           <p
-            class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end box--flex-direction-row box--width-2/3 box--color-text-default"
+            class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default"
           />
         </div>
         <p
-          class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-alternative"
+          class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
           data-testid="multichain-token-list-item-value"
         >
           5.000
diff --git a/ui/components/app/token-cell/token-cell.stories.js b/ui/components/app/token-cell/token-cell.stories.js
new file mode 100644
index 000000000..caa3a55cb
--- /dev/null
+++ b/ui/components/app/token-cell/token-cell.stories.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import TokenListItem from '.';
+
+export default {
+  title: 'Components/App/TokenCell',
+  argTypes: {
+    address: {
+      control: 'text',
+    },
+    symbol: {
+      control: 'text',
+    },
+    string: {
+      control: 'text',
+    },
+    onClick: {
+      action: 'onClick',
+    },
+    image: {
+      control: 'text',
+    },
+  },
+  args: {
+    address: '0xAnotherToken',
+    symbol: 'TEST',
+    string: '5.000',
+    currentCurrency: 'usd',
+  },
+};
+
+export const DefaultStory = (args) => <TokenListItem {...args} />;
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/components/multichain/account-details/account-details-authenticate.js b/ui/components/multichain/account-details/account-details-authenticate.js
index d0deb1203..01e945308 100644
--- a/ui/components/multichain/account-details/account-details-authenticate.js
+++ b/ui/components/multichain/account-details/account-details-authenticate.js
@@ -14,7 +14,7 @@ import {
   FormTextField,
   Box,
 } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { exportAccount, hideWarning } from '../../../store/actions';
 
@@ -60,9 +60,11 @@ export const AccountDetailsAuthenticate = ({ address, onCancel }) => {
         labelProps={{ fontWeight: FontWeight.Medium }}
         autoFocus
       />
-      <BannerAlert marginTop={6} severity={Severity.Danger}>
-        <Text variant={TextVariant.bodySm}>{t('privateKeyWarning')}</Text>
-      </BannerAlert>
+      <BannerAlert
+        marginTop={6}
+        severity={Severity.Danger}
+        description={t('privateKeyWarning')}
+      />
       <Box display={Display.Flex} marginTop={6} gap={2}>
         <ButtonSecondary onClick={onCancel} block>
           {t('cancel')}
diff --git a/ui/components/multichain/account-details/account-details-key.js b/ui/components/multichain/account-details/account-details-key.js
index e8358006f..8726b8aca 100644
--- a/ui/components/multichain/account-details/account-details-key.js
+++ b/ui/components/multichain/account-details/account-details-key.js
@@ -6,8 +6,9 @@ import {
   ButtonPrimary,
   IconName,
   Box,
+  Text,
 } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+
 import {
   AlignItems,
   BorderColor,
diff --git a/ui/components/multichain/account-details/account-details.js b/ui/components/multichain/account-details/account-details.js
index d8bb25339..249e272ed 100644
--- a/ui/components/multichain/account-details/account-details.js
+++ b/ui/components/multichain/account-details/account-details.js
@@ -15,8 +15,8 @@ import {
   ModalHeader,
   ModalOverlay,
   Box,
+  Text,
 } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
 import { getMetaMaskAccountsOrdered } from '../../../selectors';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
diff --git a/ui/components/multichain/account-list-item-menu/account-list-item-menu.js b/ui/components/multichain/account-list-item-menu/account-list-item-menu.js
index 68bb478fd..d066dcc7f 100644
--- a/ui/components/multichain/account-list-item-menu/account-list-item-menu.js
+++ b/ui/components/multichain/account-list-item-menu/account-list-item-menu.js
@@ -30,8 +30,8 @@ import {
   PopoverPosition,
   ModalFocus,
   PopoverRole,
+  Text,
 } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
 import {
   MetaMetricsEventCategory,
   MetaMetricsEventLinkType,
diff --git a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
index cd5df6672..248a913dc 100644
--- a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
+++ b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
@@ -58,7 +58,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
           class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
         >
           <div
-            class="box mm-text multichain-account-list-item__account-name mm-text--body-md mm-text--ellipsis box--margin-inline-end-2 box--flex-direction-row box--color-text-default"
+            class="mm-box mm-text multichain-account-list-item__account-name mm-text--body-md mm-text--ellipsis mm-box--margin-inline-end-2 mm-box--color-text-default"
           >
             <button
               class="mm-box mm-text mm-button-base mm-button-base--ellipsis multichain-account-list-item__account-name__button mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--ellipsis mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-transparent"
@@ -71,7 +71,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
             </button>
           </div>
           <div
-            class="box mm-text multichain-account-list-item__asset mm-text--body-md mm-text--ellipsis mm-text--text-align-end box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
+            class="mm-box mm-text multichain-account-list-item__asset mm-text--body-md mm-text--ellipsis mm-text--text-align-end mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center mm-box--color-text-default"
           >
             <div
               class="currency-display-component"
@@ -101,13 +101,13 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
           class="mm-box mm-box--display-flex mm-box--align-items-center"
         >
           <p
-            class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
+            class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
           >
             0x0dc...e7bc
           </p>
         </div>
         <div
-          class="box mm-text mm-text--body-sm mm-text--text-align-end box--flex-direction-row box--color-text-alternative"
+          class="mm-box mm-text mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
         >
           <div
             class="currency-display-component"
diff --git a/ui/components/multichain/account-list-item/account-list-item.js b/ui/components/multichain/account-list-item/account-list-item.js
index 6fbfa876e..becb5f2b7 100644
--- a/ui/components/multichain/account-list-item/account-list-item.js
+++ b/ui/components/multichain/account-list-item/account-list-item.js
@@ -18,8 +18,8 @@ import {
   IconName,
   IconSize,
   AvatarAccountVariant,
+  Text,
 } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
 import {
   Color,
   TextAlign,
diff --git a/ui/components/multichain/account-list-menu/account-list-menu.js b/ui/components/multichain/account-list-menu/account-list-menu.js
index 03513f477..80c1b91f4 100644
--- a/ui/components/multichain/account-list-menu/account-list-menu.js
+++ b/ui/components/multichain/account-list-menu/account-list-menu.js
@@ -12,8 +12,8 @@ import {
   ModalContent,
   ModalOverlay,
   ModalHeader,
+  Text,
 } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
 import { AccountListItem, CreateAccount, ImportAccount } from '..';
 import {
   BlockSize,
diff --git a/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap b/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap
index e78078c98..49accc5e5 100644
--- a/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap
+++ b/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap
@@ -26,7 +26,7 @@ exports[`AccountPicker renders properly 1`] = `
         />
       </div>
       <span
-        class="box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--ellipsis box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--ellipsis mm-box--color-text-default"
       >
         Account 1
       </span>
diff --git a/ui/components/multichain/account-picker/account-picker.js b/ui/components/multichain/account-picker/account-picker.js
index a3986ad36..8ac99e61e 100644
--- a/ui/components/multichain/account-picker/account-picker.js
+++ b/ui/components/multichain/account-picker/account-picker.js
@@ -7,8 +7,8 @@ import {
   AvatarAccountVariant,
   Icon,
   IconName,
+  Text,
 } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
 import {
   AlignItems,
   BackgroundColor,
diff --git a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
index e94459761..0687107d4 100644
--- a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
+++ b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
@@ -278,7 +278,7 @@ exports[`App Header should match snapshot 1`] = `
             </div>
           </div>
           <span
-            class="box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--ellipsis box--flex-direction-row box--color-text-default"
+            class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--ellipsis mm-box--color-text-default"
           >
             Test Account
           </span>
diff --git a/ui/components/multichain/global-menu/global-menu.js b/ui/components/multichain/global-menu/global-menu.js
index d67107a67..350f15947 100644
--- a/ui/components/multichain/global-menu/global-menu.js
+++ b/ui/components/multichain/global-menu/global-menu.js
@@ -12,10 +12,13 @@ import {
 } from '../../../helpers/constants/routes';
 import { lockMetamask } from '../../../store/actions';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import { IconName } from '../../component-library';
-///: BEGIN:ONLY_INCLUDE_IN(snaps)
-import { Text } from '../../component-library/text/deprecated';
-///: END:ONLY_INCLUDE_IN(snaps)
+import {
+  IconName,
+  ///: BEGIN:ONLY_INCLUDE_IN(snaps)
+  Text,
+  ///: END:ONLY_INCLUDE_IN(snaps)
+} from '../../component-library';
+
 import { Menu, MenuItem } from '../../ui/menu';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
diff --git a/ui/components/multichain/import-account/__snapshots__/json.test.tsx.snap b/ui/components/multichain/import-account/__snapshots__/json.test.tsx.snap
index 2fcf0b8db..61de94813 100644
--- a/ui/components/multichain/import-account/__snapshots__/json.test.tsx.snap
+++ b/ui/components/multichain/import-account/__snapshots__/json.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Json should match snapshot 1`] = `
 <DocumentFragment>
   <p
-    class="box mm-text mm-text--body-md mm-text--text-align-center box--flex-direction-row box--color-text-default"
+    class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--color-text-default"
   >
     Used by a variety of different clients
     <a
diff --git a/ui/components/multichain/import-account/import-account.js b/ui/components/multichain/import-account/import-account.js
index e07b31826..478a2e3ac 100644
--- a/ui/components/multichain/import-account/import-account.js
+++ b/ui/components/multichain/import-account/import-account.js
@@ -7,8 +7,7 @@ import {
   MetaMetricsEventCategory,
   MetaMetricsEventName,
 } from '../../../../shared/constants/metametrics';
-import { ButtonLink, Label, Box } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import { ButtonLink, Label, Box, Text } from '../../component-library';
 import Dropdown from '../../ui/dropdown';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import {
diff --git a/ui/components/multichain/import-account/json.js b/ui/components/multichain/import-account/json.js
index af768103f..7dd9e0235 100644
--- a/ui/components/multichain/import-account/json.js
+++ b/ui/components/multichain/import-account/json.js
@@ -7,8 +7,8 @@ import {
   FormTextField,
   TEXT_FIELD_SIZES,
   TEXT_FIELD_TYPES,
+  Text,
 } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
 import {
   Size,
   TextVariant,
diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js
index 238be3a71..dd9278bc1 100644
--- a/ui/components/multichain/network-list-menu/network-list-menu.js
+++ b/ui/components/multichain/network-list-menu/network-list-menu.js
@@ -31,8 +31,8 @@ import {
   ModalHeader,
   ModalOverlay,
   Box,
+  Text,
 } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
 import { ADD_POPULAR_CUSTOM_NETWORK } from '../../../helpers/constants/routes';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
diff --git a/ui/components/multichain/product-tour-popover/product-tour-popover.js b/ui/components/multichain/product-tour-popover/product-tour-popover.js
index 11b683fdd..696a60863 100644
--- a/ui/components/multichain/product-tour-popover/product-tour-popover.js
+++ b/ui/components/multichain/product-tour-popover/product-tour-popover.js
@@ -14,8 +14,13 @@ import {
   TextVariant,
   TextAlign,
 } from '../../../helpers/constants/design-system';
-import { ButtonBase, ButtonIcon, IconName, Box } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import {
+  ButtonBase,
+  ButtonIcon,
+  IconName,
+  Box,
+  Text,
+} from '../../component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { Menu } from '../../ui/menu';
 
diff --git a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
index 3d7fea2a5..20c4e2caa 100644
--- a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
+++ b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
@@ -45,16 +45,16 @@ exports[`TokenListItem should render correctly 1`] = `
           >
             <div>
               <p
-                class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
               />
             </div>
           </div>
           <p
-            class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end box--flex-direction-row box--width-2/3 box--color-text-default"
+            class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default"
           />
         </div>
         <p
-          class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-alternative"
+          class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
           data-testid="multichain-token-list-item-value"
         >
            
diff --git a/ui/components/multichain/token-list-item/token-list-item.js b/ui/components/multichain/token-list-item/token-list-item.js
index 5fdf36d59..dfdce0baf 100644
--- a/ui/components/multichain/token-list-item/token-list-item.js
+++ b/ui/components/multichain/token-list-item/token-list-item.js
@@ -19,8 +19,8 @@ import {
   AvatarToken,
   BadgeWrapper,
   Box,
+  Text,
 } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
 import {
   getCurrentChainId,
   getCurrentNetwork,