feat(nav-tree-group): add new component NavTreeGroup

takenet · Nov 21, 2024 · f143090 · f143090
1 parent f0a6c16
commit f143090
Show file tree

Hide file tree

Showing 6 changed files with 286 additions and 1 deletion.
diff --git a/blip-ds-react/src/components.ts b/blip-ds-react/src/components.ts
@@ -72,6 +72,7 @@ export const BdsModal = /*@__PURE__*/createReactComponent<JSX.BdsModal, HTMLBdsM
 export const BdsModalAction = /*@__PURE__*/createReactComponent<JSX.BdsModalAction, HTMLBdsModalActionElement>('bds-modal-action');
 export const BdsModalCloseButton = /*@__PURE__*/createReactComponent<JSX.BdsModalCloseButton, HTMLBdsModalCloseButtonElement>('bds-modal-close-button');
 export const BdsNavTree = /*@__PURE__*/createReactComponent<JSX.BdsNavTree, HTMLBdsNavTreeElement>('bds-nav-tree');
+export const BdsNavTreeGroup = /*@__PURE__*/createReactComponent<JSX.BdsNavTreeGroup, HTMLBdsNavTreeGroupElement>('bds-nav-tree-group');
 export const BdsNavTreeItem = /*@__PURE__*/createReactComponent<JSX.BdsNavTreeItem, HTMLBdsNavTreeItemElement>('bds-nav-tree-item');
 export const BdsNavbar = /*@__PURE__*/createReactComponent<JSX.BdsNavbar, HTMLBdsNavbarElement>('bds-navbar');
 export const BdsNavbarContent = /*@__PURE__*/createReactComponent<JSX.BdsNavbarContent, HTMLBdsNavbarContentElement>('bds-navbar-content');

diff --git a/src/components.d.ts b/src/components.d.ts
@@ -53,7 +53,8 @@ import { menuPosition } from "./components/menu/menu";
 import { avatarSize as avatarSize2 } from "./components/menu/menu-exibition/menu-exibition";
 import { sizes } from "./components/modal/modal";
 import { collapses as collapses1 } from "./components/nav-tree/nav-tree";
-import { collapses as collapses2 } from "./components/nav-tree/nav-tree-item";
+import { collapses as collapses2 } from "./components/nav-tree/nav-tree-group";
+import { collapses as collapses3 } from "./components/nav-tree/nav-tree-item";
 import { justifyContent as justifyContent3, navbarBackground, orientation } from "./components/navbar/navbar";
 import { PaginationOptionsPositionType } from "./components/pagination/pagination";
 import { progressBarColor, progressBarSize } from "./components/progress-bar/progress-bar";
