@telus-uds/components-web 2.28.0 → 2.30.0

package/CHANGELOG.md

@@ -1,12 +1,40 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Mon, 08 Jan 2024 20:08:06 GMT and should not be manually modified.
+This log was last generated on Mon, 29 Jan 2024 18:26:01 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.30.0
+
+Mon, 29 Jan 2024 18:26:01 GMT
+
+### Minor changes
+
+- Add "use client" directive to Image (wlsdud194@hotmail.com)
+- Bump @telus-uds/components-base to v1.75.0
+- Bump @telus-uds/system-theme-tokens to v2.50.1
+
+### Patches
+
+- fix termsAndCondition component visual states (guillermo.peitzner@telus.com)
+
+## 2.29.0
+
+Thu, 18 Jan 2024 22:55:53 GMT
+
+### Minor changes
+
+- prop for footer to handle mobile (ben@mcloughlin.dev)
+- Bump @telus-uds/components-base to v1.74.0
+- Bump @telus-uds/system-theme-tokens to v2.50.0
+
+### Patches
+
+- fix hardcorded french label from datepicker (guillermo.peitzner@telus.com)
+
 ## 2.28.0
 
-Mon, 08 Jan 2024 20:08:06 GMT
+Mon, 08 Jan 2024 20:16:06 GMT
 
 ### Minor changes
 

package/lib/DatePicker/DatePicker.js

@@ -323,7 +323,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         onChange: onChangeInput,
         tooltip: tooltip,
         hintPosition: hintPosition,
