@bundle-stats/ui 3.3.5 → 3.3.7-alpha.0

package/lib/components/summary/summary.js

@@ -17,8 +17,6 @@ var _utils = require("@bundle-stats/utils");
 
 var _constants = require("../../constants");
 
-var _icon = require("../../ui/icon");
-
 var _box = require("../../layout/box");
 
 var _flexStack = require("../../layout/flex-stack");
@@ -70,22 +68,18 @@ var Summary = function Summary(_ref) {
         metricId = _ref5[0],
         metricOptions = _ref5[1];
 
-    return /*#__PURE__*/_react["default"].createElement("div", {
+    return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, _extends({
       key: metricId,
-      className: _summaryModule["default"].item
-    }, /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
+      className: _summaryModule["default"].item,
+      as: SummaryItemCustomLink
+    }, metricOptions.link, {
       size: size,
       id: metricId,
       data: (0, _get2["default"])(data, metricId),
       loading: loading,
       showMetricDescription: true,
       showDelta: showSummaryItemDelta && metricOptions.showDelta !== false
-    }), !loading && /*#__PURE__*/_react["default"].createElement(SummaryItemCustomLink, _extends({}, metricOptions.link, {
-      className: _summaryModule["default"].readMore
-    }), /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-      className: _summaryModule["default"].readMoreIcon,
-      glyph: _icon.Icon.ICONS.ARROW_RIGHT_CIRLCE
-    })));
+    }));
   })));
 };
 

package/lib/components/summary/summary.module.css

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

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

@@ -15,14 +15,10 @@ var _utils = require("@bundle-stats/utils");
 
 var _hoverCard = require("../../ui/hover-card");
 
-var _icon = require("../../ui/icon");
-
 var _skeleton = require("../../ui/skeleton");
 
 var _stack = require("../../layout/stack");
 
-var _flexStack = require("../../layout/flex-stack");
-
 var _metric = require("../metric");
 
 var _delta = require("../delta");
@@ -44,8 +40,11 @@ var MetricInfo = function MetricInfo(_ref) {
       url = _ref.url;
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
-  }, /*#__PURE__*/_react["default"].createElement("p", null, description), url && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("a", {
-    href: url,
+  }, /*#__PURE__*/_react["default"].createElement("p", null, description), url && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return window.open(url);
+    },
     className: _summaryItemModule["default"].readMoreLink
   }, "Read more")));
 };
@@ -81,19 +80,14 @@ var SummaryItem = function SummaryItem(_ref2) {
   var showMetricDescriptionTooltip = showMetricDescription && (metric === null || metric === void 0 ? void 0 : metric.description);
   var rootClassName = (0, _classnames["default"])(_summaryItemModule["default"].root, className, _summaryItemModule["default"][size], showDelta && _summaryItemModule["default"].showDelta);
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, _extends({
-    space: "xxxsmall",
+    space: "xxsmall",
     as: Component,
     className: rootClassName
-  }, props), /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-    as: "h3",
-    space: "xxxsmall",
+  }, props), /*#__PURE__*/_react["default"].createElement("h3", {
     className: _summaryItemModule["default"].title
-  }, /*#__PURE__*/_react["default"].createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
-    className: _summaryItemModule["default"].icon,
-    label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-      glyph: "help"
-    })
-  }, /*#__PURE__*/_react["default"].createElement(MetricInfo, metric))), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
+  }, showMetricDescriptionTooltip ? /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+    label: metric.label
+  }, /*#__PURE__*/_react["default"].createElement(MetricInfo, metric)) : metric.label), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
     className: _summaryItemModule["default"].currentMetric,
     value: current,
     formatter: metric.formatter,

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

@@ -1,9 +1,8 @@
 .title {
-  align-items: center;
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
-  line-height: var(--space-small);
+  line-height: 1;
   text-transform: uppercase;
   white-space: nowrap;
 }
@@ -28,6 +27,30 @@
   line-height: var(--space-small);
 }
 
