Merge pull request #1522 from HealthCatalyst/dev

Cashmere 10.1.6
HealthCatalyst · Feb 12, 2021 · 4e5c9da · 4e5c9da
2 parents 6869ded + 5dd18ac
commit 4e5c9da
Show file tree

Hide file tree

Showing 15 changed files with 384 additions and 105 deletions.
diff --git a/projects/cashmere-examples/src/lib/chip-basic/chip-basic-example.component.html b/projects/cashmere-examples/src/lib/chip-basic/chip-basic-example.component.html
@@ -7,7 +7,11 @@
 <hc-chip color="green">Success Chip</hc-chip>
 <hc-chip color="blue">Info Chip</hc-chip>
 <hc-chip color="yellow">
-    <hc-icon class="example-chip-icon" fontSet="fa" fontIcon="fa-exclamation-triangle" hcIconSm></hc-icon>
-    This is an example of a chip that line wraps. If you have an icon included you can set its margin and
-    vertical alignment relative to the other chip content.
+    <div class="example-chip-banner">
+        <hc-icon class="example-chip-icon" fontSet="fa" fontIcon="fa-exclamation-triangle" hcIconSm></hc-icon>
+        <div>
+            This is an example of a chip that line wraps. If you have an icon included you can set its margin and
+            vertical alignment relative to the other chip content.
+        </div>
+    </div>
 </hc-chip>
