@telus-uds/components-base 1.50.0 → 1.51.1

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -1,7 +1,7 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
+import { useThemeTokens, useThemeTokensCallback, applyTextStyles } from '../ThemeProvider'
 import {
   containUniqueFields,
   getTokensPropType,
@@ -14,7 +14,7 @@ import {
   variantProp
 } from '../utils'
 import dictionary from './dictionary'
-
+import { useViewport } from '../ViewportProvider'
 import Box from '../Box'
 import { Button, ButtonDropdown } from '../Button'
 import { CheckboxGroup } from '../Checkbox'
@@ -25,6 +25,7 @@ import StackView from '../StackView'
 import Typography from '../Typography'
 import { TextButton } from '../Link'
 import ModalOverlay from './ModalOverlay'
+import Modal from '../Modal'
 
 const { Col, Row } = FlexGrid
 
@@ -47,6 +48,7 @@ const MultiSelectFilter = ({
   tokens,
   items = [],
   values,
+  maxHeight = false,
   initialValues,
   maxValues,
   onChange,
@@ -56,6 +58,7 @@ const MultiSelectFilter = ({
   rowLimit = 12,
   ...rest
 }) => {
+  const viewport = useViewport()
   const { currentValues, setValues } = useMultipleInputValues({
     initialValues,
     values,
@@ -63,17 +66,39 @@ const MultiSelectFilter = ({
     onChange,
     readOnly
   })
+  const [isOpen, setIsOpen] = useState(false)
+  const [checkedIds, setCheckedIds] = useState(currentValues ?? [])
+  const [maxWidth, setMaxWidth] = useState(false)
 
   const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant)
   const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant)
   const getButtonTokens = (buttonState) => selectTokens('Button', getItemTokens(buttonState))
   const getCopy = useCopy({ dictionary, copy })
+  const colSizeNotMobile = items.length > rowLimit ? 2 : 1
+  const colSize = viewport !== 'xs' ? colSizeNotMobile : 1
+  const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit
+  const isSelected = currentValues.length > 0
+  const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length
 
-  const [isOpen, setIsOpen] = useState(false)
-  const [checkedIds, setCheckedIds] = useState(currentValues ?? [])
+  useEffect(() => {
+    if (colSize === 1) return setMaxWidth(false)
+    return colSize === 2 && setMaxWidth(true)
+  }, [colSize])
 
-  const colSize = items.length > rowLimit ? 2 : 1
-  const isSelected = currentValues.length > 0
+  const {
+    headerFontColor,
+    headerFontSize,
+    buttonDirection,
+    headerFontWeight,
+    headerLineHeight,
+    subHeaderFontWeight,
+    subHeaderFontSize,
+    maxHeightSize,
+    maxWidthSize,
+    subHeaderLineHeight,
+    minHeight,
+    minWidth
+  } = useThemeTokens('MultiSelectFilter', tokens, { ...variant, maxHeight, maxWidth }, { viewport })
 
   const uniqueFields = ['id', 'label']
   if (!containUniqueFields(items, uniqueFields)) {
@@ -93,14 +118,31 @@ const MultiSelectFilter = ({
     setIsOpen(false)
   }
 
+  const onClear = () => {
+    setCheckedIds(() => [])
+    onApply([])
+  }
+
   const { align, offsets } = useResponsiveProp({
-    xs: { align: { top: 'top', left: 'left', bottom: 'bottom', right: 'right' } },
+    xs: { align: { top: 'top', left: 'left' } },
     sm: {
       align: { top: 'bottom', left: 'left' },
       offsets: { vertical: 4 }
     }
   })
 
+  const headerStyles = applyTextStyles({
+    fontSize: headerFontSize,
+    fontWeight: headerFontWeight,
+    fontColor: headerFontColor
+  })
+
+  const subeHeaderStyles = applyTextStyles({
+    fontSize: subHeaderFontSize,
+    fontWeight: subHeaderFontWeight,
+    fontColor: selectSubTitleTokens(themeTokens)
+  })
+
   const { overlaidPosition, onTargetLayout, isReady, sourceRef } = useOverlaidPosition({
     isShown: isOpen,
     offsets,
@@ -120,18 +162,84 @@ const MultiSelectFilter = ({
         tokens={getButtonTokens}
         inactive={inactive}
       />
-      {isOpen && (
+      {isOpen && viewport === 'xs' && (
+        <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+          <Row>
+            <Typography tokens={{ ...headerStyles, lineHeight: headerLineHeight }}>
+              {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
+            </Typography>
+          </Row>
+          {subtitle && (
+            <>
+              <Spacer space={5} />
+              <Row>
+                <Typography tokens={{ ...subeHeaderStyles, lineHeight: subHeaderLineHeight }}>
+                  {subtitle}
+                </Typography>
+              </Row>
+            </>
+          )}
+          <Spacer space={4} />
+          <Box scroll={true}>
+            <Row distribute="between">
+              {[...Array(colSize).keys()].map((i) => (
+                <Col xs={12 / colSize} key={i}>
+                  <CheckboxGroup
+                    items={items.slice(i * rowLength, (i + 1) * rowLength)}
+                    checkedIds={checkedIds}
+                    onChange={(e) => setCheckedIds(e, i)}
+                  />
+                  <Spacer size={4} />
+                </Col>
+              ))}
+            </Row>
+          </Box>
+          <Divider variant={selectDividerToknes({ ...themeTokens, width: 'full' })} space={4} />
+          <Row horizontalAlign={buttonDirection === 'column' ? 'center' : 'start'}>
+            <StackView
+              direction={buttonDirection}
+              space={3}
+              tokens={{
+                alignItems: 'center',
+                ...(viewport === 'xs' && { flexGrow: 1 })
+              }}
+            >
+              <Button
+                onPress={() => onApply(checkedIds)}
+                variant={{
+                  size: 'small',
+                  priority: 'high',
+                  ...(viewport === 'xs' && { width: 'full' })
+                }}
+              >
+                {getCopy('applyButtonLabel')}
+              </Button>
+              <Box>
+                <TextButton onPress={() => onClear()}>{getCopy('clearButtonLabel')}</TextButton>
+              </Box>
+            </StackView>
+          </Row>
+        </Modal>
+      )}
+      {isOpen && viewport !== 'xs' && (
         <ModalOverlay
           overlaidPosition={overlaidPosition}
-          variant={{ width: colSize > 1 ? 'size576' : 's' }}
           onClose={() => setIsOpen(false)}
-          tokens={tokens}
+          maxHeight={maxHeight}
+          maxHeightSize={maxHeightSize}
+          maxWidthSize={maxWidthSize}
+          minHeight={minHeight}
+          minWidth={minWidth}
+          tokens={{
+            ...tokens,
+            maxWidth
+          }}
           copy={copy}
           isReady={isReady}
           onLayout={onTargetLayout}
         >
           <Row>
-            <Typography variant={{ size: 'h4' }}>
+            <Typography tokens={{ ...headerStyles, lineHeight: headerLineHeight }}>
               {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
             </Typography>
           </Row>
@@ -139,7 +247,7 @@ const MultiSelectFilter = ({
             <>
               <Spacer space={5} />
               <Row>
-                <Typography variant={{ size: 'h5' }} tokens={selectSubTitleTokens(themeTokens)}>
+                <Typography tokens={{ ...subeHeaderStyles, lineHeight: subHeaderLineHeight }}>
                   {subtitle}
                 </Typography>
               </Row>
@@ -151,7 +259,7 @@ const MultiSelectFilter = ({
               {[...Array(colSize).keys()].map((i) => (
                 <Col xs={12 / colSize} key={i}>
                   <CheckboxGroup
-                    items={items.slice(i * rowLimit, (i + 1) * rowLimit)}
+                    items={items.slice(i * rowLength, (i + 1) * rowLength)}
                     checkedIds={checkedIds}
                     onChange={(e) => setCheckedIds(e, i)}
                   />
@@ -161,18 +269,27 @@ const MultiSelectFilter = ({
             </Row>
           </Box>
           <Divider variant={selectDividerToknes({ ...themeTokens, width: 'full' })} space={4} />
-          <Row>
-            <StackView direction="row" space={3} tokens={{ alignItems: 'center' }}>
+          <Row horizontalAlign={buttonDirection === 'column' ? 'center' : 'start'}>
+            <StackView
+              direction={buttonDirection}
+              space={3}
+              tokens={{
+                alignItems: 'center',
+                ...(viewport === 'xs' && { flexGrow: 1 })
+              }}
+            >
               <Button
                 onPress={() => onApply(checkedIds)}
-                variant={{ size: 'small', priority: 'high' }}
+                variant={{
+                  size: 'small',
+                  priority: 'high',
+                  ...(viewport === 'xs' && { width: 'full' })
+                }}
               >
                 {getCopy('applyButtonLabel')}
               </Button>
               <Box>
-                <TextButton onPress={() => setCheckedIds([])}>
-                  {getCopy('clearButtonLabel')}
-                </TextButton>
+                <TextButton onPress={() => onClear()}>{getCopy('clearButtonLabel')}</TextButton>
               </Box>
             </StackView>
           </Row>
@@ -239,10 +356,15 @@ MultiSelectFilter.propTypes = {
    * If provided, sets a maximum number of items a user may select at once.
    */
   maxValues: PropTypes.number,
+  /**
+   * If provided sets maxHeight to be active
+   */
+  maxHeight: PropTypes.bool,
   /**
    * If provided, this function is called when the current selection is changed
    * and is passed an array of the `id`s of all currently selected `items`.
    */
+
   onChange: PropTypes.func,
   /**
    * Select English or French copy for the accessible label.

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/QuickLinksFeature/QuickLinksFeatureItem.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
 import { Image, Platform, Text, View } from 'react-native'
@@ -11,7 +11,7 @@ import {
   selectSystemProps
 } from '../utils'
 import { useViewport } from '../ViewportProvider'
-import { useThemeTokensCallback } from '../ThemeProvider'
+import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
 import { Link } from '../Link'
 import { StackWrap } from '../StackView'
 
@@ -29,6 +29,7 @@ const selectImageStyle = (imageDimension) => ({
 
 const selectContainerStyle = ({ contentMaxDimension, textAlign }) => ({
   textAlign,
+  outline: 'red',
   width: contentMaxDimension,
   overflow: 'hidden'
 })
@@ -40,6 +41,8 @@ const selectImageContainerStyle = (contentMaxDimension) => ({
   alignItems: 'center'
 })
 
+const selectLinkToken = ({ outerBorderColor }) => ({ outerBorderColor })
+
 /**
  * Component export along with QuickLinksFeature to be used as children
  *
@@ -49,42 +52,46 @@ const QuickLinksFeatureItem = forwardRef(
   ({ tokens, variant, children, imageAccessibilityLabel, imageSource, ...rest }, ref) => {
     const viewport = useViewport()
     const getTokens = useThemeTokensCallback('QuickLinksFeatureItem', tokens, variant)
-    const [hover, setHover] = useState(false)
-    const {
-      contentDirection,
-      contentSpace,
-      contentAlignItems,
-      contentMaxDimension,
-      imageDimension,
-      textAlign
-    } = getTokens({ viewport, hover })
 
     return (
-      <Link
-        ref={ref}
-        tokens={(state) => {
-          setHover(state.hover)
-          return getTokens(state)
-        }}
-        {...selectProps(rest)}
-      >
-        <View style={selectContainerStyle({ contentMaxDimension, textAlign })}>
-          <StackWrap
-            direction={contentDirection}
-            space={contentSpace}
-            tokens={{ alignItems: contentAlignItems }}
-          >
-            <View style={selectImageContainerStyle(contentMaxDimension)}>
-              <Image
-                accessibilityIgnoresInvertColors
-                imageAccessibilityLabel={imageAccessibilityLabel}
-                source={imageSource}
-                style={selectImageStyle(imageDimension)}
-              />
+      <Link ref={ref} {...selectProps(rest)} tokens={(state) => selectLinkToken(getTokens(state))}>
+        {({ hovered: hover, pressed, focused: focus }) => {
+          const {
+            contentDirection,
+            contentSpace,
+            contentAlignItems,
+            contentMaxDimension,
+            imageDimension,
+            textLine,
+            gap,
+            ...themeTokens
+          } = getTokens({ viewport, hover, pressed, focus })
+
+          const textStyle = {
+            ...applyTextStyles(themeTokens),
+            textDecorationLine: textLine
+          }
+          return (
+            <View style={selectContainerStyle({ ...themeTokens, contentMaxDimension })}>
+              <StackWrap
+                direction={contentDirection}
+                space={contentSpace}
+                gap={gap}
+                tokens={{ alignItems: contentAlignItems }}
+              >
+                <View style={selectImageContainerStyle(contentMaxDimension)}>
+                  <Image
+                    accessibilityIgnoresInvertColors
+                    imageAccessibilityLabel={imageAccessibilityLabel}
+                    source={imageSource}
+                    style={selectImageStyle(imageDimension)}
+                  />
+                </View>
+                <Text style={textStyle}>{children}</Text>
+              </StackWrap>
             </View>
-            <Text>{children}</Text>
-          </StackWrap>
-        </View>
+          )
+        }}
       </Link>
     )
   }

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/Step.jsx

@@ -59,17 +59,18 @@ const selectKnobStyles = (
   height: knobSize,
   width: knobSize,
   ...(isCompleted && {
-    backgroundColor: knobCompletedBackgroundColor,
-    borderColor: knobCompletedBorderColor,
-    paddingLeft: knobCompletedPaddingLeft,
-    paddingTop: knobCompletedPaddingTop
-  }),
-  ...(isCurrent && {
     backgroundColor: knobCurrentBackgroundColor,
     borderColor: knobCurrentBorderColor,
     borderWidth: knobCurrentBorderWidth,
     paddingLeft: knobCurrentPaddingLeft,
     paddingTop: knobCurrentPaddingTop
+  }),
+  ...(isCurrent && {
+    backgroundColor: knobCompletedBackgroundColor,
+    borderColor: knobCompletedBorderColor,
+    borderWidth: knobCurrentBorderWidth,
+    paddingLeft: knobCompletedPaddingLeft,
+    paddingTop: knobCompletedPaddingTop
   })
 })
 const selectLabelContainerStyles = ({
@@ -85,6 +86,26 @@ const selectLabelContainerStyles = ({
   flexDirection: labelDirection,
   gap: labelGap
 })
+const selectStepLabelStyles = (
+  {
+    stepLabelColor,
+    labelCurrentColor,
+    stepLabelFontWeight,
+    stepLabelFontSize,
+    stepLabelFontName,
+    stepLabelLineHeight
+  },
+  themeOptions,
+  isCurrent
+) =>
+  applyTextStyles({
+    color: isCurrent ? labelCurrentColor : stepLabelColor,
+    fontSize: stepLabelFontSize,
+    lineHeight: stepLabelLineHeight,
+    fontWeight: stepLabelFontWeight,
+    fontName: stepLabelFontName,
+    themeOptions
+  })
 const selectLabelStyles = (
   {
     labelColor,
@@ -121,7 +142,8 @@ const getStepTestID = (isCompleted, isCurrent) => {
  * A single step of a StepTracker.
  */
 const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, ...rest }) => {
-  const { completedIcon, showStepLabel, showStepName, ...themeTokens } = tokens
+  const { completedIcon, showStepLabel, showStepName, textStepTrackerLabel, ...themeTokens } =
+    tokens
   const isFirst = stepIndex === 0
   const isLast = stepIndex === stepCount - 1
   const isCompleted = status > stepIndex
@@ -150,10 +172,12 @@ const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, .
           style={[staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)]}
           testID={getStepTestID(isCompleted, isCurrent)}
         >
-          {isCompleted && completedIcon && (
+          {((isCompleted && completedIcon) || (isCurrent && !completedIcon)) && (
+            <View style={selectCurrentInnerStyles(themeTokens)} />
+          )}
+          {isCurrent && completedIcon && (
             <Icon icon={completedIcon} tokens={selectCompletedIconTokens(themeTokens)} />
           )}
-          {isCurrent && <View style={selectCurrentInnerStyles(themeTokens)} />}
         </View>
         <View
           style={[
@@ -168,7 +192,7 @@ const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, .
             <Text
               style={[
                 staticStyles.centeredText,
-                selectLabelStyles(tokens, themeOptions, isCurrent)
+                selectStepLabelStyles(tokens, themeOptions, isCurrent)
               ]}
             >
               {name}

package/src/StepTracker/StepTracker.jsx

@@ -92,9 +92,13 @@ const StepTracker = forwardRef(
         viewport
       }
     )
+    const { textStepTrackerLabel } = themeTokens
     const getCopy = useCopy({ dictionary, copy })
     const stepTrackerLabel = showStepTrackerLabel
-      ? getCopy('stepTrackerLabel')
+      ? (typeof copy === 'string'
+          ? getCopy(textStepTrackerLabel ?? 1).stepTrackerLabel
+          : getCopy('stepTrackerLabel')
+        )
           .replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length)
           .replace('%{stepCount}', steps.length)
           .replace(
@@ -103,7 +107,12 @@ const StepTracker = forwardRef(
           )
       : ''
     const getStepLabel = (index) =>
-      themeTokens.showStepLabel ? getCopy('stepLabel').replace('%{stepNumber}', index + 1) : ''
+      themeTokens.showStepLabel
+        ? (typeof copy === 'string'
+            ? getCopy(textStepTrackerLabel ?? 1).stepLabel
+            : getCopy('stepLabel')
+          ).replace('%{stepNumber}', index + 1)
+        : ''
     const { themeOptions } = useTheme()
     if (!steps.length) return null
     const selectedProps = selectProps({
@@ -164,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