From f6210927dd4cbb7948bcbfc484cc32017e355431 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
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 <zhaodanica@gmail.com>
Co-authored-by: Brad Decker <bhdecker84@gmail.com>
---
 .../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"
       >
-        <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
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) => <RecoveryPhraseReminder {...args} />;
+
+DefaultStory.storyName = 'Default';