@bundle-stats/ui 4.0.1 → 4.0.3

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 (19) hide show
  1. package/lib/components/metrics-table-title/metrics-table-title.js +1 -1
  2. package/lib/components/metrics-table-title/metrics-table-title.module.css +3 -3
  3. package/lib/components/total-size-type-title/total-size-type-title.js +6 -3
  4. package/lib/components/total-size-type-title/total-size-type-title.module.css +9 -1
  5. package/lib/i18n.js +2 -2
  6. package/lib/ui/hover-card/hover-card.js +6 -1
  7. package/lib-esm/components/metrics-table-title/metrics-table-title.js +1 -1
  8. package/lib-esm/components/metrics-table-title/metrics-table-title.module.css +3 -3
  9. package/lib-esm/components/total-size-type-title/total-size-type-title.js +6 -3
  10. package/lib-esm/components/total-size-type-title/total-size-type-title.module.css +9 -1
  11. package/lib-esm/i18n.js +2 -2
  12. package/lib-esm/ui/hover-card/hover-card.js +6 -1
  13. package/package.json +5 -5
  14. package/src/components/metrics-table-title/metrics-table-title.jsx +1 -1
  15. package/src/components/metrics-table-title/metrics-table-title.module.css +3 -3
  16. package/src/components/total-size-type-title/total-size-type-title.jsx +3 -3
  17. package/src/components/total-size-type-title/total-size-type-title.module.css +9 -1
  18. package/src/i18n.js +2 -2
  19. package/src/ui/hover-card/hover-card.jsx +10 -2
package/lib/components/metrics-table-title/metrics-table-title.js CHANGED
@@ -41,7 +41,7 @@ var MetricsTableTitle = function MetricsTableTitle(props) {
41
41
  label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
42
42
  glyph: "help"
43
43
  }),
44
- className: _metricsTableTitleModule["default"].hoverCard
44
+ anchorClassName: _metricsTableTitleModule["default"].anchor
45
45
  }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
46
46
  space: "xxxsmall"
47
47
  }, popoverInfo && /*#__PURE__*/_react["default"].createElement("p", null, popoverInfo), popoverHref && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("button", {
package/lib/components/metrics-table-title/metrics-table-title.module.css CHANGED
@@ -2,14 +2,14 @@
2
2
  }
3
3
 
4
4
  .title {
5
- color: var(--color-text-light);
6
5
  align-items: center;
6
+ color: var(--color-text-light);
7
7
  font-weight: bold;
8
8
  text-transform: uppercase;
9
9
  }
10
10
 
11
- .hoverCard {
12
- line-height: 1;
11
+ .anchor {
12
+ display: block;
13
13
  }
14
14
 
15
15
  .info {
package/lib/components/total-size-type-title/total-size-type-title.js CHANGED
@@ -31,11 +31,14 @@ var TotalSizeTypeTitle = function TotalSizeTypeTitle(_ref) {
31
31
  var className = _ref.className;
32
32
  return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
33
33
  space: "xxxsmall",
34
- className: (0, _classnames["default"])(_totalSizeTypeTitleModule["default"].title, className)
35
- }, /*#__PURE__*/_react["default"].createElement("span", null, _i18n["default"].ASSET_TOTALS), /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
34
+ className: (0, _classnames["default"])(_totalSizeTypeTitleModule["default"].root, className)
35
+ }, /*#__PURE__*/_react["default"].createElement("span", {
36
+ className: _totalSizeTypeTitleModule["default"].text
37
+ }, _i18n["default"].ASSET_TOTALS), /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
36
38
  label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
37
39
  glyph: "help"
38
- })
40
+ }),
41
+ anchorClassName: _totalSizeTypeTitleModule["default"].anchor
39
42
  }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
40
43
  space: "xxxsmall"
