replacing deprecated components and consts

MetaMask · Jun 27, 2023 · e0ab16d · e0ab16d
1 parent ec4c405
commit e0ab16d
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 70 deletions.
diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
@@ -31,7 +31,6 @@
 @import 'flask/experimental-area/index';
 @import 'snaps/snap-content-footer/index';
 @import 'snaps/snap-install-warning/index';
-@import 'snaps/snap-remove-warning/index';
 @import 'snaps/snap-ui-renderer/index';
 @import 'snaps/snap-ui-markdown/index';
 @import 'snaps/snap-delineator/index';

diff --git a/ui/components/app/snaps/snap-remove-warning/index.scss b/ui/components/app/snaps/snap-remove-warning/index.scss
diff --git a/ui/components/app/snaps/snap-remove-warning/snap-remove-warning.js b/ui/components/app/snaps/snap-remove-warning/snap-remove-warning.js
@@ -1,51 +1,64 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import Typography from '../../../ui/typography/typography';
-import { TypographyVariant } from '../../../../helpers/constants/design-system';
-import Box from '../../../ui/box/box';
-import Popover from '../../../ui/popover';
-import Button from '../../../ui/button';
+import {
+  Text,
+  Box,
+  Button,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  BUTTON_VARIANT,
+  BUTTON_SIZES,
+} from '../../../component-library';
 
-export default function SnapRemoveWarning({ onCancel, onSubmit, snapName }) {
-  const t = useI18nContext();
-
-  const SnapRemoveWarningFooter = () => {
-    return (
-      <>
-        <Button
-          className="snap-remove-warning__footer-button"
-          type="default"
-          onClick={onCancel}
-        >
-          {t('nevermind')}
-        </Button>
-        <Button
-          id="popoverRemoveSnapButton"
-          className="snap-remove-warning__footer-button"
-          type="danger-primary"
-          onClick={onSubmit}
-        >
-          {t('removeSnap')}
-        </Button>
-      </>
-    );
-  };
+import {
+  BlockSize,
+  Display,
+  FlexDirection,
+} from '../../../../helpers/constants/design-system';
 
+export default function SnapRemoveWarning({
+  isOpen,
+  onCancel,
+  onSubmit,
+  snapName,
+}) {
+  const t = useI18nContext();
   return (
-    <Popover
-      className="snap-remove-warning"
-      title={t('pleaseConfirm')}
-      footer={<SnapRemoveWarningFooter />}
-      onClose={onCancel}
-      headerProps={{ padding: [6, 4, 0, 6] }}
-    >
-      <Box paddingRight={4} paddingBottom={4} paddingLeft={6}>
-        <Typography variant={TypographyVariant.H4}>
-          {t('removeSnapConfirmation', [snapName])}
-        </Typography>
-      </Box>
-    </Popover>
+    <Modal isOpen={isOpen} onClose={onCancel}>
+      <ModalOverlay />
+      <ModalContent
+        modalDialogProps={{
+          display: Display.Flex,
+          flexDirection: FlexDirection.Column,
+          gap: 4,
+        }}
+      >
+        <ModalHeader onClose={onCancel}>{t('pleaseConfirm')}</ModalHeader>
+        <Text>{t('removeSnapConfirmation', [snapName])}</Text>
+        <Box width={BlockSize.Full} display={Display.Flex} gap={4}>
+          <Button
+            block
+            variant={BUTTON_VARIANT.SECONDARY}
+            size={BUTTON_SIZES.LG}
+            onClick={onCancel}
+          >
+            {t('nevermind')}
+          </Button>
+          <Button
+            block
+            size={BUTTON_SIZES.LG}
+            id="popoverRemoveSnapButton"
+            danger
+            onClick={onSubmit}
+          >
+            {t('removeSnap')}
+          </Button>
+        </Box>
+      </ModalContent>
+    </Modal>
   );
 }
 
@@ -62,4 +75,8 @@ SnapRemoveWarning.propTypes = {
    * Name of snap
    */
   snapName: PropTypes.string,
+  /**
+   * Whether the modal is open
+   */
+  isOpen: PropTypes.bool,
 };
diff --git a/ui/components/app/snaps/snap-remove-warning/snap-remove-warning.stories.js b/ui/components/app/snaps/snap-remove-warning/snap-remove-warning.stories.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import SnapRemoveWarning from './snap-remove-warning';
+
+export default {
+  title: 'Components/App/Snaps/SnapRemoveWarning',
+  component: SnapRemoveWarning,
+  argTypes: {
+    onCancel: {
+      action: 'onCancel',
+    },
+    onSubmit: {
+      action: 'onSubmit',
+    },
+    snapName: {
+      control: 'text',
+    },
+    isOpen: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    snapName: 'Snap Name',
+    isOpen: true,
+  },
+};
+
+export const DefaultStory = (args) => <SnapRemoveWarning {...args} />;
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.js b/ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.js
@@ -2,17 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ReactMarkdown from 'react-markdown';
 import {
-  TypographyVariant,
-  OVERFLOW_WRAP,
+  TextVariant,
+  OverflowWrap,
 } from '../../../../helpers/constants/design-system';
-import Typography from '../../../ui/typography/typography';
+import { Text } from '../../../component-library';
 
 const Paragraph = (props) => (
-  <Typography
+  <Text
     {...props}
-    variant={TypographyVariant.H6}
+    variant={TextVariant.bodyMd}
     className="snap-ui-markdown__text"
-    overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
+    overflowWrap={OverflowWrap.BreakWord}
   />
 );
 

diff --git a/ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.stories.js b/ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.stories.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { SnapUIMarkdown } from './snap-ui-markdown';
+
+export default {
+  title: 'Components/App/Snaps/SnapUIMarkdown',
+  component: SnapUIMarkdown,
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+  },
+  args: {
+    children: 'A Test String',
+  },
+};
+
+export const DefaultStory = (args) => <SnapUIMarkdown {...args} />;
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/pages/settings/snaps/view-snap/view-snap.js b/ui/pages/settings/snaps/view-snap/view-snap.js
@@ -187,15 +187,14 @@ function ViewSnap() {
               {`${t('remove')} ${snapName}`}
             </Text>
           </Button>
-          {isShowingRemoveWarning && (
-            <SnapRemoveWarning
-              onCancel={() => setIsShowingRemoveWarning(false)}
-              onSubmit={async () => {
-                await dispatch(removeSnap(snap.id));
-              }}
-              snapName={snapName}
-            />
-          )}
+          <SnapRemoveWarning
+            isOpen={isShowingRemoveWarning}
+            onCancel={() => setIsShowingRemoveWarning(false)}
+            onSubmit={async () => {
+              await dispatch(removeSnap(snap.id));
+            }}
+            snapName={snapName}
+          />
         </Box>
       </Box>
     </Box>