@telus-uds/components-base 3.6.0 → 3.7.1

package/CHANGELOG.md

@@ -1,12 +1,32 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 24 Apr 2025 18:52:13 GMT and should not be manually modified.
+This log was last generated on Mon, 05 May 2025 21:28:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.7.1
+
+Mon, 05 May 2025 21:28:44 GMT
+
+### Patches
+
+- `Card`: fix underline style (guillermo.peitzner@telus.com)
+
+## 3.7.0
+
+Thu, 01 May 2025 20:13:57 GMT
+
+### Minor changes
+
+- `Card`: add href and hrefAttrs props (guillermo.peitzner@telus.com)
+- `Icon`: add gradient color support (guillermo.peitzner@telus.com)
+- `togglePosition`: add prop to ToggleSwitch & ToggleSwitchGroup (sergio.ramirez@telus.com)
+- `TextArea`: update tooltip prop object to control tooltip entirely by only one prop object (shivam.gupta3@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.5.0
+
 ## 3.6.0
 
-Thu, 24 Apr 2025 18:52:13 GMT
+Thu, 24 Apr 2025 18:56:23 GMT
 
 ### Minor changes
 

package/lib/cjs/Card/Card.js

@@ -251,6 +251,8 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           tokens: getThemeTokens,
           dataSet: dataSet,
           onPress: onPress,
+          href: interactiveCard?.href,
+          hrefAttrs: interactiveCard?.hrefAttrs,
           ...selectProps(rest),
           children: cardState => {
             const {
@@ -313,12 +315,16 @@ Card.propTypes = {
         - `radiogroup`
         - `checkbox`
    * - variant: The variant to be used for the interactive card
+   * - href: The href to be used for the interactive card
+   * - hrefAttrs: The href attributes to be used for the interactive card
    */
   interactiveCard: _propTypes.default.shape({
     body: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
     tokens: (0, _utils.getTokensPropType)('Card'),
     selectionType: _propTypes.default.oneOf(Object.values(SelectionType)),
-    variant: _utils.variantProp.propType
+    variant: _utils.variantProp.propType,
+    href: _propTypes.default.string,
+    hrefAttrs: _propTypes.default.shape(_props.hrefAttrsProp.types)
   }),
   /**
    * Apply background image to the card.
@@ -329,6 +335,10 @@ Card.propTypes = {
     src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
     alt: _propTypes.default.string,
     resizeMode: _props.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
-  })
+  }),
+  /**
+   * Data set for the card.
+   */
+  dataSet: _propTypes.default.object
 };
 var _default = exports.default = Card;

package/lib/cjs/Card/PressableCardBase.js

@@ -8,6 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _ViewportProvider = require("../ViewportProvider");
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
@@ -88,8 +90,69 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
   });
   const handleKeyDown = event => {
     // The expected keyboard shortcut for selecting a focused item is the Space key
-    if (event?.key === ' ') handleChange(event);
+    if (event?.key === ' ') handleChange?.(event);
   };
+  const [hovered, setHovered] = _react.default.useState(false);
+  const [focused, setFocused] = _react.default.useState(false);
+  const [pressed, setPressed] = _react.default.useState(false);
+  if (_Platform.default.OS === 'web' && href) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      ref: ref,
+      style: getOuterBorderStyle({
+        pressed,
+        focused,
+        hovered
+      }),
+      dataSet: dataSet,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      ...selectProps({
+        ...rest,
+        accessibilityRole
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        href: href,
+        tabIndex: 0,
+        onClick: event => {
+          setPressed(false);
+          handleChange?.(event);
+        },
+        onKeyDown: event => {
+          if (event.key === ' ') {
+            setPressed(true);
+            handleKeyDown(event);
+          }
+        },
+        onKeyUp: event => {
+          if (event.key === ' ') setPressed(false);
+        },
+        onMouseDown: () => setPressed(true),
+        onMouseUp: () => setPressed(false),
+        onFocus: () => setFocused(true),
+        onBlur: () => {
+          setFocused(false);
+          setPressed(false);
+        },
+        style: {
+          ...staticStyles.container,
+          textDecoration: 'none'
+        },
+        ...(hrefAttrs || {}),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
+          tokens: getCardTokens({
+            pressed,
+            focused,
+            hovered
+          }),
+          children: typeof children === 'function' ? children(getCardState({
+            pressed,
+            focused,
+            hovered
+          })) : children
+        })
+      })
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
     href: href,
