allaw-ui 0.0.18 → 0.0.293

package/dist/components/molecules/caseCard/CaseCard.js

@@ -0,0 +1,20 @@
+import React from "react";
+import "./CaseCard.css";
+import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
+var CaseCard = function (_a) {
+    var clientName = _a.clientName, title = _a.title, nextAppointment = _a.nextAppointment, categories = _a.categories, variant = _a.variant;
+    return (React.createElement("div", { className: "case-card-wrapper case-card-".concat(variant) },
+        React.createElement("div", { className: "case-card-content" },
+            React.createElement("div", { className: "case-card-header" },
+                React.createElement("span", { className: "case-card-client-name" }, clientName),
+                React.createElement("h2", { className: variant === "desktop"
+                        ? "case-card-title"
+                        : "case-card-title-extended" }, title)),
+            React.createElement("div", { className: "case-card-categories" }, categories.map(function (category, index) { return (React.createElement(OtherStatusTag, { key: index, label: category, type: "readonly" })); }))),
+        nextAppointment && variant !== "archived" && (React.createElement("div", { className: "case-card-next-appointment" },
+            React.createElement("span", { className: "case-card-next-appointment-label" }, "Prochain RDV"),
+            variant === "desktop" ? (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: "case-card-next-appointment-date" }, nextAppointment.date),
+                React.createElement("span", { className: "case-card-next-appointment-time" }, nextAppointment.time))) : (React.createElement("span", { className: "case-card-next-appointment-date-only" }, nextAppointment.date))))));
+};
+export default CaseCard;

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

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

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

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

package/dist/components/molecules/checkboxForm/CheckboxForm.css

