@telus-uds/components-base 3.3.0 → 3.5.0

package/src/ActivityIndicator/Spinner.native.jsx

@@ -1,140 +1,133 @@
 import React from 'react'
-import { Animated, Easing, StyleSheet, View } from 'react-native'
-import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared'
+import { View, Animated, Easing } from 'react-native'
+import Svg, { Circle } from 'react-native-svg'
+import {
+  DURATION,
+  SVG_CIRCUMFERENCE,
+  SVG_SIZE,
+  SVG_CENTER,
+  SPINNER_RADIUS,
+  SPINNER_DASHARRAY_HALF,
+  SPINNER_DASHARRAY_MIN,
+  SPINNER_DASHOFFSET_FACTOR,
+  propTypes
+} from './shared'
 import { useA11yInfo } from '../A11yInfoProvider'
 
-const ea = MIN_EMPTY_ANGLE / 2
-const sa = MIN_STROKE_ANGLE / 2
-
-const Spinner = React.forwardRef(({ size, color, thickness, label, isStatic = false }, ref) => {
-  const { current: timer } = React.useRef(new Animated.Value(0))
-  const { reduceMotionEnabled } = useA11yInfo()
-  const reduceMotion = reduceMotionEnabled || isStatic
-
-  React.useLayoutEffect(() => {
-    const loop = Animated.timing(timer, {
-      duration: DURATION,
-      easing: Easing.linear,
-      // Animated.loop does not work if useNativeDriver is true on web
-      useNativeDriver: true,
-      toValue: 1,
-      isInteraction: false
-    })
-
-    if (!reduceMotion) Animated.loop(loop).start()
-    else loop.stop()
-  }, [timer, reduceMotion])
-
-  const frames = (60 * DURATION) / 1000
-  const easing = Easing.bezier(...BEZIER)
-  const containerStyle = {
-    width: size,
-    height: size / (reduceMotion ? 1.5 : 2),
-    overflow: 'hidden'
+const Spinner = React.forwardRef(
+  ({ size, color, indicatorBackgroundColor, thickness, label, isStatic = false }, ref) => {
+    const { reduceMotionEnabled } = useA11yInfo()
+    const reduceMotion = reduceMotionEnabled || isStatic
+
+    // Animated value between 0..1 that will loop
+    const progress = React.useRef(new Animated.Value(0)).current
+
+    // Local state to force re-render on each frame
+    const [progressVal, setProgressVal] = React.useState(0)
+
+    React.useEffect(() => {
+      if (reduceMotion) {
+        progress.stopAnimation(() => {
+          progress.setValue(0)
+          setProgressVal(0)
+        })
+        return undefined
+      }
+
+      const id = progress.addListener(({ value }) => {
+        setProgressVal(value)
+      })
+
+      Animated.loop(
+        Animated.timing(progress, {
+          toValue: 1,
+          duration: DURATION,
+          easing: Easing.linear,
+          useNativeDriver: false,
+          isInteraction: false
+        })
+      ).start()
+
+      return () => {
+        progress.removeListener(id)
+        progress.stopAnimation()
+      }
+    }, [progress, reduceMotion])
+
+    /* The same logic used in Wweb keyframes:
+    - rotation from -90° base plus 0..183° => -90..93
+    - dasharray from 1% -> 50% -> 1%
+    - dashoffset from 0 -> 0 -> -49%
+  */
+
+    // 1) rotation (0->183) plus base offset -90
+    const rotationDeg = -90 + 183 * progressVal // -90..+93
+
+    // strokeDasharray
+    let dashArrayVisible
+    if (progressVal < SPINNER_DASHARRAY_HALF) {
+      const segmentProgress = progressVal / SPINNER_DASHARRAY_HALF
+      dashArrayVisible =
+        SPINNER_DASHARRAY_MIN + (SPINNER_DASHARRAY_HALF - SPINNER_DASHARRAY_MIN) * segmentProgress
+    } else {
+      const segmentProgress = (progressVal - SPINNER_DASHARRAY_HALF) / SPINNER_DASHARRAY_HALF
+      dashArrayVisible =
+        SPINNER_DASHARRAY_HALF + (SPINNER_DASHARRAY_MIN - SPINNER_DASHARRAY_HALF) * segmentProgress
+    }
+
+    const visibleLength = dashArrayVisible * SVG_CIRCUMFERENCE
+    const invisibleLength = SVG_CIRCUMFERENCE - visibleLength
+    const strokeDasharray = `${visibleLength},${invisibleLength}`
+
+    // strokeDashoffset
+    let strokeDashoffset = 0
+    if (progressVal > SPINNER_DASHARRAY_HALF) {
+      const segmentProgress = (progressVal - SPINNER_DASHARRAY_HALF) / SPINNER_DASHARRAY_HALF
+      strokeDashoffset = -SPINNER_DASHOFFSET_FACTOR * SVG_CIRCUMFERENCE * segmentProgress
+    }
+
+    const strokeWidth = (thickness * SVG_SIZE) / size
+
+    return (
+      <View
+        ref={ref}
+        style={{ width: size, height: size }}
+        accessible
+        accessibilityLabel={label}
+        accessibilityRole="progressbar"
+        accessibilityState={{ busy: true }}
+      >
+        <Svg width={size} height={size} viewBox={`0 0 ${SVG_SIZE} ${SVG_SIZE}`}>
+          {/* Base static circle */}
+          <Circle
+            cx={SVG_CENTER}
+            cy={SVG_CENTER}
+            r={SPINNER_RADIUS}
+            fill="none"
+            stroke={indicatorBackgroundColor}
+            strokeWidth={strokeWidth}
+          />
+
+          {/* Animated circle */}
+          <Circle
+            cx={SVG_CENTER}
+            cy={SVG_CENTER}
+            r={SPINNER_RADIUS}
+            fill="none"
+            stroke={color}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            transform={`rotate(${rotationDeg}, 24, 24)`}
+            strokeDasharray={strokeDasharray}
+            strokeDashoffset={strokeDashoffset}
+          />
+        </Svg>
+      </View>
+    )
   }
-  const animationFrequency = reduceMotion ? [0] : [0, 1]
-
-  // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
-  return (
-    <View
-      ref={ref}
-      style={[styles.container]}
-      accessible
-      accessibilityLabel={label}
-      accessibilityRole="progressbar"
-      accessibilityState={{ busy: true }}
-    >
-      <Animated.View style={[{ width: size, height: size }]} collapsable={false}>
-        {animationFrequency.map((index) => {
-          const inputRange = Array.from(
-            new Array(frames),
-            (_, frameIndex) => frameIndex / (frames - 1)
-          )
-          const outputRange = Array.from(new Array(frames), (_, frameIndex) => {
-            let progress = (2 * frameIndex) / (frames - 1)
-            const rotation = index ? +(360 - sa) : -(180 - sa)
-
-            if (progress > 1.0) {
-              progress = 2.0 - progress
-            }
-
-            const direction = index ? -1 : +1
-
-            return `${direction * (180 - (sa + ea)) * easing(progress) + rotation}deg`
-          })
-
-          const layerStyle = {
-            width: size,
-            height: size
-          }
-
-          const viewportStyle = {
-            width: size,
-            height: size
-          }
-
-          if (!reduceMotion) {
-            layerStyle.transform = [
-              {
-                rotate: timer.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [`${0 + ea + sa}deg`, `${2 * 360 + ea + sa}deg`]
-                })
-              }
-            ]
-            viewportStyle.transform = [
-              {
-                translateY: index ? -size / 2 : 0
-              },
-              {
-                rotate: timer.interpolate({ inputRange, outputRange })
-              }
-            ]
-          }
-
-          const offsetStyle = index ? { top: size / 2 } : null
-
-          const lineStyle = {
-            width: size,
-            height: size,
-            borderColor: color,
-            borderWidth: thickness,
-            borderRadius: size / 2
-          }
-
-          return (
-            <Animated.View key={index} style={[styles.layer]}>
-              <Animated.View style={layerStyle}>
-                <Animated.View style={[containerStyle, offsetStyle]} collapsable={false}>
-                  <Animated.View style={viewportStyle}>
-                    <Animated.View style={containerStyle} collapsable={false}>
-                      <Animated.View style={lineStyle} />
-                    </Animated.View>
-                  </Animated.View>
-                </Animated.View>
-              </Animated.View>
-            </Animated.View>
-          )
-        })}
-      </Animated.View>
-    </View>
-  )
-})
-Spinner.displayName = 'Spinner'
+)
 
