@telus-uds/components-base 1.3.1 → 1.6.0

package/src/RadioCard/RadioCardGroup.jsx

@@ -5,6 +5,8 @@ import { useViewport } from '../ViewportProvider'
 import { useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
+  containUniqueFields,
+  focusHandlerProps,
   getTokensPropType,
   selectSystemProps,
   useInputValue,
@@ -16,6 +18,11 @@ import RadioCard from './RadioCard'
 import Fieldset from '../Fieldset'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  viewProps
+])
 
 /**
  * A group of Cards that behave as a radio button group. Use when users select a single choice from mutually
@@ -105,6 +112,12 @@ const RadioCardGroup = forwardRef(
     // Needs 'radiogroup' role on direct parent of radios for MacOS Voiceover's numbering to work,
     // and also needs 'radiogroup' role on fieldset for correct description on focusing the set.
     // TODO: test this on more web screen readers.
+
+    const uniqueFields = ['id']
+    if (!containUniqueFields(items, uniqueFields)) {
+      throw new Error(`RadioCardGroup items must have unique ${uniqueFields.join(', ')}`)
+    }
+
     return (
       <Fieldset
         ref={ref}
@@ -121,12 +134,13 @@ const RadioCardGroup = forwardRef(
       >
         {(props) => (
           <StackContainer space={space} accessibilityRole="radiogroup">
-            {items.map(({ title, content, id, onChange: itemOnChange }, index) => {
+            {items.map(({ title, content, id, onChange: itemOnChange, ...itemRest }, index) => {
               const cardId = id || `RadioCard[${index}]`
               const handleChange = (newCheckedState, event) => {
                 if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event)
                 if (newCheckedState) setValue(cardId, event)
               }
+
               return (
                 <RadioCard
                   key={cardId}
@@ -139,6 +153,7 @@ const RadioCardGroup = forwardRef(
                   tokens={radioCardTokens}
                   variant={variant}
                   readOnly={readOnly}
+                  {...selectItemProps(itemRest)}
                   {...props}
                 >
                   {content}
@@ -172,6 +187,7 @@ RadioCardGroup.propTypes = {
    */
   items: PropTypes.arrayOf(
     PropTypes.exact({
+      ...selectedItemPropTypes,
       title: PropTypes.string,
       content: PropTypes.node,
       id: PropTypes.string,

package/src/Select/Select.jsx

@@ -194,7 +194,7 @@ const Select = forwardRef(
     const handleMouseOver = () => setIsHovered(true)
     const handleMouseOut = () => setIsHovered(false)
 
-    const { props: supportsProps, ...selectedProps } = selectProps(rest)
+    const { supportsProps, ...selectedProps } = selectProps(rest)
 
     const themeTokens = useThemeTokens('Select', tokens, variant, {
       focus: isFocused,
@@ -236,7 +236,7 @@ const Select = forwardRef(
                   selectValidationIconContainerStyles(themeTokens)
                 ]}
               >
-                <ValidationIconComponent tokens={selectValidationIconTokens(themeTokens)} />
+                <ValidationIconComponent {...selectValidationIconTokens(themeTokens)} />
               </View>
             )}
             {IconComponent &&

package/src/Tags/Tags.jsx

@@ -10,17 +10,25 @@ import { useViewport } from '../ViewportProvider'
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
+  containUniqueFields,
+  focusHandlerProps,
   getTokensPropType,
   pressProps,
   selectSystemProps,
   selectTokens,
+  useMultipleInputValues,
   variantProp,
   viewProps
-} from '../utils/props'
-import { useMultipleInputValues } from '../utils/input'
+} from '../utils'
 import { getPressHandlersWithArgs } from '../utils/pressability'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  pressProps,
+  viewProps
+])
 
 const selectIconTextTokens = ({
   icon,
@@ -95,6 +103,11 @@ const Tags = forwardRef(
     })
     const itemA11yRole = 'checkbox'
 
+    const uniqueFields = ['id', 'label']
+    if (!containUniqueFields(items, uniqueFields)) {
+      throw new Error(`Tags items must have unique ${uniqueFields.join(', ')}`)
+    }
+
     return (
       <StackWrap
         ref={ref}
@@ -103,22 +116,22 @@ const Tags = forwardRef(
         direction={direction}
         tokens={stackTokens}
       >
-        {items.map(({ label, id = label, accessibilityLabel, ref: itemRef }, index) => {
+        {items.map(({ label, id = label, ref: itemRef, ...itemRest }, index) => {
           const isSelected = currentValues.includes(id)
 
           // Pass an object of relevant component state as first argument for any passed-in press handlers
           const pressHandlers = getPressHandlersWithArgs(rest, [{ id, label, currentValues }])
 
           const handlePress = (event) => {
-            if (pressHandlers.onPress) pressHandlers.onPress()
+            if (pressHandlers.onPress) pressHandlers.onPress(event)
             toggleOneValue(id, event)
           }
 
-          const itemA11y = {
+          const itemProps = {
             accessibilityState: { checked: isSelected },
             accessibilityRole: itemA11yRole,
-            accessibilityLabel,
-            ...a11yProps.getPositionInSet(items.length, index)
+            ...a11yProps.getPositionInSet(items.length, index),
+            ...selectItemProps(itemRest)
           }
 
           return (
@@ -130,7 +143,7 @@ const Tags = forwardRef(
               tokens={getButtonTokens}
               selected={isSelected}
               inactive={inactive}
-              {...itemA11y}
+              {...itemProps}
             >
               {({ textStyles, ...buttonState }) => {
                 // TODO: once Icon/IconButton designs are stable, see if this sort of styling around
@@ -183,6 +196,7 @@ Tags.propTypes = {
    */
   items: PropTypes.arrayOf(
     PropTypes.shape({
+      ...selectedItemPropTypes,
       /**
        * The text displayed to the user in the button, describing this option,
        * passed to the button as its child.

package/src/TextInput/TextArea.jsx

@@ -3,9 +3,11 @@ import React, { forwardRef, useState } from 'react'
 import { Platform } from 'react-native'
 import {
   a11yProps,
+  focusHandlerProps,
   getTokensPropType,
   inputSupportsProps,
   selectSystemProps,
+  textInputHandlerProps,
   variantProp,
   viewProps
 } from '../utils'
@@ -16,7 +18,9 @@ import textInputPropTypes from './propTypes'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
+  focusHandlerProps,
   inputSupportsProps,
+  textInputHandlerProps,
   viewProps
 ])
 
@@ -60,7 +64,7 @@ const TextArea = forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
     }
   }
 
-  const { props: supportsProps, ...selectedProps } = selectProps(rest)
+  const { supportsProps, ...selectedProps } = selectProps(rest)
 
   const inputProps = {
     ...selectedProps,

package/src/TextInput/TextInput.jsx

@@ -1,10 +1,12 @@
 import React, { forwardRef } from 'react'
-
+import { Platform } from 'react-native'
 import {
   a11yProps,
+  focusHandlerProps,
   getTokensPropType,
   inputSupportsProps,
   selectSystemProps,
+  textInputHandlerProps,
   variantProp,
   viewProps
 } from '../utils'
@@ -14,7 +16,9 @@ import textInputPropTypes from './propTypes'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
+  focusHandlerProps,
   inputSupportsProps,
+  textInputHandlerProps,
   viewProps
 ])
 
@@ -36,8 +40,14 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
-const TextInput = forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
-  const { props: supportsProps, ...selectedProps } = selectProps(rest)
+const TextInput = forwardRef(({ tokens, variant = {}, pattern, ...rest }, ref) => {
+  React.useEffect(() => {
+    if (Platform.OS === 'web' && pattern && ref.current) {
+      // eslint-disable-next-line no-param-reassign
+      ref.current.pattern = pattern
+    }
+  }, [ref, pattern])
+  const { supportsProps, ...selectedProps } = selectProps(rest)
 
   const inputProps = {
     ...selectedProps,

package/src/TextInput/TextInputBase.jsx

@@ -7,12 +7,17 @@ import {
   a11yProps,
   getTokensPropType,
   selectSystemProps,
+  textInputHandlerProps,
   useInputValue,
   variantProp,
   viewProps
 } from '../utils'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  textInputHandlerProps,
+  viewProps
+])
 
 const selectInputStyles = (
   {

package/src/TextInput/propTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types'
+import { Platform } from 'react-native'
 
 const textInputPropTypes = {
   /**
@@ -23,7 +24,12 @@ const textInputPropTypes = {
    * Use to react upon input's value changes. Required when the `value` prop is set.
    * Will receive the input's value as an argument.
    */
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  ...Platform.select({
+    web: {
+      pattern: PropTypes.string
+    }
+  })
 }
 
 export default textInputPropTypes

package/src/ToggleSwitch/ToggleSwitch.jsx

@@ -8,6 +8,7 @@ import StackView from '../StackView'
 import { useThemeTokensCallback, applyShadowToken } from '../ThemeProvider'
 import {
   a11yProps,
+  focusHandlerProps,
   getTokensPropType,
   selectTokens,
   pressProps,
@@ -18,7 +19,12 @@ import {
 } from '../utils'
 import { useInputValue } from '../utils/input'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  pressProps,
+  viewProps
+])
 
 const selectButtonTokens = (tokens) =>
   selectTokens('Button', {
@@ -111,7 +117,7 @@ const ToggleSwitch = forwardRef(
     return (
       <StackView space={2} direction="row">
         {Boolean(label) && (
-          <View style={selectLabelStyles(themeTokens)}>
+          <View style={[selectLabelStyles(themeTokens), staticStyles.containText]}>
             <InputLabel
               forId={inputId}
               label={label}
@@ -210,6 +216,9 @@ const staticStyles = StyleSheet.create({
   switch: {
     alignItems: 'center',
     justifyContent: 'center'
+  },
+  containText: {
+    flexShrink: 1
   }
 })
 

package/src/ToggleSwitch/ToggleSwitchGroup.jsx

@@ -10,16 +10,21 @@ import { useViewport } from '../ViewportProvider'
 import { useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
+  containUniqueFields,
+  focusHandlerProps,
   getTokensPropType,
-  pressProps,
   selectSystemProps,
+  useMultipleInputValues,
   variantProp,
   viewProps
-} from '../utils/props'
-import { useMultipleInputValues } from '../utils/input'
-
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps])
+} from '../utils'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  viewProps
+])
 const ToggleSwitchGroup = forwardRef(
   (
     {
@@ -66,6 +71,11 @@ const ToggleSwitchGroup = forwardRef(
     })
     const itemA11yRole = selectedProps.accessibilityRole === 'radiogroup' ? 'radio' : 'switch'
 
+    const uniqueFields = ['id', 'label']
+    if (!containUniqueFields(items, uniqueFields)) {
+      throw new Error(`ToggleSwitchGroup items must have unique ${uniqueFields.join(', ')}`)
+    }
+
     const toggleSwitches = items.map(
       (
         {
@@ -74,7 +84,8 @@ const ToggleSwitchGroup = forwardRef(
           accessibilityLabel = label,
           onChange: itemOnChange,
           ref: itemRef,
-          tooltip: itemTooltip
+          tooltip: itemTooltip,
+          ...itemRest
         },
         index
       ) => {
@@ -104,6 +115,7 @@ const ToggleSwitchGroup = forwardRef(
             label={label}
             tooltip={itemTooltip}
             {...itemA11y}
+            {...selectItemProps(itemRest)}
           />
         )
       }
@@ -143,6 +155,7 @@ ToggleSwitchGroup.propTypes = {
    */
   items: PropTypes.arrayOf(
     PropTypes.shape({
+      ...selectedItemPropTypes,
       /**
        * The text displayed to the user on the label.
        */

package/src/utils/containUniqueFields.js

@@ -0,0 +1,32 @@
+// Returns true if there are no duplicate values of the fields listed
+// in the `fields` array across the objects in the `items` array, false
+// otherwise.
+// Note that if a value of a field in an item is not set, it will be
+// excluded from comparison.
+const containUniqueFields = (items, fields) => {
+  const map = []
+
+  const itemsHaveDuplicateFields = items.some((item) =>
+    fields.some((field) => {
+      if (!map[field]) {
+        map[field] = []
+      }
+
+      if (!item[field]) {
+        // We exclude empty values from comparison
+        return false
+      }
+
+      // Duplicate found!
+      if (map[field][item[field]]) return true
+
+      map[field][item[field]] = true
+
+      return false
+    })
+  )
+
+  return !itemsHaveDuplicateFields
+}
+
+export default containUniqueFields

package/src/utils/index.js

@@ -14,3 +14,4 @@ export * from './useResponsiveProp'
 export { default as useUniqueId } from './useUniqueId'
 export { default as withLinkRouter } from './withLinkRouter'
 export * from './ssr'
+export { default as containUniqueFields } from './containUniqueFields'

package/src/utils/props/handlerProps.js

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types'
+
+export const focusHandlerProps = {
+  types: {
+    /**
+     * onBlur handler
+     */
+    onBlur: PropTypes.func,
+    /**
+     * onFocus handler
+     */
+    onFocus: PropTypes.func
+  },
+  select: ({ onBlur, onFocus }) => ({
+    onBlur,
+    onFocus
+  })
+}
+
+export const textInputHandlerProps = {
+  types: {
+    /**
+     * onChange handler
+     */
+    onChange: PropTypes.func,
+    /**
+     * onChangeText handler
+     */
+    onChangeText: PropTypes.func,
+    /**
+     * onSubmit handler
+     */
+    onSubmit: PropTypes.func,
+    /**
+     * onSubmitEditing handler
+     */
+    onSubmitEditing: PropTypes.func
+  },
+  select: ({ onChange, onChangeText, onSubmit, onSubmitEditing }) => ({
+    onChange,
+    onChangeText,
+    onSubmit,
+    onSubmitEditing
+  })
+}
+
+export default { focusHandlerProps, textInputHandlerProps }

package/src/utils/props/index.js

@@ -1,4 +1,5 @@
 export * from './tokens'
+export * from './handlerProps'
 export { default as a11yProps } from './a11yProps'
 export { default as clickProps } from './clickProps'
 export { default as copyPropTypes } from './copyPropTypes'

package/src/utils/props/inputSupportsProps.js

@@ -28,15 +28,14 @@ export default {
      */
     validation: PropTypes.oneOf(['error', 'success'])
   },
-  select: ({ label, hint, hintPosition, feedback, tooltip, validation, ...rest }) => ({
-    props: {
+  select: ({ label, hint, hintPosition, feedback, tooltip, validation }) => ({
+    supportsProps: {
       label,
       hint,
       hintPosition,
       feedback,
       tooltip,
       validation
-    },
-    ...rest
+    }
   })
 }

package/stories/InputLabel/InputLabel.stories.jsx

@@ -8,35 +8,32 @@ export default {
   component: InputLabel
 }
 
-export const Default = () => <InputLabel label="Test label" />
+export const Default = (args) => <InputLabel {...args} />
+Default.args = { label: 'Test label' }
 
-export const HintInline = () => (
-  <InputLabel label="Test label" hint="Short hint" hintPosition="inline" />
-)
+export const HintInline = (args) => <InputLabel {...args} />
+HintInline.args = { label: 'Test label', hint: 'Short hint', hintPosition: 'inline' }
 
-export const HintAndTooltip = () => (
-  <InputLabel
-    label="Test label"
-    hint="Short hint"
-    hintPosition="inline"
-    tooltip="This is the tooltip's content"
-  />
-)
+export const HintAndTooltip = (args) => <InputLabel {...args} />
+HintAndTooltip.args = {
+  label: 'Test label',
+  hint: 'Short hint',
+  hintPosition: 'inline',
+  tooltip: "This is the tooltip's content"
+}
 
-export const HintInlineLong = () => (
-  <InputLabel
-    label="Test label"
-    hint="A rather long hint that won't actually fit"
-    hintPosition="inline"
-    tooltip="This is the tooltip's content"
-  />
-)
+export const HintInlineLong = (args) => <InputLabel {...args} />
+HintInlineLong.args = {
+  label: 'Test label',
+  hint: "A rather long hint that won't actually fit",
+  hintPosition: 'inline',
+  tooltip: "This is the tooltip's content"
+}
 
-export const HintBelow = () => (
-  <InputLabel
-    label="Test label"
-    hint="A rather long hint that won't actually fit"
-    hintPosition="below"
-    tooltip="This is the tooltip's content"
-  />
-)
+export const HintBelow = (args) => <InputLabel {...args} />
+HintBelow.args = {
+  label: 'Test label',
+  hint: "A rather long hint that won't actually fit",
+  hintPosition: 'below',
+  tooltip: "This is the tooltip's content"
+}

package/stories/Modal/Modal.stories.jsx

@@ -10,6 +10,8 @@ export default {
 export const Default = (args) => {
   const [isOpen, setIsOpen] = useState(false)
   const [isMaxWidthOpen, setIsMaxWidthOpen] = useState(false)
+  const [isCustomCloseOpen, setIsCustomCloseOpen] = useState(false)
+  const [isNoCloseOpen, setIsNoCloseOpen] = useState(false)
 
   return (
     <>
@@ -23,6 +25,29 @@ export const Default = (args) => {
         <Typography variant={{ size: 'h2' }}>Test heading</Typography>
         <Typography>Test content</Typography>
       </Modal>
+      <Spacer space={3} />
+      <Button onPress={() => setIsCustomCloseOpen(true)}>Open custom close button modal</Button>
+      <Modal
+        {...args}
+        isOpen={isCustomCloseOpen}
+        onClose={() => setIsCustomCloseOpen(false)}
+        closeButton={<Button onPress={() => setIsCustomCloseOpen(false)}>Close</Button>}
+      >
+        <Typography variant={{ size: 'h2' }}>Test heading</Typography>
+        <Typography>Test content</Typography>
+      </Modal>
+      <Spacer space={3} />
+      <Button onPress={() => setIsNoCloseOpen(true)}>Open modal without close button</Button>
+      <Modal
+        {...args}
+        isOpen={isNoCloseOpen}
+        onClose={() => setIsNoCloseOpen(false)}
+        closeButton={null}
+      >
+        <Typography variant={{ size: 'h2' }}>Test heading</Typography>
+        <Typography>A custom close button is added in the modal content.</Typography>
+        <Button onPress={() => setIsNoCloseOpen(false)}>Close</Button>
+      </Modal>
     </>
   )
 }

package/stories/Search/Search.stories.jsx

@@ -4,7 +4,10 @@ import { Search } from '../../src'
 
 export default {
   title: 'Search',
-  component: Search
+  component: Search,
+  argTypes: {
+    onSubmit: { action: 'submitted' }
+  }
 }
 
 const Template = (args) => <Search {...args} />

package/stories/TextInput/TextInput.stories.jsx

@@ -1,6 +1,7 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
+import { Platform } from 'react-native'
 
-import { TextInput } from '../../src'
+import { TextInput, Typography } from '../../src'
 import { Container } from '../supports'
 
 export default {
@@ -101,3 +102,40 @@ export const Controlled = () => {
     </>
   )
 }
+
+export const WithPattern = (args) => {
+  const [value, setValue] = useState('')
+  const inputRef = useRef(null)
+  const isEmpty = value === ''
+  const isSuccess = !isEmpty && inputRef.current.checkValidity()
+  // eslint-disable-next-line no-nested-ternary
+  const validation = isEmpty ? undefined : isSuccess ? 'success' : 'error'
+  const { pattern } = args
+  // eslint-disable-next-line no-nested-ternary
+  const feedback = isEmpty
+    ? `Enter value matching pattern: ${pattern}`
+    : isSuccess
+    ? `Success! Value matches pattern: ${pattern}`
+    : `Error! Value must match pattern: ${pattern}`
+  if (Platform.OS !== 'web') {
+    return <Typography>Pattern prop is only supported on web</Typography>
+  }
+  return (
+    <>
+      <Container>
+        <TextInput
+          {...args}
+          ref={inputRef}
+          label="Pattern"
+          validation={validation}
+          feedback={feedback}
+          value={value}
+          onChange={setValue}
+        />
+      </Container>
+    </>
+  )
+}
+WithPattern.args = {
+  pattern: '[1-9]{2}'
+}