@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.
- package/CHANGELOG.md +1 -1
- package/es/ProgressBar/__examples__/ProgressBar.examples.js +4 -2
- package/es/ProgressBar/__new-tests__/ProgressBar.test.js +10 -10
- package/es/ProgressBar/index.js +27 -21
- package/es/ProgressCircle/__examples__/ProgressCircle.examples.js +4 -2
- package/es/ProgressCircle/__new-tests__/ProgressCircle.test.js +6 -6
- package/es/ProgressCircle/index.js +44 -37
- package/lib/ProgressBar/__examples__/ProgressBar.examples.js +4 -3
- package/lib/ProgressBar/__new-tests__/ProgressBar.test.js +11 -12
- package/lib/ProgressBar/index.js +26 -20
- package/lib/ProgressCircle/__examples__/ProgressCircle.examples.js +4 -3
- package/lib/ProgressCircle/__new-tests__/ProgressCircle.test.js +7 -8
- package/lib/ProgressCircle/index.js +43 -36
- package/package.json +13 -13
- package/src/ProgressBar/__examples__/ProgressBar.examples.tsx +0 -2
- package/src/ProgressBar/__new-tests__/ProgressBar.test.tsx +7 -4
- package/src/ProgressBar/index.tsx +1 -2
- package/src/ProgressCircle/__examples__/ProgressCircle.examples.tsx +0 -2
- package/src/ProgressCircle/__new-tests__/ProgressCircle.test.tsx +1 -2
- package/src/ProgressCircle/index.tsx +1 -2
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/ProgressBar/__examples__/ProgressBar.examples.d.ts.map +1 -1
- package/types/ProgressBar/__new-tests__/ProgressBar.test.d.ts.map +1 -1
- package/types/ProgressBar/index.d.ts +1 -3
- package/types/ProgressBar/index.d.ts.map +1 -1
- package/types/ProgressCircle/__examples__/ProgressCircle.examples.d.ts.map +1 -1
- package/types/ProgressCircle/__new-tests__/ProgressCircle.test.d.ts.map +1 -1
- package/types/ProgressCircle/index.d.ts +1 -3
- package/types/ProgressCircle/index.d.ts.map +1 -1
|
@@ -16,6 +16,7 @@ var _emotion = require("@instructure/emotion");
|
|
|
16
16
|
var _styles = _interopRequireDefault(require("./styles"));
|
|
17
17
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
18
18
|
var _props = require("./props");
|
|
19
|
+
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
19
20
|
const _excluded = ["color", "renderValue", "formatScreenReaderValue", "meterColor", "valueNow", "valueMax", "screenReaderLabel", "size", "styles"];
|
|
20
21
|
var _dec, _dec2, _class, _ProgressCircle;
|
|
21
22
|
/*
|
|
@@ -41,7 +42,6 @@ var _dec, _dec2, _class, _ProgressCircle;
|
|
|
41
42
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
42
43
|
* SOFTWARE.
|
|
43
44
|
*/
|
|
44
|
-
/** @jsx jsx */
|
|
45
45
|
/**
|
|
46
46
|
---
|
|
47
47
|
category: components
|
|
@@ -114,44 +114,51 @@ let ProgressCircle = exports.ProgressCircle = (_dec = (0, _emotion.withStyle)(_s
|
|
|
114
114
|
const style = {
|
|
115
115
|
strokeDashoffset: `${styles === null || styles === void 0 ? void 0 : styles.dashOffset}em`
|
|
116
116
|
};
|
|
117
|
-
return (0,
|
|
117
|
+
return (0, _jsxRuntime.jsxs)(_View.View, {
|
|
118
|
+
...(0, _passthroughProps.passthroughProps)(props),
|
|
118
119
|
as: this.props.as,
|
|
119
120
|
elementRef: this.handleRef,
|
|
120
121
|
css: styles === null || styles === void 0 ? void 0 : styles.progressCircle,
|
|
121
|
-
margin: this.props.margin
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
"
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
122
|
+
margin: this.props.margin,
|
|
123
|
+
children: [(0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
|
|
124
|
+
children: (0, _jsxRuntime.jsx)("progress", {
|
|
125
|
+
max: valueMax,
|
|
126
|
+
value: valueNow,
|
|
127
|
+
"aria-valuetext": labelAndValueText
|
|
128
|
+
})
|
|
129
|
+
}), value && (0, _jsxRuntime.jsx)("span", {
|
|
130
|
+
css: styles === null || styles === void 0 ? void 0 : styles.center,
|
|
131
|
+
"aria-hidden": "true",
|
|
132
|
+
children: (0, _jsxRuntime.jsx)("span", {
|
|
133
|
+
css: styles === null || styles === void 0 ? void 0 : styles.value,
|
|
134
|
+
children: value
|
|
135
|
+
})
|
|
136
|
+
}), (0, _jsxRuntime.jsxs)("svg", {
|
|
137
|
+
css: styles === null || styles === void 0 ? void 0 : styles.circle,
|
|
138
|
+
role: "presentation",
|
|
139
|
+
focusable: "false",
|
|
140
|
+
children: [(0, _jsxRuntime.jsx)("circle", {
|
|
141
|
+
css: styles === null || styles === void 0 ? void 0 : styles.track,
|
|
142
|
+
role: "presentation",
|
|
143
|
+
cx: "50%",
|
|
144
|
+
cy: "50%",
|
|
145
|
+
r: styles === null || styles === void 0 ? void 0 : (_styles$radii = styles.radii) === null || _styles$radii === void 0 ? void 0 : _styles$radii.radius
|
|
146
|
+
}), (0, _jsxRuntime.jsx)("circle", {
|
|
147
|
+
css: styles === null || styles === void 0 ? void 0 : styles.border,
|
|
148
|
+
role: "presentation",
|
|
149
|
+
cx: "50%",
|
|
150
|
+
cy: "50%",
|
|
151
|
+
r: styles === null || styles === void 0 ? void 0 : (_styles$radii2 = styles.radii) === null || _styles$radii2 === void 0 ? void 0 : _styles$radii2.borderOffsetRadius
|
|
152
|
+
}), (0, _jsxRuntime.jsx)("circle", {
|
|
153
|
+
css: styles === null || styles === void 0 ? void 0 : styles.meter,
|
|
154
|
+
role: "presentation",
|
|
155
|
+
style: style,
|
|
156
|
+
cx: "50%",
|
|
157
|
+
cy: "50%",
|
|
158
|
+
r: styles === null || styles === void 0 ? void 0 : (_styles$radii3 = styles.radii) === null || _styles$radii3 === void 0 ? void 0 : _styles$radii3.radius
|
|
159
|
+
})]
|
|
160
|
+
})]
|
|
161
|
+
});
|
|
155
162
|
}
|
|
156
163
|
}, _ProgressCircle.displayName = "ProgressCircle", _ProgressCircle.componentId = 'ProgressCircle', _ProgressCircle.allowedProps = _props.allowedProps, _ProgressCircle.propTypes = _props.propTypes, _ProgressCircle.defaultProps = {
|
|
157
164
|
formatScreenReaderValue: ({
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-progress",
|
|
3
|
-
"version": "10.16.1
|
|
3
|
+
"version": "10.16.1",
|
|
4
4
|
"description": "Styled HTML <progress /> elements for showing completion of a task",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -24,21 +24,21 @@
|
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@babel/runtime": "^7.26.0",
|
|
27
|
-
"@instructure/console": "10.16.1
|
|
28
|
-
"@instructure/emotion": "10.16.1
|
|
29
|
-
"@instructure/shared-types": "10.16.1
|
|
30
|
-
"@instructure/ui-a11y-content": "10.16.1
|
|
31
|
-
"@instructure/ui-color-utils": "10.16.1
|
|
32
|
-
"@instructure/ui-react-utils": "10.16.1
|
|
33
|
-
"@instructure/ui-testable": "10.16.1
|
|
34
|
-
"@instructure/ui-view": "10.16.1
|
|
27
|
+
"@instructure/console": "10.16.1",
|
|
28
|
+
"@instructure/emotion": "10.16.1",
|
|
29
|
+
"@instructure/shared-types": "10.16.1",
|
|
30
|
+
"@instructure/ui-a11y-content": "10.16.1",
|
|
31
|
+
"@instructure/ui-color-utils": "10.16.1",
|
|
32
|
+
"@instructure/ui-react-utils": "10.16.1",
|
|
33
|
+
"@instructure/ui-testable": "10.16.1",
|
|
34
|
+
"@instructure/ui-view": "10.16.1",
|
|
35
35
|
"prop-types": "^15.8.1"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@instructure/ui-axe-check": "10.16.1
|
|
39
|
-
"@instructure/ui-babel-preset": "10.16.1
|
|
40
|
-
"@instructure/ui-test-utils": "10.16.1
|
|
41
|
-
"@instructure/ui-themes": "10.16.1
|
|
38
|
+
"@instructure/ui-axe-check": "10.16.1",
|
|
39
|
+
"@instructure/ui-babel-preset": "10.16.1",
|
|
40
|
+
"@instructure/ui-test-utils": "10.16.1",
|
|
41
|
+
"@instructure/ui-themes": "10.16.1",
|
|
42
42
|
"@testing-library/jest-dom": "^6.6.3",
|
|
43
43
|
"@testing-library/react": "^16.0.1",
|
|
44
44
|
"vitest": "^2.1.8"
|
|
@@ -22,7 +22,6 @@
|
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
|
-
import React from 'react'
|
|
26
25
|
import { render } from '@testing-library/react'
|
|
27
26
|
|
|
28
27
|
import '@testing-library/jest-dom'
|
|
@@ -67,7 +66,7 @@ describe('<ProgressBar />', () => {
|
|
|
67
66
|
renderValue={({ valueNow, valueMax }) => `${valueNow} of ${valueMax}`}
|
|
68
67
|
/>
|
|
69
68
|
)
|
|
70
|
-
const progress = container.querySelector('[class
|
|
69
|
+
const progress = container.querySelector('[class*="-progressBar"]')
|
|
71
70
|
|
|
72
71
|
expect(progress).toHaveTextContent(`${current} of ${max}`)
|
|
73
72
|
})
|
|
@@ -95,7 +94,9 @@ describe('<ProgressBar />', () => {
|
|
|
95
94
|
renderValue={`${valueNow}%`}
|
|
96
95
|
/>
|
|
97
96
|
)
|
|
98
|
-
const progressMeter = container.querySelector(
|
|
97
|
+
const progressMeter = container.querySelector(
|
|
98
|
+
'[class*="-progressBar__trackValue"]'
|
|
99
|
+
)
|
|
99
100
|
|
|
100
101
|
expect(progressMeter).not.toHaveTextContent('33%')
|
|
101
102
|
})
|
|
@@ -111,7 +112,9 @@ describe('<ProgressBar />', () => {
|
|
|
111
112
|
renderValue={`${valueNow}%`}
|
|
112
113
|
/>
|
|
113
114
|
)
|
|
114
|
-
const progressMeter = container.querySelector(
|
|
115
|
+
const progressMeter = container.querySelector(
|
|
116
|
+
'[class*="-progressBar__trackValue"]'
|
|
117
|
+
)
|
|
115
118
|
|
|
116
119
|
expect(progressMeter).toHaveTextContent('33%')
|
|
117
120
|
})
|
|
@@ -22,14 +22,13 @@
|
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
|
-
/** @jsx jsx */
|
|
26
25
|
import { Component } from 'react'
|
|
27
26
|
|
|
28
27
|
import { View } from '@instructure/ui-view'
|
|
29
28
|
import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils'
|
|
30
29
|
import { testable } from '@instructure/ui-testable'
|
|
31
30
|
|
|
32
|
-
import { withStyle
|
|
31
|
+
import { withStyle } from '@instructure/emotion'
|
|
33
32
|
|
|
34
33
|
import generateStyle from './styles'
|
|
35
34
|
import generateComponentTheme from './theme'
|
|
@@ -22,7 +22,6 @@
|
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
|
-
import React from 'react'
|
|
26
25
|
import { render } from '@testing-library/react'
|
|
27
26
|
|
|
28
27
|
import '@testing-library/jest-dom'
|
|
@@ -67,7 +66,7 @@ describe('<ProgressCircle />', () => {
|
|
|
67
66
|
renderValue={({ valueNow, valueMax }) => `${valueNow} of ${valueMax}`}
|
|
68
67
|
/>
|
|
69
68
|
)
|
|
70
|
-
const progress = container.querySelector('[class
|
|
69
|
+
const progress = container.querySelector('[class*="-progressCircle"]')
|
|
71
70
|
|
|
72
71
|
expect(progress).toHaveTextContent(`${current} of ${max}`)
|
|
73
72
|
})
|
|
@@ -22,7 +22,6 @@
|
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
|
-
/** @jsx jsx */
|
|
26
25
|
import { Component } from 'react'
|
|
27
26
|
|
|
28
27
|
import { ScreenReaderContent } from '@instructure/ui-a11y-content'
|
|
@@ -30,7 +29,7 @@ import { View } from '@instructure/ui-view'
|
|
|
30
29
|
import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils'
|
|
31
30
|
import { testable } from '@instructure/ui-testable'
|
|
32
31
|
|
|
33
|
-
import { withStyle
|
|
32
|
+
import { withStyle } from '@instructure/emotion'
|
|
34
33
|
|
|
35
34
|
import generateStyle from './styles'
|
|
36
35
|
import generateComponentTheme from './theme'
|