@telus-uds/components-web 3.2.1 → 3.3.0

package/CHANGELOG.md

@@ -1,12 +1,29 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Thu, 19 Dec 2024 04:54:39 GMT and should not be manually modified.
+This log was last generated on Fri, 10 Jan 2025 21:41:25 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.3.0
+
+Fri, 10 Jan 2025 21:41:25 GMT
+
+### Minor changes
+
+- "Search: iconLeftGap value added in the testTheme file for TextInput in Search" (35577399+JoshHC@users.noreply.github.com)
+- `Docs`: fixed camelcase and hardcoded path for components (kristina.kirpichnikova@telus.com)
+- `DatePicker`: update component to enable custom date formats (eduardo.pereira1@telus.com)
+- `PriceLockup`: new tokens `centsPaddingTop` and `currencySymbolPaddingTop` added to the component to match with Koodo design in the micro variant (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v2.4.0
+- Bump @telus-uds/system-theme-tokens to v3.3.0
+
+### Patches
+
+- "`DatePicker`: calendar position issue rendered incorrectly fixed" (35577399+JoshHC@users.noreply.github.com)
+
 ## 3.2.1
 
-Thu, 19 Dec 2024 04:54:39 GMT
+Thu, 19 Dec 2024 05:02:20 GMT
 
 ### Patches
 

package/lib/DatePicker/DatePicker.js

@@ -14,8 +14,6 @@ const {
   styled
 } = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const dateFormat = 'DD / MM / YYYY';
-const dateFormatWithoutSpaces = 'DD/MM/YYYY';
 const getResponsiveDaySize = function () {
   let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
@@ -55,7 +53,6 @@ const PortalPositionedContainer = styled.div({
     return `${top}px`;
   }
 });
-const validDatePattern = /^([0-2][0-9]|3[0-1])(\/)(0[1-9]|1[0-2])\2(\d{4})$/;
 const getInitialVisibleMonth = (initialVisibleMonth, inputDate) => {
   if (initialVisibleMonth === '' || inputDate instanceof moment) {
     return null;
@@ -90,6 +87,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     copy = 'en',
     id,
     date,
+    dateFormat = 'DD / MM / YYYY',
     feedback,
     inline = false,
     isDayDisabled,
@@ -104,12 +102,13 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     disabled = false,
     prevTestID = '',
     nextTestID = '',
-    placeholder = 'DD / MM / YYYY',
+    placeholder = dateFormat,
     initialVisibleMonth = '',
     ...rest
   } = _ref3;
   const [inputDate, setInputDate] = React.useState(date instanceof moment ? date : undefined);
   const [inputText, setInputText] = React.useState(date instanceof moment ? date.format(dateFormat) : '');
+  const dateFormatWithoutSpaces = dateFormat.replace(/\s/g, '');
   const textInputRef = React.useRef();
   const prevButtonRef = React.useRef();
   const [datePickerPosition, setDatePickerPosition] = React.useState({
@@ -136,7 +135,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     });
 
     // Initial call to set the position
-    updateDatePickerPosition();
+    throttledUpdate();
 
     // Register event listeners
     window.addEventListener('resize', throttledUpdate);
@@ -165,7 +164,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       setInputDate(date);
       setInputText(date instanceof moment ? date.format(dateFormat) : '');
     }
-  }, [date, inputDate]);
+  }, [date, inputDate, dateFormat]);
   React.useEffect(() => {
     let timeoutId;
     if (prevButtonRef.current && isFocused) {
@@ -234,7 +233,9 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
   };
   const handleValidation = inputValidation => {
-    if (validDatePattern.test(inputText.replace(/\s+/g, '')) === false && inputText !== '') {
+    const momentDate = moment(inputText, dateFormat, true);
+    const isValidDate = momentDate.isValid();
+    if (!isValidDate && inputText !== '') {
       return 'error';
     }
     if (inputValidation === 'error' || inputValidation === 'success') {
@@ -443,8 +444,11 @@ DatePicker.propTypes = {
    */
   date: momentPropTypes.momentObj,
   /**
-   * A detailed description of validation error/success or additional instructions.
-   * Visual variant is determined based on the `validation` prop.
+   * A Moment instance representing the currently selected date, i.e. `moment()`
+   */
+  dateFormat: PropTypes.string,
+  /**
+   * Optional date format for the date input. If not set, the default value will be `DD / MM / YYYY`
    */
   feedback: PropTypes.string,
   /**
@@ -499,7 +503,7 @@ DatePicker.propTypes = {
    */
   nextTestID: PropTypes.string,
   /**
-   * Optional placeholder for the date input. If not set the default value will be `DD / MM / YYYY`
+   * Optional placeholder for the date input. If not set, the default value will be equal to the `dateFormat` prop
    */
   placeholder: PropTypes.string,
   /**

package/lib/PriceLockup/PriceLockup.js

@@ -117,13 +117,22 @@ const StrikeThroughContainer = styled.div`
     position: absolute;
   }
 `;
-const selectFootnoteLinkStyles = _ref13 => {
+const TypographyContainer = styled.div`
+  display: flex;
+  padding-top: ${_ref13 => {
+  let {
+    paddingTop
+  } = _ref13;
+  return `${paddingTop || 0}px`;
+}};
+`;
+const selectFootnoteLinkStyles = _ref14 => {
   let {
     footnoteLinkColor,
     footnoteLinkFontName,
     footnoteLinkFontWeight,
     footnoteLinkLineHeight
-  } = _ref13;
+  } = _ref14;
   return {
     color: footnoteLinkColor,
     fontName: footnoteLinkFontName,
@@ -131,19 +140,19 @@ const selectFootnoteLinkStyles = _ref13 => {
     lineHeight: footnoteLinkLineHeight
   };
 };
-const selectStrikeThroughTokens = _ref14 => {
+const selectStrikeThroughTokens = _ref15 => {
   let {
     strikeThroughPosition,
     strikeThroughHeight,
     strikeThroughColor
-  } = _ref14;
+  } = _ref15;
   return {
     strikeThroughHeight,
     strikeThroughPosition,
     strikeThroughColor
   };
 };
-const PriceLockup = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
+const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -160,7 +169,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
     tokens: priceLockupTokens,
     variant = {},
     ...rest
-  } = _ref15;
+  } = _ref16;
   const viewport = useViewport();
   const {
     footnoteMarginTop,
@@ -193,6 +202,10 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
   const amount = hasCents ? priceString.substring(0, separatorPosition) : priceString;
   const cents = hasCents ? priceString.substring(separatorPosition + 1) : null;
   const renderTypography = (value, tokens, position) => {
+    const {
+      paddingTop,
+      ...restOfTokens
+    } = tokens;
     const customProps = position === 'bottom' ? {
       variant: {
         size: 'micro'
@@ -202,13 +215,16 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
       }
     } : {
       tokens: {
-        ...tokens,
+        ...restOfTokens,
         color: fontColor
       }
     };
-    return /*#__PURE__*/_jsx(Typography, {
-      ...customProps,
-      children: value
+    return /*#__PURE__*/_jsx(TypographyContainer, {
+      paddingTop: paddingTop,
+      children: /*#__PURE__*/_jsx(Typography, {
+        ...customProps,
+        children: value
+      })
     });
   };
   const renderCurrencySymbol = () => renderTypography(`${currencySymbol}`, typographyTokens.dollarSign);

package/lib/PriceLockup/tokens.js

@@ -7,12 +7,14 @@ export default _ref => {
     currencySymbolFontSize,
     currencySymbolLineHeight,
     currencySymbolFontWeight,
+    currencySymbolPaddingTop,
     amountFontSize,
     amountLineHeight,
     amountLetterSpacing,
     amountFontWeight,
     centsFontSize,
     centsLineHeight,
+    centsPaddingTop,
     rateFontSize,
     rateLineHeight,
     bottomTextFontSize,
@@ -28,7 +30,8 @@ export default _ref => {
     dollarSign: {
       fontSize: currencySymbolFontSize,
       lineHeight: currencySymbolLineHeight,
-      fontWeight: currencySymbolFontWeight
+      fontWeight: currencySymbolFontWeight,
+      paddingTop: currencySymbolPaddingTop
     },
     amount: {
       color: fontColor,
@@ -40,7 +43,8 @@ export default _ref => {
     cents: {
       fontSize: centsFontSize,
       lineHeight: centsLineHeight,
-      fontWeight: centsFontWeight
+      fontWeight: centsFontWeight,
+      paddingTop: centsPaddingTop
     },
     rate: {
       fontSize: rateFontSize,

package/package.json

@@ -6,7 +6,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^2.3.0",
+    "@telus-uds/components-base": "^2.4.0",
     "@telus-uds/system-constants": "^2.0.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -14,7 +14,7 @@
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^3.2.0",
+    "@telus-uds/system-theme-tokens": "^3.3.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -81,5 +81,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "3.2.1"
+  "version": "3.3.0"
 }

package/src/DatePicker/DatePicker.jsx

@@ -24,8 +24,7 @@ import { htmlAttrs, styledComponents } from '../utils'
 const { styled } = styledComponents
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
-const dateFormat = 'DD / MM / YYYY'
-const dateFormatWithoutSpaces = 'DD/MM/YYYY'
+
 const getResponsiveDaySize = (inline = false, viewport = 'md') => {
   if (viewport === 'xs') {
     return inline ? undefined : 36
@@ -56,8 +55,6 @@ const PortalPositionedContainer = styled.div({
   top: ({ top }) => `${top}px`
 })
 
-const validDatePattern = /^([0-2][0-9]|3[0-1])(\/)(0[1-9]|1[0-2])\2(\d{4})$/
-
 const getInitialVisibleMonth = (initialVisibleMonth, inputDate) => {
   if (initialVisibleMonth === '' || inputDate instanceof moment) {
     return null
@@ -92,6 +89,7 @@ const DatePicker = React.forwardRef(
       copy = 'en',
       id,
       date,
+      dateFormat = 'DD / MM / YYYY',
       feedback,
       inline = false,
       isDayDisabled,
@@ -106,16 +104,20 @@ const DatePicker = React.forwardRef(
       disabled = false,
       prevTestID = '',
       nextTestID = '',
-      placeholder = 'DD / MM / YYYY',
+      placeholder = dateFormat,
+
       initialVisibleMonth = '',
       ...rest
     },
     ref
   ) => {
     const [inputDate, setInputDate] = React.useState(date instanceof moment ? date : undefined)
+
     const [inputText, setInputText] = React.useState(
       date instanceof moment ? date.format(dateFormat) : ''
     )
+    const dateFormatWithoutSpaces = dateFormat.replace(/\s/g, '')
+
     const textInputRef = React.useRef()
     const prevButtonRef = React.useRef()
     const [datePickerPosition, setDatePickerPosition] = React.useState({ left: 0, top: 0 })
@@ -136,7 +138,7 @@ const DatePicker = React.forwardRef(
       const throttledUpdate = throttle(updateDatePickerPosition, 100, { leading: false })
 
       // Initial call to set the position
-      updateDatePickerPosition()
+      throttledUpdate()
 
       // Register event listeners
       window.addEventListener('resize', throttledUpdate)
@@ -161,7 +163,7 @@ const DatePicker = React.forwardRef(
         setInputDate(date)
         setInputText(date instanceof moment ? date.format(dateFormat) : '')
       }
-    }, [date, inputDate])
+    }, [date, inputDate, dateFormat])
 
     React.useEffect(() => {
       let timeoutId
@@ -241,7 +243,10 @@ const DatePicker = React.forwardRef(
     }
 
     const handleValidation = (inputValidation) => {
-      if (validDatePattern.test(inputText.replace(/\s+/g, '')) === false && inputText !== '') {
+      const momentDate = moment(inputText, dateFormat, true)
+      const isValidDate = momentDate.isValid()
+
+      if (!isValidDate && inputText !== '') {
         return 'error'
       }
 
@@ -467,8 +472,11 @@ DatePicker.propTypes = {
    */
   date: momentPropTypes.momentObj,
   /**
-   * A detailed description of validation error/success or additional instructions.
-   * Visual variant is determined based on the `validation` prop.
+   * A Moment instance representing the currently selected date, i.e. `moment()`
+   */
+  dateFormat: PropTypes.string,
+  /**
+   * Optional date format for the date input. If not set, the default value will be `DD / MM / YYYY`
    */
   feedback: PropTypes.string,
   /**
@@ -524,7 +532,7 @@ DatePicker.propTypes = {
    */
   nextTestID: PropTypes.string,
   /**
-   * Optional placeholder for the date input. If not set the default value will be `DD / MM / YYYY`
+   * Optional placeholder for the date input. If not set, the default value will be equal to the `dateFormat` prop
    */
   placeholder: PropTypes.string,
   /**

package/src/PriceLockup/PriceLockup.jsx

@@ -74,6 +74,10 @@ const StrikeThroughContainer = styled.div`
     position: absolute;
   }
 `
+const TypographyContainer = styled.div`
+  display: flex;
+  padding-top: ${({ paddingTop }) => `${paddingTop || 0}px`};
+`
 
 const selectFootnoteLinkStyles = ({
   footnoteLinkColor,
@@ -154,11 +158,17 @@ const PriceLockup = React.forwardRef(
     const cents = hasCents ? priceString.substring(separatorPosition + 1) : null
 
     const renderTypography = (value, tokens, position) => {
+      const { paddingTop, ...restOfTokens } = tokens
       const customProps =
         position === 'bottom'
           ? { variant: { size: 'micro' }, tokens: { color: fontColor } }
-          : { tokens: { ...tokens, color: fontColor } }
-      return <Typography {...customProps}>{value}</Typography>
+          : { tokens: { ...restOfTokens, color: fontColor } }
+
+      return (
+        <TypographyContainer paddingTop={paddingTop}>
+          <Typography {...customProps}>{value}</Typography>
+        </TypographyContainer>
+      )
     }
 
     const renderCurrencySymbol = () =>

package/src/PriceLockup/tokens.js

@@ -6,12 +6,14 @@ export default ({
   currencySymbolFontSize,
   currencySymbolLineHeight,
   currencySymbolFontWeight,
+  currencySymbolPaddingTop,
   amountFontSize,
   amountLineHeight,
   amountLetterSpacing,
   amountFontWeight,
   centsFontSize,
   centsLineHeight,
+  centsPaddingTop,
   rateFontSize,
   rateLineHeight,
   bottomTextFontSize,
@@ -23,7 +25,8 @@ export default ({
   dollarSign: {
     fontSize: currencySymbolFontSize,
     lineHeight: currencySymbolLineHeight,
-    fontWeight: currencySymbolFontWeight
+    fontWeight: currencySymbolFontWeight,
+    paddingTop: currencySymbolPaddingTop
   },
   amount: {
     color: fontColor,
@@ -32,7 +35,16 @@ export default ({
     letterSpacing: amountLetterSpacing,
     fontWeight: amountFontWeight
   },
-  cents: { fontSize: centsFontSize, lineHeight: centsLineHeight, fontWeight: centsFontWeight },
-  rate: { fontSize: rateFontSize, lineHeight: rateLineHeight, fontWeight: rateFontWeight },
+  cents: {
+    fontSize: centsFontSize,
+    lineHeight: centsLineHeight,
+    fontWeight: centsFontWeight,
+    paddingTop: centsPaddingTop
+  },
+  rate: {
+    fontSize: rateFontSize,
+    lineHeight: rateLineHeight,
+    fontWeight: rateFontWeight
+  },
   bottomText: { fontSize: bottomTextFontSize, lineHeight: bottomTextLineHeight }
 })

package/types/common.d.ts

@@ -154,7 +154,7 @@ export interface PressableState {
 }
 
 // TODO: Make this more specific:
-// https://telus.com/universal-design-system/components/allium/skeleton/#props
+// https://telus.com/universal-design-system/components/allium/Skeleton/#props
 export type SkeletonProps = Record<string, any>
 
 export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'