@@ -108,6 +171,12 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     })
   });
 });
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    flex: 1,
+    display: 'flex'
+  }
+});
 PressableCardBase.displayName = 'PressableCardBase';
 PressableCardBase.propTypes = {
   ...selectedSystemPropTypes,

package/lib/cjs/Icon/Icon.js

@@ -31,7 +31,8 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const iconContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
     title: accessibilityLabel,
     size: size,
-    color: themeTokens.color
+    color: themeTokens.color,
+    gradient: themeTokens.gradient
   });
   const paddingStyles = variant?.padding ? {
     padding: themeTokens.width,

package/lib/cjs/InputLabel/InputLabel.js

@@ -13,6 +13,7 @@ var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _LabelContent = _interopRequireDefault(require("./LabelContent"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _shared = _interopRequireDefault(require("../Tooltip/shared"));
 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]);
@@ -66,6 +67,11 @@ const InputLabel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
+  const getTooltipProps = () => {
+    return typeof tooltip === 'string' ? {
+      content: tooltip
+    } : tooltip;
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       ref: ref,
@@ -87,8 +93,8 @@ const InputLabel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           color: themeTokens.color
         }],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-          content: tooltip,
-          copy: copy
+          copy: copy,
+          ...getTooltipProps()
         })
       }), maxCharacterAllowed && isHintInline && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
         style: [selectHintStyles({
@@ -143,7 +149,7 @@ InputLabel.propTypes = {
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */
-  tooltip: _propTypes.default.string,
+  tooltip: _propTypes.default.oneOfType([_shared.default, _propTypes.default.string]),
   /**
    * Current number of characterts of an input text.
    */

package/lib/cjs/InputSupports/InputSupports.js

@@ -13,6 +13,7 @@ var _ThemeProvider = require("../ThemeProvider");
 var _useInputSupports = _interopRequireDefault(require("./useInputSupports"));
 var _utils = require("../utils");
 var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _shared = _interopRequireDefault(require("../Tooltip/shared"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const InputSupports = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
@@ -117,9 +118,12 @@ InputSupports.propTypes = {
    */
   feedbackProps: _propTypes.default.object,
   /**
-   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+   * an optional `Tooltip`. If set, tooltip will be shown next to the label.
+   * Props can be passed to the tooltip in one of the following ways.
+   * 1. `tooltip` as a string - The content of the tooltip.
+   * 2. `tooltip` as an object - Tooltip component props to be passed.
    */
-  tooltip: _propTypes.default.string,
+  tooltip: _propTypes.default.oneOfType([_shared.default, _propTypes.default.string]),
   /**
    * Use to visually mark an input as valid or invalid.
    */

package/lib/cjs/List/ListItemMark.js

@@ -75,7 +75,6 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     iconSize,
     tokens = {}
   } = _ref5;
-  const IconComponent = icon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
   const bulletContainerStyles = selectBulletContainerStyles(themeTokens);
@@ -83,9 +82,14 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     const iconTokens = selectItemIconTokens(themeTokens);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [sideItemContainerStyles, bulletContainerStyles],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
-        size: iconSize || iconTokens.size,
-        color: iconColor || iconTokens.color
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        icon: icon,
+        tokens: {
+          size: iconSize ?? iconTokens.size
+        },
+        variant: {
+          color: iconColor ?? iconTokens.color
+        }
       })
     });
   }

package/lib/cjs/ToggleSwitch/ToggleSwitch.js

@@ -139,6 +139,7 @@ const ToggleSwitch = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
     variant,
     accessibilityRole = 'switch',
     accessibilityLabel = label,
+    togglePosition = 'end',
     ...rest
   } = _ref9;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ToggleSwitch', tokens, variant);
@@ -157,9 +158,10 @@ const ToggleSwitch = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
   const inputId = id ?? uniqueId;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
     space: themeTokens.space,
-    direction: "row",
+    direction: togglePosition === 'start' ? 'row-reverse' : 'row',
     tokens: {
-      alignItems: 'center'
+      alignItems: 'center',
+      justifyContent: 'start'
     },
     children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [selectLabelStyles(themeTokens), staticStyles.containText],
