Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(experimental): BlockDetails add new component #6910

Merged
merged 5 commits into from
Mar 14, 2024
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions projects/demo/src/modules/app/app.routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -335,6 +335,15 @@ export const ROUTES: Routes = [
title: 'BadgedContent ',
},
},
{
path: 'experimental/block-details',
loadChildren: async () =>
(await import('../experimental/block-details/block-details.module'))
.ExampleTuiBlockDetailsModule,
data: {
title: 'BlockDetails',
},
},
{
path: 'experimental/button',
loadChildren: async () =>
Expand Down Expand Up @@ -378,6 +387,15 @@ export const ROUTES: Routes = [
title: 'Cell',
},
},
{
path: 'experimental/comment',
loadChildren: async () =>
(await import('../experimental/comment/comment.module'))
.ExampleTuiCommentModule,
data: {
title: 'Comment',
},
},
{
path: 'experimental/compass',
loadChildren: async () =>
Expand Down
12 changes: 12 additions & 0 deletions projects/demo/src/modules/app/pages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -895,6 +895,12 @@ export const pages: TuiDocPages = [
},
],
},
{
section: 'Experimental',
title: 'BlockDetails',
keywords: 'details, block, детали, блок',
route: '/experimental/block-details',
},
{
section: 'Experimental',
title: 'Button',
Expand Down Expand Up @@ -937,6 +943,12 @@ export const pages: TuiDocPages = [
keywords: 'tag, тэг, badge',
route: '/experimental/chip',
},
{
section: 'Experimental',
title: 'Comment',
keywords: 'comment, tip, коммент',
route: '/experimental/comment',
},
{
section: 'Experimental',
title: 'Compass',
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';

@Component({
selector: 'example-block-details',
templateUrl: './block-details.template.html',
changeDetection,
})
export class ExampleTuiBlockDetailsComponent {
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'),
TypeScript: import('./examples/1/index.ts?raw'),
};

readonly example2: TuiDocExample = {
HTML: import('./examples/2/index.html?raw'),
LESS: import('./examples/2/index.less?raw'),
TypeScript: import('./examples/2/index.ts?raw'),
};
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {tuiGetDocModules} from '@taiga-ui/addon-doc';
import {TuiNotificationModule} from '@taiga-ui/core';
import {
TuiAmountPipeModule,
TuiAvatarModule,
TuiBadgeModule,
TuiBlockDetailsModule,
TuiCommentModule,
TuiFadeModule,
TuiTitleModule,
} from '@taiga-ui/experimental';

import {ExampleTuiBlockDetailsComponent} from './block-details.component';
import {TuiBlockDetailsExample1} from './examples/1';
import {TuiBlockDetailsExample2} from './examples/2';

@NgModule({
imports: [
CommonModule,
TuiAvatarModule,
TuiAmountPipeModule,
TuiBadgeModule,
TuiTitleModule,
TuiCommentModule,
TuiBlockDetailsModule,
TuiFadeModule,
TuiNotificationModule,
tuiGetDocModules(ExampleTuiBlockDetailsComponent),
],
declarations: [
ExampleTuiBlockDetailsComponent,
TuiBlockDetailsExample1,
TuiBlockDetailsExample2,
],
exports: [ExampleTuiBlockDetailsComponent],
})
export class ExampleTuiBlockDetailsModule {}
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<tui-doc-page
header="BlockDetails"
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>

<p>Layout component for describing details. For example, transaction details</p>

<tui-doc-example
id="full"
heading="Full"
[content]="example1"
>
<tui-block-details-example-1></tui-block-details-example-1>
</tui-doc-example>

<tui-doc-example
id="customization"
heading="Customization"
[content]="example2"
>
<tui-block-details-example-2></tui-block-details-example-2>
</tui-doc-example>
</ng-template>

<ng-template pageTab="Setup">
<ol class="b-demo-steps">
<li>
<p>Import module:</p>

<tui-doc-code
filename="my.module.ts"
[code]="exampleModule"
></tui-doc-code>
</li>

<li>
<p>Add to the template:</p>

<tui-doc-code
filename="my.component.html"
[code]="exampleHtml"
></tui-doc-code>
</li>
</ol>
</ng-template>
</tui-doc-page>
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
:host {
width: 15rem;
vladimirpotekhin marked this conversation as resolved.
Show resolved Hide resolved
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import {Component, Inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_MOBILE} from '@taiga-ui/cdk';

@Component({
selector: 'tui-block-details-example-1',
templateUrl: './index.html',
styleUrls: ['./index.less'],
encapsulation,
changeDetection,
})
export class TuiBlockDetailsExample1 {
constructor(@Inject(TUI_IS_MOBILE) readonly isMobile: boolean) {}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<div>
vladimirpotekhin marked this conversation as resolved.
Show resolved Hide resolved
<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>

<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>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
:host {
display: flex;
flex-direction: column;
gap: 5rem;
}

[tuiSubtitle] {
white-space: nowrap;
max-width: 11rem;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import {Component, Inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_MOBILE} from '@taiga-ui/cdk';
import {tuiAmountOptionsProvider} from '@taiga-ui/experimental';

@Component({
selector: 'tui-block-details-example-2',
templateUrl: './index.html',
styleUrls: ['./index.less'],
encapsulation,
changeDetection,
providers: [tuiAmountOptionsProvider({sign: 'always'})],
})
export class TuiBlockDetailsExample2 {
constructor(@Inject(TUI_IS_MOBILE) readonly isMobile: boolean) {}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
```ts
import {NgModule} from '@angular/core';
import {TuiBlockDetailsModule} from '@taiga-ui/experimental';
// ...

@NgModule({
imports: [
// ...
TuiBlockDetailsModule,
],
})
export class MyModule {}
```
Original file line number Diff line number Diff line change
@@ -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>
```
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';

@Component({
selector: 'example-comment',
templateUrl: './comment.template.html',
changeDetection,
})
export class ExampleTuiCommentComponent {
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'),
TypeScript: import('./examples/1/index.ts?raw'),
};

readonly example2: TuiDocExample = {
HTML: import('./examples/2/index.html?raw'),
LESS: import('./examples/2/index.less?raw'),
TypeScript: import('./examples/2/index.ts?raw'),
};
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {tuiGetDocModules} from '@taiga-ui/addon-doc';
import {TuiNotificationModule} from '@taiga-ui/core';
import {TuiCommentModule} from '@taiga-ui/experimental';

import {ExampleTuiCommentComponent} from './comment.component';
import {TuiCommentExample1} from './examples/1';
import {TuiCommentExample2} from './examples/2';

@NgModule({
imports: [
CommonModule,
TuiCommentModule,
TuiNotificationModule,
tuiGetDocModules(ExampleTuiCommentComponent),
],
declarations: [ExampleTuiCommentComponent, TuiCommentExample1, TuiCommentExample2],
exports: [ExampleTuiCommentComponent],
})
export class ExampleTuiCommentModule {}
Loading
Loading