@telus-uds/components-base 1.94.0 → 1.96.0

package/src/Typography/Typography.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Text, View } from 'react-native'
+import { Text, View, Platform } from 'react-native'
 
 import { useResponsiveThemeTokens, useTheme, useThemeTokens } from '../ThemeProvider'
 import { applyTextStyles } from '../ThemeProvider/utils'
@@ -54,6 +54,16 @@ const selectTextStyles = (
     gradient
   })
 
+const HALF_FONT_SIZE = 2
+const QUARTER_FONT_SIZE = 4
+
+const selectMobileSubSupStyles = ({ fontSize }, type) => ({
+  fontSize: fontSize / HALF_FONT_SIZE,
+  lineHeight: fontSize,
+  position: 'relative',
+  top: type === 'sub' ? fontSize / QUARTER_FONT_SIZE : -fontSize / QUARTER_FONT_SIZE
+})
+
 // General-purpose flexible theme-neutral base component for text
 const Typography = React.forwardRef(
   (
@@ -175,19 +185,33 @@ const Typography = React.forwardRef(
     }
 
     const resetTagStyling = (child) => {
-      if (typeof child === 'object' && (child?.type === 'sub' || child?.type === 'sup')) {
-        const childStyles = child?.props?.style || {}
-        const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize
-        const sanitizedChild = React.cloneElement(child, {
-          style: {
-            ...childStyles,
-            ...(supFontSize ? { fontSize: supFontSize } : {}),
-            lineHeight: 0
-          }
-        })
-        return sanitizedChild
+      if (typeof child !== 'object' || !(child?.type === 'sub' || child?.type === 'sup')) {
+        return child
       }
-      return child
+
+      const childStyles = child?.props?.style || {}
+      const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize
+      const isMobile = Platform.OS === 'ios' || Platform.OS === 'android'
+      const isSubSup = child?.type === 'sub' || child?.type === 'sup'
+
+      const mobileStyles =
+        isMobile && isSubSup ? selectMobileSubSupStyles(themeTokens, child?.type) : {}
+      const defaultStyles = !isMobile && isSubSup ? { fontSize: supFontSize, lineHeight: 0 } : {}
+
+      const sanitizedChild = React.cloneElement(
+        isMobile && isSubSup ? (
+          <View>
+            <Text style={[childStyles, mobileStyles]}>{child.props.children}</Text>
+          </View>
+        ) : (
+          child
+        ),
+        {
+          style: { ...childStyles, ...defaultStyles }
+        }
+      )
+
+      return sanitizedChild
     }
 
     const sanitizeChildren = () => {

package/src/index.js

@@ -15,6 +15,7 @@ export * from './Checkbox'
 export { default as CheckboxCard } from './CheckboxCard'
 export { default as CheckboxCardGroup } from './CheckboxCardGroup'
 export { default as ColourToggle } from './ColourToggle'
+export { default as DownloadApp } from './DownloadApp'
 export { default as Divider } from './Divider'
 export { default as ExpandCollapse, Accordion } from './ExpandCollapse'
 export { default as Feedback } from './Feedback'
@@ -57,6 +58,7 @@ export * from './StackView'
 export { default as Status } from './Status'
 export { default as StepTracker } from './StepTracker'
 export { default as Tabs } from './Tabs'
+export { default as TabBar } from './TabBar'
 export { default as Tags } from './Tags'
 export * from './TextInput'
 export { default as Timeline } from './Timeline'
@@ -79,7 +81,8 @@ export {
   getThemeTokens,
   applyOuterBorder,
   applyTextStyles,
-  applyShadowToken
+  applyShadowToken,
+  useResponsiveThemeTokens
 } from './ThemeProvider'
 
 export * from './utils'