@telus-uds/components-base 3.25.0 → 3.27.0

package/lib/cjs/Checkbox/Checkbox.js

@@ -121,6 +121,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.
@@ -157,7 +183,7 @@ const selectFeedbackTokens = _ref5 => {
  * or the internal state in case of uncontrolled checkbox.
  *
  */
-const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   let {
     checked,
     defaultChecked,
@@ -172,8 +198,9 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     tokens,
     value,
     variant,
+    testID,
     ...rest
-  } = _ref6;
+  } = _ref8;
   const {
     currentValue: isChecked,
     setValue: setIsChecked,
@@ -230,17 +257,18 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
       direction: feedbackPosition === 'top' ? 'column-reverse' : 'column',
       space: 0,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+        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
@@ -251,15 +279,12 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
           });
           const iconTokens = selectIconTokens(stateTokens);
           const labelStyles = selectLabelStyles(stateTokens, themeOptions);
-          const alignWithLabel = label ? [staticStyles.alignWithLabel, {
-            height: labelStyles.lineHeight
-          }] : null;
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
             space: 0,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
               style: staticStyles.container,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-                style: alignWithLabel,
+                style: [staticStyles.iconContainer, selectContainerStyles(stateTokens)],
                 children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
                   style: [staticStyles.defaultInputStyles, selectInputStyles(stateTokens, isChecked)],
                   testID: "Checkbox-Input",
@@ -358,7 +383,11 @@ Checkbox.propTypes = {
   /**
    * An optional Checkbox description.
    */
-  description: _propTypes.default.string
+  description: _propTypes.default.string,
+  /**
+   * A identifier for testing purposes.
+   */
+  testID: _propTypes.default.string
 };
 var _default = exports.default = Checkbox;
 const staticStyles = _StyleSheet.default.create({
@@ -373,9 +402,10 @@ const staticStyles = _StyleSheet.default.create({
     alignItems: 'center',
     justifyContent: 'center'
   },
-  alignWithLabel: {
-    alignSelf: 'flex-start',
-    justifyContent: 'center'
+  iconContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
   },
   removeOutline: {
     outlineStyle: 'none'

package/lib/cjs/InputSupports/InputSupports.js

@@ -72,7 +72,8 @@ const InputSupports = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }), typeof children === 'function' ? children({
       inputId,
       ...a11yProps,
-      validation: feedbackValidation
+      validation: feedbackValidation,
+      accessibilityDescribedBy: feedbackId
     }) : children, feedback || maxCharsReachedErrorMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback.default, {
       id: feedbackId,
       title: feedback || maxCharsReachedErrorMessage,

package/lib/cjs/List/List.js

@@ -13,10 +13,15 @@ var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.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);
 };
 
 /**
@@ -29,6 +34,7 @@ const List = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     showDivider,
     tokens,
     variant,
+    iconVerticalAlign,
     accessibilityRole = _Platform.default.select({
       web: 'list',
       default: undefined
@@ -38,13 +44,17 @@ const List = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const items = _react.default.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.default.cloneElement(child, {
-        showDivider,
-        isLastItem: index + 1 === _react.default.Children.count(children),
+      const childProps = {
         tokens,
         variant,
-        ...child.props
-      });
+        ...child.props,
+        showDivider,
+        isLastItem: index + 1 === _react.default.Children.count(children)
+      };
+      if (!child.props.iconVerticalAlign && iconVerticalAlign) {
+        childProps.iconVerticalAlign = iconVerticalAlign;
+      }
+      return /*#__PURE__*/_react.default.cloneElement(child, childProps);
     }
     return child;
   });
@@ -78,6 +88,11 @@ List.propTypes = {
   /**
    * In case it is not the last item allow display divider
    */
-  showDivider: _propTypes.default.bool
+  showDivider: _propTypes.default.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.default.oneOf(['top', 'center', 'bottom'])
 };
 var _default = exports.default = List;

