Part of #17670: Replace Typography with Text component (#17959)

* Updated confirm-page-container-summary.component.js

* Updated snap-insight.js

* Updated confirmation-warning-modal.js

* Updated create-new-vault.js

* Fixing import errors, linting errors and adding a story

* Updating storybook path

* Updating snapshot

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js

@@ -14,8 +14,8 @@ import { getIpfsGateway } from '../../../../../selectors';
 import Identicon from '../../../../ui/identicon';
 import InfoTooltip from '../../../../ui/info-tooltip';
 import NicknamePopovers from '../../../modals/nickname-popovers';
-import Typography from '../../../../ui/typography';
+import { Text } from '../../../../component-library';
-import { TypographyVariant } from '../../../../../helpers/constants/design-system';
+import { TextVariant } from '../../../../../helpers/constants/design-system';
 import { ORIGIN_METAMASK } from '../../../../../../shared/constants/app';
 import SiteOrigin from '../../../../ui/site-origin';
 import { getAssetImageURL } from '../../../../../helpers/utils/util';
@@ -131,17 +131,18 @@ const ConfirmPageContainerSummary = (props) => {
         <div className="confirm-page-container-summary__title">
           {renderImage()}
           {!hideTitle ? (
-            <Typography
+            <Text
               className="confirm-page-container-summary__title-text"
               variant={
                 title && title.length < 10
-                  ? TypographyVariant.H1
+                  ? TextVariant.displayMd
-                  : TypographyVariant.H3
+                  : TextVariant.headingMd
               }
+              as={title && title.length < 10 ? 'h1' : 'h3'}
               title={title}
             >
               {titleComponent || title}
-            </Typography>
+            </Text>
           ) : null}
         </div>
         {hideSubtitle ? null : (

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.stories.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import ConfirmPageContainerSummary from '.';
+
+export default {
+  title:
+    'Components/App/ConfirmPageContainer/ConfirmPageContainerContent/ConfirmPageContainerSummary',
+  argTypes: {
+    action: {
+      control: 'text',
+    },
+    title: {
+      control: 'text',
+    },
+    image: {
+      control: 'text',
+    },
+    titleComponent: {
+      control: 'text',
+    },
+    subtitleComponent: {
+      control: 'text',
+    },
+    hideSubtitle: {
+      control: 'boolean',
+    },
+    className: {
+      control: 'text',
+    },
+    tokenAddress: {
+      control: 'text',
+    },
+    toAddress: {
+      control: 'text',
+    },
+    nonce: {
+      control: 'text',
+    },
+    origin: {
+      control: 'text',
+    },
+    hideTitle: {
+      control: 'boolean',
+    },
+    transactionType: {
+      control: 'text',
+    },
+  },
+  args: {
+    action: 'action',
+    title: 'title',
+    titleComponent: 'titleComponent',
+    subtitleComponent: 'subtitleComponent',
+    className: 'className',
+    tokenAddress: '0x2170ed0880ac9a755fd29b2688956bd959f933f8',
+    toAddress: '0x2170ed0880ac9a755fd29b2688956bd959f933f8',
+    nonce: 'nonce',
+    origin: 'origin',
+    hideTitle: 'hideTitle',
+    transactionType: 'transactionType',
+  },
+};
+
+export const DefaultStory = (args) => <ConfirmPageContainerSummary {...args} />;
+
+DefaultStory.storyName = 'Default';

ui/components/app/confirm-page-container/flask/snap-insight.js

@@ -2,14 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Preloader from '../../../ui/icon/preloader/preloader-icon.component';
-import Typography from '../../../ui/typography/typography';
+import { Text } from '../../../component-library';
 import {
   AlignItems,
   FLEX_DIRECTION,
   JustifyContent,
   TEXT_ALIGN,
   TextColor,
-  TypographyVariant,
+  TextVariant,
 } from '../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { useTransactionInsightSnap } from '../../../../hooks/flask/useTransactionInsightSnap';
@@ -54,12 +54,13 @@ export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
           {data && Object.keys(data).length > 0 ? (
             <SnapUIRenderer snapId={selectedSnap.id} data={data} />
           ) : (
-            <Typography
+            <Text
               color={TextColor.textAlternative}
-              variant={TypographyVariant.H6}
+              variant={TextVariant.bodySm}
+              as="h6"
             >
               {t('snapsNoInsight')}
-            </Typography>
+            </Text>
           )}
         </Box>
       )}
@@ -87,13 +88,14 @@ export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
       {loading && (
         <>
           <Preloader size={40} />
-          <Typography
+          <Text
             marginTop={3}
             color={TextColor.textAlternative}
-            variant={TypographyVariant.H6}
+            variant={TextVariant.bodySm}
+            as="h6"
           >
             {t('snapsInsightLoading')}
-          </Typography>
+          </Text>
         </>
       )}
     </Box>

ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js

@@ -5,17 +5,16 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
 import Popover from '../../ui/popover';
 import Box from '../../ui/box';
 import Button from '../../ui/button';
-import Typography from '../../ui/typography';
 import {
   DISPLAY,
   FLEX_DIRECTION,
   FONT_WEIGHT,
   JustifyContent,
-  TypographyVariant,
+  TextVariant,
   AlignItems,
   IconColor,
 } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
+import { Text, Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
 
 const ConfirmationWarningModal = ({ onSubmit, onCancel }) => {
   const t = useI18nContext();
@@ -61,39 +60,40 @@ const ConfirmationWarningModal = ({ onSubmit, onCancel }) => {
           className="confirmation-warning-modal__content__header__warning-icon"
           size={ICON_SIZES.XL}
         />
-        <Typography
+        <Text
-          variant={TypographyVariant.H4}
+          variant={TextVariant.headingSm}
+          as="h4"
           fontWeight={FONT_WEIGHT.BOLD}
         >
           {t('addEthereumChainWarningModalTitle')}
-        </Typography>
+        </Text>
       </Box>
       <Box marginLeft={6} marginRight={6} marginTop={0} marginBottom={3}>
-        <Typography marginTop={4} variant={TypographyVariant.H6}>
+        <Text marginTop={4} variant={TextVariant.bodySm} as="h6">
           {t('addEthereumChainWarningModalHeader', [
             <strong key="part-2">
               {t('addEthereumChainWarningModalHeaderPartTwo')}
             </strong>,
           ])}
-        </Typography>
+        </Text>
-        <Typography marginTop={4} variant={TypographyVariant.H6}>
+        <Text marginTop={4} variant={TextVariant.bodySm} as="h6">
           {t('addEthereumChainWarningModalListHeader')}
-        </Typography>
+        </Text>
         <ul>
           <li>
-            <Typography marginTop={2} variant={TypographyVariant.H6}>
+            <Text marginTop={2} variant={TextVariant.bodySm} as="h6">
               {t('addEthereumChainWarningModalListPointOne')}
-            </Typography>
+            </Text>
           </li>
           <li>
-            <Typography marginTop={2} variant={TypographyVariant.H6}>
+            <Text marginTop={2} variant={TextVariant.bodySm} as="h6">
               {t('addEthereumChainWarningModalListPointTwo')}
-            </Typography>
+            </Text>
           </li>
           <li>
-            <Typography marginTop={2} variant={TypographyVariant.H6}>
+            <Text marginTop={2} variant={TextVariant.bodySm} as="h6">
               {t('addEthereumChainWarningModalListPointThree')}
-            </Typography>
+            </Text>
           </li>
         </ul>
       </Box>

ui/components/app/create-new-vault/create-new-vault.js

@@ -4,7 +4,7 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
 import TextField from '../../ui/text-field';
 import Button from '../../ui/button';
 import CheckBox from '../../ui/check-box';
-import Typography from '../../ui/typography';
+import { Text } from '../../component-library';
 import SrpInput from '../srp-input';
 import { PASSWORD_MIN_LENGTH } from '../../../helpers/constants/common';
 
@@ -135,7 +135,7 @@ export default function CreateNewVault({
             className="create-new-vault__terms-label"
             htmlFor="create-new-vault__terms-checkbox"
           >
-            <Typography as="span">{termsOfUse}</Typography>
+            <Text as="span">{termsOfUse}</Text>
           </label>
         </div>
       ) : null}

ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap

@@ -254,7 +254,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
           class="confirm-page-container-summary__title"
         >
           <h3
-            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography confirm-page-container-summary__title-text typography--h3 typography--weight-normal typography--style-normal typography--color-text-default"
+            class="box mm-text confirm-page-container-summary__title-text mm-text--heading-md mm-text--color-text-default box--flex-direction-row"
           >
             <div
               class="currency-display-component"