@telus-uds/components-base 1.7.1 → 1.8.2

package/lib/Skeleton/Skeleton.js

@@ -33,48 +33,71 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
-const selectSkeletonStyles = ({
-  color,
-  radius,
-  fadeAnimation
-}) => ({
-  backgroundColor: color,
-  borderRadius: radius,
-  ...fadeAnimation
-});
+const selectSkeletonStyles = _ref => {
+  let {
+    color,
+    radius,
+    fadeAnimation
+  } = _ref;
+  return {
+    backgroundColor: color,
+    borderRadius: radius,
+    ...fadeAnimation
+  };
+};
 
-const selectLineStyles = ({
-  skeletonHeight,
-  lineWidth
-}) => ({
-  width: lineWidth,
-  height: skeletonHeight
-});
+const selectLineStyles = _ref2 => {
+  let {
+    skeletonHeight,
+    lineWidth
+  } = _ref2;
+  return {
+    width: lineWidth,
+    height: skeletonHeight
+  };
+};
 
-const selectShapeStyles = ({
-  skeletonHeight
-}) => ({
-  height: skeletonHeight,
-  width: skeletonHeight
-});
+const selectShapeStyles = _ref3 => {
+  let {
+    skeletonHeight
+  } = _ref3;
+  return {
+    height: skeletonHeight,
+    width: skeletonHeight
+  };
+};
 
-const selectSquareStyles = ({
-  radius
-}) => ({
-  borderRadius: radius
-});
+const selectSquareStyles = _ref4 => {
+  let {
+    radius
+  } = _ref4;
+  return {
+    borderRadius: radius
+  };
+};
 
-const Skeleton = /*#__PURE__*/(0, _react.forwardRef)(({
-  tokens,
-  variant,
-  size,
-  characters,
-  lines,
-  shape = 'line',
-  ...rest
-}, ref) => {
+const Skeleton = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
+  let {
+    tokens,
+    variant,
+    size,
+    sizeIndex = size,
+    sizePixels,
+    characters,
+    lines,
+    shape = 'line',
+    ...rest
+  } = _ref5;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Skeleton', tokens, variant);
-  const skeletonHeight = (0, _utils.useSpacingScale)(size || themeTokens.size);
+  const pixels = (0, _utils.useResponsiveProp)(sizePixels);
+  const spacingScaleValue = typeof pixels === 'number' ? // Size by an exact number of pixels
+  {
+    options: {
+      size: pixels
+    }
+  } : // Size by an index on the spacing scale (getting default index from theme if none provided)
+  sizeIndex || themeTokens.size;
+  const skeletonHeight = (0, _utils.useSpacingScale)(spacingScaleValue);
   const nativeAnimation = (0, _useSkeletonNativeAnimation.default)();
 
   const getAnimationBaseOnPlatform = () => {
@@ -114,12 +137,15 @@ const Skeleton = /*#__PURE__*/(0, _react.forwardRef)(({
     });
   };
 
-  const renderSkeleton = (index = 0) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
-    testID: "skeleton",
-    style: [selectSkeletonStyles({ ...themeTokens,
-      fadeAnimation: getAnimationBaseOnPlatform()
-    }), getStyledBasedOnShape()]
-  }, `skeleton-${index + 1}`);
+  const renderSkeleton = function () {
+    let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+      testID: "skeleton",
+      style: [selectSkeletonStyles({ ...themeTokens,
+        fadeAnimation: getAnimationBaseOnPlatform()
+      }), getStyledBasedOnShape()]
+    }, `skeleton-${index + 1}`);
+  };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
     space: themeTokens.spaceBetweenLines,
@@ -132,9 +158,45 @@ Skeleton.displayName = 'Skeleton';
 Skeleton.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('Skeleton'),
   variant: _utils.variantProp.propType,
-  size: _propTypes.default.number,
+
+  /**
+   * Sets the size of Skeleton lines or shape according to the theme's spacing scale. For example, size={1} gives the smallest non-zero theme-defined spacing size.
+   *
+   * May also accept an object with responsive viewport keys or spacing scale options - see `useSpacingScale` for details.
+   */
+  sizeIndex: _utils.spacingProps.types.spacingValue,
+
+  /**
+   * @deprecated alias for `sizeIndex`
+   */
+  size: _utils.spacingProps.types.spacingValue,
+
+  /**
+   * Sets the size of Skeleton lines or shape to an exact number of pixels. Use when it's necessary to exactly match sizes of images or other boxes.
+   *
+   * Accepts a number or an object with responsive viewport keys, e.g. { xs: 32, lg: 64 } would be 32px at xs, sm and md and 64 at lg and xl viewports.
+   */
+  sizePixels: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.number),
+
+  /**
+   * Determines the width of simulated lines of text if the Skeleton's shape is 'line' (the default shape).
+   *
+   * Only has any affect if shape is line (the default). If unset, takes a default value from the theme.
+   */
   characters: _propTypes.default.number,
