From f6210927dd4cbb7948bcbfc484cc32017e355431 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 27 Apr 2023 18:06:49 +0200 Subject: [PATCH] Part of #17670: Replace Typography with Text component in RecoveryPhraseReminder (#18639) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * add story * replace Typograhy with Text * import ordering * FONT_WEIGHT → FontWeight --------- Co-authored-by: Danica Shen Co-authored-by: Brad Decker --- .../recovery-phrase-reminder.js | 36 +++++++++---------- .../recovery-phrase-reminder.stories.js | 23 ++++++++++++ 2 files changed, 40 insertions(+), 19 deletions(-) create mode 100644 ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.stories.js diff --git a/ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js b/ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js index 0448be40c..334311076 100644 --- a/ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js +++ b/ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js @@ -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" > - {t('recoveryPhraseReminderSubText')} - +
    -
  • - - {t('recoveryPhraseReminderItemOne')} - -
  • -
  • {t('recoveryPhraseReminderItemTwo')}
  • -
  • + + {t('recoveryPhraseReminderItemOne')} + + {t('recoveryPhraseReminderItemTwo')} + {hasBackedUp ? ( t('recoveryPhraseReminderHasBackedUp') ) : ( @@ -75,7 +73,7 @@ export default function RecoveryPhraseReminder({ onConfirm, hasBackedUp }) { )} -
  • +
diff --git a/ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.stories.js b/ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.stories.js new file mode 100644 index 000000000..d8fb85216 --- /dev/null +++ b/ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.stories.js @@ -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) => ; + +DefaultStory.storyName = 'Default';