@bundle-stats/ui 3.4.0-alpha.5 → 3.4.0-beta.0

package/src/components/budget-info/budget-info.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { InsightType } from '@bundle-stats/utils';
-import * as budgetsInsightsTransformer from '@bundle-stats/utils/lib-esm/transformers/budgets-insights';
 
 import { Icon } from '../../ui/icon';
 import { Tooltip } from '../../ui/tooltip';
@@ -24,38 +23,29 @@ const INSIGHT_TYPE_MAP = {
   },
 };
 
-export const BudgetInfo = ({ className = '', metricId, budgetInsight }) => {
-  const budgetInsightInfo = budgetsInsightsTransformer.getInfo(metricId, budgetInsight);
-  const { className: insightTypeClassName, glyph } = INSIGHT_TYPE_MAP[budgetInsightInfo.type];
+export const BudgetInfo = ({ className = '', budgetInsight }) => {
+  const { className: insightTypeClassName, glyph } = INSIGHT_TYPE_MAP[budgetInsight.type];
 
   const rootClassName = cx(css.root, insightTypeClassName, className);
-  const { data: messageData } = budgetInsightInfo.message;
 
   return (
-    <Tooltip
-      className={rootClassName}
-      title={
-        <>
-          <strong>{messageData.metricLabel}</strong>
-          {` value (`}
-          <strong>{messageData.currentValue}</strong>
-          {`) is ${messageData.diffLabel} `}
-          <strong>{messageData.budgetValue}</strong>
-          {` budget `}
-        </>
-      }
-    >
+    <Tooltip className={rootClassName} title={budgetInsight.message.text}>
       <Icon className={css.icon} glyph={glyph} size="medium" />
     </Tooltip>
   );
 };
 
 BudgetInfo.propTypes = {
-  metricId: PropTypes.string.isRequired,
   budgetInsight: PropTypes.shape({
-    currentValue: PropTypes.number,
-    budgetValue: PropTypes.number,
-    failed: PropTypes.bool,
+    type: PropTypes.string,
+    message: PropTypes.shape({
+      text: PropTypes.string,
+    }),
+    data: PropTypes.shape({
+      currentValue: PropTypes.number,
+      budgetValue: PropTypes.number,
+      failed: PropTypes.bool,
+    }),
   }).isRequired,
   className: PropTypes.string,
 };

package/src/components/budget-insights/budget-insights.jsx

@@ -2,7 +2,6 @@ import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
-import * as budgetsInsightsTransformer from '@bundle-stats/utils/lib-esm/transformers/budgets-insights';
 
 import { Box } from '../../layout/box';
 import { Stack } from '../../layout/stack';
@@ -13,19 +12,15 @@ import { ComponentLink } from '../component-link';
 import css from './budget-insights.module.css';
 
 const Budget = (props) => {
-  const { className, metricId, budgetInsight, CustomLink } = props;
+  const { className, metricId, budget, CustomLink } = props;
   const componentLinkOptions = METRIC_COMPONENT_LINKS.get(metricId);
-  const budgetInsightInfo = budgetsInsightsTransformer.getInfo(metricId, budgetInsight);
-  const { data: messageData } = budgetInsightInfo.message;
 
   return (
-    <CustomLink className={cx(css.budget, className)} {...componentLinkOptions?.link}>
-      <strong>{messageData.metricLabel}</strong>
-      {` value (`}
-      <strong>{messageData.currentValue}</strong>
-      {`) is ${messageData.diffLabel} `}
-      <strong>{messageData.budgetValue}</strong>
-      {` budget `}
+    <CustomLink
+      className={cx(css.budget, className, budget.type === 'SUCCESS' && css.budgetSuccess)}
+      {...componentLinkOptions?.link}
+    >
+      {budget.message.text}
     </CustomLink>
   );
 };
@@ -33,10 +28,16 @@ const Budget = (props) => {
 Budget.propTypes = {
   className: PropTypes.string,
   metricId: PropTypes.string.isRequired,
-  budgetInsight: PropTypes.shape({
-    currentValue: PropTypes.number.isRequired,
-    budgetValue: PropTypes.number.isRequired,
-    failed: PropTypes.bool.isRequired,
+  budget: PropTypes.shape({
+    type: PropTypes.string,
+    message: PropTypes.shape({
+      text: PropTypes.string,
+    }),
+    data: PropTypes.shape({
+      currentValue: PropTypes.number.isRequired,
+      budgetValue: PropTypes.number.isRequired,
+      failed: PropTypes.bool.isRequired,
+    }),
   }).isRequired,
   CustomLink: PropTypes.elementType.isRequired,
 };
@@ -45,14 +46,39 @@ Budget.defaultProps = {
   className: '',
 };
 
-const BudgetsGroup = (props) => {
-  const { className, kind, source, budgets, CustomLink } = props;
+const BUDGET_ALERT_KIND = new Map([
+  ['ERROR', 'danger'],
+  ['WARNING', 'warning'],
+  ['SUCCESS', 'success'],
+]);
+
+const BUDGET_ICON = new Map([
+  ['ERROR', Icon.ICONS.ALERT_CIRCLE],
+  ['WARNING', Icon.ICONS.WARNING],
+  ['SUCCESS', Icon.ICONS.CHECK_CIRCLE],
+]);
+
+export const BudgetInsights = (props) => {
+  const { className, source, budgets, CustomLink } = props;
   const [showBudgets, setShowBudgets] = useState(false);
 
-  const isFailed = kind === 'danger';
+  const iconGlyph = BUDGET_ICON.get(budgets.type);
+  const alertKind = BUDGET_ALERT_KIND.get(budgets.type);
+  const rootClassName = cx(css.group, className, css[`group-${alertKind}`]);
+
+  const budgetItems = useMemo(() => {
+    const items = Object.entries(budgets.data);
+
+    // When there are errors/warnings, sort budget items first
+    if (['ERROR', 'WARNING'].includes(budgets.type)) {
+      items.sort((a) => (a[1].type === budgets.type ? -1 : 1));
+    }
+
+    return items;
+  }, [budgets]);
 
   return (
-    <Alert kind={kind} padding="none" className={cx(css.group, css[kind], className)}>
+    <Alert kind={alertKind} padding="none" className={rootClassName}>
       <Box
         padding={['xsmall', 'small']}
         className={css.groupHeader}
@@ -61,14 +87,8 @@ const BudgetsGroup = (props) => {
         onClick={() => setShowBudgets(!showBudgets)}
       >
         <FlexStack space="xxsmall" className={css.groupTitle}>
-          <Icon
-            className={css.groupIcon}
-            glyph={isFailed ? Icon.ICONS.ALERT_CIRCLE : Icon.ICONS.CHECK_CIRCLE}
-          />
-          <span>
-            <strong>{budgets.length}</strong>
-            {` budget ${budgets.length > 1 ? 'checks' : 'check'} ${isFailed ? 'failed' : 'passed'}`}
-          </span>
+          {iconGlyph && <Icon className={css.groupIcon} glyph={iconGlyph} />}
+          <span>{budgets.message.text}</span>
           <span className={css.groupTitleToggle}>{showBudgets ? 'hide' : 'show'} all</span>
         </FlexStack>
       </Box>
@@ -76,11 +96,11 @@ const BudgetsGroup = (props) => {
       {showBudgets && (
         <Box padding={['xsmall', 'small']} className={css.groupContent}>
           <Stack space="none">
-            {budgets.map(([key, budget]) => (
+            {budgetItems.map(([key, budget]) => (
               <Budget
                 key={key}
                 metricId={`${source}.${key}`}
-                budgetInsight={budget}
+                budget={budget}
                 CustomLink={CustomLink}
               />
             ))}
@@ -91,59 +111,6 @@ const BudgetsGroup = (props) => {
   );
 };
 
-BudgetsGroup.propTypes = {
-  className: PropTypes.string,
-  kind: PropTypes.oneOf(['success', 'danger']).isRequired,
-  source: PropTypes.string.isRequired,
-  budgets: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  CustomLink: PropTypes.elementType.isRequired,
-};
-
-BudgetsGroup.defaultProps = {
-  className: '',
-};
-
-export const BudgetInsights = (props) => {
-  const { className, source, budgets, CustomLink } = props;
-
-  const [failedBudgets, passedBudgets] = useMemo(() => {
-    const passed = [];
-    const failed = [];
-
-    Object.entries(budgets).forEach(([key, budget]) => {
-      if (budget.failed) {
-        failed.push([key, budget]);
-      } else {
-        passed.push([key, budget]);
-      }
-    });
-
-    return [failed, passed];
-  }, [budgets]);
-
-  return (
-    <Stack className={className} space="xsmall">
-      {failedBudgets.length > 0 && (
-        <BudgetsGroup
-          kind="danger"
-          source={source}
-          budgets={failedBudgets}
-          CustomLink={CustomLink}
-        />
-      )}
-
-      {passedBudgets.length > 0 && (
-        <BudgetsGroup
-          kind="success"
-          source={source}
-          budgets={passedBudgets}
-          CustomLink={CustomLink}
-        />
-      )}
-    </Stack>
-  );
-};
-
 BudgetInsights.propTypes = {
   className: PropTypes.string,
   source: PropTypes.string.isRequired,

package/src/components/budget-insights/budget-insights.module.css

@@ -20,11 +20,15 @@
   margin: 0 0 0 auto !important;
 }
 
-.danger .groupIcon {
+.group-danger .groupIcon {
   color: var(--color-danger);
 }
 
-.success .groupIcon {
+.group-warning .groupIcon {
+  color: var(--color-warning);
+}
+
+.group-success .groupIcon {
   color: var(--color-success);
 }
 
@@ -39,6 +43,10 @@
   text-decoration: none;
 }
 
+.budgetSuccess {
+  color: var(--color-text-light);
+}
+
 .budgetLabel,
 .budgetValue {
   color: var(--color-text-dark);

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

@@ -18,7 +18,7 @@ export const BundleAssetsTotalsTable = ({
   ...restProps
 }) => {
   const items = useMemo(() => webpack.compareBySection.sizes(jobs), [jobs]);
-  const budgets = jobs[0].insights?.webpack?.budgets;
+  const budgets = jobs[0].insights?.webpack?.budgets?.data;
 
   const renderRowHeader = useCallback(
     (item) => {
@@ -30,9 +30,9 @@ export const BundleAssetsTotalsTable = ({
 
       return (
         <CustomComponentLink section={section} title={title} params={params}>
-          <FlexStack space="xxsmall" className={css.itemTitleText}>
+          <FlexStack space="xxxsmall" className={css.itemTitleText}>
             <span>{item.label}</span>
-            {budget && <BudgetInfo metricId={item.key} budgetInsight={budget} />}
+            {budget && <BudgetInfo budgetInsight={budget} />}
           </FlexStack>
         </CustomComponentLink>
       );

package/src/components/summary/summary.jsx

@@ -5,7 +5,6 @@ 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';
@@ -29,22 +28,19 @@ export const Summary = ({
       {Array.from(METRIC_COMPONENT_LINKS)
         .filter(([metricId]) => keys.includes(getSourceMetricId(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)}
+            budget={get(budgets, ['data', getSourceMetricId(metricId)])}
+            loading={loading}
+            showMetricDescription
+            showDelta={showSummaryItemDelta && metricOptions.showDelta !== false}
+          />
         ))}
     </FlexStack>
   </Box>

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,10 +4,9 @@ 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 { Stack } from '../../layout/stack';
 import { Metric } from '../metric';
 import { Delta } from '../delta';
 import { BudgetInfo } from '../budget-info';
@@ -18,9 +17,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>
@@ -55,17 +54,16 @@ export const SummaryItem = ({
   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}>
+      <FlexStack space="xxxsmall" as="h3" className={css.title}>
+        {showMetricDescriptionTooltip ? (
+          <HoverCard label={metric.label}>
             <MetricInfo {...metric} />
           </HoverCard>
+        ) : (
+          metric.label
         )}
-
-        {budget && <BudgetInfo className={css.budgetInfo} metricId={id} budgetInsight={budget} />}
+        {budget && <BudgetInfo className={css.budgetInfo} budgetInsight={budget} />}
       </FlexStack>
 
       {!loading ? (
@@ -134,9 +132,5 @@ SummaryItem.propTypes = {
   showDelta: PropTypes.bool,
 
   /** Budget insight data */
-  budget: PropTypes.shape({
-    currentBalue: PropTypes.number,
-    budgetValue: PropTypes.number,
-    failed: PropTypes.bool,
-  }),
+  budget: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };

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

@@ -8,17 +8,11 @@
   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 +33,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/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}