replacing deprecated components and consts (#19563)

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>

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

ui/components/app/snaps/snap-remove-warning/index.scss

@@ -1,12 +0,0 @@
-.snap-remove-warning {
-  color: var(--color-text-default);
-
-  &__footer-button {
-    height: 40px;
-    margin-inline-end: 24px;
-
-    &:last-of-type {
-      margin-inline-end: 0;
-    }
-  }
-}

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 {
-import { TypographyVariant } from '../../../../helpers/constants/design-system';
+  Text,
-import Box from '../../../ui/box/box';
+  Box,
-import Popover from '../../../ui/popover';
+  Button,
-import Button from '../../../ui/button';
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  BUTTON_VARIANT,
+  BUTTON_SIZES,
+} from '../../../component-library';
 
-export default function SnapRemoveWarning({ onCancel, onSubmit, snapName }) {
+import {
+  BlockSize,
+  Display,
+  FlexDirection,
+} from '../../../../helpers/constants/design-system';
+
+export default function SnapRemoveWarning({
+  isOpen,
+  onCancel,
+  onSubmit,
+  snapName,
+}) {
   const t = useI18nContext();
-
-  const SnapRemoveWarningFooter = () => {
   return (
-      <>
+    <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
-          className="snap-remove-warning__footer-button"
+            block
-          type="default"
+            variant={BUTTON_VARIANT.SECONDARY}
+            size={BUTTON_SIZES.LG}
             onClick={onCancel}
           >
             {t('nevermind')}
           </Button>
           <Button
+            block
+            size={BUTTON_SIZES.LG}
             id="popoverRemoveSnapButton"
-          className="snap-remove-warning__footer-button"
+            danger
-          type="danger-primary"
             onClick={onSubmit}
           >
             {t('removeSnap')}
           </Button>
-      </>
-    );
-  };
-
-  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>
+      </ModalContent>
+    </Modal>
   );
 }
 
@@ -62,4 +75,8 @@ SnapRemoveWarning.propTypes = {
    * Name of snap
    */
   snapName: PropTypes.string,
+  /**
+   * Whether the modal is open
+   */
+  isOpen: PropTypes.bool,
 };

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

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,
+  TextVariant,
-  OVERFLOW_WRAP,
+  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}
   />
 );
 

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

ui/pages/settings/snaps/view-snap/view-snap.js

@@ -189,15 +189,14 @@ function ViewSnap() {
               {`${t('remove')} ${snapName}`}
             </Text>
           </Button>
-          {isShowingRemoveWarning && (
           <SnapRemoveWarning
+            isOpen={isShowingRemoveWarning}
             onCancel={() => setIsShowingRemoveWarning(false)}
             onSubmit={async () => {
               await dispatch(removeSnap(snap.id));
             }}
             snapName={snapName}
           />
-          )}
         </Box>
       </Box>
     </Box>