Merge branch 'main' into 1194-add-clock-snooze-icon-to-design-system

Brisanet · Nov 18, 2024 · 06c679b · 06c679b
2 parents 9972089 + b42b9a3
commit 06c679b
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 4 deletions.
diff --git a/projects/ion/src/lib/button/button.component.html b/projects/ion/src/lib/button/button.component.html
@@ -34,7 +34,7 @@
   <ion-badge
     [value]="buttonBadge?.value"
     [type]="buttonBadge?.type"
-    *ngIf="multiple && !loading"
+    *ngIf="multiple && !loading && !circularButton"
     data-testid="badge-multiple"
   ></ion-badge>
 </button>

diff --git a/projects/ion/src/lib/button/button.component.spec.ts b/projects/ion/src/lib/button/button.component.spec.ts
@@ -357,6 +357,17 @@ describe('ButtonComponent with dropdown', () => {
       expect(screen.getByTestId('badge-multiple')).toBeInTheDocument();
       expect(screen.getByTestId('badge-multiple')).toHaveTextContent('0');
     });
+
+    it('should not render an ion-badge when the dropdown is set to multiple but the button is circular', async () => {
+      await sut({
+        label: defaultName,
+        multiple: true,
+        circularButton: true,
+        options: [{ label: 'Option 1' }, { label: 'Option 2' }],
+      });
+
+      expect(screen.queryByTestId('badge-multiple')).not.toBeInTheDocument();
+    });
   });
 
   it('should emit an event when option is selected', async () => {

diff --git a/projects/ion/src/lib/core/types/notification.ts b/projects/ion/src/lib/core/types/notification.ts
@@ -16,3 +16,7 @@ export interface NotificationConfigOptions {
   fadeOut?: fadeOutDirection;
   ionOnClose?: EventEmitter<void>;
 }
+
+export interface NotificationServiceConfig {
+  maxStack?: number;
+}
diff --git a/projects/ion/src/lib/notification/service/notification.container.component.ts b/projects/ion/src/lib/notification/service/notification.container.component.ts
@@ -7,11 +7,27 @@ import { Component, ComponentRef, Renderer2, ElementRef } from '@angular/core';
   styleUrls: ['notification.container.scss'],
 })
 export class IonNotificationContainerComponent {
+  private notificationRefControl: ComponentRef<IonNotificationComponent>[] = [];
   constructor(private renderer: Renderer2, private element: ElementRef) {}
 
-  addNotification(notification: ComponentRef<IonNotificationComponent>): void {
+  addNotification(
+    notification: ComponentRef<IonNotificationComponent>,
+    maxStack: number
+  ): void {
+    if (this.notificationRefControl.length === maxStack) {
+      this.notificationRefControl[0].instance.ionOnClose.complete();
+      this.removeNotification(
+        this.notificationRefControl[0].location.nativeElement
+      );
+      this.notificationRefControl.shift();
+    }
+
+    this.notificationRefControl.push(notification);
     notification.instance.ionOnClose.subscribe(() => {
       this.removeNotification(notification.location.nativeElement);
+      this.notificationRefControl = this.notificationRefControl.filter(
+        (value) => value !== notification
+      );
     });
 
     this.renderer.appendChild(

diff --git a/projects/ion/src/lib/notification/service/notification.service.spec.ts b/projects/ion/src/lib/notification/service/notification.service.spec.ts
@@ -162,3 +162,33 @@ describe('NotificationService -> notification types', () => {
     }
   );
 });
+
+describe('NotificationService -> notification maxStack', () => {
+  let notificationService: IonNotificationService;
+
+  it('should not exceed the maxStack', () => {
+    const removeNotification = screen.getAllByTestId('btn-remove');
+    removeNotification.forEach((element) => fireEvent.click(element));
+
+    TestBed.configureTestingModule({
+      imports: [TestModule],
+    }).compileComponents();
+
+    notificationService = TestBed.get(IonNotificationService);
+
+    notificationService.notificationServiceConfig = { maxStack: 2 };
+    notificationService.success(
+      DEFAULT_NOTIFICATION_OPTIONS.title,
+      DEFAULT_NOTIFICATION_OPTIONS.message
+    );
+    notificationService.error(
+      DEFAULT_NOTIFICATION_OPTIONS.title,
+      DEFAULT_NOTIFICATION_OPTIONS.message
+    );
+    notificationService.error(
+      DEFAULT_NOTIFICATION_OPTIONS.title,
+      DEFAULT_NOTIFICATION_OPTIONS.message
+    );
+    expect(screen.getAllByTestId('ion-notification').length).toBe(2);
+  });
+});
diff --git a/projects/ion/src/lib/notification/service/notification.service.ts b/projects/ion/src/lib/notification/service/notification.service.ts
@@ -1,5 +1,8 @@
 import { StatusType } from './../../core/types/status';
-import { NotificationConfigOptions } from './../../core/types/notification';
+import {
+  NotificationConfigOptions,
+  NotificationServiceConfig,
+} from './../../core/types/notification';
 import { IonNotificationComponent } from './../component/notification.component';
 import {
   Injectable,
@@ -25,6 +28,7 @@ enum NOTIFICATION_TYPES {
   providedIn: 'root',
 })
 export class IonNotificationService {
+  public notificationServiceConfig: NotificationServiceConfig = { maxStack: 8 };
   private notificationContainerComponentRef: ComponentRef<IonNotificationContainerComponent>;
   private componentSubscriber!: Subject<SafeAny>;
 
@@ -183,7 +187,8 @@ export class IonNotificationService {
     notification.changeDetectorRef.detectChanges();
 
     this.notificationContainerComponentRef.instance.addNotification(
-      notification
+      notification,
+      this.notificationServiceConfig.maxStack
     );
 
     this.notificationContainerComponentRef.changeDetectorRef.detectChanges();

diff --git a/stories/Button.stories.mdx b/stories/Button.stories.mdx
@@ -295,6 +295,30 @@ O Ion, Suporta 4 tamanhos padrões para botões. Basta configurar a propriedade
       template: `<ion-button label="Primary" [options]="[{ label: 'option 1' }, {label: 'option 2'}]" multiple="true"></ion-button>`,
     }}
   </Story>
+  <Story
+    name="with dropdown: circular button with multiple choices"
+    decorators={[moduleMetadata({ imports: [CommonModule, IonSharedModule] })]}
+  >
+    {{
+      template: `
+        <ion-button
+          type="ghost"
+          iconType="config"
+          [options]="[
+            { label: 'Ocioso', icon: 'clock-stopwatch' },
+            { label: 'Em deslocamento', icon: 'motorcycle' },
+            { label: 'Trabalhando', icon: 'working' }
+          ]"
+          [dropdownConfig]="{
+            notShowClearButton: true,
+            description: 'Status para acompanhar'
+          }"
+          [circularButton]="true"
+          [multiple]="true"
+        ></ion-button>
+      `,
+    }}
+  </Story>
   <Story
     name="with dropdown with title"
     decorators={[