feat(experimental): new component Cell

projects/core/components/loader/loader.style.less

@@ -44,6 +44,7 @@
 :host {
     position: relative;
     display: flex;
+    min-width: 1.5rem;
 
     &._loading {
         overflow: hidden;

projects/core/styles/theme/variables.less

@@ -21,6 +21,7 @@
     --tui-font-text-s: normal 0.8125rem/1.25rem var(--tui-font-text);
     --tui-font-text-s-2: normal 0.8125rem/1rem var(--tui-font-text);
     --tui-font-text-xs: normal 0.6875rem/1rem var(--tui-font-text);
+    --tui-font-text-xs-2: normal 0.6875rem/0.8125rem var(--tui-font-text);
     // Sizes
     --tui-radius-xs: 0.25rem;
     --tui-radius-s: 0.5rem;

projects/demo-playwright/utils/mock-images.ts

@@ -5,6 +5,7 @@ const DEFAULT_MOCKS = [
         patterns: [
             /.*avatar.jpg/,
             /.*avatars.githubusercontent.com.*/,
+            /https:\/\/github.com\/.*.png.*/,
             /.*bf2e94ae58ee713717faf397958a8e3d.jpg/, // filename - MD5 hash value of file content (waterplea avatar)
         ],
         mockImage: `${__dirname}/../stubs/github-avatar.jpeg`,

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

@@ -207,14 +207,6 @@ export const ROUTES: Routes = [
             title: `BlockStatus`,
         },
     },
-    {
-        path: `layout/title`,
-        loadChildren: async () =>
-            (await import(`../directives/title/title.module`)).ExampleTuiTitleModule,
-        data: {
-            title: `Title`,
-        },
-    },
     {
         path: `experimental/avatar`,
         loadChildren: async () =>
@@ -240,6 +232,14 @@ export const ROUTES: Routes = [
             title: `Radio `,
         },
     },
+    {
+        path: `experimental/title`,
+        loadChildren: async () =>
+            (await import(`../experimental/title/title.module`)).ExampleTuiTitleModule,
+        data: {
+            title: `Title`,
+        },
+    },
     {
         path: `experimental/toggle`,
         loadChildren: async () =>
@@ -282,6 +282,14 @@ export const ROUTES: Routes = [
             title: `Button `,
         },
     },
+    {
+        path: `experimental/cell`,
+        loadChildren: async () =>
+            (await import(`../experimental/cell/cell.module`)).ExampleTuiCellModule,
+        data: {
+            title: `Cell`,
+        },
+    },
     {
         path: `experimental/compass`,
         loadChildren: async () =>

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

@@ -172,12 +172,6 @@ export const pages: TuiDocPages = [
         keywords: `блок, статус, block, status, block-status, blockstatus, layout`,
         route: `/layout/block-status`,
     },
-    {
-        section: `Layout`,
-        title: `Title`,
-        keywords: `subtitle, заголовок, caption, description, подзаголовок`,
-        route: `/layout/title`,
-    },
     {
         section: `Components`,
         title: `Button`,
@@ -859,6 +853,12 @@ export const pages: TuiDocPages = [
         keywords: `кнопка, button, icon-button, иконка`,
         route: `/experimental/button`,
     },
+    {
+        section: `Experimental`,
+        title: `Cell`,
+        keywords: `cell, feed, item`,
+        route: `/experimental/cell`,
+    },
     {
         section: `Experimental`,
         title: `Compass`,
@@ -889,6 +889,12 @@ export const pages: TuiDocPages = [
         keywords: `card, container, wrapper, image, blur, overlay`,
         route: `/experimental/surface`,
     },
+    {
+        section: `Experimental`,
+        title: `Title`,
+        keywords: `subtitle, заголовок, caption, description, подзаголовок`,
+        route: `/experimental/title`,
+    },
     {
         section: `Experimental`,
         title: `ThumbnailCard `,

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

@@ -0,0 +1,49 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {
+    TuiDocExample,
+    tuiDocExampleOptionsProvider,
+    TuiRawLoaderContent,
+} from '@taiga-ui/addon-doc';
+
+@Component({
+    selector: 'example-cell',
+    templateUrl: './cell.template.html',
+    styleUrls: ['./cell.styles.less'],
+    providers: [tuiDocExampleOptionsProvider({fullsize: true})],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection,
+})
+export class ExampleTuiCellComponent {
+    readonly exampleModule: TuiRawLoaderContent = import(
+        './examples/import/import-module.md?raw'
+    );
+
+    readonly exampleHtml: TuiRawLoaderContent = import(
+        './examples/import/insert-template.md?raw'
+    );
+
+    readonly example1: TuiDocExample = {
+        HTML: import('./examples/1/index.html?raw'),
+    };
+
+    readonly example2: TuiDocExample = {
+        HTML: import('./examples/2/index.html?raw'),
+    };
+
+    readonly example3: TuiDocExample = {
+        HTML: import('./examples/3/index.html?raw'),
+    };
+
+    readonly example4: TuiDocExample = {
+        HTML: import('./examples/4/index.html?raw'),
+    };
+
+    readonly example5: TuiDocExample = {
+        HTML: import('./examples/5/index.html?raw'),
+    };
+
+    readonly example6: TuiDocExample = {
+        HTML: import('./examples/6/index.html?raw'),
+    };
+}

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

@@ -0,0 +1,92 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {TuiMoneyModule} from '@taiga-ui/addon-commerce';
+import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
+import {
+    TuiLabelModule,
+    TuiLinkModule,
+    TuiLoaderModule,
+    TuiNotificationModule,
+    TuiSvgModule,
+    TuiTextfieldControllerModule,
+    TuiTooltipModule,
+    TuiWrapperModule,
+} from '@taiga-ui/core';
+import {
+    TuiAvatarModule,
+    TuiAvatarStackModule,
+    TuiBadgedContentModule,
+    TuiBadgeModule,
+    TuiBadgeNotificationModule,
+    TuiCellModule,
+    TuiCheckboxModule,
+    TuiFadeModule,
+    TuiSensitiveModule,
+    TuiSurfaceModule,
+    TuiThumbnailCardModule,
+    TuiTitleModule,
+    TuiToggleModule,
+} from '@taiga-ui/experimental';
+import {
+    TuiDataListWrapperModule,
+    TuiMarkerIconModule,
+    TuiProgressModule,
+    TuiSelectModule,
+} from '@taiga-ui/kit';
+
+import {ExampleTuiCellComponent} from './cell.component';
+import {TuiCellExample1} from './examples/1';
+import {TuiCellExample2} from './examples/2';
+import {TuiCellExample3} from './examples/3';
+import {TuiCellExample4} from './examples/4';
+import {TuiCellExample5} from './examples/5';
+import {TuiCellExample6} from './examples/6';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        TuiWrapperModule,
+        TuiAddonDocModule,
+        TuiAvatarModule,
+        TuiBadgeModule,
+        TuiBadgeNotificationModule,
+        TuiCellModule,
+        TuiFadeModule,
+        TuiLinkModule,
+        TuiMarkerIconModule,
+        TuiMoneyModule,
+        TuiNotificationModule,
+        TuiProgressModule,
+        TuiThumbnailCardModule,
+        TuiToggleModule,
+        TuiTooltipModule,
+        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiCellComponent)),
+        TuiTitleModule,
+        TuiBadgedContentModule,
+        TuiToggleModule,
+        TuiSvgModule,
+        TuiCheckboxModule,
+        TuiAvatarStackModule,
+        TuiLoaderModule,
+        TuiSensitiveModule,
+        TuiSurfaceModule,
+        TuiSelectModule,
+        TuiDataListWrapperModule,
+        TuiTextfieldControllerModule,
+        TuiLabelModule,
+    ],
+    declarations: [
+        ExampleTuiCellComponent,
+        TuiCellExample1,
+        TuiCellExample2,
+        TuiCellExample3,
+        TuiCellExample4,
+        TuiCellExample5,
+        TuiCellExample6,
+    ],
+    exports: [ExampleTuiCellComponent],
+})
+export class ExampleTuiCellModule {}

projects/demo/src/modules/experimental/cell/cell.styles.less

@@ -0,0 +1,9 @@
+@import 'taiga-ui-local';
+
+example-cell [tuiCell] {
+    max-width: 25rem;
+
+    @media @tui-mobile {
+        min-width: 100%;
+    }
+}

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

@@ -0,0 +1,83 @@
+<tui-doc-page
+    header="Cell"
+    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>
+
+        <tui-doc-example
+            id="base"
+            heading="Basic"
+            [content]="example1"
+        >
+            <tui-cell-example-1></tui-cell-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="label"
+            heading="Label"
+            [content]="example2"
+        >
+            <tui-cell-example-2></tui-cell-example-2>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="left"
+            heading="Left side"
+            [content]="example3"
+        >
+            <tui-cell-example-3></tui-cell-example-3>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="right"
+            heading="Right side"
+            [content]="example4"
+        >
+            <tui-cell-example-4></tui-cell-example-4>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="long"
+            heading="Long content"
+            [content]="example5"
+        >
+            <tui-cell-example-5></tui-cell-example-5>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="combinations"
+            heading="Combinations"
+            [content]="example6"
+        >
+            <tui-cell-example-6></tui-cell-example-6>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <ol class="b-demo-steps">
+            <li>
+                <p>Import 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/cell/examples/1/index.html

@@ -0,0 +1,47 @@
+<div tuiCell>
+    <tui-avatar
+        appearance="primary"
+        src="tuiIconStarLarge"
+        tuiWrapper
+    ></tui-avatar>
+    <div tuiTitle>
+        Title
+        <div tuiSubtitle>Description</div>
+    </div>
+    <div tuiTitle>
+        Secondary title
+        <div tuiSubtitle>Secondary description</div>
+    </div>
+</div>
+
+<div tuiCell="m">
+    <tui-avatar
+        appearance="primary"
+        src="tuiIconStarLarge"
+        tuiWrapper
+    ></tui-avatar>
+    <div tuiTitle>
+        Title
+        <div tuiSubtitle>Description</div>
+    </div>
+    <div tuiTitle>
+        Secondary title
+        <div tuiSubtitle>Secondary description</div>
+    </div>
+</div>
+
+<div tuiCell="s">
+    <tui-avatar
+        appearance="primary"
+        src="tuiIconStar"
+        tuiWrapper
+    ></tui-avatar>
+    <div tuiTitle>
+        Title
+        <div tuiSubtitle>Description</div>
+    </div>
+    <div tuiTitle>
+        Secondary title
+        <div tuiSubtitle>Secondary description</div>
+    </div>
+</div>