Merge pull request #1506 from HealthCatalyst/dev

Cashmere 10.1.0 (Noto Sans)

README.md

@@ -2,7 +2,7 @@
 [![Coverage Status](https://coveralls.io/repos/github/HealthCatalyst/Fabric.Cashmere/badge.svg?branch=master)](https://coveralls.io/github/HealthCatalyst/Fabric.Cashmere?branch=master)
 ![Cashmere Banner](https://raw.githubusercontent.com/HealthCatalyst/Fabric.Cashmere/master/CashmereBanner.png)
 
-An Angular component library that makes any task feel luxurious.
+Cashmere is Health Catalyst’s comprehensive design system. The Cashmere Angular UI library includes components and styles for Health Catalyst branded web applications.
 
 ## Quick Links
 
@@ -12,19 +12,16 @@ An Angular component library that makes any task feel luxurious.
 -   [Content](http://cashmere.healthcatalyst.net/content)
 -   [Getting Started](http://cashmere.healthcatalyst.net/web/guides/getting-started)
 -   [Guidelines for Contribution](http://cashmere.healthcatalyst.net/web/guides/contribution-guide)
--   [Packaging Library](http://cashmere.healthcatalyst.net/web/guides/packaging-library)
 -   [Submit an Issue](http://cashmere.healthcatalyst.net/web/guides/submit-an-issue)
 -   [Supported Browsers](http://cashmere.healthcatalyst.net/web/guides/supported-browsers)
 
 ## Installing to an Existing Project
 
--   Run `npm i --save @healthcatalyst/cashmere`
+-   Refer to the instructions in our [Getting Started](http://cashmere.healthcatalyst.net/web/guides/getting-started) guide.
 
 ## Running the Demo Application
 
--   Clone the repository `git clone https://github.com/HealthCatalyst/Fabric.Cashmere.git`
--   Run `cd Fabric.Cashmere && npm install && npm start`
--   View the demo application at `http://localhost:4200`
+-   To run the Cashmere demo site locally, refer to the instructions in our [Guidelines for Contribution](http://cashmere.healthcatalyst.net/web/guides/contribution-guide) guide to setup your environment.
 
 ## Sponsors
 

guides/getting-started.md

@@ -20,20 +20,20 @@ npm install --save @angular/cdk@9.2.4
 
 ### C) *(Optional)* Install additional dependencies as needed.
 - [Font Awesome](https://fontawesome.com) - Recommended icon set. *(For healthcare-specific iconography, see step 3.)*
-- [Open Sans](https://fonts.google.com/specimen/Open+Sans) - Recommended font.
+- [Noto Sans](https://fonts.google.com/specimen/Noto+Sans) - Recommended font.
 - [Ng-select](https://github.com/ng-select/ng-select) - Needed only if using the multiselect/typeahead component.
 
-  
+
 
 ```BASH
-npm install --save font-awesome npm-font-open-sans @ng-select/ng-select
+npm install --save font-awesome notosans-fontface @ng-select/ng-select
 ```
 :::
 
 :::
 ## Step 2: Create a Cashmere module.
 
-### A) Create a module to hold the Cashmere components your app needs. 
+### A) Create a module to hold the Cashmere components your app needs.
 This will make for a more organized code base and will help avoid duplicate references throughout your app. Place all the components in the exports field of the `@NgModule` annotation.
 
 ```typescript
@@ -69,7 +69,7 @@ The root Cashmere stylesheet need to be imported in your app's global style shee
 @import "~@healthcatalyst/cashmere/scss/cashmere";
 ```
 
-### B) *(Optional)* Add Font Awesome & Open Sans.
+### B) *(Optional)* Add Font Awesome & Noto Sans.
 In `angular.json`, place references for each font in your project's build target options in the styles array.
 
 ```json
@@ -81,7 +81,7 @@ In `angular.json`, place references for each font in your project's build target
           "options": {
             "styles": [
                 "../node_modules/font-awesome/css/font-awesome.css",
-                "../node_modules/npm-font-open-sans/open-sans.css",
+                "../node_modules/notosans-fontface/css/notosans-fontface-allweight.css",
                 "src/styles.scss"
             ]
           }

package.json

@@ -67,7 +67,7 @@
     "markdown-it": "^8.4.1",
     "markdown-it-container": "^2.0.0",
     "minisearch": "^2.5.1",
-    "npm-font-open-sans": "^1.1.0",
+    "notosans-fontface": "^1.2.2",
     "remove-markdown": "^0.3.0",
     "rxjs": "6.5.4",
     "sugar": "^2.0.6",

projects/cashmere-examples/src/project-template/package.json

@@ -24,7 +24,7 @@
     "rxjs": "^6.5.4",
     "zone.js": "~0.9.1",
     "@healthcatalyst/cashmere": "*",
-    "npm-font-open-sans": "1.1.0",
+    "notosans-fontface": "^1.2.2",
     "@angular/cdk": "^9.2.4",
     "font-awesome": "4.7.0",
     "sugar": "^2.0.6"

projects/cashmere-examples/src/project-template/src/styles.scss

@@ -1,8 +1,8 @@
 $fa-font-path: 'node_modules/font-awesome/fonts';
 @import '~font-awesome/scss/font-awesome';
 
-$FontPathOpenSans: 'node_modules/npm-font-open-sans/fonts';
-@import '~npm-font-open-sans/open-sans';
+$notosans-fontface-path: "node_modules/notosans-fontface/fonts";
+@import "~notosans-fontface/scss/notosans-fontface-allweight";
 
 $hc-icons-font-path: 'node_modules/@healthcatalyst/cashmere/hcicons';
 @import '~@healthcatalyst/cashmere/hcicons/hcicons';
@@ -22,4 +22,4 @@ hc-example-viewer .hc-tab-content-horizontal {
 .pipe-output {
     font-weight: 600px;
     font-size: 22px;
-}
+}

projects/cashmere/README.md

@@ -2,7 +2,7 @@
 [![Coverage Status](https://coveralls.io/repos/github/HealthCatalyst/Fabric.Cashmere/badge.svg?branch=master)](https://coveralls.io/github/HealthCatalyst/Fabric.Cashmere?branch=master)
 ![Cashmere Banner](https://raw.githubusercontent.com/HealthCatalyst/Fabric.Cashmere/master/CashmereBanner.png)
 
-An Angular component library that makes any task feel luxurious.
+Cashmere is Health Catalyst’s comprehensive design system. The Cashmere Angular UI library includes components and styles for Health Catalyst branded web applications.
 
 ## Quick Links
 

projects/cashmere/package.json

@@ -25,7 +25,7 @@
         "@angular/forms": ">= 10.2.1",
         "core-js": ">= 2.4.0 < 3",
         "font-awesome": "~4.7.0",
-        "npm-font-open-sans": "^1.1.0",
+        "notosans-fontface": "^1.2.2",
         "rxjs": ">= 6.5.0",
         "zone.js": ">= 0.10.0"
     }

projects/cashmere/src/lib/sass/_menu.scss

@@ -9,7 +9,7 @@ $cdk-z-index-overlay: $zindex-cdk-overlay;
 
 .hc-menu-panel {
     position: relative;
-    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family: $default-font-family;
     display: flex;
     flex-direction: column;
     padding: 5px 16px;
@@ -30,7 +30,7 @@ $cdk-z-index-overlay: $zindex-cdk-overlay;
 button.hc-menu-item,
 a.hc-menu-item {
     @include fontSize(14px);
-    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family: $default-font-family;
     color: $offblack;
     padding: 6px 16px;
     margin: 0 -16px;

projects/cashmere/src/lib/sass/_variables.scss

@@ -1,6 +1,6 @@
 $default-font-size: 14px !default;
 
-$default-font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
+$default-font-family: 'Noto Sans', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
 
 $grid-breakpoints: (
     xs: 0,

projects/cashmere/src/lib/sass/button.scss

@@ -1,6 +1,7 @@
 @import './colors';
 @import './functions';
 @import './mixins';
+@import './variables';
 
 $btn-icon-sz: 18px;
 
@@ -51,7 +52,7 @@ $btn-icon-sz: 18px;
     background-image: none;
     border: none;
     border-radius: 5px;
-    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family: $default-font-family;
 
     &[disabled] {
         cursor: not-allowed;

projects/cashmere/src/lib/sass/error-pages.scss

@@ -91,7 +91,7 @@
         touch-action: manipulation;
         cursor: pointer;
         border-radius: 5px;
-        font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        font-family: $default-font-family;
         background-color: $green;
         color: $white;
 

projects/cashmere/src/lib/sass/form-field.scss

@@ -1,5 +1,6 @@
 @import './colors';
 @import './functions';
+@import './variables';
 
 $line-height: 1.5;
 $label-font-scale: 1;
@@ -17,7 +18,7 @@ $wrapper-padding-bottom: ($error-margin-top + $line-height) * $error-font-scale;
     position: relative;
     text-align: left;
     font-size: inherit;
-    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family: $default-font-family;
     font-weight: 400;
     line-height: $line-height;
     flex-direction: inherit;

projects/cashmere/src/lib/sass/login-page.scss

@@ -5,7 +5,7 @@
 .hc-login-container {
     // font
     font-size: 16px;
-    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family: $default-font-family;
     font-size: 16px;
 
     // background

projects/cashmere/src/lib/sass/picklist-pane-old.scss

@@ -1,4 +1,5 @@
 @import './colors';
+@import './variables';
 
 @mixin hc-picklist-pane-inner() {
     display: flex;
@@ -26,7 +27,7 @@
 }
 
 @mixin hc-picklist-pane-controls-btn() {
-    font-family: 'Open Sans', sans-serif;
+    font-family: $default-font-family;
     margin-left: 10px;
 }
 

src/app/components/component-viewer/shared/document-viewer/document-viewer.component.scss

@@ -1,6 +1,7 @@
 @import 'scss/colors';
 @import 'scss/functions';
 @import 'scss/mixins';
+@import 'scss/variables';
 
 .hc-doc-viewer {
     display: block;
@@ -106,7 +107,7 @@
     padding-left: 25px;
     padding-top: 0 !important;
     color: $text !important;
-    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
+    font-family: $default-font-family !important;
 }
 
 .docs-api-method-parameter-name {

src/app/foundations/fonts/fonts-demo.component.html

@@ -50,7 +50,12 @@ <h2>Noto Serif</h2>
         </a>
 
         <h2>Noto Sans</h2>
-        <em>Has expanded glyph and non-Latin character sets, and should be used in web, development, and international materials.</em>
+        <em>
+            Has expanded glyph and non-Latin character sets, and should be used in web, development, and international materials.
+            <strong>Note: </strong> the Cashmere library and this site use Noto Sans as their base font.
+            Noto Sans is very similar to Open Sans visually, but supports all international character sets.
+            Additional information about Google's open source Noto font family can be found at their <a href="https://www.google.com/get/noto/" target="_blank">documentation site</a>.
+        </em>
 
         <p>
             <img alt="noto sans typeface" src="./assets/fonts/NotoSans.png" class="glyph-chart">

src/styles.scss

@@ -1,8 +1,8 @@
 $fa-font-path: "../node_modules/font-awesome/fonts";
 @import "../node_modules/font-awesome/scss/font-awesome";
 
-$FontPathOpenSans: "../node_modules/npm-font-open-sans/fonts";
-@import "../node_modules/npm-font-open-sans/open-sans";
+$notosans-fontface-path: "../node_modules/notosans-fontface/fonts";
+@import "../node_modules/notosans-fontface/scss/notosans-fontface-allweight";
 
 $hc-icons-font-path: "../dist/cashmere/hcicons";
 @import "hcicons/hcicons";