@telus-uds/components-base 4.0.0-alpha.1 → 4.0.0-alpha.2

package/lib/esm/Scroll/dictionary.js

@@ -0,0 +1,12 @@
+export const dictionary = {
+  en: {
+    accessibilityLabel: 'Scrollable content',
+    instructionText: 'Use Tab, arrow keys, or space bar to navigate',
+    progressBarLabel: 'Scroll position'
+  },
+  fr: {
+    accessibilityLabel: 'Contenu défilable',
+    instructionText: "Utilisez Tab, les touches fléchées ou la barre d'espace pour naviguer",
+    progressBarLabel: 'Position de défilement'
+  }
+};

package/lib/esm/index.js

@@ -73,6 +73,8 @@ export { RadioGroup } from './Radio/RadioGroup';
 export { RadioCard } from './RadioCard/RadioCard';
 export { RadioCardGroup } from './RadioCard/RadioCardGroup';
 export { Responsive } from './Responsive/Responsive';
+export { Scroll } from './Scroll/Scroll';
+export { ScrollItem } from './Scroll/ScrollItem';
 export { Search } from './Search/Search';
 export { Select } from './Select/Select';
 export { SelectItem } from './Select/SelectItem';

package/lib/esm/utils/animation/useAnimatedValue.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import Animated from "react-native-web/dist/exports/Animated";
+import Easing from "react-native-web/dist/exports/Easing";
+const ANIMATION_DURATION = 200;
+
+/**
+ * Smoothly animates a numeric value to a new target using a quadratic ease-in-out
+ * curve. Returns the current interpolated value as a plain number so
+ * consumers can use it in non-Animated style props.
+ *
+ * @param {number} targetValue - The value to animate towards.
+ * @param {number} [duration=ANIMATION_DURATION] - Animation duration in ms.
+ */
+export const useAnimatedValue = function (targetValue) {
+  let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ANIMATION_DURATION;
+  const [currentValue, setCurrentValue] = React.useState(targetValue);
+  const animatedValue = React.useRef(new Animated.Value(targetValue)).current;
+  React.useEffect(() => {
+    const id = animatedValue.addListener(_ref => {
+      let {
+        value
+      } = _ref;
+      return setCurrentValue(value);
+    });
+    return () => animatedValue.removeListener(id);
+  }, [animatedValue]);
+  React.useEffect(() => {
+    const animation = Animated.timing(animatedValue, {
+      toValue: targetValue,
+      duration,
+      easing: Easing.inOut(Easing.quad),
+      useNativeDriver: false
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [targetValue, animatedValue, duration]);
+  return currentValue;
+};

package/lib/esm/utils/children.js

@@ -47,7 +47,8 @@ export const unpackFragment = child => {
 };
 const isStringOrNumber = child => typeof child === 'string' || typeof child === 'number';
 // Wrap an A11yText with neighouring text strings so it doesn't split them into multiple <Text>s
-const isWrapable = child => isStringOrNumber(child) || child.type === A11yText || child.type?.name === 'FootnoteLink';
+// Check displayName first as it is explicitly set and reliable regardless of export style (named vs default)
+const isWrapable = child => isStringOrNumber(child) || child.type === A11yText || child.type?.__UDS_COMPONENT_NAME__ === 'FootnoteLink';
 const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, '');
 
 // Group wrappable children for one `<Text>` parent, merging adjacent text nodes

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.11.4",
     "@telus-uds/system-constants": "^4.0.0-alpha.0",
-    "@telus-uds/system-theme-tokens": "^5.0.0-alpha.1",
+    "@telus-uds/system-theme-tokens": "^5.0.0-alpha.2",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^14.0.8",
     "expo-linear-gradient": "^15.0.8",
@@ -81,6 +81,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.2",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.11.4",
     "@telus-uds/system-constants": "^4.0.0-alpha.0",
-    "@telus-uds/system-theme-tokens": "^5.0.0-alpha.1",
+    "@telus-uds/system-theme-tokens": "^5.0.0-alpha.2",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^14.0.8",
     "expo-linear-gradient": "^15.0.8",
@@ -81,6 +81,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.2",
   "types": "types/index.d.ts"
 }

package/src/Footnote/FootnoteLink.jsx

@@ -13,22 +13,26 @@ import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
 
-// The top property varies between devices due to how devices render the viewport.
-const selectTextStyle = ({ fontSize, lineHeight }) => ({
-  fontSize,
-  lineHeight: lineHeight !== 1 ? lineHeight : fontSize * 2,
-  ...Platform.select({
-    ios: {
-      top: -fontSize / 2
-    },
-    android: {
-      top: fontSize / 4
+const HALF_FONT_SIZE = 2
+const QUARTER_FONT_SIZE = 4
+const DEFAULT_LINE_HEIGHT = 1
+const LINE_HEIGHT_MULTIPLIER = 2
+
+const selectTextStyle = ({ fontSize, lineHeight }) =>
+  Platform.select({
+    native: {
+      fontSize: fontSize / HALF_FONT_SIZE,
+      lineHeight: fontSize,
+      position: 'relative',
+      top: -(fontSize * lineHeight) / HALF_FONT_SIZE
     },
     web: {
-      top: -fontSize / 2.8
+      fontSize,
+      lineHeight:
+        lineHeight !== DEFAULT_LINE_HEIGHT ? lineHeight : fontSize * LINE_HEIGHT_MULTIPLIER,
+      top: -fontSize / QUARTER_FONT_SIZE
     }
   })
-})
 
 export const FootnoteLink = React.forwardRef(
   ({ copy = 'en', content = [], onClick, tokens, variant = {}, ...rest }, ref) => {
@@ -69,6 +73,7 @@ export const FootnoteLink = React.forwardRef(
 )
 
 FootnoteLink.displayName = 'FootnoteLink'
+FootnoteLink.__UDS_COMPONENT_NAME__ = 'FootnoteLink'
 
 const copyShape = PropTypes.shape({ a11yLabel: PropTypes.string.isRequired })
 

package/src/Progress/Progress.jsx

@@ -13,6 +13,9 @@ import { ProgressContext } from './ProgressContext'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const BORDER_SIDES = 2
+const CENTER_DIVISOR = 2
+
 const selectProgressStyles = ({
   backgroundColor,
   borderWidth,
@@ -29,6 +32,14 @@ const selectProgressStyles = ({
   ...applyShadowToken(shadow)
 })
 
+const selectBarWrapperStyles = ({ barHeight, borderRadius, borderWidth, height }) => ({
+  height: barHeight,
+  width: '100%',
+  position: 'absolute',
+  top: (height - borderWidth * BORDER_SIDES - barHeight) / CENTER_DIVISOR,
+  borderRadius
+})
+
 /**
  * The `Progress` is a container for displaying one or several `ProgressBar`s.
  *
@@ -41,10 +52,11 @@ const selectProgressStyles = ({
  *
  * - Use the following tokens to customize the appearance:
  *   - `backgroundColor` for the background color of the progress container,
+ *   - `barHeight` to control the height of the progress bars displayed within the container,
  *   - `borderColor` to control the color of the border,
  *   - `borderRadius` for the rounded corners,
  *   - `borderWidth` to change the border width.
- *   - `height` to control the height of the progress bars displayed within the progress bar container.
+ *   - `height` to control the height of the progress bar container.
  *   - `shadow` to apply a box shadow to the progress bar container.
  *
  * ## Variants
@@ -67,8 +79,15 @@ const selectProgressStyles = ({
  */
 export const Progress = React.forwardRef(({ children, tokens, variant, ...rest }, ref) => {
   const themeTokens = useThemeTokens('Progress', tokens, variant)
-  // Default to false (vertical layout) to preserve existing behavior and avoid breaking changes
   const layers = variant?.layers ?? false
+  const { barHeight, height } = themeTokens
+
+  const content =
+    barHeight && barHeight !== height ? (
+      <View style={selectBarWrapperStyles(themeTokens)}>{children}</View>
+    ) : (
+      children
+    )
 
   return (
     <ProgressContext.Provider value={{ layers }}>
@@ -77,7 +96,7 @@ export const Progress = React.forwardRef(({ children, tokens, variant, ...rest }
         style={[staticStyles.progressContainer, selectProgressStyles(themeTokens)]}
         {...selectProps(rest)}
       >
-        {children}
+        {content}
       </View>
     </ProgressContext.Provider>
   )