@bundle-stats/ui 3.2.4-alpha.0 → 3.2.5-alpha.17

package/CHANGELOG.md

@@ -3,11 +3,60 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [3.2.4-alpha.0](https://github.com/relative-ci/bundle-stats/compare/v3.2.3...v3.2.4-alpha.0) (2022-01-13)
+## [3.2.5-alpha.17](https://github.com/relative-ci/bundle-stats/compare/v3.2.5-alpha.16...v3.2.5-alpha.17) (2022-01-26)
+
+**Note:** Version bump only for package @bundle-stats/ui
+
+
+
+
+
+## [3.2.5-alpha.16](https://github.com/relative-ci/bundle-stats/compare/v3.2.5-alpha.15...v3.2.5-alpha.16) (2022-01-26)
+
+**Note:** Version bump only for package @bundle-stats/ui
+
+
+
+
+
+## [3.2.5-alpha.15](https://github.com/relative-ci/bundle-stats/compare/v3.2.5-alpha.14...v3.2.5-alpha.15) (2022-01-26)
+
+**Note:** Version bump only for package @bundle-stats/ui
+
+
+
+
+
+## [3.2.5-alpha.14](https://github.com/relative-ci/bundle-stats/compare/v3.2.5-alpha.13...v3.2.5-alpha.14) (2022-01-26)
+
+**Note:** Version bump only for package @bundle-stats/ui
+
+
+
+
+
+## [3.2.5-alpha.13](https://github.com/relative-ci/bundle-stats/compare/v3.2.5-alpha.12...v3.2.5-alpha.13) (2022-01-26)
+
+**Note:** Version bump only for package @bundle-stats/ui
+
+
+
+
+
+## [3.2.5-alpha.12](https://github.com/relative-ci/bundle-stats/compare/v3.2.4...v3.2.5-alpha.12) (2022-01-26)
+
+**Note:** Version bump only for package @bundle-stats/ui
+
+
+
+
+
+## [3.2.4](https://github.com/relative-ci/bundle-stats/compare/v3.2.3...v3.2.4) (2022-01-17)
 
 
 ### Bug Fixes
 
+* **ui:** Icon - center by default ([8acaf63](https://github.com/relative-ci/bundle-stats/commit/8acaf63273249cafe4a89e701a3afb4555037411))
 * **ui:** Icon - center by default ([889753c](https://github.com/relative-ci/bundle-stats/commit/889753c0feb236130a2707fbc352310ef07c7740))
 * **ui:** Remove popover component ([e07d7a9](https://github.com/relative-ci/bundle-stats/commit/e07d7a91640f67b4f99320e1af92f1092a6e610d))
 

package/lib/components/bundle-assets/bundle-assets.js

@@ -29,7 +29,7 @@ var _icon = require("../../ui/icon");
 
 var _fileName = require("../../ui/file-name");
 
-var _hoverCard = require("../../ui/hover-card");
+var _popover = require("../../ui/popover");
 
 var _tooltip = require("../../ui/tooltip");
 
@@ -137,11 +137,11 @@ var getRenderRowHeader = function getRenderRowHeader(_ref6) {
         isChunk = item.isChunk,
         isEntry = item.isEntry,
         isInitial = item.isInitial;
-    return /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
-      label: /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-        space: "xxxsmall",
-        className: _bundleAssetsModule["default"].assetName
-      }, /*#__PURE__*/_react["default"].createElement("div", {
+    return /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
+      label: /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
+        name: label
+      }),
+      icon: /*#__PURE__*/_react["default"].createElement("div", {
         className: _bundleAssetsModule["default"].assetInfoFlags
       }, isNotPredictive && /*#__PURE__*/_react["default"].createElement(_tooltip.Tooltip, {
         className: _bundleAssetsModule["default"].notPredictive,
@@ -160,9 +160,7 @@ var getRenderRowHeader = function getRenderRowHeader(_ref6) {
       }, "e"), isInitial && /*#__PURE__*/_react["default"].createElement("span", {
         title: "Initial",
         className: _bundleAssetsModule["default"].flagInitial
-      }, "i")), /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
-        name: label
-      }))
+      }, "i"))
     }, /*#__PURE__*/_react["default"].createElement(_assetInfo.AssetInfo, {
       className: _bundleAssetsModule["default"].assetInfo,
       item: item,

package/lib/components/bundle-assets/bundle-assets.module.css

@@ -8,11 +8,6 @@
   margin-right: -1px; /** collapse border */
 }
 
-.assetName {
-  display: inline-flex;
-  align-items: center;
-}
-
 .notPredictive {
   margin-right: var(--space-xxsmall);
   display: inline-block;

package/lib/components/bundle-modules/bundle-modules.js

@@ -35,7 +35,7 @@ var _fileName = require("../../ui/file-name");
 
 var _filters = require("../../ui/filters");
 
-var _hoverCard = require("../../ui/hover-card");
+var _popover = require("../../ui/popover");
 
 var _sortDropdown = require("../../ui/sort-dropdown");
 
@@ -67,6 +67,18 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 var RowHeader = function RowHeader(_ref) {
   var row = _ref.row,
       chunks = _ref.chunks,
@@ -74,18 +86,35 @@ var RowHeader = function RowHeader(_ref) {
       CustomComponentLink = _ref.CustomComponentLink;
   var chunkIds = (0, _map2["default"])(chunks, 'id');
 
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showPopopver = _useState2[0],
+      setPopover = _useState2[1];
+
+  var handleOnMouseEnter = (0, _react.useCallback)(function () {
+    return setPopover(true);
+  }, [showPopopver]);
+
   var content = /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
     name: row.label
   });
 
-  return /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    onMouseEnter: handleOnMouseEnter
+  }, !showPopopver ? content : /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
+    ariaLabel: "View module info",
     label: content
-  }, /*#__PURE__*/_react["default"].createElement(_moduleInfo.ModuleInfo, {
-    item: row,
-    chunks: chunks,
-    chunkIds: chunkIds,
-    labels: labels,
-    customComponentLink: CustomComponentLink
+  }, function (_ref2) {
+    var popoverToggle = _ref2.popoverToggle;
+    return /*#__PURE__*/_react["default"].createElement(_moduleInfo.ModuleInfo, {
+      className: _bundleModulesModule["default"].namePopover,
+      item: row,
+      chunks: chunks,
+      chunkIds: chunkIds,
+      labels: labels,
+      customComponentLink: CustomComponentLink,
+      onClick: popoverToggle
+    });
   }));
 };
 
