@telus-uds/components-base 2.0.0 → 2.0.1

package/src/Skeleton/Skeleton.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { Animated, Platform, StyleSheet, View } from 'react-native'
 import propTypes from 'prop-types'
 import StackView from '../StackView'
@@ -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 }) => ({
@@ -39,7 +40,7 @@ const selectSquareStyles = ({ radius }) => ({
   borderRadius: radius
 })
 
-const Skeleton = forwardRef(
+const Skeleton = React.forwardRef(
   (
     {
       tokens,
@@ -63,10 +64,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 })
@@ -94,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/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/SkipLink/SkipLink.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { Platform, Pressable, StyleSheet, Text } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -37,8 +37,12 @@ const selectStyles = ({
   borderRadius
 })
 
-const selectTextStyles = ({ color }) => ({
-  color
+const selectTextStyles = ({ color, textLine, fontName, fontSize, fontWeight, lineHeight }) => ({
+  color,
+  textDecorationLine: textLine,
+  fontFamily: `${fontName}${fontWeight}normal`,
+  lineHeight: fontSize * lineHeight,
+  fontSize
 })
 
 /**
@@ -96,13 +100,10 @@ const selectTextStyles = ({ color }) => ({
  *
  * Skip link supports all the common a11y and link props.
  */
-const SkipLink = forwardRef(({ tokens, variant, href, children, ...rawRest }, ref) => {
+const SkipLink = React.forwardRef(({ tokens, variant, href, children, ...rawRest }, ref) => {
   const { onPress, ...rest } = clickProps.toPressProps(rawRest)
 
   const getTokens = useThemeTokensCallback('SkipLink', tokens, variant)
-  const defaultTokens = getTokens()
-
-  const resolveLinkTokens = (pressState) => resolvePressableTokens(defaultTokens, pressState)
 
   const handlePress = (event) => {
     if (typeof onPress === 'function') onPress(event)
@@ -115,18 +116,17 @@ const SkipLink = forwardRef(({ tokens, variant, href, children, ...rawRest }, re
       accessibilityRole="link"
       onPress={handlePress}
       href={href}
-      style={({ focused: focus }) => {
-        const themeTokens = getTokens({ focus })
+      style={(pressableState) => {
+        const themeTokens = resolvePressableTokens(getTokens, pressableState)
         const skipLinkStyle = selectStyles(themeTokens)
-
-        return [staticStyles.absolute, skipLinkStyle, !focus && staticStyles.hidden]
+        const { focused } = pressableState
+        return [staticStyles.absolute, skipLinkStyle, !focused && staticStyles.hidden]
       }}
       {...selectProps(rest)}
     >
-      {(pressState) => {
-        const themeTokens = resolveLinkTokens(pressState)
+      {(pressableState) => {
+        const themeTokens = resolvePressableTokens(getTokens, pressableState)
         const textStyles = selectTextStyles(themeTokens)
-
         return <Text style={[textStyles, staticStyles.baseline]}>{children}</Text>
       }}
     </Pressable>

package/src/Spacer/Spacer.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View } from 'react-native'
 import { a11yProps, selectSystemProps, spacingProps, useSpacingScale, viewProps } from '../utils'
@@ -56,7 +56,7 @@ const selectSizeStyle = (size, direction) => ({
  * Spacer has no content and is ignored by tools such as screen readers. Use `Divider` for
  * separations between elements that may be treated as semantically meaningful on web.
  */
-const Spacer = forwardRef(({ space = 1, direction = 'column', ...rest }, ref) => {
+const Spacer = React.forwardRef(({ space = 1, direction = 'column', ...rest }, ref) => {
   const size = useSpacingScale(space)
   const sizeStyle = selectSizeStyle(size, direction)
 

package/src/StackView/StackView.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
@@ -64,10 +64,10 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * It applies no accessibility props of its own, unless `divider` prop is passed (`Divider` has a
  * semantic role but only on web, not within native apps).
  */
-const StackView = forwardRef(
+const StackView = React.forwardRef(
   (
     {
-      space = 1,
+      space = 0,
       divider,
       direction: directionProp = 'column',
       children,
@@ -89,9 +89,10 @@ const StackView = forwardRef(
     const content = getStackedContent(children, { direction, divider, space })
     const themeTokens = useThemeTokens('StackView', tokens, variant, { viewport })
     const flexStyles = selectFlexStyles(themeTokens)
+    const size = { width: themeTokens.width }
 
     return (
-      <View ref={ref} {...selectedProps} style={[flexStyles, staticStyles[direction]]}>
+      <View ref={ref} {...selectedProps} style={[flexStyles, staticStyles[direction], size]}>
         {content}
       </View>
     )

package/src/StackView/StackWrap.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React from 'react'
 import { Platform } from 'react-native'
 
 import useSafeLayoutEffect from '../utils/useSafeLayoutEffect'
@@ -23,8 +23,8 @@ const exampleGapValue = '1px'
  * wrapped lines of items. By default, this `gap` is the same as the gap between spaced items.
  * If a different spacing is desired between wrapped lines, pass a spacing value to the `gap` prop.
  */
-const StackWrap = forwardRef((props, ref) => {
-  const [canUseCSSGap, setCanUseCSSGap] = useState(false)
+const StackWrap = React.forwardRef((props, ref) => {
+  const [canUseCSSGap, setCanUseCSSGap] = React.useState(false)
   const { space } = props
   // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
   const gap = props.gap ?? space

package/src/StackView/StackWrapBox.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 import {
@@ -47,7 +47,7 @@ const spaceSides = {
  * Unlike the cleaner and more side-effect-free CSS gap StackWrap implementation, this renders a Box (View)
  * between the container and the stacked children, and requires a negative margin on the container.
  */
-const StackWrapBox = forwardRef(
+const StackWrapBox = React.forwardRef(
   (
     {
       space = 1,

package/src/StackView/StackWrapGap.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { View } from 'react-native'
 
 import StackWrapBox from './StackWrapBox'
@@ -27,7 +27,7 @@ const [selectProps] = selectSystemProps([a11yProps, viewProps])
  * - The `space` between items is the same as the `gap` between wrapped rows (this is the
  *   default if `gap` prop is undefined)
  */
-const StackWrapGap = forwardRef(
+const StackWrapGap = React.forwardRef(
   (
     {
       space = 1,

package/src/StackView/getStackedContent.jsx

@@ -1,4 +1,4 @@
-import React, { Children, Fragment } from 'react'
+import React from 'react'
 
 import Box from '../Box'
 import Divider from '../Divider'
@@ -39,7 +39,7 @@ const getStackedContent = (
 
   // Avoid surprises if children contains comments, nulls, or is a variable wrapped as a fragment
   const topLevelChildren = preserveFragments ? children : unpackFragment(children)
-  const validChildren = Children.toArray(topLevelChildren).filter(Boolean)
+  const validChildren = React.Children.toArray(topLevelChildren).filter(Boolean)
   const content = validChildren.reduce((newChildren, child, index) => {
     const boxID = `Stack-Box-${index}`
     const item = box ? (
@@ -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]
   }, [])
@@ -100,10 +109,10 @@ const getStackedContent = (
  */
 const unpackFragment = (child) => {
   // If this level is a set of top-level siblings rather than one child, check each in turn
-  if (Children.count(child) > 1) return Children.map(child, unpackFragment)
+  if (React.Children.count(child) > 1) return React.Children.map(child, unpackFragment)
 
   // When a fragment is found, unpack its children to the top level and check them
-  if (child?.type === Fragment) return unpackFragment(child.props?.children)
+  if (child?.type === React.Fragment) return unpackFragment(child.props?.children)
 
   // Stop unpacking as soon as any non-fragment child is found
   return child

package/src/Status/Status.jsx

@@ -0,0 +1,153 @@
+import React from 'react'
+import { Platform, StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import { useThemeTokens, applyTextStyles } from '../ThemeProvider'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  variantProp,
+  viewProps,
+  wrapStringsInText,
+  transformGradient
+} from '../utils'
+
+import Icon from '../Icon'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
+const selectContainerStyles = ({
+  backgroundColor,
+  backgroundGradient,
+  borderColor,
+  borderRadius,
+  borderWidth,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingTop
+}) => {
+  const styles = {
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  }
+
+  if (backgroundGradient) {
+    if (Platform.OS === 'web') {
+      styles.background = transformGradient(backgroundGradient)
+    } else {
+      const {
+        stops: [stopOne, stopTwo]
+      } = backgroundGradient
+      styles.gradient = {}
+      styles.gradient.start = { x: 0, y: 0 }
+      styles.gradient.end = { x: 1, y: 1 }
+      styles.gradient.colors = [stopOne.color, stopTwo.color]
+    }
+  } else {
+    styles.backgroundColor = backgroundColor
+  }
+
+  return styles
+}
+
+const selectIconProps = ({ icon, iconColor }) => ({
+  icon,
+  tokens: { color: iconColor },
+  variant: { size: 'small' }
+})
+
+const selectTextStyles = ({
+  textColor,
+  textLineHeight,
+  fontName,
+  fontSize,
+  fontWeight,
+  marginLeft
+}) =>
+  applyTextStyles({
+    fontColor: textColor,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight: Platform.OS === 'web' ? textLineHeight : textLineHeight * 1.2,
+    marginLeft
+  })
+
+/**
+ * Status component displays a status indicator with optional custom gradient.
+ *
+ * @component
+ * @param {object} tokens - The tokens for customizing the status component.
+ * @param {string} variant - The variant of the status component.
+ * @param {ReactNode} children - The content to be displayed inside the status component.
+ * @param {function} customGradient - The custom gradient function for the status component.
+ * @param {elementType} customGradient - Defines an icon to be rendered.
+ * @param {object} rest - The rest of the props to be applied to the status component.
+ * @param {React.Ref} ref - The ref to be applied to the status component.
+ * @returns {ReactNode} The rendered status component.
+ */
+const Status = React.forwardRef(({ tokens, variant, children, customGradient, ...rest }, ref) => {
+  const themeTokens = useThemeTokens('Status', tokens, variant)
+  const { icon } = themeTokens
+  const containerStyles = { ...selectContainerStyles(themeTokens), ...staticStyles.container }
+
+  let content = (
+    <>
+      {icon ? <Icon {...selectIconProps(themeTokens)} /> : null}
+      {wrapStringsInText(children, {
+        style: selectTextStyles(themeTokens)
+      })}
+    </>
+  )
+  if (typeof customGradient === 'function') {
+    content = customGradient(containerStyles.gradient, containerStyles, content)
+  }
+
+  return (
+    <View ref={ref} style={containerStyles} {...selectProps(rest)}>
+      {content}
+    </View>
+  )
+})
+
+Status.displayName = 'Status'
+
+Status.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Status'),
+  variant: variantProp.propType,
+  /**
+   * The content to be displayed inside the status component.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * The custom gradient function for the status component.
+   */
+  customGradient: PropTypes.func
+}
+
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    ...Platform.select({
+      web: {
+        display: 'inline-flex',
+        width: 'fit-content'
+      },
+      default: {
+        display: 'flex',
+        width: 'auto'
+      }
+    })
+  }
+})
+
+export default Status

package/src/Status/index.js

@@ -0,0 +1,3 @@
+import Status from './Status'
+
+export default Status