docs(update): update doc, file structure

README.md

@@ -2,20 +2,20 @@
 
 [![build status](https://git.roiback.com/webmobile/REPO_URL/badges/master/build.svg)](https://git.roiback.com/webmobile/REPO_URL/builds)
 
-# Consideraciones para la actualización de estilos #
+## Consideraciones para la actualización de estilos
 
-Para agilizar el mantenimiento y gestión de la demanda tenemos que controlar el proceso de escritura de CSS de los módulos en un punto comun para todos los proyectos web qe utilicen los módulos en cuestión.
+Para agilizar el mantenimiento y gestión de la demanda tenemos que controlar el proceso de escritura de CSS de los módulos en un punto común para todos los proyectos web qe utilicen los módulos en cuestión.
 
-Esta libreria ejemplifica como desarrollar una estructura para los estilos que permite darle flexibilidad para los diferentes diseños a traves de "temas" y tener un esquelto de estilos que tenga la responsabilidad de escribir las clases css necesarias para el módulo.
+Esta librería ejemplifica como desarrollar una estructura para los estilos que permite darle flexibilidad para los diferentes diseños a través de "temas" y tener un esqueleto de estilos que tenga la responsabilidad de escribir las clases css necesarias para el módulo.
 
-# Condiciones para la actualización del módulo #
+## Condiciones para la actualización del módulo
 
 El HTML tiene que tener clases BEM en sus elementos de manera que sea facil de recorrer y se puedan escribir los estilos con baja especificidad por defecto: (0,0,1,0)
 
 Se han creado documentos que ejemplifican el uso de clases BEM en html
 * [Como utilizar Nomenclatura BEM en módulos](https://git.roiback.com/libs/dynamic_templates/wikis/Nomenclatura-BEM)
 
-# Estructura de ficheros SCSS
+## Estructura de ficheros SCSS
 
 ```
 .
@@ -27,7 +27,7 @@ Se han creado documentos que ejemplifican el uso de clases BEM en html
 | |_____alternate.scss
 ```
 
-# Ejemplo de "_skeleton.scss"
+## Ejemplo de "_skeleton.scss"
 
 Es el unico fichero que puede escribir la clase en el CSS
 
@@ -46,7 +46,7 @@ Es el unico fichero que puede escribir la clase en el CSS
 
 Siempre debe finalizar con @content para extender desde los demas ficheros los estilos personalizados.
 
-# Ejemplo de "_layouts.scss"
+## Ejemplo de "_layouts.scss"
 
 ```scss
 // add dependency of 3rd party css here
@@ -61,27 +61,28 @@ Siempre debe finalizar con @content para extender desde los demas ficheros los e
 
 > Layouts importa las dependencias que tendrán los temas (varibales, resets, etc. y siempre el el fichero skeleton) de manera que se pueda genera el estilo del módulo de manera independiente.
 
-# Ejemplo de "/themes/_default"
+## Ejemplo de "/themes/_default"
 
 ```scss
 @mixin mainclass__default(
-    $border: .1rem solid $main-color,
-    $sub--background-color: $main-color,
-    $sub--width: 10rem,
-    $screen_md: $screen_md,
-    $sub--height: 10rem){
+    $border: .1rem solid $main-color, // variable librería o proyecto
+    $sub-bg-color: $main-color, // variable librería o proyecto
+    $img-width: 15rem,
+    $img-height: 10rem,
+    $screen-md: $screen_md, // variable librería o proyecto
+    ){
     %mainclass{
         display: flex;     
         &-sub{
             border: $border
             width: 100%;
-            height: $img--height;
-            @media screen and (min-width: $screen_md) {
-                width: $img--width;
+            height: $img-height;
+            @media screen and (min-width: $screen-md) {
+                width: $img-width;
             }
         }
         &__extra{
-            background-color: $sub--background-color;
+            background-color: $sub-bg-color;
         }
         @content;
     }
@@ -97,24 +98,24 @@ Todos los colores deben ser variables definidas en el mixing de una variable de
 
 Los placeholders (%) reemplaza en el flujo de trabajo a las clases (.) para no cambiar la sintaxis de los estilos actuales, de esta forma los estilos previos a la actualización pueden refactorizarse con menor complejidad.
 
-# Ejemplo de implementación en proyecto
+## Ejemplo de implementación en proyecto
 
 ```scss
 @import './dynamic/modules/mainclass/layouts';
 
 @include mainclass__default(
     $border: none,
-    $sub--background-color: green,
-    $sub--width: 15rem,
-    $sub--height: 20rem
+    $sub-bg-color: green,
+    $sub-width: 17rem,
+    $sub-height: 20rem
 ) {
     %mainclass__extra::after{
         content: '-----'
     }
 };
 ```
 
-# Cómo regla general y para destacar:
+## Cómo regla general y para destacar:
 * Los media querys se estructuran mobile first se maqueta por defecto para resoluciones pequeñas pensando en que no existen hovers y luego se hacen los quiebres para resoluciones superiores.
 * El único fichero que puede escribir la clase css (.) es "_skeleton.scss" es mala practica que se esciban en proyecto o en otro fichero
 * Las unidades que utilizamos son REM. Solo para el caso de los botones usaremos EM.

example/index.js

@@ -1,7 +1,7 @@
 /* eslint "import/no-extraneous-dependencies": ["error", {"devDependencies": true }] */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Test from '../src/index-with-styles';
+import Test from '../src/project_default/project_default';
 
 // Example of use of the component in an application
 

src/dynamic/modules/list/_layouts.scss → src/dynamic_templates/modules/list/_layouts.scss

@@ -4,21 +4,24 @@
 @import '../../libs/common';
 
 // @mixin list__template(){
-//     %list{
+//     %list{    
 //         &-item{
-//             &__img{
-//                 &-fix {}
-//             }
+//             &--hover{}
 //             &__title{}
-//             &__text{}
-//             &__description{}
+//             &__sub-title{}
 //             &__content{}
-//             &__button{}
+//             &__description{}
+//             &__img {
+//                 &-fix{}
+//             }
 //             &__action{}
-//          } 
+//             &__label{}
+//             &__span{}
+//         }
+//     @content;
 //     }
 // }
-
+    
 @import 'themes/list--default';
 @import 'themes/list--option';
 @import 'themes/list--alternate';

src/index.js

@@ -1,26 +1,20 @@
 import React, { Component } from 'react';
-import ExampleList from './dynamic/modules/list/list';
+import ExampleList from './dynamic_templates/modules/list/list';
 
 export default class Test extends Component {
     constructor(props) {
         super(props);
-        this.state = {
-            responsive: 'desktop'
-        };
     }
     render() {
-        const className = this.state.responsive;
         const classNameList = `list list${this.props.classname}`;
         return (
-        <div className={className}>
             <ul className={classNameList}>
                 <ExampleList/>
                 <ExampleList/>
                 <ExampleList/>
                 <ExampleList/>
                 <ExampleList/>
             </ul>
-        </div>
         );
     }
 

src/project_alternate/project_alternate.scss

@@ -1,6 +1,6 @@
 @import  './project_alternate-vars';
 // add dependency of 3rd party css here
-@import '../dynamic/modules/list/layouts';
+@import '../dynamic_templates/modules/list/layouts';
 
 @include list__alternate(
     $img-round: 20rem

src/index-with-styles.js → src/project_default/project_default.js

@@ -4,4 +4,4 @@
 
 import './project_default.scss';
 
-module.exports = require('./index');
+module.exports = require('../index');

src/project_default.scss → src/project_default/project_default.scss

@@ -1,5 +1,5 @@
 // add dependency of 3rd party css here
-@import './dynamic/modules/list/layouts';
+@import '../dynamic_templates/modules/list/layouts';
 //$title-color: #ccc
 @include list__default {
     & {

src/project_option/project_option.scss

@@ -1,5 +1,5 @@
 @import  './project_option-vars';
 // add dependency of 3rd party css here
-@import '../dynamic/modules/list/layouts';
+@import '../dynamic_templates/modules/list/layouts';
 
 @include list__option;

test/example_test.js

@@ -5,30 +5,40 @@
 
 import React from 'react';
 import chai from 'chai';
-import { shallow } from 'enzyme';
-import Hello from '../src/';
+import { mount, shallow } from 'enzyme';
+import Test from '../src/';
+
+import ExampleList from '../src/dynamic_templates/modules/list/list'
 
 chai.should();
 
-describe('Example test', () => {
+describe('ExampleList', () => {
 
     it('example', () => {
-        true.should.be.true;
+        const wrapper = shallow(<ExampleList />);
+        wrapper.is('li').should.be.true;
     });
 
 });
 
-describe('Hello', () => {
+describe('List test', () => {
+    let data;
+
+    beforeEach(() => {
+        data = {
+            classname:'--news'
+        };
+
+    });
 
-    it.skip('renders an H1', () => {
-        const data = { onEvent: () => { } };
-        const wrapper = shallow(<Hello {...data}></Hello>);
-        wrapper.is('h1').should.be.true;
+    it('renders a list', () => {
+        const wrapper = shallow(<Test {...data} />);
+        wrapper.is('ul').should.be.true;
     });
 
-    it.skip('prints "hello world!"', () => {
-        const wrapper = shallow(<Hello ></Hello>);
-        wrapper.props().children.should.eql('hello world!');
+    it('prints "hello world!"', () => {
+        const wrapper = shallow(<Test />);
+        wrapper.find('ExampleList').length.should.eql(5);
     });
 
 });