From 4495eab4a23df0a3d130658311bde7ff841401ce Mon Sep 17 00:00:00 2001
From: Dhruv Parmar <dhruvv173@gmail.com>
Date: Mon, 7 Aug 2023 19:45:41 +0530
Subject: [PATCH 01/12] BannerBase to TS

---
 .../component-library/banner-base/README.mdx  |   2 +-
 ...test.js.snap => banner-base.test.tsx.snap} |   2 +-
 .../banner-base/banner-base.js                | 141 ------------------
 ...ase.stories.js => banner-base.stories.tsx} |  29 ++--
 ...nner-base.test.js => banner-base.test.tsx} |   0
 .../banner-base/banner-base.tsx               |  97 ++++++++++++
 .../banner-base/banner-base.types.ts          |  65 ++++++++
 .../component-library/banner-base/index.js    |   1 -
 .../component-library/banner-base/index.ts    |   2 +
 9 files changed, 184 insertions(+), 155 deletions(-)
 rename ui/components/component-library/banner-base/__snapshots__/{banner-base.test.js.snap => banner-base.test.tsx.snap} (78%)
 delete mode 100644 ui/components/component-library/banner-base/banner-base.js
 rename ui/components/component-library/banner-base/{banner-base.stories.js => banner-base.stories.tsx} (84%)
 rename ui/components/component-library/banner-base/{banner-base.test.js => banner-base.test.tsx} (100%)
 create mode 100644 ui/components/component-library/banner-base/banner-base.tsx
 create mode 100644 ui/components/component-library/banner-base/banner-base.types.ts
 delete mode 100644 ui/components/component-library/banner-base/index.js
 create mode 100644 ui/components/component-library/banner-base/index.ts

diff --git a/ui/components/component-library/banner-base/README.mdx b/ui/components/component-library/banner-base/README.mdx
index a6711ee9737f..4d0d9d416354 100644
--- a/ui/components/component-library/banner-base/README.mdx
+++ b/ui/components/component-library/banner-base/README.mdx
@@ -13,7 +13,7 @@ import { BannerBase } from './banner-base';
 
 ## Props
 
-The `BannerBase` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
+The `BannerBase` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
 
 <ArgsTable of={BannerBase} />
 
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.tsx.snap
similarity index 78%
rename from ui/components/component-library/banner-base/__snapshots__/banner-base.test.js.snap
rename to ui/components/component-library/banner-base/__snapshots__/banner-base.test.tsx.snap
index d155bd2c9fad..89961a0ba5fb 100644
--- a/ui/components/component-library/banner-base/__snapshots__/banner-base.test.js.snap
+++ b/ui/components/component-library/banner-base/__snapshots__/banner-base.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`BannerBase should render bannerbase element correctly 1`] = `
 <div>
   <div
-    class="box mm-banner-base box--padding-3 box--display-flex box--gap-2 box--flex-direction-row box--background-color-background-default box--rounded-sm"
+    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>
diff --git a/ui/components/component-library/banner-base/banner-base.js b/ui/components/component-library/banner-base/banner-base.js
deleted file mode 100644
index fc861c1e5f9f..000000000000
--- a/ui/components/component-library/banner-base/banner-base.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-
-import {
-  BackgroundColor,
-  BorderRadius,
-  Display,
-  Size,
-  TextVariant,
-} from '../../../helpers/constants/design-system';
-
-import Box from '../../ui/box';
-
-import { ButtonLink, IconName, ButtonIcon, Text } from '..';
-
-export const BannerBase = ({
-  className,
-  title,
-  titleProps,
-  description,
-  descriptionProps,
-  children,
-  actionButtonLabel,
-  actionButtonOnClick,
-  actionButtonProps,
-  startAccessory,
-  onClose,
-  closeButtonProps,
-  ...props
-}) => {
-  return (
-    <Box
-      className={classnames('mm-banner-base', className)}
-      display={Display.Flex}
-      gap={2}
-      backgroundColor={BackgroundColor.backgroundDefault}
-      borderRadius={BorderRadius.SM}
-      padding={3}
-      {...props}
-    >
-      {startAccessory && <>{startAccessory}</>}
-
-      <div>
-        {title && (
-          <Text
-            className="mm-banner-base__title"
-            variant={TextVariant.bodyLgMedium}
-            data-testid="mm-banner-base-title"
-            as="h5"
-            {...titleProps}
-          >
-            {title}
-          </Text>
-        )}
-        {description && <Text {...descriptionProps}>{description}</Text>}
-        {children && typeof children === 'object' ? (
-          children
-        ) : (
-          <Text>{children}</Text>
-        )}
-        {actionButtonLabel && (
-          <ButtonLink
-            size={Size.auto}
-            onClick={actionButtonOnClick}
-            {...actionButtonProps}
-          >
-            {actionButtonLabel}
-          </ButtonLink>
-        )}
-      </div>
-      {onClose && (
-        <ButtonIcon
-          className="mm-banner-base__close-button"
-          marginLeft="auto"
-          iconName={IconName.Close}
-          size={Size.SM}
-          ariaLabel="Close" // TODO: i18n
-          onClick={onClose}
-          {...closeButtonProps}
-        />
-      )}
-    </Box>
-  );
-};
-
-BannerBase.propTypes = {
-  /**
-   * The title of the BannerBase
-   */
-  title: PropTypes.string,
-  /**
-   * Additional props to pass to the `Text` component used for the `title` text
-   */
-  titleProps: PropTypes.object,
-  /**
-   * The description is the content area below BannerBase title
-   */
-  description: PropTypes.string,
-  /**
-   * Additional props to pass to the `Text` component used for the `description` text
-   */
-  descriptionProps: PropTypes.object,
-  /**
-   * The children is an alternative to using the description prop for BannerBase content below the title
-   */
-  children: PropTypes.node,
-  /**
-   * Label for action button (ButtonLink) of the BannerBase below the children
-   */
-  actionButtonLabel: PropTypes.string,
-  /**
-   * Props for action button (ButtonLink) of the BannerBase below the children
-   */
-  actionButtonProps: PropTypes.object,
-  /**
-   * The onClick handler for the action button (ButtonLink)
-   */
-  actionButtonOnClick: PropTypes.func,
-  /**
-   * The start(defualt left) content area of BannerBase
-   */
-  startAccessory: PropTypes.node,
-  /**
-   * The onClick handler for the close button
-   * When passed this will allow for the close button to show
-   */
-  onClose: PropTypes.func,
-  /**
-   * The props to pass to the close button
-   */
-  closeButtonProps: PropTypes.object,
-  /**
-   * An additional className to apply to the BannerBase
-   */
-  className: PropTypes.string,
-  /**
-   * BannerBase accepts all the props from Box
-   */
-  ...Box.propTypes,
-};
diff --git a/ui/components/component-library/banner-base/banner-base.stories.js b/ui/components/component-library/banner-base/banner-base.stories.tsx
similarity index 84%
rename from ui/components/component-library/banner-base/banner-base.stories.js
rename to ui/components/component-library/banner-base/banner-base.stories.tsx
index a964c80e802d..9ad24d4f7f93 100644
--- a/ui/components/component-library/banner-base/banner-base.stories.js
+++ b/ui/components/component-library/banner-base/banner-base.stories.tsx
@@ -1,7 +1,14 @@
 import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
 import { useState } from '@storybook/addons';
-import { Size } from '../../../helpers/constants/design-system';
-import { ButtonLink, ButtonPrimary, Icon, IconName, IconSize } from '..';
+import {
+  ButtonLink,
+  ButtonLinkSize,
+  ButtonPrimary,
+  Icon,
+  IconName,
+  IconSize,
+} from '..';
 import { BannerBase } from './banner-base';
 import README from './README.mdx';
 
@@ -84,9 +91,9 @@ export default {
       table: { category: 'box props' },
     },
   },
-};
+} as Meta<typeof BannerBase>;
 
-export const DefaultStory = (args) => {
+export const DefaultStory: StoryFn<typeof BannerBase> = (args) => {
   const onClose = () => console.log('BannerBase onClose trigger');
   return <BannerBase {...args} onClose={onClose} />;
 };
@@ -100,7 +107,7 @@ DefaultStory.args = {
 
 DefaultStory.storyName = 'Default';
 
-export const Title = (args) => {
+export const Title: StoryFn<typeof BannerBase> = (args) => {
   return <BannerBase {...args} />;
 };
 
@@ -109,7 +116,7 @@ Title.args = {
   children: 'Pass only a string through the title prop',
 };
 
-export const Description = (args) => {
+export const Description: StoryFn<typeof BannerBase> = (args) => {
   return <BannerBase {...args} />;
 };
 
@@ -119,12 +126,12 @@ Description.args = {
     'Pass only a string through the description prop or you can use children if the contents require more',
 };
 
-export const Children = (args) => {
+export const Children: StoryFn<typeof BannerBase> = (args) => {
   return (
     <BannerBase {...args}>
       {`Description shouldn't repeat title. 1-3 lines. Can contain a `}
       <ButtonLink
