From 3a1732ff95386b7deae0e212899b7d0d1b4ddfc4 Mon Sep 17 00:00:00 2001
From: Maxim <m.domanov@elonsoft.ru>
Date: Tue, 21 Jul 2020 14:12:57 +0300
Subject: [PATCH 1/3] feat(tag): Added tag component with stories and specs

---
 projects/elonkit/src/public-api.ts            |  1 +
 .../elonkit/src/ui/tag/__specs__/tag.spec.ts  | 72 +++++++++++++++++
 .../tag/__stories__/tag-story-basic/index.ts  |  1 +
 .../tag-story-basic/tag-story-basic.source.ts |  5 ++
 .../tag-story-customization/index.ts          |  1 +
 .../tag-story-customization.source.ts         |  5 ++
 .../tag/__stories__/tag-story-icon/index.ts   |  1 +
 .../tag-story-icon/tag-story-icon.source.ts   |  5 ++
 .../src/ui/tag/__stories__/tag.stories.mdx    | 79 +++++++++++++++++++
 projects/elonkit/src/ui/tag/index.ts          |  1 +
 projects/elonkit/src/ui/tag/ng-package.json   |  6 ++
 projects/elonkit/src/ui/tag/public-api.ts     |  2 +
 .../elonkit/src/ui/tag/tag.component.html     | 15 ++++
 .../elonkit/src/ui/tag/tag.component.scss     | 26 ++++++
 projects/elonkit/src/ui/tag/tag.component.ts  | 41 ++++++++++
 projects/elonkit/src/ui/tag/tag.module.ts     | 11 +++
 16 files changed, 272 insertions(+)
 create mode 100644 projects/elonkit/src/ui/tag/__specs__/tag.spec.ts
 create mode 100644 projects/elonkit/src/ui/tag/__stories__/tag-story-basic/index.ts
 create mode 100644 projects/elonkit/src/ui/tag/__stories__/tag-story-basic/tag-story-basic.source.ts
 create mode 100644 projects/elonkit/src/ui/tag/__stories__/tag-story-customization/index.ts
 create mode 100644 projects/elonkit/src/ui/tag/__stories__/tag-story-customization/tag-story-customization.source.ts
 create mode 100644 projects/elonkit/src/ui/tag/__stories__/tag-story-icon/index.ts
 create mode 100644 projects/elonkit/src/ui/tag/__stories__/tag-story-icon/tag-story-icon.source.ts
 create mode 100644 projects/elonkit/src/ui/tag/__stories__/tag.stories.mdx
 create mode 100644 projects/elonkit/src/ui/tag/index.ts
 create mode 100644 projects/elonkit/src/ui/tag/ng-package.json
 create mode 100644 projects/elonkit/src/ui/tag/public-api.ts
 create mode 100644 projects/elonkit/src/ui/tag/tag.component.html
 create mode 100644 projects/elonkit/src/ui/tag/tag.component.scss
 create mode 100644 projects/elonkit/src/ui/tag/tag.component.ts
 create mode 100644 projects/elonkit/src/ui/tag/tag.module.ts

diff --git a/projects/elonkit/src/public-api.ts b/projects/elonkit/src/public-api.ts
index 945ee2d0..09a425ff 100644
--- a/projects/elonkit/src/public-api.ts
+++ b/projects/elonkit/src/public-api.ts
@@ -4,3 +4,4 @@ export * from './ui/inline-form-field';
 export * from './ui/paginator';
 export * from './ui/timepicker';
 export * from './ui/action-heading';
