@bundle-stats/ui 3.2.1 → 3.2.2-beta.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.2.2-beta.0](https://github.com/relative-ci/bundle-stats/compare/v3.2.1...v3.2.2-beta.0) (2021-12-08)
+
+
+### Bug Fixes
+
+* **ui:** Icons sprite - no prefix ([b0cd04f](https://github.com/relative-ci/bundle-stats/commit/b0cd04f7f11b9a76cc98d6edf0b306ba2d89ea1b))
+* **ui:** SummaryItem - remove unused styles ([f9cb800](https://github.com/relative-ci/bundle-stats/commit/f9cb800515aa943b6e932f056fbd8a8887b00791))
+
+
+### Features
+
+* **ui:** Icon - add arrow-right-circle ([4c58204](https://github.com/relative-ci/bundle-stats/commit/4c582045fb4aa25c717204a8eafb562679266583))
+* **ui:** Summary - use read more icon to navigate ([71578bd](https://github.com/relative-ci/bundle-stats/commit/71578bd0679504d7290087368ce592e8ad81036e))
+
+
+
+
+
 ## [3.2.1](https://github.com/relative-ci/bundle-stats/compare/v3.2.0...v3.2.1) (2021-11-23)
 
 

package/lib/app/app.stories.js

@@ -44,7 +44,14 @@ var BASELINE_SOURCE = {
     hash: _jobBaseline["default"].hash
   }, _jobBaseline["default"].rawData.webpack)
 };
-var JOBS = (0, _utils.createJobs)([CURRENT_SOURCE, BASELINE_SOURCE]);
+var JOBS = (0, _utils.createJobs)([CURRENT_SOURCE, BASELINE_SOURCE], {
+  webpack: {
+    budgets: [{
+      metric: 'totalSizeByTypeALL',
+      value: 1024 * 1024
+    }]
+  }
+});
 var NO_BASELINE_JOBS = (0, _utils.createJobs)([CURRENT_SOURCE]);
 var MULTIPLE_JOBS = (0, _utils.createJobs)([CURRENT_SOURCE, BASELINE_SOURCE, {
   webpack: _objectSpread(_objectSpread({

package/lib/assets/icons/arrow-right-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-arrow-right-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>

package/lib/assets/icons/close.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+<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-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>

package/lib/assets/icons.svg

@@ -1 +1,42 @@
-<svg width="16" height="16"><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="afeather afeather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v14M19 12l-7 7-7-7"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bfeather bfeather-x-circle" id="cancel" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cfeather cfeather-clock" id="clock" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="dfeather dfeather-x" id="close" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="efeather efeather-git-commit" id="commit" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="4"/><path d="M1.05 12H7M17.01 12h5.95"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ffeather ffeather-bar-chart" id="filter" xmlns="http://www.w3.org/2000/svg"><path d="M12 20V10M18 20V4M6 20v-4"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="gfeather gfeather-help-circle" id="help" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hfeather hfeather-menu" id="menu" xmlns="http://www.w3.org/2000/svg"><path d="M3 12h18M3 6h18M3 18h18"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="sort" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="jfeather jfeather-alert-triangle" id="warning" xmlns="http://www.w3.org/2000/svg"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h.01"/></symbol></svg>
+<svg width="16" height="16">
+<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>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right-circle" viewBox="0 0 24 24" id="arrow-right-circle" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M12 16l4-4-4-4M8 12h8"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle" id="cancel" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M15 9l-6 6M9 9l6 6"/>
+</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"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle" viewBox="0 0 24 24" id="close" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M15 9l-6 6M9 9l6 6"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit" id="commit" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="4"/>
+<path d="M1.05 12H7M17.01 12h5.95"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart" id="filter" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 20V10M18 20V4M6 20v-4"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle" id="help" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu" id="menu" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 12h18M3 6h18M3 18h18"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="currentColor" id="sort" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/>
+<path d="M0 0h24v24H0z" fill="none"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle" id="warning" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h.01"/>
+</symbol>
+</svg>

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

@@ -1,8 +1,11 @@
 "use strict";
 
-var _react = _interopRequireDefault(require("react"));
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.SingleJob = exports.MultipleJobs = exports.EmptyBaseline = void 0;
 
-var _react2 = require("@storybook/react");
+var _react = _interopRequireDefault(require("react"));
 
 var _utils = require("@bundle-stats/utils");
 
@@ -16,44 +19,37 @@ var _ = require(".");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-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; }
-
-var JOBS = (0, _utils.createJobs)([{
-  webpack: _webpackStatsCurrent["default"]
-}, {
-  webpack: _webpackStatsBaseline["default"]
-}]);
-
-var _JOBS = _slicedToArray(JOBS, 1),
-    currentJob = _JOBS[0];
-
-var stories = (0, _react2.storiesOf)('Components/BundleAssetsTotalsTable', module);
-stories.addDecorator((0, _stories.getWrapperDecorator)());
-stories.add('default', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.BundleAssetsTotalsTable, {
-    jobs: [currentJob]
-  });
-});
-stories.add('multiple jobs', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.BundleAssetsTotalsTable, {
-    jobs: JOBS
-  });
-});
-var JOBS_EMPTY_BASELINE = (0, _utils.createJobs)([{
-  webpack: _webpackStatsCurrent["default"]
-}, null]);
-stories.add('empty baseline', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.BundleAssetsTotalsTable, {
-    jobs: JOBS_EMPTY_BASELINE
-  });
-});
+var _default = {
+  title: 'Components/BundleAssetsTotalsTable',
+  component: _.BundleAssetsTotalsTable,
+  decorators: [(0, _stories.getWrapperDecorator)()]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_.BundleAssetsTotalsTable, args);
+};
+
+var SingleJob = Template.bind();
+exports.SingleJob = SingleJob;
+SingleJob.args = {
+  jobs: (0, _utils.createJobs)([{
+    webpack: _webpackStatsCurrent["default"]
+  }])
+};
+var MultipleJobs = Template.bind();
+exports.MultipleJobs = MultipleJobs;
+MultipleJobs.args = {
+  jobs: (0, _utils.createJobs)([{
+    webpack: _webpackStatsCurrent["default"]
+  }, {
+    webpack: _webpackStatsBaseline["default"]
+  }])
+};
+var EmptyBaseline = Template.bind();
+exports.EmptyBaseline = EmptyBaseline;
+EmptyBaseline.args = {
+  jobs: (0, _utils.createJobs)([{
+    webpack: _webpackStatsCurrent["default"]
+  }, null])
+};

package/lib/components/summary/summary.js

@@ -17,6 +17,8 @@ var _utils = require("@bundle-stats/utils");
 
 var _constants = require("../../constants");
 
+var _icon = require("../../ui/icon");
+
 var _box = require("../../layout/box");
 
 var _flexStack = require("../../layout/flex-stack");
@@ -27,12 +29,12 @@ var _summaryItem = require("../summary-item");
 
 var _summaryModule = _interopRequireDefault(require("./summary.module.css"));
 
-var _excluded = ["className", "metricOptions", "SummaryItemCustomLink"];
-
 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; }
 
+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 _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."); }
@@ -45,74 +47,45 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 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); }
-
-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; }
-
-var CustomSummaryItem = function CustomSummaryItem(_ref) {
+var Summary = function Summary(_ref) {
   var className = _ref.className,
-      metricOptions = _ref.metricOptions,
-      SummaryItemCustomLink = _ref.SummaryItemCustomLink,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/_react["default"].createElement(_box.Box, _extends({
-    padding: ['xsmall', 'small'],
-    className: (0, _classnames["default"])(className, _summaryModule["default"].summaryItemLink)
-  }, props, {
-    as: SummaryItemCustomLink
-  }, metricOptions.link));
-};
-
-CustomSummaryItem.propTypes = {
-  className: _propTypes["default"].string,
-  metricOptions: _propTypes["default"].shape({
-    link: _propTypes["default"].any // eslint-disable-line react/forbid-prop-types
-
-  }).isRequired,
-  SummaryItemCustomLink: _propTypes["default"].elementType.isRequired
-};
-CustomSummaryItem.defaultProps = {
-  className: ''
-};
-
-var Summary = function Summary(_ref2) {
-  var className = _ref2.className,
-      size = _ref2.size,
-      keys = _ref2.keys,
-      data = _ref2.data,
-      loading = _ref2.loading,
-      showSummaryItemDelta = _ref2.showSummaryItemDelta,
-      SummaryItemCustomLink = _ref2.summaryItemLink;
+      size = _ref.size,
+      keys = _ref.keys,
+      data = _ref.data,
+      loading = _ref.loading,
+      showSummaryItemDelta = _ref.showSummaryItemDelta,
+      SummaryItemCustomLink = _ref.summaryItemLink;
   return /*#__PURE__*/_react["default"].createElement(_box.Box, {
     outline: true,
     className: (0, _classnames["default"])(_summaryModule["default"].root, className)
   }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     className: _summaryModule["default"].items
-  }, Array.from(_utils.METRIC_COMPONENT_LINKS).filter(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 1),
-        metricId = _ref4[0];
+  }, Array.from(_utils.METRIC_COMPONENT_LINKS).filter(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 1),
+        metricId = _ref3[0];
 
     return keys.includes(metricId);
-  }).map(function (_ref5) {
-    var _ref6 = _slicedToArray(_ref5, 2),
-        metricId = _ref6[0],
-        metricOptions = _ref6[1];
-
-    return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
-      as: CustomSummaryItem,
-      className: _summaryModule["default"].item,
-      metricOptions: metricOptions,
-      SummaryItemCustomLink: SummaryItemCustomLink,
-      size: size,
+  }).map(function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+        metricId = _ref5[0],
+        metricOptions = _ref5[1];
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
       key: metricId,
+      className: _summaryModule["default"].item
+    }, /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
+      size: size,
       id: metricId,
       data: (0, _get2["default"])(data, metricId),
       loading: loading,
       showMetricDescription: true,
       showDelta: showSummaryItemDelta && metricOptions.showDelta !== false
