@bundle-stats/ui 3.2.5-alpha.0 → 3.2.5-alpha.21

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

@@ -100,12 +100,12 @@ var SummaryItem = function SummaryItem(_ref2) {
     className: _summaryItemModule["default"].currentMetric,
     value: current,
     formatter: metric.formatter,
-    enhanced: true
+    enhanced: true,
+    inline: true
   }, showDelta && /*#__PURE__*/_react["default"].createElement(_delta.Delta, {
     className: _summaryItemModule["default"].delta,
     displayValue: runInfo.displayDeltaPercentage,
-    deltaType: runInfo.deltaType,
-    inverted: true
+    deltaType: runInfo.deltaType
   })), /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
     className: _summaryItemModule["default"].baselineMetric,
     value: baseline,

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

@@ -29,14 +29,21 @@
 .currentMetric {
   display: block;
   color: var(--color-heading);
-  font-size: var(--size-xlarge);
+  font-size: var(--size-large);
   line-height: var(--space-medium);
   white-space: nowrap;
   font-weight: bold;
 }
 
+.delta {
+  font-size: var(--size-small);
+  line-height: var(--space-medium);
+}
+
 .baselineMetric {
   color: var(--color-text-light);
+  font-size: var(--size-small);
+  line-height: var(--space-small);
 }
 
 /* Loading state */
@@ -50,6 +57,6 @@
 
 /* Size large */
 .large .currentMetric {
-  font-size: var(--size-xxlarge);
+  font-size: var(--size-xxxlarge);
   line-height: var(--space-medium);
 }

package/lib/css/default.css

