@telus-uds/components-base 1.50.0 → 1.51.1

package/lib-module/StepTracker/Step.js

@@ -78,17 +78,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
     })
   };
 };
@@ -110,7 +111,26 @@ const selectLabelContainerStyles = _ref5 => {
   };
 };
 
-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,
@@ -119,7 +139,7 @@ const selectLabelStyles = (_ref6, themeOptions, isCurrent) => {
     labelFontWeight,
     labelFontName,
     labelLineHeight
-  } = _ref6;
+  } = _ref7;
   return applyTextStyles({
     color: isCurrent ? labelCurrentColor : labelColor,
     fontSize: labelFontSize,
@@ -146,7 +166,7 @@ const getStepTestID = (isCompleted, isCurrent) => {
  */
 
 
-const Step = _ref7 => {
+const Step = _ref8 => {
   let {
     label,
     name,
@@ -155,11 +175,12 @@ const Step = _ref7 => {
     stepIndex = 0,
     tokens,
     ...rest
-  } = _ref7;
+  } = _ref8;
   const {
     completedIcon,
     showStepLabel,
     showStepName,
+    textStepTrackerLabel,
     ...themeTokens
   } = tokens;
   const isFirst = stepIndex === 0;
@@ -193,11 +214,11 @@ const Step = _ref7 => {
       }), /*#__PURE__*/_jsxs(View, {
         style: [staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)],
         testID: getStepTestID(isCompleted, isCurrent),
-        children: [isCompleted && completedIcon && /*#__PURE__*/_jsx(Icon, {
+        children: [(isCompleted && completedIcon || isCurrent && !completedIcon) && /*#__PURE__*/_jsx(View, {
+          style: selectCurrentInnerStyles(themeTokens)
+        }), isCurrent && completedIcon && /*#__PURE__*/_jsx(Icon, {
           icon: completedIcon,
           tokens: selectCompletedIconTokens(themeTokens)
-        }), isCurrent && /*#__PURE__*/_jsx(View, {
-          style: selectCurrentInnerStyles(themeTokens)
         })]
       }), /*#__PURE__*/_jsx(View, {
         style: [staticStyles.connector, !isLast && selectConnectorStyles(themeTokens, isCompleted)]
@@ -205,7 +226,7 @@ const Step = _ref7 => {
     }), showStepLabel && /*#__PURE__*/_jsxs(View, {
       style: [staticStyles.stepLabelContainer, selectLabelContainerStyles(tokens)],
       children: [showStepName && /*#__PURE__*/_jsx(Text, {
-        style: [staticStyles.centeredText, selectLabelStyles(tokens, themeOptions, isCurrent)],
+        style: [staticStyles.centeredText, selectStepLabelStyles(tokens, themeOptions, isCurrent)],
         children: name
       }), /*#__PURE__*/_jsx(StackView, {
         direction: "row",

package/lib-module/StepTracker/StepTracker.js

@@ -106,13 +106,16 @@ const StepTracker = /*#__PURE__*/forwardRef((_ref4, ref) => {
   } = useThemeTokens('StepTracker', tokens, variant, {
     viewport
   });
+  const {
+    textStepTrackerLabel
+  } = themeTokens;
   const getCopy = useCopy({
     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
@@ -165,12 +168,28 @@ const dictionaryContentShape = PropTypes.shape({
   stepTrackerLabel: PropTypes.string.isRequired
 });
 StepTracker.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The current step, 0-based number
+   */
   current: PropTypes.number,
+
+  /**
+   * The language to use for the labels
+   */
   copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
+
+  /**
+   * Custom dictionary containing the labels to use for the steps
+   */
   dictionary: PropTypes.shape({
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   }),
+
+  /**
+   * An array of strings defining the step titles
+   */
   steps: PropTypes.arrayOf(PropTypes.string),
   tokens: getTokensPropType('StepTracker'),
   variant: variantProp.propType

package/lib-module/StepTracker/dictionary.js

@@ -1,10 +1,30 @@
 export 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}'
+    }
   }
 };

package/lib-module/Tabs/Tabs.js

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

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.2.1",
-    "@telus-uds/system-theme-tokens": "^2.32.0",
+    "@telus-uds/system-theme-tokens": "^2.34.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.50.0"
+  "version": "1.51.1"
 }

package/src/A11yText/index.jsx

@@ -31,7 +31,13 @@ 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
 }
 

package/src/Divider/Divider.jsx

@@ -101,6 +101,9 @@ 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/src/IconButton/IconButton.jsx

@@ -108,9 +108,21 @@ 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
 }
 

package/src/Link/ChevronLink.jsx

@@ -48,6 +48,9 @@ ChevronLink.displayName = 'ChevronLink'
 ChevronLink.propTypes = {
   ...LinkBase.propTypes,
   tokens: getTokensPropType('ChevronLink', 'Link'),
+  /**
+   * Changes direction of chevron icon
+   */
   direction: PropTypes.oneOf(['left', 'right'])
 }
 

package/src/Link/LinkBase.jsx

@@ -183,7 +183,9 @@ const LinkBase = forwardRef(
               space={iconSpace}
               iconProps={{ ...iconProps, tokens: iconTokens }}
             >
-              <Text style={[textStyles, blockTextStyles, staticStyles.baseline]}>{children}</Text>
+              <Text style={[textStyles, blockTextStyles, staticStyles.baseline]}>
+                {typeof children === 'function' ? children(linkState) : children}
+              </Text>
             </IconText>
           )
         }}

package/src/Modal/Modal.jsx

@@ -161,9 +161,21 @@ 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/src/MultiSelectFilter/ModalOverlay.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet } from 'react-native'
 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'
@@ -14,7 +14,6 @@ const staticStyles = StyleSheet.create({
   positioner: {
     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
   },
   closeButtonContainer: {
@@ -44,13 +43,33 @@ const selectPaddingContainerStyles = ({ paddingTop, paddingLeft, paddingRight })
 
 const ModalOverlay = forwardRef(
   (
-    { children, isReady = false, overlaidPosition, onLayout, variant, tokens, copy, onClose },
+    {
+      children,
+      isReady = false,
+      maxHeight,
+      maxHeightSize,
+      maxWidthSize,
+      minHeight,
+      minWidth,
+      overlaidPosition,
+      onLayout,
+      variant,
+      tokens,
+      copy,
+      onClose
+    },
     ref
   ) => {
     const viewport = useViewport()
     const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth: false })
+    const containerWidthHeight = {
+      minWidth,
+      minHeight,
+      ...(tokens.maxWidth && maxWidthSize && { maxWidth: maxWidthSize }),
+      ...(maxHeight && maxHeightSize && { maxHeight: maxHeightSize })
+    }
 
-    const { closeIcon: CloseIconComponent, maxWidth } = themeTokens
+    const { closeIcon: CloseIconComponent } = themeTokens
 
     const getCopy = useCopy({ dictionary, copy })
     const closeLabel = getCopy('closeButton')
@@ -62,7 +81,7 @@ const ModalOverlay = forwardRef(
           onLayout={onLayout}
           style={[
             overlaidPosition,
-            { minWidth: maxWidth },
+            containerWidthHeight,
             staticStyles.positioner,
             !isReady && staticStyles.hidden
           ]}
@@ -79,7 +98,6 @@ const ModalOverlay = forwardRef(
                 icon={CloseIconComponent}
                 accessibilityRole="button"
                 accessibilityLabel={closeLabel}
-                tokens={selectTokens('IconButton', themeTokens, 'close')}
               />
             </View>
             {children}
@@ -99,6 +117,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'),