diff --git a/projects/cashmere-examples/src/lib/chip-basic/chip-basic-example.component.scss b/projects/cashmere-examples/src/lib/chip-basic/chip-basic-example.component.scss
@@ -1,3 +1,7 @@
-.example-chip-icon {
-    margin-right: 10px;
+.example-chip-banner {
+    display: flex;
+
+    hc-icon {
+        margin-right: 10px;
+    }
 }
diff --git a/projects/cashmere-examples/src/lib/icon-overview/icon-overview-example.component.html b/projects/cashmere-examples/src/lib/icon-overview/icon-overview-example.component.html
@@ -1,3 +1,13 @@
+<hc-chip color="blue">
+    <div class="example-chip-banner">
+        <hc-icon fontSet="fa" fontIcon="fa-exclamation-triangle" hcIconSm></hc-icon>
+        <div>
+            <strong>Note:</strong> this is the Cashmere Angular library's icon component.
+            <a href="/foundations/icons">Click here</a> for information about Health Catalyst's icon font.
+        </div>
+    </div>
+</hc-chip>
+
 <table class="icon-table">
     <tr class="icon-row">
         <td class="icon-column">

diff --git a/projects/cashmere-examples/src/lib/icon-overview/icon-overview-example.component.scss b/projects/cashmere-examples/src/lib/icon-overview/icon-overview-example.component.scss
@@ -1,4 +1,4 @@
-* {
+table * {
     vertical-align: middle;
 }
 
@@ -10,3 +10,11 @@ tr {
     width: 60px;
     text-align: center;
 }
+
+.example-chip-banner {
+    display: flex;
+
+    hc-icon {
+        margin-right: 8px;
+    }
+}
diff --git a/projects/cashmere-examples/src/lib/scroll-nav/scroll-nav-example.component.html b/projects/cashmere-examples/src/lib/scroll-nav/scroll-nav-example.component.html
@@ -1,59 +1,115 @@
 <div class='container'>
-    <hc-scroll-nav #ScrollNav>
-        <ul>
-            <li hcScrollLink='a1'>
-                Care Management Team
-                <ul>
-                    <li hcScrollLink='b1'>
-                        Care Managers
-                        <ul>
-                            <li hcScrollLink='c1'>Donald Duck</li>
-                            <li hcScrollLink='c2'>Goofy</li>
-                        </ul>
-                    </li>
-                    <li hcScrollLink='b2'>Nutritionists</li>
-                </ul>
-            </li>
-            <li hcScrollLink='a2'>Providers</li>
-            <li hcScrollLink='a3'>Active Medications</li>
-            <li hcScrollLink='a4'>Medical History</li>
-            <li hcScrollLink='a5'>Contacts</li>
-        </ul>
-    </hc-scroll-nav>
+    <div class="scroll-nav-container">
+        <hc-scroll-nav #ScrollNav [scrollNavWithContent]="hasScrollNavWithContent">
+            <ul>
+                <li hcScrollLink='a1'>
+                    Care Management Team
+                    <ul>
+                        <li hcScrollLink='b1'>
+                            Care Managers
+                            <ul>
+                                <li hcScrollLink='c1'>Donald Duck</li>
+                                <li hcScrollLink='c2'>Goofy</li>
+                            </ul>
+                        </li>
+                        <li hcScrollLink='b2'>Nutritionists</li>
+                    </ul>
+                </li>
+                <li hcScrollLink='a2'>Providers</li>
+                <li hcScrollLink='a3'>Active Medications</li>
+                <li hcScrollLink='a4'>Medical History</li>
+                <li hcScrollLink='a5'>Contacts</li>
+                <li hcScrollLink='a6'>
+                    Care Management Team
+                    <ul>
+                        <li hcScrollLink='b3'>
+                            Care Managers
+                            <ul>
+                                <li hcScrollLink='c3'>Donald Duck</li>
+                                <li hcScrollLink='c4'>Goofy</li>
+                            </ul>
+                        </li>
+                        <li hcScrollLink='b4'>Nutritionists</li>
+                    </ul>
+                </li>
+                <li hcScrollLink='a7'>Providers</li>
+                <li hcScrollLink='a8'>Active Medications</li>
+                <li hcScrollLink='a9'>Medical History</li>
+                <li hcScrollLink='a10'>Contacts</li>
+            </ul>
+        </hc-scroll-nav>
 
-    <hc-scroll-nav-content [nav]='ScrollNav' [makeLastTargetFullHeight]='true'>
-        <section id='a1' hcScrollTarget>
-            <h1>Care Management Team</h1>
-            <section id='b1' hcScrollTarget>
-                Care Managers
-                <section id='c1' hcScrollTarget>
-                    <p>Donald Duck</p>
+        <hc-scroll-nav-content [nav]='ScrollNav' [makeLastTargetFullHeight]='true' #NavContent>
+            <section id='a1' hcScrollTarget>
+                <h1>Care Management Team</h1>
+                <section id='b1' hcScrollTarget>
+                    Care Managers
+                    <section id='c1' hcScrollTarget>
+                        <p>Donald Duck</p>
+                        <p>{{medicalIpsum}}</p>
+                    </section>
+                    <section id='c2' hcScrollTarget>
+                        <p>Goofy</p>
+                        <p>{{medicalIpsum}}</p>
+                    </section>
+                </section>
+                <section id='b2' hcScrollTarget>
                     <p>{{medicalIpsum}}</p>
                 </section>
-                <section id='c2' hcScrollTarget>
-                    <p>Goofy</p>
+            </section>
+            <section id='a2' hcScrollTarget>
+                <h1>Providers</h1>
+                <p>{{medicalIpsum}}</p>
+            </section>
+            <section id='a3' hcScrollTarget>
+                <h1>Active Medications</h1>
+                <p>{{medicalIpsum}}</p>
+            </section>
+            <section id='a4' hcScrollTarget>
+                <h1>Medical History</h1>
+                <p>{{medicalIpsum}}</p>
+            </section>
+            <section id='a5' hcScrollTarget>
+                <h1>Contacts</h1>
+                <p>{{medicalIpsum}}</p>
+            </section>
+            <section id='a6' hcScrollTarget>
+                <h1>Care Management Team</h1>
+                <section id='b3' hcScrollTarget>
+                    Care Managers
+                    <section id='c3' hcScrollTarget>
+                        <p>Donald Duck</p>
+                        <p>{{medicalIpsum}}</p>
+                    </section>
+                    <section id='c4' hcScrollTarget>
+                        <p>Goofy</p>
+                        <p>{{medicalIpsum}}</p>
+                    </section>
+                </section>
+                <section id='b4' hcScrollTarget>
                     <p>{{medicalIpsum}}</p>
                 </section>
             </section>
-            <section id='b2' hcScrollTarget>
-                <p>{{medicalIpsum}}</p>
-            </section>
-        </section>
-        <section id='a2' hcScrollTarget>
-            <h1>Providers</h1>
-            <p>{{medicalIpsum}}</p>
-        </section>
-        <section id='a3' hcScrollTarget>
-            <h1>Active Medications</h1>
-            <p>{{medicalIpsum}}</p>
-        </section>
-        <section id='a4' hcScrollTarget>
-            <h1>Medical History</h1>
-            <p>{{medicalIpsum}}</p>
-        </section>
-        <section id='a5' hcScrollTarget>
-            <h1>Contacts</h1>
-            <p>{{medicalIpsum}}</p>
-        </section>
-    </hc-scroll-nav-content>
+            <section id='a7' hcScrollTarget>
+                <h1>Providers</h1>
+                <p>{{medicalIpsum}}</p>
+            </section>
+            <section id='a8' hcScrollTarget>
+                <h1>Active Medications</h1>
+                <p>{{medicalIpsum}}</p>
+            </section>
+            <section id='a9' hcScrollTarget>
+                <h1>Medical History</h1>
+                <p>{{medicalIpsum}}</p>
+            </section>
+            <section id='a10' hcScrollTarget>
+                <h1>Contacts</h1>
+                <p>{{medicalIpsum}}</p>
+            </section>
+        </hc-scroll-nav-content>
+    </div>
+
+    <div class="hc-font-bold">
+        <hc-checkbox [(ngModel)]="hasScrollNavWithContent">Enable scrolling on nav link area as content scrolls</hc-checkbox>
+    </div>
 </div>
diff --git a/projects/cashmere-examples/src/lib/scroll-nav/scroll-nav-example.component.scss b/projects/cashmere-examples/src/lib/scroll-nav/scroll-nav-example.component.scss
@@ -1,12 +1,23 @@
 .container {
-    display: flex;
-    height: 400px;
-}
+    display: grid;
+    grid-template-columns: 1fr;
+    row-gap: 30px;;
 
-hc-scroll-nav {
-    flex: 0 0 250px;
-}
+    .scroll-nav-container {
+        display: flex;
+        height: 400px;
+
+        ul {
+            margin: 0;
+        }
+    }
+
+    hc-scroll-nav {
+        flex: 0 0 250px;
+        height: 400px;
+    }
 
-hc-scroll-nav-content {
-    flex: 1 1 auto;
+    hc-scroll-nav-content {
+        flex: 1 1 auto;
+    }
 }
diff --git a/projects/cashmere-examples/src/lib/scroll-nav/scroll-nav-example.component.ts b/projects/cashmere-examples/src/lib/scroll-nav/scroll-nav-example.component.ts
@@ -11,4 +11,5 @@ import {Component} from '@angular/core';
 export class ScrollNavExampleComponent {
     // tslint:disable-next-line:max-line-length
     public medicalIpsum = `Arteries and veins astigmatism astringents bolus cartilage certified diabetes educators (cdes) chemotherapy cochlea cough eardrum fiber gastroenteritis glycemic index gurney hemangioma immunizations islet cells junk food lens melanin nervous system otitis media pinna rheumatologist stapes stat zoonosis. Bruxism eeg (electroencephalogram) enamel eustachian tube genes grieving mucous membrane pimple pupil sphenopalatineganglioneuralgia tobacco tragus tympanogram veins and arteries x-ray. Hydrocortisone inhale insulin pump ophthalmologist lymph larynx. Allergy-triggered asthma zoster virus yawn.`;
+    public hasScrollNavWithContent: boolean = true;
 }
diff --git a/projects/cashmere/src/lib/sass/chip.scss b/projects/cashmere/src/lib/sass/chip.scss
@@ -21,7 +21,6 @@
 }
 
 @mixin hc-chip-content-color() {
-    display: flex;
     padding-top: 7px;
     padding-bottom: 7px;
 }

diff --git a/projects/cashmere/src/lib/sass/scroll-nav.scss b/projects/cashmere/src/lib/sass/scroll-nav.scss
@@ -1,9 +1,15 @@
 @import './colors';
 @import './mixins';
 
+@mixin hc-scroll-nav() {
+    position: relative;
+}
+
 @mixin hc-scroll-nav-links-container() {
     margin-right: 30px;
     overflow-y: auto;
+    position: relative;
+    scroll-behavior: smooth;
     height: 100%;
 }
 

diff --git a/projects/cashmere/src/lib/scroll-nav/content/scroll-nav-content.component.spec.ts b/projects/cashmere/src/lib/scroll-nav/content/scroll-nav-content.component.spec.ts
@@ -263,5 +263,20 @@ describe('HcScrollNavContentComponent', () => {
             const expectedError = new Error('hcScrollTarget element needs an id.');
             expect(error).toEqual(expectedError);
         });
+
+        it('should set minHeight on last target', () => {
+            testApp.contentComponent._scrollTargets.forEach((target) => {
+                target.style.minHeight = 'unset';
+            });
+
+            // set min height on second to last target
+            testApp.contentComponent._scrollTargets[testApp.contentComponent._scrollTargets.length - 2].style.minHeight = '200px';
+
+            testApp.detectChanges();
+            testApp.contentComponent.refreshScrollNavTargets();
+
+            expect(testApp.contentComponent._scrollTargets[testApp.contentComponent._scrollTargets.length - 2].style.minHeight).toEqual('unset');
+            expect(testApp.contentComponent._scrollTargets[testApp.contentComponent._scrollTargets.length - 1].style.minHeight).not.toEqual('unset');
+        });
     });
 });
