@telus-uds/components-base 2.0.0 → 2.0.2

package/src/StepTracker/Step.jsx

@@ -59,17 +59,18 @@ const selectKnobStyles = (
   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 = ({
@@ -85,6 +86,26 @@ const selectLabelContainerStyles = ({
   flexDirection: labelDirection,
   gap: labelGap
 })
+const selectStepLabelStyles = (
+  {
+    stepLabelColor,
+    labelCurrentColor,
+    stepLabelFontWeight,
+    stepLabelFontSize,
+    stepLabelFontName,
+    stepLabelLineHeight
+  },
+  themeOptions,
+  isCurrent
+) =>
+  applyTextStyles({
+    color: isCurrent ? labelCurrentColor : stepLabelColor,
+    fontSize: stepLabelFontSize,
+    lineHeight: stepLabelLineHeight,
+    fontWeight: stepLabelFontWeight,
+    fontName: stepLabelFontName,
+    themeOptions
+  })
 const selectLabelStyles = (
   {
     labelColor,
@@ -120,76 +141,87 @@ const getStepTestID = (isCompleted, isCurrent) => {
 /**
  * A single step of a StepTracker.
  */
-const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, ...rest }) => {
-  const { completedIcon, showStepLabel, showStepName, ...themeTokens } = tokens
-  const isFirst = stepIndex === 0
-  const isLast = stepIndex === stepCount - 1
-  const isCompleted = status > stepIndex
-  const isCurrent = status === stepIndex
-  const isActive = isCompleted || isCurrent
-  const { themeOptions } = useTheme()
+const Step = React.forwardRef(
+  ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, ...rest }, ref) => {
+    const { completedIcon, showStepLabel, showStepName, textStepTrackerLabel, ...themeTokens } =
+      tokens
+    const isFirst = stepIndex === 0
+    const isLast = stepIndex === stepCount - 1
+    const isCompleted = status > stepIndex
+    const isCurrent = status === stepIndex
+    const isActive = isCompleted || isCurrent
+    const { themeOptions } = useTheme()
 
-  return (
-    <StackView
-      space={0}
-      tokens={{ alignItems: 'stretch', flexGrow: 1 }}
-      accessibilityLabel={label}
-      accessibilityLevel={2}
-      accessibilityCurrent={status === stepIndex}
-      {...selectProps(rest)}
-    >
+    return (
       <StackView
-        direction="row"
         space={0}
-        tokens={{ alignItems: 'center', flexGrow: 0, justifyContent: 'center' }}
+        tokens={{ alignItems: 'stretch', flexGrow: 1 }}
+        accessibilityLabel={label}
+        accessibilityLevel={2}
+        accessibilityCurrent={status === stepIndex}
+        ref={ref}
+        {...selectProps(rest)}
       >
-        <View
-          style={[staticStyles.connector, !isFirst && selectConnectorStyles(themeTokens, isActive)]}
-        />
-        <View
-          style={[staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)]}
-          testID={getStepTestID(isCompleted, isCurrent)}
+        <StackView
+          direction="row"
+          space={0}
+          tokens={{ alignItems: 'center', flexGrow: 0, justifyContent: 'center' }}
         >
-          {isCompleted && completedIcon && (
-            <Icon icon={completedIcon} tokens={selectCompletedIconTokens(themeTokens)} />
-          )}
-          {isCurrent && <View style={selectCurrentInnerStyles(themeTokens)} />}
-        </View>
-        <View
-          style={[
-            staticStyles.connector,
-            !isLast && selectConnectorStyles(themeTokens, isCompleted)
-          ]}
-        />
+          <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 && (
+              <Text
+                style={[
+                  staticStyles.centeredText,
+                  selectStepLabelStyles(tokens, themeOptions, isCurrent)
+                ]}
+              >
+                {name}
+              </Text>
+            )}
+            <StackView direction="row">
+              <Text
+                style={[
+                  staticStyles.centeredText,
+                  tokens.labelDirection === 'column' && staticStyles.wrappingLabel,
+                  selectLabelStyles(tokens, themeOptions, isCurrent)
+                ]}
+              >
+                {label}
+              </Text>
+            </StackView>
+          </View>
+        )}
       </StackView>
-      {showStepLabel && (
-        <View style={[staticStyles.stepLabelContainer, selectLabelContainerStyles(tokens)]}>
-          {showStepName && (
-            <Text
-              style={[
-                staticStyles.centeredText,
-                selectLabelStyles(tokens, themeOptions, isCurrent)
-              ]}
-            >
-              {name}
-            </Text>
-          )}
-          <StackView direction="row">
-            <Text
-              style={[
-                staticStyles.centeredText,
-                tokens.labelDirection === 'column' && staticStyles.wrappingLabel,
-                selectLabelStyles(tokens, themeOptions, isCurrent)
-              ]}
-            >
-              {label}
-            </Text>
-          </StackView>
-        </View>
-      )}
-    </StackView>
-  )
-}
+    )
+  }
+)
+
+Step.displayName = 'Step'
 
 Step.propTypes = {
   ...selectedSystemPropTypes,

package/src/StepTracker/StepTracker.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, Text, View } from 'react-native'
 import StackView from '../StackView'
