@telus-uds/components-base 2.0.0 → 2.0.1

package/src/InputLabel/InputLabel.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -35,7 +35,7 @@ const selectHintStyles = (
 
 const selectGapStyles = ({ gap }) => ({ marginRight: gap })
 
-const InputLabel = forwardRef(
+const InputLabel = React.forwardRef(
   (
     {
       copy = 'en',
@@ -86,7 +86,10 @@ const InputLabel = forwardRef(
             <View
               style={[
                 staticStyles.tooltipAlign,
-                { height: themeTokens.fontSize * themeTokens.lineHeight }
+                {
+                  height: themeTokens.fontSize * themeTokens.lineHeight,
+                  color: themeTokens.color
+                }
               ]}
             >
               <Tooltip content={tooltip} copy={copy} />
@@ -143,8 +146,7 @@ export default InputLabel
 const staticStyles = StyleSheet.create({
   container: {
     flexShrink: 1,
-    flexDirection: 'row',
-    alignItems: 'baseline'
+    flexDirection: 'row'
   },
   label: {
     flexShrink: 1
@@ -154,7 +156,7 @@ const staticStyles = StyleSheet.create({
     flexShrink: 0
   },
   tooltipAlign: {
-    alignSelf: 'flex-start',
+    alignSelf: 'center',
     justifyContent: 'center'
   }
 })

package/src/InputLabel/LabelContent.jsx

@@ -1,7 +1,7 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
-const LabelContent = forwardRef(({ children, forId }, ref) => (
+const LabelContent = React.forwardRef(({ children, forId }, ref) => (
   <label ref={ref} htmlFor={forId} style={staticStyles.inheritCursor}>
     {children}
   </label>

package/src/InputLabel/LabelContent.native.jsx

@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
 // Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
-const LabelContent = forwardRef(({ children }, ref) =>
+const LabelContent = React.forwardRef(({ children }, ref) =>
   ref ? <View ref={ref}>{children}</View> : children
 )
 LabelContent.displayName = 'LabelContent'

package/src/InputSupports/InputSupports.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import PropTypes from 'prop-types'
 import InputLabel from '../InputLabel'
@@ -6,8 +6,9 @@ import Feedback from '../Feedback'
 import StackView from '../StackView'
 import { useThemeTokens } from '../ThemeProvider'
 import useInputSupports from './useInputSupports'
+import { getTokensPropType } from '../utils'
 
-const InputSupports = forwardRef(
+const InputSupports = React.forwardRef(
   (
     {
       children,
@@ -16,6 +17,8 @@ const InputSupports = forwardRef(
       hint,
       hintPosition = 'inline',
       feedback,
+      feedbackTokens = {},
+      feedbackProps = {},
       tooltip,
       validation,
       nativeID
@@ -46,7 +49,15 @@ const InputSupports = forwardRef(
           />
         )}
         {typeof children === 'function' ? children({ inputId, ...a11yProps }) : children}
-        {feedback && <Feedback id={feedbackId} title={feedback} validation={validation} />}
+        {feedback ? (
+          <Feedback
+            id={feedbackId}
+            title={feedback}
+            validation={validation}
+            tokens={feedbackTokens}
+            {...feedbackProps}
+          />
+        ) : null}
       </StackView>
     )
   }
@@ -76,6 +87,14 @@ InputSupports.propTypes = {
    * Visual variant is determined based on the `validation` prop.
    */
   feedback: PropTypes.string,
+  /**
+   * Additional tokens to override the default feedback tokens.
+   */
+  feedbackTokens: getTokensPropType('Feedback'),
+  /**
+   * Additional props to pass to the `Feedback` component.
+   */
+  feedbackProps: PropTypes.object,
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */

package/src/Link/ChevronLink.jsx

@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { useThemeTokensCallback } from '../ThemeProvider'
-import { selectTokens, getTokensPropType } from '../utils'
+import { selectTokens, getTokensPropType, linkProps } from '../utils'
 import LinkBase from './LinkBase'
 
 /**
@@ -11,22 +11,29 @@ import LinkBase from './LinkBase'
  *
  * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
  */
-const ChevronLink = forwardRef(
-  ({ direction = 'right', children, tokens, variant, dataSet, ...linkProps }, ref) => {
+const ChevronLink = React.forwardRef(
+  ({ direction = 'right', children, tokens = {}, variant, dataSet, ...otherlinkProps }, ref) => {
     const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant)
     const applyChevronTokens = (linkState) => {
-      const { leftIcon, rightIcon, iconDisplace, ...otherTokens } = getChevronTokens(linkState)
+      const { leftIcon, rightIcon, iconDisplace, height, fontSize, ...otherTokens } =
+        getChevronTokens(linkState)
+
+      const linkTokens = selectTokens('Link', otherTokens)
+
       return {
-        ...selectTokens('Link', otherTokens),
+        ...linkTokens,
+        height,
+        blockFontSize: tokens.fontSize ?? fontSize,
         icon: direction === 'right' ? rightIcon : leftIcon,
         iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
       }
     }
 
     const getTokens = useThemeTokensCallback('Link', applyChevronTokens, variant)
+
     return (
       <LinkBase
-        {...linkProps}
+        {...otherlinkProps}
         iconPosition={direction}
         tokens={getTokens}
         dataSet={dataSet}
@@ -41,7 +48,17 @@ const ChevronLink = forwardRef(
 ChevronLink.displayName = 'ChevronLink'
 ChevronLink.propTypes = {
   ...LinkBase.propTypes,
+  children: PropTypes.node,
+  variant: PropTypes.exact({
+    size: PropTypes.oneOf(['large', 'small', 'micro']),
+    alternative: PropTypes.bool,
+    inverse: PropTypes.bool
+  }),
+  ...linkProps.types,
   tokens: getTokensPropType('ChevronLink', 'Link'),
+  /**
+   * Changes direction of chevron icon
+   */
   direction: PropTypes.oneOf(['left', 'right'])
 }
 

package/src/Link/InlinePressable.jsx

@@ -1,5 +1,6 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { Pressable, StyleSheet } from 'react-native'
+import PropTypes from 'prop-types'
 
 /**
  * @typedef {import('react-native').PressableProps} PressableProps
@@ -13,22 +14,29 @@ import { Pressable, StyleSheet } from 'react-native'
  *
  * @param {PressableProps} PressableProps
  */
-// React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-// eslint-disable-next-line react/prop-types
-const InlinePressable = forwardRef(({ children, inlineFlex = true, style, ...props }, ref) => (
-  <Pressable
-    ref={ref}
-    style={(pressState) => [
-      typeof style === 'function' ? style(pressState) : style,
-      staticStyles[inlineFlex ? 'inlineFlex' : 'inline']
-    ]}
-    {...props}
-  >
-    {(pressState) => (typeof children === 'function' ? children(pressState) : children)}
-  </Pressable>
-))
+const InlinePressable = React.forwardRef(
+  ({ children, inlineFlex = true, style, ...props }, ref) => (
+    <Pressable
+      ref={ref}
+      style={(pressState) => [
+        typeof style === 'function' ? style(pressState) : style,
+        staticStyles[inlineFlex ? 'inlineFlex' : 'inline']
+      ]}
+      {...props}
+    >
+      {(pressState) => (typeof children === 'function' ? children(pressState) : children)}
+    </Pressable>
+  )
+)
+
 InlinePressable.displayName = 'InlinePressable'
 
+InlinePressable.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  inlineFlex: PropTypes.bool,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func])
+}
+
 const staticStyles = StyleSheet.create({
   inline: {
     // Stop Pressable defaulting to (block) flex

package/src/Link/InlinePressable.native.jsx

@@ -1,6 +1,7 @@
 /* eslint-disable camelcase */
-import React, { forwardRef, useState } from 'react'
+import React from 'react'
 import { Text, TouchableWithoutFeedback } from 'react-native'
+import PropTypes from 'prop-types'
 
 /**
  * @typedef {import('react-native').PressableProps} PressableProps
@@ -36,14 +37,12 @@ const pressablePropsToTouchable = ({
  *
  * @param {PressableProps} PressableProps
  */
-// React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-// eslint-disable-next-line react/prop-types
-const InlinePressable = forwardRef(({ onPress, children, style, ...rest }, ref) => {
-  const [isFocused, setIsFocused] = useState(false)
+const InlinePressable = React.forwardRef(({ onPress, children, style, ...rest }, ref) => {
+  const [isFocused, setIsFocused] = React.useState(false)
   const handleFocus = () => setIsFocused(true)
   const handleBlur = () => setIsFocused(false)
 
-  const [isPressed, setIsPressed] = useState(false)
+  const [isPressed, setIsPressed] = React.useState(false)
   const handlePressIn = () => setIsPressed(true)
   const handlePressOut = () => setIsPressed(false)
 
@@ -70,6 +69,13 @@ const InlinePressable = forwardRef(({ onPress, children, style, ...rest }, ref)
     </TouchableWithoutFeedback>
   )
 })
+
 InlinePressable.displayName = 'InlinePressable'
 
+InlinePressable.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func]),
+  onPress: PropTypes.func
+}
+
 export default InlinePressable

package/src/Link/Link.jsx

@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import { useThemeTokensCallback } from '../ThemeProvider'
 import LinkBase from './LinkBase'
 
-const Link = forwardRef(
+const Link = React.forwardRef(
   (
     { href, children, accessibilityRole = 'link', variant = {}, tokens, dataSet, ...linkProps },
     ref

package/src/Link/LinkBase.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Text, Platform, StyleSheet } from 'react-native'
 import {
@@ -36,38 +36,43 @@ const selectOuterBorderStyles = ({
         ...applyOuterBorder({
           outerBorderColor,
           outerBorderWidth,
-          outerBorderGap,
-          borderRadius
-        })
+          outerBorderGap
+        }),
+        borderRadius
       }
     : {}
 
-const selectTextStyles = ({ color }) => ({
-  color,
-  ...Platform.select({
-    web: {
-      // TODO: https://github.com/telus/universal-design-system/issues/487
-      transition: 'color 200ms'
-    }
-  })
-})
+const selectTextStyles = ({ color, blockFontSize }) => {
+  return {
+    color,
+    ...applyTextStyles({ blockFontSize }),
+    ...Platform.select({
+      web: {
+        // TODO: https://github.com/telus/universal-design-system/issues/487
+        transition: 'color 200ms'
+      }
+    })
+  }
+}
 
 const selectBlockStyles = (
   { blockFontWeight, blockFontSize, blockLineHeight, blockFontName },
   themeOptions
 ) =>
   applyTextStyles({
+    lineHeight: blockLineHeight,
     fontWeight: blockFontWeight,
     fontSize: blockFontSize,
-    lineHeight: blockLineHeight,
     fontName: blockFontName,
     themeOptions
   })
 
-const selectDecorationStyles = ({ color, textLine, textLineStyle }) => ({
+const selectDecorationStyles = ({ color, textLine, textLineStyle, alignSelf }) => ({
   color,
   textDecorationLine: textLine,
   textDecorationStyle: textLineStyle,
+  alignSelf,
+
   ...Platform.select({
     web: {
       // TODO: https://github.com/telus/universal-design-system/issues/487
@@ -76,12 +81,21 @@ const selectDecorationStyles = ({ color, textLine, textLineStyle }) => ({
   })
 })
 
-const selectIconTokens = ({ color, iconSize, iconTranslateX, iconTranslateY }) => ({
-  color,
-  translateX: iconTranslateX,
-  translateY: iconTranslateY,
-  size: iconSize
-})
+const selectIconTokens = ({ color, iconSize, blockFontSize, iconTranslateX }) => {
+  /**
+   * These calculations were carried out using a set of linear equations to calculate that the
+   * position of the icon "->"" is aligned to the first line of the tooltip text.
+   * The base equation is: X/4 + Y/4 - 4 - |X - Y| = Z
+   * where X = blockFontSize, Y = iconSize and Z = translateY
+   */
+  const translateY = blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize)
+  return {
+    color,
+    translateX: iconTranslateX,
+    translateY: translateY < 0 ? 0 : translateY,
+    size: iconSize
+  }
+}
 
 /**
  * Renders a pressable text link, with optional icon. This is rendered as a block element
@@ -105,13 +119,13 @@ const selectIconTokens = ({ color, iconSize, iconTranslateX, iconTranslateY }) =
  *   dropped in favour of investigating if a full-featured CSS-in-JS package could or
  *   should be used more widely (e.g. styled components)
  */
-const LinkBase = forwardRef(
+const LinkBase = React.forwardRef(
   (
     {
       href,
       icon,
       iconPosition = icon ? 'left' : undefined,
-      iconProps,
+      iconProps = {},
       variant,
       tokens = {},
       children,
@@ -122,6 +136,7 @@ const LinkBase = forwardRef(
   ) => {
     const { onPress, ...props } = clickProps.toPressProps(rawRest)
     const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
+
     const selectedProps = selectProps({
       accessibilityRole,
       href,
@@ -144,13 +159,13 @@ const LinkBase = forwardRef(
     return (
       <InlinePressable
         {...selectedProps}
-        inlineFlex={hasIcon} // assuming links without icons should be inline (even if they are long)
+        inlineFlex={hasIcon}
+        // assuming links without icons should be inline (even if they are long)
         ref={ref}
         style={(linkState) => {
           const themeTokens = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)
           const decorationStyles = selectDecorationStyles(themeTokens)
-
           return [
             outerBorderStyles,
             blockLeftStyle,
@@ -163,7 +178,6 @@ const LinkBase = forwardRef(
           const themeTokens = resolveLinkTokens(linkState)
           const textStyles = selectTextStyles(themeTokens)
           const iconTokens = selectIconTokens(themeTokens)
-
           // TODO: may need to apply some smarter text inheritance here if inline to avoid native
           // issues like double-application of line heights breaking align-items: baseline
           const blockTextStyles = selectBlockStyles(themeTokens, themeOptions)
@@ -176,9 +190,22 @@ const LinkBase = forwardRef(
               icon={IconComponent}
               iconPosition={iconPosition}
               space={iconSpace}
-              iconProps={{ ...iconProps, tokens: iconTokens }}
+              iconProps={{
+                ...iconProps,
+                tokens: iconTokens,
+                style: staticStyles.bubblePointerEvents
+              }}
             >
-              <Text style={[textStyles, blockTextStyles, staticStyles.baseline]}>{children}</Text>
+              <Text
+                style={[
+                  textStyles,
+                  blockTextStyles,
+                  staticStyles.baseline,
+                  staticStyles.bubblePointerEvents
+                ]}
+              >
+                {typeof children === 'function' ? children(linkState) : children}
+              </Text>
             </IconText>
           )
         }}
@@ -191,6 +218,17 @@ LinkBase.displayName = 'LinkBase'
 LinkBase.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('Link'),
+  /**
+   * href for the Link
+   */
+  href: PropTypes.string,
+  /**
+   * AccesibilityRole for the link base
+   */
+  accessibilityrole: PropTypes.string,
+  /**
+   * Children nodes that can be added
+   */
   variant: variantProp.propType,
   /**
    * Optional variant that may be passed down to the link's icon if there is one
@@ -202,9 +240,9 @@ LinkBase.propTypes = {
    */
   icon: PropTypes.elementType,
   /**
-   * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link.
+   * When `icon` is provided, use `iconPosition` to place the Icon to the left, right or inline with Link.
    */
-  iconPosition: PropTypes.oneOf(['left', 'right']),
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
   /**
    * On Web if href is passed, React Native Web maps this object's props to
    * `rel`, `target` and `download` attrs.
@@ -218,11 +256,17 @@ const staticStyles = StyleSheet.create({
   },
   rowContainer: {
     flexDirection: 'row',
-    alignItems: 'center',
     justifyContent: 'flex-start'
   },
   baseline: {
     alignSelf: 'baseline'
+  },
+  bubblePointerEvents: {
+    ...Platform.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
   }
 })
 

package/src/Link/TextButton.jsx

@@ -1,15 +1,15 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-
 import { useThemeTokensCallback } from '../ThemeProvider'
 import LinkBase from './LinkBase'
+import { variantProp } from '../utils'
 
 /**
  * `TextButton` is a button that looks like a Link. It uses the same theming and variants as
  * Link but has the accessibility role of a `Button`. It should be used for actions that
  * take place on the current page, or for navigation within an app.
  */
-const TextButton = forwardRef(
+const TextButton = React.forwardRef(
   ({ onPress, children, variant, tokens, accessibilityRole = 'button', ...linkProps }, ref) => {
     const getTokens = useThemeTokensCallback('Link', tokens, variant)
     return (
@@ -25,11 +25,18 @@ const TextButton = forwardRef(
     )
   }
 )
+
 TextButton.displayName = 'TextButton'
 
 TextButton.propTypes = {
   ...LinkBase.propTypes,
-  onPress: PropTypes.func.isRequired
+  /** onPress function */
+  onPress: PropTypes.func.isRequired,
+  /** Children node that can be added */
+  children: PropTypes.node.isRequired,
+  variant: variantProp.propType,
+  /** Accesibility role for TextButton */
+  accessibilityRole: PropTypes.string
 }
 
 export default TextButton

package/src/List/List.jsx

@@ -1,5 +1,5 @@
-import React, { cloneElement, forwardRef, Children } from 'react'
-import { View, Platform } from 'react-native'
+import React from 'react'
+import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 
@@ -15,7 +15,7 @@ const isListItem = (element) => {
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
-const List = forwardRef(
+const List = React.forwardRef(
   (
     {
       children,
@@ -27,12 +27,12 @@ const List = forwardRef(
     },
     ref
   ) => {
-    const items = Children.map(children, (child, index) => {
+    const items = React.Children.map(children, (child, index) => {
       // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
       if (isListItem(child)) {
-        return cloneElement(child, {
+        return React.cloneElement(child, {
           showDivider,
-          isLastItem: index + 1 === Children.count(children),
+          isLastItem: index + 1 === React.Children.count(children),
           tokens,
           variant,
           ...child.props
@@ -41,13 +41,31 @@ const List = forwardRef(
       return child
     })
 
-    return (
-      <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)}>
+    const content = (
+      <View
+        style={styles.list}
+        accessibilityRole={accessibilityRole}
+        ref={ref}
+        {...selectProps(rest)}
+      >
         {items}
       </View>
     )
+
+    return Platform.OS === 'web' ? <div style={styles.container}>{content}</div> : content
   }
 )
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'block'
+  },
+  list: {
+    flex: 1,
+    flexShrink: 1
+  }
+})
+
 List.displayName = 'List'
 
 List.propTypes = {

package/src/List/ListItem.jsx

@@ -1,18 +1,16 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import ListItemBase from './ListItemBase'
-import Typography from '../Typography'
 import { useThemeTokens } from '../ThemeProvider'
 import { variantProp } from '../utils'
 
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
-const ListItem = forwardRef(({ tokens, variant, children, title, ...listItemProps }, ref) => {
+const ListItem = React.forwardRef(({ tokens, variant, children, title, ...listItemProps }, ref) => {
   const themeTokens = useThemeTokens('List', tokens, variant)
   return (
-    <ListItemBase tokens={themeTokens} ref={ref} {...listItemProps}>
-      {Boolean(title) && <Typography variant={{ size: 'h4' }}>{title}</Typography>}
+    <ListItemBase tokens={themeTokens} ref={ref} {...listItemProps} title={title}>
       {children}
     </ListItemBase>
   )