@telus-uds/components-base 1.51.0 → 1.52.0

package/src/IconButton/IconButton.jsx

@@ -108,9 +108,21 @@ IconButton.propTypes = {
   ...selectedSystemPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('IconButton'),
+  /**
+   * Defines the icon to be rendered
+   */
   icon: PropTypes.elementType.isRequired,
+  /**
+   * URL to navigate to when the `Iconbutton` is pressed
+   */
   href: PropTypes.string,
+  /**
+   * URL options to navigate to when the `Iconbutton` is pressed
+   */
   hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
+  /**
+   * Function to execute when the `Iconbutton` is pressed
+   */
   onPress: PropTypes.func
 }
 

package/src/Link/ChevronLink.jsx

@@ -48,6 +48,9 @@ ChevronLink.displayName = 'ChevronLink'
 ChevronLink.propTypes = {
   ...LinkBase.propTypes,
   tokens: getTokensPropType('ChevronLink', 'Link'),
+  /**
+   * Changes direction of chevron icon
+   */
   direction: PropTypes.oneOf(['left', 'right'])
 }
 

package/src/Listbox/ListboxContext.js

@@ -0,0 +1,6 @@
+import React, { useContext } from 'react'
+
+const ListboxContext = React.createContext({})
+const useListboxContext = () => useContext(ListboxContext)
+
+export { ListboxContext, useListboxContext }

package/src/Listbox/PressableItem.jsx

@@ -0,0 +1,143 @@
+/* eslint-disable react/require-default-props */
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { Pressable, Text } from 'react-native'
+import { selectSystemProps, resolvePressableTokens, htmlAttrs } from '../utils'
+import { useListboxContext } from './ListboxContext'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const getItemStyles = ({
+  groupFontName,
+  groupFontWeight,
+  itemFontSize,
+  itemPaddingTop,
+  itemPaddingBottom,
+  itemPaddingLeft,
+  itemBorderLeftWidth,
+  itemPaddingRight,
+  itemBackgroundColor,
+  itemColor,
+  itemDisplay,
+  itemOutline,
+  itemTextDecoration,
+  itemBorderLeftColor,
+  itemBorderRightWidth,
+  itemBorderRightColor,
+  itemBorderTopWidth,
+  itemBorderTopColor,
+  itemBorderBottomWidth,
+  itemBorderBottomColor,
+  itemBorderRadius,
+  itemHeight
+}) => ({
+  fontFamily: `${groupFontName}${groupFontWeight}normal`,
+  fontSize: itemFontSize,
+  paddingTop: itemPaddingTop - itemBorderTopWidth,
+  paddingBottom: itemPaddingBottom - itemBorderBottomWidth,
+  paddingLeft: itemPaddingLeft - itemBorderLeftWidth,
+  paddingRight: itemPaddingRight - itemBorderRightWidth,
+  width: '100%',
+  backgroundColor: itemBackgroundColor,
+  color: itemColor,
+  display: itemDisplay,
+  outline: itemOutline,
+  textDecoration: itemTextDecoration,
+  borderLeft: `${itemBorderLeftWidth}px solid ${itemBorderLeftColor}`,
+  borderRight: `${itemBorderRightWidth}px solid ${itemBorderRightColor}`,
+  borderTop: `${itemBorderTopWidth}px solid ${itemBorderTopColor}`,
+  borderBottom: `${itemBorderBottomWidth}px solid ${itemBorderBottomColor}`,
+  borderRadius: itemBorderRadius,
+  height: itemHeight,
+  justifyContent: 'center'
+})
+
+const PressableItem = forwardRef(
+  (
+    {
+      children,
+      href,
+      isChild = false,
+      onBlur,
+      onPress,
+      tabIndex = 0,
+      nextItemRef,
+      prevItemRef,
+      tokens,
+      id,
+      ...rest
+    },
+    ref
+  ) => {
+    const { selectedId, setSelectedId } = useListboxContext()
+
+    const selectTextStyles = ({
+      groupFontName,
+      groupFontWeight,
+      itemFontSize,
+      itemColor,
+      lineHeight
+    }) => ({
+      fontFamily: `${groupFontName}${groupFontWeight}normal`,
+      fontSize: itemFontSize,
+      color: itemColor,
+      lineHeight: lineHeight * itemFontSize
+    })
+
+    const resolveButtonTokens = (pressableState) => {
+      const themeTokens = resolvePressableTokens(tokens, pressableState, {
+        isChild,
+        current: id === selectedId && id !== undefined
+      })
+      return themeTokens
+    }
+
+    const handleKeyPress = (event) => {
+      if (['Enter', ' '].includes(event?.key)) {
+        onPress?.(event)
+      } else if (event?.key === 'ArrowDown') {
+        nextItemRef.current.focus()
+      } else if (event?.key === 'ArrowUp' && prevItemRef?.current) {
+        prevItemRef.current.focus()
+      }
+    }
+
+    return (
+      <Pressable
+        isChild={isChild}
+        style={(pressableState) => getItemStyles(resolveButtonTokens(pressableState))}
+        onBlur={onBlur}
+        onClick={onPress}
+        onKeyPress={handleKeyPress}
+        ref={ref}
+        tabIndex={tabIndex}
+        {...(href && { href })}
+        {...(onPress && { onClick: onPress })}
+        {...selectProps(rest)}
+        onPress={() => {
+          setSelectedId(id)
+          onPress()
+        }}
+      >
+        {(pressableState) => {
+          return (
+            <Text style={selectTextStyles(resolveButtonTokens(pressableState))}>{children} </Text>
+          )
+        }}
+      </Pressable>
+    )
+  }
+)
+PressableItem.displayName = 'PressableItem'
+PressableItem.propTypes = {
+  ...selectedSystemPropTypes,
+  href: PropTypes.string,
+  isChild: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  onBlur: PropTypes.func,
+  onPress: PropTypes.func,
+  nextItemRef: PropTypes.object,
+  prevItemRef: PropTypes.object
+}
+
+export default PressableItem

