feat(kit): Like add new component

projects/cdk/constants/used-icons.ts

@@ -46,6 +46,8 @@ export const TUI_USED_ICONS = [
     '@tui.file',
     '@tui.trash',
     '@tui.phone',
+    '@tui.heart',
+    '@tui.heart-filled',
     '@tui.star',
     '@tui.calendar',
     '@tui.rotate-ccw-square',

projects/demo-playwright/tests/kit/like/like.spec.ts

@@ -0,0 +1,70 @@
+import {DemoRoute} from '@demo/routes';
+import {TuiDocumentationPagePO, tuiGoto} from '@demo-playwright/utils';
+import {expect, test} from '@playwright/test';
+
+test.describe('TuiLike', () => {
+    test.describe('Examples', () => {
+        test('Basic like', async ({page}) => {
+            await tuiGoto(page, DemoRoute.Like);
+            const example = new TuiDocumentationPagePO(page).getExample('#basic');
+
+            await example.locator('[tuiLike]').first().click();
+
+            await expect(example).toHaveScreenshot('01-basic-like.png');
+        });
+
+        test('External icon loads', async ({page}) => {
+            await tuiGoto(page, DemoRoute.Like);
+            const example = new TuiDocumentationPagePO(page).getExample(
+                '#external-icons',
+            );
+
+            await example.locator('[tuiLike]').first().click();
+
+            await expect(example).toHaveScreenshot('02-external-icon-like.png');
+        });
+
+        test('Other appearances hover', async ({page}) => {
+            await tuiGoto(page, DemoRoute.Like);
+            const example = new TuiDocumentationPagePO(page).getExample(
+                '#other-appearances',
+            );
+
+            await example.locator('[tuiLike]').nth(1).hover();
+
+            await expect(example).toHaveScreenshot('03-other-appearances-hover-like.png');
+        });
+
+        test('Other appearances click', async ({page}) => {
+            await tuiGoto(page, DemoRoute.Like);
+            const example = new TuiDocumentationPagePO(page).getExample(
+                '#other-appearances',
+            );
+
+            await example.locator('[tuiLike]').nth(1).click();
+
+            await expect(example).toHaveScreenshot('04-other-appearances-click-like.png');
+        });
+
+        test('With forms click', async ({page}) => {
+            await tuiGoto(page, DemoRoute.Like);
+            const example = new TuiDocumentationPagePO(page).getExample('#with-forms');
+
+            await example.locator('[tuiLike]').nth(0).click();
+
+            await expect(example).toHaveScreenshot(
+                '05-with-forms-ngModel-click-like.png',
+            );
+
+            await example.locator('[tuiLike]').nth(1).click();
+
+            await expect(example).toHaveScreenshot(
+                '06-with-forms-reactive-forms-click-like.png',
+            );
+
+            await example.locator('[tuiButton]').click();
+
+            await expect(example).toHaveScreenshot('07-with-forms-click-toggle.png');
+        });
+    });
+});

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

@@ -479,6 +479,11 @@ export const ROUTES: Routes = [
         loadComponent: async () => import('../components/line-clamp'),
         title: 'LineClamp',
     }),
+    route({
+        path: DemoRoute.Like,
+        loadComponent: async () => import('../components/like'),
+        title: 'Like',
+    }),
     route({
         path: DemoRoute.Link,
         loadComponent: async () => import('../components/link'),

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

@@ -117,6 +117,7 @@ export const DemoRoute = {
     Status: '/components/status',
     Stepper: '/navigation/stepper',
     Preview: '/components/preview',
+    Like: '/components/like',
     AppBar: '/navigation/app-bar',
     TabBar: '/navigation/tab-bar',
     Tabs: '/navigation/tabs',

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

@@ -601,6 +601,12 @@ export const pages: TuiDocRoutePages = [
         keywords: 'лэйбл, метка, форма, label',
         route: DemoRoute.Label,
     },
+    {
+        section: 'Components',
+        title: 'Like',
+        keywords: 'like, лайк, эмодзи, смайлик, стикер',
+        route: DemoRoute.Like,
+    },
     {
         section: 'Components',
         title: 'LineClamp',

projects/demo/src/modules/components/like/examples/1/index.html

@@ -0,0 +1,12 @@
+<input
+    tuiLike="var(--tui-status-negative)"
+    type="checkbox"
+/>
+
+<input
+    size="s"
+    tuiLike
+    type="checkbox"
+    [checkedIcon]="'@tui.star-filled'"
+    [uncheckedIcon]="'@tui.star'"
+/>

projects/demo/src/modules/components/like/examples/1/index.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiLike} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [TuiLike],
+    templateUrl: './index.html',
+    styles: [':host { display: flex; gap: 1rem; align-items: center; }'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {}

projects/demo/src/modules/components/like/examples/2/index.html

@@ -0,0 +1,4 @@
+<input
+    tuiLike="var(--tui-status-warning)"
+    type="checkbox"
+/>

projects/demo/src/modules/components/like/examples/2/index.ts

@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiLike, tuiLikeOptionsProvider} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [TuiLike],
+    templateUrl: './index.html',
+    styles: [':host { display: flex; gap: 1rem; align-items: center; }'],
+    encapsulation,
+    changeDetection,
+    providers: [
+        tuiLikeOptionsProvider({
+            icons: {unchecked: '@tui.star', checked: '@tui.star-filled'},
+        }),
+    ],
+})
+export default class Example {}

projects/demo/src/modules/components/like/examples/3/index.html

@@ -0,0 +1,4 @@
+<input
+    tuiLike
+    type="checkbox"
+/>

projects/demo/src/modules/components/like/examples/3/index.ts

@@ -0,0 +1,23 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiLike, tuiLikeOptionsProvider} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [TuiLike],
+    templateUrl: './index.html',
+    styles: [':host { display: flex; gap: 1rem; align-items: center; }'],
+    encapsulation,
+    changeDetection,
+    providers: [
+        tuiLikeOptionsProvider({
+            icons: {
+                unchecked:
+                    'https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/github.svg',
+                checked: 'https://cdn-icons-png.flaticon.com/64/12710/12710759.png',
+            },
+        }),
+    ],
+})
+export default class Example {}

