feat(design): removed fixed and side mode and added fixed input property

apps/daffio/src/app/core/sidebar/effects/sidebar-routing-mode.effect.spec.ts

@@ -47,7 +47,7 @@ describe('Daffio | DaffioSidebarRoutingModeEffects', () => {
   describe('when a ROUTER_NAVIGATED occurs to a route with a `sidebarMode` in its tree', () => {
     const action = configureStubNavigationAction({
       data: {
-        sidebarMode: 'side'
+        sidebarMode: 'push'
       }
     });
 
@@ -77,7 +77,7 @@ describe('Daffio | DaffioSidebarRoutingModeEffects', () => {
         actions$ = hot( '--a', { a: action });
         spyOn(breakpointObserver, 'observe').and.returnValue(hot( '--a', { a: state }));
 
-        expected = cold('--b', { b: new SetSidebarMode('side') });
+        expected = cold('--b', { b: new SetSidebarMode('push') });
 
         effects = new DaffioSidebarRoutingModeEffects(actions$, breakpointObserver);
 

apps/daffio/src/app/core/sidebar/reducers/sidebar.reducer.spec.ts

@@ -65,7 +65,7 @@ describe('Sidebar | Sidebar Reducer', () => {
 
   describe('when SetSidebarModeAction is triggered', () => {
     it('should set the sidebar mode to the payload', () => {
-      const stubMode = 'side';
+      const stubMode = 'push';
       const action = new SetSidebarMode(stubMode);
       const result = reducer(initialState, action);
       expect(result.mode).toEqual(stubMode);

apps/design-land/src/app/app.component.html

@@ -1,4 +1,4 @@
-<daff-sidebar-viewport>
+<daff-sidebar-viewport fixed="true">
   <daff-sidebar class="design-land__sidebar">
     <daff-link-set>
       <div daffLinkSetHeading>Foundations</div>
@@ -37,4 +37,4 @@
   <div class="design-land__content">
     <router-outlet></router-outlet>
   </div>
-</daff-sidebar-viewport>
+</daff-sidebar-viewport>

apps/design-land/src/app/sidebar/sidebar.component.html

@@ -1,20 +1,20 @@
 <daff-form-field>
   <select daff-native-select [(ngModel)]="mode">
     <option value="push">Push (push)</option>
-    <option value="side">Side (side)</option>
     <option value="over">Over (over)</option>
-    <option value="fixed">Fixed (fixed)</option>
   </select>
 </daff-form-field>
 
 <button daff-button (click)="open = !open">{{ open ? "Close" : "Open" }}</button>
+<button daff-button color="secondary" (click)="fixed = !fixed">{{ fixed ? "Undo" : "Fix in Viewport" }}</button>
 
-<daff-sidebar-viewport [mode]="mode" [opened]="open">
-    <daff-sidebar>
-      <a daff-link-set-item routerLink="accordion">Accordion</a><br>
-      <a daff-link-set-item routerLink="article">Article</a><br>
-    </daff-sidebar>
-    <p>Some Content</p>
-</daff-sidebar-viewport>
-<h1>Outside Focus   </h1>
-<input>    <input>     
+
+<daff-sidebar-viewport [mode]="mode" [opened]="open" [fixed]="fixed">
+  <daff-sidebar>
+    <daff-link-set>
+      <a daff-link-set-item routerLink="accordion">Accordion</a>
+      <a daff-link-set-item routerLink="article">Article</a>
+    </daff-link-set>
+  </daff-sidebar>
+  <p>Some Content</p>
+</daff-sidebar-viewport>

apps/design-land/src/app/sidebar/sidebar.component.ts

@@ -9,4 +9,5 @@ import { DaffSidebarMode } from '@daffodil/design';
 export class SidebarComponent {
   mode: DaffSidebarMode = "push";
   open: boolean = false;
+  fixed = false;
 }

apps/design-land/src/app/sidebar/sidebar.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 
 import { SidebarRoutingModule } from './sidebar-routing.module';
 import { SidebarComponent } from './sidebar.component';
-import { DaffSidebarModule, DaffButtonModule, DaffNativeSelectModule, DaffFormFieldModule } from '@daffodil/design';
+import { DaffSidebarModule, DaffButtonModule, DaffNativeSelectModule, DaffFormFieldModule, DaffLinkSetModule } from '@daffodil/design';
 import { FormsModule } from '@angular/forms';
 
 @NgModule({
@@ -15,6 +15,7 @@ import { FormsModule } from '@angular/forms';
     DaffFormFieldModule,
     DaffButtonModule,
     DaffSidebarModule,
+    DaffLinkSetModule,
     SidebarRoutingModule
   ]
 })

libs/design/src/molecules/sidebar/helper/sidebar-mode.ts

@@ -1 +1 @@
-export type DaffSidebarMode = 'over' | 'push' | 'side' | 'fixed';
+export type DaffSidebarMode = 'over' | 'push';

libs/design/src/molecules/sidebar/sidebar-viewport/sidebar-viewport.component.spec.ts

@@ -18,6 +18,7 @@ import { DaffBackdropComponent, DaffBackdropModule } from '../../backdrop/public
       [backdropIsVisible]="backdropIsVisible"
       [mode]="mode"
       [opened]="open" 
+      [fixed]="fixedValue"
       (backdropClicked)="incrementBackdropClicked()"></daff-sidebar-viewport>
   </div>
 `})
@@ -26,7 +27,9 @@ class WrapperComponent {
 
   backdropIsVisible = false;
 
-  mode: DaffSidebarMode = 'side';
+  mode: DaffSidebarMode = 'push';
+
+  fixedValue = false;
 
   backdropClickedCounter = 0;
 
@@ -128,12 +131,12 @@ describe('DaffSidebarViewportComponent | Usage', () => {
     });
   });
 
-  describe('side mode', () => {
+  describe('fixed in viewport', () => {
 
     let backdropElement;
 
     beforeEach(() => {
-      wrapper.mode = 'side';
+      wrapper.fixedValue = true;
       fixture.detectChanges();
 
       backdropElement = fixture.debugElement.query(By.css('daff-backdrop'));
@@ -156,43 +159,16 @@ describe('DaffSidebarViewportComponent | Usage', () => {
     });
   });
 
-  describe('fixed mode', () => {
 
-    let backdropElement;
-
-    beforeEach(() => {
-      wrapper.mode = 'fixed';
-      fixture.detectChanges();
-
-      backdropElement = fixture.debugElement.query(By.css('daff-backdrop'));
-    });
-
-    it('should not render backdrop', () => {
-      expect(backdropElement).toBeNull();
-    });
-
-    it('should be `open` and and not change animation states regardless of `opened` state changes', () => {
-      wrapper.open = false;
-      fixture.detectChanges();
-
-      expect(component._animationState).toEqual('open');
-
-      wrapper.open = true;
-      fixture.detectChanges();
-
-      expect(component._animationState).toEqual('open');
-    });
-  });
-
-  it('should recalculate the animation state when the mode changes', () => {
-    wrapper.mode = 'side';
+  it('when mode is set to fixed', () => {
+    wrapper.mode = 'push';
     wrapper.open = false;
     fixture.detectChanges();
-    expect(component._animationState).toEqual('open');
+    expect(component._animationState).toEqual('closed');
 
-    wrapper.mode = 'push';
+    wrapper.fixedValue = true;
     fixture.detectChanges();
-    expect(component._animationState).toEqual('closed');
+    expect(component._animationState).toEqual('open');
   });
 });
 
@@ -229,16 +205,15 @@ describe('DaffSidebarViewportComponent | Defaults', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should have the _animationState should be `open` by default', () => {
-    expect(component._animationState).toEqual('open');
+  it('should set the _animationState to closed by default', () => {
+    expect(component._animationState).toEqual('closed');
   });
 
-  it('should not have the backdrop by default', () => {
-    expect(component.hasBackdrop).toBe(false);
-    expect(fixture.debugElement.query(By.css('daff-backdrop'))).toBeNull();
+  it('should have the backdrop by default', () => {
+    expect(component.hasBackdrop).toBe(true);
   });
 
-  it('should be `side` mode by default', () => {
-    expect(component.mode).toBe('side');
+  it('should set the default mode to `push`', () => {
+    expect(component.mode).toBe('push');
   });
 });

libs/design/src/molecules/sidebar/sidebar-viewport/sidebar-viewport.component.ts

@@ -18,7 +18,7 @@ import { DaffSidebarComponent } from '../sidebar/sidebar.component';
 export class DaffSidebarViewportComponent implements OnInit, AfterViewInit {
 
   constructor(private ref: ChangeDetectorRef) {
-	}
+  }
 	/**
 	 * @docs-private
 	 */
@@ -34,10 +34,10 @@ export class DaffSidebarViewportComponent implements OnInit, AfterViewInit {
    */
   _opened = false;
 
-	/**
-	 * @docs-private
-	 */
-  _mode: DaffSidebarMode = 'side';
+  /**
+     * @docs-private
+     */
+  _mode: DaffSidebarMode = 'push';
 
   /**
    * The mode to put the sidebar in
@@ -49,42 +49,52 @@ export class DaffSidebarViewportComponent implements OnInit, AfterViewInit {
     this._animationState = getAnimationState(this.opened, this.animationsEnabled);
   }
 
+  _fixed = false;
+  /**
+   * Boolean value to lock the sidebar in viewport.
+   */
+  @Input()
+  get fixed(): boolean { return this._fixed; }
+  set fixed(value: boolean) {
+    this._fixed = value;
+    this._animationState = getAnimationState(this.opened, this.animationsEnabled);
+  }
   /**
    * Input state for whether or not the backdrop is 
    * "visible" to the human eye
    */
   // tslint:disable-next-line: no-inferrable-types
   @Input() backdropIsVisible: boolean = true;
-	
+
 	/**
 	 * Property for the "opened" state of the sidebar
 	 */
-	@Input()
-	get opened(): boolean { return this._opened; }
-	set opened(value: boolean) {
-		this._opened = value;
-		this._animationState = getAnimationState(value, this.animationsEnabled);
-	}
+  @Input()
+  get opened(): boolean { return this._opened; }
+  set opened(value: boolean) {
+    this._opened = value;
+    this._animationState = getAnimationState(value, this.animationsEnabled);
+  }
   /**
    * Event fired when the backdrop is clicked
    * This is often used to close the sidebar
    */
   @Output() backdropClicked: EventEmitter<void> = new EventEmitter<void>();
 
-	/**
+  /**
 	 * @docs-private
 	 */
-	get animationsEnabled(): boolean {
-    return (this.mode === 'over' || this.mode === 'push') ? true : false;
+  get animationsEnabled(): boolean {
+    return !this.fixed;
   }
 
 	/**
 	 * @docs-private
 	 */
   ngOnInit() {
     this._animationState = getAnimationState(this.opened, this.animationsEnabled);
-	}
-	
+  }
+
 	/**
 	 * @docs-private
 	 */
@@ -107,10 +117,9 @@ export class DaffSidebarViewportComponent implements OnInit, AfterViewInit {
 	 * @docs-private
 	 */
   get hasBackdrop(): boolean {
-    return (this.mode === 'over' || this.mode === 'push');
-	}
-
-	/**
+    return !this.fixed;
+  }
+  /**
 	 * @docs-private
 	 */
   onEscape() {