@bundle-stats/ui 3.3.0-alpha.1 → 3.3.1-beta.8

package/lib/components/job-header/job-header.js

@@ -23,6 +23,8 @@ var _stack = require("../../layout/stack");
 
 var _icon = require("../../ui/icon");
 
+var _tag = require("../../ui/tag");
+
 var _jobHeaderModule = _interopRequireDefault(require("./job-header.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -43,7 +45,7 @@ var JobHeader = function JobHeader(props) {
     space: "xxsmall"
   }, /*#__PURE__*/_react["default"].createElement("h1", {
     className: _jobHeaderModule["default"].title
-  }, /*#__PURE__*/_react["default"].createElement("span", null, "#".concat(job.internalBuildNumber)), tag && /*#__PURE__*/_react["default"].createElement("span", {
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "#".concat(job.internalBuildNumber)), tag && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
     className: _jobHeaderModule["default"].tag
   }, tag)), /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     className: _jobHeaderModule["default"].meta,

package/lib/components/job-header/job-header.module.css

@@ -1,22 +1,20 @@
 .title {
+  font-size: var(--size-xlarge);
   line-height: 1;
   font-weight: bold;
   vertical-align: top;
 }
 
 .tag {
-  padding: var(--space-xxxsmall);
-  margin-left: var(--space-xxxsmall);
-  background-color: var(--color-highlight);
-  color: var(--color-text-light);
-  display: inline-block;
-  font-size: 9px;
-  line-height: var(--space-xxsmall);
-  font-weight: normal;
+  margin-left: var(--space-xxsmall);
   vertical-align: top;
+  outline: 1px solid var(--color-outline);
+  background: var(--color-highlight);
+  color: var(--color-text-light);
 }
 
 .meta {
+  font-size: var(--size-small);
   color: var(--color-text-light);
 }
 

package/lib/components/jobs-header/jobs-header.module.css

@@ -9,3 +9,8 @@
   padding: 0 var(--space-medium);
   border-left: 1px solid var(--color-outline);
 }
+
+.item:first-child {
+  border-left: 0;
+  padding-left: 0;
+}

package/lib/components/metrics-table/metrics-table.js

@@ -31,12 +31,20 @@ var _jobName = require("../job-name");
 
 var _metricsTableModule = _interopRequireDefault(require("./metrics-table.module.css"));
 
+var _excluded = ["className", "renderRowHeader", "runs", "items", "emptyMessage", "showHeaderSum", "headerRows", "title"];
+
 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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -131,52 +139,66 @@ var getHeaderRows = function getHeaderRows(runs, items, showHeaderSum, title) {
   }] : []));
 };
 
-var generateRowCells = function generateRowCells(item, index, items) {
-  var isBaseline = index === items.length - 1; // eslint-disable-next-line react/destructuring-assignment
-
-  if (!item || typeof item.value === 'undefined') {
-    return ['-'].concat(_toConsumableArray(!isBaseline ? [''] : []));
-  }
-
-  var displayValue = item.displayValue,
-      deltaPercentage = item.deltaPercentage,
-      displayDeltaPercentage = item.displayDeltaPercentage,
-      deltaType = item.deltaType;
-  var cells = [/*#__PURE__*/_react["default"].createElement(_metric.Metric, {
-    value: displayValue
-  })];
+var MetricsTableRow = function MetricsTableRow(_ref) {
+  var item = _ref.item,
+      renderRowHeader = _ref.renderRowHeader;
+  return /*#__PURE__*/_react["default"].createElement(_table.Table.Tr, {
+    className: (0, _classnames["default"])(!item.changed && _metricsTableModule["default"].unchanged)
+  }, /*#__PURE__*/_react["default"].createElement(_table.Table.Th, {
+    className: _metricsTableModule["default"].metricName
+  }, renderRowHeader(item)), item.runs.map(function (run, index) {
+    var isBaseline = index === item.runs.length - 1;
+    var valueClassName = (0, _classnames["default"])(_metricsTableModule["default"].value, !isBaseline && _metricsTableModule["default"].current); // Empty cells if no value
+
+    if (!run || typeof run.value === 'undefined') {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_table.Table.Td, {
+        className: valueClassName
+      }, "-"), !isBaseline && /*#__PURE__*/_react["default"].createElement(_table.Table.Td, {
+        className: _metricsTableModule["default"].delta
+      }));
+    }
 
-  if (!isBaseline) {
-    cells.push(typeof deltaPercentage === 'number' && /*#__PURE__*/_react["default"].createElement(_delta.Delta, {
+    var displayValue = run.displayValue,
+        deltaPercentage = run.deltaPercentage,
+        displayDeltaPercentage = run.displayDeltaPercentage,
+        deltaType = run.deltaType;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_table.Table.Td, {
+      className: valueClassName
+    }, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
+      value: displayValue
+    })), !isBaseline && typeof deltaPercentage === 'number' && /*#__PURE__*/_react["default"].createElement(_table.Table.Td, {
+      className: _metricsTableModule["default"].delta
+    }, /*#__PURE__*/_react["default"].createElement(_delta.Delta, {
       displayValue: displayDeltaPercentage,
       deltaType: deltaType
-    }));
-  }
-
-  return cells;
+    })));
+  }));
 };
 
