refactor: replace Typography with Text component in metametrics.js (#…

…25630) ## **Description** Migrated the `Typography` component to the `Text` component in the `metametrics.js` file. This change is part of the ongoing effort to update the codebase to use the new `Text` component for better consistency and maintainability. Devin Run Link: https://staging.itsdev.in/devin/ab3388199a904772b66d750b70b340af [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25630?quickstart=1) ## **Related issues** Partially Fixes: #17670 ## **Manual testing steps** 1. Go to the latest build of storybook in this PR 2. Verify that the `OnboardingMetametrics` component renders correctly 3. Ensure that the text styles and alignments are consistent with the design specifications ## **Screenshots/Recordings** ### **Before** ![](https://api.devin.ai/attachments/70aa74b6-3cd2-4371-a5cc-1e6ed7485f12/1530a249-da0a-407c-80d6-b049893b007b.png) ### **After** ![](https://api.devin.ai/attachments/54d320cb-f9d0-47c1-8238-8a210d2a77e4/dde3fd7e-c493-4b4e-829b-a37eae4beda5.png) ## **Pre-merge author checklist** - [X] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [X] I've completed the PR template to the best of my ability - [X] I’ve included tests if applicable - [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [X] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --------- Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>
MetaMask · Jul 24, 2024 · d4c2256 · d4c2256
1 parent aee6585
commit d4c2256
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 53 deletions.
diff --git a/ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.js.snap b/ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.js.snap
@@ -7,17 +7,17 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
     data-testid="onboarding-metametrics"
   >
     <h2
-      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h2 typography--weight-bold typography--style-normal typography--align-center typography--color-text-default"
+      class="mm-box mm-text mm-text--heading-lg mm-text--font-weight-bold mm-text--text-align-center mm-box--color-text-default"
     >
       Help us improve MetaMask
     </h2>
     <p
-      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography onboarding-metametrics__desc typography--p typography--weight-normal typography--style-normal typography--align-left typography--color-text-default"
+      class="mm-box mm-text onboarding-metametrics__desc mm-text--body-md mm-text--text-align-left mm-box--color-text-default"
     >
       We’d like to gather basic usage and diagnostics data to improve MetaMask. Know that we never sell the data you provide here.
     </p>
     <p
-      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography onboarding-metametrics__desc typography--p typography--weight-normal typography--style-normal typography--align-left typography--color-text-default"
+      class="mm-box mm-text onboarding-metametrics__desc mm-text--body-md mm-text--text-align-left mm-box--color-text-default"
     >
       When we gather metrics, it will always be...
     </p>
@@ -34,7 +34,7 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
              
             
             <span
-              class="box box--margin-bottom-1 box--flex-direction-row typography typography--span typography--weight-bold typography--style-normal typography--color-text-default"
+              class="mm-box mm-text mm-text--inherit mm-text--font-weight-bold mm-box--margin-top-0 mm-box--color-text-default"
             >
               Private:
             </span>
@@ -55,7 +55,7 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
              
             
             <span
-              class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--span typography--weight-bold typography--style-normal typography--color-text-default"
+              class="mm-box mm-text mm-text--inherit mm-text--font-weight-bold mm-box--color-text-default"
             >
               General:
             </span>
@@ -76,7 +76,7 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
              
             
             <span
-              class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--span typography--weight-bold typography--style-normal typography--color-text-default"
+              class="mm-box mm-text mm-text--inherit mm-text--font-weight-bold mm-box--color-text-default"
             >
               Optional:
             </span>
@@ -105,8 +105,8 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
         We’ll use this data to learn how you interact with our marketing communications. We may share relevant news (like product features).
       </span>
     </label>
-    <h6
-      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography onboarding-metametrics__terms typography--h6 typography--weight-normal typography--style-normal typography--align-left typography--color-text-alternative"
+    <p
+      class="mm-box mm-text onboarding-metametrics__terms mm-text--body-sm mm-text--text-align-left mm-box--color-text-alternative"
     >
       <span>
          
