@bundle-stats/ui 3.2.1-beta.9 → 3.3.0-alpha.0

package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js

@@ -1,8 +1,11 @@
 "use strict";
 
-var _react = _interopRequireDefault(require("react"));
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithBudgets = exports.SingleJob = exports.MultipleJobs = exports.EmptyBaseline = void 0;
 
-var _react2 = require("@storybook/react");
+var _react = _interopRequireDefault(require("react"));
 
 var _utils = require("@bundle-stats/utils");
 
@@ -16,44 +19,56 @@ var _ = require(".");
 
 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 JOBS = (0, _utils.createJobs)([{
-  webpack: _webpackStatsCurrent["default"]
-}, {
-  webpack: _webpackStatsBaseline["default"]
-}]);
-
-var _JOBS = _slicedToArray(JOBS, 1),
-    currentJob = _JOBS[0];
-
-var stories = (0, _react2.storiesOf)('Components/BundleAssetsTotalsTable', module);
-stories.addDecorator((0, _stories.getWrapperDecorator)());
-stories.add('default', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.BundleAssetsTotalsTable, {
-    jobs: [currentJob]
-  });
-});
-stories.add('multiple jobs', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.BundleAssetsTotalsTable, {
-    jobs: JOBS
-  });
-});
-var JOBS_EMPTY_BASELINE = (0, _utils.createJobs)([{
-  webpack: _webpackStatsCurrent["default"]
-}, null]);
-stories.add('empty baseline', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.BundleAssetsTotalsTable, {
-    jobs: JOBS_EMPTY_BASELINE
-  });
-});
+var _default = {
+  title: 'Components/BundleAssetsTotalsTable',
+  component: _.BundleAssetsTotalsTable,
+  decorators: [(0, _stories.getWrapperDecorator)()]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_.BundleAssetsTotalsTable, args);
+};
+
+var SingleJob = Template.bind();
+exports.SingleJob = SingleJob;
+SingleJob.args = {
+  jobs: (0, _utils.createJobs)([{
+    webpack: _webpackStatsCurrent["default"]
+  }])
+};
+var MultipleJobs = Template.bind();
+exports.MultipleJobs = MultipleJobs;
+MultipleJobs.args = {
+  jobs: (0, _utils.createJobs)([{
+    webpack: _webpackStatsCurrent["default"]
+  }, {
+    webpack: _webpackStatsBaseline["default"]
+  }])
+};
+var EmptyBaseline = Template.bind();
+exports.EmptyBaseline = EmptyBaseline;
+EmptyBaseline.args = {
+  jobs: (0, _utils.createJobs)([{
+    webpack: _webpackStatsCurrent["default"]
+  }, null])
+};
+var WithBudgets = Template.bind();
+exports.WithBudgets = WithBudgets;
+WithBudgets.args = {
+  jobs: (0, _utils.createJobs)([{
+    webpack: _webpackStatsCurrent["default"]
+  }, {
+    webpack: _webpackStatsBaseline["default"]
+  }], {
+    webpack: {
+      budgets: [{
+        metric: 'sizes.totalSizeByTypeJS',
+        value: 2 * 1024 * 1024
+      }, {
+        metric: 'sizes.totalSizeByTypeCSS',
+        value: 20 * 1024
+      }]
+    }
+  })
+};

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

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+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
@@ -61,9 +61,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 function _extends() { _extends = Object.assign || 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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; }
 

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

@@ -41,9 +41,9 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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; }
 

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

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+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
@@ -41,9 +41,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 function _extends() { _extends = Object.assign || 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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; }
 

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

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+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

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

@@ -17,9 +17,9 @@ var _bundlePackages = require("./bundle-packages.constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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; }
 

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

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+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

package/lib/components/lighthouse-table/lighthouse-table.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+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

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

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+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

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

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+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

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

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+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"));
 

package/lib/components/summary/summary.js

@@ -17,6 +17,8 @@ var _utils = require("@bundle-stats/utils");
 
 var _constants = require("../../constants");
 
+var _icon = require("../../ui/icon");
+
 var _box = require("../../layout/box");
 
 var _flexStack = require("../../layout/flex-stack");
@@ -27,11 +29,9 @@ var _summaryItem = require("../summary-item");
 
 var _summaryModule = _interopRequireDefault(require("./summary.module.css"));
 
-var _excluded = ["className", "metricOptions", "SummaryItemCustomLink"];
-
 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 || 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(); }
 
