@bundle-stats/ui 3.2.1-beta.9 → 3.3.0-alpha.0

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} metric={metric} budget={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 data */
+  budget: PropTypes.shape({
+    value: PropTypes.number,
+    budget: PropTypes.number,
+    overBudget: 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/layout/box/box.jsx

@@ -31,7 +31,7 @@ export const Box = (props) => {
     outline && css.outline,
   );
 
-  return <Component className={rootClassName} {...restProps} />;
+  return <Component {...restProps} className={rootClassName} />;
 };
 
 Box.defaultProps = {

package/src/layout/stack/stack.jsx

@@ -7,11 +7,11 @@ import { getRenderChildWithClassName } from '../../utils';
 import css from './stack.module.css';
 
 export const Stack = (props) => {
-  const { as: Component, className, space, children } = props;
+  const { as: Component, className, space, children, ...restProps } = props;
   const rootClassName = cx(className, css.root, css[`space--${space}`]);
 
   return (
-    <Component className={rootClassName}>
+    <Component {...restProps} className={rootClassName}>
       {React.Children.map(children, getRenderChildWithClassName(css.item))}
     </Component>
   );

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));