package/lib/cjs/List/ListItem.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ListItemBase = _interopRequireDefault(require("./ListItemBase"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
@@ -18,6 +19,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     variant,
     children,
     title,
+    iconVerticalAlign = 'top',
     ...listItemProps
   } = _ref;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('List', tokens, variant);
@@ -26,12 +28,27 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     ref: ref,
     ...listItemProps,
     title: title,
+    iconVerticalAlign: iconVerticalAlign,
     children: children
   });
 });
 ListItem.displayName = 'ListItem';
 ListItem.propTypes = {
+  /** Theme tokens for styling */
+  tokens: (0, _utils.getTokensPropType)('List'),
+  /** Variant configuration for the component */
   variant: _utils.variantProp.propType,
-  ..._ListItemBase.default.propTypes
+  /** Content to be rendered within the list item */
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
+  /** Title of the list item */
+  title: _propTypes.default.node,
+  /** Controls the vertical alignment of the icon */
+  iconVerticalAlign: _propTypes.default.oneOf(['top', 'center', 'bottom']),
+  /** Icon to be displayed */
+  icon: _propTypes.default.elementType,
+  /** Color of the icon */
+  iconColor: _propTypes.default.string,
+  /** Size of the icon */
+  iconSize: _propTypes.default.number
 };
 var _default = exports.default = ListItem;

package/lib/cjs/List/ListItemBase.js

