refactor(admin-ui): Move color states into ChipComponent

admin-ui/src/app/shared/components/chip/chip.component.html

@@ -1,4 +1,9 @@
-<div class="wrapper" [class.with-background]="colorFrom" [vdrBackgroundColorFrom]="colorFrom">
+<div
+    class="wrapper"
+    [class.with-background]="colorFrom"
+    [vdrBackgroundColorFrom]="colorFrom"
+    [ngClass]="colorType"
+>
     <div class="chip-label"><ng-content></ng-content></div>
     <div class="chip-icon" *ngIf="icon">
         <button (click)="iconClick.emit($event)">

admin-ui/src/app/shared/components/chip/chip.component.scss

@@ -13,6 +13,31 @@
         color: transparentize($color-grey-100, 0.2);
         border-color: transparent;
     }
+
+    &.warning {
+        border-color: $color-warning-200;
+        .chip-label {
+            color: $color-warning-600;
+            background-color: $color-warning-100;
+        }
+    }
+
+    &.success {
+        border-color: $color-success-200;
+        .chip-label {
+            color: $color-success-600;
+            background-color: $color-success-100;
+        }
+    }
+
+    &.error {
+        border-color: $color-error-200;
+        .chip-label {
+            color: $color-error-600;
+            background-color: $color-error-100;
+        }
+    }
+
 }
 
 .chip-label {

admin-ui/src/app/shared/components/chip/chip.component.ts

@@ -16,5 +16,6 @@ export class ChipComponent {
      * color based on the string value passed in.
      */
     @Input() colorFrom = '';
+    @Input() colorType: 'error' | 'success' | 'warning';
     @Output() iconClick = new EventEmitter<MouseEvent>();
 }

admin-ui/src/app/shared/components/order-state-label/order-state-label.component.html

@@ -1,4 +1,4 @@
-<vdr-chip [ngClass]="state">
+<vdr-chip [ngClass]="state" [colorType]="chipColorType">
     <clr-icon shape="check-circle" *ngIf="state === 'Fulfilled'"></clr-icon>
     <clr-icon shape="check-circle" *ngIf="state === 'PartiallyFulfilled'"></clr-icon>
     {{ stateToken | translate }}

admin-ui/src/app/shared/components/order-state-label/order-state-label.component.scss

@@ -1,33 +1 @@
 @import "variables";
-
-:host {
-    ::ng-deep vdr-chip {
-        &.PaymentAuthorized, &.PaymentSettled, &.PartiallyFulfilled {
-            .wrapper {
-                border-color: $color-warning-200;
-            }
-            .chip-label {
-                color: $color-warning-600;
-                background-color: $color-warning-100;
-            }
-        }
-        &.Fulfilled {
-            .wrapper {
-                border-color: $color-success-200;
-            }
-            .chip-label {
-                color: $color-success-600;
-                background-color: $color-success-100;
-            }
-        }
-        &.Cancelled {
-            .wrapper {
-                border-color: $color-error-200;
-            }
-            .chip-label {
-                color: $color-error-600;
-                background-color: $color-error-100;
-            }
-        }
-    }
-}

admin-ui/src/app/shared/components/order-state-label/order-state-label.component.ts

@@ -22,4 +22,17 @@ export class OrderStateLabelComponent {
     get stateToken(): string {
         return this.stateI18nTokens[this.state as any] || this.state;
     }
+
+    get chipColorType() {
+        switch (this.state) {
+            case 'PaymentAuthorized':
+            case 'PaymentSettled':
+            case 'PartiallyFulfilled':
+                return 'warning';
+            case 'Fulfilled':
+                return 'success';
+            case 'Cancelled':
+                return 'error';
+        }
+    }
 }