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

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>Atoms</div>
@@ -33,4 +33,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,18 @@
 <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>
+    <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>

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;
 }

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('should recalculate the animation state when 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 have the _animationState should be `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 be `push` mode by default', () => {
+    expect(component.mode).toBe('push');
   });
 });

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

@@ -27,7 +27,7 @@ export class DaffSidebarViewportComponent implements OnInit, AfterViewInit {
    */
   _opened = false;
 
-  _mode: DaffSidebarMode = 'side';
+  _mode: DaffSidebarMode = 'push';
 
   /**
    * The mode to put the sidebar in
@@ -39,6 +39,16 @@ 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
@@ -52,7 +62,7 @@ export class DaffSidebarViewportComponent implements OnInit, AfterViewInit {
   @Output() backdropClicked: EventEmitter<void> = new EventEmitter<void>();
 
   get animationsEnabled(): boolean {
-    return (this.mode === 'over' || this.mode === 'push') ? true : false;
+    return !this.fixed;
   }
 
   ngOnInit() {
@@ -84,7 +94,7 @@ export class DaffSidebarViewportComponent implements OnInit, AfterViewInit {
   }
 
   get hasBackdrop(): boolean {
-    return (this.mode === 'over' || this.mode === 'push');
+    return !this.fixed;
   }
   onEscape() {
     if (this.hasBackdrop) {