@telus-uds/components-base 3.29.1 → 4.0.0-alpha.1

package/src/Button/Button.jsx

@@ -1,16 +1,14 @@
 import React from 'react'
 
-import ButtonBase from './ButtonBase'
-import buttonPropTypes, { textAndA11yText } from './propTypes'
-import {
-  useThemeTokensCallback,
-  useResponsiveThemeTokensCallback,
-  useTheme
-} from '../ThemeProvider'
-import { a11yProps } from '../utils/props'
-import { useViewport } from '../ViewportProvider'
-
-const Button = React.forwardRef(
+import { ButtonBase } from './ButtonBase'
+import { buttonPropTypes, textAndA11yText } from './propTypes'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { useResponsiveThemeTokensCallback } from '../ThemeProvider/useResponsiveThemeTokensCallback'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { a11yProps } from '../utils/props/a11yProps'
+import { useViewport } from '../ViewportProvider/useViewport'
+
+export const Button = React.forwardRef(
   ({ accessibilityRole = 'button', tokens, variant, heightFull = true, ...props }, ref) => {
     const viewport = useViewport()
     const {
@@ -44,5 +42,3 @@ Button.propTypes = {
   ...buttonPropTypes,
   children: textAndA11yText
 }
-
-export default Button

package/src/Button/ButtonBase.jsx

@@ -2,25 +2,26 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, View, StyleSheet, Platform } from 'react-native'
 
-import { applyTextStyles, applyShadowToken, applyOuterBorder, useTheme } from '../ThemeProvider'
-import buttonPropTypes from './propTypes'
+import { applyTextStyles, applyShadowToken, applyOuterBorder } from '../ThemeProvider/utils/styles'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { buttonPropTypes } from './propTypes'
+import { a11yProps } from '../utils/props/a11yProps'
+import { clickProps } from '../utils/props/clickProps'
+import { focusHandlerProps } from '../utils/props/handlerProps'
 import {
-  a11yProps,
-  clickProps,
-  focusHandlerProps,
   getCursorStyle,
-  linkProps,
   resolvePressableState,
-  resolvePressableTokens,
-  selectSystemProps,
-  viewProps,
-  wrapStringsInText,
-  withLinkRouter,
-  contentfulProps,
-  createMediaQueryStyles,
-  StyleSheet as StyleSheetUtils
-} from '../utils'
-import { IconText } from '../Icon'
+  resolvePressableTokens
+} from '../utils/pressability'
+import { linkProps } from '../utils/props/linkProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { viewProps } from '../utils/props/viewProps'
+import { wrapStringsInText } from '../utils/children'
+import { withLinkRouter } from '../utils/withLinkRouter'
+import { contentfulProps } from '../utils/props/contentfulProps'
+import { createMediaQueryStyles } from '../utils/ssr-media-query/utils/create-media-query-styles'
+import { StyleSheet as StyleSheetUtils } from '../utils/ssr-media-query/ssr-media-query'
+import { IconText } from '../Icon/IconText'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
@@ -210,7 +211,7 @@ const selectItemIconTokens = ({ color, iconColor, iconSize }) => ({
   color: iconColor || color
 })
 
-const ButtonBase = React.forwardRef(
+const ButtonBaseInner = React.forwardRef(
   (
     {
       id,
@@ -384,9 +385,9 @@ const ButtonBase = React.forwardRef(
     )
   }
 )
-ButtonBase.displayName = 'ButtonBase'
+ButtonBaseInner.displayName = 'ButtonBase'
 
-ButtonBase.propTypes = {
+ButtonBaseInner.propTypes = {
   id: PropTypes.string,
   ...selectedSystemPropTypes,
   ...buttonPropTypes
@@ -414,4 +415,4 @@ const staticStyles = StyleSheet.create({
   }
 })
 
-export default withLinkRouter(ButtonBase)
+export const ButtonBase = withLinkRouter(ButtonBaseInner)

package/src/Button/ButtonDropdown.jsx

@@ -1,19 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, StyleSheet, Text, View } from 'react-native'
-import buttonPropTypes, { textAndA11yText } from './propTypes'
-import ButtonBase from './ButtonBase'
-import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
-import {
-  a11yProps,
-  getTokensPropType,
-  focusHandlerProps,
-  resolvePressableState,
-  selectTokens,
-  useInputValue
-} from '../utils'
-import Icon from '../Icon'
-import { getPressHandlersWithArgs } from '../utils/pressability'
+import { buttonPropTypes, textAndA11yText } from './propTypes'
+import { ButtonBase } from './ButtonBase'
+import { applyTextStyles } from '../ThemeProvider/utils/styles'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { getTokensPropType, selectTokens } from '../utils/props/tokens'
+import { focusHandlerProps } from '../utils/props/handlerProps'
+import { resolvePressableState, getPressHandlersWithArgs } from '../utils/pressability'
+import { useInputValue } from '../utils/input'
+import { Icon } from '../Icon/Icon'
 
 const FULL_WIDTH_STYLE = 'full'
 
@@ -90,7 +87,7 @@ const selectStackedContentStyles = (tokens, iconPosition, isFullWidth) => ({
   ...(isFullWidth && { justifyContent: 'space-between', flex: 1 })
 })
 
-const ButtonDropdown = React.forwardRef(
+export const ButtonDropdown = React.forwardRef(
   (
     {
       value,
@@ -274,5 +271,3 @@ const staticStyles = StyleSheet.create({
     alignItems: 'center'
   }
 })
-
-export default ButtonDropdown

package/src/Button/ButtonGroup.jsx

@@ -1,24 +1,21 @@
 import React, { useCallback, useMemo } from 'react'
 import PropTypes from 'prop-types'
-import ABBPropTypes from 'airbnb-prop-types'
 import { Platform, View, StyleSheet } from 'react-native'
 
-import ButtonBase from './ButtonBase'
-import Fieldset from '../Fieldset'
-import { useViewport } from '../ViewportProvider'
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
-import {
-  useSpacingScale,
-  a11yProps,
-  containUniqueFields,
-  focusHandlerProps,
-  pressProps,
-  getTokensPropType,
-  selectSystemProps,
-  useMultipleInputValues,
-  variantProp,
-  viewProps
-} from '../utils'
+import { ButtonBase } from './ButtonBase'
+import { Fieldset } from '../Fieldset/Fieldset'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { useSpacingScale } from '../utils/useSpacingScale'
+import { a11yProps } from '../utils/props/a11yProps'
+import { containUniqueFields } from '../utils/containUniqueFields'
+import { focusHandlerProps } from '../utils/props/handlerProps'
+import { pressProps } from '../utils/props/pressProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useMultipleInputValues } from '../utils/input'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
 import { getPressHandlersWithArgs } from '../utils/pressability'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -29,7 +26,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
   viewProps
 ])
 
-const ButtonGroup = React.forwardRef(
+export const ButtonGroup = React.forwardRef(
   (
     {
       variant,
@@ -255,7 +252,7 @@ ButtonGroup.propTypes = {
       /**
        * An optional ref for one individual button in the ButtonGroup
        */
-      ref: ABBPropTypes.ref(),
+      ref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
       /**
        * If true, this individual button cannot be interacted with. Takes precedence
        * over the group-level `inactive` prop. Useful for disabling specific options.
@@ -335,6 +332,7 @@ const staticStyles = StyleSheet.create({
   },
   viewBase: {
     flexWrap: 'wrap',
+    alignContent: 'stretch',
     alignItems: 'center'
   },
   equalWidth: {
@@ -342,5 +340,3 @@ const staticStyles = StyleSheet.create({
     flex: 1
   }
 })
-
-export default ButtonGroup

package/src/Button/ButtonLink.jsx

@@ -1,16 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import ButtonBase from './ButtonBase'
-import buttonPropTypes, { textAndA11yText } from './propTypes'
-import { a11yProps, hrefAttrsProp, linkProps, contentfulProps } from '../utils/props'
-import { useThemeTokensCallback } from '../ThemeProvider'
-import { useViewport } from '../ViewportProvider'
+import { ButtonBase } from './ButtonBase'
+import { buttonPropTypes, textAndA11yText } from './propTypes'
+import { a11yProps } from '../utils/props/a11yProps'
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp'
+import { linkProps } from '../utils/props/linkProps'
+import { contentfulProps } from '../utils/props/contentfulProps'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { useViewport } from '../ViewportProvider/useViewport'
 
 /**
  * `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 = React.forwardRef(
+export const ButtonLink = React.forwardRef(
   ({ accessibilityRole = 'link', tokens, variant, dataSet, ...props }, ref) => {
     const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
     const viewport = useViewport()
@@ -40,5 +43,3 @@ ButtonLink.propTypes = {
   dataSet: PropTypes.object,
   accessibilityRole: PropTypes.string
 }
-
-export default ButtonLink

package/src/Button/propTypes.js

@@ -1,14 +1,12 @@
 import PropTypes from 'prop-types'
-import ABBPropTypes from 'airbnb-prop-types'
-import { variantProp, getTokensPropType } from '../utils/props'
-import A11yText from '../A11yText'
-import { iconComponentPropTypes } from '../Icon'
+import { variantProp } from '../utils/props/variantProp'
+import { getTokensPropType } from '../utils/props/tokens'
+import { iconComponentPropTypes } from '../Icon/Icon'
 
-export const textAndA11yText = ABBPropTypes.childrenOf(
-  PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string])
-)
+// Validates children are renderable content (strings, elements, etc.)
+export const textAndA11yText = PropTypes.node
 
-const buttonPropTypes = {
+export const buttonPropTypes = {
   tokens: getTokensPropType('Button'),
   /**
    * If true, the button will honor the align-items value from its parent flex container.
@@ -53,4 +51,3 @@ const buttonPropTypes = {
   icon: PropTypes.func,
   variant: variantProp.propType
 }
-export default buttonPropTypes

package/src/Card/Card.jsx

@@ -1,26 +1,24 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
-import {
-  useThemeTokens,
-  useThemeTokensCallback,
-  useResponsiveThemeTokens,
-  useTheme
-} from '../ThemeProvider'
-import { getTokensPropType, variantProp, StyleSheet, createMediaQueryStyles } from '../utils'
-import { useViewport } from '../ViewportProvider'
-import {
-  a11yProps,
-  linkProps,
-  selectSystemProps,
-  viewProps,
-  responsiveProps,
-  hrefAttrsProp
-} from '../utils/props'
-import CardBase, { selectStyles } from './CardBase'
-import PressableCardBase from './PressableCardBase'
-import CheckboxButton from '../Checkbox/CheckboxButton'
-import RadioButton from '../Radio/RadioButton'
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { useResponsiveThemeTokens } from '../ThemeProvider/useResponsiveThemeTokens'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { getTokensPropType } from '../utils/props/tokens'
+import { variantProp } from '../utils/props/variantProp'
+import { StyleSheet } from '../utils/ssr-media-query/ssr-media-query'
+import { createMediaQueryStyles } from '../utils/ssr-media-query/utils/create-media-query-styles'
+import { a11yProps } from '../utils/props/a11yProps'
+import { linkProps } from '../utils/props/linkProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { viewProps } from '../utils/props/viewProps'
+import { responsiveProps } from '../utils/props/responsiveProps'
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp'
+import { CardBase, selectStyles } from './CardBase'
+import { PressableCardBase } from './PressableCardBase'
+import { CheckboxButton } from '../Checkbox/CheckboxButton'
+import { RadioButton } from '../Radio/RadioButton'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps, linkProps])
 
@@ -30,6 +28,12 @@ const SelectionType = {
   None: undefined
 }
 
+const getAccessibilityRole = (selectionType, href) => {
+  if (selectionType === SelectionType.Checkbox) return 'checkbox'
+  if (selectionType === SelectionType.Radio) return 'radio'
+  return href ? 'link' : 'button'
+}
+
 const selectInputStyle = ({ paddingTop, paddingRight, paddingLeft }, { inputPositionProp }) => ({
   position: 'absolute',
   top: paddingTop,
@@ -63,10 +67,10 @@ const getInputProps = ({
  *
  * ## Component API
  *
- * ### Background
+ * ### Style
  *
- * In order to control the background of a card, the following tokens are currently
- * supported:
+ * In order to control the style of a card, use the `style` variant.
+ * The following tokens are supported:
  *
  * - `backgroundColor`
  *
@@ -106,7 +110,7 @@ const getInputProps = ({
  * you automatically make inaccessible its children, which may or may not be appropriate
  * depending on what you are trying to achieve.
  */
-const Card = React.forwardRef(
+export const Card = React.forwardRef(
   (
     {
       children,
@@ -272,6 +276,8 @@ const Card = React.forwardRef(
               onPress={onPress}
               href={interactiveCard?.href}
               hrefAttrs={interactiveCard?.hrefAttrs}
+              // eslint-disable-next-line react-native-a11y/has-valid-accessibility-role -- getAccessibilityRole returns only valid values ('checkbox', 'radio', 'link', 'button') but linter cannot statically verify function calls
+              accessibilityRole={getAccessibilityRole(selectionType, interactiveCard?.href)}
               {...selectProps(rest)}
             >
               {(cardState) => {
@@ -389,5 +395,3 @@ Card.propTypes = {
    */
   testID: PropTypes.string
 }
-
-export default Card

package/src/Card/CardBase.jsx

@@ -2,13 +2,18 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { View, Platform, ImageBackground, Image, StyleSheet } from 'react-native'
 
-import { applyShadowToken } from '../ThemeProvider'
-import { getTokensPropType, responsiveProps, useResponsiveProp, formatImageSource } from '../utils'
-import { a11yProps, viewProps, selectSystemProps } from '../utils/props'
-import backgroundImageStylesMap from './backgroundImageStylesMap'
-import FlexGrid from '../FlexGrid/FlexGrid'
-import FlexGridRow from '../FlexGrid/Row'
-import FlexGridCol from '../FlexGrid/Col'
+import { applyShadowToken } from '../ThemeProvider/utils/styles'
+import { getTokensPropType } from '../utils/props/tokens'
+import { responsiveProps } from '../utils/props/responsiveProps'
+import { useResponsiveProp } from '../utils/useResponsiveProp'
+import { formatImageSource } from '../utils/formatImageSource'
+import { a11yProps } from '../utils/props/a11yProps'
+import { viewProps } from '../utils/props/viewProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { backgroundImageStylesMap } from './backgroundImageStylesMap'
+import { FlexGrid } from '../FlexGrid/FlexGrid'
+import { FlexGridRow } from '../FlexGrid/FlexGridRow/FlexGridRow'
+import { FlexGridCol } from '../FlexGrid/FlexGridCol/FlexGridCol'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -243,7 +248,7 @@ export const selectStyles = ({
  * A themeless base component for Card which components can apply theme tokens to. Not
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
-const CardBase = React.forwardRef(
+export const CardBase = React.forwardRef(
   ({ children, tokens, dataSet, backgroundImage, fullBleedContent, cardState, ...rest }, ref) => {
     const resolvedTokens = typeof tokens === 'function' ? tokens(cardState) : tokens
     const tokensToUse =
@@ -454,5 +459,3 @@ CardBase.propTypes = {
   }),
   fullBleedContent: fullBleedContentPropTypes
 }
-
-export default CardBase

package/src/Card/PressableCardBase.jsx

@@ -1,23 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, Platform, View, StyleSheet } from 'react-native'
-import { useViewport } from '../ViewportProvider'
-import { applyOuterBorder, validateThemeTokens } from '../ThemeProvider'
-import {
-  a11yProps,
-  clickProps,
-  focusHandlerProps,
-  getTokensSetPropType,
-  linkProps,
-  resolvePressableState,
-  resolvePressableTokens,
-  selectSystemProps,
-  selectTokens,
-  variantProp,
-  viewProps,
-  withLinkRouter
-} from '../utils'
-import CardBase, { fullBleedContentPropTypes } from './CardBase'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { applyOuterBorder } from '../ThemeProvider/utils/styles'
+import { validateThemeTokens } from '../ThemeProvider/utils/theme-tokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { clickProps } from '../utils/props/clickProps'
+import { focusHandlerProps } from '../utils/props/handlerProps'
+import { getTokensSetPropType, selectTokens } from '../utils/props/tokens'
+import { linkProps } from '../utils/props/linkProps'
+import { resolvePressableState, resolvePressableTokens } from '../utils/pressability'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { withLinkRouter } from '../utils/withLinkRouter'
+import { CardBase, fullBleedContentPropTypes } from './CardBase'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
@@ -137,7 +134,7 @@ export const selectPressableCardTokens = (tokens) =>
  * based on these to an outer border and a base Card component. Not intended to be used in
  * apps or sites directly: build themed components on top of this.
  */
-const PressableCardBase = React.forwardRef(
+const PressableCardBaseInner = React.forwardRef(
   (
     {
       children,
@@ -227,7 +224,14 @@ const PressableCardBase = React.forwardRef(
         marginLeft,
         marginRight,
         ...applyOuterBorder({ outerBorderColor, outerBorderGap, outerBorderWidth, borderRadius }),
-        ...Platform.select({ web: { outline: 'none' } })
+        ...Platform.select({
+          web: {
+            outlineStyle: 'none',
+            // Reset default <button> centering behavior when react-native-web renders Pressable as a button
+            alignItems: 'stretch',
+            textAlign: 'inherit'
+          }
+        })
       }
     }
 
@@ -335,7 +339,7 @@ const staticStyles = StyleSheet.create({
     position: 'relative'
   },
   webOutlineNone: {
-    outline: 'none'
+    outlineStyle: 'none'
   },
   focusBorder: {
     position: 'absolute',
@@ -347,9 +351,9 @@ const staticStyles = StyleSheet.create({
   }
 })
 
-PressableCardBase.displayName = 'PressableCardBase'
+PressableCardBaseInner.displayName = 'PressableCardBase'
 
-PressableCardBase.propTypes = {
+PressableCardBaseInner.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   tokens: getTokensSetPropType(tokenKeys, { partial: true, allowFunction: true }),
@@ -375,4 +379,4 @@ PressableCardBase.propTypes = {
   fullBleedContent: fullBleedContentPropTypes
 }
 
-export default withLinkRouter(PressableCardBase)
+export const PressableCardBase = withLinkRouter(PressableCardBaseInner)

package/src/Card/backgroundImageStylesMap.js

@@ -38,4 +38,4 @@ const nativeStyles = {
   'bottom-stretch': { bottom: 0, left: 0, right: 0, width: '100%' }
 }
 
-export default Platform.OS === 'web' ? webStyles : nativeStyles
+export const backgroundImageStylesMap = Platform.OS === 'web' ? webStyles : nativeStyles

package/src/CardGroup/CardGroup.jsx

@@ -1,24 +1,22 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {
-  a11yProps,
-  focusHandlerProps,
-  containUniqueFields,
-  selectSystemProps,
-  useMultipleInputValues,
-  useInputValue,
-  useCopy,
-  viewProps,
-  variantProp,
-  getTokensPropType,
-  copyPropTypes
-} from '../utils'
-import defaultDictionary from './dictionary'
-import { useViewport } from '../ViewportProvider'
-import { useThemeTokens } from '../ThemeProvider'
-import StackView, { StackWrap } from '../StackView'
-import Card from '../Card'
-import Fieldset from '../Fieldset'
+import { a11yProps } from '../utils/props/a11yProps'
+import { focusHandlerProps } from '../utils/props/handlerProps'
+import { containUniqueFields } from '../utils/containUniqueFields'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useMultipleInputValues, useInputValue } from '../utils/input'
+import { useCopy } from '../utils/useCopy'
+import { viewProps } from '../utils/props/viewProps'
+import { variantProp } from '../utils/props/variantProp'
+import { getTokensPropType } from '../utils/props/tokens'
+import { copyPropTypes } from '../utils/props/copyPropTypes'
+import { dictionary as defaultDictionary } from './dictionary'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { StackView } from '../StackView/StackView'
+import { StackWrap } from '../StackView/StackWrap'
+import { Card } from '../Card/Card'
+import { Fieldset } from '../Fieldset/Fieldset'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
@@ -28,7 +26,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
 ])
 const uniqueFields = ['id']
 
-const CardGroup = React.forwardRef(
+export const CardGroup = React.forwardRef(
   (
     {
       copy = 'en',
@@ -245,5 +243,3 @@ CardGroup.propTypes = {
    */
   name: PropTypes.string
 }
-
-export default CardGroup

package/src/CardGroup/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     prefixId: 'Card'
   },