Merge pull request #1169 from HealthCatalyst/dev

merge dev -> master
HealthCatalyst · Feb 14, 2020 · 6ab36b7 · 6ab36b7
2 parents a33a7a2 + 9382eec
commit 6ab36b7
Show file tree

Hide file tree

Showing 65 changed files with 1,501 additions and 55 deletions.
diff --git a/projects/cashmere-examples/src/lib/checkbox-align/checkbox-align-example.component.html b/projects/cashmere-examples/src/lib/checkbox-align/checkbox-align-example.component.html
@@ -0,0 +1,16 @@
+<div class="checkbox-example-container">
+    <hc-checkbox>
+        This is a center aligned checkbox (default) with a lot of associated text.
+        The align parameter is used to position the checkbox relative to its label.
+    </hc-checkbox>
+
+    <hc-checkbox align="top">
+        This checkbox is top aligned. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Aenean commodo dolor sed justo ullamcorper mattis.
+    </hc-checkbox>
+
+    <hc-checkbox align="bottom">
+        This checkbox is bottom aligned. Praesent dignissim fermentum auctor.
+        Nulla nibh lectus, dignissim ultrices condimentum et, rutrum eu tortor.
+    </hc-checkbox>
+</div>
diff --git a/projects/cashmere-examples/src/lib/checkbox-align/checkbox-align-example.component.scss b/projects/cashmere-examples/src/lib/checkbox-align/checkbox-align-example.component.scss
@@ -0,0 +1,9 @@
+.checkbox-example-container {
+    display: flex;
+    align-items: center;
+
+    hc-checkbox {
+        flex: 1;
+        margin-right: 15px;
+    }
+}
diff --git a/projects/cashmere-examples/src/lib/checkbox-align/checkbox-align-example.component.ts b/projects/cashmere-examples/src/lib/checkbox-align/checkbox-align-example.component.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Checkbox Alignment
+ */
+@Component({
+    selector: 'hc-checkbox-align-example',
+    templateUrl: 'checkbox-align-example.component.html',
+    styleUrls: ['checkbox-align-example.component.scss']
+})
+export class CheckboxAlignExampleComponent {}
diff --git a/...ects/cashmere-examples/src/lib/checkbox-standard/checkbox-standard-example.component.html b/...ects/cashmere-examples/src/lib/checkbox-standard/checkbox-standard-example.component.html
@@ -1,5 +1,7 @@
-<hc-checkbox id="light">Standard Checkbox</hc-checkbox>
+<hc-checkbox>Standard Checkbox</hc-checkbox>
 
-<hc-checkbox id="disabled" disabled="true">Disabled Checkbox</hc-checkbox>
+<hc-checkbox disabled="true">Disabled Checkbox</hc-checkbox>
 
