@telus-uds/components-base 3.23.0 → 3.24.0

package/lib/cjs/Shortcuts/ShortcutsItem.js

@@ -0,0 +1,280 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DYNAMIC_WIDTH_VARIANT = 'dynamic';
+const EQUAL_WIDTH_VARIANT = 'equal';
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.linkProps, _utils.viewProps]);
+const selectPressableStyles = (tokens, widthVariant, equalWidth) => {
+  const styles = {
+    borderColor: tokens.borderColor,
+    borderRadius: tokens.borderRadius,
+    borderWidth: tokens.borderWidth,
+    ..._Platform.default.select({
+      web: {
+        outline: 'none'
+      }
+    })
+  };
+  if (widthVariant === DYNAMIC_WIDTH_VARIANT) {
+    styles.width = 'auto';
+  } else if (widthVariant === EQUAL_WIDTH_VARIANT) {
+    if (equalWidth) {
+      styles.width = equalWidth;
+    } else {
+      styles.minWidth = tokens.width;
+    }
+  } else {
+    styles.width = tokens.width;
+  }
+  return styles;
+};
+const selectIconContainerStyles = tokens => ({
+  paddingBottom: tokens.iconContainerPaddingBottom,
+  paddingLeft: tokens.iconContainerPaddingLeft,
+  paddingRight: tokens.iconContainerPaddingRight,
+  paddingTop: tokens.iconContainerPaddingTop
+});
+const selectIconVariant = () => ({
+  background: true,
+  padding: 'medium'
+});
+const selectIconTokens = tokens => ({
+  backgroundColor: tokens.iconBackgroundColor,
+  color: tokens.iconColor,
+  size: tokens.iconSize,
+  width: tokens.iconWidth
+});
+const selectImageStyles = tokens => ({
+  width: tokens.imageWidth,
+  height: tokens.imageHeight
+});
+const selectLabelContainerStyles = tokens => ({
+  paddingBottom: tokens.labelContainerPaddingBottom,
+  paddingLeft: tokens.labelContainerPaddingLeft,
+  paddingRight: tokens.labelContainerPaddingRight,
+  paddingTop: tokens.labelContainerPaddingTop
+});
+const selectTitleTextStyles = tokens => (0, _ThemeProvider.applyTextStyles)({
+  fontColor: tokens.labelFontColor,
+  fontName: tokens.labelFontName,
+  fontSize: tokens.labelFontSize,
+  fontWeight: tokens.labelFontWeight,
+  lineHeight: tokens.labelLineHeight,
+  textDecorationLine: tokens.labelUnderline,
+  textAlign: tokens.labelTextAlign
+});
+
+/**
+ * A clickable shortcut item component that displays an icon or image with an optional label.
+ * Can be used within a Shortcuts container to create a grid of navigation shortcuts.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} [props.icon] - Icon identifier to display
+ * @param {Object} [props.image={ src: '', alt: '' }] - Image object with src and alt properties
+ * @param {string} [props.image.src] - Image source URL
+ * @param {string} [props.image.alt] - Image alt text for accessibility
+ * @param {string|React.ReactNode} props.label - Label text or content to display below the icon/image
+ * @param {boolean} [props.hideLabel=false] - Whether to hide the label for this specific item
+ * @param {string} [props.href] - Link URL for navigation
+ * @param {Object} [props.iconVariant] - Icon variant to apply to this specific item
+ * @param {Object} [props.tokens] - Theme tokens to customize appearance
+ * @param {Object} [props.variant] - Variant configuration object for this specific item
+ * @param {string} [props.variant.width] - Width variant (e.g., 'dynamic', 'equal')
+ * @param {Function} [props.onPressableStateChange] - Callback function that receives the pressable state object (pressed, hovered, focused)
+ * @param {number} [props.maxWidth] - Maximum width for equal width variant (injected by Shortcuts container)
+ * @param {Function} [props.registerWidth] - Callback to register width for equal width variant (injected by Shortcuts container)
+ * @param {Object} [props.containerVariant] - Variant configuration from Shortcuts container (injected by Shortcuts container)
+ * @param {boolean} [props.containerHideLabels] - Hide labels setting from Shortcuts container (injected by Shortcuts container)
+ * @param {Object} [props.containerIconVariant] - Icon variant from Shortcuts container (injected by Shortcuts container)
+ * @param {React.Ref} ref - Forwarded ref to the Pressable component
+ * @returns {React.ReactElement} The rendered shortcut item
+ *
+ * @example
+ * <ShortcutsItem
+ *   icon={HomeIcon}
+ *   label="Home"
+ *   href="/home"
+ *   onPressableStateChange={(state) => console.log(state)}
+ * />
+ */
+const ShortcutsItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    icon,
+    image = {
+      src: '',
+      alt: ''
+    },
+    label,
+    hideLabel = false,
+    href,
+    iconVariant,
+    tokens,
+    variant,
+    onPressableStateChange,
+    maxWidth,
+    registerWidth,
+    containerVariant,
+    containerHideLabels,
+    containerIconVariant,
+    ...rest
+  } = _ref;
+  const mergedVariant = {
+    ...containerVariant,
+    ...variant
+  };
+  const widthVariant = mergedVariant?.width;
+  const shouldHideLabel = hideLabel || containerHideLabels;
+  const mergedIconVariant = iconVariant ?? containerIconVariant;
+  const getThemeTokens = (0, _ThemeProvider.useThemeTokensCallback)('ShortcutsItem', tokens, mergedVariant);
+  const getTokens = pressableState => getThemeTokens((0, _utils.resolvePressableState)(pressableState));
+  const {
+    onPress,
+    ...props
+  } = _utils.clickProps.toPressProps(rest);
+  const {
+    hrefAttrs,
+    rawRest
+  } = _utils.hrefAttrsProp.bundle(props);
+  const selectedProps = selectProps({
+    href,
+    onPress: _utils.linkProps.handleHref({
+      href,
+      onPress
+    }),
+    hrefAttrs,
+    ...rawRest
+  });
+  const handleLayout = event => {
+    if (widthVariant === EQUAL_WIDTH_VARIANT && registerWidth) {
+      const {
+        width
+      } = event.nativeEvent.layout;
+      registerWidth(width);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
+    style: pressableState => selectPressableStyles(getTokens(pressableState), widthVariant, maxWidth),
+    onLayout: handleLayout,
+    ...selectedProps,
+    children: pressableState => {
+      const themeTokens = getTokens(pressableState);
+      if (onPressableStateChange) {
+        onPressableStateChange((0, _utils.resolvePressableState)(pressableState));
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: staticStyles.container,
+        children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectIconContainerStyles(themeTokens),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            icon: icon,
+            variant: mergedIconVariant ?? selectIconVariant(),
+            tokens: mergedIconVariant ? {} : selectIconTokens(themeTokens),
+            ...(_Platform.default.OS === 'web' && {
+              accessibilityLabel: label
+            })
+          })
+        }), !icon && image && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+          source: image.src,
+          alt: image.alt,
+          style: selectImageStyles(themeTokens),
+          resizeMethod: "resize",
+          accessibilityIgnoresInvertColors: true
+        }), label && !shouldHideLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [staticStyles.label, selectLabelContainerStyles(themeTokens)],
+          children: (0, _utils.wrapStringsInText)(label, {
+            style: selectTitleTextStyles(themeTokens)
+          })
+        })]
+      });
+    }
+  });
+});
+ShortcutsItem.displayName = 'ShortcutsItem';
+ShortcutsItem.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('ShortcutsItem'),
+  variant: _utils.variantProp.propType,
+  /**
+   * Icon for the ShortcutsItem
+   */
+  icon: _propTypes.default.elementType,
+  /**
+   * Image for the ShortcutsItem
+   */
+  image: _propTypes.default.shape({
+    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]),
+    alt: _propTypes.default.string
+  }),
+  /**
+   * Label for the ShortcutsItem
+   */
+  label: _propTypes.default.string,
+  /**
+   * Hide the label for this specific ShortcutsItem. When true, the label is visually hidden but remains accessible to screen readers via the icon's accessibilityLabel.
+   */
+  hideLabel: _propTypes.default.bool,
+  /**
+   * href for the ShortcutsItem
+   */
+  href: _propTypes.default.string,
+  /**
+   * Icon variant for this specific ShortcutsItem
+   */
+  iconVariant: _utils.variantProp.propType,
+  /**
+   * Callback function that receives the pressable state object containing pressed, hovered, and focused boolean properties
+   */
+  onPressableStateChange: _propTypes.default.func,
+  /**
+   * Maximum width for equal width variant (automatically injected by Shortcuts container)
+   * @private
+   */
+  maxWidth: _propTypes.default.number,
+  /**
+   * Callback to register width for equal width variant (automatically injected by Shortcuts container)
+   * @private
+   */
+  registerWidth: _propTypes.default.func,
+  /**
+   * Variant configuration from Shortcuts container (automatically injected by Shortcuts container)
+   * @private
+   */
+  containerVariant: _utils.variantProp.propType,
+  /**
+   * Hide labels setting from Shortcuts container (automatically injected by Shortcuts container)
+   * @private
+   */
+  containerHideLabels: _propTypes.default.bool,
+  /**
+   * Icon variant from Shortcuts container (automatically injected by Shortcuts container)
+   * @private
+   */
+  containerIconVariant: _utils.variantProp.propType
+};
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  label: {
+    flexWrap: 'wrap'
+  }
+});
+var _default = exports.default = ShortcutsItem;

