allaw-ui 0.1.42 → 0.1.44

package/dist/components/molecules/caseLinkCard/CaseLinkCard.d.ts

@@ -4,7 +4,8 @@ export type CaseLinkCardProps = {
     proName: string;
     caseName: string;
     createdDate: Date;
+    isLoading?: boolean;
     onCaseCardClick?: () => any;
 };
-declare function CaseLinkCard({ proName, caseName, createdDate, onCaseCardClick }: CaseLinkCardProps): React.JSX.Element;
+declare function CaseLinkCard({ proName, caseName, createdDate, onCaseCardClick, isLoading }: CaseLinkCardProps): React.JSX.Element;
 export default CaseLinkCard;

package/dist/components/molecules/caseLinkCard/CaseLinkCard.js

@@ -1,8 +1,9 @@
 import React from "react";
 import "./CaseLinkCard.css";
 import { Paragraph, SmallTitle } from "../../atoms/typography";
+import LoadingBox from "../loadingBox/LoadingBox";
 function CaseLinkCard(_a) {
-    var proName = _a.proName, caseName = _a.caseName, createdDate = _a.createdDate, onCaseCardClick = _a.onCaseCardClick;
+    var proName = _a.proName, caseName = _a.caseName, createdDate = _a.createdDate, onCaseCardClick = _a.onCaseCardClick, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b;
     var formatDate = function (date) {
         return date.toLocaleDateString("fr-FR", {
             day: "2-digit",
@@ -13,7 +14,7 @@ function CaseLinkCard(_a) {
     var formatProName = function (name) {
         return "Ma\u00EEtre ".concat(name).toUpperCase();
     };
-    return React.createElement("div", { className: "case-card-link", onClick: function () { return onCaseCardClick && onCaseCardClick(); }, style: { cursor: onCaseCardClick ? "pointer" : "default" } },
+    return !isLoading ? React.createElement("div", { className: "case-card-link", onClick: function () { return onCaseCardClick && onCaseCardClick(); }, style: { cursor: onCaseCardClick ? "pointer" : "default" } },
         React.createElement("div", { className: "case-card-link-folder-icon" },
             React.createElement("i", { className: "allaw-icon-folder", style: { fontSize: "20px" } })),
         React.createElement("div", { className: "case-card-link-right" },
@@ -24,6 +25,6 @@ function CaseLinkCard(_a) {
                 React.createElement("div", { className: "case-card-link-info-col" },
                     React.createElement(Paragraph, { variant: "bold", size: "default", text: caseName, maxLines: 1 }),
                     React.createElement(SmallTitle, { variant: "medium12", color: "mid-grey", text: formatProName(proName) })),
-                React.createElement("i", { className: "allaw-icon-arrow-right" }))));
+                React.createElement("i", { className: "allaw-icon-arrow-right" })))) : React.createElement(LoadingBox, { boxHeigth: "100px", boxRadius: "8px", boxWidth: "100%" });
 }
 export default CaseLinkCard;

package/dist/components/molecules/clientLinkCard/ClientLinkCard.d.ts

@@ -5,8 +5,9 @@ export type ClientLinkCardProps = {
     clientFirstName: string;
     clientName: string;
     clientMail: string;
+    isLoading?: boolean;
     company?: string;
     onClientCardClick?: () => any;
 };
-declare function ClientLinkCard({ clientFirstName, clientName, clientMail, company, onClientCardClick }: ClientLinkCardProps): React.JSX.Element;
+declare function ClientLinkCard({ clientFirstName, isLoading, clientName, clientMail, company, onClientCardClick }: ClientLinkCardProps): React.JSX.Element;
 export default ClientLinkCard;

package/dist/components/molecules/clientLinkCard/ClientLinkCard.js

@@ -2,14 +2,15 @@ import React from "react";
 import { Paragraph, SmallTitle } from "../../atoms/typography";
 import "./ClientLinkCard.css";
 import "../../../styles/icons.css";
+import LoadingBox from "../loadingBox/LoadingBox";
 function ClientLinkCard(_a) {
-    var clientFirstName = _a.clientFirstName, clientName = _a.clientName, clientMail = _a.clientMail, company = _a.company, onClientCardClick = _a.onClientCardClick;
-    return React.createElement("div", { className: "client-link-card", style: { cursor: onClientCardClick ? "pointer" : "default" }, onClick: function () { return onClientCardClick && onClientCardClick(); } },
+    var clientFirstName = _a.clientFirstName, isLoading = _a.isLoading, clientName = _a.clientName, clientMail = _a.clientMail, company = _a.company, onClientCardClick = _a.onClientCardClick;
+    return !isLoading ? React.createElement("div", { className: "client-link-card", style: { cursor: onClientCardClick ? "pointer" : "default" }, onClick: function () { return onClientCardClick && onClientCardClick(); } },
         React.createElement("div", { className: "client-link-card-left" },
             React.createElement(Paragraph, { variant: "semiBold", text: "".concat(clientFirstName, " ").concat(clientName === null || clientName === void 0 ? void 0 : clientName.toUpperCase()), size: "default", maxLines: 1, color: "noir" }),
             React.createElement(SmallTitle, { variant: "medium12", color: "mid-grey", text: clientMail === null || clientMail === void 0 ? void 0 : clientMail.toLowerCase() })),
         React.createElement("div", { className: "client-link-card-right" },
             company && React.createElement("span", { className: "client-link-card-office-tag" }, company),
-            React.createElement("i", { className: "allaw-icon-arrow-right" })));
+            React.createElement("i", { className: "allaw-icon-arrow-right" }))) : React.createElement(LoadingBox, { boxHeigth: "91px", boxRadius: "16px", boxWidth: "100%" });
 }
 export default ClientLinkCard;

package/dist/components/molecules/loadingBox/LoadingBox.css

@@ -0,0 +1,13 @@
+.loading-box {
+    animation: skeleton-loading 1s linear infinite alternate;
+}
+
+@keyframes skeleton-loading {
+    0% {
+      background-color: hsl(200, 20%, 80%);
+    }
+    100% {
+      background-color: hsl(200, 20%, 95%);
+    }
+  }
+  

package/dist/components/molecules/loadingBox/LoadingBox.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "./LoadingBox.css";
+export type LoadingBoxProps = {
+    boxHeigth: string;
+    boxWidth: string;
+    boxRadius: string;
+};
+declare function LoadingBox({ boxHeigth, boxWidth, boxRadius }: LoadingBoxProps): React.JSX.Element;
+export default LoadingBox;

package/dist/components/molecules/loadingBox/LoadingBox.js

@@ -0,0 +1,7 @@
+import React from "react";
+import "./LoadingBox.css";
+function LoadingBox(_a) {
+    var boxHeigth = _a.boxHeigth, boxWidth = _a.boxWidth, boxRadius = _a.boxRadius;
+    return React.createElement("div", { className: "loading-box", style: { minHeight: boxHeigth, minWidth: boxWidth, borderRadius: boxRadius } });
+}
+export default LoadingBox;

package/dist/components/molecules/loadingBox/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LoadingBox } from "./LoadingBox";
+export type { LoadingBoxProps } from "./LoadingBox";