@@ -121,7 +121,7 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
          for more information. Remember, you can go to settings and opt out at any time.
          
       </span>
-    </h6>
+    </p>
     <div
       class="onboarding-metametrics__buttons"
     >
@@ -149,17 +149,17 @@ exports[`Onboarding Metametrics Component should match snapshot after new policy
     data-testid="onboarding-metametrics"
   >
     <h2
-      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h2 typography--weight-bold typography--style-normal typography--align-center typography--color-text-default"
+      class="mm-box mm-text mm-text--heading-lg mm-text--font-weight-bold mm-text--text-align-center mm-box--color-text-default"
     >
       Help us improve MetaMask
     </h2>
     <p
-      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography onboarding-metametrics__desc typography--p typography--weight-normal typography--style-normal typography--align-left typography--color-text-default"
+      class="mm-box mm-text onboarding-metametrics__desc mm-text--body-md mm-text--text-align-left mm-box--color-text-default"
     >
       We’d like to gather basic usage and diagnostics data to improve MetaMask. Know that we never sell the data you provide here.
     </p>
     <p
-      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography onboarding-metametrics__desc typography--p typography--weight-normal typography--style-normal typography--align-left typography--color-text-default"
+      class="mm-box mm-text onboarding-metametrics__desc mm-text--body-md mm-text--text-align-left mm-box--color-text-default"
     >
       When we gather metrics, it will always be...
     </p>
@@ -176,7 +176,7 @@ exports[`Onboarding Metametrics Component should match snapshot after new policy
              
             
             <span
-              class="box box--margin-bottom-1 box--flex-direction-row typography typography--span typography--weight-bold typography--style-normal typography--color-text-default"
+              class="mm-box mm-text mm-text--inherit mm-text--font-weight-bold mm-box--margin-top-0 mm-box--color-text-default"
             >
               Private:
             </span>
@@ -197,7 +197,7 @@ exports[`Onboarding Metametrics Component should match snapshot after new policy
              
             
             <span
-              class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--span typography--weight-bold typography--style-normal typography--color-text-default"
+              class="mm-box mm-text mm-text--inherit mm-text--font-weight-bold mm-box--color-text-default"
             >
               General:
             </span>
@@ -218,7 +218,7 @@ exports[`Onboarding Metametrics Component should match snapshot after new policy
              
             
             <span
-              class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--span typography--weight-bold typography--style-normal typography--color-text-default"
+              class="mm-box mm-text mm-text--inherit mm-text--font-weight-bold mm-box--color-text-default"
             >
               Optional:
             </span>
@@ -247,8 +247,8 @@ exports[`Onboarding Metametrics Component should match snapshot after new policy
         We’ll use this data to learn how you interact with our marketing communications. We may share relevant news (like product features).
       </span>
     </label>
-    <h6
-      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography onboarding-metametrics__terms typography--h6 typography--weight-normal typography--style-normal typography--align-left typography--color-text-alternative"
+    <p
+      class="mm-box mm-text onboarding-metametrics__terms mm-text--body-sm mm-text--text-align-left mm-box--color-text-alternative"
     >
       <span>
          
@@ -263,7 +263,7 @@ exports[`Onboarding Metametrics Component should match snapshot after new policy
          for more information. Remember, you can go to settings and opt out at any time.
          
       </span>
-    </h6>
+    </p>
     <div
       class="onboarding-metametrics__buttons"
     >

diff --git a/ui/pages/onboarding-flow/metametrics/metametrics.js b/ui/pages/onboarding-flow/metametrics/metametrics.js
@@ -1,11 +1,10 @@
 import React, { useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import Typography from '../../../components/ui/typography/typography';
 import {
-  TypographyVariant,
-  FONT_WEIGHT,
-  TEXT_ALIGN,
+  TextVariant,
+  FontWeight,
+  TextAlign,
   TextColor,
   IconColor,
 } from '../../../helpers/constants/design-system';
@@ -34,6 +33,7 @@ import {
   Icon,
   IconName,
   IconSize,
+  Text,
 } from '../../../components/component-library';
 
 import Box from '../../../components/ui/box/box';
@@ -109,25 +109,19 @@ export default function OnboardingMetametrics() {
       className="onboarding-metametrics"
       data-testid="onboarding-metametrics"
     >
-      <Typography
-        variant={TypographyVariant.H2}
-        align={TEXT_ALIGN.CENTER}
-        fontWeight={FONT_WEIGHT.BOLD}
+      <Text
+        variant={TextVariant.headingLg}
+        textAlign={TextAlign.Center}
+        fontWeight={FontWeight.Bold}
       >
         {t('onboardingMetametricsTitle')}
-      </Typography>
-      <Typography
-        className="onboarding-metametrics__desc"
-        align={TEXT_ALIGN.LEFT}
-      >
+      </Text>
+      <Text className="onboarding-metametrics__desc" textAlign={TextAlign.Left}>
         {t('onboardingMetametricsDescription')}
-      </Typography>
-      <Typography
-        className="onboarding-metametrics__desc"
-        align={TEXT_ALIGN.LEFT}
-      >
+      </Text>
+      <Text className="onboarding-metametrics__desc" textAlign={TextAlign.Left}>
         {t('onboardingMetametricsDescription2')}
-      </Typography>
+      </Text>
       <ul>
         <li>
           <Box>
@@ -138,14 +132,14 @@ export default function OnboardingMetametrics() {
               color={IconColor.successDefault}
             />
             {t('onboardingMetametricsNeverCollect', [
-              <Typography
-                variant={TypographyVariant.span}
+              <Text
+                variant={TextVariant.inherit}
                 key="never"
-                fontWeight={FONT_WEIGHT.BOLD}
+                fontWeight={FontWeight.Bold}
                 marginTop={0}
               >
                 {t('onboardingMetametricsNeverCollectEmphasis')}
-              </Typography>,
+              </Text>,
             ])}
           </Box>
         </li>
@@ -158,13 +152,13 @@ export default function OnboardingMetametrics() {
               color={IconColor.successDefault}
             />
             {t('onboardingMetametricsNeverCollectIP', [
-              <Typography
-                variant={TypographyVariant.span}
+              <Text
+                variant={TextVariant.inherit}
                 key="never-collect"
-                fontWeight={FONT_WEIGHT.BOLD}
+                fontWeight={FontWeight.Bold}
               >
                 {t('onboardingMetametricsNeverCollectIPEmphasis')}
-              </Typography>,
+              </Text>,
             ])}
           </Box>
         </li>
@@ -177,13 +171,13 @@ export default function OnboardingMetametrics() {
               color={IconColor.successDefault}
             />
             {t('onboardingMetametricsNeverSellData', [
-              <Typography
-                variant={TypographyVariant.span}
+              <Text
+                variant={TextVariant.inherit}
                 key="never-sell"
-                fontWeight={FONT_WEIGHT.BOLD}
+                fontWeight={FontWeight.Bold}
               >
                 {t('onboardingMetametricsNeverSellDataEmphasis')}
-              </Typography>,
+              </Text>,
             ])}
           </Box>{' '}
         </li>
@@ -197,10 +191,10 @@ export default function OnboardingMetametrics() {
         label={t('onboardingMetametricsUseDataCheckbox')}
         paddingBottom={3}
       />
-      <Typography
+      <Text
         color={TextColor.textAlternative}
-        align={TEXT_ALIGN.LEFT}
-        variant={TypographyVariant.H6}
+        textAlign={TextAlign.Left}
+        variant={TextVariant.bodySm}
         className="onboarding-metametrics__terms"
       >
         {t('onboardingMetametricsInfuraTerms', [
@@ -213,7 +207,7 @@ export default function OnboardingMetametrics() {
             {t('onboardingMetametricsInfuraTermsPolicy')}
           </a>,
         ])}
-      </Typography>
+      </Text>
 
       <div className="onboarding-metametrics__buttons">
         <Button