allaw-ui 5.3.6 → 5.3.7
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/dist/components/molecules/fileCard/FileCard.css +219 -0
- package/dist/components/molecules/fileCard/FileCard.d.ts +40 -0
- package/dist/components/molecules/fileCard/FileCard.js +97 -0
- package/dist/components/molecules/fileCard/FileCard.stories.d.ts +42 -0
- package/dist/components/molecules/fileCard/FileCard.stories.js +185 -0
- package/dist/components/molecules/fileCard/index.d.ts +2 -0
- package/dist/components/molecules/fileCard/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
@import "../../../styles/colors.css";
|
|
2
|
+
|
|
3
|
+
.file-card {
|
|
4
|
+
display: flex;
|
|
5
|
+
width: 100%;
|
|
6
|
+
padding: 16px;
|
|
7
|
+
justify-content: space-between;
|
|
8
|
+
align-items: flex-start;
|
|
9
|
+
border-radius: 12px;
|
|
10
|
+
border: 1px solid rgba(200, 220, 235, 0.25);
|
|
11
|
+
background: rgba(255, 255, 255, 1);
|
|
12
|
+
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
13
|
+
cursor: pointer;
|
|
14
|
+
transition: all 0.18s cubic-bezier(0.4, 0.2, 0.2, 1);
|
|
15
|
+
position: relative;
|
|
16
|
+
overflow: hidden;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.file-card::before {
|
|
20
|
+
content: "";
|
|
21
|
+
position: absolute;
|
|
22
|
+
inset: 0;
|
|
23
|
+
border-radius: 18px;
|
|
24
|
+
pointer-events: none;
|
|
25
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
26
|
+
z-index: 1;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.file-card:hover {
|
|
30
|
+
box-shadow: 0 6px 18px 0 rgba(37, 190, 235, 0.13),
|
|
31
|
+
0 2px 8px 0 rgba(114, 142, 167, 0.08);
|
|
32
|
+
transform: scale(1.01) translateY(-2px);
|
|
33
|
+
border: 1.5px solid var(--bleu-allaw, #25beeb);
|
|
34
|
+
background: rgba(255, 255, 255, 0.28);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.file-card:active {
|
|
38
|
+
transform: scale(1.01);
|
|
39
|
+
background: rgba(246, 252, 254, 0.45);
|
|
40
|
+
border: 1.5px solid var(--bleu-allaw, #25beeb);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.file-card-left {
|
|
44
|
+
display: flex;
|
|
45
|
+
align-items: center;
|
|
46
|
+
gap: 16px;
|
|
47
|
+
align-self: stretch;
|
|
48
|
+
flex: 1;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.file-card-info {
|
|
52
|
+
display: flex;
|
|
53
|
+
flex-direction: column;
|
|
54
|
+
align-items: flex-start;
|
|
55
|
+
gap: 11px;
|
|
56
|
+
align-self: stretch;
|
|
57
|
+
flex: 1;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.file-card-type {
|
|
61
|
+
color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
|
|
62
|
+
font-family: "Open Sans", sans-serif;
|
|
63
|
+
font-size: 12px;
|
|
64
|
+
font-style: normal;
|
|
65
|
+
font-weight: 600;
|
|
66
|
+
line-height: 8px;
|
|
67
|
+
text-transform: uppercase;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.file-card-type-shared,
|
|
71
|
+
.file-card-type-received,
|
|
72
|
+
.file-card-type-asked {
|
|
73
|
+
color: var(--bleu-allaw, #25beeb);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.file-card-title {
|
|
77
|
+
color: var(--Primary-Mid-black, var(--primary-black, #171e25));
|
|
78
|
+
font-family: "Open Sans", sans-serif;
|
|
79
|
+
font-size: 16px;
|
|
80
|
+
font-style: normal;
|
|
81
|
+
font-weight: 600;
|
|
82
|
+
line-height: normal;
|
|
83
|
+
margin: 0;
|
|
84
|
+
display: -webkit-box;
|
|
85
|
+
-webkit-line-clamp: 2;
|
|
86
|
+
line-clamp: 2;
|
|
87
|
+
-webkit-box-orient: vertical;
|
|
88
|
+
overflow: hidden;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.file-card-meta {
|
|
92
|
+
display: flex;
|
|
93
|
+
align-items: center;
|
|
94
|
+
gap: 8px;
|
|
95
|
+
flex-wrap: wrap;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.file-card-date,
|
|
99
|
+
.file-card-size,
|
|
100
|
+
.file-card-share {
|
|
101
|
+
color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
|
|
102
|
+
font-family: Inter, sans-serif;
|
|
103
|
+
font-size: 14px;
|
|
104
|
+
font-style: normal;
|
|
105
|
+
font-weight: 600;
|
|
106
|
+
line-height: 10px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.file-card-separator {
|
|
110
|
+
color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
|
|
111
|
+
font-size: 14px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.file-card-right {
|
|
115
|
+
display: flex;
|
|
116
|
+
flex-direction: column;
|
|
117
|
+
justify-content: flex-start;
|
|
118
|
+
align-items: flex-end;
|
|
119
|
+
align-self: flex-start;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.file-card-icon-eye {
|
|
123
|
+
color: var(--Primary-Mid-black, var(--mid-grey, #728ea7));
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.file-card.with-shadow {
|
|
127
|
+
box-shadow: 0px 1px 9px 0px rgba(15, 133, 168, 0.08);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* Asked state with dashed borders */
|
|
131
|
+
.file-card.asked {
|
|
132
|
+
border: 2px dashed rgba(37, 190, 235, 0.4);
|
|
133
|
+
background: rgba(37, 190, 235, 0.02);
|
|
134
|
+
position: relative;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.file-card.asked::before {
|
|
138
|
+
border: none;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.file-card.asked:hover {
|
|
142
|
+
border: 2px dashed var(--bleu-allaw, #25beeb);
|
|
143
|
+
background: rgba(37, 190, 235, 0.05);
|
|
144
|
+
box-shadow: 0 6px 18px 0 rgba(37, 190, 235, 0.15),
|
|
145
|
+
0 2px 8px 0 rgba(37, 190, 235, 0.1);
|
|
146
|
+
transform: scale(1.01) translateY(-2px);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.file-card.asked:active {
|
|
150
|
+
background: rgba(37, 190, 235, 0.08);
|
|
151
|
+
border: 2px dashed var(--bleu-allaw, #25beeb);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.file-card-details {
|
|
155
|
+
color: var(--Primary-Mid-black, var(--primary-black, #171e25));
|
|
156
|
+
font-family: "Open Sans", sans-serif;
|
|
157
|
+
font-size: 14px;
|
|
158
|
+
font-style: normal;
|
|
159
|
+
font-weight: 400;
|
|
160
|
+
line-height: 16px;
|
|
161
|
+
margin: 0;
|
|
162
|
+
display: -webkit-box;
|
|
163
|
+
-webkit-line-clamp: 2;
|
|
164
|
+
line-clamp: 2;
|
|
165
|
+
-webkit-box-orient: vertical;
|
|
166
|
+
overflow: hidden;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
/* Received type styles */
|
|
170
|
+
.file-card.received .file-card-info {
|
|
171
|
+
gap: 8px;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.file-card-files-summary {
|
|
175
|
+
display: flex;
|
|
176
|
+
flex-direction: column;
|
|
177
|
+
align-items: flex-start;
|
|
178
|
+
gap: 6px;
|
|
179
|
+
width: 100%;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.file-card-files-count {
|
|
183
|
+
color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
|
|
184
|
+
font-family: "Open Sans", sans-serif;
|
|
185
|
+
font-size: 12px;
|
|
186
|
+
font-style: normal;
|
|
187
|
+
font-weight: 600;
|
|
188
|
+
line-height: normal;
|
|
189
|
+
text-transform: uppercase;
|
|
190
|
+
letter-spacing: 0.5px;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.file-card-files-preview {
|
|
194
|
+
display: flex;
|
|
195
|
+
flex-wrap: wrap;
|
|
196
|
+
align-items: center;
|
|
197
|
+
gap: 4px;
|
|
198
|
+
width: 100%;
|
|
199
|
+
color: var(--Primary-Mid-black, var(--primary-black, #171e25));
|
|
200
|
+
font-family: "Open Sans", sans-serif;
|
|
201
|
+
font-size: 14px;
|
|
202
|
+
font-style: normal;
|
|
203
|
+
font-weight: 400;
|
|
204
|
+
line-height: 20px;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.file-card-file-tag {
|
|
208
|
+
color: var(--Primary-Mid-black, var(--primary-black, #171e25));
|
|
209
|
+
overflow: hidden;
|
|
210
|
+
text-overflow: ellipsis;
|
|
211
|
+
white-space: nowrap;
|
|
212
|
+
max-width: 100%;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.file-card-file-more {
|
|
216
|
+
color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
|
|
217
|
+
font-size: 14px;
|
|
218
|
+
font-weight: 400;
|
|
219
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./FileCard.css";
|
|
3
|
+
export interface FileInfo {
|
|
4
|
+
id: string;
|
|
5
|
+
size: number;
|
|
6
|
+
name: string;
|
|
7
|
+
creationDate: Date;
|
|
8
|
+
shareWithPart: string;
|
|
9
|
+
docType: string;
|
|
10
|
+
}
|
|
11
|
+
export interface FileCardSharedProps {
|
|
12
|
+
type: "Shared";
|
|
13
|
+
id: string;
|
|
14
|
+
size: number;
|
|
15
|
+
name: string;
|
|
16
|
+
creationDate: Date;
|
|
17
|
+
shareWithPart: boolean;
|
|
18
|
+
docType: string;
|
|
19
|
+
onCardClick?: () => void;
|
|
20
|
+
shadow?: boolean;
|
|
21
|
+
}
|
|
22
|
+
export interface FileCardReceivedProps {
|
|
23
|
+
type: "Received";
|
|
24
|
+
id: string;
|
|
25
|
+
demandeName: string;
|
|
26
|
+
files: FileInfo[];
|
|
27
|
+
onCardClick?: () => void;
|
|
28
|
+
shadow?: boolean;
|
|
29
|
+
}
|
|
30
|
+
export interface FileCardAskedProps {
|
|
31
|
+
type: "Asked";
|
|
32
|
+
id: string;
|
|
33
|
+
name: string;
|
|
34
|
+
details: string;
|
|
35
|
+
onCardClick?: () => void;
|
|
36
|
+
shadow?: boolean;
|
|
37
|
+
}
|
|
38
|
+
export type FileCardProps = FileCardSharedProps | FileCardReceivedProps | FileCardAskedProps;
|
|
39
|
+
declare const FileCard: React.FC<FileCardProps>;
|
|
40
|
+
export default FileCard;
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./FileCard.css";
|
|
3
|
+
import IconButton from "../../atoms/buttons/IconButton";
|
|
4
|
+
import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
|
|
5
|
+
var FileCard = function (props) {
|
|
6
|
+
var type = props.type, onCardClick = props.onCardClick, _a = props.shadow, shadow = _a === void 0 ? true : _a;
|
|
7
|
+
var formatFileSize = function (size) {
|
|
8
|
+
if (size < 1024) {
|
|
9
|
+
return "".concat(size, " octets");
|
|
10
|
+
}
|
|
11
|
+
else if (size < 1024 * 1024) {
|
|
12
|
+
return "".concat((size / 1024).toFixed(2), " Ko");
|
|
13
|
+
}
|
|
14
|
+
else {
|
|
15
|
+
return "".concat((size / (1024 * 1024)).toFixed(2), " Mo");
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
var formatDate = function (date) {
|
|
19
|
+
if (!date) {
|
|
20
|
+
return "";
|
|
21
|
+
}
|
|
22
|
+
return date.toLocaleDateString("fr-FR", {
|
|
23
|
+
day: "2-digit",
|
|
24
|
+
month: "2-digit",
|
|
25
|
+
year: "2-digit",
|
|
26
|
+
});
|
|
27
|
+
};
|
|
28
|
+
var getDocTypeIcon = function (docType) {
|
|
29
|
+
var lowerType = docType.toLowerCase();
|
|
30
|
+
if (lowerType.includes("pdf")) {
|
|
31
|
+
return "allaw-icon-file";
|
|
32
|
+
}
|
|
33
|
+
else if (lowerType.includes("csv") || lowerType.includes("xlsx")) {
|
|
34
|
+
return "allaw-icon-file";
|
|
35
|
+
}
|
|
36
|
+
else {
|
|
37
|
+
return "allaw-icon-document";
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
// Shared type
|
|
41
|
+
if (type === "Shared") {
|
|
42
|
+
var _id = props.id, size = props.size, name_1 = props.name, creationDate = props.creationDate, shareWithPart = props.shareWithPart, docType = props.docType;
|
|
43
|
+
return (React.createElement("div", { className: "file-card".concat(shadow ? " with-shadow" : "", " shared"), onClick: function () { return onCardClick && onCardClick(); }, style: { cursor: "pointer" } },
|
|
44
|
+
React.createElement("div", { className: "file-card-left" },
|
|
45
|
+
React.createElement(IconButton, { style: "largeFilled", iconName: getDocTypeIcon(docType), color: "#25BEEB" }),
|
|
46
|
+
React.createElement("div", { className: "file-card-info" },
|
|
47
|
+
React.createElement("span", { className: "file-card-type file-card-type-shared" }, docType.toUpperCase()),
|
|
48
|
+
React.createElement("p", { className: "file-card-title" }, name_1 || "Sans nom"),
|
|
49
|
+
React.createElement("div", { className: "file-card-meta" },
|
|
50
|
+
React.createElement("span", { className: "file-card-date" }, formatDate(creationDate)),
|
|
51
|
+
React.createElement("span", { className: "file-card-separator" }, "\u2022"),
|
|
52
|
+
React.createElement("span", { className: "file-card-size" }, formatFileSize(size))))),
|
|
53
|
+
shareWithPart && (React.createElement("div", { className: "file-card-right" },
|
|
54
|
+
React.createElement(OtherStatusTag, { type: "information", label: "PARTAG\u00C9 AVEC LE CLIENT", informationColor: "blue" })))));
|
|
55
|
+
}
|
|
56
|
+
// Received type
|
|
57
|
+
if (type === "Received") {
|
|
58
|
+
var _id = props.id, demandeName = props.demandeName, _b = props.files, files_1 = _b === void 0 ? [] : _b;
|
|
59
|
+
return (React.createElement("div", { className: "file-card".concat(shadow ? " with-shadow" : "", " received"), onClick: function () { return onCardClick && onCardClick(); }, style: { cursor: "pointer" } },
|
|
60
|
+
React.createElement("div", { className: "file-card-left" },
|
|
61
|
+
React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-document", color: "#25BEEB" }),
|
|
62
|
+
React.createElement("div", { className: "file-card-info" },
|
|
63
|
+
React.createElement("span", { className: "file-card-type file-card-type-received" }, "RE\u00C7U"),
|
|
64
|
+
React.createElement("p", { className: "file-card-title" }, demandeName || "Sans nom"),
|
|
65
|
+
files_1.length > 0 && (React.createElement("div", { className: "file-card-files-summary" },
|
|
66
|
+
React.createElement("span", { className: "file-card-files-count" },
|
|
67
|
+
files_1.length,
|
|
68
|
+
" fichier",
|
|
69
|
+
files_1.length > 1 ? "s" : ""),
|
|
70
|
+
React.createElement("div", { className: "file-card-files-preview" },
|
|
71
|
+
files_1.slice(0, 2).map(function (file, index) { return (React.createElement("span", { key: file.id, className: "file-card-file-tag" },
|
|
72
|
+
file.name,
|
|
73
|
+
index < Math.min(files_1.length, 2) - 1 && ",")); }),
|
|
74
|
+
files_1.length > 2 && (React.createElement("span", { className: "file-card-file-more" },
|
|
75
|
+
" ",
|
|
76
|
+
"et ",
|
|
77
|
+
files_1.length - 2,
|
|
78
|
+
" autre",
|
|
79
|
+
files_1.length - 2 > 1 ? "s" : "")))))))));
|
|
80
|
+
}
|
|
81
|
+
// Asked type
|
|
82
|
+
if (type === "Asked") {
|
|
83
|
+
var _id = props.id, name_2 = props.name, details = props.details;
|
|
84
|
+
return (React.createElement("div", { className: "file-card".concat(shadow ? " with-shadow" : "", " asked"), onClick: function () { return onCardClick && onCardClick(); }, style: { cursor: onCardClick ? "pointer" : "default" } },
|
|
85
|
+
React.createElement("div", { className: "file-card-left" },
|
|
86
|
+
React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-clock", color: "inherit" }),
|
|
87
|
+
React.createElement("div", { className: "file-card-info" },
|
|
88
|
+
React.createElement("span", { className: "file-card-type file-card-type-asked" }, "DEMAND\u00C9"),
|
|
89
|
+
React.createElement("p", { className: "file-card-title" }, name_2),
|
|
90
|
+
React.createElement("p", { className: "file-card-details" }, details))),
|
|
91
|
+
React.createElement("div", { className: "file-card-right" },
|
|
92
|
+
React.createElement("div", { className: "file-card-icon-eye" },
|
|
93
|
+
React.createElement("i", { className: "allaw-icon-eye" })))));
|
|
94
|
+
}
|
|
95
|
+
return null;
|
|
96
|
+
};
|
|
97
|
+
export default FileCard;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
declare namespace _default {
|
|
2
|
+
export let title: string;
|
|
3
|
+
export { FileCard as component };
|
|
4
|
+
export let tags: string[];
|
|
5
|
+
export namespace argTypes {
|
|
6
|
+
namespace type {
|
|
7
|
+
namespace control {
|
|
8
|
+
let type_1: string;
|
|
9
|
+
export { type_1 as type };
|
|
10
|
+
export let options: string[];
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
namespace shadow {
|
|
14
|
+
let control_1: string;
|
|
15
|
+
export { control_1 as control };
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
export namespace args {
|
|
19
|
+
let shadow_1: boolean;
|
|
20
|
+
export { shadow_1 as shadow };
|
|
21
|
+
let type_2: string;
|
|
22
|
+
export { type_2 as type };
|
|
23
|
+
}
|
|
24
|
+
export namespace parameters {
|
|
25
|
+
namespace backgrounds {
|
|
26
|
+
let _default: string;
|
|
27
|
+
export { _default as default };
|
|
28
|
+
export let values: {
|
|
29
|
+
name: string;
|
|
30
|
+
value: string;
|
|
31
|
+
}[];
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
export default _default;
|
|
36
|
+
export const Shared: any;
|
|
37
|
+
export const SharedSmall: any;
|
|
38
|
+
export const Received: any;
|
|
39
|
+
export const ReceivedManyFiles: any;
|
|
40
|
+
export const Asked: any;
|
|
41
|
+
export const AskedLongDetails: any;
|
|
42
|
+
import FileCard from "./FileCard";
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import React from "react";
|
|
24
|
+
import FileCard from "./FileCard";
|
|
25
|
+
import "../../../styles/global.css";
|
|
26
|
+
export default {
|
|
27
|
+
title: "Components/Molecules/FileCard",
|
|
28
|
+
component: FileCard,
|
|
29
|
+
tags: ["autodocs"],
|
|
30
|
+
argTypes: {
|
|
31
|
+
type: {
|
|
32
|
+
control: {
|
|
33
|
+
type: "select",
|
|
34
|
+
options: ["Shared", "Received", "Asked"],
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
shadow: { control: "boolean" },
|
|
38
|
+
},
|
|
39
|
+
args: {
|
|
40
|
+
shadow: true,
|
|
41
|
+
type: "Shared",
|
|
42
|
+
},
|
|
43
|
+
parameters: {
|
|
44
|
+
backgrounds: {
|
|
45
|
+
default: "light",
|
|
46
|
+
values: [
|
|
47
|
+
{ name: "light", value: "#ffffff" },
|
|
48
|
+
{ name: "grey", value: "#728ea7" },
|
|
49
|
+
{ name: "figma", value: "#404040" },
|
|
50
|
+
{ name: "dark", value: "#171e25" },
|
|
51
|
+
],
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
};
|
|
55
|
+
var Template = function (args) {
|
|
56
|
+
// Filter args based on type to avoid passing invalid props
|
|
57
|
+
var type = args.type, restArgs = __rest(args, ["type"]);
|
|
58
|
+
if (type === "Shared") {
|
|
59
|
+
var id = restArgs.id, name_1 = restArgs.name, size = restArgs.size, creationDate = restArgs.creationDate, shareWithPart = restArgs.shareWithPart, docType = restArgs.docType, onCardClick = restArgs.onCardClick, shadow = restArgs.shadow;
|
|
60
|
+
return (React.createElement(FileCard, { type: "Shared", id: id || "file-1", name: name_1, size: size, creationDate: creationDate, shareWithPart: shareWithPart, docType: docType, onCardClick: onCardClick, shadow: shadow }));
|
|
61
|
+
}
|
|
62
|
+
if (type === "Received") {
|
|
63
|
+
var id = restArgs.id, demandeName = restArgs.demandeName, files = restArgs.files, onCardClick = restArgs.onCardClick, shadow = restArgs.shadow;
|
|
64
|
+
return (React.createElement(FileCard, { type: "Received", id: id || "received-1", demandeName: demandeName, files: files || [], onCardClick: onCardClick, shadow: shadow }));
|
|
65
|
+
}
|
|
66
|
+
if (type === "Asked") {
|
|
67
|
+
var id = restArgs.id, name_2 = restArgs.name, details = restArgs.details, onCardClick = restArgs.onCardClick, shadow = restArgs.shadow;
|
|
68
|
+
return (React.createElement(FileCard, { type: "Asked", id: id || "asked-1", name: name_2, details: details, onCardClick: onCardClick, shadow: shadow }));
|
|
69
|
+
}
|
|
70
|
+
return React.createElement(FileCard, __assign({}, args));
|
|
71
|
+
};
|
|
72
|
+
export var Shared = Template.bind({});
|
|
73
|
+
Shared.args = {
|
|
74
|
+
type: "Shared",
|
|
75
|
+
id: "file-1",
|
|
76
|
+
name: "Contrat_de_travail.pdf",
|
|
77
|
+
size: 2048576, // 2 MB
|
|
78
|
+
creationDate: new Date("2024-01-15"),
|
|
79
|
+
shareWithPart: true,
|
|
80
|
+
docType: "PDF",
|
|
81
|
+
};
|
|
82
|
+
export var SharedSmall = Template.bind({});
|
|
83
|
+
SharedSmall.args = {
|
|
84
|
+
type: "Shared",
|
|
85
|
+
id: "file-2",
|
|
86
|
+
name: "document.txt",
|
|
87
|
+
size: 512, // 512 bytes
|
|
88
|
+
creationDate: new Date("2024-02-20"),
|
|
89
|
+
shareWithPart: false,
|
|
90
|
+
docType: "TXT",
|
|
91
|
+
};
|
|
92
|
+
export var Received = Template.bind({});
|
|
93
|
+
Received.args = {
|
|
94
|
+
type: "Received",
|
|
95
|
+
id: "received-1",
|
|
96
|
+
demandeName: "Documents demandés pour le rendez-vous",
|
|
97
|
+
files: [
|
|
98
|
+
{
|
|
99
|
+
id: "file-1",
|
|
100
|
+
name: "Carte_identite.pdf",
|
|
101
|
+
size: 1024000,
|
|
102
|
+
creationDate: new Date("2024-01-10"),
|
|
103
|
+
shareWithPart: "Client",
|
|
104
|
+
docType: "PDF",
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
id: "file-2",
|
|
108
|
+
name: "Justificatif_domicile.pdf",
|
|
109
|
+
size: 512000,
|
|
110
|
+
creationDate: new Date("2024-01-11"),
|
|
111
|
+
shareWithPart: "Client",
|
|
112
|
+
docType: "PDF",
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
id: "file-3",
|
|
116
|
+
name: "Avis_imposition.pdf",
|
|
117
|
+
size: 1536000,
|
|
118
|
+
creationDate: new Date("2024-01-12"),
|
|
119
|
+
shareWithPart: "Client",
|
|
120
|
+
docType: "PDF",
|
|
121
|
+
},
|
|
122
|
+
],
|
|
123
|
+
};
|
|
124
|
+
export var ReceivedManyFiles = Template.bind({});
|
|
125
|
+
ReceivedManyFiles.args = {
|
|
126
|
+
type: "Received",
|
|
127
|
+
id: "received-2",
|
|
128
|
+
demandeName: "Documents administratifs",
|
|
129
|
+
files: [
|
|
130
|
+
{
|
|
131
|
+
id: "file-1",
|
|
132
|
+
name: "Document1.pdf",
|
|
133
|
+
size: 1024000,
|
|
134
|
+
creationDate: new Date("2024-01-10"),
|
|
135
|
+
shareWithPart: "Client",
|
|
136
|
+
docType: "PDF",
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
id: "file-2",
|
|
140
|
+
name: "Document2.pdf",
|
|
141
|
+
size: 512000,
|
|
142
|
+
creationDate: new Date("2024-01-11"),
|
|
143
|
+
shareWithPart: "Client",
|
|
144
|
+
docType: "PDF",
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
id: "file-3",
|
|
148
|
+
name: "Document3.pdf",
|
|
149
|
+
size: 1536000,
|
|
150
|
+
creationDate: new Date("2024-01-12"),
|
|
151
|
+
shareWithPart: "Client",
|
|
152
|
+
docType: "PDF",
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
id: "file-4",
|
|
156
|
+
name: "Document4.pdf",
|
|
157
|
+
size: 2048000,
|
|
158
|
+
creationDate: new Date("2024-01-13"),
|
|
159
|
+
shareWithPart: "Client",
|
|
160
|
+
docType: "PDF",
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
id: "file-5",
|
|
164
|
+
name: "Document5.pdf",
|
|
165
|
+
size: 768000,
|
|
166
|
+
creationDate: new Date("2024-01-14"),
|
|
167
|
+
shareWithPart: "Client",
|
|
168
|
+
docType: "PDF",
|
|
169
|
+
},
|
|
170
|
+
],
|
|
171
|
+
};
|
|
172
|
+
export var Asked = Template.bind({});
|
|
173
|
+
Asked.args = {
|
|
174
|
+
type: "Asked",
|
|
175
|
+
id: "asked-1",
|
|
176
|
+
name: "Carte d'identité",
|
|
177
|
+
details: "Veuillez fournir une copie recto-verso de votre carte d'identité en cours de validité",
|
|
178
|
+
};
|
|
179
|
+
export var AskedLongDetails = Template.bind({});
|
|
180
|
+
AskedLongDetails.args = {
|
|
181
|
+
type: "Asked",
|
|
182
|
+
id: "asked-2",
|
|
183
|
+
name: "Justificatif de domicile",
|
|
184
|
+
details: "Merci de fournir un justificatif de domicile datant de moins de 3 mois. Les documents acceptés sont : facture d'électricité, facture de gaz, facture d'eau, quittance de loyer, ou attestation d'hébergement.",
|
|
185
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as FileCard } from "./FileCard";
|