package/dist/components/molecules/loadingBox/index.js

@@ -0,0 +1 @@
+export { default as LoadingBox } from "./LoadingBox";

package/dist/index.d.ts

@@ -37,6 +37,7 @@ export { default as CaseCard } from "./components/molecules/caseCard/CaseCard";
 export { default as ContactCard } from "./components/molecules/contactCard/ContactCard";
 export { default as CaseCardLink } from "./components/molecules/caseLinkCard/CaseLinkCard";
 export { default as ClientLinkCard } from "./components/molecules/clientLinkCard/ClientLinkCard";
+export { default as LoadingBox } from "./components/molecules/loadingBox/LoadingBox";
 export { default as DocumentCard } from "./components/molecules/documentCard/DocumentCard";
 export { default as EmployeeCard } from "./components/molecules/employeeCard/EmployeeCard";
 export { default as Stepper } from "./components/molecules/stepper/Stepper";

package/dist/index.js

@@ -51,6 +51,7 @@ export { default as ContactCard } from "./components/molecules/contactCard/Conta
 export { default as CaseCardLink } from "./components/molecules/caseLinkCard/CaseLinkCard";
 // Case Link Card 
 export { default as ClientLinkCard } from "./components/molecules/clientLinkCard/ClientLinkCard";
+export { default as LoadingBox } from "./components/molecules/loadingBox/LoadingBox";
 // Document Card
 export { default as DocumentCard } from "./components/molecules/documentCard/DocumentCard";
 // Employee Card

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",