@bundle-stats/ui 3.3.0-alpha.0 → 3.3.0-alpha.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.3.0-alpha.1](https://github.com/relative-ci/bundle-stats/compare/v3.3.0-alpha.0...v3.3.0-alpha.1) (2021-12-19)
+
+
+### Bug Fixes
+
+* **utils:** Budgets - take biggerIsBetter in consideration ([3df8abc](https://github.com/relative-ci/bundle-stats/commit/3df8abc2bcd27c8e56d62412749c6c9f2c02feba))
+
+
+
+
+
 # [3.3.0-alpha.0](https://github.com/relative-ci/bundle-stats/compare/v3.2.2...v3.3.0-alpha.0) (2021-12-17)
 
 

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

@@ -1,5 +1,7 @@
 "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
 });
@@ -11,41 +13,66 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _utils = require("@bundle-stats/utils");
+
+var budgetsInsightsTransformer = _interopRequireWildcard(require("@bundle-stats/utils/lib-esm/transformers/budgets-insights"));
+
 var _icon = require("../../ui/icon");
 
 var _tooltip = require("../../ui/tooltip");
 
 var _budgetInfoModule = _interopRequireDefault(require("./budget-info.module.css"));
 
+var _INSIGHT_TYPE_MAP;
+
+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 _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; }
+
+var INSIGHT_TYPE_MAP = (_INSIGHT_TYPE_MAP = {}, _defineProperty(_INSIGHT_TYPE_MAP, _utils.InsightType.SUCCESS, {
+  className: _budgetInfoModule["default"].success,
+  glyph: _icon.Icon.ICONS.CHECK_CIRCLE
+}), _defineProperty(_INSIGHT_TYPE_MAP, _utils.InsightType.ERROR, {
+  className: _budgetInfoModule["default"].error,
+  glyph: _icon.Icon.ICONS.ALERT_CIRCLE
+}), _defineProperty(_INSIGHT_TYPE_MAP, _utils.InsightType.WARNING, {
+  className: _budgetInfoModule["default"].warning,
+  glyph: _icon.Icon.ICONS.WARNING
+}), _INSIGHT_TYPE_MAP);
+
 var BudgetInfo = function BudgetInfo(_ref) {
   var _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      budget = _ref.budget,
-      metric = _ref.metric;
-  var rootClassName = (0, _classnames["default"])(_budgetInfoModule["default"].root, budget.failed ? _budgetInfoModule["default"].over : _budgetInfoModule["default"].under, className);
+      metricId = _ref.metricId,
+      budgetInsight = _ref.budgetInsight;
+  var budgetInsightInfo = budgetsInsightsTransformer.getInfo(metricId, budgetInsight);
+  var _INSIGHT_TYPE_MAP$bud = INSIGHT_TYPE_MAP[budgetInsightInfo.type],
+      insightTypeClassName = _INSIGHT_TYPE_MAP$bud.className,
+      glyph = _INSIGHT_TYPE_MAP$bud.glyph;
+  var rootClassName = (0, _classnames["default"])(_budgetInfoModule["default"].root, insightTypeClassName, className);
+  var messageData = budgetInsightInfo.message.data;
   return /*#__PURE__*/_react["default"].createElement(_tooltip.Tooltip, {
     className: rootClassName,
-    title: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("strong", null, metric.label), " is ".concat(budget.failed ? 'over' : 'under', " "), metric.formatter(budget.budgetValue), " budget")
+    title: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("strong", null, messageData.metricLabel), " value (", /*#__PURE__*/_react["default"].createElement("strong", null, messageData.currentValue), ") is ".concat(messageData.diffLabel, " "), /*#__PURE__*/_react["default"].createElement("strong", null, messageData.budgetValue), " budget ")
   }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
     className: _budgetInfoModule["default"].icon,
