@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.
- package/CHANGELOG.md +18 -0
- package/lib/app/app.stories.js +8 -1
- package/lib/assets/icons/arrow-right-circle.svg +1 -0
- package/lib/assets/icons/close.svg +1 -1
- package/lib/assets/icons.svg +42 -1
- package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js +39 -43
- package/lib/components/summary/summary.js +29 -56
- package/lib/components/summary/summary.module.css +31 -14
- package/lib/components/summary-item/summary-item.js +9 -9
- package/lib/components/summary-item/summary-item.module.css +3 -9
- package/lib/components/summary-item/summary-item.stories.js +35 -18
- package/lib/css/variables.css +15 -11
- package/lib/ui/icon/icon.js +1 -0
- package/lib/ui/icon/icon.stories.js +40 -22
- package/lib/ui/popover/popover.js +2 -2
- package/lib/ui/popover/popover.module.css +2 -1
- package/lib/ui/tooltip/tooltip.module.css +1 -0
- package/lib-esm/app/app.stories.js +8 -1
- package/lib-esm/assets/icons/arrow-right-circle.svg +1 -0
- package/lib-esm/assets/icons/close.svg +1 -1
- package/lib-esm/assets/icons.svg +42 -1
- package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js +28 -21
- package/lib-esm/components/summary/summary.js +17 -40
- package/lib-esm/components/summary/summary.module.css +31 -14
- package/lib-esm/components/summary-item/summary-item.js +9 -9
- package/lib-esm/components/summary-item/summary-item.module.css +3 -9
- package/lib-esm/components/summary-item/summary-item.stories.js +14 -16
- package/lib-esm/css/variables.css +15 -11
- package/lib-esm/ui/icon/icon.js +1 -0
- package/lib-esm/ui/icon/icon.stories.js +22 -11
- package/lib-esm/ui/popover/popover.js +2 -2
- package/lib-esm/ui/popover/popover.module.css +2 -1
- package/lib-esm/ui/tooltip/tooltip.module.css +1 -0
- package/package.json +15 -15
- package/src/assets/icons/arrow-right-circle.svg +1 -0
- package/src/assets/icons/close.svg +1 -1
- package/src/assets/icons.svg +42 -1
- package/src/components/summary/summary.jsx +20 -39
- package/src/components/summary/summary.module.css +31 -14
- package/src/components/summary-item/summary-item.jsx +13 -22
- package/src/components/summary-item/summary-item.module.css +3 -9
- package/src/css/variables.css +15 -11
- package/src/ui/icon/icon.jsx +1 -0
- package/src/ui/popover/popover.jsx +3 -3
- package/src/ui/popover/popover.module.css +2 -1
- package/src/ui/tooltip/tooltip.module.css +1 -0
|
@@ -1,21 +1,32 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { storiesOf } from '@storybook/react';
|
|
3
|
-
import { getWrapperDecorator } from '../../stories';
|
|
4
2
|
import { Icon } from '.';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
export default {
|
|
4
|
+
title: 'UI/Icon',
|
|
5
|
+
component: Icon
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
const Template = args => /*#__PURE__*/React.createElement(Icon, args);
|
|
9
|
+
|
|
10
|
+
export const Standard = Template.bind();
|
|
11
|
+
Standard.args = {
|
|
8
12
|
glyph: Icon.ICONS.ARROW
|
|
9
|
-
}
|
|
10
|
-
|
|
13
|
+
};
|
|
14
|
+
export const CustomSize = Template.bind();
|
|
15
|
+
CustomSize.args = {
|
|
11
16
|
glyph: Icon.ICONS.ARROW,
|
|
12
17
|
size: Icon.SIZE_LARGE
|
|
13
|
-
}
|
|
14
|
-
|
|
18
|
+
};
|
|
19
|
+
export const All = () => /*#__PURE__*/React.createElement(React.Fragment, null, Object.values(Icon.ICONS).map(glyph => /*#__PURE__*/React.createElement("div", {
|
|
15
20
|
style: {
|
|
16
|
-
|
|
21
|
+
display: 'inline-block',
|
|
22
|
+
padding: '1rem',
|
|
23
|
+
textAlign: 'center'
|
|
17
24
|
}
|
|
18
25
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
19
26
|
glyph: glyph,
|
|
20
27
|
key: glyph
|
|
21
|
-
})
|
|
28
|
+
}), /*#__PURE__*/React.createElement("code", {
|
|
29
|
+
style: {
|
|
30
|
+
display: 'block'
|
|
31
|
+
}
|
|
32
|
+
}, glyph))));
|
|
@@ -16,7 +16,7 @@ export const Popover = _ref => {
|
|
|
16
16
|
} = _ref;
|
|
17
17
|
const popover = usePopoverState({
|
|
18
18
|
baseId: process.env.NODE_ENV === 'test' && 'id-test',
|
|
19
|
-
gutter:
|
|
19
|
+
gutter: 12,
|
|
20
20
|
modal: true,
|
|
21
21
|
placement: 'top'
|
|
22
22
|
});
|
|
@@ -45,7 +45,7 @@ export const Popover = _ref => {
|
|
|
45
45
|
}), /*#__PURE__*/React.createElement(UIPopoverArrow, _extends({
|
|
46
46
|
className: css.arrow
|
|
47
47
|
}, popover, {
|
|
48
|
-
size:
|
|
48
|
+
size: 16
|
|
49
49
|
})), typeof children === 'function' ? children({
|
|
50
50
|
popoverToggle: popover.toggle
|
|
51
51
|
}) : children, /*#__PURE__*/React.createElement(Icon, {
|
|
@@ -23,7 +23,8 @@
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.popover {
|
|
26
|
-
padding: var(--space-
|
|
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bundle-stats/ui",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.2-beta.0",
|
|
4
4
|
"description": "UI components for BundleStats projects.",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-esm/index.js",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"build-esm": "babel -D src -d lib-esm --ignore **/__tests__/**/* --ignore /prototypes/**",
|
|
13
13
|
"build-storybook": "npx build-storybook -c ./build/storybook",
|
|
14
14
|
"generate-chart-colors": "node scripts/generate-chart-colors.js",
|
|
15
|
-
"generate-svg-sprite": "npx svg-sprite -s --si src/assets/icons/*.svg && mv symbol/svg/sprite.symbol.svg src/assets/icons.svg",
|
|
15
|
+
"generate-svg-sprite": "npx svg-sprite -s --si --no-svg-namespace-classnames src/assets/icons/*.svg && mv symbol/svg/sprite.symbol.svg src/assets/icons.svg",
|
|
16
16
|
"lint": "../../node_modules/.bin/eslint . --ext .jsx,.js",
|
|
17
17
|
"start": "cross-env NODE_ENV=development start-storybook -c ./build/storybook -p 8080",
|
|
18
18
|
"test": "npm run test:unit && npm run test:storyshots",
|
|
@@ -42,31 +42,31 @@
|
|
|
42
42
|
"@babel/preset-env": "7.16.4",
|
|
43
43
|
"@babel/preset-react": "7.16.0",
|
|
44
44
|
"@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
|
|
45
|
-
"@storybook/addon-knobs": "6.
|
|
45
|
+
"@storybook/addon-knobs": "6.4.0",
|
|
46
46
|
"@storybook/addon-postcss": "2.0.0",
|
|
47
|
-
"@storybook/addon-storyshots": "6.
|
|
48
|
-
"@storybook/addons": "6.
|
|
49
|
-
"@storybook/builder-webpack5": "6.
|
|
50
|
-
"@storybook/manager-webpack5": "6.
|
|
51
|
-
"@storybook/react": "6.
|
|
47
|
+
"@storybook/addon-storyshots": "6.4.8",
|
|
48
|
+
"@storybook/addons": "6.4.8",
|
|
49
|
+
"@storybook/builder-webpack5": "6.4.8",
|
|
50
|
+
"@storybook/manager-webpack5": "6.4.8",
|
|
51
|
+
"@storybook/react": "6.4.8",
|
|
52
52
|
"babel-core": "7.0.0-bridge.0",
|
|
53
|
-
"babel-jest": "27.
|
|
53
|
+
"babel-jest": "27.4.2",
|
|
54
54
|
"babel-plugin-lodash": "3.3.4",
|
|
55
55
|
"babel-plugin-require-context-hook": "1.0.0",
|
|
56
|
-
"chromatic": "6.0
|
|
56
|
+
"chromatic": "6.2.0",
|
|
57
57
|
"classnames": "2.3.1",
|
|
58
58
|
"colormap": "2.3.2",
|
|
59
|
-
"core-js": "3.19.
|
|
59
|
+
"core-js": "3.19.3",
|
|
60
60
|
"cross-env": "7.0.3",
|
|
61
61
|
"enzyme": "3.11.0",
|
|
62
62
|
"enzyme-adapter-react-16": "1.15.6",
|
|
63
63
|
"enzyme-to-json": "3.6.2",
|
|
64
64
|
"hex-rgb": "5.0.0",
|
|
65
65
|
"identity-obj-proxy": "3.0.0",
|
|
66
|
-
"jest": "27.3
|
|
66
|
+
"jest": "27.4.3",
|
|
67
67
|
"jest-date-mock": "1.0.8",
|
|
68
68
|
"lodash": "4.17.21",
|
|
69
|
-
"postcss": "8.
|
|
69
|
+
"postcss": "8.4.4",
|
|
70
70
|
"prop-types": "15.7.2",
|
|
71
71
|
"react": "16.14.0",
|
|
72
72
|
"react-dom": "16.14.0",
|
|
@@ -84,11 +84,11 @@
|
|
|
84
84
|
"react-router-dom": "^5.3.0"
|
|
85
85
|
},
|
|
86
86
|
"dependencies": {
|
|
87
|
-
"@bundle-stats/utils": "^3.2.
|
|
87
|
+
"@bundle-stats/utils": "^3.2.2-beta.0",
|
|
88
88
|
"date-fns": "^2.6.0",
|
|
89
89
|
"query-string": "^7.0.0",
|
|
90
90
|
"reakit": "^1.3.6",
|
|
91
91
|
"use-query-params": "^1.2.2"
|
|
92
92
|
},
|
|
93
|
-
"gitHead": "
|
|
93
|
+
"gitHead": "61d21a218bc57b65ee9c0f1c43c6525e7b40f485"
|
|
94
94
|
}
|
|
@@ -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>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="
|
|
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/src/assets/icons.svg
CHANGED
|
@@ -1 +1,42 @@
|
|
|
1
|
-
<svg width="16" height="16"
|
|
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>
|
|
@@ -5,34 +5,13 @@ import { get } from 'lodash';
|
|
|
5
5
|
import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
|
|
6
6
|
|
|
7
7
|
import { METRICS_WEBPACK_GENERAL } from '../../constants';
|
|
8
|
+
import { Icon } from '../../ui/icon';
|
|
8
9
|
import { Box } from '../../layout/box';
|
|
9
10
|
import { FlexStack } from '../../layout/flex-stack';
|
|
10
11
|
import { ComponentLink } from '../component-link';
|
|
11
12
|
import { SummaryItem } from '../summary-item';
|
|
12
13
|
import css from './summary.module.css';
|
|
13
14
|
|
|
14
|
-
const CustomSummaryItem = ({ className, metricOptions, SummaryItemCustomLink, ...props }) => (
|
|
15
|
-
<Box
|
|
16
|
-
padding={['xsmall', 'small']}
|
|
17
|
-
className={cx(className, css.summaryItemLink)}
|
|
18
|
-
{...props}
|
|
19
|
-
as={SummaryItemCustomLink}
|
|
20
|
-
{...metricOptions.link}
|
|
21
|
-
/>
|
|
22
|
-
);
|
|
23
|
-
|
|
24
|
-
CustomSummaryItem.propTypes = {
|
|
25
|
-
className: PropTypes.string,
|
|
26
|
-
metricOptions: PropTypes.shape({
|
|
27
|
-
link: PropTypes.any, // eslint-disable-line react/forbid-prop-types
|
|
28
|
-
}).isRequired,
|
|
29
|
-
SummaryItemCustomLink: PropTypes.elementType.isRequired,
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
CustomSummaryItem.defaultProps = {
|
|
33
|
-
className: '',
|
|
34
|
-
};
|
|
35
|
-
|
|
36
15
|
export const Summary = ({
|
|
37
16
|
className,
|
|
38
17
|
size,
|
|
@@ -44,23 +23,25 @@ export const Summary = ({
|
|
|
44
23
|
}) => (
|
|
45
24
|
<Box outline className={cx(css.root, className)}>
|
|
46
25
|
<FlexStack className={css.items}>
|
|
47
|
-
{Array.from(METRIC_COMPONENT_LINKS)
|
|
48
|
-
([metricId
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
26
|
+
{Array.from(METRIC_COMPONENT_LINKS)
|
|
27
|
+
.filter(([metricId]) => keys.includes(metricId))
|
|
28
|
+
.map(([metricId, metricOptions]) => (
|
|
29
|
+
<div key={metricId} className={css.item}>
|
|
30
|
+
<SummaryItem
|
|
31
|
+
size={size}
|
|
32
|
+
id={metricId}
|
|
33
|
+
data={get(data, metricId)}
|
|
34
|
+
loading={loading}
|
|
35
|
+
showMetricDescription
|
|
36
|
+
showDelta={showSummaryItemDelta && metricOptions.showDelta !== false}
|
|
37
|
+
/>
|
|
38
|
+
{!loading && (
|
|
39
|
+
<SummaryItemCustomLink {...metricOptions.link} className={css.readMore}>
|
|
40
|
+
<Icon className={css.readMoreIcon} glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} />
|
|
41
|
+
</SummaryItemCustomLink>
|
|
42
|
+
)}
|
|
43
|
+
</div>
|
|
44
|
+
))}
|
|
64
45
|
</FlexStack>
|
|
65
46
|
</Box>
|
|
66
47
|
);
|
|
@@ -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-
|
|
26
|
-
bottom: var(--space-
|
|
19
|
+
top: var(--space-small);
|
|
20
|
+
bottom: var(--space-small);
|
|
27
21
|
background: var(--color-outline);
|
|
28
22
|
}
|
|
29
23
|
|
|
30
|
-
.
|
|
31
|
-
|
|
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
|
-
.
|
|
35
|
-
|
|
36
|
-
|
|
49
|
+
.item:hover .readMore,
|
|
50
|
+
.item:active .readMore,
|
|
51
|
+
.item:focus .readMore {
|
|
52
|
+
opacity: 1;
|
|
53
|
+
transition: var(--transition-in);
|
|
37
54
|
}
|
|
@@ -11,7 +11,7 @@ import { Metric } from '../metric';
|
|
|
11
11
|
import { Delta } from '../delta';
|
|
12
12
|
import css from './summary-item.module.css';
|
|
13
13
|
|
|
14
|
-
const
|
|
14
|
+
const MetricInfoPopover = ({ description, url }) => {
|
|
15
15
|
// Workaround cases where the parent is a link
|
|
16
16
|
const readMoreOnClick = () => {
|
|
17
17
|
window.open(url);
|
|
@@ -31,12 +31,12 @@ const MetricInfo = ({ description, url }) => {
|
|
|
31
31
|
);
|
|
32
32
|
};
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
MetricInfoPopover.propTypes = {
|
|
35
35
|
description: PropTypes.string.isRequired,
|
|
36
36
|
url: PropTypes.string,
|
|
37
37
|
};
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
MetricInfoPopover.defaultProps = {
|
|
40
40
|
url: '',
|
|
41
41
|
};
|
|
42
42
|
|
|
@@ -57,14 +57,7 @@ export const SummaryItem = ({
|
|
|
57
57
|
const runInfo = getMetricRunInfo(metric, current, baseline);
|
|
58
58
|
const showMetricDescriptionTooltip = showMetricDescription && metric?.description;
|
|
59
59
|
|
|
60
|
-
const rootClassName = cx(
|
|
61
|
-
css.root,
|
|
62
|
-
className,
|
|
63
|
-
css[size],
|
|
64
|
-
showMetricDescription && css.showMetricDescription,
|
|
65
|
-
showMetricDescriptionTooltip && css.showMetricDescription,
|
|
66
|
-
showDelta && css.showDelta,
|
|
67
|
-
);
|
|
60
|
+
const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
|
|
68
61
|
|
|
69
62
|
return (
|
|
70
63
|
<Stack space="xxsmall" as={Component} className={rootClassName} {...props}>
|
|
@@ -73,13 +66,13 @@ export const SummaryItem = ({
|
|
|
73
66
|
|
|
74
67
|
{showMetricDescriptionTooltip && (
|
|
75
68
|
<Popover className={css.icon} icon="help">
|
|
76
|
-
<
|
|
69
|
+
<MetricInfoPopover {...metric} />
|
|
77
70
|
</Popover>
|
|
78
71
|
)}
|
|
79
72
|
</FlexStack>
|
|
80
73
|
|
|
81
|
-
|
|
82
|
-
|
|
74
|
+
{!loading ? (
|
|
75
|
+
<Stack>
|
|
83
76
|
<Metric
|
|
84
77
|
className={css.currentMetric}
|
|
85
78
|
value={current}
|
|
@@ -95,16 +88,14 @@ export const SummaryItem = ({
|
|
|
95
88
|
/>
|
|
96
89
|
)}
|
|
97
90
|
</Metric>
|
|
98
|
-
) : (
|
|
99
|
-
<Skeleton className={cx(css.currentMetric, css.loading)} />
|
|
100
|
-
)}
|
|
101
|
-
|
|
102
|
-
{!loading ? (
|
|
103
91
|
<Metric className={css.baselineMetric} value={baseline} formatter={metric.formatter} />
|
|
104
|
-
|
|
92
|
+
</Stack>
|
|
93
|
+
) : (
|
|
94
|
+
<Stack>
|
|
95
|
+
<Skeleton className={cx(css.currentMetric, css.loading)} />
|
|
105
96
|
<Skeleton className={cx(css.baselineMetric, css.loading)} />
|
|
106
|
-
|
|
107
|
-
|
|
97
|
+
</Stack>
|
|
98
|
+
)}
|
|
108
99
|
</Stack>
|
|
109
100
|
);
|
|
110
101
|
};
|
|
@@ -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:
|
|
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:
|
|
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/src/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=%
|
|
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: #
|
|
35
|
-
--color-gray-100: #
|
|
36
|
-
--color-gray-200: #
|
|
37
|
-
--color-gray-300: #
|
|
38
|
-
--color-gray-400: #
|
|
39
|
-
--color-gray-500: #
|
|
40
|
-
--color-gray-600: #
|
|
41
|
-
--color-gray-700: #
|
|
42
|
-
--color-gray-800: #
|
|
43
|
-
--color-gray-900: #
|
|
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/src/ui/icon/icon.jsx
CHANGED
|
@@ -14,7 +14,7 @@ import css from './popover.module.css';
|
|
|
14
14
|
export const Popover = ({ className, icon, label, ariaLabel, children }) => {
|
|
15
15
|
const popover = usePopoverState({
|
|
16
16
|
baseId: process.env.NODE_ENV === 'test' && 'id-test',
|
|
17
|
-
gutter:
|
|
17
|
+
gutter: 12,
|
|
18
18
|
modal: true,
|
|
19
19
|
placement: 'top',
|
|
20
20
|
});
|
|
@@ -32,7 +32,7 @@ export const Popover = ({ className, icon, label, ariaLabel, children }) => {
|
|
|
32
32
|
event.preventDefault();
|
|
33
33
|
popover.toggle();
|
|
34
34
|
},
|
|
35
|
-
[popover]
|
|
35
|
+
[popover],
|
|
36
36
|
);
|
|
37
37
|
|
|
38
38
|
return (
|
|
@@ -47,7 +47,7 @@ export const Popover = ({ className, icon, label, ariaLabel, children }) => {
|
|
|
47
47
|
{label && <span className={css.label}>{label}</span>}
|
|
48
48
|
</UIPopoverDisclosure>
|
|
49
49
|
<UIPopover className={css.popover} {...popover} tabIndex={0}>
|
|
50
|
-
<UIPopoverArrow className={css.arrow} {...popover} size={
|
|
50
|
+
<UIPopoverArrow className={css.arrow} {...popover} size={16} />
|
|
51
51
|
|
|
52
52
|
{typeof children === 'function' ? children({ popoverToggle: popover.toggle }) : children}
|
|
53
53
|
|
|
@@ -23,7 +23,8 @@
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.popover {
|
|
26
|
-
padding: var(--space-
|
|
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));
|