Merge pull request #1614 from HealthCatalyst/dev

Cashmere 10.4.1
HealthCatalyst · May 3, 2021 · 2a1ebc2 · 2a1ebc2
2 parents f16db7d + e4e3caa
commit 2a1ebc2
Show file tree

Hide file tree

Showing 12 changed files with 356 additions and 216 deletions.
diff --git a/...ashmere-examples/src/lib/button-toggle-styles/button-toggle-styles-example.component.html b/...ashmere-examples/src/lib/button-toggle-styles/button-toggle-styles-example.component.html
@@ -0,0 +1,67 @@
+<div class='wrapper'>
+    <div class='examples'>
+        <div>
+            Single Select
+            <hr />
+            <hc-button-toggle-group [buttonStyle]="buttonStyle" [size]="size" valueRequired='true'
+                (selectionChangedEvent)='selectionChangedEvent($event)'>
+                <hc-button-toggle value='One'>One</hc-button-toggle>
+                <hc-button-toggle value='Two' [selected]='true'>Two</hc-button-toggle>
+                <hc-button-toggle value='Icon'>
+                    <hc-icon fontSet='hc-icons' fontIcon='hci-sort-ascend'></hc-icon>
+                </hc-button-toggle>
+            </hc-button-toggle-group>
+            <br>
+            <code>
+                Selected: {{selectedButtonToggleValue}}
+            </code>
+        </div>
+        <div>
+            Multiple Select
+            <hr />
+            <hc-button-toggle-group [buttonStyle]="buttonStyle" multiple='true' [size]="size"
+                (selectionChangedEvent)='multiSelectionChangedEvent($event)'>
+                <hc-button-toggle value='One' [selected]='true'>One</hc-button-toggle>
+                <hc-button-toggle value='Two' [selected]='true'>Two</hc-button-toggle>
+                <hc-button-toggle value='Icon'>
+                    <hc-icon fontSet='hc-icons' fontIcon='hci-sort-ascend'></hc-icon>
+                </hc-button-toggle>
+            </hc-button-toggle-group>
+            <br>
+            <code>
+                Selected: {{multiSelectedButtonToggleValues?.join(", ")}}
+            </code>
+        </div>
+        <div>
+            Disabled
+            <hr />
+            <hc-button-toggle-group [buttonStyle]="buttonStyle" [size]="size" disabled="true">
+                <hc-button-toggle value='One' [selected]='true'>One</hc-button-toggle>
+                <hc-button-toggle value='Two'>Two</hc-button-toggle>
+                <hc-button-toggle value='Three'>Three</hc-button-toggle>
+            </hc-button-toggle-group>
+        </div>
+    </div>
+    <div class='examples'>
+        Common Styles
+        <hr />
+        <div class='styles'>
+            <hc-button-toggle-group buttonStyle='secondary'
+                (selectionChangedEvent)='buttonStyleSelectionChangedEvent($event)'>
+                <hc-button-toggle value='primary'[selected]='true'>Primary</hc-button-toggle>
+                <hc-button-toggle value='secondary'>Secondary</hc-button-toggle>
+                <hc-button-toggle value='primary-alt'>Primary Alt</hc-button-toggle>
+                <hc-button-toggle value='destructive'>Destructive</hc-button-toggle>
+                <hc-button-toggle value='neutral'>Neutral</hc-button-toggle>
+            </hc-button-toggle-group>
+        </div>
+        <div class='sizes'>
+            <hc-button-toggle-group buttonStyle='neutral'
+                (selectionChangedEvent)='sizeSelectionChangedEvent($event)'>
+                <hc-button-toggle value='sm'>Small</hc-button-toggle>
+                <hc-button-toggle value='md' [selected]='true'>Medium</hc-button-toggle>
+                <hc-button-toggle value='lg'>Large</hc-button-toggle>
+            </hc-button-toggle-group>
+        </div>
+    </div>
+</div>
diff --git a/...ashmere-examples/src/lib/button-toggle-styles/button-toggle-styles-example.component.scss b/...ashmere-examples/src/lib/button-toggle-styles/button-toggle-styles-example.component.scss
@@ -0,0 +1,32 @@
+.examples {
+    padding-top: 10px;
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 45%;
+}
+
+.examples div {
+    margin-bottom: 15px;
+}
+
+.wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+hr {
+    margin-bottom: 10px;
+    padding: 0;
+    margin-top: 5px;
+}
+
+code {
+    display: inline-block;
+    margin: 10px 0 25px;
+}
+
+.styles {
+    margin-bottom: 20px;
+}
+
diff --git a/.../cashmere-examples/src/lib/button-toggle-styles/button-toggle-styles-example.component.ts b/.../cashmere-examples/src/lib/button-toggle-styles/button-toggle-styles-example.component.ts
@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { ButtonToggleChangeEvent } from '@healthcatalyst/cashmere';
+
+@Component({
+    selector: 'hc-button-toggle-styles-example',
+    templateUrl: 'button-toggle-styles-example.component.html',
+    styleUrls: ['button-toggle-styles-example.component.scss']
+})
+export class ButtonToggleStylesExampleComponent {
+    public selectedButtonToggleValue: string = '';
+    public multiSelectedButtonToggleValues: string[];
+    public buttonStyle: string = 'secondary';
+    public size: string = 'md';
+
+    public sizeSelectionChangedEvent(event: ButtonToggleChangeEvent): void {
+        this.size = event.selectedValues ? event.selectedValues[0] : '';
+    }
+
+    public selectionChangedEvent(event: ButtonToggleChangeEvent): void {
+        this.selectedButtonToggleValue = event.selectedValues ? event.selectedValues[0] : '';
+    }
+
+    public buttonStyleSelectionChangedEvent(event: ButtonToggleChangeEvent): void {
+        this.buttonStyle = event.selectedValues ? event.selectedValues[0] : '';
+    }
+
+    public multiSelectionChangedEvent(event: ButtonToggleChangeEvent): void {
+        this.multiSelectedButtonToggleValues = event.selectedValues ? event.selectedValues : [];
+    }
+}
+
diff --git a/projects/cashmere-examples/src/lib/button-toggle/button-toggle-example.component.html b/projects/cashmere-examples/src/lib/button-toggle/button-toggle-example.component.html
@@ -1,63 +1,24 @@
-<div class='wrapper'>
-    <div class='examples'>
-        <div>
-            <hc-button-toggle-group [buttonStyle]="buttonStyle" [size]="size" valueRequired='true'
-                (selectionChangedEvent)='selectionChangedEvent($event)'>
-                <hc-button-toggle value='One'>One</hc-button-toggle>
-                <hc-button-toggle value='Two' [selected]='true'>Two</hc-button-toggle>
-                <hc-button-toggle value='Icon'>
-                    <hc-icon fontSet='hc-icons' fontIcon='hci-sort-ascend'></hc-icon>
-                </hc-button-toggle>
-            </hc-button-toggle-group>
-
-            <div class='text'>
-                Single selected value: <em>{{selectedButtonToggleValue}}</em>
-            </div>
-        </div>
-        <div>
-            <hc-button-toggle-group [buttonStyle]="buttonStyle" multiple='true' [size]="size"
-                (selectionChangedEvent)='multiSelectionChangedEvent($event)'>
-                <hc-button-toggle value='One' [selected]='true'>One</hc-button-toggle>
-                <hc-button-toggle value='Two' [selected]='true'>Two</hc-button-toggle>
-                <hc-button-toggle value='Icon'>
-                    <hc-icon fontSet='hc-icons' fontIcon='hci-sort-ascend'></hc-icon>
-                </hc-button-toggle>
-            </hc-button-toggle-group>
-            <div class='text'>
-                Multiple selected values: <span *ngFor="let val of multiSelectedButtonToggleValues"><em>{{val}} </em></span>
-            </div>
-        </div>
-        <div>
-            <hc-button-toggle-group [buttonStyle]="buttonStyle" [size]="size" disabled="true">
-                <hc-button-toggle value='One' [selected]='true'>One</hc-button-toggle>
-                <hc-button-toggle value='Two'>Two</hc-button-toggle>
-                <hc-button-toggle value='Three'>Three</hc-button-toggle>
-            </hc-button-toggle-group>
-            <div class='text'>
-                Disabled button group
-            </div>
-        </div>
-    </div>
-    <div class='examples'>
-        Common Styles
-        <hr />
-        <div class='styles'>
-            <hc-button-toggle-group buttonStyle='secondary'
-                (selectionChangedEvent)='buttonStyleSelectionChangedEvent($event)'>
-                <hc-button-toggle value='primary'[selected]='true'>Primary</hc-button-toggle>
-                <hc-button-toggle value='secondary'>Secondary</hc-button-toggle>
-                <hc-button-toggle value='primary-alt'>Primary Alt</hc-button-toggle>
-                <hc-button-toggle value='destructive'>Destructive</hc-button-toggle>
-                <hc-button-toggle value='neutral'>Neutral</hc-button-toggle>
-            </hc-button-toggle-group>
-        </div>
-        <div class='sizes'>
-            <hc-button-toggle-group buttonStyle='neutral'
-                (selectionChangedEvent)='sizeSelectionChangedEvent($event)'>
-                <hc-button-toggle value='sm'>Small</hc-button-toggle>
-                <hc-button-toggle value='md' [selected]='true'>Medium</hc-button-toggle>
-                <hc-button-toggle value='lg'>Large</hc-button-toggle>
-            </hc-button-toggle-group>
-        </div>
-    </div>
-</div>
+Single Select
+<hr />
+<hc-button-toggle-group [formControl]="isGridView" [valueRequired]="true">
+    <hc-button-toggle [value]="true">Grid</hc-button-toggle>
+    <hc-button-toggle [value]="false">List</hc-button-toggle>
+</hc-button-toggle-group>
+<br>
+<code>
+  isGridView:
+  <em>{{ isGridView.value }}</em>
+</code>
+<br>
+<br>
+Multiple Select
+<hr />
+<hc-button-toggle-group buttonStyle="primary" multiple='true' [formControl]="condiments">
+    <hc-button-toggle value='Ketchup' [selected]='true'>Ketchup</hc-button-toggle>
+    <hc-button-toggle value='Mustard' [selected]='true'>Mustard</hc-button-toggle>
+    <hc-button-toggle value='Mayo'>Mayo</hc-button-toggle>
+</hc-button-toggle-group>
+<br>
+<code>
+    Selected: {{ condiments.value.join(", ") }}
+</code>
diff --git a/projects/cashmere-examples/src/lib/button-toggle/button-toggle-example.component.scss b/projects/cashmere-examples/src/lib/button-toggle/button-toggle-example.component.scss
@@ -1,31 +1,11 @@
-.examples {
-    padding-top: 10px;
-    display: flex;
-    flex-direction: column;
-    width: 49%;
-    color: #999;
-}
-
-.examples div {
-    margin-bottom: 15px;
-}
-
-.wrapper {
-    display: flex;
-    flex-direction: row;
-}
-
 hr {
     margin-bottom: 10px;
     padding: 0;
     margin-top: 5px;
 }
 
