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

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

@@ -1 +1 @@
-{"version":3,"file":"stack.js","sourceRoot":"","sources":["../../../src/layout/stack/stack.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,GAAG,MAAM,oBAAoB,CAAC;AAErC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAK,EAAE,EAAE;IAC7B,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC1E,MAAM,aAAa,GAAG,EAAE,CAAC,SAAS,EAAE,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,UAAU,KAAK,EAAE,CAAC,CAAC,CAAC;IAEtE,OAAO,CACL,oBAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa,IAC/C,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,2BAA2B,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAC1D,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,KAAK,CAAC,YAAY,GAAG;IACnB,EAAE,EAAE,KAAK;IACT,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF,KAAK,CAAC,SAAS,GAAG;IAChB,EAAE,EAAE,SAAS,CAAC,WAAW;IACzB,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC;CAC/B,CAAC"}
+{"version":3,"file":"stack.js","sourceRoot":"","sources":["../../../src/layout/stack/stack.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,GAAG,MAAM,oBAAoB,CAAC;AAErC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAK,EAAE,EAAE;IAC7B,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC1E,MAAM,aAAa,GAAG,EAAE,CAAC,SAAS,EAAE,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,UAAU,KAAK,EAAE,CAAC,CAAC,CAAC;IAEtE,OAAO,CACL,oBAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa,IAC/C,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,2BAA2B,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAC1D,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,KAAK,CAAC,YAAY,GAAG;IACnB,EAAE,EAAE,KAAK;IACT,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF,KAAK,CAAC,SAAS,GAAG;IAChB,EAAE,EAAE,SAAS,CAAC,WAAW;IACzB,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC;CAC/B,CAAC"}

package/lib-esm/tokens.js

@@ -0,0 +1,23 @@
+export const NO_SPACE = 'no-space';
+export const SPACE_XXXSMALL = 'xxxsmall';
+export const SPACE_XXSMALL = 'xxsmall';
+export const SPACE_XSMALL = 'xsmall';
+export const SPACE_SMALL = 'small';
+export const SPACE_MEDIUM = 'medium';
+export const SPACE_LARGE = 'large';
+export const SPACE_XLARGE = 'xlarge';
+export const SPACE_XXLARGE = 'xxlarge';
+export const SPACE_XXXLARGE = 'xxxlarge';
+export const SPACES = [
+    NO_SPACE,
+    SPACE_XXXSMALL,
+    SPACE_XXSMALL,
+    SPACE_XSMALL,
+    SPACE_SMALL,
+    SPACE_MEDIUM,
+    SPACE_LARGE,
+    SPACE_XLARGE,
+    SPACE_XXLARGE,
+    SPACE_XXXLARGE,
+];
+//# sourceMappingURL=tokens.js.map

package/lib-esm/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC;AACnC,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CAAC;AACzC,MAAM,CAAC,MAAM,aAAa,GAAG,SAAS,CAAC;AACvC,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC;AACrC,MAAM,CAAC,MAAM,WAAW,GAAG,OAAO,CAAC;AACnC,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC;AACrC,MAAM,CAAC,MAAM,WAAW,GAAG,OAAO,CAAC;AACnC,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC;AACrC,MAAM,CAAC,MAAM,aAAa,GAAG,SAAS,CAAC;AACvC,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ;IACR,cAAc;IACd,aAAa;IACb,YAAY;IACZ,WAAW;IACX,YAAY;IACZ,WAAW;IACX,YAAY;IACZ,aAAa;IACb,cAAc;CACN,CAAC"}

package/lib-esm/ui/container/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/ui/container/container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAG5B,OAAO,GAAG,MAAM,wBAAwB,CAAC;AAMzC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,GAAG,EAAE,EACd,GAAG,SAAS,EACG,EAAE,EAAE,CAAC,CACpB,oBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IAC3C,6BAAK,SAAS,EAAE,GAAG,CAAC,KAAK,KAAM,SAAS,GAAI,CAClC,CACb,CAAC"}
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/ui/container/container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,wBAAwB,CAAC;AAMzC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,GAAG,EAAE,EACd,GAAG,SAAS,EACG,EAAE,EAAE,CAAC,CACpB,oBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IAC3C,6BAAK,SAAS,EAAE,GAAG,CAAC,KAAK,KAAM,SAAS,GAAI,CAClC,CACb,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/tooltip/index.js"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/tooltip/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

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

@@ -1,34 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Tooltip as UITooltip, TooltipAnchor as UITooltipAnchor, TooltipArrow as UITooltipArrow, useTooltipState, } from 'ariakit/tooltip';
 import css from './tooltip.module.css';
 export const Tooltip = (props) => {
-    const { className, tooltipClassName, title, children, as: Component, containerRef: ref, darkMode, ...restProps } = props;
+    const { className = '', tooltipClassName = '', title = '', as: Component = 'span', containerRef: ref, darkMode = true, ...restProps } = props;
     const tooltip = useTooltipState({ placement: 'top' });
     return (React.createElement(React.Fragment, null,
-        React.createElement(UITooltipAnchor, { as: Component, className: cx(css.root, className), state: tooltip, ...(ref ? { ref } : {}), ...restProps }, children),
+        React.createElement(UITooltipAnchor, { as: Component, className: cx(css.root, className), state: tooltip, ...(ref ? { ref } : {}), ...restProps }),
         title && (React.createElement(UITooltip, { state: tooltip, className: cx(css.tooltip, tooltipClassName, darkMode && css.tooltipDarkMode) },
             React.createElement(UITooltipArrow, { state: tooltip, className: css.arrow, size: 12 }),
             title))));
 };
-Tooltip.defaultProps = {
-    className: '',
-    tooltipClassName: '',
-    title: '',
-    as: 'span',
-    containerRef: null,
-    darkMode: true,
-};
-Tooltip.propTypes = {
-    className: PropTypes.string,
-    tooltipClassName: PropTypes.string,
-    title: PropTypes.node,
-    children: PropTypes.node.isRequired,
-    as: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
-    containerRef: PropTypes.shape({
-        current: PropTypes.object,
-    }),
-    darkMode: PropTypes.bool,
-};
 //# sourceMappingURL=tooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,IAAI,eAAe,EAChC,YAAY,IAAI,cAAc,EAC9B,eAAe,GAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAEvC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAK,EAAE,EAAE;IAC/B,MAAM,EACJ,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,QAAQ,EACR,EAAE,EAAE,SAAS,EACb,YAAY,EAAE,GAAG,EACjB,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;IAEtD,OAAO,CACL;QACE,oBAAC,eAAe,IACd,EAAE,EAAE,SAAS,EACb,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAE,OAAO,KACV,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACpB,SAAS,IAEZ,QAAQ,CACO;QACjB,KAAK,IAAI,CACR,oBAAC,SAAS,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,IAAI,GAAG,CAAC,eAAe,CAAC;YACtG,oBAAC,cAAc,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI;YACjE,KAAK,CACI,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,CAAC,YAAY,GAAG;IACrB,SAAS,EAAE,EAAE;IACb,gBAAgB,EAAE,EAAE;IACpB,KAAK,EAAE,EAAE;IACT,EAAE,EAAE,MAAM;IACV,YAAY,EAAE,IAAI;IAClB,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,OAAO,CAAC,SAAS,GAAG;IAClB,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,gBAAgB,EAAE,SAAS,CAAC,MAAM;IAClC,KAAK,EAAE,SAAS,CAAC,IAAI;IACrB,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IACnC,EAAE,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IAC9E,YAAY,EAAE,SAAS,CAAC,KAAK,CAAC;QAC5B,OAAO,EAAE,SAAS,CAAC,MAAM;KAC1B,CAAC;IACF,QAAQ,EAAE,SAAS,CAAC,IAAI;CACzB,CAAC"}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,IAAI,eAAe,EAChC,YAAY,IAAI,cAAc,EAC9B,eAAe,GAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAWvC,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,KAA6E,EAC7E,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,EACrB,KAAK,GAAG,EAAE,EACV,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,YAAY,EAAE,GAAG,EACjB,QAAQ,GAAG,IAAI,EACf,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;IAEtD,OAAO,CACL;QACE,oBAAC,eAAe,IACd,EAAE,EAAE,SAA8B,EAClC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAE,OAAO,KACV,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACpB,SAAS,GACb;QACD,KAAK,IAAI,CACR,oBAAC,SAAS,IACR,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,IAAI,GAAG,CAAC,eAAe,CAAC;YAE7E,oBAAC,cAAc,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI;YACjE,KAAK,CACI,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.2.4",
+  "version": "4.2.5-beta.1",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -69,22 +69,23 @@
     "react-router-dom": "5.3.4",
     "react-test-renderer": "18.2.0",
     "rimraf": "4.2.0",
-    "typescript": "4.9.5"
+    "typescript": "4.9.5",
+    "typescript-plugin-css-modules": "4.2.3"
   },
   "peerDependencies": {
     "classnames": "^2.0.0",
     "lodash": "^4.0.0",
     "prop-types": "^15.0.0",
-    "react": "^17.0.0 | ^18.0.0",
-    "react-dom": "^17.0.0 | ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.2.4",
+    "@bundle-stats/utils": "^4.2.5-beta.1",
     "ariakit": "2.0.0-next.43",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.3",
     "use-query-params": "2.2.0"
   },
