@telus-uds/components-base 0.0.2-prerelease.6 → 1.0.0

package/src/Button/ButtonBase.jsx

@@ -1,18 +1,16 @@
-import React from 'react'
-import { Pressable, Text, View, StyleSheet, Platform } from 'react-native'
+import React, { forwardRef } from 'react'
+import { Pressable, View, StyleSheet, Platform } from 'react-native'
 
-import { useThemeTokensCallback } from '../ThemeProvider'
-import { applyTextStyles, applyShadowToken } from '../ThemeProvider/utils'
+import { applyTextStyles, applyShadowToken, applyOuterBorder } from '../ThemeProvider/utils'
 import buttonPropTypes from './propTypes'
-import { a11yProps, hrefAttrsProp, linkProps } from '../utils/propTypes'
-
-const getCursorStyle = (inactive, accessibilityRole) => {
-  if (inactive) return 'not-allowed'
-  // These roles should result in cursor: pointer but don't in current RNW releases
-  if (['checkbox', 'radio', 'switch'].includes(accessibilityRole)) return 'pointer'
-  // For everything else, let React Native Web figure it out internally
-  return undefined
-}
+import {
+  a11yProps,
+  getCursorStyle,
+  linkProps,
+  resolvePressableState,
+  resolvePressableTokens,
+  wrapStringsInText
+} from '../utils'
 
 const getOuterBorderOffset = ({ outerBorderGap = 0, outerBorderWidth = 0 }) =>
   outerBorderGap + outerBorderWidth