@@ -1,31 +1,25 @@
-@import url("~modern-css-reset/dist/reset.css");
-
-/** modern-css-reset updates */
-pre,
-ul,
-ol,
-button {
-  margin: 0;
+:root {
+  --chart-height: 180px;
 }
 
 html {
-  font-family: var(--font-family);
   font-size: 81.25%;
+  line-height: 1.8461;
 }
 
 body {
-  background: var(--color-background);
   color: var(--color-text);
-  line-height: var(--line-height);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5 {
+  margin-bottom: var(--space-small);
   color: var(--color-heading);
-  font-weight: bold;
+  font-weight: 500;
 }
 
 h1 {
   font-size: var(--size-xxxlarge);
+  line-height: var(--space-xlarge)
 }
 
 h2 {

package/lib/css/variables.css

@@ -13,40 +13,40 @@
   --space-xxlarge: 48px;
   --space-xxxlarge: 64px;
 
-  /* Typography scale - https://type-scale.com 1.2 */
-  --size-xsmall: 0.8rem;
+  /* Typography scale */
+  --size-xsmall: 0.77rem;
   --size-small: 0.92rem;
   --size: 1rem;
   --size-medium: var(--size);
-  --size-large: 1.2rem;
-  --size-xlarge: 1.44rem;
-  --size-xxlarge: 1.728rem;
-  --size-xxxlarge: 2.074rem;
+  --size-large: 1.125rem;
+  --size-xlarge: 1.266rem;
+  --size-xxlarge: 1.424rem;
+  --size-xxxlarge: 1.602rem;
 
-  --line-height: 1.66em;
+  --line-height: var(--space-medium);
 
   /*
    * Color scheme:
+   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23636568&mcgpalette4=%233385d6&themename=mcgtheme
    * https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%235b5d60&mcgpalette4=%233385d6&themename=mcgtheme
    */
   --color-gray-25: #fafafa;
-  --color-gray-50: #e4e4e5;
-  --color-gray-100: #cececf;
-  --color-gray-200: #adaeb0;
-  --color-gray-300: #8c8e90;
-  --color-gray-400: #747578;
-  --color-gray-500: #5b5d60;
-  --color-gray-600: #535558;
-  --color-gray-700: #494b4e;
-  --color-gray-800: #404144;
-  --color-gray-900: #2f3033;
+  --color-gray-50: #eceded;
+  --color-gray-100: #d0d1d2;
+  --color-gray-200: #b1b2b4;
+  --color-gray-300: #929395;
+  --color-gray-400: #7a7c7f;
+  --color-gray-500: #636568;
+  --color-gray-600: #5b5d60;
+  --color-gray-700: #515355;
+  --color-gray-800: #47494b;
+  --color-gray-900: #35373a;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
   --color-gray: var(--color-gray-500);
-  --color-gray-dark: var(--color-gray-600);
-  --color-gray-ultra-dark: var(--color-gray-700);
+  --color-gray-dark: var(--color-gray-700);
+  --color-gray-ultra-dark: var(--color-gray-900);
 
   --color-red-25: #fdf5f6;
   --color-red-50: #fbebec;
@@ -170,7 +170,7 @@
   --color-outline-warning: var(--color-yellow-200);
   --color-outline-danger: var(--color-red-100);
 
-  --color-shadow: rgba(0, 0, 0, 0.1);
+  --color-shadow: rgba(0, 0, 0, 0.2);
 
   --transition-in: all 0.2s ease-in;
   --transition-out: all 0.17s ease-out;
@@ -181,9 +181,9 @@
   --layer-high: 1000;
   --layer-xhigh: 10000;
 
-  --radius-small: calc(var(--space-xxxsmall) / 2);
-  --radius-medium: var(--space-xxxsmall);
-  --radius-large: var(--space-xxsmall);
+  --radius-small: var(--space-xxxsmall);
+  --radius-medium: var(--space-xxsmall);
+  --radius-large: var(--space-small);
 
   /** Layout */
   --max-width: 80rem;

package/lib/layout/box/box.module.css

@@ -4,15 +4,6 @@
 
 .outline {
   border: 1px solid var(--color-outline);
-  border-radius: var(--radius-medium);
-}
-
-.outline > :first-child {
-  border-radius: var(--radius-large) var(--radius-medium) 0 0;
-}
-
-.outline > :last-child {
-  border-radius: 0 0 var(--radius-large) var(--radius-medium);
 }
 
 .padding-xxxsmall {

package/lib/layout/footer/footer.module.css

@@ -3,10 +3,9 @@
 }
 
 .inner {
-  border-top: 1px solid var(--color-outline);
+  border-top: 2px solid var(--color-outline);
 }
 
-
 .navItem {
   display: inline-block;
   margin: 0 var(--space-xxxsmall);

package/lib/layout/index.js

@@ -27,12 +27,6 @@ Object.defineProperty(exports, "Header", {
     return _header.Header;
   }
 });
-Object.defineProperty(exports, "Separator", {
-  enumerable: true,
-  get: function get() {
-    return _separator.Separator;
-  }
-});
 Object.defineProperty(exports, "Stack", {
   enumerable: true,
   get: function get() {
@@ -52,8 +46,6 @@ var _footer = require("./footer");
 
 var _header = require("./header");
 
-var _separator = require("./separator");
-
 var _subHeader = require("./sub-header");
 
 var _stack = require("./stack");

package/lib/ui/dropdown/dropdown.js

@@ -39,7 +39,8 @@ var Dropdown = function Dropdown(props) {
     className: rootClassName,
     tabIndex: null
   }), /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-    space: "xxxsmall"
+    space: "xxxsmall",
+    className: _dropdownModule["default"].label
   }, glyph && /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
     className: _dropdownModule["default"].labelIcon,
     glyph: glyph

package/lib/ui/dropdown/dropdown.module.css

@@ -2,9 +2,15 @@
   background: none;
   border: none;
   padding: 0;
+}
 
+.root:focus {
+  outline: none;
+  box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
+}
+
+.label {
   border: 1px solid var(--color-outline);
-  border-radius: var(--radius-medium);
   padding: calc(var(--space-xxsmall) - 1px);
   display: flex;
   align-items: center;
@@ -18,11 +24,7 @@
   color: var(--color-text-light);
 }
 
-.root:hover,
-.root:focus,
-.root:active {
-  outline: none;
-  box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
+.label:hover {
   border-color: var(--color-outline-dark);
   color: var(--color-text);
 }
@@ -31,7 +33,6 @@
   position: absolute;
   left: 0;
   top: 100%;
-  border-radius: var(--radius-medium);
   box-shadow: 0 2px var(--space-xxsmall) var(--color-shadow);
   background: var(--color-background);
   min-width: 180px;

package/lib/ui/filters/filters.js

@@ -92,8 +92,7 @@ Filter.defaultProps = {
 };
 
 var FilterGroup = function FilterGroup(props) {
-  var className = props.className,
-      groupKey = props.groupKey,
+  var groupKey = props.groupKey,
       data = props.data,
       values = props.values,
       onCheckboxChange = props.onCheckboxChange,
@@ -139,7 +138,6 @@ var FilterGroup = function FilterGroup(props) {
   };
 
   return /*#__PURE__*/_react["default"].createElement(_dropdown.Dropdown, {
-    className: className,
     label: dropdownLabel,
     ariaLabel: "".concat(groupLabel, ": ").concat(filterSuffix)
   }, function (_ref7) {
@@ -190,7 +188,6 @@ var FilterGroup = function FilterGroup(props) {
 };
 
 FilterGroup.propTypes = {
-  className: _propTypes["default"].string,
   groupKey: _propTypes["default"].string.isRequired,
   data: _propTypes["default"].object.isRequired,
   // eslint-disable-line react/forbid-prop-types
@@ -199,9 +196,6 @@ FilterGroup.propTypes = {
   onCheckboxChange: _propTypes["default"].func.isRequired,
   toggleFilters: _propTypes["default"].func.isRequired
 };
-FilterGroup.defaultProps = {
-  className: ''
-};
 
 var Filters = function Filters(props) {
   var className = props.className,
@@ -237,15 +231,16 @@ var Filters = function Filters(props) {
       });
     }
 
-    return /*#__PURE__*/_react["default"].createElement(FilterGroup, {
-      className: _filtersModule["default"].item,
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: _filtersModule["default"].item
+    }, /*#__PURE__*/_react["default"].createElement(FilterGroup, {
       key: name,
       groupKey: name,
       data: data,
       values: values,
       onCheckboxChange: onCheckboxChange,
       toggleFilters: toggleFilters
-    });
+    }));
   })));
 };
 