-<hc-checkbox id="disabled" [checked]="true" disabled="true">Disabled Checkbox (Checked)</hc-checkbox>
+<hc-checkbox [checked]="true" disabled="true">Disabled Checkbox (Checked)</hc-checkbox>
+
+<hc-checkbox tight="true">Tight Checkbox</hc-checkbox>
diff --git a/projects/cashmere-examples/src/lib/form-field-tight/form-field-tight-example.component.html b/projects/cashmere-examples/src/lib/form-field-tight/form-field-tight-example.component.html
@@ -0,0 +1,45 @@
+<p>For forms that need to fit in smaller spaces, the <code>tight</code> parameter may be set to true on
+either the <code>hcForm</code> or individual <code>hc-form-field</code> elements.</p>
+<br>
+<form hcForm tight="true">
+    <div class="form-sample">
+        <hc-form-field>
+            <hc-label>Job Name:</hc-label>
+            <input hcInput required [formControl]="inputControl">
+            <hc-error>A job name is required</hc-error>
+        </hc-form-field>
+    </div>
+
+    <hc-form-field inline="true">
+        <hc-label>Data Source:</hc-label>
+        <hc-radio-group [formControl]="radioControl" inline="true">
+            <hc-radio-button value="SM">Source Mart</hc-radio-button>
+            <hc-radio-button value="SAM">Subject Area Mart</hc-radio-button>
+            <hc-radio-button value="Other">Other</hc-radio-button>
+        </hc-radio-group>
+        <hc-error>Specified data source does not match description</hc-error>
+    </hc-form-field>
+
+    <div class="form-sample">
+        <hc-form-field inline="true">
+            <hc-label>Run Frequency:</hc-label>
+            <hc-select placeholder="Select frequency:" [formControl]="selectControl">
+                <option value="daily">Daily</option>
+                <option value="weekly">Weekly</option>
+                <option value="monthly">Monthly</option>
+            </hc-select>
+            <hc-error>Please select the run frequency for this item</hc-error>
+        </hc-form-field>
+    </div>
+
+    <div class="form-sample flex-column">
+        <hc-form-field>
+            <hc-label>Requested Notifications:</hc-label>
+            <hc-checkbox [formControl]="checkControl">On failure</hc-checkbox>
+            <hc-checkbox [formControl]="checkControl">On sucess</hc-checkbox>
+            <hc-checkbox [formControl]="checkControl">On row-count mismatch</hc-checkbox>
+            <hc-checkbox [formControl]="checkControl">On dependency-wait timeout</hc-checkbox>
+            <hc-error>At least one notification must be selected</hc-error>
+        </hc-form-field>
+    </div>
+</form>
diff --git a/projects/cashmere-examples/src/lib/form-field-tight/form-field-tight-example.component.scss b/projects/cashmere-examples/src/lib/form-field-tight/form-field-tight-example.component.scss
@@ -0,0 +1,8 @@
+.form-sample {
+    max-width: 350px;
+    width: 100%;
+}
+
+.flex-column {
+    flex-direction: column;
+}
diff --git a/projects/cashmere-examples/src/lib/form-field-tight/form-field-tight-example.component.ts b/projects/cashmere-examples/src/lib/form-field-tight/form-field-tight-example.component.ts
@@ -0,0 +1,17 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+
+/**
+ * @title Tight Form Field Elements
+ */
+@Component({
+    selector: 'hc-form-field-tight-example',
+    templateUrl: 'form-field-tight-example.component.html',
+    styleUrls: ['form-field-tight-example.component.scss']
+})
+export class FormFieldTightExampleComponent {
+    selectControl = new FormControl('daily');
+    inputControl = new FormControl('');
+    radioControl = new FormControl('SM');
+    checkControl = new FormControl('');
+}
diff --git a/projects/cashmere-examples/src/lib/input-suffix/input-suffix-example.component.html b/projects/cashmere-examples/src/lib/input-suffix/input-suffix-example.component.html
@@ -1,10 +1,14 @@
-<hc-form-field inline="true">
+<p>These inputs have the <code>tight</code> parameter set to true.</p>
+
+<br>
+
+<hc-form-field inline="true" tight="true">
     <hc-label>Minimum Value:</hc-label>
     <input hcInput placeholder="0-100" class="demo-input">
     <hc-icon hcSuffix fontSet="fa" fontIcon="fa-thermometer-0"></hc-icon>
 </hc-form-field>
 
-<hc-form-field inline="true">
+<hc-form-field inline="true" tight="true">
     <hc-label>Maximum Value:</hc-label>
     <input hcInput placeholder="100-500" class="demo-input">
     <hc-icon hcSuffix fontSet="fa" fontIcon="fa-thermometer-full"></hc-icon>

diff --git a/...ects/cashmere-examples/src/lib/modal-overview/modal-overview-example-modal.component.html b/...ects/cashmere-examples/src/lib/modal-overview/modal-overview-example-modal.component.html
@@ -1,5 +1,9 @@
 <hc-modal>
     <hc-modal-header>Modal Header Title</hc-modal-header>
+    <hc-banner type="warning">
+        <span hcBannerStamp>WARNING</span>
+        You are about to export data which may include Protected Health Information (PHI)
+    </hc-banner>
     <hc-modal-body>Data: {{ activeModal.data }}</hc-modal-body>
     <hc-modal-footer>
         <button hc-button buttonStyle="link" (click)="cancel()">Cancel</button>

diff --git a/...ts/cashmere-examples/src/lib/radio-button-forms/radio-button-forms-example.component.html b/...ts/cashmere-examples/src/lib/radio-button-forms/radio-button-forms-example.component.html
@@ -1,5 +1,5 @@
-<hc-form-field inline="true">
-    <hc-label>Select your favorite:</hc-label>
+<hc-form-field inline="true" tight="true">
+    <hc-label>Radio buttons with tight styling:</hc-label>
     <hc-radio-group [(ngModel)]="favoriteShow" inline="true">
         <hc-radio-button *ngFor="let show of shows" [value]="show">{{show}}</hc-radio-button>
     </hc-radio-group>

diff --git a/...ects/cashmere-examples/src/lib/select-validation/select-validation-example.component.html b/...ects/cashmere-examples/src/lib/select-validation/select-validation-example.component.html
@@ -1,7 +1,7 @@
 <form>
     <div class="select-sample">
