@bundle-stats/ui 3.2.1 → 3.2.2-beta.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 (46) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/lib/app/app.stories.js +8 -1
  3. package/lib/assets/icons/arrow-right-circle.svg +1 -0
  4. package/lib/assets/icons/close.svg +1 -1
  5. package/lib/assets/icons.svg +42 -1
  6. package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js +39 -43
  7. package/lib/components/summary/summary.js +29 -56
  8. package/lib/components/summary/summary.module.css +31 -14
  9. package/lib/components/summary-item/summary-item.js +9 -9
  10. package/lib/components/summary-item/summary-item.module.css +3 -9
  11. package/lib/components/summary-item/summary-item.stories.js +35 -18
  12. package/lib/css/variables.css +15 -11
  13. package/lib/ui/icon/icon.js +1 -0
  14. package/lib/ui/icon/icon.stories.js +40 -22
  15. package/lib/ui/popover/popover.js +2 -2
  16. package/lib/ui/popover/popover.module.css +2 -1
  17. package/lib/ui/tooltip/tooltip.module.css +1 -0
  18. package/lib-esm/app/app.stories.js +8 -1
  19. package/lib-esm/assets/icons/arrow-right-circle.svg +1 -0
  20. package/lib-esm/assets/icons/close.svg +1 -1
  21. package/lib-esm/assets/icons.svg +42 -1
  22. package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js +28 -21
  23. package/lib-esm/components/summary/summary.js +17 -40
  24. package/lib-esm/components/summary/summary.module.css +31 -14
  25. package/lib-esm/components/summary-item/summary-item.js +9 -9
  26. package/lib-esm/components/summary-item/summary-item.module.css +3 -9
  27. package/lib-esm/components/summary-item/summary-item.stories.js +14 -16
  28. package/lib-esm/css/variables.css +15 -11
  29. package/lib-esm/ui/icon/icon.js +1 -0
  30. package/lib-esm/ui/icon/icon.stories.js +22 -11
  31. package/lib-esm/ui/popover/popover.js +2 -2
  32. package/lib-esm/ui/popover/popover.module.css +2 -1
  33. package/lib-esm/ui/tooltip/tooltip.module.css +1 -0
  34. package/package.json +15 -15
  35. package/src/assets/icons/arrow-right-circle.svg +1 -0
  36. package/src/assets/icons/close.svg +1 -1
  37. package/src/assets/icons.svg +42 -1
  38. package/src/components/summary/summary.jsx +20 -39
  39. package/src/components/summary/summary.module.css +31 -14
  40. package/src/components/summary-item/summary-item.jsx +13 -22
  41. package/src/components/summary-item/summary-item.module.css +3 -9
  42. package/src/css/variables.css +15 -11
  43. package/src/ui/icon/icon.jsx +1 -0
  44. package/src/ui/popover/popover.jsx +3 -3
  45. package/src/ui/popover/popover.module.css +2 -1
  46. package/src/ui/tooltip/tooltip.module.css +1 -0
package/lib/ui/icon/icon.stories.js CHANGED
@@ -1,37 +1,55 @@
1
1
  "use strict";
2
2
 
3
- var _react = _interopRequireDefault(require("react"));
4
-
5
- var _react2 = require("@storybook/react");
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = exports.Standard = exports.CustomSize = exports.All = void 0;
6
7
 
7
- var _stories = require("../../stories");
8
+ var _react = _interopRequireDefault(require("react"));
8
9
 
9
10
  var _ = require(".");
10
11
 
11
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
12
13
 
