allaw-ui 2.4.7 → 2.4.8

package/dist/components/atoms/inputs/VerificationCodeInput.js

@@ -30,20 +30,23 @@ var VerificationCodeInput = function (_a) {
         }
     }, [testError, onError]);
     var handleInputChange = function (index, value) {
+        // console.log(`[VerificationCodeInput] Input ${index} changed to:`, value);
         var _a;
-        console.log("[VerificationCodeInput] Input ".concat(index, " changed to:"), value);
         if (!validateInput(value, allowedChars)) {
-            console.log("[VerificationCodeInput] Invalid input value");
+            // console.log("[VerificationCodeInput] Invalid input value");
             return;
         }
         var newValues = __spreadArray([], values, true);
         newValues[index] = value;
         setValues(newValues);
         var fullValue = newValues.join("");
-        console.log("[VerificationCodeInput] New values:", fullValue);
+        // console.log("[VerificationCodeInput] New values:", fullValue);
         onChange === null || onChange === void 0 ? void 0 : onChange(fullValue);
         if (index === numInputs - 1 && value !== "") {
-            console.log("[VerificationCodeInput] Last input filled, validating with:", fullValue);
+            // console.log(
+            //   "[VerificationCodeInput] Last input filled, validating with:",
+            //   fullValue
+            // );
             if (fullValue.length === numInputs) {
                 setError("");
                 onError === null || onError === void 0 ? void 0 : onError(null);
@@ -70,7 +73,10 @@ var VerificationCodeInput = function (_a) {
             if (!isStillFocused) {
                 if (values.every(function (value) { return value !== ""; })) {
                     var fullValue = values.join("");
-                    console.log("[VerificationCodeInput] All inputs filled, length:", fullValue.length);
+                    // console.log(
+                    //   "[VerificationCodeInput] All inputs filled, length:",
+                    //   fullValue.length
+                    // );
                     setError("");
                     onError === null || onError === void 0 ? void 0 : onError(null);
                     onComplete === null || onComplete === void 0 ? void 0 : onComplete(fullValue);
@@ -97,7 +103,10 @@ var VerificationCodeInput = function (_a) {
             onChange === null || onChange === void 0 ? void 0 : onChange(newValues_1.join(""));
             if (validChars.length >= numInputs) {
                 var fullValue = newValues_1.join("");
-                console.log("[VerificationCodeInput] All inputs filled, length:", fullValue.length);
+                // console.log(
+                //   "[VerificationCodeInput] All inputs filled, length:",
+                //   fullValue.length
+                // );
                 setError("");
                 onError === null || onError === void 0 ? void 0 : onError(null);
                 onComplete === null || onComplete === void 0 ? void 0 : onComplete(fullValue);

package/dist/components/atoms/typography/TinyInfo.css

@@ -4,6 +4,9 @@
   font-family: "Open Sans", sans-serif;
   font-style: normal;
   line-height: normal;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .tiny-info.bold14 {
@@ -57,3 +60,8 @@
 .tiny-info.color-actions-valid {
   color: var(--actions-valid);
 }
+
+.tiny-info-icon {
+  font-size: inherit;
+  line-height: 1;
+}

package/dist/components/atoms/typography/TinyInfo.d.ts

@@ -8,6 +8,7 @@ export interface TinyInfoProps {
     className?: string;
     align?: "left" | "center" | "right";
     uppercase?: boolean;
+    startIcon?: string;
 }
 declare const TinyInfo: React.FC<TinyInfoProps>;
 export default TinyInfo;

package/dist/components/atoms/typography/TinyInfo.js

@@ -6,10 +6,13 @@ var toUpperCaseWithAccents = function (str) {
     });
 };
 var TinyInfo = function (_a) {
-    var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "noir" : _b, text = _a.text, href = _a.href, className = _a.className, _c = _a.uppercase, uppercase = _c === void 0 ? false : _c, _d = _a.align, align = _d === void 0 ? "center" : _d;
+    var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "noir" : _b, text = _a.text, href = _a.href, customClassName = _a.className, _c = _a.uppercase, uppercase = _c === void 0 ? false : _c, _d = _a.align, align = _d === void 0 ? "center" : _d, startIcon = _a.startIcon;
     var processedText = uppercase ? toUpperCaseWithAccents(text) : text;
-    var content = (React.createElement("span", { className: "tiny-info ".concat(variant, " ").concat(color ? "color-".concat(color) : "", " ").concat(className || ""), dangerouslySetInnerHTML: { __html: processedText }, style: { textAlign: align } }));
-    return href ? (React.createElement("a", { href: href, className: "tiny-info-link ".concat(className || "") }, content)) : (content);
+    var content = (React.createElement(React.Fragment, null,
+        startIcon && React.createElement("i", { className: "".concat(startIcon, " tiny-info-icon") }),
+        processedText));
+    var finalClassName = "tiny-info ".concat(variant, " ").concat(color ? "color-".concat(color) : "", " ").concat(customClassName || "", " ").concat(align);
+    return href ? (React.createElement("a", { href: href, className: "tiny-info-link ".concat(finalClassName) }, content)) : (React.createElement("p", { className: finalClassName }, content));
 };
 export default TinyInfo;
 TinyInfo.displayName = "TinyInfo";

package/dist/components/atoms/typography/TinyInfo.stories.d.ts

@@ -30,6 +30,10 @@ declare namespace _default {
             let control_4: string;
             export { control_4 as control };
         }
+        namespace startIcon {
+            let control_5: string;
+            export { control_5 as control };
+        }
     }
     export namespace parameters {
         namespace backgrounds {
@@ -49,4 +53,6 @@ export const SemiBold12: any;
 export const Medium12: any;
 export const WithLink: any;
 export const Uppercase: any;
+export const WithStartIcon: any;
+export const WithStartIconAndLink: any;
 import TinyInfo from "./TinyInfo";

package/dist/components/atoms/typography/TinyInfo.stories.js

@@ -38,6 +38,9 @@ export default {
         uppercase: {
             control: "boolean",
         },
+        startIcon: {
+            control: "text",
+        },
     },
     parameters: {
         backgrounds: {
@@ -95,3 +98,20 @@ Uppercase.args = {
     text: "Texte avec des accents: éàèùç",
     uppercase: true,
 };
+export var WithStartIcon = Template.bind({});
+WithStartIcon.args = {
+    variant: "medium14",
+    color: "noir",
+    text: "Texte avec une icône",
+    startIcon: "allaw-icon-info",
+    uppercase: false,
+};
+export var WithStartIconAndLink = Template.bind({});
+WithStartIconAndLink.args = {
+    variant: "medium14",
+    color: "bleu-allaw",
+    text: "Lien avec une icône",
+    startIcon: "allaw-icon-external-link",
+    href: "https://example.com",
+    uppercase: false,
+};

package/package.json

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