+.readMoreLink {
+  appearance: none;
+  background: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.readMoreLink:hover,
+.readMoreLink:active,
+.readMoreLink:focus {
+  color: var(--color-primary-dark);
+  text-decoration: none;
+}
+
+/* Hover state */
+.root:hover .title {
+  color: var(--color-text-light);
+}
+
+
 /* Loading state */
 .loading.currentMetric {
   width: 8em;

package/lib/ui/hover-card/hover-card.js

@@ -53,6 +53,11 @@ var HoverCard = function HoverCard(props) {
   }); // Fallback to span if no href
 
   var Component = resolveComponent(as, href);
+
+  var handleOnClick = function handleOnClick(event) {
+    event.preventDefault();
+  };
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])(_hoverCardModule["default"].root, className)
   }, /*#__PURE__*/_react["default"].createElement(_hovercard.HovercardAnchor, {
@@ -65,7 +70,8 @@ var HoverCard = function HoverCard(props) {
     className: (0, _classnames["default"])(_hoverCardModule["default"].hoverCard, hoverCardClassName),
     style: {
       zIndex: 10000
-    }
+    },
+    onClick: handleOnClick
   }), /*#__PURE__*/_react["default"].createElement(_hovercard.HovercardArrow, {
     size: 24
   }), typeof children === 'function' ? children({

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

@@ -7,7 +7,6 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 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';
@@ -33,22 +32,18 @@ export const Summary = _ref => {
     return keys.includes(metricId);
   }).map(_ref3 => {
     let [metricId, metricOptions] = _ref3;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(SummaryItem, _extends({
       key: metricId,
-      className: css.item
-    }, /*#__PURE__*/React.createElement(SummaryItem, {
+      className: css.item,
+      as: SummaryItemCustomLink
+    }, metricOptions.link, {
       size: size,
       id: metricId,
       data: _get(data, metricId),
       loading: loading,
       showMetricDescription: true,
       showDelta: showSummaryItemDelta && metricOptions.showDelta !== false
-    }), !loading && /*#__PURE__*/React.createElement(SummaryItemCustomLink, _extends({}, metricOptions.link, {
-      className: css.readMore
-    }), /*#__PURE__*/React.createElement(Icon, {
-      className: css.readMoreIcon,
-      glyph: Icon.ICONS.ARROW_RIGHT_CIRLCE
-    })));
+    }));
   })));
 };
 Summary.defaultProps = {

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

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

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

@@ -5,10 +5,8 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 import { HoverCard } from '../../ui/hover-card';
-import { Icon } from '../../ui/icon';
 import { Skeleton } from '../../ui/skeleton';
 import { Stack } from '../../layout/stack';
-import { FlexStack } from '../../layout/flex-stack';
 import { Metric } from '../metric';
 import { Delta } from '../delta';
 import css from './summary-item.module.css';
@@ -20,8 +18,9 @@ const MetricInfo = _ref => {
   } = _ref;
   return /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall"
-  }, /*#__PURE__*/React.createElement("p", null, description), url && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {
-    href: url,
+  }, /*#__PURE__*/React.createElement("p", null, description), url && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => window.open(url),
     className: css.readMoreLink
   }, "Read more")));
 };
@@ -57,19 +56,14 @@ export const SummaryItem = _ref2 => {
   const showMetricDescriptionTooltip = showMetricDescription && (metric == null ? void 0 : metric.description);
   const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
   return /*#__PURE__*/React.createElement(Stack, _extends({
-    space: "xxxsmall",
+    space: "xxsmall",
     as: Component,
     className: rootClassName
-  }, props), /*#__PURE__*/React.createElement(FlexStack, {
-    as: "h3",
-    space: "xxxsmall",
+  }, props), /*#__PURE__*/React.createElement("h3", {
     className: css.title
-  }, /*#__PURE__*/React.createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(HoverCard, {
-    className: css.icon,
-    label: /*#__PURE__*/React.createElement(Icon, {
-      glyph: "help"
-    })
-  }, /*#__PURE__*/React.createElement(MetricInfo, metric))), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
+  }, showMetricDescriptionTooltip ? /*#__PURE__*/React.createElement(HoverCard, {
+    label: metric.label
+  }, /*#__PURE__*/React.createElement(MetricInfo, metric)) : metric.label), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
     className: css.currentMetric,
     value: current,
     formatter: metric.formatter,

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

@@ -1,9 +1,8 @@
 .title {
-  align-items: center;
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
-  line-height: var(--space-small);
+  line-height: 1;
   text-transform: uppercase;
   white-space: nowrap;
 }
@@ -28,6 +27,30 @@
   line-height: var(--space-small);
 }
 
