@telus-uds/components-web 2.38.0 → 2.39.0

package/CHANGELOG.md

@@ -1,12 +1,29 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Mon, 12 Aug 2024 06:26:58 GMT and should not be manually modified.
+This log was last generated on Thu, 22 Aug 2024 18:17:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.39.0
+
+Thu, 22 Aug 2024 18:17:39 GMT
+
+### Minor changes
+
+- `Card`: `plain` variant added  (35577399+JoshHC@users.noreply.github.com)
+- `FullBleedContent`: add imgCol and position prop to allow for image size adjustment (<tony.eng@telus.com>)
+- `Card`: use ConditionalWrapper on CardContent and FullBleedContent to dynamically set width of full bleed image (<tony.eng@telus.com>)
+- Bump @telus-uds/components-base to v1.92.0
+- Bump @telus-uds/system-theme-tokens to v2.62.0
+
+### Patches
+
+- `Image`: fix border-radius token override and default border-radius (guillermo.peitzner@telus.com)
+- `Table`: fix unexpected horizontal scrolling on table component (jaime.tuyuc@telus.com)
+
 ## 2.38.0
 
-Mon, 12 Aug 2024 06:26:58 GMT
+Mon, 12 Aug 2024 06:35:32 GMT
 
 ### Minor changes
 

package/lib/Card/Card.js

@@ -7,9 +7,12 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
+var _componentsWeb = require("@telus-uds/components-web");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _CardContent = _interopRequireDefault(require("./CardContent"));
 var _CardFooter = _interopRequireDefault(require("./CardFooter"));
 var _FullBleedContent = _interopRequireWildcard(require("../shared/FullBleedContent"));
+var _ConditionalWrapper = _interopRequireDefault(require("../shared/ConditionalWrapper"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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; }
@@ -34,6 +37,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemP
  * - `alt`: alt tag for an image,
  * - `src`: default image source,
  * - `position`: `none`, `bottom`, `left`, `right` or `top`, depending on where you would like your full bleed image to be placed,
+ * - `imgCol`: set the span of the image per viewport (based on 12 column value for width of card) when `position` of image is on `left` or `right`
  * - all the props from the `ResponsiveImage` component in case you want that full bleed image to be responsive,
  * - `content`: pass a custom JSX to be used for rendering of the full bleed content (defaults to `ResponsiveImage`
  *   receiving the other props).
@@ -45,6 +49,23 @@ const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemP
  * ## Accessibility
  * `Card` component accepts all the standard accessibility props.
  */
+const DynamicWidthContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Card__DynamicWidthContainer",
+  componentId: "components-web__sc-1elbtwd-0"
+})(_ref => {
+  let {
+    width,
+    display,
+    borderRadius,
+    overflow
+  } = _ref;
+  return {
+    width,
+    display,
+    borderRadius,
+    overflow
+  };
+});
 const Card = /*#__PURE__*/_react.default.forwardRef(function () {
   let {
     children,
@@ -70,6 +91,9 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     fullBleedContentPosition,
     fullBleedContentProps
   } = (0, _FullBleedContent.useFullBleedContentProps)(fullBleedContent);
+  const {
+    imgCol
+  } = fullBleedContentProps;
 
   // If the card has rounded corners and a full bleed image, we need to apply
   // those corners on the image as well, but partially
@@ -82,6 +106,25 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
   });
   const hasFooter = Boolean(footer);
   const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(borderRadius, fullBleedContentPosition, hasFooter);
+
+  // takes imgCol from fullBleedContent if present, to dynamically set width of image
+  // card content will adapt to the size of image to add up to 100% width of card width
+  // pass as props to ConditionalWrapper
+  const imgColCurrentViewport = (0, _componentsWeb.useResponsiveProp)(imgCol);
+  const maxCol = 12;
+  const fullBleedImageWidth = `${imgColCurrentViewport / maxCol * 100}%`;
+  const adaptiveContentWidth = `${(maxCol - imgColCurrentViewport) / maxCol * 100}%`;
+  const isImageWidthAdjustable = imgCol && (fullBleedContentPosition === 'left' || fullBleedContentPosition === 'right');
+  const contentWrapperStyleProps = {
+    width: adaptiveContentWidth,
+    display: imgColCurrentViewport >= maxCol ? 'none' : undefined
+  };
+  const imageWrapperStyleProps = {
+    width: fullBleedImageWidth,
+    borderRadius: imgColCurrentViewport >= maxCol ? borderRadius : undefined,
+    overflow: imgColCurrentViewport >= maxCol ? 'hidden' : undefined,
+    display: imgColCurrentViewport === 0 ? 'none' : undefined
+  };
   const columnFlex = {
     flexGrow: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? 0 : 1,
     flexShrink: 1,
@@ -118,14 +161,25 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
         alignItems: contentStackAlign
       },
       space: 0,
