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

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

@@ -1,20 +1,18 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
 import { SummaryItem } from './summary-item';
-const stories = storiesOf('Components/SummaryItem', module);
-stories.addDecorator(getWrapperDecorator({
-  maxWidth: '320px'
-}));
-stories.add('default', () => /*#__PURE__*/React.createElement(SummaryItem, {
+export default {
+  title: 'Components/SummaryItem',
+  component: SummaryItem
+};
+export const Standard = () => /*#__PURE__*/React.createElement(SummaryItem, {
   loading: false,
   id: "webpack.totalSizeByTypeALL",
   data: {
     current: 120 * 1000,
     baseline: 100 * 1000
   }
-}));
-stories.add('size large', () => /*#__PURE__*/React.createElement(SummaryItem, {
+});
+export const SizeLarge = () => /*#__PURE__*/React.createElement(SummaryItem, {
   size: "large",
   loading: false,
   id: "webpack.totalSizeByTypeALL",
@@ -22,8 +20,8 @@ stories.add('size large', () => /*#__PURE__*/React.createElement(SummaryItem, {
     current: 120 * 1000,
     baseline: 100 * 1000
   }
-}));
-stories.add('showMetricDescription', () => /*#__PURE__*/React.createElement(SummaryItem, {
+});
+export const ShowMetricDescription = () => /*#__PURE__*/React.createElement(SummaryItem, {
   loading: false,
   id: "webpack.totalSizeByTypeALL",
   data: {
@@ -31,8 +29,8 @@ stories.add('showMetricDescription', () => /*#__PURE__*/React.createElement(Summ
     baseline: 100 * 1000
   },
   showMetricDescription: true
-}));
-stories.add('showDelta false', () => /*#__PURE__*/React.createElement(SummaryItem, {
+});
+export const ShowDeltaFalse = () => /*#__PURE__*/React.createElement(SummaryItem, {
   loading: false,
   id: "webpack.totalSizeByTypeALL",
   data: {
@@ -40,8 +38,8 @@ stories.add('showDelta false', () => /*#__PURE__*/React.createElement(SummaryIte
     baseline: 0
   },
   showDelta: false
-}));
-stories.add('loading', () => /*#__PURE__*/React.createElement(SummaryItem, {
+});
+export const Loading = () => /*#__PURE__*/React.createElement(SummaryItem, {
   loading: true,
   id: "webpack.totalSizeByTypeALL"
-}));
+});

package/lib-esm/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-esm/hooks/search-params.js

@@ -8,7 +8,7 @@ const ACTION_RESET_ALL = 'RESET_ALL';
 const ACTION_SET = 'SET';
 
 const getSearchPattern = search => {
-  let searchPattern = new RegExp(/.*/);
+  let searchPattern = /.*/;
 
   if (!search || !search.trim()) {
     return searchPattern;

package/lib-esm/layout/box/box.js

@@ -17,9 +17,9 @@ export const Box = props => {
   } = props;
   const [resolvedPadding, resolvedVerticalPadding, resolvedHorizontalPadding] = Array.isArray(padding) ? [null, ...padding] : [padding, verticalPadding, horizontalPadding];
   const rootClassName = cx(css.root, className, resolvedPadding && css[`padding-${resolvedPadding}`], resolvedVerticalPadding && css[`vertical-padding-${resolvedVerticalPadding}`], resolvedHorizontalPadding && css[`horizontal-padding-${resolvedHorizontalPadding}`], outline && css.outline);
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
     className: rootClassName
-  }, restProps));
+  }));
 };
 Box.defaultProps = {
   className: '',

package/lib-esm/layout/stack/stack.js

@@ -1,3 +1,5 @@
+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); }
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -9,12 +11,13 @@ export const Stack = props => {
     as: Component,
     className,
     space,
-    children
+    children,
+    ...restProps
   } = props;
   const rootClassName = cx(className, css.root, css[`space--${space}`]);
