835 add left button to ion header (#840)

* feat: modal header button * fix: changes on mock * fix: header spacing * feat: modal body content emition and test adjustments * refactor: readonly added to the subject * docs: service subscription * test: pr sugested adjustments * refactor: pr sugested adjustments --------- Co-authored-by: Iury Nogueira <[email protected]>
Brisanet · Sep 28, 2023 · 63024a6 · 63024a6
1 parent 2acb462
commit 63024a6
Show file tree

Hide file tree

Showing 8 changed files with 165 additions and 1 deletion.
diff --git a/projects/ion/src/lib/modal/component/modal.component.html b/projects/ion/src/lib/modal/component/modal.component.html
@@ -16,6 +16,27 @@
     aria-modal="true"
   >
     <header tabindex="0">
+      <ion-button
+        *ngIf="
+          configuration.headerButton &&
+          !(configuration.headerButton.hidden
+            ? configuration.headerButton.hidden()
+            : false)
+        "
+        [iconType]="configuration.headerButton.icon"
+        [label]="configuration.headerButton.label"
+        [disabled]="
+          configuration.headerButton.disabled
+            ? configuration.headerButton.disabled()
+            : false
+        "
+        type="ghost"
+        [circularButton]="true"
+        data-testid="header-button"
+        (ionOnClick)="
+          emitHeaderButtonAction(this.getChildComponentPropertiesValue())
+        "
+      ></ion-button>
       <h4 data-testid="modalTitle">{{ configuration.title }}</h4>
       <ion-button
         label="Deletar"

diff --git a/projects/ion/src/lib/modal/component/modal.component.scss b/projects/ion/src/lib/modal/component/modal.component.scss
@@ -44,6 +44,7 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
+      gap: 8px;
 
       h4 {
         margin: 0;
@@ -54,6 +55,7 @@
         font-size: 20px;
         line-height: 28px;
         color: $neutral-color;
+        margin-right: auto;
       }
 
       .close-icon {

diff --git a/projects/ion/src/lib/modal/component/modal.component.spec.ts b/projects/ion/src/lib/modal/component/modal.component.spec.ts
@@ -196,4 +196,74 @@ describe('IonModalComponent', () => {
       fixture.nativeElement.querySelector('.modal-container').style.width;
     expect(modalElement).toBe(`${modalConfig.width}px`);
   });
+
+  describe('IonModalComponent - Header left button', () => {
+    const configuration: IonModalConfiguration = {
+      id: '1',
+      title: 'Ion Test',
+
+      footer: {
+        showDivider: false,
+        primaryButton: {
+          label: 'Ion Cancel',
+          iconType: 'icon',
+        },
+        secondaryButton: {
+          label: 'Ion Confirm',
+          iconType: 'icon',
+        },
+      },
+
+      headerButton: {
+        icon: 'left',
+        label: 'voltar',
+      },
+    };
+
+    it('should not be rendered as default', () => {
+      expect(screen.queryByTestId('btn-voltar')).not.toBeInTheDocument();
+    });
+
+    it('should emit event when call emitHeaderButtonAction function', () => {
+      jest.spyOn(component.ionOnHeaderButtonAction, 'emit');
+      component.emitHeaderButtonAction(
+        component.getChildComponentPropertiesValue()
+      );
+      expect(component.ionOnHeaderButtonAction.emit).toHaveBeenCalled();
+    });
+
+    it('should be visible as default if the config is informed', () => {
+      component.setConfig(configuration);
+      fixture.detectChanges();
+      expect(screen.getByTestId('btn-voltar')).toBeVisible();
+    });
+
+    it('should be enabled as default', () => {
+      component.setConfig(configuration);
+      fixture.detectChanges();
+      expect(screen.getByTestId('btn-voltar')).toBeEnabled();
+    });
+
+    it('should be disabled when informed', () => {
+      configuration.headerButton.disabled = (): boolean => true;
+      component.setConfig(configuration);
+      fixture.detectChanges();
+      expect(screen.getByTestId('btn-voltar')).toBeDisabled();
+    });
+
+    it('should render the specified icon', () => {
+      component.setConfig(configuration);
+      fixture.detectChanges();
+      const icon = document.getElementById('ion-icon-left');
+      expect(icon).toBeVisible();
+    });
+
+    it('should be hidden when informed', () => {
+      configuration.headerButton.hidden = (): boolean => true;
+
+      component.setConfig(configuration);
+      fixture.detectChanges();
+      expect(screen.queryByTestId('btn-voltar')).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/projects/ion/src/lib/modal/component/modal.component.ts b/projects/ion/src/lib/modal/component/modal.component.ts
@@ -34,6 +34,7 @@ export class IonModalComponent implements OnInit, OnDestroy {
   @Input() configuration: IonModalConfiguration = {};
 
   @Output()
+  ionOnHeaderButtonAction = new EventEmitter<IonModalResponse | undefined>();
   ionOnClose = new EventEmitter<IonModalResponse | undefined>();
 
   public DEFAULT_WIDTH = 500;
@@ -88,6 +89,10 @@ export class IonModalComponent implements OnInit, OnDestroy {
     Object.assign(instance, params);
   }
 
+  emitHeaderButtonAction(valueToEmit: IonModalResponse | undefined): void {
+    this.ionOnHeaderButtonAction.emit(valueToEmit);
+  }
+
   ngOnInit(): void {
     this.setDefaultConfig();
     const factory = this.resolver.resolveComponentFactory(this.componentToBody);

diff --git a/projects/ion/src/lib/modal/modal.service.spec.ts b/projects/ion/src/lib/modal/modal.service.spec.ts
@@ -95,4 +95,22 @@ describe('ModalService', () => {
       state: 'ceara',
     });
   });
+
+  it('should call emitHeaderAction when ionOnHeaderButtonAction fires', () => {
+    jest.spyOn(modalService, 'emitHeaderAction');
+
+    modalService.open(SelectMockComponent, {
+      headerButton: {
+        icon: 'left',
+        label: 'voltar',
+      },
+    });
+
+    fireEvent.click(screen.getByTestId('btn-voltar'));
+    fixture.detectChanges();
+
+    expect(modalService.emitHeaderAction).toHaveBeenCalledWith({
+      state: 'ceara',
+    });
+  });
 });
diff --git a/projects/ion/src/lib/modal/modal.service.ts b/projects/ion/src/lib/modal/modal.service.ts
@@ -21,6 +21,7 @@ import {
   providedIn: 'root',
 })
 export class IonModalService {
+  public readonly ionOnHeaderButtonAction = new Subject<SafeAny>();
   private modalComponentRef!: ComponentRef<IonModalComponent>;
   private componentSubscriber!: Subject<IonModalResponse | unknown>;
 
@@ -62,6 +63,13 @@ export class IonModalService {
         this.emitValueAndCloseModal(valueFromModal);
       }
     );
+
+    this.modalComponentRef.instance.ionOnHeaderButtonAction.subscribe(
+      (valueFromModal: IonModalResponse) => {
+        this.emitHeaderAction(valueFromModal);
+      }
+    );
+
     this.componentSubscriber = new Subject<IonModalResponse | unknown>();
     return this.componentSubscriber.asObservable();
   }
@@ -71,6 +79,10 @@ export class IonModalService {
     this.closeModal();
   }
 
+  emitHeaderAction(valueToEmit: IonModalResponse | unknown): void {
+    this.ionOnHeaderButtonAction.next(valueToEmit);
+  }
+
   closeModal(): void {
     if (this.modalComponentRef) {
       this.appRef.detachView(this.modalComponentRef.hostView);

diff --git a/projects/ion/src/lib/modal/models/modal.interface.ts b/projects/ion/src/lib/modal/models/modal.interface.ts
@@ -1,4 +1,4 @@
-import { IonButtonProps } from '../../core/types';
+import { IconType, IonButtonProps } from '../../core/types';
 import { SafeAny } from '../../utils/safe-any';
 
 export interface IonModalConfiguration {
@@ -8,6 +8,7 @@ export interface IonModalConfiguration {
   showOverlay?: boolean;
   overlayCanDismiss?: boolean;
   ionParams?: SafeAny;
+  headerButton?: IonModalHeaderButton;
 
   footer?: IonModalFooterConfiguration;
 }
@@ -20,6 +21,13 @@ export interface IonModalFooterConfiguration {
   secondaryButton?: IonButtonProps;
 }
 
+interface IonModalHeaderButton {
+  icon: IconType;
+  label?: string;
+  disabled?: () => boolean;
+  hidden?: () => boolean;
+}
+
 export interface IonModalResponse {
   [key: string]: unknown;
 }
diff --git a/stories/Modal.stories.mdx b/stories/Modal.stories.mdx
@@ -49,6 +49,14 @@ Função responsável pela renderização do modal. Ela recebe como parâmetros:
     height="350px"
     args={{
       componentToBody: SelectMockComponent,
+      modalConfig: {
+        headerButton: {
+          icon: 'left',
+          label: 'test',
+          disabled: () => false,
+          hidden: () => false,
+        },
+      },
     }}
     decorators={[
       moduleMetadata({
@@ -64,6 +72,26 @@ Função responsável pela renderização do modal. Ela recebe como parâmetros:
 
 <br />
 
+## ionOnHeaderButtonAction
+
+Um subject que irá informar ao Body Component do clique no HeaderLeftButton. O usuário deve instanciar o ModalService no componente usado como body e se inscrever nesse subject.
+
+> Ideal para casos onde precisamos que o bodyComponent altere seu estado a partir da action do headerButton. Veja o exemplo abaixo:
+
+<Source
+  language="js"
+  dark
+  format={false}
+  code={dedent`
+    export class BodyComponent implements OnInit {
+      constructor(private modalService: IonModalService) {}
+      ngOnInit(): void {
+      this.modalService.ionOnHeaderButtonAction.subscribe();
+    }
+  }
+`}
+/>
+
 ## EmitValueAndCloseModal
 
 Recebe como parâmetro um valor, seguindo a interface _IonModalResponse_, a ser emitido e faz o fechamento do modal.