-.text {
-    margin-top: 15px;
-}
-
-.styles {
-    margin-bottom: 20px;
+code {
+    display: inline-block;
+    margin: 10px 0 40px;
 }
 
diff --git a/projects/cashmere-examples/src/lib/button-toggle/button-toggle-example.component.ts b/projects/cashmere-examples/src/lib/button-toggle/button-toggle-example.component.ts
@@ -1,32 +1,13 @@
 import { Component } from '@angular/core';
-import { ButtonToggleChangeEvent, ButtonToggleComponent } from '@healthcatalyst/cashmere';
+import { FormControl } from '@angular/forms';
 
 @Component({
     selector: 'hc-button-toggle-example',
     templateUrl: 'button-toggle-example.component.html',
     styleUrls: ['button-toggle-example.component.scss']
 })
 export class ButtonToggleExampleComponent {
-    public selectedButtonToggleValue: string = '';
-    public multiSelectedButtonToggleValues: string[];
-    public multiSelectedButtonToggles: ButtonToggleComponent[];
-    public buttonStyle: string = 'secondary';
-    public size: string = 'md';
-
-    public sizeSelectionChangedEvent(event: ButtonToggleChangeEvent): void {
-        this.size = event.selectedValues ? event.selectedValues[0] : '';
-    }
-
-    public selectionChangedEvent(event: ButtonToggleChangeEvent): void {
-        this.selectedButtonToggleValue = event.selectedValues ? event.selectedValues[0] : '';
-    }
-
-    public buttonStyleSelectionChangedEvent(event: ButtonToggleChangeEvent): void {
-        this.buttonStyle = event.selectedValues ? event.selectedValues[0] : '';
-    }
-
-    public multiSelectionChangedEvent(event: ButtonToggleChangeEvent): void {
-        this.multiSelectedButtonToggleValues = event.selectedValues ? event.selectedValues : [];
-    }
+    readonly isGridView = new FormControl(true);
+    readonly condiments = new FormControl(['Mustard', 'Ketchup']);
 }