feat(info icon): styles and guidance for help text

re #2132
HealthCatalyst · Jun 12, 2024 · 155f036 · 155f036
1 parent 113efe1
commit 155f036
Show file tree

Hide file tree

Showing 6 changed files with 151 additions and 0 deletions.
diff --git a/projects/cashmere/src/lib/sass/_icons.scss b/projects/cashmere/src/lib/sass/_icons.scss
@@ -1,3 +1,6 @@
+@import './colors';
+@import './mixins';
+
 $ico-chev-right: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48IS0tIEZvbnQgQXdlc29tZSBGcmVlIDUuMTUuMyBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIChJY29uczogQ0MgQlkgNC4wLCBGb250czogU0lMIE9GTCAxLjEsIENvZGU6IE1JVCBMaWNlbnNlKSAtLT48cGF0aCBkPSJNMjg1LjQ3NiAyNzIuOTcxTDkxLjEzMiA0NjcuMzE0Yy05LjM3MyA5LjM3My0yNC41NjkgOS4zNzMtMzMuOTQxIDBsLTIyLjY2Ny0yMi42NjdjLTkuMzU3LTkuMzU3LTkuMzc1LTI0LjUyMi0uMDQtMzMuOTAxTDE4OC41MDUgMjU2IDM0LjQ4NCAxMDEuMjU1Yy05LjMzNS05LjM3OS05LjMxNy0yNC41NDQuMDQtMzMuOTAxbDIyLjY2Ny0yMi42NjdjOS4zNzMtOS4zNzMgMjQuNTY5LTkuMzczIDMzLjk0MSAwTDI4NS40NzUgMjM5LjAzYzkuMzczIDkuMzcyIDkuMzczIDI0LjU2OC4wMDEgMzMuOTQxeiIvPjwvc3ZnPg==';
 $ico-chev-right-blue: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5LjA2MyIgaGVpZ2h0PSIxNS4wMDkiIHZpZXdCb3g9IjAgMCA5LjA2MyAxNS4wMDkiPgogIDxwYXRoIGlkPSJjaGV2LWJvbGQiIGQ9Ik0xNy4yMTksMzIuNTA3bC0yLjE1OC0yLjE1OEwxMS40MTcsMjYuN2wxLjkxOC0xLjkxOCwyLjc4MS0yLjc4MWgwbDEuMS0xLjFhLjQ2My40NjMsMCwwLDAsMC0uNjcxbC0uODg3LS44ODdhLjQ2My40NjMsMCwwLDAtLjY3MSwwbC0xLjEsMS4xaDBMOC4zLDI2LjdoMGwuMzM2LjM2LDcuMDI1LDdhLjQ2My40NjMsMCwwLDAsLjY3MSwwbC44ODctLjg4N0EuNDY0LjQ2NCwwLDAsMCwxNy4yMTksMzIuNTA3WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTcuMzYzIDM0LjIwOSkgcm90YXRlKDE4MCkiIGZpbGw9IiMwMGFlZmYiLz4KPC9zdmc+Cg==';
 $ico-chev-left: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48IS0tIEZvbnQgQXdlc29tZSBGcmVlIDUuMTUuMyBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIChJY29uczogQ0MgQlkgNC4wLCBGb250czogU0lMIE9GTCAxLjEsIENvZGU6IE1JVCBMaWNlbnNlKSAtLT48cGF0aCBkPSJNMzQuNTIgMjM5LjAzTDIyOC44NyA0NC42OWM5LjM3LTkuMzcgMjQuNTctOS4zNyAzMy45NCAwbDIyLjY3IDIyLjY3YzkuMzYgOS4zNiA5LjM3IDI0LjUyLjA0IDMzLjlMMTMxLjQ5IDI1NmwxNTQuMDIgMTU0Ljc1YzkuMzQgOS4zOCA5LjMyIDI0LjU0LS4wNCAzMy45bC0yMi42NyAyMi42N2MtOS4zNyA5LjM3LTI0LjU3IDkuMzctMzMuOTQgMEwzNC41MiAyNzIuOTdjLTkuMzctOS4zNy05LjM3LTI0LjU3IDAtMzMuOTR6Ii8+PC9zdmc+';
