@telus-uds/components-base 1.7.1 → 1.8.2

package/src/InputLabel/InputLabel.jsx

@@ -38,7 +38,18 @@ const selectGapStyles = ({ gap }) => ({ marginRight: gap })
 
 const InputLabel = forwardRef(
   (
-    { label, forId, hint, hintPosition = 'inline', hintId, tooltip, tokens, variant, ...rest },
+    {
+      copy = 'en',
+      label,
+      forId,
+      hint,
+      hintPosition = 'inline',
+      hintId,
+      tooltip,
+      tokens,
+      variant,
+      ...rest
+    },
     ref
   ) => {
     const themeTokens = useThemeTokens('InputLabel', tokens, variant)
@@ -77,7 +88,7 @@ const InputLabel = forwardRef(
                 { height: themeTokens.fontSize * themeTokens.lineHeight }
               ]}
             >
-              <Tooltip content={tooltip} />
+              <Tooltip content={tooltip} copy={copy} />
             </View>
           )}
         </View>
@@ -94,6 +105,10 @@ InputLabel.displayName = 'InputLabel'
 
 InputLabel.propTypes = {
   ...selectedSystemPropTypes,
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
   /**
    * The input label.
    */

package/src/InputSupports/InputSupports.jsx

@@ -8,7 +8,10 @@ import { useThemeTokens } from '../ThemeProvider'
 import useInputSupports from './useInputSupports'
 
 const InputSupports = forwardRef(
-  ({ children, label, hint, hintPosition = 'inline', feedback, tooltip, validation }, ref) => {
+  (
+    { children, copy = 'en', label, hint, hintPosition = 'inline', feedback, tooltip, validation },
+    ref
+  ) => {
     const { space } = useThemeTokens('InputSupports')
 
     const { inputId, hintId, feedbackId, a11yProps } = useInputSupports({
@@ -22,6 +25,7 @@ const InputSupports = forwardRef(
       <StackView space={space} ref={ref}>
         {label && (
           <InputLabel
+            copy={copy}
             label={label}
             hint={hint}
             hintPosition={hintPosition}
@@ -40,6 +44,10 @@ InputSupports.displayName = 'InputSupports'
 
 InputSupports.propTypes = {
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
   /**
    * The input label.
    */

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/Pagination/Pagination.jsx

@@ -139,6 +139,9 @@ const Pagination = forwardRef(
     )
   }
 )
+
+Pagination.displayName = 'Pagination'
+
 PageButton.displayName = 'PageButton'
 
 Pagination.PageButton = PageButton

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

@@ -68,6 +68,7 @@ const Search = forwardRef(
       onChange,
       onSubmit,
       onClear,
+      onFocus,
       accessibilityLabel,
       copy = 'en',
       tokens,
@@ -112,6 +113,10 @@ const Search = forwardRef(
       if (onClear !== undefined) onClear('', event)
     }
 
+    const handleFocus = (event) => {
+      if (onFocus !== undefined) onFocus(event)
+    }
+
     const isEmpty = currentValue === ''
 
     // Accessibility label should always be present and correctly localised
@@ -140,6 +145,7 @@ const Search = forwardRef(
           value={currentValue}
           onChange={setValue}
           onSubmitEditing={handleSubmit}
+          onFocus={handleFocus}
           accessibilityLabel={a11yLabelText}
         />
         <View style={[staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)]}>
@@ -214,11 +220,16 @@ Search.propTypes = {
    */
   onClear: PropTypes.func,
   /**
+   * Triggered when the search input is focused.
+   */
+  onFocus: PropTypes.func,
+  /**
+   *
    * Use to provide an accessible label for the input (visually hidden).
    */
   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/Select/Item.native.jsx

@@ -1,10 +1,3 @@
-import PropTypes from 'prop-types'
-
 const Item = () => null
 
 export default Item
-
-Item.propTypes = {
-  children: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired
-}

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/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/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

package/src/utils/props/inputSupportsProps.js

@@ -2,6 +2,10 @@ import PropTypes from 'prop-types'
 
 export default {
   types: {
+    /**
+     * Whether the English or French copy will be used (e.g. for accessibility labels).
+     */
+    copy: PropTypes.oneOf(['en', 'fr']),
     /**
      * The input label.
      */
@@ -28,8 +32,9 @@ export default {
      */
     validation: PropTypes.oneOf(['error', 'success'])
   },
-  select: ({ label, hint, hintPosition, feedback, tooltip, validation }) => ({
+  select: ({ copy, label, hint, hintPosition, feedback, tooltip, validation }) => ({
     supportsProps: {
+      copy,
       label,
       hint,
       hintPosition,

package/src/utils/props/tokens.js

@@ -86,33 +86,35 @@ export const selectTokens = (specifier, tokens, prefix) => {
  *   tokens: getTokensPropType('Component1', 'Component2')
  * }
  */
-export const getTokensPropType = (...componentsNames) => (props, propName, componentName) => {
-  PropTypes.checkPropTypes(
-    {
-      [propName]: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
-    },
-    props,
-    propName,
-    componentName
-  )
-
-  if (typeof props[propName] !== 'function') {
+export const getTokensPropType =
+  (...componentsNames) =>
+  (props, propName, componentName) => {
     PropTypes.checkPropTypes(
       {
-        [propName]: PropTypes.exact(
-          Object.fromEntries(
-            componentsNames.flatMap((component) =>
-              getTokenNames(component).map((key) => [key, tokenValueType])
-            )
-          )
-        )
+        [propName]: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
       },
       props,
       propName,
       componentName
     )
+
+    if (typeof props[propName] !== 'function') {
+      PropTypes.checkPropTypes(
+        {
+          [propName]: PropTypes.exact(
+            Object.fromEntries(
+              componentsNames.flatMap((component) =>
+                getTokenNames(component).map((key) => [key, tokenValueType])
+              )
+            )
+          )
+        },
+        props,
+        propName,
+        componentName
+      )
+    }
   }
-}
 
 /**
  * Get a proptypes validator for a set of tokens that is not based on a component in the theme schema.

package/.storybook/main.js

@@ -1,4 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.@(js|jsx)'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y']
-}

package/.storybook/preview.js

@@ -1,37 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import '@telus-uds/palette-allium/build/rn/fonts/fonts.css'
-import '@telus-uds/palette-koodo/build/rn/fonts/fonts.css'
-import '@telus-uds/palette-public-mobile/build/rn/fonts/fonts.css'
-
-import alliumTheme from '@telus-uds/theme-allium'
-import koodoTheme from '@telus-uds/theme-koodo'
-import pmTheme from '@telus-uds/theme-public-mobile'
-/* eslint-enable import/no-extraneous-dependencies */
-
-import testTheme from '../__fixtures__/testTheme'
-
-import { BaseProvider } from '../src'
-
-const themes = [alliumTheme, koodoTheme, pmTheme, testTheme]
-const themeLookup = themes.reduce((memo, t) => ({ ...memo, [t.metadata.name]: t }), {})
-
-const baseDecorator = (Story, { globals }) => (
-  <BaseProvider key={globals.theme} defaultTheme={themeLookup[globals.theme]}>
-    <Story />
-  </BaseProvider>
-)
-
-export const decorators = [baseDecorator]
-
-// globals persist in browser session store - not fun if you have multiple branded storybooks on the same domain/port
-export const globalTypes = {
-  theme: {
-    name: 'Theme',
-    description: 'UDS theme for components',
-    defaultValue: alliumTheme.metadata.name,
-    toolbar: {
-      icon: 'beaker',
-      items: Object.keys(themeLookup)
-    }
-  }
-}

package/.turbo/turbo-build.log

@@ -1,8 +0,0 @@
-@telus-uds/components-base:build: cache hit, replaying output 2723a575209dd005
-@telus-uds/components-base:build: $ yarn build:code && yarn build:docs
-@telus-uds/components-base:build: $ yarn build:main && yarn build:module
-@telus-uds/components-base:build: $ babel src -d lib
-@telus-uds/components-base:build: Successfully compiled 219 files with Babel (5370ms).
-@telus-uds/components-base:build: $ babel src -d lib-module --env-name module
-@telus-uds/components-base:build: Successfully compiled 219 files with Babel (3473ms).
-@telus-uds/components-base:build: $ babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js

package/.turbo/turbo-lint.log

@@ -1,13 +0,0 @@
-@telus-uds/components-base:lint: cache hit, replaying output 89b2f7c5fe1ddf01
-@telus-uds/components-base:lint: $ yarn --cwd ../.. lint:path --color packages/components-base
-@telus-uds/components-base:lint: $ eslint --ignore-path .gitignore --ext .js,.jsx,.mjs,.cjs --color packages/components-base
-@telus-uds/components-base:lint: 
-@telus-uds/components-base:lint: /home/runner/work/universal-design-system/universal-design-system/packages/components-base/__tests__/FlexGrid/Col.test.jsx
-@telus-uds/components-base:lint:    51:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
-@telus-uds/components-base:lint:   106:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
-@telus-uds/components-base:lint:   155:63  warning  Expect must have a corresponding matcher call  jest/valid-expect
-@telus-uds/components-base:lint:   200:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
-@telus-uds/components-base:lint:   248:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
-@telus-uds/components-base:lint: 
-@telus-uds/components-base:lint: ✖ 5 problems (0 errors, 5 warnings)
-@telus-uds/components-base:lint: