Component Library scaffolding (#625)

.prettierignore

@@ -1,5 +1,6 @@
 # Build directories
 dist
+.angular
 coverage
 
 # Github Workflows

components/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

components/.gitignore

@@ -0,0 +1,44 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+documentation.json
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

components/.storybook/main.js

@@ -0,0 +1,8 @@
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  framework: "@storybook/angular",
+  core: {
+    builder: "webpack5",
+  },
+};

components/.storybook/preview.js

@@ -0,0 +1,25 @@
+import { setCompodocJson } from "@storybook/addon-docs/angular";
+import { componentWrapperDecorator, addDecorator } from "@storybook/angular";
+
+import docJson from "../documentation.json";
+setCompodocJson(docJson);
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  docs: { inlineStories: true },
+};
+
+const decorator = componentWrapperDecorator(
+  (story) => `
+<div class="theme_light tw-px-5 tw-py-10 tw-border-2 tw-border-solid tw-border-secondary-300 tw-bg-[#ffffff]">${story}</div>
+<div class="theme_dark tw-mt-5 tw-px-5 tw-py-10 tw-bg-[#1f242e]">${story}</div>
+`
+);
+
+addDecorator(decorator);

components/.storybook/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.app.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../projects/**/*.spec.ts"],
+  "include": ["../src/**/*", "../projects/**/*"],
+  "files": ["./typings.d.ts"]
+}

components/.storybook/typings.d.ts

@@ -0,0 +1,4 @@
+declare module "*.md" {
+  const content: string;
+  export default content;
+}

components/README.md

@@ -0,0 +1,27 @@
+# Components
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.3.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

components/angular.json

@@ -0,0 +1,93 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "components": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/components",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss", "src/styles.css"],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/styles"]
+            },
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "components:build:production"
+            },
+            "development": {
+              "browserTarget": "components:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "components:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.css"],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "components"
+}

components/karma.conf.js

@@ -0,0 +1,42 @@
+/* eslint-disable */
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: "",
+    frameworks: ["jasmine", "@angular-devkit/build-angular"],
+    plugins: [
+      require("karma-jasmine"),
+      require("karma-chrome-launcher"),
+      require("karma-jasmine-html-reporter"),
+      require("karma-coverage"),
+      require("@angular-devkit/build-angular/plugins/karma"),
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true, // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require("path").join(__dirname, "./coverage/components"),
+      subdir: ".",
+      reporters: [{ type: "html" }, { type: "text-summary" }],
+    },
+    reporters: ["progress", "kjhtml"],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ["Chrome"],
+    singleRun: false,
+    restartOnFileChange: true,
+  });
+};

components/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "components",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
+    "storybook": "npm run docs:json && start-storybook -p 6006",
+    "build-storybook": "npm run docs:json && build-storybook"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^12.2.13",
+    "@angular/cdk": "^12.2.13",
+    "@angular/common": "^12.2.13",
+    "@angular/compiler": "^12.2.13",
+    "@angular/core": "^12.2.13",
+    "@angular/forms": "^12.2.13",
+    "@angular/platform-browser": "^12.2.13",
+    "@angular/platform-browser-dynamic": "^12.2.13",
+    "@bitwarden/jslib-angular": "file:../angular",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^12.2.13",
+    "@angular/cli": "^12.2.13",
+    "@angular/compiler-cli": "^12.2.13",
+    "@angular/elements": "^12.2.13",
+    "@babel/core": "^7.16.10",
+    "@compodoc/compodoc": "^1.1.16",
+    "@storybook/addon-actions": "^6.4.18",
+    "@storybook/addon-essentials": "^6.4.18",
+    "@storybook/addon-links": "^6.4.18",
+    "@storybook/angular": "^6.4.18",
+    "@storybook/builder-webpack5": "^6.4.18",
+    "@storybook/manager-webpack5": "^6.4.18",
+    "@types/jasmine": "~3.10.0",
+    "@types/node": "^12.11.1",
+    "@webcomponents/custom-elements": "^1.5.0",
+    "autoprefixer": "^10.4.2",
+    "babel-loader": "^8.2.3",
+    "jasmine-core": "~3.10.0",
+    "karma": "~6.3.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.1.0",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "~1.7.0",
+    "postcss": "^8.4.6",
+    "tailwindcss": "^3.0.18",
+    "typescript": "~4.3.5"
+  }
+}

