Skip to content

Commit 17780f0

Browse files
arielsrodriguezarielsrodriguez
authored
Merge pull request #74 from dd3tech/feat/PD-1726-filter-bar-button-doc
Feat: Documentation componente filter-bar-button was added
2 parents b111529 + df94bd0 commit 17780f0

5 files changed

Lines changed: 348 additions & 60 deletions

File tree

‎.github/workflows/format.yml‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
name: Format
22

33
on:
4-
push:
5-
branches:
6-
- main
7-
pull_request:
8-
branches: ['main']
4+
push:
5+
branches:
6+
- main
7+
pull_request:
8+
branches: ['main']
99

1010
jobs:
11-
format:
12-
runs-on: ubuntu-latest
13-
steps:
14-
- uses: actions/checkout@v2
15-
- uses: actions/setup-node@v2
16-
with:
17-
node-version: '16'
18-
cache: npm
19-
- run: npm install
11+
format:
12+
runs-on: ubuntu-latest
13+
steps:
14+
- uses: actions/checkout@v3
15+
- uses: actions/setup-node@v3
16+
with:
17+
node-version: '16'
18+
cache: npm
19+
- run: npm install
2020

21-
- name: Formatting code
22-
run: npm run format
21+
- name: Formatting code
22+
run: npm run format
2323

24-
- name: Commit changes
25-
uses: stefanzweifel/git-auto-commit-action@v4
26-
with:
27-
commit_message: '[ci]: format code'
28-
branch: ${{ github.head_ref }}
24+
- name: Commit changes
25+
uses: stefanzweifel/git-auto-commit-action@v4
26+
with:
27+
commit_message: '[ci]: format code'
28+
branch: ${{ github.head_ref }}

‎docs/buttons/filter-bar-button.mdx‎

