allaw-ui 1.0.176 → 1.0.178

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

@@ -12,9 +12,7 @@
   align-items: center;
   gap: 16px;
 
-  transition:
-    border-color 0.2s ease,
-    border-width 0.2s ease;
+  transition: border-color 0.2s ease, border-width 0.2s ease;
 }
 
 .case-card-link:hover {
@@ -90,7 +88,7 @@
   width: 100%;
   flex-direction: row;
   justify-content: space-between;
-  align-items: end;
+  align-items: flex-end;
 }
 
 .case-card-link-info-col {

package/dist/components/molecules/contactCard/ContactCard.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import "./ContactCard.css";
 export interface ContactCardProps {
     name: string;
     status: string;
@@ -10,6 +9,7 @@ export interface ContactCardProps {
     onClick?: () => void;
     gender: "male" | "female";
     actionIconName?: string;
+    clientLabel?: string;
 }
 declare const ContactCard: React.FC<ContactCardProps>;
 export default ContactCard;

package/dist/components/molecules/contactCard/ContactCard.js

@@ -1,33 +1,33 @@
 import React from "react";
-import "./ContactCard.css";
+import styles from "./contactCard.module.css";
 import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
 import IconButton from "../../atoms/buttons/IconButton";
 import Link from "next/link";
 var ContactCard = function (_a) {
-    var name = _a.name, status = _a.status, phone = _a.phone, email = _a.email, isEditable = _a.isEditable, onEdit = _a.onEdit, onClick = _a.onClick, gender = _a.gender, _b = _a.actionIconName, actionIconName = _b === void 0 ? "allaw-icon-edit-2" : _b;
+    var name = _a.name, status = _a.status, phone = _a.phone, email = _a.email, isEditable = _a.isEditable, onEdit = _a.onEdit, onClick = _a.onClick, gender = _a.gender, _b = _a.actionIconName, actionIconName = _b === void 0 ? "allaw-icon-edit-2" : _b, clientLabel = _a.clientLabel;
     var isPhoneEmpty = !phone || phone.trim() === "";
     var isEmailEmpty = !email || email.trim() === "";
-    return (React.createElement("div", { className: "contact-card", onClick: function () { return onClick && onClick(); }, style: { cursor: "pointer" } },
-        React.createElement("div", { className: "content-container" },
-            React.createElement("div", { className: "name-tag-container" },
-                React.createElement("h3", { className: "contact-name" }, name),
+    var defaultClientLabel = gender === "male" ? "Client" : "Cliente";
+    var displayClientLabel = clientLabel || "".concat(defaultClientLabel, " de l'\u00E9tude");
+    return (React.createElement("div", { className: styles.contactCard, onClick: function () { return onClick && onClick(); }, style: { cursor: "pointer" } },
+        React.createElement("div", { className: styles.contentContainer },
+            React.createElement("div", { className: styles.nameTagContainer },
+                React.createElement("h3", { className: styles.contactName }, name),
                 React.createElement(OtherStatusTag, { label: status, type: "readonly" })),
-            React.createElement("div", { className: "info-container" },
-                React.createElement("div", { className: "info-item" },
-                    React.createElement("i", { className: "allaw-icon-user info-icon" }),
-                    React.createElement("span", { className: "info-text" },
-                        gender === "male" ? "Client" : "Cliente",
-                        " de l'\u00E9tude")),
-                React.createElement("div", { className: "telephone-email-items" },
-                    React.createElement("div", { className: "info-item" },
-                        React.createElement("i", { className: "allaw-icon-phone info-icon ".concat(isPhoneEmpty ? "info-icon-disabled" : "") }),
-                        React.createElement("span", { className: "info-text contact ".concat(isPhoneEmpty ? "empty-field" : "") }, isPhoneEmpty ? ("Non renseigné") : (React.createElement(Link, { style: { color: "#171E25", textDecoration: "underline" }, href: "tel:".concat(phone) }, phone)))),
-                    React.createElement("div", { className: "info-item" },
-                        React.createElement("i", { className: "allaw-icon-mail info-icon ".concat(isEmailEmpty ? "info-icon-disabled" : "") }),
-                        React.createElement("span", { className: "info-text contact ".concat(isEmailEmpty ? "empty-field" : "") }, isEmailEmpty ? ("Non renseigné") : (React.createElement(Link, { style: { color: "#171E25", textDecoration: "underline" }, href: "mailTo:".concat(email) }, email))))))),
-        isEditable && (React.createElement("div", { className: "action-button-container" },
+            React.createElement("div", { className: styles.infoContainer },
+                React.createElement("div", { className: styles.infoItem },
+                    React.createElement("i", { className: "allaw-icon-user ".concat(styles.infoIcon) }),
+                    React.createElement("span", { className: styles.infoText }, displayClientLabel)),
+                React.createElement("div", { className: styles.telephoneEmailItems },
+                    React.createElement("div", { className: styles.infoItem },
+                        React.createElement("i", { className: "allaw-icon-phone ".concat(styles.infoIcon, " ").concat(isPhoneEmpty ? styles.infoIconDisabled : "") }),
+                        React.createElement("span", { className: "".concat(styles.infoText, " ").concat(styles.contact, " ").concat(isPhoneEmpty ? styles.emptyField : "") }, isPhoneEmpty ? ("Non renseigné") : (React.createElement(Link, { style: { color: "#171E25", textDecoration: "underline" }, href: "tel:".concat(phone) }, phone)))),
+                    React.createElement("div", { className: styles.infoItem },
+                        React.createElement("i", { className: "allaw-icon-mail ".concat(styles.infoIcon, " ").concat(isEmailEmpty ? styles.infoIconDisabled : "") }),
+                        React.createElement("span", { className: "".concat(styles.infoText, " ").concat(styles.contact, " ").concat(isEmailEmpty ? styles.emptyField : "") }, isEmailEmpty ? ("Non renseigné") : (React.createElement(Link, { style: { color: "#171E25", textDecoration: "underline" }, href: "mailTo:".concat(email) }, email))))))),
+        isEditable && (React.createElement("div", { className: styles.actionButtonContainer },
             React.createElement(IconButton, { style: "largeFilled", iconName: actionIconName, onClick: onEdit }))),
-        onClick && (React.createElement("div", { className: "action-button-container" },
-            React.createElement("i", { className: "allaw-icon-arrow-right" })))));
+        onClick && (React.createElement("div", { className: styles.actionButtonContainer },
+            React.createElement("i", { className: "allaw-icon-right ".concat(styles.infoIcon) })))));
 };
 export default ContactCard;

package/dist/components/molecules/contactCard/ContactCard.stories.d.ts

@@ -37,6 +37,12 @@ declare namespace _default {
             export { control_6 as control };
             export let description: string;
         }
+        namespace clientLabel {
+            let control_7: string;
+            export { control_7 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
     }
     export namespace args {
         let name_1: string;
@@ -53,6 +59,8 @@ declare namespace _default {
         export { gender_1 as gender };
         let actionIconName_1: string;
         export { actionIconName_1 as actionIconName };
+        let clientLabel_1: string;
+        export { clientLabel_1 as clientLabel };
     }
     export namespace parameters {
         namespace backgrounds {
@@ -71,4 +79,5 @@ export const Editable: any;
 export const WithCustomIcon: any;
 export const EmptyFields: any;
 export const PartiallyEmpty: any;
+export const CustomClientLabel: any;
 import ContactCard from "./ContactCard";

package/dist/components/molecules/contactCard/ContactCard.stories.js

@@ -33,6 +33,10 @@ export default {
             control: "text",
             description: "Nom de l'icône pour le bouton d'action",
         },
+        clientLabel: {
+            control: "text",
+            description: "Texte personnalisé pour 'Client/Cliente de l'étude'",
+        },
     },
     args: {
         name: "Jane DOE",
@@ -42,6 +46,7 @@ export default {
         isEditable: false,
         gender: "female",
         actionIconName: "allaw-icon-edit-2",
+        clientLabel: "",
     },
     parameters: {
         backgrounds: {
@@ -75,3 +80,7 @@ PartiallyEmpty.args = {
     phone: "06 12 34 56 78",
     email: "",
 };
+export var CustomClientLabel = Template.bind({});
+CustomClientLabel.args = {
+    clientLabel: "Utilisateur professionnel",
+};

package/dist/components/molecules/contactCard/{ContactCard.css → contactCard.module.css}

@@ -1,10 +1,10 @@
-@import "../../../styles/colors.css";
+@import "../../../styles/colors.module.css";
 
-.contact-card {
+.contactCard {
   font-family: "Open Sans", sans-serif;
   border-radius: 16px;
-  border: 1px solid var(--venom-grey, #e6edf5);
-  background: var(--Primary-Blanc, #fff);
+  border: 1px solid var(--grey-venom, #e6edf5);
+  background: var(--pure-white, #fff);
   display: flex;
   padding: 24px;
   width: 100%;
@@ -12,18 +12,16 @@
   align-items: stretch;
   align-self: stretch;
   border-radius: 16px;
-  border: 1px solid var(--Primary-Venom-grey, #e6edf5);
-  background: var(--Primary-Blanc, #fff);
 }
 
-.content-container {
+.contentContainer {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 24px;
 }
 
-.name-tag-container {
+.nameTagContainer {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -32,8 +30,8 @@
   padding-left: 2px;
 }
 
-.contact-name {
-  color: var(--Primary-Mid-black, #171e25);
+.contactName {
+  color: var(--noir, #171e25);
   font-family: Poppins;
   font-size: 24px;
   font-style: normal;
@@ -41,7 +39,7 @@
   line-height: 24px;
 }
 
-.info-container {
+.infoContainer {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -49,28 +47,28 @@
   padding-left: 6px;
 }
 
-.info-item {
+.infoItem {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.info-icon {
+.infoIcon {
   width: 24px;
   height: 24px;
-  color: #25beeb;
+  color: var(--bleu-allaw, #25beeb);
   font-size: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.info-icon-disabled {
-  color: var(--Tags-Mid-grey, #728ea7);
+.infoIconDisabled {
+  color: var(--mid-grey, #728ea7);
 }
 
-.info-text {
-  color: var(--Primary-Mid-black, #171e25);
+.infoText {
+  color: var(--noir, #171e25);
   font-family: "Open Sans";
   font-size: 16px;
   font-style: normal;
@@ -78,12 +76,12 @@
   line-height: normal;
 }
 
-.info-text.contact.empty-field {
-  color: var(--Tags-Mid-grey, #728ea7);
+.infoText.contact.emptyField {
+  color: var(--mid-grey, #728ea7);
   font-style: italic;
 }
 
-.telephone-email-items {
+.telephoneEmailItems {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -92,7 +90,7 @@
 }
 
 @media (max-width: 800px) {
-  .telephone-email-items {
+  .telephoneEmailItems {
     flex-direction: column;
     align-items: flex-start;
     gap: 10px;
@@ -100,16 +98,16 @@
 }
 
 @media (max-width: 600px) {
-  .content-container {
+  .contentContainer {
     flex-direction: column;
   }
-  .name-tag-container {
+  .nameTagContainer {
     align-items: flex-start;
     width: 100%;
   }
 }
 
-.action-button-container {
+.actionButtonContainer {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -119,7 +117,7 @@
 }
 
 @media (max-width: 450px) {
-  .action-button-container {
+  .actionButtonContainer {
     display: block;
     position: absolute;
     top: 24px;
@@ -128,7 +126,7 @@
   }
 }
 
-.empty-field {
-  color: var(--Tags-Mid-grey, #728ea7) !important;
+.emptyField {
+  color: var(--mid-grey, #728ea7) !important;
   font-style: italic;
 }

package/dist/components/molecules/documentCard/DocumentCard.css

@@ -9,7 +9,6 @@
   border-radius: 8px;
   border: 1px solid var(--venom-grey, #e6edf5);
   background: var(--Primary-Blanc, #fff);
-  box-shadow: 0px 1px 9px 0px rgba(15, 133, 168, 0.08);
 }
 
 .document-card-left {
@@ -132,3 +131,7 @@
   font-weight: 600;
   line-height: normal;
 }
+
+.document-card.with-shadow {
+  box-shadow: 0px 1px 9px 0px rgba(15, 133, 168, 0.08);
+}

package/dist/components/molecules/documentCard/DocumentCard.d.ts

@@ -10,6 +10,7 @@ export interface DocumentCardProps {
     };
     onCardClick?: () => any;
     documentCount?: string;
+    shadow?: boolean;
 }
 declare const DocumentCard: React.FC<DocumentCardProps>;
 export default DocumentCard;

package/dist/components/molecules/documentCard/DocumentCard.js

@@ -4,7 +4,7 @@ import IconButton from "../../atoms/buttons/IconButton";
 import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
 import { Paragraph } from "../../atoms/typography";
 var DocumentCard = function (_a) {
-    var _b = _a.type, type = _b === void 0 ? "document" : _b, title = _a.title, _c = _a.date, date = _c === void 0 ? new Date() : _c, onCardClick = _a.onCardClick, status = _a.status, _d = _a.documents, documents = _d === void 0 ? {} : _d, _e = _a.documentCount, documentCount = _e === void 0 ? "" : _e;
+    var _b = _a.type, type = _b === void 0 ? "document" : _b, title = _a.title, _c = _a.date, date = _c === void 0 ? new Date() : _c, onCardClick = _a.onCardClick, status = _a.status, _d = _a.documents, documents = _d === void 0 ? {} : _d, _e = _a.documentCount, documentCount = _e === void 0 ? "" : _e, _f = _a.shadow, shadow = _f === void 0 ? true : _f;
     var getIconName = function () {
         switch (type) {
             case "document":
@@ -103,7 +103,7 @@ var DocumentCard = function (_a) {
                 React.createElement(IconButton, { style: "smallFilled", iconName: "allaw-icon-document" }),
                 React.createElement("span", { className: "document-count" }, documentCount))));
     }
-    return (React.createElement("div", { className: "document-card", onClick: function () { return onCardClick && onCardClick(); }, style: { cursor: onCardClick ? "pointer" : "default" } },
+    return (React.createElement("div", { className: "document-card".concat(shadow ? " with-shadow" : ""), onClick: function () { return onCardClick && onCardClick(); }, style: { cursor: onCardClick ? "pointer" : "default" } },
         React.createElement("div", { className: "document-card-left" },
             React.createElement(IconButton, { style: "largeFilled", iconName: getIconName(), color: type == "payment" ? "#25BEEB" : "inherit" }),
             React.createElement("div", { className: "document-card-info" },

package/dist/components/molecules/documentCard/DocumentCard.stories.d.ts

@@ -36,11 +36,17 @@ declare namespace _default {
             let control_5: string;
             export { control_5 as control };
         }
+        export namespace shadow {
+            let control_6: string;
+            export { control_6 as control };
+        }
     }
     export namespace args {
         export { defaultDocuments as documents };
         let documentCount_1: string;
         export { documentCount_1 as documentCount };
+        let shadow_1: boolean;
+        export { shadow_1 as shadow };
     }
     export namespace parameters {
         namespace backgrounds {

package/dist/components/molecules/documentCard/DocumentCard.stories.js

@@ -50,10 +50,12 @@ export default {
             control: "object",
         },
         documentCount: { control: "text" },
+        shadow: { control: "boolean" },
     },
     args: {
         documents: defaultDocuments,
         documentCount: "1/3",
+        shadow: true,
     },
     parameters: {
         backgrounds: {

package/dist/components/molecules/stepper/Stepper.css

@@ -69,9 +69,7 @@
   align-items: center;
   opacity: 0;
   visibility: hidden;
-  transition:
-    opacity 0.3s ease,
-    visibility 0.3s ease;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
 }
 
 .stepper-overlay.visible {
@@ -86,7 +84,7 @@
   overflow-y: auto;
   display: flex;
   justify-content: center;
-  align-items: start;
+  align-items: flex-start;
   font-family: "Open Sans", sans-serif;
   font-size: 16px;
   font-weight: 400;
@@ -94,9 +92,8 @@
   letter-spacing: 0em;
 }
 
-
 @media (max-width: 800px) {
-  .stepper-container  {
+  .stepper-container {
     height: 99dvh;
     position: fixed;
     bottom: 0;
@@ -105,4 +102,4 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
-}
+}

package/package.json

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