@telus-uds/components-base 1.64.0 → 1.66.0

package/lib/TextInput/TextInputBase.js

@@ -23,6 +23,8 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 
+var _Icon = _interopRequireDefault(require("../Icon"));
+
 var _utils = require("../utils");
 
 var _dictionary = _interopRequireDefault(require("./dictionary"));
@@ -37,7 +39,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.viewProps]);
 
-const selectInputStyles = (_ref, themeOptions, inactive) => {
+const selectInputStyles = (_ref, themeOptions, inactive, type) => {
   let {
     backgroundColor,
     color,
@@ -98,7 +100,7 @@ const selectInputStyles = (_ref, themeOptions, inactive) => {
     borderWidth,
     borderColor,
     borderRadius,
-    paddingLeft: offsetBorder(paddingLeft),
+    paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
     paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
@@ -152,16 +154,64 @@ const selectIconContainerStyles = (_ref4, buttonCount) => {
   };
 };
 
-const selectButtonsContainerStyle = _ref5 => {
+const selectLeftIconContainerStyles = _ref5 => {
   let {
-    buttonsPaddingRight
+    leftIconPaddingBottom
   } = _ref5;
+  return {
+    // not tokenizing paddingLeft as it remains same across brands for now
+    paddingLeft: 10,
+    paddingBottom: leftIconPaddingBottom
+  };
+};
+
+const selectButtonsContainerStyle = _ref6 => {
+  let {
+    buttonsPaddingRight
+  } = _ref6;
   return {
     paddingRight: buttonsPaddingRight
   };
 };
 
-const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
+const getIcon = function () {
+  let cardNumber = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let {
+    defaultCreditIcon,
+    amexIcon,
+    visaIcon,
+    masterCardIcon
+  } = arguments.length > 1 ? arguments[1] : undefined;
+  const cardType = {
+    1: {
+      icon: visaIcon,
+      testID: 'visa'
+    },
+    2: {
+      icon: amexIcon,
+      testID: 'amex'
+    },
+    4: {
+      icon: masterCardIcon,
+      testID: 'mastercard'
+    }
+  };
+  const firstDigit = cardNumber ? cardNumber[0] : '';
+  const defaultIcon = {
+    icon: defaultCreditIcon,
+    testID: 'default'
+  };
+  const selectedIcon = cardNumber.length > 4 ? cardType[firstDigit] || defaultIcon : defaultIcon;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    icon: selectedIcon.icon,
+    variant: {
+      size: 'large'
+    },
+    testID: selectedIcon.testID
+  });
+};
+
+const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
   let {
     buttons = [],
     copy = 'en',
@@ -180,8 +230,9 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     tokens,
     value,
     variant = {},
+    type,
     ...rest
-  } = _ref6;
+  } = _ref7;
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [showPassword, setShowPassword] = (0, _react.useState)(false);
 
@@ -222,6 +273,12 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     onChange,
     readOnly
   });
+  const {
+    password,
+    numeric
+  } = variant;
+  const isNumeric = numeric || type === 'card' || type === 'number';
+  const isPassword = password || type === 'password';
   const element = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
   (0, _react.useEffect)(() => {
     if (_Platform.default.OS === 'web' && pattern && element) {
@@ -234,11 +291,16 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   const handleChangeText = event => {
     var _event$nativeEvent, _event$target;
 
-    const {
-      numeric
-    } = variant;
     const text = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.text) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
-    const filteredText = numeric ? text.replace(/[^\d]/g, '') : text;
+    let filteredText = isNumeric ? text === null || text === void 0 ? void 0 : text.replace(/[^\d]/g, '') : text;
+
+    if (type === 'card' && filteredText) {
+      const formattedValue = filteredText.replace(/[^a-zA-Z0-9]/g, '');
+      const regex = new RegExp(`([a-zA-Z0-9]{4})(?=[a-zA-Z0-9])`, 'g'); // Add a space every 4 digits starting from the 5th position
+
+      filteredText = formattedValue.replace(regex, '$1 ').trim();
+    }
+
     setValue(filteredText, event);
     if (typeof onChangeText === 'function') onChangeText(filteredText, event);
   };
@@ -267,7 +329,11 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     clearButtonIcon: ClearButtonIcon,
     icon: IconComponent,
     passwordShowButtonIcon,
-    passwordHideButtonIcon
+    passwordHideButtonIcon,
+    defaultCreditIcon,
+    amexIcon,
+    visaIcon,
+    masterCardIcon
   } = themeTokens;
   const buttonsGapSize = (0, _utils.useSpacingScale)(buttonsGap);
   const getCopy = (0, _utils.useCopy)({
@@ -287,7 +353,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     }, "clear"));
   }
 
