@telus-uds/components-base 1.78.0 → 1.78.1

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 23 Feb 2024 19:32:18 GMT and should not be manually modified.
+This log was last generated on Wed, 28 Feb 2024 23:55:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.78.1
+
+Wed, 28 Feb 2024 23:55:55 GMT
+
+### Patches
+
+- fix notification component icon alignment" (guillermo.peitzner@telus.com)
+- fix box component background image on mobile devices (guillermo.peitzner@telus.com)
+- fix carousel component icon background color (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.52.1
+
 ## 1.78.0
 
-Fri, 23 Feb 2024 19:32:18 GMT
+Fri, 23 Feb 2024 19:39:17 GMT
 
 ### Minor changes
 

package/lib/Box/Box.js

@@ -92,7 +92,9 @@ const setBackgroundImage = _ref2 => {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: containedViewStyle,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
-          source: src,
+          source: {
+            uri: src
+          },
           alt: alt,
           style: staticStyles.containedImage,
           accessibilityIgnoresInvertColors: true
@@ -101,7 +103,9 @@ const setBackgroundImage = _ref2 => {
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
-    source: src,
+    source: {
+      uri: src
+    },
     alt: alt,
     style: staticStyles.backgroundImageContainer,
     resizeMode: backgroundImageResizeMode,

package/lib/Carousel/Carousel.js

@@ -70,6 +70,14 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
   }
   return styles;
 };
+const selectIconStyles = _ref => {
+  let {
+    iconBackgroundColor
+  } = _ref;
+  return {
+    backgroundColor: iconBackgroundColor
+  };
+};
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
 /**
@@ -126,7 +134,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
   - `spaceBetweenSlideAndPreviousNextNavigation` - Horizontal space between slide and previous/next navigational buttons
   - `spaceBetweenSlideAndPanelNavigation` - Vertical space between slide area and panel navigation area
  */
-const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     tokens,
     variant,
@@ -157,7 +165,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     accessibilityLiveRegion = 'polite',
     copy,
     ...rest
-  } = _ref;
+  } = _ref2;
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Carousel', tokens, variant, {
     viewport
@@ -214,7 +222,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const animatedY = _react.default.useRef(0);
   const isFirstSlide = !activeIndex;
   const isLastSlide = activeIndex + 1 >= children.length;
-  const onContainerLayout = _ref2 => {
+  const onContainerLayout = _ref3 => {
     let {
       nativeEvent: {
         layout: {
@@ -223,7 +231,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           width
         }
       }
-    } = _ref2;
+    } = _ref3;
     return setContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -231,14 +239,14 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       width
     }));
   };
-  const onPreviousNextNavigationButtonLayout = _ref3 => {
+  const onPreviousNextNavigationButtonLayout = _ref4 => {
     let {
       nativeEvent: {
         layout: {
           width
         }
       }
-    } = _ref3;
+    } = _ref4;
     return setPreviousNextNavigationButtonWidth(width);
   };
   const updateOffset = _react.default.useCallback(() => {
@@ -350,16 +358,16 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }
   }), [containerLayout.width, updateIndex, updateOffset, animate, isSwipeAllowed, activeIndex, minDistanceForAction, handleAnimationStart, minDistanceToCapture, pan.x]);
   _react.default.useEffect(() => {
-    pan.x.addListener(_ref4 => {
+    pan.x.addListener(_ref5 => {
       let {
         value
-      } = _ref4;
+      } = _ref5;
       animatedX.current = value;
     });
-    pan.y.addListener(_ref5 => {
+    pan.y.addListener(_ref6 => {
       let {
         value
-      } = _ref5;
+      } = _ref6;
       animatedY.current = value;
     });
     return () => {
@@ -453,7 +461,8 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           icon: previousIcon,
           onPress: goToPrev,
           variant: previousNextIconButtonVariants,
-          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex)
+          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex),
+          tokens: selectIconStyles(themeTokens)
         })
       }) : null, Boolean(skipLinkHref) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkipLink.default, {
         ref: firstFocusRef,
@@ -499,7 +508,8 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           icon: nextIcon,
           onPress: goToNext,
           variant: previousNextIconButtonVariants,
-          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2)
+          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2),
+          tokens: selectIconStyles(themeTokens)
         })
       }) : null]
     }), showPanelNavigation ? activePanelNavigation : null]

package/lib/Notification/Notification.js

