@telus-uds/components-base 2.0.2 → 2.1.0

package/src/Checkbox/CheckboxGroup.jsx

@@ -134,7 +134,10 @@ const CheckboxGroup = React.forwardRef(
     }
 
     const checkboxes = items.map(
-      ({ label, id, onChange: itemOnChange, ref: itemRef, ...itemRest }, index) => {
+      (
+        { label, id, onChange: itemOnChange, ref: itemRef, inactive: itemInactive, ...itemRest },
+        index
+      ) => {
         const checkboxId = id || `Checkbox[${index}]`
         const handleChange = (newCheckedState, event) => {
           if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event)
@@ -148,7 +151,7 @@ const CheckboxGroup = React.forwardRef(
             id={checkboxId}
             checked={currentValues.includes(checkboxId)}
             onChange={handleChange}
-            inactive={inactive}
+            inactive={itemInactive}
             label={label}
             name={inputGroupName}
             tokens={radioTokens}
@@ -206,7 +209,8 @@ CheckboxGroup.propTypes = {
       label: PropTypes.string,
       id: PropTypes.string,
       onChange: PropTypes.func,
-      ref: ABBPropTypes.ref()
+      ref: ABBPropTypes.ref(),
+      inactive: PropTypes.bool
     })
   ),
   /**

package/src/HorizontalScroll/HorizontalScroll.jsx

@@ -26,6 +26,11 @@ const tokenKeys = [
 export const selectHorizontalScrollTokens = (themeTokens, prefix) =>
   selectTokens(tokenKeys, themeTokens, prefix)
 
+const selectBorderStyles = (borderBottomWidth, borderBottomColor) => ({
+  borderBottomWidth,
+  borderBottomColor
+})
+
 /**
  * Base component that scrolls horizontally and displays left and right buttons if
  * there is content to the left and the right which can be scrolled to.
@@ -120,21 +125,20 @@ const HorizontalScroll = React.forwardRef(
     // Apply a fixed margin gutter that tab highlight effects can overhang without getting trimmed.
     return (
       <View ref={ref} style={staticStyles.container}>
-        <ScrollViewEnd
-          onScrollEnd={handleScrollEnd}
-          ref={scrollRef}
-          horizontal
-          onContentSizeChange={handleContentWidth}
-          onLayout={handleContainerLayout}
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={[
-            staticStyles.scrollContainer,
-            { borderBottomWidth, borderBottomColor }
-          ]}
-          {...selectProps(rest)}
-        >
-          {children}
-        </ScrollViewEnd>
+        <View style={selectBorderStyles(borderBottomWidth, borderBottomColor)}>
+          <ScrollViewEnd
+            onScrollEnd={handleScrollEnd}
+            ref={scrollRef}
+            horizontal
+            onContentSizeChange={handleContentWidth}
+            onLayout={handleContainerLayout}
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={staticStyles.scrollContainer}
+            {...selectProps(rest)}
+          >
+            {children}
+          </ScrollViewEnd>
+        </View>
         {showPreviousButton && (
           <ScrollButton
             icon={previousIcon}

package/src/Icon/Icon.jsx

@@ -69,6 +69,7 @@ const Icon = React.forwardRef(
           ...style,
           backgroundColor: themeTokens.backgroundColor,
           borderRadius: themeTokens.borderRadius,
+          paddingTop: themeTokens.paddingTop,
           ...paddingStyles
         }}
         dataSet={dataSet}

package/src/InputSupports/InputSupports.jsx

@@ -55,6 +55,7 @@ const InputSupports = React.forwardRef(
             title={feedback}
             validation={validation}
             tokens={feedbackTokens}
+            variant={{ icon: feedbackProps.showFeedbackIcon }}
             {...feedbackProps}
           />
         ) : null}

package/src/Link/LinkBase.jsx

@@ -9,7 +9,8 @@ import {
   linkProps,
   selectSystemProps,
   variantProp,
-  viewProps
+  viewProps,
+  contentfulProps
 } from '../utils/props'
 import { resolvePressableTokens } from '../utils/pressability'
 import { withLinkRouter } from '../utils'
@@ -18,7 +19,12 @@ import InlinePressable from './InlinePressable'
 import { applyTextStyles, applyOuterBorder, useTheme } from '../ThemeProvider'
 import { IconText, iconComponentPropTypes } from '../Icon'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  linkProps,
+  viewProps,
+  contentfulProps
+])
 
 const selectOuterBorderStyles = ({
   outerBorderColor,

package/src/Modal/Modal.jsx

@@ -46,7 +46,9 @@ const selectContainerStyles = ({
 
 const selectModalStyles = ({
   backgroundColor,
+  borderColor,
   borderRadius,
+  borderWidth,
   height,
   paddingLeft,
   paddingRight,
@@ -55,7 +57,9 @@ const selectModalStyles = ({
   shadow
 }) => ({
   backgroundColor,
+  borderColor,
   borderRadius,
+  borderWidth,
   height,
   paddingLeft,
   paddingRight,

package/src/Modal/ModalContent.jsx

@@ -51,6 +51,26 @@ const ModalContent = React.forwardRef(
     const hasCancelButton = cancelButtonText !== undefined && onCancel !== undefined
     const hasHeadingSection = Boolean(heading || subHeading)
 
+    const selectHeadingContainerStyles = ({
+      paddingLeft,
+      paddingRight,
+      marginLeft,
+      marginRight,
+      borderColor,
+      headingBorderBottomWidth,
+      headingPaddingRight,
+      headingPaddingTop
+    }) => ({
+      flexDirection: 'column',
+      marginLeft: -marginLeft,
+      marginRight: -marginRight,
+      paddingLeft,
+      paddingTop: headingPaddingTop,
+      paddingRight: paddingRight + headingPaddingRight,
+      borderBottomColor: borderColor,
+      borderBottomWidth: headingBorderBottomWidth
+    })
+
     const selectFooterContainerStyles = ({
       paddingLeft,
       paddingRight,
@@ -75,12 +95,6 @@ const ModalContent = React.forwardRef(
       borderTopColor: borderColor
     })
 
-    const headingStyles = {
-      flexDirection: 'column',
-      paddingTop: 8,
-      paddingRight: themeTokens.headingPaddingRight
-    }
-
     const subheadingStyles = {
       marginTop: themeTokens.subHeadingMarginTop
     }
@@ -88,7 +102,7 @@ const ModalContent = React.forwardRef(
     return (
       <View style={styles.modalContent} ref={ref}>
         {hasHeadingSection && (
-          <View style={headingStyles}>
+          <View style={selectHeadingContainerStyles(themeTokens)}>
             {heading && (
               <Typography
                 variant={{ size: headingLevel }}
@@ -110,6 +124,8 @@ const ModalContent = React.forwardRef(
           <Box
             scroll={{ onContentSizeChange, showsVerticalScrollIndicator: true }}
             onLayout={handleContainerLayout}
+            top={themeTokens.contentPaddingTop}
+            bottom={themeTokens.contentPaddingBottom}
           >
             <Typography>{bodyText}</Typography>
           </Box>

package/src/Progress/Progress.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View } from 'react-native'
+import { View, StyleSheet } from 'react-native'
 
 import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
@@ -57,7 +57,11 @@ const Progress = React.forwardRef(({ children, tokens, variant, ...rest }, ref)
   const themeTokens = useThemeTokens('Progress', tokens, variant)
 
   return (
-    <View ref={ref} style={selectProgressStyles(themeTokens)} {...selectProps(rest)}>
+    <View
+      ref={ref}
+      style={[staticStyles.progressContainer, selectProgressStyles(themeTokens)]}
+      {...selectProps(rest)}
+    >
       {children}
     </View>
   )
@@ -81,3 +85,9 @@ Progress.propTypes = {
 }
 
 export default Progress
+
+const staticStyles = StyleSheet.create({
+  progressContainer: {
+    position: 'relative'
+  }
+})

package/src/Progress/ProgressBar.jsx

@@ -5,19 +5,22 @@ import { Platform, StyleSheet, View } from 'react-native'
 import ProgressBarBackground from './ProgressBarBackground'
 import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
+import { MAX_PERCENT_VALUE, MIN_PERCENT_VALUE } from './constants'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const selectBarStyles = (
   { backgroundColor, borderRadius, outlineWidth, outlineColor, shadow },
-  percentage
+  calculatedPercentage,
+  barPosition
 ) => ({
   backgroundColor,
   borderRadius,
   outlineWidth,
   outlineColor,
   ...applyShadowToken(shadow),
-  width: `${percentage}%`
+  width: `${calculatedPercentage}%`,
+  left: `${barPosition}%`
 })
 
 /**
@@ -56,28 +59,52 @@ const selectBarStyles = (
  *
  */
 const ProgressBar = React.forwardRef(
-  ({ children = null, percentage = 0, tokens, variant, ...rest }, ref) => {
+  (
+    {
+      children = null,
+      percentage = 0,
+      tokens,
+      variant,
+      offset = { items: 0, current: 1 },
+      ...rest
+    },
+    ref
+  ) => {
+    const { items, current } = offset
+    let calculatedPercentage = percentage
+    let barPosition = MIN_PERCENT_VALUE
+    const validItems = items > MIN_PERCENT_VALUE
+    if (validItems) {
+      calculatedPercentage = MAX_PERCENT_VALUE / items
+      barPosition = calculatedPercentage * (current < 1 ? MIN_PERCENT_VALUE : current - 1)
+      if (current > items) {
+        barPosition = calculatedPercentage * (items - 1)
+      }
+    }
+
     const themeTokens = useThemeTokens('ProgressBar', tokens, variant)
-    if (percentage < 0) {
+    if (percentage < MIN_PERCENT_VALUE) {
       throw new Error('ProgressBar: `percentage` must be a positive number')
-    } else if (percentage > 100) {
+    } else if (percentage > MAX_PERCENT_VALUE) {
       throw new Error('ProgressBar: `percentage` cannot exceed 100')
     }
     const selectedProps = selectProps({
       accessibilityRole: 'progressbar',
       accessibilityValue: {
-        min: 0,
-        max: 100,
-        now: percentage,
-        text: `${percentage}%`
+        min: MIN_PERCENT_VALUE,
+        max: MAX_PERCENT_VALUE,
+        now: calculatedPercentage.toFixed(2),
+        text: `${
+          validItems ? (barPosition + calculatedPercentage).toFixed(2) : calculatedPercentage
+        }%`
       },
       ...rest
     })
 
-    return percentage > 0 ? (
+    return percentage > MIN_PERCENT_VALUE || items ? (
       <View
         ref={ref}
-        style={[staticStyles.bar, selectBarStyles(themeTokens, percentage)]}
+        style={[staticStyles.bar, selectBarStyles(themeTokens, calculatedPercentage, barPosition)]}
         {...selectedProps}
       >
         {children ?? <ProgressBarBackground variant={variant} />}
@@ -108,7 +135,15 @@ ProgressBar.propTypes = {
   /**
    * Progress bar variant.
    */
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  /**
+   * Using the offset object, the `items` will determine the total number of items.
+   * The `current` will determine the current position of the progress bar.
+   */
+  offset: PropTypes.shape({
+    items: PropTypes.number,
+    current: PropTypes.number
+  })
 }
 
 export default ProgressBar
@@ -117,7 +152,7 @@ const staticStyles = StyleSheet.create({
   bar: {
     height: '100%',
     overflow: 'hidden',
-    position: 'absolute',
+    position: 'relative',
     ...Platform.select({
       web: {
         outlineStyle: 'solid'

package/src/Progress/ProgressBarBackground.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { ImageBackground, StyleSheet } from 'react-native'
+import { INACTIVE_VARIANT, NEGATIVE_VARIANT } from './constants'
 
 import { variantProp } from '../utils'
 
@@ -8,9 +9,10 @@ const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100
 
 const ProgressBarBackground = React.forwardRef(({ variant }, ref) => {
   let source = null
-  if (variant?.inactive) {
+  // TODO: Remove the `variant?.inactive` & `variant?.negative` to complete the deprecation
+  if (variant?.inactive || variant?.style === INACTIVE_VARIANT) {
     source = inactiveBackground
-  } else if (variant?.negative) {
+  } else if (variant?.negative || variant?.style === NEGATIVE_VARIANT) {
     source = negativeBackground
   } else {
     return null

package/src/Progress/constants.js

@@ -0,0 +1,4 @@
+export const MAX_PERCENT_VALUE = 100
+export const MIN_PERCENT_VALUE = 0
+export const INACTIVE_VARIANT = 'inactive'
+export const NEGATIVE_VARIANT = 'negative'

package/src/Search/Search.jsx

@@ -13,14 +13,19 @@ import {
   textInputHandlerProps,
   textInputProps,
   variantProp,
-  viewProps
+  viewProps,
+  contentfulProps
 } from '../utils'
 import TextInputBase from '../TextInput/TextInputBase'
 import ButtonBase from '../Button/ButtonBase'
 import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
 
-const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([
+  a11yProps,
+  viewProps,
+  contentfulProps
+])
 const [selectInputProps, selectedInputPropTypes] = selectSystemProps([
   textInputHandlerProps,
   textInputProps

package/src/Select/Picker.native.jsx

@@ -79,6 +79,7 @@ const Picker = React.forwardRef(
         items={items}
         value={value}
         onValueChange={handleChange}
+        useNativeAndroidPickerStyle={false}
         style={{
           inputIOS: style,
           inputAndroid: selectAndroidInputStyles(style)

package/src/Select/Select.jsx

@@ -271,15 +271,14 @@ const Select = React.forwardRef(
                 <ValidationIconComponent {...selectValidationIconTokens(themeTokens)} />
               </View>
             )}
-            {IconComponent &&
-              Platform.OS !== 'android' && ( // we can't hide the default caret of a native picker on android
-                <View
-                  pointerEvents="none"
-                  style={[staticStyles.iconContainer, selectIconContainerStyles(themeTokens)]}
-                >
-                  <IconComponent {...selectIconTokens(themeTokens)} />
-                </View>
-              )}
+            {IconComponent && (
+              <View
+                pointerEvents="none"
+                style={[staticStyles.iconContainer, selectIconContainerStyles(themeTokens)]}
+              >
+                <IconComponent {...selectIconTokens(themeTokens)} />
+              </View>
+            )}
           </View>
         )}
       </InputSupports>

package/src/Status/Status.jsx

@@ -57,9 +57,9 @@ const selectContainerStyles = ({
   return styles
 }
 
-const selectIconProps = ({ icon, iconColor }) => ({
+const selectIconProps = ({ icon, iconColor, iconSize, iconPaddingTop }) => ({
   icon,
-  tokens: { color: iconColor },
+  tokens: { color: iconColor, paddingTop: iconPaddingTop, size: iconSize },
   variant: { size: 'small' }
 })
 

package/src/TextInput/TextInputBase.jsx

@@ -295,7 +295,7 @@ const TextInputBase = React.forwardRef(
       textInputButtons?.unshift(
         <IconButton
           accessibilityLabel={
-            !showPassword
+            showPassword
               ? getCopy('hidePasswordAccessibilityLabel')
               : getCopy('showPasswordAccessibilityLabel')
           }
@@ -363,7 +363,7 @@ const TextInputBase = React.forwardRef(
             <IconComponent {...selectIconTokens(themeTokens)} />
           </View>
         )}
-        {buttons?.length > 0 && (
+        {buttons?.length > 0 && !inactive && (
           <View style={[staticStyles.buttonsContainer, selectButtonsContainerStyle(themeTokens)]}>
             <StackView direction="row" space={buttonsGap}>
               {textInputButtons}

package/src/Tooltip/Tooltip.jsx

@@ -31,6 +31,11 @@ const selectTooltipShadowStyles = ({ shadow, borderRadius }) => ({
   ...applyShadowToken(shadow)
 })
 
+const selectToolTipSizeStyles = ({ maxWidth, minWidth }) => ({
+  maxWidth,
+  minWidth
+})
+
 const selectMobileTooltipPositionStyles = ({ top, left, position }) => {
   return { top, left, position }
 }
@@ -206,6 +211,7 @@ const Tooltip = React.forwardRef(
             style={[
               selectTooltipShadowStyles(themeTokens),
               staticStyles.tooltip, // applied separately so that it doesn't cover the arrow
+              selectToolTipSizeStyles,
               selectMobileTooltipPositionStyles({
                 position: strategy,
                 top: y ?? 0,
@@ -250,7 +256,6 @@ const staticStyles = StyleSheet.create({
   },
   tooltip: {
     position: 'absolute',
-    maxWidth: 240,
     top: 0,
     left: 0
   },

package/src/Tooltip/Tooltip.native.jsx

@@ -31,6 +31,12 @@ const selectTooltipShadowStyles = ({ shadow, borderRadius }) => ({
   borderRadius,
   ...applyShadowToken(shadow)
 })
+
+const selectToolTipSizeStyles = ({ maxWidth, minWidth }) => ({
+  maxWidth,
+  minWidth
+})
+
 const selectTooltipPositionStyles = ({ top, left, width }) => {
   return { top, left, width }
 }
@@ -294,6 +300,7 @@ const Tooltip = React.forwardRef(
               style={[
                 staticStyles.tooltip,
                 selectTooltipShadowStyles(themeTokens), // applied separately so that it doesn't cover the arrow
+                selectToolTipSizeStyles(themeTokens),
                 tooltipPosition && selectTooltipPositionStyles(tooltipPosition),
                 (tooltipPosition === null || tooltipPosition?.isNormalized) &&
                   staticStyles.tooltipHidden // visually hide the tooltip until we have a final measurement
@@ -332,7 +339,6 @@ const staticStyles = StyleSheet.create({
   },
   tooltip: {
     position: 'absolute',
-    maxWidth: 240,
     top: 0,
     left: 0
   },

package/src/Validator/Validator.jsx

@@ -191,7 +191,13 @@ const Validator = React.forwardRef(
     }, [])
 
     return (
-      <InputSupports {...supportsProps}>
+      <InputSupports
+        {...supportsProps}
+        feedbackProps={{
+          ...rest?.feedbackProps,
+          showFeedbackIcon: true
+        }}
+      >
         <StackView space={2} direction="row" ref={codeRef}>
           {getCodeComponents()}
         </StackView>

package/src/utils/props/contentfulProps.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+import { Platform } from 'react-native'
+import getPropSelector from './getPropSelector'
+
+const contentfulPropsTypes = {
+  ...Platform.select({
+    web: {
+      'data-contentful-field-id': PropTypes.string,
+      'data-contentful-entry-id': PropTypes.string
+    },
+    default: {}
+  })
+}
+
+export default {
+  /**
+   * Set of contentful properties used for the content preview inspector.
+   */
+  types: contentfulPropsTypes,
+  /**
+   * Filters a props object, returning only contentful props.
+   */
+  select: getPropSelector(contentfulPropsTypes)
+}

package/src/utils/props/index.js

@@ -17,3 +17,4 @@ export { default as textInputProps } from './textInputProps'
 export { default as textProps } from './textProps'
 export { default as variantProp } from './variantProp'
 export { default as viewProps } from './viewProps'
+export { default as contentfulProps } from './contentfulProps'