@telus-uds/components-base 2.0.0 → 2.0.1

package/lib/StackView/common.js

@@ -1,15 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.staticStyles = exports.selectFlexStyles = void 0;
-
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const selectFlexStyles = _ref => {
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+export const selectFlexStyles = _ref => {
   let {
     alignItems,
     justifyContent,
@@ -23,10 +13,7 @@ const selectFlexStyles = _ref => {
     flexShrink
   };
 };
-
-exports.selectFlexStyles = selectFlexStyles;
-
-const staticStyles = _StyleSheet.default.create({
+export const staticStyles = StyleSheet.create({
   wrap: {
     flexShrink: 1,
     flexWrap: 'wrap'
@@ -45,6 +32,4 @@ const staticStyles = _StyleSheet.default.create({
   'column-reverse': {
     flexDirection: 'column-reverse'
   }
-});
-
-exports.staticStyles = staticStyles;
+});

package/lib/StackView/getStackedContent.js

@@ -1,25 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _Divider = _interopRequireDefault(require("../Divider"));
-
-var _Spacer = _interopRequireDefault(require("../Spacer"));
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-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; }
+import React, { createElement as _createElement } from 'react';
+import Box from '../Box';
+import Divider from '../Divider';
+import Spacer from '../Spacer';
 
 /**
  * @typedef {import('react').ReactChildren} ReactChildren
@@ -47,6 +29,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @param {boolean} [options.preserveFragments]
  * @returns {ReactElement[]}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const getStackedContent = (children, _ref) => {
   let {
     divider,
@@ -58,41 +41,41 @@ const getStackedContent = (children, _ref) => {
   const boxProps = box && typeof box === 'object' ? box : {
     space
   };
-  const dividerProps = divider && typeof divider === 'object' ? divider : {}; // Avoid surprises if children contains comments, nulls, or is a variable wrapped as a fragment
+  const dividerProps = divider && typeof divider === 'object' ? divider : {};
 
+  // Avoid surprises if children contains comments, nulls, or is a variable wrapped as a fragment
   const topLevelChildren = preserveFragments ? children : unpackFragment(children);
-
-  const validChildren = _react.Children.toArray(topLevelChildren).filter(Boolean);
-
+  const validChildren = React.Children.toArray(topLevelChildren).filter(Boolean);
   const content = validChildren.reduce((newChildren, child, index) => {
-    const boxID = "Stack-Box-".concat(index);
+    const boxID = `Stack-Box-${index}`;
     const item = box ?
     /*#__PURE__*/
     // If wrapped in Box, that Box needs a key.
     // If possible, use an existing content key; use an index-based key only if necessary.
-    (0, _react.createElement)(_Box.default, { ...boxProps,
+    _createElement(Box, {
+      ...boxProps,
       key: child.key || boxID,
       testID: boxID
     }, child) : child;
     if (!index || !space && !divider) return [...newChildren, item];
-    const testID = "Stack-".concat(divider ? 'Divider' : 'Spacer', "-").concat(index);
+    const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
     const commonProps = {
       testID,
-      key: testID,
       space
     };
-    const separator = divider ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+    const separator = divider ? /*#__PURE__*/_jsx(Divider, {
       vertical: direction.startsWith('row'),
       ...dividerProps,
       ...commonProps
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+    }, testID) : /*#__PURE__*/_jsx(Spacer, {
       direction: direction.startsWith('row') ? 'row' : 'column',
       ...commonProps
-    });
+    }, testID);
     return [...newChildren, separator, item];
   }, []);
   return content;
 };
+
 /**
  * Unpacks top-level fragments, so that common compositional patterns such as the following examples
  * can be iterated as flat siblings (as if they were `<Child1 /><Child2 /><Child3 />`):
@@ -125,18 +108,15 @@ const getStackedContent = (children, _ref) => {
  * @param {ReactChildren} child
  * @returns {ReactChildren}
  */
-
-
 const unpackFragment = child => {
   var _child$props;
-
   // If this level is a set of top-level siblings rather than one child, check each in turn
-  if (_react.Children.count(child) > 1) return _react.Children.map(child, unpackFragment); // When a fragment is found, unpack its children to the top level and check them
+  if (React.Children.count(child) > 1) return React.Children.map(child, unpackFragment);
 
-  if ((child === null || child === void 0 ? void 0 : child.type) === _react.Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children); // Stop unpacking as soon as any non-fragment child is found
+  // When a fragment is found, unpack its children to the top level and check them
+  if ((child === null || child === void 0 ? void 0 : child.type) === React.Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children);
 
+  // Stop unpacking as soon as any non-fragment child is found
   return child;
 };
-
-var _default = getStackedContent;
-exports.default = _default;
+export default getStackedContent;

package/lib/StackView/index.js

@@ -1,29 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "StackWrap", {
-  enumerable: true,
-  get: function () {
-    return _StackWrap.default;
-  }
-});
-exports.default = void 0;
-Object.defineProperty(exports, "getStackedContent", {
-  enumerable: true,
-  get: function () {
-    return _getStackedContent.default;
-  }
-});
-
-var _StackView = _interopRequireDefault(require("./StackView"));
-
-var _StackWrap = _interopRequireDefault(require("./StackWrap"));
-
-var _getStackedContent = _interopRequireDefault(require("./getStackedContent"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = _StackView.default;
-exports.default = _default;
+import StackView from './StackView';
+import StackWrap from './StackWrap';
+export default StackView;
+export { StackWrap };
+export { default as getStackedContent } from './getStackedContent';

package/lib/Status/Status.js

@@ -0,0 +1,165 @@
+import React from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { useThemeTokens, applyTextStyles } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps, wrapStringsInText, transformGradient } from '../utils';
+import Icon from '../Icon';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const selectContainerStyles = _ref => {
+  let {
+    backgroundColor,
+    backgroundGradient,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  } = _ref;
+  const styles = {
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  };
+  if (backgroundGradient) {
+    if (Platform.OS === 'web') {
+      styles.background = transformGradient(backgroundGradient);
+    } else {
+      const {
+        stops: [stopOne, stopTwo]
+      } = backgroundGradient;
+      styles.gradient = {};
+      styles.gradient.start = {
+        x: 0,
+        y: 0
+      };
+      styles.gradient.end = {
+        x: 1,
+        y: 1
+      };
+      styles.gradient.colors = [stopOne.color, stopTwo.color];
+    }
+  } else {
+    styles.backgroundColor = backgroundColor;
+  }
+  return styles;
+};
+const selectIconProps = _ref2 => {
+  let {
+    icon,
+    iconColor
+  } = _ref2;
+  return {
+    icon,
+    tokens: {
+      color: iconColor
+    },
+    variant: {
+      size: 'small'
+    }
+  };
+};
+const selectTextStyles = _ref3 => {
+  let {
+    textColor,
+    textLineHeight,
+    fontName,
+    fontSize,
+    fontWeight,
+    marginLeft
+  } = _ref3;
+  return applyTextStyles({
+    fontColor: textColor,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight: Platform.OS === 'web' ? textLineHeight : textLineHeight * 1.2,
+    marginLeft
+  });
+};
+
+/**
+ * Status component displays a status indicator with optional custom gradient.
+ *
+ * @component
+ * @param {object} tokens - The tokens for customizing the status component.
+ * @param {string} variant - The variant of the status component.
+ * @param {ReactNode} children - The content to be displayed inside the status component.
+ * @param {function} customGradient - The custom gradient function for the status component.
+ * @param {elementType} customGradient - Defines an icon to be rendered.
+ * @param {object} rest - The rest of the props to be applied to the status component.
+ * @param {React.Ref} ref - The ref to be applied to the status component.
+ * @returns {ReactNode} The rendered status component.
+ */
+const Status = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  let {
+    tokens,
+    variant,
+    children,
+    customGradient,
+    ...rest
+  } = _ref4;
+  const themeTokens = useThemeTokens('Status', tokens, variant);
+  const {
+    icon
+  } = themeTokens;
+  const containerStyles = {
+    ...selectContainerStyles(themeTokens),
+    ...staticStyles.container
+  };
+  let content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [icon ? /*#__PURE__*/_jsx(Icon, {
+      ...selectIconProps(themeTokens)
+    }) : null, wrapStringsInText(children, {
+      style: selectTextStyles(themeTokens)
+    })]
+  });
+  if (typeof customGradient === 'function') {
+    content = customGradient(containerStyles.gradient, containerStyles, content);
+  }
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: containerStyles,
+    ...selectProps(rest),
+    children: content
+  });
+});
+Status.displayName = 'Status';
+Status.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Status'),
+  variant: variantProp.propType,
+  /**
+   * The content to be displayed inside the status component.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * The custom gradient function for the status component.
+   */
+  customGradient: PropTypes.func
+};
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    ...Platform.select({
+      web: {
+        display: 'inline-flex',
+        width: 'fit-content'
+      },
+      default: {
+        display: 'flex',
+        width: 'auto'
+      }
+    })
+  }
+});
+export default Status;

