allaw-ui 1.0.67 → 1.0.70
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/caseCardCompact/CaseCardCompact.d.ts +15 -0
- package/dist/components/molecules/caseCardCompact/CaseCardCompact.js +19 -0
- package/dist/components/molecules/caseCardCompact/caseCardCompact.module.css +77 -0
- package/dist/components/molecules/caseCardCompact/index.d.ts +2 -0
- package/dist/components/molecules/caseCardCompact/index.js +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +3 -1
- package/dist/styles/colors.css +1 -2
- package/package.json +2 -1
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { FolderStatus } from "../../atoms/tags/FolderStatusTag";
|
|
3
|
+
import "../../../styles/icons.css";
|
|
4
|
+
export type CaseCardCompactProps = {
|
|
5
|
+
folderTitle: string;
|
|
6
|
+
folderStatus: FolderStatus;
|
|
7
|
+
clientName: string;
|
|
8
|
+
isLoading?: boolean;
|
|
9
|
+
category?: string;
|
|
10
|
+
showArrowOnHover?: boolean;
|
|
11
|
+
onClientCardClick?: () => any;
|
|
12
|
+
isSelected?: boolean;
|
|
13
|
+
};
|
|
14
|
+
declare function CaseCardCompact({ folderTitle, folderStatus, isLoading, clientName, category, showArrowOnHover, onClientCardClick, isSelected, }: CaseCardCompactProps): React.JSX.Element;
|
|
15
|
+
export default CaseCardCompact;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Paragraph, SmallTitle } from "../../atoms/typography";
|
|
3
|
+
import FolderStatusTag from "../../atoms/tags/FolderStatusTag";
|
|
4
|
+
import styles from "./caseCardCompact.module.css";
|
|
5
|
+
import "../../../styles/icons.css";
|
|
6
|
+
import LoadingBox from "../loadingBox/LoadingBox";
|
|
7
|
+
function CaseCardCompact(_a) {
|
|
8
|
+
var folderTitle = _a.folderTitle, folderStatus = _a.folderStatus, isLoading = _a.isLoading, clientName = _a.clientName, category = _a.category, _b = _a.showArrowOnHover, showArrowOnHover = _b === void 0 ? false : _b, onClientCardClick = _a.onClientCardClick, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c;
|
|
9
|
+
return !isLoading ? (React.createElement("div", { className: "".concat(styles.case_card_compact, " ").concat(showArrowOnHover ? styles.case_card_compact__arrow_on_hover : "", " ").concat(isSelected ? styles.case_card_compact__selected : ""), style: {
|
|
10
|
+
cursor: onClientCardClick || isSelected ? "pointer" : "default",
|
|
11
|
+
}, onClick: onClientCardClick || (isSelected ? function () { } : undefined) },
|
|
12
|
+
React.createElement("div", { className: styles.case_card_compact_left },
|
|
13
|
+
React.createElement("span", { className: styles.title_tag },
|
|
14
|
+
React.createElement(Paragraph, { variant: "semiBold", text: folderTitle, size: "default", maxLines: 1, color: "noir" }),
|
|
15
|
+
React.createElement(FolderStatusTag, { status: folderStatus })),
|
|
16
|
+
React.createElement(SmallTitle, { variant: "medium12", color: "mid-grey", text: clientName || "" })),
|
|
17
|
+
React.createElement("div", { className: "".concat(styles.case_card_compact_right, " ").concat(!category ? styles.case_card_compact_right__centered : "") }, category && (React.createElement("span", { className: styles.case_card_compact_office_tag }, category))))) : (React.createElement(LoadingBox, { boxHeight: "91px", boxRadius: "16px", boxWidth: "100%" }));
|
|
18
|
+
}
|
|
19
|
+
export default CaseCardCompact;
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
@import "../../../styles/colors.css";
|
|
2
|
+
|
|
3
|
+
.case_card_compact {
|
|
4
|
+
width: 100%;
|
|
5
|
+
display: flex;
|
|
6
|
+
padding: 16px;
|
|
7
|
+
justify-content: space-between;
|
|
8
|
+
align-items: flex-start;
|
|
9
|
+
border-radius: 16px;
|
|
10
|
+
border: 1px solid var(--Primary-Gris-de-fond, #e6edf5);
|
|
11
|
+
background: var(--Primary-Blanc, #fff);
|
|
12
|
+
transition:
|
|
13
|
+
border-color 0.2s ease,
|
|
14
|
+
border-width 0.2s ease;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.case_card_compact:hover {
|
|
18
|
+
border-color: var(--bleu-allaw, #25beeb);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.case_card_compact__selected {
|
|
22
|
+
border-width: 2px;
|
|
23
|
+
border-color: var(--Primary-Bleu, #25beeb);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.case_card_compact_left {
|
|
27
|
+
display: flex;
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
align-items: start;
|
|
30
|
+
gap: 8px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.case_card_compact_right {
|
|
34
|
+
position: relative;
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-direction: column;
|
|
37
|
+
align-items: flex-end;
|
|
38
|
+
gap: 8px;
|
|
39
|
+
min-height: 45px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.case_card_compact_right__centered .case_card_compact_arrow {
|
|
43
|
+
position: absolute;
|
|
44
|
+
top: 55%;
|
|
45
|
+
transform: translateY(-50%);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.case_card_compact_office_tag {
|
|
49
|
+
font-size: 13px;
|
|
50
|
+
font-family: "Open Sans", sans-serif;
|
|
51
|
+
font-weight: 600;
|
|
52
|
+
padding: 6px 8px;
|
|
53
|
+
border-radius: 8px;
|
|
54
|
+
background-color: var(--Tags-Blanc-tag, #eef5fc);
|
|
55
|
+
color: var(--Primary-Mid-black, #171e25);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.case_card_compact__arrow_on_hover .case_card_compact_arrow {
|
|
59
|
+
opacity: 0;
|
|
60
|
+
transition: opacity 0.2s ease;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.case_card_compact__arrow_on_hover:hover .case_card_compact_arrow {
|
|
64
|
+
opacity: 1;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.case_card_compact:active {
|
|
68
|
+
border-width: 2px;
|
|
69
|
+
border-color: var(--Primary-Bleu, #25beeb);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.title_tag {
|
|
73
|
+
display: flex;
|
|
74
|
+
flex-direction: row;
|
|
75
|
+
align-items: center;
|
|
76
|
+
gap: 8px;
|
|
77
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as CaseCardCompact } from "./CaseCardCompact";
|
package/dist/index.d.ts
CHANGED
|
@@ -47,6 +47,8 @@ export { default as DetailedContactCard } from "./components/molecules/contactCa
|
|
|
47
47
|
export type { DetailedContactCardProps } from "./components/molecules/contactCard/DetailedContactCard";
|
|
48
48
|
export { default as CaseCardLink } from "./components/molecules/caseLinkCard/CaseLinkCard";
|
|
49
49
|
export { default as ClientLinkCard } from "./components/molecules/clientLinkCard/ClientLinkCard";
|
|
50
|
+
export { default as CaseCardCompact } from "./components/molecules/caseCardCompact/CaseCardCompact";
|
|
51
|
+
export type { CaseCardCompactProps } from "./components/molecules/caseCardCompact/CaseCardCompact";
|
|
50
52
|
export { default as LoadingBox } from "./components/molecules/loadingBox/LoadingBox";
|
|
51
53
|
export { default as DocumentCard } from "./components/molecules/documentCard/DocumentCard";
|
|
52
54
|
export { default as EmployeeCard } from "./components/molecules/employeeCard/EmployeeCard";
|
package/dist/index.js
CHANGED
|
@@ -56,8 +56,10 @@ export { default as ContactCard } from "./components/molecules/contactCard/Conta
|
|
|
56
56
|
export { default as DetailedContactCard } from "./components/molecules/contactCard/DetailedContactCard";
|
|
57
57
|
// Case Link Card
|
|
58
58
|
export { default as CaseCardLink } from "./components/molecules/caseLinkCard/CaseLinkCard";
|
|
59
|
-
//
|
|
59
|
+
// Client Link Card
|
|
60
60
|
export { default as ClientLinkCard } from "./components/molecules/clientLinkCard/ClientLinkCard";
|
|
61
|
+
// Case Card Compact
|
|
62
|
+
export { default as CaseCardCompact } from "./components/molecules/caseCardCompact/CaseCardCompact";
|
|
61
63
|
export { default as LoadingBox } from "./components/molecules/loadingBox/LoadingBox";
|
|
62
64
|
// Document Card
|
|
63
65
|
export { default as DocumentCard } from "./components/molecules/documentCard/DocumentCard";
|
package/dist/styles/colors.css
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "allaw-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.70",
|
|
4
4
|
"description": "Composants UI pour l'application Allaw",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -61,6 +61,7 @@
|
|
|
61
61
|
"@storybook/nextjs": "^8.2.8",
|
|
62
62
|
"@storybook/react": "^8.2.8",
|
|
63
63
|
"@storybook/test": "^8.2.8",
|
|
64
|
+
"@types/css-modules": "^1.0.5",
|
|
64
65
|
"@types/node": "^20",
|
|
65
66
|
"@types/react": "^18",
|
|
66
67
|
"@types/react-dom": "^18",
|