Merge branch 'main' into 835-add-left-button-to-ion-header

Brisanet · Sep 28, 2023 · 62796d2 · 62796d2
2 parents e0e0d67 + bdeb1c9
commit 62796d2
Show file tree

Hide file tree

Showing 7 changed files with 142 additions and 22 deletions.
diff --git a/projects/ion/src/lib/core/types/popover.ts b/projects/ion/src/lib/core/types/popover.ts
@@ -1,4 +1,5 @@
 import { TemplateRef } from '@angular/core';
+
 import { IonButtonProps } from './button';
 import { IconType } from './icon';
 
@@ -16,10 +17,14 @@ export enum PopoverPosition {
   DEFAULT = 'bottomRight',
 }
 
+export interface PopoverButtonsProps extends IonButtonProps {
+  keepOpenAfterAction?: boolean;
+}
+
 export interface PopoverProps {
   ionPopoverTitle: string;
   ionPopoverBody: TemplateRef<void>;
-  ionPopoverActions?: IonButtonProps[];
+  ionPopoverActions?: PopoverButtonsProps[];
   ionPopoverIcon?: IconType;
   ionPopoverIconColor?: string;
   ionPopoverIconClose?: boolean;

diff --git a/projects/ion/src/lib/popover/component/popover.component.scss b/projects/ion/src/lib/popover/component/popover.component.scss
@@ -121,6 +121,7 @@ $arrow-size: 4.5px;
     display: flex;
     background-color: $neutral-2;
     justify-content: space-between;
+    border-radius: spacing(1) spacing(1) 0 0;
     align-items: center;
     padding: spacing(1.5) spacing(2);
 

diff --git a/projects/ion/src/lib/popover/component/popover.component.ts b/projects/ion/src/lib/popover/component/popover.component.ts
@@ -1,7 +1,8 @@
 import { Component, Input, TemplateRef } from '@angular/core';
 import { Subject } from 'rxjs';
-import { PopoverPosition } from '../../core/types/popover';
-import { IconType, IonButtonProps } from '../../core/types';
+
+import { IconType } from '../../core/types';
+import { PopoverButtonsProps, PopoverPosition } from '../../core/types/popover';
 
 const PRIMARY_6 = '#0858ce';
 
@@ -15,7 +16,7 @@ export class IonPopoverComponent {
   @Input() ionPopoverTitle: string;
   @Input() ionPopoverKeep: boolean;
   @Input() ionPopoverBody: TemplateRef<void>;
-  @Input() ionPopoverActions?: IonButtonProps[];
+  @Input() ionPopoverActions?: PopoverButtonsProps[];
   @Input() ionPopoverIcon?: IconType;
   @Input() ionPopoverIconColor? = PRIMARY_6;
   @Input() ionPopoverIconClose = false;

diff --git a/projects/ion/src/lib/popover/mock/keep-open-popover-action.component.ts b/projects/ion/src/lib/popover/mock/keep-open-popover-action.component.ts
@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import { PopoverPosition } from '../../core/types/popover';
+
+@Component({
+  template: `
+    <style>
+      div {
+        height: 400px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    </style>
+    <div>
+      <ion-button
+        ionPopover
+        [ionPopoverTitle]="args.ionPopoverTitle"
+        [ionPopoverBody]="BodyTemplate"
+        [ionPopoverIconClose]="args.ionPopoverIconClose"
+        [ionPopoverPosition]="args.ionPopoverPosition"
+        [ionPopoverActions]="args.ionPopoverActions"
+        label="click me"
+      >
+      </ion-button>
+      <ng-template #BodyTemplate> {{ args.ionPopoverBody }} </ng-template>
+    </div>
+  `,
+})
+export class KeepOpenPopoverActionComponent {
+  args = {
+    ionPopoverTitle: 'Desafio na Jornada',
+    ionPopoverBody:
+      'Você pode escolher avançar corajosamente para a próxima etapa da jornada ou optar por explorar o caminho anterior.',
+    ionPopoverPosition: PopoverPosition.DEFAULT,
+    ionPopoverIconClose: true,
+    ionPopoverActions: [
+      { label: 'voltar', keepOpenAfterAction: true },
+      { label: 'continuar', keepOpenAfterAction: true },
+    ],
+  };
+}
diff --git a/projects/ion/src/lib/popover/popover.directive.spec.ts b/projects/ion/src/lib/popover/popover.directive.spec.ts
@@ -11,8 +11,9 @@ import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { fireEvent, render, screen } from '@testing-library/angular';
+
 import { IonButtonModule } from '../button/button.module';
-import { PopoverPosition } from '../core/types/popover';
+import { PopoverButtonsProps, PopoverPosition } from '../core/types/popover';
 import { IonDividerModule } from '../divider/divider.module';
 import { IonSharedModule } from '../shared.module';
 import { IonPopoverComponent } from './component/popover.component';
@@ -63,7 +64,10 @@ class HostTestComponent {
   ionPopoverKeep = false;
   ionPopoverIconClose = true;
   ionPopoverIcon = 'condominium';
-  ionPopoverActions = [{ label: 'action 1' }, { label: 'action 2' }];
+  ionPopoverActions: PopoverButtonsProps[] = [
+    { label: 'action 1' },
+    { label: 'action 2' },
+  ];
 
   ionOnFirstAction = firstAction;
   ionOnSecondAction = secondAction;
@@ -181,6 +185,24 @@ describe('Directive: popover', () => {
     expect(screen.queryByTestId(`popover-${type.dataTestId}`)).toBeNull();
   });
 
+  it.each([
+    { dataTestId: 'action-1', label: 'voltar' },
+    { dataTestId: 'action-2', label: 'continuar' },
+  ])(
+    'should not close pop when click in $label when to have keepOpenAfterAction',
+    async (type) => {
+      await sut({
+        ionPopoverActions: [
+          { label: 'voltar', keepOpenAfterAction: true },
+          { label: 'continuar', keepOpenAfterAction: true },
+        ],
+      });
+      fireEvent.click(screen.getByText(textButton));
+      fireEvent.click(screen.getByTestId(`btn-${type.label}`));
+      expect(screen.getByTestId('ion-popover')).toBeInTheDocument();
+    }
+  );
+
   it('should emit an event when click on action-1', async () => {
     await sut();
     fireEvent.click(screen.getByText(textButton));
@@ -211,7 +233,7 @@ describe('Directive: popover', () => {
     await sut();
     fireEvent.click(screen.getByText(textButton));
     fireEvent.click(document);
-    expect(screen.queryByTestId('ion-popover')).toBeFalsy();
+    expect(screen.queryByTestId('ion-popover')).not.toBeInTheDocument();
   });
 
   it('should render popover with custom class', async () => {

diff --git a/projects/ion/src/lib/popover/popover.directive.ts b/projects/ion/src/lib/popover/popover.directive.ts
@@ -1,32 +1,33 @@
+import { DOCUMENT } from '@angular/common';
 import {
-  Directive,
-  Input,
-  HostListener,
+  ApplicationRef,
   ComponentFactoryResolver,
-  Injector,
-  Inject,
   ComponentRef,
-  ApplicationRef,
-  Output,
+  Directive,
   EventEmitter,
-  ViewContainerRef,
+  HostListener,
+  Inject,
+  Injector,
+  Input,
   OnDestroy,
+  Output,
   TemplateRef,
+  ViewContainerRef,
 } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
+import { pick } from 'lodash';
+
+import { IconType } from '../core/types';
+import { PopoverButtonsProps, PopoverPosition } from '../core/types/popover';
 import { SafeAny } from './../utils/safe-any';
 import { IonPopoverComponent } from './component/popover.component';
-import { PopoverPosition } from '../core/types/popover';
 import { getPositionsPopover } from './utilsPopover';
-import { IonButtonProps, IconType } from '../core/types';
-import { pick } from 'lodash';
 
 @Directive({ selector: '[ionPopover]' })
 export class IonPopoverDirective implements OnDestroy {
   @Input() ionPopoverTitle: string;
   @Input() ionPopoverKeep = false;
   @Input() ionPopoverBody: TemplateRef<void>;
-  @Input() ionPopoverActions?: IonButtonProps[];
+  @Input() ionPopoverActions?: PopoverButtonsProps[];
   @Input() ionPopoverIcon?: IconType;
   @Input() ionPopoverIconColor?: string;
   @Input() ionPopoverIconClose? = false;
@@ -89,14 +90,22 @@ export class IonPopoverDirective implements OnDestroy {
       ['ionOnSecondAction', this.ionOnSecondAction],
       ['ionOnClose', this.ionOnClose],
     ];
-    eventSubscriptions.forEach(([event, emitter]) => {
+    eventSubscriptions.forEach(([event, emitter], index) => {
       popoverInstance[event].subscribe(() => {
-        this.closePopover();
+        this.handlePopoverAction(index);
+
         emitter.emit();
       });
     });
   }
 
+  handlePopoverAction(index: number): void {
+    const action = this.ionPopoverActions && this.ionPopoverActions[index];
+    if (!action || !action.keepOpenAfterAction) {
+      this.closePopover();
+    }
+  }
+
   setComponentPosition(hostElement: DOMRect): void {
     const hostPositions = pick(hostElement, ['left', 'right', 'top', 'bottom']);
     const positions = getPositionsPopover(

diff --git a/stories/PopoverDirectiveKeepAction.stories.ts b/stories/PopoverDirectiveKeepAction.stories.ts
@@ -0,0 +1,41 @@
+import { CommonModule } from '@angular/common';
+import { Meta, Story } from '@storybook/angular/types-6-0';
+
+import { PopoverPosition } from '../projects/ion/src/lib/core/types/popover';
+import { KeepOpenPopoverActionComponent } from '../projects/ion/src/lib/popover/mock/keep-open-popover-action.component';
+import {
+  IonPopoverModule,
+  IonSharedModule,
+} from '../projects/ion/src/public-api';
+
+const Template: Story<KeepOpenPopoverActionComponent> = (
+  args: KeepOpenPopoverActionComponent
+) => ({
+  component: KeepOpenPopoverActionComponent,
+  props: {
+    ...args,
+  },
+  moduleMetadata: {
+    declarations: [KeepOpenPopoverActionComponent],
+    imports: [CommonModule, IonSharedModule, IonPopoverModule],
+    entryComponents: [KeepOpenPopoverActionComponent],
+  },
+});
+
+export const DirectiveWithActionsKeepAction = Template.bind({});
+DirectiveWithActionsKeepAction.args = {
+  ionPopoverTitle: 'Desafio na Jornada',
+  ionPopoverBody:
+    'Você pode escolher avançar corajosamente para a próxima etapa da jornada ou optar por explorar o caminho anterior.',
+  ionPopoverPosition: PopoverPosition.DEFAULT,
+  ionPopoverIconClose: true,
+  ionPopoverActions: [
+    { label: 'voltar', keepOpenAfterAction: true },
+    { label: 'continuar', keepOpenAfterAction: true },
+  ],
+};
+
+export default {
+  title: 'Ion/Data Display/Popover',
+  component: KeepOpenPopoverActionComponent,
+} as Meta<KeepOpenPopoverActionComponent>;