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 + + + + + +Common interactive elements to insert into the `full-width-notice` slot are: + +- `bit-banner`: shows a full-width notice + +Usage example: + +```html + + + + This is an important note about these ciphers + + + + + +``` + ## 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: ` + + This is an important note about these ciphers + + `, + 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 */ ` + + + + + + + + + `, + }), +}; + 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 @@
+