feat(experimental): add new component Badge (#5247)

projects/core/animations/animations.ts

@@ -211,6 +211,27 @@ export const tuiScaleIn = trigger(`tuiScaleIn`, [
     ),
 ]);
 
+export const tuiPop = trigger(`tuiPop`, [
+    transition(
+        `:enter`,
+        [
+            style({transform: `scale(0)`}),
+            animate(TRANSITION, style({transform: `scale(1.1)`})),
+            animate(TRANSITION, style({transform: `scale(1)`})),
+        ],
+        DURATION,
+    ),
+    transition(
+        `:leave`,
+        [
+            style({transform: `scale(1)`}),
+            animate(TRANSITION, style({transform: `scale(1.1)`})),
+            animate(TRANSITION, style({transform: `scale(0)`})),
+        ],
+        DURATION,
+    ),
+]);
+
 export const tuiScaleInList = trigger(`tuiScaleInList`, [
     transition(
         `* => *`,

projects/demo/src/modules/app/app.routes.ts

@@ -206,6 +206,14 @@ export const ROUTES: Routes = [
             title: `Avatar`,
         },
     },
+    {
+        path: `experimental/badge`,
+        loadChildren: async () =>
+            (await import(`../experimental/badge/badge.module`)).ExampleTuiBadgeModule,
+        data: {
+            title: `Badge `,
+        },
+    },
     {
         path: `experimental/fade`,
         loadChildren: async () =>

projects/demo/src/modules/app/pages.ts

@@ -821,6 +821,12 @@ export const pages = [
         keywords: `аватар, image, pic, icon, картинка, изображение, avatar, stack`,
         route: `/experimental/avatar`,
     },
+    {
+        section: `Experimental`,
+        title: `Badge`,
+        keywords: `бэдж, бейдж, овал, badge, нотификация`,
+        route: `/experimental/badge`,
+    },
     {
         section: `Experimental`,
         title: `Fade`,

projects/demo/src/modules/experimental/badge/badge.component.ts

@@ -0,0 +1,73 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {RawLoaderContent, TuiDocExample} from '@taiga-ui/addon-doc';
+import {TuiSizeS, TuiSizeXL} from '@taiga-ui/core';
+import {TuiStatus} from '@taiga-ui/kit';
+
+@Component({
+    selector: 'example-badge',
+    templateUrl: './badge.template.html',
+    changeDetection,
+})
+export class ExampleTuiBadgeComponent {
+    readonly exampleModule: RawLoaderContent = import(
+        './examples/import/import-module.md?raw'
+    );
+
+    readonly exampleHtml: RawLoaderContent = import(
+        './examples/import/insert-template.md?raw'
+    );
+
+    readonly example1: TuiDocExample = {
+        TypeScript: import('./examples/1/index.ts?raw'),
+        HTML: import('./examples/1/index.html?raw'),
+        LESS: import('./examples/1/index.less?raw'),
+    };
+
+    readonly example2: TuiDocExample = {
+        TypeScript: import('./examples/2/index.ts?raw'),
+        HTML: import('./examples/2/index.html?raw'),
+    };
+
+    readonly example3: TuiDocExample = {
+        TypeScript: import('./examples/3/index.ts?raw'),
+        HTML: import('./examples/3/index.html?raw'),
+        LESS: import('./examples/3/index.less?raw'),
+    };
+
+    readonly example4: TuiDocExample = {
+        TypeScript: import('./examples/4/index.ts?raw'),
+        HTML: import('./examples/4/index.html?raw'),
+        LESS: import('./examples/4/index.less?raw'),
+    };
+
+    readonly example5: TuiDocExample = {
+        TypeScript: import('./examples/5/index.ts?raw'),
+        HTML: import('./examples/5/index.html?raw'),
+        LESS: import('./examples/5/index.less?raw'),
+    };
+
+    readonly appearanceVariants: ReadonlyArray<TuiStatus | 'accent' | 'light'> = [
+        'accent',
+        'default',
+        'primary',
+        'custom',
+        'success',
+        'error',
+        'warning',
+        'info',
+        'neutral',
+        'light',
+    ];
+
+    appearance = this.appearanceVariants[0];
+
+    readonly sizeVariants: ReadonlyArray<TuiSizeS | TuiSizeXL> = ['s', 'm', 'l', 'xl'];
+
+    size: TuiSizeS | TuiSizeXL = this.sizeVariants[1];
+
+    hoverable = false;
+
+    contentTypeVariants = ['text', 'with icon', 'image'];
+    contentType = this.contentTypeVariants[0];
+}

projects/demo/src/modules/experimental/badge/badge.module.ts

@@ -0,0 +1,51 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
+import {TuiRepeatTimesModule} from '@taiga-ui/cdk';
+import {
+    TuiLabelModule,
+    TuiModeModule,
+    TuiNotificationModule,
+    TuiSvgModule,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {TuiBadgeModule, TuiFadeModule} from '@taiga-ui/experimental';
+import {TuiRadioListModule} from '@taiga-ui/kit';
+
+import {ExampleTuiBadgeComponent} from './badge.component';
+import {TuiBadgeExample1} from './examples/1';
+import {TuiBadgeExample2} from './examples/2';
+import {TuiBadgeExample3} from './examples/3';
+import {TuiBadgeExample4} from './examples/4';
+import {TuiBadgeExample5} from './examples/5';
+
+@NgModule({
+    imports: [
+        TuiBadgeModule,
+        TuiModeModule,
+        TuiRepeatTimesModule,
+        TuiSvgModule,
+        TuiRadioListModule,
+        FormsModule,
+        CommonModule,
+        TuiFadeModule,
+        TuiNotificationModule,
+        TuiAddonDocModule,
+        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiBadgeComponent)),
+        TuiBadgeModule,
+        TuiTextfieldControllerModule,
+        TuiLabelModule,
+    ],
+    declarations: [
+        ExampleTuiBadgeComponent,
+        TuiBadgeExample1,
+        TuiBadgeExample2,
+        TuiBadgeExample3,
+        TuiBadgeExample4,
+        TuiBadgeExample5,
+    ],
+    exports: [ExampleTuiBadgeComponent],
+})
+export class ExampleTuiBadgeModule {}

projects/demo/src/modules/experimental/badge/badge.template.html

@@ -0,0 +1,152 @@
+<tui-doc-page
+    header="Badge"
+    package="EXPERIMENTAL"
+    type="components"
+>
+    <ng-template pageTab>
+        <tui-notification status="warning">
+            This code is
+            <strong>experimental</strong>
+            and is a subject to change. Expect final solution to be shipped in the next major version
+        </tui-notification>
+
+        <p>New version for Badge component following updated design specs for displaying text, pictures and icons.</p>
+
+        <tui-doc-example
+            id="base"
+            heading="Basic"
+            [content]="example1"
+        >
+            <tui-badge-example-1></tui-badge-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="sizes"
+            heading="Sizes"
+            [content]="example2"
+        >
+            <tui-badge-example-2></tui-badge-example-2>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="content-type"
+            heading="Content type (mobile platform)"
+            [content]="example3"
+        >
+            <tui-badge-example-3></tui-badge-example-3>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="fade"
+            heading="Long value"
+            [content]="example4"
+        >
+            <tui-badge-example-4></tui-badge-example-4>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="custom"
+            heading="Customization"
+            [content]="example5"
+        >
+            <tui-badge-example-5></tui-badge-example-5>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab>
+        <tui-doc-demo>
+            <p>
+                <tui-badge
+                    *ngIf="contentType === 'with icon'"
+                    [appearance]="appearance"
+                    [hoverable]="hoverable"
+                    [size]="size"
+                >
+                    <tui-svg src="tuiIconCheck"></tui-svg>
+                    <div tuiFade>Taiga UI</div>
+                </tui-badge>
+
+                <tui-badge
+                    *ngIf="contentType === 'text'"
+                    [appearance]="appearance"
+                    [hoverable]="hoverable"
+                    [size]="size"
+                >
+                    Taiga UI
+                </tui-badge>
+
+                <tui-badge
+                    *ngIf="contentType === 'image'"
+                    [appearance]="appearance"
+                    [hoverable]="hoverable"
+                    [size]="size"
+                >
+                    <img
+                        alt="market"
+                        src="assets/images/avatar.jpg"
+                    />
+                </tui-badge>
+            </p>
+        </tui-doc-demo>
+        <label
+            tuiLabel="Content type"
+            class="tui-space_vertical-3"
+        >
+            <tui-radio-list
+                orientation="horizontal"
+                [items]="contentTypeVariants"
+                [(ngModel)]="contentType"
+            ></tui-radio-list>
+        </label>
+        <tui-doc-documentation>
+            <ng-template
+                documentationPropertyMode="input"
+                documentationPropertyName="size"
+                documentationPropertyType="TuiSizeL"
+                [documentationPropertyValues]="sizeVariants"
+                [(documentationPropertyValue)]="size"
+            >
+                Size
+            </ng-template>
+            <ng-template
+                documentationPropertyMode="input"
+                documentationPropertyName="appearance"
+                documentationPropertyType="TuiStatus"
+                [documentationPropertyValues]="appearanceVariants"
+                [(documentationPropertyValue)]="appearance"
+            >
+                Appearance
+            </ng-template>
+            <ng-template
+                documentationPropertyMode="input"
+                documentationPropertyName="hoverable"
+                documentationPropertyType="boolean"
+                [(documentationPropertyValue)]="hoverable"
+            >
+                Enable hovered state
+            </ng-template>
+        </tui-doc-documentation>
+    </ng-template>
+
+    <ng-template pageTab>
+        <ol class="b-demo-steps">
+            <li>
+                <p>Import into a module</p>
+
+                <tui-doc-code
+                    filename="myComponent.module.ts"
+                    [code]="exampleModule"
+                ></tui-doc-code>
+            </li>
+
+            <li>
+                <p>Add to the template:</p>
+
+                <tui-doc-code
+                    filename="myComponent.template.html"
+                    [code]="exampleHtml"
+                ></tui-doc-code>
+            </li>
+        </ol>
+    </ng-template>
+</tui-doc-page>

projects/demo/src/modules/experimental/badge/examples/1/index.html

@@ -0,0 +1,29 @@
+<tui-badge appearance="primary">Primary</tui-badge>
+
+<tui-badge appearance="accent">Accent</tui-badge>
+
+<tui-badge appearance="light">Light</tui-badge>
+
+<tui-badge>Default</tui-badge>
+
+<tui-badge appearance="success">Success</tui-badge>
+
+<tui-badge appearance="error">Error</tui-badge>
+<tui-badge appearance="warning">Warning</tui-badge>
+
+<tui-badge appearance="neutral">Neutral</tui-badge>
+<tui-badge appearance="info">Info</tui-badge>
+
+<p>
+    Use CSS and
+    <code>appearance="custom"</code>
+    for support colors
+</p>
+<tui-badge
+    *tuiRepeatTimes="let index of 20"
+    appearance="custom"
+    class="support-{{ index + 1 }}"
+    [hoverable]="true"
+>
+    Taiga
+</tui-badge>

projects/demo/src/modules/experimental/badge/examples/1/index.less

@@ -0,0 +1,13 @@
+tui-badge {
+    margin: 0.5rem;
+}
+
+@iterations: 20;
+
+.loop (@i) when (@i > 0) {
+    .support-@{i} {
+        background-color: ~'var(--tui-support-@{i}, var(--tui-support-0@{i}))';
+    }
+    .loop(@i - 1);
+}
+.loop (@iterations);

projects/demo/src/modules/experimental/badge/examples/1/index.ts

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-badge-example-1',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiBadgeExample1 {}