[PM-7878] PopupSectionHeader component (#9107)

* add PopupSectionHeaderComponent

* refactor to shorter imports + format

* use title as an input

* use small icon buttons for section header

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>

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;
+}

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>
+    `,
+  }),
+};

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,