Merge pull request #1020 from HealthCatalyst/dev

Merge dev -> master
HealthCatalyst · Oct 8, 2019 · b25b1de · b25b1de
2 parents 89e7113 + 2811014
commit b25b1de
Show file tree

Hide file tree

Showing 44 changed files with 474 additions and 337 deletions.
diff --git a/.../cashmere-examples/src/lib/navbar-app-switcher/navbar-app-switcher-example.component.html b/.../cashmere-examples/src/lib/navbar-app-switcher/navbar-app-switcher-example.component.html
@@ -35,20 +35,45 @@
     </hc-navbar-mobile-menu>
 </hc-navbar>
 
-<hc-pop #appSwitcher><hc-app-switcher iconHeight="100"></hc-app-switcher></hc-pop>
+<hc-pop #appSwitcher [showArrow]="false" horizontalAlign="end">
+    <hc-app-switcher iconHeight="50"></hc-app-switcher>
+</hc-pop>
 
-<hc-pop #options>
-    <ul class="list-options">
-        <li><a href="" target="_blank">Help Topics</a></li>
-        <li><a href="" target="_blank">Release Notes</a></li>
-        <li><a href="" target="_blank">About</a></li>
-        <li><a href="https://community.healthcatalyst.com/" target="_blank">Health Catalyst Community</a></li>
-        <li><a href="" target="_blank">Send us your feedback</a></li>
-    </ul>
+<hc-pop #options [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
+    <div hcMenu>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-book"></hc-icon>
+            <span hcMenuText>Read the docs</span>
+        </button>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-lightbulb-o"></hc-icon>
+            <span hcMenuText>Request a feature</span>
+        </button>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-users"></hc-icon>
+            <span hcMenuText>Ask the community</span>
+        </button>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-bullhorn"></hc-icon>
+            <span hcMenuText>Find out what's new</span>
+        </button>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-comments"></hc-icon>
+            <span hcMenuText>Send feedback</span>
+        </button>
+        <div hcMenuItem hcDivider></div>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-info-circle"></hc-icon>
+            <span hcMenuText>About</span>
+        </button>
+    </div>
 </hc-pop>
 
-<hc-pop #user>
-    <ul class="list-options">
-        <li><a href="" target="_blank">Logout</a></li>
-    </ul>
+<hc-pop #user [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
+    <div hcMenu>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-sign-out"></hc-icon>
+            <span hcMenuText>Log out of this App</span>
+        </button>
+    </div>
 </hc-pop>
diff --git a/projects/cashmere-examples/src/lib/navbar-overview/navbar-overview-example.component.html b/projects/cashmere-examples/src/lib/navbar-overview/navbar-overview-example.component.html
@@ -14,30 +14,41 @@
     </div>
 </hc-navbar>
 
-<hc-pop #options>
-    <ul class="list-options">
-        <li>
-            <a href="" target="_blank">Help Topics</a>
-        </li>
-        <li>
-            <a href="" target="_blank">Release Notes</a>
-        </li>
-        <li>
-            <a href="" target="_blank">About</a>
-        </li>
-        <li>
-            <a href="https://community.healthcatalyst.com/" target="_blank">Health Catalyst Community</a>
-        </li>
-        <li>
-            <a href="" target="_blank">Send us your feedback</a>
-        </li>
-    </ul>
+<hc-pop #options [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
+    <div hcMenu>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-book"></hc-icon>
+            <span hcMenuText>Read the docs</span>
+        </button>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-lightbulb-o"></hc-icon>
+            <span hcMenuText>Request a feature</span>
+        </button>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-users"></hc-icon>
+            <span hcMenuText>Ask the community</span>
+        </button>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-bullhorn"></hc-icon>
+            <span hcMenuText>Find out what's new</span>
+        </button>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-comments"></hc-icon>
+            <span hcMenuText>Send feedback</span>
+        </button>
+        <div hcMenuItem hcDivider></div>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-info-circle"></hc-icon>
+            <span hcMenuText>About</span>
+        </button>
+    </div>
 </hc-pop>
 
