feat(layout): BlockDetails, Comment add new components (#7010)

Co-authored-by: taiga-family-bot <[email protected]>

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

@@ -256,6 +256,12 @@ export const ROUTES: Routes = [
             title: 'Button ',
         },
     },
+    route({
+        path: 'layout/block-details',
+        loadComponent: async () =>
+            import('../components/block-details/block-details.component'),
+        title: 'BlockDetails',
+    }),
     {
         path: 'experimental/button-vertical',
         loadChildren: async () =>
@@ -291,6 +297,11 @@ export const ROUTES: Routes = [
             title: 'Cell',
         },
     },
+    route({
+        path: 'components/comment',
+        loadComponent: async () => import('../directives/comment/comment.component'),
+        title: 'Comment',
+    }),
     {
         path: 'experimental/compass',
         loadChildren: async () =>

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

@@ -866,6 +866,12 @@ export const pages: TuiDocPages = [
             },
         ],
     },
+    {
+        section: 'Layout',
+        title: 'BlockDetails',
+        keywords: 'details, block, детали, блок',
+        route: '/layout/block-details',
+    },
     {
         section: 'Experimental',
         title: 'Cell',
@@ -878,6 +884,12 @@ export const pages: TuiDocPages = [
         keywords: 'tag, тэг, badge',
         route: '/experimental/chip',
     },
+    {
+        section: 'Components',
+        title: 'Comment',
+        keywords: 'comment, tip, коммент',
+        route: '/components/comment',
+    },
     {
         section: 'Experimental',
         title: 'Compass',

projects/demo/src/modules/components/block-details/block-details.component.ts

@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiExamplePipe, TuiSetupComponent} from '@demo/utils';
+import type {TuiRawLoaderContent} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
+
+import {TuiBlockDetailsExample1} from './examples/1';
+import {TuiBlockDetailsExample2} from './examples/2';
+
+@Component({
+    standalone: true,
+    selector: 'example-block-details',
+    imports: [
+        TuiExamplePipe,
+        TuiBlockDetailsExample1,
+        TuiBlockDetailsExample2,
+        TuiAddonDocModule,
+        TuiSetupComponent,
+    ],
+    templateUrl: './block-details.template.html',
+    changeDetection,
+})
+export default class ExampleTuiBlockDetailsComponent {
+    protected readonly import: TuiRawLoaderContent = import(
+        './examples/import/import-module.md?raw'
+    );
+
+    protected readonly template: TuiRawLoaderContent = import(
+        './examples/import/insert-template.md?raw'
+    );
+}

projects/demo/src/modules/components/block-details/block-details.template.html

@@ -0,0 +1,32 @@
+<tui-doc-page
+    header="BlockDetails"
+    package="LAYOUT"
+    type="components"
+>
+    <ng-template pageTab>
+        <p>Layout directive for describing details. For example, transaction details</p>
+
+        <tui-doc-example
+            id="full"
+            heading="Full"
+            [content]="1 | tuiExample: 'html,ts'"
+        >
+            <tui-block-details-example-1></tui-block-details-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="customization"
+            heading="Customization"
+            [content]="2 | tuiExample"
+        >
+            <tui-block-details-example-2></tui-block-details-example-2>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <tui-setup
+            [import]="import"
+            [template]="template"
+        />
+    </ng-template>
+</tui-doc-page>

projects/demo/src/modules/components/block-details/examples/1/index.html

@@ -0,0 +1,18 @@
+<div tuiBlockDetails>
+    <tui-avatar
+        src="JW"
+        [size]="isMobile ? 'xl' : 'xxl'"
+    ></tui-avatar>
+    <h2 tuiTitle>
+        John W
+        <div tuiSubtitle>money transfers</div>
+    </h2>
+
+    <span>{{ -1050 | tuiAmount: 'USD' | async }}</span>
+    <span tuiSubtitle>today</span>
+    <span tuiComment>Birthday gift</span>
+    <div tuiAccessories>
+        <tui-badge appearance="neutral">private</tui-badge>
+        <tui-badge appearance="default">fast</tui-badge>
+    </div>
+</div>

projects/demo/src/modules/components/block-details/examples/1/index.ts

@@ -0,0 +1,27 @@
+import {AsyncPipe} from '@angular/common';
+import {Component, inject} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
+import {TUI_IS_MOBILE} from '@taiga-ui/cdk';
+import {TuiAvatarComponent, TuiBadgeDirective, TuiCommentDirective} from '@taiga-ui/kit';
+import {TuiBlockDetailsDirective} from '@taiga-ui/layout';
+
+@Component({
+    standalone: true,
+    selector: 'tui-block-details-example-1',
+    imports: [
+        AsyncPipe,
+        TuiAvatarComponent,
+        TuiCommentDirective,
+        TuiAmountPipe,
+        TuiBlockDetailsDirective,
+        TuiBadgeDirective,
+    ],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export class TuiBlockDetailsExample1 {
+    protected readonly isMobile = inject(TUI_IS_MOBILE);
+}

projects/demo/src/modules/components/block-details/examples/2/index.html

@@ -0,0 +1,33 @@
+<div tuiBlockDetails>
+    <tui-avatar
+        src="tuiIconGiftLarge"
+        [size]="isMobile ? 'xl' : 'xxl'"
+    ></tui-avatar>
+    <h2 tuiTitle>
+        Auchan
+        <div tuiSubtitle>grocery &#x2022; MMC 5350</div>
+    </h2>
+
+    <span [style.color]="'var(--tui-positive)'">{{ 0.5 | tuiAmount: 'USD' | async }}</span>
+    <span
+        tuiFade
+        tuiSubtitle
+    >
+        promotion (long value with fade)
+    </span>
+
+    <tui-badge appearance="neutral">cashback</tui-badge>
+</div>
+
+<div tuiBlockDetails>
+    <tui-avatar
+        src="tuiIconStarLarge"
+        [size]="isMobile ? 'xl' : 'xxl'"
+    ></tui-avatar>
+    <h2 tuiTitle>
+        Uber
+        <div tuiSubtitle>taxi &#x2022; MMC 5550</div>
+    </h2>
+
+    <span [style.color]="'var(--tui-negative)'">{{ -10.5 | tuiAmount: 'USD' | async }}</span>
+</div>

projects/demo/src/modules/components/block-details/examples/2/index.less

@@ -0,0 +1,10 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 5rem;
+}
+
+[tuiSubtitle] {
+    white-space: nowrap;
+    max-width: 11rem;
+}

projects/demo/src/modules/components/block-details/examples/2/index.ts

@@ -0,0 +1,28 @@
+import {AsyncPipe} from '@angular/common';
+import {Component, inject} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {tuiAmountOptionsProvider, TuiAmountPipe} from '@taiga-ui/addon-commerce';
+import {TUI_IS_MOBILE} from '@taiga-ui/cdk';
+import {TuiAvatarComponent, TuiBadgeDirective} from '@taiga-ui/kit';
+import {TuiBlockDetailsDirective} from '@taiga-ui/layout';
+
+@Component({
+    standalone: true,
+    selector: 'tui-block-details-example-2',
+    imports: [
+        AsyncPipe,
+        TuiAvatarComponent,
+        TuiAmountPipe,
+        TuiBlockDetailsDirective,
+        TuiBadgeDirective,
+    ],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+    providers: [tuiAmountOptionsProvider({sign: 'always'})],
+})
+export class TuiBlockDetailsExample2 {
+    protected readonly isMobile = inject(TUI_IS_MOBILE);
+}

projects/demo/src/modules/components/block-details/examples/import/import-module.md

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

projects/demo/src/modules/components/block-details/examples/import/insert-template.md

@@ -0,0 +1,14 @@
+```html
+<div tuiBlockDetails>
+  <tui-avatar></tui-avatar>
+  <h2 tuiTitle>
+    Title
+    <div tuiSubtitle>Subtitle</div>
+  </h2>
+
+  <span>{{ amount }} | tuiAmount: 'USD' | async }}</span>
+  <span tuiAmountDescription>description</span>
+  <span tuiComment>comment</span>
+  <tui-badge appearance="neutral">Badge</tui-badge>
+</div>
+```

projects/demo/src/modules/directives/comment/comment.component.ts

@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiExamplePipe, TuiSetupComponent} from '@demo/utils';
+import type {TuiRawLoaderContent} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
+
+import {TuiCommentExample1} from './examples/1';
+import {TuiCommentExample2} from './examples/2';
+
+@Component({
+    standalone: true,
+    selector: 'example-comment',
+    imports: [
+        TuiCommentExample1,
+        TuiCommentExample2,
+        TuiExamplePipe,
+        TuiAddonDocModule,
+        TuiSetupComponent,
+    ],
+    templateUrl: './comment.template.html',
+    changeDetection,
+})
+export default class ExampleTuiCommentComponent {
+    protected readonly import: TuiRawLoaderContent = import(
+        './examples/import/import-module.md?raw'
+    );
+
+    protected readonly template: TuiRawLoaderContent = import(
+        './examples/import/insert-template.md?raw'
+    );
+}

projects/demo/src/modules/directives/comment/comment.template.html

@@ -0,0 +1,30 @@
+<tui-doc-page
+    header="Comment"
+    package="KIT"
+    type="directives"
+>
+    <ng-template pageTab>
+        <tui-doc-example
+            id="basic"
+            heading="Basic"
+            [content]="1 | tuiExample: 'html,ts'"
+        >
+            <tui-comment-example-1></tui-comment-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="customization"
+            heading="Customization"
+            [content]="2 | tuiExample"
+        >
+            <tui-comment-example-2></tui-comment-example-2>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <tui-setup
+            [import]="import"
+            [template]="template"
+        />
+    </ng-template>
+</tui-doc-page>

projects/demo/src/modules/directives/comment/examples/1/index.html

@@ -0,0 +1 @@
+<span tuiComment>Birthday gift</span>

projects/demo/src/modules/directives/comment/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 {TuiCommentDirective} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    selector: 'tui-comment-example-1',
+    imports: [TuiCommentDirective],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export class TuiCommentExample1 {}

projects/demo/src/modules/directives/comment/examples/2/index.html

@@ -0,0 +1,17 @@
+<div tuiComment="top">Good job</div>
+
+<div
+    tuiComment="bottom"
+    class="success"
+>
+    Cashback
+</div>
+
+<div
+    tuiComment="left"
+    class="primary"
+>
+    Extra payment
+</div>
+
+<div tuiComment="right">Check it out</div>

projects/demo/src/modules/directives/comment/examples/2/index.less

@@ -0,0 +1,13 @@
+:host {
+    display: flex;
+    gap: 1.25rem;
+    flex-wrap: wrap;
+}
+
+.success {
+    background: var(--tui-success-fill);
+}
+
+.primary {
+    background: var(--tui-primary);
+}

projects/demo/src/modules/directives/comment/examples/2/index.ts

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiCommentDirective} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    selector: 'tui-comment-example-2',
+    imports: [TuiCommentDirective],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiCommentExample2 {}