feat: messages and validations of forms with retrocompatibility, Impl…

…ementation of sassdoc for documentation

.gitignore

@@ -13,3 +13,4 @@ dev/fonts/*
 /assets/fonts/icon-font.*
 /dev/index.html
 /dev/**
+documentation/

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.

assets/scss/modules/_forms.scss

@@ -266,55 +266,116 @@ 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: 0;
+    }
 }
 
-.form-message {
-  margin-bottom: $dp-spaces--lv2;
+/// Form messages and validations
+/// @content [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;
+    color: #e34f45;
+    font-size: 13px;
 
-    a {
-      color: $dp-color-red;
-      text-decoration: underline;
+      a {
+        text-decoration: underline;
+      }
+      button {
+        text-decoration: underline;
+      }
+      p {
+        margin: $dp-spaces--lv0;
+      }
+    /* 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--lv2;
+  display: flex;
+  min-height: 45px;
+  flex-direction: column;
+  justify-content: center;
+
+/* Validations Unexpected message */
+&.dp-error {
+  @extend .dp-message-box;
+  background: url("../img/error-message.svg") no-repeat 0 0;
+  padding-left: $dp-sizing--lvl10;
+  @include dp-message($dp-color-red, $dp-sizing--lvl3);
+}
+/* Validations message OK forgot password */
+&.dp-ok-message {
+  @extend .dp-message-box;
+  padding-left: $dp-sizing--lvl10;
+  background: url("../img/ok-message.svg") no-repeat 0 0;
+  @include dp-message($dp-color-green, $dp-sizing--lvl3);
+}
+
+  .error {
+    padding-left: 0;
 
-  .bounceIn {
-    animation-duration: 0.75s;
-    animation-name: bounceIn;
+    .wrapper-errors {
+     display: inline-block;
+     margin: 0;
+     color: #e34f45;
+     font-size: 13px;
+     font-family: proxima-nova,Helvetica;
+    }
   }
 }
-/* Classes of error messages */
 
+
+
+
+
+/* Validations and password messages */
 .wrapper-password {
   display: block;
   margin-top: $dp-spaces--lv1;

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">
                 <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-error">
+              <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>

gulpfile.js

@@ -19,6 +19,8 @@ var gulp = require('gulp'),
   iconfontCss = require('gulp-iconfont-css'),
   // Require PostCSS
   postcss = require('gulp-postcss'),
+  // Require Sassdoc
+  sassdoc = require('sassdoc'),
   // Require PostCSS Flexibility
   flexibility = require('postcss-flexibility'),
   // Require PostCSS autoprefixer
@@ -64,6 +66,9 @@ var config = {
     images: 'dist/img',
     js: 'dist/js'
   },
+  folderDoc: {
+    base: 'documentation'
+  },
   postCSS: {
     processors: [
       autoprefixer({
@@ -79,6 +84,18 @@ var config = {
         sort: mqsorter
       })
     ]
+  },
+
+// Sassdoc task options
+  sassDocOptions: {
+    dest: './documentation',
+    display: {
+      watermark: false
+    },
+    groups: {
+      'undefined': 'General'
+    },
+    basePath: 'assets/styles/**/*.scss',
   }
 };
 
@@ -120,6 +137,13 @@ gulp.task('sass', function() {
       stream: true
     }));
 });
+//
+gulp.task('doc', function() {
+ var docstream = sassdoc(config.sassDocOptions);
+ docstream.promise.then(browserSync.reload);
+ return gulp.src(config.folderAssets.base + '/**/*.scss')
+   .pipe(docstream);
+});
 
 // Process HTML task definition for distribution purposes
 gulp.task('processHtml:dist', function() {
@@ -236,6 +260,25 @@ gulp.task('clean', ['clean:dev']);
 gulp.task('clean:dev', function() {
   return del.sync(config.folderDev.base);
 });
+// SassDoc
+gulp.task('serve:sassdoc', function() {
+  return browserSync.init({
+    port: 1339,
+    server: {
+      baseDir: config.folderDoc.base
+    },
+    ui: {
+      port: 1340
+    }
+  });
+});
+gulp.task('doc:serve', ['serve:sassdoc'], function() {
+  return gulp.src(config.folderAssets.base + '/**/*.scss')
+    .pipe(sassdoc(config.sassDocOptions));
+});
+gulp.task('doc:watch', ['doc:serve'], function() {
+  gulp.watch(config.folderAssets.base + '/**/*.scss', ['doc']);
+});
 
 // Watch for changes
 gulp.task('run', ['clean', 'serve'], function() {
@@ -245,7 +288,6 @@ gulp.task('run', ['clean', 'serve'], function() {
   gulp.watch(config.folderAssets.images + '/**/*.*', ['copy:images']);
   gulp.watch(config.folderAssets.js + '/**/*.js', ['copy:js', reload]);
   gulp.watch(config.folderAssets.base + '/templates/*.html', ['processHtml']);
-
   util.log('Done!');
 });