@@ -50,3 +53,12 @@ $ico-cog-blue: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcm
 .hc-icon-right {
     margin-left: 5px;
 }
+
+.hc-info-ico {
+    @include fontSize(16px);
+    color: $gray-300;
+    cursor: pointer;
+    &:hover {
+        color: $gray-400;
+    }
+}
diff --git a/src/app/styles/info-icons/info-icons-demo.component.html b/src/app/styles/info-icons/info-icons-demo.component.html
@@ -0,0 +1,91 @@
+<div class="demo-content">
+    <h1>Info Icons & Help Text</h1>
+    <h6>Last updated Jun 12, 2024</h6>
+
+    <hc-tile>
+        <h5 id="intro">Why Info Icons?<span class="hc-icon-right hc-info-ico fa fa-info-circle" hcTooltip="To give extra context!"></span></h5>
+        <p>Information icons provide in-context UI help. They're ideal for cases where the supplmental info is A) not critical, or B) verbose enough that it would clutter the UI if displayed all the time.</p>
+
+        <p>Use them generously in form controls, in tables, or in any other place where the user may benefit from some additional context.</p>
+
+        <h4>To use Cashmere styled info icons:</h4>
+        <ol>
+            <li>Add the <code>.hc-info-ico</code> class to a <code>span</code> or <code>hc-icon</code> with an appropriate icon.</li>
+            <li>Use <code>[hcTooltip]</code> or <code>[hcPop]</code>, or trigger a modal to deliver the helpful info.</li>
+        </ol>
+
+        <br><br>
+        <div id="tooltipExample"></div>
+    </hc-tile>
+
+    <hc-tile>
+        <h5 id="intro">Use with HcTooltip</h5>
+        <hc-form-field>
+            <hc-form-field>
+                <hc-label>Name <span class="hc-icon-right hc-info-ico fa fa-info-circle" hcTooltip="Some helpful context"></span></hc-label>
+                <input hcInput placeholder="Enter name"/>
+            </hc-form-field>
+        </hc-form-field>
+
+        <pre><code>
+&lt;hc-form-field&gt;
+    &lt;hc-form-field&gt;
+        &lt;hc-label&gt;
+            Name
+            &lt;span class=&quot;hc-icon-left hc-info-ico fa fa-info-circle&quot;
+                hcTooltip=&quot;Some helpful context&quot;&gt;
+            &lt;/span&gt;&lt;/hc-label&gt;
+        &lt;input hcInput placeholder=&quot;Enter name&quot;/&gt;
+    &lt;/hc-form-field&gt;
+&lt;/hc-form-field&gt;
+        </code></pre>
+    </hc-tile>
+
+    <hc-tile>
+        <h5 id="intro">Use with HcPop</h5>
+        <hc-tile>
+            <strong>Sepsis Dashboard<span class="hc-icon-right hc-info-ico fa fa-info-circle" [hcPop]="helpPop"></span></strong>
+        </hc-tile>
+        <hc-pop #helpPop>
+            <strong>Helpful Context</strong>
+            <p>Some <strong>helpful context</strong> that the user might need to know.</p>
+            <button hc-button>Thanks for the help!</button>
+        </hc-pop>
+
+        <pre><code>
+&lt;hc-form-field&gt;
+    &lt;hc-form-field&gt;
+        &lt;hc-label&gt;
+            Name
+            &lt;span class=&quot;hc-icon-left hc-info-ico fa fa-info-circle&quot;
+                hcPop=&quot;helpPop&quot;&gt;
+            &lt;/span&gt;&lt;/hc-label&gt;
+        &lt;input hcInput placeholder=&quot;Enter name&quot;/&gt;
+    &lt;/hc-form-field&gt;
+&lt;/hc-form-field&gt;
+
+&lt;hc-pop #helpPop&gt;
+    &lt;strong&gt;Helpful Context&lt;/strong&gt;
+    &lt;p&gt;Some &lt;strong&gt;helpful context&lt;/strong&gt; that the user might need to know.&lt;/p&gt;
+    &lt;button hc-button&gt;Thanks for the help!&lt;/button&gt;
+&lt;/hc-pop&gt;
+        </code></pre>
+    </hc-tile>
+
+    <hc-tile>
+        <h5 id="intro">Other Options for Help Text</h5>
+        <h3>HTML <code>title</code> attributes:</h3>
+        <p>Use these for less intrusive hover tooltips. They're great for quick,
+            one-line explanations &mdash; "hover to discover" style. If the user hesitates on a button you can explain to them in another
+            way the ramifications of clicking that button. You should almost always include these on clickable elements by default
+            if you're not already using an <code>hcTooltip</code>.
+        </p>
+        <div id="titleAttributeExample"></div>
+
+        <h3>On-Screen Help</h3>
+        <p>For cases where the guidance is critical for success, and isn't easily learnable in any other way,
+            it's good to just include the helpful instructions there in place. Be sure to keep it as quick and concise as possible.
+        </p>
+        <div id="inContextHelp"></div>
+    </hc-tile>
+</div>
diff --git a/src/app/styles/info-icons/info-icons-demo.component.scss b/src/app/styles/info-icons/info-icons-demo.component.scss
diff --git a/src/app/styles/info-icons/info-icons-demo.component.ts b/src/app/styles/info-icons/info-icons-demo.component.ts
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {SectionService} from 'src/app/shared/section.service';
+import {BaseDemoComponent} from '../../shared/base-demo.component';
+
+@Component({
+    selector: 'hc-info-icons-demo',
+    templateUrl: './info-icons-demo.component.html',
+    styleUrls: ['./info-icons-demo.component.scss']
+})
+export class InfoIconsDemoComponent extends BaseDemoComponent {
+    constructor(sectionService: SectionService) {
+        super(sectionService);
+    }
+}
diff --git a/src/app/styles/styles-routes.module.ts b/src/app/styles/styles-routes.module.ts
@@ -6,6 +6,7 @@ import {TableDemoComponent} from './table/table-demo.component';
 import {MarkdownContentComponent} from '../shared/markdown-content.component';
 import {IESupportComponent} from './ie-support/ie-support.component';
 import {ChartDemoComponent} from './chart/chart-demo.component';
