Merge pull request #1108 from HealthCatalyst/dev

Merge dev -> master
HealthCatalyst · Jan 13, 2020 · 1129cdc · 1129cdc
2 parents 2772a2c + dbef085
commit 1129cdc
Show file tree

Hide file tree

Showing 24 changed files with 84 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -34,7 +34,8 @@
         "semantic-release": "semantic-release",
         "prettier": "prettier --write \"**/*.{ts,js,scss,css,md,json}\"",
         "release-mode": "node scripts/release-mode",
-        "dev-mode": "node scripts/dev-mode"
+        "dev-mode": "node scripts/dev-mode",
+        "postinstall": "cd projects/cashmere-examples && npm install"
     },
     "dependencies": {
         "@angular/animations": "6.1.7",

diff --git a/projects/cashmere-examples/package-lock.json b/projects/cashmere-examples/package-lock.json
diff --git a/projects/cashmere-examples/package.json b/projects/cashmere-examples/package.json
@@ -10,5 +10,8 @@
         "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
         "@angular/core": "^6.0.0-rc.0 || ^6.0.0",
         "sugar": "^2.0.6"
+    },
+    "devDependencies": {
+        "@healthcatalyst/cashmere": "^6.5.0"
     }
 }
diff --git a/projects/cashmere-examples/src/lib/date-range/date-range-example.component.scss b/projects/cashmere-examples/src/lib/date-range/date-range-example.component.scss
@@ -1,7 +1,9 @@
+@import "~@healthcatalyst/cashmere/scss/colors";
+
 .preset-selection {
     padding: 10px;
-    border: 1px solid #c0c5cc;
-    background-color: #f0f3f6;
+    border: 1px solid $slate-gray-300;
+    background-color: $slate-gray-100;
     font-size: 14px;
     margin-left: 20px;
     max-width: 250px;

diff --git a/projects/cashmere-examples/src/lib/drawer-basic/drawer-basic-example.component.scss b/projects/cashmere-examples/src/lib/drawer-basic/drawer-basic-example.component.scss
@@ -1,4 +1,6 @@
+@import "~@healthcatalyst/cashmere/scss/colors";
+
 .hc-drawer {
-    background-color: #384655;
-    color: #c0c5cc;
+    background-color: $charcoal-blue;
+    color: $slate-gray-300;
 }
diff --git a/projects/cashmere-examples/src/lib/drawer-menu/drawer-menu-example.component.scss b/projects/cashmere-examples/src/lib/drawer-menu/drawer-menu-example.component.scss
@@ -1,3 +1,5 @@
+@import "~@healthcatalyst/cashmere/scss/colors";
+
 .drawer-content {
     height: 200px; /* used to show menu scrolling effect*/
 }
@@ -7,7 +9,7 @@
 }
 
 .fa-plus {
-    color: #00aeff;
+    color: $blue;
     margin: 0 0 0 auto;
 }
 

diff --git a/projects/cashmere-examples/src/lib/drawer-overlay/drawer-overlay-example.component.scss b/projects/cashmere-examples/src/lib/drawer-overlay/drawer-overlay-example.component.scss
@@ -1,4 +1,6 @@
+@import "~@healthcatalyst/cashmere/scss/colors";
+
 .hc-drawer {
-    background-color: #384655;
-    color: #c0c5cc;
+    background-color: $charcoal-blue;
+    color: $slate-gray-300;
 }
diff --git a/projects/cashmere-examples/src/lib/drawer-side/drawer-side-example.component.scss b/projects/cashmere-examples/src/lib/drawer-side/drawer-side-example.component.scss
@@ -1,4 +1,6 @@
+@import "~@healthcatalyst/cashmere/scss/colors";
+
 .hc-drawer {
-    background-color: #384655;
-    color: #c0c5cc;
+    background-color: $charcoal-blue;
+    color: $slate-gray-300;
 }
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
@@ -9,7 +9,10 @@
     <hc-icon class="hc-navbar-icon" fontSet="fa" fontIcon="fa-question-circle-o" [hcPop]="options"></hc-icon>
     <span class="hc-navbar-vertical-separator"></span>
     <div class="hc-navbar-username" *ngIf="user" [hcPop]="user">
-        <span class="hc-text-ellipsis">{{username}}</span>
+        <span>
+            <span>{{username}}</span><br>
+            <span class="hc-navbar-username-subtext">{{organization}}</span>
+        </span>
         <hc-icon fontSet="fa" fontIcon="fa-angle-down"></hc-icon>
     </div>
 </hc-navbar>

