From ff19514c27d0d48dff3f5f7b79473ef8807107cd Mon Sep 17 00:00:00 2001
From: Nick Krantz <125900171+nick-livefront@users.noreply.github.com>
Date: Wed, 15 May 2024 19:57:59 -0500
Subject: [PATCH] [PM-7878] PopupSectionHeader component (#9107)

* add PopupSectionHeaderComponent

* refactor to shorter imports + format

* use title as an input

* use small icon buttons for section header
---
 .../popup-section-header.component.html       | 11 +++
 .../popup-section-header.component.ts         | 13 +++
 .../popup-section-header.stories.ts           | 90 +++++++++++++++++++
 apps/browser/src/popup/app.module.ts          |  2 +
 4 files changed, 116 insertions(+)
 create mode 100644 apps/browser/src/platform/popup/popup-section-header/popup-section-header.component.html
 create mode 100644 apps/browser/src/platform/popup/popup-section-header/popup-section-header.component.ts
 create mode 100644 apps/browser/src/platform/popup/popup-section-header/popup-section-header.stories.ts

diff --git a/apps/browser/src/platform/popup/popup-section-header/popup-section-header.component.html b/apps/browser/src/platform/popup/popup-section-header/popup-section-header.component.html
new file mode 100644
index 00000000000..6cc7e317e27
--- /dev/null
+++ b/apps/browser/src/platform/popup/popup-section-header/popup-section-header.component.html
@@ -0,0 +1,11 @@
+<div class="tw-flex tw-justify-between tw-items-end tw-gap-1 tw-px-1 tw-pb-1">
+  <div>
+    <h2 bitTypography="h6" noMargin class="tw-mb-0 tw-text-headers">
+      {{ title }}
+    </h2>
+    <ng-content select="[slot=title-suffix]"></ng-content>
+  </div>
+  <div class="tw-text-muted has-[button]:-tw-mb-1">
+    <ng-content select="[slot=end]"></ng-content>
+  </div>
+</div>
diff --git a/apps/browser/src/platform/popup/popup-section-header/popup-section-header.component.ts b/apps/browser/src/platform/popup/popup-section-header/popup-section-header.component.ts
new file mode 100644
index 00000000000..b33a2a0f330
--- /dev/null
+++ b/apps/browser/src/platform/popup/popup-section-header/popup-section-header.component.ts
@@ -0,0 +1,13 @@
+import { Component, Input } from "@angular/core";
+
+import { TypographyModule } from "@bitwarden/components";
+
+@Component({
+  standalone: true,
+  selector: "popup-section-header",
+  templateUrl: "./popup-section-header.component.html",
+  imports: [TypographyModule],
+})
+export class PopupSectionHeaderComponent {
+  @Input() title: string;
+}
diff --git a/apps/browser/src/platform/popup/popup-section-header/popup-section-header.stories.ts b/apps/browser/src/platform/popup/popup-section-header/popup-section-header.stories.ts
new file mode 100644
index 00000000000..450bfb24226
--- /dev/null
+++ b/apps/browser/src/platform/popup/popup-section-header/popup-section-header.stories.ts
@@ -0,0 +1,90 @@
+import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+
+import {
+  CardComponent,
+  IconButtonModule,
+  SectionComponent,
+  TypographyModule,
+} from "@bitwarden/components";
+
+import { PopupSectionHeaderComponent } from "./popup-section-header.component";
+
+export default {
+  title: "Browser/Popup Section Header",
+  component: PopupSectionHeaderComponent,
+  args: {
+    title: "Title",
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [SectionComponent, CardComponent, TypographyModule, IconButtonModule],
+    }),
+  ],
+} as Meta<PopupSectionHeaderComponent>;
+
+type Story = StoryObj<PopupSectionHeaderComponent>;
+
+export const OnlyTitle: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <popup-section-header [title]="title"></popup-section-header>
+    `,
+  }),
+  args: {
+    title: "Only Title",
+  },
+};
+
+export const TrailingText: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <popup-section-header [title]="title">
+        <span bitTypography="body2" slot="end">13</span>
+      </popup-section-header>
+    `,
+  }),
+  args: {
+    title: "Trailing Text",
+  },
+};
+
+export const TailingIcon: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <popup-section-header [title]="title">
+        <button bitIconButton="bwi-star" size="small" slot="end"></button>
+      </popup-section-header>
+    `,
+  }),
+  args: {
+    title: "Trailing Icon",
+  },
+};
+
+export const WithSections: Story = {
+  render: () => ({
+    template: `
+      <div class="tw-bg-background-alt tw-p-2">
+        <bit-section>
+          <popup-section-header title="Section 1">
+            <button bitIconButton="bwi-star" size="small" slot="end"></button>
+          </popup-section-header>
+          <bit-card>
+            <h3 bitTypography="h3">Card 1 Content</h3>
+          </bit-card>
+        </bit-section>
+        <bit-section>
+          <popup-section-header title="Section 2">
+            <button bitIconButton="bwi-star" size="small" slot="end"></button>
+          </popup-section-header>
+          <bit-card>
+            <h3 bitTypography="h3">Card 2 Content</h3>
+          </bit-card>
+        </bit-section>
+      </div>
+    `,
+  }),
+};
diff --git a/apps/browser/src/popup/app.module.ts b/apps/browser/src/popup/app.module.ts
index 05158d3295d..74e24433b2c 100644
--- a/apps/browser/src/popup/app.module.ts
+++ b/apps/browser/src/popup/app.module.ts
@@ -47,6 +47,7 @@ import { PopupFooterComponent } from "../platform/popup/layout/popup-footer.comp
 import { PopupHeaderComponent } from "../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../platform/popup/layout/popup-page.component";
 import { PopupTabNavigationComponent } from "../platform/popup/layout/popup-tab-navigation.component";
+import { PopupSectionHeaderComponent } from "../platform/popup/popup-section-header/popup-section-header.component";
 import { FilePopoutCalloutComponent } from "../tools/popup/components/file-popout-callout.component";
 import { GeneratorComponent } from "../tools/popup/generator/generator.component";
 import { PasswordGeneratorHistoryComponent } from "../tools/popup/generator/password-generator-history.component";
@@ -124,6 +125,7 @@ import "../platform/popup/locales";
     PopupFooterComponent,
     PopupHeaderComponent,
     UserVerificationDialogComponent,
+    PopupSectionHeaderComponent,
   ],
   declarations: [
     ActionButtonsComponent,