1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-22 16:29:09 +01:00

[BEEEP] Add banner component (#759)

This commit is contained in:
Oscar Hinton 2022-04-25 18:02:09 +02:00 committed by GitHub
parent 3b8ea9f97d
commit 5c88dcf0cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 140 additions and 0 deletions

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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";
}
}
}

View File

@ -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 {}

View File

@ -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",
};

View File

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

View File

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