-    });
+    }), !loading && /*#__PURE__*/_react["default"].createElement(SummaryItemCustomLink, _extends({}, metricOptions.link, {
+      className: _summaryModule["default"].readMore
+    }), /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+      className: _summaryModule["default"].readMoreIcon,
+      glyph: _icon.Icon.ICONS.ARROW_RIGHT_CIRLCE
+    })));
   })));
 };
 

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

@@ -3,35 +3,52 @@
   overflow: auto;
 }
 
-.items {}
-
 .item {
+  padding: var(--space-small) var(--space-xxlarge) var(--space-small) var(--space-small);
   flex: 1 0 25%; /* force equal sizes */
   position: relative;
   z-index: 1;
 }
 
-.item:focus-visible {
-  background: var(--color-highlight);
-  outline: none;
-}
-
 .item::before {
   content: '';
   display: block;
   width: 1px;
   position: absolute;
   left: -1px;
-  top: var(--space-xsmall);
-  bottom: var(--space-xsmall);
+  top: var(--space-small);
+  bottom: var(--space-small);
   background: var(--color-outline);
 }
 
-.item:hover {
-  background: var(--color-highlight);
+.readMore {
+  display: block;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: var(--space-small);
+  color: var(--color-text-ultra-light);
+  transition: var(--transition-out);
+}
+
+.readMore:hover,
+.readMore:focus {
+  color: var(--color-primary);
+  transition: var(--transition-in);
+}
+
+.readMoreIcon {
+  display: block;
+}
+
+/** hover state */
+.readMore {
+  opacity: 0;
 }
 
-.summaryItemLink {
-  color: inherit;
-  text-decoration: none;
+.item:hover .readMore,
+.item:active .readMore,
+.item:focus .readMore {
+  opacity: 1;
+  transition: var(--transition-in);
 }

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

@@ -37,7 +37,7 @@ 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 MetricInfo = function MetricInfo(_ref) {
+var MetricInfoPopover = function MetricInfoPopover(_ref) {
   var description = _ref.description,
       url = _ref.url;
 
@@ -55,11 +55,11 @@ var MetricInfo = function MetricInfo(_ref) {
   }, "Read more")));
 };
 
