Merge pull request #2920 from codecrafters-io/update-development-status-labels-to-pills

refactor: rename development status label to pill in tests and UI

Author: rohitpaulk

app/components/roadmap-page/course-extension-idea-card.hbs

@@ -12,39 +12,38 @@
       </div>
 
       {{#if @courseExtensionIdea.developmentStatusIsInProgress}}
-        <div
-          class="text-xs text-white font-semibold bg-yellow-500 dark:bg-yellow-600 rounded px-1.5 py-1 ml-3 mt-0.5 flex items-center"
-          data-test-development-status-label
-        >
-          in progress
-          {{svg-jar "shield-check" class="w-4 ml-1 fill-current"}}
+        <Pill @color="yellow" class="ml-3 mt-0.5" data-test-development-status-pill>
+          <div class="flex items-center gap-1">
+            {{svg-jar "shield-check" class="w-3 fill-current"}}
+            In Progress
+          </div>
 
           {{#if this.userHasVoted}}
             <EmberTooltip @text="We're currently building this challenge extension. We'll notify you when it launches." />
           {{else}}
             <EmberTooltip @text="We're currently building this challenge extension. Upvote this idea to be notified when it launches." />
           {{/if}}
-        </div>
+        </Pill>
       {{else if @courseExtensionIdea.developmentStatusIsReleased}}
-        <div
-          class="text-xs text-white font-semibold bg-teal-500 dark:bg-teal-600 rounded px-1.5 py-1 ml-3 mt-0.5 flex items-center"
-          data-test-development-status-label
-        >
-          <LinkTo @route="catalog">released</LinkTo>
-          {{svg-jar "check" class="w-4 ml-1 fill-current"}}
-          <EmberTooltip @text="This challenge extension is now available! Visit the catalog to try it out." />
-        </div>
+        <LinkTo @route="catalog" class="ml-3 mt-0.5">
+          <Pill @color="green" data-test-development-status-pill>
+            <div class="flex items-center gap-1">
+              {{svg-jar "check" class="w-3 fill-current"}}
+              Released
+            </div>
+
+            <EmberTooltip @text="This challenge extension is now available! Visit the catalog to try it out." />
+          </Pill>
+        </LinkTo>
       {{else if this.userHasVoted}}
         <div class="h-7 w-7 bg-teal-500 dark:bg-teal-600 rounded flex items-center justify-center">
           {{svg-jar "chevron-up" class="w-7 fill-current text-white"}}
         </div>
       {{else if @courseExtensionIdea.isNewlyCreated}}
-        <div
-          class="text-xs text-teal-500 dark:text-teal-600 font-semibold border border-teal-500 rounded px-1.5 py-1 ml-3 mt-0.5"
-          data-test-development-status-label
-        >
-          new
-        </div>
+        <Pill @color="green" class="ml-3 mt-0.5" data-test-development-status-pill>
+          New
+          <EmberTooltip @text="This is a recently added idea! Vote to help us decide which ideas to prioritize." />
+        </Pill>
       {{/if}}
     </div>
     <div class="prose dark:prose-invert prose-sm">

app/components/roadmap-page/course-idea-card.gts

@@ -12,6 +12,7 @@ import { LinkTo } from '@ember/routing';
 // @ts-expect-error not ts-ified yet
 import { on } from '@ember/modifier';
 import { tracked } from '@glimmer/tracking';
+import Pill from 'codecrafters-frontend/components/pill';
 import type AuthenticatorService from 'codecrafters-frontend/services/authenticator';
 import type Store from '@ember-data/store';
 import type CourseIdeaModel from 'codecrafters-frontend/models/course-idea';
@@ -88,39 +89,37 @@ export default class CourseIdeaCardComponent extends Component<Signature> {
           </div>
 
           {{#if @courseIdea.developmentStatusIsInProgress}}
-            <div
-              class='text-xs text-white font-semibold bg-yellow-500 dark:bg-yellow-600 rounded px-1.5 py-1 ml-3 mt-0.5 flex items-center'
-              data-test-development-status-label
-            >
-              in progress
-              {{svgJar 'shield-check' class='w-4 ml-1 fill-current'}}
+            <Pill @color='yellow' class='ml-3 mt-0.5' data-test-development-status-pill>
+              <div class='flex items-center gap-1'>
+                {{svgJar 'shield-check' class='w-3 fill-current'}}
+                In Progress
+              </div>
+
               {{#if this.userHasVoted}}
                 <EmberTooltip @text="We're currently building this challenge. We'll notify you when it launches." />
               {{else}}
                 <EmberTooltip @text="We're currently building this challenge. Upvote this idea to be notified when it launches." />
               {{/if}}
-            </div>
+            </Pill>
           {{else if @courseIdea.developmentStatusIsReleased}}
-            <div
-              class='text-xs text-white font-semibold bg-teal-500 dark:bg-teal-600 rounded px-1.5 py-1 ml-3 mt-0.5 flex items-center'
-              data-test-development-status-label
-            >
-              <LinkTo @route='catalog'>released</LinkTo>
-              {{svgJar 'check' class='w-4 ml-1 fill-current'}}
-              <EmberTooltip @text='This challenge is now available! Visit the catalog to try it out.' />
-            </div>
+            <LinkTo @route='catalog' class='ml-3 mt-0.5'>
+              <Pill @color='green' data-test-development-status-pill>
+                <div class='flex items-center gap-1'>
+                  {{svgJar 'check' class='w-3 fill-current'}}
+                  Released
+                </div>
+                <EmberTooltip @text='This challenge is now available! Visit the catalog to try it out.' />
+              </Pill>
+            </LinkTo>
           {{else if this.userHasVoted}}
             <div class='h-7 w-7 bg-teal-500 dark:bg-teal-600 rounded flex items-center justify-center'>
               {{svgJar 'chevron-up' class='w-7 fill-current text-white'}}
             </div>
           {{else if @courseIdea.isNewlyCreated}}
-            <div
-              class='text-xs text-teal-500 font-semibold border border-teal-500 rounded px-1.5 py-1 ml-3 mt-0.5'
-              data-test-development-status-label
-            >
-              new
+            <Pill @color='green' class='ml-3 mt-0.5' data-test-development-status-pill>
+              New
               <EmberTooltip @text='This is a recently added idea! Vote to help us decide which ideas to prioritize.' />
-            </div>
+            </Pill>
           {{/if}}
         </div>
         <div class='prose dark:prose-invert prose-sm'>

mirage/utils/create-course-extension-ideas.js

@@ -7,7 +7,6 @@ export default function createCourseExtensionIdeas(server) {
       createdAt: new Date(),
       descriptionMarkdown: courseExtensionIdeaData.description_md,
       developmentStatus: courseExtensionIdeaData.development_status,
-      developmentStatusLabelText: courseExtensionIdeaData.development_status,
       name: courseExtensionIdeaData.name,
       slug: courseExtensionIdeaData.slug,
       votesCount: 0,

mirage/utils/create-course-ideas.js

@@ -6,7 +6,6 @@ export default function createCourseIdeas(server) {
       createdAt: new Date(),
       descriptionMarkdown: courseIdeaData.description_md,
       developmentStatus: courseIdeaData.development_status,
-      developmentStatusLabelText: courseIdeaData.development_status,
       name: courseIdeaData.name,
       votesCount: 0,
     });

tests/acceptance/roadmap-page/course-extension-ideas-test.js

@@ -29,10 +29,10 @@ module('Acceptance | roadmap-page | course-extension-ideas', function (hooks) {
     const releasedIdeaCard = roadmapPage.findCourseExtensionIdeaCard('Persistence');
     const notStartedIdeaCard = roadmapPage.findCourseExtensionIdeaCard('Geospatial commands');
 
-    assert.strictEqual(releasedIdeaCard.developmentStatusLabelText, 'released', 'released idea has label');
+    assert.strictEqual(releasedIdeaCard.developmentStatusPillText, 'Released', 'released idea has label');
     assert.true(releasedIdeaCard.isGreyedOut, 'released idea is greyed out');
 
-    assert.notEqual(notStartedIdeaCard.developmentStatusLabelText, 'released', 'not started idea has no label');
+    assert.notEqual(notStartedIdeaCard.developmentStatusPillText, 'Released', 'not started idea has no label');
     assert.false(notStartedIdeaCard.isGreyedOut, 'not started idea is not greyed out');
 
     // TODO: Test that hovering on vote shows tooltip
@@ -84,14 +84,14 @@ module('Acceptance | roadmap-page | course-extension-ideas', function (hooks) {
     await roadmapPage.visitCourseExtensionIdeasTab();
 
     let courseExtensionIdeaCard = roadmapPage.findCourseExtensionIdeaCard('Geospatial commands');
-    await courseExtensionIdeaCard.hoverOnDevelopmentStatusLabel();
+    await courseExtensionIdeaCard.hoverOnDevelopmentStatusPill();
 
     assertTooltipContent(assert, {
       contentString: "We're currently building this challenge extension. Upvote this idea to be notified when it launches.",
     });
 
     await courseExtensionIdeaCard.clickOnVoteButton();
-    await courseExtensionIdeaCard.hoverOnDevelopmentStatusLabel();
+    await courseExtensionIdeaCard.hoverOnDevelopmentStatusPill();
 
     assertTooltipContent(assert, {
       contentString: "We're currently building this challenge extension. We'll notify you when it launches.",
@@ -100,7 +100,7 @@ module('Acceptance | roadmap-page | course-extension-ideas', function (hooks) {
     await courseExtensionIdeaCard.clickOnVoteButton();
 
     courseExtensionIdeaCard = roadmapPage.findCourseExtensionIdeaCard('Persistence');
-    await courseExtensionIdeaCard.hoverOnDevelopmentStatusLabel();
+    await courseExtensionIdeaCard.hoverOnDevelopmentStatusPill();
 
     assertTooltipContent(assert, {
       contentString: 'This challenge extension is now available! Visit the catalog to try it out.',

tests/acceptance/roadmap-page/course-ideas-test.js

@@ -27,10 +27,10 @@ module('Acceptance | roadmap-page | course-ideas', function (hooks) {
     const releasedIdeaCard = roadmapPage.findCourseIdeaCard('Build your own Regex Parser');
     const notStartedIdeaCard = roadmapPage.findCourseIdeaCard('Build your own Shell');
 
-    assert.strictEqual(releasedIdeaCard.developmentStatusLabelText, 'released', 'released idea has label');
+    assert.strictEqual(releasedIdeaCard.developmentStatusPillText, 'Released', 'released idea has label');
     assert.true(releasedIdeaCard.isGreyedOut, 'released idea is greyed out');
 
-    assert.notEqual(notStartedIdeaCard.developmentStatusLabelText, 'released', 'not started idea has no label');
+    assert.notEqual(notStartedIdeaCard.developmentStatusPillText, 'Released', 'not started idea has no label');
     assert.false(notStartedIdeaCard.isGreyedOut, 'not started idea is not greyed out');
 
     // TODO: Test that hovering on vote shows tooltip
@@ -85,14 +85,14 @@ module('Acceptance | roadmap-page | course-ideas', function (hooks) {
     await roadmapPage.visit();
 
     let courseIdeaCard = roadmapPage.findCourseIdeaCard('Build your own Regex Parser');
-    await courseIdeaCard.hoverOnDevelopmentStatusLabel();
+    await courseIdeaCard.hoverOnDevelopmentStatusPill();
 
     assertTooltipContent(assert, {
       contentString: "We're currently building this challenge. Upvote this idea to be notified when it launches.",
     });
 
     await courseIdeaCard.clickOnVoteButton();
-    await courseIdeaCard.hoverOnDevelopmentStatusLabel();
+    await courseIdeaCard.hoverOnDevelopmentStatusPill();
 
     assertTooltipContent(assert, {
       contentString: "We're currently building this challenge. We'll notify you when it launches.",
@@ -101,7 +101,7 @@ module('Acceptance | roadmap-page | course-ideas', function (hooks) {
     await courseIdeaCard.clickOnVoteButton();
 
     courseIdeaCard = roadmapPage.findCourseIdeaCard('Build your own SQLite');
-    await courseIdeaCard.hoverOnDevelopmentStatusLabel();
+    await courseIdeaCard.hoverOnDevelopmentStatusPill();
 
     assertTooltipContent(assert, {
       contentString: 'This challenge is now available! Visit the catalog to try it out.',

tests/pages/roadmap-page.js

@@ -4,17 +4,17 @@ import createPage from 'codecrafters-frontend/tests/support/create-page';
 export default createPage({
   courseExtensionIdeaCards: collection('[data-test-course-extension-idea-card]', {
     clickOnVoteButton: clickable('[data-test-vote-button]'),
-    developmentStatusLabelText: text('[data-test-development-status-label]'),
-    hoverOnDevelopmentStatusLabel: triggerable('mouseenter', '[data-test-development-status-label]'),
+    developmentStatusPillText: text('[data-test-development-status-pill]'),
+    hoverOnDevelopmentStatusPill: triggerable('mouseenter', '[data-test-development-status-pill]'),
     isGreyedOut: hasClass('opacity-50'),
     name: text('[data-test-course-extension-idea-name]'),
     voteButtonText: text('[data-test-vote-button]'),
   }),
 
   courseIdeaCards: collection('[data-test-course-idea-card]', {
     clickOnVoteButton: clickable('[data-test-vote-button]'),
-    developmentStatusLabelText: text('[data-test-development-status-label]'),
-    hoverOnDevelopmentStatusLabel: triggerable('mouseenter', '[data-test-development-status-label]'),
+    developmentStatusPillText: text('[data-test-development-status-pill]'),
+    hoverOnDevelopmentStatusPill: triggerable('mouseenter', '[data-test-development-status-pill]'),
     isGreyedOut: hasClass('opacity-50'),
     name: text('[data-test-course-idea-name]'),
     voteButtonText: text('[data-test-vote-button]'),