Skip to content

Commit 79ed28f

Browse files
genixxaviergenixxavier
committed
Feat: Add phase documentation
1 parent b9af491 commit 79ed28f

File tree

8 files changed

+406
-8
lines changed

8 files changed

+406
-8
lines changed

‎docs/components/phase.mdx

Lines changed: 346 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,346 @@
1+
---
2+
product: dd360-ds
3+
title: React Phase component
4+
components: Phase
5+
---
6+
7+
<br id='top' />
8+
<br />
9+
10+
<Label>Components</Label>
11+
12+
# <HeaderDocCustom title="Phase" pathUrl="components-phase--phase" />
13+
14+
The Phase component is a user interface component that is used to display the status of a process. This component has three variants: <TagDocs text='phases' />, <TagDocs text='status' /> and <TagDocs text='quarters' />
15+
16+
<br />
17+
<br />
18+
##### <span name="floating-nav">Imports</span>
19+
20+
The first alternative is recommended since they can reduce the application bundle
21+
22+
<WindowEditor codeString="import Phase from 'dd360-ds/Phase'" />
23+
<WindowEditor codeString="import { Phase } from 'dd360-ds'" />
24+
25+
<br />
26+
##### <span name="floating-nav">Usage</span>
27+
28+
Use the Phase component as shown below:
29+
30+
<Playground className="gap-y-2">
31+
<PhaseCustom icon="check" className="w-44 h-40" status="completed" numberPhase={1} textTag="Completed" />
32+
</Playground>
33+
34+
The code snippet below shows how to use the Phase component:
35+
36+
<WindowEditor
37+
codeString={`import { Phase } from 'dd360-ds'
38+
39+
<Phase
40+
className="w-44 h-40"
41+
icon={CheckIcon}
42+
status="completed"
43+
textTag="Completed"
44+
numberPhase={1}
45+
/>`}
46+
/>
47+
48+
<br />
49+
##### <span name="floating-nav">Variant Phases</span>
50+
51+
This variant <TagDocs text='phases' />, you can customize it with the following props:
52+
<CustomTheme>
53+
<List>
54+
<List.Item>icon: Specifies the icon of the Phase.</List.Item>
55+
<List.Item>numberPhase: Specifies the number of the Phase.</List.Item>
56+
<List.Item>title: Specifies the title of the Phase. The default value is Title.</List.Item>
57+
<List.Item>textTag: Specifies the phase status text. The default value is Pending.</List.Item>
58+
<List.Item>status: Specifies the state of the phase.The values they can receive are: completed, active and default. The default value is default.</List.Item>
59+
<List.Item>className: Specifies the classes necessary to use the phase component, for example in width and height of the component.</List.Item>
60+
</List>
61+
</CustomTheme>
62+
63+
<Playground className="gap-y-2">
64+
<Flex className="flex" gap="4">
65+
<PhaseCustom title="Title" icon="check" className="w-44 h-40" status="completed" numberPhase={1} textTag="Completed" />
66+
<PhaseCustom title="Title" icon="search" className="w-44 h-40" status="active" numberPhase={2} textTag="In progress" />
67+
<PhaseCustom title="Title" icon="balance" className="w-44 h-40" status="default" numberPhase={3} textTag="Pendding" />
68+
</Flex>
69+
</Playground>
70+
71+
<WindowEditor
72+
codeString={`import { Flex, Phase } from 'dd360-ds'
73+
74+
export default function App() {
75+
return (
76+
<Flex gap="4">
77+
<Phase
78+
title="Title"
79+
className="w-44 h-40"
80+
icon={CheckIcon}
81+
status="completed"
82+
textTag="Completed"
83+
numberPhase={1}
84+
/>
85+
<Phase
86+
title="Title"
87+
className="w-44 h-40"
88+
icon={DocumentMagnifyingGlassIcon}
89+
status="active"
90+
textTag="In progress"
91+
numberPhase={2}
92+
/>
93+
<Phase
94+
title="Title"
95+
className="w-44 h-40"
96+
icon={ScaleIcon}
97+
status="default"
98+
textTag="Pendiente"
99+
numberPhase={3}
100+
/>
101+
</Flex>
102+
)
103+
}`} />
104+
105+
<br />
106+
107+
##### <span name="floating-nav">Variant Status</span>
108+
109+
This variant <TagDocs text='status' />, you can customize it with the following props:
110+
<CustomTheme>
111+
<List>
112+
<List.Item>title: Specifies the title of the Phase. The default value is Title.</List.Item>
113+
<List.Item>subtitle: Specifies the subtitle of the Status.</List.Item>
114+
<List.Item>textTag: Specifies the status text. The default value is Pending.</List.Item>
115+
<List.Item>status: Specifies the status of the state. The values they can receive are: success, active and selected. The default value is selected.</List.Item>
116+
<List.Item>className: Specifies the classes necessary to use the phase component, for example in width and height of the component.</List.Item>
117+
</List>
118+
</CustomTheme>
119+
120+
<Playground className="gap-y-2">
121+
<Flex gap="4">
122+
<Phase
123+
className="w-44"
124+
title="Title"
125+
subtitle="Subtitle"
126+
variant="status"
127+
status="success"
128+
textTag="Completed"
129+
/>
130+
<Phase
131+
className="w-44"
132+
title="Title"
133+
subtitle="Subtitle"
134+
variant="status"
135+
status="active"
136+
textTag="Pendiente"
137+
/>
138+
<Phase
139+
className="w-44"
140+
title="Title"
141+
subtitle="Subtitle"
142+
variant="status"
143+
status="selected"
144+
textTag="Neutral"
145+
/>
146+
</Flex>
147+
</Playground>
148+
149+
<WindowEditor
150+
codeString={`import { Flex, Phase } from 'dd360-ds'
151+
152+
export default function App() {
153+
return (
154+
<Flex gap="4">
155+
<Phase
156+
className="w-44"
157+
title="Title"
158+
subtitle="Subtitle"
159+
variant="status"
160+
status="success"
161+
textTag="Completed"
162+
/>
163+
<Phase
164+
className="w-44"
165+
title="Title"
166+
subtitle="Subtitle"
167+
variant="status"
168+
status="active"
169+
textTag="Pendiente"
170+
/>
171+
<Phase
172+
className="w-44"
173+
title="Title"
174+
subtitle="Subtitle"
175+
variant="status"
176+
status="selected"
177+
textTag="Neutral"
178+
/>
179+
</Flex>
180+
)
181+
}`} />
182+
183+
<br />
184+
185+
##### <span name="floating-nav">Variant Quarters</span>
186+
187+
This variant <TagDocs text='quarters' />, you can customize it with the following props:
188+
<CustomTheme>
189+
<List>
190+
<List.Item>icon: Specifies the icon of the Quarters.</List.Item>
191+
<List.Item>title: Specifies the title of the Quarter. The default value is Title.</List.Item>
192+
<List.Item>status: Specifies the status of the state. The values they can receive are: success, active and selected. The default value is selected.</List.Item>
193+
<List.Item>listData: Specifies the data of the Quarters.</List.Item>
194+
<List.Item>className: Specifies the classes necessary to use the phase component, for example in width and height of the component.</List.Item>
195+
</List>
196+
</CustomTheme>
197+
198+
<Playground className="gap-y-2">
199+
<Flex className="flex" gap="4">
200+
<PhaseCustom
201+
title="2022"
202+
icon="calendar"
203+
className="w-44"
204+
status="active"
205+
variant="quarters"
206+
listData={[
207+
{
208+
completed: true,
209+
label: "Anuales",
210+
},
211+
{
212+
completed: true,
213+
label: "4° Trimestre",
214+
},
215+
{
216+
completed: true,
217+
label: "3° Trimestre",
218+
},
219+
{
220+
completed: true,
221+
label: "2° Trimestre",
222+
},
223+
{
224+
completed: false,
225+
label: "1° Trimestre",
226+
},
227+
]} />
228+
<PhaseCustom
229+
title="2022"
230+
icon="calendar"
231+
className="w-44"
232+
status="selected"
233+
variant="quarters"
234+
listData={[
235+
{
236+
completed: true,
237+
label: "Anuales",
238+
},
239+
{
240+
completed: true,
241+
label: "4° Trimestre",
242+
},
243+
{
244+
completed: true,
245+
label: "3° Trimestre",
246+
},
247+
{
248+
completed: true,
249+
label: "2° Trimestre",
250+
},
251+
{
252+
completed: false,
253+
label: "1° Trimestre",
254+
},
255+
]} />
256+
</Flex>
257+
</Playground>
258+
259+
<WindowEditor
260+
codeString={`import { Flex, Phase } from 'dd360-ds'
261+
262+
export default function App() {
263+
return (
264+
<Flex gap="4">
265+
<Phase
266+
className="w-44"
267+
variant="quarters"
268+
status="active"
269+
icon={CalendarIcon}
270+
listData={[
271+
{
272+
completed: true,
273+
label: "Anuales",
274+
},
275+
{
276+
completed: true,
277+
label: "4° Trimestre",
278+
},
279+
{
280+
completed: true,
281+
label: "3° Trimestre",
282+
},
283+
{
284+
completed: true,
285+
label: "2° Trimestre",
286+
},
287+
{
288+
completed: false,
289+
label: "1° Trimestre",
290+
},
291+
]}
292+
/>
293+
<Phase
294+
className="w-44"
295+
variant="quarters"
296+
status="selected"
297+
icon={CalendarIcon}
298+
listData={[
299+
{
300+
completed: true,
301+
label: "Anuales",
302+
},
303+
{
304+
completed: true,
305+
label: "4° Trimestre",
306+
},
307+
{
308+
completed: true,
309+
label: "3° Trimestre",
310+
},
311+
{
312+
completed: true,
313+
label: "2° Trimestre",
314+
},
315+
{
316+
completed: false,
317+
label: "1° Trimestre",
318+
},
319+
]}
320+
/>
321+
</Flex>
322+
)
323+
}`} />
324+
325+
<br />
326+
327+
##### <span name="floating-nav">API Reference</span>
328+
329+
<CustomTableDocs
330+
dataTable={[
331+
{ title: 'title', default: 'Title', types: ['string'], required: true },
332+
{ title: 'subtitle', default: '-', types: ['string']},
333+
{ title: 'icon', types: ['React.ElementType'] },
334+
{ title: 'variant', default: 'phases', types: ['phases', 'status', 'quarters'] },
335+
{ title: 'status', default: 'default', types: ['default', 'active', 'success', 'selected', 'completed'] },
336+
{ title: 'textTag', default: 'Pending', types: ['string'] },
337+
{ title: 'numberPhase', default: '-', types: ['number'] },
338+
{ title: 'listData', default: '-', types: ['array'] },
339+
{ title: 'className', default: '-', types: ['string'] }
340+
]}
341+
342+
/>
343+
344+
<AlertReactKnowledge />
345+
346+
<BackAndForwardController />

‎package-lock.json

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"@algolia/autocomplete-core": "^1.8.3",
2020
"@docsearch/react": "^3.5.1",
2121
"@vercel/analytics": "^1.0.1",
22-
"dd360-ds": "6.20.1",
22+
"dd360-ds": "https://pkg.csb.dev/dd3tech/bui/commit/a46e1955/dd360-ds",
2323
"dd360-utils": "18.1.0",
2424
"gray-matter": "^4.0.3",
2525
"i18next": "^22.4.9",

0 commit comments

Comments
 (0)