allaw-ui 0.1.71 → 1.0.0

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

@@ -0,0 +1,83 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import DetailedContactCard from "./DetailedContactCard";
+import "../../../styles/global.css";
+var NoPhotoImage = "/assets/NoPhoto.png";
+export default {
+    title: "Components/Molecules/DetailedContactCard",
+    component: DetailedContactCard,
+    tags: ["autodocs"],
+    argTypes: {
+        size: {
+            control: {
+                type: "select",
+                options: ["small", "medium", "large"],
+            },
+        },
+        name: { control: "text" },
+        birthDate: { control: "text" },
+        avatarUrl: { control: "text" },
+        status: { control: "text" },
+        address: { control: "text" },
+        phone: { control: "text" },
+        email: { control: "text" },
+        onEdit: { action: "edited" },
+        gender: {
+            control: {
+                type: "select",
+                options: ["male", "female"],
+            },
+        },
+        actionIconName: {
+            control: "text",
+            description: "Nom de l'icône pour le bouton d'action",
+        },
+    },
+    args: {
+        name: "Jane DOE",
+        birthDate: "31/12/1985",
+        avatarUrl: NoPhotoImage,
+        status: "Client actif",
+        address: "142 avenue Turbigo, 75016 Paris",
+        phone: "06 63 90 59 25",
+        email: "enzo@quarantesoixante.com",
+        gender: "female",
+        actionIconName: "allaw-icon-edit-2",
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+};
+var Template = function (args) { return React.createElement(DetailedContactCard, __assign({}, args)); };
+export var Small = Template.bind({});
+Small.args = {
+    size: "small",
+};
+export var Medium = Template.bind({});
+Medium.args = {
+    size: "medium",
+};
+export var Large = Template.bind({});
+Large.args = {
+    size: "large",
+};
+export var LargeEmptyFields = Template.bind({});
+LargeEmptyFields.args = __assign(__assign({}, Large.args), { phone: "", email: undefined });

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

@@ -0,0 +1,140 @@
+@import "../../../styles/colors.module.css";
+
+.contactCard {
+  font-family: "Open Sans", sans-serif;
+  border-radius: 16px;
+  border: 1px solid var(--grey-venom, #e6edf5);
+  background: var(--pure-white, #fff);
+  display: flex;
+  padding: 24px;
+  width: 100%;
+  justify-content: space-between;
+  align-items: stretch;
+  align-self: stretch;
+  border-radius: 16px;
+}
+
+.actionsContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+  justify-content: end;
+}
+
+.contentContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 24px;
+}
+
+.nameTagContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  padding-left: 2px;
+}
+
+.contactName {
+  color: var(--noir, #171e25);
+  font-family: Poppins;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.infoContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  padding-left: 6px;
+}
+
+.infoItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.infoIcon {
+  width: 24px;
+  height: 24px;
+  color: var(--bleu-allaw, #25beeb);
+  font-size: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.infoIconDisabled {
+  color: var(--mid-grey, #728ea7);
+}
+
+.infoText {
+  color: var(--noir, #171e25);
+  font-family: "Open Sans";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.infoText.contact.emptyField {
+  color: var(--mid-grey, #728ea7);
+  font-style: italic;
+}
+
+.telephoneEmailItems {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+}
+
+@media (max-width: 800px) {
+  .telephoneEmailItems {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+}
+
+@media (max-width: 600px) {
+  .contentContainer {
+    flex-direction: column;
+  }
+  .nameTagContainer {
+    align-items: flex-start;
+    width: 100%;
+  }
+}
+
+.actionButtonContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 100%;
+  align-self: stretch;
+}
+
+@media (max-width: 450px) {
+  .actionButtonContainer {
+    display: block;
+    position: absolute;
+    top: 24px;
+    right: 24px;
+    height: 100%;
+  }
+}
+
+.emptyField {
+  color: var(--mid-grey, #728ea7) !important;
+  font-style: italic;
+}

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

@@ -1,6 +1,6 @@
 @import "../../../styles/colors.css";
 
-.contact-card {
+.detailed-contact-card {
   font-family: "Open Sans", sans-serif;
   border-radius: 16px;
   border: 1px solid var(--venom-grey, #e6edf5);
@@ -14,16 +14,16 @@
   border-radius: 50%;
 }
 
-.contact-card.small .contact-details,
-.contact-card.medium .contact-details,
-.contact-card.large .contact-details {
+.detailed-contact-card.small .contact-details,
+.detailed-contact-card.medium .contact-details,
+.detailed-contact-card.large .contact-details {
   display: flex;
   align-items: center;
   gap: 8px;
   line-height: normal;
 }
 
-.contact-card.small {
+.detailed-contact-card.small {
   display: flex;
   width: 260px;
   padding: 15px 16px 15px 16px;
@@ -31,7 +31,7 @@
   align-items: flex-end;
 }
 
-.contact-card.small .contact-card-content {
+.detailed-contact-card.small .detailed-contact-card-content {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -40,7 +40,7 @@
   align-self: stretch;
 }
 
-.contact-card.small .profile-picture-container {
+.detailed-contact-card.small .profile-picture-container {
   border-radius: 64px;
   border: 2px solid var(--venom-grey, #e6edf5);
   background: lightgray 50% / cover no-repeat;
@@ -51,7 +51,7 @@
   padding-bottom: 0px;
 }
 
-.contact-card.small .contact-info {
+.detailed-contact-card.small .contact-info {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -62,7 +62,7 @@
   padding-left: 1px;
 }
 
-.contact-card.small .contact-name {
+.detailed-contact-card.small .contact-name {
   color: var(--Primary-Mid-black, var(--primary-black, #171e25));
   font-family: "Open Sans";
   font-size: 16px;
@@ -73,7 +73,7 @@
   padding-bottom: 0px;
 }
 
-.contact-card.small .contact-details {
+.detailed-contact-card.small .contact-details {
   color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
   font-family: "Open Sans";
   font-size: 12px;
@@ -84,7 +84,7 @@
   margin: 0;
 }
 
-.contact-card.medium {
+.detailed-contact-card.medium {
   display: flex;
   width: 342px;
   padding: 14px 16px 13px 16px;
@@ -95,7 +95,7 @@
   background: var(--Primary-Blanc, #fff);
 }
 
-.contact-card.medium .contact-card-content {
+.detailed-contact-card.medium .detailed-contact-card-content {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -105,14 +105,14 @@
   gap: 10px;
 }
 
-.contact-card.medium .contact-info-group {
+.detailed-contact-card.medium .contact-info-group {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 10px;
 }
 
-.contact-card.medium .profile-picture-container {
+.detailed-contact-card.medium .profile-picture-container {
   border-radius: 64px;
   border: 3px solid var(--venom-grey, #e6edf5);
   display: flex;
@@ -120,7 +120,7 @@
   justify-content: center;
   align-items: center;
 }
-.contact-card.medium .contact-info {
+.detailed-contact-card.medium .contact-info {
   margin-left: -24px;
   margin-top: -4px;
   display: flex;
@@ -129,7 +129,7 @@
   padding-left: 8px;
 }
 
-.contact-card.medium .contact-name {
+.detailed-contact-card.medium .contact-name {
   color: var(--Primary-Mid-black, var(--primary-black, #171e25));
   text-overflow: ellipsis;
   font-family: "Open Sans";
@@ -139,7 +139,7 @@
   line-height: 24px;
 }
 
-.contact-card.medium .contact-details {
+.detailed-contact-card.medium .contact-details {
   color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
   font-family: "Open Sans";
   margin-top: 5px;
@@ -149,7 +149,7 @@
   line-height: normal;
 }
 
-.contact-card.medium .status-container {
+.detailed-contact-card.medium .status-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -158,15 +158,15 @@
   align-self: stretch;
 }
 
-.contact-card.small .avatar,
-.contact-card.medium .avatar {
+.detailed-contact-card.small .avatar,
+.detailed-contact-card.medium .avatar {
   width: 71px;
   height: 71px;
   border-radius: 50%;
   object-fit: cover;
 }
 
-.contact-card.large .avatar {
+.detailed-contact-card.large .avatar {
   width: 90px;
   height: 90px;
   border-radius: 50%;
@@ -196,7 +196,7 @@
   margin-right: 8px;
 }
 
-.contact-card.large {
+.detailed-contact-card.large {
   display: flex;
   width: 1141px;
   padding: 24px 24px 17px 24px;
@@ -207,7 +207,7 @@
   background: var(--Primary-Blanc, #fff);
 }
 
-.contact-card.large .profile-picture-container {
+.detailed-contact-card.large .profile-picture-container {
   width: 90px;
   height: 90px;
   flex-shrink: 0;
@@ -220,7 +220,7 @@
   box-sizing: content-box;
 }
 
-.contact-card.large .content-container {
+.detailed-contact-card.large .content-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -230,7 +230,7 @@
   align-self: stretch;
 }
 
-.contact-card.large .contact-name {
+.detailed-contact-card.large .contact-name {
   color: var(--Primary-Mid-black, var(--primary-black, #171e25));
   font-family: Poppins, sans-serif;
   font-size: 24px;
@@ -240,7 +240,7 @@
   padding-bottom: 20px;
 }
 
-.contact-card.large .contact-details {
+.detailed-contact-card.large .contact-details {
   color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
   font-family: "Open Sans", sans-serif;
   font-size: 14px;
@@ -249,11 +249,11 @@
   line-height: 1px;
 }
 
-.contact-card.large .contact-additional-info {
+.detailed-contact-card.large .contact-additional-info {
   margin-top: 11px;
 }
 
-.contact-card.large .contact-additional-info {
+.detailed-contact-card.large .contact-additional-info {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -261,7 +261,7 @@
   gap: 0px;
 }
 
-.contact-card.large .contact-address-container {
+.detailed-contact-card.large .contact-address-container {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -270,7 +270,7 @@
   line-height: 0px;
 }
 
-.contact-card.large .contact-telephone-email-container {
+.detailed-contact-card.large .contact-telephone-email-container {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -279,7 +279,7 @@
   margin-top: -3px;
 }
 
-.contact-card.large .info-label {
+.detailed-contact-card.large .info-label {
   color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
   font-family: "Open Sans", sans-serif;
   font-size: 12px;
@@ -288,7 +288,7 @@
   line-height: normal;
 }
 
-.contact-card.large .info-value {
+.detailed-contact-card.large .info-value {
   flex: 1 0 0;
   align-self: stretch;
   color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
@@ -299,88 +299,26 @@
   line-height: normal;
 }
 
-.contact-card.large .contact-phone {
+.detailed-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 {
+.action-button-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;
+  align-items: flex-end;
+  height: 100%;
+  align-self: stretch;
 }
 
-.contact-card.editable .info-text.contact {
-  color: var(--Primary-Dark-grey, #456073);
+.detailed-contact-card .empty-field {
+  color: var(--Tags-Mid-grey, #728ea7) !important;
+  font-style: italic;
 }
 
-.contact-card.editable .telephone-email-items {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 16px;
+.detailed-contact-card.large .empty-field {
+  color: var(--Tags-Mid-grey, #728ea7) !important;
+  font-style: italic;
 }

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

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

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

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

package/dist/components/molecules/datepickerForm/DatepickerForm.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import "./datepickerForm.css";
+import "../../../styles/global.css";
+export interface DatepickerFormProps {
+    value?: Date;
+    onChange?: (date: Date) => void;
+    placeholder?: string;
+    text?: string;
+    variant?: "bold" | "semiBold" | "medium";
+    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
+    yearDropdownItemNumber?: number;
+    maxDaysInPast?: number;
+    minDate?: Date;
+}
+declare const DatepickerForm: React.FC<DatepickerFormProps>;
+export default DatepickerForm;

package/dist/components/molecules/datepickerForm/DatepickerForm.js

@@ -0,0 +1,13 @@
+import React from "react";
+import "./datepickerForm.css";
+import "../../../styles/global.css";
+import Paragraph from "../../atoms/typography/Paragraph";
+import Datepicker from "../../atoms/datepickers/Datepicker";
+var DatepickerForm = function (_a) {
+    // console.log("Valeur reçue dans DatepickerForm :", value);
+    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, text = _a.text, _c = _a.variant, variant = _c === void 0 ? "medium" : _c, _d = _a.color, color = _d === void 0 ? "noir" : _d, _e = _a.yearDropdownItemNumber, yearDropdownItemNumber = _e === void 0 ? 10 : _e, maxDaysInPast = _a.maxDaysInPast, minDate = _a.minDate;
+    return (React.createElement("div", { className: "datepicker-form-wrapper" },
+        text && React.createElement(Paragraph, { text: text, variant: variant, color: color }),
+        React.createElement(Datepicker, { value: value || undefined, onChange: onChange, placeholder: placeholder, yearDropdownItemNumber: yearDropdownItemNumber, maxDaysInPast: maxDaysInPast, minDate: minDate })));
+};
+export default DatepickerForm;