components/src/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-root",
+  template: "",
+})
+export class AppComponent {
+  title = "components";
+}

components/src/app/app.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+
+import { AppComponent } from "./app.component";
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, CommonModule],
+  providers: [{ provide: "WINDOW", useValue: window }],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

components/src/badge/badge.component.ts

@@ -0,0 +1,39 @@
+import { Component, Input } from "@angular/core";
+
+type BadgeTypes = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
+
+const styles: Record<BadgeTypes, string[]> = {
+  primary: ["tw-bg-primary-500", "hover:tw-bg-primary-700"],
+  secondary: ["tw-bg-secondary-500", "hover:tw-bg-secondary-700"],
+  success: ["tw-bg-success-500", "hover:tw-bg-success-700"],
+  danger: ["tw-bg-danger-500", "hover:tw-bg-danger-700"],
+  warning: ["tw-bg-warning-500", "hover:tw-bg-warning-700"],
+  info: ["tw-bg-info-500", "hover:tw-bg-info-700"],
+};
+
+@Component({
+  selector: "bit-badge",
+  template: `<span [ngClass]="classes"><ng-content></ng-content></span>`,
+})
+export class BadgeComponent {
+  @Input()
+  type: BadgeTypes = "primary";
+
+  get classes() {
+    return [
+      "tw-inline-block",
+      "tw-py-0.5",
+      "tw-px-1",
+      "tw-font-bold",
+      "tw-leading-none",
+      "tw-text-center",
+      "tw-text-contrast",
+      "tw-align-baseline",
+      "tw-rounded",
+      "tw-border-collapse",
+      "tw-box-border",
+      "tw-whitespace-no-wrap",
+      "tw-text-xs",
+    ].concat(styles[this.type]);
+  }
+}

components/src/badge/badge.module.ts

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

components/src/badge/badge.stories.ts

@@ -0,0 +1,46 @@
+import { Meta, Story } from "@storybook/angular";
+
+import { BadgeComponent } from "./badge.component";
+
+export default {
+  title: "Jslib/Badge",
+  component: BadgeComponent,
+  args: {
+    type: "primary",
+  },
+} as Meta;
+
+const Template: Story<BadgeComponent> = (args: BadgeComponent) => ({
+  props: args,
+  template: `
+    <span class="tw-text-main">Test </span><bit-badge [type]="type">Content</bit-badge>
+  `,
+});
+
+export const Primary = Template.bind({});
+Primary.args = {};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  type: "secondary",
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  type: "success",
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  type: "danger",
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  type: "warning",
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  type: "info",
+};

components/src/badge/index.ts

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

components/src/button/Button.stories.ts

@@ -0,0 +1,49 @@
+import { Meta, Story } from "@storybook/angular";
+
+import { ButtonComponent } from "./button.component";
+
+// More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
+export default {
+  title: "Jslib/Button",
+  component: ButtonComponent,
+  args: {
+    buttonType: "primary",
+  },
+  // More on argTypes: https://storybook.js.org/docs/angular/api/argtypes
+} as Meta;
+
+// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
+const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
+  props: args,
+  template: `<button bit-button [buttonType]="buttonType" [block]="block">Test</button>`,
+});
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/angular/writing-stories/args
+Primary.args = {
+  buttonType: "primary",
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  buttonType: "secondary",
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  buttonType: "danger",
+};
+
+const DisabledTemplate: Story = (args) => ({
+  props: args,
+  template: `
+    <button bit-button disabled buttonType="primary" class="tw-mr-2">Primary</button>
+    <button bit-button disabled buttonType="secondary" class="tw-mr-2">Secondary</button>
+    <button bit-button disabled buttonType="danger" class="tw-mr-2">Danger</button>
+  `,
+});
+
+export const Disabled = DisabledTemplate.bind({});
+Disabled.args = {
+  size: "small",
+};

