Create achievement-item component and use it within list

libs/angular/src/tools/achievements/achievement-card.component.ts

@@ -6,17 +6,15 @@ import {
   CardComponent,
   Icon,
   IconModule,
-  ItemModule,
   TypographyModule,
 } from "@bitwarden/components";
 
 import { AchievementIcon } from "./icons/achievement.icon";
-
 @Component({
   selector: "achievement-card",
   templateUrl: "achievement-card.component.html",
   standalone: true,
-  imports: [CommonModule, ItemModule, ButtonModule, IconModule, TypographyModule, CardComponent],
+  imports: [CommonModule, ButtonModule, IconModule, TypographyModule, CardComponent],
 })
 export class AchievementCard {
   protected readonly icon: Icon = AchievementIcon;
@@ -41,7 +39,7 @@ export class AchievementCard {
           this.iconStyle = "";
         } else if (progress > 0) {
           this.cardClass = "tw-bg-info-100";
-          this.iconStyle = "";
+          this.iconStyle = "tw-grayscale";
         } else {
           this.cardClass = "";
           this.iconStyle = "tw-grayscale";

libs/angular/src/tools/achievements/achievement-item.component.html

@@ -0,0 +1,12 @@
+<bit-item>
+  <button bit-item-content type="button">
+    <div slot="start" class="tw-justify-start tw-flex">
+      <bit-icon [icon]="icon" class="{{ iconStyle }}"></bit-icon>
+    </div>
+    <span>{{ title() }}</span>
+    <span slot="secondary">{{ description() }}</span>
+    @if (earned()) {
+      <p slot="secondary">Earned: {{ date() | date: "medium" }}</p>
+    }
+  </button>
+</bit-item>

libs/angular/src/tools/achievements/achievement-item.component.ts

@@ -0,0 +1,51 @@
+import { CommonModule } from "@angular/common";
+import { Component, effect, input, untracked } from "@angular/core";
+
+import {
+  ButtonModule,
+  Icon,
+  IconModule,
+  ItemModule,
+  TypographyModule,
+} from "@bitwarden/components";
+
+import { AchievementIcon } from "./icons/achievement.icon";
+
+@Component({
+  selector: "achievement-item",
+  templateUrl: "achievement-item.component.html",
+  standalone: true,
+  imports: [CommonModule, ItemModule, ButtonModule, IconModule, TypographyModule],
+})
+export class AchievemenItem {
+  protected readonly icon: Icon = AchievementIcon;
+  protected iconStyle: string = "tw-grayscale";
+
+  title = input.required<string>();
+  description = input.required<string>();
+
+  earned = input<boolean>(false);
+  progress = input<number>(0);
+  date = input<Date>();
+
+  protected cardClass: string;
+  constructor() {
+    effect(() => {
+      const earned = this.earned();
+      const progress = this.progress();
+
+      untracked(() => {
+        if (earned) {
+          this.cardClass = "tw-bg-success-100";
+          this.iconStyle = "";
+        } else if (progress > 0) {
+          this.cardClass = "tw-bg-info-100";
+          this.iconStyle = "tw-grayscale";
+        } else {
+          this.cardClass = "";
+          this.iconStyle = "tw-grayscale";
+        }
+      });
+    });
+  }
+}

libs/angular/src/tools/achievements/achievements-list.component.html

@@ -6,15 +6,15 @@
     <span bitTypography="body1" slot="end">{{ allAchievementCards.length }}</span>
   </bit-section-header>
 
-  @for (achievement of allAchievementCards; track achievement.name) {
-    <div class="tw-mb-3">
-      <achievement-card
+  <bit-item-group>
+    @for (achievement of allAchievementCards; track achievement.name) {
+      <achievement-item
         [title]="achievement.name"
         [description]="achievement.description"
         [earned]="achievement.earned"
         [date]="achievement.date"
         [progress]="achievement.progress"
-      ></achievement-card>
-    </div>
-  }
+      ></achievement-item>
+    }
+  </bit-item-group>
 </bit-section>