From 2acb462c598484235a036bbe57f22446dfa315da Mon Sep 17 00:00:00 2001
From: larissa-kamily-brisa
 <138057627+larissa-kamily-brisa@users.noreply.github.com>
Date: Thu, 28 Sep 2023 14:00:50 -0300
Subject: [PATCH] feat: adding close when options is selected behavior (#834)
 (#836) :hammer:
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: adding close when options is selected behavior (#834)

* refactor: config close on select (#834)

* refactor: close on select verification

* test: correcting test of close on select (#834)

---------

Co-authored-by: “larissa-kamily-brisa” <“larissa.kamily@grupobrisanet.com.br”>
Co-authored-by: Iury Nogueira <iunog@hotmail.com>
---
 projects/ion/src/lib/core/types/sidebar.ts    |  1 +
 .../src/lib/sidebar/sidebar.component.html    |  4 +--
 .../ion/src/lib/sidebar/sidebar.component.ts  |  9 ++++-
 projects/ion/src/lib/sidebar/sidebar.spec.ts  | 34 ++++++++++++++++++-
 stories/Sidebar.stories.ts                    |  1 +
 5 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/projects/ion/src/lib/core/types/sidebar.ts b/projects/ion/src/lib/core/types/sidebar.ts
index 8e708abaa..30eacaf50 100644
--- a/projects/ion/src/lib/core/types/sidebar.ts
+++ b/projects/ion/src/lib/core/types/sidebar.ts
@@ -12,4 +12,5 @@ export interface IonSidebarProps {
   logo: string;
   logoAction?: () => void;
   items: (Item & { options?: [Item, ...Item[]] })[];
+  closeOnSelect?: boolean;
 }
diff --git a/projects/ion/src/lib/sidebar/sidebar.component.html b/projects/ion/src/lib/sidebar/sidebar.component.html
index 0c0c4a64e..7d3eb0a30 100644
--- a/projects/ion/src/lib/sidebar/sidebar.component.html
+++ b/projects/ion/src/lib/sidebar/sidebar.component.html
@@ -16,7 +16,7 @@
       iconType="left3"
       size="lg"
       type="ghost"
-      (ionOnClick)="toggleVisibility()"
+      (ionOnClick)="toggleSidebarVisibility()"
     ></ion-button>
   </header>
   <section class="ion-sidebar__items">
@@ -53,6 +53,6 @@
     iconType="sandwich"
     size="lg"
     type="ghost"
-    (ionOnClick)="toggleVisibility()"
+    (ionOnClick)="toggleSidebarVisibility()"
   ></ion-button>
 </span>
diff --git a/projects/ion/src/lib/sidebar/sidebar.component.ts b/projects/ion/src/lib/sidebar/sidebar.component.ts
index eff85832f..b5093bf4d 100644
--- a/projects/ion/src/lib/sidebar/sidebar.component.ts
+++ b/projects/ion/src/lib/sidebar/sidebar.component.ts
@@ -11,6 +11,7 @@ export class IonSidebarComponent {
   @Input() logo!: string;
   @Input() logoAction?: () => void;
   @Input() items: IonSidebarProps['items'] = [];
+  @Input() closeOnSelect = false;
 
   public closed = true;
 
@@ -27,7 +28,7 @@ export class IonSidebarComponent {
     }
   };
 
-  public toggleVisibility(): void {
+  public toggleSidebarVisibility(): void {
     this.closed = !this.closed;
     if (!this.closed) {
       setTimeout(() => {
@@ -41,10 +42,16 @@ export class IonSidebarComponent {
 
   public itemSelected(itemIndex: number): void {
     selectItemByIndex(this.items, itemIndex);
+    if (this.closeOnSelect) {
+      this.toggleSidebarVisibility();
+    }
   }
 
   public itemOnGroupSelected(groupIndex: number): void {
     unselectAllItems(this.items, groupIndex);
+    if (this.closeOnSelect) {
+      this.toggleSidebarVisibility();
+    }
   }
 
   public groupSelected(groupIndex: number): void {
diff --git a/projects/ion/src/lib/sidebar/sidebar.spec.ts b/projects/ion/src/lib/sidebar/sidebar.spec.ts
index 912791556..94ecb55b5 100644
--- a/projects/ion/src/lib/sidebar/sidebar.spec.ts
+++ b/projects/ion/src/lib/sidebar/sidebar.spec.ts
@@ -21,6 +21,8 @@ const getByTestId = (key: keyof typeof components): HTMLElement => {
 
 const logo: IonSidebarProps['logo'] = 'logo.svg';
 
+const closeOnSelectConfig: IonSidebarProps['closeOnSelect'] = true;
+
 const actionMock = jest.fn();
 
 const items: IonSidebarProps['items'] = [
@@ -54,7 +56,7 @@ const items: IonSidebarProps['items'] = [
 ];
 
 const sut = async (
-  props: IonSidebarProps = { logo: '', items: [] }
+  props: IonSidebarProps = { logo: '', items: [], closeOnSelect: false }
 ): Promise<void> => {
   await render(IonSidebarComponent, {
     componentProperties: { ...props },
@@ -269,4 +271,34 @@ describe('Sidebar', () => {
       expect(actionMock).not.toHaveBeenCalled();
     });
   });
+  describe('Close on select config', () => {
+    const selectedItemClass = 'ion-sidebar-item--selected';
+    let item1: HTMLElement;
+    let itemGroup2: HTMLElement;
+    beforeEach(async () => {
+      await sut({ items: items, logo, closeOnSelect: closeOnSelectConfig });
+      userEvent.click(getByTestId('toggleVisibility').firstElementChild);
+      expect(getByTestId('sidebar')).toHaveClass('ion-sidebar--opened');
+    });
+    it('should close sidebar when option is clicked', async () => {
+      item1 = screen.getByRole('button', {
+        name: items[0].title,
+      });
+
+      userEvent.click(item1);
+      expect(item1).toHaveClass(selectedItemClass);
+      expect(getByTestId('sidebar')).not.toHaveClass('ion-sidebar--opened');
+    });
+    it('should close sidebar when options is clicked', async () => {
+      userEvent.click(screen.getByTestId('sidebar-group__toggle-icon'));
+
+      itemGroup2 = screen.getByRole('button', {
+        name: items[2].options[1].title,
+      });
+
+      userEvent.click(itemGroup2);
+      expect(itemGroup2).toHaveClass(selectedItemClass);
+      expect(getByTestId('sidebar')).not.toHaveClass('ion-sidebar--opened');
+    });
+  });
 });
diff --git a/stories/Sidebar.stories.ts b/stories/Sidebar.stories.ts
index 0f496ce08..fa52c47a1 100644
--- a/stories/Sidebar.stories.ts
+++ b/stories/Sidebar.stories.ts
@@ -25,6 +25,7 @@ const Template: Story<IonSidebarComponent> = (args: IonSidebarComponent) => ({
 export const Default = Template.bind({});
 Default.args = {
   logo: require('./assets/sidebar-logo.svg'),
+  closeOnSelect: false,
   items: [
     {
       title: 'Fila de atendimento',