components/src/button/button.component.spec.ts

@@ -0,0 +1,57 @@
+import { Component } from "@angular/core";
+import { TestBed, waitForAsync } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+
+import { ButtonModule } from "./index";
+
+describe("Button", () => {
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [ButtonModule],
+        declarations: [TestApp],
+      });
+
+      TestBed.compileComponents();
+    })
+  );
+
+  it("should apply classes based on type", () => {
+    const fixture = TestBed.createComponent(TestApp);
+
+    const testAppComponent: TestApp = fixture.debugElement.componentInstance;
+    const buttonDebugElement = fixture.debugElement.query(By.css("button"));
+    const linkDebugElement = fixture.debugElement.query(By.css("a"));
+
+    testAppComponent.buttonType = "primary";
+    fixture.detectChanges();
+    expect(buttonDebugElement.nativeElement.classList.contains("tw-bg-primary-500")).toBe(true);
+    expect(linkDebugElement.nativeElement.classList.contains("tw-bg-primary-500")).toBe(true);
+
+    testAppComponent.buttonType = "secondary";
+    fixture.detectChanges();
+    expect(buttonDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);
+    expect(linkDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);
+
+    testAppComponent.buttonType = "danger";
+    fixture.detectChanges();
+    expect(buttonDebugElement.nativeElement.classList.contains("tw-border-danger-500")).toBe(true);
+    expect(linkDebugElement.nativeElement.classList.contains("tw-border-danger-500")).toBe(true);
+
+    testAppComponent.buttonType = null;
+    fixture.detectChanges();
+    expect(buttonDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);
+    expect(linkDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);
+  });
+});
+
+@Component({
+  selector: "test-app",
+  template: `
+    <button type="button" bit-button [buttonType]="buttonType">Button</button>
+    <a href="#" bit-button [buttonType]="buttonType"> Link </a>
+  `,
+})
+class TestApp {
+  buttonType: string;
+}

components/src/button/button.component.ts

@@ -0,0 +1,77 @@
+import { Input, HostBinding, OnChanges, Directive } from "@angular/core";
+
+export type ButtonTypes = "primary" | "secondary" | "danger";
+
+const buttonStyles: Record<ButtonTypes, string> = {
+  primary: [
+    "tw-border-primary-500",
+    "tw-bg-primary-500",
+    "!tw-text-contrast",
+    "hover:tw-bg-primary-700",
+    "hover:tw-border-primary-700",
+    "focus:tw-bg-primary-700",
+    "focus:tw-border-primary-700",
+  ].join(" "),
+  secondary: [
+    "tw-bg-transparent",
+    "tw-border-text-muted",
+    "!tw-text-muted",
+    "hover:tw-bg-secondary-500",
+    "hover:tw-border-secondary-500",
+    "hover:tw-text-contrast",
+    "focus:tw-bg-secondary-500",
+    "focus:tw-border-secondary-500",
+    "focus:tw-text-contrast",
+  ].join(" "),
+  danger: [
+    "tw-bg-transparent",
+    "tw-border-danger-500",
+    "!tw-text-danger",
+    "hover:tw-bg-danger-500",
+    "hover:tw-border-danger-500",
+    "hover:tw-text-contrast",
+    "focus:tw-bg-danger-500",
+    "focus:tw-border-danger-500",
+    "focus:tw-text-contrast",
+  ].join(" "),
+};
+
+@Directive({
+  selector: "button[bit-button], a[bit-button]",
+})
+export class ButtonComponent implements OnChanges {
+  @HostBinding("class") @Input("class") classList = "";
+
+  @Input()
+  buttonType: ButtonTypes = "secondary";
+
+  @Input()
+  block = false;
+
+  ngOnChanges() {
+    this.classList = this.classes.join(" ");
+  }
+
+  get classes(): string[] {
+    return [
+      "tw-font-semibold",
+      "tw-py-1.5",
+      "tw-px-3",
+      "tw-rounded",
+      "tw-transition",
+      "tw-border",
+      "tw-border-solid",
+      "tw-text-center",
+      "hover:tw-no-underline",
+      "disabled:tw-bg-secondary-100",
+      "disabled:tw-border-secondary-100",
+      "disabled:!tw-text-main",
+      "focus:tw-outline-none",
+      "focus:tw-ring",
+      "focus:tw-ring-offset-2",
+      "focus:tw-ring-primary-700",
+      this.block ? "tw-w-full tw-block" : "",
+      buttonStyles[this.buttonType ?? "secondary"],
+    ];
+  }
+}