projects/demo/src/modules/components/like/examples/4/index.html

@@ -0,0 +1,6 @@
+<input
+    *ngFor="let appearance of appearances"
+    tuiLike
+    type="checkbox"
+    [appearance]="appearance"
+/>

projects/demo/src/modules/components/like/examples/4/index.ts

@@ -0,0 +1,17 @@
+import {NgForOf} from '@angular/common';
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiLike} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [NgForOf, TuiLike],
+    templateUrl: './index.html',
+    styles: [':host { display: flex; gap: 1rem; align-items: center; }'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected readonly appearances = ['error', 'success', 'warning', 'flat'] as const;
+}

projects/demo/src/modules/components/like/examples/5/index.html

@@ -0,0 +1,35 @@
+<div>
+    <p class="tui-text_body-xl">NgModel</p>
+
+    <input
+        tuiLike="var(--tui-status-negative)"
+        type="checkbox"
+        [(ngModel)]="liked"
+    />
+
+    <p class="tui-text_body-m-2">Liked: {{ liked }}</p>
+</div>
+
+<div>
+    <p class="tui-text_body-xl">Reactive form</p>
+
+    <form [formGroup]="likeForm">
+        <input
+            formControlName="liked"
+            tuiLike="var(--tui-status-negative)"
+            type="checkbox"
+        />
+    </form>
+
+    <p class="tui-text_body-m-2">Liked: {{ likeForm.value.liked }}</p>
+</div>
+
+<button
+    size="m"
+    tuiButton
+    type="button"
+    [style.width.%]="100"
+    (click)="changeValue()"
+>
+    Toggle
+</button>

projects/demo/src/modules/components/like/examples/5/index.ts

@@ -0,0 +1,30 @@
+import {CommonModule} from '@angular/common';
+import {Component} from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiButton} from '@taiga-ui/core';
+import {TuiLike} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [CommonModule, FormsModule, ReactiveFormsModule, TuiButton, TuiLike],
+    templateUrl: './index.html',
+    styles: [
+        ':host { display: flex; column-gap: 3rem; justify-content: space-between; flex-wrap: wrap; }',
+    ],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected liked = false;
+
+    protected likeForm = new FormGroup({
+        liked: new FormControl(false),
+    });
+
+    protected changeValue(): void {
+        this.liked = !this.liked;
+        this.likeForm.setValue({liked: !this.likeForm.value.liked});
+    }
+}

projects/demo/src/modules/components/like/examples/import/import.md

@@ -0,0 +1,14 @@
+```ts
+import {Component} from '@angular/core';
+import {TuiLike} from '@taiga-ui/kit';
+// ...
+
+@Component({
+  standalone: true,
+  imports: [
+    // ...
+    TuiLike,
+  ],
+})
+export class Example {}
+```

projects/demo/src/modules/components/like/examples/import/template.md

@@ -0,0 +1,6 @@
+```html
+<input
+  tuiLike
+  type="checkbox"
+/>
+```

projects/demo/src/modules/components/like/index.html

@@ -0,0 +1,23 @@
+<tui-doc-page
+    header="Like"
+    package="KIT"
+    type="components"
+>
+    <ng-template pageTab>
+        <p>
+            A like component based on native checkbox with icons and custom color for icon when
+            <code>:checked</code>
+            state.
+        </p>
+
+        <tui-doc-example
+            *ngFor="let example of examples; let index = index"
+            [component]="index + 1 | tuiComponent"
+            [content]="index + 1 | tuiExample: 'html,ts'"
+            [heading]="example"
+            [id]="example | tuiKebab"
+        />
+    </ng-template>
+
+    <tui-setup *pageTab="'Setup'" />
+</tui-doc-page>

projects/demo/src/modules/components/like/index.ts

@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemo],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class Page {
+    protected readonly examples = [
+        'Basic',
+        'Icons from DI',
+        'External icons',
+        'Other appearances',
+        'With forms',
+    ];
+}

projects/demo/used-icons.ts

@@ -65,6 +65,7 @@ export const TUI_USED_ICONS = [
     '@tui.thumbs-down',
     '@tui.circle-check',
     '@tui.circle-x',
+    '@tui.star-filled',
     '@tui.external-link',
     '@tui.gitlab',
     '@tui.alarm-clock',

projects/kit/components/index.ts

@@ -23,6 +23,7 @@ export * from '@taiga-ui/kit/components/input-inline';
 export * from '@taiga-ui/kit/components/input-password';
 export * from '@taiga-ui/kit/components/input-phone-international';
 export * from '@taiga-ui/kit/components/items-with-more';
+export * from '@taiga-ui/kit/components/like';
 export * from '@taiga-ui/kit/components/line-clamp';
 export * from '@taiga-ui/kit/components/pagination';
 export * from '@taiga-ui/kit/components/pdf-viewer';

projects/kit/components/like/index.ts

@@ -0,0 +1,2 @@
+export * from './like.component';
+export * from './like.options';