@bundle-stats/ui 3.2.1 → 3.3.0-alpha.1

package/src/components/summary/summary.jsx

@@ -5,62 +5,47 @@ 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 CustomSummaryItem = ({ className, metricOptions, SummaryItemCustomLink, ...props }) => (
-  <Box
-    padding={['xsmall', 'small']}
-    className={cx(className, css.summaryItemLink)}
-    {...props}
-    as={SummaryItemCustomLink}
-    {...metricOptions.link}
-  />
-);
-
-CustomSummaryItem.propTypes = {
-  className: PropTypes.string,
-  metricOptions: PropTypes.shape({
-    link: PropTypes.any, // eslint-disable-line react/forbid-prop-types
-  }).isRequired,
-  SummaryItemCustomLink: PropTypes.elementType.isRequired,
-};
-
-CustomSummaryItem.defaultProps = {
-  className: '',
-};
+const getSourceMetricId = (fullMetricId) => fullMetricId.split('.').slice(1).join('.');
 
 export const Summary = ({
   className,
   size,
   keys,
   data,
+  budgets,
   loading,
   showSummaryItemDelta,
   summaryItemLink: SummaryItemCustomLink,
 }) => (
   <Box outline className={cx(css.root, className)}>
     <FlexStack className={css.items}>
-      {Array.from(METRIC_COMPONENT_LINKS).filter(([metricId]) => keys.includes(metricId)).map(
-        ([metricId, metricOptions]) => (
-          <SummaryItem
-            as={CustomSummaryItem}
-            className={css.item}
-            metricOptions={metricOptions}
-            SummaryItemCustomLink={SummaryItemCustomLink}
-            size={size}
-            key={metricId}
-            id={metricId}
-            data={get(data, metricId)}
-            loading={loading}
-            showMetricDescription
-            showDelta={showSummaryItemDelta && metricOptions.showDelta !== false}
-          />
-        )
-      )}
+      {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, 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>
+        ))}
     </FlexStack>
   </Box>
 );
