@telus-uds/components-base 1.59.2 → 1.61.0

package/src/IconButton/IconButton.jsx

@@ -107,6 +107,7 @@ const IconButton = forwardRef(
       icon: IconComponent,
       href,
       hrefAttrs,
+      testID,
       accessibilityRole = href ? 'link' : 'button',
       ...rawRest
     },
@@ -133,6 +134,7 @@ const IconButton = forwardRef(
         hrefAttrs={hrefAttrs}
         style={getOuterStyle}
         {...selectedProps}
+        testID={testID}
       >
         {(pressableState) => {
           const themeTokens = getTokens(resolvePressableState(pressableState))
@@ -157,6 +159,11 @@ IconButton.propTypes = {
   ...selectedSystemPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('IconButton'),
+  /**
+   * A unique identifier for testing purposes.
+   * Will be added as a `data-testid` attribute.
+   */
+  testID: PropTypes.string,
   /**
    * Defines the icon to be rendered
    */

package/src/Link/ChevronLink.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
 import { useThemeTokensCallback } from '../ThemeProvider'
-import { selectTokens, getTokensPropType } from '../utils'
+import { selectTokens, getTokensPropType, linkProps } from '../utils'
 import LinkBase from './LinkBase'
 
 /**
@@ -12,7 +12,7 @@ import LinkBase from './LinkBase'
  * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
  */
 const ChevronLink = forwardRef(
-  ({ direction = 'right', children, tokens = {}, variant, dataSet, ...linkProps }, ref) => {
+  ({ direction = 'right', children, tokens = {}, variant, dataSet, ...otherlinkProps }, ref) => {
     const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant)
     const applyChevronTokens = (linkState) => {
       const { leftIcon, rightIcon, iconDisplace, height, fontSize, ...otherTokens } =
@@ -32,7 +32,7 @@ const ChevronLink = forwardRef(
     const getTokens = useThemeTokensCallback('Link', applyChevronTokens, variant)
     return (
       <LinkBase
-        {...linkProps}
+        {...otherlinkProps}
         iconPosition={direction}
         tokens={getTokens}
         dataSet={dataSet}
@@ -47,6 +47,13 @@ const ChevronLink = forwardRef(
 ChevronLink.displayName = 'ChevronLink'
 ChevronLink.propTypes = {
   ...LinkBase.propTypes,
+  children: PropTypes.node,
+  variant: PropTypes.exact({
+    size: PropTypes.oneOf(['large', 'small', 'micro']),
+    alternative: PropTypes.bool,
+    inverse: PropTypes.bool
+  }),
+  ...linkProps.types,
   tokens: getTokensPropType('ChevronLink', 'Link'),
   /**
    * Changes direction of chevron icon

package/src/Link/LinkBase.jsx

@@ -197,6 +197,17 @@ LinkBase.displayName = 'LinkBase'
 LinkBase.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('Link'),
+  /**
+   * href for the Link
+   */
+  href: PropTypes.string,
+  /**
+   * AccesibilityRole for the link base
+   */
+  accessibilityrole: PropTypes.string,
+  /**
+   * Children nodes that can be added
+   */
   variant: variantProp.propType,
   /**
    * Optional variant that may be passed down to the link's icon if there is one

package/src/Link/TextButton.jsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-
 import { useThemeTokensCallback } from '../ThemeProvider'
 import LinkBase from './LinkBase'
+import { variantProp } from '../utils'
 
 /**
  * `TextButton` is a button that looks like a Link. It uses the same theming and variants as
@@ -29,7 +29,13 @@ TextButton.displayName = 'TextButton'
 
 TextButton.propTypes = {
   ...LinkBase.propTypes,
-  onPress: PropTypes.func.isRequired
+  /** onPress function */
+  onPress: PropTypes.func.isRequired,
+  /** Children node that can be added */
+  children: PropTypes.node.isRequired,
+  variant: variantProp.propType,
+  /** Accesibility role for TextButton */
+  accessibilityRole: PropTypes.string
 }
 
 export default TextButton

package/src/Listbox/GroupControl.jsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet, Text } from 'react-native'
+import { useThemeTokens } from '../ThemeProvider'
+import Icon from '../Icon'
+import Spacer from '../Spacer'
+import { useListboxContext } from './ListboxContext'
+
+const styles = StyleSheet.create({
+  controlWrapper: {
+    width: '100%',
+    flex: 1,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    boxSizing: 'border-box'
+  }
+})
+
+const GroupControl = ({ expanded, pressed, hover, focus, label, id }) => {
+  const { selectedId, setSelectedId } = useListboxContext()
+  const tokens = useThemeTokens(
+    'Listbox',
+    {},
+    {},
+    {
+      expanded,
+      pressed,
+      hover,
+      current: selectedId === id && id !== undefined,
+      focus
+    }
+  )
+  const {
+    groupFontName,
+    groupFontWeight,
+    groupFontSize,
+    groupColor,
+    groupBackgroundColor,
+    groupBorderColor,
+    groupBorderWidth,
+    groupBorderRadius,
+    groupPaddingLeft,
+    groupPaddingRight,
+    groupPaddingTop,
+    groupPaddingBottom,
+    itemTextDecoration,
+    itemOutline,
+    groupHeight
+  } = tokens
+  return (
+    <View
+      onPress={() => setSelectedId(id)}
+      style={[
+        styles.controlWrapper,
+        {
+          fontFamily: `${groupFontName}${groupFontWeight}normal`,
+          fontSize: groupFontSize,
+          color: groupColor,
+          textDecoration: itemTextDecoration,
+          backgroundColor: groupBackgroundColor,
+          outline: itemOutline,
+          height: groupHeight,
+          border: `${groupBorderWidth}px solid ${groupBorderColor}`,
+          borderRadius: groupBorderRadius,
+          paddingLeft: groupPaddingLeft - groupBorderWidth,
+          paddingRight: groupPaddingRight - groupBorderWidth,
+          paddingTop: groupPaddingTop - groupBorderWidth,
+          paddingBottom: groupPaddingBottom - groupBorderWidth
+        }
+      ]}
+    >
+      <Text>{label}</Text>
+      <Spacer space={1} direction="row" />
+      <Icon
+        icon={tokens.groupIcon}
+        tokens={{ color: tokens.groupColor }}
+        variant={{ size: 'micro' }}
+      />
+    </View>
+  )
+}
+
+GroupControl.propTypes = {
+  id: PropTypes.string,
+  expanded: PropTypes.bool,
+  pressed: PropTypes.bool,
+  hover: PropTypes.bool,
+  focus: PropTypes.bool,
+  label: PropTypes.string
+}
+
+export default GroupControl

package/src/Listbox/Listbox.jsx

@@ -0,0 +1,165 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet, Platform } from 'react-native'
+import { useThemeTokens } from '../ThemeProvider'
+import { withLinkRouter, getTokensPropType } from '../utils'
+import ExpandCollapse from '../ExpandCollapse'
+import ListboxGroup from './ListboxGroup'
+import ListboxItem from './ListboxItem'
+import { ListboxContext } from './ListboxContext'
+import DropdownOverlay from './ListboxOverlay'
+
+const styles = StyleSheet.create({
+  list: {
+    padding: 0,
+    margin: 0
+  }
+})
+
+const getInitialOpen = (items, selectedId) =>
+  items
+    .filter(
+      (item) =>
+        item.items &&
+        item.items.some((nestedItem) => (nestedItem.id ?? nestedItem.label) === selectedId)
+    )
+    .map((item) => item.id ?? item.label)
+
+const Listbox = ({
+  items = [],
+  firstItemRef = null, // focus will be moved to this one once within the menu
+  parentRef = null, // to return focus to after leaving the last menu item
+  selectedId: defaultSelectedId,
+  LinkRouter,
+  itemRouterProps,
+  onClose,
+  variant,
+  tokens
+}) => {
+  const initialOpen = getInitialOpen(items, defaultSelectedId)
+
+  const [selectedId, setSelectedId] = useState(defaultSelectedId)
+
+  const { minHeight, minWidth } = useThemeTokens('Listbox', variant, tokens)
+
+  // We need to keep track of each item's ref in order to be able to
+  // focus on a specific item via keyboard navigation
+  const itemRefs = useRef([])
+  if (firstItemRef?.current) itemRefs.current[0] = firstItemRef.current
+  const [focusedIndex, setFocusedIndex] = useState(0)
+  const handleKeydown = useCallback(
+    (event) => {
+      const nextItemRef = itemRefs.current[focusedIndex + 1]
+      const prevItemRef = itemRefs.current[focusedIndex - 1]
+      if (event.key === 'ArrowUp' || (event.shiftKey && event.key === 'Tab')) {
+        // Move the focus to the previous item or to the parent one if on the first
+        if (prevItemRef) {
+          event.preventDefault()
+          prevItemRef.focus()
+        } else if (parentRef) parentRef.current?.focus()
+        setFocusedIndex(focusedIndex - 1)
+      } else if ((event.key === 'ArrowDown' || event.key === 'Tab') && nextItemRef) {
+        event.preventDefault()
+        setFocusedIndex(focusedIndex + 1)
+        nextItemRef.focus()
+      } else if (event.key === 'Escape') {
+        // Close the dropdown
+        parentRef?.current?.click()
+        // Return focus to the dropdown control after leaving the last item
+        parentRef?.current?.focus()
+        if (onClose) onClose(event)
+      }
+    },
+    [focusedIndex, onClose, parentRef]
+  )
+
+  // Add listeners for mouse clicks outside and for key presses
+  useEffect(() => {
+    if (Platform.OS === 'web') {
+      window.addEventListener('click', onClose)
+      window.addEventListener('keydown', handleKeydown)
+      window.addEventListener('touchstart', onClose)
+      return () => {
+        window.removeEventListener('click', onClose)
+        window.removeEventListener('keydown', handleKeydown)
+        window.removeEventListener('touchstart', onClose)
+      }
+    }
+    return () => {}
+  }, [onClose, handleKeydown])
+
+  return (
+    <ListboxContext.Provider value={{ selectedId, setSelectedId }}>
+      <ExpandCollapse initialOpen={initialOpen} maxOpen={1}>
+        {(expandProps) => (
+          <View style={[styles.list, { minHeight, minWidth }]} role="listbox">
+            {items.map((item, index) => {
+              const { id, label, items: nestedItems } = item
+              const itemId = id ?? label
+
+              // Give the list of refs.
+              const itemRef = (ref) => {
+                itemRefs.current[index] = ref
+                return ref
+              }
+
+              return nestedItems ? (
+                <ListboxGroup
+                  {...item}
+                  expandProps={expandProps}
+                  LinkRouter={LinkRouter}
+                  itemRouterProps={itemRouterProps}
+                  prevItemRef={itemRefs.current[index - 1] ?? null}
+                  nextItemRef={itemRefs.current[index + 1] ?? null}
+                  ref={index === 0 ? firstItemRef : itemRef}
+                  key={itemId}
+                />
+              ) : (
+                <ListboxItem
+                  {...item}
+                  key={itemId}
+                  id={itemId}
+                  LinkRouter={LinkRouter}
+                  itemRouterProps={itemRouterProps}
+                  prevItemRef={itemRefs.current[index - 1] ?? null}
+                  nextItemRef={itemRefs.current[index + 1] ?? null}
+                  ref={index === 0 ? firstItemRef : itemRef}
+                />
+              )
+            })}
+          </View>
+        )}
+      </ExpandCollapse>
+    </ListboxContext.Provider>
+  )
+}
+
+Listbox.propTypes = {
+  ...withLinkRouter.propTypes,
+  /**
+   * Focus will be moved to the item with this ref once within the menu.
+   */
+  firstItemRef: PropTypes.object,
+  /**
+   * Focus will be returned to the dropdown control with this ref after leaving
+   * the last menu item.
+   */
+  parentRef: PropTypes.object,
+  /**
+   * `Listbox` items
+   */
+  items: PropTypes.array,
+  /**
+   * To select an item by default
+   */
+  selectedId: PropTypes.string,
+  /**
+   * onClose event
+   */
+  onClose: PropTypes.func,
+  tokens: getTokensPropType('Listbox')
+}
+
+Listbox.Overlay = DropdownOverlay
+
+export default Listbox

package/src/Listbox/ListboxGroup.jsx

@@ -0,0 +1,120 @@
+/* eslint-disable react-native-a11y/has-valid-accessibility-role */
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet } from 'react-native'
+import { withLinkRouter } from '../utils'
+import ExpandCollapse from '../ExpandCollapse'
+import ListboxItem from './ListboxItem'
+import { useListboxContext } from './ListboxContext'
+import GroupControl from './GroupControl'
+
+const styles = StyleSheet.create({
+  groupWrapper: {
+    margin: 0,
+    padding: 0,
+    overflow: 'hidden'
+  },
+  list: {
+    margin: 0,
+    padding: 0
+  }
+})
+
+const ListboxGroup = forwardRef(
+  (
+    {
+      id,
+      label,
+      items,
+      LinkRouter,
+      linkRouterProps,
+      expandProps,
+      onLastItemBlur,
+      nextItemRef,
+      prevItemRef
+    },
+    ref
+  ) => {
+    const { selectedId } = useListboxContext()
+
+    // TODO: implement keyboard navigation via refs for grouped items separately here
+    return (
+      <View id="test" style={styles.groupWrapper} accessibilityRole="listitem">
+        <ExpandCollapse.Panel
+          panelId={id ?? label}
+          controlTokens={{
+            icon: null,
+            paddingLeft: 0,
+            paddingRight: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            backgroundColor: 'transparent',
+            borderColor: 'transparent',
+            textLine: 'none',
+            borderWidth: 0
+          }}
+          // TODO refactor
+          // eslint-disable-next-line react/no-unstable-nested-components
+          control={(controlProps) => (
+            <GroupControl id={id ?? label} {...controlProps} label={label} />
+          )}
+          {...expandProps}
+          tokens={{
+            contentPaddingLeft: 0,
+            contentPaddingRight: 0,
+            contentPaddingTop: 0,
+            contentPaddingBottom: 0,
+            borderColor: 'transparent',
+            borderRadius: 0,
+            borderWidth: 0,
+            marginBottom: 0
+          }}
+          controlRef={ref}
+        >
+          <View style={styles.list}>
+            {items.map((item, index) => {
+              return (
+                <ListboxItem
+                  key={item.label}
+                  id={item.id ?? item.label}
+                  {...item}
+                  selected={
+                    (item.id && item.id === selectedId) || (item.label && item.label === selectedId)
+                  }
+                  isChild
+                  LinkRouter={LinkRouter}
+                  linkRouterProps={linkRouterProps}
+                  {...(index === 0 && { prevItemRef })}
+                  {...(index === items.length - 1 && { nextItemRef })}
+                  {...(index === items.length - 1 && { onBlur: onLastItemBlur })}
+                />
+              )
+            })}
+          </View>
+        </ExpandCollapse.Panel>
+      </View>
+    )
+  }
+)
+ListboxGroup.displayName = 'ListboxGroup'
+
+ListboxGroup.propTypes = {
+  ...withLinkRouter.propTypes,
+  label: PropTypes.string,
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      href: PropTypes.string,
+      label: PropTypes.string,
+      current: PropTypes.bool
+    })
+  ),
+  expandProps: PropTypes.object,
+  nextItemRef: PropTypes.object,
+  prevItemRef: PropTypes.object,
+  /**
+   * Use this callback to redirect the focus after it leaves the last item of the group.
+   */
+  onLastItemBlur: PropTypes.func
+}
+
+export default ListboxGroup

package/src/Listbox/ListboxItem.jsx

@@ -0,0 +1,76 @@
+/* eslint-disable react/require-default-props */
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet } from 'react-native'
+import { selectSystemProps, withLinkRouter, htmlAttrs } from '../utils'
+import PressableItem from './PressableItem'
+import { useThemeTokensCallback } from '../ThemeProvider'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const styles = StyleSheet.create({
+  itemContainer: {
+    display: 'flex',
+    margin: 0
+  },
+  childContainer: {
+    paddingLeft: 16
+  }
+})
+
+const ListboxItem = forwardRef(
+  (
+    {
+      href,
+      label,
+      isChild = false,
+      onBlur,
+      nextItemRef,
+      prevItemRef,
+      tokens,
+      variant = {},
+      LinkRouter,
+      linkRouterProps,
+      id,
+      onPress = () => {},
+      ...rest
+    },
+    ref
+  ) => {
+    const selectedProps = selectProps({ href, ...rest })
+
+    const getTokens = useThemeTokensCallback('Listbox', tokens, variant, { isChild })
+    return (
+      <View style={[styles.itemContainer, isChild && styles.childContainer]} role="option">
+        <PressableItem
+          href={href}
+          isChild={isChild}
+          onPress={onPress}
+          onBlur={onBlur}
+          nextItemRef={nextItemRef}
+          prevItemRef={prevItemRef}
+          ref={ref}
+          tokens={getTokens}
+          selectedProps={selectedProps}
+          id={id}
+        >
+          {label}
+        </PressableItem>
+      </View>
+    )
+  }
+)
+ListboxItem.displayName = 'ListboxItem'
+
+ListboxItem.propTypes = {
+  ...selectedSystemPropTypes,
+  ...withLinkRouter.propTypes,
+  href: PropTypes.string,
+  isChild: PropTypes.bool,
+  label: PropTypes.node.isRequired,
+  nextItemRef: PropTypes.object,
+  prevItemRef: PropTypes.object,
+  onPress: PropTypes.func
+}
+
+export default withLinkRouter(ListboxItem)

package/src/Listbox/ListboxOverlay.jsx

@@ -0,0 +1,82 @@
+/* eslint-disable react/require-default-props */
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet, Platform } from 'react-native'
+import { Portal } from '@gorhom/portal'
+import { useThemeTokens } from '../ThemeProvider'
+import Card from '../Card'
+
+const staticStyles = StyleSheet.create({
+  positioner: {
+    flex: 1, // Grow to maxWidth when possible, shrink when not possible
+    position: 'absolute',
+    zIndex: 1000000000000000 // Position on top of all the other overlays, including backdrops and modals
+  },
+  hidden: {
+    // Use opacity not visibility to hide the dropdown during positioning
+    // so on web, children may be focused from the first render
+    opacity: 0
+  }
+})
+
+const paddingVertical = 0
+const paddingHorizontal = 0
+
+const DropdownOverlay = forwardRef(
+  ({ children, isReady = false, overlaidPosition, maxWidth, minWidth, onLayout }, ref) => {
+    const systemTokens = useThemeTokens('Listbox', {}, {})
+
+    return (
+      <View
+        ref={ref}
+        onLayout={onLayout}
+        style={[
+          overlaidPosition,
+          { maxWidth, minWidth },
+          staticStyles.positioner,
+          !isReady && staticStyles.hidden
+        ]}
+      >
+        <Card
+          tokens={{
+            shadow: systemTokens.shadow,
+            paddingBottom: paddingVertical,
+            paddingTop: paddingVertical,
+            paddingLeft: paddingHorizontal,
+            paddingRight: paddingHorizontal
+          }}
+        >
+          {children}
+        </Card>
+      </View>
+    )
+  }
+)
+
+const withPortal = (Overlay) => {
+  // eslint-disable-next-line react/display-name, react/no-multi-comp
+  return (props) => {
+    return (
+      <Portal>
+        <Overlay {...props} />
+      </Portal>
+    )
+  }
+}
+
+DropdownOverlay.displayName = 'DropdownOverlay'
+
+DropdownOverlay.propTypes = {
+  children: PropTypes.node.isRequired,
+  isReady: PropTypes.bool,
+  overlaidPosition: PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number,
+    width: PropTypes.number
+  }),
+  maxWidth: PropTypes.number,
+  minWidth: PropTypes.number,
+  onLayout: PropTypes.func
+}
+
+export default Platform.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay

