@bundle-stats/ui 3.4.0-alpha.4 → 4.0.0-alpha.10

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

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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';

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

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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';

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

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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';

package/lib-esm/ui/sort-dropdown/sort-dropdown.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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';

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

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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';

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

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.4.0-alpha.4",
+  "version": "4.0.0-alpha.10",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -36,28 +36,28 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/cli": "7.17.6",
-    "@babel/core": "7.17.5",
-    "@babel/plugin-proposal-class-properties": "7.16.7",
-    "@babel/preset-env": "7.16.11",
-    "@babel/preset-react": "7.16.7",
+    "@babel/cli": "7.17.10",
+    "@babel/core": "7.18.5",
+    "@babel/plugin-proposal-class-properties": "7.17.12",
+    "@babel/preset-env": "7.18.2",
+    "@babel/preset-react": "7.17.12",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
-    "@storybook/addon-essentials": "6.4.19",
+    "@storybook/addon-essentials": "6.5.9",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.4.19",
-    "@storybook/addons": "6.4.19",
-    "@storybook/builder-webpack5": "6.4.19",
-    "@storybook/manager-webpack5": "6.4.19",
-    "@storybook/react": "6.4.19",
+    "@storybook/addon-storyshots": "6.5.9",
+    "@storybook/addons": "6.5.9",
+    "@storybook/builder-webpack5": "6.5.9",
+    "@storybook/manager-webpack5": "6.5.9",
+    "@storybook/react": "6.5.9",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "27.5.1",
+    "babel-jest": "28.1.1",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.5.1",
+    "chromatic": "6.6.3",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
-    "core-js": "3.20.2",
+    "core-js": "3.23.1",
     "cross-env": "7.0.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
@@ -67,30 +67,30 @@
     "jest": "27.5.1",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
-    "postcss": "8.4.7",
+    "postcss": "8.4.14",
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "react-router-dom": "5.3.0",
+    "react-router-dom": "5.3.1",
     "react-test-renderer": "16.14.0",
     "rimraf": "3.0.2"
   },
   "peerDependencies": {
-    "classnames": "2.2.6",
-    "core-js": "3.20.2",
-    "lodash": "4.17.21",
-    "prop-types": "15.7.2",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-router-dom": "5.3.0"
+    "classnames": "^2.0.0",
+    "core-js": "^3.0.0",
+    "lodash": "^4.0.0",
+    "prop-types": "^15.0.0",
+    "react": "^16.0.0 || ^17.0.0",
+    "react-dom": "^16.0.0 || ^17.0.0",
+    "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.4.0-alpha.4",
-    "ariakit": "2.0.0-alpha.19",
-    "date-fns": "2.28.0",
-    "modern-css-reset": "1.4.0",
-    "query-string": "7.1.1",
-    "use-query-params": "1.2.3"
+    "@bundle-stats/utils": "^4.0.0-alpha.10",
+    "ariakit": "2.0.0-next.30",
+    "date-fns": "^2.28.0",
+    "modern-css-reset": "^1.4.0",
+    "query-string": "^7.1.0",
+    "use-query-params": "^1.2.3"
   },
-  "gitHead": "f7ec27ad6324e0e7c94f429b0ace7a72bf7096fe"
+  "gitHead": "2c53bcf5bcdd840a987063767d12101a359e11ac"
 }

package/src/app/app.jsx

