@telus-uds/components-web 4.5.1 → 4.6.0

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Mon, 05 May 2025 21:28:44 GMT and should not be manually modified.
+This log was last generated on Fri, 23 May 2025 15:12:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 4.6.0
+
+Fri, 23 May 2025 15:12:18 GMT
+
+### Minor changes
+
+- `Spinner`: missing attributes added  (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v3.8.0
+- Bump @telus-uds/system-theme-tokens to v4.6.0
+
+### Patches
+
+- `Card`: The inability to activate radio selection in `InteractiveCard` has been fixed (35577399+JoshHC@users.noreply.github.com)
+- `List`: update snapshot (guillermo.peitzner@telus.com)
+
 ## 4.5.1
 
-Mon, 05 May 2025 21:28:44 GMT
+Mon, 05 May 2025 21:30:13 GMT
 
 ### Patches
 

package/lib/cjs/Card/Card.js

@@ -130,25 +130,20 @@ const Card = /*#__PURE__*/_react.default.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.jsxs)(_componentsBase.Card, {
     ref: ref,
     variant: {
       ...variant,
       padding: 'custom'
     },
-    tokens: restOfTokens,
+    tokens: tokens,
     backgroundImage: backgroundImage,
+    onPress: onPress,
+    ...(interactiveCard?.selectionType && {
+      interactiveCard
+    }),
     ...selectProps(rest),
-    children: [interactiveCard?.body ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
+    children: [interactiveCard?.body && !interactiveCard.selectionType ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
       ref: ref,
       tokens: getThemeTokens,
       dataSet: dataSet,
@@ -156,7 +151,9 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
       href: interactiveCard?.href,
       hrefAttrs: interactiveCard?.hrefAttrs,
       ...selectProps(rest),
-      children: typeof interactiveCard?.body === 'function' ? interactiveCard.body() : interactiveCard.body
+      children: cardState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: typeof interactiveCard?.body === 'function' ? interactiveCard.body(cardState) : interactiveCard.body
+      })
     }) : null, children || fullBleedContentPosition !== 'none' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
       direction: contentStackDirection,
       tokens: {
@@ -249,6 +246,7 @@ Card.propTypes = {
   interactiveCard: _propTypes.default.shape({
     body: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
     tokens: (0, _componentsBase.getTokensPropType)('Card'),
+    selectionType: _propTypes.default.oneOf(['checkbox', 'radiogroup']),
     variant: _componentsBase.variantProp.propType,
     href: _propTypes.default.string,
     hrefAttrs: _propTypes.default.shape(_componentsBase.hrefAttrsProp.types)

package/lib/cjs/Spinner/SpinnerContent.js

@@ -42,34 +42,27 @@ const SpinnerContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     size,
     thickness,
     isStatic,
+    showLabel = sizeVariant === _constants.LARGE,
     ...rest
   } = _ref2;
-  const labelMapping = {
-    top: 'column-reverse',
-    bottom: 'column',
-    left: 'row-reverse',
-    right: 'row'
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
     overlay: overlay,
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
-      space: 3,
+    "aria-label": label,
+    role: "status",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ActivityIndicator, {
+      role: "progressbar",
+      "aria-busy": "true",
+      "aria-valuetext": label,
+      label: label,
+      labelPosition: labelPosition,
+      showLabel: showLabel,
       tokens: {
-        alignItems: 'center'
+        size,
+        thickness
       },
-      direction: labelMapping[labelPosition],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ActivityIndicator, {
-        label: label,
-        tokens: {
-          size,
-          thickness
-        },
-        isStatic: isStatic,
-        ...selectProps(rest)
-      }), sizeVariant === _constants.LARGE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
-        children: label
-      })]
+      isStatic: isStatic,
+      ...selectProps(rest)
     })
   });
 });

package/lib/esm/Card/Card.js

