@bundle-stats/ui 3.3.1-beta.8 → 3.3.2

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Standard = exports.SizeLarge = exports.ShowMetricDescription = exports.ShowDeltaFalse = exports.Loading = exports.BudgetSuccess = exports.BudgetError = void 0;
+exports["default"] = exports.Standard = exports.SizeLarge = exports.ShowMetricDescription = exports.ShowDeltaFalse = exports.Loading = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,68 +13,70 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var _default = {
   title: 'Components/SummaryItem',
-  component: _summaryItem.SummaryItem,
-  decorators: [function (Story) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      style: {
-        maxWidth: '320px'
-      }
-    }, /*#__PURE__*/_react["default"].createElement(Story, null));
-  }],
-  args: {
+  component: _summaryItem.SummaryItem
+};
+exports["default"] = _default;
+
+var Standard = function Standard() {
+  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
     loading: false,
-    id: 'webpack.totalSizeByTypeALL',
+    id: "webpack.totalSizeByTypeALL",
     data: {
       current: 120 * 1000,
       baseline: 100 * 1000
     }
-  }
+  });
 };
-exports["default"] = _default;
 
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, args);
+exports.Standard = Standard;
+
+var SizeLarge = function SizeLarge() {
+  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
+    size: "large",
+    loading: false,
+    id: "webpack.totalSizeByTypeALL",
+    data: {
+      current: 120 * 1000,
+      baseline: 100 * 1000
+    }
+  });
 };
 
-var Standard = Template.bind();
-exports.Standard = Standard;
-var SizeLarge = Template.bind();
 exports.SizeLarge = SizeLarge;
-SizeLarge.args = {
-  size: 'large'
+
+var ShowMetricDescription = function ShowMetricDescription() {
+  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
+    loading: false,
+    id: "webpack.totalSizeByTypeALL",
+    data: {
+      current: 120 * 1000,
+      baseline: 100 * 1000
+    },
+    showMetricDescription: true
+  });
 };
-var ShowMetricDescription = Template.bind();
+
 exports.ShowMetricDescription = ShowMetricDescription;
-ShowMetricDescription.args = {
-  showMetricDescription: true
+
+var ShowDeltaFalse = function ShowDeltaFalse() {
+  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
+    loading: false,
+    id: "webpack.totalSizeByTypeALL",
+    data: {
+      current: 120 * 1000,
+      baseline: 0
+    },
+    showDelta: false
+  });
 };
-var ShowDeltaFalse = Template.bind();
+
 exports.ShowDeltaFalse = ShowDeltaFalse;
-ShowDeltaFalse.args = {
-  showDelta: false
-};
-var BudgetError = Template.bind();
-exports.BudgetError = BudgetError;
-BudgetError.args = {
-  showMetricDescription: true,
-  budget: {
-    currentValue: 120 * 1000,
-    budgetValue: 100 * 1000,
-    failed: true
-  }
-};
-var BudgetSuccess = Template.bind();
-exports.BudgetSuccess = BudgetSuccess;
-BudgetSuccess.args = {
-  showMetricDescription: true,
-  budget: {
-    currentValue: 120 * 1000,
-    budgetValue: 120 * 1024,
-    failed: false
-  }
+
+var Loading = function Loading() {
+  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
+    loading: true,
+    id: "webpack.totalSizeByTypeALL"
+  });
 };
-var Loading = Template.bind();
-exports.Loading = Loading;
-Loading.args = {
-  loading: true
-};
+
+exports.Loading = Loading;

package/lib/constants.js

@@ -52,11 +52,11 @@ var ASSETS_SIZES_FILE_TYPE_MAP = _utils.FILE_TYPES.reduce(function (agg, fileTyp
 }, {});
 
 exports.ASSETS_SIZES_FILE_TYPE_MAP = ASSETS_SIZES_FILE_TYPE_MAP;
-var METRICS_WEBPACK_GENERAL = ['totalSizeByTypeALL', 'totalInitialSizeJS', 'totalInitialSizeCSS', 'cacheInvalidation'];
+var METRICS_WEBPACK_GENERAL = ['webpack.totalSizeByTypeALL', 'webpack.totalInitialSizeJS', 'webpack.totalInitialSizeCSS', 'webpack.cacheInvalidation'];
 exports.METRICS_WEBPACK_GENERAL = METRICS_WEBPACK_GENERAL;
