@telus-uds/components-web 2.37.0 → 2.39.0

package/CHANGELOG.md

@@ -1,12 +1,45 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Fri, 26 Jul 2024 21:17:56 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:35:32 GMT
+
+### Minor changes
+
+- `ExpandCollapseMini`: Add `initialOpen` prop to control the expand behavior on first render (jaime.tuyuc@telus.com)
+- OrderedList: add itemTextColor token and pass tokens down to children (jacqui.koroll@telus.com)
+- Bump @telus-uds/components-base to v1.91.0
+- Bump @telus-uds/system-theme-tokens to v2.61.0
+
+### Patches
+
+- Ribbon: add overflow hidden to fix sharp ribbon curve (jacqui.koroll@telus.com)
+- QuantitySelector: update default dictionary values (jacqui.koroll@telus.com)
+
 ## 2.37.0
 
-Fri, 26 Jul 2024 21:17:56 GMT
+Fri, 26 Jul 2024 21:24: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/ExpandCollapseMini/ExpandCollapseMini.js

@@ -16,8 +16,10 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     onToggle = () => {},
     tokens = {},
     nativeID,
+    initialOpen = false,
     ...rest
   } = _ref;
+  const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel';
   const handleChange = (openPanels, event) => {
     if (typeof onToggle === 'function') {
       const isOpen = openPanels.length > 0;
@@ -27,9 +29,10 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse, {
     onChange: handleChange,
     tokens: tokens,
+    initialOpen: initialOpen ? [expandCollapeMiniPanelId] : [],
     children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse.Panel, {
       ...expandProps,
-      panelId: "ExpandCollapseMiniPanel",
+      panelId: expandCollapeMiniPanelId,
       variant: {
         mini: true
       },
@@ -68,6 +71,10 @@ ExpandCollapseMini.propTypes = {
    * Children nodes that can be added
    */
   children: _propTypes.default.node.isRequired,
+  /**
+   * Controls if the panel and the content is opened by default on the first load
+   */
+  initialOpen: _propTypes.default.bool,
   tokens: (0, _componentsBase.getTokensPropType)('ExpandCollapseMini')
 };
 var _default = ExpandCollapseMini;

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/OrderedList/Item.js

@@ -20,13 +20,14 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     itemFontSize,
     itemLineHeight,
     itemFontName,
-    itemColor
+    itemColor,
+    itemTextColor
   } = _ref;
   return (0, _componentsBase.applyTextStyles)({
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
     fontName: itemFontName,
-    color: itemColor,
+    color: itemColor || itemTextColor,
     themeOptions,
     lineHeight: itemLineHeight
   });
@@ -45,14 +46,15 @@ const StyledItemBase = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.def
     itemLineHeight,
     themeOptions,
     listGutter,
-    itemColor
+    itemColor,
+    itemTextColor
   } = _ref2;
   return {
     counterIncrement: _constants.OL_COUNTER_NAME,
     '::before': {
       content: `counter(${_constants.OL_COUNTER_NAME})'.'`,
       display: 'inline-flex',
-      color: itemColor,
+      color: itemColor || itemTextColor,
       width: itemBulletContainerWidth,
       paddingRight: listGutter,
       justifyContent: itemBulletTextAlign,
@@ -90,7 +92,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const headingTokens = title && {
     lineHeight: themeTokens.itemLineHeight,
     fontSize: themeTokens.itemFontSize,
-    color: themeTokens.itemColor,
+    color: themeTokens.itemColor || themeTokens.itemTextColor,
     fontName: themeTokens.headerFontName,
     fontWeight: themeTokens.headerFontWeight
   };
@@ -137,7 +139,7 @@ Item.propTypes = {
   /**
    * Item tokens
    */
-  tokens: (0, _componentsBase.getTokensPropType)('List')
+  tokens: (0, _componentsBase.getTokensPropType)('OrderedList')
 };
 var _default = Item;
 exports.default = _default;

package/lib/OrderedList/OrderedList.js

@@ -37,36 +37,42 @@ const OrderedList = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     children,
     start = 1,
     variant = {},
+    tokens = {},
     ...rest
   } = _ref2;
   // Check if children is an array
   const isChildrenArray = Array.isArray(children);
 
-  // Pass any variants "OrderedList" receives down to the individual list items.
-  const childrenWithParentVariants = _react.default.useMemo(() => {
-    const addVariantToProps = child => {
-      var _child$props;
+  // Pass any variants and tokens "OrderedList" receives down to the individual list items.
+  const childrenWithParentVariantsAndTokens = _react.default.useMemo(() => {
+    const addVariantAndTokensToProps = child => {
+      var _child$props, _child$props2;
       const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
+      const existingChildTokens = ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.tokens) ?? {};
       return /*#__PURE__*/_react.default.cloneElement(child, {
         variant: {
           ...existingChildVariants,
           ...variant
+        },
+        tokens: {
+          ...existingChildTokens,
+          ...tokens
         }
       });
     };
-    if (variant) {
+    if (variant || tokens) {
       if (isChildrenArray) {
-        return children.map(addVariantToProps);
+        return children.map(addVariantAndTokensToProps);
       }
-      return [addVariantToProps(children)];
+      return [addVariantAndTokensToProps(children)];
     }
     return children;
-  }, [children, variant, isChildrenArray]);
+  }, [children, variant, isChildrenArray, tokens]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledOrderedListBase, {
     ...selectProps(rest),
     ref: ref,
     start: start,
-    children: childrenWithParentVariants
+    children: childrenWithParentVariantsAndTokens
   });
 });
 OrderedList.displayName = 'OrderedList';
@@ -80,7 +86,8 @@ OrderedList.propTypes = {
    * The position to start the list with.
    */
   start: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  variant: _componentsBase.variantProp.propType
+  variant: _componentsBase.variantProp.propType,
+  tokens: (0, _componentsBase.getTokensPropType)('OrderedList')
 };
 OrderedList.Item = _Item.default;
 var _default = OrderedList;

package/lib/QuantitySelector/dictionary.js

@@ -7,26 +7,26 @@ exports.default = void 0;
 var _default = {
   en: {
     accessibility: {
-      a11yLabel: 'Quantity Selector control',
-      increaseButton: 'Increase quantity button',
-      decreaseButton: 'Decrease quantity button'
+      a11yLabel: 'Quantity selector',
+      increaseButton: 'Increase quantity',
+      decreaseButton: 'Decrease quantity'
     },
     errors: {
-      numberIsTooSmall: minNumber => `Number must be equal or greater than ${minNumber}`,
-      numberIsTooBig: maxNumber => `Number must be equal or less than ${maxNumber}`,
-      invalidCharacters: 'This control does not allow alphabetical or symbol characters. Try using numbers only'
+      numberIsTooSmall: minNumber => `You can enter a number equal or greater than ${minNumber}.`,
+      numberIsTooBig: maxNumber => `You can enter a number equal or less than ${maxNumber}.`,
+      invalidCharacters: 'Try using numbers only. Alphabetical or symbols characters are not allowed.'
     }
   },
   fr: {
     accessibility: {
-      a11yLabel: 'Contrôleur de sélection de nombre',
-      increaseButton: `Bouton d'augmentation de quantité`,
-      decreaseButton: `Bouton de diminution de quantité`
+      a11yLabel: 'Sélecteur de quantité',
+      increaseButton: `Augmenter la quantité`,
+      decreaseButton: `Réduire la quantité`
     },
     errors: {
-      numberIsTooSmall: minNumber => `Le nombre doit être plus grand ou égal que ${minNumber}`,
-      numberIsTooBig: maxNumber => `Le nombre doit être plus petit ou égal que ${maxNumber}`,
-      invalidCharacters: `Ce champ ne supporte pas les caractères alphabétiques ni les symboles. Essayez d'utiliser des chiffres uniquement`
+      numberIsTooSmall: minNumber => `Vous pouvez saisir un nombre égal ou supérieur à ${minNumber}.`,
+      numberIsTooBig: maxNumber => `Vous pouvez saisir un nombre égal ou inférieur à ${maxNumber}.`,
+      invalidCharacters: `Essayez d'utiliser seulement des chiffres. Les caractères alphabétiques ou les symboles ne sont pas permis.`
     }
   }
 };

package/lib/Ribbon/Ribbon.js

@@ -70,7 +70,7 @@ const RibbonContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
 const RibbonCurve = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Ribbon__RibbonCurve",
   componentId: "components-web__sc-186270k-2"
-})(["background:", ";width:", ";height:", ";margin-top:-", ";border-radius:0 0 0 100%;position:relative;z-index:-1;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref10 => {
+})(["background:", ";width:", ";height:", ";margin-top:-", ";border-radius:0 0 0 100%;position:relative;z-index:-1;overflow:hidden;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref10 => {
   let {
     curveBackgroundColor
   } = _ref10;

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/ExpandCollapseMini/ExpandCollapseMini.js

@@ -9,8 +9,10 @@ const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onToggle = () => {},
     tokens = {},
     nativeID,
+    initialOpen = false,
     ...rest
   } = _ref;
+  const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel';
   const handleChange = (openPanels, event) => {
     if (typeof onToggle === 'function') {
       const isOpen = openPanels.length > 0;
@@ -20,9 +22,10 @@ const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   return /*#__PURE__*/_jsx(ExpandCollapse, {
     onChange: handleChange,
     tokens: tokens,
+    initialOpen: initialOpen ? [expandCollapeMiniPanelId] : [],
     children: expandProps => /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
       ...expandProps,
-      panelId: "ExpandCollapseMiniPanel",
+      panelId: expandCollapeMiniPanelId,
       variant: {
         mini: true
       },
@@ -61,6 +64,10 @@ ExpandCollapseMini.propTypes = {
    * Children nodes that can be added
    */
   children: PropTypes.node.isRequired,
+  /**
+   * Controls if the panel and the content is opened by default on the first load
+   */
+  initialOpen: PropTypes.bool,
   tokens: getTokensPropType('ExpandCollapseMini')
 };
 export default ExpandCollapseMini;

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 => {