package/lib/Status/index.js

@@ -0,0 +1,2 @@
+import Status from './Status';
+export default Status;

package/lib/StepTracker/Step.js

@@ -1,34 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _StackView = _interopRequireDefault(require("../StackView"));
-
-var _Icon = _interopRequireDefault(require("../Icon"));
-
-var _utils = require("../utils");
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import StackView from '../StackView';
+import Icon from '../Icon';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import { applyTextStyles, useTheme } from '../ThemeProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectCompletedIconTokens = _ref => {
   let {
     completedIconColor,
@@ -39,7 +19,6 @@ const selectCompletedIconTokens = _ref => {
     color: completedIconColor
   };
 };
-
 const selectConnectorStyles = (_ref2, isCompleted) => {
   let {
     connectorColor,
@@ -58,7 +37,6 @@ const selectConnectorStyles = (_ref2, isCompleted) => {
     })
   };
 };
-
 const selectCurrentInnerStyles = _ref3 => {
   let {
     knobCurrentInnerColor,
@@ -71,7 +49,6 @@ const selectCurrentInnerStyles = _ref3 => {
     width: knobCurrentInnerSize
   };
 };
-
 const selectKnobStyles = (_ref4, isCompleted, isCurrent) => {
   let {
     knobBackgroundColor,
@@ -96,21 +73,21 @@ const selectKnobStyles = (_ref4, isCompleted, isCurrent) => {
     height: knobSize,
     width: knobSize,
     ...(isCompleted && {
-      backgroundColor: knobCompletedBackgroundColor,
-      borderColor: knobCompletedBorderColor,
-      paddingLeft: knobCompletedPaddingLeft,
-      paddingTop: knobCompletedPaddingTop
-    }),
-    ...(isCurrent && {
       backgroundColor: knobCurrentBackgroundColor,
       borderColor: knobCurrentBorderColor,
       borderWidth: knobCurrentBorderWidth,
       paddingLeft: knobCurrentPaddingLeft,
       paddingTop: knobCurrentPaddingTop
+    }),
+    ...(isCurrent && {
+      backgroundColor: knobCompletedBackgroundColor,
+      borderColor: knobCompletedBorderColor,
+      borderWidth: knobCurrentBorderWidth,
+      paddingLeft: knobCompletedPaddingLeft,
+      paddingTop: knobCompletedPaddingTop
     })
   };
 };
-
 const selectLabelContainerStyles = _ref5 => {
   let {
     labelDirection,
@@ -127,8 +104,25 @@ const selectLabelContainerStyles = _ref5 => {
     gap: labelGap
   };
 };
-
-const selectLabelStyles = (_ref6, themeOptions, isCurrent) => {
+const selectStepLabelStyles = (_ref6, themeOptions, isCurrent) => {
+  let {
+    stepLabelColor,
+    labelCurrentColor,
+    stepLabelFontWeight,
+    stepLabelFontSize,
+    stepLabelFontName,
+    stepLabelLineHeight
+  } = _ref6;
+  return applyTextStyles({
+    color: isCurrent ? labelCurrentColor : stepLabelColor,
+    fontSize: stepLabelFontSize,
+    lineHeight: stepLabelLineHeight,
+    fontWeight: stepLabelFontWeight,
+    fontName: stepLabelFontName,
+    themeOptions
+  });
+};
+const selectLabelStyles = (_ref7, themeOptions, isCurrent) => {
   let {
     labelColor,
     labelCurrentColor,
@@ -137,8 +131,8 @@ const selectLabelStyles = (_ref6, themeOptions, isCurrent) => {
     labelFontWeight,
     labelFontName,
     labelLineHeight
-  } = _ref6;
-  return (0, _ThemeProvider.applyTextStyles)({
+  } = _ref7;
+  return applyTextStyles({
     color: isCurrent ? labelCurrentColor : labelColor,
     fontSize: labelFontSize,
     lineHeight: labelLineHeight,
@@ -147,24 +141,20 @@ const selectLabelStyles = (_ref6, themeOptions, isCurrent) => {
     themeOptions
   });
 };
-
 const getStepTestID = (isCompleted, isCurrent) => {
   let testID = 'StepTracker-Step';
-
   if (isCompleted) {
     testID += '-Completed';
   } else if (isCurrent) {
     testID += '-Current';
   }
-
   return testID;
 };
+
 /**
  * A single step of a StepTracker.
  */
-
-
-const Step = _ref7 => {
+const Step = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     label,
     name,
@@ -173,11 +163,12 @@ const Step = _ref7 => {
     stepIndex = 0,
     tokens,
     ...rest
-  } = _ref7;
+  } = _ref8;
   const {
     completedIcon,
     showStepLabel,
     showStepName,
+    textStepTrackerLabel,
     ...themeTokens
   } = tokens;
   const isFirst = stepIndex === 0;
@@ -187,8 +178,8 @@ const Step = _ref7 => {
   const isActive = isCompleted || isCurrent;
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+  } = useTheme();
+  return /*#__PURE__*/_jsxs(StackView, {
     space: 0,
     tokens: {
       alignItems: 'stretch',
@@ -197,8 +188,9 @@ const Step = _ref7 => {
     accessibilityLabel: label,
     accessibilityLevel: 2,
     accessibilityCurrent: status === stepIndex,
+    ref: ref,
     ...selectProps(rest),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    children: [/*#__PURE__*/_jsxs(StackView, {
       direction: "row",
       space: 0,
       tokens: {
@@ -206,49 +198,48 @@ const Step = _ref7 => {
         flexGrow: 0,
         justifyContent: 'center'
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: [/*#__PURE__*/_jsx(View, {
         style: [staticStyles.connector, !isFirst && selectConnectorStyles(themeTokens, isActive)]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      }), /*#__PURE__*/_jsxs(View, {
         style: [staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)],
         testID: getStepTestID(isCompleted, isCurrent),
-        children: [isCompleted && completedIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        children: [isCompleted && completedIcon && /*#__PURE__*/_jsx(Icon, {
           icon: completedIcon,
           tokens: selectCompletedIconTokens(themeTokens)
-        }), isCurrent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        }), (isCurrent && completedIcon || isCurrent && !completedIcon) && /*#__PURE__*/_jsx(View, {
           style: selectCurrentInnerStyles(themeTokens)
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      }), /*#__PURE__*/_jsx(View, {
         style: [staticStyles.connector, !isLast && selectConnectorStyles(themeTokens, isCompleted)]
       })]
-    }), showStepLabel && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    }), showStepLabel && /*#__PURE__*/_jsxs(View, {
       style: [staticStyles.stepLabelContainer, selectLabelContainerStyles(tokens)],
-      children: [showStepName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-        style: [staticStyles.centeredText, selectLabelStyles(tokens, themeOptions, isCurrent)],
+      children: [showStepName && /*#__PURE__*/_jsx(Text, {
+        style: [staticStyles.centeredText, selectStepLabelStyles(tokens, themeOptions, isCurrent)],
         children: name
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+      }), /*#__PURE__*/_jsx(StackView, {
         direction: "row",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        children: /*#__PURE__*/_jsx(Text, {
           style: [staticStyles.centeredText, tokens.labelDirection === 'column' && staticStyles.wrappingLabel, selectLabelStyles(tokens, themeOptions, isCurrent)],
           children: label
         })
       })]
     })]
   });
+});
+Step.displayName = 'Step';
+Step.propTypes = {
+  ...selectedSystemPropTypes,
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  status: PropTypes.number.isRequired,
+  stepCount: PropTypes.number.isRequired,
+  stepIndex: PropTypes.number.isRequired,
+  tokens: getTokensPropType('StepTracker'),
+  variant: variantProp.propType
 };
-
-Step.propTypes = { ...selectedSystemPropTypes,
-  label: _propTypes.default.string.isRequired,
-  name: _propTypes.default.string.isRequired,
-  status: _propTypes.default.number.isRequired,
-  stepCount: _propTypes.default.number.isRequired,
-  stepIndex: _propTypes.default.number.isRequired,
-  tokens: (0, _utils.getTokensPropType)('StepTracker'),
-  variant: _utils.variantProp.propType
-};
-var _default = Step;
-exports.default = _default;
-
-const staticStyles = _StyleSheet.default.create({
+export default Step;
+const staticStyles = StyleSheet.create({
   centeredText: {
     textAlign: 'center'
   },