@@ -8,7 +8,7 @@ import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps }
 import ConditionalWrapper from '../shared/ConditionalWrapper';
 
 // Passes React Native-oriented system props through UDS Card
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 /**
@@ -122,25 +122,20 @@ const Card = /*#__PURE__*/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__*/_jsxs(CardBase, {
     ref: ref,
     variant: {
       ...variant,
       padding: 'custom'
     },
-    tokens: restOfTokens,
+    tokens: tokens,
     backgroundImage: backgroundImage,
+    onPress: onPress,
+    ...(interactiveCard?.selectionType && {
+      interactiveCard
+    }),
     ...selectProps(rest),
-    children: [interactiveCard?.body ? /*#__PURE__*/_jsx(PressableCardBase, {
+    children: [interactiveCard?.body && !interactiveCard.selectionType ? /*#__PURE__*/_jsx(PressableCardBase, {
       ref: ref,
       tokens: getThemeTokens,
       dataSet: dataSet,
@@ -148,7 +143,9 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
       href: interactiveCard?.href,
       hrefAttrs: interactiveCard?.hrefAttrs,
       ...selectProps(rest),
-      children: typeof interactiveCard?.body === 'function' ? interactiveCard.body() : interactiveCard.body
+      children: cardState => /*#__PURE__*/_jsx(_Fragment, {
+        children: typeof interactiveCard?.body === 'function' ? interactiveCard.body(cardState) : interactiveCard.body
+      })
     }) : null, children || fullBleedContentPosition !== 'none' ? /*#__PURE__*/_jsxs(StackView, {
       direction: contentStackDirection,
       tokens: {
@@ -241,6 +238,7 @@ Card.propTypes = {
   interactiveCard: PropTypes.shape({
     body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
     tokens: getTokensPropType('Card'),
+    selectionType: PropTypes.oneOf(['checkbox', 'radiogroup']),
     variant: variantProp.propType,
     href: PropTypes.string,
     hrefAttrs: PropTypes.shape(hrefAttrsProp.types)

package/lib/esm/Spinner/SpinnerContent.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ActivityIndicator, StackView, Typography, selectSystemProps } from '@telus-uds/components-base';
+import { ActivityIndicator, selectSystemProps } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import { htmlAttrs } from '../utils';
 import { BACKDROP_Z_INDEX, LARGE } from './constants';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const Container = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpinnerContent__Container",
@@ -35,34 +35,27 @@ const SpinnerContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     size,
     thickness,
     isStatic,
+    showLabel = sizeVariant === LARGE,
     ...rest
   } = _ref2;
-  const labelMapping = {
-    top: 'column-reverse',
-    bottom: 'column',
-    left: 'row-reverse',
-    right: 'row'
-  };
   return /*#__PURE__*/_jsx(Container, {
     overlay: overlay,
     ref: ref,
-    children: /*#__PURE__*/_jsxs(StackView, {
-      space: 3,
+    "aria-label": label,
+    role: "status",
+    children: /*#__PURE__*/_jsx(ActivityIndicator, {
+      role: "progressbar",
+      "aria-busy": "true",
+      "aria-valuetext": label,
+      label: label,
+      labelPosition: labelPosition,
+      showLabel: showLabel,
       tokens: {
-        alignItems: 'center'
+        size,
+        thickness
       },
-      direction: labelMapping[labelPosition],
-      children: [/*#__PURE__*/_jsx(ActivityIndicator, {
-        label: label,
-        tokens: {
-          size,
-          thickness
-        },
-        isStatic: isStatic,
-        ...selectProps(rest)
-      }), sizeVariant === LARGE && /*#__PURE__*/_jsx(Typography, {
-        children: label
-      })]
+      isStatic: isStatic,
+      ...selectProps(rest)
     })
   });
 });

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^3.7.1",
+    "@telus-uds/components-base": "^3.8.0",
     "@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.5.0",
+    "@telus-uds/system-theme-tokens": "^4.6.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.5.1"
+  "version": "4.6.0"
 }

package/src/Card/Card.jsx

@@ -135,19 +135,18 @@ const Card = React.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={restOfTokens}
+        tokens={tokens}
         backgroundImage={backgroundImage}
+        onPress={onPress}
+        {...(interactiveCard?.selectionType && { interactiveCard })}
         {...selectProps(rest)}
       >
-        {interactiveCard?.body ? (
+        {interactiveCard?.body && !interactiveCard.selectionType ? (
           <PressableCardBase
             ref={ref}
             tokens={getThemeTokens}
@@ -157,9 +156,13 @@ const Card = React.forwardRef(
             hrefAttrs={interactiveCard?.hrefAttrs}
             {...selectProps(rest)}
           >
-            {typeof interactiveCard?.body === 'function'
-              ? interactiveCard.body()
-              : interactiveCard.body}
+            {(cardState) => (
+              <>
+                {typeof interactiveCard?.body === 'function'
+                  ? interactiveCard.body(cardState)
+                  : interactiveCard.body}
+              </>
+            )}
           </PressableCardBase>
         ) : null}
         {children || fullBleedContentPosition !== 'none' ? (
@@ -263,6 +266,7 @@ Card.propTypes = {
   interactiveCard: PropTypes.shape({
     body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
     tokens: getTokensPropType('Card'),
+    selectionType: PropTypes.oneOf(['checkbox', 'radiogroup']),
     variant: variantProp.propType,
     href: PropTypes.string,
     hrefAttrs: PropTypes.shape(hrefAttrsProp.types)

package/src/Spinner/SpinnerContent.jsx

@@ -1,11 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {
-  ActivityIndicator,
-  StackView,
-  Typography,
-  selectSystemProps
-} from '@telus-uds/components-base'
+import { ActivityIndicator, selectSystemProps } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import { htmlAttrs } from '../utils'
 import { BACKDROP_Z_INDEX, LARGE } from './constants'
@@ -27,31 +22,32 @@ const Container = styled.div(({ overlay }) => ({
 
 const SpinnerContent = React.forwardRef(
   (
-    { label, labelPosition, overlay = false, sizeVariant, size, thickness, isStatic, ...rest },
+    {
+      label,
+      labelPosition,
+      overlay = false,
+      sizeVariant,
+      size,
+      thickness,
+      isStatic,
+      showLabel = sizeVariant === LARGE,
+      ...rest
+    },
     ref
   ) => {
-    const labelMapping = {
-      top: 'column-reverse',
-      bottom: 'column',
-      left: 'row-reverse',
-      right: 'row'
-    }
-
     return (
-      <Container overlay={overlay} ref={ref}>
-        <StackView
-          space={3}
-          tokens={{ alignItems: 'center' }}
-          direction={labelMapping[labelPosition]}
-        >
-          <ActivityIndicator
-            label={label}
-            tokens={{ size, thickness }}
-            isStatic={isStatic}
-            {...selectProps(rest)}
-          />
-          {sizeVariant === LARGE && <Typography>{label}</Typography>}
-        </StackView>
+      <Container overlay={overlay} ref={ref} aria-label={label} role="status">
+        <ActivityIndicator
+          role="progressbar"
+          aria-busy="true"
+          aria-valuetext={label}
+          label={label}
+          labelPosition={labelPosition}
+          showLabel={showLabel}
+          tokens={{ size, thickness }}
+          isStatic={isStatic}
+          {...selectProps(rest)}
+        />
       </Container>
     )
   }