@telus-uds/components-base 1.12.0 → 1.14.0

package/src/Pagination/Pagination.jsx

@@ -11,7 +11,7 @@ import {
   viewProps,
   withLinkRouter
 } from '../utils'
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 import Box from '../Box'
 
@@ -21,13 +21,14 @@ import SideButton from './SideButton'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
-const selectTextStyles = ({ color, fontName, fontSize, fontWeight, lineHeight }) =>
+const selectTextStyles = ({ color, fontName, fontSize, fontWeight, lineHeight }, themeOptions) =>
   applyTextStyles({
     color,
     fontName,
     fontSize,
     fontWeight,
-    lineHeight
+    lineHeight,
+    themeOptions
   })
 
 const Pagination = forwardRef(
@@ -49,6 +50,7 @@ const Pagination = forwardRef(
     const { truncateAbove, gap, ...themeTokens } = useThemeTokens('Pagination', tokens, variant, {
       viewport
     })
+    const { themeOptions } = useTheme()
 
     const items = React.Children.toArray(children)
 
@@ -66,7 +68,7 @@ const Pagination = forwardRef(
       truncateAbove
     })
 
-    const ellipsisTextStyles = selectTextStyles(themeTokens)
+    const ellipsisTextStyles = selectTextStyles(themeTokens, themeOptions)
 
     if (items.length === 0) {
       return null

package/src/Radio/RadioGroup.jsx

@@ -84,6 +84,7 @@ const RadioGroup = forwardRef(
       legend,
       tooltip,
       hint,
+      hintPosition = 'inline',
       validation,
       feedback,
       initialCheckedId,
@@ -125,6 +126,7 @@ const RadioGroup = forwardRef(
 
         return (
           <Radio
+            error={validation === 'error'}
             ref={itemRef}
             key={radioId}
             id={radioId}
@@ -149,6 +151,7 @@ const RadioGroup = forwardRef(
         legend={legend}
         tooltip={tooltip}
         hint={hint}
+        hintPosition={hintPosition}
         space={fieldSpace}
         feedback={feedback}
         inactive={inactive}
@@ -201,6 +204,10 @@ RadioGroup.propTypes = {
    * Optional additional text giving more detail to help a user make a choice.
    */
   hint: PropTypes.string,
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */

package/src/RadioCard/RadioCard.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, Text, View } from 'react-native'
 
-import { useThemeTokensCallback, applyTextStyles } from '../ThemeProvider'
+import { applyTextStyles, useTheme, useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
   focusHandlerProps,
@@ -96,6 +96,7 @@ const RadioCard = forwardRef(
 
     const getTokens = useThemeTokensCallback('RadioCard', tokens, variant)
     const getCardTokens = (cardState) => selectPressableCardTokens(getTokens(cardState))
+    const { themeOptions } = useTheme()
 
     return (
       <PressableCardBase
@@ -112,7 +113,7 @@ const RadioCard = forwardRef(
           const { radioSpace, contentSpace, ...themeTokens } = getTokens(cardState)
           const radioTokens = selectRadioButtonTokens(themeTokens, 'radio')
           const titleTokens = selectTokens('Typography', themeTokens)
-          const textStyle = applyTextStyles(titleTokens)
+          const textStyle = applyTextStyles({ ...titleTokens, themeOptions })
           return (
             <StackView direction="row" space={radioSpace}>
               <View style={[staticStyles.alignWithText, { height: textStyle.lineHeight }]}>

package/src/RadioCard/RadioCardGroup.jsx

@@ -85,6 +85,7 @@ const RadioCardGroup = forwardRef(
       legend,
       tooltip,
       hint,
+      hintPosition = 'inline',
       validation,
       feedback,
       initialCheckedId,
@@ -127,6 +128,7 @@ const RadioCardGroup = forwardRef(
         legend={legend}
         tooltip={tooltip}
         hint={hint}
+        hintPosition={hintPosition}
         space={fieldSpace}
         feedback={feedback}
         inactive={inactive || readOnly}
@@ -208,6 +210,10 @@ RadioCardGroup.propTypes = {
    * Optional additional text giving more detail to help a user make a choice.
    */
   hint: PropTypes.string,
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */

package/src/Select/Select.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useState } from 'react'
 
 import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
-import { applyTextStyles, useThemeTokens, applyOuterBorder } from '../ThemeProvider'
+import { applyTextStyles, useThemeTokens, applyOuterBorder, useTheme } from '../ThemeProvider'
 import {
   a11yProps,
   componentPropType,
@@ -43,6 +43,7 @@ const selectInputStyles = (
     validationIconSize = 0,
     height
   },
+  themeOptions,
   inactive
 ) => {
   // Subtract border width from padding so overall input width/height doesn't
@@ -50,7 +51,13 @@ const selectInputStyles = (
   const offsetBorder = (value) =>
     typeof value === 'number' ? Math.max(0, value - borderWidth) : value
 
-  const textStyles = applyTextStyles({ fontName, fontSize, lineHeight, fontWeight })
+  const textStyles = applyTextStyles({
+    fontName,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    themeOptions
+  })
 
   const webStyles = Platform.select({
     web: {
@@ -205,13 +212,15 @@ const Select = forwardRef(
 
     const { icon: IconComponent, validationIcon: ValidationIconComponent } = themeTokens
 
+    const { themeOptions } = useTheme()
+
     return (
       <InputSupports {...supportsProps} {...selectedProps}>
         {({ inputId, ...props }) => (
           <View style={selectOuterBorderStyles(themeTokens)}>
             <Picker
               ref={ref}
-              style={selectInputStyles(themeTokens, inactive)}
+              style={selectInputStyles(themeTokens, themeOptions, inactive)}
               onFocus={handleFocus}
               onBlur={handleBlur}
               onMouseOver={handleMouseOver}

package/src/SkipLink/SkipLink.jsx

@@ -0,0 +1,179 @@
+import React, { forwardRef } from 'react'
+import { Platform, Pressable, StyleSheet, Text } from 'react-native'
+import PropTypes from 'prop-types'
+
+import { useThemeTokensCallback } from '../ThemeProvider'
+import {
+  a11yProps,
+  clickProps,
+  getTokensPropType,
+  linkProps,
+  resolvePressableTokens,
+  selectSystemProps,
+  variantProp,
+  withLinkRouter
+} from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps])
+
+// ensure explicit selection of tokens
+const selectStyles = ({
+  backgroundColor,
+  outlineColor,
+  outlineOffset,
+  outlineStyle,
+  outlineWidth,
+  paddingHorizontal,
+  paddingVertical,
+  borderRadius
+}) => ({
+  backgroundColor,
+  outlineColor,
+  outlineOffset,
+  outlineStyle,
+  outlineWidth,
+  paddingHorizontal,
+  paddingVertical,
+  borderRadius
+})
+
+const selectTextStyles = ({ color }) => ({
+  color
+})
+
+/**
+ * A generic Skip link component, unstyled by default.
+ * A Skip link component help keyboard-only users, screen reader users to skip
+ * sections and navigate to the content they want.
+ *
+ * ## Component API
+ *
+ * For common uses, pass a `href` that is a # link to a DOM id that can be skipped to (web only).
+ *
+ * The element with this ID should be focusable, e.g. `<Box nativeID="skip-target" focusable>`.
+ *
+ * Other custom behaviour may be set by passing an `onPress` function, and routers may be integrated
+ * in the same way as other navigation-related components by passing a `LinkRouter`; but a # anchor
+ * href on web and/or a `targetRef` for cross-platform applications is the recommended approach.
+ *
+ * ## Visible styling
+ *
+ * When focused, the skip link shows as a visible element similar to a simplified ButtonLink using
+ * UDS theming. The `tokens` prop may be used to override these styles.
+ *
+ * To control the background of a skip link, the following tokens can be used:
+ *
+ * - `backgroundColor`
+ * *
+ * In order to control the color of the skip link text, the following tokens can be used:
+ *
+ * - `color`
+ *
+ * ### Padding
+ *
+ * The following padding tokens can be used:
+ *
+ * - `paddingHorizontal`
+ * - `paddingVertical`
+ *
+ * ### Outline
+ *
+ * The following tokens to control the outline:
+ *
+ * - `outlineColor`
+ * - `outlineOffset`
+ * - `outlineStyle`
+ * - `outlineWidth`
+ *
+ * ## Usability and A11y guidelines
+ *
+ * - The skip link component is visually hidden until a keyboard press activates it.
+ * - Usually, you should place the skip link immediately after the opening <body> tag.
+ * - This lets users bypass top-level navigation links and jump to the main content on a page.
+ * - Also consider using SkipLink before a complex feature containing many focusable elements.
+ *
+ * ## Accessibility
+ *
+ * Skip link supports all the common a11y and link props.
+ */
+const SkipLink = forwardRef(({ tokens, variant, href, children, ...rawRest }, ref) => {
+  const { onPress, ...rest } = clickProps.toPressProps(rawRest)
+
+  const getTokens = useThemeTokensCallback('SkipLink', tokens, variant)
+  const defaultTokens = getTokens()
+
+  const resolveLinkTokens = (pressState) => resolvePressableTokens(defaultTokens, pressState)
+
+  const handlePress = (event) => {
+    if (typeof onPress === 'function') onPress(event)
+    // TODO - support native apps with something based on refs and/or setAccessibilityFocus
+  }
+
+  return (
+    <Pressable
+      ref={ref}
+      accessibilityRole="link"
+      onPress={handlePress}
+      href={href}
+      style={({ focused: focus }) => {
+        const themeTokens = getTokens({ focus })
+        const skipLinkStyle = selectStyles(themeTokens)
+
+        return [staticStyles.absolute, skipLinkStyle, !focus && staticStyles.hidden]
+      }}
+      {...selectProps(rest)}
+    >
+      {(pressState) => {
+        const themeTokens = resolveLinkTokens(pressState)
+        const textStyles = selectTextStyles(themeTokens)
+
+        return <Text style={[textStyles, staticStyles.baseline]}>{children}</Text>
+      }}
+    </Pressable>
+  )
+})
+
+SkipLink.displayName = 'SkipLink'
+
+SkipLink.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * The text content shown or read out when the SkipLink is focused, usually a string.
+   */
+  children: PropTypes.node,
+  /**
+   * The target to skip to. Usually an anchor link to a section id (e.g. href="#main-section").
+   */
+  href: PropTypes.string,
+  tokens: getTokensPropType('SkipLink'),
+  variant: variantProp.propType
+}
+
+const staticStyles = StyleSheet.create({
+  baseline: {
+    alignSelf: 'baseline'
+  },
+  absolute: {
+    margin: 0,
+    position: 'absolute',
+    top: 0,
+    left: 0
+  },
+  hidden: {
+    overflow: 'hidden',
+    ...Platform.select({
+      web: {
+        clip: 'rect(0 0 0 0)',
+        clipPath: 'inset(50%)'
+      },
+      default: {
+        // width / height of 0 would make it non-focusable
+        height: 1,
+        width: 1,
+        opacity: 0
+      }
+    })
+  }
+})
+
+export default withLinkRouter(SkipLink)

package/src/SkipLink/index.js

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

package/src/StepTracker/Step.jsx

@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native'
 import StackView from '../StackView'
 import Icon from '../Icon'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
-import { applyTextStyles } from '../ThemeProvider'
+import { applyTextStyles, useTheme } from '../ThemeProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -95,6 +95,7 @@ const selectLabelStyles = (
     labelFontName,
     labelLineHeight
   },
+  themeOptions,
   isCurrent
 ) =>
   applyTextStyles({
@@ -102,7 +103,8 @@ const selectLabelStyles = (
     fontSize: labelFontSize,
     lineHeight: labelLineHeight,
     fontWeight: isCurrent ? labelCurrentFontWeight : labelFontWeight,
-    fontName: labelFontName
+    fontName: labelFontName,
+    themeOptions
   })
 const getStepTestID = (isCompleted, isCurrent) => {
   let testID = 'StepTracker-Step'
@@ -125,6 +127,7 @@ const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, .
   const isCompleted = status > stepIndex
   const isCurrent = status === stepIndex
   const isActive = isCompleted || isCurrent
+  const { themeOptions } = useTheme()
 
   return (
     <StackView
@@ -158,7 +161,12 @@ const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, .
       {showStepLabel && (
         <View style={[staticStyles.stepLabelContainer, selectLabelContainerStyles(tokens)]}>
           {showStepName && (
-            <Text style={[staticStyles.centeredText, selectLabelStyles(tokens, isCurrent)]}>
+            <Text
+              style={[
+                staticStyles.centeredText,
+                selectLabelStyles(tokens, themeOptions, isCurrent)
+              ]}
+            >
               {name}
             </Text>
           )}
@@ -167,7 +175,7 @@ const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, .
               style={[
                 staticStyles.centeredText,
                 tokens.labelDirection === 'column' && staticStyles.wrappingLabel,
-                selectLabelStyles(tokens, isCurrent)
+                selectLabelStyles(tokens, themeOptions, isCurrent)
               ]}
             >
               {label}

package/src/StepTracker/StepTracker.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, Text, View } from 'react-native'
 import StackView from '../StackView'
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 import { useViewport } from '../ViewportProvider'
 import useCopy from '../utils/useCopy'
@@ -25,19 +25,17 @@ const selectContainerStyles = ({
 const selectStepTrackerLabelContainerStyles = ({ labelMarginTop }) => ({
   marginTop: labelMarginTop
 })
-const selectStepTrackerLabelStyles = ({
-  labelColor,
-  labelFontSize,
-  labelFontWeight,
-  labelFontName,
-  labelLineHeight
-}) =>
+const selectStepTrackerLabelStyles = (
+  { labelColor, labelFontSize, labelFontWeight, labelFontName, labelLineHeight },
+  themeOptions
+) =>
   applyTextStyles({
     color: labelColor,
     fontSize: labelFontSize,
     lineHeight: labelLineHeight,
     fontWeight: labelFontWeight,
-    fontName: labelFontName
+    fontName: labelFontName,
+    themeOptions
   })
 
 /**
@@ -106,6 +104,7 @@ const StepTracker = forwardRef(
       : ''
     const getStepLabel = (index) =>
       themeTokens.showStepLabel ? getCopy('stepLabel').replace('%{stepNumber}', index + 1) : ''
+    const { themeOptions } = useTheme()
     if (!steps.length) return null
     const selectedProps = selectProps({
       accessibilityLabel: stepTrackerLabel,
@@ -145,7 +144,9 @@ const StepTracker = forwardRef(
                 selectStepTrackerLabelContainerStyles(themeTokens)
               ]}
             >
-              <Text style={selectStepTrackerLabelStyles(themeTokens)}>{stepTrackerLabel}</Text>
+              <Text style={selectStepTrackerLabelStyles(themeTokens, themeOptions)}>
+                {stepTrackerLabel}
+              </Text>
             </View>
           )}
         </StackView>

package/src/Tabs/TabsItem.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 
-import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
+import { applyTextStyles, useTheme, useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
   clickProps,
@@ -97,7 +97,7 @@ const TabsItem = forwardRef(
   ) => {
     // Convert onClick etc to onPress etc if used in an integration
     const { onPress, ...rest } = clickProps.toPressProps(rawRest)
-
+    const { themeOptions } = useTheme()
     const getTokens = useThemeTokensCallback('TabsItem', tokens, variant)
     const resolveTokens = (pressableState) =>
       resolvePressableTokens(getTokens, pressableState, { selected })
@@ -165,6 +165,7 @@ const TabsItem = forwardRef(
           const containerStyles = selectContainerStyles(themeTokens)
           const textStyles = applyTextStyles({
             ...selectTokens('Typography', themeTokens),
+            themeOptions,
             textAlign
           })
 

package/src/TextInput/TextInputBase.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useEffect, useState } from 'react'
 import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-native'
 
 import PropTypes from 'prop-types'
-import { applyTextStyles, useThemeTokens, applyOuterBorder } from '../ThemeProvider'
+import { applyTextStyles, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider'
 import {
   a11yProps,
   getTokensPropType,
@@ -43,6 +43,7 @@ const selectInputStyles = (
     width,
     height
   },
+  themeOptions,
   inactive
 ) => {
   // Subtract border width from padding so overall input width/height doesn't
@@ -50,7 +51,13 @@ const selectInputStyles = (
   const offsetBorder = (value) =>
     typeof value === 'number' ? Math.max(0, value - borderWidth) : value
 
-  const textStyles = applyTextStyles({ fontName, fontSize, lineHeight, fontWeight })
+  const textStyles = applyTextStyles({
+    fontName,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    themeOptions
+  })
 
   function linesToHeight(lines) {
     const { lineHeight: absoluteLineHeight } = textStyles
@@ -197,7 +204,8 @@ const TextInputBase = forwardRef(
       value: isControlled ? currentValue : undefined
     }
 
-    const nativeInputStyle = selectInputStyles({ ...themeTokens, height }, inactive)
+    const { themeOptions } = useTheme()
+    const nativeInputStyle = selectInputStyles({ ...themeTokens, height }, themeOptions, inactive)
 
     return (
       <View style={selectOuterBorderStyles(themeTokens)}>

package/src/ThemeProvider/ThemeProvider.jsx

@@ -1,13 +1,19 @@
 import React, { createContext, useState } from 'react'
 import PropTypes from 'prop-types'
 import { validateThemeTokensVersion } from './utils'
+import responsiveProps from '../utils/props/responsiveProps'
 
 export const uninitialisedError = new Error('Theme context used outside of ThemeProvider')
 
 export const ThemeContext = createContext(uninitialisedError)
 export const ThemeSetterContext = createContext(uninitialisedError)
 
-const ThemeProvider = ({ children, defaultTheme }) => {
+const ThemeProvider = ({
+  children,
+  defaultTheme,
+  // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
+  themeOptions = { forceAbsoluteFontSizing: true }
+}) => {
   const [theme, setTheme] = useState(defaultTheme)
 
   // Validate the theme tokens version on every render.
@@ -17,7 +23,7 @@ const ThemeProvider = ({ children, defaultTheme }) => {
 
   return (
     <ThemeSetterContext.Provider value={setTheme}>
-      <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+      <ThemeContext.Provider value={{ ...theme, themeOptions }}>{children}</ThemeContext.Provider>
     </ThemeSetterContext.Provider>
   )
 }
@@ -28,7 +34,20 @@ ThemeProvider.propTypes = {
     metadata: PropTypes.shape({
       themeTokensVersion: PropTypes.string.isRequired
     }).isRequired
-  }).isRequired
+  }).isRequired,
+  /**
+   * An object containing options allowing to customize the theming experience:
+   *
+   * - `forceAbsoluteFontSizing`: available on web only; when set to true, allows
+   *   using absolute font sizing (in pixels, doesn't scale) instead of the
+   *   relative sizing (in `rem`, scales depending on the browser settings)
+   * - `contentMaxWidth`: allows configuration of the content max width to be used in components
+   *   such as Footnote and Notification to avoid content to stretch width more then the page's width
+   */
+  themeOptions: PropTypes.shape({
+    forceAbsoluteFontSizing: PropTypes.bool,
+    contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number)
+  })
 }
 
 export default ThemeProvider

package/src/ThemeProvider/utils/styles.js

@@ -15,13 +15,21 @@ export function applyTextStyles({
   fontWeight = '400',
   fontName,
   fontStyle = 'normal',
+  themeOptions = {
+    // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
+    forceAbsoluteFontSizing: true
+  },
   ...rest
 }) {
   const styles = { ...rest }
+  const { forceAbsoluteFontSizing } = themeOptions
 
   if (fontSize) {
     // If relative font sizes are needed, catch and calculate them here
-    styles.fontSize = fontSize
+    styles.fontSize =
+      Platform.OS === 'web' && !forceAbsoluteFontSizing
+        ? `${fontSize / fontBasePixels}rem`
+        : fontSize
   }
   if (typeof lineHeight === 'number') {
     // React Native expects absolute line heights but multipliers are better as design tokens

package/src/ThemeProvider/utils/theme-tokens.js

@@ -157,7 +157,7 @@ export const validateThemeTokensVersion = (theme) => {
 
 The UDS base components ${pkg.name} v${pkg.version} are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ${expectedThemeTokensVersion}. The current theme was built with @telus-uds/system-theme-tokens v${actualThemeTokensVersion}.
 
-If you see this error than most likely you have attempted to install ${pkg.name} and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/packages/docs-uds/docs/multi-brand-usage.md`
+If you see this error than most likely you have attempted to install ${pkg.name} and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/docs/docs/multi-brand-usage.md`
     )
   }
 }

package/src/ToggleSwitch/ToggleSwitchGroup.jsx

@@ -40,6 +40,7 @@ const ToggleSwitchGroup = forwardRef(
       inactive = false,
       feedback,
       hint,
+      hintPosition = 'inline',
       tooltip,
       legend,
       name: inputGroupName,
@@ -130,6 +131,7 @@ const ToggleSwitchGroup = forwardRef(
         legend={legend}
         tooltip={tooltip}
         hint={hint}
+        hintPosition={hintPosition}
         space={fieldSpace}
         feedback={feedback}
         inactive={inactive}
@@ -205,6 +207,10 @@ ToggleSwitchGroup.propTypes = {
    * Optional additional text giving more detail to help a user make a choice.
    */
   hint: PropTypes.string,
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */