@telus-uds/components-web 2.28.0 → 2.29.0

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # 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 Thu, 18 Jan 2024 22:43:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.29.0
+
+Thu, 18 Jan 2024 22:43:26 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-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/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.73.0",
+    "@telus-uds/components-base": "1.74.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.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.28.0"
+  "version": "2.29.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