usage of hopper icon in metric score (#798)

* usage of hopper icon in metric score * reworked score code * pr fixes * removed unused import * moved getBrand outside of component
gsoft-inc · Apr 17, 2024 · e7e3fc7 · e7e3fc7
1 parent 8281f80
commit e7e3fc7
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 19 deletions.
diff --git a/.changeset/khaki-glasses-crash.md b/.changeset/khaki-glasses-crash.md
@@ -0,0 +1,5 @@
+---
+"@igloo-ui/metric": patch
+---
+
+Fixed Metric Score Icon size
diff --git a/packages/Metric/src/Metric.tsx b/packages/Metric/src/Metric.tsx
@@ -3,10 +3,11 @@ import cx from "classnames";
 import { useButton, type AriaButtonProps, FocusRing } from "react-aria";
 
 import HelpSolid from "@igloo-ui/icons/dist/HelpSolid";
-import Help from "@igloo-ui/icons/dist/Help";
 import Alignment from "@igloo-ui/icons/dist/Alignment";
 import Checkmark from "@igloo-ui/icons/dist/Checkmark";
 
+import { QuestionIcon } from "@hopper-ui/icons-react16";
+
 import Tooltip from "@igloo-ui/tooltip";
 import Score from "./Score";
 
@@ -54,6 +55,8 @@ const Metric: React.FunctionComponent<MetricProps> = ({
         return document.documentElement.getAttribute("data-brand") ?? "igloo";
     };
 
+    const isWorkleap = getBrand() === "workleap";
+
     const { buttonProps } = useButton(rest, btnRef);
 
     const classes = cx("ids-metric", className, {
@@ -106,8 +109,8 @@ const Metric: React.FunctionComponent<MetricProps> = ({
                     >
                         {tooltip && appearance !== "selected" && (
                             <Tooltip content={tooltip}>
-                                {getBrand() === "workleap" ? (
-                                    <Help size="small" />) : <HelpSolid size="small" />}
+                                {isWorkleap ? (
+                                    <QuestionIcon size="sm" />) : <HelpSolid size="small" />}
                             </Tooltip>
                         )}
                         {type !== "subMetric" && appearance === "selected" && (

diff --git a/packages/Metric/src/Score.tsx b/packages/Metric/src/Score.tsx
@@ -3,6 +3,8 @@ import cx from "classnames";
 
 import ArrowUp from "@igloo-ui/icons/dist/ArrowUp";
 import ArrowDown from "@igloo-ui/icons/dist/ArrowDown";
+import { ArrowUpIcon, ArrowDownIcon } from "@hopper-ui/icons-react16";
+
 import { useLocalizedStringFormatter, useLocale } from "@igloo-ui/provider";
 import intlMessages from "./intl";
 
@@ -25,6 +27,16 @@ export interface ScoreProps extends React.ComponentProps<"div"> {
     value?: number | null;
 }
 
+const sizeMap = {
+    small: "sm",
+    medium: "md",
+    large: "lg"
+} as const;
+
+const getBrand = (): string => {
+    return document.documentElement.getAttribute("data-brand") ?? "igloo";
+};
+
 const Score: React.FunctionComponent<ScoreProps> = ({
     arrowSize = "small",
     className,
@@ -36,6 +48,25 @@ const Score: React.FunctionComponent<ScoreProps> = ({
 }: ScoreProps) => {
     const stringFormatter = useLocalizedStringFormatter(intlMessages);
     const { locale } = useLocale();
+
+    const isWorkleap = getBrand() === "workleap";
+
+    const arrowPositiveClass = cx("ids-score__arrow", "ids-score__arrow--positive", {
+        "ids-score__arrow--selected": isSelected
+    });
+
+    const arrowNegativeClass = cx("ids-score__arrow", "ids-score__arrow--negative", {
+        "ids-score__arrow--selected": isSelected
+    });
+
+    const ArrowUpIconElement = isWorkleap ?
+        <ArrowUpIcon className={arrowPositiveClass} size={sizeMap[arrowSize]} /> :
+        <ArrowUp className={arrowPositiveClass} size={arrowSize} />;
+
+    const ArrowDownIconElement = isWorkleap ?
+        <ArrowDownIcon className={arrowNegativeClass} size={sizeMap[arrowSize]} /> :
+        <ArrowDown className={arrowNegativeClass} size={arrowSize} />;
+
     if (!isVariation && (value === undefined || value === null)) {
         return <span
             className={cx("ids-score", className, {
@@ -53,28 +84,20 @@ const Score: React.FunctionComponent<ScoreProps> = ({
     if (forceDecimal) {
         displayValue = metricValue.toFixed(1);
     }
+
     const arrow = isNegative ? (
-        <ArrowDown
-            size={arrowSize}
-            className={cx("ids-score__arrow", "ids-score__arrow--negative", {
-                "ids-score__arrow--selected": isSelected
-            })}
-        />
+        ArrowDownIconElement
     ) : (
-        <ArrowUp
-            size={arrowSize}
-            className={cx("ids-score__arrow", "ids-score__arrow--positive", {
-                "ids-score__arrow--selected": isSelected
-            })}
-        />
+        ArrowUpIconElement
     );
-    let postFix = absoluteValue === 1 ? 
-        ` ${stringFormatter.format("pt")}` : 
+
+    let postFix = absoluteValue === 1 ?
+        ` ${stringFormatter.format("pt")}` :
         ` ${stringFormatter.format("pts")}`;
 
     if (locale === "fr-CA") {
-        postFix = absoluteValue === 1 || absoluteValue === 0 ? 
-            ` ${stringFormatter.format("pt")}` : 
+        postFix = absoluteValue === 1 || absoluteValue === 0 ?
+            ` ${stringFormatter.format("pt")}` :
             ` ${stringFormatter.format("pts")}`;
     }