Skip to content

Commit

Permalink
[CL-510] Create slot for banners in popup-page component (#12279)
Browse files Browse the repository at this point in the history
* add full-width-notice slot to popup page component

* update storybook popup layout docs with notice example

* remove unneeded container/classes
  • Loading branch information
jprusik authored Dec 19, 2024
1 parent 997d40f commit 40943b5
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 0 deletions.
27 changes: 27 additions & 0 deletions apps/browser/src/platform/popup/layout/popup-layout.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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`.

Expand Down Expand Up @@ -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
Expand Down
31 changes: 31 additions & 0 deletions apps/browser/src/platform/popup/layout/popup-layout.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { SendService } from "@bitwarden/common/tools/send/services/send.service.
import {
AvatarModule,
BadgeModule,
BannerModule,
ButtonModule,
I18nMockService,
IconButtonModule,
Expand Down Expand Up @@ -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: `
Expand Down Expand Up @@ -298,6 +311,8 @@ export default {
CommonModule,
RouterModule,
ExtensionContainerComponent,
MockBannerComponent,
MockSearchComponent,
MockVaultSubpageComponent,
MockVaultPageComponent,
MockSendPageComponent,
Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
@@ -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"
Expand Down

0 comments on commit 40943b5

Please sign in to comment.