-        <hc-form-field>
-            <hc-label>Project Status:</hc-label>
+        <hc-form-field tight="true">
+            <hc-label>Select with Tight Styling:</hc-label>
             <hc-select [formControl]="selectControl" required>
                 <option value="active">Active</option>
                 <option value="inactive">Inactive</option>

diff --git a/projects/cashmere-examples/src/lib/stepper-overview/stepper-overview-example.component.html b/projects/cashmere-examples/src/lib/stepper-overview/stepper-overview-example.component.html
@@ -0,0 +1,32 @@
+<div class="stepper-options">
+    <hc-form-field>
+        <hc-label>Stepper Type:</hc-label>
+        <hc-select [(ngModel)]="currentType">
+            <option *ngFor="let type of typeOptions" [value]="type">{{type}}</option>
+        </hc-select>
+    </hc-form-field>
+
+    <hc-form-field>
+        <hc-label>Stepper Color:</hc-label>
+        <hc-select [(ngModel)]="currentColor">
+            <option *ngFor="let color of colorOptions" [value]="color">{{color}}</option>
+        </hc-select>
+    </hc-form-field>
+
+    <hc-form-field>
+        <hc-label>Step Count (Isolated type only):</hc-label>
+        <hc-checkbox [(ngModel)]="showSteps">Show Step Count</hc-checkbox>
+    </hc-form-field>
+</div>
+
+<hc-stepper
+    [color]="currentColor"
+    [type]="currentType"
+    [showStepCount]="showSteps"
+    [steps]="progressSteps"
+    useRouterOutlet="false"
+    [(activeIndex)]="currentStep"
+    #stepperElement>
+</hc-stepper>
+
+<p>Current Step Index: <strong>{{currentStep}}</strong></p>
diff --git a/projects/cashmere-examples/src/lib/stepper-overview/stepper-overview-example.component.scss b/projects/cashmere-examples/src/lib/stepper-overview/stepper-overview-example.component.scss
@@ -0,0 +1,10 @@
+.stepper-options {
+    display: flex;
+    margin-bottom: 20px;
+
+    hc-form-field {
+        flex: 1;
+        max-width: 250px;
+        margin-right: 25px;
+    }
+}
diff --git a/projects/cashmere-examples/src/lib/stepper-overview/stepper-overview-example.component.ts b/projects/cashmere-examples/src/lib/stepper-overview/stepper-overview-example.component.ts
@@ -0,0 +1,32 @@
+import {Component, OnInit} from '@angular/core';
+import {StepInterface} from '@healthcatalyst/cashmere';
+
+/**
+ * @title Stepper overview
+ */
+@Component({
+    selector: 'hc-stepper-overview-example',
+    templateUrl: 'stepper-overview-example.component.html',
+    styleUrls: ['stepper-overview-example.component.scss']
+})
+export class StepperOverviewExampleComponent implements OnInit {
+    progressSteps: StepInterface[];
+    currentColor: string = 'green';
+    colorOptions: string[] = ['green', 'blue', 'purple', 'orange', 'red'];
+    currentType: string = 'arrow';
+    typeOptions: string[] = ['arrow', 'isolated'];
+    showSteps: boolean  = true;
+    currentStep: number = 2;
+
+    ngOnInit() {
+        // To use with a router, add a `routerLink` to each step
+        this.progressSteps = [
+            {label: 'Winter', iconSet: 'fa', icon: 'fa-check'},
+            {label: 'January', iconSet: 'fa', icon: 'fa-check'},
+            {label: 'Spring'},
+            {label: 'Summer'},
+            {label: 'Fall', iconSet: 'fa', icon: 'fa-lock', disabled: true},
+            {label: 'Year Round', iconSet: 'fa', icon: 'fa-lock', disabled: true}
+        ];
+    }
+}
diff --git a/projects/cashmere-examples/src/lib/table-sort/table-sort-example.component.html b/projects/cashmere-examples/src/lib/table-sort/table-sort-example.component.html
@@ -1,4 +1,6 @@
-<table hc-table [dataSource]="dataSource" hcSort>
+<p>This is an example of a sortable table with <code>tight</code> styling.</p>
+
+<table hc-table [dataSource]="dataSource" tight="true" hcSort>
 
     <!-- Position Column -->
     <ng-container hcColumnDef="position">

diff --git a/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.html b/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.html
@@ -1,5 +1,5 @@
 <div class="tab-demo">
-    <hc-tab-set defaultTab="1">
+    <hc-tab-set defaultTab="1" [tight]="_tight">
         <hc-tab tabTitle="Nested Tabs">
             <hc-tab-set direction="horizontal">
                 <hc-tab tabTitle="Tab 1">