package/src/Listbox/index.js

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

package/src/Modal/Modal.jsx

@@ -16,8 +16,7 @@ import {
   selectSystemProps,
   useCopy,
   variantProp,
-  viewProps,
-  selectTokens
+  viewProps
 } from '../utils'
 import { useViewport } from '../ViewportProvider'
 import IconButton from '../IconButton'
@@ -138,7 +137,6 @@ const Modal = forwardRef(
                       icon={CloseIconComponent}
                       accessibilityRole="button"
                       accessibilityLabel={closeLabel}
-                      tokens={selectTokens('IconButton', themeTokens, 'close')}
                     />
                   )}
                 </View>
@@ -161,9 +159,21 @@ Modal.displayName = 'Modal'
 Modal.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  /**
+   * To define the locale of the copy
+   */
   copy: copyPropTypes,
+  /**
+   * Setting this to `true` will open the `Modal`
+   */
   isOpen: PropTypes.bool,
+  /**
+   * This function is triggered when the `Modal` is closed
+   */
   onClose: PropTypes.func,
+  /**
+   * `max-width` is applied to the `Modal` container
+   */
   maxWidth: PropTypes.bool,
   tokens: getTokensPropType('Modal'),
   variant: variantProp.propType,

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 
+import { View, StyleSheet } from 'react-native'
 import { useThemeTokens, useThemeTokensCallback, applyTextStyles } from '../ThemeProvider'
 import {
   containUniqueFields,
@@ -104,7 +105,6 @@ const MultiSelectFilter = ({
   if (!containUniqueFields(items, uniqueFields)) {
     throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`)
   }
-
   // Pass an object of relevant component state as first argument for any passed-in press handlers
   const pressHandlers = getPressHandlersWithArgs(rest, [{ id, label, currentValues }])
 
@@ -239,9 +239,11 @@ const MultiSelectFilter = ({
           onLayout={onTargetLayout}
         >
           <Row>
-            <Typography tokens={{ ...headerStyles, lineHeight: headerLineHeight }}>
-              {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
-            </Typography>
+            <View style={styles.textContainerStyle}>
+              <Typography tokens={{ ...headerStyles, lineHeight: headerLineHeight }}>
+                {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
+              </Typography>
+            </View>
           </Row>
           {subtitle && (
             <>
@@ -301,6 +303,10 @@ const MultiSelectFilter = ({
 
 MultiSelectFilter.displayName = 'MultiSelectFilter'
 
+const styles = StyleSheet.create({
+  textContainerStyle: { marginRight: 52 }
+})
+
 MultiSelectFilter.propTypes = {
   /**
    * The text displayed to the user in a ButtonDropdown.

package/src/Pagination/PageButton.jsx

@@ -60,8 +60,17 @@ PageButton.displayName = 'PageButton'
 
 PageButton.propTypes = {
   ...linkProps.types,
+  /**
+   * To set custom label for the button
+   */
   label: PropTypes.string,
+  /**
+   * To set `PageButton` to active state
+   */
   isActive: PropTypes.bool,
+  /**
+   * To change the language for labels
+   */
   copy: copyPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('PaginationPageButton')

package/src/Pagination/Pagination.jsx

@@ -207,10 +207,19 @@ Pagination.propTypes = {
   ...selectedSystemPropTypes,
   ...withLinkRouter.propTypes,
   children: componentPropType('PageButton'),
+  /**
+   * To change the language for labels
+   */
   copy: copyPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('Pagination'),
+  /**
+   * When passed as `{{ compact: true }}`, `Pagination` does not render labels along side buttons
+   */
   sideButtonVariant: variantProp.propType,
+  /**
+   * Custom tokens for `PaginationSideButton`
+   */
   sideButtonTokens: getTokensPropType('PaginationSideButton')
 }
 

package/src/QuickLinks/QuickLinks.jsx

@@ -51,8 +51,17 @@ QuickLinks.displayName = 'QuickLinks'
 
 QuickLinks.propTypes = {
   tokens: getTokensPropType('QuickLinks'),
+  /**
+   * Custom tokens override for `Card`
+   */
   cardTokens: getTokensPropType('Card'),
+  /**
+   * Custom tokens override for `QuickLinksList`
+   */
   listTokens: getTokensPropType('QuickLinksList'),
+  /**
+   * The HTML tag to render the list as
+   */
   tag: PropTypes.string,
   variant: variantProp.propType,
   children: PropTypes.node

package/src/Responsive/Responsive.jsx

@@ -25,7 +25,13 @@ const Responsive = ({ min = 'xs', max, children }) => {
 }
 
 Responsive.propTypes = {
+  /**
+   * To hide children of `Responsive` if the current viewport is smaller than `min`
+   */
   min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * To hide children of `Responsive` if the current viewport is larger than `max`
+   */
   max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
   children: PropTypes.node.isRequired
 }

package/src/Select/Group.jsx

@@ -11,5 +11,8 @@ export default Group
 
 Group.propTypes = {
   children: componentPropType('Item'),
+  /**
+   * The label for the group.
+   */
   label: PropTypes.string.isRequired
 }

package/src/Select/Group.native.jsx

@@ -10,5 +10,8 @@ export default Group
 
 Group.propTypes = {
   children: componentPropType('Item'),
+  /**
+   * The label for the group.
+   */
   label: PropTypes.string.isRequired
 }

package/src/Select/Item.jsx

@@ -7,5 +7,8 @@ export default Item
 
 Item.propTypes = {
   children: PropTypes.string.isRequired,
+  /**
+   * The value of the option
+   */
   value: PropTypes.string.isRequired
 }

package/src/SideNav/ItemsGroup.jsx

@@ -109,6 +109,9 @@ ItemsGroup.propTypes = {
   isActive: PropTypes.bool,
   variant: variantProp.propType,
   tokens: getTokensPropType('SideNavItemsGroup'),
+  /**
+   * Custom tokens for `SideNav.Item`
+   */
   itemTokens: getTokensPropType('SideNavItem')
 }
 

package/src/SideNav/SideNav.jsx

@@ -120,7 +120,13 @@ SideNav.propTypes = {
   accordion: PropTypes.bool,
   variant: variantProp.propType,
   tokens: getTokensPropType('SideNav'),
+  /**
+   * Custom tokens for `SideNav.Item`
+   */
   itemTokens: getTokensPropType('SideNavItem'),
+  /**
+   * Custom tokens for `SideNavItemsGroup`
+   */
   groupTokens: getTokensPropType('SideNavItemsGroup')
 }
 

package/src/StepTracker/StepTracker.jsx

@@ -173,12 +173,24 @@ const dictionaryContentShape = PropTypes.shape({
 
 StepTracker.propTypes = {
   ...selectedSystemPropTypes,
+  /**
+   * The current step, 0-based number
+   */
   current: PropTypes.number,
+  /**
+   * The language to use for the labels
+   */
   copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
+  /**
+   * Custom dictionary containing the labels to use for the steps
+   */
   dictionary: PropTypes.shape({
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   }),
+  /**
+   * An array of strings defining the step titles
+   */
   steps: PropTypes.arrayOf(PropTypes.string),
   tokens: getTokensPropType('StepTracker'),
   variant: variantProp.propType

package/src/Tabs/Tabs.jsx

@@ -154,6 +154,9 @@ Tabs.displayName = 'Tabs'
 Tabs.propTypes = {
   ...selectedSystemPropTypes,
   ...withLinkRouter.PropTypes,
+  /**
+   * Array of `TabsItem`s
+   */
   items: PropTypes.arrayOf(
     PropTypes.shape({
       ...selectedItemPropTypes,
@@ -164,11 +167,23 @@ Tabs.propTypes = {
       ref: ABBPropTypes.ref()
     })
   ),
+  /**
+   * `id` property of the current tab in the items array
+   */
   value: PropTypes.string,
   initialValue: PropTypes.string,
+  /**
+   * Callback for when the selected tab changes
+   */
   onChange: PropTypes.func,
   tokens: getTokensPropType('Tabs'),
+  /**
+   * Custom tokens for `TabsItem`
+   */
   itemTokens: getTokensPropType('TabsItem'),
+  /**
+   * Custom tokens for `HorizontalScrollButton`
+   */
   scrollButtonTokens: getTokensPropType('HorizontalScrollButton'),
   variant: variantProp.propType
 }

package/src/Timeline/Timeline.jsx

@@ -23,10 +23,10 @@ const selectDotStyles = ({ dotWidth, timelineColor, dotBorderWidth, dotColor })
   borderColor: timelineColor
 })
 
-const selectConnectorStyles = ({ timelineColor, connectorHeight, connectorWidth }) => ({
+const selectConnectorStyles = ({ timelineConnectorColor, connectorHeight, connectorWidth }) => ({
   width: connectorWidth,
   height: connectorHeight,
-  backgroundColor: timelineColor
+  backgroundColor: timelineConnectorColor
 })
 
 const selectTimelineContainerStyle = ({ timelineContainerDirection }) => ({

package/src/index.js

@@ -4,6 +4,7 @@ export { default as Box } from './Box'
 export * from './Button'
 export { default as Card, PressableCardBase } from './Card'
 export * from './Carousel'
+export * from './Listbox'
 export { default as Checkbox } from './Checkbox'
 export * from './Checkbox'
 export { default as Divider } from './Divider'

package/src/utils/htmlAttrs.js

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types'
+
+const htmlAttrTypes = {
+  dataSet: PropTypes.object,
+  id: PropTypes.string,
+  loading: PropTypes.oneOf(['eager', 'lazy']),
+  // @todo figure out if we need to enum all the possible roles or maybe use
+  // an npm package
+  role: PropTypes.string,
+  src: PropTypes.string,
+  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  testID: PropTypes.string,
+  title: PropTypes.string
+}
+
+export default {
+  types: htmlAttrTypes,
+  select: (props) =>
+    Object.entries(props).reduce(
+      (items, [key, value]) =>
+        Object.keys(htmlAttrTypes).includes(key) || /^(data|aria)-/.test(key)
+          ? {
+              ...items,
+              [key]: value
+            }
+          : items,
+      {}
+    )
+}

package/src/utils/index.js

@@ -19,3 +19,4 @@ export { default as withLinkRouter } from './withLinkRouter'
 export * from './ssr'
 export { default as containUniqueFields } from './containUniqueFields'
 export { default as BaseView } from './BaseView'
+export { default as htmlAttrs } from './htmlAttrs'