@telus-uds/components-web 2.25.0 → 2.26.0

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Sat, 18 Nov 2023 02:25:11 GMT and should not be manually modified.
+This log was last generated on Fri, 01 Dec 2023 20:57:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.26.0
+
+Fri, 01 Dec 2023 20:57:37 GMT
+
+### Minor changes
+
+- `Card`: Add interactive section (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/components-base to v1.71.0
+- Bump @telus-uds/system-theme-tokens to v2.47.0
+
+### Patches
+
+- fix tokens type for Multiselect props (email not defined)
+
+## 2.25.1
+
+Mon, 27 Nov 2023 21:20:44 GMT
+
+### Patches
+
+- TS defenitions for WebVideo (srikanthkhari@gmail.com)
+- Bump @telus-uds/components-base to v1.70.0
+
 ## 2.25.0
 
-Sat, 18 Nov 2023 02:25:11 GMT
+Sat, 18 Nov 2023 02:32:49 GMT
 
 ### Minor changes
 

package/lib/Card/Card.js

@@ -16,27 +16,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /* eslint-disable react/require-default-props */
 
-const selectCardBaseTokens = _ref => {
-  let {
-    backgroundColor,
-    borderColor,
-    gradient,
-    borderWidth,
-    borderRadius,
-    shadow,
-    minWidth
-  } = _ref;
-  return {
-    backgroundColor,
-    borderColor,
-    gradient,
-    borderWidth,
-    borderRadius,
-    shadow,
-    minWidth
-  };
-};
-
 // Passes React Native-oriented system props through UDS Card
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.viewProps]);
 
@@ -75,8 +54,11 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
     footerPadding,
     fullBleedImage,
     fullBleedContent = fullBleedImage,
-    tokens,
+    tokens = {},
     variant,
+    interactiveCard,
+    onPress,
+    dataSet,
     ...rest
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
     fullBleedContent: {
@@ -93,9 +75,15 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
 
   // If the card has rounded corners and a full bleed image, we need to apply
   // those corners on the image as well, but partially
-  const cardTokens = (0, _componentsBase.useThemeTokens)('Card', tokens, variant);
+  const {
+    borderRadius
+  } = (0, _componentsBase.useThemeTokens)('Card', tokens, variant);
+  const getThemeTokens = (0, _componentsBase.useThemeTokensCallback)('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
+    interactive: true,
+    ...((interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.variant) || {})
+  });
   const hasFooter = Boolean(footer);
-  const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(cardTokens === null || cardTokens === void 0 ? void 0 : cardTokens.borderRadius, fullBleedContentPosition, hasFooter);
+  const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(borderRadius, fullBleedContentPosition, hasFooter);
 
   // Make multiple cards in a row have equal heights with even space between content items
   const columnFlex = {
@@ -103,30 +91,46 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
     flexShrink: 1,
     justifyContent: 'space-between'
   };
+  // When interactive area is present, spacing tokens should only be applied
+  // to individual Card sections, not Card as a whole
+  const {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    ...restOfTokens
+  } = tokens;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Card, {
     ref: ref,
     variant: {
       ...variant,
       padding: 'custom'
     },
-    tokens: selectCardBaseTokens(cardTokens),
+    tokens: restOfTokens,
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
       space: 0,
       tokens: columnFlex,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      children: [interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
+        ref: ref,
+        tokens: getThemeTokens,
+        dataSet: dataSet,
+        onPress: onPress,
+        ...selectProps(rest),
+        children: interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
         direction: contentStackDirection,
         tokens: {
           ...columnFlex,
           alignItems: contentStackAlign
         },
         space: 0,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+        children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
           tokens: tokens,
           variant: variant,
           withFooter: hasFooter,
           children: children
-        }), fullBleedContentPosition !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
+        }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
           borderRadius: fullBleedBorderRadius,
           ...fullBleedContentProps
         })]
