@telus-uds/components-base 1.0.1 → 1.3.0

package/src/Button/ButtonLink.jsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
 import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
-import { a11yProps, hrefAttrsProp, linkProps } from '../utils/propTypes'
+import { a11yProps, hrefAttrsProp, linkProps } from '../utils/props'
 import { useThemeTokensCallback } from '../ThemeProvider'
 
 /**

package/src/Button/propTypes.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
-import { variantProp } from '../utils/propTypes'
+import { variantProp, getTokensPropType } from '../utils/props'
 import A11yText from '../A11yText'
 
 export const textAndA11yText = ABBPropTypes.childrenOf(
@@ -8,6 +8,7 @@ export const textAndA11yText = ABBPropTypes.childrenOf(
 )
 
 const buttonPropTypes = {
+  tokens: getTokensPropType('Button'),
   /**
    * If true, prevents the button from being pressed, changes the cursor (on web) and accessibility
    * attributes to communicate this to the user, and applies `inactive: true` appearances from the theme

package/src/Card/Card.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { useThemeTokens } from '../ThemeProvider'
 import { getTokensPropType, variantProp } from '../utils'
 import { useViewport } from '../ViewportProvider'
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 import CardBase from './CardBase'
 
 /**

package/src/Card/CardBase.jsx

@@ -4,7 +4,9 @@ import { View } from 'react-native'
 
 import { applyShadowToken } from '../ThemeProvider'
 import { getTokensPropType } from '../utils'
-import { a11yProps, viewProps } from '../utils/propTypes'
+import { a11yProps, viewProps, selectSystemProps } from '../utils/props'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 // Ensure explicit selection of tokens
 const selectStyles = ({
@@ -39,7 +41,7 @@ const selectStyles = ({
  */
 const CardBase = forwardRef(({ children, tokens, dataSet, ...rest }, ref) => {
   const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens)
-  const props = { ...a11yProps.select(rest), ...viewProps.select(rest) }
+  const props = selectProps(rest)
 
   return (
     <View style={cardStyle} dataSet={dataSet} ref={ref} {...props}>
@@ -50,10 +52,9 @@ const CardBase = forwardRef(({ children, tokens, dataSet, ...rest }, ref) => {
 CardBase.displayName = 'CardBase'
 
 CardBase.propTypes = {
+  ...selectedSystemPropTypes,
   children: PropTypes.node,
-  tokens: getTokensPropType('Card'),
-  ...viewProps.types,
-  ...a11yProps.types
+  tokens: getTokensPropType('Card')
 }
 
 export default CardBase

package/src/Card/PressableCardBase.jsx

@@ -11,9 +11,11 @@ import {
   getTokenNames,
   getTokensSetPropType,
   variantProp,
-  linkProps
+  linkProps,
+  clickProps,
+  withLinkRouter
 } from '../utils'
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 import CardBase from './CardBase'
 
 const tokenKeys = [
@@ -43,12 +45,12 @@ const PressableCardBase = forwardRef(
       inactive,
       href,
       hrefAttrs,
-      onPress,
       accessibilityRole = href ? 'link' : undefined,
-      ...rest
+      ...rawRest
     },
     ref
   ) => {
+    const { onPress, ...rest } = clickProps.toPressProps(rawRest)
     const viewport = useViewport()
     const a11y = a11yProps.select({
       ...rest,
@@ -116,4 +118,4 @@ PressableCardBase.propTypes = {
   ...a11yProps.types
 }
 
-export default PressableCardBase
+export default withLinkRouter(PressableCardBase)

package/src/Checkbox/Checkbox.jsx

@@ -3,14 +3,12 @@ import PropTypes from 'prop-types'
 import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 
 import CheckboxInput from './CheckboxInput'
-// @todo move `LabelContent` outside of the `InputLabel` and fix
-// the issue with the cursor not being pointer on Web
 import CheckboxLabel from '../InputLabel/LabelContent'
 import Feedback from '../Feedback'
 import StackView from '../StackView'
 import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
 import { getTokensPropType, useInputValue, variantProp } from '../utils'
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 import useUniqueId from '../utils/useUniqueId'
 
 const selectInputStyles = (

package/src/Divider/Divider.jsx

@@ -5,8 +5,8 @@ import { useThemeTokens } from '../ThemeProvider'
 import Spacer from '../Spacer'
 import { getTokensPropType, variantProp, spacingProps } from '../utils'
 /**
- * @typedef {import('../utils/propTypes.js').SpacingIndex} SpacingIndex
- * @typedef {import('../utils/propTypes.js').SpacingObject} SpacingObject
+ * @typedef {import('../utils/props/spacingProps.js').SpacingIndex} SpacingIndex
+ * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
  */
 
 /**

package/src/FlexGrid/FlexGrid.jsx

@@ -8,7 +8,15 @@ import Col from './Col'
 import { useViewport } from '../ViewportProvider'
 import GutterContext from './providers/GutterContext'
 import applyInheritance from './helpers'
-import { a11yProps, viewProps, getA11yPropsFromHtmlTag, layoutTags } from '../utils'
+import {
+  a11yProps,
+  viewProps,
+  getA11yPropsFromHtmlTag,
+  layoutTags,
+  selectSystemProps
+} from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 /**
  * A mobile-first flexbox grid.
@@ -62,8 +70,7 @@ const FlexGrid = forwardRef(
 
     const props = {
       ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
-      ...a11yProps.select(rest),
-      ...viewProps.select(rest)
+      ...selectProps(rest)
     }
 
     return (
@@ -91,8 +98,7 @@ const styles = StyleSheet.create({
 })
 
 FlexGrid.propTypes = {
-  ...a11yProps.propTypes,
-  ...viewProps.types,
+  ...selectedSystemPropTypes,
   /**
    * Whether or not to give the grid a fixed width. This also centres the grid horizontally.
    */

package/src/FlexGrid/helpers/index.js

@@ -1,10 +1,8 @@
 const applyInheritance = (sizes) => {
   let prevSize
   return sizes.map((size, index) => {
-    if (size) {
-      prevSize = size
-    }
     if (size !== undefined) {
+      prevSize = size
       return size
     }
     if (index) {

package/src/IconButton/IconButton.jsx

@@ -5,13 +5,15 @@ import { Pressable, Platform, StyleSheet, View } from 'react-native'
 import { applyOuterBorder, useThemeTokensCallback, applyShadowToken } from '../ThemeProvider'
 import {
   variantProp,
+  clickProps,
   linkProps,
   resolvePressableState,
   hrefAttrsProp,
   getTokensPropType,
-  selectTokens
+  selectTokens,
+  withLinkRouter
 } from '../utils'
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 import Icon from '../Icon'
 
 const selectOuterStyle = ({
@@ -52,12 +54,12 @@ const IconButton = forwardRef(
       icon: IconComponent,
       href,
       hrefAttrs,
-      onPress,
       accessibilityRole = href ? 'link' : 'button',
-      ...rest
+      ...rawRest
     },
     ref
   ) => {
+    const { onPress, ...rest } = clickProps.toPressProps(rawRest)
     const a11y = a11yProps.select({
       ...rest,
       accessibilityRole
@@ -111,4 +113,4 @@ const staticStyles = StyleSheet.create({
   }
 })
 
-export default IconButton
+export default withLinkRouter(IconButton)

package/src/Link/LinkBase.jsx

@@ -6,9 +6,11 @@ import {
   hrefAttrsProp,
   variantProp,
   linkProps,
-  getTokensPropType
-} from '../utils/propTypes'
+  getTokensPropType,
+  clickProps
+} from '../utils/props'
 import { resolvePressableTokens } from '../utils/pressability'
+import { withLinkRouter } from '../utils'
 
 import InlinePressable from './InlinePressable'
 import { applyTextStyles, applyOuterBorder } from '../ThemeProvider'
@@ -92,7 +94,6 @@ const LinkBase = forwardRef(
   (
     {
       href,
-      onPress,
       icon,
       iconPosition = icon ? 'left' : undefined,
       iconProps,
@@ -101,10 +102,11 @@ const LinkBase = forwardRef(
       children,
       accessibilityRole = 'link',
       dataSet,
-      ...props
+      ...rawRest
     },
     ref
   ) => {
+    const { onPress, ...props } = clickProps.toPressProps(rawRest)
     const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
     const linkPropSet = linkProps.select({
       accessibilityRole,
@@ -200,4 +202,4 @@ const staticStyles = StyleSheet.create({
   }
 })
 
-export default LinkBase
+export default withLinkRouter(LinkBase)

package/src/List/List.jsx

@@ -2,11 +2,11 @@ import React, { cloneElement, forwardRef, Children } from 'react'
 import { View, Platform } from 'react-native'
 import PropTypes from 'prop-types'
 import { getTokensPropType, variantProp, componentPropType } from '../utils'
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 import ListItem from './ListItem'
 
 /**
- * A Unordered List component has a child a ListItem that
+ * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
 const List = forwardRef(({ children, showDivider, tokens, variant, ...rest }, ref) => {
@@ -32,8 +32,6 @@ const List = forwardRef(({ children, showDivider, tokens, variant, ...rest }, re
 })
 List.displayName = 'List'
 
-List.Item = ListItem
-
 List.propTypes = {
   ...a11yProps.types,
   tokens: getTokensPropType('List'),

package/src/List/ListItem.jsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react'
-import { View, Platform, Text, StyleSheet } from 'react-native'
+import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 import { useThemeTokens, applyTextStyles } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils'
+import { getTokensPropType, variantProp, wrapStringsInText } from '../utils'
 
 const selectBulletStyles = ({ itemBulletWidth, itemBulletHeight, itemBulletColor }) => ({
   width: itemBulletWidth,
@@ -22,6 +22,10 @@ const selectItemIconTokens = ({ itemIconSize, itemIconColor }) => ({
   color: itemIconColor
 })
 
+const selectCommonIconStyles = ({ iconMarginTop }) => ({
+  marginTop: iconMarginTop
+})
+
 const selectSideItemContainerStyles = ({ listGutter }) => ({
   marginRight: listGutter
 })
@@ -58,24 +62,13 @@ const ListItem = forwardRef(
     const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens)
     const itemBulletStyles = selectBulletStyles(themeTokens)
     const iconTokens = selectItemIconTokens(themeTokens)
+    const commonIconStyles = selectCommonIconStyles(themeTokens)
     const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
     const accessibilityRole = Platform.select({ web: 'listitem', default: 'item' })
 
-    const areChildrenStrings = () => {
-      if (Array.isArray(children)) {
-        return children.every((child) => typeof child === 'string')
-      }
-
-      return typeof children === 'string'
-    }
-
-    const renderItem = () => {
-      if (areChildrenStrings()) {
-        return <Text style={itemStyles}>{children}</Text>
-      }
-
-      return <View style={staticStyles.wrap}>{children}</View>
-    }
+    const renderItem = () => (
+      <View style={staticStyles.wrap}>{wrapStringsInText(children, { style: itemStyles })}</View>
+    )
 
     /**
      * Function responsible returning styling, in case the item is the last shouldn't
@@ -104,12 +97,7 @@ const ListItem = forwardRef(
 
       if (icon) {
         return (
-          <View
-            style={[
-              sideItemContainerStyles,
-              areChildrenStrings() ? staticStyles.centeredIcons : undefined
-            ]}
-          >
+          <View style={[sideItemContainerStyles, commonIconStyles]}>
             <IconComponent
               size={iconSize || iconTokens.size}
               color={iconColor || iconTokens.color}
@@ -143,9 +131,6 @@ const staticStyles = StyleSheet.create({
   itemContainer: {
     flexDirection: 'row'
   },
-  centeredIcons: {
-    justifyContent: 'center'
-  },
   wrap: {
     flex: 1
   }

package/src/List/index.js

@@ -1,3 +1,8 @@
 import List from './List'
+import ListItem from './ListItem'
+
+List.Item = ListItem
+
+export { List as ListBase, ListItem }
 
 export default List

package/src/Pagination/PageButton.jsx

@@ -8,8 +8,10 @@ import {
   copyPropTypes,
   getTokensPropType,
   hrefAttrsProp,
+  linkProps,
   selectTokens,
-  variantProp
+  variantProp,
+  withLinkRouter
 } from '../utils'
 
 import useCopy from '../utils/useCopy'
@@ -57,12 +59,7 @@ const PageButton = forwardRef(
 PageButton.displayName = 'PageButton'
 
 PageButton.propTypes = {
-  // Spreading any props into a secondary component accessed like Pagination.PageButton
-  // crashes a Docusaurus props table, but only in production, not in development
-  onPress: PropTypes.func,
-  href: PropTypes.string,
-  // If the above is fixed, the above can be replaced with this which includes full a11y etc:
-  // ...linkProps.types,
+  ...linkProps.types,
   label: PropTypes.string,
   isActive: PropTypes.bool,
   copy: copyPropTypes,
@@ -70,4 +67,4 @@ PageButton.propTypes = {
   tokens: getTokensPropType('PaginationPageButton')
 }
 
-export default PageButton
+export default withLinkRouter(PageButton)

package/src/Pagination/Pagination.jsx

@@ -1,7 +1,13 @@
 import React, { forwardRef } from 'react'
 import { View, Text, StyleSheet } from 'react-native'
 
-import { componentPropType, copyPropTypes, getTokensPropType, variantProp } from '../utils'
+import {
+  componentPropType,
+  copyPropTypes,
+  getTokensPropType,
+  variantProp,
+  withLinkRouter
+} from '../utils'
 import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 import Box from '../Box'
@@ -20,7 +26,19 @@ const selectTextStyles = ({ color, fontName, fontSize, fontWeight, lineHeight })
   })
 
 const Pagination = forwardRef(
-  ({ children, copy = 'en', variant, tokens, sideButtonVariant, sideButtonTokens }, ref) => {
+  (
+    {
+      children,
+      copy = 'en',
+      variant,
+      tokens,
+      sideButtonVariant,
+      sideButtonTokens,
+      LinkRouter,
+      linkRouterProps
+    },
+    ref
+  ) => {
     const viewport = useViewport()
     const { truncateAbove, gap, ...themeTokens } = useThemeTokens('Pagination', tokens, variant, {
       viewport
@@ -58,16 +76,22 @@ const Pagination = forwardRef(
           copy={copy}
           variant={sideButtonVariant}
           tokens={sideButtonTokens}
+          LinkRouter={LinkRouter}
+          linkRouterProps={linkRouterProps}
         />
       ),
       ...items.map((child, itemIndex) => {
         const buttonLabel = `${itemIndex + 1}`
         const itemProps = getItemProps(itemIndex)
+        const ItemLinkRouter = itemProps.LinkRouter ?? LinkRouter
+        const itemLinkRouterProps = { ...linkRouterProps, ...itemProps.linkRouterProps }
 
         if (shouldRenderButton(itemIndex)) {
           return (
             <PageButton
               {...itemProps}
+              LinkRouter={ItemLinkRouter}
+              linkRouterProps={itemLinkRouterProps}
               label={buttonLabel}
               copy={copy}
               isActive={isItemActive(itemIndex)}
@@ -88,6 +112,8 @@ const Pagination = forwardRef(
           copy={copy}
           variant={sideButtonVariant}
           tokens={sideButtonTokens}
+          LinkRouter={LinkRouter}
+          linkRouterProps={linkRouterProps}
         />
       )
     ]
@@ -112,6 +138,7 @@ PageButton.displayName = 'PageButton'
 Pagination.PageButton = PageButton
 
 Pagination.propTypes = {
+  ...withLinkRouter.propTypes,
   children: componentPropType('PageButton'),
   copy: copyPropTypes,
   variant: variantProp.propType,

package/src/Pagination/SideButton.jsx

@@ -7,7 +7,7 @@ import ButtonBase from '../Button/ButtonBase'
 import { IconText } from '../Icon'
 import { useThemeTokensCallback } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
-import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens } from '../utils'
+import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens, withLinkRouter } from '../utils'
 
 import dictionary from './dictionary'
 import useCopy from '../utils/useCopy'
@@ -82,4 +82,4 @@ SideButton.propTypes = {
   ...linkProps.types
 }
 
-export default SideButton
+export default withLinkRouter(SideButton)

package/src/Progress/Progress.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 import { useThemeTokens } from '../ThemeProvider'
 import { getTokensPropType, variantProp } from '../utils'
 

package/src/Progress/ProgressBar.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 
 import ProgressBarBackground from './ProgressBarBackground'
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 import { useThemeTokens } from '../ThemeProvider'
 import { getTokensPropType, variantProp } from '../utils'
 

package/src/Radio/Radio.jsx

@@ -2,13 +2,11 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 
-// @todo move `LabelContent` outside of the `InputLabel` and fix
-// the issue with the cursor not being pointer on Web
 import RadioLabel from '../InputLabel/LabelContent'
 import RadioButton, { selectRadioButtonTokens } from './RadioButton'
 import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
 import { getTokensPropType, useInputValue, useUniqueId, variantProp } from '../utils'
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 import StackView from '../StackView'
 
 const selectContainerStyles = ({

package/src/Spacer/Spacer.jsx

@@ -4,8 +4,8 @@ import { StyleSheet, View } from 'react-native'
 
 import { useSpacingScale, spacingProps } from '../utils'
 /**
- * @typedef {import('../utils/propTypes.js').SpacingValue} SpacingValue
- * @typedef {import('../utils/propTypes.js').SpacingObject} SpacingObject
+ * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
+ * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
  */
 
 const selectSizeStyle = (size, direction) => ({

package/src/StackView/StackWrap.jsx

@@ -4,6 +4,12 @@ import { Platform } from 'react-native'
 import StackWrapBox from './StackWrapBox'
 import StackWrapGap from './StackWrapGap'
 
+// In Jest/CI/SSR, global CSS isn't always available and doesn't always have .supports method
+const cssSupports = (...args) =>
+  typeof window !== 'undefined' &&
+  typeof window.CSS?.supports === 'function' &&
+  window.CSS.supports(...args)
+
 // CSS.supports needs an example of the type of value you intend to use.
 // Will be an integer appended `px` after hooks and JSX styles are resolved.
 const exampleGapValue = '1px'
@@ -20,12 +26,7 @@ const StackWrap = forwardRef((props, ref) => {
   // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
   const gap = props.gap ?? space
 
-  const canUseCSSGap =
-    Platform.OS === 'web' &&
-    gap === space &&
-    // In Jest/CI, global CSS isn't always available and doesn't always have .supports method
-    typeof CSS?.supports === 'function' &&
-    CSS.supports('gap', exampleGapValue)
+  const canUseCSSGap = Platform.OS === 'web' && gap === space && cssSupports('gap', exampleGapValue)
 
   return canUseCSSGap ? (
     // If possible, use the cleaner implementation that applies CSS `gap` styles to the container.

package/src/StackView/getStackedContent.jsx

@@ -7,7 +7,7 @@ import Spacer from '../Spacer'
 /**
  * @typedef {import('react').ReactChildren} ReactChildren
  * @typedef {import('react').ReactElement} ReactElement
- * @typedef {import('../utils/propTypes.js').SpacingValue} SpacingValue
+ * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
  */
 
 /**

package/src/StepTracker/StepTracker.jsx

@@ -5,7 +5,7 @@ import { StyleSheet, Text, View } from 'react-native'
 import StackView from '../StackView'
 import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
 import { getTokensPropType, variantProp } from '../utils'
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 import { useViewport } from '../ViewportProvider'
 import useCopy from '../utils/useCopy'