@telus-uds/components-base 1.50.0 → 1.51.0

package/lib-module/QuickLinksFeature/QuickLinksFeatureItem.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import Image from "react-native-web/dist/exports/Image";
 import Platform from "react-native-web/dist/exports/Platform";
@@ -6,7 +6,7 @@ import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
 import { getTokensPropType, variantProp, withLinkRouter, a11yProps, linkProps, selectSystemProps } from '../utils';
 import { useViewport } from '../ViewportProvider';
-import { useThemeTokensCallback } from '../ThemeProvider';
+import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
 import { Link } from '../Link';
 import { StackWrap } from '../StackView'; // pass through and type relevant system props - add more sets for interactive components
 
@@ -32,6 +32,7 @@ const selectContainerStyle = _ref => {
   } = _ref;
   return {
     textAlign,
+    outline: 'red',
     width: contentMaxDimension,
     overflow: 'hidden'
   };
@@ -43,6 +44,15 @@ const selectImageContainerStyle = contentMaxDimension => ({
   justifyContent: 'center',
   alignItems: 'center'
 });
+
+const selectLinkToken = _ref2 => {
+  let {
+    outerBorderColor
+  } = _ref2;
+  return {
+    outerBorderColor
+  };
+};
 /**
  * Component export along with QuickLinksFeature to be used as children
  *
@@ -50,7 +60,7 @@ const selectImageContainerStyle = contentMaxDimension => ({
  */
 
 
-const QuickLinksFeatureItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const QuickLinksFeatureItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant,
@@ -58,52 +68,63 @@ const QuickLinksFeatureItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
     imageAccessibilityLabel,
     imageSource,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const viewport = useViewport();
   const getTokens = useThemeTokensCallback('QuickLinksFeatureItem', tokens, variant);
-  const [hover, setHover] = useState(false);
-  const {
-    contentDirection,
-    contentSpace,
-    contentAlignItems,
-    contentMaxDimension,
-    imageDimension,
-    textAlign
-  } = getTokens({
-    viewport,
-    hover
-  });
   return /*#__PURE__*/_jsx(Link, {
     ref: ref,
-    tokens: state => {
-      setHover(state.hover);
-      return getTokens(state);
-    },
     ...selectProps(rest),
-    children: /*#__PURE__*/_jsx(View, {
-      style: selectContainerStyle({
+    tokens: state => selectLinkToken(getTokens(state)),
+    children: _ref4 => {
+      let {
+        hovered: hover,
+        pressed,
+        focused: focus
+      } = _ref4;
+      const {
+        contentDirection,
+        contentSpace,
+        contentAlignItems,
         contentMaxDimension,
-        textAlign
-      }),
-      children: /*#__PURE__*/_jsxs(StackWrap, {
-        direction: contentDirection,
-        space: contentSpace,
-        tokens: {
-          alignItems: contentAlignItems
-        },
-        children: [/*#__PURE__*/_jsx(View, {
-          style: selectImageContainerStyle(contentMaxDimension),
-          children: /*#__PURE__*/_jsx(Image, {
-            accessibilityIgnoresInvertColors: true,
-            imageAccessibilityLabel: imageAccessibilityLabel,
-            source: imageSource,
-            style: selectImageStyle(imageDimension)
-          })
-        }), /*#__PURE__*/_jsx(Text, {
-          children: children
-        })]
-      })
-    })
+        imageDimension,
+        textLine,
+        gap,
+        ...themeTokens
+      } = getTokens({
+        viewport,
+        hover,
+        pressed,
+        focus
+      });
+      const textStyle = { ...applyTextStyles(themeTokens),
+        textDecorationLine: textLine
+      };
+      return /*#__PURE__*/_jsx(View, {
+        style: selectContainerStyle({ ...themeTokens,
+          contentMaxDimension
+        }),
+        children: /*#__PURE__*/_jsxs(StackWrap, {
+          direction: contentDirection,
+          space: contentSpace,
+          gap: gap,
+          tokens: {
+            alignItems: contentAlignItems
+          },
+          children: [/*#__PURE__*/_jsx(View, {
+            style: selectImageContainerStyle(contentMaxDimension),
+            children: /*#__PURE__*/_jsx(Image, {
+              accessibilityIgnoresInvertColors: true,
+              imageAccessibilityLabel: imageAccessibilityLabel,
+              source: imageSource,
+              style: selectImageStyle(imageDimension)
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            style: textStyle,
+            children: children
+          })]
+        })
+      });
+    }
   });
 });
 QuickLinksFeatureItem.displayName = 'QuickLinksFeatureItem';

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

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/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.33.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.0"
 }

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/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'),