-    glyph: budget.failed ? _icon.Icon.ICONS.ALERT_CIRCLE : _icon.Icon.ICONS.CHECK_CIRCLE,
+    glyph: glyph,
     size: "medium"
   }));
 };
 
 exports.BudgetInfo = BudgetInfo;
 BudgetInfo.propTypes = {
-  budget: _propTypes["default"].shape({
+  metricId: _propTypes["default"].string.isRequired,
+  budgetInsight: _propTypes["default"].shape({
     currentValue: _propTypes["default"].number,
     budgetValue: _propTypes["default"].number,
     failed: _propTypes["default"].bool
   }).isRequired,
-  metric: _propTypes["default"].shape({
-    label: _propTypes["default"].string,
-    formatter: _propTypes["default"].func
-  }).isRequired,
   className: _propTypes["default"].string
 };
 BudgetInfo.defaultProps = {

package/lib/components/budget-info/budget-info.module.css

@@ -3,26 +3,38 @@
   line-height: 1em;
 }
 
-/* Budget over */
-.over .icon {
-  color: var(--color-danger-light);
+/* Budget error */
+.error .icon {
+  color: var(--color-danger);
 }
 
-.over .icon:hover,
-.over .icon:focus,
-.over .icon:active
+.error .icon:hover,
+.error .icon:focus,
+.error .icon:active
 {
-  color: var(--color-danger);
+  color: var(--color-danger-light);
 }
 
-/* Budget under */
-.under .icon {
+/* Budget success */
+.success .icon {
+  color: var(--color-success);
+}
+
+.success .icon:hover,
+.success .icon:focus,
+.success .icon:active
+{
   color: var(--color-success-light);
 }
 
-.under .icon:hover,
-.under .icon:focus,
-.under .icon:active
+/* Budget warning */
+.warning .icon {
+  color: var(--color-warning-dark);
+}
+
+.warning .icon:hover,
+.warning .icon:focus,
+.warning .icon:active
 {
-  color: var(--color-success);
+  color: var(--color-warning);
 }

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

@@ -14,29 +14,31 @@ var stories = (0, _react2.storiesOf)('Components/BudgetInfo', module);
 stories.addDecorator((0, _stories.getWrapperDecorator)());
 stories.add('default', function () {
   return /*#__PURE__*/_react["default"].createElement(_.BudgetInfo, {
-    budget: {
-      budget: 300,
-      value: 250,
-      overBudget: false
-    },
-    metric: {
-      formatter: function formatter(v) {
-        return v;
-      }
+    metricId: "webpack.assetCount",
+    budgetInsight: {
+      budgetValue: 300,
+      currentValue: 250,
+      failed: false
     }
   });
 });
-stories.add('over', function () {
+stories.add('error', function () {
   return /*#__PURE__*/_react["default"].createElement(_.BudgetInfo, {
-    budget: {
-      budget: 300,
-      value: 350,
-      overBudget: true
-    },
-    metric: {
-      formatter: function formatter(v) {
-        return v;
-      }
+    metricId: "webpack.assetCount",
+    budgetInsight: {
+      budgetValue: 300,
+      currentValue: 350,
+      failed: true
+    }
+  });
+});
+stories.add('warning', function () {
+  return /*#__PURE__*/_react["default"].createElement(_.BudgetInfo, {
+    metricId: "webpack.assetCount",
+    budgetInsight: {
+      budgetValue: 300,
+      currentValue: 300,
+      failed: false
     }
   });
 });

package/lib/components/budget-insights/budget-insights.js

@@ -15,6 +15,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _utils = require("@bundle-stats/utils");
 
+var budgetsInsightsTransformer = _interopRequireWildcard(require("@bundle-stats/utils/lib-esm/transformers/budgets-insights"));
+
 var _box = require("../../layout/box");
 
 var _stack = require("../../layout/stack");
@@ -51,29 +53,27 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 var Budget = function Budget(props) {
   var className = props.className,
-      metricKey = props.metricKey,
-      CustomLink = props.CustomLink,
-      failed = props.failed,
-      budgetValue = props.budgetValue;
-  var metric = (0, _utils.getGlobalMetricType)(metricKey);
+      metricId = props.metricId,
+      budgetInsight = props.budgetInsight,
+      CustomLink = props.CustomLink;
 
-  var componentLinkOptions = _utils.METRIC_COMPONENT_LINKS.get(metricKey);
+  var componentLinkOptions = _utils.METRIC_COMPONENT_LINKS.get(metricId);
 
+  var budgetInsightInfo = budgetsInsightsTransformer.getInfo(metricId, budgetInsight);
+  var messageData = budgetInsightInfo.message.data;
   return /*#__PURE__*/_react["default"].createElement(CustomLink, _extends({
     className: (0, _classnames["default"])(_budgetInsightsModule["default"].budget, className)
-  }, componentLinkOptions === null || componentLinkOptions === void 0 ? void 0 : componentLinkOptions.link), /*#__PURE__*/_react["default"].createElement("span", {
-    className: _budgetInsightsModule["default"].budgetLabel
-  }, metric.label), " is ".concat(failed ? 'over' : 'under', " "), /*#__PURE__*/_react["default"].createElement("span", {
-    className: _budgetInsightsModule["default"].budgetValue
-  }, metric.formatter(budgetValue)), " budget");
+  }, componentLinkOptions === null || componentLinkOptions === void 0 ? void 0 : componentLinkOptions.link), /*#__PURE__*/_react["default"].createElement("strong", null, messageData.metricLabel), " value (", /*#__PURE__*/_react["default"].createElement("strong", null, messageData.currentValue), ") is ".concat(messageData.diffLabel, " "), /*#__PURE__*/_react["default"].createElement("strong", null, messageData.budgetValue), " budget ");
 };
 
 Budget.propTypes = {
   className: _propTypes["default"].string,
-  metricKey: _propTypes["default"].string.isRequired,
-  failed: _propTypes["default"].bool.isRequired,
-  currentValue: _propTypes["default"].number.isRequired,
-  budgetValue: _propTypes["default"].number.isRequired,
+  metricId: _propTypes["default"].string.isRequired,
+  budgetInsight: _propTypes["default"].shape({
+    currentValue: _propTypes["default"].number.isRequired,
+    budgetValue: _propTypes["default"].number.isRequired,
+    failed: _propTypes["default"].bool.isRequired
+  }).isRequired,
   CustomLink: _propTypes["default"].elementType.isRequired
 };
 Budget.defaultProps = {
@@ -123,12 +123,12 @@ var BudgetsGroup = function BudgetsGroup(props) {
         key = _ref2[0],
         budget = _ref2[1];
 
-    return /*#__PURE__*/_react["default"].createElement(Budget, _extends({
+    return /*#__PURE__*/_react["default"].createElement(Budget, {
       key: key,
-      source: source,
-      metricKey: "".concat(source, ".").concat(key),
+      metricId: "".concat(source, ".").concat(key),
+      budgetInsight: budget,
       CustomLink: CustomLink
-    }, budget));
+    });
   }))));
 };
 

package/lib/components/budget-insights/budget-insights.stories.js

@@ -32,44 +32,44 @@ Default.args = {
   source: 'webpack',
   budgets: {
     totalSizeByTypeALL: {
-      value: 2097917,
-      budget: 2097152,
-      overBudget: true
+      currentValue: 2097917,
+      budgetValue: 2097152,
+      failed: true
     },
     totalInitialSizeJS: {
-      value: 1265645,
-      budget: 524288,
-      overBudget: true
+      currentValue: 1265645,
+      budgetValue: 524288,
+      failed: true
     },
     totalInitialSizeCSS: {
-      value: 48866,
-      budget: 51200,
-      overBudget: false
+      currentValue: 48866,
+      budgetValue: 51200,
+      failed: false
     },
     chunkCount: {
-      value: 12,
-      budget: 50,
-      overBudget: false
+      currentValue: 12,
+      budgetValue: 50,
+      failed: false
     },
     moduleCount: {
-      value: 1059,
-      budget: 2000,
-      overBudget: false
+      currentValue: 1059,
+      budgetValue: 2000,
+      failed: false
     },
     duplicatePackagesCount: {
-      value: 13,
-      budget: 5,
-      overBudget: true
+      currentValue: 13,
+      budgetValue: 5,
+      failed: true
     },
     'sizes.totalSizeByTypeJS': {
-      value: 1981470,
-      budget: 2097152,
-      overBudget: false
+      currentValue: 1981470,
+      budgetValue: 2097152,
+      failed: false
     },
     'sizes.totalSizeByTypeCSS': {
-      value: 56091,
-      budget: 20480,
-      overBudget: true
+      currentValue: 56091,
+      budgetValue: 20480,
+      failed: true
     }
   }
 };
@@ -79,14 +79,14 @@ FailedBudgets.args = {
   source: 'webpack',
   budgets: {
     totalSizeByTypeALL: {
-      value: 2097917,
-      budget: 2097152,
-      overBudget: true
+      currentValue: 2097917,
+      budgetValue: 2097152,
+      failed: true
     },
     totalInitialSizeJS: {
-      value: 1265645,
-      budget: 524288,
-      overBudget: true
+      currentValue: 1265645,
+      budgetValue: 524288,
+      failed: true
     }
   }
 };
@@ -96,9 +96,9 @@ SingleBudget.args = {
   source: 'webpack',
   budgets: {
     totalInitialSizeJS: {
-      value: 524288,
-      budget: 1265645,
-      overBudget: false
+      currentValue: 524288,
+      budgetValue: 1265645,
+      failed: false
     }
   }
 };

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

@@ -72,7 +72,6 @@ var BundleAssetsTotalsTable = function BundleAssetsTotalsTable(_ref) {
 
     var metricKey = metricSlugs.join('.');
     var budget = (0, _get2["default"])(budgets, metricKey);
-    var metric = webpack.getMetricType(metricKey);
     return /*#__PURE__*/_react["default"].createElement(CustomComponentLink, {
       section: section,
       title: title,
@@ -81,8 +80,8 @@ var BundleAssetsTotalsTable = function BundleAssetsTotalsTable(_ref) {
       space: "xxsmall",
       className: _bundleAssetsTotalsTableModule["default"].itemTitleText
     }, /*#__PURE__*/_react["default"].createElement("span", null, item.label), budget && /*#__PURE__*/_react["default"].createElement(_budgetInfo.BudgetInfo, {
-      budget: budget,
-      metric: metric
+      metricId: item.key,
+      budgetInsight: budget
     })));
   }, [CustomComponentLink]);
   return /*#__PURE__*/_react["default"].createElement(_metricsTable.MetricsTable, {

package/lib/components/index.js

@@ -9,6 +9,12 @@ 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() {
@@ -148,6 +154,8 @@ 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

@@ -80,7 +80,7 @@ var Summary = function Summary(_ref) {
       size: size,
       id: metricId,
       data: (0, _get2["default"])(data, metricId),
-      budget: (0, _get2["default"])(budgets, getSourceMetricId(metricId)),
+      budget: (0, _get2["default"])(budgets, metricId),
       loading: loading,
       showMetricDescription: true,
       showDelta: showSummaryItemDelta && metricOptions.showDelta !== false

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

@@ -47,24 +47,24 @@ stories.add('budgets', function () {
     budgets: {
       webpack: {
         totalSizeByTypeALL: {
-          value: MULTIPLE_JOBS[0].summary.webpack.totalSizeByTypeALL,
-          budget: 1024 * 1024,
-          overBudget: false
+          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalSizeByTypeALL.current,
+          budgetValue: 1024 * 1024,
+          failed: false
         },
         totalInitialSizeJS: {
-          value: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeJS,
-          budget: 512 * 1024,
-          overBudget: true
+          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeJS.current,
+          budgetValue: 512 * 1024,
+          failed: true
         },
         totalInitialSizeCSS: {
-          value: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeCSS,
-          budget: 50 * 1024,
-          overBudget: false
+          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeCSS.current,
+          budgetValue: 50 * 1024,
+          failed: false
         },
         chunkCount: {
-          value: MULTIPLE_JOBS[0].summary.webpack.chunkCount,
-          budget: 50,
-          overBudget: false
+          currentValue: MULTIPLE_JOBS[0].summary.webpack.chunkCount.current,
+          budgetValue: 50,
+          failed: false
         }
       }
     }

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

@@ -103,8 +103,8 @@ var SummaryItem = function SummaryItem(_ref2) {
     icon: "help"
   }, /*#__PURE__*/_react["default"].createElement(MetricInfoPopover, metric)), budget && /*#__PURE__*/_react["default"].createElement(_budgetInfo.BudgetInfo, {
     className: _summaryItemModule["default"].budgetInfo,
-    metric: metric,
-    budget: budget
+    metricId: id,
+    budgetInsight: budget
   })), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
     className: _summaryItemModule["default"].currentMetric,
     value: current,
@@ -163,10 +163,10 @@ SummaryItem.propTypes = {
   /** Show delta */
   showDelta: _propTypes["default"].bool,
 
-  /** Budget data */
+  /** Budget insight data */
   budget: _propTypes["default"].shape({
-    value: _propTypes["default"].number,
-    budget: _propTypes["default"].number,
-    overBudget: _propTypes["default"].bool
+    currentBalue: _propTypes["default"].number,
+    budgetValue: _propTypes["default"].number,
+    failed: _propTypes["default"].bool
   })
 };

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.BudgetUnder = exports.BudgetOver = void 0;
+exports["default"] = exports.Standard = exports.SizeLarge = exports.ShowMetricDescription = exports.ShowDeltaFalse = exports.Loading = exports.BudgetSuccess = exports.BudgetError = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -53,24 +53,24 @@ exports.ShowDeltaFalse = ShowDeltaFalse;
 ShowDeltaFalse.args = {
   showDelta: false
 };
-var BudgetOver = Template.bind();
-exports.BudgetOver = BudgetOver;
-BudgetOver.args = {
+var BudgetError = Template.bind();
+exports.BudgetError = BudgetError;
+BudgetError.args = {
   showMetricDescription: true,
   budget: {
-    value: 120 * 1000,
-    budget: 100 * 1000,
-    overBudget: true
+    currentValue: 120 * 1000,
+    budgetValue: 100 * 1000,
+    failed: true
   }
 };
-var BudgetUnder = Template.bind();
-exports.BudgetUnder = BudgetUnder;
-BudgetUnder.args = {
+var BudgetSuccess = Template.bind();
+exports.BudgetSuccess = BudgetSuccess;
+BudgetSuccess.args = {
   showMetricDescription: true,
   budget: {
-    value: 120 * 1000,
-    budget: 120 * 1024,
-    overBudget: false
+    currentValue: 120 * 1000,
+    budgetValue: 120 * 1024,
+    failed: false
   }
 };
 var Loading = Template.bind();

package/lib-esm/components/budget-info/budget-info.js

@@ -1,35 +1,56 @@
 import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
+import { InsightType } from '@bundle-stats/utils';
+import * as budgetsInsightsTransformer from '@bundle-stats/utils/lib-esm/transformers/budgets-insights';
 import { Icon } from '../../ui/icon';
 import { Tooltip } from '../../ui/tooltip';
 import css from './budget-info.module.css';
+const INSIGHT_TYPE_MAP = {
+  [InsightType.SUCCESS]: {
+    className: css.success,
+    glyph: Icon.ICONS.CHECK_CIRCLE
+  },
+  [InsightType.ERROR]: {
+    className: css.error,
+    glyph: Icon.ICONS.ALERT_CIRCLE
+  },
+  [InsightType.WARNING]: {
+    className: css.warning,
+    glyph: Icon.ICONS.WARNING
+  }
+};
 export const BudgetInfo = _ref => {
   let {
     className = '',
-    budget,
-    metric
+    metricId,
+    budgetInsight
   } = _ref;
-  const rootClassName = cx(css.root, budget.failed ? css.over : css.under, className);
+  const budgetInsightInfo = budgetsInsightsTransformer.getInfo(metricId, budgetInsight);
+  const {
+    className: insightTypeClassName,
+    glyph
+  } = INSIGHT_TYPE_MAP[budgetInsightInfo.type];
+  const rootClassName = cx(css.root, insightTypeClassName, className);
+  const {
+    data: messageData
+  } = budgetInsightInfo.message;
   return /*#__PURE__*/React.createElement(Tooltip, {
     className: rootClassName,
-    title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("strong", null, metric.label), ` is ${budget.failed ? 'over' : 'under'} `, metric.formatter(budget.budgetValue), ` budget`)
+    title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("strong", null, messageData.metricLabel), ` value (`, /*#__PURE__*/React.createElement("strong", null, messageData.currentValue), `) is ${messageData.diffLabel} `, /*#__PURE__*/React.createElement("strong", null, messageData.budgetValue), ` budget `)
   }, /*#__PURE__*/React.createElement(Icon, {
     className: css.icon,
-    glyph: budget.failed ? Icon.ICONS.ALERT_CIRCLE : Icon.ICONS.CHECK_CIRCLE,
+    glyph: glyph,
     size: "medium"
   }));
 };
 BudgetInfo.propTypes = {
-  budget: PropTypes.shape({
+  metricId: PropTypes.string.isRequired,
+  budgetInsight: PropTypes.shape({
     currentValue: PropTypes.number,
     budgetValue: PropTypes.number,
     failed: PropTypes.bool
   }).isRequired,
-  metric: PropTypes.shape({
-    label: PropTypes.string,
-    formatter: PropTypes.func
-  }).isRequired,
   className: PropTypes.string
 };
 BudgetInfo.defaultProps = {

package/lib-esm/components/budget-info/budget-info.module.css

@@ -3,26 +3,38 @@
   line-height: 1em;
 }
 
-/* Budget over */
-.over .icon {
-  color: var(--color-danger-light);
+/* Budget error */
+.error .icon {
+  color: var(--color-danger);
 }
 
-.over .icon:hover,
-.over .icon:focus,
-.over .icon:active
+.error .icon:hover,
+.error .icon:focus,
+.error .icon:active
 {
-  color: var(--color-danger);
+  color: var(--color-danger-light);
 }
 
-/* Budget under */
-.under .icon {
+/* Budget success */
+.success .icon {
+  color: var(--color-success);
+}
+
+.success .icon:hover,
+.success .icon:focus,
+.success .icon:active
+{
   color: var(--color-success-light);
 }
 
-.under .icon:hover,
-.under .icon:focus,
-.under .icon:active
+/* Budget warning */
+.warning .icon {
+  color: var(--color-warning-dark);
+}
+
+.warning .icon:hover,
+.warning .icon:focus,
+.warning .icon:active
 {
-  color: var(--color-success);
+  color: var(--color-warning);
 }