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

package/lib/ProgressCircle/v2/styles.js

@@ -0,0 +1,355 @@
+"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} 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()
+  };
+};
+var _default = exports.default = generateStyle;

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

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "ProgressBar", {
   enumerable: true,
   get: function () {
-    return _ProgressBar.ProgressBar;
+    return _v.ProgressBar;
   }
 });
 Object.defineProperty(exports, "ProgressCircle", {
   enumerable: true,
   get: function () {
-    return _ProgressCircle.ProgressCircle;
+    return _v2.ProgressCircle;
   }
 });
-var _ProgressBar = require("./ProgressBar");
-var _ProgressCircle = require("./ProgressCircle");
+var _v = require("../ProgressBar/v1");
+var _v2 = require("../ProgressCircle/v1");

package/lib/exports/b.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ProgressBar", {
+  enumerable: true,
+  get: function () {
+    return _v.ProgressBar;
+  }
+});
+Object.defineProperty(exports, "ProgressCircle", {
+  enumerable: true,
+  get: function () {
+    return _v2.ProgressCircle;
+  }
+});
+var _v = require("../ProgressBar/v2");
+var _v2 = require("../ProgressCircle/v2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-progress",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "Styled HTML <progress /> elements for showing completion of a task",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,21 +15,21 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-a11y-content": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-view": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0"
+    "@instructure/console": "11.6.1-snapshot-129",
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-a11y-content": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-view": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2",
-    "@instructure/ui-themes": "11.6.0",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-axe-check": "11.6.0"
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -39,17 +39,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

package/src/ProgressBar/{index.tsx → v1/index.tsx}

@@ -24,10 +24,10 @@
 
 import { Component } from 'react'
 
-import { View } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
 import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'