@telus-uds/components-base 3.31.0 → 3.32.0

package/src/ColourToggle/ColourBubble.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { View, Pressable, Platform } from 'react-native'
+import { View, Pressable, Platform, StyleSheet } from 'react-native'
 import { resolvePressableTokens } from '../utils/pressability'
 import { applyShadowToken } from '../ThemeProvider'
 import { getTokensPropType } from '../utils'
 import Tooltip from '../Tooltip'
+import { UNAVAILABLE_VARIANT } from './constants'
 
 const selectGeneralBubbleTokens = ({
   outerBubbleHeight,
@@ -52,13 +53,41 @@ const selectBorderBubbleTokens = ({
   borderRadius: bubbleBorderRadius
 })
 
+const selectOverlayStyles = ({ overlayColor, innerBubbleBorderRadius }) => ({
+  borderRadius: innerBubbleBorderRadius,
+  backgroundColor: overlayColor
+})
+
+const selectSlashStyles = (
+  { slashLightColor, slashDarkColor, slashWidth, slashOffset },
+  unavailable
+) => ({
+  width: slashWidth,
+  backgroundColor: unavailable === UNAVAILABLE_VARIANT.DARK ? slashDarkColor : slashLightColor,
+  marginLeft: slashOffset
+})
+
 const ColourBubble = React.forwardRef(
-  ({ tokens = {}, id, colourHexCode, colourName, isSelected, onPress, showTooltip }, ref) => {
+  (
+    {
+      tokens = () => ({}),
+      id,
+      colourHexCode,
+      colourName,
+      isSelected,
+      onPress,
+      showTooltip,
+      unavailable,
+      isDisabled
+    },
+    ref
+  ) => {
     const defaultTokens = tokens({ selected: isSelected })
 
-    const resolveColourBubbleTokens = (pressState) => resolvePressableTokens(tokens, pressState, {})
+    const resolveColourBubbleTokens = (pressState) =>
+      resolvePressableTokens(tokens, isDisabled ? {} : pressState, {})
 
-    const themeTokens = React.useMemo(() => tokens(), [tokens])
+    const themeTokens = tokens()
 
     const pressable = (
       <Pressable
@@ -67,14 +96,23 @@ const ColourBubble = React.forwardRef(
           isSelected && selectBorderBubbleTokens(defaultTokens)
         ]}
         onPress={onPress}
+        disabled={isDisabled}
+        focusable={!isDisabled}
         accessible
         accessibilityRole="radio"
         accessibilityLabel={colourName}
-        accessibilityState={{ checked: isSelected }}
+        accessibilityState={{ checked: isSelected, disabled: isDisabled }}
         ref={ref}
         testID={id}
       >
-        <View style={[selectInnerBubbleTokens(themeTokens), { backgroundColor: colourHexCode }]} />
+        <View style={[selectInnerBubbleTokens(themeTokens), { backgroundColor: colourHexCode }]}>
+          {unavailable && (
+            <View style={[StyleSheet.absoluteFillObject, selectOverlayStyles(themeTokens)]} />
+          )}
+        </View>
+        {unavailable && (
+          <View style={[staticStyles.indicator, selectSlashStyles(themeTokens, unavailable)]} />
+        )}
       </Pressable>
     )
 
@@ -121,7 +159,24 @@ ColourBubble.propTypes = {
   /**
    * When true, wraps the bubble in a Tooltip that displays the colourName on hover (web only).
    */
-  showTooltip: PropTypes.bool
+  showTooltip: PropTypes.bool,
+  /**
+   * When set, renders a diagonal indicator over the bubble. Accepts either 'dark' or 'light' to determine the colour of the indicator.
+   */
+  unavailable: PropTypes.oneOf(Object.values(UNAVAILABLE_VARIANT)),
+  /**
+   * When true, disables interaction on the bubble.
+   */
+  isDisabled: PropTypes.bool
 }
 
+const staticStyles = StyleSheet.create({
+  indicator: {
+    position: 'absolute',
+    top: '50%',
+    height: 2,
+    transform: [{ rotate: '-45deg' }]
+  }
+})
+
 export default ColourBubble

package/src/ColourToggle/ColourToggle.jsx

@@ -3,32 +3,57 @@ import { View } from 'react-native'
 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'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const ColourToggle = React.forwardRef(
-  ({ tokens, variant, defaultColourId, items, onChange, showTooltips, ...rest }, ref) => {
+  (
+    {
+      tokens,
+      variant,
+      defaultColourId,
+      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(({ id }) => id === currentColourId)
 
     return (
       <View ref={ref} {...selectProps(rest)}>
-        <Typography>{currentColourName}</Typography>
+        <Typography>
+          {currentItem?.unavailable
+            ? `${currentItem.colourName} ${getCopy('unavailable')}`
+            : currentItem?.colourName ?? ''}
+        </Typography>
         <StackWrap space={space} accessibilityRole="radiogroup">
-          {items.map(({ id, colourHexCode, colourName }, index) => {
+          {items.map(({ id, colourHexCode, colourName, unavailable, disabled }, index) => {
             const colourBubbleId = id || `ColourBubble[${index}]`
 
             const handleChangeColour = (event) => {
               setCurrentColourId(id)
-              onChange?.(event, { id, colourHexCode, colourName })
+              onChange?.(event, { id, colourHexCode, colourName, unavailable })
             }
 
             return (
@@ -41,6 +66,8 @@ const ColourToggle = React.forwardRef(
                 colourName={colourName}
                 onPress={handleChangeColour}
                 showTooltip={showTooltips}
+                unavailable={unavailable}
+                isDisabled={!!disabled}
               />
             )
           })}
@@ -72,7 +99,9 @@ ColourToggle.propTypes = {
     PropTypes.exact({
       colourHexCode: PropTypes.string,
       colourName: PropTypes.string,
-      id: PropTypes.string
+      id: PropTypes.string,
+      unavailable: PropTypes.oneOf(Object.values(UNAVAILABLE_VARIANT)),
+      disabled: PropTypes.bool
     })
   ),
   /**
@@ -82,7 +111,18 @@ 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/src/ColourToggle/constants.js

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

package/src/ColourToggle/dictionary.js

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

package/src/Validator/Validator.jsx

@@ -204,7 +204,11 @@ const Validator = React.forwardRef(
 
     // 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) => {