@telus-uds/components-web 4.4.3 → 4.5.1

package/CHANGELOG.md

@@ -1,12 +1,32 @@
 # Change Log - @telus-uds/components-web
 
-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 -->
 
+## 4.5.1
+
+Mon, 05 May 2025 21:28:44 GMT
+
+### Patches
+
+- `PreviewCard`: update snapshot (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v3.7.1
+
+## 4.5.0
+
+Thu, 01 May 2025 20:13:57 GMT
+
+### Minor changes
+
+- `InputSupportsProps`: update tooltip type to enhance support to tooltip component (shivam.gupta3@telus.com)
+- `Card`: add href and hrefAttrs props (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v3.7.0
+- Bump @telus-uds/system-theme-tokens to v4.5.0
+
 ## 4.4.3
 
-Thu, 24 Apr 2025 18:52:13 GMT
+Thu, 24 Apr 2025 18:56:23 GMT
 
 ### Patches
 

package/lib/cjs/Card/Card.js

@@ -153,6 +153,8 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
       tokens: getThemeTokens,
       dataSet: dataSet,
       onPress: onPress,
+      href: interactiveCard?.href,
+      hrefAttrs: interactiveCard?.hrefAttrs,
       ...selectProps(rest),
       children: typeof interactiveCard?.body === 'function' ? interactiveCard.body() : interactiveCard.body
     }) : null, children || fullBleedContentPosition !== 'none' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
@@ -238,11 +240,18 @@ Card.propTypes = {
   onPress: _propTypes.default.func,
   /**
    * Object to set interactive card's properties
+   * - body: The body of the interactive card, can be any renderable node
+   * - tokens: The tokens to be used for the interactive card
+   * - 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, _componentsBase.getTokensPropType)('Card'),
-    variant: _componentsBase.variantProp.propType
+    variant: _componentsBase.variantProp.propType,
+    href: _propTypes.default.string,
+    hrefAttrs: _propTypes.default.shape(_componentsBase.hrefAttrsProp.types)
   }),
   /**
    * Apply background image to the card.
@@ -252,6 +261,10 @@ Card.propTypes = {
     src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]).isRequired,
     alt: _propTypes.default.string,
     resizeMode: _componentsBase.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/esm/Card/Card.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Card as CardBase, getTokensPropType, paddingProp, responsiveProps, selectSystemProps, StackView, useThemeTokens, useThemeTokensCallback, variantProp, a11yProps, viewProps, PressableCardBase, useResponsiveProp } from '@telus-uds/components-base';
+import { Card as CardBase, getTokensPropType, paddingProp, responsiveProps, selectSystemProps, StackView, useThemeTokens, useThemeTokensCallback, variantProp, a11yProps, viewProps, PressableCardBase, useResponsiveProp, hrefAttrsProp } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import CardContent from './CardContent';
 import CardFooter from './CardFooter';
@@ -145,6 +145,8 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
       tokens: getThemeTokens,
       dataSet: dataSet,
       onPress: onPress,
+      href: interactiveCard?.href,
+      hrefAttrs: interactiveCard?.hrefAttrs,
       ...selectProps(rest),
       children: typeof interactiveCard?.body === 'function' ? interactiveCard.body() : interactiveCard.body
     }) : null, children || fullBleedContentPosition !== 'none' ? /*#__PURE__*/_jsxs(StackView, {
@@ -230,11 +232,18 @@ Card.propTypes = {
   onPress: PropTypes.func,
   /**
    * Object to set interactive card's properties
+   * - body: The body of the interactive card, can be any renderable node
+   * - tokens: The tokens to be used for the interactive card
+   * - 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'),
-    variant: variantProp.propType
+    variant: variantProp.propType,
+    href: PropTypes.string,
+    hrefAttrs: PropTypes.shape(hrefAttrsProp.types)
   }),
   /**
    * Apply background image to the card.
@@ -244,6 +253,10 @@ Card.propTypes = {
     src: PropTypes.oneOfType([PropTypes.string, 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/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^3.6.0",
+    "@telus-uds/components-base": "^3.7.1",
     "@telus-uds/system-constants": "^3.0.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -13,7 +13,7 @@
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^4.4.0",
+    "@telus-uds/system-theme-tokens": "^4.5.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -82,5 +82,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "4.4.3"
+  "version": "4.5.1"
 }

package/src/Card/Card.jsx

@@ -13,7 +13,8 @@ import {
   a11yProps,
   viewProps,
   PressableCardBase,
-  useResponsiveProp
+  useResponsiveProp,
+  hrefAttrsProp
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import CardContent from './CardContent'
@@ -152,6 +153,8 @@ const Card = React.forwardRef(
             tokens={getThemeTokens}
             dataSet={dataSet}
             onPress={onPress}
+            href={interactiveCard?.href}
+            hrefAttrs={interactiveCard?.hrefAttrs}
             {...selectProps(rest)}
           >
             {typeof interactiveCard?.body === 'function'
@@ -251,11 +254,18 @@ Card.propTypes = {
   onPress: PropTypes.func,
   /**
    * Object to set interactive card's properties
+   * - body: The body of the interactive card, can be any renderable node
+   * - tokens: The tokens to be used for the interactive card
+   * - 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'),
-    variant: variantProp.propType
+    variant: variantProp.propType,
+    href: PropTypes.string,
+    hrefAttrs: PropTypes.shape(hrefAttrsProp.types)
   }),
   /**
    * Apply background image to the card.
@@ -267,7 +277,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/types/common.d.ts

@@ -5,6 +5,7 @@ import type {
   NativeSyntheticEvent,
   TextLayoutEventData
 } from './ReactNative'
+import type { TooltipProps } from './Tooltip'
 
 export interface A11yProps extends AccessibilityProps {}
 
@@ -14,7 +15,7 @@ export interface InputSupportsProps {
   hint?: string
   hintPosition?: 'inline' | 'below'
   feedback?: string
-  tooltip?: string
+  tooltip?: TooltipProps | string
   validation?: 'error' | 'success'
 }