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

package/CHANGELOG.md

@@ -3,21 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [3.2.1-beta.7](https://github.com/relative-ci/bundle-stats/compare/v3.2.1-beta.6...v3.2.1-beta.7) (2021-11-21)
+## [3.2.2-beta.0](https://github.com/relative-ci/bundle-stats/compare/v3.2.1...v3.2.2-beta.0) (2021-12-08)
 
-**Note:** Version bump only for package @bundle-stats/ui
+
+### 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-beta.6](https://github.com/relative-ci/bundle-stats/compare/v3.2.0...v3.2.1-beta.6) (2021-11-21)
+## [3.2.1](https://github.com/relative-ci/bundle-stats/compare/v3.2.0...v3.2.1) (2021-11-23)
 
 
 ### Bug Fixes
 
 * **ui:** Regenerate package-lock.json ([8632b07](https://github.com/relative-ci/bundle-stats/commit/8632b072ffc240a1961056c08c165fbf1d986fc8))
 * **ui:** Remove unused icons ([8c337da](https://github.com/relative-ci/bundle-stats/commit/8c337da68a9628d9ef4c9d27f11747b0bc548f29))
+* **ui:** Stack - past rest props ([fb3bea5](https://github.com/relative-ci/bundle-stats/commit/fb3bea55941aeb7cf3b6aa0dc43c33d40e0cfca2))
 
 
 

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/browsertime-table/browsertime-table.stories.js

@@ -22,6 +22,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+// eslint-disable-next-line import/no-relative-packages
 var browsertimeFixtures = browsertime.filter(_browsertime2["default"]);
 var JOBS = (0, _utils.createJobs)([{
   browsertime: browsertimeFixtures

package/lib/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js

@@ -59,6 +59,22 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 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; }
 
+var getTooltip = function getTooltip(items, jobs, itemIndex, runIndex) {
+  return function () {
+    return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
+      className: _bundleAssetsTotalsChartBarsModule["default"].itemTooltip,
+      id: (0, _get2["default"])(items, [itemIndex, 'key']),
+      data: {
+        current: (0, _get2["default"])(items, [itemIndex, 'runs', runIndex, 'value'], 0),
+        baseline: (0, _get2["default"])(items, [itemIndex, 'runs', runIndex + 1, 'value'], 0)
+      },
+      showDelta: runIndex < jobs.length - 1,
+      showBaselineValue: runIndex < jobs.length - 1,
+      size: "large"
+    });
+  };
+};
+
 var BundleAssetsTotalsChartBars = function BundleAssetsTotalsChartBars(_ref) {
   var className = _ref.className,
       jobs = _ref.jobs,
@@ -88,23 +104,6 @@ var BundleAssetsTotalsChartBars = function BundleAssetsTotalsChartBars(_ref) {
   var colors = (0, _utils2.getColors)((0, _max2["default"])((0, _map2["default"])(dataGraphs, function (values) {
     return values.length;
   })));
-
-  var getTooltip = function getTooltip(itemIndex, runIndex) {
-    return function () {
-      return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
-        className: _bundleAssetsTotalsChartBarsModule["default"].itemTooltip,
-        id: (0, _get2["default"])(items, [itemIndex, 'key']),
-        data: {
-          current: (0, _get2["default"])(items, [itemIndex, 'runs', runIndex, 'value'], 0),
-          baseline: (0, _get2["default"])(items, [itemIndex, 'runs', runIndex + 1, 'value'], 0)
-        },
-        showDelta: runIndex < jobs.length - 1,
-        showBaselineValue: runIndex < jobs.length - 1,
-        size: "large"
-      });
-    };
-  };
-
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     className: rootClassName,
     space: "medium"
@@ -115,7 +114,7 @@ var BundleAssetsTotalsChartBars = function BundleAssetsTotalsChartBars(_ref) {
         value: value,
         color: colors[valueIndex],
         label: labels[valueIndex],
-        getItemTooltip: getTooltip(valueIndex, runIndex)
+        getItemTooltip: getTooltip(items, jobs, valueIndex, runIndex)
       };
     });
     return /*#__PURE__*/_react["default"].createElement("div", {

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/job-meta/job-meta.js

@@ -42,7 +42,7 @@ var JobMeta = function JobMeta(props) {
     }, title && /*#__PURE__*/_react["default"].createElement("h2", {
       className: _jobMetaModule["default"].itemTitle
     }, title), content.map(function (item) {
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item);
+      return item;
     }));
   }));
 };

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,18 +29,12 @@ var _summaryItem = require("../summary-item");
 
 var _summaryModule = _interopRequireDefault(require("./summary.module.css"));
 
-var _excluded = ["className"];
-
 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 _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 _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."); }
@@ -74,27 +70,22 @@ var Summary = function Summary(_ref) {
         metricId = _ref5[0],
         metricOptions = _ref5[1];
 
-    return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
-      as: function as(_ref6) {
-        var itemClassName = _ref6.className,
-            itemProps = _objectWithoutProperties(_ref6, _excluded);
-
-        return /*#__PURE__*/_react["default"].createElement(_box.Box, _extends({
-          padding: ['xsmall', 'small'],
-          className: (0, _classnames["default"])(itemClassName, _summaryModule["default"].summaryItemLink)
-        }, itemProps, {
-          as: SummaryItemCustomLink
-        }, metricOptions.link));
-      },
-      size: size,
+    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,
-      className: _summaryModule["default"].item
-    });
+      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;