@telus-uds/components-base 1.76.0 → 1.77.1

package/src/Box/backgroundImageStylesMap.js

@@ -0,0 +1,21 @@
+export default {
+  'top-start': { top: 0 },
+  'top-center': { left: 0, right: 0, marginHorizontal: 'auto' },
+  'top-end': { top: 0, right: 0 },
+  'right-start': { top: 0, right: 0 },
+  'left-start': { top: 0 },
+  'left-center': { top: 0, bottom: 0, marginVertical: 'auto' },
+  'none-start': { top: 0, bottom: 0, marginVertical: 'auto' },
+  'none-center': { top: 0, bottom: 0, left: 0, right: 0, margin: 'auto' },
+  'right-center': { top: 0, bottom: 0, right: 0, marginVertical: 'auto' },
+  'none-end': { top: 0, bottom: 0, right: 0, marginVertical: 'auto' },
+  'bottom-start': { bottom: 0, left: 0 },
+  'left-end': { bottom: 0, left: 0 },
+  'bottom-center': { left: 0, right: 0, bottom: 0, marginHorizontal: 'auto' },
+  'bottom-end': { right: 0, bottom: 0 },
+  'right-end': { right: 0, bottom: 0 },
+  'top-stretch': { left: 0, right: 0, width: '100%' },
+  'left-stretch': { top: 0, bottom: 0, height: '100%' },
+  'right-stretch': { top: 0, bottom: 0, right: 0, height: '100%' },
+  'bottom-stretch': { left: 0, right: 0, bottom: 0, width: '100%' }
+}

package/src/ExpandCollapse/Panel.jsx

@@ -64,6 +64,10 @@ const selectContentPanelStyles = ({
   marginBottom
 })
 
