@telus-uds/components-web 2.33.2 → 2.34.1

package/src/QuantitySelector/QuantitySelector.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import {
   Box,
@@ -8,8 +8,12 @@ import {
   InputLabel,
   useInputValue,
   useCopy,
-  useThemeTokensCallback
+  useThemeTokensCallback,
+  getTokensPropType,
+  selectSystemProps,
+  a11yProps
 } from '@telus-uds/components-base'
+import { htmlAttrs } from '../utils'
 
 import { InputField, InputWrapper } from './styles'
 import defaultDictionary from './dictionary'
@@ -21,159 +25,169 @@ const isNumber = (value) => {
   return typeof value === 'number' && !isNaN(value)
 }
 
-const QuantitySelector = ({
-  id,
-  minNumber,
-  maxNumber,
-  defaultValue,
-  value,
-  label,
-  hint,
-  hintPosition,
-  tooltip,
-  onChange,
-  dictionary = defaultDictionary,
-  accessibilityLabel,
-  copy,
-  variant,
-  tokens,
-  testID
-}) => {
-  const { disabled } = variant
-  const [error, setError] = useState('')
-  const getCopy = useCopy({ dictionary, copy })
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, htmlAttrs])
 
-  const getValidatedNumber = (numberToEvaluate) => {
-    if (isNaN(numberToEvaluate)) return null
-    if (isNumber(minNumber) && numberToEvaluate < minNumber)
-      throw getCopy('errors').numberIsTooSmall(minNumber)
-    if (isNumber(maxNumber) && numberToEvaluate > maxNumber)
-      throw getCopy('errors').numberIsTooBig(maxNumber)
-    return numberToEvaluate
-  }
+const QuantitySelector = React.forwardRef(
+  (
+    {
+      id = 'quantity-selector',
+      minNumber,
+      maxNumber,
+      defaultValue,
+      value,
+      label,
+      hint,
+      hintPosition = 'inline',
+      tooltip,
+      onChange,
+      dictionary = defaultDictionary,
+      accessibilityLabel,
+      copy = 'en',
+      variant = {
+        alternative: false
+      },
+      tokens,
+      testID = 'quantity-selector-testid',
+      ...rest
+    },
+    ref
+  ) => {
+    const { disabled } = variant
+    const [error, setError] = React.useState('')
+    const getCopy = useCopy({ dictionary, copy })
+
+    const getValidatedNumber = (numberToEvaluate) => {
+      if (isNaN(numberToEvaluate)) return null
+      if (isNumber(minNumber) && numberToEvaluate < minNumber)
+        throw getCopy('errors').numberIsTooSmall(minNumber)
+      if (isNumber(maxNumber) && numberToEvaluate > maxNumber)
+        throw getCopy('errors').numberIsTooBig(maxNumber)
+      return numberToEvaluate
+    }
 
-  const { currentValue: number, setValue: setNumber } = useInputValue({
-    value: getValidatedNumber(value),
-    initialValue: getValidatedNumber(defaultValue),
-    onChange
-  })
+    const { currentValue: number, setValue: setNumber } = useInputValue({
+      value: getValidatedNumber(value),
+      initialValue: getValidatedNumber(defaultValue),
+      onChange
+    })
 
-  const isDecreaseEnabled = (!disabled && !isNumber(minNumber)) || number > minNumber
-  const isIncreaseEnabled = (!disabled && !isNumber(maxNumber)) || number < maxNumber
-  const inputValue = isNumber(number) ? number.toString() : ''
+    const isDecreaseEnabled = (!disabled && !isNumber(minNumber)) || number > minNumber
+    const isIncreaseEnabled = (!disabled && !isNumber(maxNumber)) || number < maxNumber
+    const inputValue = isNumber(number) ? number.toString() : ''
 
-  const updateNumber = (newNumber, originalInputEvent) => {
-    try {
-      const validatedNumber = getValidatedNumber(newNumber)
-      setNumber(validatedNumber, originalInputEvent)
-      setError('')
-    } catch (e) {
-      setError(e)
+    const updateNumber = (newNumber, originalInputEvent) => {
+      try {
+        const validatedNumber = getValidatedNumber(newNumber)
+        setNumber(validatedNumber, originalInputEvent)
+        setError('')
+      } catch (e) {
+        setError(e)
+      }
     }
-  }
 
-  const inputChangeHandler = (textInputValue, event) => {
-    if (textInputValue === '') setNumber(null)
-    const numberFromTextInput = Number(textInputValue)
-    if (isNumber(numberFromTextInput)) {
-      updateNumber(numberFromTextInput, event)
-    } else {
-      setError(getCopy('errors').invalidCharacters)
+    const inputChangeHandler = (textInputValue, event) => {
+      if (textInputValue === '') setNumber(null)
+      const numberFromTextInput = Number(textInputValue)
+      if (isNumber(numberFromTextInput)) {
+        updateNumber(numberFromTextInput, event)
+      } else {
+        setError(getCopy('errors').invalidCharacters)
+      }
     }
-  }
 
-  const renderLabel = () =>
-    label ? (
-      <InputLabel
-        forId={id}
-        label={label}
-        hint={hint}
-        hintPosition={hintPosition}
-        tooltip={tooltip}
-      />
-    ) : null
+    const renderLabel = () =>
+      label ? (
+        <InputLabel
+          forId={id}
+          label={label}
+          hint={hint}
+          hintPosition={hintPosition}
+          tooltip={tooltip}
+        />
+      ) : null
 
-  const getTokens = useThemeTokensCallback('QuantitySelector', tokens, variant)
+    const getTokens = useThemeTokensCallback('QuantitySelector', tokens, variant)
 
-  const renderTextInput = () => (
-    <TextInput
-      nativeID={id}
-      value={inputValue}
-      defaultValue={defaultValue}
-      tokens={(textInputState) => {
-        const {
-          inputWidth,
-          inputBorderWidth,
-          inputBorderColor,
-          textColor,
-          inputBackgroundColor,
-          ...rest
-        } = getTokens({
-          ...textInputState
-        })
-        return {
-          ...rest,
-          order: 1,
-          borderWidth: inputBorderWidth,
-          backgroundColor: inputBackgroundColor,
-          color: textColor,
-          width: inputWidth,
-          borderColor: inputBorderColor,
-          borderRadius: 0,
-          outerBorderWidth: 0
-        }
-      }}
-      onChange={inputChangeHandler}
-      // Using title as an accessibility workaround
-      // given that accessibilityLabel is not available
-      keyboardType="numeric"
-      accessibilityLabel={accessibilityLabel ?? getCopy('accessibility').a11yLabel}
-      accessibilityRole="spinbutton"
-      accessibilityValueMax={maxNumber}
-      accessibilityValueMin={minNumber}
-      accessibilityValueNow={number}
-    />
-  )
+    const renderTextInput = () => (
+      <TextInput
+        nativeID={id}
+        value={inputValue}
+        defaultValue={defaultValue}
+        tokens={(textInputState) => {
+          const {
+            inputWidth,
+            inputBorderWidth,
+            inputBorderColor,
+            textColor,
+            inputBackgroundColor,
+            ...restOfTokens
+          } = getTokens({
+            ...textInputState
+          })
+          return {
+            ...restOfTokens,
+            order: 1,
+            borderWidth: inputBorderWidth,
+            backgroundColor: inputBackgroundColor,
+            color: textColor,
+            width: inputWidth,
+            borderColor: inputBorderColor,
+            borderRadius: 0,
+            outerBorderWidth: 0
+          }
+        }}
+        onChange={inputChangeHandler}
+        // Using title as an accessibility workaround
+        // given that accessibilityLabel is not available
+        keyboardType="numeric"
+        accessibilityLabel={accessibilityLabel ?? getCopy('accessibility').a11yLabel}
+        accessibilityRole="spinbutton"
+        accessibilityValueMax={maxNumber}
+        accessibilityValueMin={minNumber}
+        accessibilityValueNow={number}
+      />
+    )
 
-  const flexOrder = (order) => ({ order })
+    const flexOrder = (order) => ({ order })
 
-  return (
-    <Box space={2} testID={testID}>
-      {renderLabel()}
-      <Spacer space={2} />
-      <InputWrapper>
-        <InputField>{renderTextInput()}</InputField>
-        <div style={flexOrder(0)}>
-          <SideButton
-            isEnabled={isDecreaseEnabled}
-            onPress={() => updateNumber(number - 1)}
-            onDoubleClick={() => updateNumber(number - 1)}
-            tokens={tokens}
-            variant={{ decrease: true, ...variant }}
-            accessibilityLabel={getCopy('accessibility').decreaseButton}
-            accessibilityDisabled={!isDecreaseEnabled}
-          />
-        </div>
-        <div style={flexOrder(2)}>
-          <SideButton
-            isEnabled={isIncreaseEnabled}
-            onPress={() => updateNumber(number + 1)}
-            onDoubleClick={() => updateNumber(number + 1)}
-            accessibilityLabel={getCopy('accessibility').increaseButton}
-            accessibilityDisabled={!isIncreaseEnabled}
-            tokens={tokens}
-            variant={{ increase: true, ...variant }}
-          />
-        </div>
-      </InputWrapper>
-      {error ? (
-        <Box vertical={2}>
-          <Feedback validation="error">{error}</Feedback>
-        </Box>
-      ) : null}
-    </Box>
-  )
-}
+    return (
+      <Box testID={testID} ref={ref} {...selectProps(rest)}>
+        {renderLabel()}
+        <Spacer space={2} />
+        <InputWrapper>
+          <InputField>{renderTextInput()}</InputField>
+          <div style={flexOrder(0)}>
+            <SideButton
+              isEnabled={isDecreaseEnabled}
+              onPress={() => updateNumber(number - 1)}
+              onDoubleClick={() => updateNumber(number - 1)}
+              tokens={tokens}
+              variant={{ decrease: true, ...variant }}
+              accessibilityLabel={getCopy('accessibility').decreaseButton}
+              accessibilityDisabled={!isDecreaseEnabled}
+            />
+          </div>
+          <div style={flexOrder(2)}>
+            <SideButton
+              isEnabled={isIncreaseEnabled}
+              onPress={() => updateNumber(number + 1)}
+              onDoubleClick={() => updateNumber(number + 1)}
+              accessibilityLabel={getCopy('accessibility').increaseButton}
+              accessibilityDisabled={!isIncreaseEnabled}
+              tokens={tokens}
+              variant={{ increase: true, ...variant }}
+            />
+          </div>
+        </InputWrapper>
+        {error ? (
+          <Box vertical={2}>
+            <Feedback validation="error">{error}</Feedback>
+          </Box>
+        ) : null}
+      </Box>
+    )
+  }
+)
 
 // If a language dictionary entry is provided, it must contain every key
 const dictionaryContentShape = PropTypes.shape({
@@ -189,7 +203,10 @@ const dictionaryContentShape = PropTypes.shape({
   }).isRequired
 })
 
+QuantitySelector.displayName = 'QuantitySelector'
+
 QuantitySelector.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * The id of the input field
    */
@@ -250,21 +267,12 @@ QuantitySelector.propTypes = {
     alternative: PropTypes.bool,
     disabled: PropTypes.bool
   }),
