refactor: Update Score and Rank components to use RankPayload interface

frontend/src/components/ExperimentCollection/Header/Header.tsx

@@ -47,7 +47,7 @@ export const Header: React.FC<HeaderProps> = ({
                 <div className="results">
                     <Score
                         score={totalScore}
-                        scoreClass={scoreDisplayConfig.scoreClass}
+                        rank={{ class: scoreDisplayConfig.scoreClass, text: '' }}
                         label={scoreDisplayConfig.scoreLabel}
                     />
                     <Social

frontend/src/components/ExperimentCollection/Score/Score.tsx

@@ -1,22 +1,17 @@
 import React from "react";
 
-import Rank from "@/components/Rank/Rank";
+import Rank, { RankPayload } from "@/components/Rank/Rank";
 import useAnimatedScore from "@/hooks/useAnimatedScore";
 
 interface ScoreProps {
     score: number;
     label: string;
-    scoreClass: string; // The rank class, e.g. diamond, platinum, gold, silver, bronze, plastic
+    rank: RankPayload;
 }
 
-const Score = ({ score, label, scoreClass }: ScoreProps) => {
+const Score = ({ score, label, rank }: ScoreProps) => {
     const currentScore = useAnimatedScore(score);
 
-    const rank = {
-        class: scoreClass,
-        text: "",
-    }
-
     return (
         <div className="score">
             <Rank rank={rank} />

frontend/src/components/Rank/Rank.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 
 export interface RankPayload {
-    class: string;
+    class: string | "diamond" | "platinum" | "gold" | "silver" | "bronze" | "plastic";
     text: string;
 }
 
@@ -10,18 +10,16 @@ interface RankProps {
 }
 
 // Rank shows a decorated representation of a rank
-const Rank = ({ rank }: RankProps) => {
-    return (
-        <div
-            className={classNames("aha__rank", rank.class, {
-                offsetCup: rank.text,
-            })}
-            data-testid="rank"
-        >
-            <div className="cup-animation" data-testid="cup-animation" />
-            <h4 data-testid="rank-text">{rank.text}</h4>
-        </div >
-    );
-};
+const Rank = ({ rank }: RankProps) => (
+    <div
+        className={classNames("aha__rank", rank.class, {
+            offsetCup: rank.text,
+        })}
+        data-testid="rank"
+    >
+        <div className="cup-animation" data-testid="cup-animation" />
+        <h4 data-testid="rank-text">{rank.text}</h4>
+    </div >
+);
 
 export default Rank;

frontend/src/stories/ScoreV2.stories.tsx

@@ -9,20 +9,23 @@ export default {
     layout: "fullscreen",
   },
   argTypes: {
-    scoreClass: {
+    "rank.class": {
       control: {
         type: "select",
       },
       options: ['diamond', 'platinum', 'gold', 'silver', 'bronze', 'plastic'],
-    }
+    },
   }
 };
 
 function getScoreData(overrides = {}) {
   return {
     score: 100,
     label: "points",
-    scoreClass: "scoreCirclePositive",
+    rank: {
+      class: "gold",
+      text: "Gold",
+    },
     ...overrides,
   };
 }