@instructure/ui-progress 11.6.0 → 11.6.1-snapshot-129

package/es/ProgressCircle/v2/styles.js

@@ -0,0 +1,349 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props, _sharedTokens, 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;
+  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
+    return parseFloat(componentTheme[`${camelSize}Circumference`]);
+  };
+  const getRadii = () => {
+    const camelSize = size === 'x-small' ? 'xSmall' : size;
+    return {
+      radius: componentTheme[`${camelSize}Radius`],
+      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
+      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: {
+        width: componentTheme.xSmallSize,
+        height: componentTheme.xSmallSize
+      },
+      circle: {
+        width: componentTheme.xSmallSize,
+        height: componentTheme.xSmallSize
+      },
+      value: {
+        padding: '0.5rem'
+      },
+      border: {
+        transformOrigin: `${componentTheme.xSmallTransform} ${componentTheme.xSmallTransform}`
+      },
+      track: {
+        transformOrigin: `${componentTheme.xSmallTransform} ${componentTheme.xSmallTransform}`,
+        strokeWidth: componentTheme.xSmallStrokeWidth
+      },
+      meter: {
+        strokeWidth: componentTheme.xSmallStrokeWidth,
+        strokeDasharray: componentTheme.xSmallCircumference,
+        ...(shouldAnimateOnMount && {
+          strokeDashoffset: `${componentTheme.xSmallCircumference} !important`
+        })
+      }
+    },
+    small: {
+      progressCircle: {
+        width: componentTheme.smallSize,
+        height: componentTheme.smallSize
+      },
+      circle: {
+        width: componentTheme.smallSize,
+        height: componentTheme.smallSize
+      },
+      value: {},
+      border: {
+        transformOrigin: `${componentTheme.smallTransform} ${componentTheme.smallTransform}`
+      },
+      track: {
+        transformOrigin: `${componentTheme.smallTransform} ${componentTheme.smallTransform}`,
+        strokeWidth: componentTheme.smallStrokeWidth
+      },
+      meter: {
+        strokeWidth: componentTheme.smallStrokeWidth,
+        strokeDasharray: componentTheme.smallCircumference,
+        ...(shouldAnimateOnMount && {
+          strokeDashoffset: `${componentTheme.smallCircumference} !important`
+        })
+      }
+    },
+    medium: {
+      progressCircle: {
+        width: componentTheme.mediumSize,
+        height: componentTheme.mediumSize
+      },
+      circle: {
+        width: componentTheme.mediumSize,
+        height: componentTheme.mediumSize
+      },
+      value: {},
+      border: {
+        transformOrigin: `${componentTheme.mediumTransform} ${componentTheme.mediumTransform}`
+      },
+      track: {
+        transformOrigin: `${componentTheme.mediumTransform} ${componentTheme.mediumTransform}`,
+        strokeWidth: componentTheme.mediumStrokeWidth
+      },
+      meter: {
+        strokeWidth: componentTheme.mediumStrokeWidth,
+        strokeDasharray: componentTheme.mediumCircumference,
+        ...(shouldAnimateOnMount && {
+          strokeDashoffset: `${componentTheme.mediumCircumference} !important`
+        })
+      }
+    },
+    large: {
+      progressCircle: {
+        width: componentTheme.largeSize,
+        height: componentTheme.largeSize
+      },
+      circle: {
+        width: componentTheme.largeSize,
+        height: componentTheme.largeSize
+      },
+      value: {},
+      border: {
+        transformOrigin: `${componentTheme.largeTransform} ${componentTheme.largeTransform}`
+      },
+      track: {
+        transformOrigin: `${componentTheme.largeTransform} ${componentTheme.largeTransform}`,
+        strokeWidth: componentTheme.largeStrokeWidth
+      },
+      meter: {
+        strokeWidth: componentTheme.largeStrokeWidth,
+        strokeDasharray: componentTheme.largeCircumference,
+        ...(shouldAnimateOnMount && {
+          strokeDashoffset: `${componentTheme.largeCircumference} !important`
+        })
+      }
+    }
+  };
+  const colorVariants = {
+    primary: {
+      track: {
+        stroke: componentTheme.trackColor
+      },
+      value: {
+        color: componentTheme.color
+      },
+      border: {
+        stroke: componentTheme.trackBorderColor
+      }
+    },
+    'primary-inverse': {
+      track: {
+        stroke: componentTheme.trackColorInverse
+      },
+      value: {
+        color: componentTheme.colorInverse
+      },
+      border: {
+        stroke: componentTheme.trackBorderColorInverse
+      }
+    }
+  };
+  const meterColorVariants = {
+    primary: {
+      brand: {
+        stroke: componentTheme.meterColorBrand
+      },
+      info: {
+        stroke: componentTheme.meterColorInfo
+      },
+      warning: {
+        stroke: componentTheme.meterColorWarning
+      },
+      danger: {
+        stroke: componentTheme.meterColorDanger
+      },
+      alert: {
+        stroke: componentTheme.meterColorAlert
+      },
+      success: {
+        stroke: componentTheme.meterColorSuccess
+      }
+    },
+    'primary-inverse': {
+      brand: {
+        stroke: componentTheme.meterColorBrandInverse
+      },
+      info: {
+        stroke: componentTheme.meterColorInfoInverse
+      },
+      warning: {
+        stroke: componentTheme.meterColorWarningInverse
+      },
+      danger: {
+        stroke: componentTheme.meterColorDangerInverse
+      },
+      alert: {
+        stroke: componentTheme.meterColorAlertInverse
+      },
+      success: {
+        stroke: componentTheme.meterColorSuccessInverse
+      }
+    }
+  };
+  return {
+    progressCircle: {
+      label: 'progressCircle',
+      display: 'inline-block',
+      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
+        font-size
+      */
+      fontSize: '1rem',
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      lineHeight: componentTheme.lineHeight,
+      ...sizeVariants[size].progressCircle
+    },
+    center: {
+      label: 'progressCircle__center',
+      transition: 'all 0.5s',
+      transitionDelay: '1s',
+      display: 'block',
+      position: 'absolute',
+      transform: 'translate3d(0, 0, 0)',
+      top: 0,
+      left: 0,
+      height: '100%',
+      width: '100%',
+      borderRadius: '50%',
+      ...(shouldAnimateOnMount && {
+        opacity: 0,
+        transform: 'translate3d(0, 10%, 0)'
+      })
+    },
+    value: {
+      label: 'progressCircle__value',
+      boxSizing: 'border-box',
+      wordWrap: 'break-word',
+      textAlign: 'center',
+      borderRadius: '50%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '1.5rem',
+      width: '100%',
+      height: '100%',
+      lineHeight: 1,
+      ...sizeVariants[size].value,
+      ...colorVariants[color].value
+    },
+    circle: {
+      label: 'progressCircle__circle',
+      transform: 'rotate(-90deg)',
+      display: 'block',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      ...sizeVariants[size].circle
+    },
+    track: {
+      label: 'progressCircle__track',
+      fill: 'none',
+      opacity: 1,
+      transition: 'all 0.5s',
+      transitionDelay: '0.2s',
+      transform: 'translate3d(0, 0, 0)',
+      ...sizeVariants[size].track,
+      ...colorVariants[color].track,
+      ...(shouldAnimateOnMount && {
+        opacity: 0,
+        transform: 'translate3d(0, 0, 0)'
+      })
+    },
+    border: {
+      label: 'progressCircle__border',
+      fill: 'none',
+      opacity: 1,
+      transition: 'all 0.5s',
+      transform: 'translate3d(0, 0, 0) scale(1)',
+      ...sizeVariants[size].border,
+      ...colorVariants[color].border,
+      ...(shouldAnimateOnMount && {
+        opacity: 0,
+        transform: 'translate3d(0, 0, 0) scale(0.75)'
+      })
+    },
+    meter: {
+      label: 'progressCircle__meter',
+      fill: 'none',
+      transition: 'stroke-dashoffset 1s',
+      transform: 'translate3d(0, 0, 0)',
+      ...sizeVariants[size].meter,
+      ...(getMeterColorClassName && meterColorVariants[color][getMeterColorClassName]),
+      ...(shouldAnimateOnMount && {
+        opacity: 0
+      })
+    },
+    radii: getRadii(),
+    dashOffset: getDashOffset()
+  };
+};
+export default generateStyle;

