@bundle-stats/ui 3.3.1-beta.8 → 3.3.3-beta.1

package/lib/app/app.js

@@ -23,8 +23,6 @@ var _container = require("../ui/container");
 
 var _duplicatePackagesWarning = require("../components/duplicate-packages-warning");
 
-var _budgetInsights = require("../components/budget-insights");
-
 var _summary = require("../components/summary");
 
 var _bundleAssets = require("../components/bundle-assets");
@@ -109,6 +107,7 @@ var Layout = function Layout(_ref) {
 
 Layout.propTypes = {
   jobs: _propTypes["default"].arrayOf(_propTypes["default"].object),
+  // eslint-disable-line react/forbid-prop-types
   version: _propTypes["default"].string
 };
 Layout.defaultProps = {
@@ -135,12 +134,11 @@ var JobsProvider = function JobsProvider(_ref2) {
 };
 
 JobsProvider.propTypes = {
-  jobs: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired
+  jobs: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired // eslint-disable-line react/forbid-prop-types
+
 };
 
 var OverviewContent = function OverviewContent() {
-  var _jobs$0$insights, _jobs$0$insights$webp;
-
   var _useContext = (0, _react.useContext)(JobsContext),
       jobs = _useContext.jobs;
 
@@ -148,15 +146,10 @@ var OverviewContent = function OverviewContent() {
   var duplicatePackagesInsights = Boolean(duplicatePackagesCount.current || duplicatePackagesCount.baseline);
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "medium"
-  }, duplicatePackagesInsights && /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-    space: "small"
-  }, /*#__PURE__*/_react["default"].createElement(_duplicatePackagesWarning.DuplicatePackagesWarning, {
+  }, duplicatePackagesInsights && /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_duplicatePackagesWarning.DuplicatePackagesWarning, {
     duplicatePackagesCount: duplicatePackagesCount,
     showDelta: jobs.length > 1
-  }), /*#__PURE__*/_react["default"].createElement(_budgetInsights.BudgetInsights, {
-    source: "webpack",
-    budgets: (_jobs$0$insights = jobs[0].insights) === null || _jobs$0$insights === void 0 ? void 0 : (_jobs$0$insights$webp = _jobs$0$insights.webpack) === null || _jobs$0$insights$webp === void 0 ? void 0 : _jobs$0$insights$webp.budgets
-  }))), /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+  })), /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "small"
   }, /*#__PURE__*/_react["default"].createElement(_totalSizeTypeTitle.TotalSizeTypeTitle, null), /*#__PURE__*/_react["default"].createElement(_bundleAssetsTotalsChartBars.BundleAssetsTotalsChartBars, {
     jobs: jobs
@@ -167,7 +160,7 @@ var OverviewContent = function OverviewContent() {
 };
 
 var AssetsContent = function AssetsContent() {
-  var _jobs$, _jobs$0$insights2, _jobs$0$insights2$web;
+  var _jobs$;
 
   var _useComponentQuerySta = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_ASSETS),
       _useComponentQuerySta2 = _slicedToArray(_useComponentQuerySta, 2),
@@ -182,7 +175,6 @@ var AssetsContent = function AssetsContent() {
   }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
     keys: _constants.METRICS_WEBPACK_ASSETS,
     data: jobs === null || jobs === void 0 ? void 0 : (_jobs$ = jobs[0]) === null || _jobs$ === void 0 ? void 0 : _jobs$.summary,
-    budgets: (_jobs$0$insights2 = jobs[0].insights) === null || _jobs$0$insights2 === void 0 ? void 0 : (_jobs$0$insights2$web = _jobs$0$insights2.webpack) === null || _jobs$0$insights2$web === void 0 ? void 0 : _jobs$0$insights2$web.budgets,
     showSummaryItemDelta: (jobs === null || jobs === void 0 ? void 0 : jobs.length) !== 1
   }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
     outline: true
@@ -193,7 +185,7 @@ var AssetsContent = function AssetsContent() {
 };
 
 var ModulesContent = function ModulesContent() {
-  var _jobs$2, _jobs$0$insights3, _jobs$0$insights3$web;
+  var _jobs$2;
 
   var _useComponentQuerySta3 = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_MODULES),
       _useComponentQuerySta4 = _slicedToArray(_useComponentQuerySta3, 2),
@@ -208,7 +200,6 @@ var ModulesContent = function ModulesContent() {
   }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
     keys: _constants.METRICS_WEBPACK_MODULES,
     data: jobs === null || jobs === void 0 ? void 0 : (_jobs$2 = jobs[0]) === null || _jobs$2 === void 0 ? void 0 : _jobs$2.summary,
-    budgets: (_jobs$0$insights3 = jobs[0].insights) === null || _jobs$0$insights3 === void 0 ? void 0 : (_jobs$0$insights3$web = _jobs$0$insights3.webpack) === null || _jobs$0$insights3$web === void 0 ? void 0 : _jobs$0$insights3$web.budgets,
     showSummaryItemDelta: (jobs === null || jobs === void 0 ? void 0 : jobs.length) !== 1
   }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
     outline: true