@@ -0,0 +1,22 @@
+.checkbox-form {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.checkbox-form-black {
+  color: var(--noir);
+}
+
+.checkbox-form-white {
+  color: var(--pure-white);
+}
+
+.checkbox-form-label-container {
+  display: flex;
+  align-items: center;
+}
+
+.checkbox-form-required {
+  color: var(--dark-grey, #456073);
+}

package/dist/components/molecules/checkboxForm/CheckboxForm.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import "./CheckboxForm.css";
+export interface CheckboxFormProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    isWhite?: boolean;
+    label?: string;
+    isRequired?: boolean;
+}
+declare const CheckboxForm: React.FC<CheckboxFormProps>;
+export default CheckboxForm;

package/dist/components/molecules/checkboxForm/CheckboxForm.js

@@ -0,0 +1,15 @@
+import React from "react";
+import Checkbox from "../../atoms/checkboxes/Checkbox";
+import Paragraph from "../../atoms/typography/Paragraph";
+import "./CheckboxForm.css";
+var CheckboxForm = function (_a) {
+    var _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.isWhite, isWhite = _c === void 0 ? false : _c, label = _a.label, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d;
+    return (React.createElement("div", { className: "checkbox-form ".concat(isWhite ? "checkbox-form-white" : "checkbox-form-black") },
+        React.createElement(Checkbox, { checked: checked, onChange: onChange, isWhite: isWhite }),
+        label && (React.createElement("div", { className: "checkbox-form-label-container" },
+            React.createElement(Paragraph, { variant: "semiBold", color: isWhite ? "pure-white" : "noir", text: label }),
+            isRequired && (React.createElement("span", { className: "checkbox-form-required" },
+                "\u00A0",
+                "*"))))));
+};
+export default CheckboxForm;

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

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

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

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

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

@@ -0,0 +1,386 @@
+@import "../../../styles/colors.css";
+
+.contact-card {
+  font-family: "Open Sans", sans-serif;
+  border-radius: 16px;
+  border: 1px solid var(--venom-grey, #e6edf5);
+  background: var(--Primary-Blanc, #fff);
+}
+
+.gender-separator {
+  width: 4px;
+  height: 4px;
+  background-color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
+  border-radius: 50%;
+}
+
+.contact-card.small .contact-details,
+.contact-card.medium .contact-details,
+.contact-card.large .contact-details {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  line-height: normal;
+}
+
+.contact-card.small {
+  display: flex;
+  width: 260px;
+  padding: 15px 16px 15px 16px;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.contact-card.small .contact-card-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 13px;
+  align-self: stretch;
+}
+
+.contact-card.small .profile-picture-container {
+  border-radius: 64px;
+  border: 2px solid var(--venom-grey, #e6edf5);
+  background: lightgray 50% / cover no-repeat;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 0px;
+}
+
+.contact-card.small .contact-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
+  padding-bottom: 4px;
+  padding-left: 1px;
+}
+
+.contact-card.small .contact-name {
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+  font-family: "Open Sans";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 5px;
+  margin: 0;
+  padding-bottom: 0px;
+}
+
+.contact-card.small .contact-details {
+  color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
+  font-family: "Open Sans";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 0px;
+  letter-spacing: 0.12px;
+  margin: 0;
+}
+
+.contact-card.medium {
+  display: flex;
+  width: 342px;
+  padding: 14px 16px 13px 16px;
+  align-items: stretch;
+  gap: 16px;
+  border-radius: 16px;
+  border: 1px solid var(--venom-grey, #e6edf5);
+  background: var(--Primary-Blanc, #fff);
+}
+
+.contact-card.medium .contact-card-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1;
+  height: 100%;
+  gap: 10px;
+}
+
+.contact-card.medium .contact-info-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+.contact-card.medium .profile-picture-container {
+  border-radius: 64px;
+  border: 3px solid var(--venom-grey, #e6edf5);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.contact-card.medium .contact-info {
+  margin-left: -24px;
+  margin-top: -4px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-left: 8px;
+}
+
+.contact-card.medium .contact-name {
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+  text-overflow: ellipsis;
+  font-family: "Open Sans";
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px;
+}
+
+.contact-card.medium .contact-details {
+  color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
+  font-family: "Open Sans";
+  margin-top: 5px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.contact-card.medium .status-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  align-self: stretch;
+}
+
+.contact-card.small .avatar,
+.contact-card.medium .avatar {
+  width: 71px;
+  height: 71px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.contact-card.large .avatar {
+  width: 90px;
+  height: 90px;
+  border-radius: 50%;
+  object-fit: cover;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.contact-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.contact-additional-info {
+  margin-top: 16px;
+}
+
+.contact-additional-info p {
+  margin: 8px 0;
+}
+
+.contact-additional-info strong {
+  font-weight: 600;
+  margin-right: 8px;
+}
+
+.contact-card.large {
+  display: flex;
+  width: 1141px;
+  padding: 24px 24px 17px 24px;
+  align-items: flex-start;
+  gap: 56px;
+  border-radius: 16px;
+  border: 1px solid var(--venom-grey, #e6edf5);
+  background: var(--Primary-Blanc, #fff);
+}
+
+.contact-card.large .profile-picture-container {
+  width: 90px;
+  height: 90px;
+  flex-shrink: 0;
+  border-radius: 94px;
+  border: 2px solid var(--venom-grey, #e6edf5);
+  background: lightgray 50% / cover no-repeat;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: content-box;
+}
+
+.contact-card.large .content-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 0px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+
+.contact-card.large .contact-name {
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+  font-family: Poppins, sans-serif;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 16px;
+  padding-bottom: 20px;
+}
+
+.contact-card.large .contact-details {
+  color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
+  font-family: "Open Sans", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1px;
+}
+
+.contact-card.large .contact-additional-info {
+  margin-top: 11px;
+}
+
+.contact-card.large .contact-additional-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 0px;
+}
+
+.contact-card.large .contact-address-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  line-height: 0px;
+}
+
+.contact-card.large .contact-telephone-email-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 48px;
+  margin-top: -3px;
+}
+
+.contact-card.large .info-label {
+  color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
+  font-family: "Open Sans", sans-serif;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.contact-card.large .info-value {
+  flex: 1 0 0;
+  align-self: stretch;
+  color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
+  font-family: "Open Sans", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.contact-card.large .contact-phone {
+  font-family: Inter, sans-serif;
+  font-weight: 500;
+}
+
+.contact-card.editable {
+  display: flex;
+  padding: 24px;
+  width: 1214px;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-self: stretch;
+  border-radius: 16px;
+  border: 1px solid var(--Primary-Venom-grey, #e6edf5);
+  background: var(--Primary-Blanc, #fff);
+}
+
+.contact-card.editable .content-container {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.contact-card.editable .name-tag-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  padding-left: 2px;
+}
+
+.contact-card.editable .contact-name {
+  color: var(--Primary-Mid-black, #171e25);
+  font-family: Poppins;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.contact-card.editable .info-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  padding-left: 6px;
+}
+
+.contact-card.editable .info-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.contact-card.editable .info-icon {
+  width: 24px;
+  height: 24px;
+  color: #25beeb;
+  font-size: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.contact-card.editable .info-text {
+  color: var(--Primary-Mid-black, #171e25);
+  font-family: "Open Sans";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.contact-card.editable .info-text.contact {
+  color: var(--Primary-Dark-grey, #456073);
+}
+
+.contact-card.editable .telephone-email-items {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+}

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

@@ -0,0 +1,17 @@
+import React from "react";
+import "./ContactCard.css";
+export interface ContactCardProps {
+    size: "small" | "medium" | "large" | "editable";
+    name: string;
+    birthDate: string;
+    avatarUrl: string;
+    status: string;
+    address: string;
+    phone: string;
+    email: string;
+    isEditable: boolean;
+    onEdit: () => void;
+    gender: "male" | "female";
+}
+declare const ContactCard: React.FC<ContactCardProps>;
+export default ContactCard;

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

@@ -0,0 +1,80 @@
+import React from "react";
+import "./ContactCard.css";
+import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
+import IconButton from "../../atoms/buttons/IconButton";
+import Image from "next/image";
+var NoPhoto = "/assets/NoPhoto.png";
+var ContactCard = function (_a) {
+    var size = _a.size, name = _a.name, birthDate = _a.birthDate, avatarUrl = _a.avatarUrl, status = _a.status, address = _a.address, phone = _a.phone, email = _a.email, onEdit = _a.onEdit, gender = _a.gender;
+    var renderContent = function () {
+        switch (size) {
+            case "small":
+                return (React.createElement("div", { className: "contact-card-content" },
+                    React.createElement("div", { className: "profile-picture-container" },
+                        React.createElement(Image, { src: avatarUrl || NoPhoto, alt: name, width: 64, height: 64, className: "avatar" })),
+                    React.createElement("div", { className: "contact-info" },
+                        React.createElement("h3", { className: "contact-name" }, name),
+                        React.createElement("p", { className: "contact-details" },
+                            React.createElement("span", null, gender === "male" ? "M" : "F"),
+                            React.createElement("span", { className: "gender-separator" }),
+                            React.createElement("span", null, birthDate)))));
+            case "medium":
+                return (React.createElement("div", { className: "contact-card-content" },
+                    React.createElement("div", { className: "profile-picture-container" },
+                        React.createElement(Image, { src: avatarUrl || NoPhoto, alt: name, width: 72, height: 72, className: "avatar" })),
+                    React.createElement("div", { className: "contact-info" },
+                        React.createElement("h3", { className: "contact-name" }, name),
+                        React.createElement("p", { className: "contact-details" },
+                            React.createElement("span", null, gender === "male" ? "M" : "F"),
+                            React.createElement("span", { className: "gender-separator" }),
+                            React.createElement("span", null, birthDate))),
+                    React.createElement("div", { className: "status-container" },
+                        React.createElement(OtherStatusTag, { label: status, type: "readonly" }))));
+            case "large":
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "profile-picture-container" },
+                        React.createElement(Image, { src: avatarUrl || NoPhoto, alt: name, width: 94, height: 94, className: "avatar" })),
+                    React.createElement("div", { className: "content-container" },
+                        React.createElement("div", null,
+                            React.createElement("h3", { className: "contact-name" }, name),
+                            React.createElement("p", { className: "contact-details" },
+                                React.createElement("span", null, gender === "male" ? "M" : "F"),
+                                React.createElement("span", { className: "gender-separator" }),
+                                React.createElement("span", null, birthDate))),
+                        React.createElement("div", { className: "contact-additional-info" },
+                            React.createElement("div", { className: "contact-address-container" },
+                                React.createElement("p", { className: "info-label" }, "ADRESSE"),
+                                React.createElement("p", { className: "info-value" }, address)),
+                            React.createElement("div", { className: "contact-telephone-email-container" },
+                                React.createElement("p", { className: "info-label" }, "CONTACT"),
+                                React.createElement("p", { className: "info-value" },
+                                    React.createElement("span", { className: "contact-phone" }, phone)),
+                                React.createElement("p", { className: "info-value" },
+                                    React.createElement("span", { className: "contact-phone" }, email))))),
+                    React.createElement("div", { className: "status-container" },
+                        React.createElement(OtherStatusTag, { label: status, type: "readonly" }))));
+            case "editable":
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "content-container" },
+                        React.createElement("div", { className: "name-tag-container" },
+                            React.createElement("h3", { className: "contact-name" }, 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" }),
+                                    React.createElement("span", { className: "info-text contact" }, phone)),
+                                React.createElement("div", { className: "info-item" },
+                                    React.createElement("i", { className: "allaw-icon-mail info-icon" }),
+                                    React.createElement("span", { className: "info-text contact" }, email))))),
+                    React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-edit-2", onClick: onEdit })));
+        }
+    };
+    return React.createElement("div", { className: "contact-card ".concat(size) }, renderContent());
+};
+export default ContactCard;

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

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

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

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