-var getRows = function getRows(runs, items, renderRowHeader) {
-  return items.map(function (item, index) {
-    var changed = item.changed;
-    return {
-      key: (item === null || item === void 0 ? void 0 : item.key) || index,
-      className: changed ? '' : _metricsTableModule["default"].unchanged,
-      cells: [// Metric name
-      renderRowHeader(item)].concat(_toConsumableArray(item.runs.map(generateRowCells).flat()))
-    };
-  });
+MetricsTableRow.propTypes = {
+  item: _propTypes["default"].shape({
+    changed: _propTypes["default"].bool,
+    runs: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+      value: _propTypes["default"].number,
+      displayValue: _propTypes["default"].string,
+      deltaPercentage: _propTypes["default"].number,
+      displayDeltaPercentage: _propTypes["default"].string,
+      deltaType: _propTypes["default"].string
+    }))
+  }).isRequired,
+  renderRowHeader: _propTypes["default"].func.isRequired
 };
 
-var MetricsTable = function MetricsTable(_ref) {
-  var className = _ref.className,
-      renderRowHeader = _ref.renderRowHeader,
-      runs = _ref.runs,
-      items = _ref.items,
-      emptyMessage = _ref.emptyMessage,
-      showHeaderSum = _ref.showHeaderSum,
-      headerRows = _ref.headerRows,
-      title = _ref.title;
+var MetricsTable = function MetricsTable(_ref2) {
+  var className = _ref2.className,
+      renderRowHeader = _ref2.renderRowHeader,
+      runs = _ref2.runs,
+      items = _ref2.items,
+      emptyMessage = _ref2.emptyMessage,
+      showHeaderSum = _ref2.showHeaderSum,
+      headerRows = _ref2.headerRows,
+      title = _ref2.title,
+      restProps = _objectWithoutProperties(_ref2, _excluded);
 
   var _useMemo = (0, _react.useMemo)(function () {
     var headerColumns = getHeaderRows(runs, items, showHeaderSum, title);
@@ -191,37 +213,28 @@ var MetricsTable = function MetricsTable(_ref) {
       headers = _useMemo.headers,
       columnClassNames = _useMemo.columnClassNames;
 
-  var rows = (0, _react.useMemo)(function () {
-    return getRows(runs, items, renderRowHeader);
-  }, [runs, items, renderRowHeader]);
   var rootClassName = (0, _classnames["default"])(_metricsTableModule["default"].root, className, runs.length > 1 && _metricsTableModule["default"].multipleRuns, showHeaderSum && _metricsTableModule["default"].showHeaderSum);
-  return /*#__PURE__*/_react["default"].createElement(_table.Table, {
+  return /*#__PURE__*/_react["default"].createElement(_table.Table, _extends({
     className: rootClassName,
     compact: true
-  }, /*#__PURE__*/_react["default"].createElement(_table.Table.THead, null, headers.map(function (headerRow) {
-    var _ref2 = headerRow.cells ? headerRow : {
+  }, restProps), /*#__PURE__*/_react["default"].createElement(_table.Table.THead, null, headers.map(function (headerRow) {
+    var _ref3 = headerRow.cells ? headerRow : {
       cells: headerRow
     },
-        cells = _ref2.cells,
-        rowClassName = _ref2.className;
+        cells = _ref3.cells,
+        rowClassName = _ref3.className;
 
     return /*#__PURE__*/_react["default"].createElement(_table.Table.Tr, {
       className: rowClassName
     }, cells.map(function (header) {
       return /*#__PURE__*/_react["default"].createElement(_table.Table.Th, header);
     }));
-  })), /*#__PURE__*/_react["default"].createElement(_table.Table.TBody, null, !(0, _isEmpty2["default"])(rows) ? rows.map(function (_ref3) {
-    var key = _ref3.key,
-        rowClassName = _ref3.className,
-        cells = _ref3.cells;
-    return /*#__PURE__*/_react["default"].createElement(_table.Table.Tr, {
-      key: key,
-      className: rowClassName
-    }, cells.map(function (cell, index) {
-      return /*#__PURE__*/_react["default"].createElement(_table.Table.Td, {
-        className: columnClassNames[index]
-      }, cell);
-    }));
+  })), /*#__PURE__*/_react["default"].createElement(_table.Table.TBody, null, !(0, _isEmpty2["default"])(items) ? items.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement(MetricsTableRow, {
+      key: item.key,
+      item: item,
+      renderRowHeader: renderRowHeader
+    });
   }) : /*#__PURE__*/_react["default"].createElement(_table.Table.Tr, null, /*#__PURE__*/_react["default"].createElement(_table.Table.Td, {
     className: _metricsTableModule["default"].empty,
     colSpan: (columnClassNames === null || columnClassNames === void 0 ? void 0 : columnClassNames.length) || 1

package/lib/components/metrics-table/metrics-table.module.css

@@ -1,11 +1,11 @@
-.jobName a {
+.root a {
   color: inherit;
   text-decoration: none;
 }
 
-.jobName a:hover,
-.jobName a:active,
-.jobName a:focus {
+.root a:hover,
+.root a:active,
+.root a:focus {
   color: var(--color-primary);
   text-decoration: underline;
 }
@@ -15,21 +15,31 @@
   width: 100%;
 }
 
-.value {
+.root .value {
   padding-left: var(--space-large);
   text-align: right;
+  vertical-align: baseline;
 }
 
-.delta {
+.root .delta {
   padding-left: 0;
   text-align: left;
   font-size: var(--size-xsmall);
+  vertical-align: baseline;
 }
 
-.value.current {
+.root tbody .delta {
+  line-height: 1.6rem; /* baseline alignment with the value */
+}
+
+.root .value.current {
   padding-right: var(--space-xxsmall);
 }
 
+.jobName {
+  white-space: nowrap;
+}
+
 /* columns overrides for showHeaderSum */
 .showHeaderSum .headerRowColumns .value,
 .showHeaderSum .headerRowColumns .delta {
@@ -45,6 +55,7 @@
 }
 
 /** rows */
+.multipleRuns .unchanged th,
 .multipleRuns .unchanged td {
   color: var(--color-text-light);
 }

package/lib/components/metrics-table-search/metrics-table-search.module.css

@@ -5,6 +5,7 @@
 }
 
 .input {
+  border-radius: var(--radius-small);
   height: var(--space-large);
   border-color: var(--color-outline);
 }
@@ -21,12 +22,12 @@
   cursor: pointer;
   border-radius: 50%;
   position: absolute;
-  right: 0;
+  right: 2px;
   top: 50%;
   transform: translateY(-50%);
-  padding: var(--space-xxsmall);
-  width: var(--space-large);
-  height: var(--space-large);
+  padding: var(--space-xxxsmall);
+  width: var(--space-medium);
+  height: var(--space-medium);
   background: radial-gradient(var(--color-background) 50%, transparent);
   color: var(--color-text-ultra-light);
   transition: var(--transition-in);

package/lib/components/metrics-table-title/metrics-table-title.js

@@ -17,7 +17,9 @@ var _flexStack = require("../../layout/flex-stack");
 
 var _stack = require("../../layout/stack");
 
-var _popover = require("../../ui/popover");
+var _icon = require("../../ui/icon");
+
+var _hoverCard = require("../../ui/hover-card");
 
 var _metricsTableTitleModule = _interopRequireDefault(require("./metrics-table-title.module.css"));
 
@@ -30,22 +32,22 @@ var MetricsTableTitle = function MetricsTableTitle(props) {
       popoverInfo = props.popoverInfo,
       popoverHref = props.popoverHref;
   var rootClassName = (0, _classnames["default"])(_metricsTableTitleModule["default"].root, className);
-  return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+  return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     space: "xxxsmall",
     className: rootClassName
-  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-    space: "xxxsmall"
   }, /*#__PURE__*/_react["default"].createElement("span", null, title), info && /*#__PURE__*/_react["default"].createElement("span", {
     className: _metricsTableTitleModule["default"].info
-  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
-    icon: "help"
+  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+    label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+      glyph: "help"
+    })
   }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
   }, popoverInfo && /*#__PURE__*/_react["default"].createElement("p", null, popoverInfo), popoverHref && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("a", {
     href: popoverHref,
     target: "_blank",
     rel: "noreferrer"
-  }, _i18n["default"].READ_MORE))))));
+  }, _i18n["default"].READ_MORE)))));
 };
 
 exports.MetricsTableTitle = MetricsTableTitle;

package/lib/components/metrics-table-title/metrics-table-title.module.css

@@ -1,5 +1,7 @@
 .root {
+  align-items: center;
   font-weight: bold;
+  line-height: var(--space-small);
   text-transform: uppercase;
   color: var(--color-text-light);
 }

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

@@ -38,7 +38,7 @@ var ModuleInfo = function ModuleInfo(props) {
       CustomComponentLink = props.customComponentLink,
       onClick = props.onClick;
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-    space: "small",
+    space: "xsmall",
     className: className
   }, item.runs.map(function (run, index) {
     var TitleComponent = index !== 0 ? 'h4' : 'h3';
@@ -48,7 +48,7 @@ var ModuleInfo = function ModuleInfo(props) {
       key: key
     }, /*#__PURE__*/_react["default"].createElement(TitleComponent, null, labels[index]), index === 0 && !(0, _isEmpty2["default"])(run === null || run === void 0 ? void 0 : run.chunkIds) && /*#__PURE__*/_react["default"].createElement("div", {
       className: _moduleInfoModule["default"].chunks
-    }, /*#__PURE__*/_react["default"].createElement("strong", {
+    }, /*#__PURE__*/_react["default"].createElement("span", {
       className: _moduleInfoModule["default"].chunksTitle
     }, "Chunks:"), run.chunkIds.map(function (chunkId) {
       var chunk = (0, _find2["default"])(chunks, {

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

@@ -15,6 +15,7 @@
 }
 
 .fileName {
+  max-width: 100%;
   padding: 2px;
   background: var(--color-highlight-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, metricId),
+      budget: (0, _get2["default"])(budgets, getSourceMetricId(metricId)),
       loading: loading,
       showMetricDescription: true,
       showDelta: showSummaryItemDelta && metricOptions.showDelta !== false

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

@@ -13,7 +13,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _utils = require("@bundle-stats/utils");
 
-var _popover = require("../../ui/popover");
+var _hoverCard = require("../../ui/hover-card");
+
+var _icon = require("../../ui/icon");
 
 var _skeleton = require("../../ui/skeleton");
 
@@ -39,29 +41,22 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var MetricInfoPopover = function MetricInfoPopover(_ref) {
+var MetricInfo = function MetricInfo(_ref) {
   var description = _ref.description,
       url = _ref.url;
-
-  // Workaround cases where the parent is a link
-  var readMoreOnClick = function readMoreOnClick() {
-    window.open(url);
-  };
-
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
-  }, /*#__PURE__*/_react["default"].createElement("p", null, description), url && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("button", {
-    type: "button",
-    className: _summaryItemModule["default"].readMoreBtn,
-    onClick: readMoreOnClick
+  }, /*#__PURE__*/_react["default"].createElement("p", null, description), url && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("a", {
+    href: url,
+    className: _summaryItemModule["default"].readMoreLink
   }, "Read more")));
 };
 
-MetricInfoPopover.propTypes = {
+MetricInfo.propTypes = {
   description: _propTypes["default"].string.isRequired,
   url: _propTypes["default"].string
 };
-MetricInfoPopover.defaultProps = {
+MetricInfo.defaultProps = {
   url: ''
 };
 
@@ -89,7 +84,7 @@ var SummaryItem = function SummaryItem(_ref2) {
   var showMetricDescriptionTooltip = showMetricDescription && (metric === null || metric === void 0 ? void 0 : metric.description);
   var rootClassName = (0, _classnames["default"])(_summaryItemModule["default"].root, className, _summaryItemModule["default"][size], showDelta && _summaryItemModule["default"].showDelta);
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, _extends({
-    space: "xxsmall",
+    space: "xxxsmall",
     as: Component,
     className: rootClassName
   }, props), /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
@@ -98,10 +93,12 @@ var SummaryItem = function SummaryItem(_ref2) {
     className: _summaryItemModule["default"].title
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: _summaryItemModule["default"].titleLabel
-  }, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
+  }, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
     className: _summaryItemModule["default"].icon,
-    icon: "help"
-  }, /*#__PURE__*/_react["default"].createElement(MetricInfoPopover, metric)), budget && /*#__PURE__*/_react["default"].createElement(_budgetInfo.BudgetInfo, {
+    label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+      glyph: "help"
+    })
+  }, /*#__PURE__*/_react["default"].createElement(MetricInfo, metric)), budget && /*#__PURE__*/_react["default"].createElement(_budgetInfo.BudgetInfo, {
     className: _summaryItemModule["default"].budgetInfo,
     metricId: id,
     budgetInsight: budget

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

@@ -4,6 +4,7 @@
 }
 
 .title {
+  align-items: center;
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
@@ -12,29 +13,6 @@
   white-space: nowrap;
 }
 
-.titleLabel {
-  flex: 0 0 auto;
-}
-
-.readMoreBtn {
-  appearance: none;
-  padding: 0;
-  border: 0;
-  background: none;
-  cursor: pointer;
-  /* simulate link */
-  color: var(--color-primary);
-  text-decoration: underline;
-  line-height: var(--space-small);
-}
-
-.readMoreBtn:hover,
-.readMoreBtn:active,
-.readMoreBtn:focus {
-  color: var(--color-primary-dark);
-  text-decoration: none;
-}
-
 .budgetInfo {
   position: absolute;
   right: 0;

package/lib/components/total-size-type-title/total-size-type-title.js

@@ -19,7 +19,9 @@ var _flexStack = require("../../layout/flex-stack");
 
 var _stack = require("../../layout/stack");
 
-var _popover = require("../../ui/popover");
+var _icon = require("../../ui/icon");
+
+var _hoverCard = require("../../ui/hover-card");
 
 var _totalSizeTypeTitleModule = _interopRequireDefault(require("./total-size-type-title.module.css"));
 
@@ -30,8 +32,10 @@ var TotalSizeTypeTitle = function TotalSizeTypeTitle(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     space: "xxxsmall",
     className: (0, _classnames["default"])(_totalSizeTypeTitleModule["default"].title, className)
-  }, /*#__PURE__*/_react["default"].createElement("span", null, _i18n["default"].ASSET_TOTALS), /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
-    icon: "help"
+  }, /*#__PURE__*/_react["default"].createElement("span", null, _i18n["default"].ASSET_TOTALS), /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+    label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+      glyph: "help"
+    })
   }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
   }, /*#__PURE__*/_react["default"].createElement("p", null, _i18n["default"].ASSET_TOTALS_INFO), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("a", {

package/lib/constants.js

@@ -56,7 +56,7 @@ var METRICS_WEBPACK_GENERAL = ['totalSizeByTypeALL', 'totalInitialSizeJS', 'tota
 exports.METRICS_WEBPACK_GENERAL = METRICS_WEBPACK_GENERAL;
 var METRICS_WEBPACK_ASSETS = ['assetCount', 'chunkCount'];
 exports.METRICS_WEBPACK_ASSETS = METRICS_WEBPACK_ASSETS;
-var METRICS_WEBPACK_MODULES = ['moduleCount'];
+var METRICS_WEBPACK_MODULES = ['moduleCount', 'duplicateModulesCount', 'duplicateCode'];
 exports.METRICS_WEBPACK_MODULES = METRICS_WEBPACK_MODULES;
 var METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];
 exports.METRICS_WEBPACK_PACKAGES = METRICS_WEBPACK_PACKAGES;

package/lib/css/default.css

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

package/lib/css/variables.css

@@ -23,30 +23,30 @@
   --size-xxlarge: 1.424rem;
   --size-xxxlarge: 1.602rem;
 
-  --line-height: var(--space-medium);
+  --line-height: 1.6em;
 
   /*
    * 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: #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-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-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-700);
-  --color-gray-ultra-dark: var(--color-gray-900);
+  --color-gray-dark: var(--color-gray-600);
+  --color-gray-ultra-dark: var(--color-gray-700);
 
   --color-red-25: #fdf5f6;
   --color-red-50: #fbebec;
@@ -181,9 +181,9 @@
   --layer-high: 1000;
   --layer-xhigh: 10000;
 
-  --radius-small: var(--space-xxxsmall);
-  --radius-medium: var(--space-xxsmall);
-  --radius-large: var(--space-small);
+  --radius-small: 3px;
+  --radius-medium: var(--space-xxxsmall);
+  --radius-large: var(--space-xxsmall);
 
   /** Layout */
   --max-width: 80rem;