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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/lib/components/summary-item/summary-item.js +12 -5
  2. package/lib/components/summary-item/summary-item.module.css +10 -4
  3. package/lib/css/default.css +1 -0
  4. package/lib/css/variables.css +4 -3
  5. package/lib-esm/components/summary-item/summary-item.js +12 -5
  6. package/lib-esm/components/summary-item/summary-item.module.css +10 -4
  7. package/lib-esm/css/default.css +1 -0
  8. package/lib-esm/css/variables.css +4 -3
  9. package/package.json +3 -3
  10. package/src/components/summary-item/summary-item.jsx +11 -7
  11. package/src/components/summary-item/summary-item.module.css +10 -4
  12. package/src/css/default.css +1 -0
  13. package/src/css/variables.css +4 -3
package/lib/components/summary-item/summary-item.js CHANGED
@@ -9,8 +9,10 @@ var _react = _interopRequireWildcard(require("react"));
9
9
  var _propTypes = _interopRequireDefault(require("prop-types"));
10
10
  var _classnames = _interopRequireDefault(require("classnames"));
11
11
  var _utils = require("@bundle-stats/utils");
12
+ var _icon = require("../../ui/icon");
12
13
  var _hoverCard = require("../../ui/hover-card");
13
14
  var _skeleton = require("../../ui/skeleton");
15
+ var _flexStack = require("../../layout/flex-stack");
14
16
  var _stack = require("../../layout/stack");
15
17
  var _metric = require("../metric");
16
18
  var _delta = require("../delta");
@@ -68,14 +70,19 @@ var SummaryItem = function SummaryItem(_ref2) {
68
70
  var showMetricDescriptionTooltip = showMetricDescription && (metric === null || metric === void 0 ? void 0 : metric.description);
69
71
  var rootClassName = (0, _classnames["default"])(_summaryItemModule["default"].root, className, _summaryItemModule["default"][size], showDelta && _summaryItemModule["default"].showDelta);
70
72
  return /*#__PURE__*/_react["default"].createElement(_stack.Stack, _extends({
71
- space: "xxxsmall",
73
+ space: "xxsmall",
72
74
  as: Component,
73
75
  className: rootClassName
74
- }, props), /*#__PURE__*/_react["default"].createElement("h3", {
76
+ }, props), /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
77
+ space: "xxxsmall",
78
+ as: "h3",
75
79
  className: _summaryItemModule["default"].title
76
- }, showMetricDescriptionTooltip ? /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
77
- label: metric.label
78
- }, /*#__PURE__*/_react["default"].createElement(MetricInfo, metric)) : metric.label), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
80
+ }, /*#__PURE__*/_react["default"].createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
81
+ label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
82
+ glyph: _icon.Icon.ICONS.HELP
83
+ }),
84
+ className: _summaryItemModule["default"].titleIcon
85
+ }, /*#__PURE__*/_react["default"].createElement(MetricInfo, metric))), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
79
86
  className: _summaryItemModule["default"].currentMetric,
80
87
  value: current,
81
88
  formatter: metric.formatter,
package/lib/components/summary-item/summary-item.module.css CHANGED
@@ -2,14 +2,19 @@
2
2
  color: var(--color-text-ultra-light);
3
3
  font-weight: bold;
4
4
  font-size: var(--size-xsmall);
5
- line-height: 1;
6
5
  text-transform: uppercase;
7
6
  white-space: nowrap;
7
+ align-items: center;
8
+ }
9
+
10
+ .titleIcon {
11
+ opacity: 0;
12
+ pointer-events: none;
8
13
  }
9
14
 
10
15
  .currentMetric {
11
16
  color: var(--color-heading);
12
- font-size: var(--size-xlarge);
17
+ font-size: var(--size-large);
13
18
  white-space: nowrap;
14
19
  font-weight: bold;
15
20
  }
@@ -38,8 +43,9 @@
38
43
  }
39
44
 
40
45
  /* Hover state */
