anima-ds-nucleus 1.0.21 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anima-ds-nucleus",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "Anima Design System - A comprehensive React component library",
   "author": "Nucleus Labs <ipvasallo@nucleus.com.ar>",
   "license": "UNLICENSED",

package/src/components/Inputs/PasswordInput/PasswordInput.jsx

@@ -30,7 +30,7 @@ export const PasswordInput = ({
   `.trim().replace(/\s+/g, ' ');
 
   return (
-    <div className={`w-full ${className}`}>
+    <div className={`anima-passwordfield w-full ${className}`}>
       {label && (
         <label
           className={labelClassName || 'block text-sm font-medium text-gray-700 mb-1'}
@@ -48,7 +48,7 @@ export const PasswordInput = ({
           disabled={disabled}
           value={value}
           onChange={onChange}
-          className={resolvedInputClasses}
+          className={`${resolvedInputClasses} ${isHexaLogin ? 'anima-passwordfield__input' : ''}`}
           {...props}
         />
 
@@ -56,13 +56,7 @@ export const PasswordInput = ({
           type="button"
           tabIndex={-1}
           onClick={() => setShowPassword((prev) => !prev)}
-          className="absolute"
-          style={{
-            top: '50%',
-            transform: 'translateY(-50%)',
-            right: '0.75rem',
-            color: '#6b7280',
-          }}
+          className="anima-passwordfield__toggle"
           aria-label={showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
         >
           <Icon

package/src/components/Views/ForgotPassword/ForgotPassword.jsx

@@ -11,10 +11,12 @@ export const ForgotPassword = ({
   error: externalError,
   className = '',
   variant = 'default',
+  layout = 'embedded',
   ...props
 }) => {
   const { t } = useTranslation();
   const isHexaLogin = variant === 'hexa-login';
+  const isPageLayout = layout === 'page';
 
   // Estados internos (si no se pasan como props)
   const [email, setEmail] = useState('');
@@ -124,11 +126,11 @@ export const ForgotPassword = ({
 
   return (
     <div
-      className={`min-h-screen flex flex-col ${className}`}
-      style={{ backgroundColor: '#f5f5f5' }}
+      className={`${isPageLayout ? 'min-h-screen flex flex-col' : ''} ${className}`}
+      style={isPageLayout ? { backgroundColor: '#f5f5f5' } : undefined}
       {...props}
     >
-      <div className="flex-1 flex items-center justify-center p-4">
+      <div className={isPageLayout ? 'flex-1 flex items-center justify-center p-4' : 'p-4'}>
         <div className="w-full max-w-md">
           {/* Título y subtítulo */}
           <div className="mb-8 text-center">

package/src/components/Views/LoginForm/LoginForm.jsx

@@ -16,6 +16,9 @@ export const LoginForm = ({
   showSocialLogin = true,
   showDivider = true,
   showPasswordRequirementsOnError = true,
+  passwordRequirementsItems,
+  passwordRequirementsTitle,
+  passwordRequirementsPrefix,
   labels,
   generalError,
   generalErrorTitle,
@@ -74,18 +77,9 @@ export const LoginForm = ({
 
   return (
     isHexaLogin ? (
-      <div
-        style={{
-          width: '427px',
-          minHeight: '409px',
-          borderRadius: '14px',
-          border: '1px solid #0000001A',
-          padding: '24px',
-          background: '#FFFFFF',
-          boxShadow: '0px 4px 6px -4px #0000001A, 0px 10px 15px -3px #0000001A',
-        }}
-      >
-        <form onSubmit={handleSubmit} className={className} {...props}>
+      <div className={`anima-loginform__container ${className}`} {...props}>
+        <div className="anima-loginform__card">
+        <form onSubmit={handleSubmit}>
           {/* 1) Email */}
           <div className="w-full">
             <label
@@ -114,9 +108,8 @@ export const LoginForm = ({
             placeholder={t('placeholder.password')}
             value={formData.password}
             onChange={(e) => handleChange('password', e.target.value)}
-            inputClassName="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm text-gray-900"
+            inputClassName="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm text-gray-900 anima-passwordfield__input"
             style={{
-              paddingRight: '2.75rem',
               borderColor: errors.password ? '#ef4444' : '#2D5C63',
             }}
           />
@@ -125,20 +118,36 @@ export const LoginForm = ({
         {/* 3) Password requirements box (solo si hay error de password) */}
         {showPasswordRequirementsOnError && !!errors.password && (
           <div
-            className="rounded-lg p-4 border mt-4"
+            className="anima-loginform__requirementsBox rounded-lg p-4 border mt-4"
             style={{
               background: '#f5f3ff',
               borderColor: '#a78bfa',
               color: '#0c4a6e',
-              fontFamily: 'IBM Plex Mono',
+              fontFamily: "'IBM Plex Mono', monospace",
             }}
           >
-            <ul className="list-disc list-inside text-sm space-y-1" style={{ color: '#0c4a6e' }}>
-              <li>Al menos 8 caracteres</li>
-              <li>Al menos una letra mayúscula</li>
-              <li>Al menos un número</li>
-              <li>Al menos un caracter especial</li>
-            </ul>
+            <Typography
+              variant="body2"
+              className="text-sm"
+              style={{ 
+                color: '#0c4a6e',
+                fontFamily: "'IBM Plex Mono', monospace",
+                whiteSpace: 'pre-line',
+              }}
+            >
+              {passwordRequirementsTitle || (() => {
+                const prefix = passwordRequirementsPrefix || t('form.passwordRequirementsPrefix') || 'Recuerda que la contraseña debe tener:';
+                const defaultItems = passwordRequirementsItems || [
+                  t('form.passwordRequirementMinChars') || 'Un mínimo de 6 caracteres',
+                  t('form.passwordRequirementOther') || 'Una mayúscula, un número, un carácter especial',
+                ];
+                
+                if (passwordRequirementsItems && passwordRequirementsItems.length > 0) {
+                  return `${prefix}\n${passwordRequirementsItems[0]}\n\n${passwordRequirementsItems.slice(1).join(', ')}`;
+                }
+                return `${prefix}\n${defaultItems[0]}\n\n${defaultItems[1]}`;
+              })()}
+            </Typography>
           </div>
         )}
 
@@ -176,10 +185,8 @@ export const LoginForm = ({
         {/* 5) Error general box rojo (si existe) */}
         {(generalError || errors.general) && (
           <div
-            className="mt-4"
+            className="anima-loginform__errorBox mt-4"
             style={{
-              width: '377px',
-              height: '68px',
               paddingTop: '12px',
               paddingRight: '16px',
               paddingBottom: '12px',
@@ -272,28 +279,11 @@ export const LoginForm = ({
 
         {/* 8) Social buttons */}
         {showSocialLogin && (
-          <div
-            style={{
-              width: '377px',
-              height: '36px',
-              gap: '20px',
-              marginLeft: 'auto',
-              marginRight: 'auto',
-              display: 'flex',
-            }}
-          >
+          <div className="anima-loginform__socialRow">
             <button
               type="button"
               onClick={onGoogleLogin}
-              className="flex-1 flex items-center justify-center bg-white hover:bg-gray-50 transition-colors"
-              style={{
-                width: '178.5px',
-                height: '36px',
-                padding: '8px 43px',
-                gap: '16px',
-                borderRadius: '8px',
-                border: '1px solid #38656D',
-              }}
+              className="anima-loginform__socialButton anima-loginform__socialButton--google"
             >
               <svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true">
                 <path fill="#FFC107" d="M43.611 20.083H42V20H24v8h11.303C33.651 32.659 29.227 36 24 36c-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.047 6.053 29.272 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z" />
@@ -309,15 +299,7 @@ export const LoginForm = ({
             <button
               type="button"
               onClick={onMicrosoftLogin}
-              className="flex-1 flex items-center justify-center bg-white hover:bg-gray-50 transition-colors"
-              style={{
-                width: '178.5px',
-                height: '36px',
-                padding: '8px 43px',
-                gap: '16px',
-                borderRadius: '8px',
-                border: '1px solid #38656D',
-              }}
+              className="anima-loginform__socialButton anima-loginform__socialButton--microsoft"
             >
               <svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true">
                 <path fill="#F25022" d="M6 6h17v17H6z" />
@@ -332,6 +314,7 @@ export const LoginForm = ({
           </div>
         )}
         </form>
+        </div>
       </div>
     ) : (
       <form

package/src/components/Views/LoginForm/LoginForm.stories.jsx

@@ -36,6 +36,14 @@ export default {
       control: 'text',
       description: 'Mensaje de error general',
     },
+    passwordRequirementsItems: {
+      control: 'object',
+      description: 'Array de strings con los requisitos de contraseña',
+    },
+    passwordRequirementsTitle: {
+      control: 'text',
+      description: 'Título opcional para la caja de requisitos de contraseña',
+    },
   },
 };
 
@@ -231,3 +239,31 @@ export const Portuguese = {
   },
 };
 
+// Con requisitos de contraseña personalizados
+export const CustomPasswordRequirements = {
+  args: {
+    variant: 'hexa-login',
+    passwordRequirementsTitle: 'Requisitos de contraseña',
+    passwordRequirementsItems: [
+      'Mínimo 12 caracteres',
+      'Debe contener mayúsculas y minúsculas',
+      'Debe incluir números',
+      'Debe incluir símbolos especiales',
+      'No puede ser una contraseña común',
+    ],
+    onSubmit: (data) => {
+      console.log('Login data:', data);
+      alert('Login submitted!');
+    },
+    onForgotPassword: () => {
+      alert('Forgot password clicked');
+    },
+    onGoogleLogin: () => {
+      alert('Google login clicked');
+    },
+    onMicrosoftLogin: () => {
+      alert('Microsoft login clicked');
+    },
+  },
+};
+

package/src/components/Views/NewPassword/NewPassword.jsx

@@ -0,0 +1,389 @@
+import { useTranslation } from 'react-i18next';
+import { PasswordInput } from '../../Inputs/PasswordInput/PasswordInput';
+import { Button } from '../../Atoms/Button/Button';
+import { Typography } from '../../Atoms/Typography/Typography';
+
+export const NewPassword = ({
+  variant = 'default',
+  layout = 'embedded',
+  // Título y subtítulo
+  title,
+  subtitle,
+  // Password field
+  passwordLabel,
+  passwordPlaceholder,
+  passwordValue,
+  onPasswordChange,
+  passwordError,
+  // Confirm field
+  confirmPasswordLabel,
+  confirmPasswordPlaceholder,
+  confirmPasswordValue,
+  onConfirmPasswordChange,
+  confirmPasswordError,
+  // Requirements box
+  requirementsTitle,
+  requirementsItems = [],
+  requirementsPrefix,
+  showRequirements = true,
+  // General error
+  generalError,
+  // Actions
+  cancelLabel,
+  submitLabel,
+  onCancel,
+  onSubmit,
+  disabled = false,
+  submitting = false,
+  // Success
+  success = false,
+  successTitle,
+  successMessage,
+  successExtra,
+  className = '',
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const isHexaLogin = variant === 'hexa-login';
+  const isPageLayout = layout === 'page';
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (onSubmit && !disabled && !submitting) {
+      onSubmit({
+        password: passwordValue,
+        confirmPassword: confirmPasswordValue,
+      });
+    }
+  };
+
+  // Si está en modo success, mostrar solo el mensaje de éxito
+  if (success) {
+    return (
+      <div
+        className={`${isPageLayout ? 'min-h-screen flex flex-col' : ''} ${className}`}
+        style={isPageLayout ? { backgroundColor: '#f5f5f5' } : undefined}
+        {...props}
+      >
+        <div className={isPageLayout ? 'flex-1 flex items-center justify-center p-4' : 'p-4'}>
+          <div className="w-full max-w-md">
+            {/* Título y subtítulo */}
+            {(title || subtitle) && (
+              <div className="mb-8 text-center">
+                {title && (
+                  <Typography
+                    variant="h3"
+                    className="mb-2 font-semibold"
+                    style={
+                      isHexaLogin
+                        ? {
+                            color: '#2D5C63',
+                            fontFamily: 'inherit',
+                            fontWeight: 400,
+                            fontStyle: 'normal',
+                            fontSize: '32px',
+                            lineHeight: '48px',
+                            letterSpacing: '0px',
+                            textAlign: 'center',
+                          }
+                        : undefined
+                    }
+                  >
+                    {title}
+                  </Typography>
+                )}
+                {subtitle && (
+                  <Typography
+                    variant="body2"
+                    className="text-gray-600"
+                    style={
+                      isHexaLogin
+                        ? {
+                            fontFamily: 'inherit',
+                            fontWeight: 400,
+                            fontStyle: 'normal',
+                            fontSize: '16px',
+                            lineHeight: '24px',
+                            letterSpacing: '0px',
+                            textAlign: 'center',
+                          }
+                        : undefined
+                    }
+                  >
+                    {subtitle}
+                  </Typography>
+                )}
+              </div>
+            )}
+
+            {/* Card blanca */}
+            <div className="bg-white border border-gray-200 rounded-lg p-6 shadow-md">
+              {/* Success box */}
+              <div
+                className="rounded-lg p-4 border"
+                style={{
+                  backgroundColor: '#d1fae5',
+                  borderColor: '#10b981',
+                }}
+              >
+                {successTitle && (
+                  <Typography
+                    variant="body2"
+                    className="font-medium"
+                    style={{ color: '#065f46' }}
+                  >
+                    {successTitle}
+                  </Typography>
+                )}
+                {successMessage && (
+                  <Typography
+                    variant="body2"
+                    className={successTitle ? 'mt-2' : ''}
+                    style={{ color: '#047857', fontSize: '14px' }}
+                  >
+                    {successMessage}
+                  </Typography>
+                )}
+                {successExtra && <div className="mt-4">{successExtra}</div>}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`${isPageLayout ? 'min-h-screen flex flex-col' : ''} ${className}`}
+      style={isPageLayout ? { backgroundColor: '#f5f5f5' } : undefined}
+      {...props}
+    >
+      <div className={isPageLayout ? 'flex-1 flex items-center justify-center p-4' : 'p-4'}>
+        <div className="w-full max-w-md">
+          {/* Título y subtítulo */}
+          {(title || subtitle) && (
+            <div className="mb-8 text-center">
+              {title && (
+                <Typography
+                  variant="h3"
+                  className="mb-2 font-semibold"
+                  style={
+                    isHexaLogin
+                      ? {
+                          color: '#2D5C63',
+                          fontFamily: 'inherit',
+                          fontWeight: 400,
+                          fontStyle: 'normal',
+                          fontSize: '32px',
+                          lineHeight: '48px',
+                          letterSpacing: '0px',
+                          textAlign: 'center',
+                        }
+                      : undefined
+                  }
+                >
+                  {title}
+                </Typography>
+              )}
+              {subtitle && (
+                <Typography
+                  variant="body2"
+                  className="text-gray-600"
+                  style={
+                    isHexaLogin
+                      ? {
+                          fontFamily: 'inherit',
+                          fontWeight: 400,
+                          fontStyle: 'normal',
+                          fontSize: '16px',
+                          lineHeight: '24px',
+                          letterSpacing: '0px',
+                          textAlign: 'center',
+                        }
+                      : undefined
+                  }
+                >
+                  {subtitle}
+                </Typography>
+              )}
+            </div>
+          )}
+
+          {/* Card blanca */}
+          <div className="bg-white border border-gray-200 rounded-lg p-6 shadow-md">
+            <form onSubmit={handleSubmit} className="space-y-4">
+              {/* Password field */}
+              <div>
+                <PasswordInput
+                  variant={isHexaLogin ? 'hexa-login' : undefined}
+                  label={passwordLabel}
+                  labelClassName={isHexaLogin ? 'block mb-2 font-medium text-sm' : undefined}
+                  labelStyle={isHexaLogin ? { color: '#2D5C63' } : undefined}
+                  placeholder={passwordPlaceholder}
+                  value={passwordValue || ''}
+                  onChange={onPasswordChange}
+                  error={passwordError}
+                  inputClassName={
+                    isHexaLogin
+                      ? 'w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm text-gray-900 anima-passwordfield__input'
+                      : undefined
+                  }
+                  style={
+                    isHexaLogin
+                      ? {
+                          borderColor: passwordError ? '#ef4444' : '#2D5C63',
+                          borderWidth: '1px',
+                          borderStyle: 'solid',
+                        }
+                      : undefined
+                  }
+                />
+              </div>
+
+              {/* Confirm password field */}
+              <div>
+                <PasswordInput
+                  variant={isHexaLogin ? 'hexa-login' : undefined}
+                  label={confirmPasswordLabel}
+                  labelClassName={isHexaLogin ? 'block mb-2 font-medium text-sm' : undefined}
+                  labelStyle={isHexaLogin ? { color: '#2D5C63' } : undefined}
+                  placeholder={confirmPasswordPlaceholder}
+                  value={confirmPasswordValue || ''}
+                  onChange={onConfirmPasswordChange}
+                  error={confirmPasswordError}
+                  inputClassName={
+                    isHexaLogin
+                      ? 'w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm text-gray-900 anima-passwordfield__input'
+                      : undefined
+                  }
+                  style={
+                    isHexaLogin
+                      ? {
+                          borderColor: confirmPasswordError ? '#ef4444' : '#2D5C63',
+                          borderWidth: '1px',
+                          borderStyle: 'solid',
+                        }
+                      : undefined
+                  }
+                />
+              </div>
+
+              {/* Requirements box */}
+              {showRequirements && requirementsItems.length > 0 && (
+                <div
+                  className="rounded-lg p-4 border"
+                  style={{
+                    background: '#f5f3ff',
+                    borderColor: '#a78bfa',
+                    color: '#0c4a6e',
+                    fontFamily: "'IBM Plex Mono', monospace",
+                  }}
+                >
+                  <Typography
+                    variant="body2"
+                    className="text-sm"
+                    style={{ 
+                      color: '#0c4a6e',
+                      fontFamily: "'IBM Plex Mono', monospace",
+                      whiteSpace: 'pre-line',
+                    }}
+                  >
+                    {requirementsTitle || (() => {
+                      const prefix = requirementsPrefix || t('form.passwordRequirementsPrefix') || 'Recuerda que la contraseña debe tener:';
+                      const defaultItems = requirementsItems.length > 0 ? requirementsItems : [
+                        t('form.passwordRequirementMinChars') || 'Un mínimo de 6 caracteres',
+                        t('form.passwordRequirementOther') || 'Una mayúscula, un número, un carácter especial',
+                      ];
+                      
+                      return `${prefix}\n${defaultItems[0]}\n\n${defaultItems.slice(1).join(', ')}`;
+                    })()}
+                  </Typography>
+                </div>
+              )}
+
+              {/* General error */}
+              {generalError && (
+                <div
+                  className="rounded-lg p-4 border"
+                  style={{
+                    backgroundColor: '#fecaca',
+                    borderColor: '#ef4444',
+                  }}
+                >
+                  <Typography
+                    variant="body2"
+                    className="font-bold"
+                    style={{ color: '#b91c1c' }}
+                  >
+                    {generalError}
+                  </Typography>
+                </div>
+              )}
+
+              {/* Botonera 2 columnas */}
+              <div className="flex gap-4 pt-4">
+                {onCancel && (
+                  <Button
+                    type="button"
+                    tipo="Secondary"
+                    color="Teal"
+                    tamaño="Default"
+                    className="flex-1"
+                    onClick={onCancel}
+                    disabled={disabled || submitting}
+                  >
+                    <span
+                      style={
+                        isHexaLogin
+                          ? {
+                              fontFamily: "'IBM Plex Sans', sans-serif",
+                              fontWeight: 400,
+                              fontStyle: 'normal',
+                              fontSize: '16px',
+                              lineHeight: '24px',
+                              letterSpacing: '0%',
+                            }
+                          : undefined
+                      }
+                    >
+                      {cancelLabel || 'Cancelar'}
+                    </span>
+                  </Button>
+                )}
+                <Button
+                  type="submit"
+                  tipo="Primary"
+                  color="Teal"
+                  tamaño="Default"
+                  className={onCancel ? 'flex-1' : 'w-full'}
+                  disabled={disabled || submitting}
+                >
+                  <span
+                    style={
+                      isHexaLogin
+                        ? {
+                            fontFamily: "'IBM Plex Sans', sans-serif",
+                            fontWeight: 400,
+                            fontStyle: 'normal',
+                            fontSize: '16px',
+                            lineHeight: '24px',
+                            letterSpacing: '0%',
+                          }
+                        : undefined
+                    }
+                  >
+                    {submitting ? 'Guardando...' : submitLabel || 'Guardar'}
+                  </span>
+                </Button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NewPassword;
+