@bundle-stats/ui 3.2.5-alpha.0 → 3.2.5-alpha.10

package/lib-esm/components/delta/delta.js

@@ -2,32 +2,25 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './delta.module.css';
-const propTypes = {
-  className: PropTypes.string,
-  displayValue: PropTypes.string.isRequired,
-  deltaType: PropTypes.string.isRequired,
-  inverted: PropTypes.bool
-};
-const defaultProps = {
-  className: '',
-  inverted: false
-};
-/**
- * @param {PropTypes.InferProps<typeof propTypes>} props
- * @return {React.FunctionComponentElement}
- */
-
-export const Delta = props => {
-  const {
+export const Delta = _ref => {
+  let {
     className,
     displayValue,
     deltaType,
     inverted
-  } = props;
+  } = _ref;
   const rootClassName = cx(css.root, className, inverted && css.inverted, css[deltaType]);
   return /*#__PURE__*/React.createElement("span", {
     className: rootClassName
   }, displayValue);
 };
-Delta.defaultProps = defaultProps;
-Delta.propTypes = propTypes;
+Delta.defaultProps = {
+  className: '',
+  inverted: false
+};
+Delta.propTypes = {
+  className: PropTypes.string,
+  displayValue: PropTypes.string.isRequired,
+  deltaType: PropTypes.string.isRequired,
+  inverted: PropTypes.bool
+};

package/lib-esm/components/delta/delta.module.css

@@ -1,5 +1,6 @@
 .root {
   white-space: nowrap;
+  color: var(--color-gray-ultra-light);
 }
 
 .HIGH_NEGATIVE {
@@ -7,7 +8,7 @@
 }
 
 .NEGATIVE {
-  color: var(--color-red);
+  color: var(--color-red-dark);
 }
 
 .LOW_NEGATIVE {
@@ -19,7 +20,7 @@
 }
 
 .POSITIVE {
-  color: var(--color-green);
+  color: var(--color-green-dark);
 }
 
 .HIGH_POSITIVE {
@@ -27,38 +28,30 @@
 }
 
 .inverted {
-  padding: 2px;
-  border-radius: var(--radius-small);
-  background: var(--color-gray-ultra-light);
+  background-color: var(--color-gray-ultra-light);
   color: var(--color-light);
 }
 
 .inverted.HIGH_NEGATIVE {
   background: var(--color-red-dark);
-  color: var(--color-highlight-danger);
 }
 
 .inverted.NEGATIVE {
-  background: var(--color-red);
-  color: var(--color-highlight-danger);
+  background: var(--color-red-dark);
 }
 
 .inverted.LOW_NEGATIVE {
   background: var(--color-red-light);
-  color: var(--color-highlight-danger);
 }
 
 .inverted.LOW_POSITIVE {
   background: var(--color-green-light);
-  color: var(--color-highlight-success);
 }
 
 .inverted.POSITIVE {
-  background: var(--color-green);
-  color: var(--color-highlight-success);
+  background: var(--color-green-dark);
 }
 
 .inverted.HIGH_POSITIVE {
   background: var(--color-green-dark);
-  color: var(--color-highlight-success);
 }

package/lib-esm/components/duplicate-packages-warning/duplicate-packages-warning.js

@@ -20,9 +20,9 @@ export const DuplicatePackagesWarning = props => {
     className: cx(css.root, className)
   }, `Bundle contains `, /*#__PURE__*/React.createElement(CustomComponentLink, BUNDLE_PACKAGES_DUPLICATE, metricRunInfo.value, showDelta && metricRunInfo.delta !== 0 && /*#__PURE__*/React.createElement(Delta, {
     className: css.titleDelta,
+    inverted: true,
     displayValue: metricRunInfo.displayDelta,
-    deltaType: metricRunInfo.deltaType,
-    inverted: true
+    deltaType: metricRunInfo.deltaType
   }), ` duplicate ${metricRunInfo.value === 1 ? 'package' : 'packages'}.`));
 };
 DuplicatePackagesWarning.propTypes = {

package/lib-esm/components/job-header/job-header.js

@@ -24,7 +24,7 @@ export const JobHeader = props => {
   const rootClassName = cx(css.root, className);
   return /*#__PURE__*/React.createElement(Stack, {
     className: rootClassName,
-    space: "xxxsmall"
+    space: "xxsmall"
   }, /*#__PURE__*/React.createElement("h1", {
     className: css.title
   }, /*#__PURE__*/React.createElement("span", null, `#${job.internalBuildNumber}`), tag && /*#__PURE__*/React.createElement("span", {
@@ -32,10 +32,9 @@ export const JobHeader = props => {
   }, tag)), /*#__PURE__*/React.createElement(FlexStack, {
     className: css.meta,
     space: "xxsmall"
-  }, builtAt && /*#__PURE__*/React.createElement(FlexStack, {
+  }, builtAt && /*#__PURE__*/React.createElement("span", {
     className: css.metaItem,
-    title: `${formatDate(builtAt)} ${formatTime(builtAt)}`,
-    space: "xxxsmall"
+    title: `${formatDate(builtAt)} ${formatTime(builtAt)}`
   }, /*#__PURE__*/React.createElement(Icon, {
     glyph: "clock",
     className: css.metaIcon
@@ -43,11 +42,9 @@ export const JobHeader = props => {
     className: css.metaLabel
   }, formatDistanceToNow(new Date(builtAt), {
     addSuffix: true
-  }))), hash && /*#__PURE__*/React.createElement(FlexStack, {
-    span: true,
+  }))), hash && /*#__PURE__*/React.createElement("span", {
     className: css.metaItem,
-    title: "Webpack bundle hash",
-    space: "xxxsmall"
+    title: "Webpack bundle hash"
   }, /*#__PURE__*/React.createElement(Icon, {
     glyph: "commit",
     className: css.metaIcon

package/lib-esm/components/job-header/job-header.module.css

@@ -1,32 +1,36 @@
 .title {
-  font-size: var(--size-xlarge);
+  line-height: 1;
+  font-weight: bold;
   vertical-align: top;
 }
 
 .tag {
   padding: var(--space-xxxsmall);
   margin-left: var(--space-xxxsmall);
-  background: var(--color-highlight);
+  background-color: var(--color-highlight);
   color: var(--color-text-light);
   display: inline-block;
-  font-size: var(--size-xsmall);
+  font-size: 9px;
   line-height: var(--space-xxsmall);
   font-weight: normal;
   vertical-align: top;
 }
 
+.meta {
+  color: var(--color-text-light);
+}
+
 .metaItem {
   display: inline-flex;
   align-items: center;
-  white-space: nowrap;
 }
 
 .metaIcon {
   width: var(--space-small);
   height: var(--space-small);
-  color: var(--color-text-ultra-light);
+  margin-right: var(--space-xxxsmall);
 }
 
 .metaLabel {
-  color: var(--color-text-light);
+  line-height: var(--space-small);
 }

package/lib-esm/components/jobs-header/jobs-header.js

@@ -13,7 +13,7 @@ export const JobsHeader = props => {
   const rootClassName = cx(css.root, className);
   return /*#__PURE__*/React.createElement(FlexStack, {
     className: rootClassName,
-    space: "small"
+    space: "none"
   }, jobs == null ? void 0 : jobs.map((job, index) => /*#__PURE__*/React.createElement(JobHeader, {
     key: job.internalBuildNumber || index,
     className: css.item,

package/lib-esm/components/jobs-header/jobs-header.module.css

@@ -1,8 +1,11 @@
 .root {
   align-items: stretch;
+  flex-wrap: wrap;
   padding: var(--space-small) 0;
 }
 
 .item {
-  flex: 0 1 auto;
+  flex: 0 0 auto;
+  padding: 0 var(--space-medium);
+  border-left: 1px solid var(--color-outline);
 }

package/lib-esm/components/metric/metric.js

@@ -9,6 +9,7 @@ export const Metric = _ref => {
     className,
     value,
     formatter,
+    inline,
     anchored,
     children,
     enhanced
@@ -16,7 +17,7 @@ export const Metric = _ref => {
   const formattedValue = formatter(value); // eslint-disable-next-line no-unused-vars
 
   const [matched, displayValue, displayUnit] = enhanced && formattedValue ? formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN) : [null, formattedValue, null];
-  const rootClassName = cx(className, styles.root, anchored && styles.anchored);
+  const rootClassName = cx(className, styles.root, inline && styles.inline, anchored && styles.anchored);
   return /*#__PURE__*/React.createElement("span", {
     className: rootClassName
   }, /*#__PURE__*/React.createElement("span", {
@@ -33,6 +34,7 @@ Metric.defaultProps = {
   className: '',
   anchored: false,
   enhanced: false,
+  inline: false,
   value: 0,
   children: [],
   formatter: val => val
@@ -40,6 +42,7 @@ Metric.defaultProps = {
 Metric.propTypes = {
   className: PropTypes.string,
   enhanced: PropTypes.bool,
+  inline: PropTypes.bool,
   anchored: PropTypes.bool,
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   formatter: PropTypes.func,

package/lib-esm/components/metric/metric.module.css

@@ -1,9 +1,6 @@
 .root {
   display: block;
-}
-
-.display {
-  vertical-align: middle;
+  letter-spacing: 0.05em;
 }
 
 .displayUnit {
@@ -11,9 +8,7 @@
 }
 
 .delta {
-  display: inline;
-  vertical-align: middle;
-  margin: 0 0 0 var(--space-xxxsmall);
+  display: block;
   font-size: var(--size-xsmall);
 }
 
@@ -28,3 +23,8 @@
   line-height: 1;
   margin-top: -2px;
 }
+
+.inline .delta {
+  display: inline-block;
+  margin: 0 0 0 var(--space-xxxsmall);
+}

package/lib-esm/components/metrics-table-search/metrics-table-search.module.css

@@ -5,7 +5,6 @@
 }
 
 .input {
-  border-radius: var(--radius-medium) 0 0 var(--radius-medium);
   height: var(--space-large);
   border-color: var(--color-outline);
 }
@@ -22,12 +21,12 @@
   cursor: pointer;
   border-radius: 50%;
   position: absolute;
-  right: 2px;
+  right: 0;
   top: 50%;
   transform: translateY(-50%);
-  padding: var(--space-xxxsmall);
-  width: var(--space-medium);
-  height: var(--space-medium);
+  padding: var(--space-xxsmall);
+  width: var(--space-large);
+  height: var(--space-large);
   background: radial-gradient(var(--color-background) 50%, transparent);
   color: var(--color-text-ultra-light);
   transition: var(--transition-in);

package/lib-esm/components/summary-item/summary-item.js

@@ -77,12 +77,12 @@ export const SummaryItem = _ref2 => {
     className: css.currentMetric,
     value: current,
     formatter: metric.formatter,
-    enhanced: true
+    enhanced: true,
+    inline: true
   }, showDelta && /*#__PURE__*/React.createElement(Delta, {
     className: css.delta,
     displayValue: runInfo.displayDeltaPercentage,
-    deltaType: runInfo.deltaType,
-    inverted: true
+    deltaType: runInfo.deltaType
   })), /*#__PURE__*/React.createElement(Metric, {
     className: css.baselineMetric,
     value: baseline,

package/lib-esm/components/summary-item/summary-item.module.css

@@ -29,14 +29,21 @@
 .currentMetric {
   display: block;
   color: var(--color-heading);
-  font-size: var(--size-xlarge);
+  font-size: var(--size-large);
   line-height: var(--space-medium);
   white-space: nowrap;
   font-weight: bold;
 }
 
+.delta {
+  font-size: var(--size-small);
+  line-height: var(--space-medium);
+}
+
 .baselineMetric {
   color: var(--color-text-light);
+  font-size: var(--size-small);
+  line-height: var(--space-small);
 }
 
 /* Loading state */
@@ -50,6 +57,6 @@
 
 /* Size large */
 .large .currentMetric {
-  font-size: var(--size-xxlarge);
+  font-size: var(--size-xxxlarge);
   line-height: var(--space-medium);
 }

package/lib-esm/css/default.css

@@ -1,31 +1,25 @@
-@import url("~modern-css-reset/dist/reset.css");
-
-/** modern-css-reset updates */
-pre,
-ul,
-ol,
-button {
-  margin: 0;
+:root {
+  --chart-height: 180px;
 }
 
 html {
-  font-family: var(--font-family);
   font-size: 81.25%;
+  line-height: 1.8461;
 }
 
 body {
-  background: var(--color-background);
   color: var(--color-text);
-  line-height: var(--line-height);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5 {
+  margin-bottom: var(--space-small);
   color: var(--color-heading);
-  font-weight: bold;
+  font-weight: 500;
 }
 
 h1 {
   font-size: var(--size-xxxlarge);
+  line-height: var(--space-xlarge)
 }
 
 h2 {

package/lib-esm/css/variables.css

@@ -13,40 +13,40 @@
   --space-xxlarge: 48px;
   --space-xxxlarge: 64px;
 
-  /* Typography scale - https://type-scale.com 1.2 */
-  --size-xsmall: 0.8rem;
+  /* Typography scale */
+  --size-xsmall: 0.77rem;
   --size-small: 0.92rem;
   --size: 1rem;
   --size-medium: var(--size);
-  --size-large: 1.2rem;
-  --size-xlarge: 1.44rem;
-  --size-xxlarge: 1.728rem;
-  --size-xxxlarge: 2.074rem;
+  --size-large: 1.125rem;
+  --size-xlarge: 1.266rem;
+  --size-xxlarge: 1.424rem;
+  --size-xxxlarge: 1.602rem;
 
-  --line-height: 1.66em;
+  --line-height: var(--space-medium);
 
   /*
    * Color scheme:
+   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23636568&mcgpalette4=%233385d6&themename=mcgtheme
    * https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%235b5d60&mcgpalette4=%233385d6&themename=mcgtheme
    */
   --color-gray-25: #fafafa;
-  --color-gray-50: #e4e4e5;
-  --color-gray-100: #cececf;
-  --color-gray-200: #adaeb0;
-  --color-gray-300: #8c8e90;
-  --color-gray-400: #747578;
-  --color-gray-500: #5b5d60;
-  --color-gray-600: #535558;
-  --color-gray-700: #494b4e;
-  --color-gray-800: #404144;
-  --color-gray-900: #2f3033;
+  --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);
   --color-gray: var(--color-gray-500);
-  --color-gray-dark: var(--color-gray-600);
-  --color-gray-ultra-dark: var(--color-gray-700);
+  --color-gray-dark: var(--color-gray-700);
+  --color-gray-ultra-dark: var(--color-gray-900);
 
   --color-red-25: #fdf5f6;
   --color-red-50: #fbebec;
@@ -170,7 +170,7 @@
   --color-outline-warning: var(--color-yellow-200);
   --color-outline-danger: var(--color-red-100);
 
-  --color-shadow: rgba(0, 0, 0, 0.1);
+  --color-shadow: rgba(0, 0, 0, 0.2);
 
   --transition-in: all 0.2s ease-in;
   --transition-out: all 0.17s ease-out;
@@ -181,9 +181,9 @@
   --layer-high: 1000;
   --layer-xhigh: 10000;
 
-  --radius-small: calc(var(--space-xxxsmall) / 2);
-  --radius-medium: var(--space-xxxsmall);
-  --radius-large: var(--space-xxsmall);
+  --radius-small: var(--space-xxxsmall);
+  --radius-medium: var(--space-xxsmall);
+  --radius-large: var(--space-small);
 
   /** Layout */
   --max-width: 80rem;

package/lib-esm/layout/box/box.module.css

@@ -4,15 +4,6 @@
 
 .outline {
   border: 1px solid var(--color-outline);
-  border-radius: var(--radius-medium);
-}
-
-.outline > :first-child {
-  border-radius: var(--radius-large) var(--radius-medium) 0 0;
-}
-
-.outline > :last-child {
-  border-radius: 0 0 var(--radius-large) var(--radius-medium);
 }
 
 .padding-xxxsmall {

package/lib-esm/layout/footer/footer.module.css

@@ -3,10 +3,9 @@
 }
 
 .inner {
-  border-top: 1px solid var(--color-outline);
+  border-top: 2px solid var(--color-outline);
 }
 
-
 .navItem {
   display: inline-block;
   margin: 0 var(--space-xxxsmall);

package/lib-esm/layout/index.js

@@ -1,7 +1,6 @@
 export { Box } from './box';
 export { Footer } from './footer';
 export { Header } from './header';
-export { Separator } from './separator';
 export { SubHeader } from './sub-header';
 export { Stack } from './stack';
 export { FlexStack } from './flex-stack';

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

@@ -25,7 +25,8 @@ export const Dropdown = props => {
     className: rootClassName,
     tabIndex: null
   }), /*#__PURE__*/React.createElement(FlexStack, {
-    space: "xxxsmall"
+    space: "xxxsmall",
+    className: css.label
   }, glyph && /*#__PURE__*/React.createElement(Icon, {
     className: css.labelIcon,
     glyph: glyph

package/lib-esm/ui/dropdown/dropdown.module.css

@@ -2,9 +2,15 @@
   background: none;
   border: none;
   padding: 0;
+}
 
+.root:focus {
+  outline: none;
+  box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
+}
+
+.label {
   border: 1px solid var(--color-outline);
-  border-radius: var(--radius-medium);
   padding: calc(var(--space-xxsmall) - 1px);
   display: flex;
   align-items: center;
@@ -18,11 +24,7 @@
   color: var(--color-text-light);
 }
 
-.root:hover,
-.root:focus,
-.root:active {
-  outline: none;
-  box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
+.label:hover {
   border-color: var(--color-outline-dark);
   color: var(--color-text);
 }
@@ -31,7 +33,6 @@
   position: absolute;
   left: 0;
   top: 100%;
-  border-radius: var(--radius-medium);
   box-shadow: 0 2px var(--space-xxsmall) var(--color-shadow);
   background: var(--color-background);
   min-width: 180px;

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

@@ -54,7 +54,6 @@ Filter.defaultProps = {
 
 const FilterGroup = props => {
   const {
-    className,
     groupKey,
     data,
     values,
@@ -99,7 +98,6 @@ const FilterGroup = props => {
   };
 
   return /*#__PURE__*/React.createElement(Dropdown, {
-    className: className,
     label: dropdownLabel,
     ariaLabel: `${groupLabel}: ${filterSuffix}`
   }, _ref4 => {
@@ -149,7 +147,6 @@ const FilterGroup = props => {
 };
 
 FilterGroup.propTypes = {
-  className: PropTypes.string,
   groupKey: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
   // eslint-disable-line react/forbid-prop-types
@@ -158,9 +155,6 @@ FilterGroup.propTypes = {
   onCheckboxChange: PropTypes.func.isRequired,
   toggleFilters: PropTypes.func.isRequired
 };
-FilterGroup.defaultProps = {
-  className: ''
-};
 export const Filters = props => {
   const {
     className,
@@ -197,15 +191,16 @@ export const Filters = props => {
       });
     }
 
-    return /*#__PURE__*/React.createElement(FilterGroup, {
-      className: css.item,
+    return /*#__PURE__*/React.createElement("div", {
+      className: css.item
+    }, /*#__PURE__*/React.createElement(FilterGroup, {
       key: name,
       groupKey: name,
       data: data,
       values: values,
       onCheckboxChange: onCheckboxChange,
       toggleFilters: toggleFilters
-    });
+    }));
   })));
 };
 Filters.defaultProps = {

package/lib-esm/ui/filters/filters.module.css

@@ -11,7 +11,6 @@
 }
 
 .filterInput {
-  border-radius: var(--radius-medium) 0 0 var(--radius-medium);
   flex: 0 0 auto;
   height: 1em;
   cursor: pointer;
@@ -130,20 +129,11 @@
 }
 
 .item {
-  border-radius: 0;
   position: relative;
   flex: 0 0 auto;
   margin-right: -1px;
 }
 
-.item:first-child {
-  border-radius: var(--radius-medium) 0 0 var(--radius-medium);
-}
-
-.item:last-child {
-  border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
-}
-
 .item:hover {
   z-index: var(--layer-low); /* show collapsed border */
 }

package/lib-esm/ui/popover/popover.module.css

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