@@ -104,10 +133,10 @@ RowHeader.defaultProps = {
   chunks: []
 };
 
-var getRenderRowHeader = function getRenderRowHeader(_ref2) {
-  var labels = _ref2.labels,
-      chunks = _ref2.chunks,
-      CustomComponentLink = _ref2.CustomComponentLink;
+var getRenderRowHeader = function getRenderRowHeader(_ref3) {
+  var labels = _ref3.labels,
+      chunks = _ref3.chunks,
+      CustomComponentLink = _ref3.CustomComponentLink;
   return function (row) {
     return /*#__PURE__*/_react["default"].createElement(RowHeader, {
       row: row,
@@ -118,25 +147,25 @@ var getRenderRowHeader = function getRenderRowHeader(_ref2) {
   };
 };
 
-var BundleModules = function BundleModules(_ref3) {
+var BundleModules = function BundleModules(_ref4) {
   var _MODULE_SOURCE_TYPE, _objectSpread2;
 
-  var className = _ref3.className,
-      jobs = _ref3.jobs,
-      items = _ref3.items,
-      chunks = _ref3.chunks,
-      totalRowCount = _ref3.totalRowCount,
-      updateFilters = _ref3.updateFilters,
-      resetFilters = _ref3.resetFilters,
-      resetAllFilters = _ref3.resetAllFilters,
-      filters = _ref3.filters,
-      sortFields = _ref3.sortFields,
-      sort = _ref3.sort,
-      updateSort = _ref3.updateSort,
-      search = _ref3.search,
-      updateSearch = _ref3.updateSearch,
-      hasActiveFilters = _ref3.hasActiveFilters,
-      CustomComponentLink = _ref3.customComponentLink;
+  var className = _ref4.className,
+      jobs = _ref4.jobs,
+      items = _ref4.items,
+      chunks = _ref4.chunks,
+      totalRowCount = _ref4.totalRowCount,
+      updateFilters = _ref4.updateFilters,
+      resetFilters = _ref4.resetFilters,
+      resetAllFilters = _ref4.resetAllFilters,
+      filters = _ref4.filters,
+      sortFields = _ref4.sortFields,
+      sort = _ref4.sort,
+      updateSort = _ref4.updateSort,
+      search = _ref4.search,
+      updateSearch = _ref4.updateSearch,
+      hasActiveFilters = _ref4.hasActiveFilters,
+      CustomComponentLink = _ref4.customComponentLink;
   var rootClassName = (0, _classnames["default"])(_bundleModulesModule["default"].root, className);
   var labels = (0, _react.useMemo)(function () {
     return (0, _map2["default"])(jobs, 'label');
@@ -170,9 +199,9 @@ var BundleModules = function BundleModules(_ref3) {
     defaultValue: (0, _get2["default"])(filters, "".concat(_utils.MODULE_SOURCE_TYPE, ".").concat(_utils.MODULE_FILTERS.THIRD_PARTY), true)
   }), _MODULE_SOURCE_TYPE)), _objectSpread2), !(0, _isEmpty2["default"])(chunks) && _defineProperty({}, _utils.MODULE_CHUNK, _objectSpread({
     label: 'Chunk'
-  }, chunks.reduce(function (chunkFilters, _ref4) {
-    var id = _ref4.id,
-        name = _ref4.name;
+  }, chunks.reduce(function (chunkFilters, _ref5) {
+    var id = _ref5.id,
+        name = _ref5.name;
     return _objectSpread(_objectSpread({}, chunkFilters), {}, _defineProperty({}, id, {
       label: name,
       defaultValue: (0, _get2["default"])(filters, "".concat(_utils.MODULE_CHUNK, ".").concat(id), true)
@@ -190,8 +219,8 @@ var BundleModules = function BundleModules(_ref3) {
     className: rootClassName
   }, /*#__PURE__*/_react["default"].createElement(_toolbar.Toolbar, {
     className: _bundleModulesModule["default"].toolbar,
-    renderActions: function renderActions(_ref6) {
-      var actionClassName = _ref6.actionClassName;
+    renderActions: function renderActions(_ref7) {
+      var actionClassName = _ref7.actionClassName;
       return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
         space: "xxsmall",
         className: (0, _classnames["default"])(_bundleModulesModule["default"].dropdown, actionClassName)

package/lib/components/bundle-modules/bundle-modules.module.css

@@ -11,3 +11,7 @@
   max-width: 240px;
   margin-right: -1px; /** collapse border */
 }
+
+.namePopover {
+  min-width: 280px;
+}

package/lib/components/bundle-packages/bundle-packages.js

@@ -27,7 +27,7 @@ var _emptySet = require("../../ui/empty-set");
 
 var _filters = require("../../ui/filters");
 
-var _hoverCard = require("../../ui/hover-card");
+var _popover = require("../../ui/popover");
 
 var _sortDropdown = require("../../ui/sort-dropdown");
 
@@ -69,7 +69,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var PackageCard = function PackageCard(_ref) {
+var PackagePopoverContent = function PackagePopoverContent(_ref) {
   var name = _ref.name,
       fullName = _ref.fullName,
       path = _ref.path,
@@ -84,46 +84,46 @@ var PackageCard = function PackageCard(_ref) {
 
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxsmall",
-    className: _bundlePackagesModule["default"].packageCard
+    className: _bundlePackagesModule["default"].packagePopover
   }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
   }, /*#__PURE__*/_react["default"].createElement("h3", {
-    className: _bundlePackagesModule["default"].packageCardTitle
+    className: _bundlePackagesModule["default"].packagePopoverTitle
   }, normalizedName, packageId && /*#__PURE__*/_react["default"].createElement("span", {
-    className: _bundlePackagesModule["default"].packageCardTitleIndex
+    className: _bundlePackagesModule["default"].packagePopoverTitleIndex
   }, "".concat(_utils.PACKAGE_ID_SEPARATOR).concat(packageId))), /*#__PURE__*/_react["default"].createElement("p", {
-    className: _bundlePackagesModule["default"].packageCardPath
+    className: _bundlePackagesModule["default"].packagePopoverPath
   }, /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
-    className: _bundlePackagesModule["default"].packageCardPathValue,
+    className: _bundlePackagesModule["default"].packagePopoverPathValue,
     name: normalizedPackagePath
   }))), /*#__PURE__*/_react["default"].createElement("ul", {
-    className: _bundlePackagesModule["default"].packageCardList
+    className: _bundlePackagesModule["default"].packagePopoverList
   }, /*#__PURE__*/_react["default"].createElement("li", {
-    className: _bundlePackagesModule["default"].packageCardItem
+    className: _bundlePackagesModule["default"].packagePopoverItem
   }, /*#__PURE__*/_react["default"].createElement("a", {
     href: "https://www.npmjs.com/package/".concat(normalizedName),
     target: "_blank",
     rel: "noreferrer"
   }, "npmjs.com")), /*#__PURE__*/_react["default"].createElement("li", {
-    className: _bundlePackagesModule["default"].packageCardItem
+    className: _bundlePackagesModule["default"].packagePopoverItem
   }, /*#__PURE__*/_react["default"].createElement("a", {
     href: "https://bundlephobia.com/result?p=".concat(normalizedName),
     target: "_blank",
     rel: "noreferrer"
   }, "bundlephobia.com"))), /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall",
-    className: _bundlePackagesModule["default"].packageCardActions
+    className: _bundlePackagesModule["default"].packagePopover.actions
   }, duplicate && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(CustomComponentLink, (0, _utils.getBundlePackagesByNameComponentLink)(normalizedName), "View all duplicate instances")), /*#__PURE__*/_react["default"].createElement(CustomComponentLink, (0, _utils.getBundleModulesBySearch)(normalizedPackagePath), "Search modules by package path")));
 };
 
-PackageCard.propTypes = {
+PackagePopoverContent.propTypes = {
   name: _propTypes["default"].string.isRequired,
   path: _propTypes["default"].string,
   fullName: _propTypes["default"].string.isRequired,
   duplicate: _propTypes["default"].bool.isRequired,
   CustomComponentLink: _propTypes["default"].elementType.isRequired
 };
-PackageCard.defaultProps = {
+PackagePopoverContent.defaultProps = {
   path: ''
 };
 
@@ -135,25 +135,20 @@ var PackageRowHeader = function PackageRowHeader(_ref2) {
   var _ref3 = item.runs[0] || {},
       path = _ref3.path;
 
-  return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-    space: "xxxsmall",
+  return /*#__PURE__*/_react["default"].createElement("span", {
     className: _bundlePackagesModule["default"].packageNames
   }, packageNames.map(function (packageName, index) {
-    var label = /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-      space: "xxxsmall",
-      className: _bundlePackagesModule["default"].packageNameLabel
-    }, index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/_react["default"].createElement("span", {
-      className: _bundlePackagesModule["default"].packageNameDuplicate,
+    // Render duplicate flag only for the last entry
+    var duplicateFlag = index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/_react["default"].createElement("span", {
+      className: _bundlePackagesModule["default"].duplicate,
       title: "Duplicate package"
-    }, "D"), /*#__PURE__*/_react["default"].createElement("span", {
-      className: _bundlePackagesModule["default"].packageNameText
-    }, packageName));
-
-    return /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
-      label: label,
-      key: packageName,
-      className: _bundlePackagesModule["default"].packageName
-    }, /*#__PURE__*/_react["default"].createElement(PackageCard, {
+    }, "D");
+
+    return /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
+      className: _bundlePackagesModule["default"].packageName,
+      icon: duplicateFlag,
+      label: packageName
+    }, /*#__PURE__*/_react["default"].createElement(PackagePopoverContent, {
       name: packageName,
       path: path,
       fullName: item.label,

package/lib/components/bundle-packages/bundle-packages.module.css

@@ -12,8 +12,20 @@
   margin-right: -1px; /** collapse border */
 }
 
-.packageNames {
-  align-items: center;
+.duplicate {
+  margin-right: var(--space-xxxsmall);
+  display: inline-block;
+  width: var(--space-small);
+  height: var(--space-small);
+  font-size: 10px;
+  font-weight: bold;
+  line-height: var(--space-small);
+  text-align: center;
+  text-transform: uppercase;
+  vertical-align: middle;
+
+  background: var(--color-danger);
+  color: var(--color-light);
 }
 
 .packageName {
@@ -26,56 +38,27 @@
 
 .packageName + .packageName::before {
   display: inline-block;
-  margin: 0 var(--space-xxxsmall) 0 0;
+  margin: 0 var(--space-xxxsmall);
   content: '/';
   color: var(--color-text-ultra-light);
 }
 
-.packageNameLabel {
-  display: inline-flex;
-  align-items: center;
-}
-
-.packageNameDuplicate {
-  margin-right: var(--space-xxxsmall);
-  display: inline-block;
-  width: var(--space-xsmall);
-  height: var(--space-xsmall);
-  font-size: 8px;
-  font-weight: bold;
-  line-height: var(--space-xsmall);
-  text-align: center;
-  text-transform: uppercase;
-  vertical-align: middle;
-
-  background: var(--color-danger);
-  color: var(--color-light);
-}
-
-.packageName:hover,
-.packageName:active,
-.packageName:focus {
-  text-decoration: none !important;
-}
-
-.packageName:hover .packageNameText,
-.packageName:active .packageNameText,
-.packageName:focus .packageNameText {
-  text-decoration: underline !important;
+.packagePopover {
+  min-width: 320px;
 }
 
-.packageCardTitleIndex {
+.packagePopoverTitleIndex {
   color: var(--color-text-light);
   font-weight: normal;
 }
 
-.packageCardPathValue {
+.packagePopoverPathValue {
   padding: var(--space-xxxsmall);
   background: var(--color-highlight-warning);
   font-family: var(--font-family-monospace);
 }
 
-.packageCardList {
+.packagePopoverList {
   padding: 0;
   list-style: inside;
 }

package/lib/components/metrics-table-title/metrics-table-title.js

@@ -17,9 +17,7 @@ var _flexStack = require("../../layout/flex-stack");
 
 var _stack = require("../../layout/stack");
 
-var _icon = require("../../ui/icon");
-
-var _hoverCard = require("../../ui/hover-card");
+var _popover = require("../../ui/popover");
 
 var _metricsTableTitleModule = _interopRequireDefault(require("./metrics-table-title.module.css"));
 
@@ -39,10 +37,8 @@ var MetricsTableTitle = function MetricsTableTitle(props) {
     space: "xxxsmall"
   }, /*#__PURE__*/_react["default"].createElement("span", null, title), info && /*#__PURE__*/_react["default"].createElement("span", {
     className: _metricsTableTitleModule["default"].info
-  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
-    label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-      glyph: "help"
-    })
+  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
+    icon: "help"
   }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
   }, popoverInfo && /*#__PURE__*/_react["default"].createElement("p", null, popoverInfo), popoverHref && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("a", {

package/lib/components/summary-item/summary-item.js

@@ -13,9 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _utils = require("@bundle-stats/utils");
 
-var _icon = require("../../ui/icon");
-
-var _hoverCard = require("../../ui/hover-card");
+var _popover = require("../../ui/popover");
 
 var _skeleton = require("../../ui/skeleton");
 
@@ -39,23 +37,29 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var MetricDescriptionCard = function MetricDescriptionCard(_ref) {
+var MetricInfoPopover = function MetricInfoPopover(_ref) {
   var description = _ref.description,
       url = _ref.url;
+
+  // Workaround cases where the parent is a link
+  var readMoreOnClick = function readMoreOnClick() {
+    window.open(url);
+  };
+
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-    space: "xxsmall"
-  }, /*#__PURE__*/_react["default"].createElement("p", null, description), url && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("a", {
-    href: url,
-    target: "_blank",
-    rel: "noopener noreferrer"
+    space: "xxxsmall"
+  }, /*#__PURE__*/_react["default"].createElement("p", null, description), url && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    className: _summaryItemModule["default"].readMoreBtn,
+    onClick: readMoreOnClick
   }, "Read more")));
 };
 
-MetricDescriptionCard.propTypes = {
+MetricInfoPopover.propTypes = {
   description: _propTypes["default"].string.isRequired,
   url: _propTypes["default"].string
 };
-MetricDescriptionCard.defaultProps = {
+MetricInfoPopover.defaultProps = {
   url: ''
 };
 
@@ -89,12 +93,10 @@ var SummaryItem = function SummaryItem(_ref2) {
     as: "h3",
     space: "xxxsmall",
     className: _summaryItemModule["default"].title
-  }, /*#__PURE__*/_react["default"].createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+  }, /*#__PURE__*/_react["default"].createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
     className: _summaryItemModule["default"].icon,
-    label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-      glyph: "help"
-    })
-  }, /*#__PURE__*/_react["default"].createElement(MetricDescriptionCard, metric))), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
+    icon: "help"
+  }, /*#__PURE__*/_react["default"].createElement(MetricInfoPopover, metric))), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
     className: _summaryItemModule["default"].currentMetric,
     value: current,
     formatter: metric.formatter,

package/lib/components/total-size-type-title/total-size-type-title.js

@@ -19,9 +19,7 @@ var _flexStack = require("../../layout/flex-stack");
 
 var _stack = require("../../layout/stack");
 
-var _icon = require("../../ui/icon");
-
-var _hoverCard = require("../../ui/hover-card");
+var _popover = require("../../ui/popover");
 
 var _totalSizeTypeTitleModule = _interopRequireDefault(require("./total-size-type-title.module.css"));
 
@@ -32,10 +30,8 @@ var TotalSizeTypeTitle = function TotalSizeTypeTitle(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     space: "xxxsmall",
     className: (0, _classnames["default"])(_totalSizeTypeTitleModule["default"].title, className)
-  }, /*#__PURE__*/_react["default"].createElement("span", null, _i18n["default"].ASSET_TOTALS), /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
-    label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-      glyph: "help"
-    })
+  }, /*#__PURE__*/_react["default"].createElement("span", null, _i18n["default"].ASSET_TOTALS), /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
+    icon: "help"
   }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
   }, /*#__PURE__*/_react["default"].createElement("p", null, _i18n["default"].ASSET_TOTALS_INFO), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("a", {