feat(snaps): Add Snap UI Banner component (#29271)

Add Snap UI Banner component.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29271?quickstart=1)

Fixes: MetaMask/snaps#2939

1. Install test Snap from the code example provided and check the
results.

Example Snap code with Banners in the UI:
```typescript
<Container>
  <Box>
    <Banner title="Success banner" severity="success">
      <Text>
        <Icon name="arrow-right" color="primary" size="inherit" />
        &nbsp;Here is the banner content!
      </Text>
      <Bold>Banner bold formatted text</Bold>
      <Italic>Banner italic formatted text</Italic>
      <Text>
        You can click here:&nbsp;
        <Link href="https://snaps.metamask.io/">Banner link</Link>
      </Text>
      <Button type="button">Banner Action Button</Button>
    </Banner>
    <Banner title="Info banner" severity="info">
      <Text>Here is the banner content!</Text>
    </Banner>
    <Banner title="Warning banner" severity="warning">
      <Text>Here is the banner content!</Text>
    </Banner>
    <Banner title="Danger banner" severity="danger">
      <Text>Here is the banner content!</Text>
    </Banner>
  </Box>
</Container>
```

Banner in Snap UI was not available before this PR. Nothing to show
here.

![Screenshot 2024-12-17 at 12 34
42](https://github.com/user-attachments/assets/bdf291be-b41b-4e0a-964c-218dbd2dae5e)

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: david0xd

ui/components/app/metamask-template-renderer/safe-component-list.js

@@ -33,6 +33,7 @@ import { Copyable } from '../snaps/copyable';
 import { SnapDelineator } from '../snaps/snap-delineator';
 import { SnapUIAddress } from '../snaps/snap-ui-address';
 import { SnapUIAvatar } from '../snaps/snap-ui-avatar';
+import { SnapUIBanner } from '../snaps/snap-ui-banner';
 import { SnapUIButton } from '../snaps/snap-ui-button';
 import { SnapUICard } from '../snaps/snap-ui-card';
 import { SnapUICheckbox } from '../snaps/snap-ui-checkbox';
@@ -89,6 +90,7 @@ export const safeComponentList = {
   SnapDelineator,
   SnapUIAddress,
   SnapUIAvatar,
+  SnapUIBanner,
   SnapUIButton,
   SnapUICard,
   SnapUICheckbox,

ui/components/app/snaps/snap-ui-banner/index.ts

@@ -0,0 +1 @@
+export * from './snap-ui-banner';

ui/components/app/snaps/snap-ui-banner/snap-ui-banner.stories.tsx

@@ -0,0 +1,33 @@
+import React, { ReactNode } from 'react';
+import { SnapUIBanner } from './snap-ui-banner';
+import { BannerAlertSeverity } from '../../../component-library';
+
+export default {
+  title: 'Components/App/Snaps/SnapUIBanner',
+  component: SnapUIBanner,
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+    severity: {
+      control: 'text',
+    },
+    children: {
+      control: 'text',
+    },
+  },
+};
+
+export const DefaultStory = (args: {
+  title: string;
+  severity: BannerAlertSeverity;
+  children: ReactNode;
+}) => <SnapUIBanner {...args} />;
+
+DefaultStory.storyName = 'Default';
+
+DefaultStory.args = {
+  title: 'Banner title',
+  severity: 'info',
+  children: 'Banner content.',
+};

ui/components/app/snaps/snap-ui-banner/snap-ui-banner.tsx

@@ -0,0 +1,19 @@
+import React, { FunctionComponent } from 'react';
+import { BannerAlert, BannerAlertSeverity } from '../../../component-library';
+
+export type SnapUIBannerProps = {
+  severity: BannerAlertSeverity | undefined;
+  title: string;
+};
+
+export const SnapUIBanner: FunctionComponent<SnapUIBannerProps> = ({
+  children,
+  severity,
+  title,
+}) => {
+  return (
+    <BannerAlert severity={severity} title={title}>
+      {children}
+    </BannerAlert>
+  );
+};

ui/components/app/snaps/snap-ui-renderer/components/banner.ts

@@ -0,0 +1,20 @@
+import { BannerElement, JSXElement } from '@metamask/snaps-sdk/jsx';
+import { getJsxChildren } from '@metamask/snaps-utils';
+import { mapToTemplate } from '../utils';
+import { UIComponentFactory } from './types';
+
+export const banner: UIComponentFactory<BannerElement> = ({
+  element,
+  ...params
+}) => {
+  return {
+    element: 'SnapUIBanner',
+    children: getJsxChildren(element).map((children) =>
+      mapToTemplate({ element: children as JSXElement, ...params }),
+    ),
+    props: {
+      title: element.props.title,
+      severity: element.props.severity,
+    },
+  };
+};

ui/components/app/snaps/snap-ui-renderer/components/index.ts

@@ -27,6 +27,7 @@ import { selector } from './selector';
 import { icon } from './icon';
 import { section } from './section';
 import { avatar } from './avatar';
+import { banner } from './banner';
 
 export const COMPONENT_MAPPING = {
   Box: box,
@@ -58,4 +59,5 @@ export const COMPONENT_MAPPING = {
   Container: container,
   Selector: selector,
   Section: section,
+  Banner: banner,
 };