@@ -51,7 +51,7 @@ const selectStepTrackerLabelStyles = (
  * ## Usability and A11y guidelines
  *
  * Keep in mind that in its current implementation this is not an interactive
- * component and can’t be used to navigate between steps. The application
+ * component and can't be used to navigate between steps. The application
  * must provide its own navigation mechanism and state control. That is the
  * main reason the component assumes the `progressbar` role in terms of
  * accessibility. This also makes it extremely important to make sure you
@@ -70,7 +70,7 @@ const selectStepTrackerLabelStyles = (
  * - `accessibilityValue.text` (`aria-valuetext`): `<Current Step Label>`,
  *
  */
-const StepTracker = forwardRef(
+const StepTracker = React.forwardRef(
   (
     {
       current = 0,
@@ -92,9 +92,13 @@ const StepTracker = forwardRef(
         viewport
       }
     )
+    const { textStepTrackerLabel } = themeTokens
     const getCopy = useCopy({ dictionary, copy })
     const stepTrackerLabel = showStepTrackerLabel
-      ? getCopy('stepTrackerLabel')
+      ? (typeof copy === 'string'
+          ? getCopy(textStepTrackerLabel ?? 1).stepTrackerLabel
+          : getCopy('stepTrackerLabel')
+        )
           .replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length)
           .replace('%{stepCount}', steps.length)
           .replace(
@@ -102,8 +106,14 @@ const StepTracker = forwardRef(
             current < steps.length ? steps[current] : steps[steps.length - 1]
           )
       : ''
-    const getStepLabel = (index) =>
-      themeTokens.showStepLabel ? getCopy('stepLabel').replace('%{stepNumber}', index + 1) : ''
+
+    const getStepLabel = (index) => {
+      if (themeTokens.showStepLabel) {
+        return getCopy(index + 1)?.stepLabel.replace('%{stepNumber}', index + 1)
+      }
+      return ''
+    }
+
     const { themeOptions } = useTheme()
     if (!steps.length) return null
     const selectedProps = selectProps({
@@ -164,12 +174,24 @@ const dictionaryContentShape = PropTypes.shape({
 
 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/src/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: 'Step %{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: 'Étape %{stepNumber}',
+      stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
+    },
+    3: {
+      stepLabel: 'Étape %{stepNumber}',
+      stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
+    }
   }
 }

package/src/TabBar/TabBar.jsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet } from 'react-native'
+import TabBarItem from './TabBarItem'
+import { useThemeTokens } from '../ThemeProvider'
+import { variantProp, getTokensPropType, selectSystemProps, a11yProps, viewProps } from '../utils'
+
+const selectTabBarContainerStyles = ({
+  paddingTop,
+  paddingBottom,
+  borderTopWidth,
+  borderTopColor,
+  backgroundColor
+}) => ({
+  paddingTop,
+  paddingBottom,
+  borderTopWidth,
+  borderTopColor,
+  backgroundColor
+})
+
+const selectTabBarItemContainerStyles = ({ paddingLeft, paddingRight, gap }) => ({
+  paddingLeft,
+  paddingRight,
+  gap
+})
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
+/**
+ * TabBar component renders a navigation bar with multiple TabBarItems.
+ * It allows users to switch between different views or sections.
+ *
+ * @component
+ * @example
+ * const items = [
+ *   { id: '1', label: 'Home', icon: <HomeIcon />, iconActive: <HomeActiveIcon /> },
+ *   { id: '2', label: 'Profile', icon: <ProfileIcon />, iconActive: <ProfileActiveIcon /> },
+ * ]
+ * return (
+ *   <TabBar
+ *     items={items}
+ *     initiallySelectedItem="1"
+ *     onChange={(itemId) => console.log(itemId)}
+ *   />
+ * )
+ */
+
+const TabBar = React.forwardRef(
+  ({ items = [], initiallySelectedItem = '0', onChange, variant, tokens, ...rest }, ref) => {
+    const [isSelected, setIsSelected] = React.useState(initiallySelectedItem)
+    const themeTokens = useThemeTokens('TabBar', tokens, variant)
+
+    const handlePress = (itemId) => {
+      setIsSelected(itemId)
+      onChange?.(itemId)
+    }
+
+    return (
+      <View
+        ref={ref}
+        style={[styles.tabBar, selectTabBarContainerStyles(themeTokens)]}
+        {...selectProps(rest)}
+      >
+        <View style={[styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)]}>
+          {items.map((item, index) => (
+            <TabBarItem
+              key={item.id}
+              label={item.label}
+              href={item.href}
+              isSelected={isSelected === item.id}
+              icon={item.icon}
+              iconActive={item.iconActive}
+              onPress={() => handlePress(item.id)}
+              id={`tab-item-${index}`}
+              accessibilityRole="tablist"
+            />
+          ))}
+        </View>
+      </View>
+    )
+  }
+)
+
+TabBar.displayName = 'TabBar'
+
+TabBar.propTypes = {
+  ...selectedSystemPropTypes,
+  /** Array of TabBarItems to be displayed in TabBar */
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      icon: PropTypes.node,
+      iconActive: PropTypes.node,
+      label: PropTypes.string.isRequired,
+      href: PropTypes.string
+    })
+  ).isRequired,
+  /** Id of the initially selected item. */
+  initiallySelectedItem: PropTypes.number,
+  /** Callback function to handle item selection change. */
+  onChange: PropTypes.func,
+  /** Variant of TabBar for styling purposes. */
+  variant: variantProp.propType,
+  /** Tokens for theming and styling. */
+  tokens: getTokensPropType('TabBar')
+}
+
+const styles = StyleSheet.create({
+  tabBar: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  tabBarItem: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%'
+  }
+})
+
+export default TabBar

