feat(pillbox): New "blue pillbox" UI component (#354)

karma.conf.js

@@ -21,7 +21,7 @@ module.exports = function (config) {
     },
     coverageReporter: {
       type: 'html',
-      dir: '../coverage/',
+      dir: 'coverage/',
       subdir: '.',
       reporters: [{ type: 'html' }, { type: 'text-summary' }, { type: 'lcov' }],
     },

package.json

@@ -7,8 +7,8 @@
     "start": "ng serve",
     "build": "ng-packagr -p ng-package.json && cp -r ./src/assets ./dist/src/assets",
     "build-prod": "ng build",
-    "test": "ng test --code-coverage --watch=false",
-    "test-watch": "ng test --code-coverage --watch=true",
+    "test": "ng test --code-coverage=true --watch=false",
+    "test-watch": "ng test --code-coverage=true --watch=true",
     "lint": "ng lint",
     "e2e": "ng e2e",
     "postinstall": "ngcc",

public_api.ts

@@ -30,6 +30,7 @@ export * from './src/app/modules/table2/table.module';
 export * from './src/app/modules/calendar/calendar.module';
 export * from './src/app/modules/tooltip/tooltip.module';
 export * from './src/app/modules/chip-filter/chip-filter.module';
+export * from './src/app/modules/pillbox/pillbox.module';
 export * from './src/app/modules/twenty-four-hour-time/twenty-four-hour-time.module';
 
 // Services
@@ -84,6 +85,7 @@ export { TableComponent } from './src/app/modules/table2/table.component';
 export { CalendarComponent } from './src/app/modules/calendar/calendar.component';
 export { TooltipComponent } from './src/app/modules/tooltip/tooltip.component';
 export { AppChipFilterComponent } from './src/app/modules/chip-filter/chip-filter.component';
+export { AppPillboxComponent } from './src/app/modules/pillbox/pillbox.component';
 export { AppTwentyFourHourTimeComponent } from './src/app/modules/twenty-four-hour-time/twenty-four-hour-time.component';
 
 // Models
@@ -105,3 +107,4 @@ export * from './src/app/modules/table2/table.models';
 export * from './src/app/modules/chip-filter/chip-filter.model';
 export * from './src/app/modules/panel/panel.models';
 export * from './src/app/modules/button/button.models';
+export * from './src/app/modules/pillbox/pillbox.models';

src/app/app.component.html

@@ -3,15 +3,15 @@
   <!-- UNCOMMENT CODE ON THIS PAGE TO SEE EXAMPLES OF COMPONENTS
 <br>
 <br> -->
-  <!-- 
+  <!--
 <p>ACCORDION COMPONENT EXAMPLE</p>
 <app-accordion>
     <app-panel
-        (panelClick) = "announce($event)"  
-        title ='Accordion Example' 
+        (panelClick) = "announce($event)"
+        title ='Accordion Example'
         extTitleClass = 'customizeExtra'
         dataAutoId = 'dataID'
-        [extTitle] = true 
+        [extTitle] = true
         [expand] = true
         expandedClass = 'ds-u-fill--gray-lightest ds-u-border-top--0 ds-u-border--1 ds-u-border--dark ds-u-padding--2'
         [openAll] = false>
@@ -22,12 +22,12 @@
             Content Structure
         </div>
     </app-panel>
-    <app-panel 
-        (panelClick) = "announce($event)"  
-        title ='Accordion Example' 
+    <app-panel
+        (panelClick) = "announce($event)"
+        title ='Accordion Example'
         extTitleClass = 'customizeExtra'
         dataAutoId = 'dataID'
-        [extTitle] = true  
+        [extTitle] = true
         [expand] = false
         [openAll] = false>
         <span>
@@ -37,13 +37,13 @@
             Content Structure 2
         </div>
     </app-panel>
-    <app-panel 
-        (panelClick) = "announce($event)"  
-        title ='Accordion Example' 
+    <app-panel
+        (panelClick) = "announce($event)"
+        title ='Accordion Example'
         titleClass='ds-u-fill--success'
         extTitleClass = 'customizeExtra'
         dataAutoId = 'dataID'
-        [extTitle] = true  
+        [extTitle] = true
         [expand] = true
         expandedClass = 'ds-u-padding-x--0'
         [openAll] = false>
@@ -67,6 +67,26 @@
         i have added more examples
 </app-alert> -->
 
+<h2>Pillbox</h2>
+<app-pillbox style="display:inline-block" [data]=pillboxData.simplest.first></app-pillbox>
+<app-pillbox style="display:inline-block" [data]=pillboxData.simplestCenteredBold.first></app-pillbox>
+<app-pillbox
+  style="display:inline-block"
+  [data]=pillboxData.twoLabels>
+</app-pillbox>
+<app-pillbox
+  style="display:inline-block"
+  [data]=pillboxData.labelPairs>
+</app-pillbox>
+<app-pillbox
+  style="display:inline-block"
+  [data]=pillboxData.fraction>
+</app-pillbox>
+<app-pillbox
+  style="display:inline-block"
+  [data]=pillboxData.fractionZeros>
+</app-pillbox>
+
 <h2>Panel</h2>
 
 <app-panel
@@ -138,7 +158,7 @@ <h2>Alert</h2>
     [showYAxis] = true
     [showXAxisLabel] = true
     [showYAxisLabel] = true
-    xAxisLabel = 'x label'  
+    xAxisLabel = 'x label'
     yAxisLabel = 'y label'
     [animations] = true
     [roundDomains] = false
@@ -164,7 +184,7 @@ <h2>Alert</h2>
 </app-button> -->
 
   <!-- CARD CLUSTER COMPONENT EXAMPLE
-<app-card-cluster 
+<app-card-cluster
     [cardArray]="cluster"
     buttonClicked='CardCluster1'
     dataAutoId = 'testingID'
@@ -201,7 +221,7 @@ <h2>Alert</h2>
 </app-circle-graph> -->
 
   <!-- DATE-PICKER COMPONENT EXAMPLE
-<app-date-picker 
+<app-date-picker
     label = 'Date Example'
     dataAutoId = 'testingID'>
 </app-date-picker> -->
@@ -232,18 +252,18 @@ <h2>Alert</h2>
 
   <!-- SEARCH_FIELD COMPONENT EXAMPLE
 <div style='width: 460px;'>
-    <app-search-field 
+    <app-search-field
         [reset]='resetSearch'
-        showReset = true 
-        placeHolder='Search' 
-        title='Search Field' 
-        id='tableSearch' 
+        showReset = true
+        placeHolder='Search'
+        title='Search Field'
+        id='tableSearch'
         inputClass='searchInput'
-        labelClass='searchLabel' 
-        hint='Enter a search here' 
-        hintClass='searchHint' 
+        labelClass='searchLabel'
+        hint='Enter a search here'
+        hintClass='searchHint'
         dataAutoId='testingID'
-        (userInput)='announce($event)' 
+        (userInput)='announce($event)'
         (changes)="resetSearch = $event">
     </app-search-field>
 </div>
@@ -278,15 +298,15 @@ <h2>Alert</h2>
 <br/>
 <app-accordion>
     <ng-container *ngFor="let dataObj of dataSet; let i = index">
-        <app-panel *ngIf="dataObj" 
+        <app-panel *ngIf="dataObj"
                     [title]="dataObj.measureGroupName"
                     [openAll]="openAll">
             <span> data data data<br/> data data data</span>
             <div *ngFor="let data of dataObj.measureSets; let in = index">
                 <app-table
                     [starRating]="3"
                     [index]="i + '_' + in"
-                    [headers]="data ? data.tableHeaders: false" 
+                    [headers]="data ? data.tableHeaders: false"
                     [dataRows]="data.tableRows"
                     [searchText]="searchText"
                     [highlightSearch]="true"
@@ -309,11 +329,11 @@ <h2>Alert</h2>
     </ng-container>
 </app-accordion> -->
 
-  <!--     
+  <!--
 TABLE AND PAGINATION
 <br/>
 <app-table
-    [headers]="singleTableData.tableHeaders" 
+    [headers]="singleTableData.tableHeaders"
     [dataRows]="singleTableData.tableRows"
     [paginate]="true"
     [total]="singleTableData.count"

src/app/app.component.ts

@@ -38,6 +38,7 @@ import {
 import { faEllipsisV } from '@fortawesome/free-solid-svg-icons';
 import { TableComponent } from './modules/table2/table.component';
 import { TooltipPlacementEnum, TooltipTriggerTypeEnum } from './modules/tooltip/tooltip.models';
+import { PillboxContent, PillboxContentPair, PillboxFraction } from './modules/pillbox/pillbox.models';
 
 @Component({
   selector: 'app-root',
@@ -132,6 +133,62 @@ export class AppComponent implements OnInit {
 
   @ViewChild('uploader') uploader: FileUploadComponent;
 
+  pillboxData = {
+    simplest: {
+      first: <PillboxContent>{
+        label: 'Single label, no styling or whatever'
+      },
+    },
+    simplestCenteredBold: {
+      first: {
+        label: 'Single label, style override and bold',
+        classes: 'ds-u-font-size--base ds-u-leading--base ds-u-text-align--center',
+        bold: true,
+      },
+    },
+    twoLabels: <PillboxContentPair>{
+      left: {
+        label: 'First label',
+      },
+      right: {
+        label: 'Second label',
+      },
+    },
+    labelPairs: <PillboxContentPair>{
+      left: {
+        top: {
+          label: 'First high',
+          tooltip: 'simple tooltip text',
+        },
+        bottom: {
+          label: 'First low',
+        },
+      },
+      right: {
+        top: {
+          label: 'Second high',
+        },
+        bottom: {
+          label: 'Second low',
+          innerHTML: '<span id="pillbox-innerHTML"><b>innerHTML</b></span>'
+        },
+      },
+    },
+    fraction: <PillboxFraction>{
+      numerator: 95,
+      denominator: 96,
+      rate: 0.95,
+      rateTooltip: 'Higher rates indicate better performance',
+    },
+    fractionZeros: {
+      numerator: 0,
+      denominator: 0,
+      rate: 0,
+      rateTooltip: 'Lower rates indicate better performance',
+      hqrDataTest: 'fractionZeros',
+    },
+  };
+
   popoverModel: PopoverModel = new PopoverModel({
     items: [
       new PopoverItemModel({

src/app/app.module.ts

@@ -45,6 +45,7 @@ import { TooltipModule } from './modules/tooltip/tooltip.module';
 import { CalendarModule } from './modules/calendar/calendar.module';
 import { TwentyFourHourTimeModule } from './modules/twenty-four-hour-time/twenty-four-hour-time.module';
 import { StoriesModule } from '../stories/stories.module';
+import { PillboxModule } from './modules/pillbox/pillbox.module';
 
 @NgModule({
   declarations: [AppComponent, ExampleModalComponent],
@@ -80,15 +81,16 @@ import { StoriesModule } from '../stories/stories.module';
     TicketModule,
     SearchFieldModule,
     TabsModule,
+    CalendarModule,
     FileUploadModule,
     CodeSnippetModule,
     PopoverModule,
     ToastModule,
     Table2Module,
-    CalendarModule,
     TooltipModule,
     TwentyFourHourTimeModule,
     StoriesModule,
+    PillboxModule,
   ],
   providers: [AppService, FilterPipe],
   bootstrap: [AppComponent],

src/app/modules/pillbox/pillbox.component.css

@@ -0,0 +1,65 @@
+.pillbox-background {
+  background-color: #E0F3F8;
+  border-radius: 8px;
+  width: 190px;
+  height: 61px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+}
+
+.pillbox-container-first {
+  flex-shrink: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.pillbox-divider-container {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.pillbox-divider {
+  background-color: #9A9A9A;
+  height: 100%;
+  width: 1px;
+}
+
+.pillbox-container-second {
+  flex-shrink: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.pillbox-column-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+}
+
+.pillbox-column-content {
+  flex-shrink: 1;
+  line-height: 18px;
+}
+
+.pillbox-column-spacer {
+  display: flex;
+  flex-grow: 1;
+  width: 100%;
+}
+
+.pillbox-column-divider {
+  display: flex;
+  flex-grow: 1;
+  background-color: #000000;
+  height: 1px;
+  width: 100%;
+  align-self: center;
+}