@@ -265,7 +267,13 @@ ToggleSwitch.propTypes = {
   /**
    * Content of an optional Tooltip. If set, a tooltip button will be shown next to the label.
    */
-  tooltip: _propTypes.default.string
+  tooltip: _propTypes.default.string,
+  /**
+   * Controls the position of the switch in relation to the label.
+   * - 'start': switch on the start, before the `label` and `tooltip`.
+   * - 'end': switch to the end, after the `label` and `tooltip` (default).
+   */
+  togglePosition: _propTypes.default.oneOf(['start', 'end'])
 };
 const staticStyles = _StyleSheet.default.create({
   track: {

package/lib/cjs/ToggleSwitch/ToggleSwitchGroup.js

@@ -79,6 +79,7 @@ const ToggleSwitchGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
       onChange: itemOnChange,
       ref: itemRef,
       tooltip: itemTooltip,
+      togglePosition,
       ...itemRest
     } = _ref2;
     const isSelected = currentValues.includes(id);
@@ -104,6 +105,7 @@ const ToggleSwitchGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
       inactive: inactive,
       label: label,
       tooltip: itemTooltip,
+      togglePosition: togglePosition,
       ...itemA11y,
       ...selectItemProps(itemRest)
     }, id);
@@ -163,7 +165,13 @@ ToggleSwitchGroup.propTypes = {
     /**
      * An optional ref for one individual ToggleSwitch in the ToggleSwitchGroup
      */
-    ref: _airbnbPropTypes.default.ref()
+    ref: _airbnbPropTypes.default.ref(),
+    /**
+     * Controls the position of the switch in relation to the label.
+     * - 'start': switch on the start, before the `label` and `tooltip`.
+     * - 'end': switch to the end, after the `label` and `tooltip` (default).
+     */
+    togglePosition: _propTypes.default.oneOf(['start', 'end'])
   })),
   /**
    * If provided, this function is called when the current selection is changed

package/lib/cjs/Tooltip/shared.js

@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
+var _tokens = require("../utils/props/tokens");
+var _variantProp = _interopRequireDefault(require("../utils/props/variantProp"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const propTypes = {
   /**
@@ -41,8 +42,8 @@ const propTypes = {
    * Set to `true` to open the tooltip on hover
    */
   activateOnHover: _propTypes.default.bool,
-  tooltipButtonTokens: (0, _utils.getTokensPropType)('TooltipButton'),
-  tokens: (0, _utils.getTokensPropType)('Tooltip'),
-  variant: _utils.variantProp.propType
+  tooltipButtonTokens: (0, _tokens.getTokensPropType)('TooltipButton'),
+  tokens: (0, _tokens.getTokensPropType)('Tooltip'),
+  variant: _variantProp.default.propType
 };
 var _default = exports.default = propTypes;