-      children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
-        tokens: tokens,
-        variant: variant,
-        withFooter: hasFooter,
-        children: children
-      }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
-        borderRadius: fullBleedBorderRadius,
-        ...fullBleedContentProps
+      children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+        WrapperComponent: DynamicWidthContainer,
+        wrapperProps: contentWrapperStyleProps,
+        condition: isImageWidthAdjustable,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+          tokens: tokens,
+          variant: variant,
+          withFooter: hasFooter,
+          children: children
+        })
+      }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+        WrapperComponent: DynamicWidthContainer,
+        wrapperProps: imageWrapperStyleProps,
+        condition: isImageWidthAdjustable,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
+          borderRadius: fullBleedBorderRadius,
+          ...fullBleedContentProps,
+          position: fullBleedContentPosition
+        })
       })]
     }) : null, footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardFooter.default, {
       padding: footerPadding,

package/lib/Footnote/Footnote.js

@@ -152,13 +152,13 @@ const ListItem = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.de
   return {
     display: 'list-item',
     '&::marker': {
-      fontFamily: 'HelveticaNow400normal',
+      fontFamily: 'HNforTELUSSA400normal',
       fontSize: listItemMarkerFontSize,
       lineHeight: listItemMarkerLineHeight,
       textAlign: 'end !important'
     },
     color: listItemColor,
-    fontFamily: 'HelveticaNow400normal',
+    fontFamily: 'HNforTELUSSA400normal',
     fontSize: listItemFontSize,
     lineHeight: listItemLineHeight,
     paddingLeft: listItemPaddingLeft
@@ -220,7 +220,7 @@ const StyledCustomContentContainer = /*#__PURE__*/_styledComponents.default.div.
     lineHeight: listItemLineHeight,
     paddingLeft: listItemPaddingLeft,
     color: listItemColor,
-    fontFamily: 'HelveticaNow400normal'
+    fontFamily: 'HNforTELUSSA400normal'
   };
 });
 const usePrevious = value => {

package/lib/Table/Table.js

@@ -22,9 +22,10 @@ const StyledTable = /*#__PURE__*/_styledComponents.default.table.withConfig({
   componentId: "components-web__sc-10d9q3m-1"
 })(["margin:0;padding:0;width:", ";border:", ";"], _ref => {
   let {
+    fullWidth,
     tableWidth
   } = _ref;
-  return `${tableWidth}px`;
+  return fullWidth ? '100%' : `${tableWidth}px`;
 }, props => `${props.borderWidth}px solid ${props.borderColor}`);
 const TableContext = /*#__PURE__*/_react.default.createContext({});
 const useTableContext = () => _react.default.useContext(TableContext);
@@ -101,6 +102,7 @@ const Table = _ref2 => {
         tableWidth: tableWidth,
         cellSpacing: 0,
         ref: tableRef,
+        fullWidth: fullWidth,
         ...selectProps(rest),
         children: children
       })

package/lib/shared/ConditionalWrapper/ConditionalWrapper.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ConditionalWrapper = _ref => {
+  let {
+    children,
+    condition,
+    WrapperComponent,
+    wrapperProps
+  } = _ref;
+  return condition ? /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperComponent, {
+    ...wrapperProps,
+    children: children
+  }) : children;
+};
+ConditionalWrapper.propTypes = {
+  children: _propTypes.default.node,
+  condition: _propTypes.default.bool,
+  WrapperComponent: _propTypes.default.elementType,
+  wrapperProps: _propTypes.default.object
+};
+var _default = ConditionalWrapper;
+exports.default = _default;

