feat(panel): add uifIslightDismiss attribute

Add `uif-is-light-dismiss` as an attribute of the Panel directive to allow the setting to determine whether clicking on the background overlay closes the panel. Default value is false. When not set, or set to false, clicking on the background overlay has no effect. When set to true, clicking on the background overlay closes the panel.

Closes #434.

src/components/panel/demo/index.html

@@ -29,14 +29,22 @@
     <h1 class="ms-font-su">uifPanel Demo | &lt;uif-panel&gt;</h1>
     <em class="ms-font-m">In order for this demo to work you must first build the library in dev mode. (gulp build-lib --dev)</em>
 
+    <p><em class="ms-font-m">Use this toggle to toggle the value of the 'uif-is-light-dismiss' property. If set to true, clicking on the overlay will close the Panel. The default value is false.</em><uif-toggle uif-label-off="isLightDismiss=false" uif-label-on="isLightDismiss=true" ng-model="isLightDismiss"/></p>
+
+
     <h2 class="ms-font-xl">Basic Usage</h2>
+
     <ng-include src="'basic.html'"></ng-include>
     <h4><i class="ms-font-m">Code:</i></h4>
     <raw src="'basic.html'"></raw>
 
     <script type="text/ng-template" id="basic.html">
       <uif-button  ng-click="vm.isOpen1 = !vm.isOpen1">Toggle Menu</uif-button>
-      <uif-panel uif-type="small" uif-is-open="vm.isOpen1" uif-show-overlay="true" uif-show-close="true">
+        <uif-panel uif-type="small"
+                   uif-is-open="vm.isOpen1"
+                   uif-show-overlay="true"
+                   uif-show-close="true"
+                   uif-is-light-dismiss="isLightDismiss">
         <uif-panel-header>Header</uif-panel-header>
         <uif-content>
         <span class="ms-font-m">Place your content in here!</span>
@@ -51,7 +59,7 @@ <h4><i class="ms-font-m">Code:</i></h4>
 
     <script type="text/ng-template" id="withcommandbar.html">
       <uif-button  ng-click="vm.isOpen2 = !vm.isOpen2">Toggle Menu</uif-button>
-      <uif-panel uif-type="large" uif-is-open="vm.isOpen2" uif-show-overlay="true">
+      <uif-panel uif-type="large" uif-is-open="vm.isOpen2" uif-show-overlay="true" uif-is-light-dismiss="isLightDismiss">
         <uif-command-bar uif-search-term="searchValue" placeholder="Search here...">
           <uif-command-bar-main uif-show-overflow='true'>
           <uif-command-bar-item>

src/components/panel/panelDirective.spec.ts

@@ -93,6 +93,76 @@ describe('panel: <uif-panel />', () => {
       expect(closeButton).toHaveAttr('type', 'button');
     });
 
+    it('clicking on the Overlay should not close the panel when no value is supplied to uif-is-light-dismiss', inject(($compile: Function, $rootScope: angular.IRootScopeService) => {
+
+      $scope.isOpen = true;
+      $rootScope.$digest();
+      expect(panel).toHaveClass('is-open');
+
+      // attempt to close the panel by clicking on the background overlay
+      panel.find('.ms-Overlay.ms-Overlay--dark').trigger('click');
+      $rootScope.$digest();
+      this.$timeoutservice.flush();
+      expect($scope.isOpen).toEqual(true);
+    }));
+
+  });
+
+  describe('Tests for uif-is-light-dismiss attribute boolean value', () => {
+
+    let panel: JQuery;
+    let $scope: any;
+
+    afterEach(() => {
+      this.$timeoutservice.verifyNoPendingTasks();
+    });
+
+    beforeEach(inject(($rootScope: angular.IRootScopeService, $compile: Function, $timeout: angular.ITimeoutService) => {
+
+      $scope = $rootScope;
+      this.$timeoutservice = $timeout;
+      $scope.isOpen = true;
+      $scope.isLightDismiss = false;
+
+      panel = $compile(`<uif-panel uif-type="small" uif-is-open="isOpen" uif-show-overlay="true" uif-show-close="true" uif-is-light-dismiss="isLightDismiss">
+                              <uif-panel-header>Header</uif-panel-header>
+                              <uif-content>
+                              <span class="ms-font-m">Place your content in here!</span>
+                              </uif-content>
+                            </uif-panel>
+                    `)($scope);
+      $scope.$digest();
+      $('body').append(panel);
+      panel = jQuery(panel[0]);
+    }));
+
+    it('clicking on the Overlay should not close the panel when uif-is-light-dismiss is false', inject(($compile: Function, $rootScope: angular.IRootScopeService) => {
+
+      $scope.isOpen = true;
+      $rootScope.$digest();
+      expect(panel).toHaveClass('is-open');
+
+      // attempt to close the panel by clicking on the background overlay
+      panel.find('.ms-Overlay.ms-Overlay--dark').trigger('click');
+      $rootScope.$digest();
+      this.$timeoutservice.flush();
+      expect($scope.isOpen).toEqual(true);
+    }));
+
+    it('clicking on the Overlay should close the panel when uif-is-light-dismiss is true', inject(($compile: Function, $rootScope: angular.IRootScopeService) => {
+
+      $scope.isOpen = true;
+      $scope.isLightDismiss = true;
+      $rootScope.$digest();
+      expect(panel).toHaveClass('is-open');
+
+      // attempt to close the panel by clicking on the background overlay
+      panel.find('.ms-Overlay.ms-Overlay--dark').trigger('click');
+      $rootScope.$digest();
+      this.$timeoutservice.flush();
+      expect($scope.isOpen).toEqual(false);
+    }));
+
   });
 
   describe('Command bar is placed correctly', () => {

src/components/panel/panelDirective.ts

@@ -23,7 +23,7 @@ export class PanelDirective implements angular.IDirective {
   public restrict: string = 'E';
   public template: string = `<div class="ms-Panel">
                               <div  class="ms-Overlay"
-                                    ng-click="closePanel()"
+                                    ng-click="uifIsLightDismiss && closePanel()"
                                     ng-class="uifShowOverlay === true ? \'ms-Overlay--dark\' : \'\';"></div>
                               <div class="ms-Panel-main">
                                 <div class="ms-Panel-commands">
@@ -43,6 +43,7 @@ export class PanelDirective implements angular.IDirective {
     uifIsOpen: '=',
     uifShowClose: '=',
     uifShowOverlay: '=',
+    uifIsLightDismiss: '=',
     uifType: '@'
   };
 
@@ -116,6 +117,7 @@ interface IPanelScope extends angular.IScope {
   uifType: string;
   uifShowOverlay: boolean;
   uifShowClose: boolean;
+  uifIsLightDismiss: boolean;
   closePanel: () => void;
 }