-var METRICS_WEBPACK_ASSETS = ['assetCount', 'chunkCount'];
+var METRICS_WEBPACK_ASSETS = ['webpack.assetCount', 'webpack.chunkCount'];
 exports.METRICS_WEBPACK_ASSETS = METRICS_WEBPACK_ASSETS;
-var METRICS_WEBPACK_MODULES = ['moduleCount', 'duplicateModulesCount', 'duplicateCode'];
+var METRICS_WEBPACK_MODULES = ['webpack.moduleCount', 'webpack.duplicateModulesCount', 'webpack.duplicateCode'];
 exports.METRICS_WEBPACK_MODULES = METRICS_WEBPACK_MODULES;
-var METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];
+var METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];
 exports.METRICS_WEBPACK_PACKAGES = METRICS_WEBPACK_PACKAGES;

package/lib/ui/alert/alert.js

@@ -15,27 +15,17 @@ var _box = require("../../layout/box");
 
 var _alertModule = _interopRequireDefault(require("./alert.module.css"));
 
-var _excluded = ["className", "kind", "children"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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 _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 Alert = function Alert(props) {
   var className = props.className,
       kind = props.kind,
-      children = props.children,
-      restProps = _objectWithoutProperties(props, _excluded);
-
-  return /*#__PURE__*/_react["default"].createElement(_box.Box, _extends({
+      children = props.children;
+  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
     padding: ['xsmall', 'small'],
     outline: true,
     className: (0, _classnames["default"])(_alertModule["default"].root, className, _alertModule["default"][kind])
-  }, restProps), children);
+  }, children);
 };
 
 exports.Alert = Alert;

package/lib/ui/icon/icon.js