+export * from './ui/tag';
diff --git a/projects/elonkit/src/ui/tag/__specs__/tag.spec.ts b/projects/elonkit/src/ui/tag/__specs__/tag.spec.ts
new file mode 100644
index 00000000..f0c3f1f6
--- /dev/null
+++ b/projects/elonkit/src/ui/tag/__specs__/tag.spec.ts
@@ -0,0 +1,72 @@
+import { render } from '@testing-library/angular';
+import { ESTagModule, ESTagComponent } from '..';
+import { Component } from '@angular/core';
+
+@Component({
+  template: `
+    <es-tag>Tag</es-tag>
+  `
+})
+class ESTagWrapperdComponent {}
+
+describe('Tag', () => {
+  it('Should show content', async () => {
+    const component = await render(ESTagWrapperdComponent, {
+      imports: [ESTagModule]
+    });
+
+    expect(component.getByText('Tag')).toBeInTheDocument();
+  });
+
+  it('Should show with default colors', async () => {
+    const component = await render(ESTagComponent, {
+      imports: [ESTagModule],
+      excludeComponentDeclaration: true
+    });
+
+    expect(component.fixture.nativeElement.querySelector('.es-tag').style.backgroundColor).toBe(
+      'rgb(0, 0, 0)'
+    );
+    expect(component.fixture.nativeElement.querySelector('.es-tag__text').style.color).toBe(
+      'rgb(255, 255, 255)'
+    );
+  });
+
+  it('Should change colors', async () => {
+    const component = await render(ESTagComponent, {
+      imports: [ESTagModule],
+      excludeComponentDeclaration: true,
+      componentProperties: {
+        color: 'rgb(255, 255, 1)',
+        textColor: 'rgb(255, 255, 2)'
+      }
+    });
+
+    expect(component.fixture.nativeElement.querySelector('.es-tag').style.backgroundColor).toBe(
+      'rgb(255, 255, 1)'
+    );
+    expect(component.fixture.nativeElement.querySelector('.es-tag__text').style.color).toBe(
+      'rgb(255, 255, 2)'
+    );
+  });
+
+  it('Should show right icon', async () => {
+    const component = await render(ESTagComponent, {
+      imports: [ESTagModule],
+      excludeComponentDeclaration: true,
+      componentProperties: {
+        icon: 'info'
+      }
+    });
+
+    expect(component.fixture.componentInstance.currentIcon).toEqual({ icon: 'info' });
+
+    component.fixture.componentInstance.icon = null;
+    component.fixture.componentInstance.svgIcon = 'test';
+    expect(component.fixture.componentInstance.currentIcon).toEqual({ svgIcon: 'test' });
+
+    component.fixture.componentInstance.icon = 'info';
+    component.fixture.componentInstance.svgIcon = 'test';
+    expect(component.fixture.componentInstance.currentIcon).toEqual({ icon: 'info' });
+  });
+});
diff --git a/projects/elonkit/src/ui/tag/__stories__/tag-story-basic/index.ts b/projects/elonkit/src/ui/tag/__stories__/tag-story-basic/index.ts
new file mode 100644
index 00000000..fbe125e1
--- /dev/null
+++ b/projects/elonkit/src/ui/tag/__stories__/tag-story-basic/index.ts
@@ -0,0 +1 @@
+export { TAG_STORY_BASIC_SOURCE } from './tag-story-basic.source';
diff --git a/projects/elonkit/src/ui/tag/__stories__/tag-story-basic/tag-story-basic.source.ts b/projects/elonkit/src/ui/tag/__stories__/tag-story-basic/tag-story-basic.source.ts
new file mode 100644
index 00000000..69bef242
--- /dev/null
+++ b/projects/elonkit/src/ui/tag/__stories__/tag-story-basic/tag-story-basic.source.ts
@@ -0,0 +1,5 @@
+export const TAG_STORY_BASIC_SOURCE = {
+  html: `
+  <es-tag>{{content}}</es-tag>
+  `
+};
diff --git a/projects/elonkit/src/ui/tag/__stories__/tag-story-customization/index.ts b/projects/elonkit/src/ui/tag/__stories__/tag-story-customization/index.ts
new file mode 100644
index 00000000..adcf4f91
--- /dev/null
+++ b/projects/elonkit/src/ui/tag/__stories__/tag-story-customization/index.ts
@@ -0,0 +1 @@
+export { TAG_STORY_CUSTOMIZATION_SOURCE } from './tag-story-customization.source';
diff --git a/projects/elonkit/src/ui/tag/__stories__/tag-story-customization/tag-story-customization.source.ts b/projects/elonkit/src/ui/tag/__stories__/tag-story-customization/tag-story-customization.source.ts
new file mode 100644
index 00000000..156f571e
--- /dev/null
+++ b/projects/elonkit/src/ui/tag/__stories__/tag-story-customization/tag-story-customization.source.ts
@@ -0,0 +1,5 @@
+export const TAG_STORY_CUSTOMIZATION_SOURCE = {
+  html: `
+  <es-tag [color]="color" [textColor]="textColor">{{content}}</es-tag>
+  `
+};
diff --git a/projects/elonkit/src/ui/tag/__stories__/tag-story-icon/index.ts b/projects/elonkit/src/ui/tag/__stories__/tag-story-icon/index.ts
new file mode 100644
index 00000000..758af6ee
--- /dev/null
+++ b/projects/elonkit/src/ui/tag/__stories__/tag-story-icon/index.ts
@@ -0,0 +1 @@
+export { TAG_STORY_ICON_SOURCE } from './tag-story-icon.source';
diff --git a/projects/elonkit/src/ui/tag/__stories__/tag-story-icon/tag-story-icon.source.ts b/projects/elonkit/src/ui/tag/__stories__/tag-story-icon/tag-story-icon.source.ts
new file mode 100644
index 00000000..0034e0ba
--- /dev/null
+++ b/projects/elonkit/src/ui/tag/__stories__/tag-story-icon/tag-story-icon.source.ts
@@ -0,0 +1,5 @@
+export const TAG_STORY_ICON_SOURCE = {
+  html: `
+  <es-tag [color]="color" [textColor]="textColor" [icon]="icon">{{content}}</es-tag>
+  `
+};
diff --git a/projects/elonkit/src/ui/tag/__stories__/tag.stories.mdx b/projects/elonkit/src/ui/tag/__stories__/tag.stories.mdx
new file mode 100644
index 00000000..afdc77df
--- /dev/null
+++ b/projects/elonkit/src/ui/tag/__stories__/tag.stories.mdx
@@ -0,0 +1,79 @@
+import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
+import { Preview } from '~storybook/components';
+
+import { withA11y } from '@storybook/addon-a11y';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, text, select, color } from '@storybook/addon-knobs';
+
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { ESTagModule, ESTagComponent } from '..';
+
+import { TAG_STORY_BASIC_SOURCE } from './tag-story-basic';
+
+import { TAG_STORY_CUSTOMIZATION_SOURCE } from './tag-story-customization';
+
+import { TAG_STORY_ICON_SOURCE } from './tag-story-icon';
+
+<Meta title='UI/Tag' decorators={[withA11y, withKnobs]} />
+
+# Tag
+
+A tags primary use is to place content in context.
+
+## Demos
+
+<Preview source={TAG_STORY_BASIC_SOURCE}>
+  <Story name='Basic' height='100px'>
+    {{
+      template: TAG_STORY_BASIC_SOURCE.html,
+      moduleMetadata: {
+        imports: [BrowserAnimationsModule, ESTagModule]
+      },
+      props: {
+        content: text('content', 'TAG')
+      }
+    }}
+  </Story>
+</Preview>
+
+We can customize element
+
+<Preview source={TAG_STORY_CUSTOMIZATION_SOURCE}>
+  <Story name='Customization' height='100px'>
+    {{
+      template: TAG_STORY_CUSTOMIZATION_SOURCE.html,
+      moduleMetadata: {
+        imports: [BrowserAnimationsModule, ESTagModule]
+      },
+      props: {
+        content: text('content', 'TAG'),
+        color: color('color', '#58D652'),
+        textColor: color('textColor', '#fff')
+      }
+    }}
+  </Story>
+</Preview>
+
+We can add an icon
+
+<Preview source={TAG_STORY_ICON_SOURCE}>
+  <Story name='Icon' height='100px'>
+    {{
+      template: TAG_STORY_ICON_SOURCE.html,
+      moduleMetadata: {
+        imports: [BrowserAnimationsModule, ESTagModule]
+      },
+      props: {
+        content: text('content', 'TAG'),
+        color: color('color', '#58D652'),
+        textColor: color('textColor', '#fff'),
+        icon: text('icon', 'info')
+      }
+    }}
+  </Story>
+</Preview>
+
+## API
+
+<Props of={ESTagComponent} />
diff --git a/projects/elonkit/src/ui/tag/index.ts b/projects/elonkit/src/ui/tag/index.ts
new file mode 100644
index 00000000..7e1a213e
--- /dev/null
+++ b/projects/elonkit/src/ui/tag/index.ts
@@ -0,0 +1 @@
+export * from './public-api';
diff --git a/projects/elonkit/src/ui/tag/ng-package.json b/projects/elonkit/src/ui/tag/ng-package.json
new file mode 100644
index 00000000..cf867348
--- /dev/null
+++ b/projects/elonkit/src/ui/tag/ng-package.json
@@ -0,0 +1,6 @@
+{
+  "lib": {
+    "entryFile": "public-api.ts",
+    "cssUrl": "inline"
+  }
+}
diff --git a/projects/elonkit/src/ui/tag/public-api.ts b/projects/elonkit/src/ui/tag/public-api.ts
new file mode 100644
index 00000000..7562cfc5
--- /dev/null
+++ b/projects/elonkit/src/ui/tag/public-api.ts
@@ -0,0 +1,2 @@
+export { ESTagComponent } from './tag.component';
+export { ESTagModule } from './tag.module';
diff --git a/projects/elonkit/src/ui/tag/tag.component.html b/projects/elonkit/src/ui/tag/tag.component.html
new file mode 100644
index 00000000..8ee654d4
--- /dev/null
+++ b/projects/elonkit/src/ui/tag/tag.component.html
@@ -0,0 +1,15 @@
+<div class="es-tag" [ngStyle]="{ backgroundColor: color }">
+  <div class="es-tag__content">
+    <mat-icon
+      *ngIf="currentIcon"
+      class="es-tag__icon es-tag__icon_display"
+      [svgIcon]="currentIcon.svgIcon"
+      [ngStyle]="{ color: textColor }"
+    >
+      {{ currentIcon.icon || '' }}
+    </mat-icon>
+    <div class="es-tag__text mat-small" [ngStyle]="{ color: textColor }">
+      <ng-content></ng-content>
+    </div>
+  </div>
+</div>
diff --git a/projects/elonkit/src/ui/tag/tag.component.scss b/projects/elonkit/src/ui/tag/tag.component.scss
new file mode 100644
index 00000000..441724bb
--- /dev/null
+++ b/projects/elonkit/src/ui/tag/tag.component.scss
@@ -0,0 +1,26 @@
+.es-tag {
+  border-radius: 4px;
+  padding: 3px 8px;
+  width: fit-content;
+
+  &__content {
+    align-items: center;
+    display: flex;
+  }
+
+  &__text {
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  &__icon {
+    font-size: 14px;
+    height: 14px !important;
+    line-height: 14px !important;
+    width: 14px !important;
+
+    &_display {
+      margin-right: 5px;
+    }
+  }
+}
diff --git a/projects/elonkit/src/ui/tag/tag.component.ts b/projects/elonkit/src/ui/tag/tag.component.ts
new file mode 100644
index 00000000..dc69b77a
--- /dev/null
+++ b/projects/elonkit/src/ui/tag/tag.component.ts
@@ -0,0 +1,41 @@
+import { Component, ChangeDetectionStrategy, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'es-tag',
+  templateUrl: './tag.component.html',
+  styleUrls: ['./tag.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
+})
+export class ESTagComponent {
+  /**
+   * The background color of tag.
+   */
+  @Input()
+  public color = '#000';
+
+  /**
+   * The color of text.
+   */
+  @Input()
+  public textColor = '#fff';
+
+  /**
+   * The icon displayed before the text.
+   */
+  @Input() icon?: string;
+
+  /**
+   * Override the icon displayed before the text.
+   */
+  @Input() svgIcon?: string;
+
+  get currentIcon() {
+    if (this.icon) {
+      return { icon: this.icon };
+    }
+    if (this.svgIcon) {
+      return { svgIcon: this.svgIcon };
+    }
+  }
+}
diff --git a/projects/elonkit/src/ui/tag/tag.module.ts b/projects/elonkit/src/ui/tag/tag.module.ts
new file mode 100644
index 00000000..3bdf6c76
--- /dev/null
+++ b/projects/elonkit/src/ui/tag/tag.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ESTagComponent } from './tag.component';
+import { MatIconModule } from '@angular/material/icon';
+
+@NgModule({
+  imports: [CommonModule, MatIconModule],
+  declarations: [ESTagComponent],
+  exports: [ESTagComponent]
+})
+export class ESTagModule {}

