@telus-uds/components-base 0.0.2-prerelease.7 → 0.0.2-prerelease.8

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

@@ -1,14 +1,16 @@
-import React, { useEffect, useRef } from 'react'
+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,
-  opacity: fadeAnimation
+  ...fadeAnimation
 })
 
 const selectLineStyles = ({ skeletonHeight, lineWidth }) => ({
@@ -28,7 +30,15 @@ const selectSquareStyles = ({ radius }) => ({
 const Skeleton = ({ tokens, variant, size, characters, lines, shape = 'line' }) => {
   const themeTokens = useThemeTokens('Skeleton', tokens, variant)
   const skeletonHeight = useSpacingScale(size || themeTokens.size)
-  const fadeAnimation = useRef(new Animated.Value(0)).current
+  const nativeAnimation = useSkeletonNativeAnimation()
+
+  const getAnimationBaseOnPlatform = () => {
+    if (Platform.OS !== 'web') {
+      return nativeAnimation
+    }
+
+    return skeletonWebAnimation
+  }
 
   const getLineWidth = () => {
     if (characters) {
@@ -38,22 +48,6 @@ const Skeleton = ({ tokens, variant, size, characters, lines, shape = 'line' })
     return themeTokens.characters * themeTokens.baseWidth
   }
 
-  useEffect(() => {
-    const fade = Animated.sequence([
-      Animated.timing(fadeAnimation, {
-        toValue: 1,
-        duration: 1000,
-        useNativeDriver: Platform.OS !== 'web'
-      }),
-      Animated.timing(fadeAnimation, {
-        toValue: 0,
-        duration: 1000,
-        useNativeDriver: Platform.OS !== 'web'
-      })
-    ])
-    Animated.loop(fade).start()
-  }, [fadeAnimation])
-
   const getStyledBasedOnShape = () => {
     if (shape === 'circle') {
       return selectShapeStyles({ skeletonHeight })
@@ -73,7 +67,10 @@ const Skeleton = ({ tokens, variant, size, characters, lines, shape = 'line' })
     <Animated.View
       testID="skeleton"
       key={`skeleton-${index + 1}`}
-      style={[selectSkeletonStyles({ ...themeTokens, fadeAnimation }), getStyledBasedOnShape()]}
+      style={[
+        selectSkeletonStyles({ ...themeTokens, fadeAnimation: getAnimationBaseOnPlatform() }),
+        getStyledBasedOnShape()
+      ]}
     />
   )
 

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,7 +3,14 @@ import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
 import Divider from '../Divider'
-import { spacingProps, a11yProps, responsiveProps, variantProp, useResponsiveProp } from '../utils'
+import {
+  spacingProps,
+  a11yProps,
+  responsiveProps,
+  variantProp,
+  viewProps,
+  useResponsiveProp
+} from '../utils'
 import { useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 import getStackedContent from './getStackedContent'
@@ -62,13 +69,13 @@ const StackView = ({
 }) => {
   const viewport = useViewport()
   const direction = useResponsiveProp(directionProp, 'column')
-  const a11y = a11yProps.select({ ...rest })
+  const props = { ...a11yProps.select(rest), ...viewProps.select(rest) }
   const content = getStackedContent(children, { direction, divider, space })
   const themeTokens = useThemeTokens('StackView', tokens, variant, { viewport })
   const flexStyles = selectFlexStyles(themeTokens)
 
   return (
-    <View {...a11y} style={[flexStyles, staticStyles[direction]]}>
+    <View {...props} style={[flexStyles, staticStyles[direction]]}>
       {content}
     </View>
   )

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

@@ -7,7 +7,8 @@ import {
   a11yProps,
   responsiveProps,
   useSpacingScale,
-  useResponsiveProp
+  useResponsiveProp,
+  viewProps
 } from '../utils'
 import { useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
@@ -54,7 +55,7 @@ const StackWrapBox = ({
   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)
@@ -63,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>
   )

package/src/StackView/StackWrapGap.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { View } from 'react-native'
 
 import StackWrapBox from './StackWrapBox'
-import { a11yProps, useSpacingScale, useResponsiveProp } from '../utils'
+import { a11yProps, useSpacingScale, useResponsiveProp, viewProps } from '../utils'
 import { useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 import getStackedContent from './getStackedContent'
@@ -30,7 +30,7 @@ const StackWrapGap = ({
   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 }
@@ -38,7 +38,7 @@ const StackWrapGap = ({
   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 }
+})

package/src/StepTracker/StepTracker.jsx

@@ -0,0 +1,163 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, Text, View } from 'react-native'
+
+import StackView from '../StackView'
+import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
+import { getTokensPropType, variantProp } from '../utils'
+import { a11yProps } from '../utils/propTypes'
+import { useViewport } from '../ViewportProvider'
+import useCopy from '../utils/useCopy'
+
+import Step from './Step'
+import defaultDictionary from './dictionary'
+
+const selectContainerStyles = ({
+  containerPaddingBottom,
+  containerPaddingLeft,
+  containerPaddingRight,
+  containerPaddingTop
+}) => ({
+  paddingBottom: containerPaddingBottom,
+  paddingLeft: containerPaddingLeft,
+  paddingRight: containerPaddingRight,
+  paddingTop: containerPaddingTop
+})
+const selectStepTrackerLabelContainerStyles = ({ labelMarginTop }) => ({
+  marginTop: labelMarginTop
+})
+const selectStepTrackerLabelStyles = ({
+  labelColor,
+  labelFontSize,
+  labelFontWeight,
+  labelFontName,
+  labelLineHeight
+}) =>
+  applyTextStyles({
+    color: labelColor,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontWeight: labelFontWeight,
+    fontName: labelFontName
+  })
+
+/**
+ * StepTracker component shows the current position in a sequence of steps.
+ *
+ * ## Component API
+ *
+ * - `current` prop allows to control the current step, 0-based number;
+ * - use `copy` and `dictionary` props to internationalize the labels;
+ * - `steps` is and array of strings defining step titles;
+ * - tokens and variant props define the appearance of the `StepTracker`:
+ *
+ * ## 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
+ * 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
+ * set a11y on controls used to modify the state of the step tracker.
+ *
+ * You can pass standard a11y props to the `StepTracker` component, including
+ * the ones that are specific to the `progressbar` role. By default the
+ * following props are used:
+ *
+ * - `accessibilityRole` (`role`): `progressbar`,
+ * - `accessibilityLabel` (`aria-label`): `Step I of N: <Current Step Label>`,
+ * - `accessibilityLevel` (`aria-level`): 1,
+ * - `accessibilityValue.min` (`aria-valuemin`): `0`,
+ * - `accessibilityValue.max` (`aria-valuemax`): `steps.length - 1`,
+ * - `accessibilityValue.now` (`aria-valuenow`): `current`,
+ * - `accessibilityValue.text` (`aria-valuetext`): `<Current Step Label>`,
+ *
+ */
+const StepTracker = ({
+  current = 0,
+  copy = 'en',
+  dictionary = defaultDictionary,
+  steps = [],
+  tokens,
+  variant,
+  ...rest
+}) => {
+  const viewport = useViewport()
+  const { showStepTrackerLabel, ...themeTokens } = useThemeTokens('StepTracker', tokens, variant, {
+    viewport
+  })
+  const getCopy = useCopy({ dictionary, copy })
+  const stepTrackerLabel = getCopy('stepTrackerLabel')
+    .replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length)
+    .replace('%{stepCount}', steps.length)
+    .replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1])
+  if (!steps.length) return null
+  const accessibilityProps = {
+    accessibilityLabel: stepTrackerLabel,
+    accessibilityLevel: 1,
+    accessibilityRole: 'progressbar',
+    accessibilityValue: {
+      min: 0,
+      max: steps.length - 1,
+      now: current,
+      text: steps[current]
+    },
+    ...a11yProps.select(rest)
+  }
+
+  return (
+    <View style={selectContainerStyles(themeTokens)} {...accessibilityProps}>
+      <StackView space={0}>
+        <View style={staticStyles.stepsContainer}>
+          {steps.map((label, index) => {
+            return (
+              <Step
+                status={current}
+                key={label}
+                label={label}
+                name={getCopy('stepLabel').replace('%{stepNumber}', index + 1)}
+                stepIndex={index}
+                stepCount={steps.length}
+                tokens={themeTokens}
+              />
+            )
+          })}
+        </View>
+        {showStepTrackerLabel && (
+          <View
+            style={[
+              staticStyles.stepTrackerLabelContainer,
+              selectStepTrackerLabelContainerStyles(themeTokens)
+            ]}
+          >
+            <Text style={selectStepTrackerLabelStyles(themeTokens)}>{stepTrackerLabel}</Text>
+          </View>
+        )}
+      </StackView>
+    </View>
+  )
+}
+
+StepTracker.propTypes = {
+  current: PropTypes.number,
+  copy: PropTypes.oneOf(['en', 'fr']),
+  dictionary: PropTypes.shape({
+    en: PropTypes.shape({ stepLabel: PropTypes.string, stepTrackerLabel: PropTypes.string }),
+    fr: PropTypes.shape({ stepLabel: PropTypes.string, stepTrackerLabel: PropTypes.string })
+  }),
+  steps: PropTypes.arrayOf(PropTypes.string),
+  tokens: getTokensPropType('StepTracker'),
+  variant: variantProp.propType
+}
+
+export default StepTracker
+
+const staticStyles = StyleSheet.create({
+  stepsContainer: {
+    alignItems: 'flex-start',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    flexGrow: 1
+  },
+  stepTrackerLabelContainer: { textAlign: 'center', flexDirection: 'row', justifyContent: 'center' }
+})

package/src/StepTracker/dictionary.js

@@ -0,0 +1,10 @@
+export default {
+  en: {
+    stepLabel: 'Step %{stepNumber}',
+    stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
+  },
+  fr: {
+    stepLabel: 'Étape %{stepNumber}',
+    stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
+  }
+}

package/src/StepTracker/index.js

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