@telus-uds/components-base 1.52.0 → 1.54.0

package/src/ExpandCollapse/Panel.jsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useState } from 'react'
-import { Animated, Platform, View } from 'react-native'
+import { Animated, Platform, View, Text } from 'react-native'
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
 
@@ -26,7 +26,42 @@ const selectContainerStyles = ({
   paddingLeft: contentPaddingLeft,
   paddingRight: contentPaddingRight,
   paddingTop: contentPaddingTop,
-  paddingBottom: contentPaddingBottom
+  paddingBottom: contentPaddingBottom,
+  flex: 1
+})
+const selectTextStyles = ({
+  contentPanelFontSize,
+  contentPanelFontName,
+  contentPanelFontColor,
+  contentPanelFontWeight,
+  contentPanelLineHeight
+}) => ({
+  fontSize: contentPanelFontSize,
+  fontFamily: `${contentPanelFontName}${contentPanelFontWeight}normal`,
+  lineHeight: contentPanelFontSize * contentPanelLineHeight,
+  color: contentPanelFontColor
+})
+const selectContentPanelStyles = ({
+  contentPanelBackgroundColor,
+  contentPanelPaddingTop,
+  contentPanelPaddingBottom,
+  contentPanelPaddingLeft,
+  contentPanelPaddingRight,
+  contentPanelBorderWidth,
+  contentPanelBorderColor,
+  borderRadius,
+  marginBottom
+}) => ({
+  backgroundColor: contentPanelBackgroundColor,
+  paddingTop: contentPanelPaddingTop,
+  paddingBottom: contentPanelPaddingBottom,
+  paddingLeft: contentPanelPaddingLeft,
+  paddingRight: contentPanelPaddingRight,
+  borderWidth: contentPanelBorderWidth,
+  borderColor: contentPanelBorderColor,
+  borderStyle: 'solid',
+  borderRadius,
+  marginBottom
 })
 
 /**
@@ -52,6 +87,7 @@ const ExpandCollapsePanel = forwardRef(
       tokens,
       variant,
       controlRef,
+      content,
       ...rest
     },
     ref
@@ -90,8 +126,15 @@ const ExpandCollapsePanel = forwardRef(
     })
 
     const focusabilityProps = isExpanded ? {} : a11yProps.nonFocusableProps
-
-    return (
+    return content ? (
+      <View style={selectContentPanelStyles(themeTokens)}>
+        {typeof children === 'string' ? (
+          <Text style={selectTextStyles(themeTokens)}>{children}</Text>
+        ) : (
+          children
+        )}
+      </View>
+    ) : (
       <View ref={ref} style={themeTokens}>
         <ExpandCollapseControl
           {...selectedProps}
@@ -140,7 +183,7 @@ ExpandCollapsePanel.propTypes = {
    * Function to call on pressing the panel's control, which should open or close the panel.
    * If Panel is a direct child of `ExpandCollapse`, this prop will be provided by the ExpandCollapse parent.
    */
-  onToggle: PropTypes.func.isRequired,
+  onToggle: PropTypes.func,
   /**
    * Optional function to call on pressing the panel's control, in addition to opening or closing the panel.
    */
@@ -151,9 +194,9 @@ ExpandCollapsePanel.propTypes = {
    */
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   /**
-   * The content inside the always-visible control element that opens and closes the ExpandCollapse when pressed.
+   * The content inside the control element that opens and closes the ExpandCollapse when pressed.
    */
-  control: ExpandCollapseControl.propTypes.children.isRequired,
+  control: ExpandCollapseControl.propTypes.children,
   /**
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
@@ -161,7 +204,11 @@ ExpandCollapsePanel.propTypes = {
   /**
    * An optional ref to be attached to the control
    */
-  controlRef: ABBPropTypes.ref()
+  controlRef: ABBPropTypes.ref(),
+  /**
+   * A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control
+   */
+  content: PropTypes.bool
 }
 
 export default ExpandCollapsePanel

package/src/Modal/Modal.jsx

@@ -3,6 +3,7 @@ import {
   StyleSheet,
   TouchableWithoutFeedback,
   View,
+  ScrollView,
   Modal as NativeModal,
   Platform
 } from 'react-native'
