[BEEEP] Add banner component (#759)

components/src/banner/banner.component.html

@@ -0,0 +1,14 @@
+<div
+  class="tw-py-2.5 tw-px-4 tw-text-contrast tw-flex tw-gap-2 tw-items-center"
+  [ngClass]="bannerClass"
+  [attr.role]="useAlertRole ? 'status' : null"
+  [attr.aria-live]="useAlertRole ? 'polite' : null"
+>
+  <i class="bwi tw-align-middle" [ngClass]="icon" *ngIf="icon" aria-hidden="true"></i>
+  <span class="tw-text-base tw-grow">
+    <ng-content></ng-content>
+  </span>
+  <button class="tw-border-0 tw-bg-transparent tw-text-contrast tw-p-0" (click)="onClose.emit()">
+    <i class="bwi bwi-close tw-text-sm" *ngIf="icon" aria-hidden="true"></i>
+  </button>
+</div>

components/src/banner/banner.component.spec.ts

@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { BannerComponent } from "./banner.component";
+
+describe("BannerComponent", () => {
+  let component: BannerComponent;
+  let fixture: ComponentFixture<BannerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [BannerComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BannerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create with alert", () => {
+    expect(component.useAlertRole).toBeTrue();
+    const el = fixture.nativeElement.children[0];
+    expect(el.getAttribute("role")).toEqual("status");
+    expect(el.getAttribute("aria-live")).toEqual("polite");
+  });
+
+  it("useAlertRole=false", () => {
+    component.useAlertRole = false;
+    fixture.autoDetectChanges();
+
+    expect(component.useAlertRole).toBeFalse();
+    const el = fixture.nativeElement.children[0];
+    expect(el.getAttribute("role")).toBeNull();
+    expect(el.getAttribute("aria-live")).toBeNull();
+  });
+});

components/src/banner/banner.component.ts

@@ -0,0 +1,39 @@
+import { Component, Input, OnInit, Output, EventEmitter } from "@angular/core";
+
+type BannerTypes = "premium" | "info" | "warning" | "danger";
+
+const defaultIcon: Record<BannerTypes, string> = {
+  premium: "bwi-star",
+  info: "bwi-info-circle",
+  warning: "bwi-exclamation-triangle",
+  danger: "bwi-error",
+};
+
+@Component({
+  selector: "bit-banner",
+  templateUrl: "./banner.component.html",
+})
+export class BannerComponent implements OnInit {
+  @Input("bannerType") bannerType: BannerTypes = "info";
+  @Input() icon: string;
+  @Input() useAlertRole = true;
+
+  @Output() onClose = new EventEmitter<void>();
+
+  ngOnInit(): void {
+    this.icon ??= defaultIcon[this.bannerType];
+  }
+
+  get bannerClass() {
+    switch (this.bannerType) {
+      case "danger":
+        return "tw-bg-danger-500";
+      case "info":
+        return "tw-bg-info-500";
+      case "premium":
+        return "tw-bg-success-500";
+      case "warning":
+        return "tw-bg-warning-500";
+    }
+  }
+}

components/src/banner/banner.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { BannerComponent } from "./banner.component";
+
+@NgModule({
+  imports: [CommonModule],
+  exports: [BannerComponent],
+  declarations: [BannerComponent],
+})
+export class BannerModule {}

components/src/banner/banner.stories.ts

@@ -0,0 +1,38 @@
+import { Meta, Story } from "@storybook/angular";
+
+import { BannerComponent } from "./banner.component";
+
+export default {
+  title: "Jslib/Banner",
+  component: BannerComponent,
+  args: {
+    bannerType: "warning",
+  },
+} as Meta;
+
+const Template: Story<BannerComponent> = (args: BannerComponent) => ({
+  props: args,
+  template: `
+    <bit-banner [bannerType]="bannerType">Content Really Long Text Lorem Ipsum Ipsum Ipsum <button>Button</button></bit-banner>
+  `,
+});
+
+export const Premium = Template.bind({});
+Premium.args = {
+  bannerType: "premium",
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  bannerType: "info",
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  bannerType: "warning",
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  bannerType: "danger",
+};

components/src/banner/index.ts

@@ -0,0 +1,2 @@
+export * from "./banner.component";
+export * from "./banner.module";

components/src/index.ts

@@ -1,3 +1,4 @@
 export * from "./badge";
+export * from "./banner";
 export * from "./button";
 export * from "./callout";