-MetricInfo.propTypes = {
+MetricInfoPopover.propTypes = {
   description: _propTypes["default"].string.isRequired,
   url: _propTypes["default"].string
 };
-MetricInfo.defaultProps = {
+MetricInfoPopover.defaultProps = {
   url: ''
 };
 
@@ -84,7 +84,7 @@ var SummaryItem = function SummaryItem(_ref2) {
   var metric = (0, _utils.getGlobalMetricType)(id);
   var runInfo = (0, _utils.getMetricRunInfo)(metric, current, baseline);
   var showMetricDescriptionTooltip = showMetricDescription && (metric === null || metric === void 0 ? void 0 : metric.description);
-  var rootClassName = (0, _classnames["default"])(_summaryItemModule["default"].root, className, _summaryItemModule["default"][size], showMetricDescription && _summaryItemModule["default"].showMetricDescription, showMetricDescriptionTooltip && _summaryItemModule["default"].showMetricDescription, showDelta && _summaryItemModule["default"].showDelta);
+  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",
     as: Component,
@@ -96,7 +96,7 @@ var SummaryItem = function SummaryItem(_ref2) {
   }, /*#__PURE__*/_react["default"].createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
     className: _summaryItemModule["default"].icon,
     icon: "help"
-  }, /*#__PURE__*/_react["default"].createElement(MetricInfo, metric))), /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, !loading ? /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
+  }, /*#__PURE__*/_react["default"].createElement(MetricInfoPopover, metric))), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
     className: _summaryItemModule["default"].currentMetric,
     value: current,
     formatter: metric.formatter,
