From bb555227e928ec256efbcc59f5bd8e6db87bed5b Mon Sep 17 00:00:00 2001 From: splincode Date: Mon, 5 Feb 2024 15:58:00 +0300 Subject: [PATCH] feat(experimental): add `tuiButtonGroupCard` --- projects/demo/src/modules/app/app.routes.ts | 9 +++ projects/demo/src/modules/app/pages.ts | 6 ++ .../button-group-card.component.ts | 30 ++++++++ .../button-group-card.module.ts | 39 +++++++++++ .../button-group-card.template.html | 59 ++++++++++++++++ .../button-group-card/examples/1/index.html | 70 +++++++++++++++++++ .../button-group-card/examples/1/index.less | 5 ++ .../button-group-card/examples/1/index.ts | 12 ++++ .../button-group-card/examples/2/index.html | 70 +++++++++++++++++++ .../button-group-card/examples/2/index.less | 5 ++ .../button-group-card/examples/2/index.ts | 12 ++++ .../button-group-card/examples/3/index.html | 70 +++++++++++++++++++ .../button-group-card/examples/3/index.less | 5 ++ .../button-group-card/examples/3/index.ts | 12 ++++ .../examples/import/import-module.md | 14 ++++ .../examples/import/insert-template.md | 15 ++++ projects/demo/used-icons.ts | 1 + .../button-group-card.component.ts | 12 ++++ .../button-group-card.directive.ts | 15 ++++ .../button-group-card.module.ts | 10 +++ .../button-group-card.style.less | 52 ++++++++++++++ .../directives/button-group-card/index.ts | 3 + .../button-group-card/ng-package.json | 5 ++ projects/experimental/directives/index.ts | 1 + .../directives/surface/surface.style.less | 17 +++++ 25 files changed, 549 insertions(+) create mode 100644 projects/demo/src/modules/experimental/button-group-card/button-group-card.component.ts create mode 100644 projects/demo/src/modules/experimental/button-group-card/button-group-card.module.ts create mode 100644 projects/demo/src/modules/experimental/button-group-card/button-group-card.template.html create mode 100644 projects/demo/src/modules/experimental/button-group-card/examples/1/index.html create mode 100644 projects/demo/src/modules/experimental/button-group-card/examples/1/index.less create mode 100644 projects/demo/src/modules/experimental/button-group-card/examples/1/index.ts create mode 100644 projects/demo/src/modules/experimental/button-group-card/examples/2/index.html create mode 100644 projects/demo/src/modules/experimental/button-group-card/examples/2/index.less create mode 100644 projects/demo/src/modules/experimental/button-group-card/examples/2/index.ts create mode 100644 projects/demo/src/modules/experimental/button-group-card/examples/3/index.html create mode 100644 projects/demo/src/modules/experimental/button-group-card/examples/3/index.less create mode 100644 projects/demo/src/modules/experimental/button-group-card/examples/3/index.ts create mode 100644 projects/demo/src/modules/experimental/button-group-card/examples/import/import-module.md create mode 100644 projects/demo/src/modules/experimental/button-group-card/examples/import/insert-template.md create mode 100644 projects/experimental/directives/button-group-card/button-group-card.component.ts create mode 100644 projects/experimental/directives/button-group-card/button-group-card.directive.ts create mode 100644 projects/experimental/directives/button-group-card/button-group-card.module.ts create mode 100644 projects/experimental/directives/button-group-card/button-group-card.style.less create mode 100644 projects/experimental/directives/button-group-card/index.ts create mode 100644 projects/experimental/directives/button-group-card/ng-package.json diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index 446059c073893..6c97cdcc913c5 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -361,6 +361,15 @@ export const ROUTES: Routes = [ title: 'ButtonClose', }, }, + { + path: 'experimental/button-group-card', + loadChildren: async () => + (await import('../experimental/button-group-card/button-group-card.module')) + .ExampleTuiButtonGroupCardModule, + data: { + title: 'ButtonGroupCard', + }, + }, { path: 'experimental/cell', loadChildren: async () => diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index 0d6fd8f86cd97..aa17a1a31905b 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -916,6 +916,12 @@ export const pages: TuiDocPages = [ keywords: 'кнопка, button, close, закрыть', route: '/experimental/button-close', }, + { + section: 'Experimental', + title: 'ButtonGroupCard', + keywords: 'кнопка, button, group, card, группа', + route: '/experimental/button-group-card', + }, ], }, { diff --git a/projects/demo/src/modules/experimental/button-group-card/button-group-card.component.ts b/projects/demo/src/modules/experimental/button-group-card/button-group-card.component.ts new file mode 100644 index 0000000000000..ec01ce7f3db10 --- /dev/null +++ b/projects/demo/src/modules/experimental/button-group-card/button-group-card.component.ts @@ -0,0 +1,30 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc'; + +@Component({ + selector: 'example-button-group-card', + templateUrl: './button-group-card.template.html', + changeDetection, +}) +export class ExampleTuiButtonGroupCardComponent { + 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'), + }; + + readonly example2: TuiDocExample = { + HTML: import('./examples/2/index.html?raw'), + }; + + readonly example3: TuiDocExample = { + HTML: import('./examples/3/index.html?raw'), + }; +} diff --git a/projects/demo/src/modules/experimental/button-group-card/button-group-card.module.ts b/projects/demo/src/modules/experimental/button-group-card/button-group-card.module.ts new file mode 100644 index 0000000000000..ab8476388e1e7 --- /dev/null +++ b/projects/demo/src/modules/experimental/button-group-card/button-group-card.module.ts @@ -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 { + TuiBadgedContentModule, + TuiButtonGroupCardModule, + TuiButtonModule, + TuiButtonVerticalModule, + TuiCellModule, + TuiSurfaceModule, +} from '@taiga-ui/experimental'; + +import {ExampleTuiButtonGroupCardComponent} from './button-group-card.component'; +import {TuiButtonGroupCardExample1} from './examples/1'; +import {TuiButtonGroupCardExample2} from './examples/2'; +import {TuiButtonGroupCardExample3} from './examples/3'; + +@NgModule({ + imports: [ + CommonModule, + TuiNotificationModule, + TuiButtonModule, + tuiGetDocModules(ExampleTuiButtonGroupCardComponent), + TuiButtonVerticalModule, + TuiSurfaceModule, + TuiCellModule, + TuiButtonGroupCardModule, + TuiBadgedContentModule, + ], + declarations: [ + ExampleTuiButtonGroupCardComponent, + TuiButtonGroupCardExample1, + TuiButtonGroupCardExample2, + TuiButtonGroupCardExample3, + ], + exports: [ExampleTuiButtonGroupCardComponent], +}) +export class ExampleTuiButtonGroupCardModule {} diff --git a/projects/demo/src/modules/experimental/button-group-card/button-group-card.template.html b/projects/demo/src/modules/experimental/button-group-card/button-group-card.template.html new file mode 100644 index 0000000000000..b41b541abbd5c --- /dev/null +++ b/projects/demo/src/modules/experimental/button-group-card/button-group-card.template.html @@ -0,0 +1,59 @@ + + + + This code is + experimental + and is a subject to change. Expect final solution to be shipped in the next major version + + + + + + + + + + + + + + + + +
    +
  1. +

    Import module:

    + + +
    2. + +
  2. +

    Add to the template:

    + + +
    3. +
+ + diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/1/index.html b/projects/demo/src/modules/experimental/button-group-card/examples/1/index.html new file mode 100644 index 0000000000000..34ed263a82c5d --- /dev/null +++ b/projects/demo/src/modules/experimental/button-group-card/examples/1/index.html @@ -0,0 +1,70 @@ +
+ + + + + +
+ +
+ + + +
+ +
+ +
diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/1/index.less b/projects/demo/src/modules/experimental/button-group-card/examples/1/index.less new file mode 100644 index 0000000000000..23d25a3bb0a19 --- /dev/null +++ b/projects/demo/src/modules/experimental/button-group-card/examples/1/index.less @@ -0,0 +1,5 @@ +:host { + display: flex; + flex-direction: column; + gap: 1rem; +} diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/1/index.ts b/projects/demo/src/modules/experimental/button-group-card/examples/1/index.ts new file mode 100644 index 0000000000000..620e6c7b48c94 --- /dev/null +++ b/projects/demo/src/modules/experimental/button-group-card/examples/1/index.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-button-group-card-example-1', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiButtonGroupCardExample1 {} diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/2/index.html b/projects/demo/src/modules/experimental/button-group-card/examples/2/index.html new file mode 100644 index 0000000000000..40d43152f7584 --- /dev/null +++ b/projects/demo/src/modules/experimental/button-group-card/examples/2/index.html @@ -0,0 +1,70 @@ +
+ + + + + +
+ +
+ + + +
+ +
+ +
diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/2/index.less b/projects/demo/src/modules/experimental/button-group-card/examples/2/index.less new file mode 100644 index 0000000000000..23d25a3bb0a19 --- /dev/null +++ b/projects/demo/src/modules/experimental/button-group-card/examples/2/index.less @@ -0,0 +1,5 @@ +:host { + display: flex; + flex-direction: column; + gap: 1rem; +} diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/2/index.ts b/projects/demo/src/modules/experimental/button-group-card/examples/2/index.ts new file mode 100644 index 0000000000000..577d4ef56f254 --- /dev/null +++ b/projects/demo/src/modules/experimental/button-group-card/examples/2/index.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-button-group-card-example-2', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiButtonGroupCardExample2 {} diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/3/index.html b/projects/demo/src/modules/experimental/button-group-card/examples/3/index.html new file mode 100644 index 0000000000000..45efaa7e46da6 --- /dev/null +++ b/projects/demo/src/modules/experimental/button-group-card/examples/3/index.html @@ -0,0 +1,70 @@ +
+ + + + + +
+ +
+ + + +
+ +
+ +
diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/3/index.less b/projects/demo/src/modules/experimental/button-group-card/examples/3/index.less new file mode 100644 index 0000000000000..23d25a3bb0a19 --- /dev/null +++ b/projects/demo/src/modules/experimental/button-group-card/examples/3/index.less @@ -0,0 +1,5 @@ +:host { + display: flex; + flex-direction: column; + gap: 1rem; +} diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/3/index.ts b/projects/demo/src/modules/experimental/button-group-card/examples/3/index.ts new file mode 100644 index 0000000000000..67292085bb211 --- /dev/null +++ b/projects/demo/src/modules/experimental/button-group-card/examples/3/index.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-button-group-card-example-3', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiButtonGroupCardExample3 {} diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/import/import-module.md b/projects/demo/src/modules/experimental/button-group-card/examples/import/import-module.md new file mode 100644 index 0000000000000..edef2496b6b05 --- /dev/null +++ b/projects/demo/src/modules/experimental/button-group-card/examples/import/import-module.md @@ -0,0 +1,14 @@ +```ts +import {NgModule} from '@angular/core'; +import {TuiButtonGroupCardModule} from '@taiga-ui/experimental'; +// ... + +@NgModule({ + imports: [ + // ... + TuiButtonModule, + TuiButtonGroupCardModule, + ], +}) +export class MyModule {} +``` diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/import/insert-template.md b/projects/demo/src/modules/experimental/button-group-card/examples/import/insert-template.md new file mode 100644 index 0000000000000..49a025688b7ef --- /dev/null +++ b/projects/demo/src/modules/experimental/button-group-card/examples/import/insert-template.md @@ -0,0 +1,15 @@ +```html +
+ +
+``` diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts index 99021f8b75940..8ccf0a2845c84 100644 --- a/projects/demo/used-icons.ts +++ b/projects/demo/used-icons.ts @@ -101,6 +101,7 @@ export const TUI_USED_ICONS = [ 'tuiIconLock', 'tuiIconUsers', 'tuiIconClock', + 'tuiIconArrowRightCircleLarge', 'tuiIconPlusSquareLarge', 'tuiIconTarget', 'tuiIconGooglePay', diff --git a/projects/experimental/directives/button-group-card/button-group-card.component.ts b/projects/experimental/directives/button-group-card/button-group-card.component.ts new file mode 100644 index 0000000000000..e1a1cdd71516e --- /dev/null +++ b/projects/experimental/directives/button-group-card/button-group-card.component.ts @@ -0,0 +1,12 @@ +import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; + +@Component({ + template: '', + styleUrls: ['./button-group-card.style.less'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + class: 'tui-button-group-card-styles', + }, +}) +export class TuiButtonGroupCardComponent {} diff --git a/projects/experimental/directives/button-group-card/button-group-card.directive.ts b/projects/experimental/directives/button-group-card/button-group-card.directive.ts new file mode 100644 index 0000000000000..d5fa7e3f081b4 --- /dev/null +++ b/projects/experimental/directives/button-group-card/button-group-card.directive.ts @@ -0,0 +1,15 @@ +import {Directive, Inject} from '@angular/core'; +import {TuiDirectiveStylesService} from '@taiga-ui/cdk'; + +import {TuiButtonGroupCardComponent} from './button-group-card.component'; + +@Directive({ + selector: '[tuiButtonGroupCard]', +}) +export class TuiButtonGroupCardDirective { + constructor( + @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService, + ) { + directiveStyles.addComponent(TuiButtonGroupCardComponent); + } +} diff --git a/projects/experimental/directives/button-group-card/button-group-card.module.ts b/projects/experimental/directives/button-group-card/button-group-card.module.ts new file mode 100644 index 0000000000000..3990a94329df1 --- /dev/null +++ b/projects/experimental/directives/button-group-card/button-group-card.module.ts @@ -0,0 +1,10 @@ +import {NgModule} from '@angular/core'; + +import {TuiButtonGroupCardComponent} from './button-group-card.component'; +import {TuiButtonGroupCardDirective} from './button-group-card.directive'; + +@NgModule({ + declarations: [TuiButtonGroupCardDirective, TuiButtonGroupCardComponent], + exports: [TuiButtonGroupCardDirective], +}) +export class TuiButtonGroupCardModule {} diff --git a/projects/experimental/directives/button-group-card/button-group-card.style.less b/projects/experimental/directives/button-group-card/button-group-card.style.less new file mode 100644 index 0000000000000..4ee56e63444f4 --- /dev/null +++ b/projects/experimental/directives/button-group-card/button-group-card.style.less @@ -0,0 +1,52 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +[tuiButtonGroupCard] { + display: flex; + min-width: 21.4375rem; + border-radius: 1.5rem; + + &[data-surface='dark'] > [tuiButton][tuiAppearance] { + color: #fff; + + &:hover { + background: rgba(256, 256, 256, 0.13); + } + } + + > [tuiButton][tuiButtonVertical] { + flex-grow: 1; + flex-basis: 0; + border-radius: 0; + padding: 1.125rem 0.25rem; + min-width: 6.625rem; + gap: 0.5rem; + } + + > [tuiButton][tuiButtonVertical]:only-child { + flex-direction: row; + border-radius: 0.75rem; + padding: 1rem 0; + } + + > [tuiButton]:first-child { + border-top-left-radius: 1.5rem; + border-bottom-left-radius: 1.5rem; + } + + > [tuiButton]:last-child { + border-top-right-radius: 1.5rem; + border-bottom-right-radius: 1.5rem; + } + + &:has([tuiButton]:only-child) { + border-radius: 0.75rem; + } + + &:nth-child(2) > [tuiButton][tuiButtonVertical]:first-child { + padding-left: 1.75rem; + } + + &:nth-child(2) > [tuiButton][tuiButtonVertical]:last-child { + padding-right: 1.75rem; + } +} diff --git a/projects/experimental/directives/button-group-card/index.ts b/projects/experimental/directives/button-group-card/index.ts new file mode 100644 index 0000000000000..36137fb1b3fa3 --- /dev/null +++ b/projects/experimental/directives/button-group-card/index.ts @@ -0,0 +1,3 @@ +export * from './button-group-card.component'; +export * from './button-group-card.directive'; +export * from './button-group-card.module'; diff --git a/projects/experimental/directives/button-group-card/ng-package.json b/projects/experimental/directives/button-group-card/ng-package.json new file mode 100644 index 0000000000000..bebf62dcb5e51 --- /dev/null +++ b/projects/experimental/directives/button-group-card/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} diff --git a/projects/experimental/directives/index.ts b/projects/experimental/directives/index.ts index 78a556d9b6c25..26bbc7c95376a 100644 --- a/projects/experimental/directives/index.ts +++ b/projects/experimental/directives/index.ts @@ -1,5 +1,6 @@ export * from '@taiga-ui/experimental/directives/appearance'; export * from '@taiga-ui/experimental/directives/button-close'; +export * from '@taiga-ui/experimental/directives/button-group-card'; export * from '@taiga-ui/experimental/directives/button-vertical'; export * from '@taiga-ui/experimental/directives/card'; export * from '@taiga-ui/experimental/directives/cell'; diff --git a/projects/experimental/directives/surface/surface.style.less b/projects/experimental/directives/surface/surface.style.less index 76392701964a2..1b2c2e248a810 100644 --- a/projects/experimental/directives/surface/surface.style.less +++ b/projects/experimental/directives/surface/surface.style.less @@ -164,3 +164,20 @@ input[tuiSurfaceLayer] { } } } + +[tuiSurface][data-surface='dark'] { + background: linear-gradient(90deg, rgba(125, 140, 160, 1) 0%, rgba(100, 115, 130, 1) 31%); + + button&, + a& { + &:active { + transform: scale(0.95); + } + + @media (hover: hover) and (pointer: fine) { + &:hover { + transform: scale(1.15); + } + } + } +}