@telus-uds/components-web 2.2.0 → 2.3.0

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 24 May 2023 23:40:09 GMT and should not be manually modified.
+This log was last generated on Sat, 27 May 2023 00:37:34 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.3.0
+
+Sat, 27 May 2023 00:37:34 GMT
+
+### Minor changes
+
+- chore: test update for list (samuraix221@hotmail.com)
+- Bump @telus-uds/components-base to v1.45.0
+- Bump @telus-uds/system-theme-tokens to v2.28.0
+
+### Patches
+
+- Fix an issue where some tokens might not work on `Card` (shahzaibkhalidmalik@outlook.com)
+
 ## 2.2.0
 
-Wed, 24 May 2023 23:40:09 GMT
+Wed, 24 May 2023 23:46:34 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -10106,7 +10106,14 @@
             "name": "custom",
             "raw": {
               "space": "integer",
-              "fieldSpace": "integer"
+              "fieldSpace": "integer",
+              "showIcon": "show",
+              "outlineWidth": "border",
+              "borderBottomLeftRadius": "radius",
+              "borderBottomRightRadius": "radius",
+              "borderTopLeftRadius": "radius",
+              "borderTopRightRadius": "radius",
+              "outlineOffset": "size"
             }
           },
           "required": false,

package/lib/Card/Card.js

