From 7335401d6c8eb72c35506364103685a88e41e1c5 Mon Sep 17 00:00:00 2001
From: WillianLomeu <willianlomeu.contato@gmail.com>
Date: Thu, 28 Nov 2024 11:09:50 -0300
Subject: [PATCH 01/11] feat(breadcrumb): new component structure

---
 blip-ds-react/src/components.ts           |   1 +
 src/components.d.ts                       |  17 +++
 src/components/breadcrumb/breadcrumb.scss |  33 ++++++
 src/components/breadcrumb/breadcrumb.tsx  | 122 ++++++++++++++++++++++
 src/components/breadcrumb/readme.md       |  42 ++++++++
 src/components/dropdown/readme.md         |  13 +++
 src/components/grid/readme.md             |   6 +-
 src/components/icon/readme.md             |   2 +
 src/components/typo/readme.md             |   2 +
 src/index.html                            |  71 ++-----------
 10 files changed, 246 insertions(+), 63 deletions(-)
 create mode 100644 src/components/breadcrumb/breadcrumb.scss
 create mode 100644 src/components/breadcrumb/breadcrumb.tsx
 create mode 100644 src/components/breadcrumb/readme.md

diff --git a/blip-ds-react/src/components.ts b/blip-ds-react/src/components.ts
index d7eb79ec6..72a38b0f4 100644
--- a/blip-ds-react/src/components.ts
+++ b/blip-ds-react/src/components.ts
@@ -21,6 +21,7 @@ export const BdsAvatarGroup = /*@__PURE__*/createReactComponent<JSX.BdsAvatarGro
 export const BdsBadge = /*@__PURE__*/createReactComponent<JSX.BdsBadge, HTMLBdsBadgeElement>('bds-badge');
 export const BdsBanner = /*@__PURE__*/createReactComponent<JSX.BdsBanner, HTMLBdsBannerElement>('bds-banner');
 export const BdsBannerLink = /*@__PURE__*/createReactComponent<JSX.BdsBannerLink, HTMLBdsBannerLinkElement>('bds-banner-link');
+export const BdsBreadcrumb = /*@__PURE__*/createReactComponent<JSX.BdsBreadcrumb, HTMLBdsBreadcrumbElement>('bds-breadcrumb');
 export const BdsButton = /*@__PURE__*/createReactComponent<JSX.BdsButton, HTMLBdsButtonElement>('bds-button');
 export const BdsButtonGroup = /*@__PURE__*/createReactComponent<JSX.BdsButtonGroup, HTMLBdsButtonGroupElement>('bds-button-group');
 export const BdsButtonIcon = /*@__PURE__*/createReactComponent<JSX.BdsButtonIcon, HTMLBdsButtonIconElement>('bds-button-icon');
diff --git a/src/components.d.ts b/src/components.d.ts
index 16fc0edd9..c8c39a696 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -341,6 +341,10 @@ export namespace Components {
          */
         "target": targets;
     }
+    interface BdsBreadcrumb {
+        "items": string | Array<{ label: string; href?: string }>;
+        "maxVisible": number;
+    }
     interface BdsButton {
         /**
           * The arrow button
@@ -3047,6 +3051,12 @@ declare global {
         prototype: HTMLBdsBannerLinkElement;
         new (): HTMLBdsBannerLinkElement;
     };
+    interface HTMLBdsBreadcrumbElement extends Components.BdsBreadcrumb, HTMLStencilElement {
+    }
+    var HTMLBdsBreadcrumbElement: {
+        prototype: HTMLBdsBreadcrumbElement;
+        new (): HTMLBdsBreadcrumbElement;
+    };
     interface HTMLBdsButtonElement extends Components.BdsButton, HTMLStencilElement {
     }
     var HTMLBdsButtonElement: {
@@ -3596,6 +3606,7 @@ declare global {
         "bds-badge": HTMLBdsBadgeElement;
         "bds-banner": HTMLBdsBannerElement;
         "bds-banner-link": HTMLBdsBannerLinkElement;
+        "bds-breadcrumb": HTMLBdsBreadcrumbElement;
         "bds-button": HTMLBdsButtonElement;
         "bds-button-group": HTMLBdsButtonGroupElement;
         "bds-button-icon": HTMLBdsButtonIconElement;
@@ -3985,6 +3996,10 @@ declare namespace LocalJSX {
          */
         "target"?: targets;
     }