diff --git a/projects/cashmere/src/lib/scroll-nav/content/scroll-nav-content.component.ts b/projects/cashmere/src/lib/scroll-nav/content/scroll-nav-content.component.ts
@@ -36,6 +36,8 @@ export class HcScrollNavContentComponent implements AfterViewInit, AfterViewChec
      * This is helpful if you want the last target in the content area to be able to scroll to the top. You can alternatively
      * target the last item with css. *Defaults to true.* */
     @Input() public makeLastTargetFullHeight = true;
+    /** Adjust the min height of the last target */
+    @Input() public lastTargetMinHeightAdjustment: number = 0;
     /** Number in pixels, used to give a little leeway in the shifting of the active nav when scrolling. *Defaults to 0.*
      * Example: If set to 40, if showing just the bottom 40 pixels of the section before, count the next section as active. */
     @Input() public bufferSpace = this.DEFAULT_BUFFER;
@@ -53,6 +55,8 @@ export class HcScrollNavContentComponent implements AfterViewInit, AfterViewChec
 
     private unsubscribe$ = new Subject<void>();
     private minHeightForLastTargetSet = false;
+    private systemScrollToElementId: string | undefined;
+    private lastElementScrolledTo: HTMLElement;
 
     private readonly SCROLL_TARGET_ATTRIBUTE = 'hcScrollTarget';
 
