Menu


Components

Phase

Storybook

The Phase component is a user interface component that is used to display the status of a process. This component has three variants: phases, status and quarters



Imports

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

1import Phase from 'dd360-ds/Phase'
1import { Phase } from 'dd360-ds'

Usage

Use the Phase component as shown below:

1.

Title

Completed

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

1import { Phase } from 'dd360-ds'
2
3<Phase
4    className="w-44 h-40"
5    icon={CheckIcon}
6    status="completed"
7    textTag="Completed"
8    numberPhase={1}
9/>

Variant Phases

This variant phases, you can customize it with the following props:

  • •icon: Specifies the icon of the Phase.
  • •numberPhase: Specifies the number of the Phase.
  • •title: Specifies the title of the Phase. The default value is Title.
  • •textTag: Specifies the phase status text. The default value is Pending.
  • •status: Specifies the state of the phase.The values they can receive are: completed, active and default. The default value is default.
  • •className: Specifies the classes necessary to use the phase component, for example in width and height of the component.

1.

Title

Completed

2.

Title

In progress

3.

Title

Pendding
1import { Flex, Phase } from 'dd360-ds'
2
3export default function App() {
4    return (
5        <Flex gap="4">
6            <Phase
7              title="Title"
8              className="w-44 h-40"
9              icon={CheckIcon}
10              status="completed"
11              textTag="Completed"
12              numberPhase={1}
13            />
14            <Phase
15              title="Title"
16              className="w-44 h-40"
17              icon={DocumentMagnifyingGlassIcon}
18              status="active"
19              textTag="In progress"
20              numberPhase={2}
21            />
22            <Phase
23              title="Title"
24              className="w-44 h-40"
25              icon={ScaleIcon}
26              status="default"
27              textTag="Pendiente"
28              numberPhase={3}
29            />
30        </Flex>
31    )
32}

Variant Status

This variant status, you can customize it with the following props:

  • •title: Specifies the title of the Phase. The default value is Title.
  • •subtitle: Specifies the subtitle of the Status.
  • •textTag: Specifies the status text. The default value is Pending.
  • •status: Specifies the status of the state. The values they can receive are: success, active and selected. The default value is selected.
  • •className: Specifies the classes necessary to use the phase component, for example in width and height of the component.

Title

Subtitle

Completed

Title

Subtitle

Pendiente

Title

Subtitle

Neutral
1import { Flex, Phase } from 'dd360-ds'
2
3export default function App() {
4    return (
5        <Flex gap="4">
6            <Phase
7              className="w-44"
8              title="Title"
9              subtitle="Subtitle"
10              variant="status"
11              status="success"
12              textTag="Completed"
13            />
14            <Phase
15              className="w-44"
16              title="Title"
17              subtitle="Subtitle"
18              variant="status"
19              status="active"
20              textTag="Pendiente"
21            />
22            <Phase
23              className="w-44"
24              title="Title"
25              subtitle="Subtitle"
26              variant="status"
27              status="selected"
28              textTag="Neutral"
29            />
30        </Flex>
31    )
32}

Variant Quarters

This variant quarters, you can customize it with the following props:

  • •icon: Specifies the icon of the Quarters.
  • •title: Specifies the title of the Quarter. The default value is Title.
  • •status: Specifies the status of the state. The values they can receive are: success, active and selected. The default value is selected.
  • •listData: Specifies the data of the Quarters.
  • •className: Specifies the classes necessary to use the phase component, for example in width and height of the component.

2022

Anuales

4° Trimestre

3° Trimestre

2° Trimestre

1° Trimestre

2022

Anuales

4° Trimestre

3° Trimestre

2° Trimestre

1° Trimestre

1import { Flex, Phase } from 'dd360-ds'
2
3export default function App() {
4    return (
5        <Flex gap="4">
6            <Phase
7              className="w-44"
8              variant="quarters"
9              status="active"
10              icon={CalendarIcon}
11              listData={[
12                {
13                  completed: true,
14                  label: "Anuales",
15                },
16                {
17                  completed: true,
18                  label: "4° Trimestre",
19                },
20                {
21                  completed: true,
22                  label: "3° Trimestre",
23                },
24                {
25                  completed: true,
26                  label: "2° Trimestre",
27                },
28                {
29                  completed: false,
30                  label: "1° Trimestre",
31                },
32              ]}
33            />
34            <Phase
35              className="w-44"
36              variant="quarters"
37              status="selected"
38              icon={CalendarIcon}
39              listData={[
40                {
41                  completed: true,
42                  label: "Anuales",
43                },
44                {
45                  completed: true,
46                  label: "4° Trimestre",
47                },
48                {
49                  completed: true,
50                  label: "3° Trimestre",
51                },
52                {
53                  completed: true,
54                  label: "2° Trimestre",
55                },
56                {
57                  completed: false,
58                  label: "1° Trimestre",
59                },
60              ]}
61            />
62        </Flex>
63    )
64}

API Reference
NameTypesDefault
"title"*
string
Title
"subtitle"
string
-
"icon"
React.ElementType
-
"variant"
phases
status
quarters
phases
"status"
default
active
success
selected
completed
default
"textTag"
string
Pending
"numberPhase"
number
-
"listData"
array
-
"className"
string
-
PortalProgress