m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +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

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