@telus-uds/components-base 1.50.0 → 1.51.1

package/lib/StepTracker/Step.js

@@ -96,17 +96,18 @@ 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
     })
   };
 };
@@ -128,7 +129,26 @@ const selectLabelContainerStyles = _ref5 => {
   };
 };
 
-const selectLabelStyles = (_ref6, themeOptions, isCurrent) => {
+const selectStepLabelStyles = (_ref6, themeOptions, isCurrent) => {
+  let {
+    stepLabelColor,
+    labelCurrentColor,
+    stepLabelFontWeight,
+    stepLabelFontSize,
+    stepLabelFontName,
+    stepLabelLineHeight
+  } = _ref6;
+  return (0, _ThemeProvider.applyTextStyles)({
+    color: isCurrent ? labelCurrentColor : stepLabelColor,
+    fontSize: stepLabelFontSize,
+    lineHeight: stepLabelLineHeight,
+    fontWeight: stepLabelFontWeight,
+    fontName: stepLabelFontName,
+    themeOptions
+  });
+};
+
+const selectLabelStyles = (_ref7, themeOptions, isCurrent) => {
   let {
     labelColor,
     labelCurrentColor,
@@ -137,7 +157,7 @@ const selectLabelStyles = (_ref6, themeOptions, isCurrent) => {
     labelFontWeight,
     labelFontName,
     labelLineHeight
-  } = _ref6;
+  } = _ref7;
   return (0, _ThemeProvider.applyTextStyles)({
     color: isCurrent ? labelCurrentColor : labelColor,
     fontSize: labelFontSize,
@@ -164,7 +184,7 @@ const getStepTestID = (isCompleted, isCurrent) => {
  */
 
 
-const Step = _ref7 => {
+const Step = _ref8 => {
   let {
     label,
     name,
@@ -173,11 +193,12 @@ const Step = _ref7 => {
     stepIndex = 0,
     tokens,
     ...rest
-  } = _ref7;
+  } = _ref8;
   const {
     completedIcon,
     showStepLabel,
     showStepName,
+    textStepTrackerLabel,
     ...themeTokens
   } = tokens;
   const isFirst = stepIndex === 0;
@@ -211,11 +232,11 @@ const Step = _ref7 => {
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
         style: [staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)],
         testID: getStepTestID(isCompleted, isCurrent),
-        children: [isCompleted && completedIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        children: [(isCompleted && completedIcon || isCurrent && !completedIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectCurrentInnerStyles(themeTokens)
+        }), isCurrent && completedIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
           icon: completedIcon,
           tokens: selectCompletedIconTokens(themeTokens)
-        }), isCurrent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: selectCurrentInnerStyles(themeTokens)
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: [staticStyles.connector, !isLast && selectConnectorStyles(themeTokens, isCompleted)]
@@ -223,7 +244,7 @@ const Step = _ref7 => {
     }), showStepLabel && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: [staticStyles.stepLabelContainer, selectLabelContainerStyles(tokens)],
       children: [showStepName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-        style: [staticStyles.centeredText, selectLabelStyles(tokens, themeOptions, isCurrent)],
+        style: [staticStyles.centeredText, selectStepLabelStyles(tokens, themeOptions, isCurrent)],
         children: name
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
         direction: "row",

package/lib/StepTracker/StepTracker.js

@@ -131,13 +131,16 @@ const StepTracker = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
   } = (0, _ThemeProvider.useThemeTokens)('StepTracker', tokens, variant, {
     viewport
   });
+  const {
+    textStepTrackerLabel
+  } = themeTokens;
   const getCopy = (0, _useCopy.default)({
     dictionary,
     copy
   });
-  const stepTrackerLabel = showStepTrackerLabel ? getCopy('stepTrackerLabel').replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]) : '';
+  const stepTrackerLabel = showStepTrackerLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepTrackerLabel : getCopy('stepTrackerLabel')).replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]) : '';
 
-  const getStepLabel = index => themeTokens.showStepLabel ? getCopy('stepLabel').replace('%{stepNumber}', index + 1) : '';
+  const getStepLabel = index => themeTokens.showStepLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepLabel : getCopy('stepLabel')).replace('%{stepNumber}', index + 1) : '';
 
   const {
     themeOptions
@@ -191,12 +194,28 @@ const dictionaryContentShape = _propTypes.default.shape({
 });
 
 StepTracker.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The current step, 0-based number
+   */
   current: _propTypes.default.number,
+
+  /**
+   * The language to use for the labels
+   */
   copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), dictionaryContentShape]),