@@ -26,7 +26,26 @@ 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 */
-// Passes React Native-oriented system props through UDS Card
+const selectCardBaseTokens = _ref => {
+  let {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    shadow,
+    minWidth
+  } = _ref;
+  return {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    shadow,
+    minWidth
+  };
+}; // Passes React Native-oriented system props through UDS Card
+
+
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.viewProps]);
 /**
  * A basic card component, unstyled by default.
@@ -81,11 +100,9 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
   } = (0, _FullBleedContent.useFullBleedContentProps)(fullBleedContent); // 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 {
-    borderRadius
-  } = (0, _componentsBase.useThemeTokens)('Card', tokens, variant);
+  const cardTokens = (0, _componentsBase.useThemeTokens)('Card', tokens, variant);
   const hasFooter = Boolean(footer);
-  const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(borderRadius, fullBleedContentPosition, hasFooter); // Make multiple cards in a row have equal heights with even space between content items
+  const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(cardTokens === null || cardTokens === void 0 ? void 0 : cardTokens.borderRadius, fullBleedContentPosition, hasFooter); // Make multiple cards in a row have equal heights with even space between content items
 
   const columnFlex = {
     flexGrow: 1,
@@ -97,6 +114,7 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
     variant: { ...variant,
       padding: 'custom'
     },
+    tokens: selectCardBaseTokens(cardTokens),
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
       space: 0,

package/lib/Card/CardContent.js

@@ -26,20 +26,18 @@ const CardContentContainer = /*#__PURE__*/_styledComponents.default.div.withConf
   componentId: "components-web__sc-1k2501q-0"
 })(_ref => {
   let {
-    backgroundColor,
     borderRadius,
     paddingBottom,
     paddingLeft,
     paddingRight,
     paddingTop,
     withFooter,
-    contentAlignItem: alignItem,
+    contentAlignItems: alignItems,
     contentFlexGrow: flexGrow,
     contentFlexShrink: flexShrink,
     contentJustifyContent: justifyContent
   } = _ref;
   return {
-    backgroundColor,
     // We need to make sure to have sharp corners on the bottom
     // if the card has a footer
     borderBottomLeftRadius: withFooter ? 0 : borderRadius,
@@ -52,7 +50,7 @@ const CardContentContainer = /*#__PURE__*/_styledComponents.default.div.withConf
     paddingTop,
     display: 'flex',
     flexDirection: 'column',
-    alignItem,
+    alignItems,
     flexGrow,
     flexShrink,
     justifyContent

package/lib-module/Card/Card.js

@@ -4,10 +4,30 @@ import PropTypes from 'prop-types';
 import { Card as CardBase, getTokensPropType, paddingProp, responsiveProps, selectSystemProps, StackView, useThemeTokens, variantProp, a11yProps, viewProps } from '@telus-uds/components-base';
 import CardContent from './CardContent';
 import CardFooter from './CardFooter';
-import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent'; // Passes React Native-oriented system props through UDS Card
-
+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,
+    borderWidth,
+    borderRadius,
+    shadow,
+    minWidth
+  } = _ref;
+  return {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    shadow,
+    minWidth
+  };
+}; // Passes React Native-oriented system props through UDS Card
+
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 /**
  * A basic card component, unstyled by default.
@@ -62,11 +82,9 @@ const Card = /*#__PURE__*/forwardRef(function () {
   } = useFullBleedContentProps(fullBleedContent); // 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 {
-    borderRadius
-  } = useThemeTokens('Card', tokens, variant);
+  const cardTokens = useThemeTokens('Card', tokens, variant);
   const hasFooter = Boolean(footer);
-  const fullBleedBorderRadius = getFullBleedBorderRadius(borderRadius, fullBleedContentPosition, hasFooter); // Make multiple cards in a row have equal heights with even space between content items
+  const fullBleedBorderRadius = getFullBleedBorderRadius(cardTokens === null || cardTokens === void 0 ? void 0 : cardTokens.borderRadius, fullBleedContentPosition, hasFooter); // Make multiple cards in a row have equal heights with even space between content items
 
   const columnFlex = {
     flexGrow: 1,
@@ -78,6 +96,7 @@ const Card = /*#__PURE__*/forwardRef(function () {
     variant: { ...variant,
       padding: 'custom'
     },
+    tokens: selectCardBaseTokens(cardTokens),
     ...selectProps(rest),
     children: /*#__PURE__*/_jsxs(StackView, {
       space: 0,

package/lib-module/Card/CardContent.js

@@ -10,20 +10,18 @@ const CardContentContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1k2501q-0"
 })(_ref => {
   let {
-    backgroundColor,
     borderRadius,
     paddingBottom,
     paddingLeft,
     paddingRight,
     paddingTop,
     withFooter,
-    contentAlignItem: alignItem,
+    contentAlignItems: alignItems,
     contentFlexGrow: flexGrow,
     contentFlexShrink: flexShrink,
     contentJustifyContent: justifyContent
   } = _ref;
   return {
-    backgroundColor,
     // We need to make sure to have sharp corners on the bottom
     // if the card has a footer
     borderBottomLeftRadius: withFooter ? 0 : borderRadius,
@@ -36,7 +34,7 @@ const CardContentContainer = /*#__PURE__*/styled.div.withConfig({
     paddingTop,
     display: 'flex',
     flexDirection: 'column',
-    alignItem,
+    alignItems,
     flexGrow,
     flexShrink,
     justifyContent

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.44.0",
+    "@telus-uds/components-base": "1.45.0",
     "@telus-uds/system-constants": "^1.2.1",
     "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.27.0",
+    "@telus-uds/system-theme-tokens": "^2.28.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.2.0"
+  "version": "2.3.0"
 }

package/src/Card/Card.jsx

@@ -20,6 +20,22 @@ import FullBleedContent, {
   useFullBleedContentProps
 } from '../shared/FullBleedContent'
 
+const selectCardBaseTokens = ({
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderRadius,
+  shadow,
+  minWidth
+}) => ({
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderRadius,
+  shadow,
+  minWidth
+})
+
 // Passes React Native-oriented system props through UDS Card
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -76,10 +92,10 @@ 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 { borderRadius } = useThemeTokens('Card', tokens, variant)
+    const cardTokens = useThemeTokens('Card', tokens, variant)
     const hasFooter = Boolean(footer)
     const fullBleedBorderRadius = getFullBleedBorderRadius(
-      borderRadius,
+      cardTokens?.borderRadius,
       fullBleedContentPosition,
       hasFooter
     )
@@ -92,7 +108,12 @@ const Card = forwardRef(
     }
 
     return (
-      <CardBase ref={ref} variant={{ ...variant, padding: 'custom' }} {...selectProps(rest)}>
+      <CardBase
+        ref={ref}
+        variant={{ ...variant, padding: 'custom' }}
+        tokens={selectCardBaseTokens(cardTokens)}
+        {...selectProps(rest)}
+      >
         <StackView space={0} tokens={columnFlex}>
           <StackView
             direction={contentStackDirection}

package/src/Card/CardContent.jsx

@@ -14,19 +14,17 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const CardContentContainer = styled.div(
   ({
-    backgroundColor,
     borderRadius,
     paddingBottom,
     paddingLeft,
     paddingRight,
     paddingTop,
     withFooter,
-    contentAlignItem: alignItem,
+    contentAlignItems: alignItems,
     contentFlexGrow: flexGrow,
     contentFlexShrink: flexShrink,
     contentJustifyContent: justifyContent
   }) => ({
-    backgroundColor,
     // We need to make sure to have sharp corners on the bottom
     // if the card has a footer
     borderBottomLeftRadius: withFooter ? 0 : borderRadius,
@@ -39,7 +37,7 @@ const CardContentContainer = styled.div(
     paddingTop,
     display: 'flex',
     flexDirection: 'column',
-    alignItem,
+    alignItems,
     flexGrow,
     flexShrink,
     justifyContent