@@ -17,6 +17,12 @@ var _ThemeProvider = require("../ThemeProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const VERTICAL_CENTERING_DIVISOR = 2;
+const alignmentMap = {
+  top: 'flex-start',
+  center: 'center',
+  bottom: 'flex-end'
+};
 const selectItemBlockStyles = _ref => {
   let {
     interItemMargin
@@ -38,10 +44,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.default.forwardRef((_ref3, ref) => {
   let {
     tokens,
@@ -52,6 +64,7 @@ const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     children,
     title,
     isLastItem,
+    iconVerticalAlign = 'top',
     accessibilityRole = _Platform.default.select({
       web: 'listitem',
       default: undefined
@@ -65,7 +78,6 @@ const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     iconMarginTop,
     itemIconSize
   } = themeTokens;
-  let adjustedIconMarginTop = iconMarginTop;
   const {
     fontSize,
     lineHeight: lineHeightRatio
@@ -73,9 +85,8 @@ const ListItemBase = /*#__PURE__*/_react.default.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
@@ -102,7 +113,7 @@ const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       iconSize,
       isLastItem
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-      style: staticStyles.container,
+      style: [staticStyles.innerContainer, selectAlignmentStyles(iconVerticalAlign)],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemMark.default, {
         tokens: {
           ...tokens,
@@ -112,7 +123,7 @@ const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         iconColor: iconColor,
         iconSize: iconSize
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-        style: staticStyles.titleAndContentContainer,
+        style: [staticStyles.titleAndContentContainer],
         children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           variant: {
             size: 'h4',
@@ -128,15 +139,21 @@ const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   });
 });
 ListItemBase.displayName = 'ListItem';
+ListItemBase.__UDS_COMPONENT_TYPE__ = 'ListItem';
 const staticStyles = _StyleSheet.default.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 = {
@@ -144,6 +161,8 @@ ListItemBase.propTypes = {
   tokens: (0, _utils.getTokensPropType)('List'),
   variant: _utils.variantProp.propType,
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
+  /** Controls the vertical alignment of the icon */
+  iconVerticalAlign: _propTypes.default.oneOf(['top', 'center', 'bottom']),
   /**
    * Renders side item icon
    */

package/lib/cjs/List/ListItemMark.js

@@ -7,7 +7,6 @@ exports.tokenTypes = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -16,49 +15,29 @@ const tokenTypes = exports.tokenTypes = {
   itemIconSize: _propTypes.default.number.isRequired,
   itemIconColor: _propTypes.default.string.isRequired,
   listGutter: _propTypes.default.number.isRequired,
-  iconMarginTop: _propTypes.default.number.isRequired
+  iconMarginTop: _propTypes.default.number.isRequired,
+  bulletIcon: _propTypes.default.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]);
@@ -70,31 +49,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.default.forwardRef((_ref5, ref) => {
+const ListItemMark = /*#__PURE__*/_react.default.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 = (0, _utils.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__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: [sideItemContainerStyles, bulletContainerStyles],
+      style: containerStyles,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         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) && {
@@ -104,23 +83,21 @@ const ListItemMark = /*#__PURE__*/_react.default.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__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: [sideItemContainerStyles, itemBulletContainerStyles],
+    style: containerStyles,
     ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
-      testID: "unordered-item-bullet",
+      style: bulletStyles,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-        icon: bulletIcon,
+        icon: themeTokens.bulletIcon,
         tokens: {
-          color: bulletColor,
-          size: themeTokens.itemIconSize
+          color: itemIconColor,
+          size: itemIconSize
         }
       })
     })
@@ -142,10 +119,4 @@ ListItemMark.propTypes = {
    */
   iconSize: _propTypes.default.number
 };
-const staticStyles = _StyleSheet.default.create({
-  bulletPositioning: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
 var _default = exports.default = ListItemMark;

package/lib/cjs/List/PressableListItemBase.js

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

package/lib/cjs/PriceLockup/PriceLockup.js

@@ -149,7 +149,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     ...selectProps(rest),
     children: [topText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: staticStyles.topText,
-      children: (0, _renderTypography.default)(topText, topTextTypographyTokens)
+      children: (0, _renderTypography.default)(topText, topTextTypographyTokens, undefined, fontColor)
     }) : null, (0, _renderPrice.default)(price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens, isPriceBaseline), bottomText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
         testID: "price-lockup-divider",

package/lib/esm/Card/Card.js

@@ -16,18 +16,26 @@ const SelectionType = {
   Radio: 'radiogroup',
   None: undefined
 };
-const selectInputStyle = _ref => {
+const selectInputStyle = (_ref, _ref2) => {
   let {
     paddingTop,
-    paddingRight
+    paddingRight,
+    paddingLeft
   } = _ref;
+  let {
+    inputPositionProp
+  } = _ref2;
   return {
     position: 'absolute',
     top: paddingTop,
-    right: paddingRight
+    ...(inputPositionProp === 'left' ? {
+      left: paddingLeft
+    } : {
+      right: paddingRight
+    })
   };
 };
-const getInputProps = _ref2 => {
+const getInputProps = _ref3 => {
   let {
     id,
     checkColor,
@@ -37,7 +45,7 @@ const getInputProps = _ref2 => {
     isChecked,
     isInactive,
     handleChange
-  } = _ref2;
+  } = _ref3;
   return {
     inputId: id,
     tokens: {
@@ -100,7 +108,7 @@ const getInputProps = _ref2 => {
  * you automatically make inaccessible its children, which may or may not be appropriate
  * depending on what you are trying to achieve.
  */
-const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const Card = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     children,
     tokens,
@@ -110,8 +118,9 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     id,
     interactiveCard,
     backgroundImage,
+    testID,
     ...rest
-  } = _ref3;
+  } = _ref4;
   const viewport = useViewport();
   const {
     themeOptions
@@ -182,8 +191,8 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let cardStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
-    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref4) => {
-      let [vp, viewportTokens] = _ref4;
+    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref5) => {
+      let [vp, viewportTokens] = _ref5;
       const tokensToTransform = selectionType ? selectStyles({
         ...viewportTokens,
         paddingTop: 0,
@@ -210,13 +219,18 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     cardStyles = themeTokens;
   }
   const renderInputPerSelectionType = props => {
+    const containerStyle = selectInputStyle(getThemeTokens(), {
+      inputPositionProp: interactiveCard?.inputPosition
+    });
+    const inputTestID = testID && `${testID}-selection-input`;
     if (!isControl) {
       return null;
     }
     switch (selectionType) {
       case SelectionType.Checkbox:
         return /*#__PURE__*/_jsx(View, {
-          style: selectInputStyle(getThemeTokens()),
+          style: containerStyle,
+          testID: inputTestID,
           children: /*#__PURE__*/_jsx(CheckboxButton, {
             ...props,
             tokens: {
@@ -227,7 +241,8 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         });
       case SelectionType.Radio:
         return /*#__PURE__*/_jsx(View, {
-          style: selectInputStyle(getThemeTokens()),
+          style: containerStyle,
+          testID: inputTestID,
           children: /*#__PURE__*/_jsx(RadioButton, {
             ...props,
             tokens: {
@@ -248,6 +263,7 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       dataSet: mediaIds && {
         media: mediaIds
       },
+      testID: testID,
       ...selectProps(rest),
       children: [interactiveCard?.body && /*#__PURE__*/_jsx(PressableCardBase, {
         ref: ref,
@@ -326,7 +342,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.
@@ -343,6 +360,10 @@ 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;