@campxdev/react-blueprint 1.6.1 → 1.6.3-alpha.1
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/AcademicFeesIcon.tsx +37 -0
- 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/OnlineTransactions.tsx +36 -0
- package/src/components/Assets/Icons/IconComponents/OpenPaymentsIcon.tsx +42 -0
- package/src/components/Assets/Icons/IconComponents/RejectIcon.tsx +40 -0
- package/src/components/Assets/Icons/IconComponents/TransactionCardIcon.tsx +49 -0
- package/src/components/Assets/Icons/Icons.tsx +18 -0
- package/src/components/DataDisplay/Timeline/Timeline.tsx +81 -0
- package/src/components/DataDisplay/export.ts +1 -0
- package/src/components/Layout/PageHeader/components/DensitySelector/DensitySelector.tsx +3 -3
- package/src/components/Layout/PageHeader/components/TableColumnsSelector/TableColumnsSelector.tsx +3 -5
- package/src/hooks/usePageHeader.ts +1 -1
- package/src/redux/export.ts +1 -2
- package/src/redux/reducers.ts +5 -0
- package/src/redux/slices/pageHeaderSlice.ts +1 -3
- package/src/redux/store.ts +3 -5
- 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.1",
|
|
3
|
+
"version": "1.6.3-alpha.1",
|
|
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,37 @@
|
|
|
1
|
+
export const AcademicFeesIcon = ({ size = 16 }) => {
|
|
2
|
+
return (
|
|
3
|
+
<svg
|
|
4
|
+
width={size}
|
|
5
|
+
height={size}
|
|
6
|
+
viewBox="0 0 20 20"
|
|
7
|
+
fill="none"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
>
|
|
10
|
+
<g clip-path="url(#clip0_34_1190)">
|
|
11
|
+
<path
|
|
12
|
+
d="M10.0082 14.1669C9.30939 14.1757 8.62216 13.988 8.02487 13.6252L3.0082 10.3502C2.55027 10.0523 2.17399 9.64467 1.91351 9.16444C1.65303 8.6842 1.5166 8.14652 1.5166 7.6002C1.5166 7.05387 1.65303 6.51619 1.91351 6.03596C2.17399 5.55573 2.55027 5.14814 3.0082 4.8502L8.0332 1.58353C8.63361 1.2269 9.31934 1.03937 10.0177 1.04084C10.716 1.04231 11.401 1.23271 11.9999 1.59186L16.9915 4.86687C17.4472 5.16458 17.8215 5.57116 18.0805 6.04985C18.3395 6.52854 18.4752 7.06424 18.4752 7.60853C18.4752 8.15282 18.3395 8.68853 18.0805 9.16722C17.8215 9.64591 17.4472 10.0525 16.9915 10.3502L11.9999 13.6244C11.4016 13.9922 10.7103 14.1805 10.0082 14.1669ZM10.0082 2.29186C9.55354 2.27741 9.10458 2.39617 8.71653 2.63353L3.69987 5.9002C3.41609 6.08386 3.18281 6.33565 3.02129 6.63259C2.85977 6.92952 2.77515 7.26217 2.77515 7.6002C2.77515 7.93822 2.85977 8.27087 3.02129 8.56781C3.18281 8.86475 3.41609 9.11653 3.69987 9.3002L8.71653 12.5752C9.11407 12.7965 9.56153 12.9127 10.0165 12.9127C10.4715 12.9127 10.919 12.7965 11.3165 12.5752L16.3082 9.3002C16.5898 9.11491 16.821 8.86256 16.9809 8.56584C17.1409 8.26911 17.2246 7.93729 17.2246 7.6002C17.2246 7.2631 17.1409 6.93129 16.9809 6.63456C16.821 6.33783 16.5898 6.08549 16.3082 5.9002L11.3165 2.62436C10.9184 2.39741 10.4664 2.28224 10.0082 2.29103V2.29186Z"
|
|
13
|
+
fill="#121212"
|
|
14
|
+
stroke="black"
|
|
15
|
+
stroke-width="0.4"
|
|
16
|
+
/>
|
|
17
|
+
<path
|
|
18
|
+
d="M10.0003 18.9583C9.64738 18.9624 9.29599 18.9118 8.95859 18.8083L6.30026 17.925C5.65947 17.6866 5.10411 17.263 4.70491 16.708C4.3057 16.1529 4.08071 15.4917 4.05859 14.8083L4.06693 10.9C4.06802 10.7346 4.13422 10.5762 4.25119 10.4593C4.36817 10.3423 4.5265 10.2761 4.69193 10.275C4.85735 10.2761 5.01569 10.3423 5.13266 10.4593C5.24964 10.5762 5.31584 10.7346 5.31693 10.9L5.30859 14.8083C5.33543 15.2288 5.48022 15.6332 5.72637 15.9751C5.97252 16.3171 6.31005 16.5828 6.70026 16.7417L9.35859 17.625C9.77951 17.7333 10.221 17.7333 10.6419 17.625L13.3003 16.7417C13.6894 16.5835 14.0262 16.3192 14.2723 15.9788C14.5183 15.6384 14.6638 15.2357 14.6919 14.8167V10.95C14.6919 10.7842 14.7578 10.6253 14.875 10.5081C14.9922 10.3908 15.1512 10.325 15.3169 10.325C15.4827 10.325 15.6417 10.3908 15.7589 10.5081C15.8761 10.6253 15.9419 10.7842 15.9419 10.95V14.8167C15.917 15.4992 15.6909 16.1592 15.2921 16.7137C14.8932 17.2682 14.3394 17.6925 13.7003 17.9333L11.0419 18.8167C10.7032 18.9132 10.3525 18.9609 10.0003 18.9583Z"
|
|
19
|
+
fill="#121212"
|
|
20
|
+
stroke="black"
|
|
21
|
+
stroke-width="0.4"
|
|
22
|
+
/>
|
|
23
|
+
<path
|
|
24
|
+
d="M17.833 13.125C17.6676 13.1239 17.5092 13.0577 17.3923 12.9407C17.2753 12.8238 17.2091 12.6654 17.208 12.5V7.5C17.2091 7.33458 17.2753 7.17624 17.3923 7.05926C17.5092 6.94229 17.6676 6.87609 17.833 6.875C17.9984 6.87609 18.1568 6.94229 18.2737 7.05926C18.3907 7.17624 18.4569 7.33458 18.458 7.5V12.5C18.4569 12.6654 18.3907 12.8238 18.2737 12.9407C18.1568 13.0577 17.9984 13.1239 17.833 13.125Z"
|
|
25
|
+
fill="#121212"
|
|
26
|
+
stroke="black"
|
|
27
|
+
stroke-width="0.4"
|
|
28
|
+
/>
|
|
29
|
+
</g>
|
|
30
|
+
<defs>
|
|
31
|
+
<clipPath id="clip0_34_1190">
|
|
32
|
+
<rect width="20" height="20" fill="white" />
|
|
33
|
+
</clipPath>
|
|
34
|
+
</defs>
|
|
35
|
+
</svg>
|
|
36
|
+
);
|
|
37
|
+
};
|
|
@@ -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,36 @@
|
|
|
1
|
+
export const OnlineTransactionIcon = ({ size = 16 }) => {
|
|
2
|
+
return (
|
|
3
|
+
<svg
|
|
4
|
+
width={size}
|
|
5
|
+
height={size}
|
|
6
|
+
viewBox="0 0 20 20"
|
|
7
|
+
fill="none"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
>
|
|
10
|
+
<path
|
|
11
|
+
d="M14.1668 18.125H13.3335C13.1677 18.125 13.0088 18.0592 12.8916 17.942C12.7744 17.8248 12.7085 17.6658 12.7085 17.5C12.7085 17.3343 12.7744 17.1753 12.8916 17.0581C13.0088 16.9409 13.1677 16.875 13.3335 16.875H14.1668C14.6404 16.9079 15.1155 16.8388 15.5601 16.6724C16.0047 16.506 16.4084 16.2462 16.7441 15.9106C17.0797 15.5749 17.3395 15.1712 17.5059 14.7266C17.6722 14.282 17.7413 13.8069 17.7085 13.3334V6.6667C17.7413 6.19314 17.6722 5.71805 17.5059 5.27346C17.3395 4.82888 17.0797 4.42515 16.7441 4.08949C16.4084 3.75383 16.0047 3.49405 15.5601 3.32768C15.1155 3.1613 14.6404 3.0922 14.1668 3.12503H5.83351C5.35995 3.0922 4.88486 3.1613 4.44027 3.32768C3.99569 3.49405 3.59196 3.75383 3.2563 4.08949C2.92064 4.42515 2.66086 4.82888 2.49449 5.27346C2.32811 5.71805 2.25901 6.19314 2.29184 6.6667V7.50003C2.29075 7.66545 2.22455 7.82379 2.10758 7.94076C1.9906 8.05774 1.83226 8.12394 1.66684 8.12503C1.50142 8.12394 1.34308 8.05774 1.2261 7.94076C1.10913 7.82379 1.04293 7.66545 1.04184 7.50003V6.6667C1.00466 6.02772 1.10313 5.38812 1.33078 4.78992C1.55843 4.19172 1.91011 3.64847 2.3627 3.19589C2.81528 2.7433 3.35853 2.39162 3.95673 2.16397C4.55493 1.93632 5.19453 1.83785 5.83351 1.87503H14.1668C14.8058 1.83785 15.4454 1.93632 16.0436 2.16397C16.6418 2.39162 17.1851 2.7433 17.6377 3.19589C18.0902 3.64847 18.4419 4.19172 18.6696 4.78992C18.8972 5.38812 18.9957 6.02772 18.9585 6.6667V13.3334C18.9957 13.9723 18.8972 14.6119 18.6696 15.2101C18.4419 15.8083 18.0902 16.3516 17.6377 16.8042C17.1851 17.2568 16.6418 17.6084 16.0436 17.8361C15.4454 18.0637 14.8058 18.1622 14.1668 18.125Z"
|
|
12
|
+
fill="#121212"
|
|
13
|
+
stroke="#121212"
|
|
14
|
+
stroke-width="0.4"
|
|
15
|
+
/>
|
|
16
|
+
<path
|
|
17
|
+
d="M10.2427 17.55C10.092 17.5488 9.94674 17.4934 9.83351 17.3939C9.72028 17.2945 9.64663 17.1576 9.62602 17.0083C9.44042 15.3131 8.68181 13.732 7.47565 12.5264C6.26948 11.3209 4.68799 10.5631 2.99269 10.3783C2.82759 10.3573 2.67759 10.2716 2.5757 10.14C2.4738 10.0084 2.42836 9.84174 2.44935 9.67665C2.47035 9.51155 2.55607 9.36155 2.68766 9.25966C2.81925 9.15776 2.98592 9.11232 3.15102 9.13331C5.12213 9.34692 6.96107 10.2277 8.36302 11.6296C9.76497 13.0316 10.6457 14.8705 10.8594 16.8416C10.8799 17.0062 10.8345 17.1722 10.733 17.3034C10.6315 17.4346 10.4822 17.5202 10.3177 17.5416C10.2934 17.549 10.268 17.5518 10.2427 17.55Z"
|
|
18
|
+
fill="#121212"
|
|
19
|
+
stroke="#121212"
|
|
20
|
+
stroke-width="0.4"
|
|
21
|
+
/>
|
|
22
|
+
<path
|
|
23
|
+
d="M7.44177 18.4417C7.29107 18.4405 7.14583 18.3851 7.0326 18.2857C6.91937 18.1862 6.84572 18.0493 6.82511 17.9C6.69292 16.6926 6.15254 15.5664 5.29335 14.7079C4.43416 13.8493 3.30764 13.3097 2.10011 13.1784C1.93501 13.1574 1.78502 13.0716 1.68312 12.9401C1.58123 12.8085 1.53578 12.6418 1.55677 12.4767C1.57777 12.3116 1.66349 12.1616 1.79508 12.0597C1.92667 11.9578 2.09334 11.9124 2.25844 11.9334C3.7411 12.0953 5.12409 12.7584 6.17872 13.8131C7.23336 14.8677 7.89648 16.2507 8.05844 17.7334C8.07899 17.8979 8.03355 18.064 7.93205 18.1951C7.83055 18.3263 7.68124 18.412 7.51677 18.4334C7.4924 18.4402 7.46706 18.4431 7.44177 18.4417Z"
|
|
24
|
+
fill="#121212"
|
|
25
|
+
stroke="#121212"
|
|
26
|
+
stroke-width="0.4"
|
|
27
|
+
/>
|
|
28
|
+
<path
|
|
29
|
+
d="M4.27621 18.975C4.12551 18.9738 3.98027 18.9184 3.86704 18.819C3.75381 18.7195 3.68016 18.5826 3.65955 18.4333C3.6011 17.899 3.36186 17.4006 2.98146 17.0208C2.60106 16.641 2.10233 16.4026 1.56788 16.345C1.40278 16.324 1.25279 16.2383 1.15089 16.1067C1.049 15.9751 1.00355 15.8084 1.02455 15.6433C1.04554 15.4782 1.13126 15.3282 1.26285 15.2263C1.39444 15.1244 1.56112 15.079 1.72621 15.1C2.53493 15.1962 3.28779 15.5616 3.86367 16.1375C4.43956 16.7134 4.805 17.4663 4.90121 18.275C4.92176 18.4396 4.87632 18.6056 4.77482 18.7368C4.67332 18.8679 4.52402 18.9536 4.35955 18.975H4.27621Z"
|
|
30
|
+
fill="#121212"
|
|
31
|
+
stroke="#121212"
|
|
32
|
+
stroke-width="0.4"
|
|
33
|
+
/>
|
|
34
|
+
</svg>
|
|
35
|
+
);
|
|
36
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
export const OpenPaymentsIcon = ({ size = 16 }) => {
|
|
2
|
+
return (
|
|
3
|
+
<svg
|
|
4
|
+
width={size}
|
|
5
|
+
height={size}
|
|
6
|
+
viewBox="0 0 20 21"
|
|
7
|
+
fill="none"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
>
|
|
10
|
+
<g clip-path="url(#clip0_34_1204)">
|
|
11
|
+
<path
|
|
12
|
+
d="M10.833 8.625H5.83301C5.66758 8.62391 5.50925 8.55771 5.39227 8.44073C5.2753 8.32376 5.2091 8.16542 5.20801 8C5.2091 7.83458 5.2753 7.67624 5.39227 7.55926C5.50925 7.44229 5.66758 7.37609 5.83301 7.375H10.833C10.9984 7.37609 11.1568 7.44229 11.2737 7.55926C11.3907 7.67624 11.4569 7.83458 11.458 8C11.4569 8.16542 11.3907 8.32376 11.2737 8.44073C11.1568 8.55771 10.9984 8.62391 10.833 8.625Z"
|
|
13
|
+
fill="#121212"
|
|
14
|
+
stroke="#121212"
|
|
15
|
+
stroke-width="0.4"
|
|
16
|
+
/>
|
|
17
|
+
<path
|
|
18
|
+
d="M15.867 12.8333C15.2698 12.8434 14.6902 12.6304 14.2418 12.2359C13.7933 11.8413 13.5081 11.2937 13.442 10.7C13.4094 10.3589 13.4539 10.0147 13.5722 9.69308C13.6905 9.37143 13.8795 9.08046 14.1253 8.84168C14.3382 8.62514 14.5926 8.45375 14.8732 8.33777C15.1539 8.22179 15.455 8.1636 15.7587 8.16668H17.5003C17.8883 8.17214 18.2586 8.32982 18.5314 8.60573C18.8042 8.88164 18.9576 9.25369 18.9587 9.64168V11.3583C18.9588 11.7424 18.8092 12.1114 18.5415 12.3869C18.2738 12.6623 17.9093 12.8225 17.5253 12.8333H15.867ZM17.4753 9.41668H15.7645C15.6251 9.41431 15.4867 9.44044 15.3577 9.49346C15.2287 9.54648 15.1119 9.62527 15.0145 9.72501C14.8977 9.835 14.8076 9.97032 14.7513 10.1206C14.6949 10.2708 14.6738 10.432 14.6895 10.5917C14.7295 10.8728 14.8717 11.1294 15.089 11.3123C15.3062 11.4952 15.5831 11.5917 15.867 11.5833H17.5003C17.5574 11.5801 17.6111 11.5549 17.6499 11.5129C17.6888 11.4709 17.7098 11.4155 17.7087 11.3583V9.64168C17.7069 9.58111 17.6815 9.52364 17.6379 9.48158C17.5943 9.43952 17.5359 9.41622 17.4753 9.41668Z"
|
|
19
|
+
fill="#121212"
|
|
20
|
+
stroke="#121212"
|
|
21
|
+
stroke-width="0.4"
|
|
22
|
+
/>
|
|
23
|
+
<path
|
|
24
|
+
d="M13.3335 18.2083H5.83351C5.19453 18.2455 4.55493 18.147 3.95673 17.9194C3.35853 17.6917 2.81528 17.34 2.36269 16.8875C1.91011 16.4349 1.55843 15.8916 1.33078 15.2934C1.10313 14.6952 1.00466 14.0556 1.04184 13.4166V7.58332C0.975872 6.42559 1.35938 5.28708 2.11238 4.40522C2.86537 3.52335 3.92974 2.96621 5.08351 2.84998C5.33176 2.81236 5.58242 2.79286 5.83351 2.79165H13.3335C13.5761 2.78975 13.8185 2.80646 14.0585 2.84165C15.2191 2.94984 16.2922 3.50499 17.0511 4.3898C17.8099 5.27461 18.1951 6.41977 18.1252 7.58332V8.79165C18.1241 8.95707 18.0579 9.11541 17.9409 9.23238C17.8239 9.34936 17.6656 9.41556 17.5002 9.41665H15.7668C15.6274 9.41428 15.489 9.44041 15.36 9.49343C15.2311 9.54645 15.1143 9.62524 15.0168 9.72498L15.0085 9.73332C14.8956 9.84239 14.8086 9.97534 14.7538 10.1224C14.699 10.2695 14.6778 10.427 14.6918 10.5833C14.7318 10.864 14.8737 11.1202 15.0904 11.3031C15.307 11.4859 15.5834 11.5827 15.8668 11.575H17.5002C17.6656 11.5761 17.8239 11.6423 17.9409 11.7592C18.0579 11.8762 18.1241 12.0346 18.1252 12.2V13.4083C18.1632 14.0479 18.0653 14.6882 17.8381 15.2872C17.6108 15.8863 17.2593 16.4304 16.8067 16.8838C16.3541 17.3372 15.8106 17.6897 15.2119 17.918C14.6133 18.1463 13.9731 18.2452 13.3335 18.2083ZM5.83351 4.04165C5.63836 4.04279 5.4435 4.05671 5.25017 4.08332C4.39685 4.16282 3.60881 4.57407 3.05558 5.22861C2.50234 5.88314 2.2281 6.72867 2.29184 7.58332V13.4166C2.25901 13.8902 2.32811 14.3653 2.49449 14.8099C2.66086 15.2545 2.92064 15.6582 3.2563 15.9939C3.59195 16.3295 3.99569 16.5893 4.44027 16.7557C4.88486 16.922 5.35995 16.9911 5.83351 16.9583H13.3335C13.8071 16.9911 14.2822 16.922 14.7267 16.7557C15.1713 16.5893 15.5751 16.3295 15.9107 15.9939C16.2464 15.6582 16.5062 15.2545 16.6725 14.8099C16.8389 14.3653 16.908 13.8902 16.8752 13.4166V12.8333H15.8668C15.2696 12.8434 14.6901 12.6304 14.2416 12.2358C13.7931 11.8413 13.5079 11.2936 13.4418 10.7C13.416 10.3783 13.4569 10.0547 13.5619 9.74951C13.6668 9.44431 13.8336 9.16406 14.0519 8.92628C14.2701 8.6885 14.535 8.49831 14.8301 8.3676C15.1252 8.23689 15.4441 8.16848 15.7668 8.16665H16.8752V7.58332C16.9404 6.7221 16.6625 5.87002 16.1021 5.21283C15.5417 4.55564 14.7442 4.14664 13.8835 4.07498C13.7015 4.04802 13.5175 4.03686 13.3335 4.04165H5.83351Z"
|
|
25
|
+
fill="#121212"
|
|
26
|
+
stroke="#121212"
|
|
27
|
+
stroke-width="0.4"
|
|
28
|
+
/>
|
|
29
|
+
</g>
|
|
30
|
+
<defs>
|
|
31
|
+
<clipPath id="clip0_34_1204">
|
|
32
|
+
<rect
|
|
33
|
+
width="20"
|
|
34
|
+
height="20"
|
|
35
|
+
fill="white"
|
|
36
|
+
transform="translate(0 0.5)"
|
|
37
|
+
/>
|
|
38
|
+
</clipPath>
|
|
39
|
+
</defs>
|
|
40
|
+
</svg>
|
|
41
|
+
);
|
|
42
|
+
};
|
|
@@ -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
|
+
};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
export const TransactionCardIcon = ({ size = 16 }) => {
|
|
2
|
+
return (
|
|
3
|
+
<svg
|
|
4
|
+
width={size}
|
|
5
|
+
height={size}
|
|
6
|
+
viewBox="0 0 20 20"
|
|
7
|
+
fill="none"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
>
|
|
10
|
+
<g clip-path="url(#clip0_43_272)">
|
|
11
|
+
<path
|
|
12
|
+
d="M8.78359 18.2834C8.68644 18.2841 8.59049 18.2618 8.50359 18.2184C8.41669 18.1749 8.34131 18.1115 8.28359 18.0334L7.44193 16.9084C7.36686 16.8002 7.26901 16.7099 7.15528 16.6437C7.04154 16.5774 6.91467 16.5369 6.78359 16.525C6.65146 16.5221 6.5203 16.5482 6.39935 16.6014C6.2784 16.6547 6.17061 16.7339 6.08359 16.8334C4.87526 18.125 3.95859 18.0167 3.51693 17.85C3.07526 17.6834 2.30859 17.1 2.30859 15.25V5.86669C2.30859 2.16669 3.37526 1.04169 6.86693 1.04169H13.1586C16.6503 1.04169 17.7169 2.16669 17.7169 5.86669V9.41669C17.7169 9.58245 17.6511 9.74142 17.5339 9.85863C17.4167 9.97584 17.2577 10.0417 17.0919 10.0417C16.9262 10.0417 16.7672 9.97584 16.65 9.85863C16.5328 9.74142 16.4669 9.58245 16.4669 9.41669V5.86669C16.4669 2.85835 15.9419 2.29169 13.1586 2.29169H6.86693C4.08359 2.29169 3.55859 2.85835 3.55859 5.86669V15.25C3.55859 16.125 3.77526 16.6084 3.97526 16.6834C4.12526 16.7417 4.53359 16.6584 5.16693 15.9834C5.3786 15.7493 5.63906 15.5646 5.92992 15.4422C6.22077 15.3198 6.53494 15.2628 6.85026 15.275C7.16404 15.2968 7.46921 15.3872 7.74424 15.5399C8.01926 15.6925 8.25743 15.9036 8.44193 16.1584L9.29193 17.2834C9.39138 17.416 9.43409 17.5827 9.41065 17.7467C9.3872 17.9108 9.29954 18.0589 9.16693 18.1584C9.05607 18.2405 8.92154 18.2843 8.78359 18.2834Z"
|
|
13
|
+
fill="#121212"
|
|
14
|
+
stroke="#121212"
|
|
15
|
+
stroke-width="0.4"
|
|
16
|
+
/>
|
|
17
|
+
<path
|
|
18
|
+
d="M15.1667 18.4583C14.5156 18.4583 13.8792 18.2653 13.3379 17.9036C12.7966 17.5419 12.3747 17.0278 12.1256 16.4263C11.8764 15.8249 11.8112 15.163 11.9382 14.5245C12.0653 13.886 12.3788 13.2995 12.8391 12.8391C13.2995 12.3788 13.886 12.0653 14.5245 11.9382C15.163 11.8112 15.8249 11.8764 16.4263 12.1256C17.0278 12.3747 17.5419 12.7966 17.9036 13.3379C18.2653 13.8792 18.4583 14.5156 18.4583 15.1667C18.4579 16.0395 18.111 16.8765 17.4937 17.4937C16.8765 18.111 16.0395 18.4579 15.1667 18.4583ZM15.1667 13.125C14.7629 13.125 14.3681 13.2447 14.0324 13.4691C13.6966 13.6934 13.4349 14.0123 13.2804 14.3854C13.1259 14.7584 13.0855 15.1689 13.1642 15.565C13.243 15.961 13.4375 16.3248 13.723 16.6103C14.0085 16.8959 14.3723 17.0903 14.7684 17.1691C15.1644 17.2479 15.5749 17.2075 15.948 17.0529C16.321 16.8984 16.6399 16.6367 16.8643 16.301C17.0886 15.9652 17.2083 15.5705 17.2083 15.1667C17.2075 14.6255 16.9921 14.1067 16.6094 13.724C16.2267 13.3413 15.7079 13.1259 15.1667 13.125Z"
|
|
19
|
+
fill="#121212"
|
|
20
|
+
stroke="#121212"
|
|
21
|
+
stroke-width="0.4"
|
|
22
|
+
/>
|
|
23
|
+
<path
|
|
24
|
+
d="M18.3326 18.9608C18.2505 18.9611 18.1691 18.9451 18.0933 18.9136C18.0175 18.8821 17.9486 18.8359 17.8909 18.7775L17.0576 17.9442C16.9402 17.827 16.8742 17.6681 16.874 17.5023C16.8739 17.3364 16.9396 17.1774 17.0567 17.06C17.1739 16.9426 17.3328 16.8766 17.4986 16.8765C17.6644 16.8763 17.8235 16.942 17.9409 17.0592L18.7742 17.8925C18.8905 18.0101 18.9556 18.1688 18.9556 18.3342C18.9556 18.4995 18.8905 18.6582 18.7742 18.7758C18.7166 18.8345 18.6479 18.8811 18.572 18.9128C18.4962 18.9446 18.4148 18.9609 18.3326 18.9608Z"
|
|
25
|
+
fill="#121212"
|
|
26
|
+
stroke="#121212"
|
|
27
|
+
stroke-width="0.4"
|
|
28
|
+
/>
|
|
29
|
+
<path
|
|
30
|
+
d="M13.3337 6.45831H6.66699C6.50157 6.45722 6.34323 6.39102 6.22626 6.27405C6.10928 6.15707 6.04308 5.99874 6.04199 5.83331C6.04308 5.66789 6.10928 5.50955 6.22626 5.39258C6.34323 5.2756 6.50157 5.2094 6.66699 5.20831H13.3337C13.4991 5.2094 13.6574 5.2756 13.7744 5.39258C13.8914 5.50955 13.9576 5.66789 13.9587 5.83331C13.9576 5.99874 13.8914 6.15707 13.7744 6.27405C13.6574 6.39102 13.4991 6.45722 13.3337 6.45831Z"
|
|
31
|
+
fill="#121212"
|
|
32
|
+
stroke="#121212"
|
|
33
|
+
stroke-width="0.4"
|
|
34
|
+
/>
|
|
35
|
+
<path
|
|
36
|
+
d="M12.5 9.79169H7.5C7.33458 9.7906 7.17624 9.7244 7.05926 9.60742C6.94229 9.49045 6.87609 9.33211 6.875 9.16669C6.87609 9.00126 6.94229 8.84293 7.05926 8.72595C7.17624 8.60898 7.33458 8.54278 7.5 8.54169H12.5C12.6654 8.54278 12.8238 8.60898 12.9407 8.72595C13.0577 8.84293 13.1239 9.00126 13.125 9.16669C13.1239 9.33211 13.0577 9.49045 12.9407 9.60742C12.8238 9.7244 12.6654 9.7906 12.5 9.79169Z"
|
|
37
|
+
fill="#121212"
|
|
38
|
+
stroke="#121212"
|
|
39
|
+
stroke-width="0.4"
|
|
40
|
+
/>
|
|
41
|
+
</g>
|
|
42
|
+
<defs>
|
|
43
|
+
<clipPath id="clip0_43_272">
|
|
44
|
+
<rect width="20" height="20" fill="white" />
|
|
45
|
+
</clipPath>
|
|
46
|
+
</defs>
|
|
47
|
+
</svg>
|
|
48
|
+
);
|
|
49
|
+
};
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
+
import { AcademicFeesIcon } from './IconComponents/AcademicFeesIcon';
|
|
1
2
|
import { AcademicsIcon } from './IconComponents/AcademicIcon';
|
|
2
3
|
import { AccordionArrow } from './IconComponents/AccordionArrow';
|
|
3
4
|
import { ActiveDevicesIcon } from './IconComponents/ActiveDevicesIcon';
|
|
5
|
+
import { AddSquare } from './IconComponents/AddSquare';
|
|
4
6
|
import { AdminIcon } from './IconComponents/AdminIcon';
|
|
5
7
|
import { AdministratorIcon } from './IconComponents/AdministratorIcon';
|
|
6
8
|
import { AdmissionIcon } from './IconComponents/AdmissionsIcon';
|
|
7
9
|
import { ErrorFilledIcon } from './IconComponents/AlertFilledIcon';
|
|
10
|
+
import { ApproveIcon } from './IconComponents/ApproveIcon';
|
|
8
11
|
import { AppsIcon } from './IconComponents/AppsIcon';
|
|
9
12
|
import { ArchiveIcon } from './IconComponents/ArchiveIcon';
|
|
10
13
|
import { ArrowBackIcon } from './IconComponents/ArrowBackIcon';
|
|
@@ -37,6 +40,7 @@ import { DashBoardIcon } from './IconComponents/DashBoardIcon';
|
|
|
37
40
|
import { DeleteIcon } from './IconComponents/DeleteIcon';
|
|
38
41
|
import { DeviceIcon } from './IconComponents/DeviceIcon';
|
|
39
42
|
import { DocumentIcon } from './IconComponents/DocumentIcon';
|
|
43
|
+
import { DoneSquare } from './IconComponents/DoneSquare';
|
|
40
44
|
import { DownloadIcon } from './IconComponents/DownloadIcon';
|
|
41
45
|
import { EditIcon } from './IconComponents/EditIcon';
|
|
42
46
|
import { EmailIcon } from './IconComponents/EmailIcon';
|
|
@@ -64,10 +68,13 @@ import { LeftIcon } from './IconComponents/LeftIcon';
|
|
|
64
68
|
import { LocationIcon } from './IconComponents/LocationIcon';
|
|
65
69
|
import { LogoutIcon } from './IconComponents/LogoutIcon';
|
|
66
70
|
import { ManageUserIcon } from './IconComponents/ManageUsersIcon';
|
|
71
|
+
import { MinusSquare } from './IconComponents/MinusSquare';
|
|
67
72
|
import { NavigationIcon } from './IconComponents/NavigationIcon';
|
|
68
73
|
import { NoteIcon } from './IconComponents/NoteIcon';
|
|
69
74
|
import { NoticeBoardIcon } from './IconComponents/NoticeBoardIcon';
|
|
70
75
|
import { NotificationIcon } from './IconComponents/NotificationIcon';
|
|
76
|
+
import { OnlineTransactionIcon } from './IconComponents/OnlineTransactions';
|
|
77
|
+
import { OpenPaymentsIcon } from './IconComponents/OpenPaymentsIcon';
|
|
71
78
|
import { PayxIcon } from './IconComponents/PayxIcon';
|
|
72
79
|
import { PdfIcon } from './IconComponents/PdfIcon';
|
|
73
80
|
import { PeoplexIcon } from './IconComponents/PeoplexIcon';
|
|
@@ -77,6 +84,7 @@ import QuizIcon from './IconComponents/QuizIcon';
|
|
|
77
84
|
import { RedirectIcon } from './IconComponents/RedirectIcon';
|
|
78
85
|
import { RedoIcon } from './IconComponents/RedoIcon';
|
|
79
86
|
import { RegistrationIcon } from './IconComponents/RegistrationsIcon';
|
|
87
|
+
import { RejectIcon } from './IconComponents/RejectIcon';
|
|
80
88
|
import { ReportIcon } from './IconComponents/ReportsIcon';
|
|
81
89
|
import { ResourcesIcon } from './IconComponents/ResourcesIcon';
|
|
82
90
|
import { RightIcon } from './IconComponents/RightIcon';
|
|
@@ -95,6 +103,7 @@ import { TicketSystemIcon } from './IconComponents/TicketingSystemIcon';
|
|
|
95
103
|
import { TicketsIcon } from './IconComponents/TicketsIcon';
|
|
96
104
|
import { TimeTableIcon } from './IconComponents/TimeTableIcon';
|
|
97
105
|
import TimerIcon from './IconComponents/TimerIcon';
|
|
106
|
+
import { TransactionCardIcon } from './IconComponents/TransactionCardIcon';
|
|
98
107
|
import { UmsIcon } from './IconComponents/UmsIcon';
|
|
99
108
|
import { UnCheckedCheckboxIcon } from './IconComponents/UncheckCheckBoxIcon';
|
|
100
109
|
import { UnCheckedRadioIcon } from './IconComponents/UncheckedRadioIcon';
|
|
@@ -112,8 +121,13 @@ export const Icons = {
|
|
|
112
121
|
SmsIcon,
|
|
113
122
|
EmailIcon,
|
|
114
123
|
TextLocalIcon,
|
|
124
|
+
ApproveIcon,
|
|
125
|
+
RejectIcon,
|
|
115
126
|
ArrowBackIcon,
|
|
116
127
|
CollapseIcon,
|
|
128
|
+
MinusSquare,
|
|
129
|
+
AddSquare,
|
|
130
|
+
DoneSquare,
|
|
117
131
|
ExpandIcon,
|
|
118
132
|
AppsIcon,
|
|
119
133
|
CareerIcon,
|
|
@@ -212,4 +226,8 @@ export const Icons = {
|
|
|
212
226
|
ImportIcon,
|
|
213
227
|
ExportMenuIcon,
|
|
214
228
|
NoticeBoardIcon,
|
|
229
|
+
AcademicFeesIcon,
|
|
230
|
+
OnlineTransactionIcon,
|
|
231
|
+
OpenPaymentsIcon,
|
|
232
|
+
TransactionCardIcon,
|
|
215
233
|
};
|
|
@@ -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
|
+
};
|
|
@@ -2,7 +2,8 @@ import { MenuListProps, MenuProps, Stack, useTheme } from '@mui/material';
|
|
|
2
2
|
import { GridDensity } from '@mui/x-data-grid';
|
|
3
3
|
import { capitalize } from 'lodash';
|
|
4
4
|
import { useDispatch, useSelector } from 'react-redux';
|
|
5
|
-
import {
|
|
5
|
+
import { setDensity } from '../../../../../redux/slices/pageHeaderSlice';
|
|
6
|
+
import { RootState } from '../../../../../redux/store';
|
|
6
7
|
import { Button, DropdownMenu, Icons, Typography } from '../../../../export';
|
|
7
8
|
import { DensityAnchor } from '../Anchors';
|
|
8
9
|
|
|
@@ -18,8 +19,7 @@ export const DensitySelector = ({
|
|
|
18
19
|
}: DensitySelectorProps) => {
|
|
19
20
|
const dispatch = useDispatch();
|
|
20
21
|
const density = useSelector(
|
|
21
|
-
(state: RootState) =>
|
|
22
|
-
state.pageHeaderSlice[uniqueId]?.density || 'standard',
|
|
22
|
+
(state: RootState) => state.pageHeader[uniqueId]?.density || 'standard',
|
|
23
23
|
);
|
|
24
24
|
const gridDensity: GridDensity[] = ['compact', 'standard', 'comfortable'];
|
|
25
25
|
|
package/src/components/Layout/PageHeader/components/TableColumnsSelector/TableColumnsSelector.tsx
CHANGED
|
@@ -3,10 +3,8 @@ import { MenuListProps, MenuProps, Typography, useTheme } from '@mui/material';
|
|
|
3
3
|
import { GridColDef, GridColumnVisibilityModel } from '@mui/x-data-grid';
|
|
4
4
|
import { useState } from 'react';
|
|
5
5
|
import { useDispatch, useSelector } from 'react-redux';
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
setColumnVisibilityModel,
|
|
9
|
-
} from '../../../../../redux/export';
|
|
6
|
+
import { setColumnVisibilityModel } from '../../../../../redux/slices/pageHeaderSlice';
|
|
7
|
+
import { RootState } from '../../../../../redux/store';
|
|
10
8
|
import { Button, Icons, SearchBar, SingleCheckBox } from '../../../../export';
|
|
11
9
|
import { DropdownMenu } from '../../../../Navigation/export';
|
|
12
10
|
|
|
@@ -26,7 +24,7 @@ export const TableColumnsSelector = ({
|
|
|
26
24
|
|
|
27
25
|
const columnVisibilityModel = useSelector(
|
|
28
26
|
(state: RootState) =>
|
|
29
|
-
state.
|
|
27
|
+
state.pageHeader[uniqueId]?.columnVisibilityModel ||
|
|
30
28
|
columns.reduce((acc, column) => {
|
|
31
29
|
acc[column.field] = true;
|
|
32
30
|
return acc;
|
|
@@ -10,7 +10,7 @@ export const usePageHeader = () => {
|
|
|
10
10
|
const dispatch = useDispatch();
|
|
11
11
|
const filterState = useSelector(
|
|
12
12
|
(state: RootState) =>
|
|
13
|
-
state.
|
|
13
|
+
state.pageHeader[uuidRef.current] ||
|
|
14
14
|
({} as {
|
|
15
15
|
density: GridDensity;
|
|
16
16
|
columnVisibilityModel: GridColumnVisibilityModel;
|
package/src/redux/export.ts
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export * from './
|
|
2
|
-
export * from './store';
|
|
1
|
+
export * from './reducers';
|
|
@@ -10,7 +10,7 @@ export type PageHeaderState = {
|
|
|
10
10
|
|
|
11
11
|
const initialState: PageHeaderState = {};
|
|
12
12
|
|
|
13
|
-
const pageHeaderSlice = createSlice({
|
|
13
|
+
export const pageHeaderSlice = createSlice({
|
|
14
14
|
name: 'pageHeader',
|
|
15
15
|
initialState,
|
|
16
16
|
reducers: {
|
|
@@ -31,5 +31,3 @@ const pageHeaderSlice = createSlice({
|
|
|
31
31
|
|
|
32
32
|
export const { setColumnVisibilityModel, setDensity, resetStateForUniqueId } =
|
|
33
33
|
pageHeaderSlice.actions;
|
|
34
|
-
|
|
35
|
-
export default pageHeaderSlice.reducer;
|
package/src/redux/store.ts
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
import { configureStore } from '@reduxjs/toolkit';
|
|
2
|
-
import
|
|
1
|
+
import { combineReducers, configureStore } from '@reduxjs/toolkit';
|
|
2
|
+
import { reactBlueprintReducers } from './reducers';
|
|
3
3
|
|
|
4
4
|
export const store = configureStore({
|
|
5
|
-
reducer:
|
|
6
|
-
pageHeaderSlice,
|
|
7
|
-
},
|
|
5
|
+
reducer: combineReducers(reactBlueprintReducers),
|
|
8
6
|
});
|
|
9
7
|
|
|
10
8
|
export type RootState = ReturnType<typeof store.getState>;
|
|
@@ -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: {
|