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

* 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” <“[email protected]”> Co-authored-by: Iury Nogueira <[email protected]>
Brisanet · Sep 28, 2023 · 2acb462 · 2acb462
1 parent bdeb1c9
commit 2acb462
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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',