@@ -45,74 +45,51 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _extends() { _extends = Object.assign || 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 CustomSummaryItem = function CustomSummaryItem(_ref) {
-  var className = _ref.className,
-      metricOptions = _ref.metricOptions,
-      SummaryItemCustomLink = _ref.SummaryItemCustomLink,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/_react["default"].createElement(_box.Box, _extends({
-    padding: ['xsmall', 'small'],
-    className: (0, _classnames["default"])(className, _summaryModule["default"].summaryItemLink)
-  }, props, {
-    as: SummaryItemCustomLink
-  }, metricOptions.link));
-};
-
-CustomSummaryItem.propTypes = {
-  className: _propTypes["default"].string,
-  metricOptions: _propTypes["default"].shape({
-    link: _propTypes["default"].any // eslint-disable-line react/forbid-prop-types
-
-  }).isRequired,
-  SummaryItemCustomLink: _propTypes["default"].elementType.isRequired
-};
-CustomSummaryItem.defaultProps = {
-  className: ''
+var getSourceMetricId = function getSourceMetricId(fullMetricId) {
+  return fullMetricId.split('.').slice(1).join('.');
 };
 
-var Summary = function Summary(_ref2) {
-  var className = _ref2.className,
-      size = _ref2.size,
-      keys = _ref2.keys,
-      data = _ref2.data,
-      loading = _ref2.loading,
-      showSummaryItemDelta = _ref2.showSummaryItemDelta,
-      SummaryItemCustomLink = _ref2.summaryItemLink;
+var Summary = function Summary(_ref) {
+  var className = _ref.className,
+      size = _ref.size,
+      keys = _ref.keys,
+      data = _ref.data,
+      budgets = _ref.budgets,
+      loading = _ref.loading,
+      showSummaryItemDelta = _ref.showSummaryItemDelta,
+      SummaryItemCustomLink = _ref.summaryItemLink;
   return /*#__PURE__*/_react["default"].createElement(_box.Box, {
     outline: true,
     className: (0, _classnames["default"])(_summaryModule["default"].root, className)
   }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     className: _summaryModule["default"].items
-  }, Array.from(_utils.METRIC_COMPONENT_LINKS).filter(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 1),
-        metricId = _ref4[0];
-
-    return keys.includes(metricId);
-  }).map(function (_ref5) {
-    var _ref6 = _slicedToArray(_ref5, 2),
-        metricId = _ref6[0],
-        metricOptions = _ref6[1];
-
-    return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
-      as: CustomSummaryItem,
-      className: _summaryModule["default"].item,
-      metricOptions: metricOptions,
-      SummaryItemCustomLink: SummaryItemCustomLink,
-      size: size,
+  }, Array.from(_utils.METRIC_COMPONENT_LINKS).filter(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 1),
+        metricId = _ref3[0];
+
+    return keys.includes(getSourceMetricId(metricId));
+  }).map(function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+        metricId = _ref5[0],
+        metricOptions = _ref5[1];
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
       key: metricId,
+      className: _summaryModule["default"].item
+    }, /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
+      size: size,
       id: metricId,
       data: (0, _get2["default"])(data, metricId),
+      budget: (0, _get2["default"])(budgets, getSourceMetricId(metricId)),
       loading: loading,
       showMetricDescription: true,
       showDelta: showSummaryItemDelta && metricOptions.showDelta !== false
-    });
+    }), !loading && /*#__PURE__*/_react["default"].createElement(SummaryItemCustomLink, _extends({}, metricOptions.link, {
+      className: _summaryModule["default"].readMore
+    }), /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+      className: _summaryModule["default"].readMoreIcon,
+      glyph: _icon.Icon.ICONS.ARROW_RIGHT_CIRLCE
+    })));
   })));
 };
 