From 3727970d89052991a1158ac63f3d96dc531c9b93 Mon Sep 17 00:00:00 2001
From: Maxim <m.domanov@elonsoft.ru>
Date: Thu, 10 Sep 2020 13:52:59 +0300
Subject: [PATCH 2/3] refactor(tag): fix notices, add example for svg icon

---
 .../tag-story-basic/tag-story-basic.source.ts |   2 +-
 .../tag-story-customization/index.ts          |   1 -
 .../tag-story-customization.source.ts         |   5 -
 .../tag/__stories__/tag-story-icon/index.ts   |   1 -
 .../tag-story-icon/tag-story-icon.source.ts   |   5 -
 .../__stories__/tag-story-svg-icon/index.ts   |   3 +
 .../tag-story-svg-icon.component.ts           |  20 ++++
 .../tag-story-svg-icon.module.ts              |  12 ++
 .../tag-story-svg-icon.source.ts              |   5 +
 .../src/ui/tag/__stories__/tag.stories.mdx    | 103 +++++++++---------
 projects/elonkit/src/ui/tag/ng-package.json   |   3 +-
 .../elonkit/src/ui/tag/tag.component.html     |   2 +-
 .../elonkit/src/ui/tag/tag.component.scss     |   9 +-
 projects/elonkit/src/ui/tag/tag.component.ts  |  15 ++-
 projects/elonkit/src/ui/tag/tag.module.ts     |   2 +-
 15 files changed, 112 insertions(+), 76 deletions(-)
 delete mode 100644 projects/elonkit/src/ui/tag/__stories__/tag-story-customization/index.ts
 delete mode 100644 projects/elonkit/src/ui/tag/__stories__/tag-story-customization/tag-story-customization.source.ts
 delete mode 100644 projects/elonkit/src/ui/tag/__stories__/tag-story-icon/index.ts
 delete mode 100644 projects/elonkit/src/ui/tag/__stories__/tag-story-icon/tag-story-icon.source.ts
 create mode 100644 projects/elonkit/src/ui/tag/__stories__/tag-story-svg-icon/index.ts
 create mode 100644 projects/elonkit/src/ui/tag/__stories__/tag-story-svg-icon/tag-story-svg-icon.component.ts
 create mode 100644 projects/elonkit/src/ui/tag/__stories__/tag-story-svg-icon/tag-story-svg-icon.module.ts
 create mode 100644 projects/elonkit/src/ui/tag/__stories__/tag-story-svg-icon/tag-story-svg-icon.source.ts