package/es/{index.js → exports/a.js}

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

package/es/exports/b.js

@@ -0,0 +1,25 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export { ProgressBar } from "../ProgressBar/v2/index.js";
+export { ProgressCircle } from "../ProgressCircle/v2/index.js";

package/lib/ProgressBar/{index.js → v1/index.js}

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ProgressBar = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
-var _View = require("@instructure/ui-view/lib/View");
+var _v11_ = require("@instructure/ui-view/v11_6");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _emotion = require("@instructure/emotion");
@@ -45,7 +45,7 @@ var _dec, _class, _ProgressBar;
 category: components
 ---
 **/
-let ProgressBar = exports.ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_ProgressBar = class ProgressBar extends _react.Component {
+let ProgressBar = exports.ProgressBar = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_ProgressBar = class ProgressBar extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -86,7 +86,7 @@ let ProgressBar = exports.ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.
       valueNow: valueNow,
       valueMax: valueMax
     });
-    return (0, _jsxRuntime.jsxs)(_View.View, {
+    return (0, _jsxRuntime.jsxs)(_v11_.View, {
       ...(0, _passthroughProps.passthroughProps)(props),
       as: this.props.as,
       css: styles === null || styles === void 0 ? void 0 : styles.progressBar,

package/lib/ProgressBar/v2/index.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProgressBar = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _latest = require("@instructure/ui-view/latest");
+var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+const _excluded = ["renderValue", "formatScreenReaderValue", "valueNow", "valueMax", "screenReaderLabel", "size", "color", "meterColor", "renderValueInside", "styles"];
+var _dec, _class, _ProgressBar;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+category: components
+---
+**/
+let ProgressBar = exports.ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_ProgressBar = class ProgressBar extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    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,
+      renderValueInside = _this$props3.renderValueInside,
+      styles = _this$props3.styles,
+      props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+    const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
+      valueNow: valueNow,
+      valueMax: valueMax
+    }) : void 0;
+    const value = (0, _callRenderProp.callRenderProp)(renderValue, {
+      valueNow: valueNow,
+      valueMax: valueMax
+    });
+    return (0, _jsxRuntime.jsxs)(_latest.View, {
+      ...(0, _passthroughProps.passthroughProps)(props),
+      as: this.props.as,
+      css: styles === null || styles === void 0 ? void 0 : styles.progressBar,
+      margin: this.props.margin,
+      elementRef: this.handleRef,
+      "data-cid": "ProgressBar",
+      children: [(0, _jsxRuntime.jsxs)("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.trackLayout,
+        children: [(0, _jsxRuntime.jsx)("progress", {
+          css: styles === null || styles === void 0 ? void 0 : styles.htmlProgress,
+          max: valueMax,
+          value: valueNow,
+          "aria-valuetext": valueText,
+          "aria-label": screenReaderLabel
+        }), (0, _jsxRuntime.jsx)("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.track,
+          role: "presentation",
+          "aria-hidden": "true",
+          children: (0, _jsxRuntime.jsx)("span", {
+            css: styles === null || styles === void 0 ? void 0 : styles.trackValue,
+            children: renderValueInside && value
+          })
+        })]
+      }), value && !renderValueInside && (0, _jsxRuntime.jsx)("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.value,
+        "aria-hidden": "true",
+        children: value
+      })]
+    });
+  }
+}, _ProgressBar.displayName = "ProgressBar", _ProgressBar.componentId = 'ProgressBar', _ProgressBar.allowedProps = _props.allowedProps, _ProgressBar.defaultProps = {
+  formatScreenReaderValue: ({
+    valueNow,
+    valueMax
+  }) => `${valueNow} / ${valueMax}`,
+  size: 'medium',
+  valueMax: 100,
+  valueNow: 0,
+  as: 'div',
+  color: 'primary',
+  shouldAnimate: false,
+  // default to showing `success` color on completion
+  meterColor: ({
+    valueNow,
+    valueMax
+  }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
+}, _ProgressBar)) || _class);
+var _default = exports.default = ProgressBar;

package/lib/ProgressBar/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['screenReaderLabel', 'size', 'valueMax', 'valueNow', 'formatScreenReaderValue', 'renderValue', 'color', 'meterColor', 'shouldAnimate', 'margin', 'elementRef', 'as'];