@@ -68,6 +53,7 @@ export const Summary = ({
 Summary.defaultProps = {
   className: '',
   data: null,
+  budgets: null,
   loading: false,
   size: '',
   keys: METRICS_WEBPACK_GENERAL,
@@ -79,12 +65,8 @@ Summary.propTypes = {
   className: PropTypes.string,
   size: PropTypes.string,
   keys: PropTypes.arrayOf(PropTypes.string),
-  data: PropTypes.shape({
-    [PropTypes.string]: PropTypes.shape({
-      baseline: PropTypes.number,
-      current: PropTypes.number,
-    }),
-  }),
+  data: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  budgets: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   loading: PropTypes.bool,
   showSummaryItemDelta: PropTypes.bool,
   summaryItemLink: PropTypes.elementType,

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

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

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

@@ -9,9 +9,10 @@ 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 }) => {
+const MetricInfoPopover = ({ description, url }) => {
   // Workaround cases where the parent is a link
   const readMoreOnClick = () => {
     window.open(url);
@@ -31,12 +32,12 @@ const MetricInfo = ({ description, url }) => {
   );
 };
 
-MetricInfo.propTypes = {
+MetricInfoPopover.propTypes = {
   description: PropTypes.string.isRequired,
   url: PropTypes.string,
 };
 
-MetricInfo.defaultProps = {
+MetricInfoPopover.defaultProps = {
   url: '',
 };
 
@@ -49,6 +50,7 @@ export const SummaryItem = ({
   loading,
   showDelta,
   showMetricDescription,
+  budget,
   ...props
 }) => {
   const { baseline, current } = data || { baseline: 0, current: 0 };
@@ -56,30 +58,24 @@ 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],
-    showMetricDescription && css.showMetricDescription,
-    showMetricDescriptionTooltip && css.showMetricDescription,
-    showDelta && css.showDelta,
-  );
+  const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
 
   return (
     <Stack space="xxsmall" as={Component} className={rootClassName} {...props}>
       <FlexStack as="h3" space="xxxsmall" className={css.title}>
-        <span>{metric.label}</span>
+        <span className={css.titleLabel}>{metric.label}</span>
 
         {showMetricDescriptionTooltip && (
           <Popover className={css.icon} icon="help">
-            <MetricInfo {...metric} />
+            <MetricInfoPopover {...metric} />
           </Popover>
         )}
+
+        {budget && <BudgetInfo className={css.budgetInfo} metricId={id} budgetInsight={budget} />}
       </FlexStack>
 
-      <Stack>
-        {!loading ? (
+      {!loading ? (
+        <Stack>
           <Metric
             className={css.currentMetric}
             value={current}
@@ -95,16 +91,14 @@ export const SummaryItem = ({
               />
             )}
           </Metric>
-        ) : (
-          <Skeleton className={cx(css.currentMetric, css.loading)} />
-        )}
-
-        {!loading ? (
           <Metric className={css.baselineMetric} value={baseline} formatter={metric.formatter} />
-        ) : (
+        </Stack>
+      ) : (
+        <Stack>
+          <Skeleton className={cx(css.currentMetric, css.loading)} />
           <Skeleton className={cx(css.baselineMetric, css.loading)} />
-        )}
-      </Stack>
+        </Stack>
+      )}
     </Stack>
   );
 };
@@ -117,6 +111,7 @@ SummaryItem.defaultProps = {
   loading: false,
   showMetricDescription: false,
   showDelta: true,
+  budget: undefined,
 };
 
 SummaryItem.propTypes = {
@@ -143,4 +138,11 @@ 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,5 +1,9 @@
+.root {
+  position: relative;
+  padding-right: var(--space-xlarge);
+}
+
 .title {
-  margin: 0;
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
@@ -8,6 +12,10 @@
   white-space: nowrap;
 }
 
+.titleLabel {
+  flex: 0 0 auto;
+}
+
 .readMoreBtn {
   appearance: none;
   padding: 0;
@@ -27,24 +35,30 @@
   text-decoration: none;
 }
 
+.budgetInfo {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
 .currentMetric {
   display: block;
   color: var(--color-heading);
   font-size: var(--size-large);
-  line-height: 1.3;
+  line-height: var(--space-medium);
   white-space: nowrap;
   font-weight: bold;
 }
 
 .delta {
-  margin: var(--space-xxxsmall) 0 0;
   font-size: var(--size-small);
+  line-height: var(--space-medium);
 }
 
 .baselineMetric {
   color: var(--color-text-light);
   font-size: var(--size-small);
-  line-height: 1.3;
+  line-height: var(--space-small);
 }
 
 /* Loading state */
@@ -60,9 +74,4 @@
 .large .currentMetric {
   font-size: var(--size-xxxlarge);
   line-height: var(--space-medium);
-  min-height: var(--space-medium);
-}
-
-.large .baselineMetric {
-  font-size: var(--size-medium);
 }

package/src/constants.js

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

package/src/css/variables.css

@@ -27,20 +27,20 @@
 
   /*
    * Color scheme:
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23484a4d&mcgpalette4=%233385d6&themename=mcgtheme
+   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23636568&mcgpalette4=%233385d6&themename=mcgtheme
    * https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
    */
   --color-gray-25: #fafafa;
-  --color-gray-50: #e9e9ea;
-  --color-gray-100: #c8c9ca;
-  --color-gray-200: #a4a5a6;
-  --color-gray-300: #7f8082;
-  --color-gray-400: #636568;
-  --color-gray-500: #484a4d;
-  --color-gray-600: #414346;
-  --color-gray-700: #383a3d;
-  --color-gray-800: #303234;
-  --color-gray-900: #212225;
+  --color-gray-50: #eceded;
+  --color-gray-100: #d0d1d2;
+  --color-gray-200: #b1b2b4;
+  --color-gray-300: #929395;
+  --color-gray-400: #7a7c7f;
+  --color-gray-500: #636568;
+  --color-gray-600: #5b5d60;
+  --color-gray-700: #515355;
+  --color-gray-800: #47494b;
+  --color-gray-900: #35373a;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
@@ -181,6 +181,10 @@
   --layer-high: 1000;
   --layer-xhigh: 10000;
 
+  --radius-small: var(--space-xxxsmall);
+  --radius-medium: var(--space-xxsmall);
+  --radius-large: var(--space-small);
+
   /** Layout */
   --max-width: 80rem;
 }

package/src/ui/alert/alert.jsx

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

package/src/ui/icon/icon.jsx

@@ -5,10 +5,13 @@ 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/src/ui/popover/popover.jsx

@@ -14,7 +14,7 @@ import css from './popover.module.css';
 export const Popover = ({ className, icon, label, ariaLabel, children }) => {
   const popover = usePopoverState({
     baseId: process.env.NODE_ENV === 'test' && 'id-test',
-    gutter: 24,
+    gutter: 12,
     modal: true,
     placement: 'top',
   });
@@ -32,7 +32,7 @@ export const Popover = ({ className, icon, label, ariaLabel, children }) => {
       event.preventDefault();
       popover.toggle();
     },
-    [popover]
+    [popover],
   );
 
   return (
@@ -47,7 +47,7 @@ export const Popover = ({ className, icon, label, ariaLabel, children }) => {
         {label && <span className={css.label}>{label}</span>}
       </UIPopoverDisclosure>
       <UIPopover className={css.popover} {...popover} tabIndex={0}>
-        <UIPopoverArrow className={css.arrow} {...popover} size={24} />
+        <UIPopoverArrow className={css.arrow} {...popover} size={16} />
 
         {typeof children === 'function' ? children({ popoverToggle: popover.toggle }) : children}
 

package/src/ui/popover/popover.module.css

@@ -23,7 +23,8 @@
 }
 
 .popover {
-  padding: var(--space-xsmall) var(--space-large) var(--space-xsmall) var(--space-small);
+  padding: var(--space-small) var(--space-large) var(--space-small) var(--space-small);
+  border-radius: var(--radius-small);
   max-width: 360px;
   outline: none;
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));

package/src/ui/tooltip/tooltip.module.css

@@ -12,6 +12,7 @@
 
 .tooltip {
   padding: var(--space-xxxsmall) var(--space-xxsmall);
+  border-radius: var(--radius-small);
   background: var(--color-light);
   color: var(--color-text);
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));