@telus-uds/components-base 3.31.0 → 3.32.0

package/lib/esm/ColourToggle/ColourToggle.js

@@ -2,10 +2,12 @@ import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
 import { useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, useCopy, variantProp, viewProps } from '../utils';
 import { StackWrap } from '../StackView';
 import Typography from '../Typography';
 import ColourBubble from './ColourBubble';
+import { UNAVAILABLE_VARIANT, DICTIONARY_CONTENT_SHAPE } from './constants';
+import DEFAULT_COLOUR_TOGGLE_DICTIONARY from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const ColourToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -16,37 +18,49 @@ const ColourToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     items,
     onChange,
     showTooltips,
+    copy = 'en',
+    dictionary = DEFAULT_COLOUR_TOGGLE_DICTIONARY,
     ...rest
   } = _ref;
   const [currentColourId, setCurrentColourId] = React.useState(defaultColourId);
   const getTokens = useThemeTokensCallback('ColourToggle', tokens, variant);
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
   const {
     space
   } = getTokens();
-  const {
-    colourName: currentColourName = ''
-  } = items.find(item => item.id === currentColourId) || '';
+  const currentItem = items.find(_ref2 => {
+    let {
+      id
+    } = _ref2;
+    return id === currentColourId;
+  });
   return /*#__PURE__*/_jsxs(View, {
     ref: ref,
     ...selectProps(rest),
     children: [/*#__PURE__*/_jsx(Typography, {
-      children: currentColourName
+      children: currentItem?.unavailable ? `${currentItem.colourName} ${getCopy('unavailable')}` : currentItem?.colourName ?? ''
     }), /*#__PURE__*/_jsx(StackWrap, {
       space: space,
       accessibilityRole: "radiogroup",
-      children: items.map((_ref2, index) => {
+      children: items.map((_ref3, index) => {
         let {
           id,
           colourHexCode,
-          colourName
-        } = _ref2;
+          colourName,
+          unavailable,
+          disabled
+        } = _ref3;
         const colourBubbleId = id || `ColourBubble[${index}]`;
         const handleChangeColour = event => {
           setCurrentColourId(id);
           onChange?.(event, {
             id,
             colourHexCode,
-            colourName
+            colourName,
+            unavailable
           });
         };
         return /*#__PURE__*/_jsx(ColourBubble, {
@@ -56,7 +70,9 @@ const ColourToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           colourHexCode: colourHexCode,
           colourName: colourName,
           onPress: handleChangeColour,
-          showTooltip: showTooltips
+          showTooltip: showTooltips,
+          unavailable: unavailable,
+          isDisabled: !!disabled
         }, colourBubbleId);
       })
     })]
@@ -83,7 +99,9 @@ ColourToggle.propTypes = {
   items: PropTypes.arrayOf(PropTypes.exact({
     colourHexCode: PropTypes.string,
     colourName: PropTypes.string,
-    id: PropTypes.string
+    id: PropTypes.string,
+    unavailable: PropTypes.oneOf(Object.values(UNAVAILABLE_VARIANT)),
+    disabled: PropTypes.bool
   })),
   /**
    * If provided, this function is called when the current selection of the color is changed of all currently `items`. Receives two parameters: item object selected and the event
@@ -92,6 +110,17 @@ ColourToggle.propTypes = {
   /**
    * When true, displays each colour's name as a tooltip on hover (web only).
    */
-  showTooltips: PropTypes.bool
+  showTooltips: PropTypes.bool,
+  /**
+   * Select English or French copy.
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+  /**
+   * Override default labels.
+   */
+  dictionary: PropTypes.shape({
+    en: DICTIONARY_CONTENT_SHAPE,
+    fr: DICTIONARY_CONTENT_SHAPE
+  })
 };
 export default ColourToggle;

package/lib/esm/ColourToggle/constants.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+export const UNAVAILABLE_VARIANT = {
+  DARK: 'dark',
+  LIGHT: 'light'
+};
+export const DICTIONARY_CONTENT_SHAPE = PropTypes.shape({
+  unavailable: PropTypes.string
+});

package/lib/esm/ColourToggle/dictionary.js

@@ -0,0 +1,9 @@
+const DEFAULT_COLOUR_TOGGLE_DICTIONARY = {
+  en: {
+    unavailable: '(Out of stock)'
+  },
+  fr: {
+    unavailable: '(En rupture de stock)'
+  }
+};
+export default DEFAULT_COLOUR_TOGGLE_DICTIONARY;

package/lib/esm/Validator/Validator.js

@@ -199,7 +199,11 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
 
   // Sync external value prop to internal state
   React.useEffect(() => {
-    if (value && Number(value).toString() !== 'NaN') {
+    if (value === '') {
+      setCodes(Array(validatorsLength).fill(''));
+      return;
+    }
+    if (Number(value).toString() !== 'NaN') {
       const digits = value.split('').slice(0, validatorsLength);
       const newCodes = Array(validatorsLength).fill('');
       digits.forEach((digit, i) => {

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.21.0",
+    "@telus-uds/system-theme-tokens": "^4.22.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.31.0",
+  "version": "3.32.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.21.0",
+    "@telus-uds/system-theme-tokens": "^4.22.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.31.0",
+  "version": "3.32.0",
   "types": "types/index.d.ts"
 }

package/src/Button/ButtonGroup.jsx

@@ -28,6 +28,8 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
   pressProps,
   viewProps
 ])
+const EQUAL_WIDTH = 'equal'
+const RESPONSIVE_WIDTH = 'responsive'
 
 const ButtonGroup = React.forwardRef(
   (
@@ -70,6 +72,9 @@ const ButtonGroup = React.forwardRef(
     const themeButtonTokensCallback = useThemeTokensCallback('ButtonGroupItem', tokens, variant)
     const gapValue = useSpacingScale(gap || space)
 
+    const isWeb = Platform.OS === 'web'
+    const buttonWidthVariant = variant?.width
+
     const getButtonTokens = useCallback(
       (state) => {
         const themeButtonTokens = themeButtonTokensCallback(state)
@@ -77,36 +82,93 @@ const ButtonGroup = React.forwardRef(
         const shouldUseTransparentBackground =
           isMobileNonContained && !state.selected && !state.pressed && !state.hover && !state.focus
 
+        let widthStyle
+
+        switch (buttonWidthVariant) {
+          case EQUAL_WIDTH:
+            widthStyle = staticStyles.equalWidth
+            break
+          case RESPONSIVE_WIDTH:
+            widthStyle = staticStyles.responsiveWidth
+            break
+          // no default
+        }
+
         return {
           ...themeButtonTokens,
-          ...(variant?.width === 'equal' && staticStyles.equalWidth),
+          ...widthStyle,
           ...(shouldUseTransparentBackground && { backgroundColor: 'transparent' }),
           alignSelf: themeButtonTokens.width ? 'flex-start' : 'center'
         }
       },
-      [themeButtonTokensCallback, isMobileNonContained, variant?.width]
+      [themeButtonTokensCallback, isMobileNonContained, buttonWidthVariant]
     )
 
-    const fieldsetStyles = useMemo(
-      () => ({
-        ...staticStyles.fieldsetBase,
+    const fieldsetStyles = useMemo(() => {
+      let fieldSetBase
+      switch (buttonWidthVariant) {
+        case EQUAL_WIDTH:
+        case RESPONSIVE_WIDTH:
+          fieldSetBase = staticStyles.fieldSetResponsive
+          break
+        default:
+          fieldSetBase = staticStyles.fieldsetBase
+          break
+      }
+
+      return {
+        ...fieldSetBase,
         borderRadius,
         backgroundColor: isMobileNonContained ? 'transparent' : backgroundColor || 'transparent',
-        padding,
-        width: variant?.width === 'equal' ? '100%' : 'auto'
-      }),
-      [borderRadius, backgroundColor, padding, variant?.width, isMobileNonContained]
-    )
+        padding
+      }
+    }, [borderRadius, backgroundColor, padding, isMobileNonContained, buttonWidthVariant])
 
-    const viewStyles = useMemo(
-      () => ({
-        ...staticStyles.viewBase,
+    const buttonsContainerStyles = useMemo(() => {
+      let flexWrap
+      if (isWeb) {
+        flexWrap = 'wrap'
+      } else {
+        switch (buttonWidthVariant) {
+          case EQUAL_WIDTH:
+          case RESPONSIVE_WIDTH:
+            flexWrap = 'nowrap'
+            break
+          default:
+            flexWrap = 'wrap'
+            break
+        }
+      }
+
+      let justifyContent
+      switch (buttonWidthVariant) {
+        case EQUAL_WIDTH:
+          justifyContent = 'space-evenly'
+          break
+        default:
+          justifyContent = 'flex-start'
+          break
+      }
+
+      let viewBaseStyle
+      switch (buttonWidthVariant) {
+        case EQUAL_WIDTH:
+        case RESPONSIVE_WIDTH:
+          viewBaseStyle = {}
+          break
+        default:
+          viewBaseStyle = staticStyles.viewBase
+          break
+      }
+
+      return {
+        ...viewBaseStyle,
+        flexWrap,
         flexDirection: direction === 'column' ? 'column' : 'row',
         gap: gapValue || 0,
-        justifyContent: variant?.width === 'equal' ? 'space-evenly' : 'flex-start'
-      }),
-      [direction, gapValue, variant?.width]
-    )
+        justifyContent
+      }
+    }, [direction, gapValue, buttonWidthVariant, isWeb])
 
     const { currentValues, toggleOneValue } = useMultipleInputValues({
       initialValues,
@@ -128,7 +190,7 @@ const ButtonGroup = React.forwardRef(
     }
 
     // Some web screenreaders e.g. MacOS Voiceover don't handle radiogroups properly unless radio is direct child of radiogroup
-    const innerRole =
+    const buttonsWrapperRole =
       Platform.OS === 'web' && accessibilityRole === 'radiogroup' ? accessibilityRole : undefined
 
     return (
@@ -149,7 +211,7 @@ const ButtonGroup = React.forwardRef(
         style={fieldsetStyles}
         {...selectProps(rest)}
       >
-        <View accessibilityRole={innerRole} style={viewStyles}>
+        <View accessibilityRole={buttonsWrapperRole} style={buttonsContainerStyles}>
           {items.map(
             (
               {
@@ -329,17 +391,24 @@ ButtonGroup.propTypes = {
 }
 
 const staticStyles = StyleSheet.create({
+  equalWidth: {
+    width: '100%',
+    flex: 1
+  },
+  responsiveWidth: {
+    width: 'auto'
+  },
   fieldsetBase: {
     alignSelf: 'flex-start',
-    display: 'inline'
+    display: 'inline',
+    width: 'auto'
+  },
+  fieldSetResponsive: {
+    width: '100%'
   },
   viewBase: {
     flexWrap: 'wrap',
     alignItems: 'center'
-  },
-  equalWidth: {
-    width: '100%',
-    flex: 1
   }
 })
 

package/src/Card/CardBase.jsx

@@ -14,9 +14,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 const GRID_COLUMNS = 12
 
-const isOverlayColor = (color) => {
-  return color && typeof color === 'string' && color.startsWith('rgba(')
-}
+const isOverlayColor = (color) => color && typeof color === 'string' && color.startsWith('rgba(')
 
 const setBackgroundImage = ({
   src,
@@ -25,7 +23,8 @@ const setBackgroundImage = ({
   backgroundImagePosition,
   backgroundImageAlign,
   content,
-  cardStyle
+  cardStyle,
+  testID
 }) => {
   const borderRadius = cardStyle?.borderRadius || 0
   const borderWidth = cardStyle?.borderWidth || 0
@@ -91,6 +90,7 @@ const setBackgroundImage = ({
           style={[staticStyles.imageBackground, backgroundImageStyle]}
           role="img"
           aria-label={alt}
+          testID={testID}
         >
           {content}
         </View>
@@ -108,6 +108,7 @@ const setBackgroundImage = ({
           accessible={true}
           accessibilityLabel={alt}
           accessibilityIgnoresInvertColors={true}
+          testID={testID}
         />
         <View style={staticStyles.contentOverlay}>{content}</View>
       </View>
@@ -122,33 +123,18 @@ const setBackgroundImage = ({
       style={staticStyles.imageBackground}
       accessible={true}
       accessibilityLabel={alt}
+      testID={testID}
     >
       {content}
     </ImageBackground>
   )
 }
 
-const selectPaddedContentStyles = ({
+const selectPaddedContentStyles = ({ paddingTop, paddingBottom, paddingLeft, paddingRight }) => ({
   paddingTop,
   paddingBottom,
   paddingLeft,
-  paddingRight,
-  borderWidth,
-  borderColor,
-  borderRadius,
-  hasInteractiveBorder
-}) => ({
-  paddingTop,
-  paddingBottom,
-  paddingLeft,
-  paddingRight,
-  ...(hasInteractiveBorder
-    ? {
-        borderWidth,
-        borderColor,
-        borderRadius
-      }
-    : {})
+  paddingRight
 })
 
 const selectInteractiveOverlayStyles = ({ backgroundColor, borderRadius, borderWidth }) => {
@@ -162,32 +148,49 @@ const selectInteractiveOverlayStyles = ({ backgroundColor, borderRadius, borderW
     backgroundColor,
     borderRadius: adjustedBorderRadius,
     pointerEvents: 'none',
-    zIndex: 1
+    zIndex: 3
   }
 }
 
-// Ensure explicit selection of tokens
-export const selectStyles = ({
-  flex,
+const selectOuterContainerStyles = ({
+  containerStyle,
   backgroundColor,
-  borderColor,
   borderRadius,
+  borderColor,
   borderWidth,
-  paddingBottom,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  marginTop,
-  marginBottom,
-  marginLeft,
-  marginRight,
-  minWidth,
-  shadow,
-  backgroundGradient,
-  gradient,
-  maxHeight,
-  overflowY
-}) => {
+  hasGradientToken
+}) => ({
+  ...containerStyle,
+  backgroundColor,
+  borderRadius,
+  ...(hasGradientToken ? {} : { borderColor, borderWidth })
+})
+
+// Ensure explicit selection of tokens
+export const selectStyles = (
+  {
+    flex,
+    backgroundColor,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    minWidth,
+    shadow,
+    backgroundGradient,
+    gradient,
+    maxHeight,
+    overflowY
+  },
+  { hasBgImage = false } = {}
+) => {
   const hasGradient = (gradient || backgroundGradient) && Platform.OS === 'web'
 
   let backgroundImageValue = null
@@ -226,7 +229,9 @@ export const selectStyles = ({
       ? {
           backgroundImage: backgroundImageValue,
           backgroundOrigin: `border-box`,
-          boxShadow: `inset 0 1000px ${boxShadowColor}`,
+          // bgImage child fills the content-box and replaces what the inset shadow
+          // used to cover, so we omit it to avoid hiding the image.
+          ...(hasBgImage ? {} : { boxShadow: `inset 0 1000px ${boxShadowColor}` }),
           border: `${borderWidth}px solid transparent`
         }
       : {}),
@@ -244,14 +249,13 @@ export const selectStyles = ({
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
 const CardBase = React.forwardRef(
-  ({ children, tokens, dataSet, backgroundImage, fullBleedContent, cardState, ...rest }, ref) => {
+  (
+    { children, tokens, dataSet, backgroundImage, fullBleedContent, cardState, testID, ...rest },
+    ref
+  ) => {
     const resolvedTokens = typeof tokens === 'function' ? tokens(cardState) : tokens
-    const tokensToUse =
-      backgroundImage && backgroundImage.src
-        ? { ...resolvedTokens, gradient: undefined, backgroundGradient: undefined }
-        : resolvedTokens
-
-    const cardStyle = selectStyles(tokensToUse)
+    const hasBgImage = Boolean(backgroundImage && backgroundImage.src)
+    const cardStyle = selectStyles(resolvedTokens, { hasBgImage })
     const props = selectProps(rest)
 
     let content = children
@@ -283,31 +287,28 @@ const CardBase = React.forwardRef(
       } = cardStyle
 
       const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight
-      const hasInteractiveBorder = borderWidth && borderWidth > 0
       const hasInteractiveOverlay = isOverlayColor(backgroundColor)
+      const outerBackgroundColor = hasInteractiveOverlay ? undefined : backgroundColor
+      const hasGradientToken = Boolean(resolvedTokens.gradient) && Platform.OS === 'web'
 
-      const paddedContent =
-        hasPadding || hasInteractiveBorder ? (
-          <View
-            style={selectPaddedContentStyles({
-              paddingTop,
-              paddingBottom,
-              paddingLeft,
-              paddingRight,
-              borderWidth,
-              borderColor,
-              borderRadius,
-              hasInteractiveBorder
-            })}
-          >
-            {children}
-          </View>
-        ) : (
-          children
-        )
+      const paddedContent = hasPadding ? (
+        <View
+          style={selectPaddedContentStyles({
+            paddingTop,
+            paddingBottom,
+            paddingLeft,
+            paddingRight
+          })}
+        >
+          {children}
+        </View>
+      ) : (
+        children
+      )
 
       const contentWithOverlay = (
         <>
+          <View style={staticStyles.contentOverlay}>{paddedContent}</View>
           {hasInteractiveOverlay && Platform.OS === 'web' && (
             <View
               style={selectInteractiveOverlayStyles({
@@ -315,9 +316,9 @@ const CardBase = React.forwardRef(
                 borderRadius,
                 borderWidth
               })}
+              testID={testID && `${testID}-card-base-bg-overlay`}
             />
           )}
-          <View style={staticStyles.contentOverlay}>{paddedContent}</View>
         </>
       )
 
@@ -328,11 +329,25 @@ const CardBase = React.forwardRef(
         backgroundImagePosition,
         backgroundImageAlign,
         content: contentWithOverlay,
-        cardStyle: { ...containerStyle, borderRadius }
+        cardStyle: { borderRadius, borderWidth },
+        testID: testID && `${testID}-card-base-bg-image`
       })
 
       return (
-        <View style={{ ...containerStyle, borderRadius }} dataSet={dataSet} ref={ref} {...props}>
+        <View
+          style={selectOuterContainerStyles({
+            containerStyle,
+            backgroundColor: outerBackgroundColor,
+            borderRadius,
+            borderColor,
+            borderWidth,
+            hasGradientToken
+          })}
+          dataSet={dataSet}
+          ref={ref}
+          testID={testID}
+          {...props}
+        >
           {content}
         </View>
       )
@@ -365,7 +380,7 @@ const CardBase = React.forwardRef(
       )
 
       return (
-        <View style={containerStyle} dataSet={dataSet} ref={ref} {...props}>
+        <View style={containerStyle} dataSet={dataSet} ref={ref} testID={testID} {...props}>
           <FlexGrid>
             <FlexGridRow>
               {imageFirst ? (
@@ -386,7 +401,7 @@ const CardBase = React.forwardRef(
     }
 
     return (
-      <View style={cardStyle} dataSet={dataSet} ref={ref} {...props}>
+      <View style={cardStyle} dataSet={dataSet} ref={ref} testID={testID} {...props}>
         {content}
       </View>
     )
@@ -434,6 +449,10 @@ CardBase.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.node,
   tokens: getTokensPropType('Card'),
+  /**
+   * Identifier for testing purposes.
+   */
+  testID: PropTypes.string,
   /**
    * Apply background image to the card.
    */