From e465a522a0755e9cb5b718e34d08194b3c8a1b9e Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Thu, 25 Apr 2024 11:33:58 -0400
Subject: [PATCH] doc updates

---
 .../platform/popup/layout/popup-layout.mdx    | 26 +++++++++++--------
 .../popup/layout/popup-layout.stories.ts      | 24 ++++++++++++-----
 2 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/apps/browser/src/platform/popup/layout/popup-layout.mdx b/apps/browser/src/platform/popup/layout/popup-layout.mdx
index 204ff6e0cc..91f7dab277 100644
--- a/apps/browser/src/platform/popup/layout/popup-layout.mdx
+++ b/apps/browser/src/platform/popup/layout/popup-layout.mdx
@@ -9,8 +9,8 @@ when Light & Dark mode is selected. The stories are best viewed by selecting one
 
 # Popup Tab Navigation
 
-The popup tab navigation component is the component that composes together the popup page and the
-bottom tab navigation footer.
+The popup tab navigation component composes together the popup page and the bottom tab navigation
+footer. This component is intended to be used a level _above_ each extension tab's page code.
 
 The navigation footer contains the 4 main page links for the browser extension. It uses the Angular
 router to determine which page is currently active, and style the button appropriately. Clicking on
@@ -36,13 +36,13 @@ page looks nice when the extension is popped out.
 **Slots**
 
 - `header`
-  - Use `popup-header` component
-  - Every page should have a header
+  - Use `popup-header` component.
+  - Every page should have a header.
 - `footer`
-  - Use the `popup-footer` component
-  - Not every page will have a footer
+  - Use the `popup-footer` component.
+  - Not every page will have a footer.
 - default
-  - Whatever content you want in `main`
+  - Whatever content you want in `main`.
 
 Basic usage example:
 
@@ -59,7 +59,7 @@ Basic usage example:
 **Args**
 
 - `pageTitle`: required
-  - Inserts title as an h1.
+  - Inserts title as an `h1`.
 - `showBackButton`: optional, defaults to `false`
   - Toggles the back button to appear. The back button uses `Location.back()` to navigate back one
     page in history.
@@ -67,13 +67,13 @@ Basic usage example:
 **Slots**
 
 - `end`
-  - Use to insert one or more interactive elements
-  - The header handles the spacing between elements passed to to the `end` slot.
+  - Use to insert one or more interactive elements.
+  - The header handles the spacing between elements passed to the `end` slot.
 
 Usage example:
 
 ```html
-<popup-header pageTitle="Test" showBackButton="true">
+<popup-header pageTitle="Test" showBackButton>
   <ng-container slot="end">
     <button></button>
     <button></button>
@@ -111,12 +111,16 @@ View the story source code to see examples of how to construct these types of pa
 
 ## Extension Tab
 
+Example of wrapping an extension page in the `popup-tab-navigation` component.
+
 <Canvas>
   <Story of={stories.PopupTabNavigation} />
 </Canvas>
 
 ## Extension Page
 
+Examples of using just the `popup-page` component, without and with a footer.
+
 <Canvas>
   <Story of={stories.PopupPage} />
 </Canvas>
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 89c9e1a92e..1b10e50c0c 100644
--- a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
+++ b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
@@ -16,6 +16,17 @@ import { PopupHeaderComponent } from "./popup-header.component";
 import { PopupPageComponent } from "./popup-page.component";
 import { PopupTabNavigationComponent } from "./popup-tab-navigation.component";
 
+@Component({
+  selector: "extension-container",
+  template: `
+    <div class="tw-h-[640px] tw-w-[380px] tw-border tw-border-solid tw-border-secondary-300">
+      <ng-content></ng-content>
+    </div>
+  `,
+  standalone: true,
+})
+class ExtensionContainerComponent {}
+
 @Component({
   selector: "vault-placeholder",
   template: `
@@ -267,6 +278,7 @@ export default {
         PopupTabNavigationComponent,
         CommonModule,
         RouterModule,
+        ExtensionContainerComponent,
         MockVaultSubpageComponent,
         MockVaultPageComponent,
         MockSendPageComponent,
@@ -312,11 +324,11 @@ export const PopupTabNavigation: Story = {
   render: (args) => ({
     props: args,
     template: /* HTML */ `
-      <div class="tw-h-[640px] tw-w-[380px] tw-border tw-border-solid tw-border-secondary-300">
+      <extension-container>
         <popup-tab-navigation>
           <router-outlet></router-outlet>
         </popup-tab-navigation>
-      </div>
+      </extension-container>
     `,
   }),
 };
@@ -325,9 +337,9 @@ export const PopupPage: Story = {
   render: (args) => ({
     props: args,
     template: /* HTML */ `
-      <div class="tw-h-[640px] tw-w-[380px] tw-border tw-border-solid tw-border-secondary-300">
+      <extension-container>
         <mock-vault-page></mock-vault-page>
-      </div>
+      </extension-container>
     `,
   }),
 };
@@ -336,9 +348,9 @@ export const PopupPageWithFooter: Story = {
   render: (args) => ({
     props: args,
     template: /* HTML */ `
-      <div class="tw-h-[640px] tw-w-[380px] tw-border tw-border-solid tw-border-secondary-300">
+      <extension-container>
         <mock-vault-subpage></mock-vault-subpage>
-      </div>
+      </extension-container>
     `,
   }),
 };