@telus-uds/components-base 0.0.2-prerelease.5 → 0.0.2-prerelease.9

package/src/SideNav/Item.jsx

@@ -58,7 +58,7 @@ const Item = ({
     accessibilityRole,
     href,
     onPress: handlePress,
-    ...hrefAttrsProp.spread(hrefAttrs),
+    hrefAttrs,
     ...rest
   })
 
@@ -105,7 +105,7 @@ Item.propTypes = {
   href: PropTypes.string,
   /**
    * On Web if href is passed, React Native Web maps this object's props to
-   * `rel`, `target` and (>= RNW 0.15.0) `download` attrs.
+   * `rel`, `target` and `download` attrs.
    */
   hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
   /**

package/src/Skeleton/Skeleton.jsx

@@ -0,0 +1,98 @@
+import React from 'react'
+import { Animated, Platform } from 'react-native'
+import propTypes from 'prop-types'
+import StackView from '../StackView'
+import { useThemeTokens } from '../ThemeProvider'
+import { getTokensPropType, useSpacingScale, variantProp } from '../utils'
+import useSkeletonNativeAnimation from './useSkeletonNativeAnimation'
+import skeletonWebAnimation from './skeletonWebAnimation'
+
+const selectSkeletonStyles = ({ color, radius, fadeAnimation }) => ({
+  backgroundColor: color,
+  borderRadius: radius,
+  ...fadeAnimation
+})
+
+const selectLineStyles = ({ skeletonHeight, lineWidth }) => ({
+  width: lineWidth,
+  height: skeletonHeight
+})
+
+const selectShapeStyles = ({ skeletonHeight }) => ({
+  height: skeletonHeight,
+  width: skeletonHeight
+})
+
+const selectSquareStyles = ({ radius }) => ({
+  borderRadius: radius
+})
+
+const Skeleton = ({ tokens, variant, size, characters, lines, shape = 'line' }) => {
+  const themeTokens = useThemeTokens('Skeleton', tokens, variant)
+  const skeletonHeight = useSpacingScale(size || themeTokens.size)
+  const nativeAnimation = useSkeletonNativeAnimation()
+
+  const getAnimationBaseOnPlatform = () => {
+    if (Platform.OS !== 'web') {
+      return nativeAnimation
+    }
+
+    return skeletonWebAnimation
+  }
+
+  const getLineWidth = () => {
+    if (characters) {
+      return characters * themeTokens.baseWidth
+    }
+
+    return themeTokens.characters * themeTokens.baseWidth
+  }
+
+  const getStyledBasedOnShape = () => {
+    if (shape === 'circle') {
+      return selectShapeStyles({ skeletonHeight })
+    }
+
+    if (shape === 'box') {
+      return [
+        selectShapeStyles({ skeletonHeight }),
+        selectSquareStyles({ radius: themeTokens.squareRadius })
+      ]
+    }
+
+    return selectLineStyles({ skeletonHeight, lineWidth: getLineWidth() })
+  }
+
+  const renderSkeleton = (index = 0) => (
+    <Animated.View
+      testID="skeleton"
+      key={`skeleton-${index + 1}`}
+      style={[
+        selectSkeletonStyles({ ...themeTokens, fadeAnimation: getAnimationBaseOnPlatform() }),
+        getStyledBasedOnShape()
+      ]}
+    />
+  )
+
+  if (lines) {
+    const arrayOfSkeletons = [...Array(lines)]
+    return (
+      <StackView space={themeTokens.spaceBetweenLines}>
+        {arrayOfSkeletons.map((_, index) => renderSkeleton(index))}
+      </StackView>
+    )
+  }
+
+  return renderSkeleton()
+}
+
+Skeleton.propTypes = {
+  tokens: getTokensPropType('Skeleton'),
+  variant: variantProp.propType,
+  size: propTypes.number,
+  characters: propTypes.number,
+  lines: propTypes.number,
+  shape: propTypes.oneOf(['line', 'circle', 'box'])
+}
+
+export default Skeleton

package/src/Skeleton/index.js

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

package/src/Skeleton/skeleton.constant.js

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

package/src/Skeleton/skeletonWebAnimation.js

@@ -0,0 +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 }
+  }
+}

package/src/Skeleton/useSkeletonNativeAnimation.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react'
+import { Animated } from 'react-native'
+import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant'
+
+const useSkeletonNativeAnimation = () => {
+  const fadeAnimation = useRef(new Animated.Value(DEFAULT_OPACITY)).current
+
+  useEffect(() => {
+    const fade = Animated.sequence([
+      Animated.timing(fadeAnimation, {
+        toValue: OPACITY_STOP,
+        duration: ANIMATION_DURATION,
+        useNativeDriver: true
+      }),
+      Animated.timing(fadeAnimation, {
+        toValue: DEFAULT_OPACITY,
+        duration: ANIMATION_DURATION,
+        useNativeDriver: true
+      })
+    ])
+    Animated.loop(fade).start()
+  }, [fadeAnimation])
+
+  return { opacity: fadeAnimation }
+}
+
+export default useSkeletonNativeAnimation

package/src/StackView/StackView.jsx

@@ -3,8 +3,16 @@ import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
 import Divider from '../Divider'
-import { spacingProps, a11yProps } from '../utils'
+import {
+  spacingProps,
+  a11yProps,
+  responsiveProps,
+  variantProp,
+  viewProps,
+  useResponsiveProp
+} from '../utils'
 import { useThemeTokens } from '../ThemeProvider'
+import { useViewport } from '../ViewportProvider'
 import getStackedContent from './getStackedContent'
 import { staticStyles, selectFlexStyles } from './common'
 
@@ -25,10 +33,14 @@ import { staticStyles, selectFlexStyles } from './common'
  * - `'column-reverse'` acts the same as `'column'`, but reverses the direction.
  * - `'row-reverse'` acts the same as `'row'`, but reverses the direction.
  *
+ * `direction` is an optionally responsive prop and may be an object keyed by viewports. For example,
+ * `{ xs: 'column', md: 'row' } stacks as a column on `xs` and `sm` viewports and a row at 'md' and above.
+ *
  * ## Theming, alignment and justification
  *
  * `StackView` is a pure layout component and has no theme styles beyond a small set of layout styles
- * (`alignItems`, `justifyContent`, `flexGrow`) which may be set using the `tokens` prop.
+ * (`alignItems`, `justifyContent`, `flexGrow`) which may be set using the `tokens` prop. If the
+ * tokens prop is a function it will recieve the current viewport.
  *
  * All other styling such as borders, background colours, padding etc should be applied by wrapping
  * the `StackView` in other components. For example, a `StackView` may be the child of a `Card`.
@@ -49,22 +61,21 @@ import { staticStyles, selectFlexStyles } from './common'
 const StackView = ({
   space = 1,
   divider,
-  direction = 'column',
-  inherit,
+  direction: directionProp = 'column',
   children,
   variant,
   tokens,
   ...rest
 }) => {
-  const a11y = a11yProps.select({ ...rest })
+  const viewport = useViewport()
+  const direction = useResponsiveProp(directionProp, 'column')
+  const props = { ...a11yProps.select(rest), ...viewProps.select(rest) }
   const content = getStackedContent(children, { direction, divider, space })
-  const themeTokens = useThemeTokens('StackView', tokens, variant)
+  const themeTokens = useThemeTokens('StackView', tokens, variant, { viewport })
   const flexStyles = selectFlexStyles(themeTokens)
 
-  return inherit ? (
-    content
-  ) : (
-    <View {...a11y} style={[flexStyles, staticStyles[direction]]}>
+  return (
+    <View {...props} style={[flexStyles, staticStyles[direction]]}>
       {content}
     </View>
   )
@@ -72,21 +83,18 @@ const StackView = ({
 
 StackView.propTypes = {
   ...a11yProps.propTypes,
+  variant: variantProp.propType,
   /**
    * Sets the `flexDirection` of the container and, if `divider` is used, gives the Divider the appropriate direction.
    */
-  direction: PropTypes.oneOf(['column', 'row', 'column-reverse', 'row-reverse']),
+  direction: responsiveProps.getTypeOptionallyByViewport(
+    PropTypes.oneOf(['column', 'row', 'column-reverse', 'row-reverse'])
+  ),
   /**
    * If true, renders a UDS `Divider` component between each item. If an object is passed,
    * this object is passes as props to each Divider.
    */
   divider: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape(Divider.propTypes)]),