package/lib/ui/filters/filters.module.css

@@ -11,7 +11,6 @@
 }
 
 .filterInput {
-  border-radius: var(--radius-medium) 0 0 var(--radius-medium);
   flex: 0 0 auto;
   height: 1em;
   cursor: pointer;
@@ -130,20 +129,11 @@
 }
 
 .item {
-  border-radius: 0;
   position: relative;
   flex: 0 0 auto;
   margin-right: -1px;
 }
 
-.item:first-child {
-  border-radius: var(--radius-medium) 0 0 var(--radius-medium);
-}
-
-.item:last-child {
-  border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
-}
-
 .item:hover {
   z-index: var(--layer-low); /* show collapsed border */
 }

package/lib/ui/popover/popover.module.css

@@ -24,7 +24,7 @@
 
 .popover {
   padding: var(--space-small) var(--space-large) var(--space-small) var(--space-small);
-  border-radius: var(--radius-large);
+  border-radius: var(--radius-small);
   max-width: 360px;
   outline: none;
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));

package/lib/ui/table/table.module.css

@@ -13,8 +13,12 @@
   text-align: left;
 }
 
+tr:last-child .cell {
+  border-bottom-width: 1px;
+}
+
 .root thead .cell {
-  border-width: 0 0 1px;
+  border-width: 0 0 2px;
   text-transform: uppercase;
   vertical-align: top;
 }
