From 40ce2f42c2ddef75e39e620da69e7ac2d6b991cf Mon Sep 17 00:00:00 2001
From: Vio <vio@beanon.com>
Date: Sun, 27 Feb 2022 15:35:18 +0100
Subject: [PATCH] fix(ui): SummaryItem - use HoverCard

---
 .../components/summary-item/summary-item.jsx  | 50 +++++++++----------
 .../summary-item/summary-item.module.css      | 19 -------
 2 files changed, 24 insertions(+), 45 deletions(-)

diff --git a/packages/ui/src/components/summary-item/summary-item.jsx b/packages/ui/src/components/summary-item/summary-item.jsx
index 8f1079ebed..8fa426a481 100644
--- a/packages/ui/src/components/summary-item/summary-item.jsx
+++ b/packages/ui/src/components/summary-item/summary-item.jsx
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
+import { Icon } from '../../ui/icon';
 import { Skeleton } from '../../ui/skeleton';
 import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
@@ -11,32 +12,25 @@ import { Metric } from '../metric';
 import { Delta } from '../delta';
 import css from './summary-item.module.css';
 
-const MetricInfoPopover = ({ description, url }) => {
-  // Workaround cases where the parent is a link
-  const readMoreOnClick = () => {
-    window.open(url);
-  };
-
-  return (
-    <Stack space="xxxsmall">
-      <p>{description}</p>
-      {url && (
-        <p>
-          <button type="button" className={css.readMoreBtn} onClick={readMoreOnClick}>
-            Read more
-          </button>
-        </p>
-      )}
-    </Stack>
-  );
-};
-
-MetricInfoPopover.propTypes = {
+const MetricInfo = ({ description, url }) => (
+  <Stack space="xxxsmall">
+    <p>{description}</p>
+    {url && (
+      <p>
+        <a href={url} className={css.readMoreLink}>
+          Read more
+        </a>
+      </p>
+    )}
+  </Stack>
+);
+
+MetricInfo.propTypes = {
   description: PropTypes.string.isRequired,
   url: PropTypes.string,
 };
 
-MetricInfoPopover.defaultProps = {
+MetricInfo.defaultProps = {
   url: '',
 };
 
@@ -65,9 +59,13 @@ export const SummaryItem = ({
         <span>{metric.label}</span>
 
         {showMetricDescriptionTooltip && (
-          <Popover className={css.icon} icon="help">
-            <MetricInfoPopover {...metric} />
-          </Popover>
+          <HoverCard
+            className={css.icon}
+            href={metric.url}
+            hoverContent={<MetricInfo {...metric} />}
+          >
+            <Icon glyph="help" />
+          </HoverCard>
         )}
       </FlexStack>
 
diff --git a/packages/ui/src/components/summary-item/summary-item.module.css b/packages/ui/src/components/summary-item/summary-item.module.css
index 1e4cda6995..4b71932fe1 100644
--- a/packages/ui/src/components/summary-item/summary-item.module.css
+++ b/packages/ui/src/components/summary-item/summary-item.module.css
@@ -7,25 +7,6 @@
   white-space: nowrap;
 }
 
-.readMoreBtn {
-  appearance: none;
-  padding: 0;
-  border: 0;
-  background: none;
-  cursor: pointer;
-  /* simulate link */
-  color: var(--color-primary);
-  text-decoration: underline;
-  line-height: var(--space-small);
-}
-
-.readMoreBtn:hover,
-.readMoreBtn:active,
-.readMoreBtn:focus {
-  color: var(--color-primary-dark);
-  text-decoration: none;
-}
-
 .currentMetric {
   display: block;
   color: var(--color-heading);