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

package/lib/ProgressBar/v2/styles.js

@@ -0,0 +1,243 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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.
+ */
+
+/**
+ * ---
+ * 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} sharedTokens Shared token object that stores common values for the theme.
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props, _sharedTokens) => {
+  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,
+    shouldAnimate = props.shouldAnimate;
+  const meterColorClassName = typeof meterColor === 'function' ? meterColor({
+    valueNow,
+    valueMax
+  }) : meterColor;
+  const currentValue = valueNow > valueMax ? valueMax : valueNow < 0 ? 0 : valueNow;
+  const currentValuePercent = `${currentValue / valueMax * 100}%`;
+  const sizeVariants = {
+    'x-small': {
+      track: {
+        height: componentTheme.xSmallHeight
+      },
+      value: {
+        fontSize: componentTheme.xSmallValueFontSize
+      }
+    },
+    small: {
+      track: {
+        height: componentTheme.smallHeight
+      },
+      // product design wants = 18px
+      value: {
+        fontSize: componentTheme.smallValueFontSize
+      }
+    },
+    medium: {
+      track: {
+        height: componentTheme.mediumHeight
+      },
+      value: {
+        fontSize: componentTheme.mediumValueFontSize
+      }
+    },
+    large: {
+      track: {
+        height: componentTheme.largeHeight
+      },
+      value: {
+        fontSize: componentTheme.largeValueFontSize
+      }
+    }
+  };
+  const colorVariants = {
+    primary: {
+      trackLayout: {
+        background: componentTheme.trackColor,
+        borderWidth: componentTheme.trackBottomBorderWidth,
+        borderStyle: 'solid',
+        borderColor: componentTheme.borderColor
+      },
+      trackBorder: {
+        borderBottomColor: componentTheme.trackBottomBorderColor
+      },
+      value: {
+        color: componentTheme.textColor
+      },
+      htmlProgress: {
+        borderColor: componentTheme.borderColor
+      }
+    },
+    'primary-inverse': {
+      trackLayout: {
+        background: componentTheme.trackColorInverse,
+        borderWidth: componentTheme.trackBottomBorderWidth,
+        borderStyle: 'solid',
+        borderColor: componentTheme.borderColorInverse
+      },
+      trackBorder: {
+        borderBottomColor: componentTheme.trackBottomBorderColorInverse
+      },
+      value: {
+        color: componentTheme.textColorInverse
+      },
+      htmlProgress: {
+        borderColor: componentTheme.borderColorInverse
+      }
+    }
+  };
+  const trackBackgroundVariants = {
+    primary: {
+      brand: {
+        background: componentTheme.meterColorBrand
+      },
+      info: {
+        background: componentTheme.meterColorInfo
+      },
+      success: {
+        background: componentTheme.meterColorSuccess
+      },
+      danger: {
+        background: componentTheme.meterColorDanger
+      },
+      warning: {
+        background: componentTheme.meterColorWarning
+      },
+      alert: {
+        background: componentTheme.meterColorAlert
+      }
+    },
+    'primary-inverse': {
+      brand: {
+        background: componentTheme.meterColorBrandInverse
+      },
+      info: {
+        background: componentTheme.meterColorInfoInverse
+      },
+      success: {
+        background: componentTheme.meterColorSuccessInverse
+      },
+      danger: {
+        background: componentTheme.meterColorDangerInverse
+      },
+      warning: {
+        background: componentTheme.meterColorWarningInverse
+      },
+      alert: {
+        background: componentTheme.meterColorAlertInverse
+      }
+    }
+  };
+  return {
+    progressBar: {
+      label: 'progressBar',
+      display: 'flex',
+      alignItems: 'center',
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      lineHeight: componentTheme.lineHeight,
+      fontSize: componentTheme.fontSize,
+      borderRadius: componentTheme.borderRadius
+    },
+    trackLayout: {
+      label: 'progressBar__trackLayout',
+      position: 'relative',
+      flex: 1,
+      borderRadius: 'inherit',
+      ...colorVariants[color].trackLayout
+    },
+    track: {
+      label: 'progressBar__track',
+      display: 'block',
+      boxSizing: 'border-box',
+      width: '100%',
+      borderBottomWidth: componentTheme.trackBottomBorderWidth,
+      borderBottomStyle: 'solid',
+      background: 'transparent',
+      // Inner border-radius must be smaller than outer to avoid geometric gaps with nested rounded borders
+      // Formula: inner radius = outer radius - border width
+      borderTopLeftRadius: `calc(${componentTheme.borderRadius} - ${componentTheme.trackBottomBorderWidth})`,
+      borderBottomLeftRadius: `calc(${componentTheme.borderRadius} - ${componentTheme.trackBottomBorderWidth})`,
+      // Negative margin pulls track down so trackLayout's full border overlaps and hides track's bottom border.
+      // When trackLayout border is visible (light/dark themes), it creates a clean full border appearance.
+      // When trackLayout border is transparent (legacy Canvas), track's bottom border remains visible.
+      marginBottom: `calc(-1 * ${componentTheme.trackBottomBorderWidth})`,
+      ...sizeVariants[size].track,
+      ...colorVariants[color].trackBorder
+    },
+    trackValue: {
+      label: 'progressBar__trackValue',
+      display: 'block',
+      boxSizing: 'border-box',
+      height: '100%',
+      width: currentValuePercent,
+      maxWidth: '100%',
+      borderRadius: 'inherit',
+      ...(shouldAnimate && {
+        transition: 'all 0.5s'
+      }),
+      ...(meterColorClassName && trackBackgroundVariants[color][meterColorClassName])
+    },
+    value: {
+      label: 'progressBar__value',
+      lineHeight: 1,
+      boxSizing: 'border-box',
+      paddingInlineStart: componentTheme.valuePadding,
+      flex: '0 0 5.625rem',
+      ...sizeVariants[size].value,
+      ...colorVariants[color].value
+    },
+    htmlProgress: {
+      label: 'progressBar__htmlProgress',
+      display: 'block',
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      width: '100%',
+      height: '100%',
+      boxSizing: 'border-box',
+      zIndex: -1,
+      opacity: 0,
+      ...colorVariants[color].htmlProgress
+    }
+  };
+};
+var _default = exports.default = generateStyle;

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

@@ -8,7 +8,7 @@ exports.default = exports.ProgressCircle = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
-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");
@@ -46,7 +46,7 @@ var _dec, _class, _ProgressCircle;
 category: components
 ---
 **/
