Merge pull request #1416 from HealthCatalyst/dev

merge dev -> master

.vscode/settings.json

@@ -2,8 +2,5 @@
     "editor.detectIndentation": false,
     "editor.insertSpaces": true,
     "editor.tabSize": 4,
-    "typescript.tsdk": "node_modules\\typescript\\lib",
-    "cSpell.words": [
-        "Strat"
-    ]
+    "typescript.tsdk": "node_modules\\typescript\\lib"
 }

guides/using-cashmere-bits.md

@@ -0,0 +1,39 @@
+# Using Cashmere Bits
+
+###### Last updated October 12, 2020
+
+:::
+
+##### What is a Cashmere Bit?
+
+The Cashmere project aims to deliver lightweight and bulletproof components for your applications.
+As part of that commitment, components that require additional third-party dependencies are not
+included in the main Cashmere NPM package. Leveraging industry-standard third-party packages, though,
+helps keep our maintenance workload lighter and prevents us from reinventing the wheel. That's where
+Cashmere Bits come in.
+
+Cashmere Bits are independently packaged and installed Cashmere-family components, hosted by
+[bit.dev](https://bit.dev/healthcatalyst/cashmere). Bits are installed and managed through NPM.
+
+:::
+
+:::
+
+##### Setting up Cashmere Bit support in your project
+
+Because Cashmere Bits are published on `bit.dev`, you need to tell NPM how to find that repository.
+In the root of your project (as a sibling to your `package.json` file), create (or add to) an `.npmrc`
+file with the following contents:
+
+```ini
+@bit:registry=https://node.bit.dev
+```
+
+You can then install Cashmere Bits into your project. The package name for each Cashmere Bit is found
+on its documentation page. For example, to install [Change Case Pipe](../bits/change-case-pipe), you
+would run the following command:
+
+```bash
+npm i @bit/healthcatalyst.cashmere.change-case-pipe
+```
+:::

package.json

@@ -15,6 +15,7 @@
     "bit": "bit",
     "start": "npm run dev-mode && ng serve -o",
     "docs": "ts-node scripts/docs.ts && node scripts/generate-usage-docs.js",
+    "search-prep": "ts-node scripts/search-prep.ts",
     "test": "ng test cashmere",
     "test:unit": "ng test cashmere --watch=false --code-coverage --no-progress",
     "lint": "npm run lint:tslint && npm run lint:prettier",
@@ -27,7 +28,7 @@
     "build:user": "ng build user-guide",
     "prebuild:examples": "ts-node scripts/build-examples.ts",
     "build:examples": "ng build cashmere-examples --prod",
-    "build": "npm run release-mode && npm run build:lib && npm run build:bit && npm run build:examples && npm run build:user",
+    "build": "npm run release-mode && npm run build:lib && npm run build:bit && npm run build:examples && npm run search-prep && npm run build:user",
     "postbuild": "npm run copy-assets",
     "precopy-assets": "npm run docs",
     "copy-assets": "node scripts/guide-copy-assets.js",
@@ -61,11 +62,14 @@
     "change-case": "^3.0.2",
     "core-js": "^2.4.1",
     "d3": "^4.13.0",
+    "file-system": "^2.2.2",
     "font-awesome": "^4.7.0",
     "markdown-it": "^8.4.1",
     "markdown-it-container": "^2.0.0",
+    "minisearch": "^2.5.1",
     "ngx-highlightjs": "^3.0.3",
     "npm-font-open-sans": "^1.1.0",
+    "remove-markdown": "^0.3.0",
     "rxjs": "6.5.4",
     "sugar": "^2.0.6",
     "zone.js": "~0.9.1"
@@ -115,6 +119,7 @@
     "karma-jasmine": "1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
     "lint-staged": "^7.1.2",
+    "markdown-it-named-headers": "0.0.4",
     "ng-packagr": "^5.4.0",
     "node-sass": "^4.14.1",
     "node-sass-tilde-importer": "^1.0.2",

projects/cashmere-bits/src/lib/change-case-pipe/change-case-pipe.md

@@ -1,9 +1,13 @@
+##### Overview
+
 The `changeCase` pipe is used to transform the letter casing of the input string to the specified casing.
 
 This pipe is a thin wrapper for the `change-case` NPM package:
 <https://www.npmjs.com/package/change-case>
 
-#### API
+&nbsp;
+
+##### API
 
 ```ts
 transform(value: string, caseFunction: string): string
@@ -13,7 +17,9 @@ transform(value: string, caseFunction: string): string
 
 `caseFunction`: which function (from the `change-case` package) to call to transform the text
 
-### Installing the Pipe
+&nbsp;
+
+##### Installing the Pipe
 
 As the pipe has a dependency on the `change-case` package, it is not included in the main Cashmere NPM package. To
 install this pipe, use the following NPM command:
@@ -30,7 +36,9 @@ Note that you will need to configure the `@bit` scope in your project's `.npmrc`
 @bit:registry=https://node.bit.dev
 ```
 
-#### Importing the Change Case Pipe
+&nbsp;
+
+##### Importing the Change Case Pipe
 
 To use the `ChangeCasePipe`, import the `ChangeCasePipeModule` into your app's `CashmereModule` (which in turn is imported into your app):
 
@@ -44,7 +52,9 @@ import {ChangeCasePipeModule} from '@bit/healthcatalyst.cashmere.change-case-pip
 export class CashmereModule {}
 ```
 
-#### Usage
+&nbsp;
+
+##### Usage
 
 ```html
 {{ 'Sample text' | changeCase : 'pascalCase' }}

projects/cashmere-examples/src/lib/change-case-pipe-overview/change-case-pipe-overview-example.component.html

@@ -1,13 +1,16 @@
 <div>
     <hc-form-field>
-        <hc-label>Input Text</hc-label>
+        <hc-label>Input Text:</hc-label>
         <input hcInput [formControl]="textControl" />
     </hc-form-field>
     <hc-form-field>
-        <hc-label>Input Text</hc-label>
+        <hc-label>Case Transform:</hc-label>
         <hc-select [formControl]="caseControl">
-            <option *ngFor="let option of availableCases" [ngValue]="option">{{ option | changeCase: 'titleCase' }}</option>
+            <option *ngFor="let option of availableCases" [selected]="option === caseControl.value" [ngValue]="option">
+                {{ option | changeCase: 'sentenceCase' }}
+            </option>
         </hc-select>
     </hc-form-field>
-    <pre *ngIf="caseControl.value; let case">{{ textControl.value | changeCase: case }}</pre>
+    <span>Result:</span>
+    <pre *ngIf="caseControl.value">{{ textControl.value | changeCase: caseControl.value }}</pre>
 </div>

projects/cashmere-examples/src/lib/change-case-pipe-overview/change-case-pipe-overview-example.component.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
-import * as changeCase from 'change-case';
 import {FormControl} from '@angular/forms';
+import * as changeCase from 'change-case';
 
 @Component({
     selector: 'hc-change-case-pipe-overview-example',

projects/cashmere-examples/src/lib/chip-basic/chip-basic-example.component.html

@@ -5,6 +5,7 @@
 </hc-chip>
 <hc-chip color="yellow">Warning Chip</hc-chip>
 <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

projects/cashmere-examples/src/lib/navbar-cobrand/navbar-cobrand-example.component.html

@@ -0,0 +1,65 @@
+<hc-navbar appIcon="https://cashmere.healthcatalyst.net/assets/CashmereAppLogo.svg" [brandIcon]="navIcon" [homeUri]="undefined" [fixedTop]="false">
+    <hc-navbar-link [active]="true" uri="undefined" linkText="Dashboard"></hc-navbar-link>
+    <hc-icon class="hc-navbar-icon" tabindex="0" 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" tabindex="0">
+        <span class="hc-text-ellipsis">{{ username }}</span>
+        <hc-icon fontSet="fa" fontIcon="fa-angle-down"></hc-icon>
+    </div>
+    <hc-navbar-cobrand [color]="brandingVal" [src]="brandImg"></hc-navbar-cobrand>
+</hc-navbar>
+
+<br>
+
+<div class="navbar-cobrand-select">
+    <hc-form-field inline>
+        <hc-label>Navbar co-branding style:</hc-label>
+        <hc-select (change)="brandChange($event)" value="light">
+            <option value="light">Light</option>
+            <option value="dark">Dark</option>
+        </hc-select>
+    </hc-form-field>
+</div>
+
+<hc-pop #options [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
+    <div hcMenu>
+        <a hcMenuItem href="http://example.com" target="_blank">
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-book"></hc-icon>
+            <span hcMenuText>Read the docs</span>
+        </a>
+        <a hcMenuItem href="http://example.com" target="_blank">
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-lightbulb-o"></hc-icon>
+            <span hcMenuText>Request a feature</span>
+        </a>
+        <a hcMenuItem href="http://example.com" target="_blank">
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-users"></hc-icon>
+            <span hcMenuText>Ask the community</span>
+        </a>
+        <a hcMenuItem href="http://example.com" target="_blank">
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-bullhorn"></hc-icon>
+            <span hcMenuText>Find out what's new</span>
+        </a>
+        <a hcMenuItem href="http://example.com" target="_blank">
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-bug"></hc-icon>
+            <span hcMenuText>Report an issue</span>
+        </a>
+        <a hcMenuItem href="http://example.com" target="_blank">
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-comments"></hc-icon>
+            <span hcMenuText>Send feedback</span>
+        </a>
+        <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 [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
+    <div hcMenu>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="hc-icons" fontIcon="hci-sign-out"></hc-icon>
+            <span hcMenuText>Log out of this App</span>
+        </button>
+    </div>
+</hc-pop>

projects/cashmere-examples/src/lib/navbar-cobrand/navbar-cobrand-example.component.scss

@@ -0,0 +1,3 @@
+.navbar-cobrand-select {
+    max-width: 350px;
+}