@bundle-stats/ui 4.2.5-beta.1 → 4.2.5-beta.2

package/lib-esm/components/metric-run-info/metric-run-info.module.css

@@ -1,40 +1,18 @@
-.title {
-  color: var(--color-text-ultra-light);
-  font-weight: bold;
-  font-size: var(--size-xsmall);
-  text-transform: uppercase;
-  white-space: nowrap;
+.readMoreLink {
+  appearance: none;
+  background: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
 }
 
-.titleIcon {
-  margin-top: -4px !important;
-  margin-bottom: -4px !important;
+.readMoreLink:hover,
+.readMoreLink:active,
+.readMoreLink:focus {
+  color: var(--color-primary-dark);
+  text-decoration: none;
 }
 
-.currentMetric {
-  color: var(--color-heading);
-  font-size: var(--size-large);
-  line-height: var(--line-height-heading);
-  white-space: nowrap;
-  font-weight: bold;
-}
-
-.baselineMetric {
-  color: var(--color-text-light);
-  font-size: var(--size-small);
-  line-height: var(--line-height-heading);
-}
-
-/* Loading state */
-.loading.currentMetric {
-  width: 8em;
-}
-
-.loading.baselineMetric {
-  width: 5em;
-}
-
-/* Size large */
-.large .currentMetric {
-  font-size: var(--size-xxxlarge);
-}

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

@@ -14,6 +14,7 @@
 
 .anchorIcon {
   display: block;
+  margin: -2px 0; /* compensate for the vertical space */
 }
 
 .info {

package/lib-esm/components/run-info/index.js

@@ -0,0 +1,2 @@
+export * from './run-info';
+//# sourceMappingURL=index.js.map

package/lib-esm/components/run-info/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/run-info/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/lib-esm/components/run-info/run-info.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import cx from 'classnames';
+import { Icon } from '../../ui/icon';
+import { HoverCard } from '../../ui/hover-card';
+import { Tooltip } from '../../ui/tooltip';
+import { Skeleton } from '../../ui/skeleton';
+import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
+import { Metric } from '../metric';
+import { Delta } from '../delta';
+import css from './run-info.module.css';
+const EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
+const getMetricParams = (value) => {
+    const matches = value.match(EXTRACT_VALUE_UNIT_PATTERN);
+    if (!matches) {
+        return { value, unit: '' };
+    }
+    return {
+        value: matches[1],
+        unit: matches[2],
+    };
+};
+export const RunInfo = ({ className = '', title = '', titleHoverCard = null, titleTooltip = null, current = '', baseline = '', delta = '', deltaType = '', as: Component = 'div', size = 'medium', loading = false, ...restProps }) => {
+    const metricParams = getMetricParams(current);
+    const rootClassName = cx(css.root, className, css[size], delta && css.showDelta);
+    return (React.createElement(Stack, { space: "xxsmall", as: Component, className: rootClassName, ...restProps },
+        title && (React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", as: "h3", className: css.title },
+            React.createElement("span", null, title),
+            titleHoverCard && (React.createElement(HoverCard, { label: React.createElement(Icon, { glyph: Icon.ICONS.HELP }), className: css.titleIcon }, titleHoverCard)),
+            titleTooltip && (React.createElement(Tooltip, { title: titleTooltip, className: css.titleIcon },
+                React.createElement(Icon, { glyph: Icon.ICONS.HELP }))))),
+        !loading ? (React.createElement(Stack, null,
+            React.createElement(Metric, { className: css.currentMetric, value: metricParams.value, unit: metricParams.unit, inline: true }, delta && React.createElement(Delta, { className: css.delta, displayValue: delta, deltaType: deltaType })),
+            React.createElement(Metric, { className: css.baselineMetric, value: baseline }))) : (React.createElement(Stack, null,
+            React.createElement(Skeleton, { as: "p", className: cx(css.currentMetric, css.loading) }),
+            React.createElement(Skeleton, { as: "p", className: cx(css.baselineMetric, css.loading) })))));
+};
+//# sourceMappingURL=run-info.js.map

package/lib-esm/components/run-info/run-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"run-info.js","sourceRoot":"","sources":["../../../src/components/run-info/run-info.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,41 @@
+.title {
+  color: var(--color-text-ultra-light);
+  font-weight: bold;
+  font-size: var(--size-xsmall);
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.titleIcon {
+  flex: 0 0 var(--space-small);
+  margin-top: -4px !important;
+  margin-bottom: -4px !important;
+}
+
+.currentMetric {
+  color: var(--color-heading);
+  font-size: var(--size-xlarge);
+  line-height: var(--line-height-heading);
+  white-space: nowrap;
+  font-weight: bold;
+}
+
+.baselineMetric {
+  color: var(--color-text-light);
+  font-size: var(--size-medium);
+  line-height: var(--line-height-heading);
+}
+
+/* Loading state */
+.loading.currentMetric {
+  width: 8em;
+}
+
+.loading.baselineMetric {
+  width: 5em;
+}
+
+/* Size large */
+.large .currentMetric {
+  font-size: var(--size-xxxlarge);
+}

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

@@ -1,36 +1,19 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import cx from 'classnames';
 import get from 'lodash/get';
-import { METRIC_COMPONENT_LINKS, getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
+import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
 import { METRICS_WEBPACK_GENERAL } from '../../constants';
 import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
-import { Stack } from '../../layout/stack';
 import { ComponentLink } from '../component-link';
 import { MetricRunInfo } from '../metric-run-info';
 import css from './summary.module.css';
-const MetricInfo = ({ description, url }) => {
-    const onClick = useCallback(() => {
-        if (url) {
-            window.open(url);
-        }
-    }, [url]);
-    return (React.createElement(Stack, { space: "xxxsmall" },
-        React.createElement("p", null, description),
-        url && (React.createElement("p", null,
-            React.createElement("button", { type: "button", onClick: onClick, className: css.readMoreLink }, "Read more")))));
-};
 const SummaryItem = (props) => {
-    const { className = '', metricId, data, summaryItemLink: SummaryItemCustomLink, size, loading, showSummaryItemDelta } = props;
+    const { className = '', metricId, data, summaryItemLink: SummaryItemCustomLink, size, loading, showSummaryItemDelta, } = props;
     const componentLink = METRIC_COMPONENT_LINKS.get(metricId);
     const metricData = get(data, metricId, { current: 0, baseline: 0 });
-    const metric = getGlobalMetricType(metricId);
-    const metricRunInfo = getMetricRunInfo(metric, metricData.current, metricData.baseline);
     return (React.createElement(Box, { key: metricId, outline: true, outlineHover: true, padding: "small", as: SummaryItemCustomLink, ...componentLink === null || componentLink === void 0 ? void 0 : componentLink.link, className: className },
-        React.createElement(MetricRunInfo, { title: metric.label, titleHoverCard: React.createElement(MetricInfo, { description: metric.description, url: metric.url }), current: metricRunInfo.displayValue, baseline: metric.formatter(metricData.baseline), size: size, loading: loading, ...(showSummaryItemDelta && (componentLink === null || componentLink === void 0 ? void 0 : componentLink.showDelta) !== false && {
-                delta: metricRunInfo.displayDeltaPercentage,
-                deltaType: metricRunInfo.deltaType,
-            }) })));
+        React.createElement(MetricRunInfo, { metricId: metricId, current: metricData.current, baseline: metricData.baseline, showDelta: showSummaryItemDelta && (componentLink === null || componentLink === void 0 ? void 0 : componentLink.showDelta), size: size, loading: loading })));
 };
 export const Summary = ({ className = '', size = 'medium', keys = METRICS_WEBPACK_GENERAL, data = null, loading = false, showSummaryItemDelta = true, summaryItemLink = ComponentLink, }) => (React.createElement(Box, { className: cx(css.root, className) },
     React.createElement(FlexStack, { space: "small", className: css.items }, keys.map((metricId) => (React.createElement(SummaryItem, { key: metricId, className: css.item, metricId: metricId, data: data, summaryItemLink: summaryItemLink, size: size, loading: loading, showSummaryItemDelta: showSummaryItemDelta }))))));

package/lib-esm/components/summary/summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"summary.js","sourceRoot":"","sources":["../../../src/components/summary/summary.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"summary.js","sourceRoot":"","sources":["../../../src/components/summary/summary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,GAAG,MAAM,YAAY,CAAC;AAC7B,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAsB,MAAM,oBAAoB,CAAC;AACvE,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAyBvC,MAAM,WAAW,GAAG,CAAC,KAAqD,EAAE,EAAE;IAC5E,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,IAAI,EACJ,eAAe,EAAE,qBAAqB,EACtC,IAAI,EACJ,OAAO,EACP,oBAAoB,GACrB,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,sBAAsB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,GAAG,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL,oBAAC,GAAG,IACF,GAAG,EAAE,QAAQ,EACb,OAAO,QACP,YAAY,QACZ,OAAO,EAAC,OAAO,EACf,EAAE,EAAE,qBAAqB,KACrB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI,EACvB,SAAS,EAAE,SAAS;QAEpB,oBAAC,aAAa,IACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,UAAU,CAAC,OAAO,EAC3B,QAAQ,EAAE,UAAU,CAAC,QAAQ,EAC7B,SAAS,EAAE,oBAAoB,KAAI,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,CAAA,EAC3D,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,GAChB,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,uBAAuB,EAC9B,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,KAAK,EACf,oBAAoB,GAAG,IAAI,EAC3B,eAAe,GAAG,aAAa,GACY,EAAE,EAAE,CAAC,CAChD,oBAAC,GAAG,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IACrC,oBAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAE,GAAG,CAAC,KAAK,IAC1C,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACtB,oBAAC,WAAW,IACV,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,GAAG,CAAC,IAAI,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,eAAe,EAAE,eAAe,EAChC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,oBAAoB,EAAE,oBAAoB,GAC1C,CACH,CAAC,CACQ,CACR,CACP,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.2.5-beta.1",
+  "version": "4.2.5-beta.2",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -58,9 +58,9 @@
     "enzyme-to-json": "3.6.2",
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "29.4.3",
+    "jest": "29.5.0",
     "jest-date-mock": "1.0.8",
-    "jest-environment-jsdom": "29.4.3",
+    "jest-environment-jsdom": "29.5.0",
     "lodash": "4.17.21",
     "postcss": "8.4.21",
     "prop-types": "15.8.1",
@@ -68,7 +68,7 @@
     "react-dom": "17.0.2",
     "react-router-dom": "5.3.4",
     "react-test-renderer": "18.2.0",
-    "rimraf": "4.2.0",
+    "rimraf": "4.4.0",
     "typescript": "4.9.5",
     "typescript-plugin-css-modules": "4.2.3"
   },
@@ -81,11 +81,11 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.2.5-beta.1",
+    "@bundle-stats/utils": "^4.2.5-beta.2",
     "ariakit": "2.0.0-next.43",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.3",
     "use-query-params": "2.2.0"
   },
-  "gitHead": "9fe36de1be394c9da1685e32ae09782b2a2982cb"
+  "gitHead": "83ffccdec6180b14d9b820c7af909e02c906d0dd"
 }

package/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.jsx

@@ -17,21 +17,16 @@ import css from './bundle-assets-totals-chart-bars.module.css';
 
 const getTooltip = (items, jobs, itemIndex, runIndex) => () => {
   const metricId = items?.[itemIndex]?.key;
-  const metric = getGlobalMetricType(metricId);
   const current = items?.[itemIndex]?.runs?.[runIndex]?.value || 0;
-  const baseline = items?.[itemIndex]?.runs?.[runIndex + 1]?.value || 0;
-  const metricRunInfo = getMetricRunInfo(metric, current, baseline);
+  const baseline = items?.[itemIndex]?.runs?.[runIndex + 1]?.value;
 
   return (
     <MetricRunInfo
       className={css.itemTooltip}
-      title={metric.label}
-      current={metricRunInfo.displayValue}
-      {...(runIndex < jobs.length - 1 && {
-        baseline: metric.formatter(baseline),
-        delta: metricRunInfo.displayDeltaPercentage,
-        deltaType: metricRunInfo.deltaType,
-      })}
+      metricId={metricId}
+      current={current}
+      baseline={baseline}
+      showMetridDescription={false}
       size="large"
     />
   );

package/src/components/index.js

@@ -19,5 +19,6 @@ export { MetricsTableOptions } from './metrics-table-options';
 export { MetricsTableSearch } from './metrics-table-search';
 export { MetricsTableTitle } from './metrics-table-title';
 export { ModuleInfo } from './module-info';
+export { RunInfo, RunInfoProps } from './run-info';
 export { Summary } from './summary';
 export { TotalSizeTypeTitle } from './total-size-type-title';

package/src/components/metric-run-info/metric-run-info.module.css

@@ -1,40 +1,18 @@
-.title {
-  color: var(--color-text-ultra-light);
-  font-weight: bold;
-  font-size: var(--size-xsmall);
-  text-transform: uppercase;
-  white-space: nowrap;
+.readMoreLink {
+  appearance: none;
+  background: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
 }
 
-.titleIcon {
-  margin-top: -4px !important;
-  margin-bottom: -4px !important;
+.readMoreLink:hover,
+.readMoreLink:active,
+.readMoreLink:focus {
+  color: var(--color-primary-dark);
+  text-decoration: none;
 }
 
-.currentMetric {
-  color: var(--color-heading);
-  font-size: var(--size-large);
-  line-height: var(--line-height-heading);
-  white-space: nowrap;
-  font-weight: bold;
-}
-
-.baselineMetric {
-  color: var(--color-text-light);
-  font-size: var(--size-small);
-  line-height: var(--line-height-heading);
-}
-
-/* Loading state */
-.loading.currentMetric {
-  width: 8em;
-}
-
-.loading.baselineMetric {
-  width: 5em;
-}
-
-/* Size large */
-.large .currentMetric {
-  font-size: var(--size-xxxlarge);
-}

package/src/components/metric-run-info/metric-run-info.stories.tsx

@@ -1,49 +1,33 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
 
-import { MetricRunInfo } from './metric-run-info';
+import { Meta, Story } from '@storybook/react';
+import { MetricRunInfo } from '.';
 
 export default {
   title: 'Components/MetricRunInfo',
   component: MetricRunInfo,
 } as Meta;
 
-const Template: Story = (args) => <MetricRunInfo id="webpack.totalSizeByTypeALL" {...args} />;
+const Template: Story = (args: any) => <MetricRunInfo {...args} />;
 
 export const Default = Template.bind({});
 
 Default.args = {
-  title: 'Bundle Size',
-  current: '120KiB',
-  baseline: '100KiB',
-  delta: '+20%',
-  deltaType: 'HIGH_NEGATIVE',
-};
-
-export const SizeLarge = Template.bind({});
-
-SizeLarge.args = {
-  ...Default.args,
-  size: 'large',
+  metricId: 'webpack.totalSizeByTypeALL',
+  current: 120 * 1024,
+  baseline: 100 * 1024,
 };
 
-export const TitleHoverCard = Template.bind({});
+export const NoBaseline = Template.bind({});
 
-TitleHoverCard.args = {
-  ...Default.args,
-  titleHoverCard: 'Info',
+NoBaseline.args = {
+  metricId: 'webpack.totalSizeByTypeALL',
+  current: 120 * 1024,
 };
 
-export const TitleTooltip = Template.bind({});
+export const NoDelta = Template.bind({});
 
-TitleTooltip.args = {
+NoDelta.args = {
   ...Default.args,
-  titleTooltip: 'Info',
-};
-
-export const Loading = Template.bind({});
-
-Loading.args = {
-  title: 'Bundle Size',
-  loading: true,
+  showDelta: false,
 };

package/src/components/metric-run-info/metric-run-info.tsx

@@ -1,101 +1,67 @@
-import React from 'react';
-import cx from 'classnames';
+import React, { useCallback } from 'react';
+import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 
-import { Icon } from '../../ui/icon';
-import { HoverCard } from '../../ui/hover-card';
-import { Tooltip } from '../../ui/tooltip';
-import { Skeleton } from '../../ui/skeleton';
-import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
-import { Metric } from '../metric';
-import { Delta } from '../delta';
+import { RunInfo, RunInfoProps } from '../run-info';
 import css from './metric-run-info.module.css';
 
-// Separate value and unit
-const EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
-
-const getMetricParams = (value: string) => {
-  const matches = value.match(EXTRACT_VALUE_UNIT_PATTERN);
+interface MetricInfoProps {
+  description: string;
+  url?: string;
+}
 
-  if (!matches) {
-    return { value, unit: '' };
-  }
+const MetricHoverCard = ({ description, url }: MetricInfoProps) => {
+  // The component parent can be rendered inside a link, use button to avoid using nested links
+  const onClick = useCallback(() => {
+    if (url) {
+      window.open(url);
+    }
+  }, [url]);
 
-  return {
-    value: matches[1],
-    unit: matches[2],
-  };
+  return (
+    <Stack space="xxxsmall">
+      <p>{description}</p>
+      {url && (
+        <p>
+          <button type="button" onClick={onClick} className={css.readMoreLink}>
+            Read more
+          </button>
+        </p>
+      )}
+    </Stack>
+  );
 };
 
 export interface MetricRunInfoProps {
-  title?: string;
-  titleHoverCard?: React.ReactNode;
-  titleTooltip?: React.ReactNode;
-  current?: string;
-  baseline?: string;
-  delta?: string;
-  deltaType?: string;
-
-  as?: React.ElementType;
-  size?: 'medium' | 'large';
-
-  loading?: boolean;
+  metricId: string;
+  current: number;
+  baseline?: number;
+  showDelta?: boolean;
+  showMetridDescription?: boolean;
+  size?: RunInfoProps['size'];
+  loading?: RunInfoProps['loading'];
 }
 
-export const MetricRunInfo = ({
-  className = '',
-  title = '',
-  titleHoverCard = null,
-  titleTooltip = null,
-  current = '',
-  baseline = '',
-  delta = '',
-  deltaType = '',
-  as: Component = 'div',
-  size = 'medium',
-  loading = false,
-  ...restProps
-}: MetricRunInfoProps & React.ComponentProps<'div'>) => {
-  const metricParams = getMetricParams(current);
-  const rootClassName = cx(css.root, className, css[size], delta && css.showDelta);
-
-  return (
-    <Stack space="xxsmall" as={Component} className={rootClassName} {...restProps}>
-      {title && (
-        <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
-          <span>{title}</span>
+export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'div'>) => {
+  const { metricId, current, baseline = undefined, showDelta = true, showMetridDescription = true, ...restProps } = props;
 
-          {titleHoverCard && (
-            <HoverCard label={<Icon glyph={Icon.ICONS.HELP} />} className={css.titleIcon}>
-              {titleHoverCard}
-            </HoverCard>
-          )}
-          {titleTooltip && (
-            <Tooltip title={titleTooltip} className={css.titleIcon}>
-              <Icon glyph={Icon.ICONS.HELP} />
-            </Tooltip>
-          )}
-        </FlexStack>
-      )}
+  const metric = getGlobalMetricType(metricId);
+  const metricRunInfo = getMetricRunInfo(metric, current, baseline || 0);
+  const showBaseline = typeof baseline !== 'undefined';
 
-      {!loading ? (
-        <Stack>
-          <Metric
-            className={css.currentMetric}
-            value={metricParams.value}
-            unit={metricParams.unit}
-            inline
-          >
-            {delta && <Delta className={css.delta} displayValue={delta} deltaType={deltaType} />}
-          </Metric>
-          <Metric className={css.baselineMetric} value={baseline} />
-        </Stack>
-      ) : (
-        <Stack>
-          <Skeleton as="p" className={cx(css.currentMetric, css.loading)} />
-          <Skeleton as="p" className={cx(css.baselineMetric, css.loading)} />
-        </Stack>
-      )}
-    </Stack>
+  return (
+    <RunInfo
+      title={metric.label}
+      titleHoverCard={showMetridDescription && <MetricHoverCard description={metric.description} url={metric.url} />}
+      current={metricRunInfo.displayValue}
+      {...(showBaseline && {
+        baseline: metric.formatter(baseline),
+      })}
+      {...(showDelta && showBaseline && {
+        delta: metricRunInfo.displayDeltaPercentage,
+        deltaType: metricRunInfo.deltaType,
+      })}
+      {...restProps}
+    />
   );
 };

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

@@ -14,6 +14,7 @@
 
 .anchorIcon {
   display: block;
+  margin: -2px 0; /* compensate for the vertical space */
 }
 
 .info {

package/src/components/run-info/index.ts

@@ -0,0 +1 @@
+export * from './run-info';

package/src/components/run-info/run-info.module.css

@@ -0,0 +1,41 @@
+.title {
+  color: var(--color-text-ultra-light);
+  font-weight: bold;
+  font-size: var(--size-xsmall);
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.titleIcon {
+  flex: 0 0 var(--space-small);
+  margin-top: -4px !important;
+  margin-bottom: -4px !important;
+}
+
+.currentMetric {
+  color: var(--color-heading);
+  font-size: var(--size-xlarge);
+  line-height: var(--line-height-heading);
+  white-space: nowrap;
+  font-weight: bold;
+}
+
+.baselineMetric {
+  color: var(--color-text-light);
+  font-size: var(--size-medium);
+  line-height: var(--line-height-heading);
+}
+
+/* Loading state */
+.loading.currentMetric {
+  width: 8em;
+}
+
+.loading.baselineMetric {
+  width: 5em;
+}
+
+/* Size large */
+.large .currentMetric {
+  font-size: var(--size-xxxlarge);
+}