@bundle-stats/ui 4.1.1-alpha.3 → 4.1.2-alpha.0

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

@@ -1,65 +1,47 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MetricsTableSearch = void 0;
-
 var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _icon = require("../../ui/icon");
-
 var _input = require("../../ui/input");
-
 var _metricsTableSearchModule = _interopRequireDefault(require("./metrics-table-search.module.css"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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 MetricsTableSearch = function MetricsTableSearch(props) {
   var className = props.className,
-      placeholder = props.placeholder,
-      search = props.search,
-      updateSearch = props.updateSearch;
+    placeholder = props.placeholder,
+    search = props.search,
+    updateSearch = props.updateSearch;
   var rootClassname = (0, _classnames["default"])(_metricsTableSearchModule["default"].root, className);
-
   var _useState = (0, _react.useState)(search),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1]; // Update local state when initial value has changed
-
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
 
+  // Update local state when initial value has changed
   (0, _react.useEffect)(function () {
     setValue(search);
   }, [search]);
   var debouncedUpdateSearch = (0, _react.useCallback)((0, _debounce2["default"])(updateSearch, 500), []);
   var handleChangeValue = (0, _react.useCallback)(function (event) {
     var newValue = event.target.value;
-    setValue(newValue); // Update parent state when the local value has changed
+    setValue(newValue);
 
+    // Update parent state when the local value has changed
     if (newValue !== search) {
       debouncedUpdateSearch(newValue);
     }
@@ -87,7 +69,6 @@ var MetricsTableSearch = function MetricsTableSearch(props) {
     glyph: "cancel"
   })));
 };
