@telus-uds/components-base 1.10.0 → 1.12.1

package/src/Carousel/Carousel.jsx

@@ -3,13 +3,22 @@ import { View, Animated, PanResponder, StyleSheet, Platform } from 'react-native
 import PropTypes from 'prop-types'
 import { useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
-import { getTokensPropType, variantProp, selectSystemProps, a11yProps, viewProps } from '../utils'
+import {
+  getTokensPropType,
+  getA11yPropsFromHtmlTag,
+  layoutTags,
+  variantProp,
+  selectSystemProps,
+  a11yProps,
+  viewProps,
+  useCopy
+} from '../utils'
 import { useA11yInfo } from '../A11yInfoProvider'
 import { CarouselProvider } from './CarouselContext'
 import CarouselItem from './CarouselItem'
-import StepTracker from '../StepTracker'
-import StackView from '../StackView'
 import IconButton from '../IconButton'
+import CarouselStepTracker from './CarouselStepTracker/CarouselStepTracker'
+import dictionary from './dictionary'
 
 const staticStyles = StyleSheet.create({
   root: {
@@ -22,19 +31,6 @@ const staticStyles = StyleSheet.create({
   }
 })
 
-const staticTokens = {
-  stackView: {
-    justifyContent: 'center'
-  },
-  stepTracker: {
-    showStepLabel: false,
-    showStepTrackerLabel: true,
-    knobCompletedBackgroundColor: 'none',
-    connectorCompletedColor: 'none',
-    connectorColor: 'none'
-  }
-}
-
 const selectContainerStyles = (width) => ({
   backgroundColor: 'transparent',
   overflow: 'hidden',
@@ -79,15 +75,6 @@ const selectPreviousNextNavigationButtonStyles = (
   return styles
 }
 
-const defaultPanelNavigationDictionary = {
-  en: {
-    stepTrackerLabel: 'Showing %{stepNumber} of %{stepCount}'
-  },
-  fr: {
-    stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
-  }
-}
-
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 /**
@@ -150,6 +137,7 @@ const Carousel = React.forwardRef(
       tokens,
       variant,
       children,
+      itemLabel = 'item',
       previousNextNavigationPosition = 'inside',
       previousNextIconSize = 'default',
       minDistanceToCapture = 5,
@@ -158,26 +146,46 @@ const Carousel = React.forwardRef(
       onAnimationEnd,
       onIndexChanged,
       springConfig = undefined,
-      onRenderPanelNavigation,
-      panelNavigationTextDictionary = defaultPanelNavigationDictionary,
+      panelNavigation = <CarouselStepTracker />,
+      tag = 'ul',
       accessibilityRole = 'adjustable',
       accessibilityLabel = 'carousel',
+      copy,
       ...rest
     },
     ref
   ) => {
     const viewport = useViewport()
+    const themeTokens = useThemeTokens('Carousel', tokens, variant, {
+      viewport
+    })
     const {
       previousIcon,
       nextIcon,
       showPreviousNextNavigation,
       showPanelNavigation,
-      spaceBetweenSlideAndPreviousNextNavigation,
-      spaceBetweenSlideAndPanelNavigation
-    } = useThemeTokens('Carousel', tokens, variant, {
-      viewport
-    })
+      spaceBetweenSlideAndPreviousNextNavigation
+    } = themeTokens
     const [activeIndex, setActiveIndex] = React.useState(0)
+
+    const [isAnimating, setIsAnimating] = React.useState(false)
+    const handleAnimationStart = React.useCallback(
+      (...args) => {
+        if (typeof onAnimationStart === 'function') onAnimationStart(...args)
+        setIsAnimating(true)
+      },
+      [onAnimationStart]
+    )
+    const handleAnimationEnd = React.useCallback(
+      (...args) => {
+        if (typeof onAnimationEnd === 'function') onAnimationEnd(...args)
+        setIsAnimating(false)
+      },
+      [onAnimationEnd]
+    )
+
+    const getCopy = useCopy({ dictionary, copy })
+
     const childrenArray = React.Children.toArray(children)
     const systemProps = selectProps({
       ...rest,
@@ -202,10 +210,6 @@ const Carousel = React.forwardRef(
     const animatedY = React.useRef(0)
     const isFirstSlide = !activeIndex
     const isLastSlide = activeIndex + 1 >= children.length
-    const panelNavigationTokens = {
-      ...staticTokens.stepTracker,
-      containerPaddingTop: spaceBetweenSlideAndPanelNavigation
-    }
 
     const onContainerLayout = ({
       nativeEvent: {
@@ -230,18 +234,21 @@ const Carousel = React.forwardRef(
     }, [activeIndex, containerLayout.width, pan, animatedX])
 
     const animate = React.useCallback(
-      (toValue) => {
+      (toValue, toIndex) => {
+        const handleAnimationEndToIndex = (...args) => handleAnimationEnd(toIndex, ...args)
         if (reduceMotionEnabled) {
-          Animated.timing(pan, { toValue, duration: 1, useNativeDriver: false }).start()
+          Animated.timing(pan, { toValue, duration: 1, useNativeDriver: false }).start(
+            handleAnimationEndToIndex
+          )
         } else {
           Animated.spring(pan, {
             ...springConfig,
             toValue,
             useNativeDriver: false
-          }).start()
+          }).start(handleAnimationEndToIndex)
         }
       },
-      [pan, springConfig, reduceMotionEnabled]
+      [pan, springConfig, reduceMotionEnabled, handleAnimationEnd]
     )
 
     const updateIndex = React.useCallback(
@@ -258,32 +265,32 @@ const Carousel = React.forwardRef(
           calcDelta = -1 * activeIndex + delta - 1
         }
 
+        const index = activeIndex + calcDelta
+
         if (skipChanges) {
-          animate(toValue)
+          animate(toValue, index)
           return calcDelta
         }
 
-        const index = activeIndex + calcDelta
         setActiveIndex(index)
 
         toValue.x = containerLayout.width * -1 * calcDelta
 
-        animate(toValue)
+        animate(toValue, index)
 
         if (onIndexChanged) onIndexChanged(calcDelta)
-        if (onAnimationEnd) onAnimationEnd(index)
         return calcDelta
       },
-      [containerLayout.width, activeIndex, animate, children.length, onIndexChanged, onAnimationEnd]
+      [containerLayout.width, activeIndex, animate, children.length, onIndexChanged]
     )
 
     const fixOffsetAndGo = React.useCallback(
       (delta) => {
         updateOffset()
-        if (onAnimationStart) onAnimationStart(activeIndex)
+        handleAnimationStart(activeIndex)
         updateIndex(delta)
       },
-      [updateIndex, updateOffset, activeIndex, onAnimationStart]
+      [updateIndex, updateOffset, activeIndex, handleAnimationStart]
     )
 
     const goToNeighboring = React.useCallback(
@@ -310,7 +317,7 @@ const Carousel = React.forwardRef(
               return false
             }
 
-            if (onAnimationStart) onAnimationStart(activeIndex)
+            handleAnimationStart(activeIndex)
 
             return Math.abs(gestureState.dx) > minDistanceToCapture
           },
@@ -322,7 +329,7 @@ const Carousel = React.forwardRef(
             const correction = gesture.moveX - gesture.x0
 
             if (Math.abs(correction) < containerLayout.width * minDistanceForAction) {
-              animate({ x: 0, y: 0 })
+              animate({ x: 0, y: 0 }, 0)
             } else {
               const delta = correction > 0 ? -1 : 1
               updateIndex(delta)
@@ -337,7 +344,7 @@ const Carousel = React.forwardRef(
         isSwipeAllowed,
         activeIndex,
         minDistanceForAction,
-        onAnimationStart,
+        handleAnimationStart,
         minDistanceToCapture,
         pan.x
       ]
@@ -379,12 +386,27 @@ const Carousel = React.forwardRef(
     // Related discussion - https://github.com/telus/universal-design-system/issues/1549
     const previousNextIconButtonVariants = { size: previousNextIconSize, raised: true }
 
+    const getCopyWithPlaceholders = React.useCallback(
+      (copyKey) => {
+        const copyText = getCopy(copyKey)
+          .replace(/%\{itemLabel\}/g, itemLabel)
+          .replace(/%\{stepNumber\}/g, activeIndex + 1)
+          .replace(/%\{stepCount\}/g, childrenArray.length)
+
+        // First word might be a lowercase placeholder: capitalize the first letter
+        return `${copyText[0].toUpperCase()}${copyText.slice(1)}`
+      },
+      [activeIndex, childrenArray.length, itemLabel, getCopy]
+    )
+
     return (
       <CarouselProvider
         activeIndex={activeIndex}
         totalItems={childrenArray.length}
         width={containerLayout.width}
         goTo={goTo}
+        getCopyWithPlaceholders={getCopyWithPlaceholders}
+        themeTokens={themeTokens}
       >
         <View style={staticStyles.root} onLayout={onContainerLayout} ref={ref} {...systemProps}>
           {showPreviousNextNavigation && (
@@ -404,7 +426,10 @@ const Carousel = React.forwardRef(
                 icon={previousIcon}
                 onPress={goToPrev}
                 variant={previousNextIconButtonVariants}
-                accessibilityLabel="previous-button"
+                accessibilityLabel={getCopyWithPlaceholders('iconButtonLabel').replace(
+                  '%{targetStep}',
+                  activeIndex
+                )}
               />
             </View>
           )}
@@ -417,9 +442,11 @@ const Carousel = React.forwardRef(
                 }
               ])}
               {...panResponder.panHandlers}
+              {...getA11yPropsFromHtmlTag(tag)}
             >
               {childrenArray.map((element, index) => {
-                const clonedElement = React.cloneElement(element, { elementIndex: index })
+                const hidden = !isAnimating && index !== activeIndex
+                const clonedElement = React.cloneElement(element, { elementIndex: index, hidden })
                 return <React.Fragment key={index.toFixed(2)}>{clonedElement}</React.Fragment>
               })}
             </Animated.View>
@@ -441,25 +468,15 @@ const Carousel = React.forwardRef(
                 icon={nextIcon}
                 onPress={goToNext}
                 variant={previousNextIconButtonVariants}
-                accessibilityLabel="next-button"
+                accessibilityLabel={getCopyWithPlaceholders('iconButtonLabel').replace(
+                  '%{targetStep}',
+                  activeIndex + 2
+                )}
               />
             </View>
           )}
         </View>
-        {showPanelNavigation ? (
-          <StackView direction="row" tokens={staticTokens.stackView}>
-            {onRenderPanelNavigation ? (
-              onRenderPanelNavigation({ activeIndex, totalItems: childrenArray.length })
-            ) : (
-              <StepTracker
-                current={activeIndex}
-                steps={childrenArray.map((_, index) => String(index))}
-                dictionary={panelNavigationTextDictionary}
-                tokens={panelNavigationTokens}
-              />
-            )}
-          </StackView>
-        ) : null}
+        {showPanelNavigation ? panelNavigation : null}
       </CarouselProvider>
     )
   }
@@ -473,6 +490,13 @@ Carousel.propTypes = {
    * Slides to render in Carousel. Wrap individual slides in `Carousel.Item`
    */
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  /**
+   * Lowercase language-appropriate user-facing description of what each Carousel slide represents.
+   * This is used when generating item labels. For example, if a carousel contains offers,
+   * pass itemLabel="summer offer" (or copy="fr" and an appropriate French translation) to genereate
+   * accessible labels such as "Summer offer 1 of 3" and "Show summer offer 2 of 3".
+   */
+  itemLabel: PropTypes.string,
   /**
    * `inside` renders the previous and next buttons inside the slide
    * `outside` renders the previous and next buttons outside the slide
@@ -514,20 +538,20 @@ Carousel.propTypes = {
    */
   onIndexChanged: PropTypes.func,
   /**
-   * Use this to render a custom panel navigation element instead of dots navigation
-   * This function is also provided with an object with the following properties
-   * activeIndex: index of current slide
-   * totalItems: total number of slides
+   * Use this to render a custom panel navigation element instead of the default StepTracker's based navigation
+   * You can make use of `useCarousel` within your custom panel navigation component to hook into various Carousel states such as:
+   * - activeIndex: index of current slide
+   * - totalItems: total number of slides
    * Use it as follows:
    * ```js
    *    <Carousel
-   *      onRenderPanelNavigation={({ totalItems, activeIndex }) => <Text>Showing {activeIndex + 1}</Text>}
+   *      panelNavigation={<CustomPanelNavigation />}
    *    >
    *      <Carousel.Item>First Slide</Carousel.Item>
    *    </Carousel>
    * ```
    */
-  onRenderPanelNavigation: PropTypes.func,
+  panelNavigation: PropTypes.element,
   /**
    * When slide animation start
    * This function is also provided with a parameter indicating the current slide index before animation starts
@@ -576,7 +600,15 @@ Carousel.propTypes = {
   /**
    * Provide custom accessibilityLabel for Carousel container
    */
-  accessibilityLabel: PropTypes.string
+  accessibilityLabel: PropTypes.string,
+  /**
+   * HTML tag to use for the Carousel item's immediate parent. Defaults to `'ul'` so that
+   * assistive technology tools know to intepret the carousel as a list.
+   *
+   * Note that if the immediate Carousel children do not all render as `'li'` elements,
+   * this should be changed (e.g. pass tag="div") because only 'li' is a valid child of 'ul'.
+   */
+  tag: PropTypes.oneOf(layoutTags)
 }
 
 Carousel.Item = CarouselItem

package/src/Carousel/CarouselContext.jsx

@@ -1,12 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { getTokensPropType } from '../utils'
 
 const CarouselContext = React.createContext()
 
-const CarouselProvider = ({ children, activeIndex, totalItems, width, goTo }) => {
+const CarouselProvider = ({
+  children,
+  activeIndex,
+  totalItems,
+  width,
+  goTo,
+  getCopyWithPlaceholders,
+  themeTokens
+}) => {
   const value = React.useMemo(
-    () => ({ activeIndex, totalItems, width, goTo }),
-    [activeIndex, totalItems, width, goTo]
+    () => ({ activeIndex, totalItems, width, goTo, getCopyWithPlaceholders, themeTokens }),
+    [activeIndex, totalItems, width, goTo, getCopyWithPlaceholders, themeTokens]
   )
   return <CarouselContext.Provider value={value}>{children}</CarouselContext.Provider>
 }
@@ -24,7 +33,9 @@ CarouselProvider.propTypes = {
   activeIndex: PropTypes.number.isRequired,
   totalItems: PropTypes.number.isRequired,
   width: PropTypes.number.isRequired,
-  goTo: PropTypes.func.isRequired
+  goTo: PropTypes.func.isRequired,
+  getCopyWithPlaceholders: PropTypes.func.isRequired,
+  themeTokens: getTokensPropType('Carousel')
 }
 
 export { CarouselProvider, useCarousel }

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -1,7 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, Platform } from 'react-native'
-import { selectSystemProps, a11yProps, viewProps } from '../../utils'
+import {
+  layoutTags,
+  getA11yPropsFromHtmlTag,
+  selectSystemProps,
+  a11yProps,
+  viewProps
+} from '../../utils'
 import { useCarousel } from '../CarouselContext'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -10,17 +16,21 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * `Carousel.Item` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
-const CarouselItem = ({ children, elementIndex, ...rest }) => {
-  const { width, activeIndex, totalItems } = useCarousel()
+const CarouselItem = ({ children, elementIndex, tag = 'li', hidden, ...rest }) => {
+  const { width, activeIndex } = useCarousel()
   const selectedProps = selectProps({
     ...rest,
-    // `group` role crashes the app on Android so setting it to `none` for Android
-    accessibilityRole: Platform.OS === 'android' ? 'none' : 'group',
-    accessibilityLabel: `Showing ${elementIndex + 1} of ${totalItems}`
+    ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
   })
+
   const focusabilityProps = activeIndex === elementIndex ? {} : a11yProps.nonFocusableProps
+  const style = { width }
+  if (hidden && Platform.OS === 'web') {
+    // On web, visibility: hidden makes all children non-focusable. It doesn't exist on native.
+    style.visibility = 'hidden'
+  }
   return (
-    <View style={{ width }} {...selectedProps} {...focusabilityProps}>
+    <View style={style} {...selectedProps} {...focusabilityProps}>
       {children}
     </View>
   )
@@ -40,7 +50,15 @@ CarouselItem.propTypes = {
   /**
    * Content of the slide
    */
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  /**
+   * Sets the HTML tag of the outer container. By default `'li'` so that assistive technology sees
+   * the Carousel as a list of items.
+   *
+   * Carousel's innermost container defaults to `'ul'` which can be overridden. If the tag of either
+   * `Carousel` or `Carousel.Item` is overriden, the other should be too, to avoid producing invalid HTML.
+   */
+  tag: PropTypes.oneOf(layoutTags)
 }
 
 CarouselItem.displayName = 'Carousel.Item'

package/src/Carousel/CarouselStepTracker/CarouselStepTracker.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { useCarousel } from '../CarouselContext'
+import StepTracker from '../../StepTracker'
+import StackView from '../../StackView'
+
+const CarouselStepTracker = () => {
+  const { activeIndex, totalItems, getCopyWithPlaceholders, themeTokens } = useCarousel()
+  const stackViewTokens = {
+    justifyContent: 'center'
+  }
+  const stepTrackerTokens = {
+    showStepLabel: false,
+    showStepTrackerLabel: true,
+    knobCompletedBackgroundColor: 'none',
+    connectorCompletedColor: 'none',
+    connectorColor: 'none',
+    containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation
+  }
+  const steps = Array.from(Array(totalItems)).map((_, index) => String(index))
+  return (
+    <StackView direction="row" tokens={stackViewTokens}>
+      <StepTracker
+        current={activeIndex}
+        steps={steps}
+        copy={{
+          // Give StepTracker copy from Carousel's language and dictionary
+          stepLabel: getCopyWithPlaceholders('stepLabel'),
+          stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
+        }}
+        tokens={stepTrackerTokens}
+      />
+    </StackView>
+  )
+}
+
+export default CarouselStepTracker

package/src/Carousel/CarouselStepTracker/index.js

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

package/src/Carousel/dictionary.js

@@ -0,0 +1,16 @@
+// 'stepLabel' and 'stepTrackerLabel' are passed down to StepTracker
+export default {
+  en: {
+    carouselLabel: '%{stepCount} items',
+    iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',
+    stepLabel: '%{itemLabel} %{stepNumber}',
+    stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}'
+  },
+  fr: {
+    // TODO: French translations here
+    carouselLabel: '(fr) %{stepCount} items',
+    iconButtonLabel: '(fr) Show %{itemLabel} %{targetStep} of %{stepCount}',
+    stepLabel: '(fr) %{itemLabel} %{stepNumber}',
+    stepTrackerLabel: '(fr) %{itemLabel} %{stepNumber} of %{stepCount}'
+  }
+}

package/src/Checkbox/Checkbox.jsx

@@ -6,7 +6,12 @@ import CheckboxInput from './CheckboxInput'
 import CheckboxLabel from '../InputLabel/LabelContent'
 import Feedback from '../Feedback'
 import StackView from '../StackView'
-import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
+import {
+  applyShadowToken,
+  applyTextStyles,
+  useTheme,
+  useThemeTokensCallback
+} from '../ThemeProvider'
 import {
   a11yProps,
   focusHandlerProps,
@@ -54,21 +59,18 @@ const selectInputStyles = (
     }
   })
 })
-const selectLabelStyles = ({
-  labelColor,
-  labelFontName,
-  labelFontSize,
-  labelFontWeight,
-  labelMarginLeft,
-  labelLineHeight
-}) => ({
+const selectLabelStyles = (
+  { labelColor, labelFontName, labelFontSize, labelFontWeight, labelMarginLeft, labelLineHeight },
+  themeOptions
+) => ({
   marginLeft: labelMarginLeft,
   ...applyTextStyles({
     color: labelColor,
     fontName: labelFontName,
     fontWeight: labelFontWeight,
     fontSize: labelFontSize,
-    lineHeight: labelLineHeight
+    lineHeight: labelLineHeight,
+    themeOptions
   })
 })
 const selectIconTokens = ({ icon, iconColor, iconSize }) => ({
@@ -172,6 +174,7 @@ const Checkbox = forwardRef(
     }
     const uniqueId = useUniqueId('checkbox')
     const inputId = id ?? uniqueId
+    const { themeOptions } = useTheme()
 
     return (
       <View style={staticStyles.wrapper} ref={ref}>
@@ -187,7 +190,7 @@ const Checkbox = forwardRef(
             {({ focused: focus, hovered: hover, pressed }) => {
               const { icon: IconComponent, ...stateTokens } = getTokens({ focus, hover, pressed })
               const iconTokens = selectIconTokens(stateTokens)
-              const labelStyles = selectLabelStyles(stateTokens)
+              const labelStyles = selectLabelStyles(stateTokens, themeOptions)
               const alignWithLabel = label
                 ? [staticStyles.alignWithLabel, { height: labelStyles.lineHeight }]
                 : null

package/src/Checkbox/CheckboxGroup.jsx

@@ -61,7 +61,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
  * @example
  * ```jsx
  * <CheckboxGroup
- *   initialCheckedId="check1"
+ *   initialCheckedIds="check1"
  *   items={[
  *     { label: 'Checkbox 1', id: 'check1' },
  *     { label: 'Checkbox 2', id: 'check2' },

package/src/Feedback/Feedback.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
   getTokensPropType,
@@ -17,10 +17,16 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 const selectStyles = (tokens) => selectTokens('Feedback', tokens)
 
-const selectTitleTextStyles = ({ titleFontSize, ...tokens }) =>
-  applyTextStyles(selectTokens('Typography', { ...tokens, fontSize: titleFontSize }))
-const selectContentTextStyles = ({ contentFontSize, ...tokens }) =>
-  applyTextStyles(selectTokens('Typography', { ...tokens, fontSize: contentFontSize }))
+const selectTitleTextStyles = ({ titleFontSize, ...tokens }, themeOptions) =>
+  applyTextStyles({
+    ...selectTokens('Typography', { ...tokens, fontSize: titleFontSize, themeOptions }),
+    themeOptions
+  })
+const selectContentTextStyles = ({ contentFontSize, ...tokens }, themeOptions) =>
+  applyTextStyles({
+    ...selectTokens('Typography', { ...tokens, fontSize: contentFontSize }),
+    themeOptions
+  })
 
 const selectIconTokens = ({ iconSize, iconColor }) => ({
   size: iconSize,
@@ -56,8 +62,9 @@ const Feedback = forwardRef(
 
     const { icon: IconComponent } = themeTokens
 
-    const titleTextStyles = selectTitleTextStyles(themeTokens)
-    const contentTextStyles = selectContentTextStyles(themeTokens)
+    const { themeOptions } = useTheme()
+    const titleTextStyles = selectTitleTextStyles(themeTokens, themeOptions)
+    const contentTextStyles = selectContentTextStyles(themeTokens, themeOptions)
 
     const content =
       typeof children === 'string' ? <Text style={contentTextStyles}>{children}</Text> : children

package/src/Icon/IconText.jsx

@@ -39,6 +39,7 @@ const IconText = forwardRef(
 IconText.displayName = 'IconText'
 
 IconText.propTypes = {
+  /* eslint-disable react/no-unused-prop-types */ // eslint is having hard time seeing these props through forwardRef
   /**
    * Amount of space to separate the text content and icon. Uses the themes's spacing scale
    * (see useSpacingScale for more info).
@@ -63,6 +64,7 @@ IconText.propTypes = {
    * `<Typography>` component, or a component that renders `<Text>`.
    */
   children: PropTypes.node
+  /* eslint-enable react/no-unused-prop-types */
 }
 
 export default IconText