@@ -1812,6 +1813,7 @@ export namespace Components {
         "active"?: boolean;
     }
     interface BdsNavTree {
+        "close": () => Promise<void>;
         /**
           * Focus Selected. Used to add title in header accordion.
          */
@@ -1836,6 +1838,8 @@ export namespace Components {
           * Loading state. Indicates if the component is in a loading state.
          */
         "loading"?: boolean;
+        "open": () => Promise<void>;
+        "reciveNumber": (number: any) => Promise<void>;
         /**
           * SecondaryText. Used to insert a secondaryText in the display item.
          */
@@ -1846,6 +1850,14 @@ export namespace Components {
         "text": string;
         "toggle": () => Promise<void>;
     }
+    interface BdsNavTreeGroup {
+        "closeAll": (actNumber?: any) => Promise<void>;
+        /**
+          * Focus Selected. Used to add title in header accordion.
+         */
+        "collapse"?: collapses;
+        "openAll": (actNumber?: any) => Promise<void>;
+    }
     interface BdsNavTreeItem {
         /**
           * Focus Selected. Used to add title in header accordion.
@@ -3321,6 +3333,12 @@ declare global {
         prototype: HTMLBdsNavTreeElement;
         new (): HTMLBdsNavTreeElement;
     };
+    interface HTMLBdsNavTreeGroupElement extends Components.BdsNavTreeGroup, HTMLStencilElement {
+    }
+    var HTMLBdsNavTreeGroupElement: {
+        prototype: HTMLBdsNavTreeGroupElement;
+        new (): HTMLBdsNavTreeGroupElement;
+    };
     interface HTMLBdsNavTreeItemElement extends Components.BdsNavTreeItem, HTMLStencilElement {
     }
     var HTMLBdsNavTreeItemElement: {
@@ -3603,6 +3621,7 @@ declare global {
         "bds-modal-action": HTMLBdsModalActionElement;
         "bds-modal-close-button": HTMLBdsModalCloseButtonElement;
         "bds-nav-tree": HTMLBdsNavTreeElement;
+        "bds-nav-tree-group": HTMLBdsNavTreeGroupElement;
         "bds-nav-tree-item": HTMLBdsNavTreeItemElement;
         "bds-navbar": HTMLBdsNavbarElement;
         "bds-navbar-content": HTMLBdsNavbarContentElement;
@@ -5607,6 +5626,12 @@ declare namespace LocalJSX {
          */
         "text": string;
     }
+    interface BdsNavTreeGroup {
+        /**
+          * Focus Selected. Used to add title in header accordion.
+         */
+        "collapse"?: collapses;
+    }
     interface BdsNavTreeItem {
         /**
           * Focus Selected. Used to add title in header accordion.
@@ -6597,6 +6622,7 @@ declare namespace LocalJSX {
         "bds-modal-action": BdsModalAction;
         "bds-modal-close-button": BdsModalCloseButton;
         "bds-nav-tree": BdsNavTree;
+        "bds-nav-tree-group": BdsNavTreeGroup;
         "bds-nav-tree-item": BdsNavTreeItem;
         "bds-navbar": BdsNavbar;
         "bds-navbar-content": BdsNavbarContent;
@@ -6704,6 +6730,7 @@ declare module "@stencil/core" {
             "bds-modal-action": LocalJSX.BdsModalAction & JSXBase.HTMLAttributes<HTMLBdsModalActionElement>;
             "bds-modal-close-button": LocalJSX.BdsModalCloseButton & JSXBase.HTMLAttributes<HTMLBdsModalCloseButtonElement>;
             "bds-nav-tree": LocalJSX.BdsNavTree & JSXBase.HTMLAttributes<HTMLBdsNavTreeElement>;
+            "bds-nav-tree-group": LocalJSX.BdsNavTreeGroup & JSXBase.HTMLAttributes<HTMLBdsNavTreeGroupElement>;
             "bds-nav-tree-item": LocalJSX.BdsNavTreeItem & JSXBase.HTMLAttributes<HTMLBdsNavTreeItemElement>;
             "bds-navbar": LocalJSX.BdsNavbar & JSXBase.HTMLAttributes<HTMLBdsNavbarElement>;
             "bds-navbar-content": LocalJSX.BdsNavbarContent & JSXBase.HTMLAttributes<HTMLBdsNavbarContentElement>;

diff --git a/src/components/nav-tree/nav-tree-group.mdx b/src/components/nav-tree/nav-tree-group.mdx
@@ -0,0 +1,22 @@
+import { Story, ArgsTable, Canvas } from '@storybook/blocks';
+import * as NavTreeGroupStories from './nav-tree-group.stories';
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from '@storybook/blocks';
+
+# NavbarGroup
+
+
+## Overview
+
+Nav Tree Group allows users to select a date or a range of dates.
+
+<Canvas of={NavTreeGroupStories.Properties}></Canvas>
+
+<Meta isTemplate />
+
+The following properties that are shared by Nav Tree Group.
+
+<Controls />
+
+## Build on React
+
+<Source of={NavTreeGroupStories.FrameworkReact} />
diff --git a/src/components/nav-tree/nav-tree-group.stories.jsx b/src/components/nav-tree/nav-tree-group.stories.jsx
@@ -0,0 +1,153 @@
+import React from 'react';
+import DocumentationTemplate from './nav-tree-group.mdx';
+import { BdsNavTree, BdsNavTreeGroup, BdsNavTreeItem } from '../../../blip-ds-react/dist/components';
+
+export default {
+  title: 'Components/NavTreeGroup',
+  parameters: {
+    docs: {
+      page: DocumentationTemplate,
+    },
+  },
+};
+
+export const Properties = (args) => {
+  return (
+    <bds-nav-tree-group collapse={args.colapse}>
+      <bds-nav-tree id="nav-tree" icon="heart" text="Título" secondary-text="Breve Descrição">
+        <bds-nav-tree-item icon="heart" text="Título"></bds-nav-tree-item>
+        <bds-nav-tree-item text="Título" secondary-text="Breve Descrição">
+          <bds-nav-tree-item icon="heart" text="Título" isOpen></bds-nav-tree-item>
+          <bds-nav-tree-item icon="heart" text="Título"></bds-nav-tree-item>
+        </bds-nav-tree-item>
+        <bds-nav-tree-item icon="heart" text="Título" secondary-text="Breve Descrição">
+          <bds-nav-tree-item text="Título"></bds-nav-tree-item>
+          <bds-nav-tree-item icon="heart" text="Título"></bds-nav-tree-item>
+          <bds-nav-tree-item icon="heart" text="Título" secondary-text="Breve Descrição"></bds-nav-tree-item>
+          <bds-nav-tree-item text="Título" secondary-text="Breve Descrição"></bds-nav-tree-item>
+        </bds-nav-tree-item>
+      </bds-nav-tree>
+      <bds-nav-tree id="nav-tree" icon="heart" text="Título" secondary-text="Breve Descrição">
+        <bds-nav-tree-item icon="heart" text="Título"></bds-nav-tree-item>
+        <bds-nav-tree-item text="Título" secondary-text="Breve Descrição">
+          <bds-nav-tree-item icon="heart" text="Título" isOpen></bds-nav-tree-item>
+          <bds-nav-tree-item icon="heart" text="Título"></bds-nav-tree-item>
+        </bds-nav-tree-item>
+        <bds-nav-tree-item icon="heart" text="Título" secondary-text="Breve Descrição">
+          <bds-nav-tree-item text="Título"></bds-nav-tree-item>
+          <bds-nav-tree-item icon="heart" text="Título"></bds-nav-tree-item>
+          <bds-nav-tree-item icon="heart" text="Título" secondary-text="Breve Descrição"></bds-nav-tree-item>
+          <bds-nav-tree-item text="Título" secondary-text="Breve Descrição"></bds-nav-tree-item>
+        </bds-nav-tree-item>
+      </bds-nav-tree>
+      <bds-nav-tree id="nav-tree" icon="heart" text="Título" secondary-text="Breve Descrição">
+        <bds-nav-tree-item icon="heart" text="Título"></bds-nav-tree-item>
+        <bds-nav-tree-item text="Título" secondary-text="Breve Descrição">
+          <bds-nav-tree-item icon="heart" text="Título" isOpen></bds-nav-tree-item>
+          <bds-nav-tree-item icon="heart" text="Título"></bds-nav-tree-item>
+        </bds-nav-tree-item>
+        <bds-nav-tree-item icon="heart" text="Título" secondary-text="Breve Descrição">
+          <bds-nav-tree-item text="Título"></bds-nav-tree-item>
+          <bds-nav-tree-item icon="heart" text="Título"></bds-nav-tree-item>
+          <bds-nav-tree-item icon="heart" text="Título" secondary-text="Breve Descrição"></bds-nav-tree-item>
+          <bds-nav-tree-item text="Título" secondary-text="Breve Descrição"></bds-nav-tree-item>
+        </bds-nav-tree-item>
+      </bds-nav-tree>
+      <bds-nav-tree id="nav-tree" icon="heart" text="Título" secondary-text="Breve Descrição">
+        <bds-nav-tree-item icon="heart" text="Título"></bds-nav-tree-item>
+        <bds-nav-tree-item text="Título" secondary-text="Breve Descrição">
+          <bds-nav-tree-item icon="heart" text="Título" isOpen></bds-nav-tree-item>
+          <bds-nav-tree-item icon="heart" text="Título"></bds-nav-tree-item>
+        </bds-nav-tree-item>
+        <bds-nav-tree-item icon="heart" text="Título" secondary-text="Breve Descrição">
+          <bds-nav-tree-item text="Título"></bds-nav-tree-item>
+          <bds-nav-tree-item icon="heart" text="Título"></bds-nav-tree-item>
+          <bds-nav-tree-item icon="heart" text="Título" secondary-text="Breve Descrição"></bds-nav-tree-item>
+          <bds-nav-tree-item text="Título" secondary-text="Breve Descrição"></bds-nav-tree-item>
+        </bds-nav-tree-item>
+      </bds-nav-tree>
+    </bds-nav-tree-group>
+  );
+};
+Properties.args = { colapse: 'single' };
+
+Properties.argTypes = {
+  colapse: {
+    table: {
+      defaultValue: { summary: 'single' },
+    },
+    description: 'Selecione a regra de comportamento de abrir e fechar as opções.',
+    control: 'select',
+    options: ['single', 'multiple'],
+  },
+};
+
+export const Methods = () => {
+  const btOpenAll = async (id) => {
+    const acc = document.getElementById(id);
+    await acc.openAll();
+  };
+  const btCloseAll = async (id) => {
+    const acc = document.getElementById(id);
+    await acc.closeAll();
+  };
+  return (
+    <bds-grid direction="column" gap="2">
+      <bds-button onClick={() => btOpenAll('nav-tree')} variant="primary" size="short">
+        openAll
+      </bds-button>
+      <bds-button onClick={() => btCloseAll('nav-tree')} variant="primary" size="short">
+        openAll
+      </bds-button>
+      <bds-nav-tree-group>
+        <bds-nav-tree id="nav-tree" icon="heart" text="Título" secondary-text="Breve Descrição">
+          <bds-nav-tree-item icon="heart" text="Título"></bds-nav-tree-item>
+          <bds-nav-tree-item text="Título" secondary-text="Breve Descrição"></bds-nav-tree-item>
+          <bds-nav-tree-item icon="heart" text="Título" secondary-text="Breve Descrição"></bds-nav-tree-item>
+        </bds-nav-tree>
+        <bds-nav-tree id="nav-tree" icon="heart" text="Título" secondary-text="Breve Descrição">
+          <bds-nav-tree-item icon="heart" text="Título"></bds-nav-tree-item>
+          <bds-nav-tree-item text="Título" secondary-text="Breve Descrição"></bds-nav-tree-item>
+          <bds-nav-tree-item icon="heart" text="Título" secondary-text="Breve Descrição"></bds-nav-tree-item>
+        </bds-nav-tree>
+        <bds-nav-tree id="nav-tree" icon="heart" text="Título" secondary-text="Breve Descrição">
+          <bds-nav-tree-item icon="heart" text="Título"></bds-nav-tree-item>
+          <bds-nav-tree-item text="Título" secondary-text="Breve Descrição"></bds-nav-tree-item>
+          <bds-nav-tree-item icon="heart" text="Título" secondary-text="Breve Descrição"></bds-nav-tree-item>
+        </bds-nav-tree>
+        <bds-nav-tree id="nav-tree" icon="heart" text="Título" secondary-text="Breve Descrição">
+          <bds-nav-tree-item icon="heart" text="Título"></bds-nav-tree-item>
+          <bds-nav-tree-item text="Título" secondary-text="Breve Descrição"></bds-nav-tree-item>
+          <bds-nav-tree-item icon="heart" text="Título" secondary-text="Breve Descrição"></bds-nav-tree-item>
+        </bds-nav-tree>
+      </bds-nav-tree-group>
+    </bds-grid>
+  );
+};
+
+export const FrameworkReact = () => {
+  return (
+    <BdsNavTreeGroup>
+      <BdsNavTree icon="heart" text="Título" secondaryText="Breve Descrição">
+        <BdsNavTreeItem text="Título" secondaryText="Breve Descrição"></BdsNavTreeItem>
+        <BdsNavTreeItem text="Título" secondaryText="Breve Descrição"></BdsNavTreeItem>
+        <BdsNavTreeItem text="Título" secondaryText="Breve Descrição"></BdsNavTreeItem>
+      </BdsNavTree>
+      <BdsNavTree icon="heart" text="Título" secondaryText="Breve Descrição">
+        <BdsNavTreeItem text="Título" secondaryText="Breve Descrição"></BdsNavTreeItem>
+        <BdsNavTreeItem text="Título" secondaryText="Breve Descrição"></BdsNavTreeItem>
+        <BdsNavTreeItem text="Título" secondaryText="Breve Descrição"></BdsNavTreeItem>
+      </BdsNavTree>
+      <BdsNavTree icon="heart" text="Título" secondaryText="Breve Descrição">
+        <BdsNavTreeItem text="Título" secondaryText="Breve Descrição"></BdsNavTreeItem>
+        <BdsNavTreeItem text="Título" secondaryText="Breve Descrição"></BdsNavTreeItem>
+        <BdsNavTreeItem text="Título" secondaryText="Breve Descrição"></BdsNavTreeItem>
+      </BdsNavTree>
+      <BdsNavTree icon="heart" text="Título" secondaryText="Breve Descrição">
+        <BdsNavTreeItem text="Título" secondaryText="Breve Descrição"></BdsNavTreeItem>
+        <BdsNavTreeItem text="Título" secondaryText="Breve Descrição"></BdsNavTreeItem>
+        <BdsNavTreeItem text="Título" secondaryText="Breve Descrição"></BdsNavTreeItem>
+      </BdsNavTree>
+    </BdsNavTreeGroup>
+  );
+};
diff --git a/src/components/nav-tree/nav-tree-group.tsx b/src/components/nav-tree/nav-tree-group.tsx
@@ -0,0 +1,57 @@
+import { Component, Host, Element, State, Prop, h, Method } from '@stencil/core';
+
+export type collapses = 'single' | 'multiple';
+
+@Component({
+  tag: 'bds-nav-tree-group',
+  styleUrl: 'nav-tree.scss',
+  shadow: true,
+})
+export class NavTreeGroup {
+  private itemsElement?: HTMLCollectionOf<HTMLBdsNavTreeElement> = null;
+  @Element() private element: HTMLElement;
+
+  @State() isOpenAftAnimation?: boolean = false;
+  @State() navTreeChild? = null;
+  /**
+   * Focus Selected. Used to add title in header accordion.
+   */
+  @Prop() collapse?: collapses = 'single';
+
+  componentWillRender() {
+    this.itemsElement = this.element.getElementsByTagName('bds-nav-tree') as HTMLCollectionOf<HTMLBdsNavTreeElement>;
+    for (let i = 0; i < this.itemsElement.length; i++) {
+      this.itemsElement[i].reciveNumber(i);
+    }
+  }
+
+  @Method()
+  async closeAll(actNumber?) {
+    for (let i = 0; i < this.itemsElement.length; i++) {
+      if (this.collapse != 'multiple') {
+        if (actNumber != i) this.itemsElement[i].close();
+      } else {
+        this.itemsElement[i].close();
+      }
+    }
+  }
+
+  @Method()
+  async openAll(actNumber?) {
+    for (let i = 0; i < this.itemsElement.length; i++) {
+      if (this.collapse != 'multiple') {
+        if (actNumber != i) this.itemsElement[i].open();
+      } else {
+        this.itemsElement[i].open();
+      }
+    }
+  }
+
+  render() {
+    return (
+      <Host>
+        <slot></slot>
+      </Host>
+    );
+  }
+}
diff --git a/src/components/nav-tree/nav-tree.tsx b/src/components/nav-tree/nav-tree.tsx
@@ -8,10 +8,13 @@ export type collapses = 'single' | 'multiple';
   shadow: true,
 })
 export class NavTree {
+  private itemsGroup?: HTMLBdsNavTreeGroupElement = null;
+
   @Element() private element: HTMLElement;
 
   @State() isOpenAftAnimation?: boolean = false;
   @State() navTreeChild? = null;
+  @State() numberElement?: number = null;
   /**
    * Focus Selected. Used to add title in header accordion.
    */
@@ -57,12 +60,34 @@ export class NavTree {
     }
   }
 
+  @Method()
+  async reciveNumber(number) {
+    this.numberElement = number;
+  }
+
+  @Method()
+  async open() {
+    this.isOpen = true;
+  }
+
+  @Method()
+  async close() {
+    this.isOpen = false;
+  }
   @Watch('isOpen')
   protected isOpenChanged(value): void {
     this.bdsToogleChange.emit({ value: value, element: this.element });
+    if (value) {
+      if (this.itemsGroup.collapse == 'single') {
+        this.itemsGroup?.closeAll(this.numberElement);
+      }
+    }
   }
 
   componentWillLoad() {
+    this.itemsGroup =
+      this.element.parentElement.tagName == 'BDS-NAV-TREE-GROUP' &&
+      (this.element.parentElement as HTMLBdsNavTreeGroupElement);
     this.navTreeChild = this.element.querySelector('bds-nav-tree-item') === null ? false : true;
   }