Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Jul 24, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0daa295
Migrate Typography to Text component in metametrics.js
devin-ai-integration[bot] Jul 2, 2024
ceb14d6
Updated snapshots and fixed lint
devin-ai-integration[bot] Jul 2, 2024
8ea961a
Fixed lint
devin-ai-integration[bot] Jul 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>

Expand All @@ -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"
>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>

Expand All @@ -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"
>
Expand Down
64 changes: 29 additions & 35 deletions ui/pages/onboarding-flow/metametrics/metametrics.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -34,6 +33,7 @@ import {
Icon,
IconName,
IconSize,
Text,
} from '../../../components/component-library';

import Box from '../../../components/ui/box/box';
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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', [
Expand All @@ -213,7 +207,7 @@ export default function OnboardingMetametrics() {
{t('onboardingMetametricsInfuraTermsPolicy')}
</a>,
])}
</Typography>
</Text>

<div className="onboarding-metametrics__buttons">
<Button
Expand Down