@@ -24,13 +24,11 @@ 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 ICONS = {
-  ALERT_CIRCLE: 'alert-circle',
   ARROW: 'arrow',
   ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
   CANCEL: 'cancel',
   CLOSE: 'close',
   CLOCK: 'clock',
-  CHECK_CIRCLE: 'check-circle',
   COMMIT: 'commit',
   FILTER: 'filter',
   HELP: 'help',

package/lib-esm/app/app.js

@@ -8,7 +8,6 @@ import { METRICS_WEBPACK_ASSETS, METRICS_WEBPACK_GENERAL, METRICS_WEBPACK_MODULE
 import { Box } from '../layout/box';
 import { Container } from '../ui/container';
 import { DuplicatePackagesWarning } from '../components/duplicate-packages-warning';
-import { BudgetInsights } from '../components/budget-insights';
 import { Summary } from '../components/summary';
 import { BundleAssets } from '../components/bundle-assets';
 import { BundleAssetsTotalsChartBars } from '../components/bundle-assets-totals-chart-bars';
@@ -54,6 +53,7 @@ const Layout = _ref => {
 
 Layout.propTypes = {
   jobs: PropTypes.arrayOf(PropTypes.object),
+  // eslint-disable-line react/forbid-prop-types
   version: PropTypes.string
 };
 Layout.defaultProps = {
@@ -78,12 +78,11 @@ const JobsProvider = _ref2 => {
 };
 
 JobsProvider.propTypes = {
-  jobs: PropTypes.arrayOf(PropTypes.object).isRequired
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired // eslint-disable-line react/forbid-prop-types
+
 };
 
 const OverviewContent = () => {
-  var _jobs$0$insights, _jobs$0$insights$webp;
-
   const {
     jobs
   } = useContext(JobsContext);
@@ -93,15 +92,10 @@ const OverviewContent = () => {
   const duplicatePackagesInsights = Boolean(duplicatePackagesCount.current || duplicatePackagesCount.baseline);
   return /*#__PURE__*/React.createElement(Stack, {
     space: "medium"
-  }, duplicatePackagesInsights && /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
-    space: "small"
-  }, /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
+  }, duplicatePackagesInsights && /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
     duplicatePackagesCount: duplicatePackagesCount,
     showDelta: jobs.length > 1
-  }), /*#__PURE__*/React.createElement(BudgetInsights, {
-    source: "webpack",
-    budgets: (_jobs$0$insights = jobs[0].insights) == null ? void 0 : (_jobs$0$insights$webp = _jobs$0$insights.webpack) == null ? void 0 : _jobs$0$insights$webp.budgets
-  }))), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
+  })), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
     space: "small"
   }, /*#__PURE__*/React.createElement(TotalSizeTypeTitle, null), /*#__PURE__*/React.createElement(BundleAssetsTotalsChartBars, {
     jobs: jobs
@@ -112,7 +106,7 @@ const OverviewContent = () => {
 };
 
 const AssetsContent = () => {
-  var _jobs$, _jobs$0$insights2, _jobs$0$insights2$web;
+  var _jobs$;
 
   const [bundleStatsState, bundleStatsSetState] = useComponentQueryState(COMPONENT.BUNDLE_ASSETS);
   const {
@@ -123,7 +117,6 @@ const AssetsContent = () => {
   }, /*#__PURE__*/React.createElement(Summary, {
     keys: METRICS_WEBPACK_ASSETS,
     data: jobs == null ? void 0 : (_jobs$ = jobs[0]) == null ? void 0 : _jobs$.summary,
-    budgets: (_jobs$0$insights2 = jobs[0].insights) == null ? void 0 : (_jobs$0$insights2$web = _jobs$0$insights2.webpack) == null ? void 0 : _jobs$0$insights2$web.budgets,
     showSummaryItemDelta: (jobs == null ? void 0 : jobs.length) !== 1
   }), /*#__PURE__*/React.createElement(Box, {
     outline: true
@@ -134,7 +127,7 @@ const AssetsContent = () => {
 };
 
 const ModulesContent = () => {
-  var _jobs$2, _jobs$0$insights3, _jobs$0$insights3$web;
+  var _jobs$2;
 
   const [bundleModulesState, bundleModulesSetState] = useComponentQueryState(COMPONENT.BUNDLE_MODULES);
   const {
@@ -145,7 +138,6 @@ const ModulesContent = () => {
   }, /*#__PURE__*/React.createElement(Summary, {
     keys: METRICS_WEBPACK_MODULES,
     data: jobs == null ? void 0 : (_jobs$2 = jobs[0]) == null ? void 0 : _jobs$2.summary,
-    budgets: (_jobs$0$insights3 = jobs[0].insights) == null ? void 0 : (_jobs$0$insights3$web = _jobs$0$insights3.webpack) == null ? void 0 : _jobs$0$insights3$web.budgets,
     showSummaryItemDelta: (jobs == null ? void 0 : jobs.length) !== 1
   }), /*#__PURE__*/React.createElement(Box, {
     outline: true
@@ -156,7 +148,7 @@ const ModulesContent = () => {
 };
 
 const PackagesContent = () => {
-  var _jobs$3, _jobs$0$insights4, _jobs$0$insights4$web;
+  var _jobs$3;
 
   const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(COMPONENT.BUNDLE_PACKAGES);
   const {
@@ -167,7 +159,6 @@ const PackagesContent = () => {
   }, /*#__PURE__*/React.createElement(Summary, {
     keys: METRICS_WEBPACK_PACKAGES,
     data: jobs == null ? void 0 : (_jobs$3 = jobs[0]) == null ? void 0 : _jobs$3.summary,
-    budgets: (_jobs$0$insights4 = jobs[0].insights) == null ? void 0 : (_jobs$0$insights4$web = _jobs$0$insights4.webpack) == null ? void 0 : _jobs$0$insights4$web.budgets,
     showSummaryItemDelta: (jobs == null ? void 0 : jobs.length) !== 1
   }), /*#__PURE__*/React.createElement(Box, {
     outline: true
@@ -179,8 +170,6 @@ const PackagesContent = () => {
 };
 
 const AppComponent = _ref3 => {
-  var _jobs$0$insights5, _jobs$0$insights5$web;
-
   let {
     version,
     jobs
@@ -205,7 +194,6 @@ const AppComponent = _ref3 => {
     size: "large",
     keys: METRICS_WEBPACK_GENERAL,
     data: jobs[0].summary,
-    budgets: (_jobs$0$insights5 = jobs[0].insights) == null ? void 0 : (_jobs$0$insights5$web = _jobs$0$insights5.webpack) == null ? void 0 : _jobs$0$insights5$web.budgets,
     showSummaryItemDelta: jobs.length !== 1
   })), /*#__PURE__*/React.createElement(Container, {
     className: css.tabsContainer

package/lib-esm/app/app.stories.js

@@ -28,28 +28,7 @@ const JOBS = 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-esm/app/header/header.js

@@ -21,7 +21,8 @@ export const Header = _ref => {
 };
 Header.propTypes = {
   className: PropTypes.string,
-  jobs: PropTypes.arrayOf(PropTypes.object)
+  jobs: PropTypes.arrayOf(PropTypes.object) // eslint-disable-line react/forbid-prop-types
+
 };
 Header.defaultProps = {
   className: '',

package/lib-esm/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-esm/components/bundle-assets/bundle-assets.js

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

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

@@ -1,52 +1,35 @@
-import _get from "lodash/get";
-
 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); }
 
-import React, { useCallback, useMemo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { getBundleAssetsFileTypeComponentLink } from '@bundle-stats/utils';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
-import { FlexStack } from '../../layout/flex-stack';
 import { MetricsTable } from '../metrics-table';
 import { ComponentLink } from '../component-link';
-import { BudgetInfo } from '../budget-info';
-import css from './bundle-assets-totals-table.module.css';
 export const BundleAssetsTotalsTable = _ref => {
-  var _jobs$0$insights, _jobs$0$insights$webp;
-
   let {
     className,
     jobs,
     customComponentLink: CustomComponentLink,
     ...restProps
   } = _ref;
-  const items = useMemo(() => webpack.compareBySection.sizes(jobs), [jobs]);
-  const budgets = (_jobs$0$insights = jobs[0].insights) == null ? void 0 : (_jobs$0$insights$webp = _jobs$0$insights.webpack) == null ? void 0 : _jobs$0$insights$webp.budgets;
-  const renderRowHeader = useCallback(item => {
+  const items = webpack.compareBySection.sizes(jobs);
+
+  const renderRowHeader = item => {
     const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
     const {
       section,
       title,
       params
     } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
-    const [_, ...metricSlugs] = item.key.split('.');
-    const metricKey = metricSlugs.join('.');
-
-    const budget = _get(budgets, metricKey);
-
     return /*#__PURE__*/React.createElement(CustomComponentLink, {
       section: section,
       title: title,
       params: params
-    }, /*#__PURE__*/React.createElement(FlexStack, {
-      space: "xxsmall",
-      className: css.itemTitleText
-    }, /*#__PURE__*/React.createElement("span", null, item.label), budget && /*#__PURE__*/React.createElement(BudgetInfo, {
-      metricId: item.key,
-      budgetInsight: budget
-    })));
-  }, [CustomComponentLink]);
+    }, item.label);
+  };
+
   return /*#__PURE__*/React.createElement(MetricsTable, _extends({
     className: className,
     runs: jobs,

package/lib-esm/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-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js

@@ -31,22 +31,4 @@ EmptyBaseline.args = {
   jobs: createJobs([{
     webpack: currentStats
   }, null])
-};
-export const WithBudgets = Template.bind();
-WithBudgets.args = {
-  jobs: createJobs([{
-    webpack: currentStats
-  }, {
-    webpack: baselineStats
-  }], {
-    webpack: {
-      budgets: [{
-        metric: 'sizes.totalSizeByTypeJS',
-        value: 2 * 1024 * 1024
-      }, {
-        metric: 'sizes.totalSizeByTypeCSS',
-        value: 20 * 1024
-      }]
-    }
-  })
 };

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

@@ -121,7 +121,7 @@ export const BundleModules = _ref2 => {
       disabled: jobs.length <= 1
     },
     [MODULE_FILTERS.DUPLICATED]: {
-      label: 'Duplicated',
+      label: 'Duplicate',
       defaultValue: filters[MODULE_FILTERS.DUPLICATED],
       disabled: jobs.length <= 1
     },

package/lib-esm/components/index.js

@@ -4,7 +4,6 @@ export { BundleAssetsTotalsTable } from './bundle-assets-totals-table';
 export { BundleAssetsTotalsChartBars } from './bundle-assets-totals-chart-bars';
 export { BundlePackages } from './bundle-packages';
 export { BundleModules } from './bundle-modules';
-export { BudgetInsights } from './budget-insights';
 export { ComponentLink } from './component-link';
 export { DuplicatePackagesWarning } from './duplicate-packages-warning';
 export { Delta } from './delta';

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

@@ -13,16 +13,12 @@ import { FlexStack } from '../../layout/flex-stack';
 import { ComponentLink } from '../component-link';
 import { SummaryItem } from '../summary-item';
 import css from './summary.module.css';
-
-const getSourceMetricId = fullMetricId => fullMetricId.split('.').slice(1).join('.');
-
 export const Summary = _ref => {
   let {
     className,
     size,
     keys,
     data,
-    budgets,
     loading,
     showSummaryItemDelta,
     summaryItemLink: SummaryItemCustomLink
@@ -34,7 +30,7 @@ export const Summary = _ref => {
     className: css.items
   }, Array.from(METRIC_COMPONENT_LINKS).filter(_ref2 => {
     let [metricId] = _ref2;
-    return keys.includes(getSourceMetricId(metricId));
+    return keys.includes(metricId);
   }).map(_ref3 => {
     let [metricId, metricOptions] = _ref3;
     return /*#__PURE__*/React.createElement("div", {
@@ -44,7 +40,6 @@ export const Summary = _ref => {
       size: size,
       id: metricId,
       data: _get(data, metricId),
-      budget: _get(budgets, getSourceMetricId(metricId)),
       loading: loading,
       showMetricDescription: true,
       showDelta: showSummaryItemDelta && metricOptions.showDelta !== false
@@ -59,7 +54,6 @@ export const Summary = _ref => {
 Summary.defaultProps = {
   className: '',
   data: null,
-  budgets: null,
   loading: false,
   size: '',
   keys: METRICS_WEBPACK_GENERAL,
@@ -70,10 +64,12 @@ Summary.propTypes = {
   className: PropTypes.string,
   size: PropTypes.string,
   keys: PropTypes.arrayOf(PropTypes.string),
-  data: PropTypes.object,
-  // eslint-disable-line react/forbid-prop-types
-  budgets: PropTypes.object,
-  // eslint-disable-line react/forbid-prop-types
+  data: PropTypes.shape({
+    [PropTypes.string]: PropTypes.shape({
+      baseline: PropTypes.number,
+      current: PropTypes.number
+    })
+  }),
   loading: PropTypes.bool,
   showSummaryItemDelta: PropTypes.bool,
   summaryItemLink: PropTypes.elementType

package/lib-esm/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-esm/components/summary/summary.stories.js

@@ -21,33 +21,6 @@ stories.addDecorator(getWrapperDecorator());
 stories.add('default', () => /*#__PURE__*/React.createElement(Summary, {
   data: MULTIPLE_JOBS[0].summary
 }));
-stories.add('budgets', () => /*#__PURE__*/React.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', () => /*#__PURE__*/React.createElement(Summary, {
   keys: METRICS_WEBPACK_ASSETS,
   data: MULTIPLE_JOBS[0].summary

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

@@ -11,7 +11,6 @@ import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
 import { Metric } from '../metric';
 import { Delta } from '../delta';
-import { BudgetInfo } from '../budget-info';
 import css from './summary-item.module.css';
 
 const MetricInfo = _ref => {
@@ -44,7 +43,6 @@ export const SummaryItem = _ref2 => {
     loading,
     showDelta,
     showMetricDescription,
-    budget,
     ...props
   } = _ref2;
   const {
@@ -66,18 +64,12 @@ export const SummaryItem = _ref2 => {
     as: "h3",
     space: "xxxsmall",
     className: css.title
-  }, /*#__PURE__*/React.createElement("span", {
-    className: css.titleLabel
-  }, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(HoverCard, {
+  }, /*#__PURE__*/React.createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(HoverCard, {
     className: css.icon,
     label: /*#__PURE__*/React.createElement(Icon, {
       glyph: "help"
     })
-  }, /*#__PURE__*/React.createElement(MetricInfo, metric)), budget && /*#__PURE__*/React.createElement(BudgetInfo, {
-    className: css.budgetInfo,
-    metricId: id,
-    budgetInsight: budget
-  })), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
+  }, /*#__PURE__*/React.createElement(MetricInfo, metric))), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
     className: css.currentMetric,
     value: current,
     formatter: metric.formatter,
@@ -104,8 +96,7 @@ SummaryItem.defaultProps = {
   size: 'medium',
   loading: false,
   showMetricDescription: false,
-  showDelta: true,
-  budget: undefined
+  showDelta: true
 };
 SummaryItem.propTypes = {
   /** Adopted child class name */
@@ -131,12 +122,5 @@ SummaryItem.propTypes = {
   showMetricDescription: PropTypes.bool,
 
   /** Show delta */
-  showDelta: PropTypes.bool,
-
-  /** Budget insight data */
-  budget: PropTypes.shape({
-    currentBalue: PropTypes.number,
-    budgetValue: PropTypes.number,
-    failed: PropTypes.bool
-  })
+  showDelta: PropTypes.bool
 };