13
- var stories = (0, _react2.storiesOf)('UI/Icon', module);
14
- stories.addDecorator((0, _stories.getWrapperDecorator)());
15
- stories.add('default', function () {
16
- return /*#__PURE__*/_react["default"].createElement(_.Icon, {
17
- glyph: _.Icon.ICONS.ARROW
18
- });
19
- });
20
- stories.add('with size', function () {
21
- return /*#__PURE__*/_react["default"].createElement(_.Icon, {
22
- glyph: _.Icon.ICONS.ARROW,
23
- size: _.Icon.SIZE_LARGE
24
- });
25
- });
26
- stories.add('all', function () {
14
+ var _default = {
15
+ title: 'UI/Icon',
16
+ component: _.Icon
17
+ };
18
+ exports["default"] = _default;
19
+
20
+ var Template = function Template(args) {
21
+ return /*#__PURE__*/_react["default"].createElement(_.Icon, args);
22
+ };
23
+
24
+ var Standard = Template.bind();
25
+ exports.Standard = Standard;
26
+ Standard.args = {
27
+ glyph: _.Icon.ICONS.ARROW
28
+ };
29
+ var CustomSize = Template.bind();
30
+ exports.CustomSize = CustomSize;
31
+ CustomSize.args = {
32
+ glyph: _.Icon.ICONS.ARROW,
33
+ size: _.Icon.SIZE_LARGE
34
+ };
35
+
36
+ var All = function All() {
27
37
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, Object.values(_.Icon.ICONS).map(function (glyph) {
28
- return /*#__PURE__*/_react["default"].createElement("span", {
38
+ return /*#__PURE__*/_react["default"].createElement("div", {
29
39
  style: {
30
- margin: '0.3rem'
40
+ display: 'inline-block',
41
+ padding: '1rem',
42
+ textAlign: 'center'
31
43
  }
32
44
  }, /*#__PURE__*/_react["default"].createElement(_.Icon, {
33
45
  glyph: glyph,
34
46
  key: glyph
35
- }));
47
+ }), /*#__PURE__*/_react["default"].createElement("code", {
48
+ style: {
49
+ display: 'block'
50
+ }
51
+ }, glyph));
36
52
  }));
37
- });
53
+ };
54
+
55
+ exports.All = All;
package/lib/ui/popover/popover.js CHANGED
@@ -35,7 +35,7 @@ var Popover = function Popover(_ref) {
35
35
  children = _ref.children;
36
36
  var popover = (0, _Popover.usePopoverState)({
37
37
  baseId: process.env.NODE_ENV === 'test' && 'id-test',
38
- gutter: 24,
38
+ gutter: 12,
39
39
  modal: true,
40
40
  placement: 'top'
41
41
  });
@@ -64,7 +64,7 @@ var Popover = function Popover(_ref) {
64
64
  }), /*#__PURE__*/_react["default"].createElement(_Popover.PopoverArrow, _extends({
65
65
  className: _popoverModule["default"].arrow
66
66
  }, popover, {
67
- size: 24
67
+ size: 16
68
68
  })), typeof children === 'function' ? children({
69
69
  popoverToggle: popover.toggle
70
70
  }) : children, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
package/lib/ui/popover/popover.module.css CHANGED
@@ -23,7 +23,8 @@
23
23
  }
24
24
 
25
25
  .popover {
26
- padding: var(--space-xsmall) var(--space-large) var(--space-xsmall) var(--space-small);
26
+ padding: var(--space-small) var(--space-large) var(--space-small) var(--space-small);
27
+ border-radius: var(--radius-small);
27
28
  max-width: 360px;
28
29
  outline: none;
29
30
  filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
package/lib/ui/tooltip/tooltip.module.css CHANGED
@@ -12,6 +12,7 @@
12
12
 
13
13
  .tooltip {
14
14
  padding: var(--space-xxxsmall) var(--space-xxsmall);
15
+ border-radius: var(--radius-small);
15
16
  background: var(--color-light);
16
17
  color: var(--color-text);
17
18
  filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
package/lib-esm/app/app.stories.js CHANGED
@@ -24,7 +24,14 @@ const BASELINE_SOURCE = {
24
24
  ...baselineData.rawData.webpack
25
25
  }
26
26
  };
27
- const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);
27
+ const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE], {
28
+ webpack: {
29
+ budgets: [{
30
+ metric: 'totalSizeByTypeALL',
31
+ value: 1024 * 1024
32
+ }]
33
+ }
34
+ });
28
35
  const NO_BASELINE_JOBS = createJobs([CURRENT_SOURCE]);
