feat: separate indicator and header colors in summary card component

Author: arjunlalb

projects/components/src/summay-card/summary-card.component.test.ts

@@ -15,11 +15,12 @@ describe('Summary Card Component', () => {
 
   test('should render card', () => {
     spectator = createHost(
-      `<ht-summary-card [name]="name" [color]="color" [summaries]="summaries"></ht-summary-card>`,
+      `<ht-summary-card [name]="name" [headerColor]="headerColor" [summaries]="summaries" [indicatorColor]="indicatorColor"></ht-summary-card>`,
       {
         hostProps: {
           name: 'I am Card',
-          color: SummaryCardColor.Red,
+          indicatorColor: SummaryCardColor.Red,
+          headerColor: SummaryCardColor.Gray,
           summaries: [
             {
               value: 'Summary #1',
@@ -40,7 +41,7 @@ describe('Summary Card Component', () => {
     expect(spectator.query('.dot')).toHaveClass(SummaryCardColor.Red);
 
     expect(spectator.query('.header')).toContainText('I am Card');
-    expect(spectator.query('.header')).toHaveClass(SummaryCardColor.Red);
+    expect(spectator.query('.header')).toHaveClass(SummaryCardColor.Gray);
 
     const summaries = spectator.queryAll(SummaryValueComponent);
     expect(summaries.length).toEqual(2);

projects/components/src/summay-card/summary-card.component.ts

@@ -8,10 +8,10 @@ import { SummaryCardColor, SummaryValue } from './summary-card';
   template: `
     <div class="card grow" *ngIf="this.name">
       <div class="indicator">
-        <div class="dot" [ngClass]="this.color"></div>
+        <div class="dot" [ngClass]="this.indicatorColor"></div>
       </div>
       <div class="data">
-        <div class="header" [ngClass]="this.color">
+        <div class="header" [ngClass]="this.headerColor">
           {{ this.name }}
         </div>
         <div class="footer">
@@ -33,7 +33,10 @@ export class SummaryCardComponent {
   public name?: string;
 
   @Input()
-  public color?: SummaryCardColor;
+  public indicatorColor?: SummaryCardColor;
+
+  @Input()
+  public headerColor?: SummaryCardColor;
 
   @Input()
   public summaries: SummaryValue[] = [];

projects/components/src/summay-card/summary-card.ts

@@ -3,7 +3,9 @@ export const enum SummaryCardColor {
   Red = 'red',
   Brown = 'brown',
   Gray = 'gray',
-  Purple = 'purple'
+  Purple = 'purple',
+  Orange = 'orange',
+  Yellow = 'yellow'
 }
 
 export interface SummaryValue {