@@ -106,13 +106,13 @@ var SummaryItem = function SummaryItem(_ref2) {
     className: _summaryItemModule["default"].delta,
     displayValue: runInfo.displayDeltaPercentage,
     deltaType: runInfo.deltaType
-  })) : /*#__PURE__*/_react["default"].createElement(_skeleton.Skeleton, {
-    className: (0, _classnames["default"])(_summaryItemModule["default"].currentMetric, _summaryItemModule["default"].loading)
-  }), !loading ? /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
+  })), /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
     className: _summaryItemModule["default"].baselineMetric,
     value: baseline,
     formatter: metric.formatter
-  }) : /*#__PURE__*/_react["default"].createElement(_skeleton.Skeleton, {
+  })) : /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_skeleton.Skeleton, {
+    className: (0, _classnames["default"])(_summaryItemModule["default"].currentMetric, _summaryItemModule["default"].loading)
+  }), /*#__PURE__*/_react["default"].createElement(_skeleton.Skeleton, {
     className: (0, _classnames["default"])(_summaryItemModule["default"].baselineMetric, _summaryItemModule["default"].loading)
   })));
 };

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

@@ -1,5 +1,4 @@
 .title {
-  margin: 0;
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
@@ -31,20 +30,20 @@
   display: block;
   color: var(--color-heading);
   font-size: var(--size-large);
-  line-height: 1.3;
+  line-height: var(--space-medium);
   white-space: nowrap;
   font-weight: bold;
 }
 
 .delta {
-  margin: var(--space-xxxsmall) 0 0;
   font-size: var(--size-small);
+  line-height: var(--space-medium);
 }
 
 .baselineMetric {
   color: var(--color-text-light);
   font-size: var(--size-small);
-  line-height: 1.3;
+  line-height: var(--space-small);
 }
 
 /* Loading state */
