Merge pull request #115 from GusBaamonde/general_notification_message

Messages and validations of forms with retrocompatibility
FromDoppler · May 30, 2019 · 4831118 · 4831118
2 parents 0ce3939 + 45e0954
commit 4831118
Show file tree

Hide file tree

Showing 13 changed files with 1,658 additions and 233 deletions.
diff --git a/README.md b/README.md
@@ -6,6 +6,7 @@ UI guide system
 - Execute command `gulp run` for running development server and preview
 - Execute command `gulp dist` for generation task (Deploy)
 - Execute command `gulp build` for define build task
+- Execute command `gulp doc` to create documentation
 
 ## Contributors
 * [**List of Contributors**](Contributors.md): A page showing the GitHub usernames of all who have contributed to this project Doppler-UI-System! Make sure to add yourself and submit a pull request if you've contributed.

diff --git a/assets/img/error-message.svg b/assets/img/error-message.svg
diff --git a/assets/img/ok-message.svg b/assets/img/ok-message.svg
diff --git a/assets/scss/core/_base.scss b/assets/scss/core/_base.scss
@@ -6,4 +6,3 @@ a:hover {
   color: $dp-color-darkgreen;
 }
 /*Elements form*/
-
diff --git a/assets/scss/core/_settings.scss b/assets/scss/core/_settings.scss
@@ -18,5 +18,3 @@ $dp-breakpoints: (
   hddesktop: 'max-width: 1440px'
 )
 !default;
-
-
diff --git a/assets/scss/core/_variables.scss b/assets/scss/core/_variables.scss
@@ -21,9 +21,9 @@ $dp-font-color-dark: $dp-font-color !default;
 $dp-font-color-white: #fff !default;
 
 
-////
-/// variables margins/paddings
-////
+
+// variables margins/paddings
+
 $dp-spaces--lv0: 0;
 $dp-spaces--lv1: 6px;
 $dp-spaces--lv2: 12px;
@@ -42,9 +42,9 @@ $dp-spaces--lv14: 84px;
 $dp-spaces--lv15: 90px;
 $dp-spaces--lv16: 96px;
 
-////
-/// Font Size settings
-////
+
+// Font Size settings
+
 $dp-sizing--lvl10: 60px;
 $dp-sizing--lvl9: 50px;
 $dp-sizing--lvl8: 40px;
@@ -57,9 +57,9 @@ $dp-sizing--lvl2: 13px;
 $dp-sizing--lvl1: 11px;
 $dp-sizing--lvl0: 0;
 
-////
-/// Colors ///
-////
+
+// Colors
+
 $dp-color-ghostwhite: #F2F2F2;
 $dp-color-lightgrey: #999999;
 $dp-color-grey: #666666;
@@ -88,14 +88,12 @@ $dp-bg-modal: #F7F7F7;
 $dp-bg-overlay: rgba(34, 34, 34, 0.95);
 $dp-color-brown-brightness: rgba(48,33,0,.2);
 
-////
-/// variables generic
-////
+
+// variables generic
+
 $dp-border-radius: 3px;
 $dp-border-radius--lv1: 30px;
 $dp-header-height: 4em;
 $dp-text-aling: center;
 $dp-font-size-rpgd: 12px;
 $dp-line-height-rpgd: 16px;
-
-
diff --git a/assets/scss/modules/_forms.scss b/assets/scss/modules/_forms.scss
@@ -266,55 +266,117 @@ input[type="tel"] {
   }
 }
 
