Merge pull request #3124 from codecrafters-io/arpan/cc-1937-replace-course-track-progress-bars-with-donuts-animation

Refactor progress bar to use SVG donut for visual representation of p…

Author: Arpan-206

app/components/course-card/progress-bar.hbs

@@ -1,19 +1,6 @@
-<div class="flex items-center" data-test-course-progress ...attributes>
-  <div class="rounded-sm overflow-hidden mr-2">
-    <div
-      class="{{if @lastUsedRepository.allStagesAreComplete 'bg-teal-100 dark:bg-teal-900' 'bg-blue-100 dark:bg-blue-900'}}
-        h-3 w-16 flex items-stretch"
-    >
-      {{#if (eq @lastUsedRepository.completedStages.length 0)}}
-        <div class="bg-blue-500 w-1/12"></div>
-      {{else}}
-        <div
-          data-test-course-progress-bar
-          class={{if @lastUsedRepository.allStagesAreComplete "bg-teal-500" "bg-blue-500"}}
-          style={{html-safe (concat "width:" (round (mult 100 (div @lastUsedRepository.completedStages.length @course.stages.length))) "%")}}
-        ></div>
-      {{/if}}
-    </div>
+<div class="flex items-center gap-1.5" data-test-course-progress ...attributes>
+  <div class="w-5 h-5">
+    <ProgressDonut @total={{@course.stages.length}} @completed={{or @lastUsedRepository.completedStages.length 0}} data-test-course-progress-donut />
   </div>
 
   <div class="text-xs {{if @lastUsedRepository.allStagesAreComplete 'text-teal-500' 'text-blue-500'}} mr-3" data-test-course-progress-text>

app/components/progress-donut.hbs

@@ -0,0 +1,22 @@
+<svg viewBox="0 0 24 24" class="w-full h-full transform -rotate-90">
+  {{! Base circle (background) }}
+  <circle
+    cx="12"
+    cy="12"
+    r="9"
+    fill="none"
+    stroke-width="5"
+    class="{{if this.isComplete 'stroke-teal-100 dark:stroke-teal-900' 'stroke-blue-100 dark:stroke-blue-900'}}"
+  />
+  {{! Progress circle }}
+  <circle
+    cx="12"
+    cy="12"
+    r="9"
+    fill="none"
+    stroke-width="5"
+    class="progress-donut-circle {{if this.isComplete 'stroke-teal-500' 'stroke-blue-500'}}"
+    style={{this.progressStyle}}
+    ...attributes
+  />
+</svg>

app/components/progress-donut.ts

@@ -0,0 +1,39 @@
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
+import type { SafeString } from '@ember/template/-private/handlebars';
+
+interface Signature {
+  Element: SVGElement;
+
+  Args: {
+    total: number;
+    completed: number;
+  };
+}
+
+export default class ProgressDonut extends Component<Signature> {
+  get isComplete(): boolean {
+    return this.args.total > 0 && this.args.completed >= this.args.total;
+  }
+
+  get progressPercentage(): number {
+    if (this.args.total === 0) {
+      return 0;
+    }
+
+    // Apply minimum width of 10%
+    return Math.max(10, (100 * this.args.completed) / this.args.total);
+  }
+
+  get progressStyle(): SafeString {
+    const targetOffset = (2 * Math.PI * 9 * (100 - this.progressPercentage)) / 100;
+
+    return htmlSafe(`--target-offset: ${targetOffset}`);
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    ProgressDonut: typeof ProgressDonut;
+  }
+}

app/components/track-page/course-card/progress-bar.hbs

@@ -1,22 +1,13 @@
-<div class="flex items-center" data-test-course-progress ...attributes>
-  <div class="rounded-sm overflow-hidden mr-2">
-    <div
-      class="{{if @lastPushedRepository.allStagesAreComplete 'bg-teal-100 dark:bg-teal-900' 'bg-blue-100 dark:bg-blue-900'}}
-        h-4 w-20 flex items-stretch"
-    >
-      {{#if (eq @lastPushedRepository.completedStages.length 0)}}
-        <div class="bg-blue-500 w-1/12"></div>
-      {{else}}
-        <div
-          data-test-course-progress-bar
-          class={{if @lastPushedRepository.allStagesAreComplete "bg-teal-500" "bg-blue-500"}}
-          style={{html-safe (concat "width:" (round (mult 100 (div @lastPushedRepository.completedStages.length @course.stages.length))) "%")}}
-        ></div>
-      {{/if}}
-    </div>
+<div class="flex items-center gap-1.5" data-test-course-progress ...attributes>
+  <div class="w-6 h-6">
+    <ProgressDonut
+      @total={{@course.stages.length}}
+      @completed={{or @lastPushedRepository.completedStages.length 0}}
+      data-test-course-progress-donut
+    />
   </div>
 
-  <div class="{{if @lastPushedRepository.allStagesAreComplete 'text-teal-500' 'text-blue-500'}} mr-3" data-test-course-progress-text>
+  <div class="text-sm {{if @lastPushedRepository.allStagesAreComplete 'text-teal-500' 'text-blue-500'}} mr-3" data-test-course-progress-text>
     <b class="font-bold">{{@lastPushedRepository.completedStages.length}}/{{@course.stages.length}}</b>
     stages
   </div>

app/components/tracks-page/track-card/progress-bar.hbs

@@ -1,14 +1,6 @@
-<div class="flex items-center" data-test-track-progress>
-  <div class="rounded-sm overflow-hidden mr-2">
-    <div
-      class="{{if (eq @stagesCount @completedStagesCount) 'bg-teal-100 dark:bg-teal-900' 'bg-blue-100 dark:bg-blue-900'}} h-3 w-16 flex items-stretch"
-    >
-      <div
-        data-test-track-progress-bar
-        class={{if (eq @stagesCount @completedStagesCount) "bg-teal-500" "bg-blue-500"}}
-        style={{html-safe (concat "width:" (round (mult 100 (div (or @completedStagesCount 1) @stagesCount))) "%")}}
-      ></div>
-    </div>
+<div class="flex items-center gap-1.5" data-test-track-progress>
+  <div class="w-5 h-5">
+    <ProgressDonut @total={{@stagesCount}} @completed={{@completedStagesCount}} data-test-track-progress-donut />
   </div>
 
   <div class="text-xs {{if (eq @stagesCount @completedStagesCount) 'text-teal-500' 'text-blue-500'}} mr-3" data-test-track-progress-text>

app/styles/app.css

@@ -40,6 +40,22 @@ body {
   background: linear-gradient(to left, rgb(241 245 249 / 100%) 0%, rgb(241 245 249 / 100%) 20%, rgb(241 245 249 / 0%) 100%);
 }
 
+@keyframes progress-donut {
+  from {
+    stroke-dashoffset: 56.55;
+  }
+
+  to {
+    stroke-dashoffset: var(--target-offset);
+  }
+}
+
+.progress-donut-circle {
+  stroke-dasharray: 56.55 56.55;
+  stroke-dashoffset: 56.55;
+  animation: progress-donut 400ms ease-out forwards;
+}
+
 .top-50-percent {
   top: 50%;
 }

tests/acceptance/view-courses-test.js

@@ -93,10 +93,9 @@ module('Acceptance | view-courses', function (hooks) {
     assert.strictEqual(catalogPage.courseCards[2].actionText, 'Start');
     assert.strictEqual(catalogPage.courseCards[3].actionText, 'Start');
 
-    assert.true(catalogPage.courseCards[0].hasProgressBar);
+    assert.true(catalogPage.courseCards[0].hasProgressDonut);
     assert.false(catalogPage.courseCards[0].hasDifficultyLabel);
     assert.strictEqual(catalogPage.courseCards[0].progressText, '1/55 stages');
-    assert.strictEqual(catalogPage.courseCards[0].progressBarStyle, 'width:2%');
   });
 
   test('it renders with progress if user has created a repository', async function (assert) {
@@ -116,7 +115,7 @@ module('Acceptance | view-courses', function (hooks) {
     await catalogPage.visit();
 
     assert.strictEqual(catalogPage.courseCards[0].actionText, 'Resume');
-    assert.true(catalogPage.courseCards[0].hasProgressBar);
+    assert.true(catalogPage.courseCards[0].hasProgressDonut);
     assert.strictEqual(catalogPage.courseCards[0].progressText, '0/55 stages');
   });
 

tests/acceptance/view-tracks-test.js

@@ -46,9 +46,8 @@ module('Acceptance | view-tracks', function (hooks) {
     assert.strictEqual(catalogPage.trackCards[2].actionText, 'Start', 'expected third track to have start action');
     assert.strictEqual(catalogPage.trackCards[3].actionText, 'Start', 'expected fourth track to have start action');
 
-    assert.true(catalogPage.trackCards[0].hasProgressBar, 'expected first track to have progress bar');
+    assert.true(catalogPage.trackCards[0].hasProgressDonut, 'expected first track to have progress donut');
     assert.strictEqual(catalogPage.trackCards[0].progressText, '1/86 stages');
-    assert.strictEqual(catalogPage.trackCards[0].progressBarStyle, 'width:1%');
   });
 
   test('it sorts course cards based on last push', async function (assert) {
@@ -122,7 +121,6 @@ module('Acceptance | view-tracks', function (hooks) {
     assert.strictEqual(catalogPage.trackCards[2].actionText, 'Start');
     assert.strictEqual(catalogPage.trackCards[3].actionText, 'Start');
     assert.strictEqual(catalogPage.trackCards[0].progressText, '15/15 stages');
-    assert.strictEqual(catalogPage.trackCards[0].progressBarStyle, 'width:100%');
   });
 
   test('it renders if user is not signed in', async function (assert) {

tests/pages/components/course-card.js

@@ -1,14 +1,13 @@
-import { attribute, isPresent, text } from 'ember-cli-page-object';
+import { isPresent, text } from 'ember-cli-page-object';
 
 export default {
   actionText: text('[data-test-action-text]'),
-  name: text('[data-test-course-name]'),
   description: text('[data-test-course-description]'),
   hasAlphaLabel: isPresent('[data-test-course-alpha-label]'),
   hasBetaLabel: isPresent('[data-test-course-beta-label]'),
-  hasFreeLabel: isPresent('[data-test-course-free-label]'),
-  hasProgressBar: isPresent('[data-test-course-progress]'),
   hasDifficultyLabel: isPresent('[data-test-course-difficulty-label]'),
+  hasFreeLabel: isPresent('[data-test-course-free-label]'),
+  hasProgressDonut: isPresent('[data-test-course-progress-donut]'),
+  name: text('[data-test-course-name]'),
   progressText: text('[data-test-course-progress-text]'),
-  progressBarStyle: attribute('style', '[data-test-course-progress-bar]'),
 };

tests/pages/components/tracks-page/track-card.js

@@ -1,12 +1,11 @@
-import { attribute, isPresent, text } from 'ember-cli-page-object';
+import { isPresent, text } from 'ember-cli-page-object';
 
 export default {
   actionText: text('[data-test-action-text]'),
-  name: text('[data-test-track-name]'),
   description: text('[data-test-track-description]'),
-  hasPopularLabel: isPresent('[data-test-popular-track-label]'),
-  hasProgressBar: isPresent('[data-test-track-progress]'),
   hasDifficultyLabel: isPresent('[data-test-track-difficulty-label]'),
+  hasPopularLabel: isPresent('[data-test-popular-track-label]'),
+  hasProgressDonut: isPresent('[data-test-track-progress-donut]'),
+  name: text('[data-test-track-name]'),
   progressText: text('[data-test-track-progress-text]'),
-  progressBarStyle: attribute('style', '[data-test-track-progress-bar]'),
 };