Add hover state also on unselected button in HealthSummaryBox

trento-project · Nov 4, 2022 · 99b52ab · 99b52ab
1 parent ff1ea5b
commit 99b52ab
Showing 1 changed file with 11 additions and 7 deletions.
diff --git a/assets/js/components/HealthSummary/HealthSummaryBox.jsx b/assets/js/components/HealthSummary/HealthSummaryBox.jsx
@@ -31,29 +31,31 @@ const iconByHealth = {
 };
 
 const styleByHealth = {
-  passing: (selected) =>
+  passing: (selected, asButton) =>
     classNames(
       'tn-health-passing w-1/3 px-5 shadow rounded-lg my-2 mr-10 bg-white',
       {
-        'bg-jungle-green-500 border-green-600 text-white hover:opacity-75':
-          selected,
+        'bg-jungle-green-500 border-green-600 text-white hover:opacity-75': selected,
         'text-jungle-green-500': !selected,
+        'hover:opacity-75': asButton && !selected,
       }
     ),
-  warning: (selected) =>
+  warning: (selected, asButton) =>
     classNames(
       'tn-health-warning w-1/3 px-5 shadow rounded-lg my-2 mr-10 bg-white',
       {
         'bg-yellow-400 border-yellow-400 text-white hover:opacity-75': selected,
         'text-yellow-400': !selected,
+        'hover:opacity-75': asButton && !selected,
       }
     ),
-  critical: (selected) =>
+  critical: (selected, asButton) =>
     classNames(
       'tn-health-critical w-1/3 px-5 shadow rounded-lg my-2 mr-10 bg-white',
       {
         'bg-red-600 border-red-600 text-white hover:opacity-75': selected,
         'text-red-600': !selected,
+        'hover:opacity-75': asButton && !selected,
       }
     ),
 };
@@ -73,14 +75,16 @@ const HealthSummaryBox = ({
   style,
   onClick = defaultOnClick,
 }) => {
+  const asButton = onClick !== defaultOnClick;
+
   return (
     <div
       style={style}
       data-testid={`health-box-${health}-${
         selected ? 'selected' : 'not-selected'
       }`}
-      className={styleByHealth[health](selected)}
-      role={onClick === defaultOnClick ? null : 'button'}
+      className={styleByHealth[health](selected, asButton)}
+      role={!asButton ? null : 'button'}
       onClick={() => onClick(health)}
     >
       <div className="flex rounded justify-between p-4 text-2xl font-semibold">