@telus-uds/components-base 1.14.1 → 1.15.0

package/src/ExpandCollapse/Panel.jsx

@@ -60,11 +60,13 @@ const ExpandCollapsePanel = forwardRef(
     const [containerHeight, setContainerHeight] = useState(null)
     const isExpanded = openIds.includes(panelId)
 
-    const selectedProps = selectProps(rest)
-    selectedProps.accessibilityState = {
-      ...(selectedProps.accessibilityState || {}),
-      expanded: isExpanded
-    }
+    const selectedProps = selectProps({
+      ...rest,
+      accessibilityState: {
+        ...(rest.accessibilityState || {}),
+        expanded: isExpanded
+      }
+    })
 
     const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
       expanded: isExpanded

package/src/List/ListItem.jsx

@@ -1,204 +1,25 @@
 import React, { forwardRef } from 'react'
-import { View, Platform, StyleSheet } from 'react-native'
-import PropTypes from 'prop-types'
-import { useTheme, useThemeTokens, applyTextStyles } from '../ThemeProvider'
-import {
-  a11yProps,
-  getTokensPropType,
-  selectSystemProps,
-  variantProp,
-  viewProps,
-  wrapStringsInText
-} from '../utils'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
-
-const selectBulletStyles = ({ itemBulletWidth, itemBulletHeight, itemBulletColor }) => ({
-  width: itemBulletWidth,
-  height: itemBulletHeight,
-  borderRadius: itemBulletHeight / 2,
-  backgroundColor: itemBulletColor
-})
-
-const selectBulletContainerStyles = ({ itemBulletContainerWidth, itemBulletContainerAlign }) => ({
-  width: itemBulletContainerWidth,
-  alignItems: itemBulletContainerAlign
-})
-
-const selectItemIconTokens = ({ itemIconSize, itemIconColor }) => ({
-  size: itemIconSize,
-  color: itemIconColor
-})
-
-const selectSideItemContainerStyles = ({ listGutter, iconMarginTop }) => ({
-  marginTop: iconMarginTop,
-  marginRight: listGutter
-})
-
-// Align bullets with the top line of text the same way icons are aligned
-const selectBulletPositioningStyles = ({ itemIconSize }) => ({
-  width: itemIconSize,
-  height: itemIconSize
-})
-
-const selectItemStyles = (
-  { itemFontWeight, itemFontSize, itemLineHeight, itemFontName },
-  themeOptions
-) =>
-  applyTextStyles({
-    fontWeight: itemFontWeight,
-    fontSize: itemFontSize,
-    lineHeight: itemLineHeight,
-    fontName: itemFontName,
-    themeOptions
-  })
-
-const selectItemBlockStyles = ({ interItemMargin }) => ({
-  marginBottom: interItemMargin
-})
-
-const selectDividerStyles = ({ dividerColor, dividerSize, interItemMarginWithDivider }) => ({
-  borderBottomWidth: dividerSize,
-  borderColor: dividerColor,
-  marginBottom: interItemMarginWithDivider,
-  paddingBottom: interItemMarginWithDivider
-})
+import ListItemBase from './ListItemBase'
+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,
-      icon,
-      iconColor,
-      iconSize,
-      showDivider,
-      children,
-      isLastItem,
-      accessibilityRole = Platform.select({ web: 'listitem', default: undefined }),
-      ...rest
-    },
-    ref
-  ) => {
-    const themeTokens = useThemeTokens('List', tokens, variant)
-    const { themeOptions } = useTheme()
-
-    const itemStyles = selectItemStyles(themeTokens, themeOptions)
-    const itemBlockStyles = selectItemBlockStyles(themeTokens)
-    const dividerStyles = selectDividerStyles(themeTokens)
-    const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens)
-    const itemBulletStyles = selectBulletStyles(themeTokens)
-    const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens)
-    const iconTokens = selectItemIconTokens(themeTokens)
-    const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
-
-    const renderItem = () => (
-      <View style={staticStyles.wrap}>{wrapStringsInText(children, { style: itemStyles })}</View>
-    )
-
-    /**
-     * Function responsible returning styling, in case the item is the last shouldn't
-     * add extra margin on the bottom, if "showDivider" is true it should add a divider
-     * and custom margin and padding, otherwise just adds a margin to the bottom
-     */
-    const getContainerStyle = () => {
-      if (isLastItem) {
-        return undefined
-      }
-
-      if (showDivider) {
-        return dividerStyles
-      }
-
-      return itemBlockStyles
-    }
-
-    /**
-     * Renders item bullet or Icon in case it's defined
-     * in case children are string the icon is centered otherwise
-     * it will align itself at start of the container
-     */
-    const renderMarker = () => {
-      const IconComponent = icon || <></>
-
-      if (icon) {
-        return (
-          <View style={sideItemContainerStyles}>
-            <IconComponent
-              size={iconSize || iconTokens.size}
-              color={iconColor || iconTokens.color}
-            />
-          </View>
-        )
-      }
-
-      return (
-        <View style={[sideItemContainerStyles, itemBulletContainerStyles]}>
-          <View style={[staticStyles.bulletPositioning, itemBulletPositioningStyles]}>
-            <View style={itemBulletStyles} testID="unordered-item-bullet" />
-          </View>
-        </View>
-      )
-    }
-
-    return (
-      <View
-        ref={ref}
-        style={[staticStyles.itemContainer, getContainerStyle()]}
-        accessibilityRole={accessibilityRole}
-        {...selectProps(rest)}
-      >
-        {renderMarker()}
-        {renderItem()}
-      </View>
-    )
-  }
-)
-ListItem.displayName = 'ListItem'
-
-const staticStyles = StyleSheet.create({
-  itemContainer: {
-    flexDirection: 'row'
-  },
-  wrap: {
-    flex: 1
-  },
-  bulletPositioning: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
+const ListItem = forwardRef(({ tokens, variant, children, ...listItemProps }, ref) => {
+  const themeTokens = useThemeTokens('List', tokens, variant)
+  return (
+    <ListItemBase tokens={themeTokens} ref={ref} {...listItemProps}>
+      {children}
+    </ListItemBase>
+  )
 })
+ListItem.displayName = 'ListItem'
 
 ListItem.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('List'),
   variant: variantProp.propType,
-  children: PropTypes.node.isRequired,
-  /**
-   * Renders side item icon
-   */
-  icon: PropTypes.elementType,
-  /**
-   * Will set display icon color
-   */
-  iconColor: PropTypes.string,
-  /**
-   * Allow the user define the icon size if not defined the theme's file
-   */
-  iconSize: PropTypes.number,
-  /**
-   * @ignore
-   * Defined by parent if it's last item on the list
-   */
-  isLastItem: PropTypes.bool,
-  /**
-   * @ignore
-   * In case it is not the last item allow display divider
-   */
-  showDivider: PropTypes.bool
+  ...ListItemBase.propTypes
 }
 
 export default ListItem

package/src/List/ListItemBase.jsx

@@ -0,0 +1,118 @@
+import React, { forwardRef } from 'react'
+import { View, Platform, StyleSheet } from 'react-native'
+import PropTypes from 'prop-types'
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
+
+import ListItemContent from './ListItemContent'
+import ListItemMark from './ListItemMark'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
+const selectItemBlockStyles = ({ interItemMargin }) => ({
+  marginBottom: interItemMargin
+})
+
+const selectDividerStyles = ({ dividerColor, dividerSize, interItemMarginWithDivider }) => ({
+  borderBottomWidth: dividerSize,
+  borderColor: dividerColor,
+  marginBottom: interItemMarginWithDivider,
+  paddingBottom: interItemMarginWithDivider
+})
+
+/**
+ * ListItem is responsible for rendering icon or a bullet as side item
+ */
+const ListItemBase = forwardRef(
+  (
+    {
+      tokens,
+      icon,
+      iconColor,
+      iconSize,
+      showDivider,
+      children,
+      isLastItem,
+      accessibilityRole = Platform.select({ web: 'listitem', default: undefined }),
+      ...rest
+    },
+    ref
+  ) => {
+    const themeTokens = typeof tokens === 'function' ? tokens() : tokens
+
+    const itemBlockStyles = selectItemBlockStyles(themeTokens)
+    const dividerStyles = selectDividerStyles(themeTokens)
+
+    /**
+     * Function responsible returning styling, in case the item is the last shouldn't
+     * add extra margin on the bottom, if "showDivider" is true it should add a divider
+     * and custom margin and padding, otherwise just adds a margin to the bottom
+     */
+    const getContainerStyle = () => {
+      if (isLastItem) {
+        return undefined
+      }
+
+      if (showDivider) {
+        return dividerStyles
+      }
+
+      return itemBlockStyles
+    }
+
+    return (
+      <View
+        ref={ref}
+        style={[staticStyles.itemContainer, getContainerStyle()]}
+        accessibilityRole={accessibilityRole}
+        {...selectProps(rest)}
+      >
+        {typeof children === 'function' ? (
+          children({ tokens, icon, iconColor, iconSize, isLastItem })
+        ) : (
+          <>
+            <ListItemMark tokens={tokens} icon={icon} iconColor={iconColor} iconSize={iconSize} />
+            <ListItemContent tokens={tokens}>{children}</ListItemContent>
+          </>
+        )}
+      </View>
+    )
+  }
+)
+ListItemBase.displayName = 'ListItem'
+
+const staticStyles = StyleSheet.create({
+  itemContainer: {
+    flexDirection: 'row'
+  }
+})
+
+ListItemBase.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('List'),
+  variant: variantProp.propType,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  /**
+   * Renders side item icon
+   */
+  icon: PropTypes.elementType,
+  /**
+   * Will set display icon color
+   */
+  iconColor: PropTypes.string,
+  /**
+   * Allow the user define the icon size if not defined the theme's file
+   */
+  iconSize: PropTypes.number,
+  /**
+   * @ignore
+   * Defined by parent if it's last item on the list
+   */
+  isLastItem: PropTypes.bool,
+  /**
+   * @ignore
+   * In case it is not the last item allow display divider
+   */
+  showDivider: PropTypes.bool
+}
+
+export default ListItemBase

