@instructure/ui-progress 8.33.1 → 8.33.2

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.33.2](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2) (2023-01-25)
+
+**Note:** Version bump only for package @instructure/ui-progress
+
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-progress

package/es/ProgressBar/ProgressBarLocator.js

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
-import { ProgressBar } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+import { ProgressBar } from './index';
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 export const ProgressBarLocator = locator(ProgressBar.selector);

package/es/ProgressBar/__examples__/ProgressBar.examples.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React from 'react';
 const valueMax = 100;
 export default {
@@ -29,7 +30,7 @@ export default {
     valueNow: [0, 40, 80, 100],
     renderValue: [null, _ref => {
       let valueNow = _ref.valueNow,
-          valueMax = _ref.valueMax;
+        valueMax = _ref.valueMax;
       return /*#__PURE__*/React.createElement("span", null, Math.round(valueNow / valueMax * 100));
     }]
   },

package/es/ProgressBar/index.js

@@ -1,8 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["renderValue", "formatScreenReaderValue", "valueNow", "valueMax", "screenReaderLabel", "size", "color", "meterColor", "styles"];
-
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -26,7 +24,6 @@ var _dec, _dec2, _class, _class2;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 /** @jsx jsx */
 import { Component } from 'react';
 import { View } from '@instructure/ui-view';
@@ -36,67 +33,59 @@ import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
+
 /**
 ---
 category: components
 ---
 @tsProps
 **/
-
 let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class ProgressBar extends Component {
   constructor() {
     super(...arguments);
     this.ref = null;
-
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
-
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
-
   render() {
     const _this$props3 = this.props,
-          renderValue = _this$props3.renderValue,
-          formatScreenReaderValue = _this$props3.formatScreenReaderValue,
-          valueNow = _this$props3.valueNow,
-          valueMax = _this$props3.valueMax,
-          screenReaderLabel = _this$props3.screenReaderLabel,
-          size = _this$props3.size,
-          color = _this$props3.color,
-          meterColor = _this$props3.meterColor,
-          styles = _this$props3.styles,
-          props = _objectWithoutProperties(_this$props3, _excluded);
-
+      renderValue = _this$props3.renderValue,
+      formatScreenReaderValue = _this$props3.formatScreenReaderValue,
+      valueNow = _this$props3.valueNow,
+      valueMax = _this$props3.valueMax,
+      screenReaderLabel = _this$props3.screenReaderLabel,
+      size = _this$props3.size,
+      color = _this$props3.color,
+      meterColor = _this$props3.meterColor,
+      styles = _this$props3.styles,
+      props = _objectWithoutProperties(_this$props3, _excluded);
     const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
       valueNow: valueNow,
       valueMax: valueMax
-    }) : void 0; // consolidating the label and aria-valuetext to put in aria-label because
+    }) : void 0;
+    // consolidating the label and aria-valuetext to put in aria-label because
     // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
     // But leaving aria-valuetext because JAWS ignores aria-label
-
     const labelAndValueText = `${screenReaderLabel} ${valueText}`;
     const value = callRenderProp(renderValue, {
       valueNow: valueNow,
       valueMax: valueMax
     });
-    /* eslint-disable jsx-a11y/no-redundant-roles, jsx-a11y/no-noninteractive-element-to-interactive-role */
 
+    /* eslint-disable jsx-a11y/no-redundant-roles, jsx-a11y/no-noninteractive-element-to-interactive-role */
     return jsx(View, Object.assign({}, passthroughProps(props), {
       as: this.props.as,
       css: styles === null || styles === void 0 ? void 0 : styles.progressBar,
@@ -120,11 +109,10 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       "aria-hidden": "true"
     }, value));
   }
-
 }, _class2.displayName = "ProgressBar", _class2.componentId = 'ProgressBar', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   formatScreenReaderValue: _ref => {
     let valueNow = _ref.valueNow,
-        valueMax = _ref.valueMax;
+      valueMax = _ref.valueMax;
     return `${valueNow} / ${valueMax}`;
   },
   size: 'medium',