29
36
  const MULTIPLE_JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE, {
30
37
  webpack: {
package/lib-esm/assets/icons/arrow-right-circle.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>
package/lib-esm/assets/icons/close.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
package/lib-esm/assets/icons.svg CHANGED
@@ -1 +1,42 @@
1
- <svg width="16" height="16"><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="afeather afeather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v14M19 12l-7 7-7-7"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bfeather bfeather-x-circle" id="cancel" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cfeather cfeather-clock" id="clock" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="dfeather dfeather-x" id="close" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="efeather efeather-git-commit" id="commit" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="4"/><path d="M1.05 12H7M17.01 12h5.95"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ffeather ffeather-bar-chart" id="filter" xmlns="http://www.w3.org/2000/svg"><path d="M12 20V10M18 20V4M6 20v-4"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="gfeather gfeather-help-circle" id="help" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hfeather hfeather-menu" id="menu" xmlns="http://www.w3.org/2000/svg"><path d="M3 12h18M3 6h18M3 18h18"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="sort" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="jfeather jfeather-alert-triangle" id="warning" xmlns="http://www.w3.org/2000/svg"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h.01"/></symbol></svg>
1
+ <svg width="16" height="16">
2
+ <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg">
3
+ <path d="M12 5v14M19 12l-7 7-7-7"/>
4
+ </symbol>
5
+ <symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right-circle" viewBox="0 0 24 24" id="arrow-right-circle" xmlns="http://www.w3.org/2000/svg">
6
+ <circle cx="12" cy="12" r="10"/>
7
+ <path d="M12 16l4-4-4-4M8 12h8"/>
8
+ </symbol>
9
+ <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle" id="cancel" xmlns="http://www.w3.org/2000/svg">
10
+ <circle cx="12" cy="12" r="10"/>
11
+ <path d="M15 9l-6 6M9 9l6 6"/>
12
+ </symbol>
13
+ <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock" id="clock" xmlns="http://www.w3.org/2000/svg">
14
+ <circle cx="12" cy="12" r="10"/>
15
+ <path d="M12 6v6l4 2"/>
16
+ </symbol>
17
+ <symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle" viewBox="0 0 24 24" id="close" xmlns="http://www.w3.org/2000/svg">
18
+ <circle cx="12" cy="12" r="10"/>
19
+ <path d="M15 9l-6 6M9 9l6 6"/>
20
+ </symbol>
21
+ <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit" id="commit" xmlns="http://www.w3.org/2000/svg">
22
+ <circle cx="12" cy="12" r="4"/>
23
+ <path d="M1.05 12H7M17.01 12h5.95"/>
24
+ </symbol>
25
+ <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart" id="filter" xmlns="http://www.w3.org/2000/svg">
26
+ <path d="M12 20V10M18 20V4M6 20v-4"/>
27
+ </symbol>
28
+ <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle" id="help" xmlns="http://www.w3.org/2000/svg">
29
+ <circle cx="12" cy="12" r="10"/>
30
+ <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/>
31
+ </symbol>
32
+ <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu" id="menu" xmlns="http://www.w3.org/2000/svg">
33
+ <path d="M3 12h18M3 6h18M3 18h18"/>
34
+ </symbol>
35
+ <symbol viewBox="0 0 24 24" fill="currentColor" id="sort" xmlns="http://www.w3.org/2000/svg">
36
+ <path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/>
37
+ <path d="M0 0h24v24H0z" fill="none"/>
38
+ </symbol>
39
+ <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle" id="warning" xmlns="http://www.w3.org/2000/svg">
40
+ <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h.01"/>
41
+ </symbol>
42
+ </svg>
package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js CHANGED
@@ -1,27 +1,34 @@
1
1
  import React from 'react';
2
- import { storiesOf } from '@storybook/react';
3
2
  import { createJobs } from '@bundle-stats/utils';
4
3
  import baselineStats from '../../../__mocks__/webpack-stats.baseline.json';
5
4
  import currentStats from '../../../__mocks__/webpack-stats.current.json';
6
5
  import { getWrapperDecorator } from '../../stories';
7
6
  import { BundleAssetsTotalsTable } from '.';
8
- const JOBS = createJobs([{
9
- webpack: currentStats
10
- }, {
11
- webpack: baselineStats
12
- }]);
13
- const [currentJob] = JOBS;
14
- const stories = storiesOf('Components/BundleAssetsTotalsTable', module);
15
- stories.addDecorator(getWrapperDecorator());
16
- stories.add('default', () => /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
17
- jobs: [currentJob]
18
- }));
19
- stories.add('multiple jobs', () => /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
20
- jobs: JOBS
21
- }));
22
- const JOBS_EMPTY_BASELINE = createJobs([{
23
- webpack: currentStats
24
- }, null]);
25
- stories.add('empty baseline', () => /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
26
- jobs: JOBS_EMPTY_BASELINE
27
- }));
7
+ export default {
8
+ title: 'Components/BundleAssetsTotalsTable',
9
+ component: BundleAssetsTotalsTable,
10
+ decorators: [getWrapperDecorator()]
11
+ };
12
+
13
+ const Template = args => /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, args);
14
+
15
+ export const SingleJob = Template.bind();
16
+ SingleJob.args = {
17
+ jobs: createJobs([{
18
+ webpack: currentStats
19
+ }])
20
+ };
21
+ export const MultipleJobs = Template.bind();
22
+ MultipleJobs.args = {
23
+ jobs: createJobs([{
24
+ webpack: currentStats
25
+ }, {
26
+ webpack: baselineStats
27
+ }])
28
+ };
29
+ export const EmptyBaseline = Template.bind();
30
+ EmptyBaseline.args = {
31
+ jobs: createJobs([{
32
+ webpack: currentStats
33
+ }, null])
34
+ };
package/lib-esm/components/summary/summary.js CHANGED
@@ -7,39 +7,13 @@ import PropTypes from 'prop-types';
7
7
  import cx from 'classnames';