package/src/List/ListItemContent.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { View, StyleSheet } from 'react-native'
+import { wrapStringsInText } from '../utils'
+import { useTheme, applyTextStyles } from '../ThemeProvider'
+
+export const tokenTypes = {
+  itemFontWeight: PropTypes.string.isRequired,
+  itemFontSize: PropTypes.number.isRequired,
+  itemLineHeight: PropTypes.number.isRequired,
+  itemFontName: PropTypes.string.isRequired
+}
+
+const selectItemTextStyles = (
+  { itemFontWeight, itemFontSize, itemLineHeight, itemFontName },
+  themeOptions
+) =>
+  applyTextStyles({
+    fontWeight: itemFontWeight,
+    fontSize: itemFontSize,
+    lineHeight: itemLineHeight,
+    fontName: itemFontName,
+    themeOptions
+  })
+
+/**
+ * Subcomponent used within ListItem and similar components for rendering content that fills
+ * and wraps available space in a { flexDirection: row } container alongside a ListIconMark,
+ * and that applies text styles to strings via supplied tokens.
+ *
+ * It's the responsibility of themes to make sure that these text tokens align the first line of
+ * text nicely against the bullet or icon rendered by ListIconMark.
+ */
+const ListItemContent = ({ tokens, children }) => {
+  const { themeOptions } = useTheme()
+  const textStyles = selectItemTextStyles(tokens, themeOptions)
+  return <View style={staticStyles.wrap}>{wrapStringsInText(children, { style: textStyles })}</View>
+}
+
+const staticStyles = StyleSheet.create({
+  wrap: {
+    flex: 1
+  }
+})
+
+ListItemContent.propTypes = {
+  tokens: PropTypes.shape(tokenTypes).isRequired,
+  children: PropTypes.node.isRequired
+}
+
+export default ListItemContent

