Add badge component

projects/elonkit/src/theme.scss

@@ -0,0 +1,123 @@
+@import './ui/alert/alert.component.theme';
+@import './ui/dropzone/dropzone.component.theme';
+@import './ui/inline-form-field/inline-form-field.component.theme';
+@import './ui/dropzone/dropzone.component.theme';
+@import './ui/avatar/avatar.component.theme';
+@import './ui//badge//badge.component.theme';
+
+$elonkit-default-theme: (
+  info:
+    mat-palette(
+      (
+        50: #e9f4ff,
+        100: #c8e3ff,
+        200: #a3d1ff,
+        300: #7ebfff,
+        400: #63b1ff,
+        500: #47a3ff,
+        600: #409bff,
+        700: #3791ff,
+        800: #2f88ff,
+        900: #2077ff,
+        A100: #fff,
+        A200: #fff,
+        A400: #cfe1ff,
+        A700: #b6d0ff,
+        contrast: (
+          50: #000,
+          100: #000,
+          200: #000,
+          300: #000,
+          400: #000,
+          500: #000,
+          600: #000,
+          700: #000,
+          800: #fff,
+          900: #fff,
+          A100: #000,
+          A200: #000,
+          A400: #000,
+          A700: #000
+        )
+      )
+    ),
+  success:
+    mat-palette(
+      (
+        50: #e7f9f2,
+        100: #c3efdf,
+        200: #9be4ca,
+        300: #73d9b5,
+        400: #55d1a5,
+        500: #37c995,
+        600: #31c38d,
+        700: #2abc82,
+        800: #23b578,
+        900: #16a967,
+        A100: #dcffee,
+        A200: #a9ffd6,
+        A400: #76ffbd,
+        A700: #5dffb1,
+        contrast: (
+          50: #000,
+          100: #000,
+          200: #000,
+          300: #000,
+          400: #000,
+          500: #000,
+          600: #000,
+          700: #000,
+          800: #000,
+          900: #fff,
+          A100: #000,
+          A200: #000,
+          A400: #000,
+          A700: #000
+        )
+      )
+    ),
+  danger:
+    mat-palette(
+      (
+        50: #fdf2e5,
+        100: #fadebe,
+        200: #f7c992,
+        300: #f3b366,
+        400: #f1a246,
+        500: #ee9225,
+        600: #ec8a21,
+        700: #e97f1b,
+        800: #e77516,
+        900: #e2630d,
+        A100: #fff,
+        A200: #ffe8da,
+        A400: #ffc7a7,
+        A700: #ffb78e,
+        contrast: (
+          50: #000,
+          100: #000,
+          200: #000,
+          300: #000,
+          400: #000,
+          500: #000,
+          600: #000,
+          700: #000,
+          800: #000,
+          900: #fff,
+          A100: #000,
+          A200: #000,
+          A400: #000,
+          A700: #000
+        )
+      )
+    )
+);
+
+@mixin elonkit-theme($theme, $elonkit-theme: $elonkit-default-theme) {
+  @include es-alert-theme($theme, $elonkit-theme);
+  @include es-dropzone-theme($theme, $elonkit-theme);
+  @include es-inline-form-field-theme($theme, $elonkit-theme);
+  @include es-paginator-theme($theme, $elonkit-theme);
+  @include es-avatar-theme($theme, $elonkit-theme);
+  @include es-badge-theme($theme, $elonkit-theme);
+}

projects/elonkit/src/theming/theming.scss

@@ -9,6 +9,7 @@
 @import '../ui/paginator/paginator.component.theme';
 @import '../ui/surface/surface.component.theme';
 @import '../ui/tooltip/tooltip.component.theme';
+@import './ui/badge/badge.component.theme';
 
 @function es-make-theme($es-theme) {
   $result: $es-theme;
@@ -45,4 +46,5 @@
   @include es-paginator-theme($theme, $es-theme);
   @include es-surface-theme($theme, $es-theme);
   @include es-tooltip-theme($theme, $es-theme);
+  @include es-badge-theme($theme, $es-theme);
 }

