Component Library scaffolding (#625)

components/src/callout/callout.component.html

@@ -0,0 +1,14 @@
+<div
+  class="tw-py-3 tw-px-5 tw-mb-4 tw-leading-5 tw-rounded tw-bg-background-elevation tw-border tw-border-secondary-300 tw-border-solid tw-box-border tw-border-l-8 tw-text-main"
+  [ngClass]="calloutClass"
+>
+  <h3
+    class="tw-mt-0 tw-mb-2 tw-text-base tw-font-bold tw-uppercase"
+    [ngClass]="headerClass"
+    *ngIf="title"
+  >
+    <i class="bwi {{ icon }}" *ngIf="icon" aria-hidden="true"></i>
+    {{ title }}
+  </h3>
+  <ng-content></ng-content>
+</div>

components/src/callout/callout.component.spec.ts

@@ -0,0 +1,59 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { I18nMockService } from "src/utils/i18n-mock.service";
+
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+
+import { CalloutComponent } from ".";
+
+describe("Callout", () => {
+  let component: CalloutComponent;
+  let fixture: ComponentFixture<CalloutComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CalloutComponent],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () =>
+            new I18nMockService({
+              warning: "Warning",
+              error: "Error",
+            }),
+        },
+      ],
+    });
+    fixture = TestBed.createComponent(CalloutComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe("default state", () => {
+    it("success", () => {
+      component.type = "success";
+      fixture.detectChanges();
+      expect(component.title).toBeUndefined();
+      expect(component.icon).toBe("bwi-check");
+    });
+
+    it("info", () => {
+      component.type = "info";
+      fixture.detectChanges();
+      expect(component.title).toBeUndefined();
+      expect(component.icon).toBe("bwi-info-circle");
+    });
+
+    it("warning", () => {
+      component.type = "warning";
+      fixture.detectChanges();
+      expect(component.title).toBe("Warning");
+      expect(component.icon).toBe("bwi-exclamation-triangle");
+    });
+
+    it("danger", () => {
+      component.type = "danger";
+      fixture.detectChanges();
+      expect(component.title).toBe("Error");
+      expect(component.icon).toBe("bwi-error");
+    });
+  });
+});

components/src/callout/callout.component.ts

@@ -0,0 +1,63 @@
+import { Component, Input, OnInit } from "@angular/core";
+
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+
+type CalloutTypes = "success" | "info" | "warning" | "danger";
+
+const defaultIcon: Record<CalloutTypes, string> = {
+  success: "bwi-check",
+  info: "bwi-info-circle",
+  warning: "bwi-exclamation-triangle",
+  danger: "bwi-error",
+};
+
+const defaultI18n: Partial<Record<CalloutTypes, string>> = {
+  warning: "warning",
+  danger: "error",
+};
+
+@Component({
+  selector: "bit-callout",
+  templateUrl: "callout.component.html",
+})
+export class CalloutComponent implements OnInit {
+  @Input() type: CalloutTypes = "info";
+  @Input() icon: string;
+  @Input() title: string;
+  @Input() useAlertRole = false;
+
+  constructor(private i18nService: I18nService) {}
+
+  ngOnInit() {
+    this.icon ??= defaultIcon[this.type];
+    if (this.title == null && defaultI18n[this.type] != null) {
+      this.title = this.i18nService.t(defaultI18n[this.type]);
+    }
+  }
+
+  get calloutClass() {
+    switch (this.type) {
+      case "danger":
+        return "tw-border-l-danger-500";
+      case "info":
+        return "tw-border-l-info-500";
+      case "success":
+        return "tw-border-l-success-500";
+      case "warning":
+        return "tw-border-l-warning-500";
+    }
+  }
+
+  get headerClass() {
+    switch (this.type) {
+      case "danger":
+        return "tw-text-danger";
+      case "info":
+        return "tw-text-info";
+      case "success":
+        return "tw-text-success";
+      case "warning":
+        return "tw-text-warning";
+    }
+  }
+}

components/src/callout/callout.module.ts

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

components/src/callout/callout.stories.ts

@@ -0,0 +1,59 @@
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+
+import { I18nMockService } from "../utils/i18n-mock.service";
+
+import { CalloutComponent } from "./callout.component";
+
+export default {
+  title: "Jslib/Callout",
+  component: CalloutComponent,
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              warning: "Warning",
+              error: "Error",
+            });
+          },
+        },
+      ],
+    }),
+  ],
+  args: {
+    type: "warning",
+  },
+} as Meta;
+
+const Template: Story<CalloutComponent> = (args: CalloutComponent) => ({
+  props: args,
+  template: `
+    <bit-callout [type]="type" [title]="title">Content</bit-callout>
+  `,
+});
+
+export const Success = Template.bind({});
+Success.args = {
+  type: "success",
+  title: "Success",
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  type: "info",
+  title: "Info",
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  type: "warning",
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  type: "danger",
+};

components/src/callout/index.ts

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