+const selectControlPanelStyles = ({ contentPanelBackgroundColor }) => ({
+  backgroundColor: contentPanelBackgroundColor
+})
+
 /**
  * An item in an `ExpandCollapse` which contains collapsible `children` and a `control` that opens
  * and closes the collapsible children when pressed.
@@ -136,16 +140,18 @@ const ExpandCollapsePanel = forwardRef(
       </View>
     ) : (
       <View ref={ref} style={themeTokens}>
-        <ExpandCollapseControl
-          {...selectedProps}
-          isExpanded={isExpanded}
-          tokens={controlTokens}
-          variant={variant}
-          onPress={handleControlPress}
-          ref={controlRef}
-        >
-          {control}
-        </ExpandCollapseControl>
+        <View style={selectControlPanelStyles(themeTokens)}>
+          <ExpandCollapseControl
+            {...selectedProps}
+            isExpanded={isExpanded}
+            tokens={controlTokens}
+            variant={variant}
+            onPress={handleControlPress}
+            ref={controlRef}
+          >
+            {control}
+          </ExpandCollapseControl>
+        </View>
         {isExpanded && (
           <View
             style={{

package/src/Link/InlinePressable.jsx

@@ -25,6 +25,8 @@ const InlinePressable = forwardRef(
 
     const handleKeyPress = useCallback(
       (e) => {
+        e.preventDefault()
+
         if (e.key === 'Enter' || e.key === ' ') {
           handlePress()
         }

package/src/Pagination/PageButton.jsx

@@ -28,12 +28,12 @@ const PageButton = forwardRef(
     const activeProps = isActive
       ? {
           selected: true,
-          ...a11yProps.nonFocusableProps,
+          ...a11yProps.nonFocusableProps
           // a brute fix for the focus state being stuck on an active item since it becomes non-focusable
           // (see https://github.com/telus/universal-design-system/pull/577#issuecomment-931344107)
-          key: 'active-item'
         }
       : {}
+    const key = isActive ? 'active-item' : undefined
 
     const accessibilityRole = href !== undefined ? 'link' : 'button'
     const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : ''
@@ -50,7 +50,7 @@ const PageButton = forwardRef(
     }
 
     return (
-      <ButtonBase ref={ref} {...buttonProps} tokens={getButtonTokens} {...activeProps}>
+      <ButtonBase ref={ref} {...buttonProps} tokens={getButtonTokens} key={key} {...activeProps}>
         {label}
       </ButtonBase>
     )

package/src/Skeleton/Skeleton.jsx

@@ -25,9 +25,10 @@ const selectSkeletonStyles = ({ color, radius }) => ({
   maxWidth: '100%'
 })
 
-const selectLineStyles = ({ skeletonHeight, lineWidth }) => ({
+const selectLineStyles = ({ skeletonHeight, lineWidth, radius }) => ({
   width: lineWidth,
-  height: skeletonHeight
+  height: skeletonHeight,
+  borderRadius: radius
 })
 
 const selectShapeStyles = ({ skeletonHeight }) => ({
@@ -101,7 +102,11 @@ const Skeleton = forwardRef(
         ]
       }
 
-      return selectLineStyles({ skeletonHeight, lineWidth: getLineWidth() })
+      return selectLineStyles({
+        skeletonHeight,
+        lineWidth: getLineWidth(),
+        radius: themeTokens.lineRadius
+      })
     }
 
     const renderSkeleton = (index = 0) => {

package/src/StackView/getStackedContent.jsx

@@ -54,11 +54,20 @@ const getStackedContent = (
     if (!index || (!space && !divider)) return [...newChildren, item]
 
     const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`
-    const commonProps = { testID, key: testID, space }
+    const commonProps = { testID, space }
     const separator = divider ? (
-      <Divider vertical={direction.startsWith('row')} {...dividerProps} {...commonProps} />
+      <Divider
+        vertical={direction.startsWith('row')}
+        key={testID}
+        {...dividerProps}
+        {...commonProps}
+      />
     ) : (
-      <Spacer direction={direction.startsWith('row') ? 'row' : 'column'} {...commonProps} />
+      <Spacer
+        direction={direction.startsWith('row') ? 'row' : 'column'}
+        key={testID}
+        {...commonProps}
+      />
     )
     return [...newChildren, separator, item]
   }, [])

package/src/StepTracker/StepTracker.jsx

@@ -51,7 +51,7 @@ const selectStepTrackerLabelStyles = (
  * ## Usability and A11y guidelines
  *
  * Keep in mind that in its current implementation this is not an interactive
- * component and can’t be used to navigate between steps. The application
+ * component and can't be used to navigate between steps. The application
  * must provide its own navigation mechanism and state control. That is the
  * main reason the component assumes the `progressbar` role in terms of
  * accessibility. This also makes it extremely important to make sure you
@@ -106,13 +106,14 @@ const StepTracker = forwardRef(
             current < steps.length ? steps[current] : steps[steps.length - 1]
           )
       : ''
-    const getStepLabel = (index) =>
-      themeTokens.showStepLabel
-        ? (typeof copy === 'string'
-            ? getCopy(textStepTrackerLabel ?? 1).stepLabel
-            : getCopy('stepLabel')
-          ).replace('%{stepNumber}', index + 1)
-        : ''
+
+    const getStepLabel = (index) => {
+      if (themeTokens.showStepLabel) {
+        return getCopy(index + 1)?.stepLabel.replace('%{stepNumber}', index + 1)
+      }
+      return ''
+    }
+
     const { themeOptions } = useTheme()
     if (!steps.length) return null
     const selectedProps = selectProps({

package/src/StepTracker/dictionary.js

@@ -5,7 +5,7 @@ export default {
       stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
     },
     2: {
-      stepLabel: '%{stepNumber}.',
+      stepLabel: 'Step %{stepNumber}',
       stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
     },
     3: {
@@ -19,7 +19,7 @@ export default {
       stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
     },
     2: {
-      stepLabel: '%{stepNumber}.',
+      stepLabel: 'Étape %{stepNumber}',
       stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
     },
     3: {

package/types/Typography.d.ts

@@ -23,6 +23,7 @@ export type TypographyVariants = {
   characters?: number
   spaceBetweenLines?: number
   squareRadius?: number
+  lineRadius?: number
   inverse?: boolean
 }