@@ -72,6 +76,14 @@ export class HcScrollNavContentComponent implements AfterViewInit, AfterViewChec
         this.targets.changes.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
             this.refreshScrollNavTargets();
         });
+
+        document.onclick = (event: MouseEvent) => {
+            let element: HTMLElement = (event.target as HTMLElement);
+            let scrollLinkAttribute: string | null = element.getAttribute("hcscrolllink");
+            if (scrollLinkAttribute) {
+                this.systemScrollToElementId = scrollLinkAttribute;
+            }
+        };
     }
 
     public ngAfterViewChecked(): void {
@@ -120,6 +132,15 @@ export class HcScrollNavContentComponent implements AfterViewInit, AfterViewChec
                 .elementScrolled()
                 .pipe(takeUntil(this.unsubscribe$))
                 .subscribe(() => {
+                    if (this.systemScrollToElementId) {
+                        this.nav.isScrolling = true;
+
+                        setTimeout(() => {
+                            this.nav.isScrolling = false;
+                            this.setActiveSection(this.lastElementScrolledTo.id);
+                        }, 1000);
+                    }
+
                     this.checkActiveSection();
                 });
         }
@@ -129,6 +150,8 @@ export class HcScrollNavContentComponent implements AfterViewInit, AfterViewChec
                 throw Error('hcScrollTarget element needs an id.');
             }
         });
+
+        this.insureMinHeightForLastTarget();
     }
 
     /** Scroll to top and reset the 'automatic full height for the last item' setting. */
@@ -164,7 +187,9 @@ export class HcScrollNavContentComponent implements AfterViewInit, AfterViewChec
                 (initialOffset && !nextOffset && offset >= initialOffset) ||
                 (!initialOffset && nextOffset && offset < nextOffset)
             ) {
+                this.lastElementScrolledTo = el;
                 this.setActiveSection(el.getAttribute('id') || '');
+
             }
         });
     }
@@ -195,11 +220,17 @@ export class HcScrollNavContentComponent implements AfterViewInit, AfterViewChec
     }
 
     private insureMinHeightForLastTarget() {
-        const containerHeight = this._cdkScrollableElement.getElementRef().nativeElement.offsetHeight;
-        if (containerHeight && this._scrollTargets.length > 0) {
-            const targetEl = this._scrollTargets[this._scrollTargets.length - 1];
-            targetEl.style.minHeight = `${containerHeight + 50}px`;
-            this.minHeightForLastTargetSet = true;
+        if (this.makeLastTargetFullHeight) {
+            const containerHeight: number = this._cdkScrollableElement.getElementRef().nativeElement.offsetHeight;
+            if (containerHeight && this._scrollTargets.length > 0) {
+                this._scrollTargets.forEach((target) => {
+                    target.style.minHeight = 'unset';
+                });
+
+                const targetEl = this._scrollTargets[this._scrollTargets.length - 1];
+                targetEl.style.minHeight = `${containerHeight + this.lastTargetMinHeightAdjustment}px`;
+                this.minHeightForLastTargetSet = true;
+            }
         }
     }
 }