package/src/List/ListItemMark.jsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { View, StyleSheet } from 'react-native'
+
+export const tokenTypes = {
+  itemIconSize: PropTypes.number.isRequired,
+  itemIconColor: PropTypes.string.isRequired,
+  listGutter: PropTypes.number.isRequired,
+  iconMarginTop: PropTypes.number.isRequired
+}
+
+const selectItemIconTokens = ({ itemIconSize, itemIconColor }) => ({
+  size: itemIconSize,
+  color: itemIconColor
+})
+
+const selectSideItemContainerStyles = ({ listGutter, iconMarginTop }) => ({
+  marginTop: iconMarginTop,
+  marginRight: listGutter
+})
+
+// Align bullets with the top line of text the same way icons are aligned
+const selectBulletPositioningStyles = ({ itemIconSize }) => ({
+  width: itemIconSize,
+  height: itemIconSize
+})
+
+const selectBulletStyles = ({ itemBulletWidth, itemBulletHeight, itemBulletColor }) => ({
+  width: itemBulletWidth,
+  height: itemBulletHeight,
+  borderRadius: itemBulletHeight / 2,
+  backgroundColor: itemBulletColor
+})
+
+const selectBulletContainerStyles = ({ itemBulletContainerWidth, itemBulletContainerAlign }) => ({
+  width: itemBulletContainerWidth,
+  alignItems: itemBulletContainerAlign
+})
+
+/**
+ * Subcomponent used within ListItem and similar components for rendering bullets or icons
+ * that sit alongside a ListIconContent in a { flexDirection: row } container.
+ *
+ * It's the responsibility of themes to make sure that the supplied tokens align the
+ * icon or bullet nicely against the first line of text in a ListIconContent.
+ */
+const ListItemMark = ({ icon, iconColor, iconSize, tokens = {} }) => {
+  const IconComponent = icon || <></>
+
+  const themeTokens = typeof tokens === 'function' ? tokens() : tokens
+
+  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
+
+  if (icon) {
+    const iconTokens = selectItemIconTokens(themeTokens)
+    return (
+      <View style={sideItemContainerStyles}>
+        <IconComponent size={iconSize || iconTokens.size} color={iconColor || iconTokens.color} />
+      </View>
+    )
+  }
+
+  const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens)
+  const itemBulletStyles = selectBulletStyles(themeTokens)
+  const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens)
+  return (
+    <View style={[sideItemContainerStyles, itemBulletContainerStyles]}>
+      <View style={[staticStyles.bulletPositioning, itemBulletPositioningStyles]}>
+        <View style={itemBulletStyles} testID="unordered-item-bullet" />
+      </View>
+    </View>
+  )
+}
+
+ListItemMark.propTypes = {
+  tokens: PropTypes.shape(tokenTypes).isRequired,
+  /**
+   * Renders side item icon
+   */
+  icon: PropTypes.elementType,
+  /**
+   * Will set display icon color
+   */
+  iconColor: PropTypes.string,
+  /**
+   * Allow the user define the icon size
+   */
+  iconSize: PropTypes.number
+}
+
+const staticStyles = StyleSheet.create({
+  bulletPositioning: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+})
+
+export default ListItemMark