+import { InfoIconsDemoComponent } from './info-icons/info-icons-demo.component';
 
 const routes: Routes = [
     {
@@ -81,6 +82,11 @@ const routes: Routes = [
                     document: require('../../../guides/styles/file-icons.md')
                 }
             },
+            {
+                path: 'info-icons',
+                component: InfoIconsDemoComponent,
+                data: { title: 'Info Icons & Help Text', category: 'User Interface' }
+            },
             {
                 path: 'table',
                 component: TableDemoComponent,

diff --git a/src/app/styles/styles.module.ts b/src/app/styles/styles.module.ts
@@ -7,6 +7,7 @@ import {AboutModalComponent} from './about/about-modal.component';
 import {TableDemoComponent} from './table/table-demo.component';
 import {IESupportComponent} from './ie-support/ie-support.component';
 import {ChartDemoComponent} from '../styles/chart/chart-demo.component';
+import { InfoIconsDemoComponent } from './info-icons/info-icons-demo.component';
 
 @NgModule({
     imports: [SharedModule, StylesRoutesModule],
@@ -15,6 +16,7 @@ import {ChartDemoComponent} from '../styles/chart/chart-demo.component';
         StylesComponent,
         AboutModalComponent,
         TableDemoComponent,
+        InfoIconsDemoComponent,
         IESupportComponent,
         ChartDemoComponent
     ]