@instructure/ui-progress 10.16.1-snapshot-0 → 10.16.1

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 (29) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/es/ProgressBar/__examples__/ProgressBar.examples.js +4 -2
  3. package/es/ProgressBar/__new-tests__/ProgressBar.test.js +10 -10
  4. package/es/ProgressBar/index.js +27 -21
  5. package/es/ProgressCircle/__examples__/ProgressCircle.examples.js +4 -2
  6. package/es/ProgressCircle/__new-tests__/ProgressCircle.test.js +6 -6
  7. package/es/ProgressCircle/index.js +44 -37
  8. package/lib/ProgressBar/__examples__/ProgressBar.examples.js +4 -3
  9. package/lib/ProgressBar/__new-tests__/ProgressBar.test.js +11 -12
  10. package/lib/ProgressBar/index.js +26 -20
  11. package/lib/ProgressCircle/__examples__/ProgressCircle.examples.js +4 -3
  12. package/lib/ProgressCircle/__new-tests__/ProgressCircle.test.js +7 -8
  13. package/lib/ProgressCircle/index.js +43 -36
  14. package/package.json +13 -13
  15. package/src/ProgressBar/__examples__/ProgressBar.examples.tsx +0 -2
  16. package/src/ProgressBar/__new-tests__/ProgressBar.test.tsx +7 -4
  17. package/src/ProgressBar/index.tsx +1 -2
  18. package/src/ProgressCircle/__examples__/ProgressCircle.examples.tsx +0 -2
  19. package/src/ProgressCircle/__new-tests__/ProgressCircle.test.tsx +1 -2
  20. package/src/ProgressCircle/index.tsx +1 -2
  21. package/tsconfig.build.tsbuildinfo +1 -1
  22. package/types/ProgressBar/__examples__/ProgressBar.examples.d.ts.map +1 -1
  23. package/types/ProgressBar/__new-tests__/ProgressBar.test.d.ts.map +1 -1
  24. package/types/ProgressBar/index.d.ts +1 -3
  25. package/types/ProgressBar/index.d.ts.map +1 -1
  26. package/types/ProgressCircle/__examples__/ProgressCircle.examples.d.ts.map +1 -1
  27. package/types/ProgressCircle/__new-tests__/ProgressCircle.test.d.ts.map +1 -1
  28. package/types/ProgressCircle/index.d.ts +1 -3
  29. package/types/ProgressCircle/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
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
- ## [10.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
6
+ ## [10.16.1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1) (2025-04-22)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-progress
9
9
 
package/es/ProgressBar/__examples__/ProgressBar.examples.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
1
2
  /*
2
3
  * The MIT License (MIT)
3
4
  *
@@ -22,7 +23,6 @@
22
23
  * SOFTWARE.
23
24
  */
24
25
 
25
- import React from 'react';
26
26
  const valueMax = 100;
27
27
  export default {
28
28
  sectionProp: 'color',
@@ -32,7 +32,9 @@ export default {
32
32
  renderValue: [null, ({
33
33
  valueNow,
34
34
  valueMax
35
- }) => /*#__PURE__*/React.createElement("span", null, Math.round(valueNow / valueMax * 100))]
35
+ }) => _jsx("span", {
36
+ children: Math.round(valueNow / valueMax * 100)
37
+ })]
36
38
  },
