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

package/src/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/src/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/src/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/src/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/src/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/src/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/src/ui/dropdown/dropdown.jsx

@@ -11,25 +11,27 @@ export const Dropdown = (props) => {
   const { className, label, ariaLabel, glyph, activeLabel, children } = props;
   const rootClassName = cx(css.root, activeLabel && css.activeLabel, className);
 
-  const menu = useMenuState({ baseId: process.env.NODE_ENV === 'test' && 'id-test', modal: true });
+  const menu = useMenuState({baseId: process.env.NODE_ENV === 'test' && 'id-test', modal: true });
 
   return (
     <>
       <MenuButton {...menu} className={rootClassName} tabIndex={null}>
-        <FlexStack space="xxxsmall">
+        <FlexStack space="xxxsmall" className={css.label}>
           {glyph && <Icon className={css.labelIcon} glyph={glyph} />}
           {label}
         </FlexStack>
       </MenuButton>
       <Menu {...menu} aria-label={ariaLabel || label} className={css.dropdown}>
         {typeof children === 'function'
-          ? children({
+          ?
+            children({
               MenuItem,
               menu,
               menuItemClassName: css.menuItem,
               menuItemActiveClassName: css.menuItemActive,
             })
-          : children}
+          : children
+        }
       </Menu>
     </>
   );

package/src/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/src/ui/filters/filters.jsx

@@ -18,15 +18,25 @@ const Filter = (props) => {
     <div className={rootClassName}>
       {/* eslint-disable */}
       <FlexStack space="xxxsmall" as="label" className={css.filterCheckbox}>
-        {/* eslint-enabled */}
-        <input className={css.filterInput} type="checkbox" id={id} name={name} {...inputProps} />
+      {/* eslint-enabled */}
+        <input
+          className={css.filterInput}
+          type="checkbox"
+          id={id}
+          name={name}
+          {...inputProps}
+        />
         <span className={css.filterLabel} title={label}>
           {label}
         </span>
       </FlexStack>
 
       {getOnOnlyClick && (
-        <button className={css.filterOnlyButton} type="button" onClick={getOnOnlyClick(name)}>
+        <button
+          className={css.filterOnlyButton}
+          type="button"
+          onClick={getOnOnlyClick(name)}
+        >
           only
         </button>
       )}
@@ -47,17 +57,13 @@ Filter.defaultProps = {
 };
 
 const FilterGroup = (props) => {
-  const { className, groupKey, data, values, onCheckboxChange, toggleFilters } = props;
+  const { groupKey, data, values, onCheckboxChange, toggleFilters } = props;
 
   const { label: groupLabel, ...groupData } = data;
 
   const groupItems = Object.entries(groupData);
-  const groupCheckboxes = groupItems.filter(
-    ([itemKey, item]) => typeof item?.defaultValue !== 'undefined',
-  );
-  const isGroupChecked = groupCheckboxes
-    .map(([itemKey]) => get(values, `${groupKey}.${itemKey}`))
-    .reduce((agg, val) => agg && val, true);
+  const groupCheckboxes = groupItems.filter(([itemKey, item]) => typeof item?.defaultValue !== 'undefined');
+  const isGroupChecked = groupCheckboxes.map(([itemKey]) => get(values, `${groupKey}.${itemKey}`)).reduce((agg, val) => agg && val, true);
 
   const filterSuffix = getGroupFiltersLabelSuffix(groupItems);
   const hasCustomFilterSuffix = !Object.values(LABELS).includes(filterSuffix);
@@ -65,33 +71,26 @@ const FilterGroup = (props) => {
     <>
       {`${groupLabel}:`}
       &nbsp;
-      <span className={cx(hasCustomFilterSuffix && css.labelSuffixCustom)}>{filterSuffix}</span>
+      <span className={cx(hasCustomFilterSuffix && css.labelSuffixCustom)}>
+        {filterSuffix}
+      </span>
     </>
   );
 
-  const getOnGroupCheck =
-    (value, overrides = {}) =>
-    () => {
-      const newFilters = groupCheckboxes.reduce(
-        (agg, [itemKey]) => ({
-          ...agg,
-          [`${groupKey}.${itemKey}`]: value,
-        }),
-        {},
-      );
-
-      toggleFilters({
-        ...newFilters,
-        ...overrides,
-      });
-    };
+  const getOnGroupCheck = (value, overrides = {}) => () => {
+    const newFilters = groupCheckboxes.reduce((agg, [itemKey]) => ({
+      ...agg,
+      [`${groupKey}.${itemKey}`]: value,
+    }), {});
+
+    toggleFilters({
+      ...newFilters,
+      ...overrides,
+    });
+  };
 
   return (
-    <Dropdown
-      className={className}
-      label={dropdownLabel}
-      ariaLabel={`${groupLabel}: ${filterSuffix}`}
-    >
+    <Dropdown label={dropdownLabel} ariaLabel={`${groupLabel}: ${filterSuffix}`}>
       {({ MenuItem, menu, menuItemClassName }) => {
         return (
           <>
@@ -101,11 +100,7 @@ const FilterGroup = (props) => {
                 const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });
 
                 return (
-                  <MenuItem
-                    key={id}
-                    {...menu}
-                    className={cx(menuItemClassName, css.filterGroupItem)}
-                  >
+                  <MenuItem key={id} {...menu} className={cx(menuItemClassName, css.filterGroupItem)}>
                     <Filter
                       name={id}
                       label={itemData.label}
@@ -143,13 +138,12 @@ const FilterGroup = (props) => {
             </div>
           </>
         );
-      }}
+    }}
     </Dropdown>
   );
 };
 
 FilterGroup.propTypes = {
-  className: PropTypes.string,
   groupKey: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   values: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
@@ -157,12 +151,14 @@ FilterGroup.propTypes = {
   toggleFilters: PropTypes.func.isRequired,
 };
 
-FilterGroup.defaultProps = {
-  className: '',
-};
-
 export const Filters = (props) => {
-  const { className, values, filters, toggleFilter, toggleFilters } = props;
+  const {
+    className,
+    values,
+    filters,
+    toggleFilter,
+    toggleFilters,
+  } = props;
 
   const onCheckboxChange = ({ target }) => toggleFilter(target.name, target.checked);
   const rootClassName = cx(css.root, className);
@@ -186,15 +182,16 @@ export const Filters = (props) => {
           }
 
           return (
-            <FilterGroup
-              className={css.item}
-              key={name}
-              groupKey={name}
-              data={data}
-              values={values}
-              onCheckboxChange={onCheckboxChange}
-              toggleFilters={toggleFilters}
-            />
+            <div className={css.item}>
+              <FilterGroup
+                key={name}
+                groupKey={name}
+                data={data}
+                values={values}
+                onCheckboxChange={onCheckboxChange}
+                toggleFilters={toggleFilters}
+              />
+            </div>
           );
         })}
       </FlexStack>

package/src/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/src/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));