-  if (variant.password) {
+  if (isPassword) {
     textInputButtons === null || textInputButtons === void 0 ? void 0 : textInputButtons.unshift( /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
       accessibilityLabel: !showPassword ? getCopy('hidePasswordAccessibilityLabel') : getCopy('showPasswordAccessibilityLabel'),
       icon: !showPassword ? passwordShowButtonIcon : passwordHideButtonIcon,
@@ -313,6 +379,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     onMouseOut: handleMouseOut,
     onChange: handleChangeText,
     defaultValue: initialValue,
+    maxLength: type === 'card' ? 19 : undefined,
     value: isControlled ? currentValue : undefined
   };
   const {
@@ -320,20 +387,29 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   } = (0, _ThemeProvider.useTheme)();
   const nativeInputStyle = selectInputStyles({ ...themeTokens,
     height
-  }, themeOptions, inactive);
+  }, themeOptions, inactive, type);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectOuterBorderStyles(themeTokens),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
+    children: [type === 'card' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      pointerEvents: "none",
+      style: [staticStyles.leftIconContainer, selectLeftIconContainerStyles(themeTokens)],
+      children: getIcon(currentValue, {
+        defaultCreditIcon,
+        amexIcon,
+        visaIcon,
+        masterCardIcon
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
       ref: inputRef,
-      keyboardType: variant.numeric && 'numeric',
-      inputMode: variant.numeric && 'numeric',
+      keyboardType: isNumeric && 'numeric',
+      inputMode: isNumeric && 'numeric',
       style: nativeInputStyle,
-      secureTextEntry: variant.password && !showPassword,
+      secureTextEntry: isPassword && !showPassword,
       ...inputProps
     }), IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       pointerEvents: "none" // avoid hijacking input press events
       ,
-      style: [staticStyles.iconContainer, selectIconContainerStyles({ ...themeTokens,
+      style: [staticStyles.rightIconContainer, selectIconContainerStyles({ ...themeTokens,
         buttonsGapSize
       }, buttons === null || buttons === void 0 ? void 0 : buttons.length)],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconTokens(themeTokens)
@@ -359,6 +435,7 @@ TextInputBase.propTypes = { ...selectedSystemPropTypes,
   copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.shape({
     clearButtonAccessibilityLabel: _propTypes.default.string
   })]),
+  type: _propTypes.default.oneOfType([_propTypes.default.oneOf(['password', 'card', 'number'])]),
   height: _propTypes.default.number,
   inactive: _propTypes.default.bool,
   initialValue: _propTypes.default.string,
@@ -387,9 +464,15 @@ const staticStyles = _StyleSheet.default.create({
     bottom: 0,
     justifyContent: 'center'
   },
-  iconContainer: {
+  rightIconContainer: {
     position: 'absolute',
     right: 0,
     bottom: 0
+  },
+  leftIconContainer: {
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    zIndex: 1
   }
 });

package/lib/TextInput/propTypes.js

@@ -18,6 +18,11 @@ const textInputPropTypes = {
    */
   value: _propTypes.default.string,
 
+  /**
+   * Use this to set the type of the input. Defaults to `text`.
+   */
+  type: _propTypes.default.string,
+
   /**
    * Use this to set the initial value of an uncontrolled input.
    * Updating `initialValue` will **not** update the actual value.

package/lib/index.js

@@ -12,6 +12,7 @@ var _exportNames = {
   PressableCardBase: true,
   Listbox: true,
   Checkbox: true,
+  CheckboxCard: true,
   Divider: true,
   ExpandCollapse: true,
   Accordion: true,
@@ -123,6 +124,12 @@ Object.defineProperty(exports, "Checkbox", {
     return _Checkbox.default;
   }
 });
+Object.defineProperty(exports, "CheckboxCard", {
+  enumerable: true,
+  get: function () {
+    return _CheckboxCard.default;
+  }
+});
 Object.defineProperty(exports, "Divider", {
   enumerable: true,
   get: function () {
@@ -508,6 +515,8 @@ Object.keys(_Checkbox).forEach(function (key) {
   });
 });
 
+var _CheckboxCard = _interopRequireDefault(require("./CheckboxCard"));
+
 var _Divider = _interopRequireDefault(require("./Divider"));
 
 var _ExpandCollapse = _interopRequireWildcard(require("./ExpandCollapse"));

package/lib/utils/props/textInputProps.js

@@ -31,6 +31,7 @@ const textProps = {
 
 const inputValueProps = {
   value: _propTypes.default.string,
+  type: _propTypes.default.string,
   initialValue: _propTypes.default.string,
   readOnly: _propTypes.default.bool,
   inactive: _propTypes.default.bool

package/lib-module/Checkbox/CheckboxButton.js

@@ -0,0 +1,174 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import CheckboxInput from './CheckboxInput';
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensSetPropType, selectSystemProps, selectTokens, viewProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
+const selectInputStyles = (_ref, isChecked) => {
+  let {
+    iconBackgroundColor,
+    inputBorderColor,
+    inputBorderRadius,
+    inputBorderWidth,
+    inputBackgroundColor,
+    inputHeight,
+    inputOutlineColor,
+    inputOutlineWidth,
+    inputOutlineOffset,
+    inputShadow,
+    inputWidth
+  } = _ref;
+  return {
+    borderColor: inputBorderColor,
+    borderWidth: inputBorderWidth,
+    borderRadius: inputBorderRadius,
+    backgroundColor: isChecked ? iconBackgroundColor : inputBackgroundColor,
+    height: inputHeight,
+    width: inputWidth,
+    ...applyShadowToken(inputShadow),
+    ...Platform.select({
+      web: {
+        outlineStyle: 'solid',
+        outlineColor: inputOutlineColor,
+        outlineWidth: inputOutlineWidth,
+        outlineOffset: inputOutlineOffset
+      }
+    })
+  };
+};
+
+const selectIconTokens = _ref2 => {
+  let {
+    icon,
+    iconColor,
+    iconSize
+  } = _ref2;
+  return {
+    icon,
+    color: iconColor,
+    size: iconSize
+  };
+};
+
+const tokenKeys = ['checkedBackgroundColor', 'checkedSize', 'inputBackgroundColor', 'inputBorderColor', 'inputBorderWidth', 'inputOutlineColor', 'inputOutlineWidth', 'inputSize', 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap', 'inputSize'];
+export const selectCheckboxTokens = (themeTokens, prefix) => selectTokens(tokenKeys, themeTokens, prefix);
+/**
+ * The visual toggle of a checkbox input. Is not interactive on its own, should be used inside
+ * an interactive parent that passes down props when interacted with. Used in CheckboxCard
+ */
+
+const CheckboxButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    isChecked,
+    tokens,
+    inactive,
+    defaultChecked,
+    inputId,
+    iconId,
+    isControlled,
+    handleChange,
+    name: inputName,
+    value,
+    ...rest
+  } = _ref3;
+  const {
+    icon: IconComponent,
+    ...stateTokens
+  } = useThemeTokens('Checkbox', {}, {
+    checked: isChecked
+  });
+  const iconTokens = selectIconTokens(stateTokens);
+  return /*#__PURE__*/_jsx(View, { ...selectProps(rest),
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [staticStyles.defaultInputStyles, selectInputStyles(stateTokens, isChecked)],
+      testID: inputId,
+      children: [/*#__PURE__*/_jsx(CheckboxInput, {
+        ref: ref,
+        checked: isChecked,
+        defaultChecked: defaultChecked,
+        disabled: inactive,
+        id: inputId,
+        isControlled: isControlled,
+        onChange: handleChange,
+        name: inputName,
+        value: value
+      }), isChecked && IconComponent && /*#__PURE__*/_jsx(View, {
+        testID: iconId,
+        children: /*#__PURE__*/_jsx(IconComponent, { ...iconTokens
+        })
+      })]
+    })
+  });
+});
+CheckboxButton.displayName = 'CheckboxButton';
+CheckboxButton.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Use `checked` for controlled Checkbox. For uncontrolled Checkbox, use the `defaultChecked` prop.
+   */
+  isChecked: PropTypes.bool,
+
+  /**
+   * Checkbox tokens.
+   */
+  tokens: getTokensSetPropType(tokenKeys, {
+    allowFunction: true
+  }),
+
+  /**
+   * Whether the corresponding input is disabled or active.
+   */
+  inactive: PropTypes.bool,
+
+  /**
+   * Use `defaultChecked` to provide the initial value for an uncontrolled Checkbox.
+   */
+  defaultChecked: PropTypes.bool,
+
+  /**
+   * Checkbox input ID.
+   */
+  inputId: PropTypes.string,
+
+  /**
+   * Checkbox icon ID.
+   */
+  iconId: PropTypes.string,
+
+  /**
+   * Can control the checkbox on the card.
+   */
+  isControlled: PropTypes.bool,
+
+  /**
+   * Callback called when a controlled checkbox gets interacted with.
+   */
+  handleChange: PropTypes.func,
+
+  /**
+   * Associate this checkbox with a group (set as the name attribute).
+   */
+  name: PropTypes.string,
+
+  /**
+   * The value of the checkbox: true or false
+   */
+  value: PropTypes.bool
+};
+export default CheckboxButton;
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  defaultInputStyles: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});