+
+  /**
+   * Custom dictionary containing the labels to use for the steps
+   */
   dictionary: _propTypes.default.shape({
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   }),
+
+  /**
+   * An array of strings defining the step titles
+   */
   steps: _propTypes.default.arrayOf(_propTypes.default.string),
   tokens: (0, _utils.getTokensPropType)('StepTracker'),
   variant: _utils.variantProp.propType

package/lib/StepTracker/dictionary.js

@@ -6,12 +6,32 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _default = {
   en: {
-    stepLabel: 'Step %{stepNumber}',
-    stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
+    1: {
+      stepLabel: 'Step %{stepNumber}',
+      stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
+    },
+    2: {
+      stepLabel: '%{stepNumber}.',
+      stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
+    },
+    3: {
+      stepLabel: 'Step %{stepNumber}',
+      stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
+    }
   },
   fr: {
-    stepLabel: 'Étape %{stepNumber}',
-    stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
+    1: {
+      stepLabel: 'Étape %{stepNumber}',
+      stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
+    },
+    2: {
+      stepLabel: '%{stepNumber}.',
+      stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
+    },
+    3: {
+      stepLabel: 'Étape %{stepNumber}',
+      stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
+    }
   }
 };
 exports.default = _default;

package/lib/Tabs/Tabs.js