-  "gitHead": "98824e4d058484dd86c259c8df3c7560aa3a413b"
+  "gitHead": "9fe36de1be394c9da1685e32ae09782b2a2982cb"
 }

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

@@ -5,29 +5,37 @@ import map from 'lodash/map';
 import max from 'lodash/max';
 import sum from 'lodash/sum';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
-import { getBundleAssetsFileTypeComponentLink } from '@bundle-stats/utils';
+import { getBundleAssetsFileTypeComponentLink, getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 
 import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
 import { HorizontalBarChart } from '../../ui/horizontal-bar-chart';
 import { ComponentLink } from '../component-link'
 import { getColors } from '../../utils';
 import { Stack } from '../../layout/stack';
-import { SummaryItem } from '../summary-item';
+import { MetricRunInfo } from '../metric-run-info';
 import css from './bundle-assets-totals-chart-bars.module.css';
 
-const getTooltip = (items, jobs, itemIndex, runIndex) => () => (
-  <SummaryItem
-    className={css.itemTooltip}
-    id={items?.[itemIndex]?.key}
-    data={{
-      current: items?.[itemIndex]?.runs?.[runIndex]?.value || 0,
-      baseline: items?.[itemIndex]?.runs?.[runIndex + 1]?.value || 0,
-    }}
-    showDelta={runIndex < jobs.length - 1}
-    showBaselineValue={runIndex < jobs.length - 1}
-    size="large"
-  />
-);
+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);
+
+  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,
+      })}
+      size="large"
+    />
+  );
+};
 
 export const BundleAssetsTotalsChartBars = ({
   className,

package/src/components/index.js

@@ -13,11 +13,11 @@ export { JobHeader } from './job-header';
 export { JobsHeader } from './jobs-header';
 export { LighthouseTable } from './lighthouse-table';
 export { Metric } from './metric';
+export { MetricRunInfo, MetricRunInfoProps } from './metric-run-info';
 export { MetricsTable } from './metrics-table';
 export { MetricsTableOptions } from './metrics-table-options';
 export { MetricsTableSearch } from './metrics-table-search';
 export { MetricsTableTitle } from './metrics-table-title';
 export { ModuleInfo } from './module-info';
-export { SummaryItem } from './summary-item';
 export { Summary } from './summary';
 export { TotalSizeTypeTitle } from './total-size-type-title';

package/src/components/insight-icon/insight-icon.tsx

@@ -3,7 +3,6 @@ import cx from 'classnames';
 import { InsightType } from '@bundle-stats/utils';
 
 import { Icon } from '../../ui/icon';
-// @ts-ignore
 import css from './insight-icon.module.css';
 
 const InsightTypeIconMap = new Map([
@@ -24,4 +23,3 @@ export const InsightIcon = (props: InsightIconProps) => {
 
   return <Icon glyph={glyph} className={rootClassName} />;
 };
-

package/src/components/insights/insights.tsx

@@ -5,7 +5,6 @@ import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { ComponentLink } from '../component-link';
 import { InsightIcon } from '../insight-icon';
-// @ts-ignore
 import css from './insights.module.css';
 
 interface InsightsProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/components/metric/metric.module.css

@@ -6,7 +6,7 @@
   font-size: var(--size-small);
 }
 
-.delta {
+.content {
   font-size: var(--size-small);
 }
 
@@ -14,7 +14,7 @@
   display: inline-block;
 }
 
-.inline .delta {
+.inline .content {
   display: inline-block;
   margin: 0 0 0 var(--space-xxxsmall);
 }

package/src/components/metric/metric.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Delta } from '../delta';
+import { Metric } from '.';
+
+export default {
+  title: 'Components/Metric',
+  component: Metric,
+  decorators: [getWrapperDecorator({ maxWidth: '200px' })],
+} as Meta;
+
+const Template: Story = (args) => <Metric {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  value: '100',
+};
+
+export const WithUnit = Template.bind({});
+
+WithUnit.args = {
+  value: '100',
+  unit: 'KiB',
+};
+
+export const WithDelta = Template.bind({});
+
+WithDelta.args = {
+  ...WithUnit.args,
+  children: <Delta displayValue="+10%" deltaType="POSITIVE" />,
+};
+
+export const Inline = Template.bind({});
+
+Inline.args = {
+  ...WithDelta.args,
+  inline: true,
+};

package/src/components/metric/metric.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import cx from 'classnames';
+
+import css from './metric.module.css';
+
+export interface MetricProps {
+  /**
+   * Metric value
+   */
+  value?: string;
+  /**
+   * Metric value unit
+   */
+  unit?: string;
+  /**
+   * Inline variant - render children inline
+   */
+  inline?: boolean;
+}
+
+export const Metric = (props: MetricProps & React.ComponentProps<'div'>) => {
+  const {
+    className = '',
+    value = '0',
+    unit = '',
+    inline = false,
+    children = null,
+    ...restProps
+  } = props;
+
+  const rootClassName = cx(className, css.root, inline && css.inline);
+
+  return (
+    <div className={rootClassName} {...restProps}>
+      <div className={css.display}>
+        <span className={css.displayValue}>{value}</span>
+        {unit && <span className={css.displayUnit}>{unit}</span>}
+      </div>
+      {children && <div className={css.content}>{children}</div>}
+    </div>
+  );
+};

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

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

package/src/components/{summary-item/summary-item.module.css → metric-run-info/metric-run-info.module.css}

@@ -25,24 +25,6 @@
   line-height: var(--line-height-heading);
 }
 
-.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;
-}
-
 /* Loading state */
 .loading.currentMetric {
   width: 8em;

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { MetricRunInfo } from './metric-run-info';
+
+export default {
+  title: 'Components/MetricRunInfo',
+  component: MetricRunInfo,
+} as Meta;
+
+const Template: Story = (args) => <MetricRunInfo id="webpack.totalSizeByTypeALL" {...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',
+};
+
+export const TitleHoverCard = Template.bind({});
+
+TitleHoverCard.args = {
+  ...Default.args,
+  titleHoverCard: 'Info',
+};
+
+export const TitleTooltip = Template.bind({});
+
+TitleTooltip.args = {
+  ...Default.args,
+  titleTooltip: 'Info',
+};
+
+export const Loading = Template.bind({});
+
+Loading.args = {
+  title: 'Bundle Size',
+  loading: true,
+};

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

@@ -0,0 +1,101 @@
+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 './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);
+
+  if (!matches) {
+    return { value, unit: '' };
+  }
+
+  return {
+    value: matches[1],
+    unit: matches[2],
+  };
+};
+
+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;
+}
+
+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>
+
+          {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>
+      )}
+
+      {!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>
+  );
+};

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

