allaw-ui 2.9.2 → 2.9.4

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

@@ -12,6 +12,9 @@ export interface ColoredCheckboxProps {
     markType?: "cross" | "check";
     isSignedIn?: boolean;
     unlinkIconPath?: any;
+    "data-tooltip-id"?: string;
+    "data-tooltip-content"?: string;
+    [key: string]: any;
 }
 declare const ColoredCheckbox: React.FC<ColoredCheckboxProps>;
 export default ColoredCheckbox;

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

@@ -1,3 +1,25 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React, { useState } from "react";
 import styles from "./ColoredCheckbox.module.css";
 import "../../../styles/global.css"; // Pour importer les icônes allaw
@@ -19,7 +41,7 @@ var formatEmail = function (email) {
         React.createElement("span", { className: styles.emailTLD }, tld)));
 };
 var ColoredCheckbox = function (_a) {
-    var id = _a.id, _b = _a.label, label = _b === void 0 ? "mon-email@provider.com" : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.boxColor, boxColor = _d === void 0 ? "#000000" : _d, _e = _a.markColor, markColor = _e === void 0 ? "#FFFFFF" : _e, _f = _a.textColor, textColor = _f === void 0 ? "#000000" : _f, _g = _a.size, size = _g === void 0 ? "default" : _g, _h = _a.markType, markType = _h === void 0 ? "cross" : _h, _j = _a.isSignedIn, isSignedIn = _j === void 0 ? true : _j, _k = _a.unlinkIconPath, unlinkIconPath = _k === void 0 ? "/assets/images/allaw-icon-unlink-red.svg" : _k;
+    var id = _a.id, _b = _a.label, label = _b === void 0 ? "mon-email@provider.com" : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.boxColor, boxColor = _d === void 0 ? "#000000" : _d, _e = _a.markColor, markColor = _e === void 0 ? "#FFFFFF" : _e, _f = _a.textColor, textColor = _f === void 0 ? "#000000" : _f, _g = _a.size, size = _g === void 0 ? "default" : _g, _h = _a.markType, markType = _h === void 0 ? "cross" : _h, _j = _a.isSignedIn, isSignedIn = _j === void 0 ? true : _j, _k = _a.unlinkIconPath, unlinkIconPath = _k === void 0 ? "/assets/images/allaw-icon-unlink-red.svg" : _k, tooltipId = _a["data-tooltip-id"], tooltipContent = _a["data-tooltip-content"], rest = __rest(_a, ["id", "label", "checked", "onChange", "boxColor", "markColor", "textColor", "size", "markType", "isSignedIn", "unlinkIconPath", "data-tooltip-id", "data-tooltip-content"]);
     var _l = useState(checked), isChecked = _l[0], setIsChecked = _l[1];
     // Generate a random ID if none is provided
     var checkboxId = id || "checkbox-".concat(Math.random().toString(36).substr(2, 9));
@@ -51,7 +73,7 @@ var ColoredCheckbox = function (_a) {
     var formattedLabel = typeof label === "string" && label.includes("@")
         ? formatEmail(label)
         : label;
-    return (React.createElement("div", { className: styles.container },
+    return (React.createElement("div", __assign({ className: styles.container, "data-tooltip-id": tooltipId, "data-tooltip-content": tooltipContent || (typeof label === "string" ? label : undefined) }, rest),
         React.createElement("button", { id: checkboxId, className: "".concat(styles.checkbox, " ").concat(isChecked ? styles.checked : "", " ").concat(size === "small" ? styles.small : ""), onClick: handleClick, style: checkboxStyle, "aria-checked": isChecked, role: "checkbox", "data-cy": "checkbox-".concat(checkboxId) }, isChecked && (React.createElement("span", { className: "".concat(styles.icon, " ").concat(markType === "cross" ? "allaw-icon-close" : "allaw-icon-check"), style: markStyle }))),
         isSignedIn === false && unlinkIconPath && (React.createElement("img", { src: unlinkIconPath.src || unlinkIconPath, alt: "Non connect\u00E9", className: styles.unlinkIcon, width: "16", height: "16", style: { width: "16px", height: "16px" } })),
         label && (React.createElement("label", { htmlFor: checkboxId, className: styles.label, style: labelStyle, onClick: handleClick }, formattedLabel))));

package/dist/components/molecules/questionAnswer/QuestionAnswer.d.ts

@@ -4,6 +4,7 @@ export type QuestionAnswerProps = {
         question: string;
         answer: string;
     }[];
+    title?: string;
 };
 declare const QuestionAnswer: React.FC<QuestionAnswerProps>;
 export default QuestionAnswer;

package/dist/components/molecules/questionAnswer/QuestionAnswer.js

@@ -9,9 +9,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import React, { useState } from "react";
 import styles from "./questionAnswer.module.css";
-import IconButton from "../../atoms/buttons/IconButton";
 var QuestionAnswer = function (_a) {
-    var questions = _a.questions;
+    var questions = _a.questions, title = _a.title;
     var _b = useState([]), openIndices = _b[0], setOpenIndices = _b[1];
     var toggleAnswer = function (index) {
         if (openIndices.includes(index)) {
@@ -23,15 +22,11 @@ var QuestionAnswer = function (_a) {
     };
     return (React.createElement("section", { className: styles.questionAnswerContainer, "aria-labelledby": "faq-title" },
         React.createElement("div", { className: styles.questionAnswerContent },
-            React.createElement("h2", { className: styles.questionAnswerTitle }, "Questions Fr\u00E9quemment Pos\u00E9es"),
+            React.createElement("h2", { className: styles.questionAnswerTitle }, title ? title : "Questions Fréquemment Posées"),
             React.createElement("ul", { className: styles.questionAnswerListContent }, questions.map(function (item, index) { return (React.createElement("li", { key: index, className: styles.questionAnswerItem, onClick: function () { return toggleAnswer(index); } },
                 React.createElement("div", { className: styles.questionContainer },
                     React.createElement("h3", { className: styles.questionTitle }, item.question),
-                    React.createElement(IconButton, { color: "#050505", style: "iconOnly", iconName: openIndices.includes(index)
-                            ? "allaw-icon-chevron-up"
-                            : "allaw-icon-chevron-down", "aria-label": openIndices.includes(index)
-                            ? "Fermer la r\u00E9ponse \u00E0 : ".concat(item.question)
-                            : "Ouvrir la r\u00E9ponse \u00E0 : ".concat(item.question) })),
+                    React.createElement("i", { className: !openIndices.includes(index) ? "allaw-icon-chevron-down" : "allaw-icon-chevron-up", style: { color: "#171E25" } })),
                 React.createElement("div", { id: "answer-".concat(index), className: "".concat(styles.answerContainer, " ").concat(openIndices.includes(index) ? styles.open : "") },
                     React.createElement("p", { className: styles.answer }, item.answer)))); })))));
 };

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

@@ -2,7 +2,6 @@
   width: 100%;
   height: auto;
   display: flex;
-  padding: 64px 0;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -16,14 +15,14 @@
   height: auto;
   flex-direction: column;
   align-items: center;
-  gap: 124px;
+  gap: 56px;
 }
 
 .questionAnswerTitle {
   color: var(--Primary-Mid-black, #171e25);
-  text-align: center;
+  text-align: left;
   font-family: Poppins;
-  font-size: 30px;
+  font-size: 26px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
@@ -51,7 +50,7 @@
 
 .questionContainer {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 32px;
   align-self: stretch;
   justify-content: space-between;
@@ -59,9 +58,9 @@
 }
 
 .questionTitle {
-  color: var(--Primary-Mid-black, #171e25);
-  font-family: Poppins;
-  font-size: 20px;
+  color: #171E25;
+  font-family: "Open Sans";
+  font-size: 18px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
@@ -81,46 +80,22 @@
 }
 
 .answer {
-  color: var(--Primary-Dark-grey, #456073);
+  color: #456073;
   font-family: "Open Sans";
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 400;
   line-height: normal;
+  text-align: justify;
 }
 
-@media (max-width: 995px) {
-  .questionAnswerContainer {
-    padding: 26px 80px;
-  }
-
-  .questionAnswerContent {
-    gap: 70px;
-  }
-
-  .questionAnswerTitle {
-    font-size: 26px;
-  }
-
+@media (max-width: 800px) {
   .answer {
-    font-size: 18px;
+    text-align: justify;
   }
-}
-
-@media (max-width: 450px) {
-  .questionAnswerContainer {
-    padding: 12px 40px;
-    gap: 20px;
+  .questionAnswerTitle {
+    font-size: 20px;
   }
-
   .questionAnswerContent {
-    gap: 60px;
-  }
-
-  .questionTitle {
-    font-size: 18px;
-  }
-
-  .answer {
-    font-size: 16px;
+    gap: 42px;
   }
 }

package/package.json

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