@@ -154,6 +154,10 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 Tabs.displayName = 'Tabs';
 Tabs.propTypes = { ...selectedSystemPropTypes,
   ..._utils.withLinkRouter.PropTypes,
+
+  /**
+   * Array of `TabsItem`s
+   */
   items: _propTypes.default.arrayOf(_propTypes.default.shape({ ...selectedItemPropTypes,
     ..._utils.withLinkRouter.PropTypes,
     href: _propTypes.default.string,
@@ -161,11 +165,27 @@ Tabs.propTypes = { ...selectedSystemPropTypes,
     id: _propTypes.default.string,
     ref: _airbnbPropTypes.default.ref()
   })),
+
+  /**
+   * `id` property of the current tab in the items array
+   */
   value: _propTypes.default.string,
   initialValue: _propTypes.default.string,
+
+  /**
+   * Callback for when the selected tab changes
+   */
   onChange: _propTypes.default.func,
   tokens: (0, _utils.getTokensPropType)('Tabs'),
+
+  /**
+   * Custom tokens for `TabsItem`
+   */
   itemTokens: (0, _utils.getTokensPropType)('TabsItem'),
+
+  /**
+   * Custom tokens for `HorizontalScrollButton`
+   */
   scrollButtonTokens: (0, _utils.getTokensPropType)('HorizontalScrollButton'),
   variant: _utils.variantProp.propType
 };

package/lib-module/A11yText/index.js

@@ -37,7 +37,15 @@ const A11yText = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 A11yText.displayName = 'A11yText';
 A11yText.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Text to be read by screen readers
+   */
   text: PropTypes.string.isRequired,
+
+  /**
+   * Whether text should be rendered as a heading
+   */
   heading: PropTypes.bool
 };
 const styles = StyleSheet.create({

package/lib-module/Divider/Divider.js

@@ -110,6 +110,10 @@ const Divider = /*#__PURE__*/forwardRef((_ref, ref) => {
 Divider.displayName = 'Divider';
 Divider.propTypes = { ...selectedSystemPropTypes,
   tokens: getTokensPropType('Divider'),
+
+  /**
+   * A number referring to a position on the space scale to create space on either side of the divider
+   */
   space: spacingProps.types.spacingValue,
   variant: variantProp.propType,
 

package/lib-module/IconButton/IconButton.js

@@ -120,9 +120,25 @@ IconButton.displayName = 'IconButton';
 IconButton.propTypes = { ...selectedSystemPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('IconButton'),
+
+  /**
+   * Defines the icon to be rendered
+   */
   icon: PropTypes.elementType.isRequired,
+
+  /**
+   * URL to navigate to when the `Iconbutton` is pressed
+   */
   href: PropTypes.string,
+
+  /**
+   * URL options to navigate to when the `Iconbutton` is pressed
+   */
   hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
+
+  /**
+   * Function to execute when the `Iconbutton` is pressed
+   */
   onPress: PropTypes.func
 };
 const staticStyles = StyleSheet.create({

package/lib-module/Link/ChevronLink.js

@@ -52,6 +52,10 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
 ChevronLink.displayName = 'ChevronLink';
 ChevronLink.propTypes = { ...LinkBase.propTypes,
   tokens: getTokensPropType('ChevronLink', 'Link'),
+
+  /**
+   * Changes direction of chevron icon
+   */
   direction: PropTypes.oneOf(['left', 'right'])
 };
 export default ChevronLink;

package/lib-module/Link/LinkBase.js

@@ -201,7 +201,7 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
         },
         children: /*#__PURE__*/_jsx(Text, {
           style: [textStyles, blockTextStyles, staticStyles.baseline],
-          children: children
+          children: typeof children === 'function' ? children(linkState) : children
         })
       });
     }

package/lib-module/Modal/Modal.js

@@ -174,9 +174,25 @@ const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
 Modal.displayName = 'Modal';
 Modal.propTypes = { ...selectedSystemPropTypes,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+
+  /**
+   * To define the locale of the copy
+   */
   copy: copyPropTypes,
+
+  /**
+   * Setting this to `true` will open the `Modal`
+   */
   isOpen: PropTypes.bool,
+
+  /**
+   * This function is triggered when the `Modal` is closed
+   */
   onClose: PropTypes.func,
+
+  /**
+   * `max-width` is applied to the `Modal` container
+   */
   maxWidth: PropTypes.bool,
   tokens: getTokensPropType('Modal'),
   variant: variantProp.propType,

package/lib-module/MultiSelectFilter/ModalOverlay.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { Portal } from '@gorhom/portal';
-import { selectTokens, useCopy, copyPropTypes, getTokensPropType, variantProp } from '../utils';
+import { useCopy, copyPropTypes, getTokensPropType, variantProp } from '../utils';
 import { useViewport } from '../ViewportProvider';
 import { useThemeTokens } from '../ThemeProvider';
 import dictionary from './dictionary';
@@ -16,7 +16,6 @@ const staticStyles = StyleSheet.create({
     flex: 1,
     // Grow to maxWidth when possible, shrink when not possible
     position: 'absolute',
-    height: 330,
     zIndex: 10000 // Position on top of all the other overlays, including backdrops and modals
 
   },
@@ -62,6 +61,11 @@ const ModalOverlay = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     children,
     isReady = false,
+    maxHeight,
+    maxHeightSize,
+    maxWidthSize,
+    minHeight,
+    minWidth,
     overlaidPosition,
     onLayout,
     variant,
@@ -74,9 +78,18 @@ const ModalOverlay = /*#__PURE__*/forwardRef((_ref3, ref) => {
     viewport,
     maxWidth: false
   });
+  const containerWidthHeight = {
+    minWidth,
+    minHeight,
+    ...(tokens.maxWidth && maxWidthSize && {
+      maxWidth: maxWidthSize
+    }),
+    ...(maxHeight && maxHeightSize && {
+      maxHeight: maxHeightSize
+    })
+  };
   const {
-    closeIcon: CloseIconComponent,
-    maxWidth
+    closeIcon: CloseIconComponent
   } = themeTokens;
   const getCopy = useCopy({
     dictionary,
@@ -87,9 +100,7 @@ const ModalOverlay = /*#__PURE__*/forwardRef((_ref3, ref) => {
     children: /*#__PURE__*/_jsx(View, {
       ref: ref,
       onLayout: onLayout,
-      style: [overlaidPosition, {
-        minWidth: maxWidth
-      }, staticStyles.positioner, !isReady && staticStyles.hidden],
+      style: [overlaidPosition, containerWidthHeight, staticStyles.positioner, !isReady && staticStyles.hidden],
       children: /*#__PURE__*/_jsxs(Card, {
         tokens: selectPaddingContainerStyles(themeTokens),
         children: [/*#__PURE__*/_jsx(View, {
@@ -98,8 +109,7 @@ const ModalOverlay = /*#__PURE__*/forwardRef((_ref3, ref) => {
             onPress: onClose,
             icon: CloseIconComponent,
             accessibilityRole: "button",
-            accessibilityLabel: closeLabel,
-            tokens: selectTokens('IconButton', themeTokens, 'close')
+            accessibilityLabel: closeLabel
           })
         }), children]
       })
@@ -115,6 +125,12 @@ ModalOverlay.propTypes = {
     left: PropTypes.number,
     width: PropTypes.number
   }),
+  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  maxHeightSize: PropTypes.number,
+  maxWidthSize: PropTypes.number,
+  maxHeight: PropTypes.bool,
+  maxWidth: PropTypes.bool,
   onLayout: PropTypes.func,
   variant: variantProp.propType,
   tokens: getTokensPropType('Modal'),