@bundle-stats/ui 3.2.9 → 3.4.0-alpha.1

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.4.0-alpha.0](https://github.com/relative-ci/bundle-stats/compare/v3.2.9...v3.4.0-alpha.0) (2022-03-12)
+
+
+### Bug Fixes
+
+* **ui:** Alert - allow to override props ([c9f85cd](https://github.com/relative-ci/bundle-stats/commit/c9f85cde563291da7de47f7c5ddaa7f2caa1d674))
+* **ui:** Summary - pass budget data to SummaryItem ([9023a19](https://github.com/relative-ci/bundle-stats/commit/9023a19d164cf8e5c6b7c23d086b689c938c67c8))
+* **utils:** Budgets - take biggerIsBetter in consideration ([b95b956](https://github.com/relative-ci/bundle-stats/commit/b95b95637a47cc266d4e4c254cb49f1a4f19794c))
+
+
+### Features
+
+* App - add BudgetInsights ([84a6698](https://github.com/relative-ci/bundle-stats/commit/84a669806f25a1f164055ab1cbca39dc1e19987a))
+* **ui:** App - pass budgets info to Summary ([d665805](https://github.com/relative-ci/bundle-stats/commit/d665805298e26d9771c017c0bddacc80dcc19f87))
+* **ui:** BudgetInsights component ([f097f38](https://github.com/relative-ci/bundle-stats/commit/f097f388147910b6abb69fc3398d04796102aad1))
+* **ui:** BundleAssetsTotalsTable - add budgets ([1a45ce8](https://github.com/relative-ci/bundle-stats/commit/1a45ce8a63f411b95a2a9092a13d45925e692062))
+* **ui:** Icon - add check-circle icon ([8ce4c40](https://github.com/relative-ci/bundle-stats/commit/8ce4c40d92759d1a898c2311026d52d311520451))
+* **ui:** Icon - alert-circle icon ([c571e57](https://github.com/relative-ci/bundle-stats/commit/c571e57405b4533cf55067f7ba71b944552579a5))
+* **ui:** SummaryItem - budgets ([105ed0e](https://github.com/relative-ci/bundle-stats/commit/105ed0ef693c0b26c44217189d2d3cb5c4547af5))
+
+
+### Performance Improvements
+
+* **ui:** BundleAssetsTotalsTable - use memo / callback ([f027cbc](https://github.com/relative-ci/bundle-stats/commit/f027cbcb59ff3890b2bf6db6b95d23c7c898bc6b))
+
+
+
+
+
 ## [3.2.8](https://github.com/relative-ci/bundle-stats/compare/v3.2.7...v3.2.8) (2022-03-10)
 
 **Note:** Version bump only for package @bundle-stats/ui

package/lib/app/app.js

@@ -23,6 +23,8 @@ 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");
@@ -137,6 +139,8 @@ JobsProvider.propTypes = {
 };
 
 var OverviewContent = function OverviewContent() {
+  var _jobs$0$insights, _jobs$0$insights$webp;
+
   var _useContext = (0, _react.useContext)(JobsContext),
       jobs = _useContext.jobs;
 
@@ -144,10 +148,15 @@ 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(_duplicatePackagesWarning.DuplicatePackagesWarning, {
+  }, duplicatePackagesInsights && /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+    space: "small"
+  }, /*#__PURE__*/_react["default"].createElement(_duplicatePackagesWarning.DuplicatePackagesWarning, {
     duplicatePackagesCount: duplicatePackagesCount,
     showDelta: jobs.length > 1
-  })), /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+  }), /*#__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, {
     space: "small"
   }, /*#__PURE__*/_react["default"].createElement(_totalSizeTypeTitle.TotalSizeTypeTitle, null), /*#__PURE__*/_react["default"].createElement(_bundleAssetsTotalsChartBars.BundleAssetsTotalsChartBars, {
     jobs: jobs
@@ -158,7 +167,7 @@ var OverviewContent = function OverviewContent() {
 };
 
 var AssetsContent = function AssetsContent() {
-  var _jobs$;
+  var _jobs$, _jobs$0$insights2, _jobs$0$insights2$web;
 
   var _useComponentQuerySta = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_ASSETS),
       _useComponentQuerySta2 = _slicedToArray(_useComponentQuerySta, 2),
@@ -173,6 +182,7 @@ 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
@@ -183,7 +193,7 @@ var AssetsContent = function AssetsContent() {
 };
 
 var ModulesContent = function ModulesContent() {
-  var _jobs$2;
+  var _jobs$2, _jobs$0$insights3, _jobs$0$insights3$web;
 
   var _useComponentQuerySta3 = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_MODULES),
       _useComponentQuerySta4 = _slicedToArray(_useComponentQuerySta3, 2),
@@ -198,6 +208,7 @@ 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
@@ -208,7 +219,7 @@ var ModulesContent = function ModulesContent() {
 };
 
 var PackagesContent = function PackagesContent() {
-  var _jobs$3;
+  var _jobs$3, _jobs$0$insights4, _jobs$0$insights4$web;
 
   var _useComponentQuerySta5 = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_PACKAGES),
       _useComponentQuerySta6 = _slicedToArray(_useComponentQuerySta5, 2),
@@ -223,6 +234,7 @@ 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
@@ -234,6 +246,8 @@ var PackagesContent = function PackagesContent() {
 };
 
 var AppComponent = function AppComponent(_ref3) {
+  var _jobs$0$insights5, _jobs$0$insights5$web;
+
   var version = _ref3.version,
       jobs = _ref3.jobs;
 
@@ -256,6 +270,7 @@ 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,7 +48,28 @@ var JOBS = (0, _utils.createJobs)([CURRENT_SOURCE, BASELINE_SOURCE], {
   webpack: {
     budgets: [{
       metric: 'totalSizeByTypeALL',
-      value: 1024 * 1024
+      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
     }]
   }
 });

package/lib/assets/icons/alert-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>

package/lib/assets/icons/check-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>

package/lib/assets/icons.svg

@@ -1,4 +1,8 @@
 <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>
@@ -10,6 +14,10 @@
 <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/budget-info/budget-info.js

@@ -0,0 +1,80 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BudgetInfo = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+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,
+      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, 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: glyph,
+    size: "medium"
+  }));
+};
+
+exports.BudgetInfo = BudgetInfo;
+BudgetInfo.propTypes = {
+  metricId: _propTypes["default"].string.isRequired,
+  budgetInsight: _propTypes["default"].shape({
+    currentValue: _propTypes["default"].number,
+    budgetValue: _propTypes["default"].number,
+    failed: _propTypes["default"].bool
+  }).isRequired,
+  className: _propTypes["default"].string
+};
+BudgetInfo.defaultProps = {
+  className: ''
+};

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

@@ -0,0 +1,40 @@
+.root {
+  display: inline-block;
+  line-height: 1em;
+}
+
+/* Budget error */
+.error .icon {
+  color: var(--color-danger);
+}
+
+.error .icon:hover,
+.error .icon:focus,
+.error .icon:active
+{
+  color: var(--color-danger-light);
+}
+
+/* Budget success */
+.success .icon {
+  color: var(--color-success);
+}
+
+.success .icon:hover,
+.success .icon:focus,
+.success .icon:active
+{
+  color: var(--color-success-light);
+}
+
+/* Budget warning */
+.warning .icon {
+  color: var(--color-warning-dark);
+}
+
+.warning .icon:hover,
+.warning .icon:focus,
+.warning .icon:active
+{
+  color: var(--color-warning);
+}

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

@@ -0,0 +1,44 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _stories = require("../../stories");
+
+var _ = require(".");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var stories = (0, _react2.storiesOf)('Components/BudgetInfo', module);
+stories.addDecorator((0, _stories.getWrapperDecorator)());
+stories.add('default', function () {
+  return /*#__PURE__*/_react["default"].createElement(_.BudgetInfo, {
+    metricId: "webpack.assetCount",
+    budgetInsight: {
+      budgetValue: 300,
+      currentValue: 250,
+      failed: false
+    }
+  });
+});
+stories.add('error', function () {
+  return /*#__PURE__*/_react["default"].createElement(_.BudgetInfo, {
+    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-info/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _budgetInfo = require("./budget-info");
+
+Object.keys(_budgetInfo).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _budgetInfo[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _budgetInfo[key];
+    }
+  });
+});

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

@@ -0,0 +1,200 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BudgetInsights = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _utils = require("@bundle-stats/utils");
+
+var budgetsInsightsTransformer = _interopRequireWildcard(require("@bundle-stats/utils/lib-esm/transformers/budgets-insights"));
+
+var _box = require("../../layout/box");
+
+var _stack = require("../../layout/stack");
+
+var _flexStack = require("../../layout/flex-stack");
+
+var _alert = require("../../ui/alert");
+
+var _icon = require("../../ui/icon");
+
+var _componentLink = require("../component-link");
+
+var _budgetInsightsModule = _interopRequireDefault(require("./budget-insights.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _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; }
+
+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); }
+
+var Budget = function Budget(props) {
+  var className = props.className,
+      metricId = props.metricId,
+      budgetInsight = props.budgetInsight,
+      CustomLink = props.CustomLink;
+
+  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("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,
+  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 = {
+  className: ''
+};
+
+var BudgetsGroup = function BudgetsGroup(props) {
+  var className = props.className,
+      kind = props.kind,
+      source = props.source,
+      budgets = props.budgets,
+      CustomLink = props.CustomLink;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showBudgets = _useState2[0],
+      setShowBudgets = _useState2[1];
+
+  var isFailed = kind === 'danger';
+  return /*#__PURE__*/_react["default"].createElement(_alert.Alert, {
+    kind: kind,
+    padding: "none",
+    className: (0, _classnames["default"])(_budgetInsightsModule["default"].group, _budgetInsightsModule["default"][kind], className)
+  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    padding: ['xsmall', 'small'],
+    className: _budgetInsightsModule["default"].groupHeader,
+    as: "button",
+    type: "button",
+    onClick: function onClick() {
+      return setShowBudgets(!showBudgets);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxsmall",
+    className: _budgetInsightsModule["default"].groupTitle
+  }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+    className: _budgetInsightsModule["default"].groupIcon,
+    glyph: isFailed ? _icon.Icon.ICONS.ALERT_CIRCLE : _icon.Icon.ICONS.CHECK_CIRCLE
+  }), /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, budgets.length), " budget ".concat(budgets.length > 1 ? 'checks' : 'check', " ").concat(isFailed ? 'failed' : 'passed')), /*#__PURE__*/_react["default"].createElement("span", {
+    className: _budgetInsightsModule["default"].groupTitleToggle
+  }, showBudgets ? 'hide' : 'show', " all"))), showBudgets && /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    padding: ['xsmall', 'small'],
+    className: _budgetInsightsModule["default"].groupContent
+  }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+    space: "none"
+  }, budgets.map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        budget = _ref2[1];
+
+    return /*#__PURE__*/_react["default"].createElement(Budget, {
+      key: key,
+      metricId: "".concat(source, ".").concat(key),
+      budgetInsight: budget,
+      CustomLink: CustomLink
+    });
+  }))));
+};
+
+BudgetsGroup.propTypes = {
+  className: _propTypes["default"].string,
+  kind: _propTypes["default"].oneOf(['success', 'danger']).isRequired,
+  source: _propTypes["default"].string.isRequired,
+  budgets: _propTypes["default"].object.isRequired,
+  // eslint-disable-line react/forbid-prop-types
+  CustomLink: _propTypes["default"].elementType.isRequired
+};
+BudgetsGroup.defaultProps = {
+  className: ''
+};
+
+var BudgetInsights = function BudgetInsights(props) {
+  var className = props.className,
+      source = props.source,
+      budgets = props.budgets,
+      CustomLink = props.CustomLink;
+
+  var _useMemo = (0, _react.useMemo)(function () {
+    var passed = [];
+    var failed = [];
+    Object.entries(budgets).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+          key = _ref4[0],
+          budget = _ref4[1];
+
+      if (budget.failed) {
+        failed.push([key, budget]);
+      } else {
+        passed.push([key, budget]);
+      }
+    });
+    return [failed, passed];
+  }, [budgets]),
+      _useMemo2 = _slicedToArray(_useMemo, 2),
+      failedBudgets = _useMemo2[0],
+      passedBudgets = _useMemo2[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+    className: className,
+    space: "xsmall"
+  }, failedBudgets.length > 0 && /*#__PURE__*/_react["default"].createElement(BudgetsGroup, {
+    kind: "danger",
+    source: source,
+    budgets: failedBudgets,
+    CustomLink: CustomLink
+  }), passedBudgets.length > 0 && /*#__PURE__*/_react["default"].createElement(BudgetsGroup, {
+    kind: "success",
+    source: source,
+    budgets: passedBudgets,
+    CustomLink: CustomLink
+  }));
+};
+
+exports.BudgetInsights = BudgetInsights;
+BudgetInsights.propTypes = {
+  className: _propTypes["default"].string,
+  source: _propTypes["default"].string.isRequired,
+  budgets: _propTypes["default"].object.isRequired,
+  // eslint-disable-line react/forbid-prop-types
+  CustomLink: _propTypes["default"].elementType
+};
+BudgetInsights.defaultProps = {
+  className: '',
+  CustomLink: _componentLink.ComponentLink
+};

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

@@ -0,0 +1,53 @@
+.groupHeader {
+  width: 100%;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: inherit;
+}
+
+.groupTitle {
+  width: 100%;
+  align-items: center;
+}
+
+.groupTitle:hover {
+  color: var(--color-text-dark);
+  text-decoration: underline;
+}
+
+.groupTitleToggle {
+  margin: 0 0 0 auto !important;
+}
+
+.danger .groupIcon {
+  color: var(--color-danger);
+}
+
+.success .groupIcon {
+  color: var(--color-success);
+}
+
+.groupContent {
+  padding-top: 0px;
+  background: transparent;
+}
+
+.budget {
+  display: block;
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.budgetLabel,
+.budgetValue {
+  color: var(--color-text-dark);
+  font-weight: 500;
+}
+
+.budget:hover,
+.budget:focus,
+.budget:active {
+  color: var(--color-text);
+  text-decoration: underline;
+}