+
+  /**
+   * Determines how many Skeleton items are rendered (default 1).
+   *
+   * Recommended usage is to simulate paragraphs of text when Skeleton's shape is 'line' (the default shape).
+   *
+   * The amount of spacing between multiple lines is controlled by theme tokens.
+   */
   lines: _propTypes.default.number,
+
+  /**
+   * Determines if the skeleton should resemble lines of text (default), a circle, or a square box with themed rounded corners.
+   */
   shape: _propTypes.default.oneOf(['line', 'circle', 'box'])
 };
 var _default = Skeleton;

package/lib/Skeleton/skeleton.constant.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ANIMATION_DURATION = exports.OPACITY_STOP = exports.DEFAULT_OPACITY = void 0;
+exports.OPACITY_STOP = exports.DEFAULT_OPACITY = exports.ANIMATION_DURATION = void 0;
 const DEFAULT_OPACITY = 1;
 exports.DEFAULT_OPACITY = DEFAULT_OPACITY;
 const OPACITY_STOP = 0.4;

package/lib/Spacer/Spacer.js

@@ -76,11 +76,12 @@ const selectSizeStyle = (size, direction) => ({
  */
 
 
-const Spacer = /*#__PURE__*/(0, _react.forwardRef)(({
-  space = 1,
-  direction = 'column',
-  ...rest
-}, ref) => {
+const Spacer = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    space = 1,
+    direction = 'column',
+    ...rest
+  } = _ref;
   const size = (0, _utils.useSpacingScale)(space);
   const sizeStyle = selectSizeStyle(size, direction);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib/StackView/StackView.js

@@ -75,17 +75,18 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * semantic role but only on web, not within native apps).
  */
 
-const StackView = /*#__PURE__*/(0, _react.forwardRef)(({
-  space = 1,
-  divider,
-  direction: directionProp = 'column',
-  children,
-  variant,
-  tokens,
-  tag,
-  accessibilityRole,
-  ...rest
-}, ref) => {
+const StackView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    space = 1,
+    divider,
+    direction: directionProp = 'column',
+    children,
+    variant,
+    tokens,
+    tag,
+    accessibilityRole,
+    ...rest
+  } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
   const direction = (0, _utils.useResponsiveProp)(directionProp, 'column');
   const selectedProps = selectProps({ ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),

package/lib/StackView/StackWrap.js

@@ -22,10 +22,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 // In Jest/CI/SSR, global CSS isn't always available and doesn't always have .supports method
-const cssSupports = (...args) => {
+const cssSupports = function () {
   var _window$CSS;
 
-  return typeof window !== 'undefined' && typeof ((_window$CSS = window.CSS) === null || _window$CSS === void 0 ? void 0 : _window$CSS.supports) === 'function' && window.CSS.supports(...args);
+  return typeof window !== 'undefined' && typeof ((_window$CSS = window.CSS) === null || _window$CSS === void 0 ? void 0 : _window$CSS.supports) === 'function' && window.CSS.supports(...arguments);
 }; // CSS.supports needs an example of the type of value you intend to use.
 // Will be an integer appended `px` after hooks and JSX styles are resolved.
 

package/lib/StackView/StackWrapBox.js

@@ -55,17 +55,18 @@ const spaceSides = {
  * between the container and the stacked children, and requires a negative margin on the container.
  */
 
-const StackWrapBox = /*#__PURE__*/(0, _react.forwardRef)(({
-  space = 1,
-  gap = space,
-  direction: directionProp = 'row',
-  children,
-  tokens,
-  variant,
-  tag,
-  accessibilityRole,
-  ...rest
-}, ref) => {
+const StackWrapBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    space = 1,
+    gap = space,
+    direction: directionProp = 'row',
+    children,
+    tokens,
+    variant,
+    tag,
+    accessibilityRole,
+    ...rest
+  } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
   const direction = (0, _utils.useResponsiveProp)(directionProp, 'row');
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {

package/lib/StackView/StackWrapGap.js

@@ -41,16 +41,17 @@ const [selectProps] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.vi
  *   default if `gap` prop is undefined)
  */
 
-const StackWrapGap = /*#__PURE__*/(0, _react.forwardRef)(({
-  space = 1,
-  tokens,
-  variant,
-  direction: directionProp = 'row',
-  children,
-  tag,
-  accessibilityRole,
-  ...rest
-}, ref) => {
+const StackWrapGap = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    space = 1,
+    tokens,
+    variant,
+    direction: directionProp = 'row',
+    children,
+    tag,
+    accessibilityRole,
+    ...rest
+  } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
   const direction = (0, _utils.useResponsiveProp)(directionProp, 'row');
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {

package/lib/StackView/common.js

@@ -9,17 +9,20 @@ var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/expo
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const selectFlexStyles = ({
-  alignItems,
-  justifyContent,
-  flexGrow,
-  flexShrink
-}) => ({
-  alignItems,
-  justifyContent,
-  flexGrow,
-  flexShrink
-});
+const selectFlexStyles = _ref => {
+  let {
+    alignItems,
+    justifyContent,
+    flexGrow,
+    flexShrink
+  } = _ref;
+  return {
+    alignItems,
+    justifyContent,
+    flexGrow,
+    flexShrink
+  };
+};
 
 exports.selectFlexStyles = selectFlexStyles;
 

package/lib/StackView/getStackedContent.js

@@ -47,13 +47,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @param {boolean} [options.preserveFragments]
  * @returns {ReactElement[]}
  */
-const getStackedContent = (children, {
-  divider,
-  space,
-  direction = 'column',
-  box,
-  preserveFragments = false
-}) => {
+const getStackedContent = (children, _ref) => {
+  let {
+    divider,
+    space,
+    direction = 'column',
+    box,
+    preserveFragments = false
+  } = _ref;
   const boxProps = box && typeof box === 'object' ? box : {
     space
   };

package/lib/StackView/index.js

@@ -9,13 +9,13 @@ Object.defineProperty(exports, "StackWrap", {
     return _StackWrap.default;
   }
 });
+exports.default = void 0;
 Object.defineProperty(exports, "getStackedContent", {
   enumerable: true,
   get: function () {
     return _getStackedContent.default;
   }
 });
-exports.default = void 0;
 
 var _StackView = _interopRequireDefault(require("./StackView"));
 

package/lib/StepTracker/Step.js

@@ -29,105 +29,123 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
-const selectCompletedIconTokens = ({
-  completedIconColor,
-  completedIconSize
-}) => ({
-  size: completedIconSize,
-  color: completedIconColor
-});
+const selectCompletedIconTokens = _ref => {
+  let {
+    completedIconColor,
+    completedIconSize
+  } = _ref;
+  return {
+    size: completedIconSize,
+    color: completedIconColor
+  };
+};
 
-const selectConnectorStyles = ({
-  connectorColor,
-  connectorHeight,
-  connectorMinWidth,
-  connectorCompletedHeight,
-  connectorCompletedColor
-}, isCompleted) => ({
-  backgroundColor: connectorColor,
-  height: connectorHeight,
-  minWidth: connectorMinWidth,
-  ...(isCompleted && {
-    height: connectorCompletedHeight,
-    backgroundColor: connectorCompletedColor
-  })
-});
+const selectConnectorStyles = (_ref2, isCompleted) => {
+  let {
+    connectorColor,
+    connectorHeight,
+    connectorMinWidth,
+    connectorCompletedHeight,
+    connectorCompletedColor
+  } = _ref2;
+  return {
+    backgroundColor: connectorColor,
+    height: connectorHeight,
+    minWidth: connectorMinWidth,
+    ...(isCompleted && {
+      height: connectorCompletedHeight,
+      backgroundColor: connectorCompletedColor
+    })
+  };
+};
 
-const selectCurrentInnerStyles = ({
-  knobCurrentInnerColor,
-  knobCurrentInnerSize
-}) => ({
-  backgroundColor: knobCurrentInnerColor,
-  borderRadius: knobCurrentInnerSize / 2,
-  height: knobCurrentInnerSize,
-  width: knobCurrentInnerSize
-});
+const selectCurrentInnerStyles = _ref3 => {
+  let {
+    knobCurrentInnerColor,
+    knobCurrentInnerSize
+  } = _ref3;
+  return {
+    backgroundColor: knobCurrentInnerColor,
+    borderRadius: knobCurrentInnerSize / 2,
+    height: knobCurrentInnerSize,
+    width: knobCurrentInnerSize
+  };
+};
 
-const selectKnobStyles = ({
-  knobBackgroundColor,
-  knobBorderColor,
-  knobBorderWidth,
-  knobCompletedBackgroundColor,
-  knobCompletedBorderColor,
-  knobCompletedPaddingLeft,
-  knobCompletedPaddingTop,
-  knobCurrentBackgroundColor,
-  knobCurrentBorderColor,
-  knobCurrentBorderWidth,
-  knobCurrentPaddingLeft,
-  knobCurrentPaddingTop,
-  knobSize
-}, isCompleted, isCurrent) => ({
-  backgroundColor: knobBackgroundColor,
-  borderColor: knobBorderColor,
-  borderRadius: knobSize / 2,
-  borderWidth: knobBorderWidth,
-  height: knobSize,
-  width: knobSize,
-  ...(isCompleted && {
-    backgroundColor: knobCompletedBackgroundColor,
-    borderColor: knobCompletedBorderColor,
-    paddingLeft: knobCompletedPaddingLeft,
-    paddingTop: knobCompletedPaddingTop
-  }),
-  ...(isCurrent && {
-    backgroundColor: knobCurrentBackgroundColor,
-    borderColor: knobCurrentBorderColor,
-    borderWidth: knobCurrentBorderWidth,
-    paddingLeft: knobCurrentPaddingLeft,
-    paddingTop: knobCurrentPaddingTop
-  })
-});
+const selectKnobStyles = (_ref4, isCompleted, isCurrent) => {
+  let {
+    knobBackgroundColor,
+    knobBorderColor,
+    knobBorderWidth,
+    knobCompletedBackgroundColor,
+    knobCompletedBorderColor,
+    knobCompletedPaddingLeft,
+    knobCompletedPaddingTop,
+    knobCurrentBackgroundColor,
+    knobCurrentBorderColor,
+    knobCurrentBorderWidth,
+    knobCurrentPaddingLeft,
+    knobCurrentPaddingTop,
+    knobSize
+  } = _ref4;
+  return {
+    backgroundColor: knobBackgroundColor,
+    borderColor: knobBorderColor,
+    borderRadius: knobSize / 2,
+    borderWidth: knobBorderWidth,
+    height: knobSize,
+    width: knobSize,
+    ...(isCompleted && {
+      backgroundColor: knobCompletedBackgroundColor,
+      borderColor: knobCompletedBorderColor,
+      paddingLeft: knobCompletedPaddingLeft,
+      paddingTop: knobCompletedPaddingTop
+    }),
+    ...(isCurrent && {
+      backgroundColor: knobCurrentBackgroundColor,
+      borderColor: knobCurrentBorderColor,
+      borderWidth: knobCurrentBorderWidth,
+      paddingLeft: knobCurrentPaddingLeft,
+      paddingTop: knobCurrentPaddingTop
+    })
+  };
+};
 
-const selectLabelContainerStyles = ({
-  labelDirection,
-  labelGap,
-  labelMarginTop,
-  labelPaddingLeft,
-  labelPaddingRight
-}) => ({
-  marginTop: labelMarginTop,
-  paddingLeft: labelPaddingLeft,
-  paddingRight: labelPaddingRight,
-  flexDirection: labelDirection,
-  gap: labelGap
-});
+const selectLabelContainerStyles = _ref5 => {
+  let {
+    labelDirection,
+    labelGap,
+    labelMarginTop,
+    labelPaddingLeft,
+    labelPaddingRight
+  } = _ref5;
+  return {
+    marginTop: labelMarginTop,
+    paddingLeft: labelPaddingLeft,
+    paddingRight: labelPaddingRight,
+    flexDirection: labelDirection,
+    gap: labelGap
+  };
+};
 
-const selectLabelStyles = ({
-  labelColor,
-  labelCurrentColor,
-  labelCurrentFontWeight,
-  labelFontSize,
-  labelFontWeight,
-  labelFontName,
-  labelLineHeight
-}, isCurrent) => (0, _ThemeProvider.applyTextStyles)({
-  color: isCurrent ? labelCurrentColor : labelColor,
-  fontSize: labelFontSize,
-  lineHeight: labelLineHeight,
-  fontWeight: isCurrent ? labelCurrentFontWeight : labelFontWeight,
-  fontName: labelFontName
-});
+const selectLabelStyles = (_ref6, isCurrent) => {
+  let {
+    labelColor,
+    labelCurrentColor,
+    labelCurrentFontWeight,
+    labelFontSize,
+    labelFontWeight,
+    labelFontName,
+    labelLineHeight
+  } = _ref6;
+  return (0, _ThemeProvider.applyTextStyles)({
+    color: isCurrent ? labelCurrentColor : labelColor,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontWeight: isCurrent ? labelCurrentFontWeight : labelFontWeight,
+    fontName: labelFontName
+  });
+};
 
 const getStepTestID = (isCompleted, isCurrent) => {
   let testID = 'StepTracker-Step';
@@ -145,15 +163,16 @@ const getStepTestID = (isCompleted, isCurrent) => {
  */
 
 
-const Step = ({
-  label,
-  name,
-  status = 0,
-  stepCount = 0,
-  stepIndex = 0,
-  tokens,
-  ...rest
-}) => {
+const Step = _ref7 => {
+  let {
+    label,
+    name,
+    status = 0,
+    stepCount = 0,
+    stepIndex = 0,
+    tokens,
+    ...rest
+  } = _ref7;
   const {
     completedIcon,
     showStepLabel,