@campxdev/react-blueprint 1.6.1 → 1.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -1
- package/src/App.tsx +42 -151
- package/src/components/Assets/Icons/IconComponents/AddSquare.tsx +26 -0
- package/src/components/Assets/Icons/IconComponents/ApproveIcon.tsx +34 -0
- package/src/components/Assets/Icons/IconComponents/DoneSquare.tsx +33 -0
- package/src/components/Assets/Icons/IconComponents/MinusSquare.tsx +28 -0
- package/src/components/Assets/Icons/IconComponents/RejectIcon.tsx +40 -0
- package/src/components/Assets/Icons/Icons.tsx +10 -0
- package/src/components/DataDisplay/Timeline/Timeline.tsx +81 -0
- package/src/components/DataDisplay/export.ts +1 -0
- package/src/stories/DataDisplay/Timeline.stories.tsx +150 -0
- package/src/themes/commonTheme.ts +33 -0
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@campxdev/react-blueprint",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.2",
|
|
4
4
|
"main": "./export.ts",
|
|
5
5
|
"private": false,
|
|
6
6
|
"dependencies": {
|
|
7
7
|
"@emotion/react": "^11.13.3",
|
|
8
8
|
"@emotion/styled": "^11.13.0",
|
|
9
9
|
"@mui/icons-material": "^6.1.5",
|
|
10
|
+
"@mui/lab": "^6.0.0-beta.16",
|
|
10
11
|
"@mui/material": "^6.1.5",
|
|
11
12
|
"@mui/x-data-grid": "^7.22.1",
|
|
12
13
|
"@mui/x-date-pickers": "^7.22.1",
|
package/src/App.tsx
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useState } from 'react';
|
|
1
|
+
import { Stack } from '@mui/material';
|
|
3
2
|
import './App.css';
|
|
4
|
-
import {
|
|
3
|
+
import { Timeline, Typography } from './components/export';
|
|
5
4
|
|
|
6
5
|
interface RowType {
|
|
7
6
|
lastName: string;
|
|
@@ -10,167 +9,59 @@ interface RowType {
|
|
|
10
9
|
}
|
|
11
10
|
|
|
12
11
|
function App() {
|
|
13
|
-
const [status, setStatus] = useState('ok1');
|
|
14
|
-
|
|
15
|
-
const columns: GridColDef[] = [
|
|
16
|
-
{
|
|
17
|
-
field: 'firstName',
|
|
18
|
-
headerName: 'First name',
|
|
19
|
-
width: 250,
|
|
20
|
-
editable: true,
|
|
21
|
-
type: 'string',
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
field: 'lastName',
|
|
25
|
-
headerName: 'Last name',
|
|
26
|
-
width: 250,
|
|
27
|
-
editable: true,
|
|
28
|
-
renderCell: (params) => {
|
|
29
|
-
return (
|
|
30
|
-
<SingleSelect
|
|
31
|
-
value={params.value}
|
|
32
|
-
disabled
|
|
33
|
-
options={[
|
|
34
|
-
{
|
|
35
|
-
label: 'Okay1',
|
|
36
|
-
value: 'ok1',
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
label: 'Okay4',
|
|
40
|
-
value: 'ok4',
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
label: 'Okay2',
|
|
44
|
-
value: 'ok2',
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
label: 'Okay3',
|
|
48
|
-
value: 'ok3',
|
|
49
|
-
},
|
|
50
|
-
]}
|
|
51
|
-
onChange={function (value: any): void {
|
|
52
|
-
setStatus(value);
|
|
53
|
-
}}
|
|
54
|
-
/>
|
|
55
|
-
);
|
|
56
|
-
},
|
|
57
|
-
renderEditCell: (params) => {
|
|
58
|
-
return (
|
|
59
|
-
<SingleSelect
|
|
60
|
-
value={params.value}
|
|
61
|
-
options={[
|
|
62
|
-
{
|
|
63
|
-
label: 'Okay1',
|
|
64
|
-
value: 'ok1',
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
label: 'Okay4',
|
|
68
|
-
value: 'ok4',
|
|
69
|
-
},
|
|
70
|
-
{
|
|
71
|
-
label: 'Okay2',
|
|
72
|
-
value: 'ok2',
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
label: 'Okay3',
|
|
76
|
-
value: 'ok3',
|
|
77
|
-
},
|
|
78
|
-
]}
|
|
79
|
-
onChange={function (value: any): void {
|
|
80
|
-
setStatus(value);
|
|
81
|
-
}}
|
|
82
|
-
/>
|
|
83
|
-
);
|
|
84
|
-
},
|
|
85
|
-
},
|
|
86
|
-
{
|
|
87
|
-
field: 'age',
|
|
88
|
-
headerName: 'Age',
|
|
89
|
-
width: 230,
|
|
90
|
-
editable: true,
|
|
91
|
-
type: 'number',
|
|
92
|
-
},
|
|
93
|
-
];
|
|
94
|
-
|
|
95
|
-
const rows1 = [
|
|
96
|
-
{
|
|
97
|
-
lastName: 'Snow',
|
|
98
|
-
firstName: 'Jon',
|
|
99
|
-
age: 35,
|
|
100
|
-
},
|
|
101
|
-
{
|
|
102
|
-
lastName: 'Lan ter',
|
|
103
|
-
firstName: 'Cer sei',
|
|
104
|
-
age: 42,
|
|
105
|
-
},
|
|
106
|
-
{
|
|
107
|
-
lastName: 'Lan Iter',
|
|
108
|
-
firstName: 'Jaime',
|
|
109
|
-
age: 45,
|
|
110
|
-
},
|
|
111
|
-
{
|
|
112
|
-
lastName: 'Stark',
|
|
113
|
-
firstName: 'Arya',
|
|
114
|
-
age: 16,
|
|
115
|
-
},
|
|
116
|
-
];
|
|
117
|
-
|
|
118
|
-
const [rows, setRows] = useState<RowType[]>(rows1 ?? []);
|
|
119
|
-
const onSave = (rows: RowType[]) => {
|
|
120
|
-
console.log(rows, 'rrr');
|
|
121
|
-
};
|
|
122
12
|
return (
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
<Select
|
|
134
|
-
value={status}
|
|
135
|
-
onChange={(e) => {
|
|
136
|
-
setStatus(e.target.value);
|
|
137
|
-
}}
|
|
138
|
-
options={[
|
|
13
|
+
<div
|
|
14
|
+
style={{
|
|
15
|
+
display: 'flex',
|
|
16
|
+
justifyContent: 'flex-start',
|
|
17
|
+
paddingLeft: '16px',
|
|
18
|
+
}}
|
|
19
|
+
>
|
|
20
|
+
<Timeline
|
|
21
|
+
position="left"
|
|
22
|
+
timelineItems={[
|
|
139
23
|
{
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
24
|
+
timelineContent: (
|
|
25
|
+
<Stack>
|
|
26
|
+
<Typography>Requirement Gathering</Typography>
|
|
27
|
+
</Stack>
|
|
28
|
+
),
|
|
29
|
+
variant: 'info',
|
|
143
30
|
},
|
|
144
31
|
{
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
32
|
+
timelineContent: (
|
|
33
|
+
<Stack>
|
|
34
|
+
<Typography>Requirement Gathering</Typography>
|
|
35
|
+
</Stack>
|
|
36
|
+
),
|
|
37
|
+
variant: 'warning',
|
|
149
38
|
},
|
|
150
39
|
{
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
label: 'PinkPanther',
|
|
158
|
-
value: 'pink',
|
|
159
|
-
|
|
160
|
-
color: 'pink',
|
|
40
|
+
timelineContent: (
|
|
41
|
+
<Stack>
|
|
42
|
+
<Typography>Requirement Gathering</Typography>
|
|
43
|
+
</Stack>
|
|
44
|
+
),
|
|
45
|
+
variant: 'success',
|
|
161
46
|
},
|
|
162
47
|
{
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
48
|
+
timelineContent: (
|
|
49
|
+
<Stack>
|
|
50
|
+
<Typography>Requirement Gathering</Typography>
|
|
51
|
+
</Stack>
|
|
52
|
+
),
|
|
166
53
|
},
|
|
167
54
|
{
|
|
168
|
-
|
|
169
|
-
|
|
55
|
+
timelineContent: (
|
|
56
|
+
<Stack>
|
|
57
|
+
<Typography>Requirement Gathering</Typography>
|
|
58
|
+
</Stack>
|
|
59
|
+
),
|
|
60
|
+
variant: 'error',
|
|
170
61
|
},
|
|
171
62
|
]}
|
|
172
63
|
/>
|
|
173
|
-
|
|
64
|
+
</div>
|
|
174
65
|
);
|
|
175
66
|
}
|
|
176
67
|
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { useTheme } from '@mui/material';
|
|
2
|
+
|
|
3
|
+
export const AddSquare = ({
|
|
4
|
+
size = 16,
|
|
5
|
+
color,
|
|
6
|
+
}: {
|
|
7
|
+
size?: number;
|
|
8
|
+
color?: string;
|
|
9
|
+
}) => {
|
|
10
|
+
const theme = useTheme();
|
|
11
|
+
const fill = color ?? theme.palette.highlight.highlightBlue;
|
|
12
|
+
return (
|
|
13
|
+
<svg
|
|
14
|
+
width="16"
|
|
15
|
+
height="16"
|
|
16
|
+
viewBox="0 0 16 16"
|
|
17
|
+
fill="none"
|
|
18
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
19
|
+
>
|
|
20
|
+
<path
|
|
21
|
+
d="M10.7957 1.3335H5.209C2.78234 1.3335 1.33594 2.7799 1.33594 5.20656V10.7868C1.33594 13.2199 2.78234 14.6668 5.209 14.6668H10.7893C13.2159 14.6668 14.6629 13.2204 14.6629 10.7938V5.20656C14.6693 2.7799 13.2223 1.3335 10.7957 1.3335ZM10.6693 8.4999H8.50234V10.6668C8.50234 10.7994 8.44966 10.9266 8.35589 11.0204C8.26212 11.1142 8.13495 11.1668 8.00234 11.1668C7.86973 11.1668 7.74255 11.1142 7.64878 11.0204C7.55502 10.9266 7.50234 10.7994 7.50234 10.6668V8.4999H5.33594C5.20333 8.4999 5.07615 8.44722 4.98238 8.35345C4.88862 8.25968 4.83594 8.1325 4.83594 7.9999C4.83594 7.86729 4.88862 7.74011 4.98238 7.64634C5.07615 7.55257 5.20333 7.4999 5.33594 7.4999H7.50234V5.3335C7.50234 5.20089 7.55502 5.07371 7.64878 4.97994C7.74255 4.88617 7.86973 4.8335 8.00234 4.8335C8.13495 4.8335 8.26212 4.88617 8.35589 4.97994C8.44966 5.07371 8.50234 5.20089 8.50234 5.3335V7.4999H10.6693C10.8019 7.4999 10.9291 7.55257 11.0228 7.64634C11.1166 7.74011 11.1693 7.86729 11.1693 7.9999C11.1693 8.1325 11.1166 8.25968 11.0228 8.35345C10.9291 8.44722 10.8019 8.4999 10.6693 8.4999Z"
|
|
22
|
+
fill={fill}
|
|
23
|
+
/>
|
|
24
|
+
</svg>
|
|
25
|
+
);
|
|
26
|
+
};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { useTheme } from '@mui/material';
|
|
2
|
+
|
|
3
|
+
export const ApproveIcon = ({
|
|
4
|
+
size = 16,
|
|
5
|
+
color,
|
|
6
|
+
}: {
|
|
7
|
+
size?: number;
|
|
8
|
+
color?: string;
|
|
9
|
+
}) => {
|
|
10
|
+
const theme = useTheme();
|
|
11
|
+
const fill = color ?? theme.palette.highlight.highlightGreen;
|
|
12
|
+
return (
|
|
13
|
+
<svg
|
|
14
|
+
width="16"
|
|
15
|
+
height="17"
|
|
16
|
+
viewBox="0 0 16 17"
|
|
17
|
+
fill="none"
|
|
18
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
19
|
+
>
|
|
20
|
+
<path
|
|
21
|
+
d="M9.99968 15.6667H5.99968C2.37967 15.6667 0.833008 14.12 0.833008 10.5V6.5C0.833008 2.88 2.37967 1.33334 5.99968 1.33334H9.99968C13.6197 1.33334 15.1663 2.88 15.1663 6.5V10.5C15.1663 14.12 13.6197 15.6667 9.99968 15.6667ZM5.99968 2.33334C2.92634 2.33334 1.83301 3.42667 1.83301 6.5V10.5C1.83301 13.5733 2.92634 14.6667 5.99968 14.6667H9.99968C13.073 14.6667 14.1663 13.5733 14.1663 10.5V6.5C14.1663 3.42667 13.073 2.33334 9.99968 2.33334H5.99968Z"
|
|
22
|
+
fill={fill}
|
|
23
|
+
stroke="#88B053"
|
|
24
|
+
stroke-width="0.4"
|
|
25
|
+
/>
|
|
26
|
+
<path
|
|
27
|
+
d="M7.05388 10.8873C6.98824 10.8873 6.92324 10.8744 6.86261 10.8492C6.80198 10.824 6.74691 10.7871 6.70055 10.7407L4.81388 8.85334C4.72556 8.75856 4.67748 8.63319 4.67977 8.50366C4.68205 8.37412 4.73453 8.25053 4.82613 8.15893C4.91774 8.06732 5.04133 8.01484 5.17087 8.01256C5.3004 8.01027 5.42577 8.05835 5.52055 8.14667L7.05388 9.68001L10.4805 6.25401C10.5753 6.16569 10.7007 6.1176 10.8302 6.11989C10.9598 6.12218 11.0834 6.17465 11.175 6.26626C11.2666 6.35787 11.319 6.48146 11.3213 6.61099C11.3236 6.74053 11.2755 6.86589 11.1872 6.96067L7.40722 10.7407C7.36085 10.7871 7.30578 10.824 7.24515 10.8492C7.18452 10.8744 7.11953 10.8873 7.05388 10.8873Z"
|
|
28
|
+
fill={fill}
|
|
29
|
+
stroke="#88B053"
|
|
30
|
+
stroke-width="0.4"
|
|
31
|
+
/>
|
|
32
|
+
</svg>
|
|
33
|
+
);
|
|
34
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { useTheme } from '@mui/material';
|
|
2
|
+
|
|
3
|
+
export const DoneSquare = ({
|
|
4
|
+
size = 16,
|
|
5
|
+
color,
|
|
6
|
+
}: {
|
|
7
|
+
size?: number;
|
|
8
|
+
color?: string;
|
|
9
|
+
}) => {
|
|
10
|
+
const theme = useTheme();
|
|
11
|
+
const fill = color ?? theme.palette.highlight.highlightGreen;
|
|
12
|
+
return (
|
|
13
|
+
<svg
|
|
14
|
+
width="16"
|
|
15
|
+
height="16"
|
|
16
|
+
viewBox="0 0 16 16"
|
|
17
|
+
fill="none"
|
|
18
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
19
|
+
>
|
|
20
|
+
<g clip-path="url(#clip0_6476_116340)">
|
|
21
|
+
<path
|
|
22
|
+
d="M10.7959 1.3335H5.20927C2.7826 1.3335 1.33594 2.78016 1.33594 5.20683V10.7868C1.33594 13.2202 2.7826 14.6668 5.20927 14.6668H10.7893C13.2159 14.6668 14.6626 13.2202 14.6626 10.7935V5.20683C14.6693 2.78016 13.2226 1.3335 10.7959 1.3335ZM11.1893 6.46683L7.40927 10.2468C7.36294 10.2934 7.30788 10.3303 7.24724 10.3555C7.18661 10.3806 7.1216 10.3936 7.05594 10.3936C6.99028 10.3936 6.92527 10.3806 6.86463 10.3555C6.804 10.3303 6.74894 10.2934 6.7026 10.2468L4.81594 8.36016C4.76681 8.31439 4.72741 8.25919 4.70008 8.19785C4.67276 8.13652 4.65806 8.07031 4.65688 8.00318C4.65569 7.93604 4.66804 7.86936 4.69319 7.8071C4.71834 7.74484 4.75577 7.68828 4.80325 7.6408C4.85072 7.59332 4.90728 7.5559 4.96954 7.53075C5.0318 7.5056 5.09848 7.49325 5.16562 7.49444C5.23275 7.49562 5.29896 7.51031 5.3603 7.53764C5.42163 7.56497 5.47683 7.60437 5.5226 7.6535L7.05594 9.18683L10.4826 5.76016C10.5774 5.67184 10.7028 5.62376 10.8323 5.62605C10.9618 5.62833 11.0854 5.68081 11.177 5.77242C11.2686 5.86402 11.3211 5.98761 11.3234 6.11715C11.3257 6.24668 11.2776 6.37205 11.1893 6.46683Z"
|
|
23
|
+
fill={fill}
|
|
24
|
+
/>
|
|
25
|
+
</g>
|
|
26
|
+
<defs>
|
|
27
|
+
<clipPath id="clip0_6476_116340">
|
|
28
|
+
<rect width="16" height="16" fill="white" />
|
|
29
|
+
</clipPath>
|
|
30
|
+
</defs>
|
|
31
|
+
</svg>
|
|
32
|
+
);
|
|
33
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { useTheme } from '@mui/material';
|
|
2
|
+
|
|
3
|
+
type Props = {};
|
|
4
|
+
|
|
5
|
+
export const MinusSquare = ({
|
|
6
|
+
size = 16,
|
|
7
|
+
color,
|
|
8
|
+
}: {
|
|
9
|
+
size?: number;
|
|
10
|
+
color?: string;
|
|
11
|
+
}) => {
|
|
12
|
+
const theme = useTheme();
|
|
13
|
+
const fill = color ?? theme.palette.highlight.highlightRed;
|
|
14
|
+
return (
|
|
15
|
+
<svg
|
|
16
|
+
width={size}
|
|
17
|
+
height={size}
|
|
18
|
+
viewBox="0 0 16 16"
|
|
19
|
+
fill="none"
|
|
20
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
21
|
+
>
|
|
22
|
+
<path
|
|
23
|
+
d="M10.7959 1.3335H5.20927C2.7826 1.3335 1.33594 2.78016 1.33594 5.20683V10.7868C1.33594 13.2202 2.7826 14.6668 5.20927 14.6668H10.7893C13.2159 14.6668 14.6626 13.2202 14.6626 10.7935V5.20683C14.6693 2.78016 13.2226 1.3335 10.7959 1.3335ZM10.6693 8.50016H5.33594C5.20333 8.50016 5.07615 8.44749 4.98238 8.35372C4.88862 8.25995 4.83594 8.13277 4.83594 8.00016C4.83594 7.86756 4.88862 7.74038 4.98238 7.64661C5.07615 7.55284 5.20333 7.50016 5.33594 7.50016H10.6693C10.8019 7.50016 10.9291 7.55284 11.0228 7.64661C11.1166 7.74038 11.1693 7.86756 11.1693 8.00016C11.1693 8.13277 11.1166 8.25995 11.0228 8.35372C10.9291 8.44749 10.8019 8.50016 10.6693 8.50016Z"
|
|
24
|
+
fill={fill}
|
|
25
|
+
/>
|
|
26
|
+
</svg>
|
|
27
|
+
);
|
|
28
|
+
};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { useTheme } from '@mui/material';
|
|
2
|
+
|
|
3
|
+
export const RejectIcon = ({
|
|
4
|
+
size = 16,
|
|
5
|
+
color,
|
|
6
|
+
}: {
|
|
7
|
+
size?: number;
|
|
8
|
+
color?: string;
|
|
9
|
+
}) => {
|
|
10
|
+
const theme = useTheme();
|
|
11
|
+
const fill = color ?? theme.palette.highlight.highlightRed;
|
|
12
|
+
return (
|
|
13
|
+
<svg
|
|
14
|
+
width="16"
|
|
15
|
+
height="17"
|
|
16
|
+
viewBox="0 0 16 17"
|
|
17
|
+
fill="none"
|
|
18
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
19
|
+
>
|
|
20
|
+
<path
|
|
21
|
+
d="M6.1137 10.886C6.04802 10.8862 5.98295 10.8734 5.92228 10.8482C5.86162 10.823 5.80658 10.786 5.76037 10.7393C5.66738 10.6452 5.61523 10.5183 5.61523 10.386C5.61523 10.2537 5.66738 10.1268 5.76037 10.0327L9.53437 6.26001C9.58014 6.21088 9.63534 6.17148 9.69668 6.14415C9.75801 6.11683 9.82422 6.10213 9.89135 6.10095C9.95849 6.09976 10.0252 6.11211 10.0874 6.13726C10.1497 6.16241 10.2062 6.19984 10.2537 6.24731C10.3012 6.29479 10.3386 6.35135 10.3638 6.41361C10.3889 6.47587 10.4013 6.54255 10.4001 6.60969C10.3989 6.67682 10.3842 6.74303 10.3569 6.80437C10.3296 6.8657 10.2902 6.9209 10.241 6.96667L6.4677 10.74C6.42175 10.7872 6.36665 10.8245 6.30578 10.8496C6.2449 10.8747 6.17954 10.8871 6.1137 10.886Z"
|
|
22
|
+
fill={fill}
|
|
23
|
+
stroke="#F2353C"
|
|
24
|
+
stroke-width="0.4"
|
|
25
|
+
/>
|
|
26
|
+
<path
|
|
27
|
+
d="M9.88702 10.886C9.82133 10.8862 9.75626 10.8734 9.6956 10.8482C9.63493 10.823 9.57989 10.786 9.53368 10.7393L5.76102 6.966C5.67586 6.87074 5.63041 6.7465 5.63398 6.61879C5.63756 6.49107 5.68989 6.36957 5.78024 6.27922C5.87058 6.18888 5.99208 6.13654 6.1198 6.13297C6.24752 6.1294 6.37176 6.17485 6.46702 6.26L10.2403 10.0333C10.3333 10.1274 10.3855 10.2544 10.3855 10.3867C10.3855 10.519 10.3333 10.6459 10.2403 10.74C10.1941 10.7866 10.139 10.8234 10.0784 10.8485C10.0177 10.8736 9.95265 10.8863 9.88702 10.886Z"
|
|
28
|
+
fill={fill}
|
|
29
|
+
stroke="#F2353C"
|
|
30
|
+
stroke-width="0.4"
|
|
31
|
+
/>
|
|
32
|
+
<path
|
|
33
|
+
d="M9.99968 15.6667H5.99968C2.37967 15.6667 0.833008 14.12 0.833008 10.5V6.5C0.833008 2.88 2.37967 1.33334 5.99968 1.33334H9.99968C13.6197 1.33334 15.1663 2.88 15.1663 6.5V10.5C15.1663 14.12 13.6197 15.6667 9.99968 15.6667ZM5.99968 2.33334C2.92634 2.33334 1.83301 3.42667 1.83301 6.5V10.5C1.83301 13.5733 2.92634 14.6667 5.99968 14.6667H9.99968C13.073 14.6667 14.1663 13.5733 14.1663 10.5V6.5C14.1663 3.42667 13.073 2.33334 9.99968 2.33334H5.99968Z"
|
|
34
|
+
fill={fill}
|
|
35
|
+
stroke="#F2353C"
|
|
36
|
+
stroke-width="0.4"
|
|
37
|
+
/>
|
|
38
|
+
</svg>
|
|
39
|
+
);
|
|
40
|
+
};
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { AcademicsIcon } from './IconComponents/AcademicIcon';
|
|
2
2
|
import { AccordionArrow } from './IconComponents/AccordionArrow';
|
|
3
3
|
import { ActiveDevicesIcon } from './IconComponents/ActiveDevicesIcon';
|
|
4
|
+
import { AddSquare } from './IconComponents/AddSquare';
|
|
4
5
|
import { AdminIcon } from './IconComponents/AdminIcon';
|
|
5
6
|
import { AdministratorIcon } from './IconComponents/AdministratorIcon';
|
|
6
7
|
import { AdmissionIcon } from './IconComponents/AdmissionsIcon';
|
|
7
8
|
import { ErrorFilledIcon } from './IconComponents/AlertFilledIcon';
|
|
9
|
+
import { ApproveIcon } from './IconComponents/ApproveIcon';
|
|
8
10
|
import { AppsIcon } from './IconComponents/AppsIcon';
|
|
9
11
|
import { ArchiveIcon } from './IconComponents/ArchiveIcon';
|
|
10
12
|
import { ArrowBackIcon } from './IconComponents/ArrowBackIcon';
|
|
@@ -37,6 +39,7 @@ import { DashBoardIcon } from './IconComponents/DashBoardIcon';
|
|
|
37
39
|
import { DeleteIcon } from './IconComponents/DeleteIcon';
|
|
38
40
|
import { DeviceIcon } from './IconComponents/DeviceIcon';
|
|
39
41
|
import { DocumentIcon } from './IconComponents/DocumentIcon';
|
|
42
|
+
import { DoneSquare } from './IconComponents/DoneSquare';
|
|
40
43
|
import { DownloadIcon } from './IconComponents/DownloadIcon';
|
|
41
44
|
import { EditIcon } from './IconComponents/EditIcon';
|
|
42
45
|
import { EmailIcon } from './IconComponents/EmailIcon';
|
|
@@ -64,6 +67,7 @@ import { LeftIcon } from './IconComponents/LeftIcon';
|
|
|
64
67
|
import { LocationIcon } from './IconComponents/LocationIcon';
|
|
65
68
|
import { LogoutIcon } from './IconComponents/LogoutIcon';
|
|
66
69
|
import { ManageUserIcon } from './IconComponents/ManageUsersIcon';
|
|
70
|
+
import { MinusSquare } from './IconComponents/MinusSquare';
|
|
67
71
|
import { NavigationIcon } from './IconComponents/NavigationIcon';
|
|
68
72
|
import { NoteIcon } from './IconComponents/NoteIcon';
|
|
69
73
|
import { NoticeBoardIcon } from './IconComponents/NoticeBoardIcon';
|
|
@@ -77,6 +81,7 @@ import QuizIcon from './IconComponents/QuizIcon';
|
|
|
77
81
|
import { RedirectIcon } from './IconComponents/RedirectIcon';
|
|
78
82
|
import { RedoIcon } from './IconComponents/RedoIcon';
|
|
79
83
|
import { RegistrationIcon } from './IconComponents/RegistrationsIcon';
|
|
84
|
+
import { RejectIcon } from './IconComponents/RejectIcon';
|
|
80
85
|
import { ReportIcon } from './IconComponents/ReportsIcon';
|
|
81
86
|
import { ResourcesIcon } from './IconComponents/ResourcesIcon';
|
|
82
87
|
import { RightIcon } from './IconComponents/RightIcon';
|
|
@@ -112,8 +117,13 @@ export const Icons = {
|
|
|
112
117
|
SmsIcon,
|
|
113
118
|
EmailIcon,
|
|
114
119
|
TextLocalIcon,
|
|
120
|
+
ApproveIcon,
|
|
121
|
+
RejectIcon,
|
|
115
122
|
ArrowBackIcon,
|
|
116
123
|
CollapseIcon,
|
|
124
|
+
MinusSquare,
|
|
125
|
+
AddSquare,
|
|
126
|
+
DoneSquare,
|
|
117
127
|
ExpandIcon,
|
|
118
128
|
AppsIcon,
|
|
119
129
|
CareerIcon,
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Timeline as MuiTimeline,
|
|
3
|
+
TimelineProps as MuiTimelineProps,
|
|
4
|
+
TimelineConnector,
|
|
5
|
+
TimelineContent,
|
|
6
|
+
TimelineDot,
|
|
7
|
+
TimelineItem,
|
|
8
|
+
timelineItemClasses,
|
|
9
|
+
TimelineOppositeContent,
|
|
10
|
+
TimelineSeparator,
|
|
11
|
+
} from '@mui/lab';
|
|
12
|
+
import { useTheme } from '@mui/material';
|
|
13
|
+
import { ReactNode } from 'react';
|
|
14
|
+
import { AddSquare } from '../../Assets/Icons/IconComponents/AddSquare';
|
|
15
|
+
import { DoneSquare } from '../../Assets/Icons/IconComponents/DoneSquare';
|
|
16
|
+
import { MinusSquare } from '../../Assets/Icons/IconComponents/MinusSquare';
|
|
17
|
+
|
|
18
|
+
export type TimelineItems = {
|
|
19
|
+
timelineContent: ReactNode;
|
|
20
|
+
timelineOppositeContent?: ReactNode;
|
|
21
|
+
variant?: 'info' | 'success' | 'error' | 'warning';
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
export type TimelineProps = {
|
|
25
|
+
timelineItems: TimelineItems[];
|
|
26
|
+
} & MuiTimelineProps;
|
|
27
|
+
|
|
28
|
+
export const Timeline = (props: TimelineProps) => {
|
|
29
|
+
const theme = useTheme();
|
|
30
|
+
const hasOppositeContent = props.timelineItems.some(
|
|
31
|
+
(item) => item.timelineOppositeContent,
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
const getDotVariant = (variant?: string) => {
|
|
35
|
+
switch (variant) {
|
|
36
|
+
case 'info':
|
|
37
|
+
return <AddSquare />;
|
|
38
|
+
case 'success':
|
|
39
|
+
return <DoneSquare />;
|
|
40
|
+
case 'error':
|
|
41
|
+
return <MinusSquare />;
|
|
42
|
+
case 'warning':
|
|
43
|
+
return <MinusSquare color={theme.palette.highlight.highlightOrange} />;
|
|
44
|
+
default:
|
|
45
|
+
return <DoneSquare />;
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
return (
|
|
49
|
+
<MuiTimeline
|
|
50
|
+
{...props}
|
|
51
|
+
sx={
|
|
52
|
+
hasOppositeContent ||
|
|
53
|
+
props.position == 'alternate' ||
|
|
54
|
+
props.position == 'alternate-reverse'
|
|
55
|
+
? { ...props.sx }
|
|
56
|
+
: {
|
|
57
|
+
[`& .${timelineItemClasses.root}:before`]: {
|
|
58
|
+
flex: 0,
|
|
59
|
+
padding: 0,
|
|
60
|
+
},
|
|
61
|
+
...props.sx,
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
>
|
|
65
|
+
{props.timelineItems.map((item, index) => (
|
|
66
|
+
<TimelineItem>
|
|
67
|
+
{item.timelineOppositeContent && (
|
|
68
|
+
<TimelineOppositeContent>
|
|
69
|
+
{item.timelineOppositeContent}
|
|
70
|
+
</TimelineOppositeContent>
|
|
71
|
+
)}
|
|
72
|
+
<TimelineSeparator>
|
|
73
|
+
<TimelineDot>{getDotVariant(item.variant)}</TimelineDot>
|
|
74
|
+
{index < props.timelineItems.length - 1 && <TimelineConnector />}
|
|
75
|
+
</TimelineSeparator>
|
|
76
|
+
<TimelineContent>{item.timelineContent}</TimelineContent>
|
|
77
|
+
</TimelineItem>
|
|
78
|
+
))}
|
|
79
|
+
</MuiTimeline>
|
|
80
|
+
);
|
|
81
|
+
};
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { Stack, Typography } from '@mui/material';
|
|
2
|
+
import { Meta } from '@storybook/react';
|
|
3
|
+
import { Timeline, TimelineProps } from '../../components/export';
|
|
4
|
+
|
|
5
|
+
// Define the default export with Meta type including the component type
|
|
6
|
+
export default {
|
|
7
|
+
title: 'DataDisplay/Timeline',
|
|
8
|
+
component: Timeline,
|
|
9
|
+
tags: ['autodocs'],
|
|
10
|
+
argTypes: {
|
|
11
|
+
position: {
|
|
12
|
+
control: {
|
|
13
|
+
type: 'select',
|
|
14
|
+
options: ['left', 'right', 'alternate'],
|
|
15
|
+
},
|
|
16
|
+
description: 'Position of the Timeline items.',
|
|
17
|
+
},
|
|
18
|
+
timelineItems: {
|
|
19
|
+
control: 'object',
|
|
20
|
+
description:
|
|
21
|
+
'Array of timeline items containing content and optional variants.',
|
|
22
|
+
},
|
|
23
|
+
sx: {
|
|
24
|
+
control: 'object',
|
|
25
|
+
description: 'Custom styling for the Timeline component.',
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
} as Meta<typeof Timeline>;
|
|
29
|
+
|
|
30
|
+
// Define stories directly as objects with render function
|
|
31
|
+
export const DefaultTimeline = {
|
|
32
|
+
render: (args: TimelineProps) => <Timeline {...args} />,
|
|
33
|
+
args: {
|
|
34
|
+
position: 'right',
|
|
35
|
+
timelineItems: [
|
|
36
|
+
{
|
|
37
|
+
timelineContent: (
|
|
38
|
+
<Stack>
|
|
39
|
+
<Typography>Requirement Gathering</Typography>
|
|
40
|
+
</Stack>
|
|
41
|
+
),
|
|
42
|
+
variant: 'info',
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
timelineContent: (
|
|
46
|
+
<Stack>
|
|
47
|
+
<Typography>Design Phase</Typography>
|
|
48
|
+
</Stack>
|
|
49
|
+
),
|
|
50
|
+
variant: 'warning',
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
timelineContent: (
|
|
54
|
+
<Stack>
|
|
55
|
+
<Typography>Development Phase</Typography>
|
|
56
|
+
</Stack>
|
|
57
|
+
),
|
|
58
|
+
variant: 'success',
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
timelineContent: (
|
|
62
|
+
<Stack>
|
|
63
|
+
<Typography>Testing Phase</Typography>
|
|
64
|
+
</Stack>
|
|
65
|
+
),
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
timelineContent: (
|
|
69
|
+
<Stack direction="row" justifyContent="space-between">
|
|
70
|
+
<Typography>Deployment</Typography>
|
|
71
|
+
<Typography>Launch to production.</Typography>
|
|
72
|
+
</Stack>
|
|
73
|
+
),
|
|
74
|
+
variant: 'error',
|
|
75
|
+
},
|
|
76
|
+
],
|
|
77
|
+
},
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
export const AlternatePositionTimeline = {
|
|
81
|
+
render: (args: TimelineProps) => <Timeline {...args} />,
|
|
82
|
+
args: {
|
|
83
|
+
position: 'alternate',
|
|
84
|
+
timelineItems: [
|
|
85
|
+
{
|
|
86
|
+
timelineContent: (
|
|
87
|
+
<Stack>
|
|
88
|
+
<Typography>Initial Planning</Typography>
|
|
89
|
+
</Stack>
|
|
90
|
+
),
|
|
91
|
+
variant: 'info',
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
timelineContent: (
|
|
95
|
+
<Stack>
|
|
96
|
+
<Typography>Requirement Finalization</Typography>
|
|
97
|
+
</Stack>
|
|
98
|
+
),
|
|
99
|
+
variant: 'warning',
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
timelineContent: (
|
|
103
|
+
<Stack>
|
|
104
|
+
<Typography>Development</Typography>
|
|
105
|
+
</Stack>
|
|
106
|
+
),
|
|
107
|
+
variant: 'success',
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
timelineContent: (
|
|
111
|
+
<Stack>
|
|
112
|
+
<Typography>Release</Typography>
|
|
113
|
+
</Stack>
|
|
114
|
+
),
|
|
115
|
+
},
|
|
116
|
+
],
|
|
117
|
+
},
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
export const SimpleTimeline = {
|
|
121
|
+
render: (args: TimelineProps) => <Timeline {...args} />,
|
|
122
|
+
args: {
|
|
123
|
+
position: 'right',
|
|
124
|
+
timelineItems: [
|
|
125
|
+
{
|
|
126
|
+
timelineContent: (
|
|
127
|
+
<Stack>
|
|
128
|
+
<Typography>Planning</Typography>
|
|
129
|
+
</Stack>
|
|
130
|
+
),
|
|
131
|
+
variant: 'info',
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
timelineContent: (
|
|
135
|
+
<Stack>
|
|
136
|
+
<Typography>Execution</Typography>
|
|
137
|
+
</Stack>
|
|
138
|
+
),
|
|
139
|
+
variant: 'success',
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
timelineContent: (
|
|
143
|
+
<Stack>
|
|
144
|
+
<Typography>Wrap-Up</Typography>
|
|
145
|
+
</Stack>
|
|
146
|
+
),
|
|
147
|
+
},
|
|
148
|
+
],
|
|
149
|
+
},
|
|
150
|
+
};
|
|
@@ -31,6 +31,39 @@ export const getCommonTheme = (mode: Theme) => {
|
|
|
31
31
|
},
|
|
32
32
|
},
|
|
33
33
|
},
|
|
34
|
+
MuiTimelineConnector: {
|
|
35
|
+
styleOverrides: {
|
|
36
|
+
root: {
|
|
37
|
+
minHeight: '24px',
|
|
38
|
+
backgroundColor: ColorTokens.border.primary,
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
MuiTimelineContent: {
|
|
43
|
+
styleOverrides: {
|
|
44
|
+
root: {
|
|
45
|
+
margin: '12px 0px',
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
MuiTimelineOppositeContent: {
|
|
50
|
+
styleOverrides: {
|
|
51
|
+
root: {
|
|
52
|
+
margin: '12px 0px',
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
|
|
57
|
+
MuiTimelineDot: {
|
|
58
|
+
styleOverrides: {
|
|
59
|
+
root: {
|
|
60
|
+
backgroundColor: ColorTokens.surface.grey,
|
|
61
|
+
boxShadow: 'none',
|
|
62
|
+
padding: '12px',
|
|
63
|
+
margin: '8px 0px',
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
},
|
|
34
67
|
MuiAccordionSummary: {
|
|
35
68
|
styleOverrides: {
|
|
36
69
|
root: {
|