package/src/List/PressableListItemBase.jsx

@@ -0,0 +1,102 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import ABBPropTypes from 'airbnb-prop-types'
+
+import { Pressable, StyleSheet, Platform } from 'react-native'
+
+import {
+  resolvePressableTokens,
+  clickProps,
+  linkProps,
+  hrefAttrsProp,
+  withLinkRouter
+} from '../utils'
+
+import ListItemBase from './ListItemBase'
+import ListItemContent, { tokenTypes as contentTokenTypes } from './ListItemContent'
+import ListItemMark, { tokenTypes as markTokenTypes } from './ListItemMark'
+
+const selectPressableStyles = ({
+  backgroundColor,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  paddingBottom,
+  interItemMargin
+}) => ({
+  backgroundColor,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  paddingBottom,
+  marginBottom: interItemMargin,
+  ...Platform.select({ web: { outline: 'none' } })
+})
+
+const PressableListItemBase = forwardRef(
+  ({ href, tokens, icon, children, listItemRef, ...rest }, ref) => {
+    const { onPress, ...props } = clickProps.toPressProps(rest)
+    const { hrefAttrs, rest: listItemProps } = hrefAttrsProp.bundle(props)
+    const handlePress = linkProps.handleHref({ href, onPress })
+
+    return (
+      <ListItemBase ref={listItemRef} tokens={tokens()} {...listItemProps}>
+        {({ isLastItem }) => {
+          const getTokens = (pressableState) =>
+            resolvePressableTokens(tokens, pressableState, { last: isLastItem })
+          const getPressableStyle = (pressableState) => [
+            staticStyles.itemContainer,
+            selectPressableStyles(getTokens(pressableState))
+          ]
+          return (
+            <Pressable
+              onPress={handlePress}
+              href={href}
+              hrefAttrs={hrefAttrs}
+              style={getPressableStyle}
+              ref={ref}
+            >
+              {(pressableState) => {
+                const themeTokens = getTokens(pressableState)
+                return (
+                  <>
+                    <ListItemMark icon={icon} tokens={themeTokens} />
+                    <ListItemContent tokens={themeTokens}>
+                      {typeof children === 'function' ? children(pressableState) : children}
+                    </ListItemContent>
+                  </>
+                )
+              }}
+            </Pressable>
+          )
+        }}
+      </ListItemBase>
+    )
+  }
+)
+
+PressableListItemBase.displayName = 'PressableListItemBase'
+
+const staticStyles = StyleSheet.create({
+  itemContainer: {
+    flexDirection: 'row',
+    flex: 1
+  },
+  tokens: {
+    ...contentTokenTypes,
+    ...markTokenTypes
+  }
+})
+
+PressableListItemBase.propTypes = {
+  href: PropTypes.string,
+  onPress: PropTypes.func,
+  // TODO - type this better, maybe import the subcomponent token types and run it through util
+  // eslint-disable-next-line react/forbid-prop-types
+  tokens: PropTypes.any,
+  icon: PropTypes.elementType,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  listItemRef: ABBPropTypes.ref()
+}
+
+export default withLinkRouter(PressableListItemBase)