Lines changed: 281 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,281 @@
1+
---
2+
product: dd360-ds
3+
title: React FilterBarButton component
4+
components: FilterBarButton
5+
---
6+
import { DynamicHeroIcon } from 'dd360-ds'
7+
8+
9+
<br id='top' />
10+
<br />
11+
12+
<Label>Buttons</Label>
13+
14+
# <HeaderDocCustom title="Filter Bar Button" pathUrl="buttons-filter-bar-button" />
15+
16+
The FilterBarButton component allows you to create interactive filter buttons with a customizable popover, ideal for implementing filters and actions in web applications.
17+
18+
<br />
19+
20+
##### <span name="floating-nav">Imports</span>
21+
22+
The first alternative is recommended as it can reduce the application bundle
23+
24+
<WindowEditor codeString="import FilterBarButton from 'dd360-ds/FilterBarButton'" />
25+
<WindowEditor codeString="import { FilterBarButton } from 'dd360-ds'" />
26+
27+
##### <span name="floating-nav">Usage</span>
28+
29+
The FilterBarButton component requires at least the `label` and `valueBadge` properties. The popover will be displayed when clicking the button.
30+
31+
<Playground>
32+
<FilterBarButton
33+
label="Filter"
34+
valueBadge={3}
35+
/>
36+
</Playground>
37+
38+
The following code snippet shows how to use the FilterBarButton component:
39+
40+
<WindowEditor
41+
codeString={`import { FilterBarButton } from 'dd360-ds'
42+
43+
<FilterBarButton
44+
label="Filter"
45+
valueBadge={3}
46+
/>
47+
`}/>
48+
49+
<br />
50+
51+
##### <span name="floating-nav">IconLeft</span>
52+
53+
The <TagDocs text='IconLeft' /> prop allows you to add an icon to the left side of the filter button.
54+
55+
<Playground>
56+
<FilterBarButton
57+
label="Filter"
58+
valueBadge={3}
59+
iconLeft={<DynamicHeroIcon icon="ChevronDownIcon" className="w-4 h-4" />}
60+
/>
61+
</Playground>
62+
63+
The following code snippet shows how to use the FilterBarButton component:
64+
65+
<WindowEditor
66+
codeString={`import { FilterBarButton } from 'dd360-ds'
67+
68+
<FilterBarButton
69+
label="Filter"
70+
valueBadge={3}
71+
iconLeft={<DynamicHeroIcon icon="ChevronDownIcon" className="w-4 h-4" />}
72+
/>
73+
`}/>
74+
75+
<br />
76+
77+
##### <span name="floating-nav">IconRight</span>
78+
79+
The <TagDocs text='iconRight' /> prop allows you to add an icon to the right side of the filter button.
80+
81+
<Playground>
82+
<FilterBarButton
83+
label="Filter"
84+
valueBadge={3}
85+
iconRight={<DynamicHeroIcon icon="ChevronDownIcon" className="w-4 h-4" />}
86+
/>
87+
</Playground>
88+
89+
The following code snippet shows how to use the FilterBarButton component:
90+
91+
<WindowEditor
92+
codeString={`import { FilterBarButton } from 'dd360-ds'
93+
94+
<FilterBarButton
95+
label="Filter"
96+
valueBadge={3}
97+
iconRight={<DynamicHeroIcon icon="ChevronDownIcon" className="w-4 h-4" />}
98+
/>
99+
`}/>
100+
101+
<br />
102+
103+
##### <span name="floating-nav">TitlePopover</span>
104+
105+
The <TagDocs text='titlePopover' /> prop allows you to customize the title displayed in the filter button's popover.
106+
107+
<Playground>
108+
<FilterBarButton
109+
label="Filter"
110+
valueBadge={3}
111+
titlePopover='Title Popover'
112+
/>
113+
</Playground>
114+
115+
The following code snippet shows how to use the FilterBarButton component:
116+
117+
<WindowEditor
118+
codeString={`import { FilterBarButton } from 'dd360-ds'
119+
120+
<FilterBarButton
121+
label="Filter"
122+
valueBadge={3}
123+
titlePopover='Title Popover'
124+
/>
125+
`}/>
126+
127+
<br />
128+
129+
##### <span name="floating-nav">ChildrenPopover</span>
130+
131+
The <TagDocs text='childrenPopover' /> prop allows you to add custom content inside the filter button's popover.
132+
133+
<Playground>
134+
<FilterBarButton
135+
label="Filter"
136+
valueBadge={3}
137+
childrenPopover={<div className='p-6'>Children Popover</div>}
138+
/>
139+
</Playground>
140+
141+
The following code snippet shows how to use the FilterBarButton component:
142+
143+
<WindowEditor
144+
codeString={`import { FilterBarButton } from 'dd360-ds'
145+
146+
<FilterBarButton
147+
label="Filter"
148+
valueBadge={3}
149+
childrenPopover={<div className='p-6'>Children Popover</div>}
150+
/>
151+
`}/>
152+
153+
<br />
154+
155+
##### <span name="floating-nav">ClassNamePopover</span>
156+
157+
The <TagDocs text='classNamePopover' /> prop allows you to apply custom CSS classes to the filter button's popover.
158+
159+
<Playground>
160+
<FilterBarButton
161+
label="Filter"
162+
valueBadge={3}
163+
classNamePopover='text-blue-300'
164+
childrenPopover={<div className='p-6'>Children Popover</div>}
165+
/>
166+
</Playground>
167+
168+
The following code snippet shows how to use the FilterBarButton component:
169+
170+
<WindowEditor
171+
codeString={`import { FilterBarButton } from 'dd360-ds'
172+
173+
<FilterBarButton
174+
label="Filter"
175+
valueBadge={3}
176+
classNamePopover='text-blue-300'
177+
childrenPopover={<div className='p-6'>Children Popover</div>}
178+
/>
179+
`}/>
180+
181+
<br />
182+
183+
##### <span name="floating-nav">SecondaryButton</span>
184+
185+
The <TagDocs text='secondaryButton' /> prop allows you to configure a secondary button in the popover with its label and click handler.
186+
187+
<Playground>
188+
<FilterBarButton
189+
label="Filter"
190+
valueBadge={3}
191+
secondaryButton={{label:'Cancel', onClick:()=>{alert('Cancel')}}}
192+
/>
193+
</Playground>
194+
195+
The following code snippet shows how to use the FilterBarButton component:
196+
197+
<WindowEditor
198+
codeString={`import { FilterBarButton } from 'dd360-ds'
199+
200+
<FilterBarButton
201+
label="Filter"
202+
valueBadge={3}
203+
secondaryButton={{label:'Cancel', onClick:()=>{alert('Cancel')}}}
204+
/>
205+
`}/>
206+
207+
<br />
208+
209+
##### <span name="floating-nav">PrimaryButton</span>
210+
211+
The <TagDocs text='primaryButton' /> prop allows you to configure a primary button in the popover with its label and click handler.
212+
213+
<Playground>
214+
<FilterBarButton
215+
label="Filter"
216+
valueBadge={3}
217+
primaryButton={{label:'Submit', onClick:()=>{alert('Submit')}}}
218+
/>
219+
</Playground>
220+
221+
The following code snippet shows how to use the FilterBarButton component:
222+
223+
<WindowEditor
224+
codeString={`import { FilterBarButton } from 'dd360-ds'
225+
226+
<FilterBarButton
227+
label="Filter"
228+
valueBadge={3}
229+
primaryButton={{label:'Submit', onClick:()=>{alert('Submit')}}}
230+
/>
231+
`}/>
232+
233+
<br />
234+
235+
##### <span name="floating-nav">PrincipalButton</span>
236+
237+
The <TagDocs text='principalButton' /> prop allows you to configure the behavior of the main button that triggers the popover.
238+
239+
<Playground>
240+
<FilterBarButton
241+
label="Filter"
242+
valueBadge={3}
243+
principalButton={{onClick:()=>{alert('Active Popover')}}}
244+
/>
245+
</Playground>
246+
247+
The following code snippet shows how to use the FilterBarButton component:
248+
249+
<WindowEditor
250+
codeString={`import { FilterBarButton } from 'dd360-ds'
251+
252+
<FilterBarButton
253+
label="Filter"
254+
valueBadge={3}
255+
principalButton={{ onClick:()=>{alert('Active Popover')}}}
256+
/>
257+
`}/>
258+
259+
<br />
260+
261+
262+
##### <span name="floating-nav">API Reference</span>
263+
264+
<CustomTableDocs
265+
dataTable={[
266+
{ title: 'label', default: null, types: ['string'], required: true },
267+
{ title: 'valueBadge', default: null, types: ['number'] ,required: true},
268+
{ title: 'iconLeft', default: null, types: ['ReactNode'] },
269+
{ title: 'iconRight', default: null, types: ['ReactNode'] },
270+
{ title: 'titlePopover', default: 'Title', types: ['string'] },
271+
{ title: 'childrenPopover', default: null, types: ['ReactNode'] },
272+
{ title: 'classNamePopover', default: null, types: ['string'] },
273+
{ title: 'secondaryButton', default: null, types: ['IButtons'] },
274+
{ title: 'primaryButton', default: null, types: ['IButtons'] },
275+
{ title: 'principalButton', default: null, types: ['IButtons'] }
276+
]}
277+
/>
278+
279+
Note: This documentation assumes that the user has basic knowledge of React and how to use components in React applications.
280+
281+
<BackAndForwardController />

0 commit comments

Comments
 (0)