@telus-uds/components-web 2.32.1 → 2.32.2

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Tue, 19 Mar 2024 18:37:02 GMT and should not be manually modified.
+This log was last generated on Wed, 27 Mar 2024 21:09:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.32.2
+
+Wed, 27 Mar 2024 21:09:55 GMT
+
+### Patches
+
+- validation added to the datepicker input and input cleaned after the content is deleted (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v1.81.0
+
 ## 2.32.1
 
-Tue, 19 Mar 2024 18:37:02 GMT
+Tue, 19 Mar 2024 18:39:50 GMT
 
 ### Patches
 

package/lib/Badge/Badge.js

@@ -11,7 +11,7 @@ var _componentsBase = require("@telus-uds/components-base");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 const BadgeContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Badge__BadgeContainer",
   componentId: "components-web__sc-tsiuo2-0"
@@ -48,6 +48,11 @@ const BadgeContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
 	    ${gradient && '-webkit-text-fill-color: transparent;'}
     }`;
 });
+const fontSizeMapping = {
+  12: 'micro',
+  14: 'small',
+  16: 'h6'
+};
 const Badge = _ref6 => {
   let {
     children,
@@ -61,10 +66,14 @@ const Badge = _ref6 => {
     borderColor,
     borderRadius,
     borderWidth,
+    color,
     paddingLeft,
     paddingRight,
     paddingTop,
-    paddingBottom
+    paddingBottom,
+    fontName,
+    fontWeight,
+    fontSize
   } = (0, _componentsBase.useThemeTokens)('Badge', tokens, variant);
   const semanticGradient = gradient && (0, _utils.transformGradient)(gradient);
   const {
@@ -85,12 +94,20 @@ const Badge = _ref6 => {
     padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
     radius: `${borderRadius}px`,
     background: background,
+    fontName: fontName,
+    fontWeight: fontWeight,
     gradient: semanticGradient,
     border: `${borderWidth}px solid ${borderColor}`,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Badge, {
-      tokens: tokens,
-      variant: variant,
-      ...rest,
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      tokens: {
+        fontName,
+        fontWeight,
+        color
+      },
+      variant: {
+        size: fontSizeMapping[fontSize]
+      },
       children: children
     })
   });

package/lib/DatePicker/DatePicker.js

@@ -72,6 +72,7 @@ const PortalPositionedContainer = /*#__PURE__*/_styledComponents.default.div.wit
     return `${top}px`;
   }
 });
+const validDatePattern = /^([0-2][0-9]|3[0-1])(\/)(0[1-9]|1[0-2])\2(\d{4})$/;
 
 /**
  * Use DatePicker to select a date on a calendar.
@@ -193,14 +194,34 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     if (onDateChange) onDateChange(value);
   };
   const onChangeInput = value => {
-    if ((0, _moment.default)(value.replace(/\s/g, ''), dateFormatWithoutSpaces, true).isValid()) {
-      setInputDate((0, _moment.default)(value, dateFormat));
-      if (onDateChange) onDateChange((0, _moment.default)(value, dateFormat));
-      setInputText((0, _moment.default)(value, dateFormatWithoutSpaces).format(dateFormat));
+    if (value === '' || (0, _moment.default)(value.replace(/\s/g, ''), dateFormatWithoutSpaces, true).isValid()) {
+      if (value === '') {
+        setInputDate(undefined); // Set inputDate to undefined if input is empty
+        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(undefined);
+      } else {
+        setInputDate((0, _moment.default)(value, dateFormat));
+        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange((0, _moment.default)(value, dateFormat));
+      }
+      setInputText(value === '' ? '' : (0, _moment.default)(value, dateFormatWithoutSpaces).format(dateFormat));
     } else {
       setInputText(value);
     }
   };
+  const handleOnKeyPress = event => {
+    if (event.key === 'Backspace' && inputText === '') {
+      setInputDate(undefined);
+      onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(undefined);
+    }
+  };
+  const handleValidation = inputValidation => {
+    if (validDatePattern.test(inputText.replace(/\s+/g, '')) === false && inputText !== '') {
+      return 'error';
+    }
+    if (inputValidation === 'error' || inputValidation === 'success') {
+      return inputValidation;
+    }
+    return inputValidation;
+  };
   const viewport = (0, _componentsBase.useViewport)();
   const daySize = getResponsiveDaySize(inline, viewport);
   const circleSize = getResponsiveCircleSize(inline, viewport);
@@ -321,11 +342,12 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         hint: hint,
         placeholder: "DD / MM / YYYY",
         onChange: onChangeInput,
+        onKeyPress: handleOnKeyPress,
         tooltip: tooltip,
         hintPosition: hintPosition,
         label: label ?? ((_dictionary$copy = _dictionary.default[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription),
         value: inputText,
-        validation: validation,
+        validation: handleValidation(validation),
         inactive: disabled,
         ref: textInputRef,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Portal, {

package/lib-module/Badge/Badge.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { selectSystemProps, getTokensPropType, useThemeTokens, Badge as BaseBadge } from '@telus-uds/components-base';
+import { selectSystemProps, Typography, getTokensPropType, useThemeTokens } from '@telus-uds/components-base';
 import { htmlAttrs, transformGradient } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const BadgeContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Badge__BadgeContainer",
   componentId: "components-web__sc-tsiuo2-0"
@@ -41,6 +41,11 @@ const BadgeContainer = /*#__PURE__*/styled.div.withConfig({
 	    ${gradient && '-webkit-text-fill-color: transparent;'}
     }`;
 });