diff --git a/projects/cashmere-examples/src/lib/navbar-overview/navbar-overview-example.component.ts b/projects/cashmere-examples/src/lib/navbar-overview/navbar-overview-example.component.ts
@@ -9,4 +9,5 @@ import {Component} from '@angular/core';
 })
 export class NavbarOverviewExampleComponent {
     username = 'Christine K.';
+    organization = 'Millrock Hospital';
 }
diff --git a/projects/cashmere-examples/src/lib/progress-dots/progress-dots-example.component.scss b/projects/cashmere-examples/src/lib/progress-dots/progress-dots-example.component.scss
@@ -1,3 +1,5 @@
+@import "~@healthcatalyst/cashmere/scss/colors";
+
 .progress-example {
     display: flex;
     margin-top: 20px;
@@ -18,7 +20,7 @@
 }
 
 .progress-component-container.dark-bg {
-    background-color: #384655;
+    background-color: $charcoal-blue;
 }
 
 label,

diff --git a/projects/cashmere-examples/src/lib/progress-spinner/progress-spinner-example.component.scss b/projects/cashmere-examples/src/lib/progress-spinner/progress-spinner-example.component.scss
@@ -1,3 +1,5 @@
+@import "~@healthcatalyst/cashmere/scss/colors";
+
 .progress-example {
     display: flex;
     margin-top: 20px;
@@ -17,7 +19,7 @@
 }
 
 .progress-component-container.dark-bg {
-    background-color: #384655;
+    background-color: $charcoal-blue;
 }
 
 label,

diff --git a/projects/cashmere-examples/src/lib/subnav-overview/subnav-overview-example.component.scss b/projects/cashmere-examples/src/lib/subnav-overview/subnav-overview-example.component.scss
@@ -1,3 +1,5 @@
+@import "~@healthcatalyst/cashmere/scss/colors";
+
 hc-subnav {
     min-width: 625px;
 }
