feat(core): add interactive mode for notification

taiga-family · Feb 12, 2024 · d1d45ac · d1d45ac
1 parent 1a148e2
commit d1d45ac
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 30 deletions.
diff --git a/projects/core/components/notification/notification.component.ts b/projects/core/components/notification/notification.component.ts
@@ -19,7 +19,7 @@ import {TuiNotificationT} from '@taiga-ui/core/types';
 import {Observable} from 'rxjs';
 
 @Component({
-    selector: 'tui-notification',
+    selector: 'tui-notification,a[tuiNotification],button[tuiNotification]',
     templateUrl: './notification.template.html',
     styleUrls: ['./notification.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/projects/core/components/notification/notification.style.less b/projects/core/components/notification/notification.style.less
@@ -11,6 +11,22 @@
     box-sizing: border-box;
     overflow: hidden;
 
+    .t-more {
+        display: none;
+    }
+
+    &button,
+    &a {
+        border: none;
+        cursor: pointer;
+
+        .t-more {
+            display: inline-flex;
+            color: var(--tui-text-01);
+            opacity: 0.5;
+        }
+    }
+
     &[data-size='s'] {
         padding: 0.375rem 0.625rem;
 
@@ -23,6 +39,10 @@
         .t-close {
             margin: -0.125rem -0.375rem -0.125rem 0.75rem;
         }
+
+        .t-more {
+            margin: -0.125rem -0.375rem -0.125rem 0;
+        }
     }
 
     &[data-size='m'] {
@@ -37,6 +57,10 @@
         .t-close {
             margin: -0.125rem -0.125rem -0.125rem 1rem;
         }
+
+        .t-more {
+            margin: -0.125rem -0.375rem -0.125rem 0;
+        }
     }
 
     &[data-size='l'] {
@@ -49,6 +73,10 @@
             height: 1.5rem;
             margin-right: 0.5rem;
         }
+
+        .t-more {
+            margin-right: -0.5rem;
+        }
     }
 
     &[data-status='info'] {
@@ -81,4 +109,6 @@
     flex: 1;
     word-break: break-word;
     color: var(--tui-text-01);
+    text-align: left;
+    align-self: center;
 }
diff --git a/projects/core/components/notification/notification.template.html b/projects/core/components/notification/notification.template.html
@@ -6,7 +6,6 @@
         [src]="iconName"
     ></tui-svg>
 </ng-container>
-
 <div class="t-content">
     <ng-content></ng-content>
 </div>
@@ -22,3 +21,8 @@
     [title]="closeWord$ | async"
     (click)="close.emit()"
 ></button>
+<tui-svg
+    automation-id="tui-notification__more"
+    class="t-more"
+    [src]="icons.more"
+></tui-svg>
diff --git a/projects/demo/src/modules/components/notification/examples/1/index.html b/projects/demo/src/modules/components/notification/examples/1/index.html
@@ -1,26 +1,40 @@
-<tui-notification>
-    A short simple
-    <code>informative</code>
-    message
-</tui-notification>
-<tui-notification
-    status="success"
-    class="tui-space_vertical-4"
->
-    A short simple
-    <code>informative</code>
-    message
-</tui-notification>
-<tui-notification
-    status="error"
-    class="tui-space_vertical-4"
->
-    A short simple
-    <code>informative</code>
-    message
-</tui-notification>
-<tui-notification status="warning">
-    A short simple
-    <code>informative</code>
-    message
-</tui-notification>
+<ng-container *ngFor="let status of statuses; let last = last">
+    <tui-notification
+        *ngFor="let size of sizes"
+        [size]="size"
+        [status]="status"
+    >
+        {{ status | titlecase }} label ({{ size | uppercase }})
+    </tui-notification>
+
+    <hr />
+
+    <tui-notification
+        *ngFor="let size of sizes"
+        tuiNotification
+        [size]="size"
+        [status]="status"
+    >
+        {{ status | titlecase }} label ({{ size | uppercase }})
+        <tui-svg
+            src="tuiIconHelpCircle"
+            tuiHintAppearance="onDark"
+            tuiHintDirection="right"
+            [tuiHint]="tooltip"
+        ></tui-svg>
+        <ng-template #tooltip>Hello world</ng-template>
+    </tui-notification>
+
+    <hr />
+
+    <button
+        *ngFor="let size of sizes"
+        tuiNotification
+        [size]="size"
+        [status]="status"
+    >
+        {{ status | titlecase }} label ({{ size | uppercase }})
+    </button>
+
+    <hr *ngIf="!last" />
+</ng-container>
diff --git a/projects/demo/src/modules/components/notification/examples/1/index.less b/projects/demo/src/modules/components/notification/examples/1/index.less
@@ -0,0 +1,16 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+tui-svg:last-child {
+    display: flex;
+    align-self: center;
+    width: 1rem;
+    height: 1rem;
+    margin: 0 0 0 0.75rem;
+    color: var(--tui-text-01);
+    opacity: 0.5;
+    float: right;
+}
diff --git a/projects/demo/src/modules/components/notification/examples/1/index.ts b/projects/demo/src/modules/components/notification/examples/1/index.ts
@@ -5,7 +5,11 @@ import {encapsulation} from '@demo/emulate/encapsulation';
 @Component({
     selector: 'tui-notification-example-1',
     templateUrl: './index.html',
+    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiNotificationExample1 {}
+export class TuiNotificationExample1 {
+    readonly statuses = ['neutral', 'info', 'success', 'warning', 'error'] as const;
+    readonly sizes = ['s', 'm', 'l'] as const;
+}
diff --git a/projects/demo/src/modules/components/notification/notification.module.ts b/projects/demo/src/modules/components/notification/notification.module.ts
@@ -4,11 +4,13 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {
-    TuiButtonModule,
+    TuiHintModule,
     TuiLinkModule,
     TuiModeModule,
     TuiNotificationModule,
+    TuiSvgModule,
 } from '@taiga-ui/core';
+import {TuiButtonModule} from '@taiga-ui/experimental';
 
 import {TuiNotificationExample1} from './examples/1';
 import {TuiNotificationExample2} from './examples/2';
@@ -26,6 +28,8 @@ import {ExampleTuiNotificationComponent} from './notification.component';
         ReactiveFormsModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiNotificationComponent)),
+        TuiHintModule,
+        TuiSvgModule,
     ],
     declarations: [
         ExampleTuiNotificationComponent,