@telus-uds/components-base 1.23.0 → 1.24.0

package/CHANGELOG.md

@@ -1,12 +1,20 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 14 Dec 2022 01:42:49 GMT and should not be manually modified.
+This log was last generated on Thu, 15 Dec 2022 23:06:31 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.24.0
+
+Thu, 15 Dec 2022 23:06:31 GMT
+
+### Minor changes
+
+- Add `isStatic` prop to `ActivityIndicator` and `Spinner` (shahzaibkhalidmalik@outlook.com)
+
 ## 1.23.0
 
-Wed, 14 Dec 2022 01:42:49 GMT
+Wed, 14 Dec 2022 01:46:10 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -2541,6 +2541,17 @@
       "docs": {
         "description": "`ActivityIndicator` renders a visual loading state.\nIt does not handle positioning or layout of that visual loader.",
         "props": {
+          "isStatic": {
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            },
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "If true, it should render a static spinner"
+          },
           "variant": {
             "type": {
               "name": "objectOf",

package/lib/ActivityIndicator/Spinner.js

@@ -39,11 +39,13 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     size,
     color,
     thickness,
-    label
+    label,
+    isStatic = false
   } = _ref;
   const {
     reduceMotionEnabled
   } = (0, _A11yInfoProvider.useA11yInfo)();
+  const reduceMotion = reduceMotionEnabled || isStatic;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
     ref: ref,
     width: "".concat(size, "px"),
@@ -53,7 +55,7 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     role: "progressbar",
     "aria-busy": true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-      children: [reduceMotionEnabled ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("animateTransform", {
+      children: [reduceMotion ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("animateTransform", {
         attributeName: "transform",
         type: "rotate",
         values: "-180 24 24;".concat(360 + _shared.MIN_STROKE_ANGLE - 180, " 24 24"),
@@ -66,9 +68,9 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         cx: "24",
         cy: "24",
         r: "20",
-        strokeDasharray: reduceMotionEnabled ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
+        strokeDasharray: reduceMotion ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
         strokeDashoffset: 0,
-        children: reduceMotionEnabled ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: reduceMotion ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
             attributeName: "stroke-dashoffset",
             values: "0;-10;".concat(MIN_SVG_LENGTH - SVG_CIRCUMFERENCE),

package/lib/ActivityIndicator/Spinner.native.js

@@ -34,7 +34,8 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     size,
     color,
     thickness,
-    label
+    label,
+    isStatic = false
   } = _ref;
 
   const {
@@ -44,6 +45,7 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const {
     reduceMotionEnabled
   } = (0, _A11yInfoProvider.useA11yInfo)();
+  const reduceMotion = reduceMotionEnabled || isStatic;
 
   _react.default.useLayoutEffect(() => {
     const loop = _Animated.default.timing(timer, {
@@ -55,8 +57,8 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       isInteraction: false
     });
 
-    if (!reduceMotionEnabled) _Animated.default.loop(loop).start();else loop.stop();
-  }, [timer, reduceMotionEnabled]);
+    if (!reduceMotion) _Animated.default.loop(loop).start();else loop.stop();
+  }, [timer, reduceMotion]);
 
   const frames = 60 * _shared.DURATION / 1000;
 
@@ -64,10 +66,10 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 
   const containerStyle = {
     width: size,
-    height: size / (reduceMotionEnabled ? 1.5 : 2),
+    height: size / (reduceMotion ? 1.5 : 2),
     overflow: 'hidden'
   };
-  const animationFrequency = reduceMotionEnabled ? [0] : [0, 1]; // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
+  const animationFrequency = reduceMotion ? [0] : [0, 1]; // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
@@ -106,7 +108,7 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           height: size
         };
 
-        if (!reduceMotionEnabled) {
+        if (!reduceMotion) {
           layerStyle.transform = [{
             rotate: timer.interpolate({
               inputRange: [0, 1],

package/lib/ActivityIndicator/index.js

@@ -27,7 +27,8 @@ const ActivityIndicator = _ref => {
   let {
     variant,
     tokens,
-    label
+    label,
+    isStatic = false
   } = _ref;
   const {
     size,
@@ -38,7 +39,8 @@ const ActivityIndicator = _ref => {
     size: size,
     color: color,
     thickness: thickness,
-    label: label
+    label: label,
+    isStatic: isStatic
   });
 };
 
@@ -49,7 +51,12 @@ ActivityIndicator.propTypes = {
   /**
    * A visually hidden accessible label describing the action taking place
    */
-  label: _propTypes.default.string.isRequired
+  label: _propTypes.default.string.isRequired,
+
+  /**
+   * If true, it should render a static spinner
+   */
+  isStatic: _propTypes.default.bool
 };
 var _default = ActivityIndicator;
 exports.default = _default;

package/lib/ActivityIndicator/shared.js

@@ -22,6 +22,7 @@ const propTypes = {
   color: _propTypes.default.string.isRequired,
   label: _propTypes.default.string.isRequired,
   size: _propTypes.default.number.isRequired,
-  thickness: _propTypes.default.number.isRequired
+  thickness: _propTypes.default.number.isRequired,
+  isStatic: _propTypes.default.bool
 };
 exports.propTypes = propTypes;

package/lib-module/ActivityIndicator/Spinner.js

@@ -26,11 +26,13 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
     size,
     color,
     thickness,
-    label
+    label,
+    isStatic = false
   } = _ref;
   const {
     reduceMotionEnabled
   } = useA11yInfo();
+  const reduceMotion = reduceMotionEnabled || isStatic;
   return /*#__PURE__*/_jsx("svg", {
     ref: ref,
     width: "".concat(size, "px"),
@@ -40,7 +42,7 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
     role: "progressbar",
     "aria-busy": true,
     children: /*#__PURE__*/_jsxs("g", {
-      children: [reduceMotionEnabled ? null : /*#__PURE__*/_jsx("animateTransform", {
+      children: [reduceMotion ? null : /*#__PURE__*/_jsx("animateTransform", {
         attributeName: "transform",
         type: "rotate",
         values: "-180 24 24;".concat(360 + MIN_STROKE_ANGLE - 180, " 24 24"),
@@ -53,9 +55,9 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
         cx: "24",
         cy: "24",
         r: "20",
-        strokeDasharray: reduceMotionEnabled ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
+        strokeDasharray: reduceMotion ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
         strokeDashoffset: 0,
-        children: reduceMotionEnabled ? null : /*#__PURE__*/_jsxs(_Fragment, {
+        children: reduceMotion ? null : /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx("animate", {
             attributeName: "stroke-dashoffset",
             values: "0;-10;".concat(MIN_SVG_LENGTH - SVG_CIRCUMFERENCE),

package/lib-module/ActivityIndicator/Spinner.native.js

@@ -13,7 +13,8 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
     size,
     color,
     thickness,
-    label
+    label,
+    isStatic = false
   } = _ref;
   const {
     current: timer
@@ -21,6 +22,7 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
   const {
     reduceMotionEnabled
   } = useA11yInfo();
+  const reduceMotion = reduceMotionEnabled || isStatic;
   React.useLayoutEffect(() => {
     const loop = Animated.timing(timer, {
       duration: DURATION,
@@ -30,16 +32,16 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
       toValue: 1,
       isInteraction: false
     });
-    if (!reduceMotionEnabled) Animated.loop(loop).start();else loop.stop();
-  }, [timer, reduceMotionEnabled]);
+    if (!reduceMotion) Animated.loop(loop).start();else loop.stop();
+  }, [timer, reduceMotion]);
   const frames = 60 * DURATION / 1000;
   const easing = Easing.bezier(...BEZIER);
   const containerStyle = {
     width: size,
-    height: size / (reduceMotionEnabled ? 1.5 : 2),
+    height: size / (reduceMotion ? 1.5 : 2),
     overflow: 'hidden'
   };
-  const animationFrequency = reduceMotionEnabled ? [0] : [0, 1]; // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
+  const animationFrequency = reduceMotion ? [0] : [0, 1]; // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
 
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
@@ -78,7 +80,7 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
           height: size
         };
 
-        if (!reduceMotionEnabled) {
+        if (!reduceMotion) {
           layerStyle.transform = [{
             rotate: timer.interpolate({
               inputRange: [0, 1],

package/lib-module/ActivityIndicator/index.js

@@ -14,7 +14,8 @@ const ActivityIndicator = _ref => {
   let {
     variant,
     tokens,
-    label
+    label,
+    isStatic = false
   } = _ref;
   const {
     size,
@@ -25,7 +26,8 @@ const ActivityIndicator = _ref => {
     size: size,
     color: color,
     thickness: thickness,
-    label: label
+    label: label,
+    isStatic: isStatic
   });
 };
 
@@ -36,6 +38,11 @@ ActivityIndicator.propTypes = {
   /**
    * A visually hidden accessible label describing the action taking place
    */
-  label: PropTypes.string.isRequired
+  label: PropTypes.string.isRequired,
+
+  /**
+   * If true, it should render a static spinner
+   */
+  isStatic: PropTypes.bool
 };
 export default ActivityIndicator;

package/lib-module/ActivityIndicator/shared.js

@@ -8,5 +8,6 @@ export const propTypes = {
   color: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   size: PropTypes.number.isRequired,
-  thickness: PropTypes.number.isRequired
+  thickness: PropTypes.number.isRequired,
+  isStatic: PropTypes.bool
 };

package/package.json

@@ -70,5 +70,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.23.0"
+  "version": "1.24.0"
 }

package/src/ActivityIndicator/Spinner.jsx

@@ -21,8 +21,9 @@ const bezierProps = {
 }
 // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
 // It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
-const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
+const Spinner = forwardRef(({ size, color, thickness, label, isStatic = false }, ref) => {
   const { reduceMotionEnabled } = useA11yInfo()
+  const reduceMotion = reduceMotionEnabled || isStatic
   return (
     <svg
       ref={ref}
@@ -34,7 +35,7 @@ const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
       aria-busy={true}
     >
       <g>
-        {reduceMotionEnabled ? null : (
+        {reduceMotion ? null : (
           <animateTransform
             attributeName="transform"
             type="rotate"
@@ -50,12 +51,10 @@ const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
           cx="24"
           cy="24"
           r="20"
-          strokeDasharray={
-            reduceMotionEnabled ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE]
-          }
+          strokeDasharray={reduceMotion ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE]}
           strokeDashoffset={0}
         >
-          {reduceMotionEnabled ? null : (
+          {reduceMotion ? null : (
             <>
               <animate
                 attributeName="stroke-dashoffset"

package/src/ActivityIndicator/Spinner.native.jsx

@@ -6,9 +6,10 @@ import { useA11yInfo } from '../A11yInfoProvider'
 const ea = MIN_EMPTY_ANGLE / 2
 const sa = MIN_STROKE_ANGLE / 2
 
-const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
+const Spinner = forwardRef(({ size, color, thickness, label, isStatic = false }, ref) => {
   const { current: timer } = React.useRef(new Animated.Value(0))
   const { reduceMotionEnabled } = useA11yInfo()
+  const reduceMotion = reduceMotionEnabled || isStatic
 
   React.useLayoutEffect(() => {
     const loop = Animated.timing(timer, {
@@ -20,18 +21,18 @@ const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
       isInteraction: false
     })
 
-    if (!reduceMotionEnabled) Animated.loop(loop).start()
+    if (!reduceMotion) Animated.loop(loop).start()
     else loop.stop()
-  }, [timer, reduceMotionEnabled])
+  }, [timer, reduceMotion])
 
   const frames = (60 * DURATION) / 1000
   const easing = Easing.bezier(...BEZIER)
   const containerStyle = {
     width: size,
-    height: size / (reduceMotionEnabled ? 1.5 : 2),
+    height: size / (reduceMotion ? 1.5 : 2),
     overflow: 'hidden'
   }
-  const animationFrequency = reduceMotionEnabled ? [0] : [0, 1]
+  const animationFrequency = reduceMotion ? [0] : [0, 1]
 
   // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
   return (
@@ -72,7 +73,7 @@ const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
             height: size
           }
 
-          if (!reduceMotionEnabled) {
+          if (!reduceMotion) {
             layerStyle.transform = [
               {
                 rotate: timer.interpolate({

package/src/ActivityIndicator/index.jsx

@@ -9,9 +9,11 @@ import Spinner from './Spinner'
  * `ActivityIndicator` renders a visual loading state.
  * It does not handle positioning or layout of that visual loader.
  */
-const ActivityIndicator = ({ variant, tokens, label }) => {
+const ActivityIndicator = ({ variant, tokens, label, isStatic = false }) => {
   const { size, color, thickness } = useThemeTokens('ActivityIndicator', tokens, variant)
-  return <Spinner size={size} color={color} thickness={thickness} label={label} />
+  return (
+    <Spinner size={size} color={color} thickness={thickness} label={label} isStatic={isStatic} />
+  )
 }
 
 ActivityIndicator.propTypes = {
@@ -20,7 +22,11 @@ ActivityIndicator.propTypes = {
   /**
    * A visually hidden accessible label describing the action taking place
    */
-  label: PropTypes.string.isRequired
+  label: PropTypes.string.isRequired,
+  /**
+   * If true, it should render a static spinner
+   */
+  isStatic: PropTypes.bool
 }
 
 export default ActivityIndicator

package/src/ActivityIndicator/shared.js

@@ -10,5 +10,6 @@ export const propTypes = {
   color: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   size: PropTypes.number.isRequired,
-  thickness: PropTypes.number.isRequired
+  thickness: PropTypes.number.isRequired,
+  isStatic: PropTypes.bool
 }