@@ -135,7 +123,7 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   // default to showing `success` color on completion
   meterColor: _ref2 => {
     let valueNow = _ref2.valueNow,
-        valueMax = _ref2.valueMax;
+      valueMax = _ref2.valueMax;
     return valueNow / valueMax >= 1 ? 'success' : 'brand';
   }
 }, _class2)) || _class) || _class);

package/es/ProgressBar/styles.js

@@ -34,12 +34,12 @@
  */
 const generateStyle = (componentTheme, props) => {
   const _props$valueNow = props.valueNow,
-        valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
-        _props$valueMax = props.valueMax,
-        valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax,
-        size = props.size,
-        color = props.color,
-        meterColor = props.meterColor;
+    valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
+    _props$valueMax = props.valueMax,
+    valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax,
+    size = props.size,
+    color = props.color,
+    meterColor = props.meterColor;
   const meterColorClassName = typeof meterColor === 'function' ? meterColor({
     valueNow,
     valueMax
@@ -180,9 +180,11 @@ const generateStyle = (componentTheme, props) => {
         '&::-webkit-progress-bar': {
           background: 'transparent'
         },
-        '&::-webkit-progress-value': { ...(meterColorClassName && trackBackgroundVariants[color][meterColorClassName])
+        '&::-webkit-progress-value': {
+          ...(meterColorClassName && trackBackgroundVariants[color][meterColorClassName])
         },
-        '&::-moz-progress-bar': { ...(meterColorClassName && trackBackgroundVariants[color][meterColorClassName])
+        '&::-moz-progress-bar': {
+          ...(meterColorClassName && trackBackgroundVariants[color][meterColorClassName])
         },
         '&::-ms-fill': {
           border: 'none',
@@ -200,5 +202,4 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 export default generateStyle;

package/es/ProgressBar/theme.js

@@ -29,10 +29,10 @@
  */
 const generateComponentTheme = theme => {
   const borders = theme.borders,
-        colors = theme.colors,
-        spacing = theme.spacing,
-        typography = theme.typography,
-        themeName = theme.key;
+    colors = theme.colors,
+    spacing = theme.spacing,
+    typography = theme.typography,
+    themeName = theme.key;
   const themeSpecificStyle = {
     canvas: {
       meterColorBrand: theme['ic-brand-primary']
@@ -83,9 +83,9 @@ const generateComponentTheme = theme => {
     trackBottomBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
     trackBottomBorderColorInverse: colors === null || colors === void 0 ? void 0 : colors.borderLightest
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyle[themeName]
   };
 };
-
 export default generateComponentTheme;

package/es/ProgressCircle/ProgressCircleLocator.js

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
-import { ProgressCircle } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+import { ProgressCircle } from './index';
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 export const ProgressCircleLocator = locator(ProgressCircle.selector);

package/es/ProgressCircle/__examples__/ProgressCircle.examples.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React from 'react';
 const valueMax = 100;
 export default {
@@ -29,7 +30,7 @@ export default {
     valueNow: [0, 40, 80, 100],
     renderValue: [null, _ref => {
       let valueNow = _ref.valueNow,
-          valueMax = _ref.valueMax;
+        valueMax = _ref.valueMax;
       return /*#__PURE__*/React.createElement("span", null, Math.round(valueNow / valueMax * 100));
     }]
   },

package/es/ProgressCircle/index.js

@@ -1,8 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["color", "renderValue", "formatScreenReaderValue", "meterColor", "valueNow", "valueMax", "screenReaderLabel", "size", "styles"];
-
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -37,42 +35,36 @@ import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
+
 /**
 ---
 category: components
 ---
 @tsProps
 **/
-
 let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class ProgressCircle extends Component {
   constructor(props) {
     super(props);
     this._timeouts = [];
     this.ref = null;
-
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
-
     this.state = {
       shouldAnimateOnMount: props.shouldAnimateOnMount
     };
   }
-
   get makeStylesVariables() {
     return {
       shouldAnimateOnMount: this.state.shouldAnimateOnMount
     };
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-
     if (this.state.shouldAnimateOnMount) {
       this._timeouts.push(setTimeout(() => {
         this.setState({
@@ -80,42 +72,35 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
         });
       }, this.props.animationDelay || 500));
     }
-
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
   }
-
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
   }
-
   componentWillUnmount() {
     this._timeouts.forEach(timeout => clearTimeout(timeout));
   }
-
   render() {
     var _styles$radii, _styles$radii2, _styles$radii3;
-
     const _this$props3 = this.props,
-          color = _this$props3.color,
-          renderValue = _this$props3.renderValue,
-          formatScreenReaderValue = _this$props3.formatScreenReaderValue,
-          meterColor = _this$props3.meterColor,
-          valueNow = _this$props3.valueNow,
-          valueMax = _this$props3.valueMax,
-          screenReaderLabel = _this$props3.screenReaderLabel,
-          size = _this$props3.size,
-          styles = _this$props3.styles,
-          props = _objectWithoutProperties(_this$props3, _excluded);
-
+      color = _this$props3.color,
+      renderValue = _this$props3.renderValue,
+      formatScreenReaderValue = _this$props3.formatScreenReaderValue,
+      meterColor = _this$props3.meterColor,
+      valueNow = _this$props3.valueNow,
+      valueMax = _this$props3.valueMax,
+      screenReaderLabel = _this$props3.screenReaderLabel,
+      size = _this$props3.size,
+      styles = _this$props3.styles,
+      props = _objectWithoutProperties(_this$props3, _excluded);
     const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
       valueNow: valueNow,
       valueMax: valueMax
-    }) : void 0; // consolidating the label and aria-valuetext to put in aria-label because
+    }) : void 0;
+    // consolidating the label and aria-valuetext to put in aria-label because
     // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
     // But leaving aria-valuetext because JAWS ignores aria-label
-
     const labelAndValueText = `${screenReaderLabel} ${valueText}`;
     const value = callRenderProp(renderValue, {
       valueNow: valueNow,
@@ -166,11 +151,10 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
       r: styles === null || styles === void 0 ? void 0 : (_styles$radii3 = styles.radii) === null || _styles$radii3 === void 0 ? void 0 : _styles$radii3.radius
     })));
   }
-
 }, _class2.displayName = "ProgressCircle", _class2.componentId = 'ProgressCircle', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   formatScreenReaderValue: _ref => {
     let valueNow = _ref.valueNow,
-        valueMax = _ref.valueMax;
+      valueMax = _ref.valueMax;
     return `${valueNow} / ${valueMax}`;
   },
   size: 'medium',
@@ -182,7 +166,7 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
   // default to showing `success` color on completion
   meterColor: _ref2 => {
     let valueNow = _ref2.valueNow,
-        valueMax = _ref2.valueMax;
+      valueMax = _ref2.valueMax;
     return valueNow / valueMax >= 1 ? 'success' : 'brand';
   }
 }, _class2)) || _class) || _class);

