m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
Code

Part of #17670: Replace Typography with Text component in RecoveryPhraseReminder (#18639)

Browse Source 
* add story

* replace Typograhy with Text

* import ordering

* FONT_WEIGHT → FontWeight

---------

Co-authored-by: Danica Shen <zhaodanica@gmail.com>
Co-authored-by: Brad Decker <bhdecker84@gmail.com>
This commit is contained in:
Matthias Kretschmann 2023-04-27 18:06:49 +02:00 committed by GitHub
parent d58b1f9aa7
commit f6210927dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js
View File

@ -6,14 +6,14 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
import Box from '../../ui/box';
import Button from '../../ui/button';
import Popover from '../../ui/popover';
import Typography from '../../ui/typography';
import { Text } from '../../component-library';
// Helpers
import {
DISPLAY,
TEXT_ALIGN,
TypographyVariant,
TextVariant,
BLOCK_SIZES,
FONT_WEIGHT,
FontWeight,
JustifyContent,
TextColor,
} from '../../../helpers/constants/design-system';
@ -35,27 +35,25 @@ export default function RecoveryPhraseReminder({ onConfirm, hasBackedUp }) {
paddingLeft={4}
className="recovery-phrase-reminder"
>
<Typography
<Text
color={TextColor.textDefault}
align={TEXT_ALIGN.CENTER}
variant={TypographyVariant.paragraph}
boxProps={{ marginTop: 0, marginBottom: 4 }}
variant={TextVariant.bodyMd}
marginBottom={4}
>
{t('recoveryPhraseReminderSubText')}
</Typography>
</Text>
<Box marginTop={4} marginBottom={8}>
<ul className="recovery-phrase-reminder__list">
<li>
<Typography
as="span"
color={TextColor.textDefault}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('recoveryPhraseReminderItemOne')}
</Typography>
</li>
<li>{t('recoveryPhraseReminderItemTwo')}</li>
<li>
<Text
as="li"
color={TextColor.textDefault}
fontWeight={FontWeight.Bold}
>
{t('recoveryPhraseReminderItemOne')}
</Text>
<Text as="li">{t('recoveryPhraseReminderItemTwo')}</Text>
<Text as="li">
{hasBackedUp ? (
t('recoveryPhraseReminderHasBackedUp')
) : (
@ -75,7 +73,7 @@ export default function RecoveryPhraseReminder({ onConfirm, hasBackedUp }) {
</Box>
</>
)}
</li>
</Text>
</ul>
</Box>
<Box justifyContent={JustifyContent.center}>

23
ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.stories.js Normal file
View File

@ -0,0 +1,23 @@
import React from 'react';
import RecoveryPhraseReminder from '.';
export default {
title: 'Components/App/RecoveryPhraseReminder',
argTypes: {
hasBackedUp: {
control: 'boolean',
},
onConfirm: {
action: 'onConfirm',
},
},
args: {
hasBackedUp: false,
onConfirm: () => console.log('onConfirm fired'),
},
};
export const DefaultStory = (args) => <RecoveryPhraseReminder {...args} />;
DefaultStory.storyName = 'Default';