From 40943b5929c81b0ed3bfdb85811afea0aecdb7c3 Mon Sep 17 00:00:00 2001
From: Jonathan Prusik <jprusik@users.noreply.github.com>
Date: Thu, 19 Dec 2024 16:47:55 -0500
Subject: [PATCH] [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
---
 .../platform/popup/layout/popup-layout.mdx    | 27 ++++++++++++++++
 .../popup/layout/popup-layout.stories.ts      | 31 +++++++++++++++++++
 .../popup/layout/popup-page.component.html    |  1 +
 3 files changed, 59 insertions(+)

diff --git a/apps/browser/src/platform/popup/layout/popup-layout.mdx b/apps/browser/src/platform/popup/layout/popup-layout.mdx
index aa11b4099a9..5723bef44b1 100644
--- a/apps/browser/src/platform/popup/layout/popup-layout.mdx
+++ b/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
diff --git a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
index 11f2d34df50..cd467cecbd2 100644
--- a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
+++ b/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,
diff --git a/apps/browser/src/platform/popup/layout/popup-page.component.html b/apps/browser/src/platform/popup/layout/popup-page.component.html
index 8eefc14ab55..ba9a108a504 100644
--- a/apps/browser/src/platform/popup/layout/popup-page.component.html
+++ b/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"