@telus-uds/components-base 3.26.0 → 3.27.0

package/lib/esm/Checkbox/Checkbox.js

@@ -114,6 +114,32 @@ const selectFeedbackTokens = _ref5 => {
     feedbackMarginTop
   };
 };
+const selectPressableStyles = _ref6 => {
+  let {
+    padding,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom
+  } = _ref6;
+  return {
+    padding,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom
+  };
+};
+const selectContainerStyles = _ref7 => {
+  let {
+    iconContainerHeight,
+    iconContainerWidth
+  } = _ref7;
+  return {
+    height: iconContainerHeight,
+    width: iconContainerWidth
+  };
+};
 
 /**
  * Basic Checkbox component.
@@ -150,7 +176,7 @@ const selectFeedbackTokens = _ref5 => {
  * or the internal state in case of uncontrolled checkbox.
  *
  */
-const Checkbox = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+const Checkbox = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     checked,
     defaultChecked,
@@ -165,8 +191,9 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     tokens,
     value,
     variant,
+    testID,
     ...rest
-  } = _ref6;
+  } = _ref8;
   const {
     currentValue: isChecked,
     setValue: setIsChecked,
@@ -223,17 +250,18 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
       direction: feedbackPosition === 'top' ? 'column-reverse' : 'column',
       space: 0,
       children: [/*#__PURE__*/_jsx(Pressable, {
+        testID: testID && `${testID}-pressable`,
         disabled: inactive,
         onKeyDown: handleKeyDown,
         onPress: handleChange,
         ...selectedProps,
-        style: staticStyles.removeOutline,
-        children: _ref7 => {
+        style: [staticStyles.removeOutline, selectPressableStyles(defaultTokens)],
+        children: _ref9 => {
           let {
             focused: focus,
             hovered: hover,
             pressed
-          } = _ref7;
+          } = _ref9;
           const {
             icon: IconComponent,
             ...stateTokens
@@ -244,15 +272,12 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
           });
           const iconTokens = selectIconTokens(stateTokens);
           const labelStyles = selectLabelStyles(stateTokens, themeOptions);
-          const alignWithLabel = label ? [staticStyles.alignWithLabel, {
-            height: labelStyles.lineHeight
-          }] : null;
           return /*#__PURE__*/_jsxs(StackView, {
             space: 0,
             children: [/*#__PURE__*/_jsxs(View, {
               style: staticStyles.container,
               children: [/*#__PURE__*/_jsx(View, {
-                style: alignWithLabel,
+                style: [staticStyles.iconContainer, selectContainerStyles(stateTokens)],
                 children: /*#__PURE__*/_jsxs(View, {
                   style: [staticStyles.defaultInputStyles, selectInputStyles(stateTokens, isChecked)],
                   testID: "Checkbox-Input",
@@ -351,7 +376,11 @@ Checkbox.propTypes = {
   /**
    * An optional Checkbox description.
    */
-  description: PropTypes.string
+  description: PropTypes.string,
+  /**
+   * A identifier for testing purposes.
+   */
+  testID: PropTypes.string
 };
 export default Checkbox;
 const staticStyles = StyleSheet.create({
@@ -366,9 +395,10 @@ const staticStyles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center'
   },
-  alignWithLabel: {
-    alignSelf: 'flex-start',
-    justifyContent: 'center'
+  iconContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
   },
   removeOutline: {
     outlineStyle: 'none'

package/lib/esm/List/List.js

@@ -6,10 +6,15 @@ import PropTypes from 'prop-types';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const LIST_ITEM_TYPE = 'ListItem';
+const LINKS_ITEM_TYPE = 'LinksItem';
 const isListItem = element => {
-  const elementName = element?.type?.displayName || element?.type?.name;
-  // Match our own ListItem, and also, custom list items
-  return Boolean(elementName.match(/Item/));
+  if (!element?.type) return false;
+  if (element.type.__UDS_COMPONENT_TYPE__ === LIST_ITEM_TYPE) {
+    return true;
+  }
+  const elementName = element.type.displayName || element.type.name || '';
+  return elementName === LIST_ITEM_TYPE || elementName.includes(LIST_ITEM_TYPE) || elementName.includes(LINKS_ITEM_TYPE);
 };
 
 /**
@@ -22,6 +27,7 @@ const List = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     showDivider,
     tokens,
     variant,
+    iconVerticalAlign,
     accessibilityRole = Platform.select({
       web: 'list',
       default: undefined
@@ -31,13 +37,17 @@ const List = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const items = React.Children.map(children, (child, index) => {
     // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
     if (isListItem(child)) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        showDivider,
-        isLastItem: index + 1 === React.Children.count(children),
+      const childProps = {
         tokens,
         variant,
-        ...child.props
-      });
+        ...child.props,
+        showDivider,
+        isLastItem: index + 1 === React.Children.count(children)
+      };
+      if (!child.props.iconVerticalAlign && iconVerticalAlign) {
+        childProps.iconVerticalAlign = iconVerticalAlign;
+      }
+      return /*#__PURE__*/React.cloneElement(child, childProps);
     }
     return child;
   });
@@ -71,6 +81,11 @@ List.propTypes = {
   /**
    * In case it is not the last item allow display divider
    */
-  showDivider: PropTypes.bool
+  showDivider: PropTypes.bool,
+  /**
+   * The vertical alignment of the icon in ListItems.
+   * This prop is passed down to ListItem components and can be overridden in individual List.Item components.
+   */
+  iconVerticalAlign: PropTypes.oneOf(['top', 'center', 'bottom'])
 };
 export default List;

package/lib/esm/List/ListItem.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import ListItemBase from './ListItemBase';
 import { useThemeTokens } from '../ThemeProvider';
-import { variantProp } from '../utils';
+import { getTokensPropType, variantProp } from '../utils';
 
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
@@ -13,6 +14,7 @@ const ListItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     variant,
     children,
     title,
+    iconVerticalAlign = 'top',
     ...listItemProps
   } = _ref;
   const themeTokens = useThemeTokens('List', tokens, variant);
@@ -21,12 +23,27 @@ const ListItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ref: ref,
     ...listItemProps,
     title: title,
+    iconVerticalAlign: iconVerticalAlign,
     children: children
   });
 });
 ListItem.displayName = 'ListItem';
 ListItem.propTypes = {
+  /** Theme tokens for styling */
+  tokens: getTokensPropType('List'),
+  /** Variant configuration for the component */
   variant: variantProp.propType,
-  ...ListItemBase.propTypes
+  /** Content to be rendered within the list item */
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  /** Title of the list item */
+  title: PropTypes.node,
+  /** Controls the vertical alignment of the icon */
+  iconVerticalAlign: PropTypes.oneOf(['top', 'center', 'bottom']),
+  /** Icon to be displayed */
+  icon: PropTypes.elementType,
+  /** Color of the icon */
+  iconColor: PropTypes.string,
+  /** Size of the icon */
+  iconSize: PropTypes.number
 };
 export default ListItem;

package/lib/esm/List/ListItemBase.js

@@ -10,6 +10,12 @@ import Typography from '../Typography';
 import { useThemeTokens } from '../ThemeProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const VERTICAL_CENTERING_DIVISOR = 2;
+const alignmentMap = {
+  top: 'flex-start',
+  center: 'center',
+  bottom: 'flex-end'
+};
 const selectItemBlockStyles = _ref => {
   let {
     interItemMargin
@@ -31,10 +37,16 @@ const selectDividerStyles = _ref2 => {
     paddingBottom: interItemMarginWithDivider
   };
 };
+const selectAlignmentStyles = iconVerticalAlign => ({
+  alignItems: alignmentMap[iconVerticalAlign]
+});
 
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
+const calculateIconMarginTop = (itemIconSize, fontSize, lineHeightRatio) => {
+  return (fontSize * lineHeightRatio - itemIconSize) / VERTICAL_CENTERING_DIVISOR;
+};
 const ListItemBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
@@ -45,6 +57,7 @@ const ListItemBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     children,
     title,
     isLastItem,
+    iconVerticalAlign = 'top',
     accessibilityRole = Platform.select({
       web: 'listitem',
       default: undefined
@@ -58,7 +71,6 @@ const ListItemBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     iconMarginTop,
     itemIconSize
   } = themeTokens;
-  let adjustedIconMarginTop = iconMarginTop;
   const {
     fontSize,
     lineHeight: lineHeightRatio
@@ -66,9 +78,8 @@ const ListItemBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     size: 'h4',
     bold: true
   });
-  if (title) {
-    adjustedIconMarginTop = (fontSize * lineHeightRatio - itemIconSize) / 2;
-  }
+  const adjustedIconMarginTop = title ? calculateIconMarginTop(itemIconSize, fontSize, lineHeightRatio) : iconMarginTop;
+
   /**
    * Function responsible returning styling, in case the item is the last shouldn't
    * add extra margin on the bottom, if "showDivider" is true it should add a divider
@@ -95,7 +106,7 @@ const ListItemBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       iconSize,
       isLastItem
     }) : /*#__PURE__*/_jsxs(View, {
-      style: staticStyles.container,
+      style: [staticStyles.innerContainer, selectAlignmentStyles(iconVerticalAlign)],
       children: [/*#__PURE__*/_jsx(ListItemMark, {
         tokens: {
           ...tokens,
@@ -105,7 +116,7 @@ const ListItemBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         iconColor: iconColor,
         iconSize: iconSize
       }), /*#__PURE__*/_jsxs(View, {
-        style: staticStyles.titleAndContentContainer,
+        style: [staticStyles.titleAndContentContainer],
         children: [Boolean(title) && /*#__PURE__*/_jsx(Typography, {
           variant: {
             size: 'h4',
@@ -121,15 +132,21 @@ const ListItemBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   });
 });
 ListItemBase.displayName = 'ListItem';
+ListItemBase.__UDS_COMPONENT_TYPE__ = 'ListItem';
 const staticStyles = StyleSheet.create({
   container: {
+    flexDirection: 'row',
+    width: '100%'
+  },
+  innerContainer: {
     flex: 1,
     flexDirection: 'row'
   },
   titleAndContentContainer: {
     flexDirection: 'column',
-    flexShrink: 1,
-    flexGrow: 1
+    flex: 1,
+    flexGrow: 1,
+    flexShrink: 1
   }
 });
 ListItemBase.propTypes = {
@@ -137,6 +154,8 @@ ListItemBase.propTypes = {
   tokens: getTokensPropType('List'),
   variant: variantProp.propType,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  /** Controls the vertical alignment of the icon */
+  iconVerticalAlign: PropTypes.oneOf(['top', 'center', 'bottom']),
   /**
    * Renders side item icon
    */

package/lib/esm/List/ListItemMark.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Icon from '../Icon';
 import { useVariants } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -9,49 +8,29 @@ export const tokenTypes = {
   itemIconSize: PropTypes.number.isRequired,
   itemIconColor: PropTypes.string.isRequired,
   listGutter: PropTypes.number.isRequired,
-  iconMarginTop: PropTypes.number.isRequired
+  iconMarginTop: PropTypes.number.isRequired,
+  bulletIcon: PropTypes.elementType.isRequired
 };
-const selectItemIconTokens = _ref => {
+const selectContainerStyles = _ref => {
   let {
-    itemIconSize,
-    itemIconColor
+    listGutter
   } = _ref;
   return {
-    size: itemIconSize,
-    color: itemIconColor
-  };
-};
-const selectSideItemContainerStyles = _ref2 => {
-  let {
-    listGutter,
-    iconMarginTop
-  } = _ref2;
-  return {
-    marginTop: iconMarginTop,
-    marginRight: listGutter
+    marginInlineEnd: listGutter,
+    display: 'flex',
+    alignItems: 'flex-start'
   };
 };
-
-// Align bullets with the top line of text the same way icons are aligned
-const selectBulletPositioningStyles = _ref3 => {
+const selectBulletStyles = _ref2 => {
   let {
     itemIconSize
-  } = _ref3;
+  } = _ref2;
   return {
     width: itemIconSize,
-    height: itemIconSize
-  };
-};
-const selectBulletContainerStyles = _ref4 => {
-  let {
-    itemBulletContainerWidth,
-    itemBulletContainerHeight,
-    itemBulletContainerAlign
-  } = _ref4;
-  return {
-    width: itemBulletContainerWidth,
-    height: itemBulletContainerHeight,
-    alignItems: itemBulletContainerAlign
+    height: itemIconSize,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0
   };
 };
 const getIconColorVariants = iconVariants => iconVariants?.filter(variant => variant[0] === 'color').map(variant => variant[1]);
@@ -63,31 +42,31 @@ const getIconColorVariants = iconVariants => iconVariants?.filter(variant => var
  * It's the responsibility of themes to make sure that the supplied tokens align the
  * icon or bullet nicely against the first line of text in a ListIconContent.
  */
-const ListItemMark = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+const ListItemMark = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     icon,
     iconColor,
     iconSize,
     tokens = {}
-  } = _ref5;
+  } = _ref3;
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
-  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
-  const bulletContainerStyles = selectBulletContainerStyles(themeTokens);
-
-  // TODO: Remove it when iconColor custom colors are deprecated.
+  const containerStyles = selectContainerStyles(themeTokens);
   const iconVariants = useVariants('Icon');
   const iconColorVariants = getIconColorVariants(iconVariants);
   if (icon) {
-    const iconTokens = selectItemIconTokens(themeTokens);
+    const {
+      itemIconSize,
+      itemIconColor
+    } = themeTokens;
+    const finalIconSize = iconSize ?? itemIconSize;
+    const finalIconColor = iconColor && !iconColorVariants?.includes(iconColor) ? iconColor : itemIconColor;
     return /*#__PURE__*/_jsx(View, {
-      style: [sideItemContainerStyles, bulletContainerStyles],
+      style: containerStyles,
       children: /*#__PURE__*/_jsx(Icon, {
         icon: icon,
         tokens: {
-          size: iconSize ?? iconTokens.size,
-          ...((iconColor && !iconColorVariants?.includes(iconColor) || !iconColor) && {
-            color: iconColor && !iconColorVariants?.includes(iconColor) ? iconColor : iconTokens.color
-          })
+          size: finalIconSize,
+          color: finalIconColor
         },
         variant: {
           ...(iconColorVariants?.includes(iconColor) && {
@@ -97,23 +76,21 @@ const ListItemMark = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       })
     });
   }
-  const bulletColor = themeTokens.itemBulletColor;
   const {
-    bulletIcon
+    itemIconSize,
+    itemIconColor
   } = themeTokens;
-  const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
-  const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
+  const bulletStyles = selectBulletStyles(themeTokens);
   return /*#__PURE__*/_jsx(View, {
-    style: [sideItemContainerStyles, itemBulletContainerStyles],
+    style: containerStyles,
     ref: ref,
     children: /*#__PURE__*/_jsx(View, {
-      style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
-      testID: "unordered-item-bullet",
+      style: bulletStyles,
       children: /*#__PURE__*/_jsx(Icon, {
-        icon: bulletIcon,
+        icon: themeTokens.bulletIcon,
         tokens: {
-          color: bulletColor,
-          size: themeTokens.itemIconSize
+          color: itemIconColor,
+          size: itemIconSize
         }
       })
     })
@@ -135,10 +112,4 @@ ListItemMark.propTypes = {
    */
   iconSize: PropTypes.number
 };
-const staticStyles = StyleSheet.create({
-  bulletPositioning: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
 export default ListItemMark;

package/lib/esm/List/PressableListItemBase.js

@@ -91,6 +91,7 @@ const PressableListItemBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   });
 });
 PressableListItemBase.displayName = 'PressableListItemBase';
+PressableListItemBase.__UDS_COMPONENT_TYPE__ = 'ListItem';
 const staticStyles = StyleSheet.create({
   itemContainer: {
     flexDirection: 'row',

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.18.0",
+    "@telus-uds/system-theme-tokens": "^4.19.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.26.0",
+  "version": "3.27.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.18.0",
+    "@telus-uds/system-theme-tokens": "^4.19.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.26.0",
+  "version": "3.27.0",
   "types": "types/index.d.ts"
 }

package/src/Card/Card.jsx

@@ -30,10 +30,10 @@ const SelectionType = {
   None: undefined
 }
 
-const selectInputStyle = ({ paddingTop, paddingRight }) => ({
+const selectInputStyle = ({ paddingTop, paddingRight, paddingLeft }, { inputPositionProp }) => ({
   position: 'absolute',
   top: paddingTop,
-  right: paddingRight
+  ...(inputPositionProp === 'left' ? { left: paddingLeft } : { right: paddingRight })
 })
 
 const getInputProps = ({
@@ -108,7 +108,18 @@ const getInputProps = ({
  */
 const Card = React.forwardRef(
   (
-    { children, tokens, variant, dataSet, onPress, id, interactiveCard, backgroundImage, ...rest },
+    {
+      children,
+      tokens,
+      variant,
+      dataSet,
+      onPress,
+      id,
+      interactiveCard,
+      backgroundImage,
+      testID,
+      ...rest
+    },
     ref
   ) => {
     const viewport = useViewport()
@@ -216,6 +227,11 @@ const Card = React.forwardRef(
     }
 
     const renderInputPerSelectionType = (props) => {
+      const containerStyle = selectInputStyle(getThemeTokens(), {
+        inputPositionProp: interactiveCard?.inputPosition
+      })
+      const inputTestID = testID && `${testID}-selection-input`
+
       if (!isControl) {
         return null
       }
@@ -223,13 +239,13 @@ const Card = React.forwardRef(
       switch (selectionType) {
         case SelectionType.Checkbox:
           return (
-            <View style={selectInputStyle(getThemeTokens())}>
+            <View style={containerStyle} testID={inputTestID}>
               <CheckboxButton {...props} tokens={{ ...checkboxTokens, ...props?.tokens }} />
             </View>
           )
         case SelectionType.Radio:
           return (
-            <View style={selectInputStyle(getThemeTokens())}>
+            <View style={containerStyle} testID={inputTestID}>
               <RadioButton {...props} tokens={{ ...radioTokens, ...props?.tokens }} />
             </View>
           )
@@ -245,6 +261,7 @@ const Card = React.forwardRef(
           tokens={interactiveCard?.body ? restOfTokens : cardStyles}
           backgroundImage={backgroundImage}
           dataSet={mediaIds && { media: mediaIds }}
+          testID={testID}
           {...selectProps(rest)}
         >
           {interactiveCard?.body && (
@@ -342,7 +359,8 @@ Card.propTypes = {
     selectionType: PropTypes.oneOf(Object.values(SelectionType)),
     variant: variantProp.propType,
     href: PropTypes.string,
-    hrefAttrs: PropTypes.shape(hrefAttrsProp.types)
+    hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
+    inputPosition: PropTypes.oneOf(['left', 'right'])
   }),
   /**
    * Apply background image to the card.
@@ -365,7 +383,11 @@ Card.propTypes = {
   /**
    * Data set for the card.
    */
-  dataSet: PropTypes.object
+  dataSet: PropTypes.object,
+  /**
+   * Test ID used for e2e testing.
+   */
+  testID: PropTypes.string
 }
 
 export default Card