package/src/Listbox/PressableItem.jsx

@@ -18,7 +18,6 @@ const getItemStyles = ({
   itemPaddingRight,
   itemBackgroundColor,
   itemColor,
-  itemDisplay,
   itemOutline,
   itemTextDecoration,
   itemBorderLeftColor,
@@ -39,7 +38,6 @@ const getItemStyles = ({
   width: '100%',
   backgroundColor: itemBackgroundColor,
   color: itemColor,
-  display: itemDisplay,
   outline: itemOutline,
   textDecoration: itemTextDecoration,
   borderLeft: `${itemBorderLeftWidth}px solid ${itemBorderLeftColor}`,

package/src/Listbox/index.js

@@ -1,2 +1,3 @@
-export * from './ListboxContext'
-export { default as PressableItem } from './PressableItem'
+import Listbox from './Listbox'
+
+export default Listbox

package/src/Pagination/dictionary.js

@@ -8,11 +8,11 @@ export default {
     nextText: 'Next'
   },
   fr: {
-    goToLabel: 'Aller au page n°',
+    goToLabel: 'Aller à la page n°',
     currentLabel: '(page actuelle)',
-    previousLabel: 'Aller au page précédent',
+    previousLabel: 'Aller à la page précédente',
     previousText: 'Précédent',
-    nextLabel: 'Aller au prochain page',
+    nextLabel: 'Aller à la page suivante',
     nextText: 'Suivant'
   }
 }