@@ -60,9 +59,4 @@
 .large .currentMetric {
   font-size: var(--size-xxxlarge);
   line-height: var(--space-medium);
-  min-height: var(--space-medium);
-}
-
-.large .baselineMetric {
-  font-size: var(--size-medium);
 }

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

@@ -1,20 +1,23 @@
 "use strict";
 
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@storybook/react");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Standard = exports.SizeLarge = exports.ShowMetricDescription = exports.ShowDeltaFalse = exports.Loading = void 0;
 
-var _stories = require("../../stories");
+var _react = _interopRequireDefault(require("react"));
 
 var _summaryItem = require("./summary-item");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var stories = (0, _react2.storiesOf)('Components/SummaryItem', module);
-stories.addDecorator((0, _stories.getWrapperDecorator)({
-  maxWidth: '320px'
-}));
-stories.add('default', function () {
+var _default = {
+  title: 'Components/SummaryItem',
+  component: _summaryItem.SummaryItem
+};
+exports["default"] = _default;
+
+var Standard = function Standard() {
   return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
     loading: false,
     id: "webpack.totalSizeByTypeALL",
@@ -23,8 +26,11 @@ stories.add('default', function () {
       baseline: 100 * 1000
     }
   });
-});
-stories.add('size large', function () {
+};
+
+exports.Standard = Standard;
+
+var SizeLarge = function SizeLarge() {
   return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
     size: "large",
     loading: false,
@@ -34,8 +40,11 @@ stories.add('size large', function () {
       baseline: 100 * 1000
     }
   });
-});
-stories.add('showMetricDescription', function () {
+};
+
+exports.SizeLarge = SizeLarge;
+
+var ShowMetricDescription = function ShowMetricDescription() {
   return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
     loading: false,
     id: "webpack.totalSizeByTypeALL",
@@ -45,8 +54,11 @@ stories.add('showMetricDescription', function () {
     },
     showMetricDescription: true
   });
-});
-stories.add('showDelta false', function () {
+};
+
+exports.ShowMetricDescription = ShowMetricDescription;
+
+var ShowDeltaFalse = function ShowDeltaFalse() {
   return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
     loading: false,
     id: "webpack.totalSizeByTypeALL",
@@ -56,10 +68,15 @@ stories.add('showDelta false', function () {
     },
     showDelta: false
   });
-});
-stories.add('loading', function () {
+};
+
+exports.ShowDeltaFalse = ShowDeltaFalse;
+
+var Loading = function Loading() {
   return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
     loading: true,
     id: "webpack.totalSizeByTypeALL"
   });
-});
+};
+
+exports.Loading = Loading;

package/lib/css/variables.css

@@ -27,20 +27,20 @@
 
   /*
    * Color scheme:
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23484a4d&mcgpalette4=%233385d6&themename=mcgtheme
+   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23636568&mcgpalette4=%233385d6&themename=mcgtheme
    * https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
    */
   --color-gray-25: #fafafa;
-  --color-gray-50: #e9e9ea;
-  --color-gray-100: #c8c9ca;
-  --color-gray-200: #a4a5a6;
-  --color-gray-300: #7f8082;
-  --color-gray-400: #636568;
-  --color-gray-500: #484a4d;
-  --color-gray-600: #414346;
-  --color-gray-700: #383a3d;
-  --color-gray-800: #303234;
-  --color-gray-900: #212225;
+  --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);
@@ -181,6 +181,10 @@
   --layer-high: 1000;
   --layer-xhigh: 10000;
 
+  --radius-small: var(--space-xxxsmall);
+  --radius-medium: var(--space-xxsmall);
+  --radius-large: var(--space-small);
+
   /** Layout */
   --max-width: 80rem;
 }

package/lib/ui/icon/icon.js

@@ -25,6 +25,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var ICONS = {
   ARROW: 'arrow',
+  ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
   CANCEL: 'cancel',
   CLOSE: 'close',
   CLOCK: 'clock',