-<hc-pop #user>
-    <ul class="list-options">
-        <li>
-            <a href="" target="_blank">Logout</a>
-        </li>
-    </ul>
+<hc-pop #user [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
+    <div hcMenu>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-sign-out"></hc-icon>
+            <span hcMenuText>Log out of this App</span>
+        </button>
+    </div>
 </hc-pop>
diff --git a/projects/cashmere-examples/src/lib/pagination-simple/pagination-simple-example.component.ts b/projects/cashmere-examples/src/lib/pagination-simple/pagination-simple-example.component.ts
@@ -8,8 +8,8 @@ import {Component} from '@angular/core';
     templateUrl: 'pagination-simple-example.component.html'
 })
 export class PaginationSimpleExampleComponent {
-    _pageNumber: number = 15;
-    pageSize: number = 20;
+    _pageNumber: number = 8;
+    pageSize: number = 100;
     totalItems: number = 1000;
 
     get pageNumber() {

diff --git a/projects/cashmere-examples/src/lib/popover-menu/popover-menu-example.component.html b/projects/cashmere-examples/src/lib/popover-menu/popover-menu-example.component.html
@@ -1,31 +1,31 @@
 <button hc-button buttonStyle="secondary" [hcPop]="menu">Menu</button>
 
-<hc-pop #menu [autoCloseOnContentClick]="true" [showArrow]="false">
-    <div class="hc-menu-panel">
-        <button hcButtonItem>
+<hc-pop #menu [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="start">
+    <div hcMenu>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-snowflake-o"></hc-icon>
             <span hcMenuText>Snowflake</span>
             <span hcMenuSubText>Ctrl + S</span>
         </button>
-        <button hcButtonItem>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-plus"></hc-icon>
             <span hcMenuText>Add a new one</span>
         </button>
-        <div hcButtonItem hcDivider></div>
-        <button hcButtonItem>
+        <div hcMenuItem hcDivider></div>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-camera-retro"></hc-icon>
             <span hcMenuText>Hip Photo</span>
             <span hcMenuSubText>Ctrl + P</span>
         </button>
-        <button hcButtonItem disabled>
+        <button hcMenuItem disabled>
             <span hcMenuIcon></span>
             <span hcMenuText>Menu item 3</span>
             <span hcMenuSubText>I'm disabled</span>
         </button>
     </div>
 </hc-pop>
-
+<br><br>
 <p class="hc-font-sm">
-    Note: Must import Cashmere's <code>ButtonModule</code> to use the
-    <code>hcButtonItem</code> & <code>hcMenu*</code> directives.
-</p>
+    The directives <code>hcMenu</code>, <code>hcMenuItem</code>, <code>hcMenuIcon</code>,
+    <code>hcMenuText</code>, and <code>hcMenuSubText</code> may be used to create menus using the popover component.
+</p>
diff --git a/projects/cashmere-examples/src/lib/toaster-overview/toaster-overview-example.component.scss b/projects/cashmere-examples/src/lib/toaster-overview/toaster-overview-example.component.scss
@@ -33,6 +33,7 @@
 
 .progress-row {
     display: flex;
+    align-items: end;
     width: 100%;
 }
 

diff --git a/projects/cashmere/src/lib/button/button.module.ts b/projects/cashmere/src/lib/button/button.module.ts
@@ -2,35 +2,12 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {ButtonComponent} from './button.component';
 import {AnchorComponent} from './anchor.component';
-import {ButtonItemDirective} from './split-button/directives/button-item.directive';
-import {MenuIconDirective} from './split-button/directives/menu-icon.directive';
-import {MenuTextDirective} from './split-button/directives/menu-text.directive';
-import {MenuSubTextDirective} from './split-button/directives/menu-sub-text.directive';
-import {DividerDirective} from './split-button/directives/divider.directive';
 import {SplitButtonComponent} from './split-button/split-button.component';
-import { PopModule } from '../pop/popover.module';
+import {PopModule} from '../pop/popover.module';
 
 @NgModule({
     imports: [CommonModule, PopModule],
-    declarations: [
-        AnchorComponent,
-        ButtonComponent,
-        ButtonItemDirective,
-        SplitButtonComponent,
-        MenuIconDirective,
-        MenuTextDirective,
-        MenuSubTextDirective,
-        DividerDirective
-    ],
-    exports: [
-        AnchorComponent,
-        ButtonComponent,
-        ButtonItemDirective,
-        SplitButtonComponent,
-        MenuIconDirective,
-        MenuTextDirective,
-        MenuSubTextDirective,
-        DividerDirective
-    ]
+    declarations: [AnchorComponent, ButtonComponent, SplitButtonComponent],
+    exports: [AnchorComponent, ButtonComponent, SplitButtonComponent, PopModule]
 })
 export class ButtonModule {}
diff --git a/projects/cashmere/src/lib/button/index.ts b/projects/cashmere/src/lib/button/index.ts
@@ -1,5 +1,4 @@
 export {AnchorComponent} from './anchor.component';
 export {ButtonComponent} from './button.component';
 export {ButtonModule} from './button.module';
-export {ButtonItemDirective} from './split-button/directives/button-item.directive';
 export {SplitButtonComponent, SplitButtonClickEvent} from './split-button/split-button.component';
diff --git a/projects/cashmere/src/lib/button/split-button/directives/button-item.directive.ts b/projects/cashmere/src/lib/button/split-button/directives/button-item.directive.ts
diff --git a/projects/cashmere/src/lib/button/split-button/split-button.component.html b/projects/cashmere/src/lib/button/split-button/split-button.component.html
@@ -28,7 +28,7 @@
 </span>
 
 <hc-pop #splitMenu [xAlign]="menuPosition" [autoCloseOnContentClick]="autoCloseMenuOnClick" [showArrow]="false">
-    <div class="hc-menu-panel">
+    <div hcMenu>
         <ng-content select="[hcButtonItem]"></ng-content>
     </div>
-</hc-pop>
+</hc-pop>
diff --git a/projects/cashmere/src/lib/button/split-button/split-button.component.spec.ts b/projects/cashmere/src/lib/button/split-button/split-button.component.spec.ts
@@ -6,7 +6,7 @@ import {SplitButtonComponent} from './split-button.component';
 import {ButtonModule} from '../button.module';
 import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
-import {ButtonItemDirective} from './directives/button-item.directive';
+import {MenuItemDirective} from '../../pop/directives/menu-item.directive';
 
 describe('SplitButtonComponent', () => {
     let fixture: ComponentFixture<any>;
@@ -39,7 +39,7 @@ describe('SplitButtonComponent', () => {
             triggerButton.click();
             fixture.detectChanges();
 
-            let buttonItems = fixture.debugElement.queryAll(By.directive(ButtonItemDirective));
+            let buttonItems = fixture.debugElement.queryAll(By.directive(MenuItemDirective));
             buttonItems[0].nativeElement.click();
             fixture.detectChanges();
 

diff --git a/projects/cashmere/src/lib/modal/modal-window.component.ts b/projects/cashmere/src/lib/modal/modal-window.component.ts
@@ -34,7 +34,7 @@ export class ModalWindowComponent {
         return state;
     }
 
-    @HostListener('click', ['$event'])
+    @HostListener('mousedown', ['$event'])
     _overlayClick(event: any) {
         let modalContentNotPresent = true;
         let path = this._eventPath(event);

diff --git a/projects/cashmere/src/lib/navbar/navbar.component.html b/projects/cashmere/src/lib/navbar/navbar.component.html
@@ -27,8 +27,13 @@
     <ng-content select="hc-navbar-mobile-menu"></ng-content>
 </div>
 
-<hc-pop #navbarMore class="more-popover">
-    <ul class="list-options">
-        <li *ngFor="let item of _moreList"><a routerLinkActive="active" [routerLink]="item.uri" (click)="_moreClick()">{{item.name}}</a></li>
-    </ul>
+<hc-pop #navbarMore [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
+    <div hcMenu>
+        <ng-container *ngFor="let item of _moreList; let i = index">
+            <button hcMenuItem routerLinkActive="active" [routerLink]="item.uri" (click)="_moreClick()">
+                <span hcMenuText>{{item.name}}</span>
+            </button>
+            <div *ngIf="i != _moreList.length - 1" hcMenuItem hcDivider></div>
+        </ng-container>
+    </div>
 </hc-pop>
diff --git a/projects/cashmere/src/lib/navbar/navbar.component.scss b/projects/cashmere/src/lib/navbar/navbar.component.scss
@@ -47,10 +47,3 @@
         @include hc-navbar-mobile-menu();
     }
 }
-
-.more-popover a {
-    &.active {
-        color: $text;
-        cursor: default;
-    }
-}
diff --git a/projects/cashmere/src/lib/navbar/navbar.component.ts b/projects/cashmere/src/lib/navbar/navbar.component.ts
@@ -13,7 +13,7 @@ import {
     ViewEncapsulation
 } from '@angular/core';
 import {forkJoin, Subject} from 'rxjs';
-import {HcPopoverAnchorDirective} from '../pop/popover-anchor.directive';
+import {HcPopoverAnchorDirective} from '../pop/directives/popover-anchor.directive';
 import {MoreItem} from './more-item';
 import {NavbarLinkComponent} from './navbar-link/navbar-link.component';
 import {NavbarMobileMenuComponent} from './navbar-mobile-menu/navbar-mobile-menu.component';

diff --git a/projects/cashmere/src/lib/navbar/navbar.md b/projects/cashmere/src/lib/navbar/navbar.md
@@ -14,21 +14,43 @@ All Health Catalyst apps should include a help menu in their navbar. This guide
 
 You may not have all these items available. However, include what you have in this order:
 
--   **Help Topics** (if available—reach out to the Content Team for support)
--   **Release Notes** (if applicable, again reach out to the Content Team for support)
--   **About** (a modal containing app reference information - see the [associated style page](https://cashmere.healthcatalyst.net/styles/about) for guidelines)
--   **Health Catalyst Community** (link to community space specific to the app)
--   **Send us your feedback** (see the [User Feedback Guide](https://cashmere.healthcatalyst.net/components/typeform-survey/usage))
+- [fa-book] **Read the docs** (link to the [docs site](https://www.healthcatalyst.com/docs/) or your help docs repository on HCC)
+- [fa-lightbulb] **Request a feature** (link to your feature request page on Health Catalyst Community)
+- [fa-users] **Ask the community** (link to your Q&A page on Health Catalyst Community)
+- [fa-bullhorn] **Find out what's new** (link to your release notes on Health Catalyst Community)
+- [fa-comments] **Send feedback**  (see the [User Feedback Guide](https://cashmere.healthcatalyst.net/components/typeform-survey/examples))
+- [fa-info-circle] **About** see the [associated style page](https://cashmere.healthcatalyst.net/styles/about) for guidelines)
+
 
 ```html
-<hc-pop #helpMenu>
-    <ul class="list-options">
-        <li><a href="" target="_blank">Help Topics</a></li>
-        <li><a href="" target="_blank">Release Notes</a></li>
-        <li><button (click)="aboutClick($event)">About</button></li>
-        <li><a href="https://community.healthcatalyst.com/" target="_blank">Health Catalyst Community</a></li>
-        <li><button (click)="feedbackClick($event)">Send us your feedback</button></li>
-    </ul>
+<hc-pop #helpMenu [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
+    <div hcMenu>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-book"></hc-icon>
+            <span hcMenuText>Read the docs</span>
+        </button>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-lightbulb-o"></hc-icon>
+            <span hcMenuText>Request a feature</span>
+        </button>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-users"></hc-icon>
+            <span hcMenuText>Ask the community</span>
+        </button>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-bullhorn"></hc-icon>
+            <span hcMenuText>Find out what's new</span>
+        </button>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-comments"></hc-icon>
+            <span hcMenuText>Send feedback</span>
+        </button>
+        <div hcMenuItem hcDivider></div>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-info-circle"></hc-icon>
+            <span hcMenuText>About</span>
+        </button>
+    </div>
 </hc-pop>
 ```
 
@@ -48,7 +70,7 @@ In addition to the help menu, all Heath Catalyst applications should also includ
         <hc-app-switcher-links></hc-app-switcher-links>
     </hc-navbar-mobile-menu>
     ...
-    <hc-pop #appSwitcher><hc-app-switcher iconHeight="100"></hc-app-switcher></hc-pop>
+    <hc-pop #appSwitcher><hc-app-switcher iconHeight="50"></hc-app-switcher></hc-pop>
 </hc-navbar>
 ```