Skip to content

Feat: add phase documentation #68

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
genixxavier wants to merge 3 commits into
base: feat/add-tag-documentation
Choose a base branch
from
Draft

Feat: add phase documentation #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
842e17d
Feat: Add phase documentation
genixxavier Jan 19, 2024
b53357d
fix: update label in English
genixxavier Jan 22, 2024
967f8be
feat: update version bui
genixxavier Jan 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
346 changes: 346 additions & 0 deletions docs/components/phase.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,346 @@
---
product: dd360-ds
title: React Phase component
components: Phase
---

<br id='top' />
<br />

<Label>Components</Label>

# <HeaderDocCustom title="Phase" pathUrl="components-phase--phase" />

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' />

<br />
<br />
##### <span name="floating-nav">Imports</span>

The first alternative is recommended since they can reduce the application bundle

<WindowEditor codeString="import Phase from 'dd360-ds/Phase'" />
<WindowEditor codeString="import { Phase } from 'dd360-ds'" />

<br />
##### <span name="floating-nav">Usage</span>

Use the Phase component as shown below:

<Playground className="gap-y-2">
<PhaseCustom icon="check" className="w-44 h-40" status="completed" numberPhase={1} textTag="Completed" />
</Playground>

The code snippet below shows how to use the Phase component:

<WindowEditor
codeString={`import { Phase } from 'dd360-ds'

<Phase
className="w-44 h-40"
icon={CheckIcon}
status="completed"
textTag="Completed"
numberPhase={1}
/>`}
/>

<br />
##### <span name="floating-nav">Variant Phases</span>

This variant <TagDocs text='phases' />, you can customize it with the following props:
<CustomTheme>
<List>
<List.Item>icon: Specifies the icon of the Phase.</List.Item>
<List.Item>numberPhase: Specifies the number of the Phase.</List.Item>
<List.Item>title: Specifies the title of the Phase. The default value is Title.</List.Item>
<List.Item>textTag: Specifies the phase status text. The default value is Pending.</List.Item>
<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>
<List.Item>className: Specifies the classes necessary to use the phase component, for example in width and height of the component.</List.Item>
</List>
</CustomTheme>

<Playground className="gap-y-2">
<Flex className="flex" gap="4">
<PhaseCustom title="Title" icon="check" className="w-44 h-40" status="completed" numberPhase={1} textTag="Completed" />
<PhaseCustom title="Title" icon="search" className="w-44 h-40" status="active" numberPhase={2} textTag="In progress" />
<PhaseCustom title="Title" icon="balance" className="w-44 h-40" status="default" numberPhase={3} textTag="Pending" />
</Flex>
</Playground>

<WindowEditor
codeString={`import { Flex, Phase } from 'dd360-ds'

export default function App() {
return (
<Flex gap="4">
<Phase
title="Title"
className="w-44 h-40"
icon={CheckIcon}
status="completed"
textTag="Completed"
numberPhase={1}
/>
<Phase
title="Title"
className="w-44 h-40"
icon={DocumentMagnifyingGlassIcon}
status="active"
textTag="In progress"
numberPhase={2}
/>
<Phase
title="Title"
className="w-44 h-40"
icon={ScaleIcon}
status="default"
textTag="Pending"
numberPhase={3}
/>
</Flex>
)
}`} />

<br />

##### <span name="floating-nav">Variant Status</span>

This variant <TagDocs text='status' />, you can customize it with the following props:
<CustomTheme>
<List>
<List.Item>title: Specifies the title of the Phase. The default value is Title.</List.Item>
<List.Item>subtitle: Specifies the subtitle of the Status.</List.Item>
<List.Item>textTag: Specifies the status text. The default value is Pending.</List.Item>
<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>
<List.Item>className: Specifies the classes necessary to use the phase component, for example in width and height of the component.</List.Item>
</List>
</CustomTheme>

<Playground className="gap-y-2">
<Flex gap="4">
<Phase
className="w-44"
title="Title"
subtitle="Subtitle"
variant="status"
status="success"
textTag="Completed"
/>
<Phase
className="w-44"
title="Title"
subtitle="Subtitle"
variant="status"
status="active"
textTag="Pending"
/>
<Phase
className="w-44"
title="Title"
subtitle="Subtitle"
variant="status"
status="selected"
textTag="Neutral"
/>
</Flex>
</Playground>