8
8
  import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
9
9
  import { METRICS_WEBPACK_GENERAL } from '../../constants';
10
+ import { Icon } from '../../ui/icon';
10
11
  import { Box } from '../../layout/box';
11
12
  import { FlexStack } from '../../layout/flex-stack';
12
13
  import { ComponentLink } from '../component-link';
13
14
  import { SummaryItem } from '../summary-item';
14
15
  import css from './summary.module.css';
15
-
16
- const CustomSummaryItem = _ref => {
17
- let {
18
- className,
19
- metricOptions,
20
- SummaryItemCustomLink,
21
- ...props
22
- } = _ref;
23
- return /*#__PURE__*/React.createElement(Box, _extends({
24
- padding: ['xsmall', 'small'],
25
- className: cx(className, css.summaryItemLink)
26
- }, props, {
27
- as: SummaryItemCustomLink
28
- }, metricOptions.link));
29
- };
30
-
31
- CustomSummaryItem.propTypes = {
32
- className: PropTypes.string,
33
- metricOptions: PropTypes.shape({
34
- link: PropTypes.any // eslint-disable-line react/forbid-prop-types
35
-
36
- }).isRequired,
37
- SummaryItemCustomLink: PropTypes.elementType.isRequired
38
- };
39
- CustomSummaryItem.defaultProps = {
40
- className: ''
41
- };
42
- export const Summary = _ref2 => {
16
+ export const Summary = _ref => {
43
17
  let {
44
18
  className,
45
19
  size,
@@ -48,30 +22,33 @@ export const Summary = _ref2 => {
48
22
  loading,
49
23
  showSummaryItemDelta,
50
24
  summaryItemLink: SummaryItemCustomLink
51
- } = _ref2;
25
+ } = _ref;
52
26
  return /*#__PURE__*/React.createElement(Box, {
53
27
  outline: true,
54
28
  className: cx(css.root, className)
55
29
  }, /*#__PURE__*/React.createElement(FlexStack, {
56
30
  className: css.items
57
- }, Array.from(METRIC_COMPONENT_LINKS).filter(_ref3 => {
58
- let [metricId] = _ref3;
31
+ }, Array.from(METRIC_COMPONENT_LINKS).filter(_ref2 => {
32
+ let [metricId] = _ref2;
59
33
  return keys.includes(metricId);
60
- }).map(_ref4 => {
61
- let [metricId, metricOptions] = _ref4;
62
- return /*#__PURE__*/React.createElement(SummaryItem, {
63
- as: CustomSummaryItem,
64
- className: css.item,
65
- metricOptions: metricOptions,
66
- SummaryItemCustomLink: SummaryItemCustomLink,
67
- size: size,
34
+ }).map(_ref3 => {
35
+ let [metricId, metricOptions] = _ref3;
36
+ return /*#__PURE__*/React.createElement("div", {
68
37
  key: metricId,
38
+ className: css.item
39
+ }, /*#__PURE__*/React.createElement(SummaryItem, {
40
+ size: size,
69
41
  id: metricId,
70
42
  data: _get(data, metricId),
71
43
  loading: loading,
72
44
  showMetricDescription: true,
73
45
  showDelta: showSummaryItemDelta && metricOptions.showDelta !== false
74
- });
46
+ }), !loading && /*#__PURE__*/React.createElement(SummaryItemCustomLink, _extends({}, metricOptions.link, {
47
+ className: css.readMore
48
+ }), /*#__PURE__*/React.createElement(Icon, {
49
+ className: css.readMoreIcon,
50
+ glyph: Icon.ICONS.ARROW_RIGHT_CIRLCE
51
+ })));
75
52
  })));
76
53
  };
77
54
  Summary.defaultProps = {
package/lib-esm/components/summary/summary.module.css CHANGED
@@ -3,35 +3,52 @@
3
3
  overflow: auto;
4
4
  }
5
5
 
6
- .items {}
7
-
8
6
  .item {
7
+ padding: var(--space-small) var(--space-xxlarge) var(--space-small) var(--space-small);
9
8
  flex: 1 0 25%; /* force equal sizes */
10
9
  position: relative;
11
10
  z-index: 1;
12
11
  }
13
12
 
14
- .item:focus-visible {
15
- background: var(--color-highlight);
16
- outline: none;
17
- }
18
-
19
13
  .item::before {
20
14
  content: '';
21
15
  display: block;
22
16
  width: 1px;
23
17
  position: absolute;
24
18
  left: -1px;
25
- top: var(--space-xsmall);
26
- bottom: var(--space-xsmall);
19
+ top: var(--space-small);
20
+ bottom: var(--space-small);
27
21
  background: var(--color-outline);
28
22
  }
29
23
 
30
- .item:hover {
31
- background: var(--color-highlight);
24
+ .readMore {
25
+ display: block;
26
+ position: absolute;
27
+ right: 0;
28
+ bottom: 0;
29
+ padding: var(--space-small);
30
+ color: var(--color-text-ultra-light);
31
+ transition: var(--transition-out);
32
+ }
33
+
34
+ .readMore:hover,
35
+ .readMore:focus {
36
+ color: var(--color-primary);
37
+ transition: var(--transition-in);
38
+ }
39
+
40
+ .readMoreIcon {
41
+ display: block;
42
+ }
43
+
44
+ /** hover state */
45
+ .readMore {
46
+ opacity: 0;
32
47
  }
33
48
 
34
- .summaryItemLink {
35
- color: inherit;
36
- text-decoration: none;
49
+ .item:hover .readMore,
50
+ .item:active .readMore,
51
+ .item:focus .readMore {
52
+ opacity: 1;
53
+ transition: var(--transition-in);
37
54
  }
package/lib-esm/components/summary-item/summary-item.js CHANGED
@@ -12,7 +12,7 @@ import { Metric } from '../metric';
12
12
  import { Delta } from '../delta';
13
13
  import css from './summary-item.module.css';
14
14
 
15
- const MetricInfo = _ref => {
15
+ const MetricInfoPopover = _ref => {
16
16
  let {
17
17
  description,
18
18
  url
@@ -32,11 +32,11 @@ const MetricInfo = _ref => {
32
32
  }, "Read more")));
33
33
  };
34
34
 
35
- MetricInfo.propTypes = {
35
+ MetricInfoPopover.propTypes = {
36
36
  description: PropTypes.string.isRequired,
37
37
  url: PropTypes.string
38
38
  };
39
- MetricInfo.defaultProps = {
39
+ MetricInfoPopover.defaultProps = {
40
40
  url: ''
41
41
  };
42
42
  export const SummaryItem = _ref2 => {
@@ -61,7 +61,7 @@ export const SummaryItem = _ref2 => {
61
61
  const metric = getGlobalMetricType(id);
62
62
  const runInfo = getMetricRunInfo(metric, current, baseline);
63
63
  const showMetricDescriptionTooltip = showMetricDescription && (metric == null ? void 0 : metric.description);
64
- const rootClassName = cx(css.root, className, css[size], showMetricDescription && css.showMetricDescription, showMetricDescriptionTooltip && css.showMetricDescription, showDelta && css.showDelta);
64
+ const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
65
65
  return /*#__PURE__*/React.createElement(Stack, _extends({
66
66
  space: "xxsmall",
67
67
  as: Component,
@@ -73,7 +73,7 @@ export const SummaryItem = _ref2 => {
73
73
  }, /*#__PURE__*/React.createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(Popover, {
74
74
  className: css.icon,
75
75
  icon: "help"
76
- }, /*#__PURE__*/React.createElement(MetricInfo, metric))), /*#__PURE__*/React.createElement(Stack, null, !loading ? /*#__PURE__*/React.createElement(Metric, {
76
+ }, /*#__PURE__*/React.createElement(MetricInfoPopover, metric))), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
77
77
  className: css.currentMetric,
78
78
  value: current,
79
79
  formatter: metric.formatter,
@@ -83,13 +83,13 @@ export const SummaryItem = _ref2 => {
83
83
  className: css.delta,
84
84
  displayValue: runInfo.displayDeltaPercentage,
85
85
  deltaType: runInfo.deltaType
86
- })) : /*#__PURE__*/React.createElement(Skeleton, {
87
- className: cx(css.currentMetric, css.loading)
88
- }), !loading ? /*#__PURE__*/React.createElement(Metric, {
86
+ })), /*#__PURE__*/React.createElement(Metric, {
89
87
  className: css.baselineMetric,
90
88
  value: baseline,
91
89
  formatter: metric.formatter
92
- }) : /*#__PURE__*/React.createElement(Skeleton, {
90
+ })) : /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Skeleton, {
91
+ className: cx(css.currentMetric, css.loading)
92
+ }), /*#__PURE__*/React.createElement(Skeleton, {
93
93
  className: cx(css.baselineMetric, css.loading)
94
94
  })));
95
95
  };
package/lib-esm/components/summary-item/summary-item.module.css CHANGED
@@ -1,5 +1,4 @@
1
1
  .title {
2
- margin: 0;
3
2
  color: var(--color-text-ultra-light);
4
3
  font-weight: bold;
5
4
  font-size: var(--size-xsmall);
@@ -31,20 +30,20 @@
31
30
  display: block;
32
31
  color: var(--color-heading);
33
32
  font-size: var(--size-large);
34
- line-height: 1.3;
33
+ line-height: var(--space-medium);
35
34
  white-space: nowrap;
36
35
  font-weight: bold;
37
36
  }
38
37
 
39
38
  .delta {
40
- margin: var(--space-xxxsmall) 0 0;
41
39
  font-size: var(--size-small);
40
+ line-height: var(--space-medium);
42
41
  }
43
42
 
44
43
  .baselineMetric {
45
44
  color: var(--color-text-light);
46
45
  font-size: var(--size-small);
47
- line-height: 1.3;
46
+ line-height: var(--space-small);
48
47
  }
49
48
 
50
49
  /* Loading state */
@@ -60,9 +59,4 @@
60
59
  .large .currentMetric {
61
60
  font-size: var(--size-xxxlarge);
62
61
  line-height: var(--space-medium);
63
- min-height: var(--space-medium);
64
- }
65
-
66
- .large .baselineMetric {
67
- font-size: var(--size-medium);
68
62
  }
package/lib-esm/components/summary-item/summary-item.stories.js CHANGED
@@ -1,20 +1,18 @@
1
1
  import React from 'react';
2
- import { storiesOf } from '@storybook/react';
3
- import { getWrapperDecorator } from '../../stories';
4
2
  import { SummaryItem } from './summary-item';
5
- const stories = storiesOf('Components/SummaryItem', module);
6
- stories.addDecorator(getWrapperDecorator({
7
- maxWidth: '320px'
8
- }));
9
- stories.add('default', () => /*#__PURE__*/React.createElement(SummaryItem, {
3
+ export default {
4
+ title: 'Components/SummaryItem',
5
+ component: SummaryItem
6
+ };
7
+ export const Standard = () => /*#__PURE__*/React.createElement(SummaryItem, {
10
8
  loading: false,
11
9
  id: "webpack.totalSizeByTypeALL",
12
10
  data: {
13
11
  current: 120 * 1000,
14
12
  baseline: 100 * 1000
15
13
  }
16
- }));
17
- stories.add('size large', () => /*#__PURE__*/React.createElement(SummaryItem, {
14
+ });
15
+ export const SizeLarge = () => /*#__PURE__*/React.createElement(SummaryItem, {
18
16
  size: "large",
19
17
  loading: false,
20
18
  id: "webpack.totalSizeByTypeALL",
@@ -22,8 +20,8 @@ stories.add('size large', () => /*#__PURE__*/React.createElement(SummaryItem, {
22
20
  current: 120 * 1000,
23
21
  baseline: 100 * 1000
24
22
  }
25
- }));
26
- stories.add('showMetricDescription', () => /*#__PURE__*/React.createElement(SummaryItem, {
23
+ });
24
+ export const ShowMetricDescription = () => /*#__PURE__*/React.createElement(SummaryItem, {
27
25
  loading: false,
28
26
  id: "webpack.totalSizeByTypeALL",
29
27
  data: {
@@ -31,8 +29,8 @@ stories.add('showMetricDescription', () => /*#__PURE__*/React.createElement(Summ
31
29
  baseline: 100 * 1000
32
30
  },
33
31
  showMetricDescription: true
34
- }));
35
- stories.add('showDelta false', () => /*#__PURE__*/React.createElement(SummaryItem, {
32
+ });
33
+ export const ShowDeltaFalse = () => /*#__PURE__*/React.createElement(SummaryItem, {
36
34
  loading: false,
37
35
  id: "webpack.totalSizeByTypeALL",
38
36
  data: {
@@ -40,8 +38,8 @@ stories.add('showDelta false', () => /*#__PURE__*/React.createElement(SummaryIte
40
38
  baseline: 0
41
39
  },
42
40
  showDelta: false
43
- }));
44
- stories.add('loading', () => /*#__PURE__*/React.createElement(SummaryItem, {
41
+ });
42
+ export const Loading = () => /*#__PURE__*/React.createElement(SummaryItem, {
45
43
  loading: true,
46
44
  id: "webpack.totalSizeByTypeALL"
47
- }));
45
+ });
package/lib-esm/css/variables.css CHANGED
@@ -27,20 +27,20 @@
27
27
 
28
28
  /*
29
29
  * Color scheme:
30
- * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23484a4d&mcgpalette4=%233385d6&themename=mcgtheme
30
+ * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23636568&mcgpalette4=%233385d6&themename=mcgtheme
31
31
  * https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
32
32
  */
33
33
  --color-gray-25: #fafafa;
34
- --color-gray-50: #e9e9ea;
35
- --color-gray-100: #c8c9ca;
36
- --color-gray-200: #a4a5a6;
37
- --color-gray-300: #7f8082;
38
- --color-gray-400: #636568;
39
- --color-gray-500: #484a4d;
40
- --color-gray-600: #414346;
41
- --color-gray-700: #383a3d;
42
- --color-gray-800: #303234;
43
- --color-gray-900: #212225;
34
+ --color-gray-50: #eceded;
35
+ --color-gray-100: #d0d1d2;
36
+ --color-gray-200: #b1b2b4;
37
+ --color-gray-300: #929395;
38
+ --color-gray-400: #7a7c7f;
39
+ --color-gray-500: #636568;
40
+ --color-gray-600: #5b5d60;
41
+ --color-gray-700: #515355;
42
+ --color-gray-800: #47494b;
43
+ --color-gray-900: #35373a;
44
44
 
45
45
  --color-gray-ultra-light: var(--color-gray-200);
46
46
  --color-gray-light: var(--color-gray-300);
@@ -181,6 +181,10 @@
181
181
  --layer-high: 1000;
182
182
  --layer-xhigh: 10000;
183
183
 
184
+ --radius-small: var(--space-xxxsmall);
185
+ --radius-medium: var(--space-xxsmall);
186
+ --radius-large: var(--space-small);
187
+
184
188
  /** Layout */
185
189
  --max-width: 80rem;
186
190
  }
package/lib-esm/ui/icon/icon.js CHANGED
@@ -6,6 +6,7 @@ import cx from 'classnames';
6
6
  import css from './icon.module.css';
7
7
  const ICONS = {
8
8
  ARROW: 'arrow',
9
+ ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
9
10
  CANCEL: 'cancel',
10
11
  CLOSE: 'close',
11
12
  CLOCK: 'clock',