41
44
  }, /*#__PURE__*/_react["default"].createElement("p", null, _i18n["default"].ASSET_TOTALS_INFO), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("button", {
package/lib/components/total-size-type-title/total-size-type-title.module.css CHANGED
@@ -1,11 +1,19 @@
1
- .title {
1
+ .root {
2
2
  color: var(--color-text-light);
3
+ align-items: center;
4
+ }
5
+
6
+ .text {
3
7
  font-weight: bold;
4
8
  font-size: var(--size-medium);
5
9
  line-height: var(--space-medium);
6
10
  text-transform: uppercase;
7
11
  }
8
12
 
13
+ .anchor {
14
+ display: block;
15
+ }
16
+
9
17
  .readMoreLink {
10
18
  appearance: none;
11
19
  background: none;
package/lib/i18n.js CHANGED
@@ -16,8 +16,8 @@ var _default = {
16
16
  READ_MORE: 'Read more',
17
17
  ASSETS_INFO: 'Asset size - the size of the file produced by webpack',
18
18
  ASSET_TOTALS_INFO: 'The total size of the assets produced by webpack by type',
19
- MODULES_INFO: 'Module size - module file size before any transformation(ex: babel, typescript) or before any production optimization(ex: terser minification)',
20
- PACKAGES_INFO: "Package size - the total package's module size before any transformation(ex: babel, typescript) or before any production optimization(ex: terser minification)",
19
+ MODULES_INFO: 'Module size - module source size before any production optimization(ex: terser minification)',
20
+ PACKAGES_INFO: "Package size - the total package's module size before any production optimization(ex: terser minification)",
21
21
  RESET_FILTERS: 'Reset filters',
22
22
  VIEW_ALL: 'View all entries'
23
23
  };
package/lib/ui/hover-card/hover-card.js CHANGED
@@ -39,6 +39,7 @@ var resolveComponent = function resolveComponent(as, href) {
39
39
 
40
40
  var HoverCard = function HoverCard(props) {
41
41
  var className = props.className,
42
+ anchorClassName = props.anchorClassName,
42
43
  hoverCardClassName = props.hoverCardClassName,
43
44
  href = props.href,
44
45
  as = props.as,
@@ -63,7 +64,7 @@ var HoverCard = function HoverCard(props) {
63
64
  }, /*#__PURE__*/_react["default"].createElement(_hovercard.HovercardAnchor, {
64
65
  state: state,
65
66
  href: href,
66
- className: _hoverCardModule["default"].anchor,
67
+ className: (0, _classnames["default"])(_hoverCardModule["default"].anchor, anchorClassName),
67
68
  as: Component
68
69
  }, label), /*#__PURE__*/_react["default"].createElement(_hovercard.Hovercard, _extends({}, hoverCardProps, {
69
70
  state: state,
@@ -87,6 +88,9 @@ HoverCard.propTypes = {
87
88
  /** Adopted child class name for hover card */
88
89
  hoverCardClassName: _propTypes["default"].string,
89
90
 
91
+ /** Adopted child class name for anchor */
92
+ anchorClassName: _propTypes["default"].string,
93
+
90
94
  /** Anchor label */
91
95
  label: _propTypes["default"].node,
92
96
 
@@ -102,6 +106,7 @@ HoverCard.propTypes = {
102
106
  HoverCard.defaultProps = {
103
107
  className: '',
104
108
  hoverCardClassName: '',
109
+ anchorClassName: '',
105
110
  label: '',
106
111
  as: '',
107
112
  href: ''
package/lib-esm/components/metrics-table-title/metrics-table-title.js CHANGED
@@ -25,7 +25,7 @@ export const MetricsTableTitle = props => {
25
25
  label: /*#__PURE__*/React.createElement(Icon, {
26
26
  glyph: "help"
27
27
  }),
28
- className: css.hoverCard
28
+ anchorClassName: css.anchor
29
29
  }, /*#__PURE__*/React.createElement(Stack, {
30
30
  space: "xxxsmall"
31
31
  }, popoverInfo && /*#__PURE__*/React.createElement("p", null, popoverInfo), popoverHref && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("button", {
package/lib-esm/components/metrics-table-title/metrics-table-title.module.css CHANGED
@@ -2,14 +2,14 @@
2
2
  }
3
3
 
4
4
  .title {
5
- color: var(--color-text-light);
6
5
  align-items: center;
6
+ color: var(--color-text-light);
7
7
  font-weight: bold;
8
8
  text-transform: uppercase;
9
9
  }
10
10
 
11
- .hoverCard {
12
- line-height: 1;
11
+ .anchor {
12
+ display: block;
13
13
  }
14
14
 
15
15
  .info {
package/lib-esm/components/total-size-type-title/total-size-type-title.js CHANGED
@@ -14,11 +14,14 @@ export const TotalSizeTypeTitle = _ref => {
14
14
  } = _ref;
15
15
  return /*#__PURE__*/React.createElement(FlexStack, {
16
16
  space: "xxxsmall",
17
- className: cx(css.title, className)
18
- }, /*#__PURE__*/React.createElement("span", null, I18N.ASSET_TOTALS), /*#__PURE__*/React.createElement(HoverCard, {
17
+ className: cx(css.root, className)
18
+ }, /*#__PURE__*/React.createElement("span", {
19
+ className: css.text
20
+ }, I18N.ASSET_TOTALS), /*#__PURE__*/React.createElement(HoverCard, {
19
21
  label: /*#__PURE__*/React.createElement(Icon, {
20
22
  glyph: "help"
21
- })
23
+ }),
24
+ anchorClassName: css.anchor
22
25
  }, /*#__PURE__*/React.createElement(Stack, {
23
26
  space: "xxxsmall"
24
27
  }, /*#__PURE__*/React.createElement("p", null, I18N.ASSET_TOTALS_INFO), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("button", {
package/lib-esm/components/total-size-type-title/total-size-type-title.module.css CHANGED
@@ -1,11 +1,19 @@
1
- .title {
1
+ .root {
2
2
  color: var(--color-text-light);
3
+ align-items: center;
4
+ }
5
+
6
+ .text {
3
7
  font-weight: bold;
4
8
  font-size: var(--size-medium);
5
9
  line-height: var(--space-medium);
6
10
  text-transform: uppercase;
7
11
  }
8
12
 
13
+ .anchor {
14
+ display: block;
15
+ }
16
+
9
17
  .readMoreLink {
10
18
  appearance: none;
11
19
  background: none;
package/lib-esm/i18n.js CHANGED
@@ -10,8 +10,8 @@ export default {
10
10
  READ_MORE: 'Read more',
11
11
  ASSETS_INFO: 'Asset size - the size of the file produced by webpack',
12
12
  ASSET_TOTALS_INFO: 'The total size of the assets produced by webpack by type',
13
- MODULES_INFO: 'Module size - module file size before any transformation(ex: babel, typescript) or before any production optimization(ex: terser minification)',
14
- PACKAGES_INFO: "Package size - the total package's module size before any transformation(ex: babel, typescript) or before any production optimization(ex: terser minification)",
13
+ MODULES_INFO: 'Module size - module source size before any production optimization(ex: terser minification)',
14
+ PACKAGES_INFO: "Package size - the total package's module size before any production optimization(ex: terser minification)",
15
15
  RESET_FILTERS: 'Reset filters',
16
16
  VIEW_ALL: 'View all entries'
17
17
  };
package/lib-esm/ui/hover-card/hover-card.js CHANGED
@@ -21,6 +21,7 @@ const resolveComponent = (as, href) => {
21
21
  export const HoverCard = props => {
22
22
  const {
23
23
  className,
24
+ anchorClassName,
24
25
  hoverCardClassName,
25
26
  href,
26
27
  as,
@@ -46,7 +47,7 @@ export const HoverCard = props => {
46
47
  }, /*#__PURE__*/React.createElement(HovercardAnchor, {
47
48
  state: state,
48
49
  href: href,
49
- className: css.anchor,
50
+ className: cx(css.anchor, anchorClassName),
50
51
  as: Component
51
52
  }, label), /*#__PURE__*/React.createElement(Hovercard, _extends({}, hoverCardProps, {
52
53
  state: state,
@@ -68,6 +69,9 @@ HoverCard.propTypes = {
68
69
  /** Adopted child class name for hover card */
69
70
  hoverCardClassName: PropTypes.string,
70
71
 
72
+ /** Adopted child class name for anchor */
73
+ anchorClassName: PropTypes.string,
74
+
71
75
  /** Anchor label */
72
76
  label: PropTypes.node,
73
77
 
@@ -83,6 +87,7 @@ HoverCard.propTypes = {
83
87
  HoverCard.defaultProps = {
84
88
  className: '',
85
89
  hoverCardClassName: '',
90
+ anchorClassName: '',
86
91
  label: '',
87
92
  as: '',
88
93
  href: ''
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bundle-stats/ui",
3
- "version": "4.0.1",
3
+ "version": "4.0.3",
4
4
  "description": "UI components for BundleStats projects.",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",
@@ -54,10 +54,10 @@
54
54
  "babel-jest": "28.1.3",
55
55
  "babel-plugin-lodash": "3.3.4",
56
56
  "babel-plugin-require-context-hook": "1.0.0",
57
- "chromatic": "6.7.0",
57
+ "chromatic": "6.7.1",
58
58
  "classnames": "2.3.1",
59
59
  "colormap": "2.3.2",
60
- "core-js": "3.23.5",
60
+ "core-js": "3.24.0",
61
61
  "cross-env": "7.0.3",
62
62
  "enzyme": "3.11.0",
63
63
  "enzyme-adapter-react-16": "1.15.6",
@@ -85,12 +85,12 @@
85
85
  "react-router-dom": "^5.0.0"
86
86
  },
87
87
  "dependencies": {
88
- "@bundle-stats/utils": "^4.0.1",
88
+ "@bundle-stats/utils": "^4.0.3",
89
89
  "ariakit": "^2.0.0-next.33",
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": "^1.2.3"
94
94
  },
95
- "gitHead": "5ede78df9ce756cd413cc143ce038ec96b305158"
95
+ "gitHead": "6129f97b9277d81fb45839ab14425a240afc002d"
96
96
  }
package/src/components/metrics-table-title/metrics-table-title.jsx CHANGED
@@ -18,7 +18,7 @@ export const MetricsTableTitle = (props) => {
18
18
  <FlexStack space="xxxsmall" className={css.title}>
19
19
  <span>{title}</span>
20
20
  {(popoverInfo || popoverHref) && (
21
- <HoverCard label={<Icon glyph="help" />} className={css.hoverCard}>
21
+ <HoverCard label={<Icon glyph="help" />} anchorClassName={css.anchor}>
22
22
  <Stack space="xxxsmall">
23
23
  {popoverInfo && <p>{popoverInfo}</p>}
24
24
  {popoverHref && (
package/src/components/metrics-table-title/metrics-table-title.module.css CHANGED
@@ -2,14 +2,14 @@
2
2
  }
3
3
 
4
4
  .title {
5
- color: var(--color-text-light);
6
5
  align-items: center;
6
+ color: var(--color-text-light);
7
7
  font-weight: bold;
8
8
  text-transform: uppercase;
9
9
  }
10
10
 
11
- .hoverCard {
12
- line-height: 1;
11
+ .anchor {
12
+ display: block;
13
13
  }
14
14
 
15
15
  .info {
package/src/components/total-size-type-title/total-size-type-title.jsx CHANGED
@@ -11,9 +11,9 @@ import { HoverCard } from '../../ui/hover-card';
11
11
  import css from './total-size-type-title.module.css';
12
12
 
13
13
  export const TotalSizeTypeTitle = ({ className }) => (
14
- <FlexStack space="xxxsmall" className={cx(css.title, className)}>
15
- <span>{I18N.ASSET_TOTALS}</span>
16
- <HoverCard label={<Icon glyph="help" />}>
14
+ <FlexStack space="xxxsmall" className={cx(css.root, className)}>
15
+ <span className={css.text}>{I18N.ASSET_TOTALS}</span>
16
+ <HoverCard label={<Icon glyph="help" />} anchorClassName={css.anchor}>
17
17
  <Stack space="xxxsmall">
18
18
  <p>{I18N.ASSET_TOTALS_INFO}</p>
19
19
  <p>
package/src/components/total-size-type-title/total-size-type-title.module.css CHANGED
@@ -1,11 +1,19 @@
1
- .title {
1
+ .root {
2
2
  color: var(--color-text-light);
3
+ align-items: center;
4
+ }
5
+
6
+ .text {
3
7
  font-weight: bold;
4
8
  font-size: var(--size-medium);
5
9
  line-height: var(--space-medium);
6
10
  text-transform: uppercase;
7
11
  }
8
12
 
13
+ .anchor {
14
+ display: block;
15
+ }
16
+
9
17
  .readMoreLink {
10
18
  appearance: none;
11
19
  background: none;
package/src/i18n.js CHANGED
@@ -15,9 +15,9 @@ export default {
15
15
  ASSETS_INFO: 'Asset size - the size of the file produced by webpack',
16
16
  ASSET_TOTALS_INFO: 'The total size of the assets produced by webpack by type',
17
17
  MODULES_INFO:
18
- 'Module size - module file size before any transformation(ex: babel, typescript) or before any production optimization(ex: terser minification)',
18
+ 'Module size - module source size before any production optimization(ex: terser minification)',
19
19
  PACKAGES_INFO:
20
- "Package size - the total package's module size before any transformation(ex: babel, typescript) or before any production optimization(ex: terser minification)",
20
+ "Package size - the total package's module size before any production optimization(ex: terser minification)",
21
21
 
22
22
  RESET_FILTERS: 'Reset filters',
23
23
  VIEW_ALL: 'View all entries',
package/src/ui/hover-card/hover-card.jsx CHANGED
@@ -24,7 +24,7 @@ const resolveComponent = (as, href) => {
24
24
  };
25
25
 
26
26
  export const HoverCard = (props) => {
27
- const { className, hoverCardClassName, href, as, label, children } = props;
27
+ const { className, anchorClassName, hoverCardClassName, href, as, label, children } = props;
28
28
  const state = useHovercardState({ gutter: 8 });
29
29
  const hoverCardProps = useHovercard({ state, portal: true });
30
30
 
@@ -37,7 +37,12 @@ export const HoverCard = (props) => {
37
37
 
38
38
  return (
39
39
  <div className={cx(css.root, className)}>
40
- <HovercardAnchor state={state} href={href} className={css.anchor} as={Component}>
40
+ <HovercardAnchor
41
+ state={state}
42
+ href={href}
43
+ className={cx(css.anchor, anchorClassName)}
44
+ as={Component}
45
+ >
41
46
  {label}
42
47
  </HovercardAnchor>
43
48
  <Hovercard
@@ -59,6 +64,8 @@ HoverCard.propTypes = {
59
64
  className: PropTypes.string,
60
65
  /** Adopted child class name for hover card */
61
66
  hoverCardClassName: PropTypes.string,
67
+ /** Adopted child class name for anchor */
68
+ anchorClassName: PropTypes.string,
62
69
  /** Anchor label */
63
70
  label: PropTypes.node,
64
71
  /** Anchor href */
@@ -72,6 +79,7 @@ HoverCard.propTypes = {
72
79
  HoverCard.defaultProps = {
73
80
  className: '',
74
81
  hoverCardClassName: '',
82
+ anchorClassName: '',
75
83
  label: '',
76
84
  as: '',
77
85
  href: '',