package/lib/cjs/utils/props/inputSupportsProps.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _shared = _interopRequireDefault(require("../../Tooltip/shared"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var _default = exports.default = {
   types: {
@@ -38,9 +39,12 @@ var _default = exports.default = {
      */
     feedbackProps: _propTypes.default.object,
     /**
-     * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+     * an optional `Tooltip`. If set, tooltip will be shown next to the label.
+     * Props can be passed to the tooltip in one of the following ways.
+     * 1. `tooltip` as a string - The content of the tooltip.
+     * 2. `tooltip` as an object - Tooltip component props to be passed.
      */
-    tooltip: _propTypes.default.string,
+    tooltip: _propTypes.default.oneOfType([_shared.default, _propTypes.default.string]),
     /**
      * Use to visually mark an input as valid or invalid.
      */

package/lib/esm/Card/Card.js

@@ -4,7 +4,7 @@ import View from "react-native-web/dist/exports/View";
 import { useThemeTokens, useThemeTokensCallback, useResponsiveThemeTokens, useTheme } from '../ThemeProvider';
 import { getTokensPropType, variantProp, StyleSheet, createMediaQueryStyles } from '../utils';
 import { useViewport } from '../ViewportProvider';
-import { a11yProps, linkProps, selectSystemProps, viewProps, responsiveProps } from '../utils/props';
+import { a11yProps, linkProps, selectSystemProps, viewProps, responsiveProps, hrefAttrsProp } from '../utils/props';
 import CardBase from './CardBase';
 import PressableCardBase from './PressableCardBase';
 import CheckboxButton from '../Checkbox/CheckboxButton';
@@ -244,6 +244,8 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           tokens: getThemeTokens,
           dataSet: dataSet,
           onPress: onPress,
+          href: interactiveCard?.href,
+          hrefAttrs: interactiveCard?.hrefAttrs,
           ...selectProps(rest),
           children: cardState => {
             const {
@@ -306,12 +308,16 @@ Card.propTypes = {
         - `radiogroup`
         - `checkbox`
    * - variant: The variant to be used for the interactive card
+   * - href: The href to be used for the interactive card
+   * - hrefAttrs: The href attributes to be used for the interactive card
    */
   interactiveCard: PropTypes.shape({
     body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
     tokens: getTokensPropType('Card'),
     selectionType: PropTypes.oneOf(Object.values(SelectionType)),
-    variant: variantProp.propType
+    variant: variantProp.propType,
+    href: PropTypes.string,
+    hrefAttrs: PropTypes.shape(hrefAttrsProp.types)
   }),
   /**
    * Apply background image to the card.
@@ -322,6 +328,10 @@ Card.propTypes = {
     src: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
     alt: PropTypes.string,
     resizeMode: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
-  })
+  }),
+  /**
+   * Data set for the card.
+   */
+  dataSet: PropTypes.object
 };
 export default Card;

package/lib/esm/Card/PressableCardBase.js

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Platform from "react-native-web/dist/exports/Platform";
+import View from "react-native-web/dist/exports/View";
+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';
@@ -80,8 +82,69 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   });
   const handleKeyDown = event => {
     // The expected keyboard shortcut for selecting a focused item is the Space key
-    if (event?.key === ' ') handleChange(event);
+    if (event?.key === ' ') handleChange?.(event);
   };
+  const [hovered, setHovered] = React.useState(false);
+  const [focused, setFocused] = React.useState(false);
+  const [pressed, setPressed] = React.useState(false);
+  if (Platform.OS === 'web' && href) {
+    return /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      style: getOuterBorderStyle({
+        pressed,
+        focused,
+        hovered
+      }),
+      dataSet: dataSet,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      ...selectProps({
+        ...rest,
+        accessibilityRole
+      }),
+      children: /*#__PURE__*/_jsx("a", {
+        href: href,
+        tabIndex: 0,
+        onClick: event => {
+          setPressed(false);
+          handleChange?.(event);
+        },
+        onKeyDown: event => {
+          if (event.key === ' ') {
+            setPressed(true);
+            handleKeyDown(event);
+          }
+        },
+        onKeyUp: event => {
+          if (event.key === ' ') setPressed(false);
+        },
+        onMouseDown: () => setPressed(true),
+        onMouseUp: () => setPressed(false),
+        onFocus: () => setFocused(true),
+        onBlur: () => {
+          setFocused(false);
+          setPressed(false);
+        },
+        style: {
+          ...staticStyles.container,
+          textDecoration: 'none'
+        },
+        ...(hrefAttrs || {}),
+        children: /*#__PURE__*/_jsx(CardBase, {
+          tokens: getCardTokens({
+            pressed,
+            focused,
+            hovered
+          }),
+          children: typeof children === 'function' ? children(getCardState({
+            pressed,
+            focused,
+            hovered
+          })) : children
+        })
+      })
+    });
+  }
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     href: href,
@@ -100,6 +163,12 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     })
   });
 });
