feat: replace polymorpheus with tuiSlot

taiga-family · Oct 13, 2023 · 341b9e9 · 341b9e9
1 parent e8b4d4c
commit 341b9e9
Show file tree

Hide file tree

Showing 23 changed files with 429 additions and 250 deletions.
diff --git a/projects/demo-playwright/utils/mock-images.ts b/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`,

diff --git a/projects/demo/src/modules/experimental/cell/cell.component.ts b/projects/demo/src/modules/experimental/cell/cell.component.ts
@@ -1,11 +1,11 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {
-    RawLoaderContent,
     TuiDocExample,
     tuiDocExampleOptionsProvider,
+    TuiRawLoaderContent,
 } from '@taiga-ui/addon-doc';
-import {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
+import {TuiSizeL, TuiSizeS, TuiSizeXXS} from '@taiga-ui/core';
 
 @Component({
     selector: 'example-cell',
@@ -21,14 +21,26 @@ export class ExampleTuiCellComponent {
     secondaryTitle = 'Secondary title';
     secondaryDescription = 'Secondary description';
 
+    get markerSize(): TuiSizeXXS {
+        switch (this.size) {
+            case 'l':
+                return 's';
+            case 'm':
+                return 'xs';
+            default:
+            case 's':
+                return 'xxs';
+        }
+    }
+
     readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeS> = ['s', 'm', 'l'];
     size: TuiSizeL | TuiSizeS = 'l';
 
-    readonly exampleModule: RawLoaderContent = import(
+    readonly exampleModule: TuiRawLoaderContent = import(
         './examples/import/import-module.md?raw'
     );
 
-    readonly exampleHtml: RawLoaderContent = import(
+    readonly exampleHtml: TuiRawLoaderContent = import(
         './examples/import/insert-template.md?raw'
     );
 
@@ -39,8 +51,8 @@ export class ExampleTuiCellComponent {
 
     readonly example2: TuiDocExample = {
         HTML: import('./examples/2/index.html?raw'),
-        TypeScript: import('./examples/2/index.ts?raw'),
         LESS: import('./examples/2/index.less?raw'),
+        TypeScript: import('./examples/2/index.ts?raw'),
     };
 
     readonly example3: TuiDocExample = {
@@ -54,4 +66,10 @@ export class ExampleTuiCellComponent {
         LESS: import('./examples/4/index.less?raw'),
         TypeScript: import('./examples/4/index.ts?raw'),
     };
+
+    readonly example5: TuiDocExample = {
+        HTML: import('./examples/5/index.html?raw'),
+        LESS: import('./examples/5/index.less?raw'),
+        TypeScript: import('./examples/5/index.ts?raw'),
+    };
 }
diff --git a/projects/demo/src/modules/experimental/cell/cell.module.ts b/projects/demo/src/modules/experimental/cell/cell.module.ts
@@ -2,7 +2,7 @@ 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 {TuiMoneyModule, TuiThumbnailCardModule} from '@taiga-ui/addon-commerce';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiLinkModule, TuiNotificationModule, TuiTooltipModule} from '@taiga-ui/core';
 import {
@@ -12,13 +12,14 @@ import {
     TuiCellModule,
     TuiFadeModule,
 } from '@taiga-ui/experimental';
-import {TuiMarkerIconModule, TuiToggleModule} from '@taiga-ui/kit';
+import {TuiMarkerIconModule, TuiProgressModule, TuiToggleModule} 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';
 
 @NgModule({
     imports: [
@@ -34,6 +35,8 @@ import {TuiCellExample4} from './examples/4';
         TuiMarkerIconModule,
         TuiMoneyModule,
         TuiNotificationModule,
+        TuiProgressModule,
+        TuiThumbnailCardModule,
         TuiToggleModule,
         TuiTooltipModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiCellComponent)),
@@ -44,6 +47,7 @@ import {TuiCellExample4} from './examples/4';
         TuiCellExample2,
         TuiCellExample3,
         TuiCellExample4,
+        TuiCellExample5,
     ],
     exports: [ExampleTuiCellComponent],
 })

diff --git a/projects/demo/src/modules/experimental/cell/cell.styles.less b/projects/demo/src/modules/experimental/cell/cell.styles.less
@@ -1,6 +1,6 @@
 @import 'taiga-ui-local';
 
-example-cell tui-cell {
+example-cell [tuiCell] {
     max-width: 25rem;
 
     @media @tui-mobile {

diff --git a/projects/demo/src/modules/experimental/cell/cell.template.html b/projects/demo/src/modules/experimental/cell/cell.template.html
@@ -19,22 +19,23 @@
         </tui-doc-example>
 
         <tui-doc-example
-            id="polymorpheus"
-            heading="Power of Polymorpheus"
+            id="slots-content-projection"
+            heading="Multi-slot content projection"
             [content]="example2"
             [description]="moneyDescription"
         >
             <ng-template #moneyDescription>
-                All basic properties is
+                <code>Cell</code>
+                component makes the most of Angular
                 <a
-                    href="https://github.com/taiga-family/ng-polymorpheus"
+                    href="https://angular.io/guide/content-projection#multi-slot-content-projection"
                     rel="noreferrer"
                     target="_blank"
                     tuiLink
                 >
-                    <code>PolymorpheusContent</code>
+                    "Multi-slot content projection"
                 </a>
-                . It provides you with great flexibility to pass any content you wish.
+                pattern.
                 <br />
                 This example pass
                 <a
@@ -54,7 +55,7 @@
                 <code>secondaryTitle</code>
                 /
                 <code>description</code>
-                properties.
+                slots.
             </ng-template>
             <tui-cell-example-2></tui-cell-example-2>
         </tui-doc-example>
@@ -75,7 +76,9 @@
                 </a>
                 directive. Or you can use native
                 <code>text-overflow: ellipsis</code>
-                . Choose any tool you wish!
+                .
+                <br />
+                Choose any tool you wish!
             </ng-template>
 
             <tui-cell-example-3></tui-cell-example-3>
@@ -88,67 +91,87 @@
         >
             <tui-cell-example-4></tui-cell-example-4>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="size"
+            heading="Sizes"
+            [content]="example5"
+        >
+            <tui-cell-example-5></tui-cell-example-5>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>
         <tui-doc-demo>
-            <tui-cell
-                [description]="description"
-                [secondaryDescription]="secondaryDescription"
-                [secondaryTitle]="secondaryTitle"
+            <div
+                tuiCell
                 [size]="size"
-                [title]="title"
-            ></tui-cell>
+            >
+                <tui-marker-icon
+                    mode="primary"
+                    new
+                    src="tuiIconStarLarge"
+                    [size]="markerSize"
+                ></tui-marker-icon>
+
+                <span tuiSlot="title">{{ title }}</span>
+                <span tuiSlot="description">{{ description }}</span>
+                <span tuiSlot="secondaryTitle">{{ secondaryTitle }}</span>
+                <span tuiSlot="secondaryDescription">{{ secondaryDescription }}</span>
+            </div>
         </tui-doc-demo>
         <tui-doc-documentation>
             <ng-template
                 documentationPropertyMode="input"
-                documentationPropertyName="title"
-                documentationPropertyType="PolymorpheusContent"
+                documentationPropertyName="size"
+                documentationPropertyType="TuiSizeL | TuiSizeS"
+                [documentationPropertyValues]="sizeVariants"
+                [(documentationPropertyValue)]="size"
+            >
+                Size of the cell. This property configures min-height, fonts and paddings.
+
+                <p>
+                    <strong>Note</strong>
+                    : this property does not change anything for mobile platform! Mobile devices has only
+                    <code>l</code>
+                    -size.
+                </p>
+            </ng-template>
+        </tui-doc-documentation>
+
+        <tui-doc-documentation heading="Slots">
+            <ng-template
+                documentationPropertyMode="input"
+                documentationPropertyName="tuiSlot='title'"
+                documentationPropertyType="string"
                 [(documentationPropertyValue)]="title"
             >
                 Left-side main large text
             </ng-template>
             <ng-template
                 documentationPropertyMode="input"
-                documentationPropertyName="description"
-                documentationPropertyType="PolymorpheusContent"
+                documentationPropertyName="tuiSlot='description'"
+                documentationPropertyType="string"
                 [(documentationPropertyValue)]="description"
             >
                 Left-side secondary small text
             </ng-template>
             <ng-template
                 documentationPropertyMode="input"
-                documentationPropertyName="secondaryTitle"
-                documentationPropertyType="PolymorpheusContent"
+                documentationPropertyName="tuiSlot='secondaryTitle'"
+                documentationPropertyType="string"
                 [(documentationPropertyValue)]="secondaryTitle"
             >
                 Right-side main large text
             </ng-template>
             <ng-template
                 documentationPropertyMode="input"
-                documentationPropertyName="secondaryDescription"
-                documentationPropertyType="PolymorpheusContent"
+                documentationPropertyName="tuiSlot='secondaryDescription'"
+                documentationPropertyType="string"
                 [(documentationPropertyValue)]="secondaryDescription"
             >
                 Right-side secondary small text
             </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="size"
-                documentationPropertyType="TuiSizeL | TuiSizeS"
-                [documentationPropertyValues]="sizeVariants"
-                [(documentationPropertyValue)]="size"
-            >
-                Size of the cell. This property configures min-height, fonts and paddings.
-
-                <p>
-                    <strong>Note</strong>
-                    : this property does not change anything for mobile platform! Mobile devices has only
-                    <code>l</code>
-                    -size.
-                </p>
-            </ng-template>
         </tui-doc-documentation>
     </ng-template>
 

diff --git a/projects/demo/src/modules/experimental/cell/examples/1/index.html b/projects/demo/src/modules/experimental/cell/examples/1/index.html
@@ -1,13 +1,13 @@
-<tui-cell
-    description="Description"
-    secondaryDescription="Secondary description"
-    secondaryTitle="Secondary title"
-    title="Title"
->
+<div tuiCell>
     <tui-marker-icon
         mode="primary"
         new
         size="s"
         src="tuiIconStarLarge"
     ></tui-marker-icon>
-</tui-cell>
+
+    <ng-container tuiSlot="title">Title</ng-container>
+    <ng-container tuiSlot="description">Description</ng-container>
+    <ng-container tuiSlot="secondaryTitle">Secondary title</ng-container>
+    <ng-container tuiSlot="secondaryDescription">Secondary description</ng-container>
+</div>