+const fontSizeMapping = {
+  12: 'micro',
+  14: 'small',
+  16: 'h6'
+};
 const Badge = _ref6 => {
   let {
     children,
@@ -54,10 +59,14 @@ const Badge = _ref6 => {
     borderColor,
     borderRadius,
     borderWidth,
+    color,
     paddingLeft,
     paddingRight,
     paddingTop,
-    paddingBottom
+    paddingBottom,
+    fontName,
+    fontWeight,
+    fontSize
   } = useThemeTokens('Badge', tokens, variant);
   const semanticGradient = gradient && transformGradient(gradient);
   const {
@@ -78,12 +87,20 @@ const Badge = _ref6 => {
     padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
     radius: `${borderRadius}px`,
     background: background,
+    fontName: fontName,
+    fontWeight: fontWeight,
     gradient: semanticGradient,
     border: `${borderWidth}px solid ${borderColor}`,
-    children: /*#__PURE__*/_jsx(BaseBadge, {
-      tokens: tokens,
-      variant: variant,
-      ...rest,
+    ...selectProps(rest),
+    children: /*#__PURE__*/_jsx(Typography, {
+      tokens: {
+        fontName,
+        fontWeight,
+        color
+      },
+      variant: {
+        size: fontSizeMapping[fontSize]
+      },
       children: children
     })
   });

package/lib-module/DatePicker/DatePicker.js

@@ -65,6 +65,7 @@ const PortalPositionedContainer = /*#__PURE__*/styled.div.withConfig({
     return `${top}px`;
   }
 });
+const validDatePattern = /^([0-2][0-9]|3[0-1])(\/)(0[1-9]|1[0-2])\2(\d{4})$/;
 
 /**
  * Use DatePicker to select a date on a calendar.
@@ -186,14 +187,34 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
     if (onDateChange) onDateChange(value);
   };
   const onChangeInput = value => {
-    if (moment(value.replace(/\s/g, ''), dateFormatWithoutSpaces, true).isValid()) {
-      setInputDate(moment(value, dateFormat));
-      if (onDateChange) onDateChange(moment(value, dateFormat));
-      setInputText(moment(value, dateFormatWithoutSpaces).format(dateFormat));
+    if (value === '' || moment(value.replace(/\s/g, ''), dateFormatWithoutSpaces, true).isValid()) {
+      if (value === '') {
+        setInputDate(undefined); // Set inputDate to undefined if input is empty
+        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(undefined);
+      } else {
+        setInputDate(moment(value, dateFormat));
+        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(moment(value, dateFormat));
+      }
+      setInputText(value === '' ? '' : moment(value, dateFormatWithoutSpaces).format(dateFormat));
     } else {
       setInputText(value);
     }
   };
+  const handleOnKeyPress = event => {
+    if (event.key === 'Backspace' && inputText === '') {
+      setInputDate(undefined);
+      onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(undefined);
+    }
+  };
+  const handleValidation = inputValidation => {
+    if (validDatePattern.test(inputText.replace(/\s+/g, '')) === false && inputText !== '') {
+      return 'error';
+    }
+    if (inputValidation === 'error' || inputValidation === 'success') {
+      return inputValidation;
+    }
+    return inputValidation;
+  };
   const viewport = useViewport();
   const daySize = getResponsiveDaySize(inline, viewport);
   const circleSize = getResponsiveCircleSize(inline, viewport);
@@ -314,11 +335,12 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
         hint: hint,
         placeholder: "DD / MM / YYYY",
         onChange: onChangeInput,
+        onKeyPress: handleOnKeyPress,
         tooltip: tooltip,
         hintPosition: hintPosition,
         label: label ?? ((_dictionary$copy = dictionary[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription),
         value: inputText,
-        validation: validation,
+        validation: handleValidation(validation),
         inactive: disabled,
         ref: textInputRef,
         children: /*#__PURE__*/_jsx(Portal, {

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.80.1",
+    "@telus-uds/components-base": "1.81.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.32.1"
+  "version": "2.32.2"
 }

package/src/Badge/Badge.jsx

@@ -3,13 +3,13 @@ import styled from 'styled-components'
 import PropTypes from 'prop-types'
 import {
   selectSystemProps,
+  Typography,
   getTokensPropType,
-  useThemeTokens,
-  Badge as BaseBadge
+  useThemeTokens
 } from '@telus-uds/components-base'
 import { htmlAttrs, transformGradient } from '../utils'
 
-const [, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const BadgeContainer = styled.div`
   background: ${({ background }) => background};
@@ -29,6 +29,12 @@ const BadgeContainer = styled.div`
     }`}
 `
 
+const fontSizeMapping = {
+  12: 'micro',
+  14: 'small',
+  16: 'h6'
+}
+
 const Badge = ({ children, tokens, variant = {}, ...rest }) => {
   const {
     backgroundColor,
@@ -36,10 +42,14 @@ const Badge = ({ children, tokens, variant = {}, ...rest }) => {
     borderColor,
     borderRadius,
     borderWidth,
+    color,
     paddingLeft,
     paddingRight,
     paddingTop,
-    paddingBottom
+    paddingBottom,
+    fontName,
+    fontWeight,
+    fontSize
   } = useThemeTokens('Badge', tokens, variant)
 
   const semanticGradient = gradient && transformGradient(gradient)
@@ -60,12 +70,18 @@ const Badge = ({ children, tokens, variant = {}, ...rest }) => {
       padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
       radius={`${borderRadius}px`}
       background={background}
+      fontName={fontName}
+      fontWeight={fontWeight}
       gradient={semanticGradient}
       border={`${borderWidth}px solid ${borderColor}`}
+      {...selectProps(rest)}
     >
-      <BaseBadge tokens={tokens} variant={variant} {...rest}>
+      <Typography
+        tokens={{ fontName, fontWeight, color }}
+        variant={{ size: fontSizeMapping[fontSize] }}
+      >
         {children}
-      </BaseBadge>
+      </Typography>
     </BadgeContainer>
   )
 }

package/src/DatePicker/DatePicker.jsx

@@ -56,6 +56,8 @@ 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})$/
+
 /**
  * Use DatePicker to select a date on a calendar.
  *
@@ -168,14 +170,42 @@ const DatePicker = forwardRef(
       if (onDateChange) onDateChange(value)
     }
     const onChangeInput = (value) => {
-      if (moment(value.replace(/\s/g, ''), dateFormatWithoutSpaces, true).isValid()) {
-        setInputDate(moment(value, dateFormat))
-        if (onDateChange) onDateChange(moment(value, dateFormat))
-        setInputText(moment(value, dateFormatWithoutSpaces).format(dateFormat))
+      if (
+        value === '' ||
+        moment(value.replace(/\s/g, ''), dateFormatWithoutSpaces, true).isValid()
+      ) {
+        if (value === '') {
+          setInputDate(undefined) // Set inputDate to undefined if input is empty
+          onDateChange?.(undefined)
+        } else {
+          setInputDate(moment(value, dateFormat))
+          onDateChange?.(moment(value, dateFormat))
+        }
+        setInputText(value === '' ? '' : moment(value, dateFormatWithoutSpaces).format(dateFormat))
       } else {
         setInputText(value)
       }
     }
+
+    const handleOnKeyPress = (event) => {
+      if (event.key === 'Backspace' && inputText === '') {
+        setInputDate(undefined)
+        onDateChange?.(undefined)
+      }
+    }
+
+    const handleValidation = (inputValidation) => {
+      if (validDatePattern.test(inputText.replace(/\s+/g, '')) === false && inputText !== '') {
+        return 'error'
+      }
+
+      if (inputValidation === 'error' || inputValidation === 'success') {
+        return inputValidation
+      }
+
+      return inputValidation
+    }
+
     const viewport = useViewport()
     const daySize = getResponsiveDaySize(inline, viewport)
     const circleSize = getResponsiveCircleSize(inline, viewport)
@@ -286,11 +316,12 @@ const DatePicker = forwardRef(
               hint={hint}
               placeholder="DD / MM / YYYY"
               onChange={onChangeInput}
+              onKeyPress={handleOnKeyPress}
               tooltip={tooltip}
               hintPosition={hintPosition}
               label={label ?? dictionary[copy]?.roleDescription}
               value={inputText}
-              validation={validation}
+              validation={handleValidation(validation)}
               inactive={disabled}
               ref={textInputRef}
             >