From 1c7c89abcb0b54da7e1f8980268f3c95508f37fe Mon Sep 17 00:00:00 2001
From: Dhruv <79097544+dhruvv173@users.noreply.github.com>
Date: Sat, 24 Jun 2023 03:08:40 +0530
Subject: [PATCH] Replacing deprecated constants & creating stories (#19686)

* Replacing deprecated constants & creating stories

* updating snapshot
---
 .../confirm-gas-display.stories.js            | 19 ++++++++++
 .../connected-account-permissions.stories.js  | 25 +++++++++++++
 .../compliance-details.test.js.snap           | 16 ++++-----
 .../compliance-details/compliance-details.js  | 35 +++++++++----------
 .../product-tour-popover.js                   | 14 ++++----
 5 files changed, 76 insertions(+), 33 deletions(-)
 create mode 100644 ui/components/app/confirm-gas-display/confirm-gas-display.stories.js
 create mode 100644 ui/components/app/connected-accounts-permissions/connected-account-permissions.stories.js

diff --git a/ui/components/app/confirm-gas-display/confirm-gas-display.stories.js b/ui/components/app/confirm-gas-display/confirm-gas-display.stories.js
new file mode 100644
index 000000000..a8def4fc4
--- /dev/null
+++ b/ui/components/app/confirm-gas-display/confirm-gas-display.stories.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import ConfirmGasDisplay from './confirm-gas-display';
+
+export default {
+  title: 'Components/App/ConfirmGasDisplay',
+  component: ConfirmGasDisplay,
+  argTypes: {
+    userAcknowledgedGasMissing: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    userAcknowledgedGasMissing: true,
+  },
+};
+
+export const DefaultStory = (args) => <ConfirmGasDisplay {...args} />;
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/components/app/connected-accounts-permissions/connected-account-permissions.stories.js b/ui/components/app/connected-accounts-permissions/connected-account-permissions.stories.js
new file mode 100644
index 000000000..228abcc97
--- /dev/null
+++ b/ui/components/app/connected-accounts-permissions/connected-account-permissions.stories.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import ConnectedAccountsPermissions from './connected-accounts-permissions';
+
+export default {
+  title: 'Components/App/ConnectedAccountsPermissions',
+  component: ConnectedAccountsPermissions,
+  argTypes: {
+    permission: {
+      control: 'array',
+    },
+  },
+  args: {
+    permissions: [
+      { key: 'permission1' },
+      { key: 'permission2' },
+      { key: 'permission3' },
+    ],
+  },
+};
+
+export const DefaultStory = (args) => (
+  <ConnectedAccountsPermissions {...args} />
+);
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/components/institutional/compliance-details/__snapshots__/compliance-details.test.js.snap b/ui/components/institutional/compliance-details/__snapshots__/compliance-details.test.js.snap
index bd4b24a02..36420ca9f 100644
--- a/ui/components/institutional/compliance-details/__snapshots__/compliance-details.test.js.snap
+++ b/ui/components/institutional/compliance-details/__snapshots__/compliance-details.test.js.snap
@@ -3,10 +3,10 @@
 exports[`ComplianceDetails should render correctly 1`] = `
 <div>
   <div
-    class="box compliance-details box--padding-right-4 box--padding-left-4 box--display-flex box--flex-direction-column"
+    class="mm-box compliance-details mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-column"
   >
     <div
-      class="box compliance-details__row box--padding-top-4 box--padding-bottom-4 box--display-flex box--flex-direction-column box--justify-content-center box--height-2/3"
+      class="mm-box compliance-details__row mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--height-2/3"
     >
       <p
         class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
@@ -20,10 +20,10 @@ exports[`ComplianceDetails should render correctly 1`] = `
       </p>
     </div>
     <div
-      class="box compliance-details__row box--padding-top-4 box--padding-bottom-4 box--display-flex box--flex-direction-column box--justify-content-center box--height-2/3"
+      class="mm-box compliance-details__row mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--height-2/3"
     >
       <div
-        class="box box--margin-bottom-1 box--display-flex box--flex-direction-row box--align-items-center box--color-text-alternative"
+        class="mm-box mm-box--margin-bottom-1 mm-box--display-flex mm-box--align-items-center mm-box--color-text-alternative"
       >
         <p
           class="box mm-text mm-text--body-md box--margin-right-2 box--flex-direction-row box--color-text-default"
@@ -57,7 +57,7 @@ exports[`ComplianceDetails should render correctly 1`] = `
         </div>
       </div>
       <div
-        class="box compliance-row__column-risk compliance-row__column-risk--green box--flex-direction-row"
+        class="mm-box compliance-row__column-risk compliance-row__column-risk--green"
       >
         <p
           class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
@@ -67,10 +67,10 @@ exports[`ComplianceDetails should render correctly 1`] = `
       </div>
     </div>
     <div
-      class="box compliance-details__row box--padding-top-4 box--padding-bottom-4 box--display-flex box--flex-direction-column box--justify-content-center box--height-2/3"
+      class="mm-box compliance-details__row mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--height-2/3"
     >
       <div
-        class="box box--display-flex box--flex-direction-row box--align-items-center box--color-text-alternative"
+        class="mm-box mm-box--display-flex mm-box--align-items-center mm-box--color-text-alternative"
       >
         <p
           class="box mm-text mm-text--body-md box--margin-right-2 box--flex-direction-row box--color-text-default"
@@ -108,7 +108,7 @@ exports[`ComplianceDetails should render correctly 1`] = `
       />
     </div>
     <div
-      class="box box--flex-direction-row"
+      class="mm-box"
     >
       <div
         class="swaps-footer"
diff --git a/ui/components/institutional/compliance-details/compliance-details.js b/ui/components/institutional/compliance-details/compliance-details.js
index c195dbd3c..65c98b825 100644
--- a/ui/components/institutional/compliance-details/compliance-details.js
+++ b/ui/components/institutional/compliance-details/compliance-details.js
@@ -11,16 +11,15 @@ import {
   getComplianceTenantSubdomain,
 } from '../../../ducks/institutional/institutional';
 import { formatDate } from '../../../helpers/utils/util';
-import Box from '../../ui/box';
-import { Text } from '../../component-library';
+import { Text, Box } from '../../component-library';
 import {
   TextColor,
   TextVariant,
   JustifyContent,
   AlignItems,
-  BLOCK_SIZES,
-  DISPLAY,
-  FLEX_DIRECTION,
+  BlockSize,
+  Display,
+  FlexDirection,
 } from '../../../helpers/constants/design-system';
 
 const ComplianceDetails = ({ address, onClose, onGenerate }) => {
@@ -50,17 +49,17 @@ const ComplianceDetails = ({ address, onClose, onGenerate }) => {
 
   return (
     <Box
-      display={DISPLAY.FLEX}
-      flexDirection={FLEX_DIRECTION.COLUMN}
+      display={Display.Flex}
+      flexDirection={FlexDirection.Column}
       paddingLeft={4}
       paddingRight={4}
       className="compliance-details"
     >
       <Box
-        display={DISPLAY.FLEX}
-        flexDirection={FLEX_DIRECTION.COLUMN}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
         justifyContent={JustifyContent.center}
-        height={BLOCK_SIZES.TWO_THIRDS}
+        height={BlockSize.TwoThirds}
         paddingTop={4}
         paddingBottom={4}
         className="compliance-details__row"
@@ -69,16 +68,16 @@ const ComplianceDetails = ({ address, onClose, onGenerate }) => {
         <Text variant={TextVariant.bodyXs}>{address}</Text>
       </Box>
       <Box
-        display={DISPLAY.FLEX}
-        flexDirection={FLEX_DIRECTION.COLUMN}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
         justifyContent={JustifyContent.center}
-        height={BLOCK_SIZES.TWO_THIRDS}
+        height={BlockSize.TwoThirds}
         paddingTop={4}
         paddingBottom={4}
         className="compliance-details__row"
       >
         <Box
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           alignItems={AlignItems.center}
           marginBottom={1}
           color={TextColor.textAlternative}
@@ -103,16 +102,16 @@ const ComplianceDetails = ({ address, onClose, onGenerate }) => {
         </Box>
       </Box>
       <Box
-        display={DISPLAY.FLEX}
-        flexDirection={FLEX_DIRECTION.COLUMN}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
         justifyContent={JustifyContent.center}
-        height={BLOCK_SIZES.TWO_THIRDS}
+        height={BlockSize.TwoThirds}
         paddingTop={4}
         paddingBottom={4}
         className="compliance-details__row"
       >
         <Box
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           alignItems={AlignItems.center}
           color={TextColor.textAlternative}
         >
diff --git a/ui/components/multichain/product-tour-popover/product-tour-popover.js b/ui/components/multichain/product-tour-popover/product-tour-popover.js
index aa9361059..d782bc44c 100644
--- a/ui/components/multichain/product-tour-popover/product-tour-popover.js
+++ b/ui/components/multichain/product-tour-popover/product-tour-popover.js
@@ -1,13 +1,12 @@
 import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import Box from '../../ui/box/box';
 import {
   AlignItems,
-  BLOCK_SIZES,
+  BlockSize,
   BorderRadius,
   BackgroundColor,
-  DISPLAY,
+  Display,
   IconColor,
   JustifyContent,
   Size,
@@ -20,6 +19,7 @@ import {
   ButtonIcon,
   IconName,
   Text,
+  Box,
 } from '../../component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { Menu } from '../../ui/menu';
@@ -63,13 +63,13 @@ export const ProductTour = ({
         <Box
           borderWidth={1}
           className="multichain-product-tour-menu__arrow"
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           justifyContent={JustifyContent.center}
           alignItems={AlignItems.center}
           style={{ right: positionObj }}
         />
         <Box
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           alignItems={AlignItems.center}
           className="multichain-product-tour-menu__header"
         >
@@ -86,7 +86,7 @@ export const ProductTour = ({
           <Text
             textAlign={TextAlign.Center}
             variant={TextVariant.headingSm}
-            width={BLOCK_SIZES.FULL}
+            width={BlockSize.Full}
             color={TextColor.infoInverse}
           >
             {title}
@@ -101,7 +101,7 @@ export const ProductTour = ({
           {description}
         </Text>
         <Box
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           alignItems={AlignItems.center}
           justifyContent={JustifyContent.spaceBetween}
         >