diff --git a/projects/elonkit/src/ui/tag/__stories__/tag-story-basic/tag-story-basic.source.ts b/projects/elonkit/src/ui/tag/__stories__/tag-story-basic/tag-story-basic.source.ts
index 69bef242..3955a6c1 100644
--- a/projects/elonkit/src/ui/tag/__stories__/tag-story-basic/tag-story-basic.source.ts
+++ b/projects/elonkit/src/ui/tag/__stories__/tag-story-basic/tag-story-basic.source.ts
@@ -1,5 +1,5 @@
 export const TAG_STORY_BASIC_SOURCE = {
   html: `
-  <es-tag>{{content}}</es-tag>
+    <es-tag [color]="color" [textColor]="textColor" [icon]="icon">{{content}}</es-tag>
   `
 };
diff --git a/projects/elonkit/src/ui/tag/__stories__/tag-story-customization/index.ts b/projects/elonkit/src/ui/tag/__stories__/tag-story-customization/index.ts
deleted file mode 100644
index adcf4f91..00000000
--- a/projects/elonkit/src/ui/tag/__stories__/tag-story-customization/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { TAG_STORY_CUSTOMIZATION_SOURCE } from './tag-story-customization.source';
diff --git a/projects/elonkit/src/ui/tag/__stories__/tag-story-customization/tag-story-customization.source.ts b/projects/elonkit/src/ui/tag/__stories__/tag-story-customization/tag-story-customization.source.ts
deleted file mode 100644
index 156f571e..00000000
--- a/projects/elonkit/src/ui/tag/__stories__/tag-story-customization/tag-story-customization.source.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const TAG_STORY_CUSTOMIZATION_SOURCE = {
-  html: `
-  <es-tag [color]="color" [textColor]="textColor">{{content}}</es-tag>
-  `
-};
diff --git a/projects/elonkit/src/ui/tag/__stories__/tag-story-icon/index.ts b/projects/elonkit/src/ui/tag/__stories__/tag-story-icon/index.ts
deleted file mode 100644
index 758af6ee..00000000
--- a/projects/elonkit/src/ui/tag/__stories__/tag-story-icon/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { TAG_STORY_ICON_SOURCE } from './tag-story-icon.source';
diff --git a/projects/elonkit/src/ui/tag/__stories__/tag-story-icon/tag-story-icon.source.ts b/projects/elonkit/src/ui/tag/__stories__/tag-story-icon/tag-story-icon.source.ts
deleted file mode 100644
index 0034e0ba..00000000
--- a/projects/elonkit/src/ui/tag/__stories__/tag-story-icon/tag-story-icon.source.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const TAG_STORY_ICON_SOURCE = {
-  html: `
-  <es-tag [color]="color" [textColor]="textColor" [icon]="icon">{{content}}</es-tag>
-  `
-};
diff --git a/projects/elonkit/src/ui/tag/__stories__/tag-story-svg-icon/index.ts b/projects/elonkit/src/ui/tag/__stories__/tag-story-svg-icon/index.ts
new file mode 100644
index 00000000..e885dfee
--- /dev/null
+++ b/projects/elonkit/src/ui/tag/__stories__/tag-story-svg-icon/index.ts
@@ -0,0 +1,3 @@
+export { TAG_STORY_SVG_ICON_SOURCE } from './tag-story-svg-icon.source';
+export { TagStorySvgIconModule } from './tag-story-svg-icon.module';
+export { TagStorySvgIconComponent } from './tag-story-svg-icon.component';
diff --git a/projects/elonkit/src/ui/tag/__stories__/tag-story-svg-icon/tag-story-svg-icon.component.ts b/projects/elonkit/src/ui/tag/__stories__/tag-story-svg-icon/tag-story-svg-icon.component.ts
new file mode 100644
index 00000000..c15bd3a2
--- /dev/null
+++ b/projects/elonkit/src/ui/tag/__stories__/tag-story-svg-icon/tag-story-svg-icon.component.ts
@@ -0,0 +1,20 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Component({
+  selector: 'es-tag-story-svg-icon',
+  template: `<es-tag svgIcon="warning">{{ content }}</es-tag>`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TagStorySvgIconComponent {
+  @Input()
+  public content: string;
+
+  constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) {
+    this.matIconRegistry.addSvgIcon(
+      'warning',
+      this.domSanitizer.bypassSecurityTrustResourceUrl('/icons/alert/warning.svg')
+    );
+  }
+}
diff --git a/projects/elonkit/src/ui/tag/__stories__/tag-story-svg-icon/tag-story-svg-icon.module.ts b/projects/elonkit/src/ui/tag/__stories__/tag-story-svg-icon/tag-story-svg-icon.module.ts
new file mode 100644
index 00000000..20c0285e
--- /dev/null
+++ b/projects/elonkit/src/ui/tag/__stories__/tag-story-svg-icon/tag-story-svg-icon.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { TagStorySvgIconComponent } from './tag-story-svg-icon.component';
+import { ESTagModule } from '../..';
+
+@NgModule({
+  declarations: [TagStorySvgIconComponent],
+  imports: [CommonModule, HttpClientModule, ESTagModule],
+  exports: [TagStorySvgIconComponent]
+})
+export class TagStorySvgIconModule {}
diff --git a/projects/elonkit/src/ui/tag/__stories__/tag-story-svg-icon/tag-story-svg-icon.source.ts b/projects/elonkit/src/ui/tag/__stories__/tag-story-svg-icon/tag-story-svg-icon.source.ts
new file mode 100644
index 00000000..92b7f89e
--- /dev/null
+++ b/projects/elonkit/src/ui/tag/__stories__/tag-story-svg-icon/tag-story-svg-icon.source.ts
@@ -0,0 +1,5 @@
+export const TAG_STORY_SVG_ICON_SOURCE = {
+  html: `
+    <es-tag [color]="color" [textColor]="textColor" [svgIcon]="icon">{{content}}</es-tag>
+  `
+};
diff --git a/projects/elonkit/src/ui/tag/__stories__/tag.stories.mdx b/projects/elonkit/src/ui/tag/__stories__/tag.stories.mdx
index afdc77df..dbba803a 100644
--- a/projects/elonkit/src/ui/tag/__stories__/tag.stories.mdx
+++ b/projects/elonkit/src/ui/tag/__stories__/tag.stories.mdx
@@ -1,21 +1,26 @@
-import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
-import { Preview } from '~storybook/components';
+import { Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Canvas } from '~storybook/components';
 
-import { withA11y } from '@storybook/addon-a11y';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, text, select, color } from '@storybook/addon-knobs';
-
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { ESTagModule, ESTagComponent } from '..';
-
 import { TAG_STORY_BASIC_SOURCE } from './tag-story-basic';
