@telus-uds/components-base 4.0.0-beta.0 → 4.0.0-beta.1

package/lib/esm/ColourToggle/ColourBubble.js

@@ -3,11 +3,13 @@ import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { resolvePressableTokens } from '../utils/pressability';
 import { applyShadowToken } from '../ThemeProvider/utils/styles';
 import { getTokensPropType } from '../utils/props/tokens';
 import { Tooltip } from '../Tooltip/Tooltip.native';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { UNAVAILABLE_VARIANT } from './constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const selectGeneralBubbleTokens = _ref => {
   let {
     outerBubbleHeight,
@@ -63,37 +65,70 @@ const selectBorderBubbleTokens = _ref3 => {
     borderRadius: bubbleBorderRadius
   };
 };
-export const ColourBubble = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+const selectOverlayStyles = _ref4 => {
   let {
-    tokens = {},
+    overlayColor,
+    innerBubbleBorderRadius
+  } = _ref4;
+  return {
+    borderRadius: innerBubbleBorderRadius,
+    backgroundColor: overlayColor
+  };
+};
+const selectSlashStyles = (_ref5, unavailable) => {
+  let {
+    slashLightColor,
+    slashDarkColor,
+    slashWidth,
+    slashOffset
+  } = _ref5;
+  return {
+    width: slashWidth,
+    backgroundColor: unavailable === UNAVAILABLE_VARIANT.DARK ? slashDarkColor : slashLightColor,
+    marginLeft: slashOffset
+  };
+};
+export const ColourBubble = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let {
+    tokens = () => ({}),
     id,
     colourHexCode,
     colourName,
     isSelected,
     onPress,
-    showTooltip
-  } = _ref4;
+    showTooltip,
+    unavailable,
+    isDisabled
+  } = _ref6;
   const defaultTokens = tokens({
     selected: isSelected
   });
-  const resolveColourBubbleTokens = pressState => resolvePressableTokens(tokens, pressState, {});
-  const themeTokens = React.useMemo(() => tokens(), [tokens]);
-  const pressable = /*#__PURE__*/_jsx(Pressable, {
+  const resolveColourBubbleTokens = pressState => resolvePressableTokens(tokens, isDisabled ? {} : pressState, {});
+  const themeTokens = tokens();
+  const pressable = /*#__PURE__*/_jsxs(Pressable, {
     style: state => [selectGeneralBubbleTokens(resolveColourBubbleTokens(state)), isSelected && selectBorderBubbleTokens(defaultTokens)],
     onPress: onPress,
+    disabled: isDisabled,
+    focusable: !isDisabled,
     accessible: true,
     accessibilityRole: "radio",
     accessibilityLabel: colourName,
     accessibilityState: {
-      checked: isSelected
+      checked: isSelected,
+      disabled: isDisabled
     },
     ref: ref,
     testID: id,
-    children: /*#__PURE__*/_jsx(View, {
+    children: [/*#__PURE__*/_jsx(View, {
       style: [selectInnerBubbleTokens(themeTokens), {
         backgroundColor: colourHexCode
-      }]
-    })
+      }],
+      children: unavailable && /*#__PURE__*/_jsx(View, {
+        style: [StyleSheet.absoluteFillObject, selectOverlayStyles(themeTokens)]
+      })
+    }), unavailable && /*#__PURE__*/_jsx(View, {
+      style: [staticStyles.indicator, selectSlashStyles(themeTokens, unavailable)]
+    })]
   });
   if (showTooltip) {
     return /*#__PURE__*/_jsx(Tooltip, {
@@ -135,5 +170,23 @@ 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'
+    }]
+  }
+});

package/lib/esm/ColourToggle/ColourToggle.js

@@ -7,9 +7,12 @@ import { getTokensPropType } from '../utils/props/tokens';
 import { selectSystemProps } from '../utils/props/selectSystemProps';
 import { variantProp } from '../utils/props/variantProp';
 import { viewProps } from '../utils/props/viewProps';
+import { useCopy } from '../utils/useCopy';
 import { StackWrap } from '../StackView/StackWrap';
 import { Typography } from '../Typography/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]);
 export const ColourToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -20,37 +23,49 @@ export 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, {
@@ -60,7 +75,9 @@ export const ColourToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           colourHexCode: colourHexCode,
           colourName: colourName,
           onPress: handleChangeColour,
-          showTooltip: showTooltips
+          showTooltip: showTooltips,
+          unavailable: unavailable,
+          isDisabled: !!disabled
         }, colourBubbleId);
       })
     })]
@@ -87,7 +104,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
@@ -96,5 +115,16 @@ 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
+  })
 };

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,8 @@
+export const DEFAULT_COLOUR_TOGGLE_DICTIONARY = {
+  en: {
+    unavailable: '(Out of stock)'
+  },
+  fr: {
+    unavailable: '(En rupture de stock)'
+  }
+};

package/lib/esm/Validator/Validator.js

@@ -200,7 +200,11 @@ export 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

@@ -11,8 +11,8 @@
     "@floating-ui/react-native": "^0.10.7",
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.11.4",
-    "@telus-uds/system-constants": "^4.0.0-alpha.0",
-    "@telus-uds/system-theme-tokens": "^5.0.0-alpha.2",
+    "@telus-uds/system-constants": "^4.0.0-beta.0",
+    "@telus-uds/system-theme-tokens": "^5.0.0-beta.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^14.0.8",
     "expo-linear-gradient": "^15.0.8",
@@ -81,6 +81,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.1",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -11,8 +11,8 @@
     "@floating-ui/react-native": "^0.10.7",
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.11.4",
-    "@telus-uds/system-constants": "^4.0.0-alpha.0",
-    "@telus-uds/system-theme-tokens": "^5.0.0-alpha.2",
+    "@telus-uds/system-constants": "^4.0.0-beta.0",
+    "@telus-uds/system-theme-tokens": "^5.0.0-beta.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^14.0.8",
     "expo-linear-gradient": "^15.0.8",
@@ -81,6 +81,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.1",
   "types": "types/index.d.ts"
 }

package/src/Button/ButtonGroup.jsx

@@ -25,6 +25,8 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
   pressProps,
   viewProps
 ])
+const EQUAL_WIDTH = 'equal'
+const RESPONSIVE_WIDTH = 'responsive'
 
 export const ButtonGroup = React.forwardRef(
   (
@@ -67,6 +69,9 @@ export 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)
@@ -74,36 +79,93 @@ export 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,
@@ -125,7 +187,7 @@ export 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 (
@@ -146,7 +208,7 @@ export const ButtonGroup = React.forwardRef(
         style={fieldsetStyles}
         {...selectProps(rest)}
       >
-        <View accessibilityRole={innerRole} style={viewStyles}>
+        <View accessibilityRole={buttonsWrapperRole} style={buttonsContainerStyles}>
           {items.map(
             (
               {
@@ -326,17 +388,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',
     alignContent: 'stretch',
     alignItems: 'center'
-  },
-  equalWidth: {
-    width: '100%',
-    flex: 1
   }
 })