-
 exports.MetricsTableSearch = MetricsTableSearch;
 MetricsTableSearch.propTypes = {
   className: _propTypes["default"].string,

package/lib/components/metrics-table-search/metrics-table-search.stories.js

@@ -1,47 +1,31 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _react2 = require("@storybook/react");
-
 var _stories = require("../../stories");
-
 var _ = require(".");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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 stories = (0, _react2.storiesOf)('Components/MetricsTableSearch', module);
 stories.addDecorator((0, _stories.getWrapperDecorator)());
-
 var MetricsTableWithState = function MetricsTableWithState() {
   var _useState = (0, _react.useState)(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      search = _useState2[0],
-      updateSearch = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    search = _useState2[0],
+    updateSearch = _useState2[1];
   return /*#__PURE__*/_react["default"].createElement(_.MetricsTableSearch, {
     placeholder: "Search name",
     search: search,
     updateSearch: updateSearch
   });
 };
-
 stories.add('default', function () {
   return /*#__PURE__*/_react["default"].createElement(MetricsTableWithState, null);
 });

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

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _metricsTableTitle = require("./metrics-table-title");
-
 Object.keys(_metricsTableTitle).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _metricsTableTitle[key]) return;

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

@@ -4,33 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MetricsTableTitle = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _i18n = _interopRequireDefault(require("../../i18n"));
-
 var _flexStack = require("../../layout/flex-stack");
-
 var _stack = require("../../layout/stack");
-
 var _icon = require("../../ui/icon");
-
 var _hoverCard = require("../../ui/hover-card");
-
 var _metricsTableTitleModule = _interopRequireDefault(require("./metrics-table-title.module.css"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var MetricsTableTitle = function MetricsTableTitle(props) {
   var className = props.className,
-      title = props.title,
-      info = props.info,
-      popoverInfo = props.popoverInfo,
-      popoverHref = props.popoverHref;
+    title = props.title,
+    info = props.info,
+    popoverInfo = props.popoverInfo,
+    popoverHref = props.popoverHref;
   var rootClassName = (0, _classnames["default"])(_metricsTableTitleModule["default"].root, className);
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     className: rootClassName
@@ -54,7 +43,6 @@ var MetricsTableTitle = function MetricsTableTitle(props) {
     className: _metricsTableTitleModule["default"].info
   }, info));
 };
-
 exports.MetricsTableTitle = MetricsTableTitle;
 MetricsTableTitle.propTypes = {
   className: _propTypes["default"].string,

package/lib/components/module-info/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _moduleInfo = require("./module-info");
-
 Object.keys(_moduleInfo).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _moduleInfo[key]) return;

package/lib/components/module-info/module-info.js

@@ -4,39 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ModuleInfo = void 0;
-
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
-
 var _find2 = _interopRequireDefault(require("lodash/find"));
-
 var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _utils = require("@bundle-stats/utils");
-
 var _stack = require("../../layout/stack");
-
 var _fileName = require("../../ui/file-name");
-
 var _componentLink = require("../component-link");
-
 var _moduleInfoModule = _interopRequireDefault(require("./module-info.module.css"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var ModuleInfo = function ModuleInfo(props) {
   var className = props.className,
-      item = props.item,
-      labels = props.labels,
-      chunks = props.chunks,
-      chunkIds = props.chunkIds,
-      CustomComponentLink = props.customComponentLink,
-      onClick = props.onClick;
+    item = props.item,
+    labels = props.labels,
+    chunks = props.chunks,
+    chunkIds = props.chunkIds,
+    CustomComponentLink = props.customComponentLink,
+    onClick = props.onClick;
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xsmall",
     className: className
@@ -54,11 +41,9 @@ var ModuleInfo = function ModuleInfo(props) {
       var chunk = (0, _find2["default"])(chunks, {
         id: chunkId
       });
-
       if (!chunk) {
         return null;
       }
-
       return /*#__PURE__*/_react["default"].createElement(CustomComponentLink, _extends({}, (0, _utils.getBundleModulesByChunk)(chunkIds, chunkId), {
         onClick: onClick,
         className: _moduleInfoModule["default"].chunksItem
@@ -70,7 +55,6 @@ var ModuleInfo = function ModuleInfo(props) {
     }));
   }));
 };
-
 exports.ModuleInfo = ModuleInfo;
 ModuleInfo.propTypes = {
   className: _propTypes["default"].string,

package/lib/components/module-info/module-info.stories.js

@@ -1,15 +1,10 @@
 "use strict";
 
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@storybook/react");
-
 var _stories = require("../../stories");
-
 var _ = require(".");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var stories = (0, _react2.storiesOf)('Components/ModuleInfo', module);
 stories.addDecorator((0, _stories.getWrapperDecorator)());
 stories.add('default', function () {

package/lib/components/summary/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _summary = require("./summary");
-
 Object.keys(_summary).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _summary[key]) return;

package/lib/components/summary/summary.js

@@ -4,55 +4,34 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Summary = void 0;
-
 var _get2 = _interopRequireDefault(require("lodash/get"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _utils = require("@bundle-stats/utils");
-
 var _constants = require("../../constants");
-
 var _box = require("../../layout/box");
-
 var _flexStack = require("../../layout/flex-stack");
-
 var _componentLink = require("../component-link");
-
 var _summaryItem = require("../summary-item");
-
 var _summaryModule = _interopRequireDefault(require("./summary.module.css"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 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 Summary = function Summary(_ref) {
   var className = _ref.className,
-      size = _ref.size,
-      keys = _ref.keys,
-      data = _ref.data,
-      loading = _ref.loading,
-      showSummaryItemDelta = _ref.showSummaryItemDelta,
-      SummaryItemCustomLink = _ref.summaryItemLink;
+    size = _ref.size,
+    keys = _ref.keys,
+    data = _ref.data,
+    loading = _ref.loading,
+    showSummaryItemDelta = _ref.showSummaryItemDelta,
+    SummaryItemCustomLink = _ref.summaryItemLink;
   return /*#__PURE__*/_react["default"].createElement(_box.Box, {
     className: (0, _classnames["default"])(_summaryModule["default"].root, className)
   }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
@@ -60,14 +39,12 @@ var Summary = function Summary(_ref) {
     className: _summaryModule["default"].items
   }, Array.from(_utils.METRIC_COMPONENT_LINKS).filter(function (_ref2) {
     var _ref3 = _slicedToArray(_ref2, 1),
-        metricId = _ref3[0];
-
+      metricId = _ref3[0];
     return keys.includes(metricId);
   }).map(function (_ref4) {
     var _ref5 = _slicedToArray(_ref4, 2),
-        metricId = _ref5[0],
-        metricOptions = _ref5[1];
-
+      metricId = _ref5[0],
+      metricOptions = _ref5[1];
     return /*#__PURE__*/_react["default"].createElement(_box.Box, _extends({
       key: metricId,
       outline: true,
@@ -85,7 +62,6 @@ var Summary = function Summary(_ref) {
     }));
   })));
 };
-
 exports.Summary = Summary;
 Summary.defaultProps = {
   className: '',

package/lib/components/summary/summary.module.css

@@ -9,6 +9,9 @@
   text-decoration: none;
 }
 
-.item:hover {
+.item:hover,
+.item:active,
+.item:focus {
   border-color: var(--color-outline-dark);
+  outline: none;
 }

package/lib/components/summary/summary.stories.js

@@ -1,31 +1,18 @@
 "use strict";
 
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@storybook/react");
-
 var _utils = require("@bundle-stats/utils");
-
 var _webpackStatsBaseline = _interopRequireDefault(require("../../../__mocks__/webpack-stats.baseline.json"));
-
 var _webpackStatsCurrent = _interopRequireDefault(require("../../../__mocks__/webpack-stats.current.json"));
-
 var _constants = require("../../constants");
-
 var _stories = require("../../stories");
-
 var _ = require(".");
-
 var _excluded = ["keyProps"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 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 MULTIPLE_JOBS = (0, _utils.createJobs)([{
   webpack: _webpackStatsCurrent["default"]
 }, {
@@ -63,8 +50,7 @@ stories.add('with link', function () {
     data: MULTIPLE_JOBS[0].summary,
     summaryItemLink: function summaryItemLink(_ref) {
       var keyProps = _ref.keyProps,
-          props = _objectWithoutProperties(_ref, _excluded);
-
+        props = _objectWithoutProperties(_ref, _excluded);
       return /*#__PURE__*/_react["default"].createElement("button", _extends({
         type: "button"
       }, props, {

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

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _summaryItem = require("./summary-item");
-
 Object.keys(_summaryItem).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _summaryItem[key]) return;

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

@@ -1,49 +1,32 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SummaryItem = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _utils = require("@bundle-stats/utils");
-
+var _icon = require("../../ui/icon");
 var _hoverCard = require("../../ui/hover-card");
-
 var _skeleton = require("../../ui/skeleton");
-
+var _flexStack = require("../../layout/flex-stack");
 var _stack = require("../../layout/stack");
-
 var _metric = require("../metric");
-
 var _delta = require("../delta");
-
 var _summaryItemModule = _interopRequireDefault(require("./summary-item.module.css"));
-
 var _excluded = ["className", "as", "size", "id", "data", "loading", "showDelta", "showMetricDescription"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 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 MetricInfo = function MetricInfo(_ref) {
   var description = _ref.description,
-      url = _ref.url;
+    url = _ref.url;
   // The component parent can be rendered inside an anchor tag, using button
   // to avoid using nesting links
   var onClick = (0, _react.useCallback)(function () {
@@ -59,7 +42,6 @@ var MetricInfo = function MetricInfo(_ref) {
     className: _summaryItemModule["default"].readMoreLink
   }, "Read more")));
 };
-
 MetricInfo.propTypes = {
   description: _propTypes["default"].string.isRequired,
   url: _propTypes["default"].string
@@ -67,38 +49,40 @@ MetricInfo.propTypes = {
 MetricInfo.defaultProps = {
   url: ''
 };
-
 var SummaryItem = function SummaryItem(_ref2) {
   var className = _ref2.className,
-      Component = _ref2.as,
-      size = _ref2.size,
-      id = _ref2.id,
-      data = _ref2.data,
-      loading = _ref2.loading,
-      showDelta = _ref2.showDelta,
-      showMetricDescription = _ref2.showMetricDescription,
-      props = _objectWithoutProperties(_ref2, _excluded);
-
+    Component = _ref2.as,
+    size = _ref2.size,
+    id = _ref2.id,
+    data = _ref2.data,
+    loading = _ref2.loading,
+    showDelta = _ref2.showDelta,
+    showMetricDescription = _ref2.showMetricDescription,
+    props = _objectWithoutProperties(_ref2, _excluded);
   var _ref3 = data || {
-    baseline: 0,
-    current: 0
-  },
-      baseline = _ref3.baseline,
-      current = _ref3.current;
-
+      baseline: 0,
+      current: 0
+    },
+    baseline = _ref3.baseline,
+    current = _ref3.current;
   var metric = (0, _utils.getGlobalMetricType)(id);
   var runInfo = (0, _utils.getMetricRunInfo)(metric, current, baseline);
   var showMetricDescriptionTooltip = showMetricDescription && (metric === null || metric === void 0 ? void 0 : metric.description);
   var rootClassName = (0, _classnames["default"])(_summaryItemModule["default"].root, className, _summaryItemModule["default"][size], showDelta && _summaryItemModule["default"].showDelta);
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, _extends({
-    space: "xxxsmall",
+    space: "xxsmall",
     as: Component,
     className: rootClassName
-  }, props), /*#__PURE__*/_react["default"].createElement("h3", {
+  }, props), /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxxsmall",
+    as: "h3",
     className: _summaryItemModule["default"].title
-  }, showMetricDescriptionTooltip ? /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
-    label: metric.label
-  }, /*#__PURE__*/_react["default"].createElement(MetricInfo, metric)) : metric.label), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
+  }, /*#__PURE__*/_react["default"].createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+    label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+      glyph: _icon.Icon.ICONS.HELP
+    }),
+    className: _summaryItemModule["default"].titleIcon
+  }, /*#__PURE__*/_react["default"].createElement(MetricInfo, metric))), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
     className: _summaryItemModule["default"].currentMetric,
     value: current,
     formatter: metric.formatter,
@@ -120,7 +104,6 @@ var SummaryItem = function SummaryItem(_ref2) {
     className: (0, _classnames["default"])(_summaryItemModule["default"].baselineMetric, _summaryItemModule["default"].loading)
   })));
 };
-
 exports.SummaryItem = SummaryItem;
 SummaryItem.defaultProps = {
   className: '',
@@ -134,26 +117,20 @@ SummaryItem.defaultProps = {
 SummaryItem.propTypes = {
   /** Adopted child class name */
   className: _propTypes["default"].string,
-
   /** Custom component */
   as: _propTypes["default"].elementType,
-
   /** Size modifier */
   size: _propTypes["default"].oneOf(['medium', 'large']),
-
   /** Metric id */
   id: _propTypes["default"].string.isRequired,
-
   /** Loading flag */
   loading: _propTypes["default"].bool,
-
   /** Summary data */
   data: _propTypes["default"].object,
   // eslint-disable-line react/forbid-prop-types
 
   /** Show description */
   showMetricDescription: _propTypes["default"].bool,
-
   /** Show delta */
   showDelta: _propTypes["default"].bool
 };

package/lib/components/summary-item/summary-item.module.css

@@ -2,14 +2,19 @@
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
-  line-height: 1;
   text-transform: uppercase;
   white-space: nowrap;
+  align-items: center;
+}
+
+.titleIcon {
+  opacity: 0;
+  pointer-events: none;
 }
 
 .currentMetric {
   color: var(--color-heading);
-  font-size: var(--size-xlarge);
+  font-size: var(--size-large);
   white-space: nowrap;
   font-weight: bold;
 }
@@ -38,8 +43,9 @@
 }
 
 /* Hover state */
-.root:hover .title {
-  color: var(--color-text-light);
+.root:hover .titleIcon {
+  opacity: 1;
+  pointer-events: auto;
 }