package/lib/shared/ConditionalWrapper/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ConditionalWrapper = _interopRequireDefault(require("./ConditionalWrapper"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = _ConditionalWrapper.default;
+exports.default = _default;

package/lib/utils/theming/with-client-theme.js

@@ -16,7 +16,7 @@ const withClientTheme = Component => {
       variant,
       ...props
     } = _ref;
-    const theme = (0, _componentsBase.useThemeTokens)(Component.displayName, variant, tokenOverrides);
+    const theme = (0, _componentsBase.useThemeTokens)(Component.displayName, tokenOverrides, variant);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
       theme: theme,
       ...props

package/lib-module/Card/Card.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Card as CardBase, getTokensPropType, paddingProp, responsiveProps, selectSystemProps, StackView, useThemeTokens, useThemeTokensCallback, variantProp, a11yProps, viewProps, PressableCardBase } from '@telus-uds/components-base';
+import { useResponsiveProp } from '@telus-uds/components-web';
+import styled from 'styled-components';
 import CardContent from './CardContent';
 import CardFooter from './CardFooter';
 import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
+import ConditionalWrapper from '../shared/ConditionalWrapper';
 
 // Passes React Native-oriented system props through UDS Card
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -27,6 +30,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * - `alt`: alt tag for an image,
  * - `src`: default image source,
  * - `position`: `none`, `bottom`, `left`, `right` or `top`, depending on where you would like your full bleed image to be placed,
+ * - `imgCol`: set the span of the image per viewport (based on 12 column value for width of card) when `position` of image is on `left` or `right`
  * - all the props from the `ResponsiveImage` component in case you want that full bleed image to be responsive,
  * - `content`: pass a custom JSX to be used for rendering of the full bleed content (defaults to `ResponsiveImage`
  *   receiving the other props).
@@ -38,6 +42,23 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * ## Accessibility
  * `Card` component accepts all the standard accessibility props.
  */
+const DynamicWidthContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Card__DynamicWidthContainer",
+  componentId: "components-web__sc-1elbtwd-0"
+})(_ref => {
+  let {
+    width,
+    display,
+    borderRadius,
+    overflow
+  } = _ref;
+  return {
+    width,
+    display,
+    borderRadius,
+    overflow
+  };
+});
 const Card = /*#__PURE__*/React.forwardRef(function () {
   let {
     children,
@@ -63,6 +84,9 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
     fullBleedContentPosition,
     fullBleedContentProps
   } = useFullBleedContentProps(fullBleedContent);
+  const {
+    imgCol
+  } = fullBleedContentProps;
 
   // If the card has rounded corners and a full bleed image, we need to apply
   // those corners on the image as well, but partially
@@ -75,6 +99,25 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
   });
   const hasFooter = Boolean(footer);
   const fullBleedBorderRadius = getFullBleedBorderRadius(borderRadius, fullBleedContentPosition, hasFooter);
+
+  // takes imgCol from fullBleedContent if present, to dynamically set width of image
+  // card content will adapt to the size of image to add up to 100% width of card width
+  // pass as props to ConditionalWrapper
+  const imgColCurrentViewport = useResponsiveProp(imgCol);
+  const maxCol = 12;
+  const fullBleedImageWidth = `${imgColCurrentViewport / maxCol * 100}%`;
+  const adaptiveContentWidth = `${(maxCol - imgColCurrentViewport) / maxCol * 100}%`;
+  const isImageWidthAdjustable = imgCol && (fullBleedContentPosition === 'left' || fullBleedContentPosition === 'right');
+  const contentWrapperStyleProps = {
+    width: adaptiveContentWidth,
+    display: imgColCurrentViewport >= maxCol ? 'none' : undefined
+  };
+  const imageWrapperStyleProps = {
+    width: fullBleedImageWidth,
+    borderRadius: imgColCurrentViewport >= maxCol ? borderRadius : undefined,
+    overflow: imgColCurrentViewport >= maxCol ? 'hidden' : undefined,
+    display: imgColCurrentViewport === 0 ? 'none' : undefined
+  };
   const columnFlex = {
     flexGrow: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? 0 : 1,
     flexShrink: 1,
@@ -111,14 +154,25 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
         alignItems: contentStackAlign
       },
       space: 0,
