@telus-uds/components-base 3.17.1 → 3.19.0

package/src/StepTracker/Step.jsx

@@ -137,12 +137,24 @@ const getStepTestID = (isCompleted, isCurrent) => {
 
   return testID
 }
+const selectBarContainerStyles = (themeTokens, isCompleted, isCurrent) => ({
+  backgroundColor: isCompleted
+    ? themeTokens.barCompletedBackgroundColor
+    : themeTokens.barBackgroundColor,
+  height: themeTokens.barHeight,
+  ...(isCurrent && {
+    backgroundColor: themeTokens.barCurrentBackgroundColor
+  })
+})
 
 /**
  * A single step of a StepTracker.
  */
 const Step = React.forwardRef(
-  ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, ...rest }, ref) => {
+  (
+    { label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, isBarVariant, ...rest },
+    ref
+  ) => {
     const { completedIcon, showStepLabel, showStepName, textStepTrackerLabel, ...themeTokens } =
       tokens
     const isFirst = stepIndex === 0
@@ -162,35 +174,43 @@ const Step = React.forwardRef(
         ref={ref}
         {...selectProps(rest)}
       >
-        <StackView
-          direction="row"
-          space={0}
-          tokens={{ alignItems: 'center', flexGrow: 0, justifyContent: 'center' }}
-        >
+        {isBarVariant && (
           <View
-            style={[
-              staticStyles.connector,
-              !isFirst && selectConnectorStyles(themeTokens, isActive)
-            ]}
-          />
-          <View
-            style={[staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)]}
+            style={selectBarContainerStyles(themeTokens, isCompleted, isCurrent)}
             testID={getStepTestID(isCompleted, isCurrent)}
-          >
-            {isCompleted && completedIcon && (
-              <Icon icon={completedIcon} tokens={selectCompletedIconTokens(themeTokens)} />
-            )}
-            {((isCurrent && completedIcon) || (isCurrent && !completedIcon)) && (
-              <View style={selectCurrentInnerStyles(themeTokens)} />
-            )}
-          </View>
-          <View
-            style={[
-              staticStyles.connector,
-              !isLast && selectConnectorStyles(themeTokens, isCompleted)
-            ]}
           />
-        </StackView>
+        )}
+        {!isBarVariant && (
+          <StackView
+            direction="row"
+            space={0}
+            tokens={{ alignItems: 'center', flexGrow: 0, justifyContent: 'center' }}
+          >
+            <View
+              style={[
+                staticStyles.connector,
+                !isFirst && selectConnectorStyles(themeTokens, isActive)
+              ]}
+            />
+            <View
+              style={[staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)]}
+              testID={getStepTestID(isCompleted, isCurrent)}
+            >
+              {isCompleted && completedIcon && (
+                <Icon icon={completedIcon} tokens={selectCompletedIconTokens(themeTokens)} />
+              )}
+              {((isCurrent && completedIcon) || (isCurrent && !completedIcon)) && (
+                <View style={selectCurrentInnerStyles(themeTokens)} />
+              )}
+            </View>
+            <View
+              style={[
+                staticStyles.connector,
+                !isLast && selectConnectorStyles(themeTokens, isCompleted)
+              ]}
+            />
+          </StackView>
+        )}
         {showStepLabel && (
           <View style={[staticStyles.stepLabelContainer, selectLabelContainerStyles(tokens)]}>
             {showStepName && (

package/src/StepTracker/StepTracker.jsx

@@ -9,6 +9,8 @@ import useCopy from '../utils/useCopy'
 import Step from './Step'
 import defaultDictionary from './dictionary'
 
+const STYLE_BAR_VARIANT = 'bar'
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const selectContainerStyles = ({
@@ -38,6 +40,10 @@ const selectStepTrackerLabelStyles = (
     themeOptions
   })
 
+const selectStepsContainerStyles = ({ barGap }) => ({
+  gap: barGap
+})
+
 /**
  * StepTracker component shows the current position in a sequence of steps.
  *
@@ -83,6 +89,7 @@ const StepTracker = React.forwardRef(
     },
     ref
   ) => {
+    const isBarVariant = variant?.style === STYLE_BAR_VARIANT
     const viewport = useViewport()
     const { showStepTrackerLabel, ...themeTokens } = useThemeTokens(
       'StepTracker',
@@ -135,7 +142,7 @@ const StepTracker = React.forwardRef(
       <View ref={ref} style={selectContainerStyles(themeTokens)} {...selectedProps}>
         <StackView space={0}>
           <View
-            style={staticStyles.stepsContainer}
+            style={[staticStyles.stepsContainer, selectStepsContainerStyles(themeTokens)]}
             accessibilityRole={stepsContainerAccessibilityRole}
           >
             {steps.map((label, index) => {
@@ -150,6 +157,7 @@ const StepTracker = React.forwardRef(
                   tokens={themeTokens}
                   accessibilityRole={stepAccessibilityRole}
                   accessibilityCurrent={current === index && Platform.OS === 'web' && 'step'}
+                  isBarVariant={isBarVariant}
                 />
               )
             })}

package/src/TabBar/TabBar.jsx

@@ -74,6 +74,7 @@ const TabBar = React.forwardRef(
               onPress={() => handlePress(item.id)}
               id={`tab-item-${index}`}
               accessibilityRole="tablist"
+              tokens={item.tokens}
             />
           ))}
         </View>
@@ -93,7 +94,8 @@ TabBar.propTypes = {
       icon: PropTypes.node,
       iconActive: PropTypes.node,
       label: PropTypes.string.isRequired,
-      href: PropTypes.string
+      href: PropTypes.string,
+      tokens: getTokensPropType('TabBarItem')
     })
   ).isRequired,
   /** Id of the initially selected item. */

package/src/TabBar/index.js

@@ -1,3 +1,6 @@
 import TabBar from './TabBar'
+import TabBarItem from './TabBarItem'
+
+TabBar.Item = TabBarItem
 
 export default TabBar

package/src/Tooltip/Backdrop.jsx

@@ -16,7 +16,7 @@ function createPortalNode(nodeId) {
   left: ${window.scrollX}px; 
   right: 0; 
   bottom: 0; 
-  z-index: 9999; 
+  z-index: 100000; 
   pointer-events: none;
   `
 

package/src/utils/index.js

@@ -25,3 +25,4 @@ export { default as convertFromMegaByteToByte } from './convertFromMegaByteToByt
 export { default as formatImageSource } from './formatImageSource'
 export { default as getSpacingScale } from './getSpacingScale'
 export { default as useVariants } from './useVariants'
+export { default as isTouchDevice } from './isTouchDevice'

package/src/utils/isTouchDevice.js

@@ -0,0 +1,34 @@
+import { Platform } from 'react-native'
+
+/**
+ * Determines if the current device supports touch interactions
+ *
+ * @returns {boolean} True if the device supports touch, false otherwise
+ */
+const isTouchDevice = () => {
+  if (Platform.OS !== 'web') {
+    return true
+  }
+
+  if (typeof window !== 'undefined') {
+    if ('ontouchstart' in window) {
+      return true
+    }
+
+    if (window.navigator && window.navigator.maxTouchPoints > 0) {
+      return true
+    }
+
+    if (window.navigator && window.navigator.msMaxTouchPoints > 0) {
+      return true
+    }
+
+    if (window.matchMedia && window.matchMedia('(pointer: coarse)').matches) {
+      return true
+    }
+  }
+
+  return false
+}
+
+export default isTouchDevice