fix(ScoreFronstage): fix float numbers to 2 decimals

leemonade · Jan 11, 2024 · 7717c8e · 7717c8e
1 parent dd023e2
commit 7717c8e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 43 deletions.
diff --git a/packages/components/src/feedback/ScoreFronstage/Average/Average.js b/packages/components/src/feedback/ScoreFronstage/Average/Average.js
@@ -6,14 +6,14 @@ import { Box } from '../../../layout';
 const Average = ({ label, score, minGrade, maxGrade, ...props }) => {
   const { classes, cx } = AverageStyles({ score, minGrade }, { name: 'Average' });
 
-  const renderScore = () => {
-    return (
-      <>
-        <span className={classes.score}>{score.letter || score.number}</span>
-        {!score.letter && <span>{`/${maxGrade}`}</span>}
-      </>
-    );
-  };
+  const renderScore = () => (
+    <>
+      <span className={classes.score}>
+        {score.letter || Number.isInteger(score.number) ? score.number : score.number.toFixed(2)}
+      </span>
+      {!score.letter && <span>{`/${maxGrade}`}</span>}
+    </>
+  );
 
   return (
     <Box className={classes.root}>

diff --git a/packages/components/src/feedback/ScoreFronstage/Badge/Badge.js b/packages/components/src/feedback/ScoreFronstage/Badge/Badge.js
@@ -6,7 +6,11 @@ import { Box } from '../../../layout';
 const Badge = ({ score, minGrade, nonCalificable, ...props }) => {
   const { classes } = BadgeStyles({ score, minGrade, nonCalificable }, { name: 'Badge' });
 
-  return <Box className={classes.root}>{score.letter || score.number}</Box>;
+  return (
+    <Box className={classes.root}>
+      {score.letter || Number.isInteger(score.number) ? score.number : score.number.toFixed(2)}
+    </Box>
+  );
 };
 
 Badge.defaultProps = BADGE_DEFAULT_PROPS;

diff --git a/packages/components/src/tokens.compiled.js b/packages/components/src/tokens.compiled.js
@@ -1153,7 +1153,7 @@ export default {
           "y": 0,
           "blur": 4,
           "spread": 0,
-          "color": "#ffffff",
+          "color": "#ffffff26",
           "type": "dropShadow"
         },
         "type": "boxShadow"
@@ -1234,17 +1234,8 @@ export default {
             "type": "color"
           },
           "hover--reverse-transparent": {
-            "value": "#ffffff",
-            "type": "color",
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.15",
-                  "space": "lch"
-                }
-              }
-            }
+            "value": "#ffffff26",
+            "type": "color"
           },
           "down": {
             "value": "#F1FFBD",
@@ -4939,30 +4930,12 @@ export default {
       "color": {
         "primary": {
           "default": {
-            "value": "#4D5358",
-            "type": "color",
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.4",
-                  "space": "lch"
-                }
-              }
-            }
+            "value": "#4d535866",
+            "type": "color"
           },
           "hover": {
-            "value": "#4D5358",
-            "type": "color",
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.7",
-                  "space": "lch"
-                }
-              }
-            }
+            "value": "#4d5358b3",
+            "type": "color"
           },
           "down": {
             "value": "#4D5358",