@instructure/ui-metric 11.7.3-snapshot-7 → 11.7.3-snapshot-26

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 (21) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/Metric/v1/index.js +29 -32
  3. package/es/Metric/v1/styles.js +3 -1
  4. package/es/Metric/v1/theme.js +13 -12
  5. package/es/Metric/v2/index.js +13 -13
  6. package/es/Metric/v2/styles.js +3 -1
  7. package/es/MetricGroup/v1/index.js +16 -18
  8. package/es/MetricGroup/v1/theme.js +4 -2
  9. package/es/MetricGroup/v2/index.js +5 -6
  10. package/es/MetricGroup/v2/theme.js +4 -2
  11. package/lib/Metric/v1/index.js +29 -32
  12. package/lib/Metric/v1/styles.js +3 -1
  13. package/lib/Metric/v1/theme.js +13 -12
  14. package/lib/Metric/v2/index.js +13 -13
  15. package/lib/Metric/v2/styles.js +3 -1
  16. package/lib/MetricGroup/v1/index.js +16 -18
  17. package/lib/MetricGroup/v1/theme.js +4 -2
  18. package/lib/MetricGroup/v2/index.js +6 -6
  19. package/lib/MetricGroup/v2/theme.js +4 -2
  20. package/package.json +10 -10
  21. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
6
+ ## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-metric
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
9
12
 
10
13
 
11
14
 
package/es/Metric/v1/index.js CHANGED
@@ -1,6 +1,4 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- const _excluded = ["textAlign", "renderLabel", "renderValue", "isGroupChild"];
3
- var _dec, _class, _Metric;
1
+ var _dec, _class;
4
2
  /*
5
3
  * The MIT License (MIT)
6
4
  *
@@ -37,50 +35,49 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
37
35
  category: components
38
36
  ---
39
37
  **/
40
- let Metric = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Metric = class Metric extends Component {
41
- constructor(...args) {
42
- super(...args);
43
- this.ref = null;
44
- this.handleRef = el => {
45
- this.ref = el;
46
- };
47
- }
38
+ let Metric = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Metric extends Component {
39
+ static displayName = "Metric";
40
+ static componentId = 'Metric';
41
+ static allowedProps = allowedProps;
42
+ static defaultProps = {
43
+ textAlign: 'center',
44
+ isGroupChild: false
45
+ };
46
+ ref = null;
47
+ handleRef = el => {
48
+ this.ref = el;
49
+ };
48
50
  componentDidMount() {
49
- var _this$props$makeStyle, _this$props;
50
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
51
+ this.props.makeStyles?.();
51
52
  }
52
53
  componentDidUpdate() {
53
- var _this$props$makeStyle2, _this$props2;
54
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
54
+ this.props.makeStyles?.();
55
55
  }
56
56
  render() {
57
- var _this$props$styles, _this$props$styles2, _this$props$styles3;
58
- const _this$props3 = this.props,
59
- textAlign = _this$props3.textAlign,
60
- renderLabel = _this$props3.renderLabel,
61
- renderValue = _this$props3.renderValue,
62
- isGroupChild = _this$props3.isGroupChild,
63
- rest = _objectWithoutProperties(_this$props3, _excluded);
57
+ const {
58
+ textAlign,
59
+ renderLabel,
60
+ renderValue,
61
+ isGroupChild,
62
+ ...rest
63
+ } = this.props;
64
64
  return _jsxs("div", {
65
65
  ...passthroughProps(rest),
66
- role: isGroupChild ? 'row' : void 0,
67
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.metric,
66
+ role: isGroupChild ? 'row' : undefined,
67
+ css: this.props.styles?.metric,
68
68
  ref: this.handleRef,
69
69
  "data-cid": "Metric",
70
70
  children: [_jsx("div", {
71
- role: isGroupChild ? 'rowheader' : void 0,
72
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label,
71
+ role: isGroupChild ? 'rowheader' : undefined,
72
+ css: this.props.styles?.label,
73
73
  children: callRenderProp(renderLabel)
74
74
  }), _jsx("div", {
75
- role: isGroupChild ? 'gridcell' : void 0,
76
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.value,
75
+ role: isGroupChild ? 'gridcell' : undefined,
76
+ css: this.props.styles?.value,
77
77
  children: callRenderProp(renderValue)
78
78
  })]
79
79
  });
80
80
  }
81
- }, _Metric.displayName = "Metric", _Metric.componentId = 'Metric', _Metric.allowedProps = allowedProps, _Metric.defaultProps = {
82
- textAlign: 'center',
83
- isGroupChild: false
84
- }, _Metric)) || _class);
81
+ }) || _class);
85
82
  export default Metric;