components/src/button/button.module.ts

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

components/src/button/index.ts

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

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

components/src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Components</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

components/src/index.ts

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

components/src/main.ts

@@ -0,0 +1,7 @@
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+
+import { AppModule } from "./app/app.module";
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err)); // eslint-disable-line

components/src/polyfills.ts

@@ -0,0 +1,52 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import "zone.js"; // Included with Angular CLI.
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

components/src/stories/Introduction.stories.mdx

@@ -0,0 +1,195 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Jslib/Introduction" />
+
+<style>{`
+  .subheading {
+    --mediumdark: '#999999';
+    font-weight: 900;
+    font-size: 13px;
+    color: #999;
+    letter-spacing: 6px;
+    line-height: 24px;
+    text-transform: uppercase;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+
+  .link-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    row-gap: 10px;
+  }
+
+  @media (min-width: 620px) {
+    .link-list {
+      row-gap: 20px;
+      column-gap: 20px;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media all and (-ms-high-contrast:none) {
+  .link-list {
+      display: -ms-grid;
+      -ms-grid-columns: 1fr 1fr;
+      -ms-grid-rows: 1fr 1fr;
+    }
+  }
+
+  .link-item {
+    display: block;
+    padding: 20px 30px 20px 15px;
+    border: 1px solid #00000010;
+    border-radius: 5px;
+    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+    color: #333333;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .link-item:hover {
+    border-color: #1EA7FD50;
+    transform: translate3d(0, -3px, 0);
+    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+  }
+
+  .link-item:active {
+    border-color: #1EA7FD;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .link-item strong {
+    font-weight: 700;
+    display: block;
+    margin-bottom: 2px;
+  }
+
+  .link-item img {
+    height: 40px;
+    width: 40px;
+    margin-right: 15px;
+    flex: none;
+  }
+
+  .link-item span {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .tip {
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: 700;
+    background: #E7FDD8;
+    color: #66BF3C;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
+  }
+
+  .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .tip-wrapper code {
+    font-size: 12px;
+    display: inline-block;
+  }
+
+
+`}</style>
+
+# Welcome to Storybook
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `src/stories` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<div className="subheading">Configure</div>
+
+<div className="link-list">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/addons/addon-types"
+    target="_blank"
+  >
+    <span>
+      <strong>Presets for popular tools</strong>
+      Easy setup for TypeScript, SCSS and more.
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/webpack"
+    target="_blank"
+  >
+    <span>
+      <strong>Build configuration</strong>
+      How to customize webpack and Babel
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/styling-and-css"
+    target="_blank"
+  >
+    <span>
+      <strong>Styling</strong>
+      How to load and configure CSS libraries
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+    target="_blank"
+  >
+    <span>
+      <strong>Data</strong>
+      Providers and mocking for data libraries
+    </span>
+  </a>
+</div>
+
+<div className="subheading">Learn</div>
+
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
+    <span>
+      <strong>Storybook documentation</strong>
+      Configure, customize, and extend
+    </span>
+  </a>
+  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+    <span>
+      <strong>In-depth guides</strong>
+      Best practices from leading teams
+    </span>
+  </a>
+  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+    <span>
+      <strong>GitHub project</strong>
+      View the source and add issues
+    </span>
+  </a>
+  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
+    <span>
+      <strong>Discord chat</strong>
+      Chat with maintainers and the community
+    </span>
+  </a>
+</div>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Edit the Markdown in{" "}
+  <code>src/stories/Introduction.stories.mdx</code>
+</div>