-  /**
-   * If true, does not render any container and returns an array of spaced children, inheriting
-   * flex styles from the StackView's parent. That parent must have a `flexDirection` style corresponding
-   * to the StackView's `direction` prop for `divider` prop to behave correctly.
-   */
-  inherit: PropTypes.bool,
   /**
    * The size of the spacer according to the theme's spacing scale.
    * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),

package/src/StackView/StackWrap.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Platform } from 'react-native'
 
 import StackWrapBox from './StackWrapBox'
 import StackWrapGap from './StackWrapGap'
@@ -20,7 +21,14 @@ const StackWrap = (props) => {
   // eslint-disable-next-line react/destructuring-assignment
   const gap = props.gap ?? space
 
-  return gap === space && CSS?.supports('gap', exampleGapValue) ? (
+  const canUseCSSGap =
+    Platform.OS === 'web' &&
+    gap === space &&
+    // In Jest/CI, global CSS isn't always available and doesn't always have .supports method
+    typeof CSS?.supports === 'function' &&
+    CSS.supports('gap', exampleGapValue)
+
+  return canUseCSSGap ? (
     // If possible, use the cleaner implementation that applies CSS `gap` styles to the container.
     <StackWrapGap {...props} />
   ) : (

package/src/StackView/StackWrapBox.jsx

@@ -2,8 +2,16 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
-import { spacingProps, a11yProps, useSpacingScale } from '../utils'
+import {
+  spacingProps,
+  a11yProps,
+  responsiveProps,
+  useSpacingScale,
+  useResponsiveProp,
+  viewProps
+} from '../utils'
 import { useThemeTokens } from '../ThemeProvider'
+import { useViewport } from '../ViewportProvider'
 import getStackedContent from './getStackedContent'
 import { staticStyles, selectFlexStyles } from './common'
 
@@ -37,15 +45,17 @@ const spaceSides = {
 const StackWrapBox = ({
   space = 1,
   gap = space,
-  direction = 'row',
+  direction: directionProp = 'row',
   children,
   tokens,
   variant,
   ...rest
 }) => {
-  const themeTokens = useThemeTokens('StackView', tokens, variant)
+  const viewport = useViewport()
+  const direction = useResponsiveProp(directionProp, 'row')
+  const themeTokens = useThemeTokens('StackView', tokens, variant, { viewport })
   const flexStyles = selectFlexStyles(themeTokens)
-  const a11y = a11yProps.select({ ...rest })
+  const props = { ...a11yProps.select(rest), ...viewProps.select(rest) }
 
   // Mimic CSS `gap` using box spacing on the side after a wrapped row then offsetting it on the last row.
   const gapSize = useSpacingScale(gap)
@@ -54,7 +64,7 @@ const StackWrapBox = ({
   const content = getStackedContent(children, { direction, space: 0, box: boxProps })
 
   return (
-    <View {...a11y} style={[flexStyles, staticStyles.wrap, staticStyles[direction], offsetStyle]}>
+    <View {...props} style={[flexStyles, staticStyles.wrap, staticStyles[direction], offsetStyle]}>
       {content}
     </View>
   )
@@ -63,9 +73,11 @@ const StackWrapBox = ({
 StackWrapBox.propTypes = {
   ...a11yProps.propTypes,
   /**
-   * Sets the `flexDirection` of the container, or if 'inherit' returns spaced children as an array.
+   * Sets the `flexDirection` of the container
    */
