feat(experimental): add card-large

projects/addon-mobile/styles/common/card-large.less

@@ -0,0 +1,13 @@
+[tuiCard='l'] {
+    &[data-size='l'] {
+        &[data-space='normal'] {
+            padding: 1.25rem;
+            gap: 1.25rem;
+        }
+
+        &[data-space='compact'] {
+            padding: 1rem;
+            gap: 1rem;
+        }
+    }
+}

projects/addon-mobile/styles/taiga-ui-mobile.less

@@ -21,4 +21,5 @@
     @import './common/badge-notification';
     @import './common/button';
     @import './common/title';
+    @import './common/card-large';
 }

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

@@ -6,6 +6,7 @@ const DEFAULT_MOCKS = [
             /.*avatar.jpg/,
             /.*avatars.githubusercontent.com.*/,
             /https:\/\/github.com\/.*.png.*/,
+            /https:\/\/yandex.ru\/map-widget.*/,
             /https:\/\/m.media-amazon.com\/.*.jpg.*/,
             /.*bf2e94ae58ee713717faf397958a8e3d.jpg/, // filename - MD5 hash value of file content (waterplea avatar)
         ],

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

@@ -1032,9 +1032,15 @@ export const pages: TuiDocPages = [
     {
         section: 'Experimental',
         title: 'Card',
-        keywords: 'card, block, карточка, блок',
+        keywords: 'card, card-medium, card-large, medium, large, block, карточка, блок',
         route: '/experimental/card',
     },
+    {
+        section: 'Experimental',
+        title: 'CardLarge',
+        keywords: 'card, card-medium, card-large, medium, large, block, карточка, блок',
+        route: '/experimental/card/Large',
+    },
     {
         section: 'Experimental',
         title: 'Pin',

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

@@ -57,4 +57,59 @@ export class ExampleTuiCardComponent {
         HTML: import('./examples/7/index.html?raw'),
         LESS: import('./examples/7/index.less?raw'),
     };
+
+    readonly example8: TuiDocExample = {
+        HTML: import('./examples/8/index.html?raw'),
+        LESS: import('./examples/8/index.less?raw'),
+    };
+
+    readonly example9: TuiDocExample = {
+        HTML: import('./examples/9/index.html?raw'),
+    };
+
+    readonly example10: TuiDocExample = {
+        HTML: import('./examples/10/index.html?raw'),
+        LESS: import('./examples/10/index.less?raw'),
+    };
+
+    readonly example11: TuiDocExample = {
+        HTML: import('./examples/11/index.html?raw'),
+        LESS: import('./examples/11/index.less?raw'),
+    };
+
+    readonly example12: TuiDocExample = {
+        HTML: import('./examples/12/index.html?raw'),
+    };
+
+    readonly example13: TuiDocExample = {
+        HTML: import('./examples/13/index.html?raw'),
+        LESS: import('./examples/13/index.less?raw'),
+    };
+
+    readonly example14: TuiDocExample = {
+        HTML: import('./examples/14/index.html?raw'),
+        LESS: import('./examples/14/index.less?raw'),
+    };
+
+    readonly example15: TuiDocExample = {
+        HTML: import('./examples/15/index.html?raw'),
+    };
+
+    readonly example16: TuiDocExample = {
+        HTML: import('./examples/16/index.html?raw'),
+    };
+
+    readonly example17: TuiDocExample = {
+        HTML: import('./examples/17/index.html?raw'),
+        LESS: import('./examples/17/index.less?raw'),
+    };
+
+    readonly example18: TuiDocExample = {
+        HTML: import('./examples/18/index.html?raw'),
+        LESS: import('./examples/18/index.less?raw'),
+    };
+
+    readonly example19: TuiDocExample = {
+        HTML: import('./examples/19/index.html?raw'),
+    };
 }

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

@@ -3,8 +3,12 @@ import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {tuiGetDocModules} from '@taiga-ui/addon-doc';
 import {TuiRippleModule} from '@taiga-ui/addon-mobile';
+import {TuiPlatformModule, TuiRepeatTimesModule} from '@taiga-ui/cdk';
 import {
+    TuiDataListModule,
     TuiHintModule,
+    TuiHostedDropdownModule,
+    TuiLinkModule,
     TuiNotificationModule,
     TuiScrollbarModule,
     TuiSvgModule,
@@ -14,15 +18,20 @@ import {
     TuiAvatarModule,
     TuiAvatarStackModule,
     TuiBadgeModule,
+    TuiButtonCloseModule,
+    TuiButtonModule,
     TuiCardModule,
+    TuiCellModule,
     TuiFadeModule,
     TuiFallbackSrcModule,
+    TuiHeaderModule,
     TuiIconModule,
     TuiInitialsModule,
     TuiSurfaceModule,
     TuiThumbnailCardModule,
     TuiTitleModule,
 } from '@taiga-ui/experimental';
+import {TuiProgressModule} from '@taiga-ui/kit';
 
 import {ExampleTuiCardComponent} from './card.component';
 import {TuiCardExample1} from './examples/1';
@@ -32,6 +41,18 @@ import {TuiCardExample4} from './examples/4';
 import {TuiCardExample5} from './examples/5';
 import {TuiCardExample6} from './examples/6';
 import {TuiCardExample7} from './examples/7';
+import {TuiCardExample8} from './examples/8';
+import {TuiCardExample9} from './examples/9';
+import {TuiCardExample10} from './examples/10';
+import {TuiCardExample11} from './examples/11';
+import {TuiCardExample12} from './examples/12';
+import {TuiCardExample13} from './examples/13';
+import {TuiCardExample14} from './examples/14';
+import {TuiCardExample15} from './examples/15';
+import {TuiCardExample16} from './examples/16';
+import {TuiCardExample17} from './examples/17';
+import {TuiCardExample18} from './examples/18';
+import {TuiCardExample19} from './examples/19';
 
 @NgModule({
     imports: [
@@ -53,8 +74,18 @@ import {TuiCardExample7} from './examples/7';
         FormsModule,
         TuiRippleModule,
         TuiThumbnailCardModule,
-        tuiGetDocModules(ExampleTuiCardComponent),
         TuiIconModule,
+        TuiButtonModule,
+        TuiHeaderModule,
+        TuiCellModule,
+        tuiGetDocModules(ExampleTuiCardComponent),
+        TuiRepeatTimesModule,
+        TuiDataListModule,
+        TuiHostedDropdownModule,
+        TuiProgressModule,
+        TuiButtonCloseModule,
+        TuiPlatformModule,
+        TuiLinkModule,
     ],
     declarations: [
         ExampleTuiCardComponent,
@@ -65,6 +96,18 @@ import {TuiCardExample7} from './examples/7';
         TuiCardExample5,
         TuiCardExample6,
         TuiCardExample7,
+        TuiCardExample8,
+        TuiCardExample9,
+        TuiCardExample10,
+        TuiCardExample11,
+        TuiCardExample12,
+        TuiCardExample13,
+        TuiCardExample14,
+        TuiCardExample15,
+        TuiCardExample16,
+        TuiCardExample17,
+        TuiCardExample18,
+        TuiCardExample19,
     ],
     exports: [ExampleTuiCardComponent],
 })

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

@@ -46,7 +46,6 @@
             id="customization"
             heading="Customization"
             [content]="example5"
-            [fullsize]="true"
         >
             <tui-card-example-5></tui-card-example-5>
         </tui-doc-example>
@@ -68,6 +67,106 @@
         </tui-doc-example>
     </ng-template>
 
+    <ng-template pageTab="Large">
+        <tui-doc-example
+            id="basic"
+            heading="Basic"
+            [content]="example8"
+        >
+            <tui-card-example-8></tui-card-example-8>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cell-avatar"
+            heading="Avatar"
+            [content]="example9"
+        >
+            <tui-card-example-9></tui-card-example-9>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cell"
+            heading="Cell"
+            [content]="example10"
+        >
+            <tui-card-example-10></tui-card-example-10>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cards-list"
+            heading="Cards List"
+            [content]="example11"
+        >
+            <tui-card-example-11></tui-card-example-11>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cell-list"
+            heading="Cell List"
+            [content]="example12"
+        >
+            <tui-card-example-12></tui-card-example-12>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cell-list-columns"
+            heading="Cell List (2 columns)"
+            [content]="example13"
+            [fullsize]="true"
+        >
+            <tui-card-example-13></tui-card-example-13>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cell-list-headless"
+            heading="Cell List (headless)"
+            [content]="example14"
+        >
+            <tui-card-example-14></tui-card-example-14>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="progress"
+            heading="Progress"
+            [content]="example15"
+        >
+            <tui-card-example-15></tui-card-example-15>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="map"
+            heading="Map"
+            [content]="example16"
+            [fullsize]="true"
+        >
+            <tui-card-example-16></tui-card-example-16>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="image"
+            heading="Image"
+            [content]="example17"
+        >
+            <tui-card-example-17></tui-card-example-17>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="image-dark"
+            heading="Image-dark"
+            [content]="example18"
+        >
+            <tui-card-example-18></tui-card-example-18>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="paddings"
+            heading="Paddings and radiuses"
+            [content]="example19"
+        >
+            <tui-card-example-19></tui-card-example-19>
+        </tui-doc-example>
+    </ng-template>
+
     <ng-template pageTab="Setup">
         <ol class="b-demo-steps">
             <li>

projects/demo/src/modules/experimental/card/examples/10/index.html

@@ -0,0 +1,74 @@
+<button
+    tuiCard="l"
+    tuiCell
+    tuiSurface="elevated"
+>
+    <header tuiHeader>
+        <h1 tuiTitle>
+            Title
+            <span tuiSubtitle>Subtitle</span>
+        </h1>
+
+        <aside tuiAccessories>
+            <tui-avatar
+                appearance="primary"
+                src="tuiIconStar"
+            ></tui-avatar>
+        </aside>
+    </header>
+</button>
+
+<button
+    tuiCard="l"
+    tuiCell
+    tuiSurface="elevated"
+>
+    <section tuiCell>
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconStar"
+        ></tui-avatar>
+        <div tuiTitle>
+            Title
+            <div tuiSubtitle>Description</div>
+        </div>
+    </section>
+</button>
+
+<section class="actions">
+    <button
+        tuiCard="l"
+        tuiCell
+        tuiSurface="elevated"
+    >
+        <header tuiHeader>
+            <h2 tuiTitle>Title</h2>
+
+            <aside tuiAccessories>
+                <tui-avatar
+                    appearance="primary"
+                    size="xxs"
+                    src="tuiIconStar"
+                ></tui-avatar>
+            </aside>
+        </header>
+    </button>
+
+    <button
+        tuiCard="l"
+        tuiCell
+        tuiSurface="elevated"
+    >
+        <header tuiHeader>
+            <h2 tuiTitle>Title</h2>
+
+            <aside tuiAccessories>
+                <tui-avatar
+                    appearance="primary"
+                    size="xxs"
+                    src="tuiIconStar"
+                ></tui-avatar>
+            </aside>
+        </header>
+    </button>
+</section>