-let ProgressCircle = exports.ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_ProgressCircle = class ProgressCircle extends _react.Component {
+let ProgressCircle = exports.ProgressCircle = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_ProgressCircle = class ProgressCircle extends _react.Component {
   constructor(props) {
     super(props);
     this._timeouts = [];
@@ -113,7 +113,7 @@ let ProgressCircle = exports.ProgressCircle = (_dec = (0, _emotion.withStyle)(_s
     const style = {
       strokeDashoffset: `${styles === null || styles === void 0 ? void 0 : styles.dashOffset}em`
     };
-    return (0, _jsxRuntime.jsxs)(_View.View, {
+    return (0, _jsxRuntime.jsxs)(_v11_.View, {
       ...(0, _passthroughProps.passthroughProps)(props),
       as: this.props.as,
       elementRef: this.handleRef,

package/lib/ProgressCircle/v2/index.js

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProgressCircle = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
+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 = ["color", "renderValue", "formatScreenReaderValue", "meterColor", "valueNow", "valueMax", "screenReaderLabel", "size", "styles"];
+var _dec, _class, _ProgressCircle;
+/*
+ * 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 ProgressCircle = exports.ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_ProgressCircle = class ProgressCircle extends _react.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({
+          shouldAnimateOnMount: false
+        });
+      }, 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 = (0, _objectWithoutProperties2.default)(_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
+    // 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 = (0, _callRenderProp.callRenderProp)(renderValue, {
+      valueNow: valueNow,
+      valueMax: valueMax
+    });
+    const style = {
+      strokeDashoffset: `${styles === null || styles === void 0 ? void 0 : styles.dashOffset}em`
+    };
+    return (0, _jsxRuntime.jsxs)(_latest.View, {
+      ...(0, _passthroughProps.passthroughProps)(props),
+      as: this.props.as,
+      elementRef: this.handleRef,
+      css: styles === null || styles === void 0 ? void 0 : styles.progressCircle,
+      margin: this.props.margin,
+      "data-cid": "ProgressCircle",
+      children: [(0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
+        children: (0, _jsxRuntime.jsx)("progress", {
+          max: valueMax,
+          value: valueNow,
+          "aria-valuetext": labelAndValueText
+        })
+      }), value && (0, _jsxRuntime.jsx)("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.center,
+        "aria-hidden": "true",
+        children: (0, _jsxRuntime.jsx)("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.value,
+          children: value
+        })
+      }), (0, _jsxRuntime.jsxs)("svg", {
+        css: styles === null || styles === void 0 ? void 0 : styles.circle,
+        role: "presentation",
+        focusable: "false",
+        children: [(0, _jsxRuntime.jsx)("circle", {
+          css: styles === null || styles === void 0 ? void 0 : styles.track,
+          role: "presentation",
+          cx: "50%",
+          cy: "50%",
+          r: styles === null || styles === void 0 ? void 0 : (_styles$radii = styles.radii) === null || _styles$radii === void 0 ? void 0 : _styles$radii.radius
+        }), (0, _jsxRuntime.jsx)("circle", {
+          css: styles === null || styles === void 0 ? void 0 : styles.border,
+          role: "presentation",
+          cx: "50%",
+          cy: "50%",
+          r: styles === null || styles === void 0 ? void 0 : (_styles$radii2 = styles.radii) === null || _styles$radii2 === void 0 ? void 0 : _styles$radii2.borderOffsetRadius
+        }), (0, _jsxRuntime.jsx)("circle", {
+          css: styles === null || styles === void 0 ? void 0 : styles.meter,
+          role: "presentation",
+          style: style,
+          cx: "50%",
+          cy: "50%",
+          r: styles === null || styles === void 0 ? void 0 : (_styles$radii3 = styles.radii) === null || _styles$radii3 === void 0 ? void 0 : _styles$radii3.radius
+        })]
+      })]
+    });
+  }
+}, _ProgressCircle.displayName = "ProgressCircle", _ProgressCircle.componentId = 'ProgressCircle', _ProgressCircle.allowedProps = _props.allowedProps, _ProgressCircle.defaultProps = {
+  formatScreenReaderValue: ({
+    valueNow,
+    valueMax
+  }) => `${valueNow} / ${valueMax}`,
+  size: 'medium',
+  valueMax: 100,
+  valueNow: 0,
+  as: 'div',
+  color: 'primary',
+  shouldAnimateOnMount: false,
+  // default to showing `success` color on completion
+  meterColor: ({
+    valueNow,
+    valueMax
+  }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
+}, _ProgressCircle)) || _class);
+var _default = exports.default = ProgressCircle;

package/lib/ProgressCircle/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', 'margin', 'elementRef', 'as', 'shouldAnimateOnMount', 'animationDelay'];