-  return /*#__PURE__*/React.createElement(Component, {
+  return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
     className: rootClassName
-  }, React.Children.map(children, getRenderChildWithClassName(css.item)));
+  }), React.Children.map(children, getRenderChildWithClassName(css.item)));
 };
 Stack.defaultProps = {
   as: 'div',

package/lib-esm/ui/icon/icon.js

@@ -6,6 +6,7 @@ import cx from 'classnames';
 import css from './icon.module.css';
 const ICONS = {
   ARROW: 'arrow',
+  ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
   CANCEL: 'cancel',
   CLOSE: 'close',
   CLOCK: 'clock',

package/lib-esm/ui/icon/icon.stories.js

@@ -1,21 +1,32 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
 import { Icon } from '.';
-const stories = storiesOf('UI/Icon', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(Icon, {
+export default {
+  title: 'UI/Icon',
+  component: Icon
+};
+
+const Template = args => /*#__PURE__*/React.createElement(Icon, args);
+
+export const Standard = Template.bind();
+Standard.args = {
   glyph: Icon.ICONS.ARROW
-}));
-stories.add('with size', () => /*#__PURE__*/React.createElement(Icon, {
+};
+export const CustomSize = Template.bind();
+CustomSize.args = {
   glyph: Icon.ICONS.ARROW,
   size: Icon.SIZE_LARGE
-}));
-stories.add('all', () => /*#__PURE__*/React.createElement(React.Fragment, null, Object.values(Icon.ICONS).map(glyph => /*#__PURE__*/React.createElement("span", {
+};
+export const All = () => /*#__PURE__*/React.createElement(React.Fragment, null, Object.values(Icon.ICONS).map(glyph => /*#__PURE__*/React.createElement("div", {
   style: {
-    margin: '0.3rem'
+    display: 'inline-block',
+    padding: '1rem',
+    textAlign: 'center'
   }
 }, /*#__PURE__*/React.createElement(Icon, {
   glyph: glyph,
   key: glyph
-})))));
+}), /*#__PURE__*/React.createElement("code", {
+  style: {
+    display: 'block'
+  }
+}, glyph))));

package/lib-esm/ui/popover/popover.js

@@ -16,7 +16,7 @@ export const Popover = _ref => {
   } = _ref;
   const popover = usePopoverState({
     baseId: process.env.NODE_ENV === 'test' && 'id-test',
-    gutter: 24,
+    gutter: 12,
     modal: true,
     placement: 'top'
   });
@@ -45,7 +45,7 @@ export const Popover = _ref => {
   }), /*#__PURE__*/React.createElement(UIPopoverArrow, _extends({
     className: css.arrow
   }, popover, {
-    size: 24
+    size: 16
   })), typeof children === 'function' ? children({
     popoverToggle: popover.toggle
   }) : children, /*#__PURE__*/React.createElement(Icon, {

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

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

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

@@ -12,6 +12,7 @@
 
 .tooltip {
   padding: var(--space-xxxsmall) var(--space-xxsmall);
+  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.2.1-beta.8",
+  "version": "3.2.2",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -12,7 +12,7 @@
     "build-esm": "babel -D src -d lib-esm --ignore **/__tests__/**/* --ignore /prototypes/**",
     "build-storybook": "npx build-storybook -c ./build/storybook",
     "generate-chart-colors": "node scripts/generate-chart-colors.js",
-    "generate-svg-sprite": "npx svg-sprite -s --si src/assets/icons/*.svg && mv symbol/svg/sprite.symbol.svg src/assets/icons.svg",
+    "generate-svg-sprite": "npx svg-sprite -s --si --no-svg-namespace-classnames src/assets/icons/*.svg && mv symbol/svg/sprite.symbol.svg src/assets/icons.svg",
     "lint": "../../node_modules/.bin/eslint . --ext .jsx,.js",
     "start": "cross-env NODE_ENV=development start-storybook -c ./build/storybook -p 8080",
     "test": "npm run test:unit && npm run test:storyshots",
@@ -42,31 +42,31 @@
     "@babel/preset-env": "7.16.4",
     "@babel/preset-react": "7.16.0",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
-    "@storybook/addon-knobs": "6.3.1",
+    "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.3.12",
-    "@storybook/addons": "6.3.12",
-    "@storybook/builder-webpack5": "^6.3.12",
-    "@storybook/manager-webpack5": "^6.3.12",
-    "@storybook/react": "6.3.12",
+    "@storybook/addon-storyshots": "6.4.8",
+    "@storybook/addons": "6.4.8",
+    "@storybook/builder-webpack5": "6.4.8",
+    "@storybook/manager-webpack5": "6.4.8",
+    "@storybook/react": "6.4.8",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "27.3.1",
+    "babel-jest": "27.4.2",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.0.6",
+    "chromatic": "6.2.0",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
-    "core-js": "3.19.1",
+    "core-js": "3.19.3",
     "cross-env": "7.0.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "27.3.1",
+    "jest": "27.4.3",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
-    "postcss": "8.3.11",
+    "postcss": "8.4.4",
     "prop-types": "15.7.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -84,11 +84,11 @@
     "react-router-dom": "^5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.2.1-beta.8",
+    "@bundle-stats/utils": "^3.2.2",
     "date-fns": "^2.6.0",
     "query-string": "^7.0.0",
     "reakit": "^1.3.6",
     "use-query-params": "^1.2.2"
   },
-  "gitHead": "46335ff5ced2c000c843d25fe83b040fb3c43477"
+  "gitHead": "e9caf650b9f5c2e4408011ccb302c2dfa3ccdb0f"
 }

package/src/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/src/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/src/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/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.jsx

@@ -13,6 +13,20 @@ import { Stack } from '../../layout/stack';
 import { SummaryItem } from '../summary-item';
 import css from './bundle-assets-totals-chart-bars.module.css';
 
+const getTooltip = (items, jobs, itemIndex, runIndex) => () => (
+  <SummaryItem
+    className={css.itemTooltip}
+    id={get(items, [itemIndex, 'key'])}
+    data={{
+      current: get(items, [itemIndex, 'runs', runIndex, 'value'], 0),
+      baseline: get(items, [itemIndex, 'runs', runIndex + 1, 'value'], 0),
+    }}
+    showDelta={runIndex < jobs.length - 1}
+    showBaselineValue={runIndex < jobs.length - 1}
+    size="large"
+  />
+);
+
 export const BundleAssetsTotalsChartBars = ({
   className,
   jobs,
@@ -43,20 +57,6 @@ export const BundleAssetsTotalsChartBars = ({
   });
   const colors = getColors(max(map(dataGraphs, (values) => values.length)));
 
-  const getTooltip = (itemIndex, runIndex) => () => (
-    <SummaryItem
-      className={css.itemTooltip}
-      id={get(items, [itemIndex, 'key'])}
-      data={{
-        current: get(items, [itemIndex, 'runs', runIndex, 'value'], 0),
-        baseline: get(items, [itemIndex, 'runs', runIndex + 1, 'value'], 0),
-      }}
-      showDelta={runIndex < jobs.length - 1}
-      showBaselineValue={runIndex < jobs.length - 1}
-      size="large"
-    />
-  );
-
   return (
     <Stack className={rootClassName} space="medium">
       {dataGraphs.map((data, runIndex) => {
@@ -66,7 +66,7 @@ export const BundleAssetsTotalsChartBars = ({
           value,
           color: colors[valueIndex],
           label: labels[valueIndex],
-          getItemTooltip: getTooltip(valueIndex, runIndex),
+          getItemTooltip: getTooltip(items, jobs, valueIndex, runIndex),
         }));
 
         return (

package/src/components/job-meta/job-meta.jsx

@@ -19,9 +19,7 @@ export const JobMeta = (props) => {
         return (
           <div className={css.item} key={key}>
             {title && (<h2 className={css.itemTitle}>{title}</h2>)}
-            {content.map((item) => (
-              <>{item}</>
-            ))}
+            {content.map((item) => item)}
           </div>
         );
       })}

package/src/components/summary/summary.jsx

@@ -5,6 +5,7 @@ import { get } from 'lodash';
 import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
 
 import { METRICS_WEBPACK_GENERAL } from '../../constants';
+import { Icon } from '../../ui/icon';
 import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
 import { ComponentLink } from '../component-link';
@@ -22,29 +23,25 @@ export const Summary = ({
 }) => (
   <Box outline className={cx(css.root, className)}>
     <FlexStack className={css.items}>
-      {Array.from(METRIC_COMPONENT_LINKS).filter(([metricId]) => keys.includes(metricId)).map(
-        ([metricId, metricOptions]) => (
-          <SummaryItem
-            as={({ className: itemClassName, ...itemProps }) => (
-              <Box
-                padding={['xsmall', 'small']}
-                className={cx(itemClassName, css.summaryItemLink)}
-                {...itemProps}
-                as={SummaryItemCustomLink}
-                {...metricOptions.link}
-              />
+      {Array.from(METRIC_COMPONENT_LINKS)
+        .filter(([metricId]) => keys.includes(metricId))
+        .map(([metricId, metricOptions]) => (
+          <div key={metricId} className={css.item}>
+            <SummaryItem
+              size={size}
+              id={metricId}
+              data={get(data, metricId)}
+              loading={loading}
+              showMetricDescription
+              showDelta={showSummaryItemDelta && metricOptions.showDelta !== false}
+            />
+            {!loading && (
+              <SummaryItemCustomLink {...metricOptions.link} className={css.readMore}>
+                <Icon className={css.readMoreIcon} glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} />
+              </SummaryItemCustomLink>
             )}
-            size={size}
-            key={metricId}
-            id={metricId}
-            data={get(data, metricId)}
-            loading={loading}
-            showMetricDescription
-            showDelta={showSummaryItemDelta && metricOptions.showDelta !== false}
-            className={css.item}
-          />
-        )
-      )}
+          </div>
+        ))}
     </FlexStack>
   </Box>
 );

package/src/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/src/components/summary-item/summary-item.jsx

@@ -11,7 +11,7 @@ import { Metric } from '../metric';
 import { Delta } from '../delta';
 import css from './summary-item.module.css';
 
-const MetricInfo = ({ description, url }) => {
+const MetricInfoPopover = ({ description, url }) => {
   // Workaround cases where the parent is a link
   const readMoreOnClick = () => {
     window.open(url);
@@ -31,12 +31,12 @@ const MetricInfo = ({ description, url }) => {
   );
 };
 
-MetricInfo.propTypes = {
+MetricInfoPopover.propTypes = {
   description: PropTypes.string.isRequired,
   url: PropTypes.string,
 };
 
-MetricInfo.defaultProps = {
+MetricInfoPopover.defaultProps = {
   url: '',
 };
 
@@ -57,14 +57,7 @@ export const SummaryItem = ({
   const runInfo = getMetricRunInfo(metric, current, baseline);
   const showMetricDescriptionTooltip = showMetricDescription && metric?.description;
 
-  const rootClassName = cx(
-    css.root,
-    className,
-    css[size],
-    showMetricDescription && css.showMetricDescription,
-    showMetricDescriptionTooltip && css.showMetricDescription,
-    showDelta && css.showDelta,
-  );
+  const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
 
   return (
     <Stack space="xxsmall" as={Component} className={rootClassName} {...props}>
@@ -73,13 +66,13 @@ export const SummaryItem = ({
 
         {showMetricDescriptionTooltip && (
           <Popover className={css.icon} icon="help">
-            <MetricInfo {...metric} />
+            <MetricInfoPopover {...metric} />
           </Popover>
         )}
       </FlexStack>
 
-      <Stack>
-        {!loading ? (
+      {!loading ? (
+        <Stack>
           <Metric
             className={css.currentMetric}
             value={current}
@@ -95,16 +88,14 @@ export const SummaryItem = ({
               />
             )}
           </Metric>
-        ) : (
-          <Skeleton className={cx(css.currentMetric, css.loading)} />
-        )}
-
-        {!loading ? (
           <Metric className={css.baselineMetric} value={baseline} formatter={metric.formatter} />
-        ) : (
+        </Stack>
+      ) : (
+        <Stack>
+          <Skeleton className={cx(css.currentMetric, css.loading)} />
           <Skeleton className={cx(css.baselineMetric, css.loading)} />
-        )}
-      </Stack>
+        </Stack>
+      )}
     </Stack>
   );
 };