package/lib/cjs/Shortcuts/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ShortcutsItem", {
+  enumerable: true,
+  get: function () {
+    return _ShortcutsItem.default;
+  }
+});
+exports.default = void 0;
+var _Shortcuts = _interopRequireDefault(require("./Shortcuts"));
+var _ShortcutsItem = _interopRequireDefault(require("./ShortcutsItem"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Shortcuts.default;

package/lib/cjs/Tooltip/Tooltip.native.js

@@ -169,6 +169,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     nativeID,
     activateOnHover = false,
     tooltipButtonTokens,
+    testID,
     ...rest
   } = _ref7;
   const [isOpen, setIsOpen] = _react.default.useState(false);
@@ -312,6 +313,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
         display: inline ? 'inline-block' : 'flex'
       }
     })],
+    testID: testID,
     ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
       onPress: toggleIsOpen,

package/lib/cjs/index.js

@@ -59,6 +59,8 @@ var _exportNames = {
   Responsive: true,
   Search: true,
   Select: true,
+  Shortcuts: true,
+  ShortcutsItem: true,
   SideNav: true,
   Skeleton: true,
   SkipLink: true,
@@ -432,6 +434,18 @@ Object.defineProperty(exports, "Select", {
     return _Select.default;
   }
 });
+Object.defineProperty(exports, "Shortcuts", {
+  enumerable: true,
+  get: function () {
+    return _Shortcuts.default;
+  }
+});
+Object.defineProperty(exports, "ShortcutsItem", {
+  enumerable: true,
+  get: function () {
+    return _Shortcuts.ShortcutsItem;
+  }
+});
 Object.defineProperty(exports, "SideNav", {
   enumerable: true,
   get: function () {
@@ -744,6 +758,7 @@ var _RadioCard = _interopRequireWildcard(require("./RadioCard"));
 var _Responsive = _interopRequireDefault(require("./Responsive"));
 var _Search = _interopRequireDefault(require("./Search"));
 var _Select = _interopRequireDefault(require("./Select"));
+var _Shortcuts = _interopRequireWildcard(require("./Shortcuts"));
 var _SideNav = _interopRequireDefault(require("./SideNav"));
 var _Skeleton = _interopRequireDefault(require("./Skeleton"));
 var _SkipLink = _interopRequireDefault(require("./SkipLink"));

package/lib/esm/Card/CardBase.js

@@ -9,8 +9,15 @@ import { applyShadowToken } from '../ThemeProvider';
 import { getTokensPropType, responsiveProps, useResponsiveProp, formatImageSource } from '../utils';
 import { a11yProps, viewProps, selectSystemProps } from '../utils/props';
 import backgroundImageStylesMap from './backgroundImageStylesMap';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import FlexGrid from '../FlexGrid/FlexGrid';
+import FlexGridRow from '../FlexGrid/Row';
+import FlexGridCol from '../FlexGrid/Col';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const GRID_COLUMNS = 12;
+const isOverlayColor = color => {
+  return color && typeof color === 'string' && color.startsWith('rgba(');
+};
 const setBackgroundImage = _ref => {
   let {
     src,
@@ -24,12 +31,9 @@ const setBackgroundImage = _ref => {
   const borderRadius = cardStyle?.borderRadius || 0;
   const borderWidth = cardStyle?.borderWidth || 0;
   const adjustedBorderRadius = Math.max(0, borderRadius - borderWidth);
-
-  // For contain mode with position and align, use CSS background properties for web
   if (backgroundImageResizeMode === 'contain' && backgroundImagePosition && backgroundImageAlign) {
     const positionKey = `${backgroundImagePosition}-${backgroundImageAlign}`;
     if (Platform.OS === 'web') {
-      // Create background position based on position and align
       let backgroundPosition;
       switch (positionKey) {
         case 'top-start':
@@ -73,7 +77,6 @@ const setBackgroundImage = _ref => {
         children: content
       });
     }
-    // For React Native, apply positioning styles with full dimensions
     const positionStyles = backgroundImageStylesMap[positionKey] || {};
     return /*#__PURE__*/_jsxs(View, {
       style: [staticStyles.containContainer, {
@@ -92,8 +95,6 @@ const setBackgroundImage = _ref => {
       })]
     });
   }
-
-  // Use ImageBackground for all other resize modes and React Native
   return /*#__PURE__*/_jsx(ImageBackground, {
     source: src,
     imageStyle: {
@@ -119,6 +120,10 @@ export const selectStyles = _ref2 => {
     paddingLeft,
     paddingRight,
     paddingTop,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
     minWidth,
     shadow,
     backgroundGradient,
@@ -126,9 +131,18 @@ export const selectStyles = _ref2 => {
     maxHeight,
     overflowY
   } = _ref2;
+  const hasGradient = (gradient || backgroundGradient) && Platform.OS === 'web';
+  let backgroundImageValue = null;
+  if (hasGradient) {
+    const gradientObj = gradient || backgroundGradient;
+    const gradientString = `linear-gradient(${gradientObj.angle}deg, ${gradientObj.stops[0].color}, ${gradientObj.stops[1].color})`;
+    const shouldApplyOverlay = (gradient || backgroundGradient && backgroundColor && backgroundColor !== 'transparent') && isOverlayColor(backgroundColor);
+    backgroundImageValue = shouldApplyOverlay ? `linear-gradient(${backgroundColor}, ${backgroundColor}), ${gradientString}` : gradientString;
+  }
+  const boxShadowColor = isOverlayColor(backgroundColor) ? backgroundColor : 'white';
   return {
     flex,
-    backgroundColor,
+    backgroundColor: hasGradient ? 'transparent' : backgroundColor,
     borderColor,
     borderRadius,
     borderWidth,
@@ -136,16 +150,20 @@ export const selectStyles = _ref2 => {
     paddingLeft,
     paddingRight,
     paddingTop,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
     minWidth,
     ...applyShadowToken(shadow),
     ...(gradient && Platform.OS === 'web' ? {
-      backgroundImage: `linear-gradient(${gradient.angle}deg, ${gradient.stops[0].color}, ${gradient.stops[1].color})`,
+      backgroundImage: backgroundImageValue,
       backgroundOrigin: `border-box`,
-      boxShadow: `inset 0 1000px white`,
+      boxShadow: `inset 0 1000px ${boxShadowColor}`,
       border: `${borderWidth}px solid transparent`
     } : {}),
     ...(backgroundGradient && Platform.OS === 'web' ? {
-      backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
+      backgroundImage: backgroundImageValue
     } : {}),
     ...(Platform.OS === 'web' ? {
       maxHeight,
@@ -164,9 +182,11 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     tokens,
     dataSet,
     backgroundImage,
+    fullBleedContent,
+    cardState,
     ...rest
   } = _ref3;
-  const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens);
+  const cardStyle = selectStyles(typeof tokens === 'function' ? tokens(cardState) : tokens);
   const props = selectProps(rest);
   let content = children;
   const {
@@ -180,9 +200,13 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const backgroundImagePosition = useResponsiveProp(position);
   const backgroundImageAlign = useResponsiveProp(align);
   const imageSourceViewport = formatImageSource(useResponsiveProp(src));
+  const {
+    content: fullBleedImageContent,
+    position: fullBleedContentPosition,
+    imgCol
+  } = fullBleedContent || {};
+  const fullBleedPosition = useResponsiveProp(fullBleedContentPosition, 'bottom');
   if (backgroundImage && src) {
-    // When there's a background image, separate the padding from the container style
-    // so the image can fill the entire container without padding interference
     const {
       paddingTop,
       paddingBottom,
@@ -190,8 +214,6 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       paddingRight,
       ...containerStyle
     } = cardStyle;
-
-    // Only create padding wrapper if there's actually padding defined
     const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight;
     const paddedContent = hasPadding ? /*#__PURE__*/_jsx(View, {
       style: {
@@ -219,6 +241,53 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       children: content
     });
   }
+  if (fullBleedContent && fullBleedImageContent) {
+    const {
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      ...containerStyle
+    } = cardStyle;
+    const imageColumns = imgCol || {
+      xs: GRID_COLUMNS
+    };
+    const textColumns = {};
+    Object.keys(imageColumns).forEach(breakpoint => {
+      textColumns[breakpoint] = GRID_COLUMNS - (imageColumns[breakpoint] || GRID_COLUMNS);
+    });
+    const imageFirst = fullBleedPosition === 'top' || fullBleedPosition === 'left';
+    const imageColContent = /*#__PURE__*/_jsx(FlexGridCol, {
+      ...imageColumns,
+      style: staticStyles.fullBleedImageCol,
+      children: fullBleedImageContent
+    });
+    const textColContent = /*#__PURE__*/_jsx(FlexGridCol, {
+      ...textColumns,
+      style: {
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight
+      },
+      children: children
+    });
+    return /*#__PURE__*/_jsx(View, {
+      style: containerStyle,
+      dataSet: dataSet,
+      ref: ref,
+      ...props,
+      children: /*#__PURE__*/_jsx(FlexGrid, {
+        children: /*#__PURE__*/_jsx(FlexGridRow, {
+          children: imageFirst ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [imageColContent, textColContent]
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [textColContent, imageColContent]
+          })
+        })
+      })
+    });
+  }
   return /*#__PURE__*/_jsx(View, {
     style: cardStyle,
     dataSet: dataSet,
@@ -228,6 +297,13 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   });
 });
 CardBase.displayName = 'CardBase';
+export const fullBleedContentPropTypes = PropTypes.shape({
+  content: PropTypes.node.isRequired,
+  alt: PropTypes.string,
+  position: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['bottom', 'left', 'right', 'top'])),
+  align: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['start', 'end', 'center', 'stretch'])),
+  imgCol: PropTypes.object
+});
 const staticStyles = StyleSheet.create({
   imageBackground: {
     width: '100%',
@@ -249,6 +325,9 @@ const staticStyles = StyleSheet.create({
     position: 'absolute',
     width: '100%',
     height: '100%'
+  },
+  fullBleedImageCol: {
+    padding: 0
   }
 });
 CardBase.propTypes = {
@@ -266,6 +345,7 @@ CardBase.propTypes = {
     resizeMode: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
     position: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['bottom', 'left', 'right', 'top'])),
     align: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['start', 'end', 'center', 'stretch']))
-  })
+  }),
+  fullBleedContent: fullBleedContentPropTypes
 };
 export default CardBase;

package/lib/esm/Card/PressableCardBase.js

@@ -7,10 +7,10 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { useViewport } from '../ViewportProvider';
 import { applyOuterBorder, validateThemeTokens } from '../ThemeProvider';
 import { a11yProps, clickProps, focusHandlerProps, getTokensSetPropType, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
-import CardBase from './CardBase';
+import CardBase, { fullBleedContentPropTypes } from './CardBase';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
-const tokenKeys = ['flex', 'backgroundColor', 'borderColor', 'gradient', 'borderRadius', 'borderWidth', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'minWidth', 'shadow', 'contentAlignItems', 'contentJustifyContent', 'contentFlexGrow', 'contentFlexShrink',
+const tokenKeys = ['flex', 'backgroundColor', 'borderColor', 'gradient', 'borderRadius', 'borderWidth', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'minWidth', 'shadow', 'contentAlignItems', 'contentJustifyContent', 'contentFlexGrow', 'contentFlexShrink',
 // Outer border tokens. TODO: centralise common token sets like these as part of
 // https://github.com/telus/universal-design-system/issues/782
 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap', 'icon', 'iconBackgroundColor', 'iconColor', 'iconSize', 'inputBackgroundColor', 'inputBorderColor', 'inputBorderRadius', 'inputBorderWidth', 'inputHeight', 'inputShadow', 'inputWidth'];
@@ -32,6 +32,7 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     hrefAttrs,
     dataSet,
     backgroundImage,
+    fullBleedContent,
     accessibilityRole = href ? 'link' : undefined,
     ...rawRest
   } = _ref;
@@ -125,10 +126,7 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           setFocused(false);
           setPressed(false);
         },
-        style: {
-          ...staticStyles.linkContainer,
-          textDecoration: 'none'
-        },
+        style: staticStyles.linkContainer,
         ...(hrefAttrs || {}),
         role: accessibilityRole,
         children: /*#__PURE__*/_jsx(CardBase, {
@@ -138,6 +136,7 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             hovered
           }),
           backgroundImage: backgroundImage,
+          fullBleedContent: fullBleedContent,
           children: typeof children === 'function' ? children(getCardState({
             pressed,
             focused,
@@ -162,6 +161,7 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children: pressableState => /*#__PURE__*/_jsx(CardBase, {
       tokens: getCardTokens(pressableState),
       backgroundImage: backgroundImage,
+      fullBleedContent: fullBleedContent,
       children: typeof children === 'function' ? children(getCardState(pressableState)) : children
     })
   });
@@ -175,7 +175,8 @@ const staticStyles = StyleSheet.create({
     flex: 1,
     display: 'flex',
     alignItems: 'stretch',
-    justifyContent: 'flex-start'
+    justifyContent: 'flex-start',
+    textDecorationLine: 'none'
   }
 });
 PressableCardBase.displayName = 'PressableCardBase';
@@ -195,6 +196,7 @@ PressableCardBase.propTypes = {
     resizeMode: PropTypes.oneOfType([PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']), PropTypes.object]),
     position: PropTypes.oneOfType([PropTypes.oneOf(['bottom', 'left', 'right', 'top']), PropTypes.object]),
     align: PropTypes.oneOfType([PropTypes.oneOf(['start', 'end', 'center', 'stretch']), PropTypes.object])
-  })
+  }),
+  fullBleedContent: fullBleedContentPropTypes
 };
 export default withLinkRouter(PressableCardBase);

