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

package/CHANGELOG.md

@@ -3,39 +3,120 @@
 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)
+# [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
 
-* **utils:** Budgets - take biggerIsBetter in consideration ([3df8abc](https://github.com/relative-ci/bundle-stats/commit/3df8abc2bcd27c8e56d62412749c6c9f2c02feba))
+* **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
+
 
 
 
-# [3.3.0-alpha.0](https://github.com/relative-ci/bundle-stats/compare/v3.2.2...v3.3.0-alpha.0) (2021-12-17)
+
+## [3.2.7](https://github.com/relative-ci/bundle-stats/compare/v3.2.6...v3.2.7) (2022-03-10)
+
+
+### Bug Fixes
+
+* **ui:** App - consistent vertical spacing ([4f29d3d](https://github.com/relative-ci/bundle-stats/commit/4f29d3d47edc7f89858f0948d0cdc1e22ce5b157))
+* **ui:** HoverCard - prevent default on close ([9fae6a4](https://github.com/relative-ci/bundle-stats/commit/9fae6a4825d1a016e3b626168f73ca0a90213d10))
+* **ui:** MetricsTable - consistent toolbar spacing ([fcaf38d](https://github.com/relative-ci/bundle-stats/commit/fcaf38df698329bc00bc267e72289fec8064cc61))
+
+
+
+
+
+## [3.2.6](https://github.com/relative-ci/bundle-stats/compare/v3.2.5...v3.2.6) (2022-03-04)
 
 
 ### Bug Fixes
 
-* **ui:** Alert - allow to override props ([4d52999](https://github.com/relative-ci/bundle-stats/commit/4d52999e80427f95bac30d0123cc149566b54282))
+* **ui:** Add border-radius to flags ([4f7663b](https://github.com/relative-ci/bundle-stats/commit/4f7663b29a954cf1ace9caa9739acd9f37aa3b95))
+* **ui:** Box - add border-radius to outline ([bd78d20](https://github.com/relative-ci/bundle-stats/commit/bd78d2052db4b781afc3a1d9e8dd583986d0093d))
+* **ui:** Filters - fix border radius ([de014b5](https://github.com/relative-ci/bundle-stats/commit/de014b5d81b1e46a726789e93fa049e8577c2d4b))
+* **ui:** Footer - update border ([7c76df8](https://github.com/relative-ci/bundle-stats/commit/7c76df85090649189b4b52e1dace53c96466402d))
+* **ui:** HoverCard - align close icon ([bd179a8](https://github.com/relative-ci/bundle-stats/commit/bd179a8b74fd7627cc056f52ddeced95211a6ae4))
+* **ui:** Normlize border-radius usage ([e8a6b30](https://github.com/relative-ci/bundle-stats/commit/e8a6b302729112d75a82c74ef1d952fc639d16ab))
+* **ui:** SearchParams - trigger filter change correctly ([0c331d2](https://github.com/relative-ci/bundle-stats/commit/0c331d2704382cd72d42363db539107fe22ed2ee))
+* **ui:** SummaryItem - update vertical spacing ([b4c57dc](https://github.com/relative-ci/bundle-stats/commit/b4c57dc6692d496fc45b3f66515fa4357307ff12))
+* **ui:** Table - correct outline variation ([82804d1](https://github.com/relative-ci/bundle-stats/commit/82804d13a2016332042dd38a21a4a4b0dbb0c928))
+* **ui:** Table - remove last row bottom line ([9398a93](https://github.com/relative-ci/bundle-stats/commit/9398a936e1d937aed188f96ce56ebfa56f3af7d7))
 
 
 ### Features
 
-* App - add BudgetInsights ([4068e33](https://github.com/relative-ci/bundle-stats/commit/4068e334465f6eb624b92790da11306d711718f6))
-* **ui:** App - pass budgets info to Summary ([102a4c1](https://github.com/relative-ci/bundle-stats/commit/102a4c1b4a8ab445c1a39ba8d19fba88b0c259d5))
-* **ui:** BudgetInsights component ([4458395](https://github.com/relative-ci/bundle-stats/commit/44583958a83458285b896c5564b03df0960fb992))
-* **ui:** BundleAssetsTotalsTable - add budgets ([b2fa86e](https://github.com/relative-ci/bundle-stats/commit/b2fa86eb1ec2ad1e4ea183a4f4dee2eefa4cfddc))
-* **ui:** Icon - add check-circle icon ([1bc3707](https://github.com/relative-ci/bundle-stats/commit/1bc3707a868ca216da5b9e500ba0536d0163b168))
-* **ui:** Icon - alert-circle icon ([9ae82bc](https://github.com/relative-ci/bundle-stats/commit/9ae82bcac0ff55511eafb158322b571e09a4de60))
-* **ui:** SummaryItem - budgets ([591bb41](https://github.com/relative-ci/bundle-stats/commit/591bb414f7aa93c2e1f4208f1dfedffa037e5225))
+* **ui:** Add HoverCard component ([6ee79d5](https://github.com/relative-ci/bundle-stats/commit/6ee79d52bf5d02445e3cfca9f41841e5c710355f))
+* **ui:** Add Tag component ([f796f9c](https://github.com/relative-ci/bundle-stats/commit/f796f9c909703dab3a513059215a2ce24bc12244))
 
 
-### Performance Improvements
 
-* **ui:** BundleAssetsTotalsTable - use memo / callback ([22ec007](https://github.com/relative-ci/bundle-stats/commit/22ec00772b1b27d19d89a106fbcf93ac49b3d57e))
+
+
+## [3.2.5](https://github.com/relative-ci/bundle-stats/compare/v3.2.4...v3.2.5) (2022-02-15)
+
+
+### Bug Fixes
+
+* **ui:** Move separator to layout ([abc34e7](https://github.com/relative-ci/bundle-stats/commit/abc34e73a0ffb5ae2f4d52538d4f854e1c5857dc))
+* **ui:** Variables - increase outline contrast ([beacc32](https://github.com/relative-ci/bundle-stats/commit/beacc32cf98a49aa150d1820d68f140aebafbc6e))
+
+
+### Features
+
+* **ui:** Separator component ([1b9e56f](https://github.com/relative-ci/bundle-stats/commit/1b9e56f170834a0a111f8d19fab220d6e7f69095))
+
+
+
+
+
+## [3.2.4](https://github.com/relative-ci/bundle-stats/compare/v3.2.3...v3.2.4) (2022-01-17)
+
+
+### Bug Fixes
+
+* **ui:** Icon - center by default ([8acaf63](https://github.com/relative-ci/bundle-stats/commit/8acaf63273249cafe4a89e701a3afb4555037411))
+* **ui:** Icon - center by default ([889753c](https://github.com/relative-ci/bundle-stats/commit/889753c0feb236130a2707fbc352310ef07c7740))
+* **ui:** Remove popover component ([e07d7a9](https://github.com/relative-ci/bundle-stats/commit/e07d7a91640f67b4f99320e1af92f1092a6e610d))
+
+
+### Features
+
+* **ui:** Add hover card ([e27169e](https://github.com/relative-ci/bundle-stats/commit/e27169e4dd1e313f6903bd70f5ffc1e1cc147f9a))
+
+
+
+
+
+## [3.2.3](https://github.com/relative-ci/bundle-stats/compare/v3.2.2...v3.2.3) (2022-01-10)
+
+**Note:** Version bump only for package @bundle-stats/ui
 
 
 

package/lib/app/app.js

@@ -53,7 +53,8 @@ var _header = require("./header");
 
 var _appModule = _interopRequireDefault(require("./app.module.css"));
 
-var _excluded = ["jobs", "version"];
+var _excluded = ["jobs", "version"],
+    _excluded2 = ["jobs"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -115,28 +116,142 @@ Layout.defaultProps = {
   version: null
 };
 
-var AppComponent = function AppComponent(_ref2) {
-  var _insights$webpack;
+var JobsContext = /*#__PURE__*/_react["default"].createContext({
+  jobs: []
+});
+
+var JobsProvider = function JobsProvider(_ref2) {
+  var jobs = _ref2.jobs,
+      restProps = _objectWithoutProperties(_ref2, _excluded2);
+
+  var value = (0, _react.useMemo)(function () {
+    return {
+      jobs: jobs
+    };
+  }, [jobs]);
+  return /*#__PURE__*/_react["default"].createElement(JobsContext.Provider, _extends({
+    value: value
+  }, restProps));
+};
+
+JobsProvider.propTypes = {
+  jobs: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired
+};
+
+var OverviewContent = function OverviewContent() {
+  var _jobs$0$insights, _jobs$0$insights$webp;
+
+  var _useContext = (0, _react.useContext)(JobsContext),
+      jobs = _useContext.jobs;
+
+  var duplicatePackagesCount = jobs[0].summary.webpack.duplicatePackagesCount;
+  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, {
+    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, {
+    space: "small"
+  }, /*#__PURE__*/_react["default"].createElement(_totalSizeTypeTitle.TotalSizeTypeTitle, null), /*#__PURE__*/_react["default"].createElement(_bundleAssetsTotalsChartBars.BundleAssetsTotalsChartBars, {
+    jobs: jobs
+  }), /*#__PURE__*/_react["default"].createElement(_bundleAssetsTotalsTable.BundleAssetsTotalsTable, {
+    jobs: jobs,
+    outline: true
+  }))));
+};
 
-  var version = _ref2.version,
-      jobs = _ref2.jobs;
+var AssetsContent = function AssetsContent() {
+  var _jobs$, _jobs$0$insights2, _jobs$0$insights2$web;
 
   var _useComponentQuerySta = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_ASSETS),
       _useComponentQuerySta2 = _slicedToArray(_useComponentQuerySta, 2),
       bundleStatsState = _useComponentQuerySta2[0],
       bundleStatsSetState = _useComponentQuerySta2[1];
 
-  var _useComponentQuerySta3 = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_PACKAGES),
+  var _useContext2 = (0, _react.useContext)(JobsContext),
+      jobs = _useContext2.jobs;
+
+  return /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+    space: "medium"
+  }, /*#__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
+  }, /*#__PURE__*/_react["default"].createElement(_bundleAssets.BundleAssets, _extends({
+    jobs: jobs,
+    setState: bundleStatsSetState
+  }, bundleStatsState)))));
+};
+
+var ModulesContent = function ModulesContent() {
+  var _jobs$2, _jobs$0$insights3, _jobs$0$insights3$web;
+
+  var _useComponentQuerySta3 = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_MODULES),
       _useComponentQuerySta4 = _slicedToArray(_useComponentQuerySta3, 2),
-      bundlePackagesState = _useComponentQuerySta4[0],
-      bundlePackagesSetState = _useComponentQuerySta4[1];
+      bundleModulesState = _useComponentQuerySta4[0],
+      bundleModulesSetState = _useComponentQuerySta4[1];
+
+  var _useContext3 = (0, _react.useContext)(JobsContext),
+      jobs = _useContext3.jobs;
 
-  var _useComponentQuerySta5 = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_MODULES),
+  return /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+    space: "medium"
+  }, /*#__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
+  }, /*#__PURE__*/_react["default"].createElement(_bundleModules.BundleModules, _extends({
+    jobs: jobs,
+    setState: bundleModulesSetState
+  }, bundleModulesState)))));
+};
+
+var PackagesContent = function PackagesContent() {
+  var _jobs$3, _jobs$0$insights4, _jobs$0$insights4$web;
+
+  var _useComponentQuerySta5 = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_PACKAGES),
       _useComponentQuerySta6 = _slicedToArray(_useComponentQuerySta5, 2),
-      bundleModulesState = _useComponentQuerySta6[0],
-      bundleModulesSetState = _useComponentQuerySta6[1];
+      bundlePackagesState = _useComponentQuerySta6[0],
+      bundlePackagesSetState = _useComponentQuerySta6[1];
+
+  var _useContext4 = (0, _react.useContext)(JobsContext),
+      jobs = _useContext4.jobs;
+
+  return /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+    space: "medium"
+  }, /*#__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
+  }, /*#__PURE__*/_react["default"].createElement(_bundlePackages.BundlePackages, _extends({
+    jobs: jobs
+  }, bundlePackagesState, {
+    setState: bundlePackagesSetState
+  })))));
+};
+
+var AppComponent = function AppComponent(_ref3) {
+  var _jobs$0$insights5, _jobs$0$insights5$web;
+
+  var version = _ref3.version,
+      jobs = _ref3.jobs;
 
-  if (jobs.length === 0) {
+  if ((jobs === null || jobs === void 0 ? void 0 : jobs.length) === 0) {
     return /*#__PURE__*/_react["default"].createElement(Layout, {
       version: version
     }, /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement("div", {
@@ -144,15 +259,9 @@ var AppComponent = function AppComponent(_ref2) {
     }, _i18n["default"].NO_DATA)));
   }
 
-  var _useMemo = (0, _react.useMemo)(function () {
-    return jobs[0];
-  }, jobs),
-      summary = _useMemo.summary,
-      insights = _useMemo.insights;
-
-  var duplicatePackagesCount = summary.webpack.duplicatePackagesCount;
-  var duplicatePackagesInsights = Boolean(duplicatePackagesCount.current || duplicatePackagesCount.baseline);
-  return /*#__PURE__*/_react["default"].createElement(Layout, {
+  return /*#__PURE__*/_react["default"].createElement(JobsProvider, {
+    jobs: jobs
+  }, /*#__PURE__*/_react["default"].createElement(Layout, {
     jobs: jobs,
     version: version
   }, /*#__PURE__*/_react["default"].createElement(_container.Container, {
@@ -160,8 +269,8 @@ var AppComponent = function AppComponent(_ref2) {
   }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
     size: "large",
     keys: _constants.METRICS_WEBPACK_GENERAL,
-    data: summary,
-    budgets: insights === null || insights === void 0 ? void 0 : (_insights$webpack = insights.webpack) === null || _insights$webpack === void 0 ? void 0 : _insights$webpack.budgets,
+    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
@@ -188,94 +297,20 @@ var AppComponent = function AppComponent(_ref2) {
   }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Switch, null, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
     exact: true,
     path: _constants.URLS.ASSETS,
-    render: function render(_ref3) {
-      var _insights$webpack2;
-
-      var location = _ref3.location;
-      return /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-        space: "medium"
-      }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
-        keys: _constants.METRICS_WEBPACK_ASSETS,
-        data: summary,
-        budgets: insights === null || insights === void 0 ? void 0 : (_insights$webpack2 = insights.webpack) === null || _insights$webpack2 === void 0 ? void 0 : _insights$webpack2.budgets,
-        showSummaryItemDelta: jobs.length !== 1
-      }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-        outline: true
-      }, /*#__PURE__*/_react["default"].createElement(_bundleAssets.BundleAssets, _extends({
-        jobs: jobs,
-        setState: bundleStatsSetState
-      }, bundleStatsState, {
-        key: "".concat(location.pathname, "_").concat(location.search)
-      })))));
-    }
+    component: AssetsContent
   }), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
     exact: true,
     path: _constants.URLS.MODULES,
-    render: function render() {
-      var _insights$webpack3;
-
-      return /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-        space: "medium"
-      }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
-        keys: _constants.METRICS_WEBPACK_MODULES,
-        data: summary,
-        budgets: insights === null || insights === void 0 ? void 0 : (_insights$webpack3 = insights.webpack) === null || _insights$webpack3 === void 0 ? void 0 : _insights$webpack3.budgets,
-        showSummaryItemDelta: jobs.length !== 1
-      }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-        outline: true
-      }, /*#__PURE__*/_react["default"].createElement(_bundleModules.BundleModules, _extends({
-        jobs: jobs,
-        setState: bundleModulesSetState
-      }, bundleModulesState)))));
-    }
+    component: ModulesContent
   }), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
     exact: true,
     path: _constants.URLS.PACKAGES,
-    render: function render(_ref4) {
-      var _insights$webpack4;
-
-      var location = _ref4.location;
-      return /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-        space: "medium"
-      }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
-        keys: _constants.METRICS_WEBPACK_PACKAGES,
-        data: summary,
-        budgets: insights === null || insights === void 0 ? void 0 : (_insights$webpack4 = insights.webpack) === null || _insights$webpack4 === void 0 ? void 0 : _insights$webpack4.budgets,
-        showSummaryItemDelta: jobs.length !== 1
-      }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-        outline: true
-      }, /*#__PURE__*/_react["default"].createElement(_bundlePackages.BundlePackages, _extends({
-        jobs: jobs
-      }, bundlePackagesState, {
-        setState: bundlePackagesSetState,
-        key: "".concat(location.pathname, "_").concat(location.search)
-      })))));
-    }
+    component: PackagesContent
   }), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
     exact: true,
     path: _constants.URLS.OVERVIEW,
-    render: function render() {
-      var _insights$webpack5;
-
-      return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-        space: "large"
-      }, duplicatePackagesInsights && /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_duplicatePackagesWarning.DuplicatePackagesWarning, {
-        duplicatePackagesCount: duplicatePackagesCount,
-        showDelta: jobs.length > 1
-      })), (insights === null || insights === void 0 ? void 0 : (_insights$webpack5 = insights.webpack) === null || _insights$webpack5 === void 0 ? void 0 : _insights$webpack5.budgets) && /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_budgetInsights.BudgetInsights, {
-        source: "webpack",
-        budgets: insights.webpack.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
-      }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-        outline: true
-      }, /*#__PURE__*/_react["default"].createElement(_bundleAssetsTotalsTable.BundleAssetsTotalsTable, {
-        jobs: jobs
-      })))));
-    }
-  }))));
+    component: OverviewContent
+  })))));
 };
 
 AppComponent.defaultProps = {

package/lib/app/app.module.css

@@ -13,12 +13,13 @@
 }
 
 .summaryContainer {
-  padding-top: var(--space-large);
+  padding-top: var(--space-medium);
   padding-bottom: var(--space-small);
 }
 
 .tabsContainer {
   border-bottom: 1px solid var(--color-outline);
+  background: var(--color-light);
 }
 
 .tabs {
@@ -34,14 +35,14 @@
 }
 
 .tabsContent {
-  padding-top: var(--space-large);
-  padding-bottom: var(--space-large);
+  padding-top: var(--space-medium);
+  padding-bottom: var(--space-medium);
   min-height: 480px;
 }
 
 @media (min-width: 600px) {
   :root {
-    --header-height: 80px;
+    --header-height: 72px;
   }
 
   .header {
@@ -54,4 +55,10 @@
     background-color: var(--color-background);
     border-bottom: 1px solid var(--color-outline);
   }
+
+  .tabsContainer {
+    position: sticky;
+    top: var(--header-height);
+    z-index: 100;
+  }
 }

package/lib/app/header/header.js

@@ -15,8 +15,6 @@ var _container = require("../../ui/container");
 
 var _jobsHeader = require("../../components/jobs-header");
 
-var _logo = require("../../ui/logo");
-
 var _headerModule = _interopRequireDefault(require("./header.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -29,14 +27,7 @@ var Header = function Header(_ref) {
     className: (0, _classnames["default"])(_headerModule["default"].root, className)
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: _headerModule["default"].inner
-  }, /*#__PURE__*/_react["default"].createElement("a", {
-    className: _headerModule["default"].branding,
-    href: "https://github.com/relative-ci/bundle-stats",
-    target: "_blank",
-    rel: "noopener noreferrer nofollow"
-  }, /*#__PURE__*/_react["default"].createElement(_logo.Logo, {
-    className: _headerModule["default"].brandingLogo
-  }, "BundleStats")), /*#__PURE__*/_react["default"].createElement(_jobsHeader.JobsHeader, {
+  }, /*#__PURE__*/_react["default"].createElement(_jobsHeader.JobsHeader, {
     className: _headerModule["default"].jobs,
     jobs: jobs
   })));

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

@@ -1,4 +1,5 @@
 .fileName {
+  max-width: 100%;
   padding: 2px;
   background: var(--color-highlight-warning);
 }