@instructure/ui-progress 8.18.0 → 8.18.1-snapshot.2

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 (10) hide show
  1. package/LICENSE.md +27 -0
  2. package/es/ProgressBar/index.js +22 -18
  3. package/es/ProgressBar/theme.js +35 -35
  4. package/es/ProgressCircle/index.js +30 -24
  5. package/es/ProgressCircle/theme.js +26 -26
  6. package/lib/ProgressBar/index.js +22 -18
  7. package/lib/ProgressBar/theme.js +35 -35
  8. package/lib/ProgressCircle/index.js +30 -24
  9. package/lib/ProgressCircle/theme.js +26 -26
  10. package/package.json +15 -14
package/LICENSE.md ADDED
@@ -0,0 +1,27 @@
1
+ ---
2
+ title: The MIT License (MIT)
3
+ category: Getting Started
4
+ order: 9
5
+ ---
6
+
7
+ # The MIT License (MIT)
8
+
9
+ Copyright (c) 2015 Instructure, Inc.
10
+
11
+ **Permission is hereby granted, free of charge, to any person obtaining a copy
12
+ of this software and associated documentation files (the "Software"), to deal
13
+ in the Software without restriction, including without limitation the rights
14
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
15
+ copies of the Software, and to permit persons to whom the Software is
16
+ furnished to do so, subject to the following conditions.**
17
+
18
+ The above copyright notice and this permission notice shall be included in all
19
+ copies or substantial portions of the Software.
20
+
21
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
23
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
24
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
25
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
26
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
27
+ SOFTWARE.
package/es/ProgressBar/index.js CHANGED
@@ -59,25 +59,29 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
59
59
  }
60
60
 
61
61
  componentDidMount() {
62
- this.props.makeStyles?.();
62
+ var _this$props$makeStyle, _this$props;
63
+
64
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
63
65
  }
64
66
 
65
67
  componentDidUpdate() {
66
- this.props.makeStyles?.();
68
+ var _this$props$makeStyle2, _this$props2;
69
+
70
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
67
71
  }
68
72
 
69
73
  render() {
70
- const _this$props = this.props,
71
- renderValue = _this$props.renderValue,
72
- formatScreenReaderValue = _this$props.formatScreenReaderValue,
73
- valueNow = _this$props.valueNow,
74
- valueMax = _this$props.valueMax,
75
- screenReaderLabel = _this$props.screenReaderLabel,
76
- size = _this$props.size,
77
- color = _this$props.color,
78
- meterColor = _this$props.meterColor,
79
- styles = _this$props.styles,
80
- props = _objectWithoutProperties(_this$props, _excluded);
74
+ const _this$props3 = this.props,
75
+ renderValue = _this$props3.renderValue,
76
+ formatScreenReaderValue = _this$props3.formatScreenReaderValue,
77
+ valueNow = _this$props3.valueNow,
78
+ valueMax = _this$props3.valueMax,
79
+ screenReaderLabel = _this$props3.screenReaderLabel,
80
+ size = _this$props3.size,
81
+ color = _this$props3.color,
82
+ meterColor = _this$props3.meterColor,
83
+ styles = _this$props3.styles,
84
+ props = _objectWithoutProperties(_this$props3, _excluded);
81
85
 
82
86
  const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
83
87
  valueNow: valueNow,
@@ -95,15 +99,15 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
95
99
 
96
100
  return jsx(View, Object.assign({}, passthroughProps(props), {
97
101
  as: this.props.as,
98
- css: styles?.progressBar,
102
+ css: styles === null || styles === void 0 ? void 0 : styles.progressBar,
99
103
  margin: this.props.margin,
100
104
  elementRef: this.handleRef
101
105
  }), jsx("span", {
102
- css: styles?.trackLayout
106
+ css: styles === null || styles === void 0 ? void 0 : styles.trackLayout
103
107
  }, jsx("span", {
104
- css: styles?.trackBorder
108
+ css: styles === null || styles === void 0 ? void 0 : styles.trackBorder
105
109
  }), jsx("progress", {
106
- css: styles?.track,
110
+ css: styles === null || styles === void 0 ? void 0 : styles.track,
107
111
  max: valueMax,
108
112
  value: valueNow,
109
113
  role: "progressbar",
@@ -112,7 +116,7 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
112
116
  "aria-valuemax": valueMax,
113
117
  "aria-label": labelAndValueText
114
118
  })), value && jsx("span", {
115
- css: styles?.value,
119
+ css: styles === null || styles === void 0 ? void 0 : styles.value,
116
120
  "aria-hidden": "true"
117
121
  }, value));
118
122
  }
