@telus-uds/components-web 4.2.1 → 4.4.0

package/CHANGELOG.md

@@ -1,12 +1,41 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 05 Mar 2025 00:01:06 GMT and should not be manually modified.
+This log was last generated on Mon, 24 Mar 2025 16:24:15 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 4.4.0
+
+Mon, 24 Mar 2025 16:24:15 GMT
+
+### Minor changes
+
+- Code, Dynatrace alerts and vulnerabilities resolved (35577399+JoshHC@users.noreply.github.com)
+- `ActivityIndicator`: new animation for the spinner and new `dots` variant added (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v3.5.0
+- Bump @telus-uds/system-theme-tokens to v4.3.0
+
+### Patches
+
+- `DatePicker`: add disabled type (sergio.ramirez@telus.com)
+
+## 4.3.0
+
+Tue, 11 Mar 2025 21:16:58 GMT
+
+### Minor changes
+
+- `Tooltip`: Customized/optional type props (shivam.gupta3@telus.com)
+- Bump @telus-uds/components-base to v3.4.0
+
+### Patches
+
+- `Table`: fix row border tokens (guillermo.peitzner@telus.com)
+- `Card`: fix interactiveCard background color (guillermo.peitzner@telus.com)
+
 ## 4.2.1
 
-Wed, 05 Mar 2025 00:01:06 GMT
+Wed, 05 Mar 2025 00:06:37 GMT
 
 ### Patches
 

package/lib/cjs/Table/Row.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const StyledTR = /*#__PURE__*/_styledComponents.default.tr.withConfig({
   displayName: "Row__StyledTR",
   componentId: "components-web__sc-6pbb9a-0"
-})(["&:hover{background-color:", " !important;}border-style:", ";border-color:", ";border-width:", ";border-top-width:", ";"], _ref => {
+})(["&:hover{background-color:", " !important;}border-style:", ";border-color:", ";border-width:", "px;border-top-width:", "px;"], _ref => {
   let {
     tokens
   } = _ref;
@@ -32,12 +32,12 @@ const StyledTR = /*#__PURE__*/_styledComponents.default.tr.withConfig({
   let {
     tokens
   } = _ref4;
-  return tokens?.rowBorderWidth || '0px';
+  return `${tokens?.rowBorderWidth}` || 0;
 }, _ref5 => {
   let {
     tokens
   } = _ref5;
-  return tokens?.rowBorderTopWidth || tokens?.rowBorderWidth;
+  return `${tokens?.rowBorderTopWidth}` || tokens?.rowBorderWidth;
 });
 const Row = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   let {

package/lib/cjs/Table/Table.js

@@ -20,7 +20,7 @@ const StyledContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
 const StyledTable = /*#__PURE__*/_styledComponents.default.table.withConfig({
   displayName: "Table__StyledTable",
   componentId: "components-web__sc-10d9q3m-1"
-})(["margin:0;padding:0;width:", ";border:", ";"], _ref => {
+})(["margin:0;padding:0;width:", ";border:", ";border-collapse:collapse;"], _ref => {
   let {
     fullWidth,
     tableWidth

package/lib/cjs/VideoPicker/VideoPicker.js

@@ -137,7 +137,7 @@ const VideoPicker = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
         ...themeTokens,
         isFramed: isFramed,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPickerPlayer.default, {
-          video: addVideoEventHandlers(currentVideo, onPlay, onPause, onProgress),
+          video: addVideoEventHandlers(currentVideo),
           videoPlayerRef: videoPlayerRef,
           onStartVideo: onStartVideo
         })

package/lib/esm/Table/Row.js

@@ -6,7 +6,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const StyledTR = /*#__PURE__*/styled.tr.withConfig({
   displayName: "Row__StyledTR",
   componentId: "components-web__sc-6pbb9a-0"
-})(["&:hover{background-color:", " !important;}border-style:", ";border-color:", ";border-width:", ";border-top-width:", ";"], _ref => {
+})(["&:hover{background-color:", " !important;}border-style:", ";border-color:", ";border-width:", "px;border-top-width:", "px;"], _ref => {
   let {
     tokens
   } = _ref;
@@ -25,12 +25,12 @@ const StyledTR = /*#__PURE__*/styled.tr.withConfig({
   let {
     tokens
   } = _ref4;
-  return tokens?.rowBorderWidth || '0px';
+  return `${tokens?.rowBorderWidth}` || 0;
 }, _ref5 => {
   let {
     tokens
   } = _ref5;
-  return tokens?.rowBorderTopWidth || tokens?.rowBorderWidth;
+  return `${tokens?.rowBorderTopWidth}` || tokens?.rowBorderWidth;
 });
 const Row = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {

package/lib/esm/Table/Table.js

@@ -13,7 +13,7 @@ const StyledContainer = /*#__PURE__*/styled.div.withConfig({
 const StyledTable = /*#__PURE__*/styled.table.withConfig({
   displayName: "Table__StyledTable",
   componentId: "components-web__sc-10d9q3m-1"
-})(["margin:0;padding:0;width:", ";border:", ";"], _ref => {
+})(["margin:0;padding:0;width:", ";border:", ";border-collapse:collapse;"], _ref => {
   let {
     fullWidth,
     tableWidth

package/lib/esm/VideoPicker/VideoPicker.js

@@ -128,7 +128,7 @@ const VideoPicker = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
         ...themeTokens,
         isFramed: isFramed,
         children: /*#__PURE__*/_jsx(VideoPickerPlayer, {
-          video: addVideoEventHandlers(currentVideo, onPlay, onPause, onProgress),
+          video: addVideoEventHandlers(currentVideo),
           videoPlayerRef: videoPlayerRef,
           onStartVideo: onStartVideo
         })

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^3.3.0",
+    "@telus-uds/components-base": "^3.5.0",
     "@telus-uds/system-constants": "^3.0.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": "^4.2.0",
+    "@telus-uds/system-theme-tokens": "^4.3.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -82,5 +82,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "4.2.1"
+  "version": "4.4.0"
 }

package/src/Table/Row.jsx

@@ -10,8 +10,8 @@ const StyledTR = styled.tr`
   border-style: ${({ tokens }) =>
     tokens?.rowBorderWidth || tokens?.rowBorderTopWidth ? 'solid' : 'none'};
   border-color: ${({ tokens }) => tokens?.rowBorderColor};
-  border-width: ${({ tokens }) => tokens?.rowBorderWidth || '0px'};
-  border-top-width: ${({ tokens }) => tokens?.rowBorderTopWidth || tokens?.rowBorderWidth};
+  border-width: ${({ tokens }) => `${tokens?.rowBorderWidth}` || 0}px;
+  border-top-width: ${({ tokens }) => `${tokens?.rowBorderTopWidth}` || tokens?.rowBorderWidth}px;
 `
 
 const Row = React.forwardRef(({ children, tokens: rowTokens }, ref) => {

package/src/Table/Table.jsx

@@ -22,6 +22,7 @@ const StyledTable = styled.table`
   padding: 0;
   width: ${({ fullWidth, tableWidth }) => (fullWidth ? '100%' : `${tableWidth}px`)};
   border: ${(props) => `${props.borderWidth}px solid ${props.borderColor}`};
+  border-collapse: collapse;
 `
 
 const TableContext = React.createContext({})

package/src/VideoPicker/VideoPicker.jsx

@@ -136,7 +136,7 @@ const VideoPicker = React.forwardRef(
         >
           <VideoPlayerContainer {...themeTokens} isFramed={isFramed}>
             <VideoPickerPlayer
-              video={addVideoEventHandlers(currentVideo, onPlay, onPause, onProgress)}
+              video={addVideoEventHandlers(currentVideo)}
               videoPlayerRef={videoPlayerRef}
               onStartVideo={onStartVideo}
             />

package/types/DatePicker.d.ts

@@ -14,6 +14,7 @@ export interface DatePickerProps extends HTMLAttrs {
   hintPosition?: 'inline' | 'below'
   tooltip?: string
   validation?: 'error' | 'success'
+  disabled?: boolean
 }
 
 declare const DatePicker: ComponentType<DatePickerProps>

package/types/Tooltip.d.ts

@@ -12,6 +12,8 @@ export interface TooltipProps extends A11yProps, ViewProps {
   tooltipButtonTokens?: Tokens
   variant?: Variant
   onPress?: () => void
+  inline?: boolean
+  activateOnHover?: boolean
 }
 
 declare const Tooltip: ComponentType<TooltipProps>