@bundle-stats/ui 4.1.1-alpha.3 → 4.1.2-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.1.1-alpha.3",
+  "version": "4.1.2-alpha.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -37,27 +37,27 @@
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
     "@babel/cli": "7.19.3",
-    "@babel/core": "7.19.3",
+    "@babel/core": "7.19.6",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/preset-env": "7.19.3",
+    "@babel/preset-env": "7.19.4",
     "@babel/preset-react": "7.18.6",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
-    "@storybook/addon-essentials": "6.5.12",
+    "@storybook/addon-essentials": "6.5.13",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.5.12",
-    "@storybook/addons": "6.5.12",
-    "@storybook/builder-webpack5": "6.5.12",
-    "@storybook/manager-webpack5": "6.5.12",
-    "@storybook/react": "6.5.12",
+    "@storybook/addon-storyshots": "6.5.13",
+    "@storybook/addons": "6.5.13",
+    "@storybook/builder-webpack5": "6.5.13",
+    "@storybook/manager-webpack5": "6.5.13",
+    "@storybook/react": "6.5.13",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "29.1.2",
+    "babel-jest": "29.2.1",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.10.1",
+    "chromatic": "6.11.0",
     "classnames": "2.3.2",
     "colormap": "2.3.2",
-    "core-js": "3.25.5",
+    "core-js": "3.26.0",
     "cross-env": "7.0.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
@@ -67,7 +67,7 @@
     "jest": "27.5.1",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
-    "postcss": "8.4.17",
+    "postcss": "8.4.18",
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -85,12 +85,12 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.1.1-alpha.3",
+    "@bundle-stats/utils": "^4.1.2-alpha.0",
     "ariakit": "^2.0.0-next.41",
     "date-fns": "^2.28.0",
     "modern-css-reset": "^1.4.0",
     "query-string": "^7.1.0",
     "use-query-params": "^2.0.0"
   },
-  "gitHead": "26d4de037b639a94fb76c82e970c39305e00adda"
+  "gitHead": "7014aa16e749d567f9318b8845824f09786649b1"
 }

package/src/components/duplicate-packages-warning/duplicate-packages-warning.module.css

@@ -18,4 +18,5 @@
   padding: 1px 2px;
   vertical-align: super;
   font-size: 9px;
+  line-height: 1;
 }

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

@@ -9,6 +9,9 @@
   text-decoration: none;
 }
 
-.item:hover {
+.item:hover,
+.item:active,
+.item:focus {
   border-color: var(--color-outline-dark);
+  outline: none;
 }

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

@@ -3,8 +3,10 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 
+import { Icon } from '../../ui/icon';
 import { HoverCard } from '../../ui/hover-card';
 import { Skeleton } from '../../ui/skeleton';
+import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { Metric } from '../metric';
 import { Delta } from '../delta';
@@ -62,16 +64,18 @@ export const SummaryItem = ({
   const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
 
   return (
-    <Stack space="xxxsmall" as={Component} className={rootClassName} {...props}>
-      <h3 className={css.title}>
-        {showMetricDescriptionTooltip ? (
-          <HoverCard label={metric.label}>
+    <Stack space="xxsmall" as={Component} className={rootClassName} {...props}>
+      <FlexStack space="xxxsmall" as="h3" className={css.title}>
+        <span>
+          {metric.label}
+        </span>
+
+        {showMetricDescriptionTooltip && (
+          <HoverCard label={<Icon glyph={Icon.ICONS.HELP} />} className={css.titleIcon}>
             <MetricInfo {...metric} />
           </HoverCard>
-        ) : (
-          metric.label
         )}
-      </h3>
+      </FlexStack>
 
       {!loading ? (
         <Stack>

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

@@ -2,14 +2,19 @@
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
-  line-height: 1;
   text-transform: uppercase;
   white-space: nowrap;
+  align-items: center;
+}
+
+.titleIcon {
+  opacity: 0;
+  pointer-events: none;
 }
 
 .currentMetric {
   color: var(--color-heading);
-  font-size: var(--size-xlarge);
+  font-size: var(--size-large);
   white-space: nowrap;
   font-weight: bold;
 }
@@ -38,8 +43,9 @@
 }
 
 /* Hover state */
-.root:hover .title {
-  color: var(--color-text-light);
+.root:hover .titleIcon {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 

package/src/css/default.css

@@ -26,6 +26,7 @@ body {
 h1, h2, h3, h4, h5, h6 {
   color: var(--color-heading);
   font-weight: 500;
+  line-height: var(--line-height-heading);
 }
 
 h1 {
@@ -63,8 +64,10 @@ a {
 }
 
 a:hover,
-a:active {
+a:active,
+a:focus {
   color: var(--color-primary-dark);
+  outline: none;
 }
 
 .ui-button--primary {

package/src/css/variables.css

@@ -24,13 +24,14 @@
   --size-xxxlarge: 1.602rem;
 
   --line-height: 1.66em;
+  --line-height-heading: 1.33em;
 
   /*
    * Color scheme:
    * https://coolors.co/287acc-da444e-55b950-f6e179-192339
    * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f6e179&mcgpalette3=%23505861&mcgpalette4=%23287acc&themename=mcgtheme
    */
-  --color-gray-25: #f3f3f4;
+  --color-gray-25: #F7F7F7;
   --color-gray-50 : #eaebec;
   --color-gray-100: #cbcdd0;
   --color-gray-200: #a8acb0;
@@ -182,9 +183,9 @@
   --layer-high: 1000;
   --layer-xhigh: 10000;
 
-  --radius-small: 3px;
-  --radius-medium: var(--space-xxxsmall);
-  --radius-large: var(--space-xxsmall);
+  --radius-small: 2px;
+  --radius-medium: 3px;
+  --radius-large: 5px;
 
   /** Layout */
   --max-width: 80rem;

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

@@ -23,12 +23,16 @@
   background: transparent;
 }
 
-.item:hover {
+.item:hover,
+.item:active,
+.item:focus {
   color: var(--color-primary-dark);
   outline: none;
 }
 
-.item:hover::after {
+.item:hover::after,
+.item:active::after,
+.item:focus::after {
   background: currentColor;
 }