+const staticStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    display: 'flex'
+  }
+});
 PressableCardBase.displayName = 'PressableCardBase';
 PressableCardBase.propTypes = {
   ...selectedSystemPropTypes,

package/lib/esm/Icon/Icon.js

@@ -24,7 +24,8 @@ const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const iconContent = /*#__PURE__*/_jsx(IconComponent, {
     title: accessibilityLabel,
     size: size,
-    color: themeTokens.color
+    color: themeTokens.color,
+    gradient: themeTokens.gradient
   });
   const paddingStyles = variant?.padding ? {
     padding: themeTokens.width,

package/lib/esm/InputLabel/InputLabel.js

@@ -7,6 +7,7 @@ import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps } from '../utils';
 import LabelContent from './LabelContent';
 import Tooltip from '../Tooltip';
+import tooltipPropTypes from '../Tooltip/shared';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectLabelStyles = (tokens, themeOptions) => applyTextStyles({
@@ -59,6 +60,11 @@ const InputLabel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const {
     themeOptions
   } = useTheme();
+  const getTooltipProps = () => {
+    return typeof tooltip === 'string' ? {
+      content: tooltip
+    } : tooltip;
+  };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
       ref: ref,
@@ -80,8 +86,8 @@ const InputLabel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           color: themeTokens.color
         }],
         children: /*#__PURE__*/_jsx(Tooltip, {
-          content: tooltip,
-          copy: copy
+          copy: copy,
+          ...getTooltipProps()
         })
       }), maxCharacterAllowed && isHintInline && /*#__PURE__*/_jsxs(Text, {
         style: [selectHintStyles({
@@ -136,7 +142,7 @@ InputLabel.propTypes = {
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */
-  tooltip: PropTypes.string,
+  tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
   /**
    * Current number of characterts of an input text.
    */

package/lib/esm/InputSupports/InputSupports.js

@@ -7,6 +7,7 @@ import { useThemeTokens } from '../ThemeProvider';
 import useInputSupports from './useInputSupports';
 import { getTokensPropType, useCopy } from '../utils';
 import dictionary from './dictionary';
+import tooltipPropTypes from '../Tooltip/shared';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -110,9 +111,12 @@ InputSupports.propTypes = {
    */
   feedbackProps: PropTypes.object,
   /**
-   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+   * an optional `Tooltip`. If set, tooltip will be shown next to the label.
+   * Props can be passed to the tooltip in one of the following ways.
+   * 1. `tooltip` as a string - The content of the tooltip.
+   * 2. `tooltip` as an object - Tooltip component props to be passed.
    */
-  tooltip: PropTypes.string,
+  tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
   /**
    * Use to visually mark an input as valid or invalid.
    */

package/lib/esm/List/ListItemMark.js

@@ -3,7 +3,7 @@ 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 { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const tokenTypes = {
   itemIconSize: PropTypes.number.isRequired,
   itemIconColor: PropTypes.string.isRequired,
@@ -68,7 +68,6 @@ const ListItemMark = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     iconSize,
     tokens = {}
   } = _ref5;
-  const IconComponent = icon || /*#__PURE__*/_jsx(_Fragment, {});
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
   const bulletContainerStyles = selectBulletContainerStyles(themeTokens);
@@ -76,9 +75,14 @@ const ListItemMark = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     const iconTokens = selectItemIconTokens(themeTokens);
     return /*#__PURE__*/_jsx(View, {
       style: [sideItemContainerStyles, bulletContainerStyles],
-      children: /*#__PURE__*/_jsx(IconComponent, {
-        size: iconSize || iconTokens.size,
-        color: iconColor || iconTokens.color
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: icon,
+        tokens: {
+          size: iconSize ?? iconTokens.size
+        },
+        variant: {
+          color: iconColor ?? iconTokens.color
+        }
       })
     });
   }

package/lib/esm/ToggleSwitch/ToggleSwitch.js

@@ -132,6 +132,7 @@ const ToggleSwitch = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
     variant,
     accessibilityRole = 'switch',
     accessibilityLabel = label,
+    togglePosition = 'end',
     ...rest
   } = _ref9;
   const getTokens = useThemeTokensCallback('ToggleSwitch', tokens, variant);
@@ -150,9 +151,10 @@ const ToggleSwitch = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
   const inputId = id ?? uniqueId;
   return /*#__PURE__*/_jsxs(StackView, {
     space: themeTokens.space,
-    direction: "row",
+    direction: togglePosition === 'start' ? 'row-reverse' : 'row',
     tokens: {
-      alignItems: 'center'
+      alignItems: 'center',
+      justifyContent: 'start'
     },
     children: [Boolean(label) && /*#__PURE__*/_jsx(View, {
       style: [selectLabelStyles(themeTokens), staticStyles.containText],
@@ -258,7 +260,13 @@ ToggleSwitch.propTypes = {
   /**
    * Content of an optional Tooltip. If set, a tooltip button will be shown next to the label.
    */
-  tooltip: PropTypes.string
+  tooltip: PropTypes.string,
+  /**
+   * Controls the position of the switch in relation to the label.
+   * - 'start': switch on the start, before the `label` and `tooltip`.
+   * - 'end': switch to the end, after the `label` and `tooltip` (default).
+   */
+  togglePosition: PropTypes.oneOf(['start', 'end'])
 };
 const staticStyles = StyleSheet.create({
   track: {

package/lib/esm/ToggleSwitch/ToggleSwitchGroup.js

@@ -72,6 +72,7 @@ const ToggleSwitchGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       onChange: itemOnChange,
       ref: itemRef,
       tooltip: itemTooltip,
+      togglePosition,
       ...itemRest
     } = _ref2;
     const isSelected = currentValues.includes(id);
@@ -97,6 +98,7 @@ const ToggleSwitchGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       inactive: inactive,
       label: label,
       tooltip: itemTooltip,
+      togglePosition: togglePosition,
       ...itemA11y,
       ...selectItemProps(itemRest)
     }, id);
@@ -156,7 +158,13 @@ ToggleSwitchGroup.propTypes = {
     /**
      * An optional ref for one individual ToggleSwitch in the ToggleSwitchGroup
      */
-    ref: ABBPropTypes.ref()
+    ref: ABBPropTypes.ref(),
+    /**
+     * Controls the position of the switch in relation to the label.
+     * - 'start': switch on the start, before the `label` and `tooltip`.
+     * - 'end': switch to the end, after the `label` and `tooltip` (default).
+     */
+    togglePosition: PropTypes.oneOf(['start', 'end'])
   })),
   /**
    * If provided, this function is called when the current selection is changed

package/lib/esm/Tooltip/shared.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
-import { getTokensPropType, variantProp } from '../utils';
+import { getTokensPropType } from '../utils/props/tokens';
+import variantProp from '../utils/props/variantProp';
 const propTypes = {
   /**
    * Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the

package/lib/esm/utils/props/inputSupportsProps.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import tooltipPropTypes from '../../Tooltip/shared';
 export default {
   types: {
     /**
@@ -31,9 +32,12 @@ export default {
      */
     feedbackProps: PropTypes.object,
     /**
-     * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+     * an optional `Tooltip`. If set, tooltip will be shown next to the label.
+     * Props can be passed to the tooltip in one of the following ways.
+     * 1. `tooltip` as a string - The content of the tooltip.
+     * 2. `tooltip` as an object - Tooltip component props to be passed.
      */
-    tooltip: PropTypes.string,
+    tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
     /**
      * Use to visually mark an input as valid or invalid.
      */

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.4.0",
+    "@telus-uds/system-theme-tokens": "^4.5.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.6.0",
+  "version": "3.7.1",
   "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.4.0",
+    "@telus-uds/system-theme-tokens": "^4.5.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.6.0",
+  "version": "3.7.1",
   "types": "types/index.d.ts"
 }

package/src/Card/Card.jsx

@@ -9,7 +9,14 @@ import {
 } from '../ThemeProvider'
 import { getTokensPropType, variantProp, StyleSheet, createMediaQueryStyles } from '../utils'
 import { useViewport } from '../ViewportProvider'
-import { a11yProps, linkProps, selectSystemProps, viewProps, responsiveProps } from '../utils/props'
+import {
+  a11yProps,
+  linkProps,
+  selectSystemProps,
+  viewProps,
+  responsiveProps,
+  hrefAttrsProp
+} from '../utils/props'
 import CardBase from './CardBase'
 import PressableCardBase from './PressableCardBase'
 import CheckboxButton from '../Checkbox/CheckboxButton'
@@ -227,6 +234,8 @@ const Card = React.forwardRef(
                 tokens={getThemeTokens}
                 dataSet={dataSet}
                 onPress={onPress}
+                href={interactiveCard?.href}
+                hrefAttrs={interactiveCard?.hrefAttrs}
                 {...selectProps(rest)}
               >
                 {(cardState) => {
@@ -308,12 +317,16 @@ Card.propTypes = {
         - `radiogroup`
         - `checkbox`
    * - variant: The variant to be used for the interactive card
+   * - href: The href to be used for the interactive card
+   * - hrefAttrs: The href attributes to be used for the interactive card
    */
   interactiveCard: PropTypes.shape({
     body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
     tokens: getTokensPropType('Card'),
     selectionType: PropTypes.oneOf(Object.values(SelectionType)),
-    variant: variantProp.propType
+    variant: variantProp.propType,
+    href: PropTypes.string,
+    hrefAttrs: PropTypes.shape(hrefAttrsProp.types)
   }),
   /**
    * Apply background image to the card.
@@ -326,7 +339,11 @@ Card.propTypes = {
     resizeMode: responsiveProps.getTypeOptionallyByViewport(
       PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])
     )
-  })
+  }),
+  /**
+   * Data set for the card.
+   */
+  dataSet: PropTypes.object
 }
 
 export default Card

package/src/Card/PressableCardBase.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Pressable, Platform } from 'react-native'
+import { Pressable, Platform, View, StyleSheet } from 'react-native'
 
 import { useViewport } from '../ViewportProvider'
 import { applyOuterBorder, validateThemeTokens } from '../ThemeProvider'
@@ -118,7 +118,57 @@ const PressableCardBase = React.forwardRef(
     const handleChange = linkProps.handleHref({ href, onPress })
     const handleKeyDown = (event) => {
       // The expected keyboard shortcut for selecting a focused item is the Space key
-      if (event?.key === ' ') handleChange(event)
+      if (event?.key === ' ') handleChange?.(event)
+    }
+
+    const [hovered, setHovered] = React.useState(false)
+    const [focused, setFocused] = React.useState(false)
+    const [pressed, setPressed] = React.useState(false)
+
+    if (Platform.OS === 'web' && href) {
+      return (
+        <View
+          ref={ref}
+          style={getOuterBorderStyle({ pressed, focused, hovered })}
+          dataSet={dataSet}
+          onMouseEnter={() => setHovered(true)}
+          onMouseLeave={() => setHovered(false)}
+          {...selectProps({ ...rest, accessibilityRole })}
+        >
+          <a
+            href={href}
+            tabIndex={0}
+            onClick={(event) => {
+              setPressed(false)
+              handleChange?.(event)
+            }}
+            onKeyDown={(event) => {
+              if (event.key === ' ') {
+                setPressed(true)
+                handleKeyDown(event)
+              }
+            }}
+            onKeyUp={(event) => {
+              if (event.key === ' ') setPressed(false)
+            }}
+            onMouseDown={() => setPressed(true)}
+            onMouseUp={() => setPressed(false)}
+            onFocus={() => setFocused(true)}
+            onBlur={() => {
+              setFocused(false)
+              setPressed(false)
+            }}
+            style={{ ...staticStyles.container, textDecoration: 'none' }}
+            {...(hrefAttrs || {})}
+          >
+            <CardBase tokens={getCardTokens({ pressed, focused, hovered })}>
+              {typeof children === 'function'
+                ? children(getCardState({ pressed, focused, hovered }))
+                : children}
+            </CardBase>
+          </a>
+        </View>
+      )
     }
 
     return (
@@ -141,6 +191,14 @@ const PressableCardBase = React.forwardRef(
     )
   }
 )
+
+const staticStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    display: 'flex'
+  }
+})
+
 PressableCardBase.displayName = 'PressableCardBase'
 
 PressableCardBase.propTypes = {

package/src/Icon/Icon.jsx

@@ -24,7 +24,12 @@ const Icon = React.forwardRef(
     const size = scalesWithText ? themeTokens.size * fontScale : themeTokens.size
 
     const iconContent = (
-      <IconComponent title={accessibilityLabel} size={size} color={themeTokens.color} />
+      <IconComponent
+        title={accessibilityLabel}
+        size={size}
+        color={themeTokens.color}
+        gradient={themeTokens.gradient}
+      />
     )
 
     const paddingStyles = variant?.padding

package/src/InputLabel/InputLabel.jsx

@@ -14,6 +14,7 @@ import {
 
 import LabelContent from './LabelContent'
 import Tooltip from '../Tooltip'
+import tooltipPropTypes from '../Tooltip/shared'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -56,10 +57,14 @@ const InputLabel = React.forwardRef(
     const themeTokens = useThemeTokens('InputLabel', tokens, variant)
 
     const hasTooltip = tooltip !== undefined
+
     const isHintInline = hintPosition === 'inline'
 
     const { themeOptions } = useTheme()
 
+    const getTooltipProps = () => {
+      return typeof tooltip === 'string' ? { content: tooltip } : tooltip
+    }
     return (
       <>
         <View ref={ref} style={staticStyles.container} {...selectProps(rest)}>
@@ -94,7 +99,7 @@ const InputLabel = React.forwardRef(
                 }
               ]}
             >
-              <Tooltip content={tooltip} copy={copy} />
+              <Tooltip copy={copy} {...getTooltipProps()} />
             </View>
           )}
           {maxCharacterAllowed && isHintInline && (
@@ -156,7 +161,7 @@ InputLabel.propTypes = {
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */
-  tooltip: PropTypes.string,
+  tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
   /**
    * Current number of characterts of an input text.
    */

package/src/InputSupports/InputSupports.jsx

@@ -8,6 +8,7 @@ import { useThemeTokens } from '../ThemeProvider'
 import useInputSupports from './useInputSupports'
 import { getTokensPropType, useCopy } from '../utils'
 import dictionary from './dictionary'
+import tooltipPropTypes from '../Tooltip/shared'
 
 const InputSupports = React.forwardRef(
   (
@@ -115,9 +116,12 @@ InputSupports.propTypes = {
    */
   feedbackProps: PropTypes.object,
   /**
-   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+   * an optional `Tooltip`. If set, tooltip will be shown next to the label.
+   * Props can be passed to the tooltip in one of the following ways.
+   * 1. `tooltip` as a string - The content of the tooltip.
+   * 2. `tooltip` as an object - Tooltip component props to be passed.
    */
-  tooltip: PropTypes.string,
+  tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
   /**
    * Use to visually mark an input as valid or invalid.
    */

package/src/List/ListItemMark.jsx

@@ -45,8 +45,6 @@ const selectBulletContainerStyles = ({
  * icon or bullet nicely against the first line of text in a ListIconContent.
  */
 const ListItemMark = React.forwardRef(({ icon, iconColor, iconSize, tokens = {} }, ref) => {
-  const IconComponent = icon || <></>
-
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens
 
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
@@ -56,7 +54,11 @@ const ListItemMark = React.forwardRef(({ icon, iconColor, iconSize, tokens = {}
     const iconTokens = selectItemIconTokens(themeTokens)
     return (
       <View style={[sideItemContainerStyles, bulletContainerStyles]}>
-        <IconComponent size={iconSize || iconTokens.size} color={iconColor || iconTokens.color} />
+        <Icon
+          icon={icon}
+          tokens={{ size: iconSize ?? iconTokens.size }}
+          variant={{ color: iconColor ?? iconTokens.color }}
+        />
       </View>
     )
   }

package/src/ToggleSwitch/ToggleSwitch.jsx

@@ -107,6 +107,7 @@ const ToggleSwitch = React.forwardRef(
       variant,
       accessibilityRole = 'switch',
       accessibilityLabel = label,
+      togglePosition = 'end',
       ...rest
     },
     ref
@@ -125,8 +126,13 @@ const ToggleSwitch = React.forwardRef(
       selectButtonTokens(getTokens(buttonState), getTokens(themeTokens))
     const uniqueId = useUniqueId('toggleSwitch')
     const inputId = id ?? uniqueId
+
     return (
-      <StackView space={themeTokens.space} direction="row" tokens={{ alignItems: 'center' }}>
+      <StackView
+        space={themeTokens.space}
+        direction={togglePosition === 'start' ? 'row-reverse' : 'row'}
+        tokens={{ alignItems: 'center', justifyContent: 'start' }}
+      >
         {Boolean(label) && (
           <View style={[selectLabelStyles(themeTokens), staticStyles.containText]}>
             <InputLabel
@@ -225,7 +231,13 @@ ToggleSwitch.propTypes = {
   /**
    * Content of an optional Tooltip. If set, a tooltip button will be shown next to the label.
    */
-  tooltip: PropTypes.string
+  tooltip: PropTypes.string,
+  /**
+   * Controls the position of the switch in relation to the label.
+   * - 'start': switch on the start, before the `label` and `tooltip`.
+   * - 'end': switch to the end, after the `label` and `tooltip` (default).
+   */
+  togglePosition: PropTypes.oneOf(['start', 'end'])
 }
 
 const staticStyles = StyleSheet.create({

package/src/ToggleSwitch/ToggleSwitchGroup.jsx

@@ -87,6 +87,7 @@ const ToggleSwitchGroup = React.forwardRef(
           onChange: itemOnChange,
           ref: itemRef,
           tooltip: itemTooltip,
+          togglePosition,
           ...itemRest
         },
         index
@@ -117,6 +118,7 @@ const ToggleSwitchGroup = React.forwardRef(
             inactive={inactive}
             label={label}
             tooltip={itemTooltip}
+            togglePosition={togglePosition}
             {...itemA11y}
             {...selectItemProps(itemRest)}
           />
@@ -182,7 +184,13 @@ ToggleSwitchGroup.propTypes = {
       /**
        * An optional ref for one individual ToggleSwitch in the ToggleSwitchGroup
        */
-      ref: ABBPropTypes.ref()
+      ref: ABBPropTypes.ref(),
+      /**
+       * Controls the position of the switch in relation to the label.
+       * - 'start': switch on the start, before the `label` and `tooltip`.
+       * - 'end': switch to the end, after the `label` and `tooltip` (default).
+       */
+      togglePosition: PropTypes.oneOf(['start', 'end'])
     })
   ),
   /**

package/src/Tooltip/shared.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
-
-import { getTokensPropType, variantProp } from '../utils'
+import { getTokensPropType } from '../utils/props/tokens'
+import variantProp from '../utils/props/variantProp'
 
 const propTypes = {
   /**

package/src/utils/props/inputSupportsProps.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types'
+import tooltipPropTypes from '../../Tooltip/shared'
 
 export default {
   types: {
@@ -32,9 +33,12 @@ export default {
      */
     feedbackProps: PropTypes.object,
     /**
-     * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+     * an optional `Tooltip`. If set, tooltip will be shown next to the label.
+     * Props can be passed to the tooltip in one of the following ways.
+     * 1. `tooltip` as a string - The content of the tooltip.
+     * 2. `tooltip` as an object - Tooltip component props to be passed.
      */
-    tooltip: PropTypes.string,
+    tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
     /**
      * Use to visually mark an input as valid or invalid.
      */

package/types/ToggleSwitch.d.ts

@@ -51,4 +51,5 @@ export interface ToggleSwitchProps {
   id?: string
   testID?: string
   tokens?: ToggleSwitchTokens
+  togglePosition?: 'start' | 'end'
 }