86
83
  export { Metric };
package/es/Metric/v1/styles.js CHANGED
@@ -32,7 +32,9 @@
32
32
  * @return {Object} The final style object, which will be used in the component
33
33
  */
34
34
  const generateStyle = (componentTheme, props) => {
35
- const textAlign = props.textAlign;
35
+ const {
36
+ textAlign
37
+ } = props;
36
38
  return {
37
39
  metric: {
38
40
  label: 'metric',
package/es/Metric/v1/theme.js CHANGED
@@ -28,11 +28,12 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2;
32
- const colors = theme.colors,
33
- spacing = theme.spacing,
34
- typography = theme.typography,
35
- themeName = theme.key;
31
+ const {
32
+ colors,
33
+ spacing,
34
+ typography,
35
+ key: themeName
36
+ } = theme;
36
37
  const themeSpecificStyle = {
37
38
  canvas: {
38
39
  valueColor: theme['ic-brand-font-color-dark'],
@@ -40,13 +41,13 @@ const generateComponentTheme = theme => {
40
41
  }
41
42
  };
42
43
  const componentVariables = {
43
- padding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall}`,
44
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
45
- valueColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
46
- valueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXLarge,
47
- valueFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
48
- labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
49
- labelFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall
44
+ padding: `0 ${spacing?.xSmall}`,
45
+ fontFamily: typography?.fontFamily,
46
+ valueColor: colors?.contrasts?.grey125125,
47
+ valueFontSize: typography?.fontSizeXLarge,
48
+ valueFontWeight: typography?.fontWeightBold,
49
+ labelColor: colors?.contrasts?.grey125125,
50
+ labelFontSize: typography?.fontSizeXSmall
50
51
  };
51
52
  return {
52
53
  ...componentVariables,
package/es/Metric/v2/index.js CHANGED
@@ -33,13 +33,13 @@ category: components
33
33
  ---
34
34
  **/
35
35
  const Metric = /*#__PURE__*/forwardRef((props, ref) => {
36
- const _props$textAlign = props.textAlign,
37
- textAlign = _props$textAlign === void 0 ? 'center' : _props$textAlign,
38
- renderLabel = props.renderLabel,
39
- renderValue = props.renderValue,
40
- _props$isGroupChild = props.isGroupChild,
41
- isGroupChild = _props$isGroupChild === void 0 ? false : _props$isGroupChild,
42
- themeOverride = props.themeOverride;
36
+ const {
37
+ textAlign = 'center',
38
+ renderLabel,
39
+ renderValue,
40
+ isGroupChild = false,
41
+ themeOverride
42
+ } = props;
43
43
  const styles = useStyle({
44
44
  generateStyle,
45
45
  themeOverride,
@@ -51,17 +51,17 @@ const Metric = /*#__PURE__*/forwardRef((props, ref) => {
51
51
  });
52
52
  return _jsxs("div", {
53
53
  ...passthroughProps(props),
54
- role: isGroupChild ? 'row' : void 0,
55
- css: styles === null || styles === void 0 ? void 0 : styles.metric,
54
+ role: isGroupChild ? 'row' : undefined,
55
+ css: styles?.metric,
56
56
  ref: ref,
57
57
  "data-cid": "Metric",
58
58
  children: [_jsx("div", {
59
- role: isGroupChild ? 'rowheader' : void 0,
60
- css: styles === null || styles === void 0 ? void 0 : styles.label,
59
+ role: isGroupChild ? 'rowheader' : undefined,
60
+ css: styles?.label,
61
61
  children: callRenderProp(renderLabel)
62
62
  }), _jsx("div", {
63
- role: isGroupChild ? 'gridcell' : void 0,
64
- css: styles === null || styles === void 0 ? void 0 : styles.value,
63
+ role: isGroupChild ? 'gridcell' : undefined,
64
+ css: styles?.value,
65
65
  children: callRenderProp(renderValue)
66
66
  })]
67
67
  });
package/es/Metric/v2/styles.js CHANGED
@@ -32,7 +32,9 @@
32
32
  * @return {Object} The final style object, which will be used in the component
33
33
  */
34
34
  const generateStyle = (componentTheme, params) => {
35
- const textAlign = params.textAlign;
35
+ const {
36
+ textAlign
37
+ } = params;
36
38
  return {
37
39
  metric: {
38
40
  label: 'metric',
package/es/MetricGroup/v1/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _MetricGroup;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -35,21 +35,22 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
35
35
  category: components
36
36
  ---
37
37
  **/
38
- let MetricGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_MetricGroup = class MetricGroup extends Component {
39
- constructor(...args) {
40
- super(...args);
41
- this.ref = null;
42
- this.handleRef = el => {
43
- this.ref = el;
44
- };
45
- }
38
+ let MetricGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class MetricGroup extends Component {
39
+ static displayName = "MetricGroup";
40
+ static componentId = 'MetricGroup';
41
+ static allowedProps = allowedProps;
42
+ static defaultProps = {
43
+ children: null
44
+ };
45
+ ref = null;
46
+ handleRef = el => {
47
+ this.ref = el;
48
+ };
46
49
  componentDidMount() {
47
- var _this$props$makeStyle, _this$props;
48
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
50
+ this.props.makeStyles?.();
49
51
  }
50
52
  componentDidUpdate() {
51
- var _this$props$makeStyle2, _this$props2;
52
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
53
+ this.props.makeStyles?.();
53
54
  }
54
55
  renderChildren() {
55
56
  return Children.map(this.props.children, child => {
@@ -59,10 +60,9 @@ let MetricGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
59
60
  });
60
61
  }
61
62
  render() {
62
- var _this$props$styles;
63
63
  return _jsx("div", {
64
64
  ...passthroughProps(this.props),
65
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.metricGroup,
65
+ css: this.props.styles?.metricGroup,
66
66
  role: "grid",
67
67
  "aria-readonly": "true",
68
68
  ref: this.handleRef,
@@ -70,8 +70,6 @@ let MetricGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
70
70
  children: this.renderChildren()
71
71
  });
72
72
  }
73
- }, _MetricGroup.displayName = "MetricGroup", _MetricGroup.componentId = 'MetricGroup', _MetricGroup.allowedProps = allowedProps, _MetricGroup.defaultProps = {
74
- children: null
75
- }, _MetricGroup)) || _class);
73
+ }) || _class);
76
74
  export default MetricGroup;
77
75
  export { MetricGroup };
package/es/MetricGroup/v1/theme.js CHANGED
@@ -28,9 +28,11 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- const typography = theme.typography;
31
+ const {
32
+ typography
33
+ } = theme;
32
34
  const componentVariables = {
33
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed
35
+ lineHeight: typography?.lineHeightCondensed
34
36
  };
35
37
  return {
36
38
  ...componentVariables
package/es/MetricGroup/v2/index.js CHANGED
@@ -1,5 +1,3 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- const _excluded = ["children"];
3
1
  /*
4
2
  * The MIT License (MIT)
5
3
  *
@@ -34,9 +32,10 @@ category: components
34
32
  ---
35
33
  **/
36
34
  const MetricGroup = /*#__PURE__*/forwardRef((props, ref) => {
37
- const _props$children = props.children,
38
- children = _props$children === void 0 ? null : _props$children,
39
- rest = _objectWithoutProperties(props, _excluded);
35
+ const {
36
+ children = null,
37
+ ...rest
38
+ } = props;
40
39
  const styles = generateStyle();
41
40
  const renderChildren = () => {
42
41
  return Children.map(children, child => {
@@ -47,7 +46,7 @@ const MetricGroup = /*#__PURE__*/forwardRef((props, ref) => {
47
46
  };
48
47
  return _jsx("div", {
49
48
  ...passthroughProps(rest),
50
- css: styles === null || styles === void 0 ? void 0 : styles.metricGroup,
49
+ css: styles?.metricGroup,
51
50
  role: "grid",
52
51
  "aria-readonly": "true",
53
52
  ref: ref,
package/es/MetricGroup/v2/theme.js CHANGED
@@ -28,9 +28,11 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- const typography = theme.typography;
31
+ const {
32
+ typography
33
+ } = theme;
32
34
  const componentVariables = {
33
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed
35
+ lineHeight: typography?.lineHeightCondensed
34
36
  };
35
37
  return {
36
38
  ...componentVariables
package/lib/Metric/v1/index.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.Metric = void 0;
8
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
9
8
  var _react = require("react");
10
9
  var _emotion = require("@instructure/emotion");
11
10
  var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
@@ -14,8 +13,7 @@ var _styles = _interopRequireDefault(require("./styles"));
14
13
  var _theme = _interopRequireDefault(require("./theme"));
15
14
  var _props = require("./props");
16
15
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
17
- const _excluded = ["textAlign", "renderLabel", "renderValue", "isGroupChild"];
18
- var _dec, _class, _Metric;
16
+ var _dec, _class;
19
17
  /*
20
18
  * The MIT License (MIT)
21
19
  *
@@ -44,49 +42,48 @@ var _dec, _class, _Metric;
44
42
  category: components
45
43
  ---
46
44
  **/
47
- let Metric = exports.Metric = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_Metric = class Metric extends _react.Component {
48
- constructor(...args) {
49
- super(...args);
50
- this.ref = null;
51
- this.handleRef = el => {
52
- this.ref = el;
53
- };
54
- }
45
+ let Metric = exports.Metric = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class Metric extends _react.Component {
46
+ static displayName = "Metric";
47
+ static componentId = 'Metric';
48
+ static allowedProps = _props.allowedProps;
49
+ static defaultProps = {
50
+ textAlign: 'center',
51
+ isGroupChild: false
52
+ };
53
+ ref = null;
54
+ handleRef = el => {
55
+ this.ref = el;
56
+ };
55
57
  componentDidMount() {
56
- var _this$props$makeStyle, _this$props;
57
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
58
+ this.props.makeStyles?.();
58
59
  }
59
60
  componentDidUpdate() {
60
- var _this$props$makeStyle2, _this$props2;
61
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
61
+ this.props.makeStyles?.();
62
62
  }
63
63
  render() {
64
- var _this$props$styles, _this$props$styles2, _this$props$styles3;
65
- const _this$props3 = this.props,
66
- textAlign = _this$props3.textAlign,
67
- renderLabel = _this$props3.renderLabel,
68
- renderValue = _this$props3.renderValue,
69
- isGroupChild = _this$props3.isGroupChild,
70
- rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
64
+ const {
65
+ textAlign,
66
+ renderLabel,
67
+ renderValue,
68
+ isGroupChild,
69
+ ...rest
70
+ } = this.props;
71
71
  return (0, _jsxRuntime.jsxs)("div", {
72
72
  ...(0, _passthroughProps.passthroughProps)(rest),
73
- role: isGroupChild ? 'row' : void 0,
74
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.metric,
73
+ role: isGroupChild ? 'row' : undefined,
74
+ css: this.props.styles?.metric,
75
75
  ref: this.handleRef,
76
76
  "data-cid": "Metric",
77
77
  children: [(0, _jsxRuntime.jsx)("div", {
78
- role: isGroupChild ? 'rowheader' : void 0,
79
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label,
78
+ role: isGroupChild ? 'rowheader' : undefined,
79
+ css: this.props.styles?.label,
80
80
  children: (0, _callRenderProp.callRenderProp)(renderLabel)
81
81
  }), (0, _jsxRuntime.jsx)("div", {
82
- role: isGroupChild ? 'gridcell' : void 0,
83
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.value,
82
+ role: isGroupChild ? 'gridcell' : undefined,
83
+ css: this.props.styles?.value,
84
84
  children: (0, _callRenderProp.callRenderProp)(renderValue)
85
85
  })]
86
86
  });
87
87
  }
88
- }, _Metric.displayName = "Metric", _Metric.componentId = 'Metric', _Metric.allowedProps = _props.allowedProps, _Metric.defaultProps = {
89
- textAlign: 'center',
90
- isGroupChild: false
91
- }, _Metric)) || _class);
88
+ }) || _class);
92
89
  var _default = exports.default = Metric;
package/lib/Metric/v1/styles.js CHANGED
@@ -38,7 +38,9 @@ exports.default = void 0;
38
38
  * @return {Object} The final style object, which will be used in the component
39
39
  */
40
40
  const generateStyle = (componentTheme, props) => {
41
- const textAlign = props.textAlign;
41
+ const {
42
+ textAlign
43
+ } = props;
42
44
  return {
43
45
  metric: {
44
46
  label: 'metric',
package/lib/Metric/v1/theme.js CHANGED
@@ -34,11 +34,12 @@ exports.default = void 0;
34
34
  * @return {Object} The final theme object with the overrides and component variables
35
35
  */
36
36
  const generateComponentTheme = theme => {
37
- var _colors$contrasts, _colors$contrasts2;
38
- const colors = theme.colors,
39
- spacing = theme.spacing,
40
- typography = theme.typography,
41
- themeName = theme.key;
37
+ const {
38
+ colors,
39
+ spacing,
40
+ typography,
41
+ key: themeName
42
+ } = theme;
42
43
  const themeSpecificStyle = {
43
44
  canvas: {
44
45
  valueColor: theme['ic-brand-font-color-dark'],
@@ -46,13 +47,13 @@ const generateComponentTheme = theme => {
46
47
  }
47
48
  };
48
49
  const componentVariables = {
49
- padding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall}`,
50
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
51
- valueColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
52
- valueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXLarge,
53
- valueFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
54
- labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
55
- labelFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall
50
+ padding: `0 ${spacing?.xSmall}`,
51
+ fontFamily: typography?.fontFamily,
52
+ valueColor: colors?.contrasts?.grey125125,
53
+ valueFontSize: typography?.fontSizeXLarge,
54
+ valueFontWeight: typography?.fontWeightBold,
55
+ labelColor: colors?.contrasts?.grey125125,
56
+ labelFontSize: typography?.fontSizeXSmall
56
57
  };
57
58
  return {
58
59
  ...componentVariables,
package/lib/Metric/v2/index.js CHANGED
@@ -41,13 +41,13 @@ category: components
41
41
  ---
42
42
  **/
43
43
  const Metric = exports.Metric = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
44
- const _props$textAlign = props.textAlign,
45
- textAlign = _props$textAlign === void 0 ? 'center' : _props$textAlign,
46
- renderLabel = props.renderLabel,
47
- renderValue = props.renderValue,
48
- _props$isGroupChild = props.isGroupChild,
49
- isGroupChild = _props$isGroupChild === void 0 ? false : _props$isGroupChild,
50
- themeOverride = props.themeOverride;
44
+ const {
45
+ textAlign = 'center',
46
+ renderLabel,
47
+ renderValue,
48
+ isGroupChild = false,
49
+ themeOverride
50
+ } = props;
51
51
  const styles = (0, _emotion.useStyle)({
52
52
  generateStyle: _styles.default,
53
53
  themeOverride,
@@ -59,17 +59,17 @@ const Metric = exports.Metric = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
59
59
  });
60
60
  return (0, _jsxRuntime.jsxs)("div", {
61
61
  ...(0, _passthroughProps.passthroughProps)(props),
62
- role: isGroupChild ? 'row' : void 0,
63
- css: styles === null || styles === void 0 ? void 0 : styles.metric,
62
+ role: isGroupChild ? 'row' : undefined,
63
+ css: styles?.metric,
64
64
  ref: ref,
65
65
  "data-cid": "Metric",
66
66
  children: [(0, _jsxRuntime.jsx)("div", {
67
- role: isGroupChild ? 'rowheader' : void 0,
68
- css: styles === null || styles === void 0 ? void 0 : styles.label,
67
+ role: isGroupChild ? 'rowheader' : undefined,
68
+ css: styles?.label,
69
69
  children: (0, _callRenderProp.callRenderProp)(renderLabel)
70
70
  }), (0, _jsxRuntime.jsx)("div", {
71
- role: isGroupChild ? 'gridcell' : void 0,
72
- css: styles === null || styles === void 0 ? void 0 : styles.value,
71
+ role: isGroupChild ? 'gridcell' : undefined,
72
+ css: styles?.value,
73
73
  children: (0, _callRenderProp.callRenderProp)(renderValue)
74
74
  })]
75
75
  });
package/lib/Metric/v2/styles.js CHANGED
@@ -38,7 +38,9 @@ exports.default = void 0;
38
38
  * @return {Object} The final style object, which will be used in the component
39
39
  */
40
40
  const generateStyle = (componentTheme, params) => {
41
- const textAlign = params.textAlign;
41
+ const {
42
+ textAlign
43
+ } = params;
42
44
  return {
43
45
  metric: {
44
46
  label: 'metric',
package/lib/MetricGroup/v1/index.js CHANGED
@@ -13,7 +13,7 @@ var _styles = _interopRequireDefault(require("./styles"));
13
13
  var _theme = _interopRequireDefault(require("./theme"));
14
14
  var _props = require("./props");
15
15
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
16
- var _dec, _class, _MetricGroup;
16
+ var _dec, _class;
17
17
  /*
18
18
  * The MIT License (MIT)
19
19
  *
@@ -42,21 +42,22 @@ var _dec, _class, _MetricGroup;
42
42
  category: components
43
43
  ---
44
44
  **/
45
- let MetricGroup = exports.MetricGroup = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_MetricGroup = class MetricGroup extends _react.Component {
46
- constructor(...args) {
47
- super(...args);
48
- this.ref = null;
49
- this.handleRef = el => {
50
- this.ref = el;
51
- };
52
- }
45
+ let MetricGroup = exports.MetricGroup = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class MetricGroup extends _react.Component {
46
+ static displayName = "MetricGroup";
47
+ static componentId = 'MetricGroup';
48
+ static allowedProps = _props.allowedProps;
49
+ static defaultProps = {
50
+ children: null
51
+ };
52
+ ref = null;
53
+ handleRef = el => {
54
+ this.ref = el;
55
+ };
53
56
  componentDidMount() {
54
- var _this$props$makeStyle, _this$props;
55
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
57
+ this.props.makeStyles?.();
56
58
  }
57
59
  componentDidUpdate() {
58
- var _this$props$makeStyle2, _this$props2;
59
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
60
+ this.props.makeStyles?.();
60
61
  }
61
62
  renderChildren() {
62
63
  return _react.Children.map(this.props.children, child => {
@@ -66,10 +67,9 @@ let MetricGroup = exports.MetricGroup = (_dec = (0, _emotion.withStyleLegacy)(_s
66
67
  });
67
68
  }
68
69
  render() {
69
- var _this$props$styles;
70
70
  return (0, _jsxRuntime.jsx)("div", {
71
71
  ...(0, _passthroughProps.passthroughProps)(this.props),
72
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.metricGroup,
72
+ css: this.props.styles?.metricGroup,
73
73
  role: "grid",
74
74
  "aria-readonly": "true",
75
75
  ref: this.handleRef,
@@ -77,7 +77,5 @@ let MetricGroup = exports.MetricGroup = (_dec = (0, _emotion.withStyleLegacy)(_s
77
77
  children: this.renderChildren()
78
78
  });
79
79
  }
80
- }, _MetricGroup.displayName = "MetricGroup", _MetricGroup.componentId = 'MetricGroup', _MetricGroup.allowedProps = _props.allowedProps, _MetricGroup.defaultProps = {
81
- children: null
82
- }, _MetricGroup)) || _class);
80
+ }) || _class);
83
81
  var _default = exports.default = MetricGroup;
package/lib/MetricGroup/v1/theme.js CHANGED
@@ -34,9 +34,11 @@ exports.default = void 0;
34
34
  * @return {Object} The final theme object with the overrides and component variables
35
35
  */
36
36
  const generateComponentTheme = theme => {
37
- const typography = theme.typography;
37
+ const {
38
+ typography
39
+ } = theme;
38
40
  const componentVariables = {
39
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed
41
+ lineHeight: typography?.lineHeightCondensed
40
42
  };
41
43
  return {
42
44
  ...componentVariables