+    interface BdsBreadcrumb {
+        "items"?: string | Array<{ label: string; href?: string }>;
+        "maxVisible"?: number;
+    }
     interface BdsButton {
         /**
           * The arrow button
@@ -6615,6 +6630,7 @@ declare namespace LocalJSX {
         "bds-badge": BdsBadge;
         "bds-banner": BdsBanner;
         "bds-banner-link": BdsBannerLink;
+        "bds-breadcrumb": BdsBreadcrumb;
         "bds-button": BdsButton;
         "bds-button-group": BdsButtonGroup;
         "bds-button-icon": BdsButtonIcon;
@@ -6724,6 +6740,7 @@ declare module "@stencil/core" {
             "bds-badge": LocalJSX.BdsBadge & JSXBase.HTMLAttributes<HTMLBdsBadgeElement>;
             "bds-banner": LocalJSX.BdsBanner & JSXBase.HTMLAttributes<HTMLBdsBannerElement>;
             "bds-banner-link": LocalJSX.BdsBannerLink & JSXBase.HTMLAttributes<HTMLBdsBannerLinkElement>;
+            "bds-breadcrumb": LocalJSX.BdsBreadcrumb & JSXBase.HTMLAttributes<HTMLBdsBreadcrumbElement>;
             "bds-button": LocalJSX.BdsButton & JSXBase.HTMLAttributes<HTMLBdsButtonElement>;
             "bds-button-group": LocalJSX.BdsButtonGroup & JSXBase.HTMLAttributes<HTMLBdsButtonGroupElement>;
             "bds-button-icon": LocalJSX.BdsButtonIcon & JSXBase.HTMLAttributes<HTMLBdsButtonIconElement>;
diff --git a/src/components/breadcrumb/breadcrumb.scss b/src/components/breadcrumb/breadcrumb.scss
new file mode 100644
index 000000000..c6844cf8e
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb.scss
@@ -0,0 +1,33 @@
+:host {
+  display: block;
+
+  * {
+    color: $color-content-default;
+  }
+}
+
+.breadcrumb__button {
+  &--0 {
+    margin-left: 0;
+    .button--icon {
+      display: none;
+    }
+  }
+  &--1 {
+    margin-left: 30px;
+    padding-left: 8px;
+    .button--icon {
+      transform: rotate(180deg);
+    }
+  }
+  &--2 {
+    margin-left: 60px;
+    .button--icon {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.breadcrumb__link {
+  text-decoration: none;
+}
\ No newline at end of file
diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx
new file mode 100644
index 000000000..b9eec6107
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb.tsx
@@ -0,0 +1,122 @@
+import { Component, h, Prop, State, Watch } from '@stencil/core';
+
+@Component({
+  tag: 'bds-breadcrumb',
+  styleUrl: 'breadcrumb.scss',
+  shadow: true,
+})
+export class Breadcrumb {
+  @Prop() items: string | Array<{ label: string; href?: string }> = [];
+
+  @State() parsedItems: Array<{ label: string; href?: string }> = [];
+
+  @Watch('items')
+  parseItems(newValue: string | Array<{ label: string; href?: string }>) {
+    if (typeof newValue === 'string') {
+      try {
+        this.parsedItems = JSON.parse(newValue);
+      } catch (error) {
+        console.error('Falha ao analisar items: Certifique-se de que é um JSON válido.', error);
+        this.parsedItems = [];
+      }
+    } else {
+      this.parsedItems = newValue;
+    }
+  }
+
+  componentWillLoad() {
+    this.parseItems(this.items);
+  }
+
+  @Prop() maxVisible: number = 3;
+
+  @State() isDropdownOpen: boolean = false;
+
+  toggleDropdown() {
+    this.isDropdownOpen = !this.isDropdownOpen;
+  }
+
+  render() {
+    console.log('Itens processados:', this.parsedItems);
+
+    if (!this.parsedItems || this.parsedItems.length === 0) {
+      return <p>Sem itens para exibir no Breadcrumb.</p>;
+    }
+
+    const visibleItems =
+      this.parsedItems.length <= this.maxVisible
+        ? this.parsedItems
+        : [
+          this.parsedItems[0],
+          { label: '...', href: null },
+          this.parsedItems[this.parsedItems.length - 1],
+        ];
+
+    return (
+      <nav aria-label="breadcrumb">
+        <bds-grid direction="row" align-items="center">
+          {visibleItems.map((item, index) => (
+            <bds-grid
+              class={{
+                breadcrumb__item: true,
+                'breadcrumb__item--active': index === visibleItems.length - 1,
+              }}
+              aria-current={index === visibleItems.length - 1 ? 'page' : null}
+            >
+              {item.label === '...' ? (
+                <bds-dropdown active-mode="click" position="auto">
+                  <div slot="dropdown-content">
+                    <bds-grid direction='column' padding='1' gap="half">
+                      {this.parsedItems.slice(1, -1).map((subItem, index) => (
+                        <bds-grid>
+                          {subItem.href ? (
+                            <a href={subItem.href} class={`breadcrumb__button--${index} breadcrumb__link`}>
+                              <bds-grid align-items='center'>
+                                <bds-icon name="reply" theme='outline' class="button--icon"></bds-icon>
+                                <bds-button variant="text" color='content'>
+                                  {subItem.label}
+                                </bds-button>
+                              </bds-grid>
+
+                            </a>
+                          ) : (
+                            <span>{subItem.label}</span>
+                          )}
+                        </bds-grid>
+                      ))}
+                    </bds-grid>
+                  </div>
+                  <bds-grid slot="dropdown-activator">
+                    <bds-button
+                      variant="text"
+                      color="content"
+                      size="short"
+                      onClick={() => this.toggleDropdown()}
+                      icon-left="more-options-horizontal"
+                    ></bds-button>
+                  </bds-grid>
+                </bds-dropdown>
+              ) : item.href ? (
+                <bds-grid direction="row">
+                  <bds-typo variant="fs-12" margin={false}>
+                    <a href={item.href} class="breadcrumb__link">
+                      {item.label}
+                    </a>
+                  </bds-typo>
+                  <bds-icon name="arrow-right" size="x-small"></bds-icon>
+                </bds-grid>
+              ) : (
+                <bds-grid direction="row">
+                  <bds-icon name="arrow-right" size="x-small"></bds-icon>
+                  <bds-typo variant="fs-12" bold="bold" margin={false}>
+                    {item.label}
+                  </bds-typo>
+                </bds-grid>
+              )}
+            </bds-grid>
+          ))}
+        </bds-grid>
+      </nav>
+    );
+  }
+}
diff --git a/src/components/breadcrumb/readme.md b/src/components/breadcrumb/readme.md
new file mode 100644
index 000000000..e2b302c23
--- /dev/null
+++ b/src/components/breadcrumb/readme.md
@@ -0,0 +1,42 @@
+# bds-breadcrumb
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute     | Description | Type                                            | Default |
+| ------------ | ------------- | ----------- | ----------------------------------------------- | ------- |
+| `items`      | `items`       |             | `string \| { label: string; href?: string; }[]` | `[]`    |
+| `maxVisible` | `max-visible` |             | `number`                                        | `3`     |
+
+
+## Dependencies
+
+### Depends on
+
+- [bds-grid](../grid)
+- [bds-dropdown](../dropdown)
+- [bds-icon](../icon)
+- [bds-button](../button)
+- [bds-typo](../typo)
+
+### Graph
+```mermaid
+graph TD;
+  bds-breadcrumb --> bds-grid
+  bds-breadcrumb --> bds-dropdown
+  bds-breadcrumb --> bds-icon
+  bds-breadcrumb --> bds-button
+  bds-breadcrumb --> bds-typo
+  bds-button --> bds-loading-spinner
+  bds-button --> bds-icon
+  bds-button --> bds-typo
+  style bds-breadcrumb fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/dropdown/readme.md b/src/components/dropdown/readme.md
index f4c4e5bf9..11a26ee3d 100644
--- a/src/components/dropdown/readme.md
+++ b/src/components/dropdown/readme.md
@@ -55,6 +55,19 @@ Type: `Promise<void>`
 
 
 
+## Dependencies
+
+### Used by
+
+ - [bds-breadcrumb](../breadcrumb)
+
+### Graph
+```mermaid
+graph TD;
+  bds-breadcrumb --> bds-dropdown
+  style bds-dropdown fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/grid/readme.md b/src/components/grid/readme.md
index 012202618..7391a981a 100644
--- a/src/components/grid/readme.md
+++ b/src/components/grid/readme.md
@@ -20,10 +20,10 @@
 | `justifyContent` | `justify-content` |             | `"center" \| "flex-end" \| "flex-start" \| "space-around" \| "space-between" \| "space-evenly" \| "stretch"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `undefined` |
 | `lg`             | `lg`              |             | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
 | `lgOffset`       | `lg-offset`       |             | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
-| `margin`         | `margin`          |             | `"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "none" \| "half" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"`           | `undefined` |
+| `margin`         | `margin`          |             | `"none" \| "half" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"`           | `undefined` |
 | `md`             | `md`              |             | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
 | `mdOffset`       | `md-offset`       |             | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
-| `padding`        | `padding`         |             | `"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "none" \| "half" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "b-12" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"` | `undefined` |
+| `padding`        | `padding`         |             | `"none" \| "half" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "b-12" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"` | `undefined` |
 | `sm`             | `sm`              |             | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
 | `smOffset`       | `sm-offset`       |             | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
 | `xg`             | `xg`              |             | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
@@ -38,6 +38,7 @@
 
 ### Used by
 
+ - [bds-breadcrumb](../breadcrumb)
  - [bds-button-group](../button)
  - [bds-card](../card)
  - [bds-card-body](../card/card-body)
@@ -55,6 +56,7 @@
 ### Graph
 ```mermaid
 graph TD;
+  bds-breadcrumb --> bds-grid
   bds-button-group --> bds-grid
   bds-card --> bds-grid
   bds-card-body --> bds-grid
diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
index b2be8b00e..17733aaab 100755
--- a/src/components/icon/readme.md
+++ b/src/components/icon/readme.md
@@ -32,6 +32,7 @@
  - [bds-avatar](../avatar)
  - [bds-badge](../badge)
  - [bds-banner](../banner)
+ - [bds-breadcrumb](../breadcrumb)
  - [bds-button](../button)
  - [bds-button-icon](../icon-button)
  - [bds-checkbox](../checkbox)
@@ -73,6 +74,7 @@ graph TD;
   bds-avatar --> bds-icon
   bds-badge --> bds-icon
   bds-banner --> bds-icon
+  bds-breadcrumb --> bds-icon
   bds-button --> bds-icon
   bds-button-icon --> bds-icon
   bds-checkbox --> bds-icon
diff --git a/src/components/typo/readme.md b/src/components/typo/readme.md
index 1e9535ec9..cdb75e81e 100644
--- a/src/components/typo/readme.md
+++ b/src/components/typo/readme.md
@@ -37,6 +37,7 @@
  - [bds-autocomplete](../autocomplete)
  - [bds-avatar](../avatar)
  - [bds-badge](../badge)
+ - [bds-breadcrumb](../breadcrumb)
  - [bds-button](../button)
  - [bds-card-color](../card-color)
  - [bds-card-subtitle](../card/card-subtitle)
@@ -89,6 +90,7 @@ graph TD;
   bds-autocomplete --> bds-typo
   bds-avatar --> bds-typo
   bds-badge --> bds-typo
+  bds-breadcrumb --> bds-typo
   bds-button --> bds-typo
   bds-card-color --> bds-typo
   bds-card-subtitle --> bds-typo
diff --git a/src/index.html b/src/index.html
index 2a397d8c2..1e1c2a63f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -24,69 +24,18 @@
 
 <body>
   <bds-test-component></bds-test-component>
-  <h2>Exemplos do BdsDivider</h2>
-<bds-grid direction="column" gap="2">
-  <bds-grid xxs="12" direction="column">
-    <!-- Horizontal Divider, Solid, Divider-1 -->
-  <bds-divider style-type="solid" orientation="horizontal" color="divider-1"></bds-divider>
-
-  <!-- Horizontal Divider, Solid, Divider-2 -->
-  <bds-divider style-type="solid" orientation="horizontal" color="divider-2"></bds-divider>
-
-  <!-- Horizontal Divider, Solid, Divider-3 -->
-  <bds-divider style-type="solid" orientation="horizontal" color="divider-3"></bds-divider>
-
-  <!-- Horizontal Divider, Dotted, Divider-1 -->
-  <bds-divider style-type="dotted" orientation="horizontal" color="divider-1"></bds-divider>
-
-  <!-- Horizontal Divider, Dotted, Divider-2 -->
-  <bds-divider style-type="dotted" orientation="horizontal" color="divider-2"></bds-divider>
-
-  <!-- Horizontal Divider, Dotted, Divider-3 -->
-  <bds-divider style-type="dotted" orientation="horizontal" color="divider-3"></bds-divider>
-
-  <!-- Horizontal Divider, Dashed, Divider-1 -->
-  <bds-divider style-type="dashed" orientation="horizontal" color="divider-1"></bds-divider>
-
-  <!-- Horizontal Divider, Dashed, Divider-2 -->
-  <bds-divider style-type="dashed" orientation="horizontal" color="divider-2"></bds-divider>
-
-  <!-- Horizontal Divider, Dashed, Divider-3 -->
-  <bds-divider style-type="dashed" orientation="horizontal" color="divider-3"></bds-divider>
-
+  <bds-grid xxs="12" margin="auto" justify-content="center" height="500px" align-items="center">
+    <bds-breadcrumb
+    items='[
+      {"label": "Página 1", "href": "/pagina-1"},
+      {"label": "Página 2", "href": "/pagina-2"},
+      {"label": "Página 3", "href": "/pagina-3"},
+      {"label": "Página 4", "href": "/pagina-4"},
+      {"label": "Página atual"}
+    ]'
+  ></bds-breadcrumb>
   </bds-grid>
-  <bds-grid direction="row" gap="2" height="600px">
-    <!-- Vertical Divider, Solid, Divider-1 -->
-  <bds-divider style-type="solid" orientation="vertical" color="divider-1"></bds-divider>
 
-  <!-- Vertical Divider, Solid, Divider-2 -->
-  <bds-divider style-type="solid" orientation="vertical" color="divider-2"></bds-divider>
-
-  <!-- Vertical Divider, Solid, Divider-3 -->
-  <bds-divider style-type="solid" orientation="vertical" color="divider-3"></bds-divider>
-
-  <!-- Vertical Divider, Dotted, Divider-1 -->
-  <bds-divider style-type="dotted" orientation="vertical" color="divider-1"></bds-divider>
-
-  <!-- Vertical Divider, Dotted, Divider-2 -->
-  <bds-divider style-type="dotted" orientation="vertical" color="divider-2"></bds-divider>
-
-  <!-- Vertical Divider, Dotted, Divider-3 -->
-  <bds-divider style-type="dotted" orientation="vertical" color="divider-3"></bds-divider>
-
-  <!-- Vertical Divider, Dashed, Divider-1 -->
-  <bds-divider style-type="dashed" orientation="vertical" color="divider-1"></bds-divider>
-
-  <!-- Vertical Divider, Dashed, Divider-2 -->
-  <bds-divider style-type="dashed" orientation="vertical" color="divider-2"></bds-divider>
-
-  <!-- Vertical Divider, Dashed, Divider-3 -->
-  <bds-divider style-type="dashed" orientation="vertical" color="divider-3"></bds-divider>
-
-  </bds-grid>
-  
-</bds-grid>
-  
 </body>
 
 <script>

From 7d102e1907999e0bd0887fb472c175a870ca23c5 Mon Sep 17 00:00:00 2001
From: WillianLomeu <willianlomeu.contato@gmail.com>
Date: Mon, 2 Dec 2024 21:00:42 -0300
Subject: [PATCH 02/11] feat(template): new template sidebar and content

---
 src/components/grid/readme.md                 |   4 +-
 .../portal/sidebar+content.stories.jsx        | 115 ++++++++++++++++++
 2 files changed, 117 insertions(+), 2 deletions(-)
 create mode 100644 src/templates/portal/sidebar+content.stories.jsx

diff --git a/src/components/grid/readme.md b/src/components/grid/readme.md
index 012202618..9bd41d685 100644
--- a/src/components/grid/readme.md
+++ b/src/components/grid/readme.md
@@ -20,10 +20,10 @@
 | `justifyContent` | `justify-content` |             | `"center" \| "flex-end" \| "flex-start" \| "space-around" \| "space-between" \| "space-evenly" \| "stretch"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `undefined` |
 | `lg`             | `lg`              |             | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
 | `lgOffset`       | `lg-offset`       |             | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
-| `margin`         | `margin`          |             | `"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "none" \| "half" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"`           | `undefined` |
+| `margin`         | `margin`          |             | `"none" \| "half" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"`           | `undefined` |
 | `md`             | `md`              |             | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
 | `mdOffset`       | `md-offset`       |             | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
-| `padding`        | `padding`         |             | `"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "none" \| "half" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "b-12" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"` | `undefined` |
+| `padding`        | `padding`         |             | `"none" \| "half" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "b-12" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"` | `undefined` |
 | `sm`             | `sm`              |             | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
 | `smOffset`       | `sm-offset`       |             | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
 | `xg`             | `xg`              |             | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
diff --git a/src/templates/portal/sidebar+content.stories.jsx b/src/templates/portal/sidebar+content.stories.jsx
new file mode 100644
index 000000000..3c7df7640
--- /dev/null
+++ b/src/templates/portal/sidebar+content.stories.jsx
@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import {
+  BdsTable,
+  BdsTableHeader,
+  BdsTableRow,
+  BdsTableTh,
+  BdsTableBody,
+  BdsTableCell,
+  BdsTypo,
+  BdsPagination,
+  BdsChipTag,
+  BdsCard,
+  BdsCardHeader,
+  BdsCardTitle,
+  BdsGrid,
+  BdsCardSubtitle,
+  BdsCardBody,
+  BdsList,
+  BdsListItem,
+  BdsSidebar,
+  BdsNavTree,
+  BdsNavTreeGroup,
+  BdsNavTreeItem,
+  BdsIcon,
+  BdsButton,
+  BdsInput,
+  BdsPaper,
+  BdsTooltip
+} from '../../../blip-ds-react/dist/components';
+
+export default {
+  title: 'Template/Portal/Sidebar + Content',
+};
+
+export const SidebarContent = (args) => (
+  <BdsGrid direction='row' xxs='12' height='100%'>
+    {/* Sidebar */}
+    <BdsGrid>
+      <BdsSidebar width="310px" type='fixed' background='surface-1'>
+        <BdsGrid slot='body'>
+          <BdsNavTreeGroup collapse="single">
+            <BdsNavTree text="Titulo" secondaryText="Breve descrição"></BdsNavTree>
+            <BdsNavTree text="Titulo" secondaryText="Breve descrição"></BdsNavTree>
+            <BdsNavTree text="Titulo" secondaryText="Breve descrição" icon='heart'>
+            <BdsNavTreeItem text="Titulo"></BdsNavTreeItem>
+            <BdsNavTreeItem text="Titulo"></BdsNavTreeItem>
+              <BdsNavTreeItem text="Titulo">
+                <BdsNavTreeItem text="Titulo">
+                  <BdsNavTreeItem text="Titulo"></BdsNavTreeItem>
+                </BdsNavTreeItem>
+              </BdsNavTreeItem>
+            </BdsNavTree>
+            <BdsNavTree text="Titulo" secondaryText="Breve descrição">
+              <BdsNavTreeItem text="Titulo"></BdsNavTreeItem>
+            </BdsNavTree>
+          </BdsNavTreeGroup>
+        </BdsGrid>
+      </BdsSidebar>
+    </BdsGrid>
+    <BdsGrid bgColor='color-surface-2' xxs='auto'>
+      <BdsGrid container xxs='12' direction='column'>
+        <BdsGrid margin='x-auto' padding='y-4' justifyContent='space-between' xxs='12'>
+          <BdsGrid direction='row' alignItems='center' gap="1">
+            <BdsButton iconLeft='arrow-left' color='content' variant='text'></BdsButton>
+            <BdsTypo variant='fs-24' bold='bold' margin="false">Título da página 24px-h3, Bold</BdsTypo>
+
+          </BdsGrid>
+          <BdsGrid gap='2'>
+            <BdsButton iconLeft='info' variant='outline' color='content'></BdsButton>
+            <BdsButton variant='outline' color='content'>Verbo + complemento</BdsButton>
+            <BdsButton>Verbo + complemento</BdsButton>
+          </BdsGrid>
+        </BdsGrid>
+        <BdsGrid xxs='6' margin='y-4'>
+          <BdsInput placeholder='Digite o nome do produto que está procurando' icon='search'></BdsInput>
+        </BdsGrid>
+        <BdsGrid margin='y-4' flexWrap='wrap'>
+          <BdsGrid xxs='6' height='260px'>
+            <BdsPaper width='100%'>
+              <BdsGrid padding='2' direction='column'>
+                <BdsGrid alignItems='center' gap='1'>
+                  <BdsTypo variant='fs-20' bold='bold' margin='false'>Título do card 1, $fs-20-h4/Bold</BdsTypo>
+                  <BdsTooltip tooltipText='Top Center'><BdsIcon name='info' size='x-small'></BdsIcon></BdsTooltip>
+                </BdsGrid>
+                <BdsGrid>
+                  <BdsTypo>Subtítulo do card 1, explicando conteúdo</BdsTypo>
+                </BdsGrid>
+              </BdsGrid>
+            </BdsPaper>
+          </BdsGrid>
+          <BdsGrid xxs='6' height='260px'>
+            <BdsPaper width='100%'>
+              <BdsGrid padding='2' direction='column'>
+                <BdsGrid alignItems='center' gap='1'>
+                  <BdsTypo variant='fs-20' bold='bold' margin='false'>Título do card 2, $fs-20-h4/Bold</BdsTypo>
+                </BdsGrid>
+              </BdsGrid>
+            </BdsPaper>
+          </BdsGrid>
+          <BdsGrid xxs='12' padding='t-2' height='260px'>
+            <BdsPaper width='100%'>
+              <BdsGrid padding='2' direction='column'>
+                <BdsGrid alignItems='center' gap='1'>
+                  <BdsTypo variant='fs-20' bold='bold' margin='false'>Título do card 3, $fs-20-h4/Bold</BdsTypo>
+                </BdsGrid>
+              </BdsGrid>
+            </BdsPaper>
+          </BdsGrid>
+        </BdsGrid>
+
+      </BdsGrid>
+
+    </BdsGrid>
+  </BdsGrid>
+);
\ No newline at end of file