package/src/TabBar/TabBarItem.jsx

@@ -0,0 +1,149 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Pressable, View, StyleSheet } from 'react-native'
+import { getTokensPropType, resolvePressableTokens, variantProp } from '../utils'
+import { useThemeTokensCallback } from '../ThemeProvider'
+import Typography from '../Typography'
+import Spacer from '../Spacer'
+
+const selectTypographyStyles = (
+  { fontWeight, color, lineHeight, fontName, activeColor },
+  isSelected
+) => ({
+  fontWeight,
+  color: isSelected ? activeColor : color,
+  lineHeight,
+  fontName
+})
+
+const selectIconContainerStyles = ({ paddingTop, paddingBottom }) => ({
+  paddingTop,
+  paddingBottom,
+  alignItems: 'center'
+})
+
+const selectIconStyles = ({ iconSize, iconColor, activeColor }, isSelected) => ({
+  size: iconSize,
+  color: isSelected ? activeColor : iconColor
+})
+
+const selectContainerStyles = ({ borderRadius, backgroundColor }) => ({
+  borderRadius,
+  backgroundColor,
+  alignSelf: 'center',
+  alignItems: 'center'
+})
+
+const TabBarItem = React.forwardRef(
+  (
+    {
+      href,
+      variant,
+      tokens,
+      label,
+      isSelected,
+      id,
+      onPress,
+      icon: IconComponent,
+      iconActive: IconActiveComponent,
+      accessibilityRole = 'tab'
+    },
+    ref
+  ) => {
+    const getTokens = useThemeTokensCallback('TabBarItem', tokens, variant)
+
+    const getPressableStyle = ({ pressed, focused, hovered }) => {
+      const resolvedTokens = resolvePressableTokens(
+        getTokens,
+        { pressed, focused, hovered },
+        { isSelected }
+      )
+      return {
+        ...resolvedTokens,
+        outline: 'none' // removes the default browser :focus outline
+      }
+    }
+
+    return (
+      <Pressable
+        ref={ref}
+        href={href}
+        nativeID={id}
+        onPress={onPress}
+        style={({ pressed, focused, hovered }) => [
+          styles.flexContainer,
+          getPressableStyle({ pressed, focused, hovered })
+        ]}
+        accessibilityRole={accessibilityRole}
+        testID={id}
+      >
+        {(pressableState) => {
+          const resolvedTokens = getPressableStyle(pressableState)
+
+          return (
+            <View style={selectContainerStyles(resolvedTokens)}>
+              <View style={[selectIconContainerStyles(resolvedTokens), styles.iconContainer]}>
+                {isSelected
+                  ? IconActiveComponent && (
+                      <IconActiveComponent {...selectIconStyles(resolvedTokens, isSelected)} />
+                    )
+                  : IconComponent && <IconComponent {...selectIconStyles(resolvedTokens)} />}
+              </View>
+              <Spacer space={1} />
+              <Typography
+                variant={{ size: 'micro' }}
+                tokens={selectTypographyStyles(resolvedTokens, isSelected)}
+                align="center"
+              >
+                {label}
+              </Typography>
+              <Spacer space={1} />
+            </View>
+          )
+        }}
+      </Pressable>
+    )
+  }
+)
+
+TabBarItem.displayName = 'TabBarItem'
+
+TabBarItem.propTypes = {
+  /** The icon to be displayed when the item is not selected. */
+  icon: PropTypes.elementType,
+  /** The icon to be displayed when the item is selected. */
+  iconActive: PropTypes.elementType,
+  /** Tokens for theming and styling the TabBarItem. */
+  tokens: getTokensPropType('TabBarItem'),
+  /** Variant of the TabBarItem for styling purposes. */
+  variant: variantProp.propType,
+  /** Callback function to handle press events. */
+  onPress: PropTypes.func,
+  /** URL to navigate to when the item is pressed. */
+  href: PropTypes.string,
+  /** Indicates whether the item is selected. */
+  isSelected: PropTypes.bool,
+  /** Unique identifier for the item. */
+  id: PropTypes.string,
+  /** Label text for the item. */
+  label: PropTypes.string.isRequired,
+  /** Accessibility role for the item. */
+  accessibilityRole: PropTypes.string
+}
+
+const styles = StyleSheet.create({
+  flexContainer: {
+    flex: 1,
+    alignItems: 'center'
+  },
+  iconContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    minWidth: 44,
+    minHeight: 40,
+    aspectRatio: 1.1
+  }
+})
+
+export default TabBarItem

package/src/TabBar/index.js

@@ -0,0 +1,3 @@
+import TabBar from './TabBar'
+
+export default TabBar