@telus-uds/components-base 1.47.0 → 1.49.0

package/src/SideNav/ItemsGroup.jsx

@@ -37,8 +37,15 @@ const ItemsGroup = forwardRef(
     const getItemAppearance = (appearance) => ({ ...getAppearance(appearance), type: 'parent' })
 
     const getGroupTokens = useThemeTokensCallback('SideNavItemsGroup', tokens, variant)
-    const getPanelTokens = (appearance) =>
-      selectTokens('ExpandCollapsePanel', getGroupTokens(getAppearance(appearance)))
+    const getPanelTokens = (appearance) => {
+      const { panelBorderColor, ...itemsGroupTokens } = getGroupTokens(getAppearance(appearance))
+      const groupTokens = {
+        ...itemsGroupTokens,
+        borderWidth: 0,
+        marginBottom: 0
+      }
+      return selectTokens('ExpandCollapsePanel', groupTokens)
+    }
 
     const getItemTokens = useThemeTokensCallback('SideNavItem', itemTokens, variant)
     const getControlTokens = (appearance) =>
@@ -49,6 +56,7 @@ const ItemsGroup = forwardRef(
 
     const controlContent = (controlState) => {
       const currentItemTokens = getItemTokens(getItemAppearance(controlState))
+
       return <ItemContent tokens={currentItemTokens}>{label}</ItemContent>
     }
 

package/src/SideNav/SideNav.jsx

@@ -56,6 +56,7 @@ const SideNav = forwardRef(
               onItemPress(...args)
               if (onPress) onPress(...args)
             }
+
             return (
               <Item
                 {...item.props}
@@ -78,6 +79,7 @@ const SideNav = forwardRef(
               const { groupId = `group-${index}` } = child.props
               const isGroupActive = active.itemId !== undefined && active.groupId === groupId
               const handleToggle = (event) => onToggle(groupId, event)
+
               return (
                 <ItemsGroup
                   {...child.props}

package/src/Skeleton/Skeleton.jsx

@@ -63,10 +63,17 @@ const Skeleton = forwardRef(
         : // Size by an index on the spacing scale (getting default index from theme if none provided)
           sizeIndex || themeTokens.size
     const skeletonHeight = useSpacingScale(spacingScaleValue)
-    const nativeAnimation = useSkeletonNativeAnimation()
+
+    // Animation color and animation duration
+    const { secondColor, animationDuration } = themeTokens
+
+    const nativeAnimation = useSkeletonNativeAnimation({ animationDuration })
 
     const getAnimationBasedOnPlatform = () => {
-      const animation = Platform.OS === 'web' ? skeletonWebAnimation : nativeAnimation
+      const animation =
+        Platform.OS === 'web'
+          ? skeletonWebAnimation(secondColor, animationDuration)
+          : nativeAnimation
       // We must pass the animation styles through `StyleSheet.create`
       // @see https://github.com/necolas/react-native-web/issues/2387
       const styles = StyleSheet.create({ animation })

package/src/Skeleton/skeleton.constant.js

@@ -1,3 +1,2 @@
 export const DEFAULT_OPACITY = 1
 export const OPACITY_STOP = 0.4
-export const ANIMATION_DURATION = 1500

package/src/Skeleton/skeletonWebAnimation.js

@@ -1,13 +1,13 @@
-import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant'
-
-export default {
-  animationDuration: `${ANIMATION_DURATION}ms`,
-  animationTimingFunction: 'ease-in-out',
-  animationDelay: '0.5s',
-  animationIterationCount: 'infinite',
-  animationKeyframes: {
-    '0%': { opacity: DEFAULT_OPACITY },
-    '50%': { opacity: OPACITY_STOP },
-    '100%': { opacity: DEFAULT_OPACITY }
+const skeletonWebAnimation = (secondColor, animationTime) => {
+  return {
+    animationDuration: `${animationTime}ms`,
+    animationTimingFunction: 'ease-in-out',
+    animationDelay: '0.5s',
+    animationIterationCount: 'infinite',
+    animationKeyframes: {
+      '50%': { backgroundColor: secondColor }
+    }
   }
 }
+
+export default skeletonWebAnimation

package/src/Skeleton/useSkeletonNativeAnimation.js

@@ -1,20 +1,21 @@
 import { useEffect, useRef } from 'react'
 import { Animated, Platform } from 'react-native'
-import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant'
+import { DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant'
 
-const useSkeletonNativeAnimation = () => {
+const useSkeletonNativeAnimation = ({ animationDuration }) => {
   const fadeAnimation = useRef(new Animated.Value(DEFAULT_OPACITY)).current
 
+  /* eslint-disable react-hooks/exhaustive-deps */
   useEffect(() => {
     const fade = Animated.sequence([
       Animated.timing(fadeAnimation, {
         toValue: OPACITY_STOP,
-        duration: ANIMATION_DURATION,
+        duration: animationDuration,
         useNativeDriver: Platform.OS !== 'web'
       }),
       Animated.timing(fadeAnimation, {
         toValue: DEFAULT_OPACITY,
-        duration: ANIMATION_DURATION,
+        duration: animationDuration,
         useNativeDriver: Platform.OS !== 'web'
       })
     ])

package/src/utils/a11y/semantics.js

@@ -23,7 +23,7 @@ import { Platform } from 'react-native'
  */
 // Adding `/** @type {const} */ ({...})` denotes object content as `readonly` in many IDEs
 // eslint-disable-next-line prettier/prettier
-const rolesToTags = /** @type {const} */ ({
+const rolesToTags = /** @type {const} */ {
   article: 'article',
   banner: 'header',
   blockquote: 'blockquote',
@@ -45,7 +45,7 @@ const rolesToTags = /** @type {const} */ ({
   // Add special cases that are in RNW's function logic but not in its mapping object
   label: 'label'
   // eslint-disable-next-line prettier/prettier
-})
+}
 
 // Invert React Native Web's mapping, so a tag gets the role that gets that tag
 export const tagsToRoles = Object.fromEntries(
@@ -57,7 +57,7 @@ export const tagsToRoles = Object.fromEntries(
  * to headings on web but without the expectation of a hierarchy of headings within one screen.
  */
 // eslint-disable-next-line prettier/prettier
-export const headingTags = /** @type {const} */ (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'])
+export const headingTags = /** @type {const} */ ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
 /**
  * @typedef {typeof headingTags[number]} HeadingTag
  */
@@ -81,7 +81,7 @@ export const supportedTags = [...Object.keys(tagsToRoles), ...headingTags]
  * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
  */
 // eslint-disable-next-line prettier/prettier
-export const layoutTags = /** @type {const} */ ([
+export const layoutTags = /** @type {const} */ [
   ...headingTags,
   'article',
   'aside',
@@ -97,7 +97,7 @@ export const layoutTags = /** @type {const} */ ([
   'section',
   'label'
   // eslint-disable-next-line prettier/prettier
-])
+]
 /**
  * @typedef {typeof layoutTags[number]} LayoutTag
  */
@@ -108,7 +108,7 @@ export const layoutTags = /** @type {const} */ ([
  * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
  */
 // eslint-disable-next-line prettier/prettier
-export const textTags = /** @type {const} */ ([
+export const textTags = /** @type {const} */ [
   ...headingTags,
   'blockquote',
   'code',
@@ -119,7 +119,7 @@ export const textTags = /** @type {const} */ ([
   'strong',
   'label'
   // eslint-disable-next-line prettier/prettier
-])
+]
 /**
  * @typedef {typeof layoutTags[number]} TextTag
  */