@@ -22,26 +20,26 @@ const selectOuterContainerStyles = ({
   opacity,
   outerBorderColor,
   outerBorderWidth,
-  outerBorderGap = 0,
-  outerBorderRadius = 0,
+  outerBorderGap,
+  borderRadius,
   outerBackgroundColor
 }) => ({
   alignSelf,
-  padding: outerBorderGap,
-  borderWidth: outerBorderWidth,
-  borderColor: outerBorderColor,
-  borderRadius: outerBorderRadius + outerBorderGap,
   backgroundColor: outerBackgroundColor,
-  opacity
+  opacity,
+  ...applyOuterBorder({
+    outerBorderGap,
+    outerBorderWidth,
+    outerBorderColor,
+    borderRadius
+  })
 })
 
 const selectOuterWidthStyles = ({ outerBorderGap, outerBorderWidth, width }) => {
   // The inner container's bounding box is the bounding box of the button overall
   // so this many device pixels will sit outside of the overall bounding box
   const outerBorderOffset = getOuterBorderOffset({ outerBorderGap, outerBorderWidth })
-  const widthStyles = {
-    margin: 0 - outerBorderOffset
-  }
+  const widthStyles = {}
 
   if (!width) {
     return {
@@ -83,7 +81,8 @@ const selectInnerContainerStyles = ({
   paddingTop,
   paddingBottom,
   shadow,
-  borderWidth
+  borderWidth,
+  minWidth
 }) => {
   // Subtract border width from padding so overall button width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
@@ -98,6 +97,7 @@ const selectInnerContainerStyles = ({
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
     backgroundColor,
+    minWidth,
     ...applyShadowToken(shadow)
   }
 }
@@ -118,107 +118,105 @@ const selectTextStyles = ({ fontSize, color, lineHeight, fontName, fontWeight, t
     textAlign
   })
 
-const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) =>
-  Platform.OS === 'web'
-    ? {
-        // if it would overflow the container, wraps instead
-        maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
-        cursor: getCursorStyle(inactive, accessibilityRole),
-        outline: 'none' // removes the default browser :focus outline
-      }
-    : {}
-
-const ButtonBase = ({
-  href,
-  hrefAttrs,
-  children,
-  variant,
-  onPress,
-  tokens,
-  disabled = false, // alias for inactive
-  inactive = disabled,
-  selected = false,
-  ...rest
-}) => {
-  const getTokens = useThemeTokensCallback('Button', tokens, variant)
-  const getButtonState = ({ pressed, focused, hovered }) => ({
-    pressed,
-    focus: focused,
-    hover: hovered,
-    inactive,
-    selected
+const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {
+  return Platform.select({
+    web: {
+      // if it would overflow the container, wraps instead
+      maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
+      outline: 'none', // removes the default browser :focus outline
+      ...getCursorStyle(inactive, accessibilityRole)
+    },
+    default: {}
   })
-  const getTokensByPressableState = (pressableState) => getTokens(getButtonState(pressableState))
-
-  const a11y = a11yProps.select(rest)
-
-  const getPressableStyle = (pressableState) => {
-    const themeTokens = getTokensByPressableState(pressableState)
-    return [
-      staticStyles.wrapper,
-      selectWebOnlyStyles(inactive, themeTokens, a11y),
-      selectOuterContainerStyles(themeTokens),
-      selectOuterWidthStyles(themeTokens)
-    ]
-  }
-
-  const handlePress = linkProps.handleHref({ href, onPress })
-
-  return (
-    <Pressable
-      onPress={handlePress}
-      style={getPressableStyle}
-      disabled={inactive}
-      href={href}
-      {...hrefAttrsProp.spread(hrefAttrs)}
-      {...a11y}
-    >
-      {(pressableState) => {
-        const themeTokens = getTokensByPressableState(pressableState)
-        const containerStyles = selectInnerContainerStyles(themeTokens)
-        const borderStyles = selectBorderStyles(themeTokens)
-        const textStyles = {
-          ...selectTextStyles(themeTokens),
-          ...Platform.select({
-            // TODO: https://github.com/telus/universal-design-system/issues/487
-            web: { transition: 'color 200ms' }
-          })
-        }
-
-        // If the container has a width set, fill it instead of sizing from content.
-        // If in future we support text alignments other than center, add here.
-        const stretchStyles = !!themeTokens.width && staticStyles.center
-
-        return (
-          <View
-            style={[
-              containerStyles,
-              borderStyles,
-              stretchStyles,
-              Platform.select({
-                web: {
-                  maxWidth: '100%', // ensure overflowing content wraps
-                  // TODO: https://github.com/telus/universal-design-system/issues/487
-                  transition: 'background-color 200ms, border-color 200ms'
-                }
-              })
-            ]}
-          >
-            {typeof children === 'function' ? (
-              children({
-                ...getButtonState(pressableState),
-                textStyles
-              })
-            ) : (
-              <Text style={textStyles}>{children}</Text>
-            )}
-          </View>
-        )
-      }}
-    </Pressable>
-  )
 }
 
+const ButtonBase = forwardRef(
+  (
+    {
+      href,
+      hrefAttrs,
+      children,
+      onPress,
+      tokens = {},
+      disabled = false, // alias for inactive
+      inactive = disabled,
+      selected = false,
+      dataSet,
+      ...rest
+    },
+    ref
+  ) => {
+    const extraButtonState = { inactive, selected }
+    const resolveButtonTokens = (pressableState) =>
+      resolvePressableTokens(tokens, pressableState, extraButtonState)
+
+    const a11y = a11yProps.select(rest)
+
+    const getPressableStyle = (pressableState) => {
+      const themeTokens = resolveButtonTokens(pressableState)
+      return [
+        staticStyles.row,
+        selectWebOnlyStyles(inactive, themeTokens, a11y),
+        selectOuterContainerStyles(themeTokens),
+        selectOuterWidthStyles(themeTokens)
+      ]
+    }
+
+    return (
+      <Pressable
+        ref={ref}
+        href={href}
+        onPress={linkProps.handleHref({ href, onPress })}
+        style={getPressableStyle}
+        disabled={inactive}
+        dataSet={dataSet}
+        hrefAttrs={hrefAttrs}
+        {...a11y}
+      >
+        {(pressableState) => {
+          const themeTokens = resolveButtonTokens(pressableState)
+          const containerStyles = selectInnerContainerStyles(themeTokens)
+          const borderStyles = selectBorderStyles(themeTokens)
+          const textStyles = [selectTextStyles(themeTokens), staticStyles.text]
+
+          // If the container has a width set, fill it instead of sizing from content.
+          // If in future we support text alignments other than center, add here.
+          const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align
+
+          return (
+            <View
+              style={[
+                containerStyles,
+                borderStyles,
+                stretchStyles,
+                staticStyles.row,
+                Platform.select({
+                  web: {
+                    maxWidth: '100%', // ensure overflowing content wraps
+                    // TODO: https://github.com/telus/universal-design-system/issues/487
+                    transition: 'background-color 200ms, border-color 200ms'
+                  }
+                })
+              ]}
+            >
+              {wrapStringsInText(
+                typeof children === 'function'
+                  ? children({
+                      ...resolvePressableState(pressableState, extraButtonState),
+                      textStyles
+                    })
+                  : children,
+                { style: textStyles }
+              )}
+            </View>
+          )
+        }}
+      </Pressable>
+    )
+  }
+)
+ButtonBase.displayName = 'ButtonBase'
+
 ButtonBase.propTypes = {
   ...a11yProps.types,
   ...buttonPropTypes,
@@ -226,10 +224,21 @@ ButtonBase.propTypes = {
 }
 
 const staticStyles = StyleSheet.create({
-  wrapper: {
-    flexDirection: 'row' // ensures alignSelf is horizontal
+  row: {
+    // Apply all button alignment horizontally; no vertical stacking within a button
+    flexDirection: 'row'
+  },
+  text: {
+    flexGrow: 1, // On native but not web, flexShrink here wraps text prematurely
+    ...Platform.select({
+      // TODO: https://github.com/telus/universal-design-system/issues/487
+      web: { transition: 'color 200ms' }
+    })
+  },
+  align: {
+    alignItems: 'center'
   },
-  center: {
+  stretch: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center'

package/src/Button/ButtonGroup.jsx

@@ -1,11 +1,12 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+import ABBPropTypes from 'airbnb-prop-types'
 import { Platform } from 'react-native'
 
 import ButtonBase from './ButtonBase'
 import { StackWrap } from '../StackView'
 import { useViewport } from '../ViewportProvider'
-import { useThemeTokens } from '../ThemeProvider'
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
   pressProps,
@@ -14,102 +15,96 @@ import {
   selectTokens
 } from '../utils/propTypes'
 import { useMultipleInputValues } from '../utils/input'
+import { getPressHandlersWithArgs } from '../utils/pressability'
 
-const ButtonGroup = ({
-  variant,
-  buttonVariant = {},
-  tokens,
-  items = [],
-  values,
-  initialValues,
-  maxValues = 1,
-  onChange,
-  readOnly = false,
-  inactive = false,
-  accessibilityRole = maxValues === 1
-    ? 'radioGroup' // radioGroup is cross-platform; only web aria has generic groups
-    : Platform.select({ web: 'group', default: 'none' }),
-  ...rest
-}) => {
-  const viewport = useViewport()
-  const themeTokens = useThemeTokens('ButtonGroup', tokens, variant, { viewport })
-  const stackTokens = selectTokens('StackView', themeTokens)
-  const { direction, space } = themeTokens
+const ButtonGroup = forwardRef(
+  (
+    {
+      variant,
+      tokens,
+      items = [],
+      values,
+      initialValues,
+      maxValues = 1,
+      onChange,
+      readOnly = false,
+      inactive = false,
+      accessibilityRole = maxValues === 1
+        ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
+        : Platform.select({ web: 'group', default: 'none' }),
+      ...rest
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const themeTokens = useThemeTokens('ButtonGroup', tokens, variant, { viewport })
+    const stackTokens = selectTokens('StackView', themeTokens)
+    const { direction, space } = themeTokens
 
-  const { currentValues, toggleOneValue } = useMultipleInputValues({
-    initialValues,
-    values,
-    maxValues,
-    onChange,
-    readOnly
-  })
+    const getButtonTokens = useThemeTokensCallback('ButtonGroupItem', tokens, variant)
 
-  const a11y = a11yProps.select({
-    accessibilityRole,
-    ...rest
-  })
-  const itemA11yRole = a11y.accessibilityRole === 'radioGroup' ? 'radio' : 'checkbox'
+    const { currentValues, toggleOneValue } = useMultipleInputValues({
+      initialValues,
+      values,
+      maxValues,
+      onChange,
+      readOnly
+    })
+
+    const a11y = a11yProps.select({
+      accessibilityRole,
+      ...rest
+    })
+    const itemA11yRole = a11y.accessibilityRole === 'radiogroup' ? 'radio' : 'checkbox'
 
-  return (
-    <StackWrap {...a11y} space={space} direction={direction} tokens={stackTokens}>
-      {items.map(({ label, id = label, accessibilityLabel }, index) => {
-        const isSelected = currentValues.includes(id)
+    return (
+      <StackWrap {...a11y} space={space} direction={direction} tokens={stackTokens} ref={ref}>
+        {items.map(({ label, id = label, accessibilityLabel, ref: itemRef }, index) => {
+          const isSelected = currentValues.includes(id)
 
-        // Allow handlers to be passed down for blur, hover, focus, pressIn, etc
-        const pressHandlers = Object.fromEntries(
-          Object.entries(pressProps.select(rest)).map(([key, handler]) => ({
-            [key]: (args) => {
-              // Pass each handler data on this button and current selection
-              handler({ id, label, currentValues }, ...args)
-            }
-          }))
-        )
-        const handlePress = () => {
-          if (pressHandlers.onPress) pressHandlers.onPress()
-          toggleOneValue(id)
-        }
+          // Pass an object of relevant component state as first argument for any passed-in press handlers
+          const pressHandlers = getPressHandlersWithArgs(rest, [{ id, label, currentValues }])
 
-        const itemA11y = {
-          accessibilityState: { checked: isSelected },
-          accessibilityRole: itemA11yRole,
-          accessibilityLabel,
-          ...Platform.select({
-            web: {
-              // accessibilityPosInSet etc exists in React Native Web main branch
-              // but not in a release compatible with Expo etc; just use `aria-*`
-              'aria-setsize': items.length,
-              'aria-posinset': index + 1
-            },
-            default: {}
-          })
-        }
+          const handlePress = (event) => {
+            if (pressHandlers.onPress) pressHandlers.onPress()
+            toggleOneValue(id, event)
+          }
 
-        // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
-        // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
-        return (
-          <ButtonBase
-            key={id}
-            {...pressHandlers}
-            onPress={handlePress}
-            variant={{ component: 'ButtonGroup', ...buttonVariant }}
-            selected={isSelected}
-            inactive={inactive}
-            {...itemA11y}
-          >
-            {label}
-          </ButtonBase>
-        )
-      })}
-    </StackWrap>
-  )
-}
+          const itemA11y = {
+            accessibilityState: { checked: isSelected },
+            accessibilityRole: itemA11yRole,
+            accessibilityLabel,
+            ...a11yProps.getPositionInSet(items.length, index)
+          }
+
+          // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
+          // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
+          return (
+            <ButtonBase
+              ref={itemRef}
+              key={id}
+              {...pressHandlers}
+              onPress={handlePress}
+              tokens={getButtonTokens}
+              selected={isSelected}
+              inactive={inactive}
+              {...itemA11y}
+            >
+              {label}
+            </ButtonBase>
+          )
+        })}
+      </StackWrap>
+    )
+  }
+)
+ButtonGroup.displayName = 'ButtonGroup'
 
 ButtonGroup.propTypes = {
   ...a11yProps.propTypes,
   ...pressProps.propTypes,
   tokens: getTokensPropType('ButtonGroup'),
   variant: variantProp.propType,
-  buttonVariant: variantProp.propType,
   /**
    * The maximum number of items a user may select at once. Defaults to 1 and behaves
    * like radio buttons. To have no limit and allow any number of selections, pass `null`.
@@ -135,7 +130,11 @@ ButtonGroup.propTypes = {
        * which will be used in code and passed to any onChange function.
        * If not provided, the label is used.
        */
-      id: PropTypes.string
+      id: PropTypes.string,
+      /**
+       * An optional ref for one individual button in the ButtonGroup
+       */
+      ref: ABBPropTypes.ref()
     })
   ),
   /**

package/src/Button/ButtonLink.jsx

@@ -1,21 +1,36 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import ButtonBase from './ButtonBase'
-import buttonPropTypes from './propTypes'
+import buttonPropTypes, { textAndA11yText } from './propTypes'
 import { a11yProps, hrefAttrsProp, linkProps } from '../utils/propTypes'
+import { useThemeTokensCallback } from '../ThemeProvider'
 
 /**
  * `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.
  * ButtonLink is a block-level component and should not be used inline.
  */
-const ButtonLink = ({ accessibilityRole = 'link', ...props }) => {
-  const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
-  return <ButtonBase accessibilityRole={accessibilityRole} hrefAttrs={hrefAttrs} {...rest} />
-}
+const ButtonLink = forwardRef(
+  ({ accessibilityRole = 'link', tokens, variant, dataSet, ...props }, ref) => {
+    const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
+    const getTokens = useThemeTokensCallback('Button', tokens, variant)
+    return (
+      <ButtonBase
+        ref={ref}
+        accessibilityRole={accessibilityRole}
+        tokens={getTokens}
+        hrefAttrs={hrefAttrs}
+        dataSet={dataSet}
+        {...rest}
+      />
+    )
+  }
+)
+ButtonLink.displayName = 'ButtonLink'
 
 ButtonLink.propTypes = {
   ...a11yProps.types,
   ...buttonPropTypes,
-  ...linkProps.types
+  ...linkProps.types,
+  children: textAndA11yText
 }
 
 export default ButtonLink

package/src/Button/propTypes.js

@@ -1,5 +1,11 @@
 import PropTypes from 'prop-types'
+import ABBPropTypes from 'airbnb-prop-types'
 import { variantProp } from '../utils/propTypes'
+import A11yText from '../A11yText'
+
+export const textAndA11yText = ABBPropTypes.childrenOf(
+  PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string])
+)
 
 const buttonPropTypes = {
   /**
@@ -12,10 +18,14 @@ const buttonPropTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * Button's children must be either a text string, or a render function which is passed an object of
+   * Button's children must be either:
+   *  - One or more text strings and / or A11yText components
+   *  - A render function with contents that responds to current button state by being passed an object of:
+   * ```
    * { hovered<bool>, focused<bool>, pressed<bool>, inactive<bool>, selected<bool>, textStyles<RNStyle> }
+   * ```
    */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+  children: PropTypes.oneOfType([PropTypes.func, textAndA11yText]).isRequired,
   /**
    * Function called when the button is pressed. Required unless the button has a href.
    */

package/src/Card/Card.jsx

@@ -1,34 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View } from 'react-native'
 
-import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
+import { useThemeTokens } from '../ThemeProvider'
 import { getTokensPropType, variantProp } from '../utils'
 import { useViewport } from '../ViewportProvider'
 import { a11yProps } from '../utils/propTypes'
-
-// Ensure explicit selection of tokens
-const selectStyles = ({
-  backgroundColor,
-  borderColor,
-  borderRadius,
-  borderWidth,
-  paddingBottom,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  shadow
-}) => ({
-  backgroundColor,
-  borderColor,
-  borderRadius,
-  borderWidth,
-  paddingBottom,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  ...applyShadowToken(shadow)
-})
+import CardBase from './CardBase'
 
 /**
  * A basic card component, unstyled by default.
@@ -78,16 +55,13 @@ const selectStyles = ({
  * you automatically make inaccessible its children, which may or may not be appropriate
  * depending on what you are trying to achieve.
  */
-const Card = ({ children, tokens, variant, ...rest }) => {
+const Card = ({ children, tokens, variant, dataSet, ...rest }) => {
   const viewport = useViewport()
   const themeTokens = useThemeTokens('Card', tokens, variant, { viewport })
-  const cardStyle = selectStyles(themeTokens)
-  const a11y = a11yProps.select(rest)
-
   return (
-    <View style={cardStyle} {...a11y}>
+    <CardBase tokens={themeTokens} dataSet={dataSet} {...rest}>
       {children}
-    </View>
+    </CardBase>
   )
 }