-  tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
+
+  tokens: getTokensPropType('QuantitySelector'),
   /**
    * Sets `data-testid` attribute on the input field for testing purposes.
    */
   testID: PropTypes.string
 }
 
-QuantitySelector.defaultProps = {
-  id: 'quantity-selector',
-  hintPosition: 'inline',
-  copy: 'en',
-  variant: {
-    alternative: false
-  },
-  testID: 'quantity-selector-testid'
-}
-
 export default QuantitySelector

package/src/QuantitySelector/SideButton.jsx

@@ -1,74 +1,70 @@
-import { IconButton, useThemeTokensCallback } from '@telus-uds/components-base'
+import { IconButton, getTokensPropType, useThemeTokensCallback } from '@telus-uds/components-base'
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const SideButton = ({
-  isEnabled,
-  onPress,
-  onDoubleClick,
-  accessibilityLabel,
-  accessibilityDisabled,
-  tokens,
-  variant
-}) => {
-  const getTokens = useThemeTokensCallback('QuantitySelectorSideButton', tokens, variant)
-  const getButtonTokens = ({ buttonState, disabled }) => {
-    const {
-      borderRadius,
-      borderTopLeftRadius,
-      borderTopRightRadius,
-      borderBottomLeftRadius,
-      borderBottomRightRadius,
-      ...rest
-    } = getTokens({ ...buttonState, disabled })
+const SideButton = React.forwardRef(
+  (
+    {
+      isEnabled = true,
+      onPress = () => {},
+      onDoubleClick = () => {},
+      accessibilityLabel = '',
+      accessibilityDisabled = false,
+      tokens = {},
+      variant = {}
+    },
+    ref
+  ) => {
+    const getTokens = useThemeTokensCallback('QuantitySelectorSideButton', tokens, variant)
+    const getButtonTokens = ({ buttonState, disabled }) => {
+      const {
+        borderRadius,
+        borderTopLeftRadius,
+        borderTopRightRadius,
+        borderBottomLeftRadius,
+        borderBottomRightRadius,
+        ...rest
+      } = getTokens({ ...buttonState, disabled })
 
-    return {
-      ...rest,
-      borderRadius,
-      borderTopLeftRadius,
-      borderTopRightRadius,
-      borderBottomLeftRadius,
-      borderBottomRightRadius,
-      outerBorderRadius: borderRadius,
-      outerBorderTopLeftRadius: borderTopLeftRadius,
-      outerBorderTopRightRadius: borderTopRightRadius,
-      outerBorderBottomLeftRadius: borderBottomLeftRadius,
-      outerBorderBottomRightRadius: borderBottomRightRadius,
-      outerBorderGap: 0,
-      outerBorderWidth: 0
+      return {
+        ...rest,
+        borderRadius,
+        borderTopLeftRadius,
+        borderTopRightRadius,
+        borderBottomLeftRadius,
+        borderBottomRightRadius,
+        outerBorderRadius: borderRadius,
+        outerBorderTopLeftRadius: borderTopLeftRadius,
+        outerBorderTopRightRadius: borderTopRightRadius,
+        outerBorderBottomLeftRadius: borderBottomLeftRadius,
+        outerBorderBottomRightRadius: borderBottomRightRadius,
+        outerBorderGap: 0,
+        outerBorderWidth: 0
+      }
     }
-  }
 
-  return (
-    <IconButton
-      tokens={(buttonState) => getButtonTokens({ disabled: !isEnabled, buttonState })}
-      onPress={onPress}
-      onDoubleClick={onDoubleClick}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityDisabled={accessibilityDisabled}
-    />
-  )
-}
+    return (
+      <IconButton
+        tokens={(buttonState) => getButtonTokens({ disabled: !isEnabled, buttonState })}
+        onPress={onPress}
+        onDoubleClick={onDoubleClick}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityDisabled={accessibilityDisabled}
+        ref={ref}
+      />
+    )
+  }
+)
 
 SideButton.displayName = 'QuantitySelectorSideButton'
 
-SideButton.defaultProps = {
-  isEnabled: true,
-  onPress: () => {},
-  onDoubleClick: () => {},
-  accessibilityLabel: '',
-  accessibilityDisabled: false,
-  tokens: {},
-  variant: {}
-}
-
 SideButton.propTypes = {
   isEnabled: PropTypes.bool,
   onPress: PropTypes.func,
   onDoubleClick: PropTypes.func,
   accessibilityLabel: PropTypes.string,
   accessibilityDisabled: PropTypes.bool,
-  tokens: PropTypes.object,
+  tokens: getTokensPropType('QuantitySelectorSideButton'),
   variant: PropTypes.object
 }
 export default SideButton

package/src/ResponsiveImage/ResponsiveImage.jsx

@@ -13,28 +13,22 @@ const staticStyles = {
 /**
  * Provide different image sources for different screen sizes.
  */
-const ResponsiveImage = ({
-  xsSrc,
-  smSrc,
-  mdSrc,
-  lgSrc,
-  xlSrc,
-  fallbackSrc,
-  alt,
-  loading = 'eager',
-  ...rest
-}) => {
-  return (
-    <picture {...selectProps(rest)}>
-      <source srcSet={xlSrc} media={`(min-width: ${viewports.map.get(viewports.xl)}px)`} />
-      <source srcSet={lgSrc} media={`(min-width: ${viewports.map.get(viewports.lg)}px)`} />
-      <source srcSet={mdSrc} media={`(min-width: ${viewports.map.get(viewports.md)}px)`} />
-      <source srcSet={smSrc} media={`(min-width: ${viewports.map.get(viewports.sm)}px)`} />
-      <source srcSet={xsSrc} media={`(max-width: ${viewports.map.get(viewports.sm) - 1}px)`} />
-      <img src={fallbackSrc} alt={alt} style={staticStyles.image} loading={loading} />
-    </picture>
-  )
-}
+const ResponsiveImage = React.forwardRef(
+  ({ xsSrc, smSrc, mdSrc, lgSrc, xlSrc, fallbackSrc, alt, loading = 'eager', ...rest }, ref) => {
+    return (
+      <picture {...selectProps(rest)} ref={ref}>
+        <source srcSet={xlSrc} media={`(min-width: ${viewports.map.get(viewports.xl)}px)`} />
+        <source srcSet={lgSrc} media={`(min-width: ${viewports.map.get(viewports.lg)}px)`} />
+        <source srcSet={mdSrc} media={`(min-width: ${viewports.map.get(viewports.md)}px)`} />
+        <source srcSet={smSrc} media={`(min-width: ${viewports.map.get(viewports.sm)}px)`} />
+        <source srcSet={xsSrc} media={`(max-width: ${viewports.map.get(viewports.sm) - 1}px)`} />
+        <img src={fallbackSrc} alt={alt} style={staticStyles.image} loading={loading} />
+      </picture>
+    )
+  }
+)
+
+ResponsiveImage.displayName = 'ResponsiveImage'
 
 ResponsiveImage.propTypes = {
   ...selectedSystemPropTypes,