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
2024-12-23 09:52:26 +01:00 · 2023-07-17 22:02:02 -07:00 · 2023-07-17 22:02:02 -07:00 · 36be38e979
commit 36be38e979
parent 3f3ee63b17
20 changed files with 77 additions and 34 deletions
--- 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
--- a/ui/components/app/token-cell/token-cell.stories.js
+++ 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';
--- 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')}
--- 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,
--- 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 {
--- 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,
--- 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"
--- 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,
--- 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,
--- 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>
--- 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,
--- 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>
--- 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';
--- 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
--- 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 {
--- 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,
--- 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';
--- 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';

--- 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"
        >
           
--- 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,