@bundle-stats/ui 3.4.0-alpha.5 → 4.0.0-alpha.7

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';
@@ -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/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-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/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;

package/src/constants.js

@@ -47,11 +47,15 @@ export const ASSETS_SIZES_FILE_TYPE_MAP = FILE_TYPES.reduce(
 );
 
 export const METRICS_WEBPACK_GENERAL = [
-  'totalSizeByTypeALL',
-  'totalInitialSizeJS',
-  'totalInitialSizeCSS',
-  'cacheInvalidation',
+  'webpack.totalSizeByTypeALL',
+  'webpack.totalInitialSizeJS',
+  'webpack.totalInitialSizeCSS',
+  'webpack.cacheInvalidation',
 ];
-export const METRICS_WEBPACK_ASSETS = ['assetCount', 'chunkCount'];
-export const METRICS_WEBPACK_MODULES = ['moduleCount', 'duplicateModulesCount', 'duplicateCode'];
-export const METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];
+export const METRICS_WEBPACK_ASSETS = ['webpack.assetCount', 'webpack.chunkCount'];
+export const METRICS_WEBPACK_MODULES = [
+  'webpack.moduleCount',
+  'webpack.duplicateModulesCount',
+  'webpack.duplicateCode',
+];
+export const METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];

package/src/ui/alert/alert.jsx

@@ -6,15 +6,10 @@ import { Box } from '../../layout/box';
 import css from './alert.module.css';
 
 export const Alert = (props) => {
-  const { className, kind, children, ...restProps } = props;
+  const { className, kind, children } = props;
 
   return (
-    <Box
-      padding={['xsmall', 'small']}
-      outline
-      className={cx(css.root, className, css[kind])}
-      {...restProps}
-    >
+    <Box padding={['xsmall', 'small']} outline className={cx(css.root, className, css[kind])}>
       {children}
     </Box>
   );

package/src/ui/hover-card/hover-card.jsx

@@ -31,6 +31,10 @@ export const HoverCard = (props) => {
   // Fallback to span if no href
   const Component = resolveComponent(as, href);
 
+  const handleOnClick = (event) => {
+    event.preventDefault();
+  };
+
   return (
     <div className={cx(css.root, className)}>
       <HovercardAnchor state={state} href={href} className={css.anchor} as={Component}>
@@ -41,6 +45,7 @@ export const HoverCard = (props) => {
         state={state}
         className={cx(css.hoverCard, hoverCardClassName)}
         style={{ zIndex: 10000 }}
+        onClick={handleOnClick}
       >
         <HovercardArrow size={24} />
         {typeof children === 'function' ? children({ close: state.hide }) : children}

package/src/ui/icon/icon.jsx

@@ -5,13 +5,11 @@ import cx from 'classnames';
 import css from './icon.module.css';
 
 const ICONS = {
-  ALERT_CIRCLE: 'alert-circle',
   ARROW: 'arrow',
   ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
   CANCEL: 'cancel',
   CLOSE: 'close',
   CLOCK: 'clock',
-  CHECK_CIRCLE: 'check-circle',
   COMMIT: 'commit',
   FILTER: 'filter',
   HELP: 'help',

package/lib/assets/icons/alert-circle.svg

@@ -1 +0,0 @@
-<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-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>

package/lib/assets/icons/check-circle.svg

@@ -1 +0,0 @@
-<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-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>

package/lib/components/budget-info/budget-info.js

@@ -1,80 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BudgetInfo = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _utils = require("@bundle-stats/utils");
-
-var budgetsInsightsTransformer = _interopRequireWildcard(require("@bundle-stats/utils/lib-esm/transformers/budgets-insights"));
-
-var _icon = require("../../ui/icon");
-
-var _tooltip = require("../../ui/tooltip");
-
-var _budgetInfoModule = _interopRequireDefault(require("./budget-info.module.css"));
-
-var _INSIGHT_TYPE_MAP;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var INSIGHT_TYPE_MAP = (_INSIGHT_TYPE_MAP = {}, _defineProperty(_INSIGHT_TYPE_MAP, _utils.InsightType.SUCCESS, {
-  className: _budgetInfoModule["default"].success,
-  glyph: _icon.Icon.ICONS.CHECK_CIRCLE
-}), _defineProperty(_INSIGHT_TYPE_MAP, _utils.InsightType.ERROR, {
-  className: _budgetInfoModule["default"].error,
-  glyph: _icon.Icon.ICONS.ALERT_CIRCLE
-}), _defineProperty(_INSIGHT_TYPE_MAP, _utils.InsightType.WARNING, {
-  className: _budgetInfoModule["default"].warning,
-  glyph: _icon.Icon.ICONS.WARNING
-}), _INSIGHT_TYPE_MAP);
-
-var BudgetInfo = function BudgetInfo(_ref) {
-  var _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      metricId = _ref.metricId,
-      budgetInsight = _ref.budgetInsight;
-  var budgetInsightInfo = budgetsInsightsTransformer.getInfo(metricId, budgetInsight);
-  var _INSIGHT_TYPE_MAP$bud = INSIGHT_TYPE_MAP[budgetInsightInfo.type],
-      insightTypeClassName = _INSIGHT_TYPE_MAP$bud.className,
-      glyph = _INSIGHT_TYPE_MAP$bud.glyph;
-  var rootClassName = (0, _classnames["default"])(_budgetInfoModule["default"].root, insightTypeClassName, className);
-  var messageData = budgetInsightInfo.message.data;
-  return /*#__PURE__*/_react["default"].createElement(_tooltip.Tooltip, {
-    className: rootClassName,
-    title: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("strong", null, messageData.metricLabel), " value (", /*#__PURE__*/_react["default"].createElement("strong", null, messageData.currentValue), ") is ".concat(messageData.diffLabel, " "), /*#__PURE__*/_react["default"].createElement("strong", null, messageData.budgetValue), " budget ")
-  }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-    className: _budgetInfoModule["default"].icon,
-    glyph: glyph,
-    size: "medium"
-  }));
-};
-
-exports.BudgetInfo = BudgetInfo;
-BudgetInfo.propTypes = {
-  metricId: _propTypes["default"].string.isRequired,
-  budgetInsight: _propTypes["default"].shape({
-    currentValue: _propTypes["default"].number,
-    budgetValue: _propTypes["default"].number,
-    failed: _propTypes["default"].bool
-  }).isRequired,
-  className: _propTypes["default"].string
-};
-BudgetInfo.defaultProps = {
-  className: ''
-};

package/lib/components/budget-info/budget-info.module.css

@@ -1,40 +0,0 @@
-.root {
-  display: inline-block;
-  line-height: 1em;
-}
-
-/* Budget error */
-.error .icon {
-  color: var(--color-danger);
-}
-
-.error .icon:hover,
-.error .icon:focus,
-.error .icon:active
-{
-  color: var(--color-danger-light);
-}
-
-/* Budget success */
-.success .icon {
-  color: var(--color-success);
-}
-
-.success .icon:hover,
-.success .icon:focus,
-.success .icon:active
-{
-  color: var(--color-success-light);
-}
-
-/* Budget warning */
-.warning .icon {
-  color: var(--color-warning-dark);
-}
-
-.warning .icon:hover,
-.warning .icon:focus,
-.warning .icon:active
-{
-  color: var(--color-warning);
-}