From 04fb20fa0da5575eb96603c2749523eb5030fa3d Mon Sep 17 00:00:00 2001
From: arielsrodriguez <ariel.rodriguez@dd3tech.mx>
Date: Mon, 21 Apr 2025 23:46:18 -0300
Subject: [PATCH 1/2] feat: documentation componente filter-bar-button was
 added

---
 docs/buttons/filter-bar-button.mdx    | 281 ++++++++++++++++++++++++++
 package-lock.json                     |  79 ++++----
 package.json                          |   2 +-
 src/components/Layout/SideBarDocs.tsx |   4 +
 4 files changed, 327 insertions(+), 39 deletions(-)
 create mode 100644 docs/buttons/filter-bar-button.mdx

diff --git a/docs/buttons/filter-bar-button.mdx b/docs/buttons/filter-bar-button.mdx
new file mode 100644
index 0000000..4efd20c
--- /dev/null
+++ b/docs/buttons/filter-bar-button.mdx
@@ -0,0 +1,281 @@
+---
+product: dd360-ds
+title: React FilterBarButton component
+components: FilterBarButton
+---
+
+import { DynamicHeroIcon } from 'dd360-ds'
+
+<br id='top' />
+<br />
+
+<Label>Buttons</Label>
+
+# <HeaderDocCustom title="Filter Bar Button" pathUrl="buttons-filter-bar-button" />
+
+The FilterBarButton component allows you to create interactive filter buttons with a customizable popover, ideal for implementing filters and actions in web applications.
+
+<br />
+
+##### <span name="floating-nav">Imports</span>
+
+The first alternative is recommended as it can reduce the application bundle
+
+<WindowEditor codeString="import FilterBarButton from 'dd360-ds/FilterBarButton'" />
+<WindowEditor codeString="import { FilterBarButton } from 'dd360-ds'" />
+
+##### <span name="floating-nav">Usage</span>
+
+The FilterBarButton component requires at least the `label` and `valueBadge` properties. The popover will be displayed when clicking the button.
+
+<Playground>
+  <FilterBarButton
+    label="Filter"
+    valueBadge={3}
+  />
+</Playground>
+
+The following code snippet shows how to use the FilterBarButton component:
+
+<WindowEditor
+    codeString={`import { FilterBarButton } from 'dd360-ds'
+
+<FilterBarButton
+  label="Filter"
+  valueBadge={3}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">IconLeft</span>
+
+The <TagDocs text='IconLeft' /> prop allows you to add an icon to the left side of the filter button.
+
+<Playground>
+  <FilterBarButton
+    label="Filter"
+    valueBadge={3}
+    iconLeft={<DynamicHeroIcon icon="ChevronDownIcon" className="w-4 h-4" />}
+  />
+</Playground>
+
+The following code snippet shows how to use the FilterBarButton component:
+
+<WindowEditor
+    codeString={`import { FilterBarButton } from 'dd360-ds'
+
+<FilterBarButton
+  label="Filter"
+  valueBadge={3}
+  iconLeft={<DynamicHeroIcon icon="ChevronDownIcon" className="w-4 h-4" />}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">IconRight</span>
+
+The <TagDocs text='iconRight' /> prop allows you to add an icon to the right side of the filter button.
+
+<Playground>
+  <FilterBarButton
+    label="Filter"
+    valueBadge={3}
+    iconRight={<DynamicHeroIcon icon="ChevronDownIcon" className="w-4 h-4" />}
+  />
+</Playground>
+
+The following code snippet shows how to use the FilterBarButton component:
+
+<WindowEditor
+    codeString={`import { FilterBarButton } from 'dd360-ds'
+
+<FilterBarButton
+  label="Filter"
+  valueBadge={3}
+  iconRight={<DynamicHeroIcon icon="ChevronDownIcon" className="w-4 h-4" />}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">TitlePopover</span>
+
+The <TagDocs text='titlePopover' /> prop allows you to customize the title displayed in the filter button's popover.
+
+<Playground>
+  <FilterBarButton
+    label="Filter"
+    valueBadge={3}
+    titlePopover='Title Popover'
+  />
+</Playground>
+
+The following code snippet shows how to use the FilterBarButton component:
+
+<WindowEditor
+    codeString={`import { FilterBarButton } from 'dd360-ds'
+
+<FilterBarButton
+  label="Filter"
+  valueBadge={3}
+  titlePopover='Title Popover'
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">ChildrenPopover</span>
+
+The <TagDocs text='childrenPopover' /> prop allows you to add custom content inside the filter button's popover.
+
+<Playground>
+  <FilterBarButton
+    label="Filter"
+    valueBadge={3}
+    childrenPopover={<div className='p-6'>Children Popover</div>}
+  />
+</Playground>
+
+The following code snippet shows how to use the FilterBarButton component:
+
+<WindowEditor
+    codeString={`import { FilterBarButton } from 'dd360-ds'
+
+<FilterBarButton
+  label="Filter"
+  valueBadge={3}
+  childrenPopover={<div className='p-6'>Children Popover</div>}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">ClassNamePopover</span>
+
+The <TagDocs text='classNamePopover' /> prop allows you to apply custom CSS classes to the filter button's popover.
+
+<Playground>
+  <FilterBarButton
+    label="Filter"
+    valueBadge={3}
+    classNamePopover='text-blue-300'
+    childrenPopover={<div className='p-6'>Children Popover</div>}
+  />
+</Playground>
+
+The following code snippet shows how to use the FilterBarButton component:
+
+<WindowEditor
+    codeString={`import { FilterBarButton } from 'dd360-ds'
+
+<FilterBarButton
+  label="Filter"
+  valueBadge={3}
+  classNamePopover='text-blue-300'
+  childrenPopover={<div className='p-6'>Children Popover</div>}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">SecondaryButton</span>
+
+The <TagDocs text='secondaryButton' /> prop allows you to configure a secondary button in the popover with its label and click handler.
+
+<Playground>
+  <FilterBarButton
+    label="Filter"
+    valueBadge={3}
+    secondaryButton={{label:'Cancel', onClick:()=>{alert('Cancel')}}}
+  />
+</Playground>
+
+The following code snippet shows how to use the FilterBarButton component:
+
+<WindowEditor
+    codeString={`import { FilterBarButton } from 'dd360-ds'
+
+<FilterBarButton
+  label="Filter"
+  valueBadge={3}
+  secondaryButton={{label:'Cancel', onClick:()=>{alert('Cancel')}}}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">PrimaryButton</span>
+
+The <TagDocs text='primaryButton' /> prop allows you to configure a primary button in the popover with its label and click handler.
+
+<Playground>
+  <FilterBarButton
+    label="Filter"
+    valueBadge={3}
+    primaryButton={{label:'Submit', onClick:()=>{alert('Submit')}}}
+  />
+</Playground>
+
+The following code snippet shows how to use the FilterBarButton component:
+
+<WindowEditor
+    codeString={`import { FilterBarButton } from 'dd360-ds'
+
+<FilterBarButton
+  label="Filter"
+  valueBadge={3}
+  primaryButton={{label:'Submit', onClick:()=>{alert('Submit')}}}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">PrincipalButton</span>
+
+The <TagDocs text='principalButton' /> prop allows you to configure the behavior of the main button that triggers the popover.
+
+<Playground>
+  <FilterBarButton
+    label="Filter"
+    valueBadge={3}
+    principalButton={{onClick:()=>{alert('Active Popover')}}}
+  />
+</Playground>
+
+The following code snippet shows how to use the FilterBarButton component:
+
+<WindowEditor
+    codeString={`import { FilterBarButton } from 'dd360-ds'
+
+<FilterBarButton
+  label="Filter"
+  valueBadge={3}
+  principalButton={{ onClick:()=>{alert('Active Popover')}}}
+/>
+`}/>
+
+<br />
+
+
+##### <span name="floating-nav">API Reference</span>
+
+<CustomTableDocs
+  dataTable={[
+    { title: 'label', default: null, types: ['string'], required: true },
+    { title: 'valueBadge', default: null, types: ['number'] ,required: true},
+    { title: 'iconLeft', default: null, types: ['ReactNode'] },
+    { title: 'iconRight', default: null, types: ['ReactNode'] },
+    { title: 'titlePopover', default: 'Title', types: ['string'] },
+    { title: 'childrenPopover', default: null, types: ['ReactNode'] },
+    { title: 'classNamePopover', default: null, types: ['string'] },
+    { title: 'secondaryButton', default: null, types: ['IButtons'] },
+    { title: 'primaryButton', default: null, types: ['IButtons'] },
+    { title: 'principalButton', default: null, types: ['IButtons'] }
+  ]}
+/>
+
+Note: This documentation assumes that the user has basic knowledge of React and how to use components in React applications.
+
+<BackAndForwardController /> 
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 7ac48c6..4f579a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@algolia/autocomplete-core": "^1.8.3",
         "@docsearch/react": "^3.5.1",
         "@vercel/analytics": "^1.0.1",
-        "dd360-ds": "6.35.1",
+        "dd360-ds": "6.38.0",
         "dd360-utils": "18.1.0",
         "gray-matter": "^4.0.3",
         "i18next": "^22.4.9",
@@ -616,9 +616,10 @@
       }
     },
     "node_modules/@popperjs/core": {
-      "version": "2.11.7",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
-      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -1525,19 +1526,19 @@
       "dev": true
     },
     "node_modules/dd360-ds": {
-      "version": "6.35.1",
-      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.35.1.tgz",
-      "integrity": "sha512-tzo2gk3fLI1D44uCv3FM8KbBCGbLutdJWpKETxROPwD53EGzPJJVvAvk+ah/zpLi8fo/P9l1oI8LoqY102c4OQ==",
+      "version": "6.38.0",
+      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.38.0.tgz",
+      "integrity": "sha512-iFnUotZAaHR+zbKwXTrpL1Gt2rmOTD4yw8OB0Rej3PZ/O5BQlAMRVU5AS/ISur5bilR2XtFxPbv0wMcc//AcVQ==",
       "license": "MIT",
       "dependencies": {
-        "@heroicons/react": "^1.0.5",
-        "@popperjs/core": "2.11.7",
-        "dd360-utils": "^1.0.12",
-        "react-circular-progressbar": "^2.1.0",
-        "react-currency-input-field": "^3.6.11"
+        "@heroicons/react": "^1.0.6",
+        "@popperjs/core": "2.11.8",
+        "dd360-utils": "^1.0.18",
+        "react-circular-progressbar": "^2.2.0",
+        "react-currency-input-field": "^3.10.0"
       },
       "engines": {
-        "node": ">=16",
+        "node": ">=20",
         "npm": ">=7"
       },
       "peerDependencies": {
@@ -5560,19 +5561,21 @@
       }
     },
     "node_modules/react-circular-progressbar": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.1.0.tgz",
-      "integrity": "sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.2.0.tgz",
+      "integrity": "sha512-cgyqEHOzB0nWMZjKfWN3MfSa1LV3OatcDjPz68lchXQUEiBD5O1WsAtoVK4/DSL0B4USR//cTdok4zCBkq8X5g==",
+      "license": "MIT",
       "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+        "react": ">=0.14.0"
       }
     },
     "node_modules/react-currency-input-field": {
-      "version": "3.6.14",
-      "resolved": "https://registry.npmjs.org/react-currency-input-field/-/react-currency-input-field-3.6.14.tgz",
-      "integrity": "sha512-pUM4oK1KkUjjcFH7t6GksbuYwGpNhX3We2l41V9PIyJjm1HVlJGbKNksr0PNXGsQZqXDIKBJxL3TAbTS4cbKgg==",
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/react-currency-input-field/-/react-currency-input-field-3.10.0.tgz",
+      "integrity": "sha512-GRmZogHh1e1LrmgXg/fKHSuRLYUnj/c/AumfvfuDMA0UX1mDR6u2NR0fzDemRdq4tNHNLucJeJ2OKCr3ehqyDA==",
+      "license": "MIT",
       "peerDependencies": {
-        "react": "^16.9.0 || ^17.0.0 || ^18.0.0"
+        "react": "^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/react-dom": {
@@ -7354,9 +7357,9 @@
       }
     },
     "@popperjs/core": {
-      "version": "2.11.7",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
-      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw=="
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
     },
     "@rushstack/eslint-patch": {
       "version": "1.2.0",
@@ -8006,15 +8009,15 @@
       "dev": true
     },
     "dd360-ds": {
-      "version": "6.35.1",
-      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.35.1.tgz",
-      "integrity": "sha512-tzo2gk3fLI1D44uCv3FM8KbBCGbLutdJWpKETxROPwD53EGzPJJVvAvk+ah/zpLi8fo/P9l1oI8LoqY102c4OQ==",
+      "version": "6.38.0",
+      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.38.0.tgz",
+      "integrity": "sha512-iFnUotZAaHR+zbKwXTrpL1Gt2rmOTD4yw8OB0Rej3PZ/O5BQlAMRVU5AS/ISur5bilR2XtFxPbv0wMcc//AcVQ==",
       "requires": {
-        "@heroicons/react": "^1.0.5",
-        "@popperjs/core": "2.11.7",
-        "dd360-utils": "^1.0.12",
-        "react-circular-progressbar": "^2.1.0",
-        "react-currency-input-field": "^3.6.11"
+        "@heroicons/react": "^1.0.6",
+        "@popperjs/core": "2.11.8",
+        "dd360-utils": "^1.0.18",
+        "react-circular-progressbar": "^2.2.0",
+        "react-currency-input-field": "^3.10.0"
       },
       "dependencies": {
         "dd360-utils": {
@@ -10718,15 +10721,15 @@
       }
     },
     "react-circular-progressbar": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.1.0.tgz",
-      "integrity": "sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.2.0.tgz",
+      "integrity": "sha512-cgyqEHOzB0nWMZjKfWN3MfSa1LV3OatcDjPz68lchXQUEiBD5O1WsAtoVK4/DSL0B4USR//cTdok4zCBkq8X5g==",
       "requires": {}
     },
     "react-currency-input-field": {
-      "version": "3.6.14",
-      "resolved": "https://registry.npmjs.org/react-currency-input-field/-/react-currency-input-field-3.6.14.tgz",
-      "integrity": "sha512-pUM4oK1KkUjjcFH7t6GksbuYwGpNhX3We2l41V9PIyJjm1HVlJGbKNksr0PNXGsQZqXDIKBJxL3TAbTS4cbKgg==",
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/react-currency-input-field/-/react-currency-input-field-3.10.0.tgz",
+      "integrity": "sha512-GRmZogHh1e1LrmgXg/fKHSuRLYUnj/c/AumfvfuDMA0UX1mDR6u2NR0fzDemRdq4tNHNLucJeJ2OKCr3ehqyDA==",
       "requires": {}
     },
     "react-dom": {
diff --git a/package.json b/package.json
index 99354d9..9f5a292 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "@algolia/autocomplete-core": "^1.8.3",
     "@docsearch/react": "^3.5.1",
     "@vercel/analytics": "^1.0.1",
-    "dd360-ds": "6.35.1",
+    "dd360-ds": "6.38.0",
     "dd360-utils": "18.1.0",
     "gray-matter": "^4.0.3",
     "i18next": "^22.4.9",
diff --git a/src/components/Layout/SideBarDocs.tsx b/src/components/Layout/SideBarDocs.tsx
index 8e97637..6e4447f 100644
--- a/src/components/Layout/SideBarDocs.tsx
+++ b/src/components/Layout/SideBarDocs.tsx
@@ -94,6 +94,10 @@ export const components: ComponentObjectProps = {
       {
         label: 'Radio Group',
         pathname: 'button-radio-group'
+      },
+      {
+        label: 'Filter Bar Button',
+        pathname: 'filter-bar-button'
       }
     ]
   },

From df94bd0f79331a83ce2f5f1aac69401e07a3ed3b Mon Sep 17 00:00:00 2001
From: arielsrodriguez <ariel.rodriguez@dd3tech.mx>
Date: Tue, 22 Apr 2025 12:01:24 -0300
Subject: [PATCH 2/2] feat: update workflow github

---
 .github/workflows/format.yml       | 42 +++++++++++++++---------------
 docs/buttons/filter-bar-button.mdx |  2 +-
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml
index 393b14f..908aa3c 100644
--- a/.github/workflows/format.yml
+++ b/.github/workflows/format.yml
@@ -1,28 +1,28 @@
 name: Format
 
 on:
-    push:
-        branches:
-            - main
-    pull_request:
-        branches: ['main']
+  push:
+    branches:
+      - main
+  pull_request:
+    branches: ['main']
 
 jobs:
-    format:
-        runs-on: ubuntu-latest
-        steps:
-            - uses: actions/checkout@v2
-            - uses: actions/setup-node@v2
-              with:
-                  node-version: '16'
-                  cache: npm
-            - run: npm install
+  format:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+          cache: npm
+      - run: npm install
 
-            - name: Formatting code
-              run: npm run format
+      - name: Formatting code
+        run: npm run format
 
-            - name: Commit changes
-              uses: stefanzweifel/git-auto-commit-action@v4
-              with:
-                  commit_message: '[ci]: format code'
-                  branch: ${{ github.head_ref }}
+      - name: Commit changes
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: '[ci]: format code'
+          branch: ${{ github.head_ref }}
diff --git a/docs/buttons/filter-bar-button.mdx b/docs/buttons/filter-bar-button.mdx
index 4efd20c..b1224e7 100644
--- a/docs/buttons/filter-bar-button.mdx
+++ b/docs/buttons/filter-bar-button.mdx
@@ -3,9 +3,9 @@ product: dd360-ds
 title: React FilterBarButton component
 components: FilterBarButton
 ---
-
 import { DynamicHeroIcon } from 'dd360-ds'
 
+
 <br id='top' />
 <br />