package/src/Notification/Notification.jsx

@@ -112,7 +112,7 @@ const Notification = forwardRef(
     const textStyles = selectTextStyles(themeTokens, themeOptions)
 
     const content = wrapStringsInText(
-      typeof children === 'function' ? children({ textStyles }) : children,
+      typeof children === 'function' ? children({ textStyles, variant }) : children,
       { style: textStyles }
     )
 

package/src/Pagination/Pagination.jsx

@@ -103,12 +103,17 @@ const Pagination = forwardRef(
               label={buttonLabel}
               copy={copy}
               isActive={isItemActive(itemIndex)}
+              key={buttonLabel}
             />
           )
         }
 
         if (shouldRenderEllipsis(itemIndex)) {
-          return <Text style={ellipsisTextStyles}>...</Text>
+          return (
+            <Text key="..." style={ellipsisTextStyles}>
+              ...
+            </Text>
+          )
         }
 
         return null

package/src/Pagination/SideButton.jsx

@@ -12,6 +12,9 @@ import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens, withLinkRouter }
 import dictionary from './dictionary'
 import useCopy from '../utils/useCopy'
 
+// We need to drop the icon here since it gets rendered via children and not
+// `ButtonBase` in order to tap into the state of the button
+const selectButtonTokens = ({ icon: _, ...rest }) => selectTokens('Button', rest)
 const selectIconTokens = ({ color, iconSize, iconDisplace }, direction) => {
   return {
     color,
@@ -35,7 +38,7 @@ const SideButton = forwardRef(
 
     const { icon } = getTokens(tokens, buttonVariant)
 
-    const getButtonTokens = (buttonState) => selectTokens('Button', getTokens(buttonState))
+    const getButtonTokens = (buttonState) => selectButtonTokens(getTokens(buttonState))
     const getIconTokens = (buttonState) => selectIconTokens(getTokens(buttonState), direction)
 
     const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText')

package/src/Radio/Radio.jsx

@@ -151,15 +151,19 @@ const Radio = forwardRef(
     const uniqueId = useUniqueId('radio')
     const inputId = id ?? uniqueId
 
+    const selectedProps = selectProps({
+      accessibilityRole: 'radio',
+      accessibilityState: { checked: isChecked, disabled: inactive },
+      ...rest
+    })
+
     return (
       <Pressable
         ref={ref}
         disabled={inactive}
         onKeyDown={handleKeyDown}
         onPress={handleChange}
-        accessibilityRole="radio"
-        accessibilityState={{ checked: isChecked, disabled: inactive }}
-        {...selectProps(rest)}
+        {...selectedProps}
       >
         {({ focused: focus, hovered: hover, pressed }) => {
           const stateTokens = getTokens({ focus, hover, pressed })