@@ -114,7 +115,7 @@ const Modal = forwardRef(
 
     return (
       <NativeModal transparent {...selectProps(rest)}>
-        <View style={[staticStyles.positioningContainer]} ref={modalRef}>
+        <ScrollView contentContainerStyle={[staticStyles.positioningContainer]} ref={modalRef}>
           <View
             style={[staticStyles.sizingContainer, selectContainerStyles(themeTokens)]}
             pointerEvents="box-none" // don't capture backdrop press events
@@ -149,7 +150,7 @@ const Modal = forwardRef(
           <TouchableWithoutFeedback onPress={handleClose}>
             <View style={[staticStyles.backdrop, selectBackdropStyles(themeTokens)]} />
           </TouchableWithoutFeedback>
-        </View>
+        </ScrollView>
       </NativeModal>
     )
   }
@@ -210,7 +211,11 @@ const staticStyles = StyleSheet.create({
   },
   modal: {
     maxHeight: '100%', // so that the modal can expand vertically up to the  sizing container's height (exclusive of its vertical padding)
-    overflow: 'auto'
+    ...Platform.select({
+      web: {
+        overflow: 'auto'
+      }
+    })
   },
   closeButtonContainer: {
     position: 'absolute',

package/src/SkipLink/SkipLink.jsx

@@ -37,8 +37,12 @@ const selectStyles = ({
   borderRadius
 })
 
-const selectTextStyles = ({ color }) => ({
-  color
+const selectTextStyles = ({ color, textLine, fontName, fontSize, fontWeight, lineHeight }) => ({
+  color,
+  textDecorationLine: textLine,
+  fontFamily: `${fontName}${fontWeight}normal`,
+  lineHeight: fontSize * lineHeight,
+  fontSize
 })
 
 /**
@@ -100,9 +104,6 @@ const SkipLink = forwardRef(({ tokens, variant, href, children, ...rawRest }, re
   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)
@@ -115,18 +116,17 @@ const SkipLink = forwardRef(({ tokens, variant, href, children, ...rawRest }, re
       accessibilityRole="link"
       onPress={handlePress}
       href={href}
-      style={({ focused: focus }) => {
-        const themeTokens = getTokens({ focus })
+      style={(pressableState) => {
+        const themeTokens = resolvePressableTokens(getTokens, pressableState)
         const skipLinkStyle = selectStyles(themeTokens)
-
-        return [staticStyles.absolute, skipLinkStyle, !focus && staticStyles.hidden]
+        const { focused } = pressableState
+        return [staticStyles.absolute, skipLinkStyle, !focused && staticStyles.hidden]
       }}
       {...selectProps(rest)}
     >
-      {(pressState) => {
-        const themeTokens = resolveLinkTokens(pressState)
+      {(pressableState) => {
+        const themeTokens = resolvePressableTokens(getTokens, pressableState)
         const textStyles = selectTextStyles(themeTokens)
-
         return <Text style={[textStyles, staticStyles.baseline]}>{children}</Text>
       }}
     </Pressable>

package/src/ToggleSwitch/ToggleSwitch.jsx

@@ -28,10 +28,12 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
 
 // We need to drop the icon before passing it to the `ButtonBase`, because it's
 // being handled separately in this case
-const selectButtonTokens = ({ icon: _, ...tokens }) =>
+const selectButtonTokens = ({ icon: _, ...tokens }, { trackHeight, outerBorderGapButton }) =>
   selectTokens('Button', {
     ...tokens,
     // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
+    outerBorderGap: outerBorderGapButton,
+    height: trackHeight,
     width: null
   })
 
@@ -41,6 +43,11 @@ const selectIconTokens = ({ iconSize, iconColor }) => ({
   color: iconColor
 })
 
+const selectTrackSwitchStyles = ({ switchSize, width, trackHeight }) => ({
+  width,
+  height: Math.max(switchSize, trackHeight)
+})
+
 const selectTrackStyles = ({ trackBorderWidth, trackBorderColor, trackBorderRadius, width }) => ({
   borderWidth: trackBorderWidth,
   borderColor: trackBorderColor,
@@ -56,6 +63,7 @@ const selectSwitchStyles = ({
   switchBorderRadius,
   switchShadow
 }) => ({
+  position: 'absolute',
   width: switchSize,
   height: switchSize,
   backgroundColor: switchColor,
@@ -113,12 +121,12 @@ const ToggleSwitch = forwardRef(
     })
 
     const handlePress = (event) => setValue(!currentValue, event)
-    const getButtonTokens = (buttonState) => selectButtonTokens(getTokens(buttonState))
+    const getButtonTokens = (buttonState) =>
+      selectButtonTokens(getTokens(buttonState), getTokens(themeTokens))
     const uniqueId = useUniqueId('toggleSwitch')
     const inputId = id ?? uniqueId
-
     return (
-      <StackView space={2} direction="row">
+      <StackView space={themeTokens.space} direction="row" tokens={{ alignItems: 'center' }}>
         {Boolean(label) && (
           <View style={[selectLabelStyles(themeTokens), staticStyles.containText]}>
             <InputLabel
@@ -148,17 +156,22 @@ const ToggleSwitch = forwardRef(
             const switchStyles = selectSwitchStyles(stateTokens)
             const trackStyles = selectTrackStyles(stateTokens)
             const iconTokens = selectIconTokens(stateTokens)
-
+            const trackSwitchStyles = selectTrackSwitchStyles(stateTokens)
+            const { switchSize, trackHeight, width, trackBorderWidth } = stateTokens
             // If drag-slide support is needed, use a PanResponder and apply these to an Animated value.
             // Use translate transforms for smoothest non-thread-blocking animations and to allow drag.
-            const slideStart = 0
-            const slideEnd =
-              stateTokens.width - stateTokens.switchSize - stateTokens.trackBorderWidth * 2
+            // Two different translates depending on the switchSize and trackSize relationship.
+            const isSwitchTallerThanTrack = switchSize >= trackHeight
+            const slideStart = isSwitchTallerThanTrack ? 0 : trackBorderWidth
+            const slideEnd = isSwitchTallerThanTrack
+              ? width - switchSize
+              : width - switchSize - trackBorderWidth
             const switchOffset = buttonState.selected ? slideEnd : slideStart
             const switchPositionStyle = { transform: [{ translateX: switchOffset }] }
 
             return (
-              <View style={[staticStyles.track, trackStyles]}>
+              <View nativeID="trackSwitch" style={[trackSwitchStyles, staticStyles.trackSwitch]}>
+                <View style={[staticStyles.track, trackStyles]} />
                 <View style={[staticStyles.switch, switchStyles, switchPositionStyle]}>
                   {IconComponent && <IconComponent {...iconTokens} />}
                 </View>
@@ -225,6 +238,10 @@ const staticStyles = StyleSheet.create({
   },
   containText: {
     flexShrink: 1
+  },
+  trackSwitch: {
+    flexDirection: 'row',
+    alignItems: 'center'
   }
 })
 

package/src/TooltipButton/TooltipButton.jsx

@@ -26,7 +26,15 @@ const TooltipButton = ({ pressableState, tokens, variant, ...rest }) => {
   const { icon: IconComponent } = themeTokens
 
   return (
-    <View style={applyOuterBorder(themeTokens)} {...selectProps(rest)}>
+    <View
+      style={[
+        applyOuterBorder(themeTokens),
+        themeTokens.outerBorderWidth && {
+          margin: -themeTokens.outerBorderWidth
+        }
+      ]}
+      {...selectProps(rest)}
+    >
       <View style={selectInnerContainerStyles(themeTokens)}>
         {IconComponent && <Icon icon={IconComponent} tokens={selectIconTokens(themeTokens)} />}
       </View>

package/src/Typography/Typography.jsx

@@ -59,7 +59,9 @@ const Typography = forwardRef(
     ref
   ) => {
     const viewport = useViewport()
-    const themeTokens = useThemeTokens('Typography', tokens, variant, { viewport })
+    const { superScriptFontSize, ...themeTokens } = useThemeTokens('Typography', tokens, variant, {
+      viewport
+    })
     const { themeOptions } = useTheme()
 
     const resolvedTextProps = {
@@ -80,9 +82,12 @@ const Typography = forwardRef(
 
     const resetTagStyling = (child) => {
       if (typeof child === 'object' && (child?.type === 'sub' || child?.type === 'sup')) {
+        const childStyles = child?.props?.style || {}
+        const supFontSize = childStyles.fontSize ?? superScriptFontSize
         const sanitizedChild = React.cloneElement(child, {
           style: {
-            ...child?.props?.style,
+            ...childStyles,
+            ...(supFontSize ? { fontSize: supFontSize } : {}),
             lineHeight: 0
           }
         })