@@ -179,7 +183,20 @@ Card.propTypes = {
   /**
    * Card variant.
    */
-  variant: _componentsBase.variantProp.propType
+  variant: _componentsBase.variantProp.propType,
+  /**
+   * Function to call on pressing the card.
+   * Note: This is only available when `interactive` variant is used.
+   */
+  onPress: _propTypes.default.func,
+  /**
+   * Object to set interactive card's properties
+   */
+  interactiveCard: _propTypes.default.shape({
+    body: _propTypes.default.node,
+    tokens: (0, _componentsBase.getTokensPropType)('Card'),
+    variant: _componentsBase.variantProp.propType
+  })
 };
 var _default = Card;
 exports.default = _default;

package/lib/WaffleGrid/WaffleGrid.js

@@ -111,8 +111,7 @@ const WaffleGrid = _ref2 => {
         (0, _jsxRuntime.jsx)(_Image.default, {
           src: child.image,
           alt: child.imageAltText,
-          width: 96,
-          height: 128
+          width: 96
         }) :
         // Otherwise it must be an arbitrary content, which we just display by itself
         child.image, /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {

package/lib-module/Card/Card.js

@@ -1,34 +1,14 @@
 /* eslint-disable react/require-default-props */
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { Card as CardBase, getTokensPropType, paddingProp, responsiveProps, selectSystemProps, StackView, useThemeTokens, variantProp, a11yProps, viewProps } from '@telus-uds/components-base';
+import { Card as CardBase, getTokensPropType, paddingProp, responsiveProps, selectSystemProps, StackView, useThemeTokens, useThemeTokensCallback, variantProp, a11yProps, viewProps, PressableCardBase } from '@telus-uds/components-base';
 import CardContent from './CardContent';
 import CardFooter from './CardFooter';
 import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const selectCardBaseTokens = _ref => {
-  let {
-    backgroundColor,
-    borderColor,
-    gradient,
-    borderWidth,
-    borderRadius,
-    shadow,
-    minWidth
-  } = _ref;
-  return {
-    backgroundColor,
-    borderColor,
-    gradient,
-    borderWidth,
-    borderRadius,
-    shadow,
-    minWidth
-  };
-};
 
 // Passes React Native-oriented system props through UDS Card
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 /**
@@ -66,8 +46,11 @@ const Card = /*#__PURE__*/forwardRef(function () {
     footerPadding,
     fullBleedImage,
     fullBleedContent = fullBleedImage,
-    tokens,
+    tokens = {},
     variant,
+    interactiveCard,
+    onPress,
+    dataSet,
     ...rest
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
     fullBleedContent: {
@@ -84,9 +67,15 @@ const Card = /*#__PURE__*/forwardRef(function () {
 
   // If the card has rounded corners and a full bleed image, we need to apply
   // those corners on the image as well, but partially
-  const cardTokens = useThemeTokens('Card', tokens, variant);
+  const {
+    borderRadius
+  } = useThemeTokens('Card', tokens, variant);
+  const getThemeTokens = useThemeTokensCallback('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
+    interactive: true,
+    ...((interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.variant) || {})
+  });
   const hasFooter = Boolean(footer);
-  const fullBleedBorderRadius = getFullBleedBorderRadius(cardTokens === null || cardTokens === void 0 ? void 0 : cardTokens.borderRadius, fullBleedContentPosition, hasFooter);
+  const fullBleedBorderRadius = getFullBleedBorderRadius(borderRadius, fullBleedContentPosition, hasFooter);
 
   // Make multiple cards in a row have equal heights with even space between content items
   const columnFlex = {
@@ -94,30 +83,46 @@ const Card = /*#__PURE__*/forwardRef(function () {
     flexShrink: 1,
     justifyContent: 'space-between'
   };
+  // When interactive area is present, spacing tokens should only be applied
+  // to individual Card sections, not Card as a whole
+  const {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    ...restOfTokens
+  } = tokens;
   return /*#__PURE__*/_jsx(CardBase, {
     ref: ref,
     variant: {
       ...variant,
       padding: 'custom'
     },
-    tokens: selectCardBaseTokens(cardTokens),
+    tokens: restOfTokens,
     ...selectProps(rest),
     children: /*#__PURE__*/_jsxs(StackView, {
       space: 0,
       tokens: columnFlex,
-      children: [/*#__PURE__*/_jsxs(StackView, {
+      children: [interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/_jsx(PressableCardBase, {
+        ref: ref,
+        tokens: getThemeTokens,
+        dataSet: dataSet,
+        onPress: onPress,
+        ...selectProps(rest),
+        children: interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body
+      }) : null, /*#__PURE__*/_jsxs(StackView, {
         direction: contentStackDirection,
         tokens: {
           ...columnFlex,
           alignItems: contentStackAlign
         },
         space: 0,
-        children: [/*#__PURE__*/_jsx(CardContent, {
+        children: [children ? /*#__PURE__*/_jsx(CardContent, {
           tokens: tokens,
           variant: variant,
           withFooter: hasFooter,
           children: children
-        }), fullBleedContentPosition !== 'none' && /*#__PURE__*/_jsx(FullBleedContent, {
+        }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/_jsx(FullBleedContent, {
           borderRadius: fullBleedBorderRadius,
           ...fullBleedContentProps
         })]
@@ -170,6 +175,19 @@ Card.propTypes = {
   /**
    * Card variant.
    */
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  /**
+   * Function to call on pressing the card.
+   * Note: This is only available when `interactive` variant is used.
+   */
+  onPress: PropTypes.func,
+  /**
+   * Object to set interactive card's properties
+   */
+  interactiveCard: PropTypes.shape({
+    body: PropTypes.node,
+    tokens: getTokensPropType('Card'),
+    variant: variantProp.propType
+  })
 };
 export default Card;

package/lib-module/WaffleGrid/WaffleGrid.js

@@ -104,8 +104,7 @@ const WaffleGrid = _ref2 => {
         _jsx(Image, {
           src: child.image,
           alt: child.imageAltText,
-          width: 96,
-          height: 128
+          width: 96
         }) :
         // Otherwise it must be an arbitrary content, which we just display by itself
         child.image, /*#__PURE__*/_jsx(Typography, {

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.69.0",
+    "@telus-uds/components-base": "1.71.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.46.0",
+    "@telus-uds/system-theme-tokens": "^2.47.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -62,5 +62,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.25.0"
+  "version": "2.26.0"
 }

package/src/Card/Card.jsx

@@ -9,9 +9,11 @@ import {
   selectSystemProps,
   StackView,
   useThemeTokens,
+  useThemeTokensCallback,
   variantProp,
   a11yProps,
-  viewProps
+  viewProps,
+  PressableCardBase
 } from '@telus-uds/components-base'
 import CardContent from './CardContent'
 import CardFooter from './CardFooter'
@@ -20,26 +22,6 @@ import FullBleedContent, {
   useFullBleedContentProps
 } from '../shared/FullBleedContent'
 
-const selectCardBaseTokens = ({
-  backgroundColor,
-  borderColor,
-  gradient,
-  borderWidth,
-  borderRadius,
-  shadow,
-  minWidth
-}) => {
-  return {
-    backgroundColor,
-    borderColor,
-    gradient,
-    borderWidth,
-    borderRadius,
-    shadow,
-    minWidth
-  }
-}
-
 // Passes React Native-oriented system props through UDS Card
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -79,8 +61,11 @@ const Card = forwardRef(
       footerPadding,
       fullBleedImage,
       fullBleedContent = fullBleedImage,
-      tokens,
+      tokens = {},
       variant,
+      interactiveCard,
+      onPress,
+      dataSet,
       ...rest
     } = {
       fullBleedContent: { position: null }
@@ -96,10 +81,14 @@ const Card = forwardRef(
 
     // If the card has rounded corners and a full bleed image, we need to apply
     // those corners on the image as well, but partially
-    const cardTokens = useThemeTokens('Card', tokens, variant)
+    const { borderRadius } = useThemeTokens('Card', tokens, variant)
+    const getThemeTokens = useThemeTokensCallback('Card', interactiveCard?.tokens, {
+      interactive: true,
+      ...(interactiveCard?.variant || {})
+    })
     const hasFooter = Boolean(footer)
     const fullBleedBorderRadius = getFullBleedBorderRadius(
-      cardTokens?.borderRadius,
+      borderRadius,
       fullBleedContentPosition,
       hasFooter
     )
@@ -110,23 +99,39 @@ const Card = forwardRef(
       flexShrink: 1,
       justifyContent: 'space-between'
     }
+    // When interactive area is present, spacing tokens should only be applied
+    // to individual Card sections, not Card as a whole
+    const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...restOfTokens } = tokens
 
     return (
       <CardBase
         ref={ref}
         variant={{ ...variant, padding: 'custom' }}
-        tokens={selectCardBaseTokens(cardTokens)}
+        tokens={restOfTokens}
         {...selectProps(rest)}
       >
         <StackView space={0} tokens={columnFlex}>
+          {interactiveCard?.body ? (
+            <PressableCardBase
+              ref={ref}
+              tokens={getThemeTokens}
+              dataSet={dataSet}
+              onPress={onPress}
+              {...selectProps(rest)}
+            >
+              {interactiveCard?.body}
+            </PressableCardBase>
+          ) : null}
           <StackView
             direction={contentStackDirection}
             tokens={{ ...columnFlex, alignItems: contentStackAlign }}
             space={0}
           >
-            <CardContent tokens={tokens} variant={variant} withFooter={hasFooter}>
-              {children}
-            </CardContent>
+            {children ? (
+              <CardContent tokens={tokens} variant={variant} withFooter={hasFooter}>
+                {children}
+              </CardContent>
+            ) : null}
             {fullBleedContentPosition !== 'none' && (
               <FullBleedContent borderRadius={fullBleedBorderRadius} {...fullBleedContentProps} />
             )}
@@ -184,7 +189,20 @@ Card.propTypes = {
   /**
    * Card variant.
    */
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  /**
+   * Function to call on pressing the card.
+   * Note: This is only available when `interactive` variant is used.
+   */
+  onPress: PropTypes.func,
+  /**
+   * Object to set interactive card's properties
+   */
+  interactiveCard: PropTypes.shape({
+    body: PropTypes.node,
+    tokens: getTokensPropType('Card'),
+    variant: variantProp.propType
+  })
 }
 
 export default Card

package/src/WaffleGrid/WaffleGrid.jsx

@@ -93,7 +93,7 @@ const WaffleGrid = ({
             <Center>
               {typeof child.image === 'string' ? (
                 // Assuming that string passed is the image URL
-                <Image src={child.image} alt={child.imageAltText} width={96} height={128} />
+                <Image src={child.image} alt={child.imageAltText} width={96} />
               ) : (
                 // Otherwise it must be an arbitrary content, which we just display by itself
                 child.image

package/types/MultiSelectFilter.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentType } from 'react'
+import type { Tokens } from './common'
 
 interface MultiSelectFilterItem {
   label: string
@@ -10,7 +11,7 @@ export interface MultiSelectFilterProps {
   subtitle?: string
   id?: string
   variant?: string
-  tokens?: []
+  tokens?: Tokens
   items: MultiSelectFilterItem[]
   values?: string[]
   initialValues?: string[]

package/types/WebVideo.d.ts

@@ -10,6 +10,9 @@ export interface WebVideoProps extends HTMLAttrs {
   videoLength: number
   copy?: 'en' | 'fr'
   onStart?: () => void
+  onPlay?: () => void
+  onEnd?: () => void
+  onPause?: () => void
 }
 
 declare const WebVideo: ComponentType<WebVideoProps>