allaw-ui 3.6.0 → 3.6.1

package/dist/components/atoms/inputs/Input.css

@@ -66,6 +66,7 @@
   border: 2px solid var(--grey-venom, #e6edf5);
   background: var(--Primary-Blanc, #fff);
   padding: 10px;
+  position: relative;
 }
 
 .Input-default .Input-input:hover {
@@ -81,6 +82,7 @@
   border: none;
   outline: none;
   color: var(--noir);
+  padding-right: 30px;
 }
 
 /* Style variation */
@@ -116,6 +118,7 @@
   border: 2px solid var(--grey-venom, #e6edf5);
   background: var(--Primary-Blanc, #fff);
   padding: 10px;
+  position: relative;
 }
 
 .Input-variation .Input-input:hover {
@@ -131,6 +134,7 @@
   border: none;
   outline: none;
   color: var(--noir);
+  padding-right: 30px;
 }
 
 .Input-variation .Input-icon-button {
@@ -200,6 +204,7 @@
   flex: 1;
   flex-direction: column;
   align-items: flex-start;
+  position: relative;
 }
 
 .Input-password .Input-input input {
@@ -207,6 +212,7 @@
   border: none;
   outline: none;
   color: var(--noir);
+  padding-right: 30px;
 }
 
 .Input-password .Input-button {
@@ -230,3 +236,36 @@
   padding-left: 4px;
   width: 100%;
 }
+
+/* Nouveaux styles pour les fonctionnalités ajoutées */
+
+/* Style prefilled */
+.Input-prefilled {
+  background-color: rgba(255, 200, 87, 0.15) !important;
+  border-color: var(--actions-warning, #ffc857) !important;
+}
+
+/* Bouton clear */
+.Input-clear-button {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  color: var(--actions-error, #e15151);
+  font-weight: medium;
+  font-size: 1.5rem;
+  background: none;
+  border: none;
+  padding: 0;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+}
+
+.Input-clear-button:hover {
+  color: #c62828;
+}

package/dist/components/atoms/inputs/Input.d.ts

@@ -21,6 +21,9 @@ export interface InputProps {
     color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
     variant?: "bold" | "semiBold" | "medium";
     disableZoom?: boolean;
+    isPrefilled?: boolean;
+    showClearButton?: boolean;
+    disableAutofill?: boolean;
 }
 export interface InputRef {
     validate: () => boolean;

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

@@ -1,3 +1,14 @@
+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, { useState, useEffect, useCallback, forwardRef, useImperativeHandle, useRef, } from "react";
 import "./Input.css";
 import "../../../styles/global.css";
@@ -6,11 +17,11 @@ import { commonRegex } from "../../../utils/regex";
 import TinyInfo from "../typography/TinyInfo";
 import Paragraph from "../typography/Paragraph";
 var Input = forwardRef(function (_a, ref) {
-    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, rowChange = _a.rowChange, placeholder = _a.placeholder, endIcon = _a.endIcon, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, _d = _a.type, type = _d === void 0 ? "text" : _d, propError = _a.error, _e = _a.color, color = _e === void 0 ? "noir" : _e, _f = _a.variant, variant = _f === void 0 ? "medium" : _f, onKeyDown = _a.onKeyDown, name = _a.name, _g = _a.disableZoom, disableZoom = _g === void 0 ? false : _g;
-    var _h = useState(false), isPasswordVisible = _h[0], setIsPasswordVisible = _h[1];
-    var _j = useState(propValue || ""), value = _j[0], setValue = _j[1];
-    var _k = useState(propError || ""), error = _k[0], setError = _k[1];
-    var _l = useState(false), isTouched = _l[0], setIsTouched = _l[1];
+    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, rowChange = _a.rowChange, placeholder = _a.placeholder, endIcon = _a.endIcon, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, _d = _a.type, type = _d === void 0 ? "text" : _d, propError = _a.error, _e = _a.color, color = _e === void 0 ? "noir" : _e, _f = _a.variant, variant = _f === void 0 ? "medium" : _f, onKeyDown = _a.onKeyDown, name = _a.name, _g = _a.disableZoom, disableZoom = _g === void 0 ? false : _g, _h = _a.isPrefilled, isPrefilled = _h === void 0 ? false : _h, _j = _a.showClearButton, showClearButton = _j === void 0 ? false : _j, _k = _a.disableAutofill, disableAutofill = _k === void 0 ? false : _k;
+    var _l = useState(false), isPasswordVisible = _l[0], setIsPasswordVisible = _l[1];
+    var _m = useState(propValue || ""), value = _m[0], setValue = _m[1];
+    var _o = useState(propError || ""), error = _o[0], setError = _o[1];
+    var _p = useState(false), isTouched = _p[0], setIsTouched = _p[1];
     var inputRef = useRef(null);
     useEffect(function () {
         setValue(propValue || "");
@@ -59,6 +70,15 @@ var Input = forwardRef(function (_a, ref) {
         setIsTouched(true);
         validateInput();
     };
+    var handleClear = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setValue("");
+        onChange === null || onChange === void 0 ? void 0 : onChange("");
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    };
     var renderEndIcon = function () {
         if (style === "variation" && endIcon) {
             return (React.createElement("button", { className: "Input-icon-button" },
@@ -81,11 +101,17 @@ var Input = forwardRef(function (_a, ref) {
                 "*"))),
         React.createElement("div", { className: "Input-wrapper" },
             React.createElement("div", { className: "Input-container" },
-                React.createElement("div", { className: "Input-input" },
-                    React.createElement("input", { ref: inputRef, type: style === "password" && !isPasswordVisible ? "password" : type, placeholder: placeholder, className: "Input-placeholder ".concat(disableZoom ? "Input-no-zoom" : ""), value: value, onChange: function (e) {
+                React.createElement("div", { className: "Input-input ".concat(isPrefilled ? "Input-prefilled" : "") },
+                    React.createElement("input", __assign({ ref: inputRef, type: style === "password" && !isPasswordVisible ? "password" : type, placeholder: placeholder, className: "Input-placeholder ".concat(disableZoom ? "Input-no-zoom" : ""), value: value, onChange: function (e) {
                             handleChange(e);
                             rowChange && rowChange(e);
-                        }, name: name, onKeyDown: onKeyDown, onBlur: handleBlur })),
+                        }, name: name, onKeyDown: onKeyDown, onBlur: handleBlur }, (disableAutofill && {
+                        autoComplete: "off",
+                        "data-form-type": "other",
+                        "data-lpignore": "true",
+                        "data-1p-ignore": true,
+                    }))),
+                    showClearButton && value && (React.createElement("button", { type: "button", className: "Input-clear-button", onClick: handleClear, "aria-label": "Effacer le contenu" }, "\u00D7"))),
                 renderEndIcon()),
             error && isTouched && (React.createElement("div", { className: "error-message" },
                 React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error }))))));

package/dist/components/atoms/inputs/Input.stories.d.ts

@@ -42,6 +42,23 @@ declare namespace _default {
             }
             export { control_4 as control };
         }
+        export namespace isPrefilled {
+            let control_5: string;
+            export { control_5 as control };
+            export let description: string;
+        }
+        export namespace showClearButton {
+            let control_6: string;
+            export { control_6 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        export namespace disableAutofill {
+            let control_7: string;
+            export { control_7 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
     }
     export namespace parameters {
         namespace backgrounds {
@@ -60,4 +77,7 @@ export const Variation: any;
 export const Password: any;
 export const WithValidation: any;
 export const PasswordWithError: any;
+export const WithClearButton: any;
+export const PrefilledInput: any;
+export const WithAutofillDisabled: any;
 import Input from "./Input";

package/dist/components/atoms/inputs/Input.stories.js

@@ -47,6 +47,18 @@ export default {
                 options: ["bold", "semiBold", "medium"],
             },
         },
+        isPrefilled: {
+            control: "boolean",
+            description: "Indique si le champ a été pré-rempli automatiquement",
+        },
+        showClearButton: {
+            control: "boolean",
+            description: "Affiche un bouton pour effacer rapidement le contenu",
+        },
+        disableAutofill: {
+            control: "boolean",
+            description: "Désactive l'auto-remplissage des gestionnaires de mots de passe",
+        },
     },
     parameters: {
         backgrounds: {
@@ -108,3 +120,30 @@ PasswordWithError.args = {
     isRequired: true,
     error: "Le mot de passe doit contenir au moins 8 caractères",
 };
+export var WithClearButton = Template.bind({});
+WithClearButton.args = {
+    name: "clearButtonInput",
+    title: "Texte",
+    placeholder: "Entrez du texte",
+    value: "Test de texte",
+    showClearButton: true,
+    style: "default",
+};
+export var PrefilledInput = Template.bind({});
+PrefilledInput.args = {
+    name: "prefilledInput",
+    title: "Prénom",
+    placeholder: "Entrez votre prénom",
+    value: "Vincent",
+    isPrefilled: true,
+    showClearButton: true,
+    style: "default",
+};
+export var WithAutofillDisabled = Template.bind({});
+WithAutofillDisabled.args = {
+    name: "autofillDisabledInput",
+    title: "Email",
+    placeholder: "Entrez votre email",
+    style: "default",
+    disableAutofill: true,
+};

package/package.json

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