Feature/namespace tag

.editorconfig

@@ -0,0 +1,6 @@
+[*]
+charset = utf-8
+end_of_line = crlf
+insert_final_newline = true
+indent_style = space
+indent_size = 2

.gitignore

@@ -3,4 +3,5 @@ node_modules
 /coverage
 examples/**/*.html
 bower_components
-npm-debug.log
+npm-debug.log
+.idea

README.md

@@ -227,6 +227,21 @@ It also generates a JSON object of the parsed comments that can be used to gener
      * @hideCode
      */
     ```
+
+* `@namespace` - Add a namespace class to the example output.
+
+    ```css
+    /**
+     * A namespace is a class added to the parent DOM element of the example
+     *
+     * @section namespace Example
+     * @namespace my-magical-namespace
+     * @example
+     * <div class="container">
+     *   <div class="my-awesome-class">Example</div>
+     * </div>
+     */
+    ```    
 
 * `@doc` - A file that defines the section name, description, example, or code. Useful if your section description needs to output HTML. The first heading of the file will be used as the section description if one is not defined. 
 

lib/tags.js

@@ -412,9 +412,22 @@ var tags = {
     description += file;
 
     this.comment.description += description.trimRight();
+  },
+
+  /**
+   * Apply a namespace to example code. Multiple namespaces will be applied to the same element.
+   * Nesting not supported.
+   * @example
+   /**
+   * @section
+   * @namespace foo
+   *\/
+   */
+  namespace: function () {
+    this.block.namespace = this.tag.description;
   }
 };
 tags.code = tags.example;  // @code and @example generate the same structure
 
 module.exports = tags;
-module.exports.forwardReferenceSections = forwardReferenceSections;
+module.exports.forwardReferenceSections = forwardReferenceSections;

template/partials/polymer.hbs

@@ -7709,6 +7709,11 @@ this.fire('dom-change');
       var body = document.createElement('body');
       body.classList.add(this.is);
 
+      // add the namespace of an example to the body
+      if(this.dataset.namespace) {
+        body.classList.add(this.dataset.namespace);
+      }
+
       // add scoped class to all content injected child nodes
       var nodes = this.querySelectorAll('*');
       for (var i = 0; i < nodes.length; i++) {
@@ -7725,4 +7730,4 @@ this.fire('dom-change');
     }
   });
 })();
-</script>
+</script>

template/partials/section.hbs

@@ -1,11 +1,11 @@
 <div class="livingcss__section-description">{{{description}}}</div>
 
 {{#if example}}
-<livingcss-example>{{{example.description}}}</livingcss-example>
+<livingcss-example{{#if namespace}} data-namespace="{{namespace}}"{{/if}}>{{{example.description}}}</livingcss-example>
 {{/if}}
 
 {{#if code}}
 <div class="livingcss__section-markup">
   <pre class="livingcss__section-code"><code class="language-{{code.type}}">{{code.description}}</code></pre>
 </div>
-{{/if}}
+{{/if}}

test/data/namespace.css

@@ -0,0 +1,3 @@
+/**
+ * @namespace test
+ */

test/tags.spec.js

@@ -677,4 +677,29 @@ describe('tags', function() {
 
   });
 
+  // --------------------------------------------------
+  // @namespace
+  // --------------------------------------------------
+  describe('@namespace', function () {
+
+    it('should set namespace property', function (done) {
+      var file = path.join(__dirname, 'data/namespace.css');
+      var sections = [];
+      var pages = [];
+
+      fs.readFile(file, 'utf8', function (err, data) {
+        if (err) {
+          throw err;
+        }
+
+        parseComments(data, file, tags, {sections: sections, pages: pages}, function (block) {
+          expect(block.namespace).to.equal('test');
+        });
+
+        done();
+      });
+    });
+
+  });
+
 });