@@ -49,7 +49,7 @@ const selectIconContainerStyles = _ref2 => {
   } = _ref2;
   return {
     paddingRight: iconGap,
-    placeContent: 'center'
+    placeContent: 'start'
   };
 };
 const selectDismissIconProps = _ref3 => {

package/lib-module/Box/Box.js

@@ -84,7 +84,9 @@ const setBackgroundImage = _ref2 => {
       children: [/*#__PURE__*/_jsx(View, {
         style: containedViewStyle,
         children: /*#__PURE__*/_jsx(Image, {
-          source: src,
+          source: {
+            uri: src
+          },
           alt: alt,
           style: staticStyles.containedImage,
           accessibilityIgnoresInvertColors: true
@@ -93,7 +95,9 @@ const setBackgroundImage = _ref2 => {
     });
   }
   return /*#__PURE__*/_jsx(ImageBackground, {
-    source: src,
+    source: {
+      uri: src
+    },
     alt: alt,
     style: staticStyles.backgroundImageContainer,
     resizeMode: backgroundImageResizeMode,

package/lib-module/Carousel/Carousel.js

@@ -64,6 +64,14 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
   }
   return styles;
 };
+const selectIconStyles = _ref => {
+  let {
+    iconBackgroundColor
+  } = _ref;
+  return {
+    backgroundColor: iconBackgroundColor
+  };
+};
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 /**
@@ -120,7 +128,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
   - `spaceBetweenSlideAndPreviousNextNavigation` - Horizontal space between slide and previous/next navigational buttons
   - `spaceBetweenSlideAndPanelNavigation` - Vertical space between slide area and panel navigation area
  */
-const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const Carousel = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     tokens,
     variant,
@@ -151,7 +159,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     accessibilityLiveRegion = 'polite',
     copy,
     ...rest
-  } = _ref;
+  } = _ref2;
   const viewport = useViewport();
   const themeTokens = useThemeTokens('Carousel', tokens, variant, {
     viewport
@@ -208,7 +216,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const animatedY = React.useRef(0);
   const isFirstSlide = !activeIndex;
   const isLastSlide = activeIndex + 1 >= children.length;
-  const onContainerLayout = _ref2 => {
+  const onContainerLayout = _ref3 => {
     let {
       nativeEvent: {
         layout: {
@@ -217,7 +225,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           width
         }
       }
-    } = _ref2;
+    } = _ref3;
     return setContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -225,14 +233,14 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       width
     }));
   };
-  const onPreviousNextNavigationButtonLayout = _ref3 => {
+  const onPreviousNextNavigationButtonLayout = _ref4 => {
     let {
       nativeEvent: {
         layout: {
           width
         }
       }
-    } = _ref3;
+    } = _ref4;
     return setPreviousNextNavigationButtonWidth(width);
   };
   const updateOffset = React.useCallback(() => {
@@ -344,16 +352,16 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
   }), [containerLayout.width, updateIndex, updateOffset, animate, isSwipeAllowed, activeIndex, minDistanceForAction, handleAnimationStart, minDistanceToCapture, pan.x]);
   React.useEffect(() => {
-    pan.x.addListener(_ref4 => {
+    pan.x.addListener(_ref5 => {
       let {
         value
-      } = _ref4;
+      } = _ref5;
       animatedX.current = value;
     });
-    pan.y.addListener(_ref5 => {
+    pan.y.addListener(_ref6 => {
       let {
         value
-      } = _ref5;
+      } = _ref6;
       animatedY.current = value;
     });
     return () => {
@@ -447,7 +455,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           icon: previousIcon,
           onPress: goToPrev,
           variant: previousNextIconButtonVariants,
-          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex)
+          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex),
+          tokens: selectIconStyles(themeTokens)
         })
       }) : null, Boolean(skipLinkHref) && /*#__PURE__*/_jsx(SkipLink, {
         ref: firstFocusRef,
@@ -493,7 +502,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           icon: nextIcon,
           onPress: goToNext,
           variant: previousNextIconButtonVariants,
-          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2)
+          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2),
+          tokens: selectIconStyles(themeTokens)
         })
       }) : null]
     }), showPanelNavigation ? activePanelNavigation : null]

package/lib-module/Notification/Notification.js

@@ -41,7 +41,7 @@ const selectIconContainerStyles = _ref2 => {
   } = _ref2;
   return {
     paddingRight: iconGap,
-    placeContent: 'center'
+    placeContent: 'start'
   };
 };
 const selectDismissIconProps = _ref3 => {

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.52.0",
+    "@telus-uds/system-theme-tokens": "^2.52.1",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-linear-gradient": "^12.5.0",
@@ -85,6 +85,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.78.0",
+  "version": "1.78.1",
   "types": "types/index.d.ts"
 }

package/src/Box/Box.jsx

@@ -94,7 +94,7 @@ const setBackgroundImage = ({
       <View style={staticStyles.containedContainer}>
         <View style={containedViewStyle}>
           <Image
-            source={src}
+            source={{ uri: src }}
             alt={alt}
             style={staticStyles.containedImage}
             accessibilityIgnoresInvertColors
@@ -106,7 +106,7 @@ const setBackgroundImage = ({
   }
   return (
     <ImageBackground
-      source={src}
+      source={{ uri: src }}
       alt={alt}
       style={staticStyles.backgroundImageContainer}
       resizeMode={backgroundImageResizeMode}

package/src/Carousel/Carousel.jsx

@@ -81,6 +81,8 @@ const selectPreviousNextNavigationButtonStyles = (
   return styles
 }
 
+const selectIconStyles = ({ iconBackgroundColor }) => ({ backgroundColor: iconBackgroundColor })
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 /**
@@ -509,6 +511,7 @@ const Carousel = React.forwardRef(
                   '%{targetStep}',
                   activeIndex
                 )}
+                tokens={selectIconStyles(themeTokens)}
               />
             </View>
           ) : null}
@@ -570,6 +573,7 @@ const Carousel = React.forwardRef(
                   '%{targetStep}',
                   activeIndex + 2
                 )}
+                tokens={selectIconStyles(themeTokens)}
               />
             </View>
           ) : null}

package/src/Notification/Notification.jsx

@@ -51,7 +51,7 @@ const selectIconProps = ({ iconSize, iconColor }) => ({
 
 const selectIconContainerStyles = ({ iconGap }) => ({
   paddingRight: iconGap,
-  placeContent: 'center'
+  placeContent: 'start'
 })
 
 const selectDismissIconProps = ({ dismissIconSize, dismissIconColor }) => ({