-.wrapper-errors {
-  display: none;
+/* Mixin for dp-message */
+/// @access private
+@mixin dp-message($dp-font-color, $dp-font-size) {
+    a, p, button, span{
+        font-size: $dp-font-size;
+        color: $dp-font-color;
+        text-align: left;
+        margin: $dp-spaces--lv0;
+        font-family: $dp-font-family-proximanova;
+    }
 }
 
-.form-message {
-  margin-bottom: $dp-spaces--lv2;
+/// Form messages and validations
+/// @access public
+/// @deprecated .error and .wrapper-errors will be removed in a next version of the library
+/// @author gbaamonde@makingsense.com
+
+
+/* Message modules */
+
+.dp-message, .error {
+  display: none;
 }
 
-.error {
+/* Class for validation */
+
+.dp-validate, .error {
   .checkmark,
   input,
   select,
   textarea {
     border: 1px solid $dp-color-red;
   }
 
-  .wrapper-errors {
+/* common properties */
+  .dp-message-box {
+    padding-left: $dp-sizing--lvl10;
+    min-height: 45px;
+    display: flex;
+    margin: $dp-spaces--lv2 $dp-spaces--lv0;
+    flex-direction: column;
+    justify-content: center;
+  }
+/* Messages and confirmations the forms */
+  .dp-message, .wrapper-errors {
     display: inline-block;
     margin: $dp-spaces--lv0;
-    color: $dp-color-red;
-    font-size: $dp-sizing--lvl2;
     font-family: $dp-font-family-proximanova;
+    font-size: $dp-sizing--lvl2;
 
-    a {
-      color: $dp-color-red;
-      text-decoration: underline;
+    /* Validations error message */
+    &.dp-error-form {
+      @include dp-message($dp-color-red, $dp-sizing--lvl2);
     }
+  }
+}
 
-    button {
-      color: $dp-color-red;
-      text-decoration: underline;
-    }
 
-    p {
-      margin: $dp-spaces--lv0;
-      font-size: $dp-sizing--lvl2;
-      line-height: $dp-spaces--lv3;
-      font-family: $dp-font-family-proximanova;
-    }
+/* Unexpected message box */
+.form-message {
+  margin-bottom: $dp-spaces--lv4;
+  display: flex;
+  min-height: $dp-spaces--lv6;
+  padding-left: $dp-spaces--lv7;
+  padding: $dp-spaces--lv1 $dp-spaces--lv0 $dp-spaces--lv0 $dp-spaces--lv7;
+  flex-direction: column;
+  background-size: 30px;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  font-family: $dp-font-family-proximanova;
+
+/* Validations Unexpected message */
+&.dp-error {
+  @extend .dp-message-box;
+  @include dp-message($dp-color-red, $dp-sizing--lvl3);
+  background-image: url("../img/error-message.svg");
+
+  a, button {
+    text-decoration: underline;
   }
 
+}
+/* Validations message OK forgot password */
+&.dp-ok-message {
+  @extend .dp-message-box;
+  @include dp-message($dp-color-green, $dp-sizing--lvl3);
+  background-image: url("../img/ok-message.svg");
+
+  .forgot-link {
+    margin: $dp-spaces--lv4 $dp-spaces--lv0;
+    font-size: $dp-sizing--lvl2;
+  }
 
-  .bounceIn {
-    animation-duration: 0.75s;
-    animation-name: bounceIn;
+}
+
+  .error {
+    padding-left: 0;
+
+    .wrapper-errors {
+      display: inline-block;
+      margin: 0;
+      color: $dp-color-red;
+      font-size: $dp-sizing--lvl2;
+      font-family: proxima-nova,Helvetica;
+    }
   }
+
 }
-/* Classes of error messages */
 
+
+/* Validations and password messages */
 .wrapper-password {
   display: block;
   margin-top: $dp-spaces--lv1;
@@ -404,7 +466,7 @@ input[type="tel"] {
   margin: $dp-spaces--lv4 $dp-spaces--lv0;
   font-size: $dp-sizing--lvl2;
   font-style: italic;
-  font-family: $dp-font-family;
+  font-family: $dp-font-family-proximanova;
   position: relative;
 }
 

diff --git a/assets/templates/forgot-password.html b/assets/templates/forgot-password.html
@@ -71,15 +71,36 @@ <h5>¿NO RECUERDAS TU CONTRASEÑA?</h5>
           <fieldset>
             <ul class="field-group">
               <legend>forgot password</legend>
-              <li class="field-item error">
+              <li class="field-item dp-validate error">
                 <label for="email">Email:</label>
                 <input type="email" name="email" id="email" placeholder="¡Psst! Es tu Email.">
-                <div class="wrapper-errors">
+                <div class="dp-message dp-error-form">
                   <p>¡Ouch! Este campo está vacío</p>
+                  <a href="">¡Ouch! Este campo está vacío</a>
+                  <span>¡Ouch! Este campo está vacío</span>
+                  <button>¡Ouch! Este campo está vacío</button>
                 </div>
+
               </li>
             </ul>
           </fieldset><!-- user and password -->
+          <div class="form-message dp-error">
+            <div class="wrapper-errors">
+              <p>¡Ouch! Mensaje inesperado</p>
+              <!-- <a href="">¡Ouch! Este campo está vacío</a>
+              <span>¡Ouch! Este campo está vacío</span>
+              <button>¡Ouch! Este campo está vacío</button> -->
+            </div>
+          </div>
+          <div class="form-message dp-ok-message">
+            <div class="wrapper-errors">
+              <p>Check your inbox!</p>
+              <p>You'll find an Email with steps to follow.</p>
+              <!-- <a href="">¡Ouch! Este campo está vacío</a>
+              <span>¡Ouch! Este campo está vacío</span>
+              <button>¡Ouch! Este campo está vacío</button> -->
+            </div>
+          </div>
           <fieldset class="field">
             <button type="button" class="dp-button button--round button-medium primary-green">ingresa</button>
             <a href="#" class="forgot-link"><span class="triangle-right"></span>¿Recordaste tu contraseña y quieres regresar?</a>

diff --git a/assets/templates/login.html b/assets/templates/login.html
@@ -67,32 +67,32 @@ <h5>INGRESA A DOPPLER</h5>
         <p class="content-subtitle">Disfruta los beneficios del Email Marketing.</p><!-- Title -->
         <p class="content-subtitle">¿Aún no tienes una cuenta? <a href="#" class="link--title" target="_blank">REGÍSTRATE GRATIS</a></p>
         <form class="login-form">
-          <div class="form-message error">
-            <div class="wrapper-errors">
-              <p>Espera un segundo. Aún no has activado tu cuenta.</p>
-              <p><button type="button">Reenviar el Email de Activación.</button></p>
-            </div>
-          </div>
           <fieldset>
             <ul class="field-group">
               <legend>Usuario y contraseña</legend>
-              <li class="field-item error">
+              <li class="field-item dp-error error">
                 <label for="email">Nombre de Usuario:</label>
                 <input type="email" name="email" id="email" placeholder="¡Psst! Es tu Email.">
-                <div class="wrapper-errors">
+                <div class="wrapper-errors dp-message dp-error-form">
                   <p>¡Ouch! Este campo está vacío</p>
                 </div>
               </li>
               <li class="field-item">
                 <label for="password">Contraseña: <a toggle="#password-field" class="ms-icon icon-view show-hide"> <span class="content-eye">Mostrar</a></label>
                 <input type="password" name="password" id="password-field" placeholder="Escribe tu clave secreta">
-                <div class="wrapper-errors">
+                <div class="wrapper-errors dp-message dp-error-form">
                   <p>¡Ouch! Este campo está vacío</p>
                 </div>
               </li>
             </ul>
           </fieldset><!-- user and password -->
           <fieldset class="field">
+            <div class="form-message dp-error error">
+              <div class="wrapper-errors dp-message dp-error-form">
+                <p>Espera un segundo. Aún no has activado tu cuenta.</p>
+                <p><button type="button">Reenviar el Email de Activación.</button></p>
+              </div>
+            </div>
             <button type="button" class="dp-button button--round button-medium primary-green">ingresa</button>
             <a href="#" class="forgot-link">¿No recuerdas tu contraseña?</a>
           </fieldset>