@@ -8,20 +10,20 @@ hc-subnav {
 }
 
 .breadcrumbs a {
-    color: #006d9a;
+    color: $dark-blue;
 }
 
 .breadcrumb-arrow {
     font-size: 10px !important;
     height: 10px !important;
-    color: #708090;
+    color: $slate-gray-400;
     margin-top: 3px;
     padding-left: 5px;
     padding-right: 5px;
 }
 
 .breadcrumb-text {
-    color: #5e676f;
+    color: $slate-gray-500;
 }
 
 .hc-button {

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
@@ -1,3 +1,5 @@
+@import "~@healthcatalyst/cashmere/scss/colors";
+
 .example-column {
     display: inline-block;
     vertical-align: top;
@@ -43,7 +45,7 @@
 
 .custom-toast {
     border-radius: 5px;
-    background-color: #ef4767;
+    background-color: $pink;
     color: white;
     padding: 0 20px;
     height: 180px;

diff --git a/projects/cashmere/src/lib/datepicker/calendar-body/calendar-body.component.scss b/projects/cashmere/src/lib/datepicker/calendar-body/calendar-body.component.scss
@@ -117,7 +117,7 @@ $hc-calendar-weekday-table-font-size: 11px !default;
 }
 
 .hc-calendar-table-header-divider::after {
-    background: #e0e0e0;
+    background: $gray-200;
 }
 
 .hc-calendar-body-label {

diff --git a/projects/cashmere/src/lib/navbar/navbar.component.scss b/projects/cashmere/src/lib/navbar/navbar.component.scss
@@ -35,6 +35,10 @@
         @include hc-navbar-username();
     }
 
+    .hc-navbar-username-subtext {
+        @include hc-navbar-username-subtext();
+    }
+
     .hc-navbar-vertical-separator {
         @include hc-navbar-vertical-separator();
     }

diff --git a/projects/cashmere/src/lib/pop/popover.component.scss b/projects/cashmere/src/lib/pop/popover.component.scss
@@ -69,9 +69,9 @@ $cdk-z-index-overlay: $zindex-cdk-overlay;
     }
 
     &.hc-pop-container-basic {
-        background-color: #fff;
+        background-color: $white;
         border: 1px solid $gray-300;
-        color: #333;
+        color: $offblack;
         padding: 12px;
         box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
         border-radius: 4px;
@@ -88,7 +88,7 @@ $cdk-z-index-overlay: $zindex-cdk-overlay;
             transform: rotate(45deg);
             border-style: solid;
             border-width: 1px;
-            background-color: #fff;
+            background-color: $white;
             position: absolute;
         }
 

diff --git a/projects/cashmere/src/lib/sass/_tooltip.scss b/projects/cashmere/src/lib/sass/_tooltip.scss
@@ -6,7 +6,7 @@
         border-radius: 4px;
         padding: 7px;
         margin: -1px;
-        color: #fff;
+        color: $white;
     }
 
     .hc-tooltip + .hc-pop-arrow {

diff --git a/projects/cashmere/src/lib/sass/accordion.scss b/projects/cashmere/src/lib/sass/accordion.scss
@@ -1,5 +1,3 @@
-$accordion-border: 1px solid #dddddd;
-$accordion-background-color: #f0f0f0;
 $accordion-toolbar-padding: 0 10px;
 $accordion-caret-img: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNi45NzgiIGhlaWdodD0iMTcuMzE5IiB2aWV3Qm94PSIwIDAgMjYuOTc4IDE3LjMxOSI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogIzAwYWVmZjsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBhdGggaWQ9IlBhdGhfNSIgZGF0YS1uYW1lPSJQYXRoIDUiIGNsYXNzPSJjbHMtMSIgZD0iTTI4LjE3NS0xMi4xODhhMS4wODEsMS4wODEsMCwwLDAsMC0xLjUyM0wyNS40LTE2LjQ3M2ExLjA2MSwxLjA2MSwwLDAsMC0xLjUwNywwTDE1LTcuNTg0bC04Ljg5LTguODlhMS4wNjEsMS4wNjEsMCwwLDAtMS41MDcsMEwxLjgyNS0xMy43MTFhMS4wODEsMS4wODEsMCwwLDAsMCwxLjUyM0wxNC4yNDcuMjE4YTEuMDYxLDEuMDYxLDAsMCwwLDEuNTA3LDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMS41MTEgMTYuNzg3KSIvPgo8L3N2Zz4K';
 

diff --git a/projects/cashmere/src/lib/sass/login-page.scss b/projects/cashmere/src/lib/sass/login-page.scss
@@ -36,7 +36,7 @@
         box-shadow: 0 0 13px rgba($black, 0.25);
         border-radius: 5px;
         margin-bottom: 50px;
-        background: #f1f3f6;
+        background: $slate-gray-100;
     }
 
     fieldset {

diff --git a/projects/cashmere/src/lib/sass/menu-drawer.scss b/projects/cashmere/src/lib/sass/menu-drawer.scss
@@ -41,7 +41,7 @@ $drawer-toolbar-height: 52px;
 }
 
 @mixin hc-drawer-item() {
-    color: #ffffff;
+    color: $white;
     display: flex;
     flex-direction: row;
     padding: 15px 0 15px 15px;

diff --git a/projects/cashmere/src/lib/sass/navbar.scss b/projects/cashmere/src/lib/sass/navbar.scss
@@ -158,15 +158,18 @@ $navbar-fixed-shadow: 0px 2px 6px $shadow;
 
 @mixin hc-navbar-username {
     @include navbar-item();
-    padding: 20px 15px 0;
+    padding: 2px 15px 0;
     > hc-icon {
         font-size: 12pt;
+        padding-top: 2px;
     }
-    > span {
-        max-width: 130px;
-    }
-    max-width: 150px;
     display: flex;
+    align-items: center;
+    white-space: nowrap;
+}
+
+@mixin hc-navbar-username-subtext {
+    color: $slate-gray-300;
 }
 
 @mixin hc-navbar-vertical-separator {

diff --git a/src/app/styles/icons/icon-guide.component.scss b/src/app/styles/icons/icon-guide.component.scss
@@ -18,7 +18,7 @@
     hc-icon {
         height: 30px;
         margin-bottom: 10px;
-        color: #333;
+        color: $offblack;
     }
 
     span {

diff --git a/src/app/styles/typography/typography-demo.component.scss b/src/app/styles/typography/typography-demo.component.scss
@@ -1,3 +1,5 @@
+@import 'scss/colors';
+
 .api-table li {
     margin: 15px 0;
 }
@@ -27,19 +29,19 @@ p {
     width: 175px;
     padding: 20px;
     resize: both;
-    border: 1px solid #c0c5cc;
+    border: 1px solid $slate-gray-300;
 }
 
 #logo {
-    background-color: #384655;
+    background-color: $charcoal-blue;
     width: 400px;
     margin-top: 15px;
     padding: 10px 40px;
 }
 
 .list-table {
-    border-top: 1px solid #c0c5cc;
-    border-bottom: 1px solid #c0c5cc;
+    border-top: 1px solid $slate-gray-300;
+    border-bottom: 1px solid $slate-gray-300;
     margin-top: 20px;
     margin-bottom: 20px;
 }