41
- .root:hover .title {
42
- color: var(--color-text-light);
46
+ .root:hover .titleIcon {
47
+ opacity: 1;
48
+ pointer-events: auto;
43
49
  }
44
50
 
45
51
 
package/lib/css/default.css CHANGED
@@ -26,6 +26,7 @@ body {
26
26
  h1, h2, h3, h4, h5, h6 {
27
27
  color: var(--color-heading);
28
28
  font-weight: 500;
29
+ line-height: var(--line-height-heading);
29
30
  }
30
31
 
31
32
  h1 {
package/lib/css/variables.css CHANGED
@@ -24,6 +24,7 @@
24
24
  --size-xxxlarge: 1.602rem;
25
25
 
26
26
  --line-height: 1.66em;
27
+ --line-height-heading: 1.33em;
27
28
 
28
29
  /*
29
30
  * Color scheme:
@@ -182,9 +183,9 @@
182
183
  --layer-high: 1000;
183
184
  --layer-xhigh: 10000;
184
185
 
185
- --radius-small: 3px;
186
- --radius-medium: var(--space-xxxsmall);
187
- --radius-large: var(--space-xxsmall);
186
+ --radius-small: 2px;
187
+ --radius-medium: 3px;
188
+ --radius-large: 5px;
188
189
 
189
190
  /** Layout */
190
191
  --max-width: 80rem;
package/lib-esm/components/summary-item/summary-item.js CHANGED
@@ -3,8 +3,10 @@ import React, { useCallback } from 'react';
3
3
  import PropTypes from 'prop-types';
4
4
  import cx from 'classnames';
5
5
  import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
6
+ import { Icon } from '../../ui/icon';
6
7
  import { HoverCard } from '../../ui/hover-card';
7
8
  import { Skeleton } from '../../ui/skeleton';
9
+ import { FlexStack } from '../../layout/flex-stack';
8
10
  import { Stack } from '../../layout/stack';
9
11
  import { Metric } from '../metric';
10
12
  import { Delta } from '../delta';
@@ -60,14 +62,19 @@ export const SummaryItem = _ref2 => {
60
62
  const showMetricDescriptionTooltip = showMetricDescription && (metric == null ? void 0 : metric.description);
61
63
  const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
62
64
  return /*#__PURE__*/React.createElement(Stack, _extends({
63
- space: "xxxsmall",
65
+ space: "xxsmall",
64
66
  as: Component,
65
67
  className: rootClassName
66
- }, props), /*#__PURE__*/React.createElement("h3", {
68
+ }, props), /*#__PURE__*/React.createElement(FlexStack, {
69
+ space: "xxxsmall",
70
+ as: "h3",
67
71
  className: css.title
68
- }, showMetricDescriptionTooltip ? /*#__PURE__*/React.createElement(HoverCard, {
69
- label: metric.label
70
- }, /*#__PURE__*/React.createElement(MetricInfo, metric)) : metric.label), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
72
+ }, /*#__PURE__*/React.createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(HoverCard, {
73
+ label: /*#__PURE__*/React.createElement(Icon, {
74
+ glyph: Icon.ICONS.HELP
75
+ }),
76
+ className: css.titleIcon
77
+ }, /*#__PURE__*/React.createElement(MetricInfo, metric))), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
71
78
  className: css.currentMetric,
72
79
  value: current,
73
80
  formatter: metric.formatter,
package/lib-esm/components/summary-item/summary-item.module.css CHANGED
@@ -2,14 +2,19 @@
2
2
  color: var(--color-text-ultra-light);
3
3
  font-weight: bold;
4
4
  font-size: var(--size-xsmall);
5
- line-height: 1;
6
5
  text-transform: uppercase;
7
6
  white-space: nowrap;
7
+ align-items: center;
8
+ }
9
+
10
+ .titleIcon {
11
+ opacity: 0;
12
+ pointer-events: none;
8
13
  }
9
14
 
10
15
  .currentMetric {
11
16
  color: var(--color-heading);
12
- font-size: var(--size-xlarge);
17
+ font-size: var(--size-large);
13
18
  white-space: nowrap;
14
19
  font-weight: bold;
15
20
  }
@@ -38,8 +43,9 @@
38
43
  }
39
44
 
40
45
  /* Hover state */
41
- .root:hover .title {
42
- color: var(--color-text-light);
46
+ .root:hover .titleIcon {
47
+ opacity: 1;
48
+ pointer-events: auto;
43
49
  }
44
50
 
45
51
 
package/lib-esm/css/default.css CHANGED
@@ -26,6 +26,7 @@ body {
26
26
  h1, h2, h3, h4, h5, h6 {
27
27
  color: var(--color-heading);
28
28
  font-weight: 500;
29
+ line-height: var(--line-height-heading);
29
30
  }
30
31
 
31
32
  h1 {
package/lib-esm/css/variables.css CHANGED
@@ -24,6 +24,7 @@
24
24
  --size-xxxlarge: 1.602rem;
25
25
 
26
26
  --line-height: 1.66em;
27
+ --line-height-heading: 1.33em;
27
28
 
28
29
  /*
29
30
  * Color scheme:
@@ -182,9 +183,9 @@
182
183
  --layer-high: 1000;
183
184
  --layer-xhigh: 10000;
184
185
 
185
- --radius-small: 3px;
186
- --radius-medium: var(--space-xxxsmall);
187
- --radius-large: var(--space-xxsmall);
186
+ --radius-small: 2px;
187
+ --radius-medium: 3px;
188
+ --radius-large: 5px;
188
189
 
189
190
  /** Layout */
190
191
  --max-width: 80rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bundle-stats/ui",
3
- "version": "4.1.1",
3
+ "version": "4.1.2-alpha.0",
4
4
  "description": "UI components for BundleStats projects.",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",
@@ -85,12 +85,12 @@
85
85
  "react-router-dom": "^5.0.0"
86
86
  },
87
87
  "dependencies": {
88
- "@bundle-stats/utils": "^4.1.1",
88
+ "@bundle-stats/utils": "^4.1.2-alpha.0",
89
89
  "ariakit": "^2.0.0-next.41",
90
90
  "date-fns": "^2.28.0",
91
91
  "modern-css-reset": "^1.4.0",
92
92
  "query-string": "^7.1.0",
93
93
  "use-query-params": "^2.0.0"
94
94
  },
95
- "gitHead": "ec3bcf5dcb6e9cf793bcfcf6e2f8f644f168af50"
95
+ "gitHead": "7014aa16e749d567f9318b8845824f09786649b1"
96
96
  }
package/src/components/summary-item/summary-item.jsx CHANGED
@@ -3,8 +3,10 @@ import PropTypes from 'prop-types';
3
3
  import cx from 'classnames';
4
4
  import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
5
5
 
6
+ import { Icon } from '../../ui/icon';
6
7
  import { HoverCard } from '../../ui/hover-card';
7
8
  import { Skeleton } from '../../ui/skeleton';
9
+ import { FlexStack } from '../../layout/flex-stack';
8
10
  import { Stack } from '../../layout/stack';
9
11
  import { Metric } from '../metric';
10
12
  import { Delta } from '../delta';
@@ -62,16 +64,18 @@ export const SummaryItem = ({
62
64
  const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
63
65
 
64
66
  return (
65
- <Stack space="xxxsmall" as={Component} className={rootClassName} {...props}>
66
- <h3 className={css.title}>
67
- {showMetricDescriptionTooltip ? (
68
- <HoverCard label={metric.label}>
67
+ <Stack space="xxsmall" as={Component} className={rootClassName} {...props}>
68
+ <FlexStack space="xxxsmall" as="h3" className={css.title}>
69
+ <span>
70
+ {metric.label}
71
+ </span>
72
+
73
+ {showMetricDescriptionTooltip && (
74
+ <HoverCard label={<Icon glyph={Icon.ICONS.HELP} />} className={css.titleIcon}>
69
75
  <MetricInfo {...metric} />
70
76
  </HoverCard>
71
- ) : (
72
- metric.label
73
77
  )}
74
- </h3>
78
+ </FlexStack>
75
79
 
76
80
  {!loading ? (
77
81
  <Stack>
package/src/components/summary-item/summary-item.module.css CHANGED
@@ -2,14 +2,19 @@
2
2
  color: var(--color-text-ultra-light);
3
3
  font-weight: bold;
4
4
  font-size: var(--size-xsmall);
5
- line-height: 1;
6
5
  text-transform: uppercase;
7
6
  white-space: nowrap;
7
+ align-items: center;
8
+ }
9
+
10
+ .titleIcon {
11
+ opacity: 0;
12
+ pointer-events: none;
8
13
  }
9
14
 
10
15
  .currentMetric {
11
16
  color: var(--color-heading);
12
- font-size: var(--size-xlarge);
17
+ font-size: var(--size-large);
13
18
  white-space: nowrap;
14
19
  font-weight: bold;
15
20
  }
@@ -38,8 +43,9 @@
38
43
  }
39
44
 
40
45
  /* Hover state */
41
- .root:hover .title {
42
- color: var(--color-text-light);
46
+ .root:hover .titleIcon {
47
+ opacity: 1;
48
+ pointer-events: auto;
43
49
  }
44
50
 
45
51
 
package/src/css/default.css CHANGED
@@ -26,6 +26,7 @@ body {
26
26
  h1, h2, h3, h4, h5, h6 {
27
27
  color: var(--color-heading);
28
28
  font-weight: 500;
29
+ line-height: var(--line-height-heading);
29
30
  }
30
31
 
31
32
  h1 {
package/src/css/variables.css CHANGED
@@ -24,6 +24,7 @@
24
24
  --size-xxxlarge: 1.602rem;
25
25
 
26
26
  --line-height: 1.66em;
27
+ --line-height-heading: 1.33em;
27
28
 
28
29
  /*
29
30
  * Color scheme:
@@ -182,9 +183,9 @@
182
183
  --layer-high: 1000;
183
184
  --layer-xhigh: 10000;
184
185
 
185
- --radius-small: 3px;
186
- --radius-medium: var(--space-xxxsmall);
187
- --radius-large: var(--space-xxsmall);
186
+ --radius-small: 2px;
187
+ --radius-medium: 3px;
188
+ --radius-large: 5px;
188
189
 
189
190
  /** Layout */
190
191
  --max-width: 80rem;