From b70e786bd1f192c634a1041068cd966b9744c2f9 Mon Sep 17 00:00:00 2001
From: Kodeaben <114976818+kodeaben@users.noreply.github.com>
Date: Tue, 7 Mar 2023 10:58:26 +0100
Subject: [PATCH] Fix progress circle not showing themecolor (#2927)

---
 .../src/progress-circle-ring.component.ts     |  2 +-
 .../src/progress-circle.component.spec.ts     | 54 +++++++++++++++++++
 .../src/progress-circle.component.ts          |  3 +-
 3 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/libs/designsystem/progress-circle/src/progress-circle-ring.component.ts b/libs/designsystem/progress-circle/src/progress-circle-ring.component.ts
index 9d9b1494ae..a923124d3f 100644
--- a/libs/designsystem/progress-circle/src/progress-circle-ring.component.ts
+++ b/libs/designsystem/progress-circle/src/progress-circle-ring.component.ts
@@ -4,7 +4,7 @@ import { ThemeColorDirective } from '@kirbydesign/designsystem/shared';
 
 @Component({
   standalone: true,
-  imports: [ThemeColorDirective, CommonModule],
+  imports: [CommonModule],
   selector: 'kirby-progress-circle-ring',
   templateUrl: './progress-circle-ring.component.svg',
   styleUrls: ['./progress-circle-ring.component.scss'],
diff --git a/libs/designsystem/progress-circle/src/progress-circle.component.spec.ts b/libs/designsystem/progress-circle/src/progress-circle.component.spec.ts
index 75ba8ec5b2..4a193f6526 100644
--- a/libs/designsystem/progress-circle/src/progress-circle.component.spec.ts
+++ b/libs/designsystem/progress-circle/src/progress-circle.component.spec.ts
@@ -7,6 +7,7 @@ import {
 } from '@ngneat/spectator';
 
 import { TestHelper } from '@kirbydesign/designsystem/testing';
+import { DesignTokenHelper, ThemeColor } from '@kirbydesign/core';
 
 import { ProgressCircleComponent } from './progress-circle.component';
 
@@ -333,4 +334,57 @@ describe('ProgressCircleComponent', () => {
       expect(spectator.component['hasElementBeenVisible']).toBeTrue();
     });
   });
+
+  describe('with themeColor', () => {
+    const getColor = DesignTokenHelper.getColor;
+    let spectator: Spectator<ProgressCircleComponent>;
+
+    const createHost = createComponentFactory({
+      component: ProgressCircleComponent,
+    });
+
+    beforeEach(() => {
+      spectator = createHost({
+        props: { value: 50 },
+      });
+    });
+
+    it('should render progress stroke with themeColor `success`, when themeColor is not set', () => {
+      const themeColor: ThemeColor = 'success';
+
+      expect(spectator.query('circle.progress')).toHaveComputedStyle({
+        stroke: getColor(themeColor),
+      });
+    });
+
+    it('should render progress stroke with themeColor when themeColor is set to `success`', () => {
+      const themeColor: ThemeColor = 'success';
+      spectator.setInput('themeColor', themeColor);
+      spectator.detectChanges();
+
+      expect(spectator.query('circle.progress')).toHaveComputedStyle({
+        stroke: getColor(themeColor),
+      });
+    });
+
+    it('should render progress stroke with themeColor when themeColor is set to `warning`', () => {
+      const themeColor: ThemeColor = 'warning';
+      spectator.setInput('themeColor', themeColor);
+      spectator.detectChanges();
+
+      expect(spectator.query('circle.progress')).toHaveComputedStyle({
+        stroke: getColor(themeColor),
+      });
+    });
+
+    it('should render progress stroke with themeColor when themeColor is set to `danger`', () => {
+      const themeColor: ThemeColor = 'danger';
+      spectator.setInput('themeColor', themeColor);
+      spectator.detectChanges();
+
+      expect(spectator.query('circle.progress')).toHaveComputedStyle({
+        stroke: getColor(themeColor),
+      });
+    });
+  });
 });
diff --git a/libs/designsystem/progress-circle/src/progress-circle.component.ts b/libs/designsystem/progress-circle/src/progress-circle.component.ts
index 906c56bb2b..ca8e245c89 100644
--- a/libs/designsystem/progress-circle/src/progress-circle.component.ts
+++ b/libs/designsystem/progress-circle/src/progress-circle.component.ts
@@ -9,11 +9,12 @@ import {
   Input,
   OnDestroy,
 } from '@angular/core';
+import { ThemeColorDirective } from '@kirbydesign/designsystem/shared';
 import { ProgressCircleRingComponent } from './progress-circle-ring.component';
 
 @Component({
   standalone: true,
-  imports: [ProgressCircleRingComponent, CommonModule],
+  imports: [ProgressCircleRingComponent, CommonModule, ThemeColorDirective],
   selector: 'kirby-progress-circle',
   templateUrl: './progress-circle.component.html',
   styleUrls: ['./progress-circle.component.scss'],