+Spinner.displayName = 'Spinner'
 Spinner.propTypes = propTypes
 
-const styles = StyleSheet.create({
-  container: {
-    flexGrow: 0,
-    flexShrink: 0
-  },
-
-  layer: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-})
-
 export default Spinner

package/src/ActivityIndicator/index.jsx

@@ -4,18 +4,33 @@ import { useThemeTokens } from '../ThemeProvider'
 import { getTokensPropType, variantProp } from '../utils/props'
 
 import Spinner from './Spinner'
+import Dots from './Dots'
 
 /**
  * `ActivityIndicator` renders a visual loading state.
  * It does not handle positioning or layout of that visual loader.
  */
 const ActivityIndicator = React.forwardRef(({ variant, tokens, label, isStatic = false }, ref) => {
-  const { size, color, thickness } = useThemeTokens('ActivityIndicator', tokens, variant)
-  return (
+  const { size, dotSize, color, indicatorBackgroundColor, thickness } = useThemeTokens(
+    'ActivityIndicator',
+    tokens,
+    variant
+  )
+  return variant?.dots ? (
+    <Dots
+      ref={ref}
+      size={dotSize}
+      color={color}
+      indicatorBackgroundColor={indicatorBackgroundColor}
+      label={label}
+      isStatic={isStatic}
+    />
+  ) : (
     <Spinner
       ref={ref}
       size={size}
       color={color}
+      indicatorBackgroundColor={indicatorBackgroundColor}
       thickness={thickness}
       label={label}
       isStatic={isStatic}

package/src/ActivityIndicator/shared.js

@@ -1,15 +1,62 @@
 import PropTypes from 'prop-types'
 
-// these could be specified by the theme
-export const DURATION = 1800
-export const MIN_EMPTY_ANGLE = 60
-export const MIN_STROKE_ANGLE = 30
-export const BEZIER = [0.42, 0.0, 0.58, 1.0]
+// Spinner
+export const DURATION = 1200
+export const SVG_RADIUS = 20
+export const SVG_CIRCUMFERENCE = SVG_RADIUS * 2 * Math.PI
+export const SVG_SIZE = 48
+export const ROTATION_TRANSFORM = 'rotate(-90 24 24)'
+export const SVG_CENTER = 24
+export const SPINNER_RADIUS = 20
+export const SPINNER_ROTATION_DEGREES = 183
+export const SPINNER_DASHARRAY_MIN = 0.01
+export const SPINNER_DASHARRAY_MAX = 0.99
+
+// Spinner animation
+export const SPINNER_KEYTIMES = '0; 0.5; 1'
+export const SPINNER_DASHARRAY_HALF = 0.5
+export const SPINNER_DASHOFFSET_FACTOR = 0.49
+
+// Dots
+export const DOTS_ANIMATION_DURATION = 300
+export const DOTS_TOTAL_ANIMATION_DURATION = DOTS_ANIMATION_DURATION * 10
+export const OVERSHOOT_FACTOR = 1.3
+export const UNDERSHOOT_FACTOR = 0.2
+export const BOUNCY_CURVE = '0.2 1 0.8 1'
+export const DOTS_SPACING_X = 3
+export const DOTS_BASE_Y_FACTOR = 3
+export const DOTS_JUMP_HEIGHT_FACTOR = 1
+export const DOTS_PADDING_FACTOR = 0.5
+
+// Dots fadeout
+export const DOTS_FADEOUT_KEYTIMES = '0; 0.7; 0.8; 1'
+export const DOTS_FADEOUT_VALUES = '1; 1; 0; 0'
+
+// Dots animation
+export const DOT1_ANIMATION_KEYTIMES = '0; 0.1; 0.2; 1'
+export const DOT2_ANIMATION_KEYTIMES = '0; 0.3; 0.4; 0.5; 1'
+export const DOT3_ANIMATION_KEYTIMES = '0; 0.6; 0.7; 0.8; 1'
+
+// Dots color keytimes
+export const DOT1_COLOR_KEYTIMES = '0; 0.3; 0.4; 1'
+export const DOT2_COLOR_KEYTIMES = '0; 0.3; 0.4; 0.6; 0.7; 1'
+export const DOT3_COLOR_KEYTIMES = '0; 0.5; 0.6; 0.8; 1'
+
+// Dots native fadeout
+export const DOT_FADEOUT_INPUT_RANGE = [0, 0.7, 0.8, 1]
+export const DOT_FADEOUT_OUTPUT_RANGE = [1, 1, 0, 0]
+
+// Dots native animation
+export const DOT1_ANIMATION_INPUT_RANGE = [0, 0.1, 0.2, 1]
+export const DOT2_ANIMATION_INPUT_RANGE = [0, 0.3, 0.4, 0.5, 1]
+export const DOT3_ANIMATION_INPUT_RANGE = [0, 0.6, 0.7, 0.8, 1]
 
 export const propTypes = {
   color: PropTypes.string.isRequired,
+  baseColor: PropTypes.string,
   label: PropTypes.string.isRequired,
   size: PropTypes.number.isRequired,
+  dotsize: PropTypes.number,
   thickness: PropTypes.number.isRequired,
   isStatic: PropTypes.bool
 }

package/src/Button/ButtonBase.jsx

@@ -15,7 +15,8 @@ import {
   selectSystemProps,
   viewProps,
   wrapStringsInText,
-  withLinkRouter
+  withLinkRouter,
+  contentfulProps
 } from '../utils'
 import { IconText } from '../Icon'
 
@@ -23,7 +24,8 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
   focusHandlerProps,
   linkProps,
-  viewProps
+  viewProps,
+  contentfulProps
 ])
 
 const getOuterBorderOffset = ({ outerBorderGap = 0, outerBorderWidth = 0 }) =>

package/src/Button/ButtonLink.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
-import { a11yProps, hrefAttrsProp, linkProps } from '../utils/props'
+import { a11yProps, hrefAttrsProp, linkProps, contentfulProps } from '../utils/props'
 import { useThemeTokensCallback } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 
@@ -16,6 +16,7 @@ const ButtonLink = React.forwardRef(
     const viewport = useViewport()
     const buttonVariant = { viewport, ...variant }
     const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant)
+
     return (
       <ButtonBase
         ref={ref}
@@ -34,6 +35,7 @@ ButtonLink.propTypes = {
   ...a11yProps.types,
   ...buttonPropTypes,
   ...linkProps.types,
+  ...contentfulProps.types,
   children: textAndA11yText,
   dataSet: PropTypes.object,
   accessibilityRole: PropTypes.string

package/src/Carousel/Carousel.jsx

@@ -107,7 +107,9 @@ const selectControlButtonPositionStyles = ({
   positionProperty = getDynamicPositionProperty(),
   spaceBetweenSlideAndButton,
   enablePeeking,
-  enableDisplayMultipleItemsPerSlide
+  enableDisplayMultipleItemsPerSlide,
+  isAutoPlayEnabled,
+  viewport
 }) => {
   const styles = {}
   if (positionVariant === 'edge') {
@@ -115,7 +117,11 @@ const selectControlButtonPositionStyles = ({
   } else if (positionVariant === 'inside') {
     styles[positionProperty] = DEFAULT_POSITION_OFFSET
   } else if (positionVariant === 'outside') {
-    if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
+    if (
+      enablePeeking ||
+      enableDisplayMultipleItemsPerSlide ||
+      (isAutoPlayEnabled && viewport === 'xs')
+    ) {
       styles[positionProperty] = 0
     } else {
       styles[positionProperty] = -1 * (spaceBetweenSlideAndButton + buttonWidth)
@@ -132,7 +138,9 @@ const selectPreviousNextNavigationButtonStyles = (
   isLastSlide,
   areStylesAppliedOnPreviousButton,
   enablePeeking,
-  enableDisplayMultipleItemsPerSlide
+  enableDisplayMultipleItemsPerSlide,
+  isAutoPlayEnabled,
+  viewport
 ) => {
   const styles = {
     zIndex: 1,
@@ -154,7 +162,9 @@ const selectPreviousNextNavigationButtonStyles = (
       positionProperty: getDynamicPositionProperty(areStylesAppliedOnPreviousButton),
       spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
       enablePeeking,
-      enableDisplayMultipleItemsPerSlide
+      enableDisplayMultipleItemsPerSlide,
+      isAutoPlayEnabled,
+      viewport
     })
   }
 }
@@ -204,6 +214,11 @@ const selectRootContainerStyles = (enableHero, viewport) => {
       alignItems: 'center'
     }
   }
+  if (enableHero) {
+    return {
+      paddingHorizontal: 16
+    }
+  }
   return {}
 }
 
@@ -1012,7 +1027,9 @@ const Carousel = React.forwardRef(
                       positionProperty: getDynamicPositionProperty(),
                       spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
                       enablePeeking,
-                      enableDisplayMultipleItemsPerSlide
+                      enableDisplayMultipleItemsPerSlide,
+                      isAutoPlayEnabled,
+                      viewport
                     })
                   ]}
                 >
@@ -1036,7 +1053,9 @@ const Carousel = React.forwardRef(
                     isLastSlide,
                     true,
                     enablePeeking,
-                    enableDisplayMultipleItemsPerSlide
+                    enableDisplayMultipleItemsPerSlide,
+                    isAutoPlayEnabled,
+                    viewport
                   )}
                   testID="previous-button-container"
                 >
@@ -1110,7 +1129,9 @@ const Carousel = React.forwardRef(
                     isLastSlide,
                     false,
                     enablePeeking,
-                    enableDisplayMultipleItemsPerSlide
+                    enableDisplayMultipleItemsPerSlide,
+                    isAutoPlayEnabled,
+                    viewport
                   )}
                   testID="next-button-container"
                 >

package/src/ExpandCollapse/ExpandCollapse.jsx

@@ -9,10 +9,15 @@ import {
   selectSystemProps,
   useMultipleInputValues,
   variantProp,
-  viewProps
+  viewProps,
+  contentfulProps
 } from '../utils'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  viewProps,
+  contentfulProps
+])
 
 function selectBorderStyles(tokens) {
   return {
@@ -30,7 +35,7 @@ function selectBorderStyles(tokens) {
  * nested (they do not need to be direct children), and non-interactive items may be included too.
  */
 const ExpandCollapse = React.forwardRef(
-  ({ children, tokens, variant, maxOpen, open, initialOpen, onChange, ...rest }, ref) => {
+  ({ children, tokens, variant, maxOpen, open, initialOpen, onChange, dataSet, ...rest }, ref) => {
     const {
       currentValues: openIds,
       toggleOneValue: onToggle,
@@ -46,7 +51,7 @@ const ExpandCollapse = React.forwardRef(
     const themeTokens = useThemeTokens('ExpandCollapse', tokens, variant)
 
     return (
-      <View style={staticStyles.container} ref={ref} {...selectProps(rest)}>
+      <View style={staticStyles.container} ref={ref} {...selectProps(rest)} dataSet={dataSet}>
         <View style={selectBorderStyles(themeTokens)}>
           {typeof children === 'function'
             ? children({ openIds, onToggle, resetValues, setValues, unsetValues })

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -1,11 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import ExpandCollapse from '../ExpandCollapse'
-import { getTokensPropType } from '../utils'
+import { getTokensPropType, selectSystemProps, contentfulProps } from '../utils'
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl'
 
+const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([contentfulProps])
+
 const ExpandCollapseMini = React.forwardRef(
-  ({ children, onToggle = () => {}, tokens = {}, nativeID, initialOpen = false, ...rest }, ref) => {
+  (
+    { children, onToggle = () => {}, tokens = {}, nativeID, initialOpen = false, dataSet, ...rest },
+    ref
+  ) => {
     const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel'
     const handleChange = (openPanels, event) => {
       if (typeof onToggle === 'function') {
@@ -19,6 +24,8 @@ const ExpandCollapseMini = React.forwardRef(
         onChange={handleChange}
         tokens={tokens}
         initialOpen={initialOpen ? [expandCollapeMiniPanelId] : []}
+        {...selectContainerProps(rest)}
+        dataSet={dataSet}
       >
         {(expandProps) => (
           <ExpandCollapse.Panel
@@ -51,6 +58,7 @@ ExpandCollapseMini.displayName = 'ExpandCollapseMini'
 
 ExpandCollapseMini.propTypes = {
   ...ExpandCollapseMiniControl.propTypes,
+  ...selectedContainerPropTypes,
   /**
    * Function to call on pressing the panel's control, which should open or close the panel.
    */
@@ -70,7 +78,11 @@ ExpandCollapseMini.propTypes = {
   /**
    * Optional variant object to override the default theme tokens
    */
-  tokens: getTokensPropType('ExpandCollapseMini')
+  tokens: getTokensPropType('ExpandCollapseMini'),
+  /**
+   * The dataSet prop allows to pass data-* attributes element to the component.
+   */
+  dataSet: PropTypes.object
 }
 
 export default ExpandCollapseMini

package/src/FileUpload/FileUpload.jsx

@@ -21,7 +21,7 @@ import Spacer from '../Spacer'
 import StackView from '../StackView'
 
 import NotificationContent from './NotificationContent'
-import dictionary from './dictionary'
+import defaultDictionary from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -113,6 +113,7 @@ const FileUpload = React.forwardRef(
       onUpload,
       onDelete,
       documentPicker,
+      dictionary = defaultDictionary,
       ...rest
     },
     ref
@@ -390,6 +391,28 @@ const FileUpload = React.forwardRef(
 
 FileUpload.displayName = 'FileUpload'
 
+const dictionaryEntryShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  buttonLabel: PropTypes.string.isRequired,
+  dismissButtonLabel: PropTypes.string.isRequired,
+  wrongFileType: PropTypes.string.isRequired,
+  allowedFileTypes: PropTypes.string.isRequired,
+  fileTooBig: PropTypes.string.isRequired,
+  fileIsEmpty: PropTypes.string.isRequired,
+  problemUploading: PropTypes.string.isRequired,
+  problemDeleting: PropTypes.string.isRequired,
+  problemUploadingMultipleFiles: PropTypes.string.isRequired,
+  only: PropTypes.string.isRequired,
+  and: PropTypes.string.isRequired,
+  or: PropTypes.string.isRequired,
+  uploadSuccess: PropTypes.string.isRequired,
+  uploadError: PropTypes.string.isRequired,
+  deleteProblem: PropTypes.string.isRequired,
+  tooManyFiles: PropTypes.string.isRequired,
+  fileTooSmall: PropTypes.string.isRequired,
+  fewFiles: PropTypes.string.isRequired
+})
+
 FileUpload.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('FileUpload'),
@@ -433,7 +456,14 @@ FileUpload.propTypes = {
   /**
    * The minimum file size allowed for upload in MB.
    */
-  minFileSize: PropTypes.number
+  minFileSize: PropTypes.number,
+  /**
+   * Custom dictionary containing the labels to use for the steps
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryEntryShape,
+    fr: dictionaryEntryShape
+  })
 }
 
 export default FileUpload

package/src/Link/Link.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import { useThemeTokensCallback } from '../ThemeProvider'
 import LinkBase from './LinkBase'
@@ -25,6 +26,12 @@ const Link = React.forwardRef(
 )
 Link.displayName = 'Link'
 
-Link.propTypes = LinkBase.propTypes
+Link.propTypes = {
+  ...LinkBase.propTypes,
+  /**
+   * The dataSet prop allows to pass data-* attributes element to the component.
+   */
+  dataSet: PropTypes.object
+}
 
 export default Link

package/src/Link/LinkBase.jsx

@@ -132,6 +132,7 @@ const LinkBase = React.forwardRef(
       variant,
       tokens = {},
       children,
+      dataSet,
       accessibilityRole = 'link',
       ...rawRest
     },
@@ -162,6 +163,7 @@ const LinkBase = React.forwardRef(
     return (
       <InlinePressable
         {...selectedProps}
+        dataSet={dataSet}
         inlineFlex={hasIcon}
         // assuming links without icons should be inline (even if they are long)
         ref={ref}