@@ -40,6 +44,10 @@
   text-decoration: underline;
 }
 
+.root tbody tr:nth-child(odd) .cell {
+  background-color: var(--color-highlight);
+}
+
 .root tbody tr:hover .cell {
   background-color: var(--color-highlight-warning);
 }

package/lib/ui/tabs/tabs.module.css

@@ -7,7 +7,8 @@
   position: relative;
   display: inline-block;
   padding: var(--space-xsmall) 0;
-  color: var(--color-text-light);
+  color: var(--color-text-ultra-light);
+  font-weight: bold;
   text-decoration: none;
 }
 

package/lib/ui/tooltip/tooltip.module.css

@@ -12,7 +12,7 @@
 
 .tooltip {
   padding: var(--space-xxxsmall) var(--space-xxsmall);
-  border-radius: var(--radius-large);
+  border-radius: var(--radius-small);
   background: var(--color-light);
   color: var(--color-text);
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));

package/lib-esm/app/app.js

@@ -6,7 +6,6 @@ import { HashRouter, NavLink, Route, Switch, useLocation } from 'react-router-do
 import { COMPONENT } from '@bundle-stats/utils';
 import { METRICS_WEBPACK_ASSETS, METRICS_WEBPACK_GENERAL, METRICS_WEBPACK_MODULES, METRICS_WEBPACK_PACKAGES, URLS } from '../constants';
 import { Box } from '../layout/box';
-import { Separator } from '../layout/separator';
 import { Container } from '../ui/container';
 import { DuplicatePackagesWarning } from '../components/duplicate-packages-warning';
 import { Summary } from '../components/summary';
@@ -48,7 +47,6 @@ const Layout = _ref => {
   }), /*#__PURE__*/React.createElement("main", _extends({
     className: css.main
   }, props)), /*#__PURE__*/React.createElement(Footer, {
-    className: css.footer,
     version: version
   }));
 };
@@ -178,21 +176,17 @@ const AppComponent = _ref2 => {
     exact: true,
     path: URLS.OVERVIEW,
     render: () => /*#__PURE__*/React.createElement(Stack, {
-      space: "medium"
-    }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
-      space: "medium"
-    }, duplicatePackagesInsights && /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
+      space: "large"
+    }, duplicatePackagesInsights && /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
       duplicatePackagesCount: duplicatePackagesCount,
       showDelta: jobs.length > 1
-    }), /*#__PURE__*/React.createElement(Box, {
-      outline: true
-    }, /*#__PURE__*/React.createElement(Box, {
-      padding: "small"
-    }, /*#__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
-    }))), /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
+    }), /*#__PURE__*/React.createElement(Box, {
+      outline: true
+    }, /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
       jobs: jobs
     })))))
   }))));

package/lib-esm/app/app.module.css

@@ -3,10 +3,7 @@
 }
 
 .root {
-}
-
-.header {
-  border-bottom: 1px solid var(--color-outline);
+  padding-top: var(--header-height);
 }
 
 .empty {
@@ -16,12 +13,16 @@
 }
 
 .summaryContainer {
-  padding-top: var(--space-medium);
-  padding-bottom: var(--space-xsmall);
+  padding-top: var(--space-large);
+  padding-bottom: var(--space-small);
 }
 
 .tabsContainer {
-  background: var(--color-light);
+  border-bottom: 1px solid var(--color-outline);
+}
+
+.tabs {
+  margin-bottom: -1px;
 }
 
 .tabActive {
@@ -33,27 +34,24 @@
 }
 
 .tabsContent {
-  padding-top: var(--space-medium);
-  padding-bottom: var(--space-medium);
+  padding-top: var(--space-large);
+  padding-bottom: var(--space-large);
   min-height: 480px;
 }
 
 @media (min-width: 600px) {
   :root {
-    --header-height: 78px;
+    --header-height: 80px;
   }
 
   .header {
-    position: sticky;
+    position: fixed;
     z-index: var(--layer-high);
+    left: 0;
     top: 0;
+    right: 0;
     height: var(--header-height);
     background-color: var(--color-background);
-  }
-
-  .tabsContainer {
-    position: sticky;
-    top: var(--header-height);
-    z-index: 100;
+    border-bottom: 1px solid var(--color-outline);
   }
 }

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { FlexStack } from '../../layout/flex-stack';
 import { Container } from '../../ui/container';
 import { JobsHeader } from '../../components/jobs-header';
 import { Logo } from '../../ui/logo';