-
-import { TAG_STORY_CUSTOMIZATION_SOURCE } from './tag-story-customization';
-
-import { TAG_STORY_ICON_SOURCE } from './tag-story-icon';
-
-<Meta title='UI/Tag' decorators={[withA11y, withKnobs]} />
+import {
+  TagStorySvgIconModule,
+  TagStorySvgIconComponent,
+  TAG_STORY_SVG_ICON_SOURCE
+} from './tag-story-svg-icon';
+
+<Meta
+  title='UI/Tag'
+  args={{
+    content: '',
+    icon: 'mail',
+    svgIcon: '',
+    color: '#000',
+    textColor: '#fff'
+  }}
+/>
 
 # Tag
 
@@ -23,57 +28,51 @@ A tags primary use is to place content in context.
 
 ## Demos
 
-<Preview source={TAG_STORY_BASIC_SOURCE}>
+export const getContent = (args, context) => {
+  return args.content || (context.globals.locale === 'en' ? 'Message' : 'Сообщение');
+};
+
+<Canvas source={TAG_STORY_BASIC_SOURCE}>
   <Story name='Basic' height='100px'>
-    {{
-      template: TAG_STORY_BASIC_SOURCE.html,
+    {((args, context) => ({
+      template: `<es-tag [color]="color" [textColor]="textColor" [icon]="icon">{{content}}</es-tag>`,
       moduleMetadata: {
-        imports: [BrowserAnimationsModule, ESTagModule]
+        imports: [ESTagModule]
       },
       props: {
-        content: text('content', 'TAG')
+        ...args,
+        content: getContent(args, context)
       }
-    }}
+    })).bind({})}
   </Story>
