Fix common class: add a custom wrapper element with the defined class...

lib/app/js/app.js

@@ -91,6 +91,15 @@ angular.module('sgApp', [
       }
     };
   })
+  .filter('addWrapper', ['Styleguide', function(Styleguide) {
+    return function(html) {
+      var cls = Styleguide.config.data.commonClass;
+      if (cls) {
+        return '<sg-custom-wrapper class="' + cls + '">' + html + '</sg-custom-wrapper>';
+      }
+      return html;
+    };
+  }])
   // Trust modifier markup to be safe html
   .filter('unsafe', ['$sce', function($sce) {
     return function(val) {

lib/app/js/controllers/sections.js

@@ -58,8 +58,4 @@ angular.module('sgApp')
       return re.test(section.reference);
     };
 
-    $scope.getCommonClass = function() {
-      return Styleguide.config.data.commonClass;
-    };
-
   });

lib/app/views/partials/section.html

@@ -22,22 +22,19 @@ <h1 class="sg"><span class="reference-number">{{ section.reference }}</span> {{
       </a>
     </div>
     <div
-      ng-bind-html="mod.wrappedMarkup | setModifierClass: mod.className | setVariables: variables | unsafe " sg-scope-user-styles>
+      ng-bind-html="mod.wrappedMarkup | setModifierClass: mod.className | setVariables: variables | addWrapper | unsafe" sg-scope-user-styles>
     </div>
   </div>
   <div ng-repeat-end></div>
   <div
     class="sg section-partial"
-    ng-class="getCommonClass()"
     ng-if="!section.modifiers.length && section.markup">
     <div class="sg label">
       <a ng-href="{{section.reference}}/fullscreen" target="_blank">
         <i class="fa fa-arrows-alt"></i>
       </a>
     </div>
-    <div
-      ng-bind-html="section.wrappedMarkup | setVariables: variables | unsafe" dynamic-compile sg-scope-user-styles>
-    </div>
+    <div ng-bind-html="section.wrappedMarkup | setVariables: variables | addWrapper | unsafe" dynamic-compile sg-scope-user-styles></div>
   </div>
 
   <div class="sg section-partial code-listing" ng-if="section.css">

test/angular/app.test.js

@@ -2,14 +2,14 @@
 
 describe('sgApp module', function() {
 
-  var module;
+  var appModule;
 
   beforeEach(function() {
-    module = angular.mock.module('sgApp');
+    appModule = angular.mock.module('sgApp');
   });
 
   it('should be registered', function() {
-    expect(module).not.to.equal(null);
+    expect(appModule).not.to.equal(null);
   });
 
   describe('setModifierClass filter', function() {
@@ -75,4 +75,44 @@ describe('sgApp module', function() {
       expect(setVariables('test string', null)).to.eql('test string');
     });
   });
+
+  describe('addWrapper filter', function() {
+
+    var addWrapper,
+        Styleguide;
+
+    beforeEach(function() {
+      Styleguide = {
+        config: {
+          data: {}
+        }
+      };
+
+      module(function($provide) {
+        $provide.value('Styleguide', Styleguide);
+      });
+
+      inject(function($filter) {
+        addWrapper = $filter('addWrapper');
+      });
+    });
+
+    it('should be defined', function() {
+      expect(addWrapper).to.be.a('function');
+    });
+
+    it('returns input as-is if Styleguide config does not have commonClass', function() {
+      var input = 'unchanged';
+      expect(addWrapper(input)).to.eql(input);
+    });
+
+    it('returns input wrapped inside a <sg-custom-wrapper> tag with common class if Styleguide config has commonClass', function() {
+      Styleguide.config.data.commonClass = 'my-common-class';
+      var input = 'wrapped',
+          expected = '<sg-custom-wrapper class="my-common-class">wrapped</sg-custom-wrapper>';
+      expect(addWrapper(input)).to.eql(expected);
+    });
+
+  });
+
 });