@@ -13,7 +13,6 @@ import {
 import { Box } from '../layout/box';
 import { Container } from '../ui/container';
 import { DuplicatePackagesWarning } from '../components/duplicate-packages-warning';
-import { BudgetInsights } from '../components/budget-insights';
 import { Summary } from '../components/summary';
 import { BundleAssets } from '../components/bundle-assets';
 import { BundleAssetsTotalsChartBars } from '../components/bundle-assets-totals-chart-bars';
@@ -48,7 +47,7 @@ const Layout = ({ jobs, version, ...props }) => (
 );
 
 Layout.propTypes = {
-  jobs: PropTypes.arrayOf(PropTypes.object),
+  jobs: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   version: PropTypes.string,
 };
 
@@ -64,7 +63,7 @@ const JobsProvider = ({ jobs, ...restProps }) => {
 };
 
 JobsProvider.propTypes = {
-  jobs: PropTypes.arrayOf(PropTypes.object).isRequired,
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
 const OverviewContent = () => {
@@ -78,13 +77,10 @@ const OverviewContent = () => {
     <Stack space="medium">
       {duplicatePackagesInsights && (
         <Container>
-          <Stack space="small">
-            <DuplicatePackagesWarning
-              duplicatePackagesCount={duplicatePackagesCount}
-              showDelta={jobs.length > 1}
-            />
-            <BudgetInsights source="webpack" budgets={jobs[0].insights?.webpack?.budgets} />
-          </Stack>
+          <DuplicatePackagesWarning
+            duplicatePackagesCount={duplicatePackagesCount}
+            showDelta={jobs.length > 1}
+          />
         </Container>
       )}
       <Container>
@@ -108,7 +104,6 @@ const AssetsContent = () => {
         <Summary
           keys={METRICS_WEBPACK_ASSETS}
           data={jobs?.[0]?.summary}
-          budgets={jobs[0].insights?.webpack?.budgets}
           showSummaryItemDelta={jobs?.length !== 1}
         />
         <Box outline>
@@ -131,7 +126,6 @@ const ModulesContent = () => {
         <Summary
           keys={METRICS_WEBPACK_MODULES}
           data={jobs?.[0]?.summary}
-          budgets={jobs[0].insights?.webpack?.budgets}
           showSummaryItemDelta={jobs?.length !== 1}
         />
         <Box outline>
@@ -154,7 +148,6 @@ const PackagesContent = () => {
         <Summary
           keys={METRICS_WEBPACK_PACKAGES}
           data={jobs?.[0]?.summary}
-          budgets={jobs[0].insights?.webpack?.budgets}
           showSummaryItemDelta={jobs?.length !== 1}
         />
         <Box outline>
@@ -184,10 +177,10 @@ const AppComponent = ({ version, jobs }) => {
             size="large"
             keys={METRICS_WEBPACK_GENERAL}
             data={jobs[0].summary}
-            budgets={jobs[0].insights?.webpack?.budgets}
             showSummaryItemDelta={jobs.length !== 1}
           />
         </Container>
+
         <Container className={css.tabsContainer}>
           <Tabs className={css.tabs}>
             <NavLink exact to={URLS.OVERVIEW} activeClassName={css.tabActive}>

package/src/app/header/header.jsx

@@ -16,7 +16,7 @@ export const Header = ({ className, jobs }) => (
 
 Header.propTypes = {
   className: PropTypes.string,
-  jobs: PropTypes.arrayOf(PropTypes.object),
+  jobs: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
 };
 
 Header.defaultProps = {

package/src/assets/icons.svg

@@ -1,8 +1,4 @@
 <svg width="16" height="16">
-<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle" viewBox="0 0 24 24" id="alert-circle" xmlns="http://www.w3.org/2000/svg">
-<circle cx="12" cy="12" r="10"/>
-<path d="M12 8v4M12 16h.01"/>
-</symbol>
 <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>
@@ -14,10 +10,6 @@
 <circle cx="12" cy="12" r="10"/>
 <path d="M15 9l-6 6M9 9l6 6"/>
 </symbol>
-<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle" viewBox="0 0 24 24" id="check-circle" xmlns="http://www.w3.org/2000/svg">
-<path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
-<path d="M22 4L12 14.01l-3-3"/>
-</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"/>

package/src/components/bundle-assets/bundle-assets.jsx

@@ -146,7 +146,7 @@ RowHeader.propTypes = {
     isChunk: PropTypes.bool,
     isInitial: PropTypes.bool,
     isEntry: PropTypes.bool,
-    runs: PropTypes.arrayOf(PropTypes.object),
+    runs: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   }).isRequired,
   chunks: PropTypes.arrayOf(
     PropTypes.shape({

package/src/components/bundle-assets-totals-table/bundle-assets-totals-table.jsx

@@ -1,15 +1,11 @@
-import React, { useCallback, useMemo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { get } from 'lodash';
 import { getBundleAssetsFileTypeComponentLink } from '@bundle-stats/utils';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 
 import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
-import { FlexStack } from '../../layout/flex-stack';
 import { MetricsTable } from '../metrics-table';
 import { ComponentLink } from '../component-link';
-import { BudgetInfo } from '../budget-info';
-import css from './bundle-assets-totals-table.module.css';
 
 export const BundleAssetsTotalsTable = ({
   className,
@@ -17,28 +13,18 @@ export const BundleAssetsTotalsTable = ({
   customComponentLink: CustomComponentLink,
   ...restProps
 }) => {
-  const items = useMemo(() => webpack.compareBySection.sizes(jobs), [jobs]);
-  const budgets = jobs[0].insights?.webpack?.budgets;
-
-  const renderRowHeader = useCallback(
-    (item) => {
-      const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
-      const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
-      const [_, ...metricSlugs] = item.key.split('.');
-      const metricKey = metricSlugs.join('.');
-      const budget = get(budgets, metricKey);
-
-      return (
-        <CustomComponentLink section={section} title={title} params={params}>
-          <FlexStack space="xxsmall" className={css.itemTitleText}>
-            <span>{item.label}</span>
-            {budget && <BudgetInfo metricId={item.key} budgetInsight={budget} />}
-          </FlexStack>
-        </CustomComponentLink>
-      );
-    },
-    [CustomComponentLink],
-  );
+  const items = webpack.compareBySection.sizes(jobs);
+
+  const renderRowHeader = (item) => {
+    const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
+    const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
+
+    return (
+      <CustomComponentLink section={section} title={title} params={params}>
+        {item.label}
+      </CustomComponentLink>
+    );
+  };
 
   return (
     <MetricsTable

package/src/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css

@@ -1,3 +1,3 @@
-.itemTitleText {
-  align-items: center;
+.title {
+  color: var(--color-text-light);
 }

package/src/components/bundle-modules/bundle-modules.jsx

@@ -131,9 +131,8 @@ export const BundleModules = ({
       disabled: jobs.length <= 1,
     },
     [MODULE_FILTERS.DUPLICATED]: {
-      label: 'Duplicated',
+      label: 'Duplicate',
       defaultValue: filters[MODULE_FILTERS.DUPLICATED],
-      disabled: jobs.length <= 1,
     },
     [MODULE_SOURCE_TYPE]: {
       label: 'Source',

package/src/components/bundle-packages/bundle-packages.jsx

@@ -28,8 +28,8 @@ import { MetricsTableTitle } from '../metrics-table-title';
 import css from './bundle-packages.module.css';
 
 const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponentLink }) => {
-  const normalizedPackagePath =
-    path || `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}/`;
+  const fallbackPackagePath = `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}`;
+  const normalizedPackagePath = `${path || fallbackPackagePath}/`;
   const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
 
   return (

package/src/components/index.js

@@ -4,7 +4,6 @@ export { BundleAssetsTotalsTable } from './bundle-assets-totals-table';
 export { BundleAssetsTotalsChartBars } from './bundle-assets-totals-chart-bars';
 export { BundlePackages } from './bundle-packages';
 export { BundleModules } from './bundle-modules';
-export { BudgetInsights } from './budget-insights';
 export { ComponentLink } from './component-link';
 export { DuplicatePackagesWarning } from './duplicate-packages-warning';
 export { Delta } from './delta';

package/src/components/summary/summary.jsx

@@ -5,21 +5,17 @@ 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';
 import { SummaryItem } from '../summary-item';
 import css from './summary.module.css';
 
-const getSourceMetricId = (fullMetricId) => fullMetricId.split('.').slice(1).join('.');
-
 export const Summary = ({
   className,
   size,
   keys,
   data,
-  budgets,
   loading,
   showSummaryItemDelta,
   summaryItemLink: SummaryItemCustomLink,
@@ -27,24 +23,20 @@ export const Summary = ({
   <Box outline className={cx(css.root, className)}>
     <FlexStack className={css.items}>
       {Array.from(METRIC_COMPONENT_LINKS)
-        .filter(([metricId]) => keys.includes(getSourceMetricId(metricId)))
+        .filter(([metricId]) => keys.includes(metricId))
         .map(([metricId, metricOptions]) => (
-          <div key={metricId} className={css.item}>
-            <SummaryItem
-              size={size}
-              id={metricId}
-              data={get(data, metricId)}
-              budget={get(budgets, getSourceMetricId(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>
-            )}
-          </div>
+          <SummaryItem
+            key={metricId}
+            className={css.item}
+            as={SummaryItemCustomLink}
+            {...metricOptions.link}
+            size={size}
+            id={metricId}
+            data={get(data, metricId)}
+            loading={loading}
+            showMetricDescription
+            showDelta={showSummaryItemDelta && metricOptions.showDelta !== false}
+          />
         ))}
     </FlexStack>
   </Box>
@@ -53,7 +45,6 @@ export const Summary = ({
 Summary.defaultProps = {
   className: '',
   data: null,
-  budgets: null,
   loading: false,
   size: '',
   keys: METRICS_WEBPACK_GENERAL,
@@ -65,8 +56,12 @@ Summary.propTypes = {
   className: PropTypes.string,
   size: PropTypes.string,
   keys: PropTypes.arrayOf(PropTypes.string),
-  data: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  budgets: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  data: PropTypes.shape({
+    [PropTypes.string]: PropTypes.shape({
+      baseline: PropTypes.number,
+      current: PropTypes.number,
+    }),
+  }),
   loading: PropTypes.bool,
   showSummaryItemDelta: PropTypes.bool,
   summaryItemLink: PropTypes.elementType,

package/src/components/summary/summary.module.css

@@ -6,49 +6,5 @@
 .item {
   padding: var(--space-small);
   flex: 1 0 25%; /* force equal sizes */
-  position: relative;
-  z-index: 1;
-}
-
-.item::before {
-  content: '';
-  display: block;
-  width: 1px;
-  position: absolute;
-  left: -1px;
-  top: var(--space-small);
-  bottom: var(--space-small);
-  background: var(--color-outline);
-}
-
-.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;
-}
-
-.item:hover .readMore,
-.item:active .readMore,
-.item:focus .readMore {
-  opacity: 1;
-  transition: var(--transition-in);
+  text-decoration: none;
 }

package/src/components/summary-item/summary-item.jsx

@@ -4,13 +4,10 @@ import cx from 'classnames';
 import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 
 import { HoverCard } from '../../ui/hover-card';
-import { Icon } from '../../ui/icon';
 import { Skeleton } from '../../ui/skeleton';
 import { Stack } from '../../layout/stack';
-import { FlexStack } from '../../layout/flex-stack';
 import { Metric } from '../metric';
 import { Delta } from '../delta';
-import { BudgetInfo } from '../budget-info';
 import css from './summary-item.module.css';
 
 const MetricInfo = ({ description, url }) => (
@@ -18,9 +15,9 @@ const MetricInfo = ({ description, url }) => (
     <p>{description}</p>
     {url && (
       <p>
-        <a href={url} className={css.readMoreLink}>
+        <button type="button" onClick={() => window.open(url)} className={css.readMoreLink}>
           Read more
-        </a>
+        </button>
       </p>
     )}
   </Stack>
@@ -44,7 +41,6 @@ export const SummaryItem = ({
   loading,
   showDelta,
   showMetricDescription,
-  budget,
   ...props
 }) => {
   const { baseline, current } = data || { baseline: 0, current: 0 };
@@ -52,21 +48,20 @@ export const SummaryItem = ({
   const metric = getGlobalMetricType(id);
   const runInfo = getMetricRunInfo(metric, current, baseline);
   const showMetricDescriptionTooltip = showMetricDescription && metric?.description;
+
   const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
 
   return (
-    <Stack space="xxxsmall" as={Component} className={rootClassName} {...props}>
-      <FlexStack as="h3" space="xxxsmall" className={css.title}>
-        <span className={css.titleLabel}>{metric.label}</span>
-
-        {showMetricDescriptionTooltip && (
-          <HoverCard className={css.icon} label={<Icon glyph="help" />}>
+    <Stack space="xxsmall" as={Component} className={rootClassName} {...props}>
+      <h3 className={css.title}>
+        {showMetricDescriptionTooltip ? (
+          <HoverCard label={metric.label}>
             <MetricInfo {...metric} />
           </HoverCard>
+        ) : (
+          metric.label
         )}
-
-        {budget && <BudgetInfo className={css.budgetInfo} metricId={id} budgetInsight={budget} />}
-      </FlexStack>
+      </h3>
 
       {!loading ? (
         <Stack>
@@ -105,7 +100,6 @@ SummaryItem.defaultProps = {
   loading: false,
   showMetricDescription: false,
   showDelta: true,
-  budget: undefined,
 };
 
 SummaryItem.propTypes = {
@@ -132,11 +126,4 @@ SummaryItem.propTypes = {
 
   /** Show delta */
   showDelta: PropTypes.bool,
-
-  /** Budget insight data */
-  budget: PropTypes.shape({
-    currentBalue: PropTypes.number,
-    budgetValue: PropTypes.number,
-    failed: PropTypes.bool,
-  }),
 };

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

@@ -1,24 +1,12 @@
-.root {
-  position: relative;
-  padding-right: var(--space-xlarge);
-}
-
 .title {
-  align-items: center;
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
-  line-height: var(--space-small);
+  line-height: 1;
   text-transform: uppercase;
   white-space: nowrap;
 }
 
-.budgetInfo {
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
 .currentMetric {
   display: block;
   color: var(--color-heading);
@@ -39,6 +27,30 @@
   line-height: var(--space-small);
 }
 
+.readMoreLink {
+  appearance: none;
+  background: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.readMoreLink:hover,
+.readMoreLink:active,
+.readMoreLink:focus {
+  color: var(--color-primary-dark);
+  text-decoration: none;
+}
+
+/* Hover state */
+.root:hover .title {
+  color: var(--color-text-light);
+}
+
+
 /* Loading state */
 .loading.currentMetric {
   width: 8em;