Fix progress circle not showing themecolor (#2927)

kirbydesign · Mar 7, 2023 · b70e786 · b70e786
1 parent ab83d02
commit b70e786
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 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
@@ -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
@@ -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
@@ -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'],