@@ -14,23 +13,19 @@ export const Header = _ref => {
   return /*#__PURE__*/React.createElement(Container, {
     as: "header",
     className: cx(css.root, className)
-  }, /*#__PURE__*/React.createElement(FlexStack, {
-    space: "small",
+  }, /*#__PURE__*/React.createElement("div", {
     className: css.inner
-  }, /*#__PURE__*/React.createElement(JobsHeader, {
-    className: css.jobs,
-    jobs: jobs
-  }), /*#__PURE__*/React.createElement("div", {
-    className: css.options
   }, /*#__PURE__*/React.createElement("a", {
+    className: css.branding,
     href: "https://github.com/relative-ci/bundle-stats",
     target: "_blank",
-    rel: "noopener noreferrer nofollow",
-    title: "View bundle-stats on GitHub"
+    rel: "noopener noreferrer nofollow"
   }, /*#__PURE__*/React.createElement(Logo, {
-    className: css.github,
-    kind: "github"
-  }, "GitHub")))));
+    className: css.brandingLogo
+  }, "BundleStats")), /*#__PURE__*/React.createElement(JobsHeader, {
+    className: css.jobs,
+    jobs: jobs
+  })));
 };
 Header.propTypes = {
   className: PropTypes.string,

package/lib-esm/app/header/header.module.css

@@ -1,23 +1,30 @@
 .inner {
+  display: flex;
   align-items: center;
 }
 
-.jobs {
-  flex: 1 1 auto;
-  overflow-x: auto;
+.branding {
+  padding: var(--space-small);
+  flex: 0 0 auto;
+  color: var(--color-text);
+  display: flex;
+  align-items: center;
 }
 
-.options {
-  flex: 0 0 var(--space-large);
+.jobs {
+  flex: 1 1 auto;
 }
 
-.option {
-  display: inline-block;
+.tools {
+  border-left: 1px solid var(--color-outline);
+  padding: var(--space-small);
+  margin: 0 0 0 auto;
+  display: flex;
+  align-items: center;
+  color: var(--color-text-light);
 }
 
-.github {
-  display: block;
-  color: var(--color-text-ultra-light);
+.toolsGithub {
+  color: inherit;
   width: var(--space-medium);
-  height: var(--space-medium);
 }

package/lib-esm/components/bundle-assets/bundle-assets.module.css

@@ -31,7 +31,6 @@
 }
 
 .flag {
-  border-radius: var(--radius-small);
   display: inline-block;
   width: var(--space-xsmall);
   height: var(--space-xsmall);

package/lib-esm/components/bundle-packages/bundle-packages.module.css

@@ -13,21 +13,17 @@
 }
 
 .duplicate {
-  border-radius: var(--radius-small);
+  margin-right: var(--space-xxxsmall);
   display: inline-block;
-  width: var(--space-xsmall);
-  height: var(--space-xsmall);
-  font-family: var(--font-family);
-  font-size: 8px;
+  width: var(--space-small);
+  height: var(--space-small);
+  font-size: 10px;
   font-weight: bold;
-  background: var(--color-highlight);
-  color: var(--color-text-light);
-  line-height: var(--space-xsmall);
+  line-height: var(--space-small);
   text-align: center;
   text-transform: uppercase;
   vertical-align: middle;
 
-  margin-right: var(--space-xxxsmall);
   background: var(--color-danger);
   color: var(--color-light);
 }