-        size={Size.inherit}
+        size={ButtonLinkSize.Inherit}
         href="https://metamask.io/"
         target="_blank"
       >
@@ -134,7 +141,7 @@ export const Children = (args) => {
   );
 };
 
-export const ActionButton = (args) => {
+export const ActionButton: StoryFn<typeof BannerBase> = (args) => {
   return <BannerBase {...args} />;
 };
 
@@ -149,7 +156,7 @@ ActionButton.args = {
     'Use actionButtonLabel for action text, actionButtonOnClick for the onClick handler, and actionButtonProps to pass any ButtonLink prop types such as iconName',
 };
 
-export const OnClose = (args) => {
+export const OnClose: StoryFn<typeof BannerBase> = (args) => {
   const [isShown, setShown] = useState(true);
   const bannerToggle = () => {
     if (isShown) {
@@ -173,7 +180,7 @@ OnClose.args = {
   children: 'Click the close button icon to hide this notifcation',
 };
 
-export const StartAccessory = (args) => {
+export const StartAccessory: StoryFn<typeof BannerBase> = (args) => {
   return <BannerBase {...args} />;
 };
 
diff --git a/ui/components/component-library/banner-base/banner-base.test.js b/ui/components/component-library/banner-base/banner-base.test.tsx
similarity index 100%
rename from ui/components/component-library/banner-base/banner-base.test.js
rename to ui/components/component-library/banner-base/banner-base.test.tsx
diff --git a/ui/components/component-library/banner-base/banner-base.tsx b/ui/components/component-library/banner-base/banner-base.tsx
new file mode 100644
index 000000000000..cd04a40f3cb4
--- /dev/null
+++ b/ui/components/component-library/banner-base/banner-base.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import {
+  BackgroundColor,
+  BorderRadius,
+  Display,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
+
+import {
+  ButtonLink,
+  IconName,
+  ButtonIcon,
+  Text,
+  Box,
+  ButtonLinkSize,
+  ButtonIconSize,
+} from '..';
+import { BoxProps, PolymorphicRef } from '../box';
+import { BannerBaseComponent, BannerBaseProps } from './banner-base.types';
+
+export const BannerBase: BannerBaseComponent = React.forwardRef(
+  <C extends React.ElementType = 'div'>(
+    {
+      className = '',
+      title,
+      titleProps,
+      description,
+      descriptionProps,
+      children,
+      actionButtonLabel,
+      actionButtonOnClick,
+      actionButtonProps,
+      startAccessory,
+      onClose,
+      closeButtonProps,
+      ...props
+    }: BannerBaseProps<C>,
+    ref?: PolymorphicRef<C>,
+  ) => {
+    return (
+      <Box
+        className={classnames('mm-banner-base', className)}
+        ref={ref}
+        display={Display.Flex}
+        gap={2}
+        backgroundColor={BackgroundColor.backgroundDefault}
+        borderRadius={BorderRadius.SM}
+        padding={3}
+        {...(props as BoxProps<C>)}
+      >
+        {startAccessory && <>{startAccessory}</>}
+
+        <div>
+          {title && (
+            <Text
+              className="mm-banner-base__title"
+              variant={TextVariant.bodyLgMedium}
+              data-testid="mm-banner-base-title"
+              as="h5"
+              {...titleProps}
+            >
+              {title}
+            </Text>
+          )}
+          {description && <Text {...descriptionProps}>{description}</Text>}
+          {children && typeof children === 'object' ? (
+            children
+          ) : (
+            <Text>{children}</Text>
+          )}
+          {actionButtonLabel && (
+            <ButtonLink
+              size={ButtonLinkSize.Auto}
+              onClick={actionButtonOnClick}
+              {...actionButtonProps}
+            >
+              {actionButtonLabel}
+            </ButtonLink>
+          )}
+        </div>
+        {onClose && (
+          <ButtonIcon
+            className="mm-banner-base__close-button"
+            marginLeft="auto"
+            iconName={IconName.Close}
+            size={ButtonIconSize.Sm}
+            ariaLabel="Close" // TODO: i18n
+            onClick={onClose}
+            {...closeButtonProps}
+          />
+        )}
+      </Box>
+    );
+  },
+);
diff --git a/ui/components/component-library/banner-base/banner-base.types.ts b/ui/components/component-library/banner-base/banner-base.types.ts
new file mode 100644
index 000000000000..54bd93eeb58a
--- /dev/null
+++ b/ui/components/component-library/banner-base/banner-base.types.ts
@@ -0,0 +1,65 @@
+import React from 'react';
+
+import type {
+  PolymorphicComponentPropWithRef,
+  StyleUtilityProps,
+} from '../box';
+
+export interface BannerBaseStyleUtilityProps extends StyleUtilityProps {
+  /**
+   * The title of the BannerBase
+   */
+  title?: string;
+  /**
+   * Additional props to pass to the `Text` component used for the `title` text
+   */
+  titleProps?: any;
+  /**
+   * The description is the content area below BannerBase title
+   */
+  description?: string;
+  /**
+   * Additional props to pass to the `Text` component used for the `description` text
+   */
+  descriptionProps?: any;
+  /**
+   * The children is an alternative to using the description prop for BannerBase content below the title
+   */
+  children?: React.ReactNode;
+  /**
+   * Label for action button (ButtonLink) of the BannerBase below the children
+   */
+  actionButtonLabel?: string;
+  /**
+   * Props for action button (ButtonLink) of the BannerBase below the children
+   */
+  actionButtonProps?: any;
+  /**
+   * The onClick handler for the action button (ButtonLink)
+   */
+  actionButtonOnClick?: () => void;
+  /**
+   * The start(defualt left) content area of BannerBase
+   */
+  startAccessory?: React.ReactNode;
+  /**
+   * The onClick handler for the close button
+   * When passed this will allow for the close button to show
+   */
+  onClose?: () => void;
+  /**
+   * The props to pass to the close button
+   */
+  closeButtonProps?: any;
+  /**
+   * An additional className to apply to the BannerBase
+   */
+  className?: string;
+}
+
+export type BannerBaseProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, BannerBaseStyleUtilityProps>;
+
+export type BannerBaseComponent = <C extends React.ElementType = 'div'>(
+  props: BannerBaseProps<C>,
+) => React.ElementType | null;
diff --git a/ui/components/component-library/banner-base/index.js b/ui/components/component-library/banner-base/index.js
deleted file mode 100644
index e286559ae82b..000000000000
--- a/ui/components/component-library/banner-base/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { BannerBase } from './banner-base';
diff --git a/ui/components/component-library/banner-base/index.ts b/ui/components/component-library/banner-base/index.ts
new file mode 100644
index 000000000000..4989b34ea6cc
--- /dev/null
+++ b/ui/components/component-library/banner-base/index.ts
@@ -0,0 +1,2 @@
+export { BannerBase } from './banner-base';
+export type { BannerBaseProps } from './banner-base.types';

From 5a56d404d05108703bed7c4280e25d105087fafc Mon Sep 17 00:00:00 2001
From: Dhruv Parmar <dhruvv173@gmail.com>
Date: Mon, 7 Aug 2023 23:16:31 +0530
Subject: [PATCH 02/12] snapshot updates

---
 .../__snapshots__/ledger-instruction-field.test.js.snap         | 2 +-
 .../__snapshots__/confirm-send-ether.test.js.snap               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap b/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap
index b1dad7808a88..046b5f148a47 100644
--- a/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap
+++ b/ui/components/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/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
index c889ab29635e..0d67aa76f0c7 100644
--- a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
+++ b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
@@ -315,7 +315,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
           class="transaction-alerts"
         >
           <div
-            class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning 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--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"

From d2ff9fef00b2ae6037a8979dd615ab198bd5de9f Mon Sep 17 00:00:00 2001
From: Dhruv Parmar <dhruvv173@gmail.com>
Date: Mon, 7 Aug 2023 23:33:18 +0530
Subject: [PATCH 03/12] more snapshot updates

---
 .../__snapshots__/export-private-key-modal.test.js.snap     | 2 +-
 .../security-provider-banner-alert.test.js.snap             | 2 +-
 .../__snapshots__/blockaid-banner-alert.test.js.snap        | 6 +++---
 .../banner-alert/__snapshots__/banner-alert.test.js.snap    | 2 +-
 .../banner-tip/__snapshots__/banner-tip.test.js.snap        | 2 +-
 .../__snapshots__/detected-token-banner.test.js.snap        | 2 +-
 ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap   | 2 +-
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/ui/components/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap b/ui/components/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap
index ccb37176bdb3..81a320534c4d 100644
--- a/ui/components/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap
+++ b/ui/components/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/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap b/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap
index 7cf86eeb7a10..650b02b691f6 100644
--- a/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap
+++ b/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap
@@ -3,7 +3,7 @@
 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"
diff --git a/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap b/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
index 2cb475b3ca48..910856030093 100644
--- a/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
+++ b/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
@@ -2,7 +2,7 @@
 
 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"
@@ -48,7 +48,7 @@ exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertRespo
 
 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"
@@ -95,7 +95,7 @@ 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"
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
index 28da219ef795..6f938c11901d 100644
--- 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,7 +3,7 @@
 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
diff --git a/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap b/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap
index 8658c76c7a12..9581b9f2ddc7 100644
--- a/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap
+++ b/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap
@@ -3,7 +3,7 @@
 exports[`BannerTip should render BannerTip element correctly 1`] = `
 <div>
   <div
-    class="box mm-banner-base mm-banner-tip box--padding-3 box--display-flex box--gap-2 box--flex-direction-row box--background-color-background-default box--rounded-sm box--border-color-border-default box--border-style-solid box--border-width-1"
+    class="mm-box mm-banner-base mm-banner-tip mm-box--padding-3 mm-box--display-flex mm-box--gap-2 mm-box--background-color-background-default mm-box--rounded-sm mm-box--border-color-border-default box--border-style-solid box--border-width-1"
     data-testid="bannerTip"
   >
     <div
diff --git a/ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap b/ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap
index d07c02c5e2bb..014cd0d77b3c 100644
--- a/ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap
+++ b/ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap
@@ -3,7 +3,7 @@
 exports[`DetectedTokensBanner should render correctly 1`] = `
 <div>
   <div
-    class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-info multichain-detected-token-banner 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 multichain-detected-token-banner 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="detected-token-banner"
   >
     <span
diff --git a/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap b/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
index 6b07b925468d..fc869ffcef79 100644
--- a/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
+++ b/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
@@ -54,7 +54,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
       </span>
     </p>
     <div
-      class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger 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--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"

From ed4295e99e3b714c128b8a9b748847109b52150f Mon Sep 17 00:00:00 2001
From: Dhruv Parmar <dhruvv173@gmail.com>
Date: Mon, 7 Aug 2023 23:37:20 +0530
Subject: [PATCH 04/12] addressing type definition error

---
 .../component-library/banner-base/banner-base.types.ts          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/components/component-library/banner-base/banner-base.types.ts b/ui/components/component-library/banner-base/banner-base.types.ts
index 54bd93eeb58a..404958713bb8 100644
--- a/ui/components/component-library/banner-base/banner-base.types.ts
+++ b/ui/components/component-library/banner-base/banner-base.types.ts
@@ -62,4 +62,4 @@ export type BannerBaseProps<C extends React.ElementType> =
 
 export type BannerBaseComponent = <C extends React.ElementType = 'div'>(
   props: BannerBaseProps<C>,
-) => React.ElementType | null;
+) => React.ReactElement | null;

From 160fb7d94cd0567a275ab7dd1e53165a808c3867 Mon Sep 17 00:00:00 2001
From: Dhruv Parmar <dhruvv173@gmail.com>
Date: Tue, 8 Aug 2023 08:21:34 +0530
Subject: [PATCH 05/12] updating eth-sign-modal snapshot

---
 .../eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 8d33fd6acad9..15ec6ad35b0f 100644
--- 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"

From 9c5e21424028a194bdf85137180592d96861749f Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Mon, 14 Aug 2023 19:47:00 -0700
Subject: [PATCH 06/12] Updates to stories, types and adding data-testid

---
 .../component-library/banner-base/README.mdx  | 16 ++---
 .../banner-base/banner-base.stories.tsx       | 65 +++----------------
 .../banner-base/banner-base.tsx               |  4 +-
 .../banner-base/banner-base.types.ts          | 28 ++++++--
 .../component-library/box/box.types.ts        |  6 ++
 5 files changed, 47 insertions(+), 72 deletions(-)

diff --git a/ui/components/component-library/banner-base/README.mdx b/ui/components/component-library/banner-base/README.mdx
index 4d0d9d416354..ca427b96275c 100644
--- 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-componentlibrary-box--docs#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/banner-base.stories.tsx b/ui/components/component-library/banner-base/banner-base.stories.tsx
index 9ad24d4f7f93..0fcc13402c36 100644
--- a/ui/components/component-library/banner-base/banner-base.stories.tsx
+++ b/ui/components/component-library/banner-base/banner-base.stories.tsx
@@ -12,24 +12,6 @@ import {
 import { BannerBase } from './banner-base';
 import README from './README.mdx';
 
-const marginSizeControlOptions = [
-  undefined,
-  0,
-  1,
-  2,
-  3,
-  4,
-  5,
-  6,
-  7,
-  8,
-  9,
-  10,
-  11,
-  12,
-  'auto',
-];
-
 export default {
   title: 'Components/ComponentLibrary/BannerBase',
   component: BannerBase,
@@ -37,7 +19,6 @@ export default {
     docs: {
       page: README,
     },
-    backgrounds: { default: 'alternative' },
   },
   argTypes: {
     className: {
@@ -53,13 +34,13 @@ export default {
       control: 'text',
     },
     action: {
-      control: 'func',
+      action: 'action',
     },
     actionButtonLabel: {
       control: 'text',
     },
     actionButtonOnClick: {
-      control: 'func',
+      action: 'actionButtonOnClick',
     },
     actionButtonProps: {
       control: 'object',
@@ -70,34 +51,16 @@ export default {
     onClose: {
       action: 'onClose',
     },
-    marginTop: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-    marginRight: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-    marginBottom: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-    marginLeft: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
   },
 } as Meta<typeof BannerBase>;
 
-export const DefaultStory: StoryFn<typeof BannerBase> = (args) => {
+export const Template: StoryFn<typeof BannerBase> = (args) => {
   const onClose = () => console.log('BannerBase onClose trigger');
   return <BannerBase {...args} onClose={onClose} />;
 };
 
+export const DefaultStory = Template.bind({});
+
 DefaultStory.args = {
   title: 'Title is sentence case no period',
   children: "Description shouldn't repeat title. 1-3 lines.",
@@ -107,18 +70,14 @@ DefaultStory.args = {
 
 DefaultStory.storyName = 'Default';
 
-export const Title: StoryFn<typeof BannerBase> = (args) => {
-  return <BannerBase {...args} />;
-};
+export const Title = Template.bind({});
 
 Title.args = {
   title: 'Title is sentence case no period',
   children: 'Pass only a string through the title prop',
 };
 
-export const Description: StoryFn<typeof BannerBase> = (args) => {
-  return <BannerBase {...args} />;
-};
+export const Description = Template.bind({});
 
 Description.args = {
   title: 'Description vs children',
@@ -133,7 +92,7 @@ export const Children: StoryFn<typeof BannerBase> = (args) => {
       <ButtonLink
         size={ButtonLinkSize.Inherit}
         href="https://metamask.io/"
-        target="_blank"
+        externalLink
       >
         hyperlink.
       </ButtonLink>
@@ -141,9 +100,7 @@ export const Children: StoryFn<typeof BannerBase> = (args) => {
   );
 };
 
-export const ActionButton: StoryFn<typeof BannerBase> = (args) => {
-  return <BannerBase {...args} />;
-};
+export const ActionButton = Template.bind({});
 
 ActionButton.args = {
   title: 'Action prop demo',
@@ -180,9 +137,7 @@ OnClose.args = {
   children: 'Click the close button icon to hide this notifcation',
 };
 
-export const StartAccessory: StoryFn<typeof BannerBase> = (args) => {
-  return <BannerBase {...args} />;
-};
+export const StartAccessory = Template.bind({});
 
 StartAccessory.args = {
   title: 'Start accessory demo',
diff --git a/ui/components/component-library/banner-base/banner-base.tsx b/ui/components/component-library/banner-base/banner-base.tsx
index cd04a40f3cb4..d6eef36d3334 100644
--- a/ui/components/component-library/banner-base/banner-base.tsx
+++ b/ui/components/component-library/banner-base/banner-base.tsx
@@ -29,6 +29,7 @@ export const BannerBase: BannerBaseComponent = React.forwardRef(
       description,
       descriptionProps,
       children,
+      childrenWrapperProps,
       actionButtonLabel,
       actionButtonOnClick,
       actionButtonProps,
@@ -58,7 +59,6 @@ export const BannerBase: BannerBaseComponent = React.forwardRef(
               className="mm-banner-base__title"
               variant={TextVariant.bodyLgMedium}
               data-testid="mm-banner-base-title"
-              as="h5"
               {...titleProps}
             >
               {title}
@@ -68,7 +68,7 @@ export const BannerBase: BannerBaseComponent = React.forwardRef(
           {children && typeof children === 'object' ? (
             children
           ) : (
-            <Text>{children}</Text>
+            <Text {...childrenWrapperProps}>{children}</Text>
           )}
           {actionButtonLabel && (
             <ButtonLink
diff --git a/ui/components/component-library/banner-base/banner-base.types.ts b/ui/components/component-library/banner-base/banner-base.types.ts
index 404958713bb8..8ed90d71f77c 100644
--- a/ui/components/component-library/banner-base/banner-base.types.ts
+++ b/ui/components/component-library/banner-base/banner-base.types.ts
@@ -5,6 +5,18 @@ import type {
   StyleUtilityProps,
 } from '../box';
 
+import type { TextProps } from '../text';
+import type { ButtonLinkProps } from '../button-link';
+import type { ButtonIconProps } from '../button-icon';
+
+/**
+ * Makes all props optional so that if a prop object is used not ALL required props need to be passed
+ * TODO: Move to appropriate place in app as this will be highly reusable
+ */
+type MakePropsOptional<T> = {
+  [K in keyof T]?: T[K];
+};
+
 export interface BannerBaseStyleUtilityProps extends StyleUtilityProps {
   /**
    * The title of the BannerBase
@@ -13,7 +25,7 @@ export interface BannerBaseStyleUtilityProps extends StyleUtilityProps {
   /**
    * Additional props to pass to the `Text` component used for the `title` text
    */
-  titleProps?: any;
+  titleProps?: MakePropsOptional<TextProps<'p'>>;
   /**
    * The description is the content area below BannerBase title
    */
@@ -21,11 +33,15 @@ export interface BannerBaseStyleUtilityProps extends StyleUtilityProps {
   /**
    * Additional props to pass to the `Text` component used for the `description` text
    */
-  descriptionProps?: any;
+  descriptionProps?: MakePropsOptional<TextProps<'p'>>;
   /**
    * The children is an alternative to using the description prop for BannerBase content below the title
    */
   children?: React.ReactNode;
+  /**
+   * Additional props to pass to the `Text` component used to wrap the `children` if `children` is type `string`
+   */
+  childrenWrapperProps?: MakePropsOptional<TextProps<'p'>>;
   /**
    * Label for action button (ButtonLink) of the BannerBase below the children
    */
@@ -33,13 +49,13 @@ export interface BannerBaseStyleUtilityProps extends StyleUtilityProps {
   /**
    * Props for action button (ButtonLink) of the BannerBase below the children
    */
-  actionButtonProps?: any;
+  actionButtonProps?: MakePropsOptional<ButtonLinkProps<'button'>>;
   /**
    * The onClick handler for the action button (ButtonLink)
    */
-  actionButtonOnClick?: () => void;
+  actionButtonOnClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /**
-   * The start(defualt left) content area of BannerBase
+   * The start(default left) content area of BannerBase
    */
   startAccessory?: React.ReactNode;
   /**
@@ -50,7 +66,7 @@ export interface BannerBaseStyleUtilityProps extends StyleUtilityProps {
   /**
    * The props to pass to the close button
    */
-  closeButtonProps?: any;
+  closeButtonProps?: MakePropsOptional<ButtonIconProps<'button'>>;
   /**
    * An additional className to apply to the BannerBase
    */
diff --git a/ui/components/component-library/box/box.types.ts b/ui/components/component-library/box/box.types.ts
index 8344b72dea3b..0778b30fdc73 100644
--- a/ui/components/component-library/box/box.types.ts
+++ b/ui/components/component-library/box/box.types.ts
@@ -410,6 +410,12 @@ export interface StyleUtilityProps {
    * Accepts responsive props in the form of an array.
    */
   color?: TextColor | TextColorArray | IconColor | IconColorArray;
+  /**
+   * An optional data-testid to apply to the component.
+   * TypeScript is complaining about data- attributes which means we need to explicitly define this as a prop.
+   * TODO: Allow data- attributes.
+   */
+  'data-testid'?: string;
 }
 /**
  * Box component props.

From ad6e53b888a14a8bf097b694f92a73f782502afb Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Mon, 14 Aug 2023 20:06:00 -0700
Subject: [PATCH 07/12] Updating snapshots

---
 .../security-provider-banner-alert.test.js.snap      |  4 ++--
 .../__snapshots__/blockaid-banner-alert.test.js.snap | 12 ++++++------
 .../__snapshots__/banner-alert.test.js.snap          |  4 ++--
 .../__snapshots__/banner-base.test.tsx.snap          |  4 ++--
 .../banner-tip/__snapshots__/banner-tip.test.js.snap |  4 ++--
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap b/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap
index 650b02b691f6..40d7a08f0cc4 100644
--- a/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap
+++ b/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap
@@ -10,12 +10,12 @@ exports[`Security Provider Banner Alert should match snapshot 1`] = `
       style="mask-image: url('./images/icons/danger.svg');"
     />
     <div>
-      <h5
+      <p
         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"
       >
         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/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap b/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
index 910856030093..824a7ae20ecc 100644
--- a/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
+++ b/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
@@ -9,12 +9,12 @@ exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertRespo
     style="mask-image: url('./images/icons/danger.svg');"
   />
   <div>
-    <h5
+    <p
       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"
     >
       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"
     >
@@ -55,12 +55,12 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
     style="mask-image: url('./images/icons/warning.svg');"
   />
   <div>
-    <h5
+    <p
       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"
     >
       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"
     >
@@ -102,12 +102,12 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
       style="mask-image: url('./images/icons/warning.svg');"
     />
     <div>
-      <h5
+      <p
         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"
       >
         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
index 6f938c11901d..04d3685074b3 100644
--- 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
@@ -11,12 +11,12 @@ exports[`BannerAlert should render BannerAlert element correctly 1`] = `
       style="mask-image: url('./images/icons/info.svg');"
     />
     <div>
-      <h5
+      <p
         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"
       >
         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-base/__snapshots__/banner-base.test.tsx.snap b/ui/components/component-library/banner-base/__snapshots__/banner-base.test.tsx.snap
index 89961a0ba5fb..b8bb092019ce 100644
--- 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
@@ -7,12 +7,12 @@ exports[`BannerBase should render bannerbase element correctly 1`] = `
     data-testid="banner-base"
   >
     <div>
-      <h5
+      <p
         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"
       >
         Bannerbase 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-tip/__snapshots__/banner-tip.test.js.snap b/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap
index 9581b9f2ddc7..26b83626de64 100644
--- a/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap
+++ b/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap
@@ -16,12 +16,12 @@ exports[`BannerTip should render BannerTip element correctly 1`] = `
       />
     </div>
     <div>
-      <h5
+      <p
         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"
       >
         BannerTip test
-      </h5>
+      </p>
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
       >

From c30aa2949acf8b164f99b9a27e3ee45a7b42293f Mon Sep 17 00:00:00 2001
From: Dhruv Parmar <dhruvv173@gmail.com>
Date: Thu, 17 Aug 2023 00:18:46 +0530
Subject: [PATCH 08/12] updating snapshot of blockaid-banner-alert and adding
 unit test for childrenWrapperProps

---
 test/e2e/tests/security-provider.spec.js      |  2 +-
 .../blockaid-banner-alert.test.js.snap        |  6 ++---
 .../banner-base/banner-base.test.tsx          | 24 +++++++++++++++----
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/test/e2e/tests/security-provider.spec.js b/test/e2e/tests/security-provider.spec.js
index bfbfc443fa13..94b54ab72c3e 100644
--- 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);
       },
diff --git a/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap b/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
index e7b2610c7380..f8b2fbe09512 100644
--- a/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
+++ b/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
@@ -48,19 +48,19 @@ 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
+    <p
       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"
     >
       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-base/banner-base.test.tsx b/ui/components/component-library/banner-base/banner-base.test.tsx
index 17f4643b31fd..e3fa389e1244 100644
--- a/ui/components/component-library/banner-base/banner-base.test.tsx
+++ b/ui/components/component-library/banner-base/banner-base.test.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import { renderWithUserEvent } from '../../../../test/lib/render-helpers';
 
 import { Icon, IconName } from '..';
+import { TextVariant } from '../../../helpers/constants/design-system';
 import { BannerBase } from './banner-base';
 
 describe('BannerBase', () => {
@@ -32,10 +33,17 @@ describe('BannerBase', () => {
   });
 
   it('should render bannerbase title', () => {
-    const { getByText } = render(<BannerBase title="Bannerbase title test" />);
+    const { getByText, getByTestId } = render(
+      <BannerBase
+        title="Bannerbase title test"
+        titleProps={{ 'data-testid': 'title' }}
+      />,
+    );
+
     expect(getByText('Bannerbase title test')).toHaveClass(
       'mm-banner-base__title',
     );
+    expect(getByTestId('title')).toBeDefined();
   });
 
   it('should render bannerbase description', () => {
@@ -45,10 +53,18 @@ describe('BannerBase', () => {
     expect(getByText('Bannerbase description test')).toBeDefined();
   });
 
-  it('should render bannerbase children', () => {
-    const { getByText } = render(
-      <BannerBase>Bannerbase children test</BannerBase>,
+  it('should render bannerbase children with props', () => {
+    const { getByText, getByTestId } = render(
+      <BannerBase
+        childrenWrapperProps={{
+          variant: TextVariant.bodyMd,
+          'data-testid': 'childrenWrapper',
+        }}
+      >
+        Bannerbase children test
+      </BannerBase>,
     );
+    expect(getByTestId('childrenWrapper')).toBeDefined();
     expect(getByText('Bannerbase children test')).toBeDefined();
   });
 

From e2ea36d938b739e7135078124d0272407d8557ea Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Thu, 17 Aug 2023 14:14:27 -0700
Subject: [PATCH 09/12] 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

---
 test/e2e/swaps/shared.js                      |  2 +-
 ...ecurity-provider-banner-alert.test.js.snap |  3 +-
 .../blockaid-banner-alert.test.js.snap        | 12 ++--
 .../__snapshots__/banner-alert.test.js.snap   |  3 +-
 .../banner-alert/banner-alert.test.js         |  4 +-
 .../__snapshots__/banner-base.test.tsx.snap   |  9 ++-
 .../banner-base/banner-base.stories.tsx       | 28 ++++----
 .../banner-base/banner-base.test.tsx          | 70 +++++++++++--------
 .../banner-base/banner-base.tsx               | 11 ++-
 .../__snapshots__/banner-tip.test.js.snap     |  3 +-
 .../banner-tip/banner-tip.test.js             |  4 +-
 .../prepare-swap-page/prepare-swap-page.js    |  3 +
 12 files changed, 77 insertions(+), 75 deletions(-)

diff --git a/test/e2e/swaps/shared.js b/test/e2e/swaps/shared.js
index f8f149385be5..fed72062a1a1 100644
--- 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="swap-token-verification-banner-title"]',
   );
   assert.equal(await boxTitle.getText(), options.title, 'Invalid box title');
   const boxContent = await driver.findElement(
diff --git a/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap b/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap
index 8167fc7bda60..43c9bb879d38 100644
--- a/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap
+++ b/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap
@@ -11,8 +11,7 @@ exports[`Security Provider Banner Alert should match snapshot 1`] = `
     />
     <div>
       <p
-        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"
+        class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
       >
         Malicious third party detected
       </p>
diff --git a/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap b/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
index f8b2fbe09512..d6c4f3e5d7e2 100644
--- a/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
+++ b/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
@@ -10,8 +10,7 @@ exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertRespo
   />
   <div>
     <p
-      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"
+      class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
     >
       This is a deceptive request
     </p>
@@ -56,8 +55,7 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
   />
   <div>
     <p
-      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"
+      class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
     >
       This is a deceptive request
     </p>
@@ -80,8 +78,7 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
   />
   <div>
     <p
-      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"
+      class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
     >
       This is a deceptive request
     </p>
@@ -127,8 +124,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
     />
     <div>
       <p
-        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"
+        class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
       >
         This is a deceptive request
       </p>
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
index 04d3685074b3..2224365dfb01 100644
--- 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
@@ -12,8 +12,7 @@ exports[`BannerAlert should render BannerAlert element correctly 1`] = `
     />
     <div>
       <p
-        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"
+        class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
       >
         BannerAlert test
       </p>
diff --git a/ui/components/component-library/banner-alert/banner-alert.test.js b/ui/components/component-library/banner-alert/banner-alert.test.js
index 5c612a0c3b5b..f131e9872a1a 100644
--- 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/__snapshots__/banner-base.test.tsx.snap b/ui/components/component-library/banner-base/__snapshots__/banner-base.test.tsx.snap
index b8bb092019ce..b7186d2acafa 100644
--- 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
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BannerBase should render bannerbase element correctly 1`] = `
+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"
@@ -8,15 +8,14 @@ exports[`BannerBase should render bannerbase element correctly 1`] = `
   >
     <div>
       <p
-        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"
+        class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
       >
-        Bannerbase test
+        BannerBase test
       </p>
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
       >
-        should render bannerbase element correctly
+        should render BannerBase element correctly
       </p>
     </div>
   </div>
diff --git a/ui/components/component-library/banner-base/banner-base.stories.tsx b/ui/components/component-library/banner-base/banner-base.stories.tsx
index 0fcc13402c36..4e054a3c929d 100644
--- a/ui/components/component-library/banner-base/banner-base.stories.tsx
+++ b/ui/components/component-library/banner-base/banner-base.stories.tsx
@@ -19,6 +19,7 @@ export default {
     docs: {
       page: README,
     },
+    backgrounds: { default: 'alternative' },
   },
   argTypes: {
     className: {
@@ -27,12 +28,21 @@ export default {
     title: {
       control: 'text',
     },
+    titleProps: {
+      control: 'object',
+    },
     description: {
       control: 'text',
     },
+    descriptionProps: {
+      control: 'object',
+    },
     children: {
       control: 'text',
     },
+    childrenProps: {
+      control: 'object',
+    },
     action: {
       action: 'action',
     },
@@ -54,10 +64,7 @@ export default {
   },
 } as Meta<typeof BannerBase>;
 
-export const Template: StoryFn<typeof BannerBase> = (args) => {
-  const onClose = () => console.log('BannerBase onClose trigger');
-  return <BannerBase {...args} onClose={onClose} />;
-};
+const Template: StoryFn<typeof BannerBase> = (args) => <BannerBase {...args} />;
 
 export const DefaultStory = Template.bind({});
 
@@ -88,14 +95,15 @@ Description.args = {
 export const Children: StoryFn<typeof BannerBase> = (args) => {
   return (
     <BannerBase {...args}>
-      {`Description shouldn't repeat title. 1-3 lines. Can contain a `}
+      Description shouldn't repeat title. 1-3 lines. Can contain a{' '}
       <ButtonLink
         size={ButtonLinkSize.Inherit}
         href="https://metamask.io/"
         externalLink
       >
-        hyperlink.
+        hyperlink
       </ButtonLink>
+      .
     </BannerBase>
   );
 };
@@ -105,7 +113,6 @@ export const ActionButton = Template.bind({});
 ActionButton.args = {
   title: 'Action prop demo',
   actionButtonLabel: 'Action',
-  actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'),
   actionButtonProps: {
     endIconName: IconName.Arrow2Right,
   },
@@ -115,12 +122,7 @@ ActionButton.args = {
 
 export const OnClose: StoryFn<typeof BannerBase> = (args) => {
   const [isShown, setShown] = useState(true);
-  const bannerToggle = () => {
-    if (isShown) {
-      console.log('close button clicked');
-    }
-    setShown(!isShown);
-  };
+  const bannerToggle = () => setShown(!isShown);
   return (
     <>
       {isShown ? (
diff --git a/ui/components/component-library/banner-base/banner-base.test.tsx b/ui/components/component-library/banner-base/banner-base.test.tsx
index e3fa389e1244..09eaf3943c30 100644
--- a/ui/components/component-library/banner-base/banner-base.test.tsx
+++ b/ui/components/component-library/banner-base/banner-base.test.tsx
@@ -5,14 +5,13 @@ import React from 'react';
 import { renderWithUserEvent } from '../../../../test/lib/render-helpers';
 
 import { Icon, IconName } from '..';
-import { TextVariant } from '../../../helpers/constants/design-system';
 import { BannerBase } from './banner-base';
 
 describe('BannerBase', () => {
-  it('should render bannerbase element correctly', () => {
+  it('should render BannerBase element correctly', () => {
     const { getByTestId, container } = render(
-      <BannerBase data-testid="banner-base" title="Bannerbase test">
-        should render bannerbase element correctly
+      <BannerBase data-testid="banner-base" title="BannerBase test">
+        should render BannerBase element correctly
       </BannerBase>,
     );
     expect(getByTestId('banner-base')).toHaveClass('mm-banner-base');
@@ -24,51 +23,68 @@ describe('BannerBase', () => {
       <BannerBase
         className="mm-banner-base--test"
         data-testid="banner-base"
-        title="Bannerbase test"
+        title="BannerBase test"
       >
-        should render bannerbase element correctly
+        should render BannerBase element correctly
       </BannerBase>,
     );
     expect(getByTestId('banner-base')).toHaveClass('mm-banner-base--test');
   });
 
-  it('should render bannerbase title', () => {
+  it('should render BannerBase title', () => {
     const { getByText, getByTestId } = render(
       <BannerBase
-        title="Bannerbase title test"
+        title="BannerBase title test"
         titleProps={{ 'data-testid': 'title' }}
       />,
     );
 
-    expect(getByText('Bannerbase title test')).toHaveClass(
-      'mm-banner-base__title',
-    );
+    expect(getByText('BannerBase title test')).toBeDefined();
     expect(getByTestId('title')).toBeDefined();
   });
 
-  it('should render bannerbase description', () => {
-    const { getByText } = render(
-      <BannerBase description="Bannerbase description test" />,
+  it('should render BannerBase description', () => {
+    const { getByText, getByTestId } = render(
+      <BannerBase
+        description="BannerBase description test"
+        descriptionProps={{ 'data-testid': 'description' }}
+      />,
     );
-    expect(getByText('Bannerbase description test')).toBeDefined();
+    expect(getByText('BannerBase description test')).toBeDefined();
+    expect(getByTestId('description')).toBeDefined();
   });
 
-  it('should render bannerbase children with props', () => {
+  it('should render BannerBase children with props', () => {
     const { getByText, getByTestId } = render(
       <BannerBase
         childrenWrapperProps={{
-          variant: TextVariant.bodyMd,
-          'data-testid': 'childrenWrapper',
+          'data-testid': 'children-wrapper',
+        }}
+      >
+        BannerBase children
+      </BannerBase>,
+    );
+    expect(getByTestId('children-wrapper')).toBeDefined();
+    expect(getByText('BannerBase children')).toBeDefined();
+  });
+
+  it('should render BannerBase children without wrapper when not a string', () => {
+    const { getByText, queryByTestId } = render(
+      <BannerBase
+        childrenWrapperProps={{
+          'data-testid': 'children-wrapper',
         }}
       >
-        Bannerbase children test
+        <div>BannerBase children</div>
       </BannerBase>,
     );
-    expect(getByTestId('childrenWrapper')).toBeDefined();
-    expect(getByText('Bannerbase children test')).toBeDefined();
+
+    expect(queryByTestId('children-wrapper')).not.toBeInTheDocument();
+    expect(getByText('BannerBase children')).toBeDefined();
   });
 
-  it('should render bannerbase action button', () => {
+  it('should render BannerBase action button', () => {
+    const fn = jest.fn();
     const { getByTestId } = render(
       <BannerBase
         title="Action prop demo"
@@ -78,19 +94,15 @@ describe('BannerBase', () => {
           'data-testid': 'action',
           className: 'mm-banner-base__action',
         }}
-        actionButtonOnClick={() =>
-          console.log('ButtonLink actionButtonOnClick demo')
-        }
+        actionButtonOnClick={fn}
       >
-        Use actionButtonLabel for action text, actionButtonOnClick for the
-        onClick handler, and actionButtonProps to pass any ButtonLink prop types
-        such as iconName
+        BannerBase children
       </BannerBase>,
     );
     expect(getByTestId('action')).toHaveClass('mm-banner-base__action');
   });
 
-  it('should render bannerbase startAccessory', () => {
+  it('should render BannerBase startAccessory', () => {
     const { getByTestId } = render(
       <BannerBase
         startAccessory={
diff --git a/ui/components/component-library/banner-base/banner-base.tsx b/ui/components/component-library/banner-base/banner-base.tsx
index d6eef36d3334..9947d7a6e001 100644
--- a/ui/components/component-library/banner-base/banner-base.tsx
+++ b/ui/components/component-library/banner-base/banner-base.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import classnames from 'classnames';
+import { useI18nContext } from '../../../hooks/useI18nContext';
 
 import {
   BackgroundColor,
@@ -40,6 +41,7 @@ export const BannerBase: BannerBaseComponent = React.forwardRef(
     }: BannerBaseProps<C>,
     ref?: PolymorphicRef<C>,
   ) => {
+    const t = useI18nContext();
     return (
       <Box
         className={classnames('mm-banner-base', className)}
@@ -55,12 +57,7 @@ export const BannerBase: BannerBaseComponent = React.forwardRef(
 
         <div>
           {title && (
-            <Text
-              className="mm-banner-base__title"
-              variant={TextVariant.bodyLgMedium}
-              data-testid="mm-banner-base-title"
-              {...titleProps}
-            >
+            <Text variant={TextVariant.bodyLgMedium} {...titleProps}>
               {title}
             </Text>
           )}
@@ -86,7 +83,7 @@ export const BannerBase: BannerBaseComponent = React.forwardRef(
             marginLeft="auto"
             iconName={IconName.Close}
             size={ButtonIconSize.Sm}
-            ariaLabel="Close" // TODO: i18n
+            ariaLabel={t('close')}
             onClick={onClose}
             {...closeButtonProps}
           />
diff --git a/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap b/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap
index 26b83626de64..b44382369021 100644
--- a/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap
+++ b/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap
@@ -17,8 +17,7 @@ exports[`BannerTip should render BannerTip element correctly 1`] = `
     </div>
     <div>
       <p
-        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"
+        class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
       >
         BannerTip test
       </p>
diff --git a/ui/components/component-library/banner-tip/banner-tip.test.js b/ui/components/component-library/banner-tip/banner-tip.test.js
index 772acf722b5a..edfad87a11e7 100644
--- a/ui/components/component-library/banner-tip/banner-tip.test.js
+++ b/ui/components/component-library/banner-tip/banner-tip.test.js
@@ -57,9 +57,7 @@ describe('BannerTip', () => {
 
   it('should render BannerTip title', () => {
     const { getByText } = render(<BannerTip title="BannerTip title test" />);
-    expect(getByText('BannerTip title test')).toHaveClass(
-      'mm-banner-base__title',
-    );
+    expect(getByText('BannerTip title test')).toBeDefined();
   });
 
   it('should render BannerTip description', () => {
diff --git a/ui/pages/swaps/prepare-swap-page/prepare-swap-page.js b/ui/pages/swaps/prepare-swap-page/prepare-swap-page.js
index 5013b6d700f2..15ab5aac07d4 100644
--- a/ui/pages/swaps/prepare-swap-page/prepare-swap-page.js
+++ b/ui/pages/swaps/prepare-swap-page/prepare-swap-page.js
@@ -1036,6 +1036,9 @@ export default function PrepareSwapPage({
                   ? t('swapTokenVerifiedOn1SourceTitle')
                   : t('swapTokenAddedManuallyTitle')
               }
+              titleProps={{
+                'data-testid': 'swap-token-verification-banner-title',
+              }}
               width={BLOCK_SIZES.FULL}
             >
               <Box>

From 5a606debaaba688b07ea479cda43291eb7187766 Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Thu, 17 Aug 2023 14:22:30 -0700
Subject: [PATCH 10/12] Removing incorrect arg from storybook file

---
 .../component-library/banner-base/banner-base.stories.tsx      | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/ui/components/component-library/banner-base/banner-base.stories.tsx b/ui/components/component-library/banner-base/banner-base.stories.tsx
index 4e054a3c929d..f5df17ca395d 100644
--- a/ui/components/component-library/banner-base/banner-base.stories.tsx
+++ b/ui/components/component-library/banner-base/banner-base.stories.tsx
@@ -43,9 +43,6 @@ export default {
     childrenProps: {
       control: 'object',
     },
-    action: {
-      action: 'action',
-    },
     actionButtonLabel: {
       control: 'text',
     },

From 35aa4d8a5c5c3ae91b6bb011f6c1f6d82e9d4966 Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Thu, 17 Aug 2023 15:48:37 -0700
Subject: [PATCH 11/12] Updating html element in security provider e2e test to
 match BannerBase. Also updating snapshot of ConfirmTransaction page

---
 test/e2e/tests/security-provider.spec.js                    | 6 +++---
 .../__snapshots__/confirm-transaction-base.test.js.snap     | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/test/e2e/tests/security-provider.spec.js b/test/e2e/tests/security-provider.spec.js
index 94b54ab72c3e..9ffb5a3529b1 100644
--- a/test/e2e/tests/security-provider.spec.js
+++ b/test/e2e/tests/security-provider.spec.js
@@ -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/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
index 0f6120341c6e..01cecf920f09 100644
--- a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
+++ b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
@@ -489,7 +489,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
         </div>
       </div>
       <div
-        class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-right-4 box--margin-bottom-4 box--margin-left-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-right-4 mm-box--margin-bottom-4 mm-box--margin-left-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"

From 9c8e160b9df0f2e3e90e8f21a5a5f5b0956c1165 Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Fri, 18 Aug 2023 13:49:40 -0700
Subject: [PATCH 12/12] Fixing e2e tests

---
 test/e2e/swaps/shared.js                                    | 2 +-
 ui/pages/swaps/prepare-swap-page/prepare-swap-page.js       | 2 +-
 ui/pages/swaps/prepare-swap-page/review-quote.js            | 1 +
 .../swaps/prepare-swap-page/view-quote-price-difference.js  | 1 +
 ui/pages/swaps/swaps-banner-alert/swaps-banner-alert.js     | 6 +++++-
 ui/pages/swaps/transaction-settings/transaction-settings.js | 1 +
 6 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/test/e2e/swaps/shared.js b/test/e2e/swaps/shared.js
index fed72062a1a1..0d961a65443a 100644
--- 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="swap-token-verification-banner-title"]',
+    '[data-testid="swaps-banner-title"]',
   );
   assert.equal(await boxTitle.getText(), options.title, 'Invalid box title');
   const boxContent = await driver.findElement(
diff --git a/ui/pages/swaps/prepare-swap-page/prepare-swap-page.js b/ui/pages/swaps/prepare-swap-page/prepare-swap-page.js
index 15ab5aac07d4..8ac6b1f9a373 100644
--- a/ui/pages/swaps/prepare-swap-page/prepare-swap-page.js
+++ b/ui/pages/swaps/prepare-swap-page/prepare-swap-page.js
@@ -1037,7 +1037,7 @@ export default function PrepareSwapPage({
                   : t('swapTokenAddedManuallyTitle')
               }
               titleProps={{
-                'data-testid': 'swap-token-verification-banner-title',
+                'data-testid': 'swaps-banner-title',
               }}
               width={BLOCK_SIZES.FULL}
             >
diff --git a/ui/pages/swaps/prepare-swap-page/review-quote.js b/ui/pages/swaps/prepare-swap-page/review-quote.js
index 5c815f2a51d6..9bca5d8c63ca 100644
--- a/ui/pages/swaps/prepare-swap-page/review-quote.js
+++ b/ui/pages/swaps/prepare-swap-page/review-quote.js
@@ -1073,6 +1073,7 @@ export default function ReviewQuote({ setReceiveToAmount }) {
             {(showInsufficientWarning || tokenBalanceUnavailable) && (
               <BannerAlert
                 title={t('notEnoughBalance')}
+                titleProps={{ 'data-testid': 'swaps-banner-title' }}
                 severity={Severity.Info}
                 description={actionableBalanceErrorMessage}
                 descriptionProps={{
diff --git a/ui/pages/swaps/prepare-swap-page/view-quote-price-difference.js b/ui/pages/swaps/prepare-swap-page/view-quote-price-difference.js
index 89bf0d530422..44fa18f9cb9b 100644
--- a/ui/pages/swaps/prepare-swap-page/view-quote-price-difference.js
+++ b/ui/pages/swaps/prepare-swap-page/view-quote-price-difference.js
@@ -59,6 +59,7 @@ export default function ViewQuotePriceDifference(props) {
     <Box display={DISPLAY.FLEX} marginTop={2}>
       <BannerAlert
         title={priceDifferenceTitle}
+        titleProps={{ 'data-testid': 'swaps-banner-title' }}
         severity={severity}
         width={BLOCK_SIZES.FULL}
         data-testid="mm-banner-alert"
diff --git a/ui/pages/swaps/swaps-banner-alert/swaps-banner-alert.js b/ui/pages/swaps/swaps-banner-alert/swaps-banner-alert.js
index 928b27ea35ff..233b8fd0e09e 100644
--- a/ui/pages/swaps/swaps-banner-alert/swaps-banner-alert.js
+++ b/ui/pages/swaps/swaps-banner-alert/swaps-banner-alert.js
@@ -163,7 +163,11 @@ export default function SwapsBannerAlert({ swapsErrorKey }) {
   }
 
   return (
-    <BannerAlert severity={severity} title={title}>
+    <BannerAlert
+      severity={severity}
+      title={title}
+      titleProps={{ 'data-testid': 'swaps-banner-title' }}
+    >
       {description}
     </BannerAlert>
   );
diff --git a/ui/pages/swaps/transaction-settings/transaction-settings.js b/ui/pages/swaps/transaction-settings/transaction-settings.js
index a0d213eaceac..51291ec454a1 100644
--- a/ui/pages/swaps/transaction-settings/transaction-settings.js
+++ b/ui/pages/swaps/transaction-settings/transaction-settings.js
@@ -337,6 +337,7 @@ export default function TransactionSettings({
                 <BannerAlert
                   severity={notificationSeverity}
                   title={notificationTitle}
+                  titleProps={{ 'data-testid': 'swaps-banner-title' }}
                 >
                   <Typography
                     variant={TypographyVariant.H6}