package/lib-module/CheckboxCard/CheckboxCard.js

@@ -0,0 +1,200 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import { applyTextStyles, useTheme, useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, focusHandlerProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useUniqueId, variantProp, viewProps } from '../utils';
+import { PressableCardBase, selectPressableCardTokens } from '../Card';
+import StackView from '../StackView';
+import CheckboxButton, { selectCheckboxTokens } from '../Checkbox/CheckboxButton';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
+const CheckboxCard = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    title,
+    children,
+    inactive,
+    defaultChecked,
+    checked,
+    name: inputName,
+    value,
+    id,
+    iconId,
+    onChange,
+    ...rest
+  } = _ref;
+  const {
+    currentValue: isChecked,
+    setValue: setIsChecked,
+    isControlled
+  } = useInputValue({
+    value: checked,
+    initialValue: defaultChecked,
+    onChange
+  });
+
+  const handleChange = event => {
+    if (!inactive) {
+      setIsChecked(!isChecked, event);
+    }
+  };
+
+  const uniqueId = useUniqueId('CheckboxCard');
+  const inputId = id ?? uniqueId;
+  const uniqueIconId = useUniqueId('CheckboxIcon');
+  const iconCheckboxId = iconId ?? uniqueIconId;
+  const getTokens = useThemeTokensCallback('CheckboxCard', tokens, variant);
+
+  const getCardTokens = cardState => selectPressableCardTokens(getTokens(cardState));
+
+  const {
+    themeOptions
+  } = useTheme();
+  const selectedProps = selectProps({
+    accessibilityRole: 'checkbox',
+    accessibilityState: {
+      checked: isChecked,
+      disabled: inactive
+    },
+    ...rest
+  });
+  return /*#__PURE__*/_jsx(PressableCardBase, {
+    ref: ref,
+    inactive: inactive,
+    checked: isChecked,
+    tokens: getCardTokens,
+    onPress: handleChange,
+    ...selectedProps,
+    children: cardState => {
+      const {
+        checkboxSpace,
+        contentSpace,
+        ...themeTokens
+      } = getTokens(cardState);
+      const checkboxTokens = selectCheckboxTokens(themeTokens, 'checkbox');
+      const titleTokens = selectTokens('Typography', themeTokens);
+      const textStyle = applyTextStyles({ ...titleTokens,
+        themeOptions
+      });
+      return /*#__PURE__*/_jsxs(StackView, {
+        direction: "row",
+        space: checkboxSpace,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [staticStyles.alignWithText, {
+            height: textStyle.lineHeight
+          }],
+          children: /*#__PURE__*/_jsx(CheckboxButton, {
+            tokens: checkboxTokens,
+            isControlled: isControlled,
+            isChecked: isChecked,
+            inactive: inactive,
+            defaultChecked: defaultChecked,
+            inputId: inputId,
+            iconId: iconCheckboxId,
+            handleChange: handleChange,
+            name: inputName,
+            value: value
+          })
+        }), /*#__PURE__*/_jsxs(StackView, {
+          direction: "column",
+          space: contentSpace,
+          tokens: {
+            flexShrink: 1
+          },
+          children: [title ? /*#__PURE__*/_jsx(Text, {
+            style: textStyle,
+            children: title
+          }) : null, typeof children === 'function' ? children(cardState, textStyle) : children]
+        })]
+      });
+    }
+  });
+});
+CheckboxCard.displayName = 'CheckboxCard';
+CheckboxCard.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Content to be displayed at the top of the card alongside the checkbox
+   */
+  title: PropTypes.string,
+
+  /**
+   * Additional content to be displayed below the checkbox.
+   */
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+
+  /**
+   * Use `checked` for controlled checkbox. For uncontrolled checkbox, use the `defaultChecked` prop.
+   */
+  checked: PropTypes.bool,
+
+  /**
+   * Use `defaultChecked` to provide the initial value for an uncontrolled checkbox.
+   */
+  defaultChecked: PropTypes.bool,
+
+  /**
+   * An optional checkboxdescription.
+   */
+  description: PropTypes.string,
+
+  /**
+   * Checkbox card ID.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Checkbox icon ID.
+   */
+  iconId: PropTypes.string,
+
+  /**
+   * Whether the corresponding input is disabled or active.
+   */
+  inactive: PropTypes.bool,
+
+  /**
+   * The label.
+   */
+  label: PropTypes.string,
+
+  /**
+   * Associate this checkbox card with a group (set as the name attribute).
+   */
+  name: PropTypes.string,
+
+  /**
+   * Whether the underlying input triggered a validation error or not.
+   */
+  error: PropTypes.bool,
+
+  /**
+   * The value. Must be unique within the group.
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
+
+  /**
+   * Callback called when a controlled checkbox card gets interacted with.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * checkbox card tokens.
+   */
+  tokens: getTokensPropType('CheckboxCard'),
+
+  /**
+   * checkbox variant.
+   */
+  variant: variantProp.propType
+};
+export default CheckboxCard;
+const staticStyles = StyleSheet.create({
+  alignWithText: {
+    justifyContent: 'center'
+  }
+});

package/lib-module/CheckboxCard/index.js

@@ -0,0 +1,2 @@
+import CheckboxCard from './CheckboxCard';
+export default CheckboxCard;

package/lib-module/StackView/StackView.js

@@ -80,10 +80,13 @@ const StackView = /*#__PURE__*/forwardRef((_ref, ref) => {
     viewport
   });
   const flexStyles = selectFlexStyles(themeTokens);
+  const size = {
+    width: themeTokens.width
+  };
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
     ...selectedProps,
-    style: [flexStyles, staticStyles[direction]],
+    style: [flexStyles, staticStyles[direction], size],
     children: content
   });
 });