@telus-uds/components-base 1.6.1 → 1.8.0

package/src/List/ListItem.jsx

@@ -22,8 +22,7 @@ const selectBulletStyles = ({ itemBulletWidth, itemBulletHeight, itemBulletColor
 
 const selectBulletContainerStyles = ({ itemBulletContainerWidth, itemBulletContainerAlign }) => ({
   width: itemBulletContainerWidth,
-  alignItems: itemBulletContainerAlign,
-  justifyContent: itemBulletContainerAlign
+  alignItems: itemBulletContainerAlign
 })
 
 const selectItemIconTokens = ({ itemIconSize, itemIconColor }) => ({
@@ -31,12 +30,15 @@ const selectItemIconTokens = ({ itemIconSize, itemIconColor }) => ({
   color: itemIconColor
 })
 
-const selectCommonIconStyles = ({ iconMarginTop }) => ({
-  marginTop: iconMarginTop
+const selectSideItemContainerStyles = ({ listGutter, iconMarginTop }) => ({
+  marginTop: iconMarginTop,
+  marginRight: listGutter
 })
 
-const selectSideItemContainerStyles = ({ listGutter }) => ({
-  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 }) =>
@@ -73,8 +75,8 @@ const ListItem = forwardRef(
     const dividerStyles = selectDividerStyles(themeTokens)
     const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens)
     const itemBulletStyles = selectBulletStyles(themeTokens)
+    const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens)
     const iconTokens = selectItemIconTokens(themeTokens)
-    const commonIconStyles = selectCommonIconStyles(themeTokens)
     const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
     const accessibilityRole = Platform.select({ web: 'listitem', default: 'item' })
 
@@ -109,7 +111,7 @@ const ListItem = forwardRef(
 
       if (icon) {
         return (
-          <View style={[sideItemContainerStyles, commonIconStyles]}>
+          <View style={sideItemContainerStyles}>
             <IconComponent
               size={iconSize || iconTokens.size}
               color={iconColor || iconTokens.color}
@@ -120,7 +122,9 @@ const ListItem = forwardRef(
 
       return (
         <View style={[sideItemContainerStyles, itemBulletContainerStyles]}>
-          <View style={itemBulletStyles} testID="unordered-item-bullet" />
+          <View style={[staticStyles.bulletPositioning, itemBulletPositioningStyles]}>
+            <View style={itemBulletStyles} testID="unordered-item-bullet" />
+          </View>
         </View>
       )
     }
@@ -146,6 +150,10 @@ const staticStyles = StyleSheet.create({
   },
   wrap: {
     flex: 1
+  },
+  bulletPositioning: {
+    alignItems: 'center',
+    justifyContent: 'center'
   }
 })
 

package/src/Notification/Notification.jsx

@@ -159,7 +159,7 @@ Notification.propTypes = {
    */
   dismissible: PropTypes.bool,
   /**
-   * Select english or french copy for the accessible label of the dismiss button.
+   * Select English or French copy for the accessible label of the dismiss button.
    */
   copy: PropTypes.oneOfType([
     PropTypes.oneOf(['en', 'fr']),

package/src/Radio/Radio.jsx

@@ -121,7 +121,11 @@ const Radio = forwardRef(
     },
     ref
   ) => {
-    const { currentValue: isChecked, setValue: setIsChecked, isControlled } = useInputValue(
+    const {
+      currentValue: isChecked,
+      setValue: setIsChecked,
+      isControlled
+    } = useInputValue(
       {
         value: checked,
         initialValue: defaultChecked,

package/src/Radio/RadioGroup.jsx

@@ -44,7 +44,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
  * ### Uncontrolled version
  *
  * If the RadioGroup manages its own state, you can use `initialCheckedId` prop to provide the initial value.
- * Whenever the radio card gets toggled, it calls the `onChange` callback with the new value (string).
+ * Whenever the radio gets toggled, it calls the `onChange` callback with the new value (string).
  *
  * ### Use in forms
  *
@@ -76,6 +76,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
 const RadioGroup = forwardRef(
   (
     {
+      copy = 'en',
       tokens,
       radioTokens,
       variant,
@@ -142,6 +143,7 @@ const RadioGroup = forwardRef(
 
     return (
       <Fieldset
+        copy={copy}
         ref={ref}
         name={inputGroupName}
         legend={legend}
@@ -163,6 +165,10 @@ RadioGroup.displayName = 'RadioGroup'
 
 RadioGroup.propTypes = {
   ...selectedSystemPropTypes,
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
   /**
    * Optional theme token overrides for the outer RadioGroup component
    */
@@ -208,11 +214,11 @@ RadioGroup.propTypes = {
    */
   feedback: PropTypes.string,
   /**
-   * If provided, the radio card with this id is selected on first render.
+   * If provided, the radio with this id is selected on first render.
    */
   initialCheckedId: PropTypes.string,
   /**
-   * If not undefined, the radio card with this id is selected (or none is selected if `null`), and the
+   * If not undefined, the radio with this id is selected (or none is selected if `null`), and the
    * element's selection state will be controlled by its parent using the `onChange` function.
    */
   checkedId: PropTypes.string,
@@ -222,11 +228,11 @@ RadioGroup.propTypes = {
    */
   onChange: PropTypes.func,
   /**
-   * If true, the radio cards cannot be selected by the user and simply show their current state.
+   * If true, the radios cannot be selected by the user and simply show their current state.
    */
   readOnly: PropTypes.bool,
   /**
-   * If true, the radio card cannot be interacted with, elements are set as `disabled` and if the
+   * If true, the radios cannot be interacted with, elements are set as `disabled` and if the
    * theme supports `inactive` appearances rules, these are applied.
    */
   inactive: PropTypes.bool,

package/src/RadioCard/RadioCard.jsx

@@ -77,7 +77,11 @@ const RadioCard = forwardRef(
     },
     ref
   ) => {
-    const { currentValue: isChecked, setValue: setIsChecked, isControlled } = useInputValue({
+    const {
+      currentValue: isChecked,
+      setValue: setIsChecked,
+      isControlled
+    } = useInputValue({
       value: checked,
       initialValue: defaultChecked,
       onChange

package/src/RadioCard/RadioCardGroup.jsx

@@ -77,6 +77,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
 const RadioCardGroup = forwardRef(
   (
     {
+      copy = 'en',
       tokens,
       radioCardTokens,
       variant,
@@ -120,6 +121,7 @@ const RadioCardGroup = forwardRef(
 
     return (
       <Fieldset
+        copy={copy}
         ref={ref}
         name={inputGroupName}
         legend={legend}
@@ -170,6 +172,10 @@ RadioCardGroup.displayName = 'RadioCardGroup'
 
 RadioCardGroup.propTypes = {
   ...selectedSystemPropTypes,
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
   /**
    * Optional theme token overrides for the outer RadioCardGroup component
    */

package/src/Search/Search.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React, { forwardRef } from 'react'
 import { View, StyleSheet } from 'react-native'
 
 import PropTypes from 'prop-types'
@@ -8,7 +8,10 @@ import {
   getTokensPropType,
   selectSystemProps,
   selectTokens,
+  useInputValue,
   useSpacingScale,
+  textInputHandlerProps,
+  textInputProps,
   variantProp,
   viewProps
 } from '../utils'
@@ -18,7 +21,11 @@ import StackView from '../StackView'
 import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectInputProps, selectedInputPropTypes] = selectSystemProps([
+  textInputHandlerProps,
+  textInputProps
+])
 
 const selectInputTokens = ({ searchTokens, buttonTokens, buttonsGapSize }) => {
   const { paddingRight: inputPaddingRight, clearButtonIcon, submitButtonIcon } = searchTokens
@@ -54,8 +61,9 @@ const selectIconTokens = ({ iconSize, iconColor }) => ({ color: iconColor, size:
 const Search = forwardRef(
   (
     {
-      initialValue = '',
-      placeholder = 'Search',
+      initialValue,
+      value,
+      placeholder,
       inactive,
       onChange,
       onSubmit,
@@ -68,7 +76,12 @@ const Search = forwardRef(
     },
     ref
   ) => {
-    const [value, setValue] = useState(initialValue)
+    const { currentValue = '', setValue } = useInputValue({
+      value,
+      initialValue,
+      onChange
+    })
+
     const themeTokens = useThemeTokens('Search', tokens, variant)
     const buttonTokens = useThemeTokens('SearchButton', tokens, variant)
 
@@ -90,28 +103,26 @@ const Search = forwardRef(
 
     const handleSubmit = (event) => {
       if (onSubmit !== undefined) {
-        onSubmit(value, event)
+        onSubmit(currentValue, event)
       }
     }
 
-    const handleChange = (currentValue, event) => {
-      setValue(currentValue, event)
-
-      if (onChange !== undefined) onChange(currentValue, event)
-    }
-
     const handleClear = (event) => {
       setValue('', event)
-
       if (onClear !== undefined) onClear('', event)
-      if (onChange !== undefined) onChange('', event)
     }
 
-    const isEmpty = value === ''
+    const isEmpty = currentValue === ''
+
+    // Accessibility label should always be present and correctly localised
+    const a11yLabelText = accessibilityLabel || getCopy('accessibilityLabel')
+    // Placeholder is optional and may be unset by passing an empty string
+    const placeholderText = placeholder ?? a11yLabelText
 
     return (
-      <View style={staticStyles.container} {...selectProps(rest)}>
+      <View style={staticStyles.container} {...selectContainerProps(rest)}>
         <TextInputBase
+          {...selectInputProps(rest)}
           ref={ref}
           tokens={(appearances) =>
             selectInputTokens({
@@ -121,15 +132,15 @@ const Search = forwardRef(
               isEmpty
             })
           }
-          placeholder={placeholder}
+          placeholder={placeholderText}
           placeholderTextColor={placeholderColor}
           inactive={inactive}
           enablesReturnKeyAutomatically
           returnKeyType="search"
-          value={value}
-          onChange={handleChange}
+          value={currentValue}
+          onChange={setValue}
           onSubmitEditing={handleSubmit}
-          accessibilityLabel={accessibilityLabel || getCopy('accessibilityLabel')}
+          accessibilityLabel={a11yLabelText}
         />
         <View style={[staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)]}>
           <StackView direction="row" space={buttonsGap}>
@@ -172,7 +183,8 @@ const Search = forwardRef(
 Search.displayName = 'Search'
 
 Search.propTypes = {
-  ...selectedSystemPropTypes,
+  ...selectedContainerPropTypes,
+  ...selectedInputPropTypes,
   /**
    * Use this to set the initial value of the search input.
    * Updating `initialValue` will **not** update the actual value.
@@ -206,7 +218,7 @@ Search.propTypes = {
    */
   accessibilityLabel: PropTypes.string,
   /**
-   * Select english or french copy for the accessible labels.
+   * Select English or French copy for the accessible labels.
    * You may also pass in a custom dictionary object.
    */
   copy: PropTypes.oneOfType([

package/src/Skeleton/Skeleton.jsx

@@ -7,7 +7,10 @@ import {
   a11yProps,
   getTokensPropType,
   selectSystemProps,
+  responsiveProps,
+  useResponsiveProp,
   useSpacingScale,
+  spacingProps,
   variantProp,
   viewProps
 } from '../utils'
@@ -37,9 +40,29 @@ const selectSquareStyles = ({ radius }) => ({
 })
 
 const Skeleton = forwardRef(
-  ({ tokens, variant, size, characters, lines, shape = 'line', ...rest }, ref) => {
+  (
+    {
+      tokens,
+      variant,
+      size,
+      sizeIndex = size,
+      sizePixels,
+      characters,
+      lines,
+      shape = 'line',
+      ...rest
+    },
+    ref
+  ) => {
     const themeTokens = useThemeTokens('Skeleton', tokens, variant)
-    const skeletonHeight = useSpacingScale(size || themeTokens.size)
+    const pixels = useResponsiveProp(sizePixels)
+    const spacingScaleValue =
+      typeof pixels === 'number'
+        ? // Size by an exact number of pixels
+          { options: { size: pixels } }
+        : // Size by an index on the spacing scale (getting default index from theme if none provided)
+          sizeIndex || themeTokens.size
+    const skeletonHeight = useSpacingScale(spacingScaleValue)
     const nativeAnimation = useSkeletonNativeAnimation()
 
     const getAnimationBaseOnPlatform = () => {
@@ -97,9 +120,39 @@ Skeleton.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('Skeleton'),
   variant: variantProp.propType,
-  size: propTypes.number,
+  /**
+   * Sets the size of Skeleton lines or shape according to the theme's spacing scale. For example, size={1} gives the smallest non-zero theme-defined spacing size.
+   *
+   * May also accept an object with responsive viewport keys or spacing scale options - see `useSpacingScale` for details.
+   */
+  sizeIndex: spacingProps.types.spacingValue,
+  /**
+   * @deprecated alias for `sizeIndex`
+   */
+  size: spacingProps.types.spacingValue,
+  /**
+   * Sets the size of Skeleton lines or shape to an exact number of pixels. Use when it's necessary to exactly match sizes of images or other boxes.
+   *
+   * Accepts a number or an object with responsive viewport keys, e.g. { xs: 32, lg: 64 } would be 32px at xs, sm and md and 64 at lg and xl viewports.
+   */
+  sizePixels: responsiveProps.getTypeOptionallyByViewport(propTypes.number),
+  /**
+   * Determines the width of simulated lines of text if the Skeleton's shape is 'line' (the default shape).
+   *
+   * Only has any affect if shape is line (the default). If unset, takes a default value from the theme.
+   */
   characters: propTypes.number,
+  /**
+   * Determines how many Skeleton items are rendered (default 1).
+   *
+   * Recommended usage is to simulate paragraphs of text when Skeleton's shape is 'line' (the default shape).
+   *
+   * The amount of spacing between multiple lines is controlled by theme tokens.
+   */
   lines: propTypes.number,
+  /**
+   * Determines if the skeleton should resemble lines of text (default), a circle, or a square box with themed rounded corners.
+   */
   shape: propTypes.oneOf(['line', 'circle', 'box'])
 }
 

package/src/TextInput/TextArea.jsx

@@ -8,6 +8,7 @@ import {
   inputSupportsProps,
   selectSystemProps,
   textInputHandlerProps,
+  textInputProps,
   variantProp,
   viewProps
 } from '../utils'
@@ -21,6 +22,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   focusHandlerProps,
   inputSupportsProps,
   textInputHandlerProps,
+  textInputProps,
   viewProps
 ])
 

package/src/TextInput/TextInput.jsx

@@ -7,6 +7,7 @@ import {
   inputSupportsProps,
   selectSystemProps,
   textInputHandlerProps,
+  textInputProps,
   variantProp,
   viewProps
 } from '../utils'
@@ -19,6 +20,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   focusHandlerProps,
   inputSupportsProps,
   textInputHandlerProps,
+  textInputProps,
   viewProps
 ])
 

package/src/TextInput/TextInputBase.jsx

@@ -8,6 +8,7 @@ import {
   getTokensPropType,
   selectSystemProps,
   textInputHandlerProps,
+  textInputProps,
   useInputValue,
   variantProp,
   viewProps
@@ -16,6 +17,7 @@ import {
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
   textInputHandlerProps,
+  textInputProps,
   viewProps
 ])
 

package/src/ToggleSwitch/ToggleSwitch.jsx

@@ -85,6 +85,7 @@ const selectLabelTokens = ({
 const ToggleSwitch = forwardRef(
   (
     {
+      copy = 'en',
       value,
       initialValue,
       onChange,
@@ -119,6 +120,7 @@ const ToggleSwitch = forwardRef(
         {Boolean(label) && (
           <View style={[selectLabelStyles(themeTokens), staticStyles.containText]}>
             <InputLabel
+              copy={copy}
               forId={inputId}
               label={label}
               tokens={selectLabelTokens(themeTokens)}
@@ -170,6 +172,10 @@ ToggleSwitch.displayName = 'ToggleSwitch'
 
 ToggleSwitch.propTypes = {
   ...selectedSystemPropTypes,
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
   tokens: getTokensPropType('ToggleSwitch'),
   variant: variantProp.propType,
   /**

package/src/ToggleSwitch/ToggleSwitchGroup.jsx

@@ -28,6 +28,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
 const ToggleSwitchGroup = forwardRef(
   (
     {
+      copy = 'en',
       variant,
       tokens,
       items = [],
@@ -105,6 +106,7 @@ const ToggleSwitchGroup = forwardRef(
 
         return (
           <ToggleSwitch
+            copy={copy}
             id={id}
             ref={itemRef}
             key={id}
@@ -143,6 +145,10 @@ ToggleSwitchGroup.displayName = 'ToggleSwitchGroup'
 
 ToggleSwitchGroup.propTypes = {
   ...selectedSystemPropTypes,
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
   tokens: getTokensPropType('ToggleSwitchGroup'),
   variant: variantProp.propType,
   /**

package/src/Tooltip/Tooltip.jsx

@@ -276,7 +276,7 @@ Tooltip.propTypes = {
    */
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /**
-   * Select english or french copy for the accessible label.
+   * Select English or French copy for the accessible label.
    */
   copy: PropTypes.oneOf(['en', 'fr']),
   /**

package/src/Typography/Typography.jsx

@@ -13,6 +13,7 @@ import {
   headingTags,
   selectSystemProps,
   textTags,
+  textProps,
   viewProps,
   getA11yPropsFromHtmlTag
 } from '../utils'
@@ -20,7 +21,8 @@ import {
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectTextProps, selectedTextPropTypes] = selectSystemProps([textProps])
 
 const selectTextStyles = ({
   fontWeight,
@@ -62,23 +64,24 @@ const Typography = forwardRef(
   ) => {
     const viewport = useViewport()
     const themeTokens = useThemeTokens('Typography', tokens, variant, { viewport })
-    const textProps = {
+    const resolvedTextProps = {
+      ...selectTextProps(rest),
       style: selectTextStyles(align ? { ...themeTokens, textAlign: align } : themeTokens),
       dataSet,
       maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
     }
 
-    const selectedProps = selectProps({
+    const containerProps = {
       ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
-      ...rest
-    })
+      ...selectContainerProps(rest)
+    }
 
     return block ? (
-      <View ref={ref} {...selectedProps}>
-        <Text {...textProps}>{children}</Text>
+      <View ref={ref} {...containerProps}>
+        <Text {...resolvedTextProps}>{children}</Text>
       </View>
     ) : (
-      <Text ref={ref} {...textProps} {...selectedProps}>
+      <Text ref={ref} {...containerProps} {...resolvedTextProps}>
         {children}
       </Text>
     )
@@ -87,7 +90,8 @@ const Typography = forwardRef(
 Typography.displayName = 'Typography'
 
 Typography.propTypes = {
-  ...selectedSystemPropTypes,
+  ...selectedContainerPropTypes,
+  ...selectedTextPropTypes,
   tokens: getTokensPropType('Typography'),
   variant: variantProp.propType,
   /**

package/src/index.js

@@ -50,7 +50,10 @@ export {
   useTheme,
   useSetTheme,
   useThemeTokens,
-  getThemeTokens
+  getThemeTokens,
+  applyOuterBorder,
+  applyTextStyles,
+  applyShadowToken
 } from './ThemeProvider'
 
 export * from './utils'

package/src/utils/animation/useVerticalExpandAnimation.js

@@ -1,16 +1,30 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Animated, Easing, Platform } from 'react-native'
 
 // TODO: systematise animations
 // https://github.com/telus/universal-design-system/issues/487
 function useVerticalExpandAnimation({ containerHeight, isExpanded, tokens }) {
+  const [isAnimating, setIsAnimating] = useState(false)
+
   const expandAnimatedValue = useRef(new Animated.Value(0)).current
+  const elementRef = useRef(null)
 
   const { expandDuration, collapseDuration } = tokens
 
+  // Treat as animating from when expanded state changes, until animation completes
+  useEffect(() => setIsAnimating(true), [isExpanded])
+
   useEffect(() => {
+    const onComplete = () => !isExpanded && setIsAnimating(false)
+
     if (Platform.OS === 'web') {
-      return
+      if (!elementRef.current) return () => {}
+
+      // React Native Web does not pass `onTransitionEnd` through, must attach manually.
+      // https://github.com/necolas/react-native-web/pull/1713
+      const element = elementRef.current
+      element.addEventListener('transitionend', onComplete)
+      return () => element.removeEventListener('transitionend', onComplete)
     }
 
     const animationConfig = {
@@ -20,28 +34,27 @@ function useVerticalExpandAnimation({ containerHeight, isExpanded, tokens }) {
       useNativeDriver: false
     }
 
-    Animated.timing(expandAnimatedValue, animationConfig).start()
+    const animation = Animated.timing(expandAnimatedValue, animationConfig)
+    animation.start(onComplete)
+    return () => animation.stop()
   }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration])
 
-  let containerStyles
+  // Without `visibility: 'hidden', descendents are focusable on web even when collapsed
+  const containerStyles = !isExpanded && !isAnimating ? { visibility: 'hidden' } : {}
 
   // don't visually collapse the container until we have it measured
   if (containerHeight !== null) {
     if (Platform.OS === 'web') {
       const transitionDuration = isExpanded ? expandDuration : collapseDuration
+      containerStyles.transition = `height ${transitionDuration}ms ease-in-out`
 
-      containerStyles = {
-        transition: `height ${transitionDuration}ms ease-in-out`,
-        height: isExpanded ? containerHeight : 0
-      }
+      containerStyles.height = isExpanded ? containerHeight : 0
     } else {
-      containerStyles = {
-        height: expandAnimatedValue
-      }
+      containerStyles.height = expandAnimatedValue
     }
   }
 
-  return containerStyles
+  return [containerStyles, elementRef]
 }
 
 export default useVerticalExpandAnimation