@@ -120,6 +97,7 @@ exports.Summary = Summary;
 Summary.defaultProps = {
   className: '',
   data: null,
+  budgets: null,
   loading: false,
   size: '',
   keys: _constants.METRICS_WEBPACK_GENERAL,
@@ -130,10 +108,10 @@ Summary.propTypes = {
   className: _propTypes["default"].string,
   size: _propTypes["default"].string,
   keys: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  data: _propTypes["default"].shape(_defineProperty({}, _propTypes["default"].string, _propTypes["default"].shape({
-    baseline: _propTypes["default"].number,
-    current: _propTypes["default"].number
-  }))),
+  data: _propTypes["default"].object,
+  // eslint-disable-line react/forbid-prop-types
+  budgets: _propTypes["default"].object,
+  // eslint-disable-line react/forbid-prop-types
   loading: _propTypes["default"].bool,
   showSummaryItemDelta: _propTypes["default"].bool,
   summaryItemLink: _propTypes["default"].elementType

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

@@ -3,35 +3,52 @@
   overflow: auto;
 }
 
-.items {}
-
 .item {
+  padding: var(--space-small);
   flex: 1 0 25%; /* force equal sizes */
   position: relative;
   z-index: 1;
 }
 
-.item:focus-visible {
-  background: var(--color-highlight);
-  outline: none;
-}
-
 .item::before {
   content: '';
   display: block;
   width: 1px;
   position: absolute;
   left: -1px;
-  top: var(--space-xsmall);
-  bottom: var(--space-xsmall);
+  top: var(--space-small);
+  bottom: var(--space-small);
   background: var(--color-outline);
 }
 
-.item:hover {
-  background: var(--color-highlight);
+.readMore {
+  display: block;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: var(--space-small);
+  color: var(--color-text-ultra-light);
+  transition: var(--transition-out);
+}
+
+.readMore:hover,
+.readMore:focus {
+  color: var(--color-primary);
+  transition: var(--transition-in);
+}
+
+.readMoreIcon {
+  display: block;
+}
+
+/** hover state */
+.readMore {
+  opacity: 0;
 }
 
-.summaryItemLink {
-  color: inherit;
-  text-decoration: none;
+.item:hover .readMore,
+.item:active .readMore,
+.item:focus .readMore {
+  opacity: 1;
+  transition: var(--transition-in);
 }

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

@@ -41,6 +41,35 @@ stories.add('default', function () {
     data: MULTIPLE_JOBS[0].summary
   });
 });
+stories.add('budgets', function () {
+  return /*#__PURE__*/_react["default"].createElement(_.Summary, {
+    data: MULTIPLE_JOBS[0].summary,
+    budgets: {
+      webpack: {
+        totalSizeByTypeALL: {
+          value: MULTIPLE_JOBS[0].summary.webpack.totalSizeByTypeALL,
+          budget: 1024 * 1024,
+          overBudget: false
+        },
+        totalInitialSizeJS: {
+          value: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeJS,
+          budget: 512 * 1024,
+          overBudget: true
+        },
+        totalInitialSizeCSS: {
+          value: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeCSS,
+          budget: 50 * 1024,
+          overBudget: false
+        },
+        chunkCount: {
+          value: MULTIPLE_JOBS[0].summary.webpack.chunkCount,
+          budget: 50,
+          overBudget: false
+        }
+      }
+    }
+  });
+});
 stories.add('custom keys', function () {
   return /*#__PURE__*/_react["default"].createElement(_.Summary, {
     keys: _constants.METRICS_WEBPACK_ASSETS,

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

@@ -25,9 +25,11 @@ var _metric = require("../metric");
 
 var _delta = require("../delta");
 
+var _budgetInfo = require("../budget-info");
+
 var _summaryItemModule = _interopRequireDefault(require("./summary-item.module.css"));
 
-var _excluded = ["className", "as", "size", "id", "data", "loading", "showDelta", "showMetricDescription"];
+var _excluded = ["className", "as", "size", "id", "data", "loading", "showDelta", "showMetricDescription", "budget"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -37,7 +39,7 @@ 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 MetricInfo = function MetricInfo(_ref) {
+var MetricInfoPopover = function MetricInfoPopover(_ref) {
   var description = _ref.description,
       url = _ref.url;
 
@@ -55,11 +57,11 @@ var MetricInfo = function MetricInfo(_ref) {
   }, "Read more")));
 };
 
-MetricInfo.propTypes = {
+MetricInfoPopover.propTypes = {
   description: _propTypes["default"].string.isRequired,
   url: _propTypes["default"].string
 };
-MetricInfo.defaultProps = {
+MetricInfoPopover.defaultProps = {
   url: ''
 };
 
@@ -72,6 +74,7 @@ var SummaryItem = function SummaryItem(_ref2) {
       loading = _ref2.loading,
       showDelta = _ref2.showDelta,
       showMetricDescription = _ref2.showMetricDescription,
+      budget = _ref2.budget,
       props = _objectWithoutProperties(_ref2, _excluded);
 
   var _ref3 = data || {
@@ -84,7 +87,7 @@ var SummaryItem = function SummaryItem(_ref2) {
   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], showMetricDescription && _summaryItemModule["default"].showMetricDescription, showMetricDescriptionTooltip && _summaryItemModule["default"].showMetricDescription, showDelta && _summaryItemModule["default"].showDelta);
+  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: "xxsmall",
     as: Component,
@@ -93,10 +96,16 @@ 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(_popover.Popover, {
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: _summaryItemModule["default"].titleLabel
+  }, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
     className: _summaryItemModule["default"].icon,
     icon: "help"
-  }, /*#__PURE__*/_react["default"].createElement(MetricInfo, metric))), /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, !loading ? /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
+  }, /*#__PURE__*/_react["default"].createElement(MetricInfoPopover, metric)), budget && /*#__PURE__*/_react["default"].createElement(_budgetInfo.BudgetInfo, {
+    className: _summaryItemModule["default"].budgetInfo,
+    metric: metric,
+    budget: budget
+  })), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
     className: _summaryItemModule["default"].currentMetric,
     value: current,
     formatter: metric.formatter,
@@ -106,13 +115,13 @@ var SummaryItem = function SummaryItem(_ref2) {
     className: _summaryItemModule["default"].delta,
     displayValue: runInfo.displayDeltaPercentage,
     deltaType: runInfo.deltaType
-  })) : /*#__PURE__*/_react["default"].createElement(_skeleton.Skeleton, {
-    className: (0, _classnames["default"])(_summaryItemModule["default"].currentMetric, _summaryItemModule["default"].loading)
-  }), !loading ? /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
+  })), /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
     className: _summaryItemModule["default"].baselineMetric,
     value: baseline,
     formatter: metric.formatter