-  direction: PropTypes.oneOf(['column', 'row']),
+  direction: responsiveProps.getTypeOptionallyByViewport(
+    PropTypes.oneOf(['column', 'row', 'row-reverse', 'column-reverse'])
+  ),
   /**
    * The size of the spacer according to the theme's spacing scale.
    * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),

package/src/StackView/StackWrapGap.jsx

@@ -2,8 +2,9 @@ import React from 'react'
 import { View } from 'react-native'
 
 import StackWrapBox from './StackWrapBox'
-import { a11yProps, useSpacingScale } from '../utils'
+import { a11yProps, useSpacingScale, useResponsiveProp, viewProps } from '../utils'
 import { useThemeTokens } from '../ThemeProvider'
+import { useViewport } from '../ViewportProvider'
 import getStackedContent from './getStackedContent'
 import { staticStyles, selectFlexStyles } from './common'
 
@@ -17,10 +18,19 @@ import { staticStyles, selectFlexStyles } from './common'
  * - The `space` between items is the same as the `gap` between wrapped rows (this is the
  *   default if `gap` prop is undefined)
  */
-const StackWrapGap = ({ space = 1, tokens, variant, direction = 'row', children, ...rest }) => {
-  const themeTokens = useThemeTokens('StackView', tokens, variant)
+const StackWrapGap = ({
+  space = 1,
+  tokens,
+  variant,
+  direction: directionProp = 'row',
+  children,
+  ...rest
+}) => {
+  const viewport = useViewport()
+  const direction = useResponsiveProp(directionProp, 'row')
+  const themeTokens = useThemeTokens('StackView', tokens, variant, { viewport })
   const flexStyles = selectFlexStyles(themeTokens)
-  const a11y = a11yProps.select({ ...rest })
+  const props = { ...a11yProps.select(rest), ...viewProps.select(rest) }
 
   const size = useSpacingScale(space)
   const gapStyle = { gap: size }
@@ -28,7 +38,7 @@ const StackWrapGap = ({ space = 1, tokens, variant, direction = 'row', children,
   const content = getStackedContent(children, { direction, space: 0 })
 
   return (
-    <View {...a11y} style={[flexStyles, staticStyles.wrap, staticStyles[direction], gapStyle]}>
+    <View {...props} style={[flexStyles, staticStyles.wrap, staticStyles[direction], gapStyle]}>
       {content}
     </View>
   )

package/src/StackView/getStackedContent.jsx

@@ -23,17 +23,23 @@ import Spacer from '../Spacer'
  *  - `direction`: if 'row' or 'row-reverse', applies space horizontally, if 'column' or 'column-reverse', applies space vertically
  *  - `box`: if truthy, wraps each valid child in a Box component; if an object, passes it to Box as props
  *  - `divider`: if truthy, inserts Divider components; if an object, passes it to Divider as props
+ *  - `preserveFragments`: if true, adds no space between top-level elements that were passed inside a nested fragment
  * @param {SpacingValue} [options.space]
  * @param {boolean | object} [options.divider]
  * @param {"row" | "column" | "row-reverse" | "column-reverse"} [options.direction]
+ * @param {boolean} [options.preserveFragments]
  * @returns {ReactElement[]}
  */
-const getStackedContent = (children, { divider, space, direction = 'column', box }) => {
+const getStackedContent = (
+  children,
+  { divider, space, direction = 'column', box, preserveFragments = false }
+) => {
   const boxProps = box && typeof box === 'object' ? box : { space }
   const dividerProps = divider && typeof divider === 'object' ? divider : {}
 
   // Avoid surprises if children contains comments, nulls, or is a variable wrapped as a fragment
-  const validChildren = Children.toArray(unpackFragment(children)).filter(Boolean)
+  const topLevelChildren = preserveFragments ? children : unpackFragment(children)
+  const validChildren = Children.toArray(topLevelChildren).filter(Boolean)
   const content = validChildren.reduce((newChildren, child, index) => {
     const boxID = `Stack-Box-${index}`
     const item = box ? (

package/src/StepTracker/Step.jsx

@@ -0,0 +1,202 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, Text, View } from 'react-native'
+
+import StackView from '../StackView'
+import Icon from '../Icon'
+import { getTokensPropType, variantProp } from '../utils'
+import { applyTextStyles } from '../ThemeProvider'
+
+const selectCompletedIconTokens = ({ completedIconColor, completedIconSize }) => ({
+  size: completedIconSize,
+  color: completedIconColor
+})
+const selectConnectorStyles = (
+  {
+    connectorColor,
+    connectorHeight,
+    connectorMinWidth,
+    connectorCompletedHeight,
+    connectorCompletedColor
+  },
+  isCompleted
+) => ({
+  backgroundColor: connectorColor,
+  height: connectorHeight,
+  minWidth: connectorMinWidth,
+  ...(isCompleted && { height: connectorCompletedHeight, backgroundColor: connectorCompletedColor })
+})
+const selectCurrentInnerStyles = ({ knobCurrentInnerColor, knobCurrentInnerSize }) => ({
+  backgroundColor: knobCurrentInnerColor,
+  borderRadius: knobCurrentInnerSize / 2,
+  height: knobCurrentInnerSize,
+  width: knobCurrentInnerSize
+})
+const selectKnobStyles = (
+  {
+    knobBackgroundColor,
+    knobBorderColor,
+    knobBorderWidth,
+    knobCompletedBackgroundColor,
+    knobCompletedBorderColor,
+    knobCompletedPaddingLeft,
+    knobCompletedPaddingTop,
+    knobCurrentBackgroundColor,
+    knobCurrentBorderColor,
+    knobCurrentBorderWidth,
+    knobCurrentPaddingLeft,
+    knobCurrentPaddingTop,
+    knobSize
+  },
+  isCompleted,
+  isCurrent
+) => ({
+  backgroundColor: knobBackgroundColor,
+  borderColor: knobBorderColor,
+  borderRadius: knobSize / 2,
+  borderWidth: knobBorderWidth,
+  height: knobSize,
+  width: knobSize,
+  ...(isCompleted && {
+    backgroundColor: knobCompletedBackgroundColor,
+    borderColor: knobCompletedBorderColor,
+    paddingLeft: knobCompletedPaddingLeft,
+    paddingTop: knobCompletedPaddingTop
+  }),
+  ...(isCurrent && {
+    backgroundColor: knobCurrentBackgroundColor,
+    borderColor: knobCurrentBorderColor,
+    borderWidth: knobCurrentBorderWidth,
+    paddingLeft: knobCurrentPaddingLeft,
+    paddingTop: knobCurrentPaddingTop
+  })
+})
+const selectLabelContainerStyles = ({
+  labelDirection,
+  labelGap,
+  labelMarginTop,
+  labelPaddingLeft,
+  labelPaddingRight
+}) => ({
+  marginTop: labelMarginTop,
+  paddingLeft: labelPaddingLeft,
+  paddingRight: labelPaddingRight,
+  flexDirection: labelDirection,
+  gap: labelGap
+})
+const selectLabelStyles = (
+  {
+    labelColor,
+    labelCurrentColor,
+    labelCurrentFontWeight,
+    labelFontSize,
+    labelFontWeight,
+    labelFontName,
+    labelLineHeight
+  },
+  isCurrent
+) =>
+  applyTextStyles({
+    color: isCurrent ? labelCurrentColor : labelColor,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontWeight: isCurrent ? labelCurrentFontWeight : labelFontWeight,
+    fontName: labelFontName
+  })
+const getStepTestID = (isCompleted, isCurrent) => {
+  let testID = 'StepTracker-Step'
+  if (isCompleted) {
+    testID += '-Completed'
+  } else if (isCurrent) {
+    testID += '-Current'
+  }
+
+  return testID
+}
+
+/**
+ * A single step of a StepTracker.
+ */
+const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens }) => {
+  const { completedIcon, showStepLabel, showStepName, ...themeTokens } = tokens
+  const isFirst = stepIndex === 0
+  const isLast = stepIndex === stepCount - 1
+  const isCompleted = status > stepIndex
+  const isCurrent = status === stepIndex
+  const isActive = isCompleted || isCurrent
+
+  return (
+    <StackView
+      space={0}
+      tokens={{ alignItems: 'stretch', flexGrow: 1 }}
+      accessibilityLabel={label}
+      accessibilityLevel={2}
+      accessibilityCurrent={status === stepIndex ? 'true' : 'false'}
+    >
+      <StackView direction="row" space={0} tokens={{ alignItems: 'center', flexGrow: 0 }}>
+        <View
+          style={[staticStyles.connector, !isFirst && selectConnectorStyles(themeTokens, isActive)]}
+        />
+        <View
+          style={[staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)]}
+          testID={getStepTestID(isCompleted, isCurrent)}
+        >
+          {isCompleted && completedIcon && (
+            <Icon icon={completedIcon} tokens={selectCompletedIconTokens(themeTokens)} />
+          )}
+          {isCurrent && <View style={selectCurrentInnerStyles(themeTokens)} />}
+        </View>
+        <View
+          style={[
+            staticStyles.connector,
+            !isLast && selectConnectorStyles(themeTokens, isCompleted)
+          ]}
+        />
+      </StackView>
+      {showStepLabel && (
+        <View style={[staticStyles.stepLabelContainer, selectLabelContainerStyles(tokens)]}>
+          {showStepName && (
+            <Text style={[staticStyles.centeredText, selectLabelStyles(tokens, isCurrent)]}>
+              {name}
+            </Text>
+          )}
+          <StackView direction="row">
+            <Text
+              style={[
+                staticStyles.centeredText,
+                tokens.labelDirection === 'column' && staticStyles.wrappingLabel,
+                selectLabelStyles(tokens, isCurrent)
+              ]}
+            >
+              {label}
+            </Text>
+          </StackView>
+        </View>
+      )}
+    </StackView>
+  )
+}
+
+Step.propTypes = {
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  status: PropTypes.number.isRequired,
+  stepCount: PropTypes.number.isRequired,
+  stepIndex: PropTypes.number.isRequired,
+  tokens: getTokensPropType('StepTracker'),
+  variant: variantProp.propType
+}
+
+export default Step
+
+const staticStyles = StyleSheet.create({
+  centeredText: { textAlign: 'center' },
+  connector: { flex: 1, height: 1 },
+  completedKnob: {
+    backgroundColor: 'transparent',
+    textAlign: 'center'
+  },
+  knob: { borderWidth: 1 },
+  stepLabelContainer: { justifyContent: 'center' },
+  wrappingLabel: { width: 0, flex: 1 }
+})