feat(button): add new button directive

src/button/button.js

@@ -0,0 +1,33 @@
+angular.module('ui.bootstrap.button', [])
+
+  .directive('button', ['$parse', function($parse) {
+    return {
+      restrict: 'E',
+      compile:function (tElement, tAttrs, transclude) {
+        tElement.addClass('btn');
+        return function (scope, element, attrs) {
+          if (attrs.toggle){
+
+            var exprGetter = $parse(attrs.toggle);
+            var exprSetter = exprGetter.assign;
+
+            //watch model changes
+            scope.$watch(attrs.toggle, function(newVal){
+              if (newVal) {
+                element.addClass('active');
+              } else {
+                element.removeClass('active');
+              }
+            });
+
+            //watch click events
+            element.bind('click', function(){
+               scope.$apply(function(){
+                 exprSetter(scope, !exprGetter(scope));
+               });
+            });
+          }
+        };
+      }
+    };
+  }]);

src/button/docs/demo.html

@@ -0,0 +1,14 @@
+<div ng-controller="ButtonCtrl">
+
+    <h4>Single toggle</h4>
+    <button toggle="single.selected" class="">Click me!</button>
+    <pre>{{single | json}}</pre>
+
+    <h4>Checkbox</h4>
+    <div class="btn-group" data-toggle="buttons-checkbox">
+        <button toggle="group.left" class="btn-primary">Left</button>
+        <button toggle="group.middle" class="btn-primary">Middle</button>
+        <button toggle="group.right" class="btn-primary">Right</button>
+    </div>
+    <pre>{{group | json}}</pre>
+</div>

src/button/docs/demo.js

@@ -0,0 +1,11 @@
+var ButtonCtrl = function ($scope) {
+  $scope.single = {
+    selected: true
+  };
+
+  $scope.group = {
+    left:false,
+    middle:true,
+    right:false
+  };
+};

src/button/docs/readme.md

@@ -0,0 +1,3 @@
+The `button` directive will style all the buttons with the `btn` class.
+
+Additionally it adds support for the `toggle='expression'` attribute. This attribute, if pointed to an assignable expression, will turn a button into a fancy check-box.

src/button/test/button.spec.js

@@ -0,0 +1,49 @@
+describe('button', function () {
+
+  var $rootScope, $compile;
+  beforeEach(module('ui.bootstrap.button'));
+  beforeEach(inject(function (_$rootScope_, _$compile_) {
+    $rootScope = _$rootScope_;
+    $compile = _$compile_;
+  }));
+
+  describe('initial state', function () {
+    it('should render button without active class if no toggle attribute present selected', function () {
+      var elm = $compile('<button>Click me</button>')($rootScope);
+      $rootScope.$digest();
+
+      expect(elm).toHaveClass('btn');
+      expect(elm).not.toHaveClass('active');
+    });
+
+    it('should render button without active class if the toggle attribute evaluates to false', function () {
+      var elm = $compile('<button toggle="selected">Click me</button>')($rootScope);
+      $rootScope.$apply('selected = false');
+
+      expect(elm).toHaveClass('btn');
+      expect(elm).not.toHaveClass('active');
+    });
+
+    it('should render button with active class if the toggle attribute evaluates to true', function () {
+      var elm = $compile('<button toggle="selected">Click me</button>')($rootScope);
+      $rootScope.$apply('selected = true');
+
+      expect(elm).toHaveClass('btn');
+      expect(elm).toHaveClass('active');
+    });
+  });
+
+  describe('click event', function () {
+
+    it('should toggle class on click if the toggle attribute is present', function () {
+      var elm = $compile('<button toggle="selected">Click me</button>')($rootScope);
+      $rootScope.$apply('selected = true');
+
+      expect($rootScope.selected).toEqual(true);
+      elm.click();
+      expect($rootScope.selected).toEqual(false);
+      elm.click();
+      expect($rootScope.selected).toEqual(true);
+    });
+  });
+});