Part of #17670: Replace Typography with Text component in RecoveryPhr…

…aseReminder (#18639) * add story * replace Typograhy with Text * import ordering * FONT_WEIGHT → FontWeight --------- Co-authored-by: Danica Shen <[email protected]> Co-authored-by: Brad Decker <[email protected]>
MetaMask · Apr 27, 2023 · f621092 · f621092
1 parent d58b1f9
commit f621092
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 19 deletions.
diff --git 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"
       >
-        <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}>

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
@@ -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';