package/es/ProgressCircle/styles.js

@@ -34,24 +34,22 @@
  */
 const generateStyle = (componentTheme, props, state) => {
   const size = props.size,
-        color = props.color,
-        meterColor = props.meterColor,
-        _props$valueNow = props.valueNow,
-        valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
-        _props$valueMax = props.valueMax,
-        valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax;
+    color = props.color,
+    meterColor = props.meterColor,
+    _props$valueNow = props.valueNow,
+    valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
+    _props$valueMax = props.valueMax,
+    valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax;
   const shouldAnimateOnMount = state.shouldAnimateOnMount;
   const getMeterColorClassName = typeof meterColor === 'function' ? meterColor({
     valueNow,
     valueMax
   }) : meterColor;
-
   const getCircumference = () => {
-    const camelSize = size === 'x-small' ? 'xSmall' : size; // get the circumference of the meter circle
-
+    const camelSize = size === 'x-small' ? 'xSmall' : size;
+    // get the circumference of the meter circle
     return parseFloat(componentTheme[`${camelSize}Circumference`]);
   };
-
   const getRadii = () => {
     const camelSize = size === 'x-small' ? 'xSmall' : size;
     return {
@@ -59,25 +57,23 @@ const generateStyle = (componentTheme, props, state) => {
       borderOffsetRadius: componentTheme[`${camelSize}BorderOffset`]
     };
   };
-
   const getDashOffset = () => {
     // send the stroke-dashoffset to the meter circle, checking
     // to make sure current value doesn't exceed max value
     if (valueNow < valueMax) {
-      const circumference = getCircumference(); // figure out how much offset to give the stroke to show the % complete
-
+      const circumference = getCircumference();
+      // figure out how much offset to give the stroke to show the % complete
       return circumference - valueNow / valueMax * circumference;
     } else {
       return 0;
     }
   };
+
   /*
      Using !important on the meter shouldAnimateOnMount versions
      to guarantee that the bars will start showing 0 if the
      animateOnMount prop is set
   */
-
-
   const sizeVariants = {
     'x-small': {
       progressCircle: {
@@ -255,7 +251,6 @@ const generateStyle = (componentTheme, props, state) => {
       verticalAlign: 'middle',
       position: 'relative',
       overflow: 'hidden',
-
       /*
         Seems like a good idea to reset font-size because
         the SVG uses ems and might inherit a container's
@@ -351,5 +346,4 @@ const generateStyle = (componentTheme, props, state) => {
     dashOffset: getDashOffset()
   };
 };
-
 export default generateStyle;

package/es/ProgressCircle/theme.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const radius = {
   xSmall: 1,
   small: 1.8,
@@ -38,10 +39,11 @@ const strokeWidth = {
   small: 0.5,
   medium: 0.625,
   large: 0.875
-}; // Necessary to get the 1px border line to go "under" the meter
+};
+
+// Necessary to get the 1px border line to go "under" the meter
 // strokeWidth is divided in half because SVG strokeWidth is
 // centered along the path of the stroke, unlike CSS
-
 const borderWidth = 0.0625;
 const borderOffsetRadius = {
   xSmall: radius.xSmall - strokeWidth.xSmall / 2 + borderWidth,
@@ -49,25 +51,22 @@ const borderOffsetRadius = {
   medium: radius.medium - strokeWidth.medium / 2 + borderWidth,
   large: radius.large - strokeWidth.large / 2 + borderWidth
 };
-
 const circumference = function (r) {
   return (2 * Math.PI * r).toFixed(3);
 };
-
 const transform = function (s) {
   return s / 2;
 };
+
 /**
  * Generates the theme object for the component from the theme and provided additional information
  * @param  {Object} theme The actual theme object.
  * @return {Object} The final theme object with the overrides and component variables
  */
-
-
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        typography = theme.typography,
-        themeName = theme.key;
+    typography = theme.typography,
+    themeName = theme.key;
   const themeSpecificStyle = {
     canvas: {
       color: theme['ic-brand-font-color-dark'],
@@ -131,9 +130,9 @@ const generateComponentTheme = theme => {
     meterColorWarning: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
     meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyle[themeName]
   };
 };
-
 export default generateComponentTheme;

package/es/index.js

@@ -21,5 +21,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 export { ProgressBar } from './ProgressBar';
 export { ProgressCircle } from './ProgressCircle';

package/lib/ProgressBar/ProgressBarLocator.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ProgressBarLocator = void 0;
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 var _index = require("./index");
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const ProgressBarLocator = (0, _locator.locator)(_index.ProgressBar.selector);
 exports.ProgressBarLocator = ProgressBarLocator;

package/lib/ProgressBar/__examples__/ProgressBar.examples.js

@@ -1,14 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ var _react = _interopRequireDefault(require("react"));
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const valueMax = 100;
 var _default = {
   sectionProp: 'color',
@@ -39,7 +37,7 @@ var _default = {
     valueNow: [0, 40, 80, 100],
     renderValue: [null, _ref => {
       let valueNow = _ref.valueNow,
-          valueMax = _ref.valueMax;
+        valueMax = _ref.valueMax;
       return /*#__PURE__*/_react.default.createElement("span", null, Math.round(valueNow / valueMax * 100));
     }]
   },