allaw-ui 2.5.6 → 2.5.8

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

@@ -38,12 +38,18 @@
   gap: 11px;
 }
 
+.Input-default .Input-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
 .Input-default .Input-container {
   display: flex;
   width: 100%;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .Input-default .Input-input {
@@ -82,6 +88,12 @@
   gap: 11px;
 }
 
+.Input-variation .Input-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
 .Input-variation .Input-container {
   display: flex;
   width: 100%;
@@ -152,6 +164,12 @@
   gap: 11px;
 }
 
+.Input-password .Input-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
 .Input-password .Input-container {
   display: flex;
   width: 100%;
@@ -204,5 +222,6 @@
 
 .error-message {
   padding-top: 4px;
-  padding-left: 14px;
+  padding-left: 4px;
+  width: 100%;
 }

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

@@ -79,13 +79,14 @@ var Input = forwardRef(function (_a, ref) {
             isRequired && title && (React.createElement("span", { className: "Input-required" },
                 "\u00A0",
                 "*"))),
-        React.createElement("div", { className: "Input-container" },
-            React.createElement("div", { className: "Input-input ".concat(style === "password" ? "Input-password-input" : "") },
-                React.createElement("input", { ref: inputRef, type: style === "password" && !isPasswordVisible ? "password" : type, placeholder: placeholder, className: "Input-placeholder", value: value, onChange: function (e) {
-                        handleChange(e);
-                        rowChange && rowChange(e);
-                    }, onBlur: handleBlur })),
-            renderEndIcon(),
+        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", value: value, onChange: function (e) {
+                            handleChange(e);
+                            rowChange && rowChange(e);
+                        }, onBlur: handleBlur })),
+                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

@@ -59,4 +59,5 @@ export const Default: any;
 export const Variation: any;
 export const Password: any;
 export const WithValidation: any;
+export const PasswordWithError: any;
 import Input from "./Input";

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

@@ -99,3 +99,12 @@ WithValidation.args = {
     isRequired: true,
     validate: "email",
 };
+export var PasswordWithError = Template.bind({});
+PasswordWithError.args = {
+    name: "passwordInputError",
+    title: "Mot de passe",
+    placeholder: "Entrez votre mot de passe",
+    style: "password",
+    isRequired: true,
+    error: "Le mot de passe doit contenir au moins 8 caractères",
+};

package/package.json

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