package/es/ProgressBar/theme.js CHANGED
@@ -38,50 +38,50 @@ const generateComponentTheme = theme => {
38
38
  meterColorBrand: theme['ic-brand-primary']
39
39
  },
40
40
  'canvas-high-contrast': {
41
- meterColorBrandInverse: colors?.backgroundLightest,
42
- meterColorSuccessInverse: colors?.backgroundLightest,
43
- meterColorInfoInverse: colors?.backgroundLightest,
44
- meterColorAlertInverse: colors?.backgroundLightest,
45
- meterColorWarningInverse: colors?.backgroundLightest,
46
- meterColorDangerInverse: colors?.backgroundLightest
41
+ meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
42
+ meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
43
+ meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
44
+ meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
45
+ meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
46
+ meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
47
47
  }
48
48
  };
49
49
  const componentVariables = {
50
- fontFamily: typography?.fontFamily,
51
- fontWeight: typography?.fontWeightNormal,
52
- lineHeight: typography?.lineHeightCondensed,
53
- fontSize: typography?.fontSizeMedium,
54
- xSmallHeight: spacing?.xSmall,
55
- xSmallValueFontSize: typography?.fontSizeXSmall,
50
+ fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
51
+ fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
52
+ lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
53
+ fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
54
+ xSmallHeight: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
55
+ xSmallValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
56
56
  smallHeight: '1.125rem',
57
57
  // product design wants = 18px
58
- smallValueFontSize: typography?.fontSizeXSmall,
59
- mediumHeight: spacing?.medium,
60
- mediumValueFontSize: typography?.fontSizeSmall,
61
- largeHeight: spacing?.large,
62
- largeValueFontSize: typography?.fontSizeMedium,
63
- valuePadding: `${spacing?.xxSmall}`,
58
+ smallValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
59
+ mediumHeight: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
60
+ mediumValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
61
+ largeHeight: spacing === null || spacing === void 0 ? void 0 : spacing.large,
62
+ largeValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
63
+ valuePadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall}`,
64
64
  // variables are split out for inverse to allow
65
65
  // color value changes for inverse-high-constrast
66
- meterColorBrand: colors?.backgroundBrand,
67
- meterColorBrandInverse: colors?.backgroundBrand,
68
- meterColorInfo: colors?.backgroundInfo,
69
- meterColorInfoInverse: colors?.backgroundInfo,
70
- meterColorSuccess: colors?.backgroundSuccess,
71
- meterColorSuccessInverse: colors?.backgroundSuccess,
72
- meterColorDanger: colors?.backgroundDanger,
73
- meterColorDangerInverse: colors?.backgroundDanger,
74
- meterColorAlert: colors?.backgroundAlert,
75
- meterColorAlertInverse: colors?.backgroundAlert,
76
- meterColorWarning: colors?.backgroundWarning,
77
- meterColorWarningInverse: colors?.backgroundWarning,
78
- meterBorderWidthInverse: borders?.widthSmall,
66
+ meterColorBrand: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
67
+ meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
68
+ meterColorInfo: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
69
+ meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
70
+ meterColorSuccess: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
71
+ meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
72
+ meterColorDanger: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
73
+ meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
74
+ meterColorAlert: colors === null || colors === void 0 ? void 0 : colors.backgroundAlert,
75
+ meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundAlert,
76
+ meterColorWarning: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
77
+ meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
78
+ meterBorderWidthInverse: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
79
79
  meterBorderColorInverse: 'transparent',
80
- trackColor: colors?.backgroundLightest,
80
+ trackColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
81
81
  trackColorInverse: 'transparent',
82
- trackBottomBorderWidth: borders?.widthSmall,
83
- trackBottomBorderColor: colors?.borderMedium,
84
- trackBottomBorderColorInverse: colors?.borderLightest
82
+ trackBottomBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
83
+ trackBottomBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
84
+ trackBottomBorderColorInverse: colors === null || colors === void 0 ? void 0 : colors.borderLightest
85
85
  };
86
86
  return { ...componentVariables,
87
87
  ...themeSpecificStyle[themeName]
package/es/ProgressCircle/index.js CHANGED
@@ -71,6 +71,8 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
71
71
  }
72
72
 
73
73
  componentDidMount() {
74
+ var _this$props$makeStyle, _this$props;
75
+
74
76
  if (this.state.shouldAnimateOnMount) {
75
77
  this._timeouts.push(setTimeout(() => {
76
78
  this.setState({
@@ -79,11 +81,13 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
79
81
  }, this.props.animationDelay || 500));
80
82
  }
81
83
 
82
- this.props.makeStyles?.(this.makeStylesVariables);
84
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
83
85
  }
84
86
 
85
87
  componentDidUpdate() {
86
- this.props.makeStyles?.(this.makeStylesVariables);
88
+ var _this$props$makeStyle2, _this$props2;
89
+
90
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
87
91
  }
88
92
 
89
93
  componentWillUnmount() {
@@ -91,17 +95,19 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
91
95
  }
92
96
 
93
97
  render() {
94
- const _this$props = this.props,
95
- color = _this$props.color,
96
- renderValue = _this$props.renderValue,
97
- formatScreenReaderValue = _this$props.formatScreenReaderValue,
98
- meterColor = _this$props.meterColor,
99
- valueNow = _this$props.valueNow,
100
- valueMax = _this$props.valueMax,
101
- screenReaderLabel = _this$props.screenReaderLabel,
102
- size = _this$props.size,
103
- styles = _this$props.styles,
104
- props = _objectWithoutProperties(_this$props, _excluded);
98
+ var _styles$radii, _styles$radii2, _styles$radii3;
99
+
100
+ const _this$props3 = this.props,
101
+ color = _this$props3.color,
102
+ renderValue = _this$props3.renderValue,
103
+ formatScreenReaderValue = _this$props3.formatScreenReaderValue,
104
+ meterColor = _this$props3.meterColor,
105
+ valueNow = _this$props3.valueNow,
106
+ valueMax = _this$props3.valueMax,
107
+ screenReaderLabel = _this$props3.screenReaderLabel,
108
+ size = _this$props3.size,
109
+ styles = _this$props3.styles,
110
+ props = _objectWithoutProperties(_this$props3, _excluded);
105
111
 
106
112
  const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
107
113
  valueNow: valueNow,
@@ -116,12 +122,12 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
116
122
  valueMax
117
123
  });
118
124
  const style = {
119
- strokeDashoffset: `${styles?.dashOffset}em`
125
+ strokeDashoffset: `${styles === null || styles === void 0 ? void 0 : styles.dashOffset}em`
120
126
  };
121
127
  return jsx(View, Object.assign({}, passthroughProps(props), {
122
128
  as: this.props.as,
123
129
  elementRef: this.handleRef,
124
- css: styles?.progressCircle,
130
+ css: styles === null || styles === void 0 ? void 0 : styles.progressCircle,
125
131
  margin: this.props.margin
126
132
  }), jsx(ScreenReaderContent, null, jsx("progress", {
127
133
  max: valueMax,
@@ -131,33 +137,33 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
131
137
  "aria-valuemax": valueMax,
132
138
  "aria-label": labelAndValueText
133
139
  })), value && jsx("span", {
134
- css: styles?.center,
140
+ css: styles === null || styles === void 0 ? void 0 : styles.center,
135
141
  "aria-hidden": "true"
136
142
  }, jsx("span", {
137
- css: styles?.value
143
+ css: styles === null || styles === void 0 ? void 0 : styles.value
138
144
  }, value)), jsx("svg", {
139
- css: styles?.circle,
145
+ css: styles === null || styles === void 0 ? void 0 : styles.circle,
140
146
  role: "presentation",
141
147
  focusable: "false"
142
148
  }, jsx("circle", {
143
- css: styles?.track,
149
+ css: styles === null || styles === void 0 ? void 0 : styles.track,
144
150
  role: "presentation",
145
151
  cx: "50%",
146
152
  cy: "50%",
147
- r: styles?.radii?.radius
153
+ r: styles === null || styles === void 0 ? void 0 : (_styles$radii = styles.radii) === null || _styles$radii === void 0 ? void 0 : _styles$radii.radius
148
154
  }), jsx("circle", {
149
- css: styles?.border,
155
+ css: styles === null || styles === void 0 ? void 0 : styles.border,
150
156
  role: "presentation",
151
157
  cx: "50%",
152
158
  cy: "50%",
153
- r: styles?.radii?.borderOffsetRadius
159
+ r: styles === null || styles === void 0 ? void 0 : (_styles$radii2 = styles.radii) === null || _styles$radii2 === void 0 ? void 0 : _styles$radii2.borderOffsetRadius
154
160
  }), jsx("circle", {
155
- css: styles?.meter,
161
+ css: styles === null || styles === void 0 ? void 0 : styles.meter,
156
162
  role: "presentation",
157
163
  style: style,
158
164
  cx: "50%",
159
165
  cy: "50%",
160
- r: styles?.radii?.radius
166
+ r: styles === null || styles === void 0 ? void 0 : (_styles$radii3 = styles.radii) === null || _styles$radii3 === void 0 ? void 0 : _styles$radii3.radius
161
167
  })));
162
168
  }
163
169
 
package/es/ProgressCircle/theme.js CHANGED
@@ -74,18 +74,18 @@ const generateComponentTheme = theme => {
74
74
  meterColorBrand: theme['ic-brand-primary']
75
75
  },
76
76
  'canvas-high-contrast': {
77
- meterColorBrandInverse: colors?.backgroundLightest,
78
- meterColorSuccessInverse: colors?.backgroundLightest,
79
- meterColorInfoInverse: colors?.backgroundLightest,
80
- meterColorAlertInverse: colors?.backgroundLightest,
81
- meterColorWarningInverse: colors?.backgroundLightest,
82
- meterColorDangerInverse: colors?.backgroundLightest
77
+ meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
78
+ meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
79
+ meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
80
+ meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
81
+ meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
82
+ meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
83
83
  }
84
84
  };
85
85
  const componentVariables = {
86
- fontFamily: typography?.fontFamily,
87
- fontWeight: typography?.fontWeightNormal,
88
- lineHeight: typography?.lineHeightCondensed,
86
+ fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
87
+ fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
88
+ lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
89
89
  xSmallSize: `${size.xSmall}em`,
90
90
  xSmallRadius: `${radius.xSmall}em`,
91
91
  xSmallCircumference: `${circumference(radius.xSmall)}em`,
@@ -110,26 +110,26 @@ const generateComponentTheme = theme => {
110
110
  largeTransform: `${transform(size.large)}em`,
111
111
  largeStrokeWidth: `${strokeWidth.large}em`,
112
112
  largeBorderOffset: `${borderOffsetRadius.large}em`,
113
- color: colors?.textDarkest,
114
- colorInverse: colors?.textLightest,
115
- trackColor: colors?.backgroundLightest,
113
+ color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
114
+ colorInverse: colors === null || colors === void 0 ? void 0 : colors.textLightest,
115
+ trackColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
116
116
  trackColorInverse: 'transparent',
117
- trackBorderColor: colors?.borderMedium,
118
- trackBorderColorInverse: colors?.borderLightest,
117
+ trackBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
118
+ trackBorderColorInverse: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
119
119
  // variables are split out for inverse to allow
120
120
  // color value changes for inverse-high-contrast
121
- meterColorBrand: colors?.backgroundBrand,
122
- meterColorBrandInverse: colors?.backgroundBrand,
123
- meterColorInfo: colors?.backgroundInfo,
124
- meterColorInfoInverse: colors?.backgroundInfo,
125
- meterColorSuccess: colors?.backgroundSuccess,
126
- meterColorSuccessInverse: colors?.backgroundSuccess,
127
- meterColorDanger: colors?.backgroundDanger,
128
- meterColorDangerInverse: colors?.backgroundDanger,
129
- meterColorAlert: colors?.backgroundAlert,
130
- meterColorAlertInverse: colors?.backgroundAlert,
131
- meterColorWarning: colors?.backgroundWarning,
132
- meterColorWarningInverse: colors?.backgroundWarning
121
+ meterColorBrand: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
122
+ meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
123
+ meterColorInfo: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
124
+ meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
125
+ meterColorSuccess: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
126
+ meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
127
+ meterColorDanger: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
128
+ meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
129
+ meterColorAlert: colors === null || colors === void 0 ? void 0 : colors.backgroundAlert,
130
+ meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundAlert,
131
+ meterColorWarning: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
132
+ meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning
133
133
  };
134
134
  return { ...componentVariables,
135
135
  ...themeSpecificStyle[themeName]
package/lib/ProgressBar/index.js CHANGED
@@ -53,25 +53,29 @@ let ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
53
53
  }
54
54
 
55
55
  componentDidMount() {
56
- this.props.makeStyles?.();
56
+ var _this$props$makeStyle, _this$props;
57
+
58
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
57
59
  }
58
60
 
59
61
  componentDidUpdate() {
60
- this.props.makeStyles?.();
62
+ var _this$props$makeStyle2, _this$props2;
63
+
64
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
61
65
  }
62
66
 
63
67
  render() {
64
- const _this$props = this.props,
65
- renderValue = _this$props.renderValue,
66
- formatScreenReaderValue = _this$props.formatScreenReaderValue,
67
- valueNow = _this$props.valueNow,
68
- valueMax = _this$props.valueMax,
69
- screenReaderLabel = _this$props.screenReaderLabel,
70
- size = _this$props.size,
71
- color = _this$props.color,
72
- meterColor = _this$props.meterColor,
73
- styles = _this$props.styles,
74
- props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
68
+ const _this$props3 = this.props,
69
+ renderValue = _this$props3.renderValue,
70
+ formatScreenReaderValue = _this$props3.formatScreenReaderValue,
71
+ valueNow = _this$props3.valueNow,
72
+ valueMax = _this$props3.valueMax,
73
+ screenReaderLabel = _this$props3.screenReaderLabel,
74
+ size = _this$props3.size,
75
+ color = _this$props3.color,
76
+ meterColor = _this$props3.meterColor,
77
+ styles = _this$props3.styles,
78
+ props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
75
79
  const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
76
80
  valueNow: valueNow,
77
81
  valueMax: valueMax
@@ -88,15 +92,15 @@ let ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
88
92
 
89
93
  return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
90
94
  as: this.props.as,
91
- css: styles?.progressBar,
95
+ css: styles === null || styles === void 0 ? void 0 : styles.progressBar,
92
96
  margin: this.props.margin,
93
97
  elementRef: this.handleRef
94
98
  }), (0, _emotion.jsx)("span", {
95
- css: styles?.trackLayout
99
+ css: styles === null || styles === void 0 ? void 0 : styles.trackLayout
96
100
  }, (0, _emotion.jsx)("span", {
97
- css: styles?.trackBorder
101
+ css: styles === null || styles === void 0 ? void 0 : styles.trackBorder
98
102
  }), (0, _emotion.jsx)("progress", {
99
- css: styles?.track,
103
+ css: styles === null || styles === void 0 ? void 0 : styles.track,
100
104
  max: valueMax,
101
105
  value: valueNow,
102
106
  role: "progressbar",
@@ -105,7 +109,7 @@ let ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
105
109
  "aria-valuemax": valueMax,
106
110
  "aria-label": labelAndValueText
107
111
  })), value && (0, _emotion.jsx)("span", {
108
- css: styles?.value,
112
+ css: styles === null || styles === void 0 ? void 0 : styles.value,
109
113
  "aria-hidden": "true"
110
114
  }, value));
111
115
  }
package/lib/ProgressBar/theme.js CHANGED
@@ -45,50 +45,50 @@ const generateComponentTheme = theme => {
45
45
  meterColorBrand: theme['ic-brand-primary']
46
46
  },
47
47
  'canvas-high-contrast': {
48
- meterColorBrandInverse: colors?.backgroundLightest,
49
- meterColorSuccessInverse: colors?.backgroundLightest,
50
- meterColorInfoInverse: colors?.backgroundLightest,
51
- meterColorAlertInverse: colors?.backgroundLightest,
52
- meterColorWarningInverse: colors?.backgroundLightest,
53
- meterColorDangerInverse: colors?.backgroundLightest
48
+ meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
49
+ meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
50
+ meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
51
+ meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
52
+ meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
53
+ meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
54
54
  }
55
55
  };
56
56
  const componentVariables = {
57
- fontFamily: typography?.fontFamily,
58
- fontWeight: typography?.fontWeightNormal,
59
- lineHeight: typography?.lineHeightCondensed,
60
- fontSize: typography?.fontSizeMedium,
61
- xSmallHeight: spacing?.xSmall,
62
- xSmallValueFontSize: typography?.fontSizeXSmall,
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
63
  smallHeight: '1.125rem',
64
64
  // product design wants = 18px
65
- smallValueFontSize: typography?.fontSizeXSmall,
66
- mediumHeight: spacing?.medium,
67
- mediumValueFontSize: typography?.fontSizeSmall,
68
- largeHeight: spacing?.large,
69
- largeValueFontSize: typography?.fontSizeMedium,
70
- valuePadding: `${spacing?.xxSmall}`,
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
71
  // variables are split out for inverse to allow
72
72
  // color value changes for inverse-high-constrast
73
- meterColorBrand: colors?.backgroundBrand,
74
- meterColorBrandInverse: colors?.backgroundBrand,
75
- meterColorInfo: colors?.backgroundInfo,
76
- meterColorInfoInverse: colors?.backgroundInfo,
77
- meterColorSuccess: colors?.backgroundSuccess,
78
- meterColorSuccessInverse: colors?.backgroundSuccess,
79
- meterColorDanger: colors?.backgroundDanger,
80
- meterColorDangerInverse: colors?.backgroundDanger,
81
- meterColorAlert: colors?.backgroundAlert,
82
- meterColorAlertInverse: colors?.backgroundAlert,
83
- meterColorWarning: colors?.backgroundWarning,
84
- meterColorWarningInverse: colors?.backgroundWarning,
85
- meterBorderWidthInverse: borders?.widthSmall,
73
+ meterColorBrand: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
74
+ meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
75
+ meterColorInfo: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
76
+ meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
77
+ meterColorSuccess: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
78
+ meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
79
+ meterColorDanger: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
80
+ meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
81
+ meterColorAlert: colors === null || colors === void 0 ? void 0 : colors.backgroundAlert,
82
+ meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundAlert,
83
+ meterColorWarning: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
84
+ meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
85
+ meterBorderWidthInverse: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
86
86
  meterBorderColorInverse: 'transparent',
87
- trackColor: colors?.backgroundLightest,
87
+ trackColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
88
88
  trackColorInverse: 'transparent',
89
- trackBottomBorderWidth: borders?.widthSmall,
90
- trackBottomBorderColor: colors?.borderMedium,
91
- trackBottomBorderColorInverse: colors?.borderLightest
89
+ trackBottomBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
90
+ trackBottomBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
91
+ trackBottomBorderColorInverse: colors === null || colors === void 0 ? void 0 : colors.borderLightest
92
92
  };
93
93
  return { ...componentVariables,
94
94
  ...themeSpecificStyle[themeName]
package/lib/ProgressCircle/index.js CHANGED
@@ -66,6 +66,8 @@ let ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
66
66
  }
67
67
 
68
68
  componentDidMount() {
69
+ var _this$props$makeStyle, _this$props;
70
+
69
71
  if (this.state.shouldAnimateOnMount) {
70
72
  this._timeouts.push(setTimeout(() => {
71
73
  this.setState({
@@ -74,11 +76,13 @@ let ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
74
76
  }, this.props.animationDelay || 500));
75
77
  }
76
78
 
77
- this.props.makeStyles?.(this.makeStylesVariables);
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);
78
80
  }
79
81
 
80
82
  componentDidUpdate() {
81
- this.props.makeStyles?.(this.makeStylesVariables);
83
+ var _this$props$makeStyle2, _this$props2;
84
+
85
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
82
86
  }
83
87
 
84
88
  componentWillUnmount() {
@@ -86,17 +90,19 @@ let ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
86
90
  }
87
91
 
88
92
  render() {
89
- const _this$props = this.props,
90
- color = _this$props.color,
91
- renderValue = _this$props.renderValue,
92
- formatScreenReaderValue = _this$props.formatScreenReaderValue,
93
- meterColor = _this$props.meterColor,
94
- valueNow = _this$props.valueNow,
95
- valueMax = _this$props.valueMax,
96
- screenReaderLabel = _this$props.screenReaderLabel,
97
- size = _this$props.size,
98
- styles = _this$props.styles,
99
- props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
93
+ var _styles$radii, _styles$radii2, _styles$radii3;
94
+
95
+ const _this$props3 = this.props,
96
+ color = _this$props3.color,
97
+ renderValue = _this$props3.renderValue,
98
+ formatScreenReaderValue = _this$props3.formatScreenReaderValue,
99
+ meterColor = _this$props3.meterColor,
100
+ valueNow = _this$props3.valueNow,
101
+ valueMax = _this$props3.valueMax,
102
+ screenReaderLabel = _this$props3.screenReaderLabel,
103
+ size = _this$props3.size,
104
+ styles = _this$props3.styles,
105
+ props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
100
106
  const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
101
107
  valueNow: valueNow,
102
108
  valueMax: valueMax
@@ -110,12 +116,12 @@ let ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
110
116
  valueMax
111
117
  });
112
118
  const style = {
113
- strokeDashoffset: `${styles?.dashOffset}em`
119
+ strokeDashoffset: `${styles === null || styles === void 0 ? void 0 : styles.dashOffset}em`
114
120
  };
115
121
  return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
116
122
  as: this.props.as,
117
123
  elementRef: this.handleRef,
118
- css: styles?.progressCircle,
124
+ css: styles === null || styles === void 0 ? void 0 : styles.progressCircle,
119
125
  margin: this.props.margin
120
126
  }), (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, (0, _emotion.jsx)("progress", {
121
127
  max: valueMax,
@@ -125,33 +131,33 @@ let ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
125
131
  "aria-valuemax": valueMax,
126
132
  "aria-label": labelAndValueText
127
133
  })), value && (0, _emotion.jsx)("span", {
128
- css: styles?.center,
134
+ css: styles === null || styles === void 0 ? void 0 : styles.center,
129
135
  "aria-hidden": "true"
130
136
  }, (0, _emotion.jsx)("span", {
131
- css: styles?.value
137
+ css: styles === null || styles === void 0 ? void 0 : styles.value
132
138
  }, value)), (0, _emotion.jsx)("svg", {
133
- css: styles?.circle,
139
+ css: styles === null || styles === void 0 ? void 0 : styles.circle,
134
140
  role: "presentation",
135
141
  focusable: "false"
136
142
  }, (0, _emotion.jsx)("circle", {
137
- css: styles?.track,
143
+ css: styles === null || styles === void 0 ? void 0 : styles.track,
138
144
  role: "presentation",
139
145
  cx: "50%",
140
146
  cy: "50%",
141
- r: styles?.radii?.radius
147
+ r: styles === null || styles === void 0 ? void 0 : (_styles$radii = styles.radii) === null || _styles$radii === void 0 ? void 0 : _styles$radii.radius
142
148
  }), (0, _emotion.jsx)("circle", {
143
- css: styles?.border,
149
+ css: styles === null || styles === void 0 ? void 0 : styles.border,
144
150
  role: "presentation",
145
151
  cx: "50%",
146
152
  cy: "50%",
147
- r: styles?.radii?.borderOffsetRadius
153
+ r: styles === null || styles === void 0 ? void 0 : (_styles$radii2 = styles.radii) === null || _styles$radii2 === void 0 ? void 0 : _styles$radii2.borderOffsetRadius
148
154
  }), (0, _emotion.jsx)("circle", {
149
- css: styles?.meter,
155
+ css: styles === null || styles === void 0 ? void 0 : styles.meter,
150
156
  role: "presentation",
151
157
  style: style,
152
158
  cx: "50%",
153
159
  cy: "50%",
154
- r: styles?.radii?.radius
160
+ r: styles === null || styles === void 0 ? void 0 : (_styles$radii3 = styles.radii) === null || _styles$radii3 === void 0 ? void 0 : _styles$radii3.radius
155
161
  })));
156
162
  }
157
163
 
package/lib/ProgressCircle/theme.js CHANGED
@@ -81,18 +81,18 @@ const generateComponentTheme = theme => {
81
81
  meterColorBrand: theme['ic-brand-primary']
82
82
  },
83
83
  'canvas-high-contrast': {
84
- meterColorBrandInverse: colors?.backgroundLightest,
85
- meterColorSuccessInverse: colors?.backgroundLightest,
86
- meterColorInfoInverse: colors?.backgroundLightest,
87
- meterColorAlertInverse: colors?.backgroundLightest,
88
- meterColorWarningInverse: colors?.backgroundLightest,
89
- meterColorDangerInverse: colors?.backgroundLightest
84
+ meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
85
+ meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
86
+ meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
87
+ meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
88
+ meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
89
+ meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
90
90
  }
91
91
  };
92
92
  const componentVariables = {
93
- fontFamily: typography?.fontFamily,
94
- fontWeight: typography?.fontWeightNormal,
95
- lineHeight: typography?.lineHeightCondensed,
93
+ fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
94
+ fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
95
+ lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
96
96
  xSmallSize: `${size.xSmall}em`,
97
97
  xSmallRadius: `${radius.xSmall}em`,
98
98
  xSmallCircumference: `${circumference(radius.xSmall)}em`,
@@ -117,26 +117,26 @@ const generateComponentTheme = theme => {
117
117
  largeTransform: `${transform(size.large)}em`,
118
118
  largeStrokeWidth: `${strokeWidth.large}em`,
119
119
  largeBorderOffset: `${borderOffsetRadius.large}em`,
120
- color: colors?.textDarkest,
121
- colorInverse: colors?.textLightest,
122
- trackColor: colors?.backgroundLightest,
120
+ color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
121
+ colorInverse: colors === null || colors === void 0 ? void 0 : colors.textLightest,
122
+ trackColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
123
123
  trackColorInverse: 'transparent',
124
- trackBorderColor: colors?.borderMedium,
125
- trackBorderColorInverse: colors?.borderLightest,
124
+ trackBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
125
+ trackBorderColorInverse: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
126
126
  // variables are split out for inverse to allow
127
127
  // color value changes for inverse-high-contrast
128
- meterColorBrand: colors?.backgroundBrand,
129
- meterColorBrandInverse: colors?.backgroundBrand,
130
- meterColorInfo: colors?.backgroundInfo,
131
- meterColorInfoInverse: colors?.backgroundInfo,
132
- meterColorSuccess: colors?.backgroundSuccess,
133
- meterColorSuccessInverse: colors?.backgroundSuccess,
134
- meterColorDanger: colors?.backgroundDanger,
135
- meterColorDangerInverse: colors?.backgroundDanger,
136
- meterColorAlert: colors?.backgroundAlert,
137
- meterColorAlertInverse: colors?.backgroundAlert,
138
- meterColorWarning: colors?.backgroundWarning,
139
- meterColorWarningInverse: colors?.backgroundWarning
128
+ meterColorBrand: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
129
+ meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
130
+ meterColorInfo: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
131
+ meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
132
+ meterColorSuccess: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
133
+ meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
134
+ meterColorDanger: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
135
+ meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
136
+ meterColorAlert: colors === null || colors === void 0 ? void 0 : colors.backgroundAlert,
137
+ meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundAlert,
138
+ meterColorWarning: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
139
+ meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning
140
140
  };
141
141
  return { ...componentVariables,
142
142
  ...themeSpecificStyle[themeName]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-progress",
3
- "version": "8.18.0",
3
+ "version": "8.18.1-snapshot.2+ca4c1ff9d",
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.13.10",
27
- "@instructure/console": "8.18.0",
28
- "@instructure/emotion": "8.18.0",
29
- "@instructure/shared-types": "8.18.0",
30
- "@instructure/ui-a11y-content": "8.18.0",
31
- "@instructure/ui-color-utils": "8.18.0",
32
- "@instructure/ui-react-utils": "8.18.0",
33
- "@instructure/ui-testable": "8.18.0",
34
- "@instructure/ui-view": "8.18.0",
27
+ "@instructure/console": "8.18.1-snapshot.2+ca4c1ff9d",
28
+ "@instructure/emotion": "8.18.1-snapshot.2+ca4c1ff9d",
29
+ "@instructure/shared-types": "8.18.1-snapshot.2+ca4c1ff9d",
30
+ "@instructure/ui-a11y-content": "8.18.1-snapshot.2+ca4c1ff9d",
31
+ "@instructure/ui-color-utils": "8.18.1-snapshot.2+ca4c1ff9d",
32
+ "@instructure/ui-react-utils": "8.18.1-snapshot.2+ca4c1ff9d",
33
+ "@instructure/ui-testable": "8.18.1-snapshot.2+ca4c1ff9d",
34
+ "@instructure/ui-view": "8.18.1-snapshot.2+ca4c1ff9d",
35
35
  "prop-types": "^15"
36
36
  },
37
37
  "devDependencies": {
38
- "@instructure/ui-babel-preset": "8.18.0",
39
- "@instructure/ui-test-locator": "8.18.0",
40
- "@instructure/ui-test-utils": "8.18.0",
41
- "@instructure/ui-themes": "8.18.0"
38
+ "@instructure/ui-babel-preset": "8.18.1-snapshot.2+ca4c1ff9d",
39
+ "@instructure/ui-test-locator": "8.18.1-snapshot.2+ca4c1ff9d",
40
+ "@instructure/ui-test-utils": "8.18.1-snapshot.2+ca4c1ff9d",
41
+ "@instructure/ui-themes": "8.18.1-snapshot.2+ca4c1ff9d"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "react": ">=16.8 <=17"
@@ -46,5 +46,6 @@
46
46
  "publishConfig": {
47
47
  "access": "public"
48
48
  },
49
- "sideEffects": false
49
+ "sideEffects": false,
50
+ "gitHead": "ca4c1ff9d3985151ae0758fb596de41652dbb58b"
50
51
  }