components/src/styles.css

@@ -0,0 +1,11 @@
+/* You can add global styles to this file, and also import other style files */
+
+@import "./tw-theme.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-size: 14px;
+}

components/src/styles.scss

@@ -0,0 +1,42 @@
+@import "../../angular/src/scss/webfonts.css";
+@import "./../../../src/scss/variables";
+@import "../../angular/src/scss/bwicons/styles/style.scss";
+@import "../../angular/src/scss/icons.scss";
+
+@import "~bootstrap/scss/_functions";
+@import "~bootstrap/scss/_variables";
+@import "~bootstrap/scss/_mixins";
+@import "~bootstrap/scss/_root";
+@import "~bootstrap/scss/_reboot";
+@import "~bootstrap/scss/_type";
+@import "~bootstrap/scss/_images";
+@import "~bootstrap/scss/_code";
+@import "~bootstrap/scss/_grid";
+@import "~bootstrap/scss/_tables";
+@import "~bootstrap/scss/_forms";
+@import "~bootstrap/scss/_buttons";
+@import "~bootstrap/scss/_transitions";
+@import "~bootstrap/scss/_dropdown";
+@import "~bootstrap/scss/_button-group";
+@import "~bootstrap/scss/_input-group";
+@import "~bootstrap/scss/_custom-forms";
+@import "~bootstrap/scss/_nav";
+@import "~bootstrap/scss/_navbar";
+@import "~bootstrap/scss/_card";
+@import "~bootstrap/scss/_breadcrumb";
+@import "~bootstrap/scss/_pagination";
+@import "~bootstrap/scss/_badge";
+@import "~bootstrap/scss/_jumbotron";
+@import "~bootstrap/scss/_alert";
+@import "~bootstrap/scss/_progress";
+@import "~bootstrap/scss/_media";
+@import "~bootstrap/scss/_list-group";
+@import "~bootstrap/scss/_close";
+//@import "~bootstrap/scss/_toasts";
+@import "~bootstrap/scss/_modal";
+@import "~bootstrap/scss/_tooltip";
+@import "~bootstrap/scss/_popover";
+@import "~bootstrap/scss/_carousel";
+@import "~bootstrap/scss/_spinners";
+@import "~bootstrap/scss/_utilities";
+@import "~bootstrap/scss/_print";

components/src/test.ts

