[CL-510] Create slot for banners in popup-page component (#12279)

* add full-width-notice slot to popup page component

* update storybook popup layout docs with notice example

* remove unneeded container/classes

apps/browser/src/platform/popup/layout/popup-layout.mdx

@@ -44,6 +44,9 @@ page looks nice when the extension is popped out.
 - `above-scroll-area`
   - When the page content overflows, this content will be "stuck" to the top of the page upon
     scrolling.
+- `full-width-notice`
+  - Similar to `above-scroll-area`, this content will display before `above-scroll-area` without
+    container margin or padding.
 - default
   - Whatever content you want in `main`.
 
@@ -108,6 +111,30 @@ Common interactive elements to insert into the `end` slot are:
 - "Add" button: this can be accomplished with the Button component and any custom functionality for
   that particular page
 
+### Notice
+
+<Canvas>
+  <Story of={stories.Notice} />
+</Canvas>
+
+Common interactive elements to insert into the `full-width-notice` slot are:
+
+- `bit-banner`: shows a full-width notice
+
+Usage example:
+
+```html
+<popup-page>
+  <popup-header slot="header" [pageTitle]="'vault' | i18n"> </popup-header>
+  <bit-banner slot="full-width-notice" bannerType="info" [showClose]="false">
+    This is an important note about these ciphers
+  </bit-banner>
+  <ng-container slot="above-scroll-area">
+    <app-vault-header-v2></app-vault-header-v2>
+  </ng-container>
+</popup-page>
+```
+
 ## Popup footer
 
 Popup footer should be used when the page displays action buttons. It functions similarly to the

apps/browser/src/platform/popup/layout/popup-layout.stories.ts

@@ -11,6 +11,7 @@ import { SendService } from "@bitwarden/common/tools/send/services/send.service.
 import {
   AvatarModule,
   BadgeModule,
+  BannerModule,
   ButtonModule,
   I18nMockService,
   IconButtonModule,
@@ -125,6 +126,18 @@ class MockCurrentAccountComponent {}
 })
 class MockSearchComponent {}
 
+@Component({
+  selector: "mock-banner",
+  template: `
+    <bit-banner bannerType="info" [showClose]="false">
+      This is an important note about these ciphers
+    </bit-banner>
+  `,
+  standalone: true,
+  imports: [BannerModule],
+})
+class MockBannerComponent {}
+
 @Component({
   selector: "mock-vault-page",
   template: `
@@ -298,6 +311,8 @@ export default {
         CommonModule,
         RouterModule,
         ExtensionContainerComponent,
+        MockBannerComponent,
+        MockSearchComponent,
         MockVaultSubpageComponent,
         MockVaultPageComponent,
         MockSendPageComponent,
@@ -517,6 +532,22 @@ export const TransparentHeader: Story = {
   }),
 };
 
+export const Notice: Story = {
+  render: (args) => ({
+    props: args,
+    template: /* HTML */ `
+      <extension-container>
+        <popup-page>
+          <popup-header slot="header" pageTitle="Page Header"></popup-header>
+          <mock-banner slot="full-width-notice"></mock-banner>
+          <mock-search slot="above-scroll-area"></mock-search>
+          <vault-placeholder></vault-placeholder>
+        </popup-page>
+      </extension-container>
+    `,
+  }),
+};
+
 export const WidthOptions: Story = {
   render: (args) => ({
     props: args,

apps/browser/src/platform/popup/layout/popup-page.component.html

@@ -1,5 +1,6 @@
 <ng-content select="[slot=header]"></ng-content>
 <main class="tw-flex-1 tw-overflow-hidden tw-flex tw-flex-col tw-relative tw-bg-background-alt">
+  <ng-content select="[slot=full-width-notice]"></ng-content>
   <div
     #nonScrollable
     class="tw-transition-colors tw-duration-200 tw-border-0 tw-border-b tw-border-solid tw-p-3 bit-compact:tw-p-2"