package/lib/esm/HorizontalScroll/HorizontalScroll.js

@@ -4,7 +4,7 @@ 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 { validateThemeTokens, resolveThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensSetPropType, selectSystemProps, selectTokens, viewProps } from '../utils';
+import { a11yProps, getTokensSetPropType, selectSystemProps, selectTokens, variantProp, viewProps } from '../utils';
 import ScrollViewEnd from './ScrollViewEnd';
 import { getItemPositionScrollTarget, itemPositionsPropType } from './itemPositions';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -27,6 +27,7 @@ const HorizontalScroll = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ScrollButton,
     tokens,
     itemPositions,
+    variant,
     children,
     ...rest
   } = _ref;
@@ -70,8 +71,9 @@ const HorizontalScroll = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     setScrollOffset(x);
   };
   const scrollMax = Math.max(0, contentWidth - containerWidth);
-  const showNextButton = scrollOffset < scrollMax;
-  const showPreviousButton = scrollOffset > 0;
+  const hideNavigationButtons = variant?.hideNavigationButtons || false;
+  const showNextButton = scrollOffset < scrollMax && !hideNavigationButtons;
+  const showPreviousButton = scrollOffset > 0 && !hideNavigationButtons;
   const scrollRef = React.useRef(null);
   const scrollTo = targetX => {
     if (typeof scrollRef.current?.scrollTo === 'function') {
@@ -162,6 +164,7 @@ HorizontalScroll.propTypes = {
   tokens: getTokensSetPropType(tokenKeys, {
     allowFunction: true
   }),
+  variant: variantProp.propType,
   children: PropTypes.node
 };
 export default HorizontalScroll;