@instructure/ui-progress 11.6.0 → 11.6.1-pr-snapshot-1779894247159

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 CHANGED
@@ -3,6 +3,14 @@
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.6.1-pr-snapshot-1779894247159](https://github.com/instructure/instructure-ui/compare/v11.6.0...v11.6.1-pr-snapshot-1779894247159) (2026-05-27)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-progress
9
+
10
+
11
+
12
+
13
+
6
14
  # [11.6.0](https://github.com/instructure/instructure-ui/compare/v11.5.0...v11.6.0) (2026-02-18)
7
15
 
8
16
  **Note:** Version bump only for package @instructure/ui-progress
@@ -1,9 +1,3 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.allowedProps = void 0;
7
1
  /*
8
2
  * The MIT License (MIT)
9
3
  *
@@ -28,4 +22,16 @@ exports.allowedProps = void 0;
28
22
  * SOFTWARE.
29
23
  */
30
24
 
31
- const allowedProps = exports.allowedProps = ['screenReaderLabel', 'size', 'valueMax', 'valueNow', 'formatScreenReaderValue', 'renderValue', 'color', 'meterColor', 'shouldAnimate', 'margin', 'elementRef', 'as'];
25
+ module.exports = {
26
+ presets: [
27
+ [
28
+ require('@instructure/ui-babel-preset'),
29
+ {
30
+ coverage: Boolean(process.env.COVERAGE),
31
+ esModules: Boolean(process.env.ES_MODULES),
32
+ removeConsole: process.env.NODE_ENV === 'production',
33
+ transformImports: Boolean(process.env.TRANSFORM_IMPORTS)
34
+ }
35
+ ]
36
+ ]
37
+ }
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@instructure/ui-progress",
3
- "version": "11.6.0",
3
+ "version": "11.6.1-pr-snapshot-1779894247159",
4
+ "type": "module",
4
5
  "description": "Styled HTML <progress /> elements for showing completion of a task",
5
6
  "author": "Instructure, Inc. Engineering and Product Design",
6
7
  "module": "./es/index.js",
7
- "main": "./lib/index.js",
8
8
  "types": "./types/index.d.ts",
9
9
  "repository": {
10
10
  "type": "git",
@@ -15,21 +15,21 @@
15
15
  "license": "MIT",
16
16
  "dependencies": {
17
17
  "@babel/runtime": "^7.27.6",
18
- "@instructure/console": "11.6.0",
19
- "@instructure/emotion": "11.6.0",
20
- "@instructure/shared-types": "11.6.0",
21
- "@instructure/ui-a11y-content": "11.6.0",
22
- "@instructure/ui-color-utils": "11.6.0",
23
- "@instructure/ui-view": "11.6.0",
24
- "@instructure/ui-react-utils": "11.6.0"
18
+ "@instructure/console": "11.6.1-pr-snapshot-1779894247159",
19
+ "@instructure/emotion": "11.6.1-pr-snapshot-1779894247159",
20
+ "@instructure/ui-a11y-content": "11.6.1-pr-snapshot-1779894247159",
21
+ "@instructure/shared-types": "11.6.1-pr-snapshot-1779894247159",
22
+ "@instructure/ui-color-utils": "11.6.1-pr-snapshot-1779894247159",
23
+ "@instructure/ui-react-utils": "11.6.1-pr-snapshot-1779894247159",
24
+ "@instructure/ui-view": "11.6.1-pr-snapshot-1779894247159"
25
25
  },
26
26
  "devDependencies": {
27
27
  "@testing-library/jest-dom": "^6.6.3",
28
28
  "@testing-library/react": "15.0.7",
29
29
  "vitest": "^3.2.2",
30
- "@instructure/ui-themes": "11.6.0",
31
- "@instructure/ui-babel-preset": "11.6.0",
32
- "@instructure/ui-axe-check": "11.6.0"
30
+ "@instructure/ui-axe-check": "11.6.1-pr-snapshot-1779894247159",
31
+ "@instructure/ui-babel-preset": "11.6.1-pr-snapshot-1779894247159",
32
+ "@instructure/ui-themes": "11.6.1-pr-snapshot-1779894247159"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "react": ">=18 <=19"
@@ -42,10 +42,8 @@
42
42
  ".": {
43
43
  "types": "./types/index.d.ts",
44
44
  "import": "./es/index.js",
45
- "require": "./lib/index.js",
46
45
  "default": "./es/index.js"
47
46
  },
48
- "./lib/*": "./lib/*",
49
47
  "./es/*": "./es/*",
50
48
  "./types/*": "./types/*",
51
49
  "./package.json": "./package.json",
@@ -55,7 +53,7 @@
55
53
  "lint": "ui-scripts lint",
56
54
  "lint:fix": "ui-scripts lint --fix",
57
55
  "clean": "ui-scripts clean",
58
- "build": "ui-scripts build --modules es,cjs",
56
+ "build": "ui-scripts build",
59
57
  "build:watch": "pnpm run ts:check -- --watch & ui-scripts build --watch",
60
58
  "build:types": "tsc -p tsconfig.build.json",
61
59
  "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
@@ -1,137 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = exports.ProgressBar = void 0;
8
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
9
- var _react = require("react");
10
- var _View = require("@instructure/ui-view/lib/View");
11
- var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
12
- var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
13
- var _emotion = require("@instructure/emotion");
14
- var _styles = _interopRequireDefault(require("./styles"));
15
- var _theme = _interopRequireDefault(require("./theme"));
16
- var _props = require("./props");
17
- var _jsxRuntime = require("@emotion/react/jsx-runtime");
18
- const _excluded = ["renderValue", "formatScreenReaderValue", "valueNow", "valueMax", "screenReaderLabel", "size", "color", "meterColor", "renderValueInside", "styles"];
19
- var _dec, _class, _ProgressBar;
20
- /*
21
- * The MIT License (MIT)
22
- *
23
- * Copyright (c) 2015 - present Instructure, Inc.
24
- *
25
- * Permission is hereby granted, free of charge, to any person obtaining a copy
26
- * of this software and associated documentation files (the "Software"), to deal
27
- * in the Software without restriction, including without limitation the rights
28
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
29
- * copies of the Software, and to permit persons to whom the Software is
30
- * furnished to do so, subject to the following conditions:
31
- *
32
- * The above copyright notice and this permission notice shall be included in all
33
- * copies or substantial portions of the Software.
34
- *
35
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
36
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
37
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
38
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
39
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
40
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
41
- * SOFTWARE.
42
- */
43
- /**
44
- ---
45
- category: components
46
- ---
47
- **/
48
- let ProgressBar = exports.ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_ProgressBar = class ProgressBar extends _react.Component {
49
- constructor(...args) {
50
- super(...args);
51
- this.ref = null;
52
- this.handleRef = el => {
53
- const elementRef = this.props.elementRef;
54
- this.ref = el;
55
- if (typeof elementRef === 'function') {
56
- elementRef(el);
57
- }
58
- };
59
- }
60
- componentDidMount() {
61
- var _this$props$makeStyle, _this$props;
62
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
63
- }
64
- componentDidUpdate() {
65
- var _this$props$makeStyle2, _this$props2;
66
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
67
- }
68
- render() {
69
- const _this$props3 = this.props,
70
- renderValue = _this$props3.renderValue,
71
- formatScreenReaderValue = _this$props3.formatScreenReaderValue,
72
- valueNow = _this$props3.valueNow,
73
- valueMax = _this$props3.valueMax,
74
- screenReaderLabel = _this$props3.screenReaderLabel,
75
- size = _this$props3.size,
76
- color = _this$props3.color,
77
- meterColor = _this$props3.meterColor,
78
- renderValueInside = _this$props3.renderValueInside,
79
- styles = _this$props3.styles,
80
- props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
81
- const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
82
- valueNow: valueNow,
83
- valueMax: valueMax
84
- }) : void 0;
85
- const value = (0, _callRenderProp.callRenderProp)(renderValue, {
86
- valueNow: valueNow,
87
- valueMax: valueMax
88
- });
89
- return (0, _jsxRuntime.jsxs)(_View.View, {
90
- ...(0, _passthroughProps.passthroughProps)(props),
91
- as: this.props.as,
92
- css: styles === null || styles === void 0 ? void 0 : styles.progressBar,
93
- margin: this.props.margin,
94
- elementRef: this.handleRef,
95
- "data-cid": "ProgressBar",
96
- children: [(0, _jsxRuntime.jsxs)("span", {
97
- css: styles === null || styles === void 0 ? void 0 : styles.trackLayout,
98
- children: [(0, _jsxRuntime.jsx)("progress", {
99
- css: styles === null || styles === void 0 ? void 0 : styles.htmlProgress,
100
- max: valueMax,
101
- value: valueNow,
102
- "aria-valuetext": valueText,
103
- "aria-label": screenReaderLabel
104
- }), (0, _jsxRuntime.jsx)("span", {
105
- css: styles === null || styles === void 0 ? void 0 : styles.track,
106
- role: "presentation",
107
- "aria-hidden": "true",
108
- children: (0, _jsxRuntime.jsx)("span", {
109
- css: styles === null || styles === void 0 ? void 0 : styles.trackValue,
110
- children: renderValueInside && value
111
- })
112
- })]
113
- }), value && !renderValueInside && (0, _jsxRuntime.jsx)("span", {
114
- css: styles === null || styles === void 0 ? void 0 : styles.value,
115
- "aria-hidden": "true",
116
- children: value
117
- })]
118
- });
119
- }
120
- }, _ProgressBar.displayName = "ProgressBar", _ProgressBar.componentId = 'ProgressBar', _ProgressBar.allowedProps = _props.allowedProps, _ProgressBar.defaultProps = {
121
- formatScreenReaderValue: ({
122
- valueNow,
123
- valueMax
124
- }) => `${valueNow} / ${valueMax}`,
125
- size: 'medium',
126
- valueMax: 100,
127
- valueNow: 0,
128
- as: 'div',
129
- color: 'primary',
130
- shouldAnimate: false,
131
- // default to showing `success` color on completion
132
- meterColor: ({
133
- valueNow,
134
- valueMax
135
- }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
136
- }, _ProgressBar)) || _class);
137
- var _default = exports.default = ProgressBar;
@@ -1,216 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- /*
8
- * The MIT License (MIT)
9
- *
10
- * Copyright (c) 2015 - present Instructure, Inc.
11
- *
12
- * Permission is hereby granted, free of charge, to any person obtaining a copy
13
- * of this software and associated documentation files (the "Software"), to deal
14
- * in the Software without restriction, including without limitation the rights
15
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
16
- * copies of the Software, and to permit persons to whom the Software is
17
- * furnished to do so, subject to the following conditions:
18
- *
19
- * The above copyright notice and this permission notice shall be included in all
20
- * copies or substantial portions of the Software.
21
- *
22
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
23
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
24
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
25
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
26
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
27
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
28
- * SOFTWARE.
29
- */
30
-
31
- /**
32
- * ---
33
- * private: true
34
- * ---
35
- * Generates the style object from the theme and provided additional information
36
- * @param {Object} componentTheme The theme variable object.
37
- * @param {Object} props the props of the component, the style is applied to
38
- * @param {Object} state the state of the component, the style is applied to
39
- * @return {Object} The final style object, which will be used in the component
40
- */
41
- const generateStyle = (componentTheme, props) => {
42
- const _props$valueNow = props.valueNow,
43
- valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
44
- _props$valueMax = props.valueMax,
45
- valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax,
46
- size = props.size,
47
- color = props.color,
48
- meterColor = props.meterColor,
49
- shouldAnimate = props.shouldAnimate;
50
- const meterColorClassName = typeof meterColor === 'function' ? meterColor({
51
- valueNow,
52
- valueMax
53
- }) : meterColor;
54
- const currentValue = valueNow > valueMax ? valueMax : valueNow < 0 ? 0 : valueNow;
55
- const currentValuePercent = `${currentValue / valueMax * 100}%`;
56
- const sizeVariants = {
57
- 'x-small': {
58
- track: {
59
- height: componentTheme.xSmallHeight
60
- },
61
- value: {
62
- fontSize: componentTheme.xSmallValueFontSize
63
- }
64
- },
65
- small: {
66
- track: {
67
- height: componentTheme.smallHeight
68
- },
69
- // product design wants = 18px
70
- value: {
71
- fontSize: componentTheme.smallValueFontSize
72
- }
73
- },
74
- medium: {
75
- track: {
76
- height: componentTheme.mediumHeight
77
- },
78
- value: {
79
- fontSize: componentTheme.mediumValueFontSize
80
- }
81
- },
82
- large: {
83
- track: {
84
- height: componentTheme.largeHeight
85
- },
86
- value: {
87
- fontSize: componentTheme.largeValueFontSize
88
- }
89
- }
90
- };
91
- const colorVariants = {
92
- primary: {
93
- trackLayout: {
94
- background: componentTheme.trackColor
95
- },
96
- trackBorder: {
97
- borderBottomColor: componentTheme.trackBottomBorderColor
98
- }
99
- },
100
- 'primary-inverse': {
101
- trackLayout: {
102
- background: componentTheme.trackColorInverse
103
- },
104
- trackBorder: {
105
- borderBottomColor: componentTheme.trackBottomBorderColorInverse
106
- }
107
- }
108
- };
109
- const trackBackgroundVariants = {
110
- primary: {
111
- brand: {
112
- background: componentTheme.meterColorBrand
113
- },
114
- info: {
115
- background: componentTheme.meterColorInfo
116
- },
117
- success: {
118
- background: componentTheme.meterColorSuccess
119
- },
120
- danger: {
121
- background: componentTheme.meterColorDanger
122
- },
123
- warning: {
124
- background: componentTheme.meterColorWarning
125
- },
126
- alert: {
127
- background: componentTheme.meterColorAlert
128
- }
129
- },
130
- 'primary-inverse': {
131
- brand: {
132
- background: componentTheme.meterColorBrandInverse
133
- },
134
- info: {
135
- background: componentTheme.meterColorInfoInverse
136
- },
137
- success: {
138
- background: componentTheme.meterColorSuccessInverse
139
- },
140
- danger: {
141
- background: componentTheme.meterColorDangerInverse
142
- },
143
- warning: {
144
- background: componentTheme.meterColorWarningInverse
145
- },
146
- alert: {
147
- background: componentTheme.meterColorAlertInverse
148
- }
149
- }
150
- };
151
- return {
152
- progressBar: {
153
- label: 'progressBar',
154
- display: 'flex',
155
- alignItems: 'center',
156
- fontFamily: componentTheme.fontFamily,
157
- fontWeight: componentTheme.fontWeight,
158
- lineHeight: componentTheme.lineHeight,
159
- fontSize: componentTheme.fontSize,
160
- borderRadius: componentTheme.borderRadius
161
- },
162
- trackLayout: {
163
- label: 'progressBar__trackLayout',
164
- position: 'relative',
165
- flex: 1,
166
- borderRadius: 'inherit',
167
- ...colorVariants[color].trackLayout
168
- },
169
- track: {
170
- label: 'progressBar__track',
171
- display: 'block',
172
- boxSizing: 'border-box',
173
- width: '100%',
174
- borderBottomWidth: componentTheme.trackBottomBorderWidth,
175
- borderBottomStyle: 'solid',
176
- background: 'transparent',
177
- borderRadius: 'inherit',
178
- ...sizeVariants[size].track,
179
- ...colorVariants[color].trackBorder
180
- },
181
- trackValue: {
182
- label: 'progressBar__trackValue',
183
- display: 'block',
184
- boxSizing: 'border-box',
185
- height: '100%',
186
- width: currentValuePercent,
187
- maxWidth: '100%',
188
- borderRadius: 'inherit',
189
- ...(shouldAnimate && {
190
- transition: 'all 0.5s'
191
- }),
192
- ...(meterColorClassName && trackBackgroundVariants[color][meterColorClassName])
193
- },
194
- value: {
195
- label: 'progressBar__value',
196
- lineHeight: 1,
197
- boxSizing: 'border-box',
198
- paddingInlineStart: componentTheme.valuePadding,
199
- flex: '0 0 5.625rem',
200
- ...sizeVariants[size].value
201
- },
202
- htmlProgress: {
203
- label: 'progressBar__htmlProgress',
204
- display: 'block',
205
- position: 'absolute',
206
- top: '0',
207
- left: '0',
208
- width: '100%',
209
- height: '100%',
210
- boxSizing: 'border-box',
211
- zIndex: -1,
212
- opacity: 0
213
- }
214
- };
215
- };
216
- var _default = exports.default = generateStyle;
@@ -1,99 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- /*
8
- * The MIT License (MIT)
9
- *
10
- * Copyright (c) 2015 - present Instructure, Inc.
11
- *
12
- * Permission is hereby granted, free of charge, to any person obtaining a copy
13
- * of this software and associated documentation files (the "Software"), to deal
14
- * in the Software without restriction, including without limitation the rights
15
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
16
- * copies of the Software, and to permit persons to whom the Software is
17
- * furnished to do so, subject to the following conditions:
18
- *
19
- * The above copyright notice and this permission notice shall be included in all
20
- * copies or substantial portions of the Software.
21
- *
22
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
23
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
24
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
25
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
26
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
27
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
28
- * SOFTWARE.
29
- */
30
-
31
- /**
32
- * Generates the theme object for the component from the theme and provided additional information
33
- * @param {Object} theme The actual theme object.
34
- * @return {Object} The final theme object with the overrides and component variables
35
- */
36
- const generateComponentTheme = theme => {
37
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts0, _colors$contrasts1, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12, _colors$contrasts13, _colors$contrasts14, _colors$contrasts15, _colors$contrasts16, _colors$contrasts17, _colors$contrasts18, _colors$contrasts19;
38
- const borders = theme.borders,
39
- colors = theme.colors,
40
- spacing = theme.spacing,
41
- typography = theme.typography,
42
- themeName = theme.key;
43
- const themeSpecificStyle = {
44
- canvas: {
45
- meterColorBrand: theme['ic-brand-primary']
46
- },
47
- 'canvas-high-contrast': {
48
- meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
49
- meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
50
- meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
51
- meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.white1010,
52
- meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
53
- meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.white1010
54
- }
55
- };
56
- const componentVariables = {
57
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
58
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
59
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
60
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
61
- xSmallHeight: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
62
- xSmallValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
63
- smallHeight: '1.125rem',
64
- // product design wants = 18px
65
- smallValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
66
- mediumHeight: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
67
- mediumValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
68
- largeHeight: spacing === null || spacing === void 0 ? void 0 : spacing.large,
69
- largeValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
70
- valuePadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall}`,
71
- // variables are split out for inverse to allow
72
- // color value changes for inverse-high-constrast
73
- meterColorBrand: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
74
- meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue4570,
75
- meterColorInfo: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue4570,
76
- meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts0 = colors.contrasts) === null || _colors$contrasts0 === void 0 ? void 0 : _colors$contrasts0.blue4570,
77
- meterColorSuccess: colors === null || colors === void 0 ? void 0 : (_colors$contrasts1 = colors.contrasts) === null || _colors$contrasts1 === void 0 ? void 0 : _colors$contrasts1.green4570,
78
- meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.green4570,
79
- meterColorDanger: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.red4570,
80
- meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.red4570,
81
- meterColorAlert: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.blue4570,
82
- meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts14 = colors.contrasts) === null || _colors$contrasts14 === void 0 ? void 0 : _colors$contrasts14.blue4570,
83
- meterColorWarning: colors === null || colors === void 0 ? void 0 : (_colors$contrasts15 = colors.contrasts) === null || _colors$contrasts15 === void 0 ? void 0 : _colors$contrasts15.orange4570,
84
- meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts16 = colors.contrasts) === null || _colors$contrasts16 === void 0 ? void 0 : _colors$contrasts16.orange4570,
85
- meterBorderWidthInverse: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
86
- meterBorderColorInverse: 'transparent',
87
- trackColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts17 = colors.contrasts) === null || _colors$contrasts17 === void 0 ? void 0 : _colors$contrasts17.white1010,
88
- trackColorInverse: 'transparent',
89
- trackBottomBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
90
- trackBottomBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts18 = colors.contrasts) === null || _colors$contrasts18 === void 0 ? void 0 : _colors$contrasts18.grey3045,
91
- trackBottomBorderColorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts19 = colors.contrasts) === null || _colors$contrasts19 === void 0 ? void 0 : _colors$contrasts19.white1010,
92
- borderRadius: '0px'
93
- };
94
- return {
95
- ...componentVariables,
96
- ...themeSpecificStyle[themeName]
97
- };
98
- };
99
- var _default = exports.default = generateComponentTheme;
@@ -1,180 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = exports.ProgressCircle = void 0;
8
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
9
- var _react = require("react");
10
- var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
11
- var _View = require("@instructure/ui-view/lib/View");
12
- var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
13
- var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
14
- var _emotion = require("@instructure/emotion");
15
- var _styles = _interopRequireDefault(require("./styles"));
16
- var _theme = _interopRequireDefault(require("./theme"));
17
- var _props = require("./props");
18
- var _jsxRuntime = require("@emotion/react/jsx-runtime");
19
- const _excluded = ["color", "renderValue", "formatScreenReaderValue", "meterColor", "valueNow", "valueMax", "screenReaderLabel", "size", "styles"];
20
- var _dec, _class, _ProgressCircle;
21
- /*
22
- * The MIT License (MIT)
23
- *
24
- * Copyright (c) 2015 - present Instructure, Inc.
25
- *
26
- * Permission is hereby granted, free of charge, to any person obtaining a copy
27
- * of this software and associated documentation files (the "Software"), to deal
28
- * in the Software without restriction, including without limitation the rights
29
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
30
- * copies of the Software, and to permit persons to whom the Software is
31
- * furnished to do so, subject to the following conditions:
32
- *
33
- * The above copyright notice and this permission notice shall be included in all
34
- * copies or substantial portions of the Software.
35
- *
36
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
37
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
38
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
39
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
40
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
41
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
42
- * SOFTWARE.
43
- */
44
- /**
45
- ---
46
- category: components
47
- ---
48
- **/
49
- let ProgressCircle = exports.ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_ProgressCircle = class ProgressCircle extends _react.Component {
50
- constructor(props) {
51
- super(props);
52
- this._timeouts = [];
53
- this.ref = null;
54
- this.handleRef = el => {
55
- const elementRef = this.props.elementRef;
56
- this.ref = el;
57
- if (typeof elementRef === 'function') {
58
- elementRef(el);
59
- }
60
- };
61
- this.state = {
62
- shouldAnimateOnMount: props.shouldAnimateOnMount
63
- };
64
- }
65
- get makeStylesVariables() {
66
- return {
67
- shouldAnimateOnMount: this.state.shouldAnimateOnMount
68
- };
69
- }
70
- componentDidMount() {
71
- var _this$props$makeStyle, _this$props;
72
- if (this.state.shouldAnimateOnMount) {
73
- this._timeouts.push(setTimeout(() => {
74
- this.setState({
75
- shouldAnimateOnMount: false
76
- });
77
- }, this.props.animationDelay || 500));
78
- }
79
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
80
- }
81
- componentDidUpdate() {
82
- var _this$props$makeStyle2, _this$props2;
83
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
84
- }
85
- componentWillUnmount() {
86
- this._timeouts.forEach(timeout => clearTimeout(timeout));
87
- }
88
- render() {
89
- var _styles$radii, _styles$radii2, _styles$radii3;
90
- const _this$props3 = this.props,
91
- color = _this$props3.color,
92
- renderValue = _this$props3.renderValue,
93
- formatScreenReaderValue = _this$props3.formatScreenReaderValue,
94
- meterColor = _this$props3.meterColor,
95
- valueNow = _this$props3.valueNow,
96
- valueMax = _this$props3.valueMax,
97
- screenReaderLabel = _this$props3.screenReaderLabel,
98
- size = _this$props3.size,
99
- styles = _this$props3.styles,
100
- props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
101
- const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
102
- valueNow: valueNow,
103
- valueMax: valueMax
104
- }) : void 0;
105
- // consolidating the label and aria-valuetext to put in aria-label because
106
- // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
107
- // But leaving aria-valuetext because JAWS ignores aria-label
108
- const labelAndValueText = `${screenReaderLabel} ${valueText}`;
109
- const value = (0, _callRenderProp.callRenderProp)(renderValue, {
110
- valueNow: valueNow,
111
- valueMax: valueMax
112
- });
113
- const style = {
114
- strokeDashoffset: `${styles === null || styles === void 0 ? void 0 : styles.dashOffset}em`
115
- };
116
- return (0, _jsxRuntime.jsxs)(_View.View, {
117
- ...(0, _passthroughProps.passthroughProps)(props),
118
- as: this.props.as,
119
- elementRef: this.handleRef,
120
- css: styles === null || styles === void 0 ? void 0 : styles.progressCircle,
121
- margin: this.props.margin,
122
- "data-cid": "ProgressCircle",
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
- });
162
- }
163
- }, _ProgressCircle.displayName = "ProgressCircle", _ProgressCircle.componentId = 'ProgressCircle', _ProgressCircle.allowedProps = _props.allowedProps, _ProgressCircle.defaultProps = {
164
- formatScreenReaderValue: ({
165
- valueNow,
166
- valueMax
167
- }) => `${valueNow} / ${valueMax}`,
168
- size: 'medium',
169
- valueMax: 100,
170
- valueNow: 0,
171
- as: 'div',
172
- color: 'primary',
173
- shouldAnimateOnMount: false,
174
- // default to showing `success` color on completion
175
- meterColor: ({
176
- valueNow,
177
- valueMax
178
- }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
179
- }, _ProgressCircle)) || _class);
180
- var _default = exports.default = ProgressCircle;
@@ -1,31 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.allowedProps = void 0;
7
- /*
8
- * The MIT License (MIT)
9
- *
10
- * Copyright (c) 2015 - present Instructure, Inc.
11
- *
12
- * Permission is hereby granted, free of charge, to any person obtaining a copy
13
- * of this software and associated documentation files (the "Software"), to deal
14
- * in the Software without restriction, including without limitation the rights
15
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
16
- * copies of the Software, and to permit persons to whom the Software is
17
- * furnished to do so, subject to the following conditions:
18
- *
19
- * The above copyright notice and this permission notice shall be included in all
20
- * copies or substantial portions of the Software.
21
- *
22
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
23
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
24
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
25
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
26
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
27
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
28
- * SOFTWARE.
29
- */
30
-
31
- const allowedProps = exports.allowedProps = ['screenReaderLabel', 'size', 'valueMax', 'valueNow', 'formatScreenReaderValue', 'renderValue', 'color', 'meterColor', 'margin', 'elementRef', 'as', 'shouldAnimateOnMount', 'animationDelay'];
@@ -1,355 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- /*
8
- * The MIT License (MIT)
9
- *
10
- * Copyright (c) 2015 - present Instructure, Inc.
11
- *
12
- * Permission is hereby granted, free of charge, to any person obtaining a copy
13
- * of this software and associated documentation files (the "Software"), to deal
14
- * in the Software without restriction, including without limitation the rights
15
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
16
- * copies of the Software, and to permit persons to whom the Software is
17
- * furnished to do so, subject to the following conditions:
18
- *
19
- * The above copyright notice and this permission notice shall be included in all
20
- * copies or substantial portions of the Software.
21
- *
22
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
23
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
24
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
25
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
26
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
27
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
28
- * SOFTWARE.
29
- */
30
-
31
- /**
32
- * ---
33
- * private: true
34
- * ---
35
- * Generates the style object from the theme and provided additional information
36
- * @param {Object} componentTheme The theme variable object.
37
- * @param {Object} props the props of the component, the style is applied to
38
- * @param {Object} state the state of the component, the style is applied to
39
- * @return {Object} The final style object, which will be used in the component
40
- */
41
- const generateStyle = (componentTheme, props, state) => {
42
- const size = props.size,
43
- color = props.color,
44
- meterColor = props.meterColor,
45
- _props$valueNow = props.valueNow,
46
- valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
47
- _props$valueMax = props.valueMax,
48
- valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax;
49
- const shouldAnimateOnMount = state.shouldAnimateOnMount;
50
- const getMeterColorClassName = typeof meterColor === 'function' ? meterColor({
51
- valueNow,
52
- valueMax
53
- }) : meterColor;
54
- const getCircumference = () => {
55
- const camelSize = size === 'x-small' ? 'xSmall' : size;
56
- // get the circumference of the meter circle
57
- return parseFloat(componentTheme[`${camelSize}Circumference`]);
58
- };
59
- const getRadii = () => {
60
- const camelSize = size === 'x-small' ? 'xSmall' : size;
61
- return {
62
- radius: componentTheme[`${camelSize}Radius`],
63
- borderOffsetRadius: componentTheme[`${camelSize}BorderOffset`]
64
- };
65
- };
66
- const getDashOffset = () => {
67
- // send the stroke-dashoffset to the meter circle, checking
68
- // to make sure current value doesn't exceed max value
69
- if (valueNow < valueMax) {
70
- const circumference = getCircumference();
71
- // figure out how much offset to give the stroke to show the % complete
72
- return circumference - valueNow / valueMax * circumference;
73
- } else {
74
- return 0;
75
- }
76
- };
77
-
78
- /*
79
- Using !important on the meter shouldAnimateOnMount versions
80
- to guarantee that the bars will start showing 0 if the
81
- animateOnMount prop is set
82
- */
83
- const sizeVariants = {
84
- 'x-small': {
85
- progressCircle: {
86
- width: componentTheme.xSmallSize,
87
- height: componentTheme.xSmallSize
88
- },
89
- circle: {
90
- width: componentTheme.xSmallSize,
91
- height: componentTheme.xSmallSize
92
- },
93
- value: {
94
- padding: '0.5rem'
95
- },
96
- border: {
97
- transformOrigin: `${componentTheme.xSmallTransform} ${componentTheme.xSmallTransform}`
98
- },
99
- track: {
100
- transformOrigin: `${componentTheme.xSmallTransform} ${componentTheme.xSmallTransform}`,
101
- strokeWidth: componentTheme.xSmallStrokeWidth
102
- },
103
- meter: {
104
- strokeWidth: componentTheme.xSmallStrokeWidth,
105
- strokeDasharray: componentTheme.xSmallCircumference,
106
- ...(shouldAnimateOnMount && {
107
- strokeDashoffset: `${componentTheme.xSmallCircumference} !important`
108
- })
109
- }
110
- },
111
- small: {
112
- progressCircle: {
113
- width: componentTheme.smallSize,
114
- height: componentTheme.smallSize
115
- },
116
- circle: {
117
- width: componentTheme.smallSize,
118
- height: componentTheme.smallSize
119
- },
120
- value: {},
121
- border: {
122
- transformOrigin: `${componentTheme.smallTransform} ${componentTheme.smallTransform}`
123
- },
124
- track: {
125
- transformOrigin: `${componentTheme.smallTransform} ${componentTheme.smallTransform}`,
126
- strokeWidth: componentTheme.smallStrokeWidth
127
- },
128
- meter: {
129
- strokeWidth: componentTheme.smallStrokeWidth,
130
- strokeDasharray: componentTheme.smallCircumference,
131
- ...(shouldAnimateOnMount && {
132
- strokeDashoffset: `${componentTheme.smallCircumference} !important`
133
- })
134
- }
135
- },
136
- medium: {
137
- progressCircle: {
138
- width: componentTheme.mediumSize,
139
- height: componentTheme.mediumSize
140
- },
141
- circle: {
142
- width: componentTheme.mediumSize,
143
- height: componentTheme.mediumSize
144
- },
145
- value: {},
146
- border: {
147
- transformOrigin: `${componentTheme.mediumTransform} ${componentTheme.mediumTransform}`
148
- },
149
- track: {
150
- transformOrigin: `${componentTheme.mediumTransform} ${componentTheme.mediumTransform}`,
151
- strokeWidth: componentTheme.mediumStrokeWidth
152
- },
153
- meter: {
154
- strokeWidth: componentTheme.mediumStrokeWidth,
155
- strokeDasharray: componentTheme.mediumCircumference,
156
- ...(shouldAnimateOnMount && {
157
- strokeDashoffset: `${componentTheme.mediumCircumference} !important`
158
- })
159
- }
160
- },
161
- large: {
162
- progressCircle: {
163
- width: componentTheme.largeSize,
164
- height: componentTheme.largeSize
165
- },
166
- circle: {
167
- width: componentTheme.largeSize,
168
- height: componentTheme.largeSize
169
- },
170
- value: {},
171
- border: {
172
- transformOrigin: `${componentTheme.largeTransform} ${componentTheme.largeTransform}`
173
- },
174
- track: {
175
- transformOrigin: `${componentTheme.largeTransform} ${componentTheme.largeTransform}`,
176
- strokeWidth: componentTheme.largeStrokeWidth
177
- },
178
- meter: {
179
- strokeWidth: componentTheme.largeStrokeWidth,
180
- strokeDasharray: componentTheme.largeCircumference,
181
- ...(shouldAnimateOnMount && {
182
- strokeDashoffset: `${componentTheme.largeCircumference} !important`
183
- })
184
- }
185
- }
186
- };
187
- const colorVariants = {
188
- primary: {
189
- track: {
190
- stroke: componentTheme.trackColor
191
- },
192
- value: {
193
- color: componentTheme.color
194
- },
195
- border: {
196
- stroke: componentTheme.trackBorderColor
197
- }
198
- },
199
- 'primary-inverse': {
200
- track: {
201
- stroke: componentTheme.trackColorInverse
202
- },
203
- value: {
204
- color: componentTheme.colorInverse
205
- },
206
- border: {
207
- stroke: componentTheme.trackBorderColorInverse
208
- }
209
- }
210
- };
211
- const meterColorVariants = {
212
- primary: {
213
- brand: {
214
- stroke: componentTheme.meterColorBrand
215
- },
216
- info: {
217
- stroke: componentTheme.meterColorInfo
218
- },
219
- warning: {
220
- stroke: componentTheme.meterColorWarning
221
- },
222
- danger: {
223
- stroke: componentTheme.meterColorDanger
224
- },
225
- alert: {
226
- stroke: componentTheme.meterColorAlert
227
- },
228
- success: {
229
- stroke: componentTheme.meterColorSuccess
230
- }
231
- },
232
- 'primary-inverse': {
233
- brand: {
234
- stroke: componentTheme.meterColorBrandInverse
235
- },
236
- info: {
237
- stroke: componentTheme.meterColorInfoInverse
238
- },
239
- warning: {
240
- stroke: componentTheme.meterColorWarningInverse
241
- },
242
- danger: {
243
- stroke: componentTheme.meterColorDangerInverse
244
- },
245
- alert: {
246
- stroke: componentTheme.meterColorAlertInverse
247
- },
248
- success: {
249
- stroke: componentTheme.meterColorSuccessInverse
250
- }
251
- }
252
- };
253
- return {
254
- progressCircle: {
255
- label: 'progressCircle',
256
- display: 'inline-block',
257
- verticalAlign: 'middle',
258
- position: 'relative',
259
- overflow: 'hidden',
260
- /*
261
- Seems like a good idea to reset font-size because
262
- the SVG uses ems and might inherit a container's
263
- font-size
264
- */
265
- fontSize: '1rem',
266
- fontFamily: componentTheme.fontFamily,
267
- fontWeight: componentTheme.fontWeight,
268
- lineHeight: componentTheme.lineHeight,
269
- ...sizeVariants[size].progressCircle
270
- },
271
- center: {
272
- label: 'progressCircle__center',
273
- transition: 'all 0.5s',
274
- transitionDelay: '1s',
275
- display: 'block',
276
- position: 'absolute',
277
- transform: 'translate3d(0, 0, 0)',
278
- top: 0,
279
- left: 0,
280
- height: '100%',
281
- width: '100%',
282
- borderRadius: '50%',
283
- ...(shouldAnimateOnMount && {
284
- opacity: 0,
285
- transform: 'translate3d(0, 10%, 0)'
286
- })
287
- },
288
- value: {
289
- label: 'progressCircle__value',
290
- boxSizing: 'border-box',
291
- wordWrap: 'break-word',
292
- textAlign: 'center',
293
- borderRadius: '50%',
294
- display: 'flex',
295
- alignItems: 'center',
296
- justifyContent: 'center',
297
- padding: '1.5rem',
298
- width: '100%',
299
- height: '100%',
300
- lineHeight: 1,
301
- ...sizeVariants[size].value,
302
- ...colorVariants[color].value
303
- },
304
- circle: {
305
- label: 'progressCircle__circle',
306
- transform: 'rotate(-90deg)',
307
- display: 'block',
308
- position: 'absolute',
309
- top: 0,
310
- left: 0,
311
- ...sizeVariants[size].circle
312
- },
313
- track: {
314
- label: 'progressCircle__track',
315
- fill: 'none',
316
- opacity: 1,
317
- transition: 'all 0.5s',
318
- transitionDelay: '0.2s',
319
- transform: 'translate3d(0, 0, 0)',
320
- ...sizeVariants[size].track,
321
- ...colorVariants[color].track,
322
- ...(shouldAnimateOnMount && {
323
- opacity: 0,
324
- transform: 'translate3d(0, 0, 0)'
325
- })
326
- },
327
- border: {
328
- label: 'progressCircle__border',
329
- fill: 'none',
330
- opacity: 1,
331
- transition: 'all 0.5s',
332
- transform: 'translate3d(0, 0, 0) scale(1)',
333
- ...sizeVariants[size].border,
334
- ...colorVariants[color].border,
335
- ...(shouldAnimateOnMount && {
336
- opacity: 0,
337
- transform: 'translate3d(0, 0, 0) scale(0.75)'
338
- })
339
- },
340
- meter: {
341
- label: 'progressCircle__meter',
342
- fill: 'none',
343
- transition: 'stroke-dashoffset 1s',
344
- transform: 'translate3d(0, 0, 0)',
345
- ...sizeVariants[size].meter,
346
- ...(getMeterColorClassName && meterColorVariants[color][getMeterColorClassName]),
347
- ...(shouldAnimateOnMount && {
348
- opacity: 0
349
- })
350
- },
351
- radii: getRadii(),
352
- dashOffset: getDashOffset()
353
- };
354
- };
355
- var _default = exports.default = generateStyle;
@@ -1,145 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- /*
8
- * The MIT License (MIT)
9
- *
10
- * Copyright (c) 2015 - present Instructure, Inc.
11
- *
12
- * Permission is hereby granted, free of charge, to any person obtaining a copy
13
- * of this software and associated documentation files (the "Software"), to deal
14
- * in the Software without restriction, including without limitation the rights
15
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
16
- * copies of the Software, and to permit persons to whom the Software is
17
- * furnished to do so, subject to the following conditions:
18
- *
19
- * The above copyright notice and this permission notice shall be included in all
20
- * copies or substantial portions of the Software.
21
- *
22
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
23
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
24
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
25
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
26
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
27
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
28
- * SOFTWARE.
29
- */
30
-
31
- const radius = {
32
- xSmall: 1,
33
- small: 1.8,
34
- medium: 2.75,
35
- large: 3.5
36
- };
37
- const size = {
38
- xSmall: 3,
39
- small: 5,
40
- medium: 7,
41
- large: 9
42
- };
43
- const strokeWidth = {
44
- xSmall: 0.185,
45
- small: 0.5,
46
- medium: 0.625,
47
- large: 0.875
48
- };
49
-
50
- // Necessary to get the 1px border line to go "under" the meter
51
- // strokeWidth is divided in half because SVG strokeWidth is
52
- // centered along the path of the stroke, unlike CSS
53
- const borderWidth = 0.0625;
54
- const borderOffsetRadius = {
55
- xSmall: radius.xSmall - strokeWidth.xSmall / 2 + borderWidth,
56
- small: radius.small - strokeWidth.small / 2 + borderWidth,
57
- medium: radius.medium - strokeWidth.medium / 2 + borderWidth,
58
- large: radius.large - strokeWidth.large / 2 + borderWidth
59
- };
60
- const circumference = function (r) {
61
- return (2 * Math.PI * r).toFixed(3);
62
- };
63
- const transform = function (s) {
64
- return s / 2;
65
- };
66
-
67
- /**
68
- * Generates the theme object for the component from the theme and provided additional information
69
- * @param {Object} theme The actual theme object.
70
- * @return {Object} The final theme object with the overrides and component variables
71
- */
72
- const generateComponentTheme = theme => {
73
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts0, _colors$contrasts1, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12, _colors$contrasts13, _colors$contrasts14, _colors$contrasts15, _colors$contrasts16, _colors$contrasts17, _colors$contrasts18, _colors$contrasts19, _colors$contrasts20, _colors$contrasts21;
74
- const colors = theme.colors,
75
- typography = theme.typography,
76
- themeName = theme.key;
77
- const themeSpecificStyle = {
78
- canvas: {
79
- color: theme['ic-brand-font-color-dark'],
80
- meterColorBrand: theme['ic-brand-primary']
81
- },
82
- 'canvas-high-contrast': {
83
- meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
84
- meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
85
- meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
86
- meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.white1010,
87
- meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
88
- meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.white1010
89
- }
90
- };
91
- const componentVariables = {
92
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
93
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
94
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
95
- xSmallSize: `${size.xSmall}em`,
96
- xSmallRadius: `${radius.xSmall}em`,
97
- xSmallCircumference: `${circumference(radius.xSmall)}em`,
98
- xSmallTransform: `${transform(size.xSmall)}em`,
99
- xSmallStrokeWidth: `${strokeWidth.xSmall}em`,
100
- xSmallBorderOffset: `${borderOffsetRadius.xSmall}em`,
101
- smallSize: `${size.small}em`,
102
- smallRadius: `${radius.small}em`,
103
- smallCircumference: `${circumference(radius.small)}em`,
104
- smallTransform: `${transform(size.small)}em`,
105
- smallStrokeWidth: `${strokeWidth.small}em`,
106
- smallBorderOffset: `${borderOffsetRadius.small}em`,
107
- mediumSize: `${size.medium}em`,
108
- mediumRadius: `${radius.medium}em`,
109
- mediumCircumference: `${circumference(radius.medium)}em`,
110
- mediumTransform: `${transform(size.medium)}em`,
111
- mediumStrokeWidth: `${strokeWidth.medium}em`,
112
- mediumBorderOffset: `${borderOffsetRadius.medium}em`,
113
- largeSize: `${size.large}em`,
114
- largeRadius: `${radius.large}em`,
115
- largeCircumference: `${circumference(radius.large)}em`,
116
- largeTransform: `${transform(size.large)}em`,
117
- largeStrokeWidth: `${strokeWidth.large}em`,
118
- largeBorderOffset: `${borderOffsetRadius.large}em`,
119
- color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey125125,
120
- colorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.white1010,
121
- trackColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.white1010,
122
- trackColorInverse: 'transparent',
123
- trackBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts0 = colors.contrasts) === null || _colors$contrasts0 === void 0 ? void 0 : _colors$contrasts0.grey3045,
124
- trackBorderColorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts1 = colors.contrasts) === null || _colors$contrasts1 === void 0 ? void 0 : _colors$contrasts1.white1010,
125
- // variables are split out for inverse to allow
126
- // color value changes for inverse-high-contrast
127
- meterColorBrand: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.blue4570,
128
- meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.blue4570,
129
- meterColorInfo: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.blue4570,
130
- meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.blue4570,
131
- meterColorSuccess: colors === null || colors === void 0 ? void 0 : (_colors$contrasts14 = colors.contrasts) === null || _colors$contrasts14 === void 0 ? void 0 : _colors$contrasts14.green4570,
132
- meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts15 = colors.contrasts) === null || _colors$contrasts15 === void 0 ? void 0 : _colors$contrasts15.green4570,
133
- meterColorDanger: colors === null || colors === void 0 ? void 0 : (_colors$contrasts16 = colors.contrasts) === null || _colors$contrasts16 === void 0 ? void 0 : _colors$contrasts16.red4570,
134
- meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts17 = colors.contrasts) === null || _colors$contrasts17 === void 0 ? void 0 : _colors$contrasts17.red4570,
135
- meterColorAlert: colors === null || colors === void 0 ? void 0 : (_colors$contrasts18 = colors.contrasts) === null || _colors$contrasts18 === void 0 ? void 0 : _colors$contrasts18.blue4570,
136
- meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts19 = colors.contrasts) === null || _colors$contrasts19 === void 0 ? void 0 : _colors$contrasts19.blue4570,
137
- meterColorWarning: colors === null || colors === void 0 ? void 0 : (_colors$contrasts20 = colors.contrasts) === null || _colors$contrasts20 === void 0 ? void 0 : _colors$contrasts20.orange4570,
138
- meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts21 = colors.contrasts) === null || _colors$contrasts21 === void 0 ? void 0 : _colors$contrasts21.orange4570
139
- };
140
- return {
141
- ...componentVariables,
142
- ...themeSpecificStyle[themeName]
143
- };
144
- };
145
- var _default = exports.default = generateComponentTheme;
package/lib/index.js DELETED
@@ -1,19 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "ProgressBar", {
7
- enumerable: true,
8
- get: function () {
9
- return _ProgressBar.ProgressBar;
10
- }
11
- });
12
- Object.defineProperty(exports, "ProgressCircle", {
13
- enumerable: true,
14
- get: function () {
15
- return _ProgressCircle.ProgressCircle;
16
- }
17
- });
18
- var _ProgressBar = require("./ProgressBar");
19
- var _ProgressCircle = require("./ProgressCircle");
package/lib/package.json DELETED
@@ -1 +0,0 @@
1
- {"type":"commonjs"}