+.readMoreLink {
+  appearance: none;
+  background: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.readMoreLink:hover,
+.readMoreLink:active,
+.readMoreLink:focus {
+  color: var(--color-primary-dark);
+  text-decoration: none;
+}
+
+/* Hover state */
+.root:hover .title {
+  color: var(--color-text-light);
+}
+
+
 /* Loading state */
 .loading.currentMetric {
   width: 8em;

package/lib-esm/ui/hover-card/hover-card.js

@@ -36,6 +36,11 @@ export const HoverCard = props => {
   }); // Fallback to span if no href
 
   const Component = resolveComponent(as, href);
+
+  const handleOnClick = event => {
+    event.preventDefault();
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement(HovercardAnchor, {
@@ -48,7 +53,8 @@ export const HoverCard = props => {
     className: cx(css.hoverCard, hoverCardClassName),
     style: {
       zIndex: 10000
-    }
+    },
+    onClick: handleOnClick
   }), /*#__PURE__*/React.createElement(HovercardArrow, {
     size: 24
   }), typeof children === 'function' ? children({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.3.5",
+  "version": "3.3.7-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.17.6",
-    "@babel/core": "7.17.8",
+    "@babel/core": "7.17.9",
     "@babel/plugin-proposal-class-properties": "7.16.7",
     "@babel/preset-env": "7.16.11",
     "@babel/preset-react": "7.16.7",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
-    "@storybook/addon-essentials": "6.4.20",
+    "@storybook/addon-essentials": "6.4.22",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.4.20",
-    "@storybook/addons": "6.4.20",
-    "@storybook/builder-webpack5": "6.4.20",
-    "@storybook/manager-webpack5": "6.4.20",
-    "@storybook/react": "6.4.20",
+    "@storybook/addon-storyshots": "6.4.22",
+    "@storybook/addons": "6.4.22",
+    "@storybook/builder-webpack5": "6.4.22",
+    "@storybook/manager-webpack5": "6.4.22",
+    "@storybook/react": "6.4.22",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "27.5.1",
+    "babel-jest": "28.0.1",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.5.3",
+    "chromatic": "6.5.4",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
-    "core-js": "3.21.1",
+    "core-js": "3.22.2",
     "cross-env": "7.0.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
@@ -85,12 +85,12 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.3.5",
-    "ariakit": "2.0.0-alpha.20",
+    "@bundle-stats/utils": "^3.3.7-alpha.0",
+    "ariakit": "2.0.0-next.24",
     "date-fns": "^2.28.0",
     "modern-css-reset": "^1.4.0",
     "query-string": "^7.1.0",
     "use-query-params": "^1.2.3"
   },
-  "gitHead": "6e6561a49d81c675f993fdc892332528ba296140"
+  "gitHead": "346065f7f6f5ebe1bbc82ba677a452420fb1fb1d"
 }

package/src/components/summary/summary.jsx

@@ -5,7 +5,6 @@ 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';
@@ -26,21 +25,18 @@ export const Summary = ({
       {Array.from(METRIC_COMPONENT_LINKS)
         .filter(([metricId]) => keys.includes(metricId))
         .map(([metricId, metricOptions]) => (
-          <div key={metricId} className={css.item}>
-            <SummaryItem
-              size={size}
-              id={metricId}
-              data={get(data, 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>
+          <SummaryItem
+            key={metricId}
+            className={css.item}
+            as={SummaryItemCustomLink}
+            {...metricOptions.link}
+            size={size}
+            id={metricId}
+            data={get(data, metricId)}
+            loading={loading}
+            showMetricDescription
+            showDelta={showSummaryItemDelta && metricOptions.showDelta !== false}
+          />
         ))}
     </FlexStack>
   </Box>

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

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

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

@@ -4,10 +4,8 @@ import cx from 'classnames';
 import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 
 import { HoverCard } from '../../ui/hover-card';
-import { Icon } from '../../ui/icon';
 import { Skeleton } from '../../ui/skeleton';
 import { Stack } from '../../layout/stack';
-import { FlexStack } from '../../layout/flex-stack';
 import { Metric } from '../metric';
 import { Delta } from '../delta';
 import css from './summary-item.module.css';
@@ -17,9 +15,9 @@ const MetricInfo = ({ description, url }) => (
     <p>{description}</p>
     {url && (
       <p>
-        <a href={url} className={css.readMoreLink}>
+        <button type="button" onClick={() => window.open(url)} className={css.readMoreLink}>
           Read more
-        </a>
+        </button>
       </p>
     )}
   </Stack>
@@ -54,16 +52,16 @@ export const SummaryItem = ({
   const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
 
   return (
-    <Stack space="xxxsmall" as={Component} className={rootClassName} {...props}>
-      <FlexStack as="h3" space="xxxsmall" className={css.title}>
-        <span>{metric.label}</span>
-
-        {showMetricDescriptionTooltip && (
-          <HoverCard className={css.icon} label={<Icon glyph="help" />}>
+    <Stack space="xxsmall" as={Component} className={rootClassName} {...props}>
+      <h3 className={css.title}>
+        {showMetricDescriptionTooltip ? (
+          <HoverCard label={metric.label}>
             <MetricInfo {...metric} />
           </HoverCard>
+        ) : (
+          metric.label
         )}
-      </FlexStack>
+      </h3>
 
       {!loading ? (
         <Stack>

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

@@ -1,9 +1,8 @@
 .title {
-  align-items: center;
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
-  line-height: var(--space-small);
+  line-height: 1;
   text-transform: uppercase;
   white-space: nowrap;
 }
@@ -28,6 +27,30 @@
   line-height: var(--space-small);
 }
 
+.readMoreLink {
+  appearance: none;
+  background: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.readMoreLink:hover,
+.readMoreLink:active,
+.readMoreLink:focus {
+  color: var(--color-primary-dark);
+  text-decoration: none;
+}
+
+/* Hover state */
+.root:hover .title {
+  color: var(--color-text-light);
+}
+
+
 /* Loading state */
 .loading.currentMetric {
   width: 8em;

package/src/ui/hover-card/hover-card.jsx

@@ -31,6 +31,10 @@ export const HoverCard = (props) => {
   // Fallback to span if no href
   const Component = resolveComponent(as, href);
 
+  const handleOnClick = (event) => {
+    event.preventDefault();
+  };
+
   return (
     <div className={cx(css.root, className)}>
       <HovercardAnchor state={state} href={href} className={css.anchor} as={Component}>
@@ -41,6 +45,7 @@ export const HoverCard = (props) => {
         state={state}
         className={cx(css.hoverCard, hoverCardClassName)}
         style={{ zIndex: 10000 }}
+        onClick={handleOnClick}
       >
         <HovercardArrow size={24} />
         {typeof children === 'function' ? children({ close: state.hide }) : children}