-        label: ((_dictionary$copy = _dictionary.default[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription) ?? label,
+        label: label ?? ((_dictionary$copy = _dictionary.default[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription),
         value: inputText,
         validation: validation,
         inactive: disabled,

package/lib/Footnote/Footnote.js

@@ -30,7 +30,8 @@ const StyledFootnote = /*#__PURE__*/_styledComponents.default.div.withConfig({
     footnoteBackground,
     isVisible,
     footnoteBorderTop,
-    isScrollable
+    isScrollable,
+    isMobileFullScreen
   } = _ref;
   return {
     position: 'fixed',
@@ -49,7 +50,7 @@ const StyledFootnote = /*#__PURE__*/_styledComponents.default.div.withConfig({
     },
     zIndex: 99999,
     visibility: isVisible ? 'visible' : 'hidden',
-    ...(0, _utils.media)().from('md').css({
+    ...(0, _utils.media)().from(isMobileFullScreen ? 'md' : 'xs').css({
       top: 'auto',
       bottom: 0,
       height: 'auto',
@@ -262,6 +263,7 @@ const Footnote = props => {
     isOpen,
     tokens,
     variant = {},
+    isMobileFullScreen = true,
     dictionary = _dictionary.default,
     ...rest
   } = props;
@@ -507,6 +509,7 @@ const Footnote = props => {
         footnoteBackground: footnoteBackground,
         footnoteBorderTop: `${footnoteBorderTopSizeMd}px solid ${footnoteBorderColorMd}`,
         isScrollable: isScrollable,
+        isMobileFullScreen: isMobileFullScreen,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentContainer, {
           maxWidth: maxWidth,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFootnoteHeader, {
@@ -609,13 +612,18 @@ Footnote.propTypes = {
   dictionary: _propTypes.default.shape({
     en: dictionaryContentShape,
     fr: dictionaryContentShape
-  })
+  }),
+  /**
+   * A boolean flag used to disable isMobileFullScreen of Footnote for mobile view
+   */
+  isMobileFullScreen: _propTypes.default.bool
 };
 Footnote.defaultProps = {
   isOpen: false,
   number: undefined,
   content: undefined,
-  copy: 'en'
+  copy: 'en',
+  isMobileFullScreen: true
 };
 var _default = Footnote;
 exports.default = _default;

package/lib/Footnote/FootnoteLink.js

@@ -87,6 +87,7 @@ const FootnoteLink = _ref2 => {
       "aria-label": getCopy('a11yLabel'),
       ref: refs[index],
       onClick: event => handleOnClick(event, index),
+      tabIndex: 0,
       ...selectProps(rest),
       ...themeTokens,
       fontSize: fontSize,

package/lib/Image/index.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/lib/TermsAndConditions/ExpandCollapse.js

@@ -52,12 +52,32 @@ const ExpandCollapseTitle = /*#__PURE__*/_styledComponents.default.h4.withConfig
     margin: `${tokens.expandTitleMarginX}px ${tokens.expandTitleMarginY}px`
   };
 });
-const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+const getIconButtonTokens = _ref3 => {
+  let {
+    icon,
+    iconBackgroundColor,
+    iconBorderColor,
+    iconColor,
+    iconOuterBorderColor,
+    iconOuterBorderGap,
+    iconOuterBorderWidth
+  } = _ref3;
+  return {
+    icon,
+    backgroundColor: iconBackgroundColor,
+    borderColor: iconBorderColor,
+    iconColor,
+    outerBorderColor: iconOuterBorderColor,
+    outerBorderGap: iconOuterBorderGap,
+    outerBorderWidth: iconOuterBorderWidth
+  };
+};
+const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
   let {
     children,
     collapseTitle,
     expandTitle = collapseTitle
-  } = _ref3;
+  } = _ref4;
   const getTokens = (0, _componentsBase.useThemeTokensCallback)('TermsAndConditions', {}, {});
   const {
     expandBaseBorderWidth,
@@ -94,20 +114,17 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         const {
           expanded
         } = pressableState || {};
-        const {
-          icon
-        } = getTokens({
-          expanded
-        });
+        const iconTokens = getIconButtonTokens(getTokens(pressableState || {}));
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ExpandCollapseControl, {
           ref: ref,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandCollapseIconContainer, {
             tokens: getTokens(),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
-              icon: icon,
               variant: {
                 size: 'small'
-              }
+              },
+              tokens: iconTokens,
+              focusable: false
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandCollapseTitle, {
             tokens: getTokens(),

package/lib-module/DatePicker/DatePicker.js

@@ -316,7 +316,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
         onChange: onChangeInput,
         tooltip: tooltip,
         hintPosition: hintPosition,
-        label: ((_dictionary$copy = dictionary[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription) ?? label,
+        label: label ?? ((_dictionary$copy = dictionary[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription),
         value: inputText,
         validation: validation,
         inactive: disabled,

package/lib-module/Footnote/Footnote.js

@@ -22,7 +22,8 @@ const StyledFootnote = /*#__PURE__*/styled.div.withConfig({
     footnoteBackground,
     isVisible,
     footnoteBorderTop,
-    isScrollable
+    isScrollable,
+    isMobileFullScreen
   } = _ref;
   return {
     position: 'fixed',
@@ -41,7 +42,7 @@ const StyledFootnote = /*#__PURE__*/styled.div.withConfig({
     },
     zIndex: 99999,
     visibility: isVisible ? 'visible' : 'hidden',
-    ...media().from('md').css({
+    ...media().from(isMobileFullScreen ? 'md' : 'xs').css({
       top: 'auto',
       bottom: 0,
       height: 'auto',
@@ -254,6 +255,7 @@ const Footnote = props => {
     isOpen,
     tokens,
     variant = {},
+    isMobileFullScreen = true,
     dictionary = defaultDictionary,
     ...rest
   } = props;
@@ -499,6 +501,7 @@ const Footnote = props => {
         footnoteBackground: footnoteBackground,
         footnoteBorderTop: `${footnoteBorderTopSizeMd}px solid ${footnoteBorderColorMd}`,
         isScrollable: isScrollable,
+        isMobileFullScreen: isMobileFullScreen,
         children: /*#__PURE__*/_jsxs(ContentContainer, {
           maxWidth: maxWidth,
           children: [/*#__PURE__*/_jsx(StyledFootnoteHeader, {
@@ -601,12 +604,17 @@ Footnote.propTypes = {
   dictionary: PropTypes.shape({
     en: dictionaryContentShape,
     fr: dictionaryContentShape
-  })
+  }),
+  /**
+   * A boolean flag used to disable isMobileFullScreen of Footnote for mobile view
+   */
+  isMobileFullScreen: PropTypes.bool
 };
 Footnote.defaultProps = {
   isOpen: false,
   number: undefined,
   content: undefined,
-  copy: 'en'
+  copy: 'en',
+  isMobileFullScreen: true
 };
 export default Footnote;

package/lib-module/Footnote/FootnoteLink.js

@@ -81,6 +81,7 @@ const FootnoteLink = _ref2 => {
       "aria-label": getCopy('a11yLabel'),
       ref: refs[index],
       onClick: event => handleOnClick(event, index),
+      tabIndex: 0,
       ...selectProps(rest),
       ...themeTokens,
       fontSize: fontSize,

package/lib-module/Image/index.js

@@ -1,3 +1,5 @@
+'use client';
+
 import Image from './Image';
 import withClientTheme from '../utils/theming/with-client-theme';
 

package/lib-module/TermsAndConditions/ExpandCollapse.js

@@ -44,12 +44,32 @@ const ExpandCollapseTitle = /*#__PURE__*/styled.h4.withConfig({
     margin: `${tokens.expandTitleMarginX}px ${tokens.expandTitleMarginY}px`
   };
 });
-const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const getIconButtonTokens = _ref3 => {
+  let {
+    icon,
+    iconBackgroundColor,
+    iconBorderColor,
+    iconColor,
+    iconOuterBorderColor,
+    iconOuterBorderGap,
+    iconOuterBorderWidth
+  } = _ref3;
+  return {
+    icon,
+    backgroundColor: iconBackgroundColor,
+    borderColor: iconBorderColor,
+    iconColor,
+    outerBorderColor: iconOuterBorderColor,
+    outerBorderGap: iconOuterBorderGap,
+    outerBorderWidth: iconOuterBorderWidth
+  };
+};
+const ExpandCollapse = /*#__PURE__*/forwardRef((_ref4, ref) => {
   let {
     children,
     collapseTitle,
     expandTitle = collapseTitle
-  } = _ref3;
+  } = _ref4;
   const getTokens = useThemeTokensCallback('TermsAndConditions', {}, {});
   const {
     expandBaseBorderWidth,
@@ -86,20 +106,17 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
         const {
           expanded
         } = pressableState || {};
-        const {
-          icon
-        } = getTokens({
-          expanded
-        });
+        const iconTokens = getIconButtonTokens(getTokens(pressableState || {}));
         return /*#__PURE__*/_jsxs(ExpandCollapseControl, {
           ref: ref,
           children: [/*#__PURE__*/_jsx(ExpandCollapseIconContainer, {
             tokens: getTokens(),
             children: /*#__PURE__*/_jsx(IconButton, {
-              icon: icon,
               variant: {
                 size: 'small'
-              }
+              },
+              tokens: iconTokens,
+              focusable: false
             })
           }), /*#__PURE__*/_jsx(ExpandCollapseTitle, {
             tokens: getTokens(),

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.73.0",
+    "@telus-uds/components-base": "1.75.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.49.0",
+    "@telus-uds/system-theme-tokens": "^2.50.1",
     "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.28.0"
+  "version": "2.30.0"
 }

package/src/DatePicker/DatePicker.jsx

@@ -288,7 +288,7 @@ const DatePicker = forwardRef(
               onChange={onChangeInput}
               tooltip={tooltip}
               hintPosition={hintPosition}
-              label={dictionary[copy]?.roleDescription ?? label}
+              label={label ?? dictionary[copy]?.roleDescription}
               value={inputText}
               validation={validation}
               inactive={disabled}

package/src/Footnote/Footnote.jsx

@@ -26,7 +26,7 @@ const GlobalBodyScrollLock = createGlobalStyle({
 })
 
 const StyledFootnote = styled.div(
-  ({ footnoteBackground, isVisible, footnoteBorderTop, isScrollable }) => ({
+  ({ footnoteBackground, isVisible, footnoteBorderTop, isScrollable, isMobileFullScreen }) => ({
     position: 'fixed',
     overflowY: isVisible && isScrollable ? 'scroll' : 'hidden',
     top: 0,
@@ -43,13 +43,15 @@ const StyledFootnote = styled.div(
     },
     zIndex: 99999,
     visibility: isVisible ? 'visible' : 'hidden',
-    ...media().from('md').css({
-      top: 'auto',
-      bottom: 0,
-      height: 'auto',
-      maxHeight: '50vh',
-      borderTop: footnoteBorderTop
-    })
+    ...media()
+      .from(isMobileFullScreen ? 'md' : 'xs')
+      .css({
+        top: 'auto',
+        bottom: 0,
+        height: 'auto',
+        maxHeight: '50vh',
+        borderTop: footnoteBorderTop
+      })
   }),
   ({ isOpen }) => {
     if (isOpen) {
@@ -217,6 +219,7 @@ const Footnote = (props) => {
     isOpen,
     tokens,
     variant = {},
+    isMobileFullScreen = true,
     dictionary = defaultDictionary,
     ...rest
   } = props
@@ -488,6 +491,7 @@ const Footnote = (props) => {
           footnoteBackground={footnoteBackground}
           footnoteBorderTop={`${footnoteBorderTopSizeMd}px solid ${footnoteBorderColorMd}`}
           isScrollable={isScrollable}
+          isMobileFullScreen={isMobileFullScreen}
         >
           <ContentContainer maxWidth={maxWidth}>
             <StyledFootnoteHeader ref={headerRef} viewport={viewport}>
@@ -588,14 +592,19 @@ Footnote.propTypes = {
   dictionary: PropTypes.shape({
     en: dictionaryContentShape,
     fr: dictionaryContentShape
-  })
+  }),
+  /**
+   * A boolean flag used to disable isMobileFullScreen of Footnote for mobile view
+   */
+  isMobileFullScreen: PropTypes.bool
 }
 
 Footnote.defaultProps = {
   isOpen: false,
   number: undefined,
   content: undefined,
-  copy: 'en'
+  copy: 'en',
+  isMobileFullScreen: true
 }
 
 export default Footnote

package/src/Footnote/FootnoteLink.jsx

@@ -80,6 +80,7 @@ const FootnoteLink = ({
           key={num}
           ref={refs[index]}
           onClick={(event) => handleOnClick(event, index)}
+          tabIndex={0}
           {...selectProps(rest)}
           {...themeTokens}
           fontSize={fontSize}

package/src/Image/index.js

@@ -1,3 +1,5 @@
+'use client'
+
 import Image from './Image'
 import withClientTheme from '../utils/theming/with-client-theme'
 

package/src/TermsAndConditions/ExpandCollapse.jsx

@@ -31,6 +31,24 @@ const ExpandCollapseTitle = styled.h4(({ tokens }) => ({
   margin: `${tokens.expandTitleMarginX}px ${tokens.expandTitleMarginY}px`
 }))
 
+const getIconButtonTokens = ({
+  icon,
+  iconBackgroundColor,
+  iconBorderColor,
+  iconColor,
+  iconOuterBorderColor,
+  iconOuterBorderGap,
+  iconOuterBorderWidth
+}) => ({
+  icon,
+  backgroundColor: iconBackgroundColor,
+  borderColor: iconBorderColor,
+  iconColor,
+  outerBorderColor: iconOuterBorderColor,
+  outerBorderGap: iconOuterBorderGap,
+  outerBorderWidth: iconOuterBorderWidth
+})
+
 const ExpandCollapse = forwardRef(
   ({ children, collapseTitle, expandTitle = collapseTitle }, ref) => {
     const getTokens = useThemeTokensCallback('TermsAndConditions', {}, {})
@@ -69,13 +87,13 @@ const ExpandCollapse = forwardRef(
             // eslint-disable-next-line react/no-unstable-nested-components
             control={(pressableState) => {
               const { expanded } = pressableState || {}
-              const { icon } = getTokens({ expanded })
+              const iconTokens = getIconButtonTokens(getTokens(pressableState || {}))
 
               return (
                 <ExpandCollapseControl ref={ref}>
                   <ExpandCollapseIconContainer tokens={getTokens()}>
                     {/* Can use `Icon` instead of `IconButton` but `Icon` does not have required stylistic variants */}
-                    <IconButton icon={icon} variant={{ size: 'small' }} />
+                    <IconButton variant={{ size: 'small' }} tokens={iconTokens} focusable={false} />
                   </ExpandCollapseIconContainer>
                   <ExpandCollapseTitle tokens={getTokens()}>
                     {expanded ? expandTitle : collapseTitle}