@@ -219,7 +210,7 @@ var ModulesContent = function ModulesContent() {
 };
 
 var PackagesContent = function PackagesContent() {
-  var _jobs$3, _jobs$0$insights4, _jobs$0$insights4$web;
+  var _jobs$3;
 
   var _useComponentQuerySta5 = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_PACKAGES),
       _useComponentQuerySta6 = _slicedToArray(_useComponentQuerySta5, 2),
@@ -234,7 +225,6 @@ var PackagesContent = function PackagesContent() {
   }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
     keys: _constants.METRICS_WEBPACK_PACKAGES,
     data: jobs === null || jobs === void 0 ? void 0 : (_jobs$3 = jobs[0]) === null || _jobs$3 === void 0 ? void 0 : _jobs$3.summary,
-    budgets: (_jobs$0$insights4 = jobs[0].insights) === null || _jobs$0$insights4 === void 0 ? void 0 : (_jobs$0$insights4$web = _jobs$0$insights4.webpack) === null || _jobs$0$insights4$web === void 0 ? void 0 : _jobs$0$insights4$web.budgets,
     showSummaryItemDelta: (jobs === null || jobs === void 0 ? void 0 : jobs.length) !== 1
   }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
     outline: true
@@ -246,8 +236,6 @@ var PackagesContent = function PackagesContent() {
 };
 
 var AppComponent = function AppComponent(_ref3) {
-  var _jobs$0$insights5, _jobs$0$insights5$web;
-
   var version = _ref3.version,
       jobs = _ref3.jobs;
 
@@ -270,7 +258,6 @@ var AppComponent = function AppComponent(_ref3) {
     size: "large",
     keys: _constants.METRICS_WEBPACK_GENERAL,
     data: jobs[0].summary,
-    budgets: (_jobs$0$insights5 = jobs[0].insights) === null || _jobs$0$insights5 === void 0 ? void 0 : (_jobs$0$insights5$web = _jobs$0$insights5.webpack) === null || _jobs$0$insights5$web === void 0 ? void 0 : _jobs$0$insights5$web.budgets,
     showSummaryItemDelta: jobs.length !== 1
   })), /*#__PURE__*/_react["default"].createElement(_container.Container, {
     className: _appModule["default"].tabsContainer

package/lib/app/app.stories.js

@@ -48,28 +48,7 @@ var JOBS = (0, _utils.createJobs)([CURRENT_SOURCE, BASELINE_SOURCE], {
   webpack: {
     budgets: [{
       metric: 'totalSizeByTypeALL',
-      value: 2 * 1024 * 1024
-    }, {
-      metric: 'totalInitialSizeJS',
-      value: 512 * 1024
-    }, {
-      metric: 'totalInitialSizeCSS',
-      value: 50 * 1024
-    }, {
-      metric: 'chunkCount',
-      value: 50
-    }, {
-      metric: 'moduleCount',
-      value: 2000
-    }, {
-      metric: 'duplicatePackagesCount',
-      value: 5
-    }, {
-      metric: 'sizes.totalSizeByTypeJS',
-      value: 2 * 1024 * 1024
-    }, {
-      metric: 'sizes.totalSizeByTypeCSS',
-      value: 20 * 1024
+      value: 1024 * 1024
     }]
   }
 });

package/lib/app/header/header.js

@@ -36,7 +36,8 @@ var Header = function Header(_ref) {
 exports.Header = Header;
 Header.propTypes = {
   className: _propTypes["default"].string,
-  jobs: _propTypes["default"].arrayOf(_propTypes["default"].object)
+  jobs: _propTypes["default"].arrayOf(_propTypes["default"].object) // eslint-disable-line react/forbid-prop-types
+
 };
 Header.defaultProps = {
   className: '',

package/lib/assets/icons.svg

@@ -1,8 +1,4 @@
 <svg width="16" height="16">
-<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle" viewBox="0 0 24 24" id="alert-circle" xmlns="http://www.w3.org/2000/svg">
-<circle cx="12" cy="12" r="10"/>
-<path d="M12 8v4M12 16h.01"/>
-</symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 5v14M19 12l-7 7-7-7"/>
 </symbol>
@@ -14,10 +10,6 @@
 <circle cx="12" cy="12" r="10"/>
 <path d="M15 9l-6 6M9 9l6 6"/>
 </symbol>
-<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle" viewBox="0 0 24 24" id="check-circle" xmlns="http://www.w3.org/2000/svg">
-<path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
-<path d="M22 4L12 14.01l-3-3"/>
-</symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock" id="clock" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12" r="10"/>
 <path d="M12 6v6l4 2"/>

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

@@ -206,7 +206,8 @@ RowHeader.propTypes = {
     isChunk: _propTypes["default"].bool,
     isInitial: _propTypes["default"].bool,
     isEntry: _propTypes["default"].bool,
-    runs: _propTypes["default"].arrayOf(_propTypes["default"].object)
+    runs: _propTypes["default"].arrayOf(_propTypes["default"].object) // eslint-disable-line react/forbid-prop-types
+
   }).isRequired,
   chunks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     id: _propTypes["default"].string,

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

@@ -7,9 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BundleAssetsTotalsTable = void 0;
 
-var _get2 = _interopRequireDefault(require("lodash/get"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -19,16 +17,10 @@ var webpack = _interopRequireWildcard(require("@bundle-stats/utils/lib-esm/webpa
 
 var _constants = require("../../constants");
 
-var _flexStack = require("../../layout/flex-stack");
-
 var _metricsTable = require("../metrics-table");
 
 var _componentLink = require("../component-link");
 
-var _budgetInfo = require("../budget-info");
-
-var _bundleAssetsTotalsTableModule = _interopRequireDefault(require("./bundle-assets-totals-table.module.css"));
-
 var _excluded = ["className", "jobs", "customComponentLink"];
 
 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); }
@@ -39,35 +31,19 @@ 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 _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 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 BundleAssetsTotalsTable = function BundleAssetsTotalsTable(_ref) {
-  var _jobs$0$insights, _jobs$0$insights$webp;
-
   var className = _ref.className,
       jobs = _ref.jobs,
       CustomComponentLink = _ref.customComponentLink,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var items = (0, _react.useMemo)(function () {
-    return webpack.compareBySection.sizes(jobs);
-  }, [jobs]);
-  var budgets = (_jobs$0$insights = jobs[0].insights) === null || _jobs$0$insights === void 0 ? void 0 : (_jobs$0$insights$webp = _jobs$0$insights.webpack) === null || _jobs$0$insights$webp === void 0 ? void 0 : _jobs$0$insights$webp.budgets;
-  var renderRowHeader = (0, _react.useCallback)(function (item) {
+  var items = webpack.compareBySection.sizes(jobs);
+
+  var renderRowHeader = function renderRowHeader(item) {
     var fileType = _constants.ASSETS_SIZES_FILE_TYPE_MAP[item.key];
 
     var _getBundleAssetsFileT = (0, _utils.getBundleAssetsFileTypeComponentLink)(fileType, item.label),
@@ -75,25 +51,13 @@ var BundleAssetsTotalsTable = function BundleAssetsTotalsTable(_ref) {
         title = _getBundleAssetsFileT.title,
         params = _getBundleAssetsFileT.params;
 
-    var _item$key$split = item.key.split('.'),
-        _item$key$split2 = _toArray(_item$key$split),
-        _ = _item$key$split2[0],
-        metricSlugs = _item$key$split2.slice(1);
-
-    var metricKey = metricSlugs.join('.');
-    var budget = (0, _get2["default"])(budgets, metricKey);
     return /*#__PURE__*/_react["default"].createElement(CustomComponentLink, {
       section: section,
       title: title,
       params: params
-    }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-      space: "xxsmall",
-      className: _bundleAssetsTotalsTableModule["default"].itemTitleText
-    }, /*#__PURE__*/_react["default"].createElement("span", null, item.label), budget && /*#__PURE__*/_react["default"].createElement(_budgetInfo.BudgetInfo, {
-      metricId: item.key,
-      budgetInsight: budget
-    })));
-  }, [CustomComponentLink]);
+    }, item.label);
+  };
+
   return /*#__PURE__*/_react["default"].createElement(_metricsTable.MetricsTable, _extends({
     className: className,
     runs: jobs,

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

@@ -1,3 +1,3 @@
-.itemTitleText {
-  align-items: center;
+.title {
+  color: var(--color-text-light);
 }

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithBudgets = exports.SingleJob = exports.MultipleJobs = exports.EmptyBaseline = void 0;
+exports["default"] = exports.SingleJob = exports.MultipleJobs = exports.EmptyBaseline = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -52,23 +52,4 @@ 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

@@ -184,7 +184,7 @@ var BundleModules = function BundleModules(_ref2) {
     defaultValue: filters.changed,
     disabled: jobs.length <= 1
   }), _defineProperty(_objectSpread2, _utils.MODULE_FILTERS.DUPLICATED, {
-    label: 'Duplicated',
+    label: 'Duplicate',
     defaultValue: filters[_utils.MODULE_FILTERS.DUPLICATED],
     disabled: jobs.length <= 1
   }), _defineProperty(_objectSpread2, _utils.MODULE_SOURCE_TYPE, (_MODULE_SOURCE_TYPE = {

package/lib/components/index.js

@@ -9,12 +9,6 @@ Object.defineProperty(exports, "BrowsertimeTable", {
     return _browsertimeTable.BrowsertimeTable;
   }
 });
-Object.defineProperty(exports, "BudgetInsights", {
-  enumerable: true,
-  get: function get() {
-    return _budgetInsights.BudgetInsights;
-  }
-});
 Object.defineProperty(exports, "BundleAssets", {
   enumerable: true,
   get: function get() {
@@ -154,8 +148,6 @@ var _bundlePackages = require("./bundle-packages");
 
 var _bundleModules = require("./bundle-modules");
 
-var _budgetInsights = require("./budget-insights");
-
 var _componentLink = require("./component-link");
 
 var _duplicatePackagesWarning = require("./duplicate-packages-warning");

package/lib/components/summary/summary.js

@@ -31,6 +31,8 @@ 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 || 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,16 +47,11 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var getSourceMetricId = function getSourceMetricId(fullMetricId) {
-  return fullMetricId.split('.').slice(1).join('.');
-};
-
 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;
@@ -67,7 +64,7 @@ var Summary = function Summary(_ref) {
     var _ref3 = _slicedToArray(_ref2, 1),
         metricId = _ref3[0];
 
-    return keys.includes(getSourceMetricId(metricId));
+    return keys.includes(metricId);
   }).map(function (_ref4) {
     var _ref5 = _slicedToArray(_ref4, 2),
         metricId = _ref5[0],
@@ -80,7 +77,6 @@ var Summary = function Summary(_ref) {
       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
@@ -97,7 +93,6 @@ exports.Summary = Summary;
 Summary.defaultProps = {
   className: '',
   data: null,
-  budgets: null,
   loading: false,
   size: '',
   keys: _constants.METRICS_WEBPACK_GENERAL,
@@ -108,10 +103,10 @@ Summary.propTypes = {
   className: _propTypes["default"].string,
   size: _propTypes["default"].string,
   keys: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  data: _propTypes["default"].object,
-  // eslint-disable-line react/forbid-prop-types
-  budgets: _propTypes["default"].object,
-  // eslint-disable-line react/forbid-prop-types
+  data: _propTypes["default"].shape(_defineProperty({}, _propTypes["default"].string, _propTypes["default"].shape({
+    baseline: _propTypes["default"].number,
+    current: _propTypes["default"].number
+  }))),
   loading: _propTypes["default"].bool,
   showSummaryItemDelta: _propTypes["default"].bool,
   summaryItemLink: _propTypes["default"].elementType

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

@@ -4,7 +4,7 @@
 }
 
 .item {
-  padding: var(--space-small);
+  padding: var(--space-small) var(--space-xxlarge) var(--space-small) var(--space-small);
   flex: 1 0 25%; /* force equal sizes */
   position: relative;
   z-index: 1;

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

@@ -41,35 +41,6 @@ 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: {
-          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalSizeByTypeALL.current,
-          budgetValue: 1024 * 1024,
-          failed: false
-        },
-        totalInitialSizeJS: {
-          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeJS.current,
-          budgetValue: 512 * 1024,
-          failed: true
-        },
-        totalInitialSizeCSS: {
-          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeCSS.current,
-          budgetValue: 50 * 1024,
-          failed: false
-        },
-        chunkCount: {
-          currentValue: MULTIPLE_JOBS[0].summary.webpack.chunkCount.current,
-          budgetValue: 50,
-          failed: 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

@@ -27,11 +27,9 @@ 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", "budget"];
+var _excluded = ["className", "as", "size", "id", "data", "loading", "showDelta", "showMetricDescription"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -69,7 +67,6 @@ var SummaryItem = function SummaryItem(_ref2) {
       loading = _ref2.loading,
       showDelta = _ref2.showDelta,
       showMetricDescription = _ref2.showMetricDescription,
-      budget = _ref2.budget,
       props = _objectWithoutProperties(_ref2, _excluded);
 
   var _ref3 = data || {
@@ -91,18 +88,12 @@ var SummaryItem = function SummaryItem(_ref2) {
     as: "h3",
     space: "xxxsmall",
     className: _summaryItemModule["default"].title
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: _summaryItemModule["default"].titleLabel
-  }, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+  }, /*#__PURE__*/_react["default"].createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
     className: _summaryItemModule["default"].icon,
     label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
       glyph: "help"
     })
-  }, /*#__PURE__*/_react["default"].createElement(MetricInfo, metric)), budget && /*#__PURE__*/_react["default"].createElement(_budgetInfo.BudgetInfo, {
-    className: _summaryItemModule["default"].budgetInfo,
-    metricId: id,
-    budgetInsight: budget
-  })), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
+  }, /*#__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,
@@ -131,8 +122,7 @@ SummaryItem.defaultProps = {
   size: 'medium',
   loading: false,
   showMetricDescription: false,
-  showDelta: true,
-  budget: undefined
+  showDelta: true
 };
 SummaryItem.propTypes = {
   /** Adopted child class name */
@@ -158,12 +148,5 @@ SummaryItem.propTypes = {
   showMetricDescription: _propTypes["default"].bool,
 
   /** Show delta */
-  showDelta: _propTypes["default"].bool,
-
-  /** Budget insight data */
-  budget: _propTypes["default"].shape({
-    currentBalue: _propTypes["default"].number,
-    budgetValue: _propTypes["default"].number,
-    failed: _propTypes["default"].bool
-  })
+  showDelta: _propTypes["default"].bool
 };

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

@@ -1,8 +1,3 @@
-.root {
-  position: relative;
-  padding-right: var(--space-xlarge);
-}
-
 .title {
   align-items: center;
   color: var(--color-text-ultra-light);
@@ -13,12 +8,6 @@
   white-space: nowrap;
 }
 
-.budgetInfo {
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
 .currentMetric {
   display: block;
   color: var(--color-heading);