-</Preview>
-
-We can customize element
-
-<Preview source={TAG_STORY_CUSTOMIZATION_SOURCE}>
-  <Story name='Customization' height='100px'>
-    {{
-      template: TAG_STORY_CUSTOMIZATION_SOURCE.html,
-      moduleMetadata: {
-        imports: [BrowserAnimationsModule, ESTagModule]
-      },
-      props: {
-        content: text('content', 'TAG'),
-        color: color('color', '#58D652'),
-        textColor: color('textColor', '#fff')
-      }
+</Canvas>
+
+We can use individual icons.
+
+<Canvas source={TAG_STORY_SVG_ICON_SOURCE}>
+  <Story
+    name='Svg icon'
+    height='100px'
+    argTypes={{
+      color: { table: { disable: true } },
+      icon: { table: { disable: true } },
+      textColor: { table: { disable: true } },
+      svgIcon: { table: { disable: true } }
     }}
-  </Story>
-</Preview>
-
-We can add an icon
-
-<Preview source={TAG_STORY_ICON_SOURCE}>
-  <Story name='Icon' height='100px'>
-    {{
-      template: TAG_STORY_ICON_SOURCE.html,
+  >
+    {((args, context) => ({
+      component: TagStorySvgIconComponent,
       moduleMetadata: {
-        imports: [BrowserAnimationsModule, ESTagModule]
+        imports: [TagStorySvgIconModule]
       },
       props: {
-        content: text('content', 'TAG'),
-        color: color('color', '#58D652'),
-        textColor: color('textColor', '#fff'),
-        icon: text('icon', 'info')
+        ...args,
+        content: getContent(args, context)
       }
-    }}
+    })).bind({})}
   </Story>
-</Preview>
+</Canvas>
 
 ## API
 
-<Props of={ESTagComponent} />
+<ArgsTable of={ESTagComponent} />
diff --git a/projects/elonkit/src/ui/tag/ng-package.json b/projects/elonkit/src/ui/tag/ng-package.json
index cf867348..789c95e4 100644
--- a/projects/elonkit/src/ui/tag/ng-package.json
+++ b/projects/elonkit/src/ui/tag/ng-package.json
@@ -1,6 +1,5 @@
 {
   "lib": {
-    "entryFile": "public-api.ts",
-    "cssUrl": "inline"
+    "entryFile": "public-api.ts"
   }
 }
diff --git a/projects/elonkit/src/ui/tag/tag.component.html b/projects/elonkit/src/ui/tag/tag.component.html
index 8ee654d4..836f4020 100644
--- a/projects/elonkit/src/ui/tag/tag.component.html
+++ b/projects/elonkit/src/ui/tag/tag.component.html
@@ -8,7 +8,7 @@
     >
       {{ currentIcon.icon || '' }}
     </mat-icon>
-    <div class="es-tag__text mat-small" [ngStyle]="{ color: textColor }">
+    <div class="es-tag__text mat-caption" [ngStyle]="{ color: textColor }">
       <ng-content></ng-content>
     </div>
   </div>
diff --git a/projects/elonkit/src/ui/tag/tag.component.scss b/projects/elonkit/src/ui/tag/tag.component.scss
index 441724bb..c5f71066 100644
--- a/projects/elonkit/src/ui/tag/tag.component.scss
+++ b/projects/elonkit/src/ui/tag/tag.component.scss
@@ -15,9 +15,12 @@
 
   &__icon {
     font-size: 14px;
-    height: 14px !important;
-    line-height: 14px !important;
-    width: 14px !important;
+
+    &.mat-icon {
+      height: 14px;
+      line-height: 14px;
+      width: 14px;
+    }
 
     &_display {
       margin-right: 5px;
diff --git a/projects/elonkit/src/ui/tag/tag.component.ts b/projects/elonkit/src/ui/tag/tag.component.ts
index dc69b77a..dd346062 100644
--- a/projects/elonkit/src/ui/tag/tag.component.ts
+++ b/projects/elonkit/src/ui/tag/tag.component.ts
@@ -23,14 +23,21 @@ export class ESTagComponent {
   /**
    * The icon displayed before the text.
    */
-  @Input() icon?: string;
+  @Input()
+  public icon?: string;
 
   /**
-   * Override the icon displayed before the text.
+   *
+   * The svg icon displayed before the text.
    */
-  @Input() svgIcon?: string;
+  @Input()
+  public svgIcon?: string;
 
-  get currentIcon() {
+  /**
+   * @internal
+   * @ignore
+   */
+  public get currentIcon() {
     if (this.icon) {
       return { icon: this.icon };
     }
diff --git a/projects/elonkit/src/ui/tag/tag.module.ts b/projects/elonkit/src/ui/tag/tag.module.ts
index 3bdf6c76..08fa9331 100644
--- a/projects/elonkit/src/ui/tag/tag.module.ts
+++ b/projects/elonkit/src/ui/tag/tag.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ESTagComponent } from './tag.component';
 import { MatIconModule } from '@angular/material/icon';
+import { ESTagComponent } from './tag.component';
 
 @NgModule({
   imports: [CommonModule, MatIconModule],

From 2670725423ddb183564c04f8074dac9a0b39d293 Mon Sep 17 00:00:00 2001
From: Maxim <m.domanov@elonsoft.ru>
Date: Thu, 10 Sep 2020 15:20:36 +0300
Subject: [PATCH 3/3] refactor(tag): fix lint

---
 projects/elonkit/src/ui/tag/__specs__/tag.spec.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/projects/elonkit/src/ui/tag/__specs__/tag.spec.ts b/projects/elonkit/src/ui/tag/__specs__/tag.spec.ts
index f0c3f1f6..599a9e0d 100644
--- a/projects/elonkit/src/ui/tag/__specs__/tag.spec.ts
+++ b/projects/elonkit/src/ui/tag/__specs__/tag.spec.ts
@@ -3,9 +3,7 @@ import { ESTagModule, ESTagComponent } from '..';
 import { Component } from '@angular/core';
 
 @Component({
-  template: `
-    <es-tag>Tag</es-tag>
-  `
+  template: ` <es-tag>Tag</es-tag> `
 })
 class ESTagWrapperdComponent {}