projects/elonkit/src/ui/avatar/__stories__/avatar-story-no-image-typography/avatar-story-no-image-typography.source.ts

@@ -3,6 +3,7 @@ export const AVATAR_STORY_NO_IMAGE_TYPOGRAPHY_SOURCE = {
   <es-avatar
     [size]="size"
     [variant]="variant"
+  >
     НФ
   </es-avatar>`
 };

projects/elonkit/src/ui/avatar/avatar-group.component.ts

@@ -13,7 +13,7 @@ import {
 } from '@angular/core';
 
 import { ESAvatarComponent } from './avatar.component';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntil, filter } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 
 @Component({
@@ -42,7 +42,6 @@ export class ESAvatarGroupComponent implements OnInit, AfterContentInit, OnDestr
    * @ignore
    */
   public ngOnInit() {
-    console.log(this.size);
     this._elementRef.nativeElement.style.setProperty('--size', `${this.size + `px`}`);
   }
 
@@ -51,11 +50,14 @@ export class ESAvatarGroupComponent implements OnInit, AfterContentInit, OnDestr
    */
   public ngAfterContentInit() {
     this.setAvatarsIndex(this.avatars);
-    this.avatars.changes.pipe(takeUntil(this.destroyed$)).subscribe((avatars) => {
-      if (avatars) {
+    this.avatars.changes
+      .pipe(
+        filter((avatars) => !!avatars),
+        takeUntil(this.destroyed$)
+      )
+      .subscribe((avatars) => {
         this.setAvatarsIndex(avatars);
-      }
-    });
+      });
   }
 
   private setAvatarsIndex = (avatars): void => {

projects/elonkit/src/ui/avatar/avatar.component.ts

@@ -46,10 +46,10 @@ export class ESAvatarComponent {
    */
   @Input()
   public get typography(): string {
-    return this._typography;
+    return this._typography || 'es-subtitle-2';
   }
   public set typography(value: string) {
-    this._typography = value || 'es-subtitle-2';
+    this._typography = value;
   }
   private _typography: string;
 

projects/elonkit/src/ui/avatar/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

projects/elonkit/src/ui/badge/__specs__/badge.spec.ts

@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+import { render } from '@testing-library/angular';
+
+import { ESBadgeModule } from '../badge.module';
+import { ESBadgeComponent } from '../badge.component';
+
+@Component({
+  template: ` <es-badge><span es-role="count">Count</span></es-badge> `
+})
+class BadgeWrapperComponent {}
+
+describe('Badge', () => {
+  it('Should change badge size', async () => {
+    const component = await render(ESBadgeComponent, {
+      componentProperties: {
+        size: 40
+      },
+      imports: [ESBadgeModule],
+      excludeComponentDeclaration: true
+    });
+
+    expect(component.fixture.componentInstance.size).toBe(40);
+  });
+
+  it('Should change badge offsetVertical', async () => {
+    const component = await render(ESBadgeComponent, {
+      componentProperties: {
+        offsetVertical: 10
+      },
+      imports: [ESBadgeModule],
+      excludeComponentDeclaration: true
+    });
+
+    expect(component.fixture.componentInstance.offsetVertical).toBe(10);
+  });
+
+  it('Should change badge offsetHorizontal', async () => {
+    const component = await render(ESBadgeComponent, {
+      componentProperties: {
+        offsetHorizontal: 20
+      },
+      imports: [ESBadgeModule],
+      excludeComponentDeclaration: true
+    });
+
+    expect(component.fixture.componentInstance.offsetHorizontal).toBe(20);
+  });
+
+  it('Should accept count', async () => {
+    const component = await render(BadgeWrapperComponent, {
+      imports: [ESBadgeModule]
+    });
+
+    expect(component.getByText('Count')).toBeInTheDocument();
+  });
+});

projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts

@@ -0,0 +1,24 @@
+export const BADGE_STORY_BASIC_SOURCE = {
+  html: `
+  <es-badge
+    [size]="size"
+    [color]="color"
+    [borderColor]="borderColor"
+    [borderSize]="borderSize"
+    [position]="position"
+  >
+    <es-avatar es-role="child"></es-avatar>
+  </es-badge>
+  <es-badge
+    [size]="size"
+    [color]="color"
+    [borderColor]="borderColor"
+    [borderSize]="borderSize"
+    [position]="position"
+  >
+    <button es-role="child" type="button" color="primary" mat-icon-button>
+      <mat-icon>favorite</mat-icon>
+    </button>
+  </es-badge>
+  `
+};

projects/elonkit/src/ui/badge/__stories__/badge-story-basic/index.ts

@@ -0,0 +1 @@
+export { BADGE_STORY_BASIC_SOURCE } from './badge-story-basic.source';

projects/elonkit/src/ui/badge/__stories__/badge-story-count/badge-story-count.source.ts

@@ -0,0 +1,26 @@
+export const BADGE_STORY_COUNT_SOURCE = {
+  html: `
+  <es-badge
+    [size]="size"
+    [color]="color"
+    [borderColor]="borderColor"
+    [borderSize]="borderSize"
+    [position]="position"
+  >
+    <span es-role="count"></span>
+    <es-avatar es-role="child"></es-avatar>
+  </es-badge>
+  <es-badge
+    [size]="size"
+    [color]="color"
+    [borderColor]="borderColor"
+    [borderSize]="borderSize"
+    [position]="position"
+  >
+    <span es-role="count"></span>
+    <button es-role="child" type="button" color="primary" mat-icon-button>
+      <mat-icon>favorite</mat-icon>
+    </button>
+  </es-badge>
+  `
+};

projects/elonkit/src/ui/badge/__stories__/badge-story-count/index.ts

@@ -0,0 +1 @@
+export { BADGE_STORY_COUNT_SOURCE } from './badge-story-count.source';

projects/elonkit/src/ui/badge/__stories__/badge-story-custom/badge-story-custom.source.ts

@@ -0,0 +1,22 @@
+export const BADGE_STORY_CUSTOM_SOURCE = {
+  html: `
+  <es-badge
+    [position]="position"
+    [positions]="positions"
+    [offsetHorizontal]="offsetHorizontal"
+    [offsetVertical]="offsetVertical"
+  >
+    <es-avatar es-role="child"></es-avatar>
+  </es-badge>
+  <es-badge
+    [position]="position"
+    [positions]="positions"
+    [offsetHorizontal]="offsetHorizontal"
+    [offsetVertical]="offsetVertical"
+  >
+    <button es-role="child" type="button" color="primary" mat-icon-button>
+      <mat-icon>favorite</mat-icon>
+    </button>
+  </es-badge>
+  `
+};

projects/elonkit/src/ui/badge/__stories__/badge-story-custom/index.ts

@@ -0,0 +1 @@
+export { BADGE_STORY_CUSTOM_SOURCE } from './badge-story-custom.source';

projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts

@@ -0,0 +1,22 @@
+export const BADGE_STORY_ICON_SOURCE = {
+  html: `
+    <es-badge
+      [size]="size"
+      [borderSize]="borderSize"
+      [position]="position"
+    >
+      <mat-icon es-role="icon">favorite</mat-icon>
+      <es-avatar es-role="child"></es-avatar>
+    </es-badge>
+    <es-badge
+      [size]="size"
+      [borderSize]="borderSize"
+      [position]="position"
+    >
+      <mat-icon es-role="icon">favorite</mat-icon>
+      <button es-role="child" type="button" color="primary" mat-icon-button>
+        <mat-icon>favorite</mat-icon>
+      </button>
+    </es-badge>
+  `
+};

projects/elonkit/src/ui/badge/__stories__/badge-story-icon/index.ts

@@ -0,0 +1 @@
+export { BADGE_STORY_ICON_SOURCE } from './badge-story-icon.source';