feat(drawer): fixed header and footer (#1785)

demo/app/components/drawer/drawer.component.html

@@ -23,7 +23,10 @@
       class="first-drawer"
       #drawer
     >
-      <div tsVerticalSpacing class="content">
+      <ts-drawer-header>
+        <h4>HEADER</h4>
+      </ts-drawer-header>
+      <div tsVerticalSpacing class="drawer-content">
         <p tsVerticalSpacing>
           <ts-button
             (click)="drawer.toggle()"
@@ -41,6 +44,29 @@
           </ts-radio-group>
         </p>
       </div>
+      <div>
+        <ts-expansion-panel>
+          <ts-expansion-panel-trigger>
+            Collapse and Expand!
+          </ts-expansion-panel-trigger>
+
+          <p>
+            And here is my standard panel content.
+          </p>
+
+          <p>
+            Consequatur fugiat eius placeat tenetur consectetur labore. Laborum architecto animi. Inventore quod unde ea quae doloribus maxime.
+          </p>
+          <p>
+            Consequatur fugiat eius placeat tenetur consectetur labore. Laborum architecto animi. Inventore quod unde ea quae doloribus maxime.
+          </p>
+
+        </ts-expansion-panel>
+      </div>
+
+      <ts-drawer-footer>
+        <h4>THIS IS MY FOOTER</h4>
+      </ts-drawer-footer>
     </ts-drawer>
 
     <ts-drawer
@@ -92,6 +118,14 @@
           The #1 software development tool used by agile teams.
           Visual regression testing is the ability to cross-reference snapshots of a product, highlighting pixel differences — returning fast feedback on the current state of the screen.
         </div>
+        <div>
+          <img src="https://via.placeholder.com/502x250?text=Visit+New+Site+Now">
+          <div fxlayout="row wrap" style="flex-flow: row wrap; box-sizing: border-box; display: flex;">
+            <img src="https://via.placeholder.com/250x300?text=View Side by Side">
+            &nbsp;&nbsp;&nbsp;
+            <img src="https://via.placeholder.com/240x300?text=This is 240x300 size">
+          </div>
+        </div>
       </div>
     </ts-drawer-content>
   </ts-drawer-container>

demo/app/components/drawer/drawer.component.scss

@@ -1,6 +1,6 @@
 .drawer-container {
   position: absolute;
-  top: 33%;
+  top: 25%;
   bottom: 0;
   left: 0;
   right: 0;

demo/app/components/drawer/drawer.module.ts

@@ -5,6 +5,7 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms';
 import { TsCardModule } from '@terminus/ui/card';
+import { TsExpansionPanelModule } from "@terminus/ui/expansion-panel";
 import { TsSpacingModule } from '@terminus/ui/spacing';
 
 import { TsButtonModule } from '@terminus/ui/button';
@@ -25,6 +26,7 @@ import { DrawerComponent } from './drawer.component';
     TsSpacingModule,
     TsDrawerModule,
     TsButtonModule,
+    TsExpansionPanelModule,
   ],
   declarations: [
     DrawerComponent,

terminus-ui/drawer/src/drawer-footer.component.ts

@@ -0,0 +1,27 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  ViewEncapsulation,
+} from '@angular/core';
+
+/**
+ * The drawer footer UI Component
+ *
+ * @example
+ * <ts-drawer-footer>
+ *              THIS IS MY FOOTER
+ * </ts-drawer-footer>
+ *
+ * <example-url>https://getterminus.github.io/ui-demos-release/components/drawer</example-url>
+ */
+@Component({
+  selector: 'ts-drawer-footer',
+  templateUrl: './drawer-header-footer.component.html',
+  styleUrls: ['./drawer.component.scss'],
+  host: { class: 'ts-drawer-footer' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  exportAs: 'tsDrawerFooter',
+})
+export class TsDrawerFooterComponent { }

terminus-ui/drawer/src/drawer-header-footer.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

terminus-ui/drawer/src/drawer-header.component.ts

@@ -0,0 +1,27 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  ViewEncapsulation,
+} from '@angular/core';
+
+/**
+ * The drawer header UI Component
+ *
+ * @example
+ * <ts-drawer-header>
+ *              THIS IS MY HEADER
+ * </ts-drawer-header>
+ *
+ * <example-url>https://getterminus.github.io/ui-demos-release/components/drawer</example-url>
+ */
+@Component({
+  selector: 'ts-drawer-header',
+  templateUrl: './drawer-header-footer.component.html',
+  styleUrls: ['./drawer.component.scss'],
+  host: { class: 'ts-drawer-header' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  exportAs: 'tsDrawerHeader',
+})
+export class TsDrawerHeaderComponent { }

terminus-ui/drawer/src/drawer.component.html

@@ -1,3 +1,5 @@
+<ng-content select="ts-drawer-header"></ng-content>
 <div class="ts-drawer__inner-container">
   <ng-content></ng-content>
 </div>
+<ng-content select="ts-drawer-footer"></ng-content>

terminus-ui/drawer/src/drawer.component.md

@@ -12,6 +12,7 @@ Drawer component is designed to add side content to a small section of a page.
   - [Position](#position)
   - [Collapsed size and expanded size](#collapsed-size-and-expanded-size)
   - [Expand on load](#expand-on-load)
+  - [Fixed header and footer](#fixed-header-and-footer)
 - [Events](#events)
   - [Container events](#container-events)
   - [Drawer events](#drawer-events)
@@ -112,6 +113,20 @@ Users can set the drawer to expand on load
 
 `isExpanded` set to `true` would have drawer expanded on load. It defaults to `false`.
 
+### Fixed header and footer
+
+Users can set drawer header and footer within a drawer, both are sticky to the view.
+
+```html
+<ts-drawer-header>
+  THIS IS MY HEADER
+</ts-drawer-header>
+```
+```html
+<ts-drawer-footer>
+  THIS IS MY FOOTER
+</ts-drawer-footer>
+```
 
 ## Events
 

terminus-ui/drawer/src/drawer.component.scss

@@ -11,6 +11,7 @@ $ts-drawer-content-z-index: 1;
 $ts-drawer-push-drawer-z-index: 2;
 $ts-drawer-backdrop-z-index: 3;
 $ts-drawer-over-drawer-z-index: 4;
+$ts-drawer-header-footer-z-index: 5;
 $ts-animation-duration: 400ms;
 
 // Mixin that creates a new stacking context.
@@ -79,25 +80,51 @@ $ts-animation-duration: 400ms;
   }
 }
 
+.ts-drawer__inner-container {
+  flex: 1 0 0;
+  overflow-y: scroll;
+}
+
 .ts-drawer {
   @include ts-drawer-stacking-context($ts-drawer-over-drawer-z-index);
   @include elevation-element(menu);
   $high-contrast-border: solid 1px currentColor;
-  background-color: color(utility, light);
+  background-color: color(pure);
   bottom: 0;
   box-sizing: border-box;
-  display: block;
+
+  display: flex;
+  flex-direction: column;
   overflow-y: auto;
   position: absolute;
   top: 0;
   z-index: $ts-drawer-backdrop-z-index;
+
   &.ts-drawer--push {
     z-index: $ts-drawer-push-drawer-z-index;
   }
 
   &.ts-drawer--end {
     right: 0;
   }
+
+  .ts-drawer-header {
+    border-bottom: 1px solid color(utility, light);
+    display: block;
+    max-width: inherit;
+    overflow-wrap: break-word;
+    top: 0;
+    width: inherit;
+    z-index: $ts-drawer-header-footer-z-index;
+  }
+  .ts-drawer-footer {
+    border-top: 1px solid color(utility, light);
+    bottom: 0;
+    max-width: inherit;
+    overflow-wrap: break-word;
+    width: inherit;
+    z-index: $ts-drawer-header-footer-z-index;
+  }
 }
 
 

terminus-ui/drawer/src/drawer.component.spec.ts

@@ -3,6 +3,7 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
 import { CommonModule } from '@angular/common';
 import { Type } from '@angular/core';
 import {
+  async,
   ComponentFixture,
   fakeAsync,
   flush,
@@ -20,6 +21,10 @@ import {
   createComponent as createComponentInner,
   dispatchKeyboardEvent,
 } from '@terminus/ngx-tools/testing';
+import {
+  TsDrawerFooterComponent,
+  TsDrawerHeaderComponent,
+} from '@terminus/ui/drawer';
 import * as testComponents from '@terminus/ui/drawer/testing';
 
 import {
@@ -128,5 +133,23 @@ describe(`drawer`, () => {
       expect(component.closeStartCount).toBe(1);
       expect(event.defaultPrevented).toBe(true);
     }));
+
+    describe(`header and footer`, () => {
+
+      test(`should have header and footer set`, fakeAsync(() => {
+
+        setup(testComponents.DrawerWithHeaderAndFooter);
+        fixture.detectChanges();
+        const drawerElement = fixture.debugElement.query(By.directive(TsDrawerComponent));
+        drawerElement.componentInstance.expand();
+        fixture.detectChanges();
+        tick();
+        const headerElement = fixture.debugElement.query(By.directive(TsDrawerHeaderComponent));
+        const footerElement = fixture.debugElement.query(By.directive(TsDrawerFooterComponent));
+        expect(headerElement.nativeElement.textContent.trim()).toEqual('HEADER');
+        expect(footerElement.nativeElement.textContent.trim()).toEqual('FOOTER');
+      }));
+    });
+
   });
 });

terminus-ui/drawer/src/drawer.module.ts

@@ -6,12 +6,16 @@ import { MatRippleModule } from '@angular/material/core';
 
 import { TsDrawerContainerComponent } from './drawer-container.component';
 import { TsDrawerContentComponent } from './drawer-content.component';
+import { TsDrawerFooterComponent } from './drawer-footer.component';
+import { TsDrawerHeaderComponent } from './drawer-header.component';
 import { TsDrawerComponent } from './drawer.component';
 
 export * from './drawer.component';
 export * from './drawer-container.component';
 export * from './drawer-content.component';
 export * from './drawer-animations';
+export * from './drawer-header.component';
+export * from './drawer-footer.component';
 
 
 @NgModule({
@@ -25,11 +29,15 @@ export * from './drawer-animations';
     TsDrawerComponent,
     TsDrawerContainerComponent,
     TsDrawerContentComponent,
+    TsDrawerFooterComponent,
+    TsDrawerHeaderComponent,
   ],
   exports: [
     TsDrawerComponent,
     TsDrawerContainerComponent,
     TsDrawerContentComponent,
+    TsDrawerFooterComponent,
+    TsDrawerHeaderComponent,
   ],
 })
 export class TsDrawerModule { }

terminus-ui/drawer/testing/src/test-components.ts

@@ -227,6 +227,27 @@ export class SimpleDrawer {
   public expandedSize = null;
 }
 
+@Component({
+  template: `
+    <ts-drawer-container>
+        <ts-drawer>
+            <ts-drawer-header>
+                HEADER
+            </ts-drawer-header>
+            <button>
+                BUTTON
+            </button>
+            <ts-drawer-footer>
+                FOOTER
+            </ts-drawer-footer>
+        </ts-drawer>
+        <ts-drawer-content>
+            CONTENT
+        </ts-drawer-content>
+    </ts-drawer-container>
+  `,
+})
+export class DrawerWithHeaderAndFooter { }
 
 /**
  * NOTE: Currently all exported Components must belong to a module. So this is our useless module to avoid the build error.
@@ -245,6 +266,7 @@ export class SimpleDrawer {
     MultiDrawerSameSidePush,
     SetMargins,
     SimpleDrawer,
+    DrawerWithHeaderAndFooter,
   ],
 })
 export class TsDrawerContainerTestComponentsModule { }