37
39
  getComponentProps: () => {
38
40
  return {
package/es/ProgressBar/__new-tests__/ProgressBar.test.js CHANGED
@@ -23,14 +23,14 @@ var _ProgressBar, _ProgressBar2, _ProgressBar3;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- import React from 'react';
27
26
  import { render } from '@testing-library/react';
28
27
  import '@testing-library/jest-dom';
29
28
  import { runAxeCheck } from '@instructure/ui-axe-check';
30
29
  import { ProgressBar } from '../index';
30
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
31
31
  describe('<ProgressBar />', () => {
32
32
  it('should render', async () => {
33
- const _render = render(_ProgressBar || (_ProgressBar = /*#__PURE__*/React.createElement(ProgressBar, {
33
+ const _render = render(_ProgressBar || (_ProgressBar = _jsx(ProgressBar, {
34
34
  screenReaderLabel: "Chapters read",
35
35
  valueMax: 60,
36
36
  valueNow: 30
@@ -40,7 +40,7 @@ describe('<ProgressBar />', () => {
40
40
  expect(progress).toBeInTheDocument();
41
41
  });
42
42
  it('should render a progress element with correct aria attributes', async () => {
43
- const _render2 = render(_ProgressBar2 || (_ProgressBar2 = /*#__PURE__*/React.createElement(ProgressBar, {
43
+ const _render2 = render(_ProgressBar2 || (_ProgressBar2 = _jsx(ProgressBar, {
44
44
  screenReaderLabel: "Chapters read",
45
45
  valueMax: 60,
46
46
  valueNow: 30
@@ -52,7 +52,7 @@ describe('<ProgressBar />', () => {
52
52
  it('should format the displayed text', async () => {
53
53
  const current = 30;
54
54
  const max = 60;
55
- const _render3 = render(/*#__PURE__*/React.createElement(ProgressBar, {
55
+ const _render3 = render(_jsx(ProgressBar, {
56
56
  screenReaderLabel: "Chapters read",
57
57
  valueMax: max,
58
58
  valueNow: current,
@@ -62,11 +62,11 @@ describe('<ProgressBar />', () => {
62
62
  }) => `${valueNow} of ${valueMax}`
63
63
  })),
64
64
  container = _render3.container;
65
- const progress = container.querySelector('[class$="-progressBar"]');
65
+ const progress = container.querySelector('[class*="-progressBar"]');
66
66
  expect(progress).toHaveTextContent(`${current} of ${max}`);
67
67
  });
68
68
  it('should meet a11y standards', async () => {
69
- const _render4 = render(_ProgressBar3 || (_ProgressBar3 = /*#__PURE__*/React.createElement(ProgressBar, {
69
+ const _render4 = render(_ProgressBar3 || (_ProgressBar3 = _jsx(ProgressBar, {
70
70
  screenReaderLabel: "Chapters read",
71
71
  valueMax: 60,
72
72
  valueNow: 30
@@ -77,7 +77,7 @@ describe('<ProgressBar />', () => {
77
77
  });
78
78
  it('should not render the value inside when the prop is set to false', () => {
79
79
  const valueNow = 33;
80
- const _render5 = render(/*#__PURE__*/React.createElement(ProgressBar, {
80
+ const _render5 = render(_jsx(ProgressBar, {
81
81
  screenReaderLabel: "Chapters read",
82
82
  valueMax: 100,
83
83
  valueNow: valueNow,
@@ -85,12 +85,12 @@ describe('<ProgressBar />', () => {
85
85
  renderValue: `${valueNow}%`
86
86
  })),
87
87
  container = _render5.container;
88
- const progressMeter = container.querySelector('[class$="-progressBar__trackValue"]');
88
+ const progressMeter = container.querySelector('[class*="-progressBar__trackValue"]');
89
89
  expect(progressMeter).not.toHaveTextContent('33%');
90
90
  });
91
91
  it('should render the value inside when the prop is set', () => {
92
92
  const valueNow = 33;
93
- const _render6 = render(/*#__PURE__*/React.createElement(ProgressBar, {
93
+ const _render6 = render(_jsx(ProgressBar, {
94
94
  screenReaderLabel: "Chapters read",
95
95
  valueMax: 100,
96
96
  valueNow: valueNow,
@@ -98,7 +98,7 @@ describe('<ProgressBar />', () => {
98
98
  renderValue: `${valueNow}%`
99
99
  })),
100
100
  container = _render6.container;
101
- const progressMeter = container.querySelector('[class$="-progressBar__trackValue"]');
101
+ const progressMeter = container.querySelector('[class*="-progressBar__trackValue"]');
102
102
  expect(progressMeter).toHaveTextContent('33%');
103
103
  });
104
104
  });
package/es/ProgressBar/index.js CHANGED
@@ -25,12 +25,11 @@ var _dec, _dec2, _class, _ProgressBar;
25
25
  * SOFTWARE.
26
26
  */
27
27
 
28
- /** @jsx jsx */
29
28
  import { Component } from 'react';
30
29
  import { View } from '@instructure/ui-view';
31
30
  import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils';
32
31
  import { testable } from '@instructure/ui-testable';
33
- import { withStyle, jsx } from '@instructure/emotion';
32
+ import { withStyle } from '@instructure/emotion';
34
33
  import generateStyle from './styles';
35
34
  import generateComponentTheme from './theme';
36
35
  import { allowedProps, propTypes } from './props';
@@ -40,6 +39,7 @@ import { allowedProps, propTypes } from './props';
40
39
  category: components
41
40
  ---
42
41
  **/
42
+ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
43
43
  let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_ProgressBar = class ProgressBar extends Component {
44
44
  constructor(...args) {
45
45
  super(...args);
@@ -85,28 +85,34 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
85
85
  valueNow: valueNow,
86
86
  valueMax: valueMax
87
87
  });
88
- return jsx(View, Object.assign({}, passthroughProps(props), {
88
+ return _jsxs(View, {
89
+ ...passthroughProps(props),
89
90
  as: this.props.as,
90
91
  css: styles === null || styles === void 0 ? void 0 : styles.progressBar,
91
92
  margin: this.props.margin,
92
- elementRef: this.handleRef
93
- }), jsx("span", {
94
- css: styles === null || styles === void 0 ? void 0 : styles.trackLayout
95
- }, jsx("progress", {
96
- css: styles === null || styles === void 0 ? void 0 : styles.htmlProgress,
97
- max: valueMax,
98
- value: valueNow,
99
- "aria-valuetext": labelAndValueText
100
- }), jsx("span", {
101
- css: styles === null || styles === void 0 ? void 0 : styles.track,
102
- role: "presentation",
103
- "aria-hidden": "true"
104
- }, jsx("span", {
105
- css: styles === null || styles === void 0 ? void 0 : styles.trackValue
106
- }, renderValueInside && value))), value && !renderValueInside && jsx("span", {
107
- css: styles === null || styles === void 0 ? void 0 : styles.value,
108
- "aria-hidden": "true"
109
- }, value));
93
+ elementRef: this.handleRef,
94
+ children: [_jsxs("span", {
95
+ css: styles === null || styles === void 0 ? void 0 : styles.trackLayout,
96
+ children: [_jsx("progress", {
97
+ css: styles === null || styles === void 0 ? void 0 : styles.htmlProgress,
98
+ max: valueMax,
99
+ value: valueNow,
100
+ "aria-valuetext": labelAndValueText
101
+ }), _jsx("span", {
102
+ css: styles === null || styles === void 0 ? void 0 : styles.track,
103
+ role: "presentation",
104
+ "aria-hidden": "true",
105
+ children: _jsx("span", {
106
+ css: styles === null || styles === void 0 ? void 0 : styles.trackValue,
107
+ children: renderValueInside && value
108
+ })
109
+ })]
110
+ }), value && !renderValueInside && _jsx("span", {
111
+ css: styles === null || styles === void 0 ? void 0 : styles.value,
112
+ "aria-hidden": "true",
113
+ children: value
114
+ })]
115
+ });
110
116
  }
111
117
  }, _ProgressBar.displayName = "ProgressBar", _ProgressBar.componentId = 'ProgressBar', _ProgressBar.allowedProps = allowedProps, _ProgressBar.propTypes = propTypes, _ProgressBar.defaultProps = {
112
118
  formatScreenReaderValue: ({
package/es/ProgressCircle/__examples__/ProgressCircle.examples.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
1
2
  /*
2
3
  * The MIT License (MIT)
3
4
  *
@@ -22,7 +23,6 @@
22
23
  * SOFTWARE.
23
24
  */
24
25
 
25
- import React from 'react';
26
26
  const valueMax = 100;
27
27
  export default {
28
28
  sectionProp: 'color',
@@ -31,7 +31,9 @@ export default {
31
31
  renderValue: [null, ({
32
32
  valueNow,
33
33
  valueMax
34
- }) => /*#__PURE__*/React.createElement("span", null, Math.round(valueNow / valueMax * 100))]
34
+ }) => _jsx("span", {
35
+ children: Math.round(valueNow / valueMax * 100)
36
+ })]
35
37
  },
36
38
  getComponentProps: () => {
37
39
  return {
package/es/ProgressCircle/__new-tests__/ProgressCircle.test.js CHANGED
@@ -23,14 +23,14 @@ var _ProgressCircle, _ProgressCircle2, _ProgressCircle3;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- import React from 'react';
27
26
  import { render } from '@testing-library/react';
28
27
  import '@testing-library/jest-dom';
29
28
  import { runAxeCheck } from '@instructure/ui-axe-check';
30
29
  import { ProgressCircle } from '../index';
30
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
31
31
  describe('<ProgressCircle />', () => {
32
32
  it('should render', async () => {
33
- const _render = render(_ProgressCircle || (_ProgressCircle = /*#__PURE__*/React.createElement(ProgressCircle, {
33
+ const _render = render(_ProgressCircle || (_ProgressCircle = _jsx(ProgressCircle, {
34
34
  screenReaderLabel: "Chapters read",
35
35
  valueMax: 60,
36
36
  valueNow: 30
@@ -40,7 +40,7 @@ describe('<ProgressCircle />', () => {
40
40
  expect(progress).toBeInTheDocument();
41
41
  });
42
42
  it('should render a progress element with correct aria attributes', async () => {
43
- const _render2 = render(_ProgressCircle2 || (_ProgressCircle2 = /*#__PURE__*/React.createElement(ProgressCircle, {
43
+ const _render2 = render(_ProgressCircle2 || (_ProgressCircle2 = _jsx(ProgressCircle, {
44
44
  screenReaderLabel: "Chapters read",
45
45
  valueMax: 60,
46
46
  valueNow: 30
@@ -52,7 +52,7 @@ describe('<ProgressCircle />', () => {
52
52
  it('should format the displayed text', async () => {
53
53
  const current = 30;
54
54
  const max = 60;
55
- const _render3 = render(/*#__PURE__*/React.createElement(ProgressCircle, {
55
+ const _render3 = render(_jsx(ProgressCircle, {
56
56
  screenReaderLabel: "Chapters read",
57
57
  valueMax: max,
58
58
  valueNow: current,
@@ -62,11 +62,11 @@ describe('<ProgressCircle />', () => {
62
62
  }) => `${valueNow} of ${valueMax}`
63
63
  })),
64
64
  container = _render3.container;
65
- const progress = container.querySelector('[class$="-progressCircle"]');
65
+ const progress = container.querySelector('[class*="-progressCircle"]');
66
66
  expect(progress).toHaveTextContent(`${current} of ${max}`);
67
67
  });
68
68
  it('should meet a11y standards', async () => {
69
- const _render4 = render(_ProgressCircle3 || (_ProgressCircle3 = /*#__PURE__*/React.createElement(ProgressCircle, {
69
+ const _render4 = render(_ProgressCircle3 || (_ProgressCircle3 = _jsx(ProgressCircle, {
70
70
  screenReaderLabel: "Chapters read",
71
71
  valueMax: 60,
72
72
  valueNow: 30
package/es/ProgressCircle/index.js CHANGED
@@ -25,13 +25,12 @@ var _dec, _dec2, _class, _ProgressCircle;
25
25
  * SOFTWARE.
26
26
  */
27
27
 
28
- /** @jsx jsx */
29
28
  import { Component } from 'react';
30
29
  import { ScreenReaderContent } from '@instructure/ui-a11y-content';
31
30
  import { View } from '@instructure/ui-view';
32
31
  import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils';
33
32
  import { testable } from '@instructure/ui-testable';
34
- import { withStyle, jsx } from '@instructure/emotion';
33
+ import { withStyle } from '@instructure/emotion';
35
34
  import generateStyle from './styles';
36
35
  import generateComponentTheme from './theme';
37
36
  import { allowedProps, propTypes } from './props';
@@ -41,6 +40,7 @@ import { allowedProps, propTypes } from './props';
41
40
  category: components
42
41
  ---
43
42
  **/
43
+ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
44
44
  let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_ProgressCircle = class ProgressCircle extends Component {
45
45
  constructor(props) {
46
46
  super(props);
@@ -108,44 +108,51 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
108
108
  const style = {
109
109
  strokeDashoffset: `${styles === null || styles === void 0 ? void 0 : styles.dashOffset}em`
110
110
  };
111
- return jsx(View, Object.assign({}, passthroughProps(props), {
111
+ return _jsxs(View, {
112
+ ...passthroughProps(props),
112
113
  as: this.props.as,
113
114
  elementRef: this.handleRef,
114
115
  css: styles === null || styles === void 0 ? void 0 : styles.progressCircle,
115
- margin: this.props.margin
116
- }), jsx(ScreenReaderContent, null, jsx("progress", {
117
- max: valueMax,
118
- value: valueNow,
119
- "aria-valuetext": labelAndValueText
120
- })), value && jsx("span", {
121
- css: styles === null || styles === void 0 ? void 0 : styles.center,
122
- "aria-hidden": "true"
123
- }, jsx("span", {
124
- css: styles === null || styles === void 0 ? void 0 : styles.value
125
- }, value)), jsx("svg", {
126
- css: styles === null || styles === void 0 ? void 0 : styles.circle,
127
- role: "presentation",
128
- focusable: "false"
129
- }, jsx("circle", {
130
- css: styles === null || styles === void 0 ? void 0 : styles.track,
131
- role: "presentation",
132
- cx: "50%",
133
- cy: "50%",
134
- r: styles === null || styles === void 0 ? void 0 : (_styles$radii = styles.radii) === null || _styles$radii === void 0 ? void 0 : _styles$radii.radius
135
- }), jsx("circle", {
136
- css: styles === null || styles === void 0 ? void 0 : styles.border,
137
- role: "presentation",
138
- cx: "50%",
139
- cy: "50%",
140
- r: styles === null || styles === void 0 ? void 0 : (_styles$radii2 = styles.radii) === null || _styles$radii2 === void 0 ? void 0 : _styles$radii2.borderOffsetRadius
141
- }), jsx("circle", {
142
- css: styles === null || styles === void 0 ? void 0 : styles.meter,
143
- role: "presentation",
144
- style: style,
145
- cx: "50%",
146
- cy: "50%",
147
- r: styles === null || styles === void 0 ? void 0 : (_styles$radii3 = styles.radii) === null || _styles$radii3 === void 0 ? void 0 : _styles$radii3.radius
148
- })));
116
+ margin: this.props.margin,
117
+ children: [_jsx(ScreenReaderContent, {
118
+ children: _jsx("progress", {
119
+ max: valueMax,
120
+ value: valueNow,
121
+ "aria-valuetext": labelAndValueText
122
+ })
123
+ }), value && _jsx("span", {
124
+ css: styles === null || styles === void 0 ? void 0 : styles.center,
125
+ "aria-hidden": "true",
126
+ children: _jsx("span", {
127
+ css: styles === null || styles === void 0 ? void 0 : styles.value,
128
+ children: value
129
+ })
130
+ }), _jsxs("svg", {
131
+ css: styles === null || styles === void 0 ? void 0 : styles.circle,
132
+ role: "presentation",
133
+ focusable: "false",
134
+ children: [_jsx("circle", {
135
+ css: styles === null || styles === void 0 ? void 0 : styles.track,
136
+ role: "presentation",
137
+ cx: "50%",
138
+ cy: "50%",
139
+ r: styles === null || styles === void 0 ? void 0 : (_styles$radii = styles.radii) === null || _styles$radii === void 0 ? void 0 : _styles$radii.radius
140
+ }), _jsx("circle", {
141
+ css: styles === null || styles === void 0 ? void 0 : styles.border,
142
+ role: "presentation",
143
+ cx: "50%",
144
+ cy: "50%",
145
+ r: styles === null || styles === void 0 ? void 0 : (_styles$radii2 = styles.radii) === null || _styles$radii2 === void 0 ? void 0 : _styles$radii2.borderOffsetRadius
146
+ }), _jsx("circle", {
147
+ css: styles === null || styles === void 0 ? void 0 : styles.meter,
148
+ role: "presentation",
149
+ style: style,
150
+ cx: "50%",
151
+ cy: "50%",
152
+ r: styles === null || styles === void 0 ? void 0 : (_styles$radii3 = styles.radii) === null || _styles$radii3 === void 0 ? void 0 : _styles$radii3.radius
153
+ })]
154
+ })]
155
+ });
149
156
  }
150
157
  }, _ProgressCircle.displayName = "ProgressCircle", _ProgressCircle.componentId = 'ProgressCircle', _ProgressCircle.allowedProps = allowedProps, _ProgressCircle.propTypes = propTypes, _ProgressCircle.defaultProps = {
151
158
  formatScreenReaderValue: ({
package/lib/ProgressBar/__examples__/ProgressBar.examples.js CHANGED
@@ -1,11 +1,10 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.default = void 0;
8
- var _react = _interopRequireDefault(require("react"));
7
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
9
8
  /*
10
9
  * The MIT License (MIT)
11
10
  *
@@ -39,7 +38,9 @@ var _default = exports.default = {
39
38
  renderValue: [null, ({
40
39
  valueNow,
41
40
  valueMax
42
- }) => /*#__PURE__*/_react.default.createElement("span", null, Math.round(valueNow / valueMax * 100))]
41
+ }) => (0, _jsxRuntime.jsx)("span", {
42
+ children: Math.round(valueNow / valueMax * 100)
43
+ })]
43
44
  },
44
45
  getComponentProps: () => {
45
46
  return {
package/lib/ProgressBar/__new-tests__/ProgressBar.test.js CHANGED
@@ -1,11 +1,10 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _react = _interopRequireDefault(require("react"));
5
- var _react2 = require("@testing-library/react");
3
+ var _react = require("@testing-library/react");
6
4
  require("@testing-library/jest-dom");
7
5
  var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
8
6
  var _index = require("../index");
7
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
9
8
  var _ProgressBar, _ProgressBar2, _ProgressBar3;
10
9
  /*
11
10
  * The MIT License (MIT)
@@ -32,7 +31,7 @@ var _ProgressBar, _ProgressBar2, _ProgressBar3;
32
31
  */
33
32
  describe('<ProgressBar />', () => {
34
33
  it('should render', async () => {
35
- const _render = (0, _react2.render)(_ProgressBar || (_ProgressBar = /*#__PURE__*/_react.default.createElement(_index.ProgressBar, {
34
+ const _render = (0, _react.render)(_ProgressBar || (_ProgressBar = (0, _jsxRuntime.jsx)(_index.ProgressBar, {
36
35
  screenReaderLabel: "Chapters read",
37
36
  valueMax: 60,
38
37
  valueNow: 30
@@ -42,7 +41,7 @@ describe('<ProgressBar />', () => {
42
41
  expect(progress).toBeInTheDocument();
43
42
  });
44
43
  it('should render a progress element with correct aria attributes', async () => {
45
- const _render2 = (0, _react2.render)(_ProgressBar2 || (_ProgressBar2 = /*#__PURE__*/_react.default.createElement(_index.ProgressBar, {
44
+ const _render2 = (0, _react.render)(_ProgressBar2 || (_ProgressBar2 = (0, _jsxRuntime.jsx)(_index.ProgressBar, {
46
45
  screenReaderLabel: "Chapters read",
47
46
  valueMax: 60,
48
47
  valueNow: 30
@@ -54,7 +53,7 @@ describe('<ProgressBar />', () => {
54
53
  it('should format the displayed text', async () => {
55
54
  const current = 30;
56
55
  const max = 60;
57
- const _render3 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ProgressBar, {
56
+ const _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.ProgressBar, {
58
57
  screenReaderLabel: "Chapters read",
59
58
  valueMax: max,
60
59
  valueNow: current,
@@ -64,11 +63,11 @@ describe('<ProgressBar />', () => {
64
63
  }) => `${valueNow} of ${valueMax}`
65
64
  })),
66
65
  container = _render3.container;
67
- const progress = container.querySelector('[class$="-progressBar"]');
66
+ const progress = container.querySelector('[class*="-progressBar"]');
68
67
  expect(progress).toHaveTextContent(`${current} of ${max}`);
69
68
  });
70
69
  it('should meet a11y standards', async () => {
71
- const _render4 = (0, _react2.render)(_ProgressBar3 || (_ProgressBar3 = /*#__PURE__*/_react.default.createElement(_index.ProgressBar, {
70
+ const _render4 = (0, _react.render)(_ProgressBar3 || (_ProgressBar3 = (0, _jsxRuntime.jsx)(_index.ProgressBar, {
72
71
  screenReaderLabel: "Chapters read",
73
72
  valueMax: 60,
74
73
  valueNow: 30
@@ -79,7 +78,7 @@ describe('<ProgressBar />', () => {
79
78
  });
80
79
  it('should not render the value inside when the prop is set to false', () => {
81
80
  const valueNow = 33;
82
- const _render5 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ProgressBar, {
81
+ const _render5 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.ProgressBar, {
83
82
  screenReaderLabel: "Chapters read",
84
83
  valueMax: 100,
85
84
  valueNow: valueNow,
@@ -87,12 +86,12 @@ describe('<ProgressBar />', () => {
87
86
  renderValue: `${valueNow}%`
88
87
  })),
89
88
  container = _render5.container;
90
- const progressMeter = container.querySelector('[class$="-progressBar__trackValue"]');
89
+ const progressMeter = container.querySelector('[class*="-progressBar__trackValue"]');
91
90
  expect(progressMeter).not.toHaveTextContent('33%');
92
91
  });
93
92
  it('should render the value inside when the prop is set', () => {
94
93
  const valueNow = 33;
95
- const _render6 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ProgressBar, {
94
+ const _render6 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.ProgressBar, {
96
95
  screenReaderLabel: "Chapters read",
97
96
  valueMax: 100,
98
97
  valueNow: valueNow,
@@ -100,7 +99,7 @@ describe('<ProgressBar />', () => {
100
99
  renderValue: `${valueNow}%`
101
100
  })),
102
101
  container = _render6.container;
103
- const progressMeter = container.querySelector('[class$="-progressBar__trackValue"]');
102
+ const progressMeter = container.querySelector('[class*="-progressBar__trackValue"]');
104
103
  expect(progressMeter).toHaveTextContent('33%');
105
104
  });
106
105
  });
package/lib/ProgressBar/index.js CHANGED
@@ -15,6 +15,7 @@ var _emotion = require("@instructure/emotion");
15
15
  var _styles = _interopRequireDefault(require("./styles"));
16
16
  var _theme = _interopRequireDefault(require("./theme"));
17
17
  var _props = require("./props");
18
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
18
19
  const _excluded = ["renderValue", "formatScreenReaderValue", "valueNow", "valueMax", "screenReaderLabel", "size", "color", "meterColor", "renderValueInside", "styles"];
19
20
  var _dec, _dec2, _class, _ProgressBar;
20
21
  /*
@@ -40,7 +41,6 @@ var _dec, _dec2, _class, _ProgressBar;
40
41
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
41
42
  * SOFTWARE.
42
43
  */
43
- /** @jsx jsx */
44
44
  /**
45
45
  ---
46
46
  category: components
@@ -91,28 +91,34 @@ let ProgressBar = exports.ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.
91
91
  valueNow: valueNow,
92
92
  valueMax: valueMax
93
93
  });
94
- return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
94
+ return (0, _jsxRuntime.jsxs)(_View.View, {
95
+ ...(0, _passthroughProps.passthroughProps)(props),
95
96
  as: this.props.as,
96
97
  css: styles === null || styles === void 0 ? void 0 : styles.progressBar,
97
98
  margin: this.props.margin,
98
- elementRef: this.handleRef
99
- }), (0, _emotion.jsx)("span", {
100
- css: styles === null || styles === void 0 ? void 0 : styles.trackLayout
101
- }, (0, _emotion.jsx)("progress", {
102
- css: styles === null || styles === void 0 ? void 0 : styles.htmlProgress,
103
- max: valueMax,
104
- value: valueNow,
105
- "aria-valuetext": labelAndValueText
106
- }), (0, _emotion.jsx)("span", {
107
- css: styles === null || styles === void 0 ? void 0 : styles.track,
108
- role: "presentation",
109
- "aria-hidden": "true"
110
- }, (0, _emotion.jsx)("span", {
111
- css: styles === null || styles === void 0 ? void 0 : styles.trackValue
112
- }, renderValueInside && value))), value && !renderValueInside && (0, _emotion.jsx)("span", {
113
- css: styles === null || styles === void 0 ? void 0 : styles.value,
114
- "aria-hidden": "true"
115
- }, value));
99
+ elementRef: this.handleRef,
100
+ children: [(0, _jsxRuntime.jsxs)("span", {
101
+ css: styles === null || styles === void 0 ? void 0 : styles.trackLayout,
102
+ children: [(0, _jsxRuntime.jsx)("progress", {
103
+ css: styles === null || styles === void 0 ? void 0 : styles.htmlProgress,
104
+ max: valueMax,
105
+ value: valueNow,
106
+ "aria-valuetext": labelAndValueText
107
+ }), (0, _jsxRuntime.jsx)("span", {
108
+ css: styles === null || styles === void 0 ? void 0 : styles.track,
109
+ role: "presentation",
110
+ "aria-hidden": "true",
111
+ children: (0, _jsxRuntime.jsx)("span", {
112
+ css: styles === null || styles === void 0 ? void 0 : styles.trackValue,
113
+ children: renderValueInside && value
114
+ })
115
+ })]
116
+ }), value && !renderValueInside && (0, _jsxRuntime.jsx)("span", {
117
+ css: styles === null || styles === void 0 ? void 0 : styles.value,
118
+ "aria-hidden": "true",
119
+ children: value
120
+ })]
121
+ });
116
122
  }
117
123
  }, _ProgressBar.displayName = "ProgressBar", _ProgressBar.componentId = 'ProgressBar', _ProgressBar.allowedProps = _props.allowedProps, _ProgressBar.propTypes = _props.propTypes, _ProgressBar.defaultProps = {
118
124
  formatScreenReaderValue: ({
package/lib/ProgressCircle/__examples__/ProgressCircle.examples.js CHANGED
@@ -1,11 +1,10 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.default = void 0;
8
- var _react = _interopRequireDefault(require("react"));
7
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
9
8
  /*
10
9
  * The MIT License (MIT)
11
10
  *
@@ -38,7 +37,9 @@ var _default = exports.default = {
38
37
  renderValue: [null, ({
39
38
  valueNow,
40
39
  valueMax
41
- }) => /*#__PURE__*/_react.default.createElement("span", null, Math.round(valueNow / valueMax * 100))]
40
+ }) => (0, _jsxRuntime.jsx)("span", {
41
+ children: Math.round(valueNow / valueMax * 100)
42
+ })]
42
43
  },
43
44
  getComponentProps: () => {
44
45
  return {
package/lib/ProgressCircle/__new-tests__/ProgressCircle.test.js CHANGED
@@ -1,11 +1,10 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _react = _interopRequireDefault(require("react"));
5
- var _react2 = require("@testing-library/react");
3
+ var _react = require("@testing-library/react");
6
4
  require("@testing-library/jest-dom");
7
5
  var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
8
6
  var _index = require("../index");
7
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
9
8
  var _ProgressCircle, _ProgressCircle2, _ProgressCircle3;
10
9
  /*
11
10
  * The MIT License (MIT)
@@ -32,7 +31,7 @@ var _ProgressCircle, _ProgressCircle2, _ProgressCircle3;
32
31
  */
33
32
  describe('<ProgressCircle />', () => {
34
33
  it('should render', async () => {
35
- const _render = (0, _react2.render)(_ProgressCircle || (_ProgressCircle = /*#__PURE__*/_react.default.createElement(_index.ProgressCircle, {
34
+ const _render = (0, _react.render)(_ProgressCircle || (_ProgressCircle = (0, _jsxRuntime.jsx)(_index.ProgressCircle, {
36
35
  screenReaderLabel: "Chapters read",
37
36
  valueMax: 60,
38
37
  valueNow: 30
@@ -42,7 +41,7 @@ describe('<ProgressCircle />', () => {
42
41
  expect(progress).toBeInTheDocument();
43
42
  });
44
43
  it('should render a progress element with correct aria attributes', async () => {
45
- const _render2 = (0, _react2.render)(_ProgressCircle2 || (_ProgressCircle2 = /*#__PURE__*/_react.default.createElement(_index.ProgressCircle, {
44
+ const _render2 = (0, _react.render)(_ProgressCircle2 || (_ProgressCircle2 = (0, _jsxRuntime.jsx)(_index.ProgressCircle, {
46
45
  screenReaderLabel: "Chapters read",
47
46
  valueMax: 60,
48
47
  valueNow: 30
@@ -54,7 +53,7 @@ describe('<ProgressCircle />', () => {
54
53
  it('should format the displayed text', async () => {
55
54
  const current = 30;
56
55
  const max = 60;
57
- const _render3 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ProgressCircle, {
56
+ const _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.ProgressCircle, {
58
57
  screenReaderLabel: "Chapters read",
59
58
  valueMax: max,
60
59
  valueNow: current,
@@ -64,11 +63,11 @@ describe('<ProgressCircle />', () => {
64
63
  }) => `${valueNow} of ${valueMax}`
65
64
  })),
66
65
  container = _render3.container;
67
- const progress = container.querySelector('[class$="-progressCircle"]');
66
+ const progress = container.querySelector('[class*="-progressCircle"]');
68
67
  expect(progress).toHaveTextContent(`${current} of ${max}`);
69
68
  });
70
69
  it('should meet a11y standards', async () => {
71
- const _render4 = (0, _react2.render)(_ProgressCircle3 || (_ProgressCircle3 = /*#__PURE__*/_react.default.createElement(_index.ProgressCircle, {
70
+ const _render4 = (0, _react.render)(_ProgressCircle3 || (_ProgressCircle3 = (0, _jsxRuntime.jsx)(_index.ProgressCircle, {
72
71
  screenReaderLabel: "Chapters read",
73
72
  valueMax: 60,
74
73
  valueNow: 30