fix/BannerBase to TS (#20421)

* BannerBase to TS * snapshot updates * more snapshot updates * addressing type definition error * updating eth-sign-modal snapshot * Updates to stories, types and adding data-testid * Updating snapshots * updating snapshot of blockaid-banner-alert and adding unit test for childrenWrapperProps * BannerBase updates to stories, adding locale for close button, removing static data-testid in favor of using it at the instance, updating snapshots associated with those changes * Removing incorrect arg from storybook file * Updating html element in security provider e2e test to match BannerBase. Also updating snapshot of ConfirmTransaction page * Fixing e2e tests --------- Co-authored-by: georgewrmarshall <[email protected]>
MetaMask · Aug 18, 2023 · 07abc53 · 07abc53
1 parent 885a8ce
commit 07abc53
Show file tree

Hide file tree

Showing 32 changed files with 429 additions and 403 deletions.
diff --git a/test/e2e/swaps/shared.js b/test/e2e/swaps/shared.js
@@ -157,7 +157,7 @@ const checkActivityTransaction = async (driver, options) => {
 
 const checkNotification = async (driver, options) => {
   const boxTitle = await driver.findElement(
-    '[data-testid="mm-banner-base-title"]',
+    '[data-testid="swaps-banner-title"]',
   );
   assert.equal(await boxTitle.getText(), options.title, 'Invalid box title');
   const boxContent = await driver.findElement(

diff --git a/test/e2e/tests/security-provider.spec.js b/test/e2e/tests/security-provider.spec.js
@@ -106,7 +106,7 @@ describe('Transaction security provider', function () {
         );
         const warningHeader = await driver.isElementPresent({
           text: 'This could be a scam',
-          tag: 'h5',
+          tag: 'p',
         });
         assert.equal(warningHeader, true);
       },
@@ -146,7 +146,7 @@ describe('Transaction security provider', function () {
         );
         const warningHeader = await driver.isElementPresent({
           text: 'Request may not be safe',
-          tag: 'h5',
+          tag: 'p',
         });
         assert.equal(warningHeader, true);
       },
@@ -186,7 +186,7 @@ describe('Transaction security provider', function () {
         );
         const warningHeader = await driver.isElementPresent({
           text: 'Request may not be safe',
-          tag: 'h5',
+          tag: 'p',
         });
         assert.equal(warningHeader, false);
       },
@@ -226,7 +226,7 @@ describe('Transaction security provider', function () {
         );
         const warningHeader = await driver.isElementPresent({
           text: 'Request not verified',
-          tag: 'h5',
+          tag: 'p',
         });
         assert.equal(warningHeader, true);
       },

diff --git a/...mponents/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap b/...mponents/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap
@@ -7,7 +7,7 @@ exports[`LedgerInstructionField Component rendering should render properly with
       class="confirm-detail-row"
     >
       <div
-        class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-info box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-primary-muted box--rounded-sm"
+        class="mm-box mm-banner-base mm-banner-alert mm-banner-alert--severity-info mm-box--padding-3 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--background-color-primary-muted mm-box--rounded-sm"
       >
         <span
           class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-primary-default"

diff --git a/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap b/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap
@@ -41,7 +41,7 @@ exports[`Eth Sign Modal should match snapshot 1`] = `
       </a>
     </p>
     <div
-      class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-top-6 box--margin-bottom-6 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
+      class="mm-box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger mm-box--margin-top-6 mm-box--margin-bottom-6 mm-box--padding-3 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--background-color-error-muted mm-box--rounded-sm"
     >
       <span
         class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"

diff --git a/...s/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap b/...s/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap
@@ -102,7 +102,7 @@ exports[`Export PrivateKey Modal should match snapshot 1`] = `
         class="mm-box mm-text mm-text--body-sm mm-box--color-error-default"
       />
       <div
-        class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-top-4 box--margin-right-5 box--margin-left-5 box--padding-1 box--sm:padding-3 box--lg:padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
+        class="mm-box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger mm-box--margin-top-4 mm-box--margin-right-5 mm-box--margin-left-5 mm-box--padding-1 mm-box--sm:padding-3 mm-box--md:padding-0 mm-box--lg:padding-3 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--background-color-error-muted mm-box--rounded-sm"
       >
         <span
           class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"

diff --git a/.../security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap b/.../security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap
@@ -3,19 +3,18 @@
 exports[`Security Provider Banner Alert should match snapshot 1`] = `
 <div>
   <div
-    class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
+    class="mm-box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger mm-box--margin-4 mm-box--padding-3 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--background-color-error-muted mm-box--rounded-sm"
   >
     <span
       class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"
       style="mask-image: url('./images/icons/danger.svg');"
     />
     <div>
-      <h5
-        class="mm-box mm-text mm-banner-base__title mm-text--body-lg-medium mm-box--color-text-default"
-        data-testid="mm-banner-base-title"
+      <p
+        class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
       >
         Malicious third party detected
-      </h5>
+      </p>
       <p
         class="mm-box mm-text mm-text--body-md mm-box--margin-top-2 mm-box--color-text-default"
       >

diff --git a/...vider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap b/...vider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
@@ -2,19 +2,18 @@
 
 exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertResponse.result_type is 'Malicious 1`] = `
 <div
-  class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
+  class="mm-box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger mm-box--margin-4 mm-box--padding-3 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--background-color-error-muted mm-box--rounded-sm"
 >
   <span
     class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"
     style="mask-image: url('./images/icons/danger.svg');"
   />
   <div>
-    <h5
-      class="mm-box mm-text mm-banner-base__title mm-text--body-lg-medium mm-box--color-text-default"
-      data-testid="mm-banner-base-title"
+    <p
+      class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
     >
       This is a deceptive request
-    </h5>
+    </p>
     <p
       class="mm-box mm-text mm-text--body-md mm-box--margin-top-2 mm-box--color-text-default"
     >
@@ -48,19 +47,18 @@ exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertRespo
 
 exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResponse.result_type is 'Failed 1`] = `
 <div
-  class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning box--margin-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-warning-muted box--rounded-sm"
+  class="mm-box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning mm-box--margin-4 mm-box--padding-3 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--background-color-warning-muted mm-box--rounded-sm"
 >
   <span
     class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default"
     style="mask-image: url('./images/icons/danger.svg');"
   />
   <div>
-    <h5
-      class="mm-box mm-text mm-banner-base__title mm-text--body-lg-medium mm-box--color-text-default"
-      data-testid="mm-banner-base-title"
+    <p
+      class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
     >
       This is a deceptive request
-    </h5>
+    </p>
     <p
       class="mm-box mm-text mm-text--body-md mm-box--margin-top-2 mm-box--color-text-default"
     >
@@ -72,19 +70,18 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
 
 exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResponse.result_type is 'Warning 1`] = `
 <div
-  class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning box--margin-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-warning-muted box--rounded-sm"
+  class="mm-box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning mm-box--margin-4 mm-box--padding-3 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--background-color-warning-muted mm-box--rounded-sm"
 >
   <span
     class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default"
     style="mask-image: url('./images/icons/danger.svg');"
   />
   <div>
-    <h5
-      class="mm-box mm-text mm-banner-base__title mm-text--body-lg-medium mm-box--color-text-default"
-      data-testid="mm-banner-base-title"
+    <p
+      class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
     >
       This is a deceptive request
-    </h5>
+    </p>
     <p
       class="mm-box mm-text mm-text--body-md mm-box--margin-top-2 mm-box--color-text-default"
     >
@@ -119,19 +116,18 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
 exports[`Blockaid Banner Alert should render details when provided 1`] = `
 <div>
   <div
-    class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning box--margin-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-warning-muted box--rounded-sm"
+    class="mm-box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning mm-box--margin-4 mm-box--padding-3 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--background-color-warning-muted mm-box--rounded-sm"
   >
     <span
       class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default"
       style="mask-image: url('./images/icons/danger.svg');"
     />
     <div>
-      <h5
-        class="mm-box mm-text mm-banner-base__title mm-text--body-lg-medium mm-box--color-text-default"
-        data-testid="mm-banner-base-title"
+      <p
+        class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
       >
         This is a deceptive request
-      </h5>
+      </p>
       <p
         class="mm-box mm-text mm-text--body-md mm-box--margin-top-2 mm-box--color-text-default"
       >

diff --git a/ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.js.snap b/ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.js.snap
@@ -3,20 +3,19 @@
 exports[`BannerAlert should render BannerAlert element correctly 1`] = `
 <div>
   <div
-    class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-info box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-primary-muted box--rounded-sm"
+    class="mm-box mm-banner-base mm-banner-alert mm-banner-alert--severity-info mm-box--padding-3 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--background-color-primary-muted mm-box--rounded-sm"
     data-testid="bannerAlert"
   >
     <span
       class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-primary-default"
       style="mask-image: url('./images/icons/info.svg');"
     />
     <div>
-      <h5
-        class="mm-box mm-text mm-banner-base__title mm-text--body-lg-medium mm-box--color-text-default"
-        data-testid="mm-banner-base-title"
+      <p
+        class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
       >
         BannerAlert test
-      </h5>
+      </p>
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
       >

diff --git a/ui/components/component-library/banner-alert/banner-alert.test.js b/ui/components/component-library/banner-alert/banner-alert.test.js
@@ -75,9 +75,7 @@ describe('BannerAlert', () => {
     const { getByText } = render(
       <BannerAlert title="BannerAlert title test" />,
     );
-    expect(getByText('BannerAlert title test')).toHaveClass(
-      'mm-banner-base__title',
-    );
+    expect(getByText('BannerAlert title test')).toBeDefined();
   });
 
   it('should render BannerAlert description', () => {

diff --git a/ui/components/component-library/banner-base/README.mdx b/ui/components/component-library/banner-base/README.mdx
@@ -7,21 +7,19 @@ import { BannerBase } from './banner-base';
 
 `BannerBase` serves as a base for all banner variants. It contains standard props such as information and related actions.
 
-<Canvas style={{ background: 'var(--color-background-alternative)' }}>
+<Canvas>
   <Story id="components-componentlibrary-bannerbase--default-story" />
 </Canvas>
 
 ## Props
 
-The `BannerBase` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
-
 <ArgsTable of={BannerBase} />
 
 ### Title
 
 Use the `title` prop to pass a string that is sentence case no period. Use the `titleProps` prop to pass additional props to the `Text` component.
 
-<Canvas style={{ background: 'var(--color-background-alternative)' }}>
+<Canvas>
   <Story id="components-componentlibrary-bannerbase--title" />
 </Canvas>
 
@@ -39,7 +37,7 @@ The `description` is the content area of the `BannerBase` that must be a string.
 
 If content requires more than a string, see `children` prop below.
 
-<Canvas style={{ background: 'var(--color-background-alternative)' }}>
+<Canvas>
   <Story id="components-componentlibrary-bannerbase--description" />
 </Canvas>
 
@@ -56,7 +54,7 @@ import { BannerBase } from '../../component-library';
 
 The `children` prop is an alternative to `description` for `BannerBase` when more than a string is needed. Children content shouldn't repeat title and only 1-3 lines.
 
-<Canvas style={{ background: 'var(--color-background-alternative)' }}>
+<Canvas>
   <Story id="components-componentlibrary-bannerbase--children" />
 </Canvas>
 
@@ -76,7 +74,7 @@ import { BannerBase } from '../../component-library';
 
 Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pass an onClick handler, and `actionButtonProps` prop to pass an object of [ButtonLink props](/docs/components-componentlibrary-buttonlink--default-story) for the action
 
-<Canvas style={{ background: 'var(--color-background-alternative)' }}>
+<Canvas>
   <Story id="components-componentlibrary-bannerbase--action-button" />
 </Canvas>
 
@@ -103,7 +101,7 @@ Use the `onClose` prop to pass a function to the close button. The close button
 
 Additional props can be passed to the close button with `closeButtonProps`
 
-<Canvas style={{ background: 'var(--color-background-alternative)' }}>
+<Canvas>
   <Story id="components-componentlibrary-bannerbase--on-close" />
 </Canvas>
 
@@ -122,7 +120,7 @@ import { BannerBase } from '../../component-library';
 
 Use the `startAccessory` prop to add components such as icons or fox image to the start (default: left) of the `BannerBase` content
 
-<Canvas style={{ background: 'var(--color-background-alternative)' }}>
+<Canvas>
   <Story id="components-componentlibrary-bannerbase--start-accessory" />
 </Canvas>
 

diff --git a/ui/components/component-library/banner-base/__snapshots__/banner-base.test.js.snap b/ui/components/component-library/banner-base/__snapshots__/banner-base.test.js.snap
diff --git a/ui/components/component-library/banner-base/__snapshots__/banner-base.test.tsx.snap b/ui/components/component-library/banner-base/__snapshots__/banner-base.test.tsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BannerBase should render BannerBase element correctly 1`] = `
+<div>
+  <div
+    class="mm-box mm-banner-base mm-box--padding-3 mm-box--display-flex mm-box--gap-2 mm-box--background-color-background-default mm-box--rounded-sm"
+    data-testid="banner-base"
+  >
+    <div>
+      <p
+        class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
+      >
+        BannerBase test
+      </p>
+      <p
+        class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
+      >
+        should render BannerBase element correctly
+      </p>
+    </div>
+  </div>
+</div>
+`;