383 notification service (#736)

projects/ion/src/lib/core/types/notification.ts

@@ -3,10 +3,13 @@ import { fadeInDirection, fadeOutDirection } from '../../utils/animationsTypes';
 import { IconType } from './icon';
 import { StatusType } from './status';
 
-export interface NotificationProps {
+export interface NotificationProps extends NotificationConfigOptions {
   title: string;
   message: string;
   type?: StatusType;
+}
+
+export interface NotificationConfigOptions {
   icon?: IconType;
   fixed?: boolean;
   fadeIn?: fadeInDirection;

projects/ion/src/lib/icon/mock/list-icons.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { IonIconComponent } from '../icon.component';
 import { IonInputComponent } from '../../input/input.component';
 import { FormsModule } from '@angular/forms';
-import { IonNotificationComponent } from '../../notification/notification.component';
+import { IonNotificationComponent } from '../../notification/component/notification.component';
 
 @NgModule({
   declarations: [IonInputComponent, IonIconComponent, IonNotificationComponent],

projects/ion/src/lib/notification/notification.component.scss → projects/ion/src/lib/notification/component/notification.component.scss

@@ -1,5 +1,5 @@
-@import '../../styles/index.scss';
-@import '../utils/fadeAnimations.scss';
+@import '../../../styles/index.scss';
+@import '../../utils/fadeAnimations.scss';
 
 @mixin icon-color($color) {
   ::ng-deep svg {
@@ -13,6 +13,7 @@
   align-items: flex-start;
   justify-content: space-between;
   padding: spacing(1.5) spacing(2);
+
   position: relative;
   z-index: $zIndexMax;
   max-width: 500px;
@@ -75,3 +76,11 @@
 .negative-icon {
   @include icon-color($negative-color);
 }
+
+.notification-container:nth-child(2) {
+  top: 30px;
+}
+
+.notification-container:nth-child(3) {
+  top: 30px;
+}

projects/ion/src/lib/notification/notification.component.spec.ts → projects/ion/src/lib/notification/component/notification.component.spec.ts

@@ -1,8 +1,8 @@
 import { EventEmitter } from '@angular/core';
 import { fireEvent, render, screen } from '@testing-library/angular';
-import { StatusType } from '../core/types';
-import { NotificationProps } from '../core/types/notification';
-import { IonIconModule } from '../icon/icon.module';
+import { StatusType } from '../../core/types';
+import { NotificationProps } from '../../core/types/notification';
+import { IonIconModule } from '../../icon/icon.module';
 import { IonNotificationComponent } from './notification.component';
 
 const defaultNotification = {

projects/ion/src/lib/notification/notification.component.ts → projects/ion/src/lib/notification/component/notification.component.ts

@@ -8,9 +8,9 @@ import {
   ViewChild,
 } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { IconType } from '../core/types/icon';
-import { NotificationProps } from '../core/types/notification';
-import { setTimer } from '../utils/setTimer';
+import { IconType } from '../../core/types/icon';
+import { NotificationProps } from '../../core/types/notification';
+import { setTimer } from '../../utils/setTimer';
 
 @Component({
   selector: 'ion-notification',

projects/ion/src/lib/notification/mock/open-notification-mock.component.ts

@@ -0,0 +1,81 @@
+import { IonNotificationService } from './../service/notification.service';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'open-notification-button',
+  template: `
+    <div style="display: flex; flex-direction: column; gap: 2rem;">
+      <ion-button
+        class="button"
+        label="success"
+        iconType="check"
+        (ionOnClick)="notificationSuccess()"
+      ></ion-button>
+
+      <ion-button
+        class="button"
+        label="warning"
+        type="dashed"
+        iconType="exclamation"
+        (ionOnClick)="notificationWarning()"
+      ></ion-button>
+
+      <ion-button
+        class="button"
+        label="info"
+        type="secondary"
+        iconType="info"
+        (ionOnClick)="notificationInfo()"
+      ></ion-button>
+
+      <ion-button
+        class="button"
+        label="error"
+        [danger]="true"
+        iconType="close"
+        (ionOnClick)="notificationError()"
+      ></ion-button>
+      <div></div>
+    </div>
+  `,
+  styles: [
+    `
+      .button {
+        /deep/ button {
+          width: 150px !important;
+        }
+      }
+    `,
+  ],
+})
+export class OpenNotificationButtonComponent {
+  constructor(private ionNotificationService: IonNotificationService) {}
+
+  notificationSuccess(): void {
+    this.ionNotificationService.success(
+      'Title...',
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+    );
+  }
+
+  notificationWarning(): void {
+    this.ionNotificationService.warning(
+      'Title...',
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+    );
+  }
+
+  notificationInfo(): void {
+    this.ionNotificationService.info(
+      'Title...',
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+    );
+  }
+
+  notificationError(): void {
+    this.ionNotificationService.error(
+      'Title...',
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+    );
+  }
+}

projects/ion/src/lib/notification/notification.module.ts

@@ -1,11 +1,18 @@
+import { IonNotificationContainerComponent } from './service/notification.container.component';
+import { IonNotificationService } from './service/notification.service';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IonIconModule } from '../icon/icon.module';
-import { IonNotificationComponent } from './notification.component';
+import { IonNotificationComponent } from './component/notification.component';
 
 @NgModule({
-  declarations: [IonNotificationComponent],
+  declarations: [IonNotificationComponent, IonNotificationContainerComponent],
   imports: [CommonModule, IonIconModule],
-  exports: [IonNotificationComponent],
+  providers: [IonNotificationService],
+  exports: [IonNotificationComponent, IonNotificationContainerComponent],
+  entryComponents: [
+    IonNotificationComponent,
+    IonNotificationContainerComponent,
+  ],
 })
 export class IonNotificationModule {}

projects/ion/src/lib/notification/service/notification.container.component.ts

@@ -0,0 +1,26 @@
+import { IonNotificationComponent } from '../component/notification.component';
+import { Component, ComponentRef, Renderer2, ElementRef } from '@angular/core';
+
+@Component({
+  selector: 'notification-container',
+  template: '',
+  styleUrls: ['notification.container.scss'],
+})
+export class IonNotificationContainerComponent {
+  constructor(private renderer: Renderer2, private element: ElementRef) {}
+
+  addNotification(notification: ComponentRef<IonNotificationComponent>): void {
+    notification.instance.ionOnClose.subscribe(() => {
+      this.removeNotification(notification.location.nativeElement);
+    });
+
+    this.renderer.appendChild(
+      this.element.nativeElement,
+      notification.location.nativeElement
+    );
+  }
+
+  removeNotification(notification: ElementRef): void {
+    this.renderer.removeChild(this.element.nativeElement, notification);
+  }
+}

projects/ion/src/lib/notification/service/notification.container.scss

@@ -0,0 +1,8 @@
+:host {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  top: 0;
+  right: 0;
+  gap: 1rem;
+}

projects/ion/src/lib/notification/service/notification.service.spec.ts

@@ -0,0 +1,78 @@
+import { IonSharedModule } from './../../shared.module';
+import { IonNotificationContainerComponent } from './notification.container.component';
+import { IonNotificationComponent } from '../component/notification.component';
+import { IonNotificationService } from './notification.service';
+import { TestBed } from '@angular/core/testing';
+import { Component, NgModule } from '@angular/core';
+import { fireEvent, screen } from '@testing-library/angular';
+
+@Component({
+  template: '<div></div>',
+})
+class ContainerRefTestComponent {}
+
+@NgModule({
+  declarations: [
+    ContainerRefTestComponent,
+    IonNotificationContainerComponent,
+    IonNotificationComponent,
+  ],
+  imports: [IonSharedModule],
+  entryComponents: [
+    ContainerRefTestComponent,
+    IonNotificationContainerComponent,
+    IonNotificationComponent,
+  ],
+})
+class TestModule {}
+
+jest.setTimeout(1000);
+
+describe('NotificationService', () => {
+  let notificationService: IonNotificationService;
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TestModule],
+    }).compileComponents();
+
+    notificationService = TestBed.get(IonNotificationService);
+  });
+
+  it('should custom notification', () => {
+    notificationService.success('Custom', 'Custom', { fixed: true });
+    const removeNotification = screen.getByTestId('btn-remove');
+    fireEvent.click(removeNotification);
+    const elements = document.getElementsByTagName('ion-notification');
+    expect(elements).toHaveLength(0);
+  });
+
+  it('should create a notification', () => {
+    notificationService.success('Teste', 'Teste');
+    expect(notificationService).toBeTruthy();
+    expect(screen.getByTestId('ion-notification')).toBeTruthy();
+  });
+
+  it('should create a sucess notification', () => {
+    notificationService.success('Teste', 'Teste');
+    const iconType = screen.getAllByTestId('notification-icon');
+    expect(iconType[1].classList).toContain('success-icon');
+  });
+
+  it('should create a info notification', () => {
+    notificationService.info('Teste', 'Teste');
+    const iconType = screen.getAllByTestId('notification-icon');
+    expect(iconType[2].classList).toContain('info-icon');
+  });
+
+  it('should create a warning notification', () => {
+    notificationService.warning('Teste', 'Teste');
+    const iconType = screen.getAllByTestId('notification-icon');
+    expect(iconType[3].classList).toContain('warning-icon');
+  });
+
+  it('should create a negative notification', () => {
+    notificationService.error('Teste', 'Teste');
+    const iconType = screen.getAllByTestId('notification-icon');
+    expect(iconType[4].classList).toContain('negative-icon');
+  });
+});