Merge pull request #348 from SC5/dev

Updating master from dev for 0.2.15
SC5 · Dec 17, 2014 · 1d87e8e · 1d87e8e
2 parents 3592bdd + 96d3115
commit 1d87e8e
Show file tree

Hide file tree

Showing 22 changed files with 917 additions and 529 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,11 +1,15 @@
-## 0.2.14 (2014-12-10)
+## 0.2.15 (2014-12-17)
 
-### Fixes:
+### Critical and major changes
+* Find variable declarations from every file. Use styleVariables to filter selected files (#[344](https://github.com/SC5/sc5-styleguide/pull/344))
+* Feature: Custom KSS parameter for wrapper markup (#[338](https://github.com/SC5/sc5-styleguide/pull/338))
+  **The syntax for declaring a component wrapper has been changed. It is not compartible anymore. When updating change
+  you wrapper components according to [documentation](https://github.com/SC5/sc5-styleguide#wrapper-markup).**
 
-* Fix test directive when running gulp dev (#[335](https://github.com/SC5/sc5-styleguide/pull/335))
-* Fix: Include demo-gulpfile.js to NPM package. Fixes demo (#[339](https://github.com/SC5/sc5-styleguide/pull/339))
-* Fix typo in demo gulp file (#[336](https://github.com/SC5/sc5-styleguide/pull/336))
+### Bug fixes
+* Allow empty single-line comments (#[345](https://github.com/SC5/sc5-styleguide/pull/345))
+* Fixes failed styleguide generation when section modifier has no markup (#[343](https://github.com/SC5/sc5-styleguide/pull/343))
+* Fix: Do not detect @imports as variables (#[342](https://github.com/SC5/sc5-styleguide/pull/342))
 
-### Improvements:
-
-* Remove unused scoped styles from processing flow (#[337](https://github.com/SC5/sc5-styleguide/pull/337))
+### Internal changes
+* Instruction how to deal with branches (#[346](https://github.com/SC5/sc5-styleguide/pull/346))
diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
@@ -1,5 +1,9 @@
 # Development instructions
 
+### Branches
+The project is developed in `dev` branch. New feature or fix should come with a pull request from a fork. You can make a
+pull request from either your `dev` branch or from a feature branch.
+
 ### Running development server and watches
 
 The project contains a small demo stylesheet that can be used to develop the UI.
@@ -35,13 +39,14 @@ To be able to check during development, please
 
 1. Check that all the needed pull requests are merged
 1. Make sure that your clone fetched all the tags which exist in the SC5 repo
-1. Rebase your `master` branch against SC5
-1. Create `release/x.y.z` branch with the number of upcoming version and switch to it
+1. Rebase your `dev` branch against SC5
+1. Create `release/x.y.z` branch from `dev`  with the number of upcoming version and switch to it
 1. Increment the package number in `package.json`
 1. Run `gulp publish`
 1. Check the `CHANGELOG.md` file. You can remove not needed items or rename them.
 1. Commit changes
-1. Make a pull request from your feature branch
+1. Make a pull request from your feature branch into `dev`
+1. Once it is merged, make a pull request from `dev` to `master`
 1. Once your pull request is merged, rebase your `master` against SC5 again
 1. Run `npm publish`
 1. Create a versioning tag in GitHub. Insert the `CHANGELOG.md` content as a description of this versioning tag.
diff --git a/README.md b/README.md
@@ -64,7 +64,7 @@ Port in which the server will run
 Automatically generate style guide on file change. `--watch` does not run server. Combile with `--server` if you want to run server
 
 
-Config JSON file could contain following settings
+Config JSON file could look like following:
 
     {
         title: "My Style guide",
@@ -101,7 +101,6 @@ For more specific documentation. See [Build options](#build-options) section.
             title: "My Styleguide",
             server: true,
             rootPath: outputPath,
-            styleVariables: '<LESS/SASS variable file>',
             overviewPath: "<path to your overview.md>",
             sass: {
                 // Options passed to gulp-sass
@@ -142,7 +141,6 @@ Then you are able to use the same gulp task inside you `Gruntfile`:
                 title: "My Styleguide",
                 server: true,
                 rootPath: outputPath,
-                styleVariables: '<LESS/SASS variable file>',
                 overviewPath: "<path to your overview.md>",
                 sass: {
                     // Options passed to gulp-sass
@@ -231,7 +229,7 @@ This allows Angular to deal with the routing. However, the static files should b
 <a name="option-styleVariables"></a>
 **styleVariables** (string, optional)
 
-Path to the file containing SASS variables that can be used as modifiers in the KSS notation.
+By default variable definitions are searched from every file passed in gulp.src. styleVariables parameter could be used to filter from which files variables are loaded.
 
 <a name="option-filesConfig"></a>
 **filesConfig** (array, optional) **(Experimental feature)**
@@ -265,36 +263,36 @@ Sometimes your component examples need a wrapper. For example:
 * your component is not visible with white background;
 * your comnponent needs a container with a predefined height.
 
-You can cover such cases by adding a wrapper to a component markup. The wrapper should go after the example in
-markup:
+You can cover such cases by adding a wrapper to a component markup. The wrapper should be defined as a custom parmater
+in the KSS documentation block:
 
 ```
 // markup:
 //  <li>
 //    <a class="{$modifiers}">Item</a>
 //  </li>
-// <sg:wrapper>
+//
+// sg-wrapper:
 // <nav class="sg side-nav">
 //  <ul>
-//   <sg:wrapper-content/>
+//   <sg-wrapper-content/>
 //  </ul>
 // </nav>
-// </sg:wrapper>
 ```
 
-Here a piece of markup between `<sg:wrapper>` and `</sg:wrapper>` tags is a wrapper. The `<sg:wrapper-content/>`
+The `<sg-wrapper-content/>`
 inside shows where to place an example.
 
 Wrappers can be used for fixes like this:
 
 ```
 // markup:
-//  <div class="my-component">This is a white compoennt</div>
-// <sg:wrapper>
+//  <div class="my-component">This is a white component</div>
+//
+// sg-wrapper:
 // <div style="background-color: grey;">
-//   <sg:wrapper-content/>
+//   <sg-wrapper-content/>
 // </div>
-// </sg:wrapper>
 ```
 
 The modifiers get the same wrapper as their parent section.
@@ -307,9 +305,10 @@ following KSS markup
 //
 // markup:
 // <div class="parent"></div>
-// <sg:wrapper>
+//
+// sg-wrapper:
 // <div class="parent-wrapper">
-//  <sg:wrapper-content/>
+//  <sg-wrapper-content/>
 // </div>
 //
 // Styleguide 1.0
@@ -320,9 +319,10 @@ following KSS markup
 //
 // markup:
 // <span class="child"></span>
-// <sg:wrapper>
+//
+// sg-wrapper:
 // <div class="parent">
-//  <sg:wrapper-content/>
+//  <sg-wrapper-content/>
 // </div>
 //
 // Styleguide 1.1

diff --git a/lib/app/js/services/Styleguide.js b/lib/app/js/services/Styleguide.js
@@ -13,6 +13,7 @@ angular.module('sgApp')
 
     this.sections = {};
     this.config = {};
+    this.variables = {};
     this.status = {
       hasError: false,
       error: {}
@@ -24,6 +25,7 @@ angular.module('sgApp')
         url: 'styleguide.json'
       }).success(function(response) {
         _this.config.data = response.config;
+        _this.variables.data = response.variables;
         _this.sections.data = response.sections;
       });
     };

diff --git a/lib/app/js/services/Variables.js b/lib/app/js/services/Variables.js
@@ -16,25 +16,29 @@
       _this.refreshDirtyStates();
     }, true);
 
-    this.getLocalVarByName = function(name) {
+    this.variableMatches = function(var1, var2) {
+      return var1.name === var2.name && var1.file === var2.file;
+    };
+
+    this.getLocalVar = function(variable) {
       for (var i = this.variables.length - 1; i >= 0; i--) {
-        if (this.variables[i].name === name) {
+        if (this.variableMatches(this.variables[i], variable)) {
           return this.variables[i];
         }
       }
     };
 
-    this.getLocalIndexByName = function(name) {
+    this.getLocalIndex = function(variable) {
       for (var i = this.variables.length - 1; i >= 0; i--) {
-        if (this.variables[i].name === name) {
+        if (this.variableMatches(this.variables[i], variable)) {
           return i;
         }
       }
     };
 
-    this.getServerVarByName = function(name) {
+    this.getServerVar = function(variable) {
       for (var i = serverData.length - 1; i >= 0; i--) {
-        if (serverData[i].name === name) {
+        if (this.variableMatches(serverData[i], variable)) {
           return serverData[i];
         }
       }
@@ -44,7 +48,7 @@
       var _this = this;
       // Mark variables that differ from the server version as dirty
       angular.forEach(_this.variables, function(variable) {
-        var serverVar = _this.getServerVarByName(variable.name);
+        var serverVar = _this.getServerVar(variable);
         if (serverVar && serverVar.value !== variable.value && !variable.dirty) {
           variable.dirty = true;
         } else if (serverVar && serverVar.value === variable.value && variable.dirty) {
@@ -59,36 +63,38 @@
       } else {
         for (var i = 0; i < serverData.length; i++) {
           var oldIndex;
-          if (this.variables[i] && this.variables[i].name !== serverData[i].name) {
-            if (!this.getServerVarByName(this.variables[i].name)) {
+          if (this.variables[i] && !this.variableMatches(this.variables[i], serverData[i])) {
+            if (!this.getServerVar(this.variables[i])) {
               // This variable does not exists anymore on the server. Remove it
               this.variables.splice(i, 1);
-            } else if (this.getLocalVarByName(serverData[i].name) && !this.getLocalVarByName(serverData[i].name).dirty) {
+            } else if (this.getLocalVar(serverData[i]) && !this.getLocalVar(serverData[i]).dirty) {
               // The variable already exists but in another position
               // It is not changed so we can just remove it
-              oldIndex = this.getLocalIndexByName(serverData[i].name);
+              oldIndex = this.getLocalIndex(serverData[i]);
               this.variables.splice(oldIndex, 1);
-              this.variables.splice(i, 0, {name: serverData[i].name, value: serverData[i].value});
-            } else if (this.getLocalVarByName(serverData[i].name)) {
+              this.variables.splice(i, 0, angular.copy(serverData[i]));
+            } else if (this.getLocalVar(serverData[i])) {
               // The variable already exists but in another position
               // It is changed so we need to keep the old values
-              oldIndex = this.getLocalIndexByName(serverData[i].name);
+              oldIndex = this.getLocalIndex(serverData[i]);
               var oldValue = this.variables[oldIndex].value;
               this.variables.splice(oldIndex, 1);
-              this.variables.splice(i, 0, {name: serverData[i].name, value: oldValue});
+              var newObject = angular.copy(serverData[i]);
+              newObject.value = oldValue;
+              this.variables.splice(i, 0, newObject);
             } else {
               // The variable does not exists anywhere else. Just add it
-              this.variables.splice(i, 0, {name: serverData[i].name, value: serverData[i].value});
+              this.variables.splice(i, 0, angular.copy(serverData[i]));
             }
-          } else if (this.variables[i] && this.variables[i].name === serverData[i].name) {
+          } else if (this.variables[i] && this.variableMatches(this.variables[i], serverData[i])) {
             // Variable exists already locally
             // Update value if variable does not have any local changes
             if (!this.variables[i].dirty) {
               this.variables[i].value = serverData[i].value;
             }
           } else if (!this.variables[i]) {
             // Add new local variable
-            this.variables.push({name: serverData[i].name, value: serverData[i].value});
+            this.variables.push(angular.copy(serverData[i]));
           }
         }
       }
@@ -98,7 +104,7 @@
       var _this = this;
       // Reset every key to corresponding server value
       angular.forEach(this.variables, function(variable) {
-        var serverVar = _this.getServerVarByName(variable.name);
+        var serverVar = _this.getServerVar(variable);
         if (serverVar) {
           variable.value = serverVar.value;
         }
@@ -117,29 +123,9 @@
       return this;
     };
 
-    this.sync = function(method) {
-      var validMethods = ['load', 'save'];
-
-      // Parameter validation
-      if (validMethods.indexOf(method) === -1) {
-        throw 'No valid method provided. Available methods: ' + validMethods.join(', ');
-      }
-
-      // Load variables from server or localStorage
-      if (method === 'load') {
-        this.socket.emit('request variables from server');
-      }
-
-      // Save variables to server
-      if (method === 'save') {
-        this.socket.emit('variables to server', this.variables);
-      }
-    };
-
     this.saveVariables = function() {
-      var _this = this;
       if (this.socket) {
-        _this.sync('save');
+        this.socket.emit('variables to server', this.variables);
       } else {
         throw 'Socket not available.';
       }
@@ -152,14 +138,10 @@
 
       // Update new server data when it is available
       $rootScope.$watch(function() {
-        return Styleguide.config.data;
+        return Styleguide.variables.data;
       }, function(newValue) {
         if (newValue) {
-          if (newValue.settings) {
-            serverData = newValue.settings;
-          } else {
-            serverData = [];
-          }
+          serverData = newValue;
           _this.refreshValues();
           _this.refreshDirtyStates();
         }

diff --git a/lib/app/sass/app.scss b/lib/app/sass/app.scss
@@ -482,13 +482,13 @@ $mobile: new-breakpoint(max-width 480px);
 // <li>
 //   <a class="{$modifiers}">Item</a>
 // </li>
-// <sg:wrapper>
+//
+// sg-wrapper:
 // <nav class="sg side-nav">
 //  <ul>
-//   <sg:wrapper-content/>
+//   <sg-wrapper-content/>
 //  </ul>
 // </nav>
-// </sg:wrapper>
 //
 // Styleguide 3.3.1