@@ -7,3 +7,22 @@
   min-width: 16em;
   text-decoration: none;
 }
+
+.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;
+}
+

package/src/components/summary/summary.stories.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { createJobs } from '@bundle-stats/utils';
+
+import baselineData from '../../../__mocks__/webpack-stats.baseline.json';
+import currentData from '../../../__mocks__/webpack-stats.current.json';
+import { METRICS_WEBPACK_ASSETS } from '../../constants';
+import { getWrapperDecorator } from '../../stories';
+import { Summary } from '.';
+
+const MULTIPLE_JOBS = createJobs([{ webpack: currentData }, { webpack: baselineData }]);
+
+const SINGLE_JOB = createJobs([{ webpack: currentData }]);
+
+export default {
+  title: 'Components/Summary',
+  component: Summary,
+  decorators: [getWrapperDecorator()],
+} as Meta;
+
+const Template: Story = (args) => <Summary {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  data: MULTIPLE_JOBS[0].summary,
+};
+
+export const CustomKeys = Template.bind({});
+
+CustomKeys.args = {
+  keys: METRICS_WEBPACK_ASSETS,
+  data: MULTIPLE_JOBS[0].summary,
+};
+
+export const Loading = Template.bind({});
+
+Loading.args = {
+  loading: true,
+};
+
+export const SingleRun = Template.bind({});
+
+SingleRun.args = {
+  data: SINGLE_JOB[0].summary,
+  showSummaryItemDelta: false,
+};
+
+export const WithLink = Template.bind({});
+
+WithLink.args = {
+  data: MULTIPLE_JOBS[0].summary,
+  summaryItemLink: (linkProps: React.ComponentProps<'button'>) => (
+    <button {...linkProps} type="button" onClick={() => alert(JSON.stringify(linkProps))} />
+  ),
+};