package/src/ui/table/table.module.css

@@ -13,8 +13,12 @@
   text-align: left;
 }
 
+tr:last-child .cell {
+  border-bottom-width: 1px;
+}
+
 .root thead .cell {
-  border-width: 0 0 1px;
+  border-width: 0 0 2px;
   text-transform: uppercase;
   vertical-align: top;
 }
@@ -40,6 +44,10 @@
   text-decoration: underline;
 }
 
+.root tbody tr:nth-child(odd) .cell {
+  background-color: var(--color-highlight);
+}
+
 .root tbody tr:hover .cell {
   background-color: var(--color-highlight-warning);
 }

package/src/ui/tabs/tabs.module.css

@@ -7,7 +7,8 @@
   position: relative;
   display: inline-block;
   padding: var(--space-xsmall) 0;
-  color: var(--color-text-light);
+  color: var(--color-text-ultra-light);
+  font-weight: bold;
   text-decoration: none;
 }
 

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

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

package/lib/layout/separator.js

@@ -1,48 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Separator = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _separatorModule = _interopRequireDefault(require("./separator.module.css"));
-
-var _excluded = ["className"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-var propTypes = {
-  className: _propTypes["default"].string
-};
-var defaultProps = {
-  className: ''
-};
-/**
- * @param {PropTypes.InferProps<typeof propTypes>} props
- * @return {React.FunctionComponentElement}
- */
-
-var Separator = function Separator(props) {
-  var className = props.className,
-      restProps = _objectWithoutProperties(props, _excluded);
-
-  return /*#__PURE__*/_react["default"].createElement("div", _extends({
-    className: (0, _classnames["default"])(_separatorModule["default"].root, className)
-  }, restProps));
-};
-
-exports.Separator = Separator;
-Separator.propTypes = propTypes;
-Separator.defaultProps = defaultProps;

package/lib/layout/separator.module.css

@@ -1,5 +0,0 @@
-.root {
-  background: var(--color-outline);
-  width: 100%;
-  height: 1px;
-}

package/lib-esm/layout/separator.js

@@ -1,28 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import css from './separator.module.css';
-const propTypes = {
-  className: PropTypes.string
-};
-const defaultProps = {
-  className: ''
-};
-/**
- * @param {PropTypes.InferProps<typeof propTypes>} props
- * @return {React.FunctionComponentElement}
- */
-
-export const Separator = props => {
-  const {
-    className,
-    ...restProps
-  } = props;
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: cx(css.root, className)
-  }, restProps));
-};
-Separator.propTypes = propTypes;
-Separator.defaultProps = defaultProps;

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

@@ -1,5 +0,0 @@
-.root {
-  background: var(--color-outline);
-  width: 100%;
-  height: 1px;
-}

package/src/layout/separator.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import css from './separator.module.css';
-
-const propTypes = {
-  className: PropTypes.string,
-};
-
-const defaultProps = {
-  className: '',
-};
-
-/**
- * @param {PropTypes.InferProps<typeof propTypes>} props
- * @return {React.FunctionComponentElement}
- */
-export const Separator = (props) => {
-  const { className, ...restProps } = props;
-  return <div className={cx(css.root, className)} {...restProps} />;
-};
-
-Separator.propTypes = propTypes;
-Separator.defaultProps = defaultProps;

package/src/layout/separator.module.css

@@ -1,5 +0,0 @@
-.root {
-  background: var(--color-outline);
-  width: 100%;
-  height: 1px;
-}