@@ -43,3 +43,5 @@
         </hc-tab>
     </hc-tab-set>
 </div>
+
+<hc-checkbox [(ngModel)]="_tight">Apply Tight Styling to Tabs</hc-checkbox>
diff --git a/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.scss b/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.scss
@@ -4,6 +4,7 @@
 
 .tab-demo {
     border: 1px solid #e0e0e0;
+    margin-bottom: 15px;
 }
 
 .tab-bar-content {

diff --git a/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.ts b/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.ts
@@ -8,4 +8,6 @@ import {Component} from '@angular/core';
     templateUrl: 'tabs-vertical-example.component.html',
     styleUrls: ['tabs-vertical-example.component.scss']
 })
-export class TabsVerticalExampleComponent {}
+export class TabsVerticalExampleComponent {
+    _tight: boolean = false;
+}
diff --git a/projects/cashmere-examples/src/lib/tile-overview/tile-overview-example.component.html b/projects/cashmere-examples/src/lib/tile-overview/tile-overview-example.component.html
@@ -2,3 +2,8 @@
     <h5>Example Tile</h5>
     <p>This paragraph is contained within a <code>hc-tile</code> component.</p>
 </hc-tile>
+
+<hc-tile tight="true">
+    <h5>Tight Tile</h5>
+    <p>This is a tile with <code>tight</code> styling. It has less padding.</p>
+</hc-tile>
diff --git a/projects/cashmere-examples/src/project-template/src/app/cashmere.module.ts b/projects/cashmere-examples/src/project-template/src/app/cashmere.module.ts
@@ -25,6 +25,7 @@ import {
     ScrollNavModule,
     SelectModule,
     SortModule,
+    StepperModule,
     SubnavModule,
     TabsModule,
     TableModule,
@@ -60,6 +61,7 @@ import {
         ScrollNavModule,
         SelectModule,
         SortModule,
+        StepperModule,
         SubnavModule,
         TableModule,
         TabsModule,

diff --git a/projects/cashmere/src/lib/checkbox/checkbox.component.html b/projects/cashmere/src/lib/checkbox/checkbox.component.html
@@ -1,5 +1,5 @@
 <div class="hc-checkbox-container">
-    <div class="hc-checkbox-content">
+    <div class="hc-checkbox-content" [class.hc-checkbox-tight]="tight" [ngClass]="'hc-checkbox-align-'+align">
         <input #checkboxInput
                type="checkbox"
                [id]="_inputId"
@@ -14,7 +14,7 @@
                (click)="_clickEvent($event)"
                (blur)="_onBlur()"/>
         <label class="hc-checkbox-overlay" [attr.for]="_inputId"></label>
-        <label class="hc-checkbox-label" [attr.for]="_inputId">
+        <label class="hc-checkbox-label" [ngClass]="'hc-checkbox-align-label-'+align" [attr.for]="_inputId">
             <ng-content></ng-content>
         </label>
     </div>

diff --git a/projects/cashmere/src/lib/checkbox/checkbox.component.scss b/projects/cashmere/src/lib/checkbox/checkbox.component.scss
@@ -24,13 +24,41 @@
     }
 }
 
+.hc-checkbox-align-center {
+    @include hc-checkbox-align-center();
+}
+
+.hc-checkbox-align-top {
+    @include hc-checkbox-align-top();
+}
+
+.hc-checkbox-align-bottom {
+    @include hc-checkbox-align-bottom();
+}
+
 .hc-checkbox-label {
     @include hc-checkbox-label();
+
+    .hc-checkbox-tight & {
+        @include hc-checkbox-label-tight();
+    }
+}
+
+.hc-checkbox-align-label-top {
+    @include hc-checkbox-align-label-top();
+}
+
+.hc-checkbox-align-label-bottom {
+    @include hc-checkbox-align-label-bottom();
 }
 
 .hc-checkbox-overlay {
     @include hc-checkbox-overlay();
 
+    .hc-checkbox-tight & {
+        @include hc-checkbox-overlay-tight();
+    }
+
     .hc-checkbox-content:hover & {
         @include hc-checkbox-overlay-hover();
     }
@@ -39,6 +67,10 @@
         @include hc-checkbox-overlay-indeterminate();
     }
 
+    .hc-checkbox-indeterminate .hc-checkbox-tight & {
+        @include hc-checkbox-overlay-indeterminate-tight();
+    }
+
     input[type='checkbox']:checked + & {
         @include hc-checkbox-overlay-checked();
     }