-  }) : /*#__PURE__*/_react["default"].createElement(_skeleton.Skeleton, {
+  })) : /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_skeleton.Skeleton, {
+    className: (0, _classnames["default"])(_summaryItemModule["default"].currentMetric, _summaryItemModule["default"].loading)
+  }), /*#__PURE__*/_react["default"].createElement(_skeleton.Skeleton, {
     className: (0, _classnames["default"])(_summaryItemModule["default"].baselineMetric, _summaryItemModule["default"].loading)
   })));
 };
@@ -125,7 +134,8 @@ SummaryItem.defaultProps = {
   size: 'medium',
   loading: false,
   showMetricDescription: false,
-  showDelta: true
+  showDelta: true,
+  budget: undefined
 };
 SummaryItem.propTypes = {
   /** Adopted child class name */
@@ -151,5 +161,12 @@ SummaryItem.propTypes = {
   showMetricDescription: _propTypes["default"].bool,
 
   /** Show delta */
-  showDelta: _propTypes["default"].bool
+  showDelta: _propTypes["default"].bool,
+
+  /** Budget data */
+  budget: _propTypes["default"].shape({
+    value: _propTypes["default"].number,
+    budget: _propTypes["default"].number,
+    overBudget: _propTypes["default"].bool
+  })
 };