<WindowEditor
codeString={`import { Flex, Phase } from 'dd360-ds'

export default function App() {
return (
<Flex gap="4">
<Phase
className="w-44"
title="Title"
subtitle="Subtitle"
variant="status"
status="success"
textTag="Completed"
/>
<Phase
className="w-44"
title="Title"
subtitle="Subtitle"
variant="status"
status="active"
textTag="Pending"
/>
<Phase
className="w-44"
title="Title"
subtitle="Subtitle"
variant="status"
status="selected"
textTag="Neutral"
/>
</Flex>
)
}`} />

<br />

##### <span name="floating-nav">Variant Quarters</span>

This variant <TagDocs text='quarters' />, you can customize it with the following props:
<CustomTheme>
<List>
<List.Item>icon: Specifies the icon of the Quarters.</List.Item>
<List.Item>title: Specifies the title of the Quarter. The default value is Title.</List.Item>
<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>
<List.Item>listData: Specifies the data of the Quarters.</List.Item>
<List.Item>className: Specifies the classes necessary to use the phase component, for example in width and height of the component.</List.Item>
</List>
</CustomTheme>

<Playground className="gap-y-2">
<Flex className="flex" gap="4">
<PhaseCustom
title="2022"
icon="calendar"
className="w-44"
status="active"
variant="quarters"
listData={[
{
completed: true,
label: "Annual",
},
{
completed: true,
label: "4° Quarter",
},
{
completed: true,
label: "3° Quarter",
},
{
completed: true,
label: "2° Quarter",
},
{
completed: false,
label: "1° Quarter",
},
]} />
<PhaseCustom
title="2022"
icon="calendar"
className="w-44"
status="selected"
variant="quarters"
listData={[
{
completed: true,
label: "Annual",
},
{
completed: true,
label: "4° Quarter",
},
{
completed: true,
label: "3° Quarter",
},
{
completed: true,
label: "2° Quarter",
},
{
completed: false,
label: "1° Quarter",
},
]} />
</Flex>
</Playground>

<WindowEditor
codeString={`import { Flex, Phase } from 'dd360-ds'

export default function App() {
return (
<Flex gap="4">
<Phase
className="w-44"
variant="quarters"
status="active"
icon={CalendarIcon}
listData={[
{
completed: true,
label: "Annual",
},
{
completed: true,
label: "4° Quarter",
},
{
completed: true,
label: "3° Quarter",
},
{
completed: true,
label: "2° Quarter",
},
{
completed: false,
label: "1° Quarter",
},
]}
/>
<Phase
className="w-44"
variant="quarters"
status="selected"
icon={CalendarIcon}
listData={[
{
completed: true,
label: "Annual",
},
{
completed: true,
label: "4° Quarter",
},
{
completed: true,
label: "3° Quarter",
},
{
completed: true,
label: "2° Quarter",
},
{
completed: false,
label: "1° Quarter",
},
]}
/>
</Flex>
)
}`} />

<br />

##### <span name="floating-nav">API Reference</span>

<CustomTableDocs
dataTable={[
{ title: 'title', default: 'Title', types: ['string'], required: true },
{ title: 'subtitle', default: '-', types: ['string']},
{ title: 'icon', types: ['React.ElementType'] },
{ title: 'variant', default: 'phases', types: ['phases', 'status', 'quarters'] },
{ title: 'status', default: 'default', types: ['default', 'active', 'success', 'selected', 'completed'] },
{ title: 'textTag', default: 'Pending', types: ['string'] },
{ title: 'numberPhase', default: '-', types: ['number'] },
{ title: 'listData', default: '-', types: ['array'] },
{ title: 'className', default: '-', types: ['string'] }
]}

/>

<AlertReactKnowledge />

<BackAndForwardController />
14 changes: 7 additions & 7 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"@algolia/autocomplete-core": "^1.8.3",
"@docsearch/react": "^3.5.1",
"@vercel/analytics": "^1.0.1",
"dd360-ds": "6.20.1",
"dd360-ds": "6.22.0",
"dd360-utils": "18.1.0",
"gray-matter": "^4.0.3",
"i18next": "^22.4.9",
Expand Down
Loading