@telus-uds/components-base 3.26.0 → 3.27.0

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/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;

package/lib/esm/Card/CardBase.js

@@ -107,9 +107,51 @@ const setBackgroundImage = _ref => {
     children: content
   });
 };
+const selectPaddedContentStyles = _ref2 => {
+  let {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    borderWidth,
+    borderColor,
+    borderRadius,
+    hasInteractiveBorder
+  } = _ref2;
+  return {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    ...(hasInteractiveBorder ? {
+      borderWidth,
+      borderColor,
+      borderRadius
+    } : {})
+  };
+};
+const selectInteractiveOverlayStyles = _ref3 => {
+  let {
+    backgroundColor,
+    borderRadius,
+    borderWidth
+  } = _ref3;
+  const adjustedBorderRadius = Math.max(0, borderRadius - borderWidth);
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor,
+    borderRadius: adjustedBorderRadius,
+    pointerEvents: 'none',
+    zIndex: 1
+  };
+};
 
 // Ensure explicit selection of tokens
-export const selectStyles = _ref2 => {
+export const selectStyles = _ref4 => {
   let {
     flex,
     backgroundColor,
@@ -130,7 +172,7 @@ export const selectStyles = _ref2 => {
     gradient,
     maxHeight,
     overflowY
-  } = _ref2;
+  } = _ref4;
   const hasGradient = (gradient || backgroundGradient) && Platform.OS === 'web';
   let backgroundImageValue = null;
   if (hasGradient) {
@@ -176,7 +218,7 @@ export const selectStyles = _ref2 => {
  * A themeless base component for Card which components can apply theme tokens to. Not
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
-const CardBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const CardBase = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     children,
     tokens,
@@ -185,7 +227,7 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     fullBleedContent,
     cardState,
     ...rest
-  } = _ref3;
+  } = _ref5;
   const cardStyle = selectStyles(typeof tokens === 'function' ? tokens(cardState) : tokens);
   const props = selectProps(rest);
   let content = children;
@@ -212,26 +254,51 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       paddingBottom,
       paddingLeft,
       paddingRight,
+      borderWidth,
+      borderColor,
+      borderRadius,
+      backgroundColor,
       ...containerStyle
     } = cardStyle;
     const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight;
-    const paddedContent = hasPadding ? /*#__PURE__*/_jsx(View, {
-      style: {
+    const hasInteractiveBorder = borderWidth && borderWidth > 0;
+    const hasInteractiveOverlay = isOverlayColor(backgroundColor);
+    const paddedContent = hasPadding || hasInteractiveBorder ? /*#__PURE__*/_jsx(View, {
+      style: selectPaddedContentStyles({
         paddingTop,
         paddingBottom,
         paddingLeft,
-        paddingRight
-      },
+        paddingRight,
+        borderWidth,
+        borderColor,
+        borderRadius,
+        hasInteractiveBorder
+      }),
       children: children
     }) : children;
+    const contentWithOverlay = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [hasInteractiveOverlay && Platform.OS === 'web' && /*#__PURE__*/_jsx(View, {
+        style: selectInteractiveOverlayStyles({
+          backgroundColor,
+          borderRadius,
+          borderWidth
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: staticStyles.contentOverlay,
+        children: paddedContent
+      })]
+    });
     content = setBackgroundImage({
       src: imageSourceViewport,
       alt,
       backgroundImageResizeMode,
       backgroundImagePosition,
       backgroundImageAlign,
-      content: paddedContent,
-      cardStyle: containerStyle
+      content: contentWithOverlay,
+      cardStyle: {
+        ...containerStyle,
+        borderRadius
+      }
     });
     return /*#__PURE__*/_jsx(View, {
       style: containerStyle,
@@ -313,7 +380,7 @@ const staticStyles = StyleSheet.create({
     position: 'relative',
     width: '100%',
     height: '100%',
-    zIndex: 1
+    zIndex: 2
   },
   containContainer: {
     width: '100%',