Issue 17670 replace typography with text (#19433)

* Replace Typograph with Text component in numeric-input-component.js

* Replace Typography with Text component in signature-request-message.js

* Replace Typography with Text component in signature-request.component.js

* Replacing deprecating constants and fixing some signature story warnings

* Updating snapshot

* Fixing import

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
Co-authored-by: Garrett Bear <gwhisten@gmail.com>

ui/components/app/signature-request-original/signature-request-original.component.js

@@ -156,11 +156,7 @@ export default class SignatureRequestOriginal extends Component {
                 color={IconColor.infoDefault}
                 marginRight={2}
               />
-              <Text
+              <Text variant={TextVariant.bodyXs} color={TextColor.textDefault}>
-                variant={TextVariant.bodyXs}
-                color={TextColor.textDefault}
-                as="h7"
-              >
                 {this.context.t('mismatchAccount', [
                   shortenAddress(this.props.selectedAccount.address),
                   shortenAddress(this.props.fromAccount.address),

ui/components/app/signature-request/__snapshots__/signature-request.component.test.js.snap

@@ -206,12 +206,13 @@ exports[`Signature Request Component render should match snapshot when we are us
         </div>
       </div>
       <h3
-        class="box box--margin-top-4 box--margin-bottom-1 box--flex-direction-row typography signature-request__content__title typography--h3 typography--weight-bold typography--style-normal typography--color-text-default"
+        class="box mm-text signature-request__content__title mm-text--heading-md box--margin-top-4 box--flex-direction-row box--color-text-default"
       >
         Signature request
       </h3>
       <h6
-        class="box box--margin-12 box--margin-top-3 box--margin-bottom-1 box--flex-direction-row typography request-signature__content__subtitle typography--h7 typography--weight-normal typography--style-normal typography--align-center typography--color-text-alternative"
+        align="center"
+        class="box mm-text request-signature__content__subtitle mm-text--body-sm box--margin-12 box--margin-top-3 box--flex-direction-row box--color-text-alternative"
       >
         Only sign this message if you fully understand the content and trust the requesting site.
       </h6>
@@ -223,7 +224,7 @@ exports[`Signature Request Component render should match snapshot when we are us
           tabindex="0"
         >
           <h6
-            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-primary-default"
+            class="box mm-text mm-text--body-sm box--flex-direction-row box--color-primary-default"
           >
             Verify third-party details
           </h6>
@@ -237,7 +238,7 @@ exports[`Signature Request Component render should match snapshot when we are us
         class="box signature-request-message__root box--margin-2 box--padding-top-3 box--padding-right-3 box--padding-bottom-3 box--flex-direction-row box--background-color-background-default box--rounded-xl box--border-color-border-muted box--border-style-solid box--border-width-1"
       >
         <p
-          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-message__title typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+          class="box mm-text mm-text--body-md mm-text--font-weight-bold box--margin-left-4 box--flex-direction-row box--color-text-default"
         >
           Mail
         </p>
@@ -982,12 +983,13 @@ exports[`Signature Request Component render should match snapshot when we want t
         </div>
       </div>
       <h3
-        class="box box--margin-top-4 box--margin-bottom-1 box--flex-direction-row typography signature-request__content__title typography--h3 typography--weight-bold typography--style-normal typography--color-text-default"
+        class="box mm-text signature-request__content__title mm-text--heading-md box--margin-top-4 box--flex-direction-row box--color-text-default"
       >
         Signature request
       </h3>
       <h6
-        class="box box--margin-12 box--margin-top-3 box--margin-bottom-1 box--flex-direction-row typography request-signature__content__subtitle typography--h7 typography--weight-normal typography--style-normal typography--align-center typography--color-text-alternative"
+        align="center"
+        class="box mm-text request-signature__content__subtitle mm-text--body-sm box--margin-12 box--margin-top-3 box--flex-direction-row box--color-text-alternative"
       >
         Only sign this message if you fully understand the content and trust the requesting site.
       </h6>
@@ -999,7 +1001,7 @@ exports[`Signature Request Component render should match snapshot when we want t
           tabindex="0"
         >
           <h6
-            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-primary-default"
+            class="box mm-text mm-text--body-sm box--flex-direction-row box--color-primary-default"
           >
             Verify third-party details
           </h6>
@@ -1013,7 +1015,7 @@ exports[`Signature Request Component render should match snapshot when we want t
         class="box signature-request-message__root box--margin-2 box--padding-top-3 box--padding-right-3 box--padding-bottom-3 box--flex-direction-row box--background-color-background-default box--rounded-xl box--border-color-border-muted box--border-style-solid box--border-width-1"
       >
         <p
-          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-message__title typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+          class="box mm-text mm-text--body-md mm-text--font-weight-bold box--margin-left-4 box--flex-direction-row box--color-text-default"
         >
           Mail
         </p>

ui/components/app/signature-request/index.scss

@@ -47,12 +47,6 @@
   flex-direction: column;
   min-height: min-content;
 
-  &__title {
-    @include H5;
-
-    font-weight: 500;
-  }
-
   &__info {
     @include H7;
 

ui/components/app/signature-request/signature-request-message/signature-request-message.js

@@ -3,11 +3,10 @@ import PropTypes from 'prop-types';
 import { debounce } from 'lodash';
 import { I18nContext } from '../../../../contexts/i18n';
 import Box from '../../../ui/box';
-import Typography from '../../../ui/typography';
+import { Text } from '../../../component-library';
 import {
-  DISPLAY,
+  Display,
-  FONT_WEIGHT,
+  FlexDirection,
-  FLEX_DIRECTION,
   AlignItems,
   JustifyContent,
   Color,
@@ -15,6 +14,7 @@ import {
   BorderColor,
   BorderRadius,
   TextColor,
+  FontWeight,
 } from '../../../../helpers/constants/design-system';
 import SignatureRequestData from '../signature-request-data';
 
@@ -44,14 +44,14 @@ export default function SignatureRequestMessage({
 
   return (
     <Box
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
-      flexDirection={FLEX_DIRECTION.COLUMN}
+      flexDirection={FlexDirection.Column}
       onScroll={debounce(setMessageIsScrolledAtBottom, 25)}
       className="signature-request-message"
     >
       {messageIsScrollable ? (
         <Box
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           alignItems={AlignItems.center}
           justifyContent={JustifyContent.center}
           borderColor={BorderColor.borderDefault}
@@ -79,14 +79,13 @@ export default function SignatureRequestMessage({
         className="signature-request-message__root"
         ref={setMessageRootRef}
       >
-        <Typography
+        <Text
-          fontWeight={FONT_WEIGHT.BOLD}
+          fontWeight={FontWeight.Bold}
           color={TextColor.textDefault}
           marginLeft={4}
-          className="signature-request-message__title"
         >
           {primaryType}
-        </Typography>
+        </Text>
         <SignatureRequestData data={data.value} />
       </Box>
     </Box>

ui/components/app/signature-request/signature-request-message/signature-request-message.stories.js

@@ -4,7 +4,6 @@ import SignatureRequestMessage from './signature-request-message';
 
 export default {
   title: 'Components/App/SignatureRequestMessage',
-
   component: SignatureRequestMessage,
   argTypes: {
     data: { control: 'object' },

ui/components/app/signature-request/signature-request.component.js

@@ -14,18 +14,15 @@ import {
 import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
 import SiteOrigin from '../../ui/site-origin';
 import Button from '../../ui/button';
-import Typography from '../../ui/typography/typography';
 import ContractDetailsModal from '../modals/contract-details-modal/contract-details-modal';
 import {
-  TypographyVariant,
-  FontWeight,
   TextAlign,
   TextColor,
+  TextVariant,
   ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
   IconColor,
-  DISPLAY,
+  Display,
-  BLOCK_SIZES,
+  BlockSize,
-  TextVariant,
   BackgroundColor,
   ///: END:ONLY_INCLUDE_IN
 } from '../../../helpers/constants/design-system';
@@ -37,11 +34,15 @@ import ConfirmPageContainerNavigation from '../confirm-page-container/confirm-pa
 import SecurityProviderBannerMessage from '../security-provider-banner-message/security-provider-banner-message';
 import { formatCurrency } from '../../../helpers/utils/confirm-tx.util';
 import { getValueFromWeiHex } from '../../../../shared/modules/conversion.utils';
-///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
-import { Icon, IconName, Text } from '../../component-library';
-import Box from '../../ui/box/box';
-///: END:ONLY_INCLUDE_IN
 
+import {
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  Box,
+  Icon,
+  IconName,
+  ///: END:ONLY_INCLUDE_IN
+  Text,
+} from '../../component-library';
 import Footer from './signature-request-footer';
 import Message from './signature-request-message';
 
@@ -295,8 +296,8 @@ export default class SignatureRequest extends PureComponent {
             this.props.selectedAccount.address === address ? null : (
               <Box
                 className="request-signature__mismatch-info"
-                display={DISPLAY.FLEX}
+                display={Display.Flex}
-                width={BLOCK_SIZES.FULL}
+                width={BlockSize.Full}
                 padding={4}
                 marginBottom={4}
                 backgroundColor={BackgroundColor.primaryMuted}
@@ -309,7 +310,6 @@ export default class SignatureRequest extends PureComponent {
                 <Text
                   variant={TextVariant.bodyXs}
                   color={TextColor.textDefault}
-                  as="h7"
                 >
                   {this.context.t('mismatchAccount', [
                     shortenAddress(this.props.selectedAccount.address),
@@ -330,26 +330,25 @@ export default class SignatureRequest extends PureComponent {
             />
           </div>
 
-          <Typography
+          <Text
             className="signature-request__content__title"
-            variant={TypographyVariant.H3}
+            variant={TextVariant.headingMd}
-            fontWeight={FontWeight.Bold}
+            as="h3"
-            boxProps={{
+            marginTop={4}
-              marginTop: 4,
-            }}
           >
             {this.context.t('sigRequest')}
-          </Typography>
+          </Text>
-          <Typography
+          <Text
             className="request-signature__content__subtitle"
-            variant={TypographyVariant.H7}
+            variant={TextVariant.bodySm}
+            as="h6"
             color={TextColor.textAlternative}
             align={TextAlign.Center}
             margin={12}
             marginTop={3}
           >
             {this.context.t('signatureRequestGuidance')}
-          </Typography>
+          </Text>
           {verifyingContract ? (
             <div>
               <Button
@@ -358,12 +357,13 @@ export default class SignatureRequest extends PureComponent {
                 className="signature-request-content__verify-contract-details"
                 data-testid="verify-contract-details"
               >
-                <Typography
+                <Text
-                  variant={TypographyVariant.H7}
+                  variant={TextVariant.bodySm}
+                  as="h6"
                   color={TextColor.primaryDefault}
                 >
                   {this.context.t('verifyContractDetails')}
-                </Typography>
+                </Text>
               </Button>
             </div>
           ) : null}

ui/components/app/signature-request/signature-request.stories.js

@@ -9,7 +9,6 @@ const [MOCK_PRIMARY_IDENTITY, MOCK_SECONDARY_IDENTITY] = Object.values(
 
 export default {
   title: 'Components/App/SignatureRequest',
-
   component: SignatureRequest,
   parameters: {
     docs: {
@@ -30,6 +29,10 @@ export default {
     clearConfirmTransaction: { action: 'Clean Confirm' },
     cancel: { action: 'Cancel' },
     sign: { action: 'Sign' },
+    showRejectTransactionsConfirmationModal: {
+      action: 'showRejectTransactionsConfirmationModal',
+    },
+    cancelAll: { action: 'cancelAll' },
   },
 };
 
@@ -79,6 +82,8 @@ DefaultStory.args = {
   fromAccount: MOCK_PRIMARY_IDENTITY,
   providerConfig: { name: 'Goerli ETH' },
   selectedAccount: MOCK_PRIMARY_IDENTITY,
+  hardwareWalletRequiresConnection: false,
+  currentCurrency: 'usd',
 };
 
 export const AccountMismatchStory = (args) => {

ui/components/component-library/popover/popover.stories.tsx

@@ -731,7 +731,7 @@ export const Offset: StoryFn<typeof Popover> = (args) => {
   );
 };
 
-export const onPressEscKey: StoryFn<typeof Popover> = (args) => {
+export const OnPressEscKey: StoryFn<typeof Popover> = (args) => {
   const [referenceElement, setReferenceElement] = useState();
   const [isOpen, setIsOpen] = useState(false);
 

ui/components/ui/numeric-input/numeric-input.component.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import Typography from '../typography/typography';
 import {
   TextColor,
-  TypographyVariant,
+  TextVariant,
 } from '../../../helpers/constants/design-system';
 import { DECIMAL_REGEX } from '../../../../shared/constants/tokens';
+import { Text } from '../../component-library';
 
 export default function NumericInput({
   detailText = '',
@@ -52,13 +52,13 @@ export default function NumericInput({
         ref={inputRef}
       />
       {detailText && (
-        <Typography
+        <Text
           color={TextColor.textAlternative}
-          variant={TypographyVariant.H7}
+          variant={TextVariant.bodySm}
           as="span"
         >
           {detailText}
-        </Typography>
+        </Text>
       )}
     </div>
   );

ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap

@@ -205,12 +205,13 @@ exports[`Signature Request Component render should match snapshot 1`] = `
         </div>
       </div>
       <h3
-        class="box box--margin-top-4 box--margin-bottom-1 box--flex-direction-row typography signature-request__content__title typography--h3 typography--weight-bold typography--style-normal typography--color-text-default"
+        class="box mm-text signature-request__content__title mm-text--heading-md box--margin-top-4 box--flex-direction-row box--color-text-default"
       >
         Signature request
       </h3>
       <h6
-        class="box box--margin-12 box--margin-top-3 box--margin-bottom-1 box--flex-direction-row typography request-signature__content__subtitle typography--h7 typography--weight-normal typography--style-normal typography--align-center typography--color-text-alternative"
+        align="center"
+        class="box mm-text request-signature__content__subtitle mm-text--body-sm box--margin-12 box--margin-top-3 box--flex-direction-row box--color-text-alternative"
       >
         Only sign this message if you fully understand the content and trust the requesting site.
       </h6>
@@ -222,7 +223,7 @@ exports[`Signature Request Component render should match snapshot 1`] = `
           tabindex="0"
         >
           <h6
-            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-primary-default"
+            class="box mm-text mm-text--body-sm box--flex-direction-row box--color-primary-default"
           >
             Verify third-party details
           </h6>
@@ -236,7 +237,7 @@ exports[`Signature Request Component render should match snapshot 1`] = `
         class="box signature-request-message__root box--margin-2 box--padding-top-3 box--padding-right-3 box--padding-bottom-3 box--flex-direction-row box--background-color-background-default box--rounded-xl box--border-color-border-muted box--border-style-solid box--border-width-1"
       >
         <p
-          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-message__title typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+          class="box mm-text mm-text--body-md mm-text--font-weight-bold box--margin-left-4 box--flex-direction-row box--color-text-default"
         >
           Mail
         </p>