@telus-uds/components-base 1.3.1 → 1.6.0

package/src/FlexGrid/Col/Col.jsx

@@ -23,6 +23,7 @@ const Col = forwardRef(
       mdOffset,
       lgOffset,
       xlOffset,
+      flex,
       ...viewProps
     },
     ref
@@ -106,7 +107,10 @@ const Col = forwardRef(
 
     let hidingStyles = {}
 
-    const shown = Platform.OS === 'web' ? 'block' : 'flex'
+    // TODO: consider setting this to always 'flex' in a major release.
+    // `display: block` is invalid in native apps.
+    // See https://telusdigital.atlassian.net/browse/UDS1-92
+    const shown = !flex && Platform.OS === 'web' ? 'block' : 'flex'
 
     if (viewPort === viewports.xs) {
       hidingStyles = {
@@ -267,7 +271,12 @@ Col.propTypes = {
    */
   horizontalAlign: responsiveProps.getTypeOptionallyByViewport(
     PropTypes.oneOf(['left', 'center', 'right'])
-  )
+  ),
+  /**
+   * (web only) Stretches the column to fill vertical space using `display: flex`.
+   * In native apps, FlexGrid.Col behaves as if this is always true (as do all `View`s).
+   */
+  flex: PropTypes.bool
 }
 
 export default Col

package/src/FlexGrid/Row/Row.jsx

@@ -72,21 +72,27 @@ const Row = forwardRef(
     const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse])
 
     let flexDirection = ''
+    let flexWrap = ''
 
     if (viewPort === viewports.xs) {
       flexDirection = reverseLevel[0] ? 'row-reverse' : 'row'
+      flexWrap = reverseLevel[0] ? 'wrap-reverse' : 'wrap'
     }
     if (viewPort === viewports.sm) {
       flexDirection = reverseLevel[1] ? 'row-reverse' : 'row'
+      flexWrap = reverseLevel[1] ? 'wrap-reverse' : 'wrap'
     }
     if (viewPort === viewports.md) {
       flexDirection = reverseLevel[2] ? 'row-reverse' : 'row'
+      flexWrap = reverseLevel[2] ? 'wrap-reverse' : 'wrap'
     }
     if (viewPort === viewports.lg) {
       flexDirection = reverseLevel[3] ? 'row-reverse' : 'row'
+      flexWrap = reverseLevel[3] ? 'wrap-reverse' : 'wrap'
     }
     if (viewPort === viewports.xl) {
       flexDirection = reverseLevel[4] ? 'row-reverse' : 'row'
+      flexWrap = reverseLevel[4] ? 'wrap-reverse' : 'wrap'
     }
 
     return (
@@ -97,6 +103,7 @@ const Row = forwardRef(
           styles.row,
           {
             flexDirection,
+            flexWrap,
             ...horizontalAlignStyles(horizontalAlign),
             ...verticalAlignStyles(verticalAlign),
             ...distributeStyles(distribute)
@@ -118,8 +125,7 @@ const styles = StyleSheet.create({
     flexGrow: 0,
     flexShrink: 1,
     flexBasis: 'auto',
-    flexDirection: 'row',
-    flexWrap: 'wrap'
+    flexDirection: 'row'
   }
 })
 

package/src/HorizontalScroll/HorizontalScroll.jsx

@@ -129,7 +129,7 @@ const HorizontalScroll = forwardRef(
           showsHorizontalScrollIndicator={false}
           contentContainerStyle={[
             staticStyles.scrollContainer,
-            { marginBottom: gutter, borderBottomWidth, borderBottomColor }
+            { borderBottomWidth, borderBottomColor }
           ]}
           {...selectProps(rest)}
         >

package/src/HorizontalScroll/HorizontalScrollButton.jsx

@@ -1,35 +1,14 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { Pressable, StyleSheet } from 'react-native'
-
-import { useThemeTokensCallback } from '../ThemeProvider'
-import {
-  resolvePressableTokens,
-  selectTokens,
-  variantProp,
-  getTokensPropType,
-  useCopy,
-  copyPropTypes,
-  a11yProps
-} from '../utils'
-import Icon from '../Icon'
-import Typography from '../Typography'
+import { StyleSheet, View } from 'react-native'
+import { variantProp, getTokensPropType, useCopy, copyPropTypes, a11yProps } from '../utils'
+import { useThemeTokens } from '../ThemeProvider'
+import IconButton from '../IconButton'
 import dictionary from './dictionary'
 
-const selectButtonStyles = (
-  { borderRadius, backgroundColor, borderColor, borderWidth, padding },
-  direction
-) => [
-  staticStyles.absolute,
-  staticStyles[direction],
-  {
-    borderRadius,
-    backgroundColor,
-    borderColor,
-    borderWidth,
-    padding
-  }
-]
+const selectContainerStyles = ({ offset }) => ({
+  marginTop: offset ? -offset : 0
+})
 
 /**
  * Button within a Tabs component showing users that content is available to the left or
@@ -40,41 +19,25 @@ const selectButtonStyles = (
  * @TODO when IconButton is complete and stable revisit this and update interaction state styles.
  */
 const HorizontalScrollButton = forwardRef(
-  ({ direction = 'next', icon, onPress, offset, variant, tokens, copy }, ref) => {
-    const getTokens = useThemeTokensCallback('HorizontalScrollButton', tokens, variant)
-    const resolveButtonTokens = (pressableState) =>
-      resolvePressableTokens(getTokens, pressableState)
-    const getPressableStyle = (pressableState) => [
-      selectButtonStyles(resolveButtonTokens(pressableState), direction),
-      { marginTop: -1 * (offset || 0) }
-    ]
-
+  ({ direction = 'next', icon, offset, onPress, variant, tokens, copy }, ref) => {
+    const themeTokens = useThemeTokens('HorizontalScrollButton', tokens, variant)
     const getCopy = useCopy({ dictionary, copy })
     const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText')
 
     return (
-      <Pressable
-        ref={ref}
-        style={getPressableStyle}
-        onPress={onPress}
-        accessibilityLabel={label}
-        accessibilityRole="button"
-        // For keyboard-tab or screenreader-swipe navigation, users can just go through all items
-        {...a11yProps.nonFocusableProps}
+      <View
+        style={[staticStyles.absolute, staticStyles[direction], selectContainerStyles({ offset })]}
       >
-        {(pressableState) => {
-          const iconTokens = selectTokens('Icon', resolveButtonTokens(pressableState), 'icon')
-          return icon ? (
-            <Icon icon={icon} tokens={iconTokens} />
-          ) : (
-            <Typography
-              tokens={{ fontSize: iconTokens.size, lineHeight: 1, color: iconTokens.color }}
-            >
-              {direction === 'next' ? '→' : '←'}
-            </Typography>
-          )
-        }}
-      </Pressable>
+        <IconButton
+          accessibilityLabel={label}
+          icon={icon}
+          onPress={onPress}
+          ref={ref}
+          tokens={themeTokens}
+          variant={variant}
+          {...a11yProps.nonFocusableProps}
+        />
+      </View>
     )
   }
 )

package/src/InputLabel/InputLabel.jsx

@@ -47,35 +47,46 @@ const InputLabel = forwardRef(
     const isHintInline = hintPosition === 'inline'
 
     return (
-      <View
-        ref={ref}
-        style={[staticStyles.container, !isHintInline && staticStyles.containerWithHintBelow]}
-        {...selectProps(rest)}
-      >
-        <Text
-          style={[selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label]}
-        >
-          <LabelContent forId={forId}>{label}</LabelContent>
-        </Text>
-        {hint && isHintInline && (
+      <>
+        <View ref={ref} style={staticStyles.container} {...selectProps(rest)}>
           <Text
-            style={[selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens)]}
-            nativeID={hintId}
+            style={[
+              selectLabelStyles(themeTokens),
+              selectGapStyles(themeTokens),
+              staticStyles.label
+            ]}
           >
-            {hint}
+            <LabelContent forId={forId}>{label}</LabelContent>
           </Text>
-        )}
-        {hasTooltip && (
-          <View style={staticStyles.tooltipAlign}>
-            <Tooltip content={tooltip} />
-          </View>
-        )}
+          {hint && isHintInline && (
+            <Text
+              style={[
+                selectHintStyles(themeTokens),
+                hasTooltip && selectGapStyles(themeTokens),
+                staticStyles.label
+              ]}
+              nativeID={hintId}
+            >
+              {hint}
+            </Text>
+          )}
+          {hasTooltip && (
+            <View
+              style={[
+                staticStyles.tooltipAlign,
+                { height: themeTokens.fontSize * themeTokens.lineHeight }
+              ]}
+            >
+              <Tooltip content={tooltip} />
+            </View>
+          )}
+        </View>
         {hint && !isHintInline && (
           <Text style={[selectHintStyles(themeTokens), staticStyles.hintBelow]} nativeID={hintId}>
             {hint}
           </Text>
         )}
-      </View>
+      </>
     )
   }
 )
@@ -115,21 +126,19 @@ export default InputLabel
 
 const staticStyles = StyleSheet.create({
   container: {
-    display: 'flex',
+    flexShrink: 1,
     flexDirection: 'row',
     alignItems: 'baseline'
   },
-  containerWithHintBelow: {
-    flexWrap: 'wrap'
-  },
   label: {
-    flexShrink: 0
+    flexShrink: 1
   },
   hintBelow: {
     flexBasis: '100%',
     flexShrink: 0
   },
   tooltipAlign: {
-    alignSelf: 'center'
+    alignSelf: 'flex-start',
+    justifyContent: 'center'
   }
 })

package/src/Link/LinkBase.jsx

@@ -45,10 +45,8 @@ const selectOuterBorderStyles = ({
       }
     : {}
 
-const selectTextStyles = ({ color, textLine, textLineStyle }) => ({
+const selectTextStyles = ({ color }) => ({
   color,
-  textDecorationLine: textLine,
-  textDecorationStyle: textLineStyle,
   ...Platform.select({
     web: {
       // TODO: https://github.com/telus/universal-design-system/issues/487
@@ -65,6 +63,18 @@ const selectBlockStyles = ({ blockFontWeight, blockFontSize, blockLineHeight, bl
     fontName: blockFontName
   })
 
+const selectDecorationStyles = ({ color, textLine, textLineStyle }) => ({
+  color,
+  textDecorationLine: textLine,
+  textDecorationStyle: textLineStyle,
+  ...Platform.select({
+    web: {
+      // TODO: https://github.com/telus/universal-design-system/issues/487
+      transition: 'color 200ms'
+    }
+  })
+})
+
 const selectIconTokens = ({ color, iconSize, iconTranslateX, iconTranslateY }) => ({
   color,
   translateX: iconTranslateX,
@@ -132,8 +142,14 @@ const LinkBase = forwardRef(
         style={(linkState) => {
           const themeTokens = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)
+          const decorationStyles = selectDecorationStyles(themeTokens)
           const hasIcon = Boolean(icon || themeTokens.icon)
-          return [outerBorderStyles, blockLeftStyle, hasIcon && staticStyles.rowContainer]
+          return [
+            outerBorderStyles,
+            blockLeftStyle,
+            decorationStyles,
+            hasIcon && staticStyles.rowContainer
+          ]
         }}
       >
         {(linkState) => {

package/src/Modal/Modal.jsx

@@ -16,10 +16,11 @@ import {
   selectSystemProps,
   useCopy,
   variantProp,
-  viewProps
+  viewProps,
+  selectTokens
 } from '../utils'
 import { useViewport } from '../ViewportProvider'
-import ButtonBase from '../Button/ButtonBase'
+import IconButton from '../IconButton'
 import dictionary from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -70,11 +71,6 @@ const selectCloseButtonContainerStyles = ({ paddingRight, paddingTop }) => ({
   paddingTop
 })
 
-const selectCloseIconProps = ({ closeIconSize, closeIconColor }) => ({
-  size: closeIconSize,
-  color: closeIconColor
-})
-
 /**
  * A modal window is a secondary window that opens on top of the main one.
  * Users have to interact with it before they can carry out their task and return to the main window.
@@ -90,7 +86,7 @@ const selectCloseIconProps = ({ closeIconSize, closeIconColor }) => ({
  * - Don’t use modals consecutively
  */
 const Modal = forwardRef(
-  ({ children, isOpen, onClose, maxWidth, tokens, variant, copy, ...rest }, ref) => {
+  ({ children, isOpen, onClose, maxWidth, tokens, variant, copy, closeButton, ...rest }, ref) => {
     const viewport = useViewport()
     const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth })
 
@@ -107,11 +103,14 @@ const Modal = forwardRef(
       if (event.key === 'Escape') onClose()
     }
 
+    // Show the custom react node passed to `closedButton` or the default close button if `closeButton` is `undefined`.
+    // Hide the close button if `closeButton` is `null`.
+    const showCloseButton = closeButton !== null
+
     if (!isOpen) {
       return null
     }
 
-    // TODO: replace the close button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
     return (
       <NativeModal transparent {...selectProps(rest)}>
         <View style={[staticStyles.positioningContainer]}>
@@ -124,23 +123,24 @@ const Modal = forwardRef(
               style={[staticStyles.modal, selectModalStyles(themeTokens)]}
               onKeyUp={handleKeyUp}
             >
-              <View
-                style={[
-                  staticStyles.closeButtonContainer,
-                  selectCloseButtonContainerStyles(themeTokens)
-                ]}
-              >
-                <ButtonBase
-                  onPress={handleClose}
-                  accessibilityRole="button"
-                  accessibilityLabel={closeLabel}
+              {showCloseButton && (
+                <View
+                  style={[
+                    staticStyles.closeButtonContainer,
+                    selectCloseButtonContainerStyles(themeTokens)
+                  ]}
                 >
-                  {
-                    // TODO: add close button interactive states after IconButton is done
-                    () => <CloseIconComponent {...selectCloseIconProps(themeTokens)} />
-                  }
-                </ButtonBase>
-              </View>
+                  {closeButton || (
+                    <IconButton
+                      onPress={handleClose}
+                      icon={CloseIconComponent}
+                      accessibilityRole="button"
+                      accessibilityLabel={closeLabel}
+                      tokens={selectTokens('IconButton', themeTokens, 'close')}
+                    />
+                  )}
+                </View>
+              )}
               {children}
             </View>
           </View>
@@ -164,7 +164,11 @@ Modal.propTypes = {
   onClose: PropTypes.func,
   maxWidth: PropTypes.bool,
   tokens: getTokensPropType('Modal'),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  /**
+   * Pass a react node to override the default close button or pass `null` to hide the close button.
+   */
+  closeButton: PropTypes.node
 }
 
 export default Modal

package/src/Notification/Notification.jsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useState } from 'react'
-import { StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
 import PropTypes from 'prop-types'
 import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
@@ -9,7 +9,8 @@ import {
   selectSystemProps,
   selectTokens,
   variantProp,
-  viewProps
+  viewProps,
+  wrapStringsInText
 } from '../utils'
 import ButtonBase from '../Button/ButtonBase'
 import useCopy from '../utils/useCopy'
@@ -102,8 +103,10 @@ const Notification = forwardRef(
 
     const textStyles = selectTextStyles(themeTokens)
 
-    const content =
-      typeof children === 'string' ? <Text style={textStyles}>{children}</Text> : children
+    const content = wrapStringsInText(
+      typeof children === 'function' ? children({ textStyles }) : children,
+      { style: textStyles }
+    )
 
     const { icon: IconComponent, dismissIcon: DismissIconComponent } = themeTokens
 

package/src/Radio/Radio.jsx

@@ -7,6 +7,7 @@ import RadioButton, { selectRadioButtonTokens } from './RadioButton'
 import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
+  focusHandlerProps,
   getTokensPropType,
   selectSystemProps,
   useInputValue,
@@ -16,7 +17,11 @@ import {
 } from '../utils'
 import StackView from '../StackView'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  viewProps
+])
 
 const selectContainerStyles = ({
   containerBackgroundColor,
@@ -154,23 +159,29 @@ const Radio = forwardRef(
       >
         {({ focused: focus, hovered: hover, pressed }) => {
           const stateTokens = getTokens({ focus, hover, pressed })
+          const labelStyles = selectLabelStyles(stateTokens)
+          const alignWithLabel = label
+            ? [staticStyles.alignWithLabel, { height: labelStyles.lineHeight }]
+            : null
 
           return (
             <StackView space={0}>
               <View style={[staticStyles.container, selectContainerStyles(stateTokens)]}>
-                <RadioButton
-                  tokens={selectRadioButtonTokens(stateTokens)}
-                  isControlled={isControlled}
-                  isChecked={isChecked}
-                  inactive={inactive}
-                  defaultChecked={defaultChecked}
-                  inputId={inputId}
-                  handleChange={handleChange}
-                  name={inputName}
-                  value={value}
-                />
+                <View style={alignWithLabel}>
+                  <RadioButton
+                    tokens={selectRadioButtonTokens(stateTokens)}
+                    isControlled={isControlled}
+                    isChecked={isChecked}
+                    inactive={inactive}
+                    defaultChecked={defaultChecked}
+                    inputId={inputId}
+                    handleChange={handleChange}
+                    name={inputName}
+                    value={value}
+                  />
+                </View>
                 {Boolean(label) && (
-                  <Text style={selectLabelStyles(stateTokens)}>
+                  <Text style={labelStyles}>
                     <RadioLabel forId={inputId}>{label}</RadioLabel>
                   </Text>
                 )}
@@ -242,5 +253,6 @@ Radio.propTypes = {
 export default Radio
 
 const staticStyles = StyleSheet.create({
-  container: { flexDirection: 'row', alignItems: 'center' }
+  container: { flexDirection: 'row', alignItems: 'center' },
+  alignWithLabel: { alignSelf: 'flex-start', justifyContent: 'center' }
 })

package/src/Radio/RadioGroup.jsx

@@ -6,6 +6,8 @@ import { useViewport } from '../ViewportProvider'
 import { useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
+  containUniqueFields,
+  focusHandlerProps,
   getTokensPropType,
   selectSystemProps,
   useInputValue,
@@ -17,6 +19,11 @@ import Radio from './Radio'
 import Fieldset from '../Fieldset'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  viewProps
+])
 
 /**
  * A group of Radios that behave as a radio group. Use when users select a single choice from mutually
@@ -100,28 +107,38 @@ const RadioGroup = forwardRef(
       onChange,
       readOnly: readOnly || inactive
     })
-    const radios = items.map(({ label, id, onChange: itemOnChange, ref: itemRef }, index) => {
-      const radioId = id || `Radio[${index}]`
-      const isChecked = currentValue === radioId
-      const handleChange = (newCheckedState, event) => {
-        if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event)
-        if (newCheckedState) setValue(radioId, event)
+
+    const uniqueFields = ['id', 'label']
+    if (!containUniqueFields(items, uniqueFields)) {
+      throw new Error(`RadioGroup items must have unique ${uniqueFields.join(', ')}`)
+    }
+
+    const radios = items.map(
+      ({ label, id, onChange: itemOnChange, ref: itemRef, ...itemRest }, index) => {
+        const radioId = id || `Radio[${index}]`
+        const isChecked = currentValue === radioId
+        const handleChange = (newCheckedState, event) => {
+          if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event)
+          if (newCheckedState) setValue(radioId, event)
+        }
+
+        return (
+          <Radio
+            ref={itemRef}
+            key={radioId}
+            id={radioId}
+            checked={isChecked}
+            onChange={handleChange}
+            inactive={inactive}
+            label={label}
+            name={inputGroupName}
+            tokens={radioTokens}
+            variant={variant}
+            {...selectItemProps(itemRest)}
+          />
+        )
       }
-      return (
-        <Radio
-          ref={itemRef}
-          key={radioId}
-          id={radioId}
-          checked={isChecked}
-          onChange={handleChange}
-          inactive={inactive}
-          label={label}
-          name={inputGroupName}
-          tokens={radioTokens}
-          variant={variant}
-        />
-      )
-    })
+    )
 
     return (
       <Fieldset
@@ -163,6 +180,7 @@ RadioGroup.propTypes = {
    */
   items: PropTypes.arrayOf(
     PropTypes.exact({
+      ...selectedItemPropTypes,
       label: PropTypes.string,
       id: PropTypes.string,
       onChange: PropTypes.func,

package/src/RadioCard/RadioCard.jsx

@@ -5,6 +5,7 @@ import { StyleSheet, Text, View } from 'react-native'
 import { useThemeTokensCallback, applyTextStyles } from '../ThemeProvider'
 import {
   a11yProps,
+  focusHandlerProps,
   getTokensPropType,
   selectSystemProps,
   selectTokens,
@@ -17,7 +18,11 @@ import { PressableCardBase, selectPressableCardTokens } from '../Card'
 import StackView from '../StackView'
 import RadioButton, { selectRadioButtonTokens } from '../Radio/RadioButton'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  viewProps
+])
 
 /**
  * A Card that behaves like a radio button. Use when users select a single choice from mutually exclusive options