@telus-uds/components-base 1.11.0 → 1.13.0

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.
    */

package/src/Typography/Typography.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { Text, View } from 'react-native'
 
-import { useThemeTokens } from '../ThemeProvider'
+import { useTheme, useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 import { applyTextStyles } from '../ThemeProvider/utils'
 import {
@@ -24,22 +24,17 @@ import {
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps])
 const [selectTextProps, selectedTextPropTypes] = selectSystemProps([textProps])
 
-const selectTextStyles = ({
-  fontWeight,
-  fontSize,
-  color,
-  lineHeight,
-  fontName,
-  textAlign,
-  textTransform,
-  letterSpacing
-}) =>
+const selectTextStyles = (
+  { fontWeight, fontSize, color, lineHeight, fontName, textAlign, textTransform, letterSpacing },
+  themeOptions
+) =>
   applyTextStyles({
     fontWeight,
     fontSize,
     color,
     lineHeight,
     fontName,
+    themeOptions,
     textAlign,
     textTransform,
     letterSpacing
@@ -64,9 +59,13 @@ const Typography = forwardRef(
   ) => {
     const viewport = useViewport()
     const themeTokens = useThemeTokens('Typography', tokens, variant, { viewport })
+    const { themeOptions } = useTheme()
     const resolvedTextProps = {
       ...selectTextProps(rest),
-      style: selectTextStyles(align ? { ...themeTokens, textAlign: align } : themeTokens),
+      style: selectTextStyles(
+        align ? { ...themeTokens, textAlign: align } : themeTokens,
+        themeOptions
+      ),
       dataSet,
       maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
     }

package/src/index.js

@@ -32,6 +32,7 @@ export { default as Search } from './Search'
 export { default as Select } from './Select'
 export { default as SideNav } from './SideNav'
 export { default as Skeleton } from './Skeleton'
+export { default as SkipLink } from './SkipLink'
 export { default as Spacer } from './Spacer'
 export { default as StackView } from './StackView'
 export * from './StackView'

package/src/utils/index.js

@@ -10,6 +10,7 @@ export { default as useCopy } from './useCopy'
 export { default as useHash } from './useHash'
 export { default as useSpacingScale } from './useSpacingScale'
 export { default as useResponsiveProp } from './useResponsiveProp'
+export { default as useScrollBlocking } from './useScrollBlocking'
 export * from './useResponsiveProp'
 export { default as useUniqueId } from './useUniqueId'
 export { default as withLinkRouter } from './withLinkRouter'