Skip to content

Commit

Permalink
feat(experimental): add tuiCardLarge
Browse files Browse the repository at this point in the history
  • Loading branch information
splincode committed Feb 1, 2024
1 parent 05eb2cd commit df72511
Show file tree
Hide file tree
Showing 88 changed files with 1,563 additions and 217 deletions.
12 changes: 12 additions & 0 deletions projects/addon-mobile/styles/common/card-large.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
[tuiCardLarge] {
&[data-space='normal'] {
--t-padding: 1.25rem;
--t-gap: 1.25rem;
}

&[data-space='compact'] {
--t-padding: 1rem;
--t-gap: 1rem;
--t-comp: -0.125rem;
}
}
1 change: 1 addition & 0 deletions projects/addon-mobile/styles/taiga-ui-mobile.less
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,5 @@
@import './common/block-status';
@import './common/button';
@import './common/title';
@import './common/card-large';
}
1 change: 1 addition & 0 deletions projects/core/styles/theme/appearance/outline.less
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@

.appearance-hover({
background: var(--tui-clear);
cursor: pointer;
--t-bs: var(--tui-base-05);
});

Expand Down
1 change: 1 addition & 0 deletions projects/demo-playwright/utils/mock-images.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
],
Expand Down
Binary file added projects/demo/src/assets/images/illustration.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 13 additions & 3 deletions projects/demo/src/modules/app/app.routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -277,11 +277,21 @@ export const ROUTES: Routes = [
},
},
{
path: 'experimental/card',
path: 'experimental/card-medium',
loadChildren: async () =>
(await import('../experimental/card/card.module')).ExampleTuiCardModule,
(await import('../experimental/card-medium/card-medium.module'))
.ExampleTuiCardModule,
data: {
title: 'Card',
title: 'CardMedium',
},
},
{
path: 'experimental/card-large',
loadChildren: async () =>
(await import('../experimental/card-large/card-large.module'))
.ExampleTuiCardLargeModule,
data: {
title: 'CardLarge',
},
},
{
Expand Down
12 changes: 9 additions & 3 deletions projects/demo/src/modules/app/pages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1031,9 +1031,15 @@ export const pages: TuiDocPages = [
},
{
section: 'Experimental',
title: 'Card',
keywords: 'card, block, карточка, блок',
route: '/experimental/card',
title: 'CardMedium',
keywords: 'card, card-medium, medium, block, карточка, блок',
route: '/experimental/card-medium',
},
{
section: 'Experimental',
title: 'CardLarge',
keywords: 'card, card-large, large, block, карточка, блок',
route: '/experimental/card-large',
},
{
section: 'Experimental',
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';

@Component({
selector: 'example-card',
templateUrl: './card-large.template.html',
changeDetection,
})
export class ExampleTuiCardLargeComponent {
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'),
LESS: import('./examples/1/index.less?raw'),
};

readonly example2: TuiDocExample = {
HTML: import('./examples/2/index.html?raw'),
};

readonly example3: TuiDocExample = {
HTML: import('./examples/3/index.html?raw'),
LESS: import('./examples/3/index.less?raw'),
};

readonly example4: TuiDocExample = {
HTML: import('./examples/4/index.html?raw'),
LESS: import('./examples/4/index.less?raw'),
};

readonly example5: TuiDocExample = {
HTML: import('./examples/5/index.html?raw'),
};

readonly example6: TuiDocExample = {
HTML: import('./examples/6/index.html?raw'),
LESS: import('./examples/6/index.less?raw'),
};

readonly example7: TuiDocExample = {
HTML: import('./examples/7/index.html?raw'),
LESS: import('./examples/7/index.less?raw'),
};

readonly example8: TuiDocExample = {
HTML: import('./examples/8/index.html?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'),
};
}
100 changes: 100 additions & 0 deletions projects/demo/src/modules/experimental/card-large/card-large.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import {CommonModule} from '@angular/common';
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 {
TuiAppearanceDirective,
TuiDataListModule,
TuiHintModule,
TuiHostedDropdownModule,
TuiLinkModule,
TuiNotificationModule,
TuiScrollbarModule,
TuiSvgModule,
} from '@taiga-ui/core';
import {
TuiAutoColorModule,
TuiAvatarModule,
TuiAvatarStackModule,
TuiButtonCloseModule,
TuiButtonModule,
TuiCardModule,
TuiCellModule,
TuiFadeModule,
TuiFallbackSrcModule,
TuiHeaderDirective,
TuiIconModule,
TuiInitialsModule,
TuiSurfaceModule,
TuiThumbnailCardModule,
TuiTitleModule,
} from '@taiga-ui/experimental';
import {TuiBadgeDirective} from '@taiga-ui/kit';

import {ExampleTuiCardLargeComponent} from './card-large.component';
import {TuiCardLargeExample1} from './examples/1';
import {TuiCardLargeExample2} from './examples/2';
import {TuiCardLargeExample3} from './examples/3';
import {TuiCardLargeExample4} from './examples/4';
import {TuiCardLargeExample5} from './examples/5';
import {TuiCardLargeExample6} from './examples/6';
import {TuiCardLargeExample7} from './examples/7';
import {TuiCardLargeExample8} from './examples/8';
import {TuiCardLargeExample9} from './examples/9';
import {TuiCardLargeExample10} from './examples/10';
import {TuiCardLargeExample11} from './examples/11';
import {TuiCardLargeExample12} from './examples/12';

@NgModule({
imports: [
CommonModule,
TuiAvatarStackModule,
TuiAutoColorModule,
TuiInitialsModule,
TuiNotificationModule,
TuiFallbackSrcModule,
TuiFadeModule,
TuiCardModule,
TuiSurfaceModule,
TuiSvgModule,
TuiBadgeDirective,
TuiTitleModule,
TuiAvatarModule,
TuiScrollbarModule,
TuiHintModule,
FormsModule,
TuiRippleModule,
TuiThumbnailCardModule,
TuiIconModule,
TuiButtonModule,
TuiHeaderDirective,
TuiCellModule,
tuiGetDocModules(ExampleTuiCardLargeComponent),
TuiRepeatTimesModule,
TuiDataListModule,
TuiHostedDropdownModule,
TuiButtonCloseModule,
TuiPlatformModule,
TuiLinkModule,
TuiAppearanceDirective,
],
declarations: [
ExampleTuiCardLargeComponent,
TuiCardLargeExample1,
TuiCardLargeExample2,
TuiCardLargeExample3,
TuiCardLargeExample4,
TuiCardLargeExample5,
TuiCardLargeExample6,
TuiCardLargeExample7,
TuiCardLargeExample8,
TuiCardLargeExample9,
TuiCardLargeExample10,
TuiCardLargeExample11,
TuiCardLargeExample12,
],
exports: [ExampleTuiCardLargeComponent],
})
export class ExampleTuiCardLargeModule {}
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
<tui-doc-page
header="CardLarge"
package="EXPERIMENTAL"
type="components"
>
<ng-template pageTab>
<tui-doc-example
id="basic"
heading="Basic"
[content]="example1"
>
<tui-card-large-example-1></tui-card-large-example-1>
</tui-doc-example>

<tui-doc-example
id="cell-avatar"
heading="Avatar"
[content]="example2"
>
<tui-card-large-example-2></tui-card-large-example-2>
</tui-doc-example>

<tui-doc-example
id="single"
heading="Single item"
[content]="example3"
>
<tui-card-large-example-3></tui-card-large-example-3>
</tui-doc-example>

<tui-doc-example
id="cards-list"
heading="Cards List"
[content]="example4"
>
<tui-card-large-example-4></tui-card-large-example-4>
</tui-doc-example>

<tui-doc-example
id="cell-list"
heading="Cell List"
[content]="example5"
>
<tui-card-large-example-5></tui-card-large-example-5>
</tui-doc-example>

<tui-doc-example
id="cell-list-columns"
heading="Cell List (2 columns)"
[content]="example6"
[fullsize]="true"
>
<tui-card-large-example-6></tui-card-large-example-6>
</tui-doc-example>

<tui-doc-example
id="cell-list-headless"
heading="Cell List (actions)"
[content]="example7"
>
<tui-card-large-example-7></tui-card-large-example-7>
</tui-doc-example>

<tui-doc-example
id="align"
heading="Footer alignment"
[content]="example8"
>
<tui-card-large-example-8></tui-card-large-example-8>
</tui-doc-example>

<tui-doc-example
id="map"
heading="Map"
[content]="example9"
[fullsize]="true"
>
<tui-card-large-example-9></tui-card-large-example-9>
</tui-doc-example>

<tui-doc-example
id="image"
heading="Image"
[content]="example10"
>
<tui-card-large-example-10></tui-card-large-example-10>
</tui-doc-example>

<tui-doc-example
id="image-dark"
heading="Image-dark"
[content]="example11"
>
<tui-card-large-example-11></tui-card-large-example-11>
</tui-doc-example>

<tui-doc-example
id="paddings"
heading="Paddings and radiuses"
[content]="example12"
>
<tui-card-large-example-12></tui-card-large-example-12>
</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>
Loading

0 comments on commit df72511

Please sign in to comment.