@@ -0,0 +1,28 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+// eslint-disable-next-line
+import "zone.js/testing";
+
+import { getTestBed } from "@angular/core/testing";
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from "@angular/platform-browser-dynamic/testing";
+
+declare const require: {
+  context(
+    path: string,
+    deep?: boolean,
+    filter?: RegExp
+  ): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+
+// Then we find all the tests.
+const context = require.context("./", true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

components/src/tw-theme.css

@@ -0,0 +1,64 @@
+:root {
+  --color-background: #ffffff;
+  --color-background-elevation: #fbfbfb;
+
+  --color-primary-300: #6795e8;
+  --color-primary-500: #175ddc;
+  --color-primary-700: #1252a3;
+
+  --color-secondary-100: #f0f0f0;
+  --color-secondary-300: #ced4dc;
+  --color-secondary-500: #89929f;
+  --color-secondary-700: #212529;
+
+  --color-success-500: #017e45;
+  --color-success-700: #003f23;
+
+  --color-danger-500: #c83522;
+  --color-danger-700: #641a11;
+
+  --color-warning-500: #8b6609;
+  --color-warning-700: #463304;
+
+  --color-info-500: #555555;
+  --color-info-700: #2b2b2b;
+
+  --color-text-main: #212529;
+  --color-text-muted: #6d757e;
+  --color-text-contrast: #ffffff;
+  --tw-ring-offset-color: #1f242e;
+}
+
+.theme_light {
+  /* should be left empty as white is the default */
+}
+
+.theme_dark {
+  --color-background: #1f242e;
+  --color-background-elevation: #161c26;
+
+  --color-primary-300: #175ddc;
+  --color-primary-500: #6a99f0;
+  --color-primary-700: #b4ccf9;
+
+  --color-secondary-100: #2f343d;
+  --color-secondary-300: #6e7689;
+  --color-secondary-500: #bac0ce;
+  --color-secondary-700: #ffffff;
+
+  --color-success-500: #52e07c;
+  --color-success-700: #a8efbe;
+
+  --color-danger-500: #ff8d85;
+  --color-danger-700: #ffbfbb;
+
+  --color-warning-500: #ffeb66;
+  --color-warning-700: #fff5b3;
+
+  --color-info-500: #a4b0c6;
+  --color-info-700: #d1d7e2;
+
+  --color-text-main: #ffffff;
+  --color-text-muted: #bac0ce;
+  --color-text-contrast: #191e26;
+}

components/src/utils/i18n-mock.service.ts

@@ -0,0 +1,19 @@
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+
+export class I18nMockService implements I18nService {
+  locale: string;
+  supportedTranslationLocales: string[];
+  translationLocale: string;
+  collator: Intl.Collator;
+  localeNames: Map<string, string>;
+
+  constructor(private lookupTable: Record<string, string>) {}
+
+  t(id: string, p1?: string, p2?: string, p3?: string) {
+    return this.lookupTable[id];
+  }
+
+  translate(id: string, p1?: string, p2?: string, p3?: string) {
+    return this.t(id, p1, p2, p3);
+  }
+}

components/tailwind.config.base.js

@@ -0,0 +1,59 @@
+/* eslint-disable */
+const colors = require("tailwindcss/colors");
+
+module.exports = {
+  prefix: "tw-",
+  content: ["./src/**/*.{html,ts}", "./jslib/components/src/**/*.{html,ts}"],
+  safelist: [],
+  corePlugins: { preflight: false },
+  theme: {
+    colors: {
+      transparent: colors.transparent,
+      current: colors.current,
+      primary: {
+        300: "var(--color-primary-300)",
+        500: "var(--color-primary-500)",
+        700: "var(--color-primary-700)",
+      },
+      secondary: {
+        100: "var(--color-secondary-100)",
+        300: "var(--color-secondary-300)",
+        500: "var(--color-secondary-500)",
+        700: "var(--color-secondary-700)",
+      },
+      success: {
+        500: "var(--color-success-500)",
+        700: "var(--color-success-700)",
+      },
+      danger: {
+        500: "var(--color-danger-500)",
+        700: "var(--color-danger-700)",
+      },
+      warning: {
+        500: "var(--color-warning-500)",
+        700: "var(--color-warning-700)",
+      },
+      info: {
+        500: "var(--color-info-500)",
+        700: "var(--color-info-700)",
+      },
+      "text-muted": "var(--color-text-muted)",
+      background: "var(--color-background)",
+      "background-elevation": "var(--color-background-elevation)",
+    },
+    textColor: {
+      main: "var(--color-text-main)",
+      muted: "var(--color-text-muted)",
+      contrast: "var(--color-text-contrast)",
+      success: "var(--color-success-500)",
+      danger: "var(--color-danger-500)",
+      warning: "var(--color-warning-500)",
+      info: "var(--color-info-500)",
+    },
+    ringOffsetColor: ({ theme }) => ({
+      DEFAULT: theme("colors.background"),
+      ...theme("colors"),
+    }),
+  },
+  plugins: [],
+};

components/tailwind.config.js

@@ -0,0 +1,6 @@
+/* eslint-disable */
+const config = require("./tailwind.config.base");
+
+config.content = ["./src/**/*.{html,ts}", "./.storybook/preview.js"];
+
+module.exports = config;

components/tsconfig.app.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"],
+  "exclude": ["**/*.stories.*"]
+}

components/tsconfig.json

@@ -0,0 +1,32 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": false,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2017",
+    "module": "es2020",
+    "lib": ["es2020", "dom"],
+    "paths": {
+      "jslib-common/*": ["../common/src/*"]
+    }
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

components/tsconfig.spec.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": ["jasmine"]
+  },
+  "files": ["src/test.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+}