-      children: [children ? /*#__PURE__*/_jsx(CardContent, {
-        tokens: tokens,
-        variant: variant,
-        withFooter: hasFooter,
-        children: children
-      }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/_jsx(FullBleedContent, {
-        borderRadius: fullBleedBorderRadius,
-        ...fullBleedContentProps
+      children: [children ? /*#__PURE__*/_jsx(ConditionalWrapper, {
+        WrapperComponent: DynamicWidthContainer,
+        wrapperProps: contentWrapperStyleProps,
+        condition: isImageWidthAdjustable,
+        children: /*#__PURE__*/_jsx(CardContent, {
+          tokens: tokens,
+          variant: variant,
+          withFooter: hasFooter,
+          children: children
+        })
+      }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/_jsx(ConditionalWrapper, {
+        WrapperComponent: DynamicWidthContainer,
+        wrapperProps: imageWrapperStyleProps,
+        condition: isImageWidthAdjustable,
+        children: /*#__PURE__*/_jsx(FullBleedContent, {
+          borderRadius: fullBleedBorderRadius,
+          ...fullBleedContentProps,
+          position: fullBleedContentPosition
+        })
       })]
     }) : null, footer && /*#__PURE__*/_jsx(CardFooter, {
       padding: footerPadding,

package/lib-module/Footnote/Footnote.js

@@ -144,13 +144,13 @@ const ListItem = /*#__PURE__*/styled(OrderedListBase.Item).withConfig({
   return {
     display: 'list-item',
     '&::marker': {
-      fontFamily: 'HelveticaNow400normal',
+      fontFamily: 'HNforTELUSSA400normal',
       fontSize: listItemMarkerFontSize,
       lineHeight: listItemMarkerLineHeight,
       textAlign: 'end !important'
     },
     color: listItemColor,
-    fontFamily: 'HelveticaNow400normal',
+    fontFamily: 'HNforTELUSSA400normal',
     fontSize: listItemFontSize,
     lineHeight: listItemLineHeight,
     paddingLeft: listItemPaddingLeft
@@ -212,7 +212,7 @@ const StyledCustomContentContainer = /*#__PURE__*/styled.div.withConfig({
     lineHeight: listItemLineHeight,
     paddingLeft: listItemPaddingLeft,
     color: listItemColor,
-    fontFamily: 'HelveticaNow400normal'
+    fontFamily: 'HNforTELUSSA400normal'
   };
 });
 const usePrevious = value => {

package/lib-module/Table/Table.js

@@ -15,9 +15,10 @@ const StyledTable = /*#__PURE__*/styled.table.withConfig({
   componentId: "components-web__sc-10d9q3m-1"
 })(["margin:0;padding:0;width:", ";border:", ";"], _ref => {
   let {
+    fullWidth,
     tableWidth
   } = _ref;
-  return `${tableWidth}px`;
+  return fullWidth ? '100%' : `${tableWidth}px`;
 }, props => `${props.borderWidth}px solid ${props.borderColor}`);
 const TableContext = /*#__PURE__*/React.createContext({});
 export const useTableContext = () => React.useContext(TableContext);
@@ -93,6 +94,7 @@ const Table = _ref2 => {
         tableWidth: tableWidth,
         cellSpacing: 0,
         ref: tableRef,
+        fullWidth: fullWidth,
         ...selectProps(rest),
         children: children
       })

package/lib-module/shared/ConditionalWrapper/ConditionalWrapper.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ConditionalWrapper = _ref => {
+  let {
+    children,
+    condition,
+    WrapperComponent,
+    wrapperProps
+  } = _ref;
+  return condition ? /*#__PURE__*/_jsx(WrapperComponent, {
+    ...wrapperProps,
+    children: children
+  }) : children;
+};
+ConditionalWrapper.propTypes = {
+  children: PropTypes.node,
+  condition: PropTypes.bool,
+  WrapperComponent: PropTypes.elementType,
+  wrapperProps: PropTypes.object
+};
+export default ConditionalWrapper;

package/lib-module/shared/ConditionalWrapper/index.js

@@ -0,0 +1,2 @@
+import ConditionalWrapper from './ConditionalWrapper';
+export default ConditionalWrapper;

package/lib-module/utils/theming/with-client-theme.js

@@ -9,7 +9,7 @@ const withClientTheme = Component => {
       variant,
       ...props
     } = _ref;
-    const theme = useThemeTokens(Component.displayName, variant, tokenOverrides);
+    const theme = useThemeTokens(Component.displayName, tokenOverrides, variant);
     return /*#__PURE__*/_jsx(Component, {
       theme: theme,
       ...props

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.91.0",
+    "@telus-uds/components-base": "1.92.0",
     "@telus-uds/system-constants": "^1.3.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": "^2.61.0",
+    "@telus-uds/system-theme-tokens": "^2.62.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.38.0"
+  "version": "2.39.0"
 }

package/src/Card/Card.jsx

@@ -14,12 +14,15 @@ import {
   viewProps,
   PressableCardBase
 } from '@telus-uds/components-base'
+import { useResponsiveProp } from '@telus-uds/components-web'
+import styled from 'styled-components'
 import CardContent from './CardContent'
 import CardFooter from './CardFooter'
 import FullBleedContent, {
   getFullBleedBorderRadius,
   useFullBleedContentProps
 } from '../shared/FullBleedContent'
+import ConditionalWrapper from '../shared/ConditionalWrapper'
 
 // Passes React Native-oriented system props through UDS Card
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -41,6 +44,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * - `alt`: alt tag for an image,
  * - `src`: default image source,
  * - `position`: `none`, `bottom`, `left`, `right` or `top`, depending on where you would like your full bleed image to be placed,
+ * - `imgCol`: set the span of the image per viewport (based on 12 column value for width of card) when `position` of image is on `left` or `right`
  * - all the props from the `ResponsiveImage` component in case you want that full bleed image to be responsive,
  * - `content`: pass a custom JSX to be used for rendering of the full bleed content (defaults to `ResponsiveImage`
  *   receiving the other props).
@@ -52,6 +56,13 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * ## Accessibility
  * `Card` component accepts all the standard accessibility props.
  */
+const DynamicWidthContainer = styled.div(({ width, display, borderRadius, overflow }) => ({
+  width,
+  display,
+  borderRadius,
+  overflow
+}))
+
 const Card = React.forwardRef(
   (
     {
@@ -78,6 +89,8 @@ const Card = React.forwardRef(
       fullBleedContentProps
     } = useFullBleedContentProps(fullBleedContent)
 
+    const { imgCol } = fullBleedContentProps
+
     // 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)
@@ -92,6 +105,29 @@ const Card = React.forwardRef(
       hasFooter
     )
 
+    // takes imgCol from fullBleedContent if present, to dynamically set width of image
+    // card content will adapt to the size of image to add up to 100% width of card width
+    // pass as props to ConditionalWrapper
+    const imgColCurrentViewport = useResponsiveProp(imgCol)
+    const maxCol = 12
+    const fullBleedImageWidth = `${(imgColCurrentViewport / maxCol) * 100}%`
+    const adaptiveContentWidth = `${((maxCol - imgColCurrentViewport) / maxCol) * 100}%`
+
+    const isImageWidthAdjustable =
+      imgCol && (fullBleedContentPosition === 'left' || fullBleedContentPosition === 'right')
+
+    const contentWrapperStyleProps = {
+      width: adaptiveContentWidth,
+      display: imgColCurrentViewport >= maxCol ? 'none' : undefined
+    }
+
+    const imageWrapperStyleProps = {
+      width: fullBleedImageWidth,
+      borderRadius: imgColCurrentViewport >= maxCol ? borderRadius : undefined,
+      overflow: imgColCurrentViewport >= maxCol ? 'hidden' : undefined,
+      display: imgColCurrentViewport === 0 ? 'none' : undefined
+    }
+
     const columnFlex = {
       flexGrow: interactiveCard?.body ? 0 : 1,
       flexShrink: 1,
@@ -128,12 +164,28 @@ const Card = React.forwardRef(
             space={0}
           >
             {children ? (
-              <CardContent tokens={tokens} variant={variant} withFooter={hasFooter}>
-                {children}
-              </CardContent>
+              <ConditionalWrapper
+                WrapperComponent={DynamicWidthContainer}
+                wrapperProps={contentWrapperStyleProps}
+                condition={isImageWidthAdjustable}
+              >
+                <CardContent tokens={tokens} variant={variant} withFooter={hasFooter}>
+                  {children}
+                </CardContent>
+              </ConditionalWrapper>
             ) : null}
             {fullBleedContentPosition !== 'none' && (
-              <FullBleedContent borderRadius={fullBleedBorderRadius} {...fullBleedContentProps} />
+              <ConditionalWrapper
+                WrapperComponent={DynamicWidthContainer}
+                wrapperProps={imageWrapperStyleProps}
+                condition={isImageWidthAdjustable}
+              >
+                <FullBleedContent
+                  borderRadius={fullBleedBorderRadius}
+                  {...fullBleedContentProps}
+                  position={fullBleedContentPosition}
+                />
+              </ConditionalWrapper>
             )}
           </StackView>
         ) : null}

package/src/Footnote/Footnote.jsx

@@ -123,13 +123,13 @@ const ListItem = styled(OrderedListBase.Item)(
   }) => ({
     display: 'list-item',
     '&::marker': {
-      fontFamily: 'HelveticaNow400normal',
+      fontFamily: 'HNforTELUSSA400normal',
       fontSize: listItemMarkerFontSize,
       lineHeight: listItemMarkerLineHeight,
       textAlign: 'end !important'
     },
     color: listItemColor,
-    fontFamily: 'HelveticaNow400normal',
+    fontFamily: 'HNforTELUSSA400normal',
     fontSize: listItemFontSize,
     lineHeight: listItemLineHeight,
     paddingLeft: listItemPaddingLeft
@@ -176,7 +176,7 @@ const StyledCustomContentContainer = styled.div(
     lineHeight: listItemLineHeight,
     paddingLeft: listItemPaddingLeft,
     color: listItemColor,
-    fontFamily: 'HelveticaNow400normal'
+    fontFamily: 'HNforTELUSSA400normal'
   })
 )
 

package/src/Table/Table.jsx

@@ -20,7 +20,7 @@ const StyledContainer = styled.div`
 const StyledTable = styled.table`
   margin: 0;
   padding: 0;
-  width: ${({ tableWidth }) => `${tableWidth}px`};
+  width: ${({ fullWidth, tableWidth }) => (fullWidth ? '100%' : `${tableWidth}px`)};
   border: ${(props) => `${props.borderWidth}px solid ${props.borderColor}`};
 `
 
@@ -94,6 +94,7 @@ const Table = ({
           tableWidth={tableWidth}
           cellSpacing={0}
           ref={tableRef}
+          fullWidth={fullWidth}
           {...selectProps(rest)}
         >
           {children}

package/src/shared/ConditionalWrapper/ConditionalWrapper.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const ConditionalWrapper = ({ children, condition, WrapperComponent, wrapperProps }) =>
+  condition ? <WrapperComponent {...wrapperProps}>{children}</WrapperComponent> : children
+
+ConditionalWrapper.propTypes = {
+  children: PropTypes.node,
+  condition: PropTypes.bool,
+  WrapperComponent: PropTypes.elementType,
+  wrapperProps: PropTypes.object
+}
+
+export default ConditionalWrapper

package/src/shared/ConditionalWrapper/index.js

@@ -0,0 +1,3 @@
+import ConditionalWrapper from './ConditionalWrapper'
+
+export default ConditionalWrapper

package/src/utils/theming/with-client-theme.jsx

@@ -5,7 +5,7 @@ import { getTokensPropType, useThemeTokens } from '@telus-uds/components-base'
 
 const withClientTheme = (Component) => {
   const UdsStyledComponent = ({ tokens: tokenOverrides, variant, ...props }) => {
-    const theme = useThemeTokens(Component.displayName, variant, tokenOverrides)
+    const theme = useThemeTokens(Component.displayName, tokenOverrides, variant)
     return <Component theme={theme} {...props} />
   }