From 0a341d2234c6555f0f71ec53b7cafdab640f3c52 Mon Sep 17 00:00:00 2001
From: WillianLomeu <willianlomeu.contato@gmail.com>
Date: Tue, 3 Dec 2024 11:50:43 -0300
Subject: [PATCH 03/11] feat(breadcrumb): new colors and sizes

---
 src/components/breadcrumb/breadcrumb.scss | 31 ++++++++++++++++-------
 src/components/breadcrumb/breadcrumb.tsx  | 14 +++++-----
 src/components/button/button.scss         |  6 +++++
 src/components/button/button.tsx          |  3 +++
 src/index.html                            | 11 --------
 5 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/src/components/breadcrumb/breadcrumb.scss b/src/components/breadcrumb/breadcrumb.scss
index c6844cf8e..0e342f80d 100644
--- a/src/components/breadcrumb/breadcrumb.scss
+++ b/src/components/breadcrumb/breadcrumb.scss
@@ -6,26 +6,39 @@
   }
 }
 
+.button--icon {
+  transform: rotate(180deg);
+  color: $color-content-ghost;
+}
+
 .breadcrumb__button {
   &--0 {
-    margin-left: 0;
+    padding-left: 0;
+
     .button--icon {
       display: none;
     }
   }
+
   &--1 {
-    margin-left: 30px;
     padding-left: 8px;
-    .button--icon {
-      transform: rotate(180deg);
-    }
   }
+
   &--2 {
-    margin-left: 60px;
-    .button--icon {
-      transform: rotate(180deg);
-    }
+    padding-left: 16px;
+  }
+
+  &--3 {
+    padding-left: 24px;
   }
+
+  &--4 {
+    padding-left: 32px;
+  }
+}
+
+.breadcrumb__link--text {
+  color: $color-content-disable;
 }
 
 .breadcrumb__link {
diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx
index b9eec6107..9d3369c28 100644
--- a/src/components/breadcrumb/breadcrumb.tsx
+++ b/src/components/breadcrumb/breadcrumb.tsx
@@ -65,15 +65,15 @@ export class Breadcrumb {
             >
               {item.label === '...' ? (
                 <bds-dropdown active-mode="click" position="auto">
-                  <div slot="dropdown-content">
+                  <bds-grid slot="dropdown-content">
                     <bds-grid direction='column' padding='1' gap="half">
                       {this.parsedItems.slice(1, -1).map((subItem, index) => (
                         <bds-grid>
                           {subItem.href ? (
                             <a href={subItem.href} class={`breadcrumb__button--${index} breadcrumb__link`}>
-                              <bds-grid align-items='center'>
-                                <bds-icon name="reply" theme='outline' class="button--icon"></bds-icon>
-                                <bds-button variant="text" color='content'>
+                              <bds-grid align-items='center' gap='half'>
+                                <bds-icon name="reply" theme='outline' class="button--icon" size='x-small'></bds-icon>
+                                <bds-button variant="text" color='content' size='short'>
                                   {subItem.label}
                                 </bds-button>
                               </bds-grid>
@@ -85,7 +85,7 @@ export class Breadcrumb {
                         </bds-grid>
                       ))}
                     </bds-grid>
-                  </div>
+                  </bds-grid>
                   <bds-grid slot="dropdown-activator">
                     <bds-button
                       variant="text"
@@ -98,7 +98,7 @@ export class Breadcrumb {
                 </bds-dropdown>
               ) : item.href ? (
                 <bds-grid direction="row">
-                  <bds-typo variant="fs-12" margin={false}>
+                  <bds-typo variant="fs-12" margin={false} class="breadcrumb__link--text">
                     <a href={item.href} class="breadcrumb__link">
                       {item.label}
                     </a>
@@ -108,7 +108,7 @@ export class Breadcrumb {
               ) : (
                 <bds-grid direction="row">
                   <bds-icon name="arrow-right" size="x-small"></bds-icon>
-                  <bds-typo variant="fs-12" bold="bold" margin={false}>
+                  <bds-typo variant="fs-12" bold="semi-bold" margin={false}>
                     {item.label}
                   </bds-typo>
                 </bds-grid>
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 1bbb66385..8eddfdb24 100755
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -38,6 +38,7 @@ $button-border-radius: 8px;
   .typo_buttom,
   .icon_buttom {
     color: $text-color;
+    z-index: 1;
   }
 
   &--disabled {
@@ -157,6 +158,11 @@ $button-border-radius: 8px;
     gap: 0;
   }
 
+  &__only-icon--short {
+    padding: 8px;
+    gap: 0;
+  }
+
   &--block,
   &--group {
     width: 100%;
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 7c245f406..b5c8810ca 100755
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -187,6 +187,9 @@ export class Button {
       if (slotText === '' && this.size === 'large') {
         onlyIconElement.classList.add('button__only-icon--large');
       }
+      if (slotText === '' && this.size === 'short') {
+        onlyIconElement.classList.add('button__only-icon--short');
+      }
     }
   }
 
diff --git a/src/index.html b/src/index.html
index 1e1c2a63f..2c5496c68 100644
--- a/src/index.html
+++ b/src/index.html
@@ -24,17 +24,6 @@
 
 <body>
   <bds-test-component></bds-test-component>
-  <bds-grid xxs="12" margin="auto" justify-content="center" height="500px" align-items="center">
-    <bds-breadcrumb
-    items='[
-      {"label": "Página 1", "href": "/pagina-1"},
-      {"label": "Página 2", "href": "/pagina-2"},
-      {"label": "Página 3", "href": "/pagina-3"},
-      {"label": "Página 4", "href": "/pagina-4"},
-      {"label": "Página atual"}
-    ]'
-  ></bds-breadcrumb>
-  </bds-grid>
 
 </body>
 

From 893b7f30d34d6a154b4882402709c328d21e4fe6 Mon Sep 17 00:00:00 2001
From: WillianLomeu <willianlomeu.contato@gmail.com>
Date: Tue, 3 Dec 2024 11:58:24 -0300
Subject: [PATCH 04/11] feat(breadcrumb): removed console log

---
 src/components/breadcrumb/breadcrumb.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx
index 9d3369c28..a8bb6f370 100644
--- a/src/components/breadcrumb/breadcrumb.tsx
+++ b/src/components/breadcrumb/breadcrumb.tsx
@@ -16,7 +16,6 @@ export class Breadcrumb {
       try {
         this.parsedItems = JSON.parse(newValue);
       } catch (error) {
-        console.error('Falha ao analisar items: Certifique-se de que é um JSON válido.', error);
         this.parsedItems = [];
       }
     } else {
@@ -37,8 +36,6 @@ export class Breadcrumb {
   }
 
   render() {
-    console.log('Itens processados:', this.parsedItems);
-
     if (!this.parsedItems || this.parsedItems.length === 0) {
       return <p>Sem itens para exibir no Breadcrumb.</p>;
     }

From 16489488cc2631f953d83fff4b1621e5775b5466 Mon Sep 17 00:00:00 2001
From: WillianLomeu <willianlomeu.contato@gmail.com>
Date: Wed, 4 Dec 2024 14:56:39 -0300
Subject: [PATCH 05/11] feat(template): removed imports

---
 .../portal/sidebar+content.stories.jsx          | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/src/templates/portal/sidebar+content.stories.jsx b/src/templates/portal/sidebar+content.stories.jsx
index 3c7df7640..e27c4404c 100644
--- a/src/templates/portal/sidebar+content.stories.jsx
+++ b/src/templates/portal/sidebar+content.stories.jsx
@@ -1,22 +1,7 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
-  BdsTable,
-  BdsTableHeader,
-  BdsTableRow,
-  BdsTableTh,
-  BdsTableBody,
-  BdsTableCell,
   BdsTypo,
-  BdsPagination,
-  BdsChipTag,
-  BdsCard,
-  BdsCardHeader,
-  BdsCardTitle,
   BdsGrid,
-  BdsCardSubtitle,
-  BdsCardBody,
-  BdsList,
-  BdsListItem,
   BdsSidebar,
   BdsNavTree,
   BdsNavTreeGroup,

From e360bee13d662ce9cf5043b2308f6e346ba08e7d Mon Sep 17 00:00:00 2001
From: Lucas Murta <lucas.murta@take.net>
Date: Wed, 4 Dec 2024 15:20:12 -0300
Subject: [PATCH 06/11] feat(banner): add cypress test on Banner

---
 cypress/component/banner.cy.tsx | 74 +++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 cypress/component/banner.cy.tsx

diff --git a/cypress/component/banner.cy.tsx b/cypress/component/banner.cy.tsx
new file mode 100644
index 000000000..3d1f519e9
--- /dev/null
+++ b/cypress/component/banner.cy.tsx
@@ -0,0 +1,74 @@
+import { BdsBanner, BdsBannerLink, BdsButton } from '../dist/blip-ds-react';
+
+const Banner = () => {
+  const toogle = () => {
+    const bannerElement = document.querySelector('bds-banner');
+    bannerElement.toggle();
+  };
+  return (
+    <>
+      <button onClick={() => toogle()}>Botão anterior</button>
+      <BdsBanner
+        variant="system"
+        buttonClose="true"
+        context="outside"
+        onBdsBannerClose={cy.stub().as('bdsBannerClose')}
+        dtButtonClose="should-button-close"
+      >
+        Instabilidade na plataforma? Não se preocupe, já estamos resolvendo!
+        <BdsBannerLink onBdsBannerLink={cy.stub().as('bdsBannerLink')}>Acompanhe aqui</BdsBannerLink>
+      </BdsBanner>
+    </>
+  );
+};
+
+describe('Teste de Renderização Banner', () => {
+  // Teste de Renderização
+  it('deve renderizar o banner com o variant correto', () => {
+    cy.mount(<Banner />);
+    cy.get('bds-banner').should('have.attr', 'variant', 'system');
+  });
+  it('deve renderizar o banner com o button-close correto', () => {
+    cy.mount(<Banner />);
+    cy.get('bds-banner').should('have.attr', 'button-close', 'true');
+  });
+  it('deve renderizar o banner com o context correto', () => {
+    cy.mount(<Banner />);
+    cy.get('bds-banner').should('have.attr', 'context', 'outside');
+  });
+});
+
+describe('Teste de Eventos Banner', () => {
+  // Teste de Evento onBdsBannerClose
+  it('deve chamar o evento onBdsBannerClose ao digitar', () => {
+    cy.mount(<Banner />);
+    cy.get('bds-banner')
+      .shadow()
+      .find('bds-button-icon[icon="close"]')
+      .shadow()
+      .find('[data-test="should-button-close"]')
+      .click();
+    cy.get('@bdsBannerClose').should('have.been.called');
+  });
+  // Teste de Evento bdsBannerLink
+  it('deve chamar o evento onBdsBannerLink ao digitar', () => {
+    cy.mount(<Banner />);
+    cy.get('bds-banner').find('bds-banner-link').click();
+    cy.get('@bdsBannerLink').should('have.been.called');
+  });
+});
+
+describe('Teste de Acessibilidade banner', () => {
+  // Teste de Acessibilidade método Toogle
+  it('Verificar se o método toggle esta sendo correspondido', () => {
+    cy.mount(<Banner />);
+    cy.get('bds-banner')
+      .shadow()
+      .find('bds-button-icon[icon="close"]')
+      .shadow()
+      .find('[data-test="should-button-close"]')
+      .click();
+    cy.get('button').click();
+    cy.get('bds-banner').should('not.have.class', 'banner--hide');
+  });
+});

From 551a477a35eee287676c418fd4e988e362346395 Mon Sep 17 00:00:00 2001
From: Lucas Murta <lucas.murta@take.net>
Date: Wed, 4 Dec 2024 16:19:24 -0300
Subject: [PATCH 07/11] feat(badge): add cypress test on Badge

---
 cypress/component/badge.cy.tsx | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 cypress/component/badge.cy.tsx

diff --git a/cypress/component/badge.cy.tsx b/cypress/component/badge.cy.tsx
new file mode 100644
index 000000000..dad499378
--- /dev/null
+++ b/cypress/component/badge.cy.tsx
@@ -0,0 +1,29 @@
+import { BdsBadge } from '../dist/blip-ds-react';
+
+const Badge = () => {
+  return (
+    <>
+      <BdsBadge animation={true} shape="circle" color="system" icon="info"></BdsBadge>
+    </>
+  );
+};
+
+describe('Teste de Renderização Badge', () => {
+  // Teste de Renderização
+  it('deve renderizar o Badge com o shape correto', () => {
+    cy.mount(<Badge />);
+    cy.get('bds-badge').should('have.attr', 'shape', 'circle');
+  });
+  it('deve renderizar o Badge com o color correto', () => {
+    cy.mount(<Badge />);
+    cy.get('bds-badge').should('have.attr', 'color', 'system');
+  });
+  it('deve renderizar o Badge com o icon correto', () => {
+    cy.mount(<Badge />);
+    cy.get('bds-badge').should('have.attr', 'icon', 'info');
+  });
+  it('deve renderizar o Badge com o animation correto', () => {
+    cy.mount(<Badge />);
+    cy.get('bds-badge').should('have.attr', 'animation', 'true');
+  });
+});

From 6775c4965eeb7d0b793419b8c193370686c16172 Mon Sep 17 00:00:00 2001
From: Lucas Murta <lucas.murta@take.net>
Date: Wed, 4 Dec 2024 17:01:23 -0300
Subject: [PATCH 08/11] feat(button): add cypress test on Button

---
 cypress/component/button.cy.tsx | 144 ++++++++++++++++++++++++++++++++
 1 file changed, 144 insertions(+)
 create mode 100644 cypress/component/button.cy.tsx

diff --git a/cypress/component/button.cy.tsx b/cypress/component/button.cy.tsx
new file mode 100644
index 000000000..403f0de17
--- /dev/null
+++ b/cypress/component/button.cy.tsx
@@ -0,0 +1,144 @@
+import { BdsButton } from '../dist/blip-ds-react';
+
+const Button = () => {
+  const isActive = () => {
+    const buttonElement = document.querySelector('bds-button');
+    buttonElement.isActive(true);
+  };
+  const setPositionDirection = () => {
+    const buttonElement = document.querySelector('bds-button');
+    buttonElement.setDirection('row');
+    buttonElement.setPosition('first');
+  };
+  const setSize = () => {
+    const buttonElement = document.querySelector('bds-button');
+    buttonElement.setSize('short');
+  };
+  const setColor = () => {
+    const buttonElement = document.querySelector('bds-button');
+    buttonElement.setColor('positive');
+  };
+  const setVariant = () => {
+    const buttonElement = document.querySelector('bds-button');
+    buttonElement.setVariant('outline');
+  };
+  return (
+    <>
+      <button id="isActive" onClick={() => isActive()}>
+        Botão anterior
+      </button>
+      <button id="setPositionDirection" onClick={() => setPositionDirection()}>
+        Botão anterior
+      </button>
+      <button id="setSize" onClick={() => setSize()}>
+        Botão anterior
+      </button>
+      <button id="setColor" onClick={() => setColor()}>
+        Botão anterior
+      </button>
+      <button id="setVariant" onClick={() => setVariant()}>
+        Botão anterior
+      </button>
+      <BdsButton
+        color="primary"
+        iconLeft="edit"
+        iconRight="edit"
+        iconTheme="outline"
+        size="medium"
+        type="button"
+        typeIcon="icon"
+        variant="solid"
+        onBdsClick={cy.stub().as('bdsClick')}
+      >
+        Button
+      </BdsButton>
+    </>
+  );
+};
+
+describe('Teste de Renderização Button', () => {
+  // Teste de Renderização
+  it('deve renderizar o button com o color correto', () => {
+    cy.mount(<Button />);
+    cy.get('bds-button').should('have.attr', 'color', 'primary');
+  });
+  it('deve renderizar o button com o icon-left correto', () => {
+    cy.mount(<Button />);
+    cy.get('bds-button').should('have.attr', 'icon-left', 'edit');
+  });
+  it('deve renderizar o button com o icon-right correto', () => {
+    cy.mount(<Button />);
+    cy.get('bds-button').should('have.attr', 'icon-right', 'edit');
+  });
+  it('deve renderizar o button com o icon-theme correto', () => {
+    cy.mount(<Button />);
+    cy.get('bds-button').should('have.attr', 'icon-theme', 'outline');
+  });
+  it('deve renderizar o button com o size correto', () => {
+    cy.mount(<Button />);
+    cy.get('bds-button').should('have.attr', 'size', 'medium');
+  });
+  it('deve renderizar o button com o type correto', () => {
+    cy.mount(<Button />);
+    cy.get('bds-button').should('have.attr', 'type', 'button');
+  });
+  it('deve renderizar o button com o type-icon correto', () => {
+    cy.mount(<Button />);
+    cy.get('bds-button').should('have.attr', 'type-icon', 'icon');
+  });
+  it('deve renderizar o button com o variant correto', () => {
+    cy.mount(<Button />);
+    cy.get('bds-button').should('have.attr', 'variant', 'solid');
+  });
+});
+
+describe('Teste de Eventos Button', () => {
+  // Teste de Evento bdsClick
+  it('deve chamar o evento onBdsClick ao clicar', () => {
+    cy.mount(<Button />);
+    cy.get('bds-button').shadow().find('button').click();
+    cy.get('@bdsClick').should('have.been.called');
+  });
+});
+
+describe('Teste de Acessibilidade button', () => {
+  // Teste de Acessibilidade com Tab
+  it('deve ser possível navegar para o button usando a tecla Tab', () => {
+    cy.mount(<Button />);
+    cy.get('button[id=setVariant]').first().focus();
+    cy.wait(50);
+    cy.realPress('Tab');
+    cy.wait(50);
+    cy.get('bds-button').should('have.focus');
+  });
+  // Teste de Acessibilidade método isActive
+  it('Verificar se o método isActive esta sendo correspondido', () => {
+    cy.mount(<Button />);
+    cy.get('button[id=isActive]').click();
+    cy.get('bds-button').shadow().find('button').should('have.class', 'button--active');
+  });
+  // Teste de Acessibilidade método setPosition
+  it('Verificar se o método setPosition esta sendo correspondido', () => {
+    cy.mount(<Button />);
+    cy.get('button[id=setPositionDirection]').click();
+    cy.get('bds-button').shadow().find('button').should('have.class', 'button__position--row--first');
+  });
+  // Teste de Acessibilidade método setSize
+  it('Verificar se o método setSize esta sendo correspondido', () => {
+    cy.mount(<Button />);
+    cy.get('button[id=setSize]').click();
+    cy.get('bds-button').shadow().find('button').should('have.class', 'button__size--short');
+  });
+  // Teste de Acessibilidade método setColor
+  it('Verificar se o método setColor esta sendo correspondido', () => {
+    cy.mount(<Button />);
+    cy.get('button[id=setColor]').click();
+    cy.get('bds-button').shadow().find('button').should('have.class', 'button__color--positive');
+  });
+  // Teste de Acessibilidade método setVariant
+  it('Verificar se o método setVariant esta sendo correspondido', () => {
+    cy.mount(<Button />);
+    cy.get('button[id=setVariant]').click();
+    cy.get('bds-button').shadow().find('button').should('have.class', 'button__variant--outline');
+  });
+});

From 26633699ce4bed2232cb7837e42b77211104976b Mon Sep 17 00:00:00 2001
From: Lucas Murta <lucas.murta@take.net>
Date: Thu, 5 Dec 2024 11:12:05 -0300
Subject: [PATCH 09/11] feat(button-group): add cypress test on ButtonGroup

---
 cypress/component/buttonGroup.cy.tsx | 66 ++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 cypress/component/buttonGroup.cy.tsx

diff --git a/cypress/component/buttonGroup.cy.tsx b/cypress/component/buttonGroup.cy.tsx
new file mode 100644
index 000000000..e29b3b37d
--- /dev/null
+++ b/cypress/component/buttonGroup.cy.tsx
@@ -0,0 +1,66 @@
+import { BdsButton, BdsButtonGroup } from '../dist/blip-ds-react';
+
+const ButtonGroup = () => {
+  const activateButton = () => {
+    const buttonElement = document.querySelector('bds-button-group');
+    buttonElement.activateButton(3);
+  };
+  return (
+    <>
+      <button id="activateButton" onClick={() => activateButton()}>
+        Botão anterior
+      </button>
+      <BdsButtonGroup
+        color="primary"
+        direction="column"
+        size="medium"
+        onButtonSelected={cy.stub().as('buttonSelected')}
+      >
+        <BdsButton iconLeft="builder-publish-bot" id="bot-builder-publish"></BdsButton>
+        <BdsButton iconLeft="search" id="bot-search"></BdsButton>
+        <BdsButton iconLeft="email" id="bot-email"></BdsButton>
+        <BdsButton iconLeft="bell" id="bot-bell"></BdsButton>
+        <BdsButton iconLeft="settings-general" id="bot-settings"></BdsButton>
+      </BdsButtonGroup>
+      ;
+    </>
+  );
+};
+
+describe('Teste de Renderização ButtonGroup', () => {
+  // Teste de Renderização
+  it('deve renderizar o button com o color correto', () => {
+    cy.mount(<ButtonGroup />);
+    cy.get('bds-button-group').should('have.attr', 'color', 'primary');
+  });
+  it('deve renderizar o button com o size correto', () => {
+    cy.mount(<ButtonGroup />);
+    cy.get('bds-button-group').should('have.attr', 'size', 'medium');
+  });
+  it('deve renderizar o button com o direction correto', () => {
+    cy.mount(<ButtonGroup />);
+    cy.get('bds-button-group').should('have.attr', 'direction', 'column');
+  });
+});
+
+describe('Teste de Eventos ButtonGroup', () => {
+  // Teste de Evento bdsClick
+  it('deve chamar o evento onButtonSelected ao clicar', () => {
+    cy.mount(<ButtonGroup />);
+    cy.get('bds-button-group').find('bds-button[id="bot-search"]').shadow().find('button').click();
+    cy.get('@buttonSelected').should('have.been.called');
+  });
+});
+
+describe('Teste de Acessibilidade button', () => {
+  // Teste de Acessibilidade método isActive
+  it('Verificar se o método isActive esta sendo correspondido', () => {
+    cy.mount(<ButtonGroup />);
+    cy.get('button[id="activateButton"]').click();
+    cy.get('bds-button-group')
+      .find('bds-button[id="bot-bell"]')
+      .shadow()
+      .find('button')
+      .should('have.class', 'button--active');
+  });
+});

From a71e53e5b14e5fe0c6cecd82be84b29d481e9130 Mon Sep 17 00:00:00 2001
From: Lucas Murta <lucas.murta@take.net>
Date: Thu, 5 Dec 2024 11:46:51 -0300
Subject: [PATCH 10/11] feat(accordion): add cypress test on accordion

---
 cypress/component/accordion.cy.tsx | 106 +++++++++++++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 cypress/component/accordion.cy.tsx

diff --git a/cypress/component/accordion.cy.tsx b/cypress/component/accordion.cy.tsx
new file mode 100644
index 000000000..5ad35ab40
--- /dev/null
+++ b/cypress/component/accordion.cy.tsx
@@ -0,0 +1,106 @@
+import { BdsAccordion, BdsAccordionBody, BdsAccordionHeader, BdsButton, BdsTypo } from '../dist/blip-ds-react';
+
+const Accordion = () => {
+  const paragraph =
+    'Um accordion é uma lista de cabeçalhos empilhados verticalmente que revelam ou ocultam seções de conteúdo associados.';
+  const toggle = () => {
+    const buttonElement = document.querySelector('bds-accordion');
+    buttonElement.toggle();
+  };
+  const open = () => {
+    const buttonElement = document.querySelector('bds-accordion');
+    buttonElement.open();
+  };
+  const close = () => {
+    const buttonElement = document.querySelector('bds-accordion');
+    buttonElement.close();
+  };
+  return (
+    <>
+      <button id="toggle" onClick={() => toggle()}>
+        toggle
+      </button>
+      <button id="open" onClick={() => open()}>
+        open
+      </button>
+      <button id="close" onClick={() => close()}>
+        close
+      </button>
+      <BdsAccordion
+        onBdsToggle={cy.stub().as('bdsToggle')}
+        onBdsAccordionOpen={cy.stub().as('bdsAccordionOpen')}
+        onBdsAccordionClose={cy.stub().as('bdsAccordionClose')}
+      >
+        <BdsAccordionHeader accordionTitle="Título do accordion"></BdsAccordionHeader>
+        <BdsAccordionBody>
+          <BdsTypo variant="fs-16">{paragraph}</BdsTypo>
+        </BdsAccordionBody>
+      </BdsAccordion>
+    </>
+  );
+};
+
+describe('Teste de Eventos Button', () => {
+  // Teste de Evento onBdsToggle
+  it('deve chamar o evento onBdsToggle ao clicar', () => {
+    cy.mount(<Accordion />);
+    cy.get('button[id=toggle]').click();
+    cy.get('@bdsToggle').should('have.been.called');
+  });
+  // Teste de Evento onBdsAccordionOpen
+  it('deve chamar o evento onBdsAccordionOpen ao clicar', () => {
+    cy.mount(<Accordion />);
+    cy.get('button[id=open]').click();
+    cy.get('@bdsAccordionOpen').should('have.been.called');
+  });
+  // Teste de Evento onBdsAccordionClose
+  it('deve chamar o evento onBdsAccordionClose ao clicar', () => {
+    cy.mount(<Accordion />);
+    cy.get('button[id=open]').click();
+    cy.get('button[id=close]').click();
+    cy.get('@bdsAccordionClose').should('have.been.called');
+  });
+});
+
+describe('Teste de Acessibilidade button', () => {
+  // Teste de Acessibilidade com Tab
+  it('deve ser possível navegar para o button usando a tecla Tab', () => {
+    cy.mount(<Accordion />);
+    cy.get('button[id=close]').first().focus();
+    cy.wait(50);
+    cy.realPress('Tab');
+    cy.wait(50);
+    cy.get('bds-accordion').find('bds-accordion-header').shadow().find('bds-icon.accButton').should('have.focus');
+  });
+  // Teste de Acessibilidade método toggle
+  it('Verificar se o método toggle esta sendo correspondido', () => {
+    cy.mount(<Accordion />);
+    cy.get('button[id=toggle]').click();
+    cy.get('bds-accordion')
+      .find('bds-accordion-body')
+      .shadow()
+      .find('.accordion_body')
+      .should('have.class', 'accordion_body_isOpen');
+  });
+  // Teste de Acessibilidade método open
+  it('Verificar se o método open esta sendo correspondido', () => {
+    cy.mount(<Accordion />);
+    cy.get('button[id=open]').click();
+    cy.get('bds-accordion')
+      .find('bds-accordion-body')
+      .shadow()
+      .find('.accordion_body')
+      .should('have.class', 'accordion_body_isOpen');
+  });
+  // Teste de Acessibilidade método close
+  it('Verificar se o método close esta sendo correspondido', () => {
+    cy.mount(<Accordion />);
+    cy.get('button[id=open]').click();
+    cy.get('button[id=close]').click();
+    cy.get('bds-accordion')
+      .find('bds-accordion-body')
+      .shadow()
+      .find('.accordion_body')
+      .should('not.have.class', 'accordion_body_isOpen');
+  });
+});

From 5158b09783bafee3f5e730f8a47f4350107e26fe Mon Sep 17 00:00:00 2001
From: Lucas Murta <lucas.murta@take.net>
Date: Thu, 5 Dec 2024 12:06:56 -0300
Subject: [PATCH 11/11] feat(accordion-group): add cypress test on accordion

---
 cypress/component/accordionGroup.cy.tsx | 90 +++++++++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 cypress/component/accordionGroup.cy.tsx

diff --git a/cypress/component/accordionGroup.cy.tsx b/cypress/component/accordionGroup.cy.tsx
new file mode 100644
index 000000000..2b3c1d9ae
--- /dev/null
+++ b/cypress/component/accordionGroup.cy.tsx
@@ -0,0 +1,90 @@
+import {
+  BdsAccordion,
+  BdsAccordionBody,
+  BdsAccordionGroup,
+  BdsAccordionHeader,
+  BdsButton,
+  BdsTypo,
+} from '../dist/blip-ds-react';
+
+const AccordionGroup = () => {
+  const paragraph =
+    'Um accordion é uma lista de cabeçalhos empilhados verticalmente que revelam ou ocultam seções de conteúdo associados.';
+
+  const openAll = () => {
+    const buttonElement = document.querySelector('bds-accordion-group');
+    buttonElement.openAll();
+  };
+  const closeAll = () => {
+    const buttonElement = document.querySelector('bds-accordion-group');
+    buttonElement.closeAll();
+  };
+  return (
+    <>
+      <button id="openAll" onClick={() => openAll()}>
+        openAll
+      </button>
+      <button id="closeAll" onClick={() => closeAll()}>
+        closeAll
+      </button>
+      <BdsAccordionGroup
+        onBdsAccordionOpenAll={cy.stub().as('bdsAccordionOpenAll')}
+        onBdsAccordionCloseAll={cy.stub().as('bdsAccordionCloseAll')}
+        collapse="multiple"
+      >
+        <BdsAccordion>
+          <BdsAccordionHeader accordion-title="Título do accordion"></BdsAccordionHeader>
+          <BdsAccordionBody>
+            <BdsTypo variant="fs-16">{paragraph}</BdsTypo>
+          </BdsAccordionBody>
+        </BdsAccordion>
+        <BdsAccordion>
+          <BdsAccordionHeader accordion-title="Título do accordion"></BdsAccordionHeader>
+          <BdsAccordionBody>
+            <BdsTypo variant="fs-16">{paragraph}</BdsTypo>
+          </BdsAccordionBody>
+        </BdsAccordion>
+      </BdsAccordionGroup>
+    </>
+  );
+};
+
+describe('Teste de Eventos Button', () => {
+  // Teste de Evento onBdsAccordionOpen
+  it('deve chamar o evento onBdsAccordionOpen ao clicar', () => {
+    cy.mount(<AccordionGroup />);
+    cy.get('button[id=openAll]').click();
+    cy.get('@bdsAccordionOpenAll').should('have.been.called');
+  });
+  // Teste de Evento onBdsAccordionClose
+  it('deve chamar o evento onBdsAccordionClose ao clicar', () => {
+    cy.mount(<AccordionGroup />);
+    cy.get('button[id=openAll]').click();
+    cy.get('button[id=closeAll]').click();
+    cy.get('@bdsAccordionCloseAll').should('have.been.called');
+  });
+});
+
+describe('Teste de Acessibilidade button', () => {
+  // Teste de Acessibilidade método openAll
+  it('Verificar se o método openAll esta sendo correspondido', () => {
+    cy.mount(<AccordionGroup />);
+    cy.get('button[id=openAll]').click();
+    cy.get('bds-accordion')
+      .find('bds-accordion-body')
+      .shadow()
+      .find('.accordion_body')
+      .should('have.class', 'accordion_body_isOpen');
+  });
+  // Teste de Acessibilidade método closeAll
+  it('Verificar se o método closeAll esta sendo correspondido', () => {
+    cy.mount(<AccordionGroup />);
+    cy.get('button[id=openAll]').click();
+    cy.get('button[id=closeAll]').click();
+    cy.get('bds-accordion')
+      .find('bds-accordion-body')
+      .shadow()
+      .find('.accordion_body')
+      .should('not.have.class', 'accordion_body_isOpen');
+  });
+});