@telus-uds/components-base 1.1.0 → 1.3.1

package/src/ThemeProvider/utils/theme-tokens.js

@@ -3,9 +3,9 @@ import semVerSatisfies from 'semver/functions/satisfies'
 import pkg from '../../../package.json'
 
 /**
- * @typedef {import('../../utils/propTypes.js').AppearanceSet} AppearanceSet
- * @typedef {import('../../utils/propTypes.js').TokensProp} TokensProp
- * @typedef {import('../../utils/propTypes.js').TokensSet} TokensSet
+ * @typedef {import('../../utils/props/variantProp.js').AppearanceSet} AppearanceSet
+ * @typedef {import('../../utils/props/tokens.js').TokensProp} TokensProp
+ * @typedef {import('../../utils/props/tokens.js').TokensSet} TokensSet
  */
 
 /**

package/src/ToggleSwitch/ToggleSwitch.jsx

@@ -1,18 +1,25 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { Platform, View, StyleSheet } from 'react-native'
+import { Platform, StyleSheet, View } from 'react-native'
 
+import InputLabel from '../InputLabel'
 import ButtonBase from '../Button/ButtonBase'
+import StackView from '../StackView'
 import { useThemeTokensCallback, applyShadowToken } from '../ThemeProvider'
 import {
   a11yProps,
+  getTokensPropType,
+  selectTokens,
   pressProps,
+  selectSystemProps,
+  useUniqueId,
   variantProp,
-  getTokensPropType,
-  selectTokens
-} from '../utils/propTypes'
+  viewProps
+} from '../utils'
 import { useInputValue } from '../utils/input'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps])
+
 const selectButtonTokens = (tokens) =>
   selectTokens('Button', {
     ...tokens,
@@ -54,12 +61,41 @@ const selectSwitchStyles = ({
   })
 })
 
+const selectLabelStyles = ({ labelMarginLeft }) => ({ marginLeft: labelMarginLeft })
+const selectLabelTokens = ({
+  labelColor,
+  labelFontName,
+  labelFontSize,
+  labelFontWeight,
+  labelLineHeight
+}) => ({
+  color: labelColor,
+  fontName: labelFontName,
+  fontWeight: labelFontWeight,
+  fontSize: labelFontSize,
+  lineHeight: labelLineHeight
+})
+
 const ToggleSwitch = forwardRef(
   (
-    { value, initialValue, onChange, inactive, tokens, variant, accessibilityRole = 'switch' },
+    {
+      value,
+      initialValue,
+      onChange,
+      id,
+      label,
+      inactive,
+      tokens,
+      tooltip,
+      variant,
+      accessibilityRole = 'switch',
+      accessibilityLabel = label,
+      ...rest
+    },
     ref
   ) => {
     const getTokens = useThemeTokensCallback('ToggleSwitch', tokens, variant)
+    const themeTokens = getTokens()
 
     const { currentValue, setValue } = useInputValue({
       value,
@@ -68,51 +104,66 @@ const ToggleSwitch = forwardRef(
     })
 
     const handlePress = (event) => setValue(!currentValue, event)
-
     const getButtonTokens = (buttonState) => selectButtonTokens(getTokens(buttonState))
+    const uniqueId = useUniqueId('toggleSwitch')
+    const inputId = id ?? uniqueId
 
     return (
-      <ButtonBase
-        ref={ref}
-        selected={currentValue}
-        inactive={inactive}
-        tokens={getButtonTokens}
-        accessibilityRole={accessibilityRole}
-        accessibilityState={{ checked: currentValue }}
-        onPress={handlePress}
-      >
-        {(buttonState) => {
-          const themeTokens = getTokens(buttonState)
-          const IconComponent = themeTokens.icon
-          const switchStyles = selectSwitchStyles(themeTokens)
-          const trackStyles = selectTrackStyles(themeTokens)
-          const iconTokens = selectIconTokens(themeTokens)
-
-          // If drag-slide support is needed, use a PanResponder and apply these to an Animated value.
-          // Use translate transforms for smoothest non-thread-blocking animations and to allow drag.
-          const slideStart = 0
-          const slideEnd =
-            themeTokens.width - themeTokens.switchSize - themeTokens.trackBorderWidth * 2
-          const switchOffset = buttonState.selected ? slideEnd : slideStart
-          const switchPositionStyle = { transform: [{ translateX: switchOffset }] }
-
-          return (
-            <View style={[staticStyles.track, trackStyles]}>
-              <View style={[staticStyles.switch, switchStyles, switchPositionStyle]}>
-                {IconComponent && <IconComponent {...iconTokens} />}
+      <StackView space={2} direction="row">
+        {Boolean(label) && (
+          <View style={selectLabelStyles(themeTokens)}>
+            <InputLabel
+              forId={inputId}
+              label={label}
+              tokens={selectLabelTokens(themeTokens)}
+              tooltip={tooltip}
+            />
+          </View>
+        )}
+        <ButtonBase
+          id={id}
+          ref={ref}
+          selected={currentValue}
+          inactive={inactive}
+          tokens={getButtonTokens}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityRole={accessibilityRole}
+          accessibilityState={{ checked: currentValue }}
+          onPress={handlePress}
+          {...selectProps(rest)}
+        >
+          {(buttonState) => {
+            const stateTokens = getTokens(buttonState)
+            const IconComponent = stateTokens.icon
+            const switchStyles = selectSwitchStyles(stateTokens)
+            const trackStyles = selectTrackStyles(stateTokens)
+            const iconTokens = selectIconTokens(stateTokens)
+
+            // If drag-slide support is needed, use a PanResponder and apply these to an Animated value.
+            // Use translate transforms for smoothest non-thread-blocking animations and to allow drag.
+            const slideStart = 0
+            const slideEnd =
+              stateTokens.width - stateTokens.switchSize - stateTokens.trackBorderWidth * 2
+            const switchOffset = buttonState.selected ? slideEnd : slideStart
+            const switchPositionStyle = { transform: [{ translateX: switchOffset }] }
+
+            return (
+              <View style={[staticStyles.track, trackStyles]}>
+                <View style={[staticStyles.switch, switchStyles, switchPositionStyle]}>
+                  {IconComponent && <IconComponent {...iconTokens} />}
+                </View>
               </View>
-            </View>
-          )
-        }}
-      </ButtonBase>
+            )
+          }}
+        </ButtonBase>
+      </StackView>
     )
   }
 )
 ToggleSwitch.displayName = 'ToggleSwitch'
 
 ToggleSwitch.propTypes = {
-  ...a11yProps.propTypes,
-  ...pressProps.propTypes,
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('ToggleSwitch'),
   variant: variantProp.propType,
   /**
@@ -131,11 +182,23 @@ ToggleSwitch.propTypes = {
    * this should always be passed and used to control the state of the switch.
    */
   onChange: PropTypes.func,
+  /**
+   * Input ID.
+   */
+  id: PropTypes.string,
+  /**
+   * An optional label.
+   */
+  label: PropTypes.string,
   /**
    * If passed, the switch does not respond to user input and may recieve different
    * theme tokens if the theme supports inactive appearance.
    */
-  inactive: PropTypes.bool
+  inactive: PropTypes.bool,
+  /**
+   * Content of an optional Tooltip. If set, a tooltip button will be shown next to the label.
+   */
+  tooltip: PropTypes.string
 }
 
 const staticStyles = StyleSheet.create({

package/src/ToggleSwitch/ToggleSwitchGroup.jsx

@@ -0,0 +1,211 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import ABBPropTypes from 'airbnb-prop-types'
+import { Platform } from 'react-native'
+
+import ToggleSwitch from './ToggleSwitch'
+import Fieldset from '../Fieldset'
+import { getStackedContent } from '../StackView'
+import { useViewport } from '../ViewportProvider'
+import { useThemeTokens } from '../ThemeProvider'
+import {
+  a11yProps,
+  getTokensPropType,
+  pressProps,
+  selectSystemProps,
+  variantProp,
+  viewProps
+} from '../utils/props'
+import { useMultipleInputValues } from '../utils/input'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps])
+
+const ToggleSwitchGroup = forwardRef(
+  (
+    {
+      variant,
+      tokens,
+      items = [],
+      values,
+      initialValues,
+      maxValues = 1,
+      onChange,
+      readOnly = false,
+      inactive = false,
+      feedback,
+      hint,
+      tooltip,
+      legend,
+      name: inputGroupName,
+      accessibilityRole = maxValues === 1
+        ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
+        : Platform.select({ web: 'group', default: 'none' }),
+      toggleSwitchTokens,
+      validation,
+      ...rest
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+
+    const { space, fieldSpace } = useThemeTokens('ToggleSwitchGroup', tokens, variant, {
+      viewport
+    })
+
+    const { currentValues, toggleOneValue } = useMultipleInputValues({
+      initialValues,
+      values,
+      maxValues,
+      onChange,
+      readOnly
+    })
+
+    const selectedProps = selectProps({
+      accessibilityRole,
+      ...rest
+    })
+    const itemA11yRole = selectedProps.accessibilityRole === 'radiogroup' ? 'radio' : 'switch'
+
+    const toggleSwitches = items.map(
+      (
+        {
+          label,
+          id = label,
+          accessibilityLabel = label,
+          onChange: itemOnChange,
+          ref: itemRef,
+          tooltip: itemTooltip
+        },
+        index
+      ) => {
+        const isSelected = currentValues.includes(id)
+
+        const handleChange = (newCheckedState, event) => {
+          if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event)
+          toggleOneValue(id, event)
+        }
+
+        const itemA11y = {
+          accessibilityState: { checked: isSelected },
+          accessibilityRole: itemA11yRole,
+          accessibilityLabel,
+          ...a11yProps.getPositionInSet(items.length, index)
+        }
+
+        return (
+          <ToggleSwitch
+            id={id}
+            ref={itemRef}
+            key={id}
+            onChange={handleChange}
+            tokens={toggleSwitchTokens}
+            value={isSelected}
+            inactive={inactive}
+            label={label}
+            tooltip={itemTooltip}
+            {...itemA11y}
+          />
+        )
+      }
+    )
+
+    return (
+      <Fieldset
+        ref={ref}
+        name={inputGroupName}
+        legend={legend}
+        tooltip={tooltip}
+        hint={hint}
+        space={fieldSpace}
+        feedback={feedback}
+        inactive={inactive}
+        validation={validation}
+        {...selectedProps}
+      >
+        {getStackedContent(toggleSwitches, { space, direction: 'column' })}
+      </Fieldset>
+    )
+  }
+)
+ToggleSwitchGroup.displayName = 'ToggleSwitchGroup'
+
+ToggleSwitchGroup.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('ToggleSwitchGroup'),
+  variant: variantProp.propType,
+  /**
+   * The maximum number of items a user may select at once. Defaults to 1 and behaves
+   * like radio buttons. To have no limit and allow any number of selections, pass `null`.
+   */
+  maxValues: PropTypes.number,
+  /**
+   * The options a user may select
+   */
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      /**
+       * The text displayed to the user on the label.
+       */
+      label: PropTypes.string.isRequired,
+      /**
+       * An optional accessibility label may be passed to each ToggleSwitch
+       * and will be applied as normal for a React Native accessibilityLabel prop.
+       */
+      accessibilityLabel: PropTypes.string,
+      /**
+       * An optional unique string may be provided to identify this option,
+       * which will be used in code and passed to any onChange function.
+       * If not provided, the label is used.
+       */
+      id: PropTypes.string,
+      /**
+       * An optional ref for one individual ToggleSwitch in the ToggleSwitchGroup
+       */
+      ref: ABBPropTypes.ref()
+    })
+  ),
+  /**
+   * 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,
+  /**
+   * If the selected item(s) in the toggle switch group are to be controlled externally by
+   * a parent component, pass an array of strings as well as an `onChange` handler.
+   * Passing an array for "values" makes the ToggleSwitchGroup a "controlled" component that
+   * expects its state to be handled via `onChange` and so doesn't handle it itself.
+   */
+  values: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * If `values` is not passed, making the ToggleSwitchGroup an "uncontrolled" component
+   * managing its own selected state, a default set of selections may be provided.
+   * Changing the `initialValues` does not change the user's selections.
+   */
+  initialValues: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * Optional additional text giving more detail to help a user make a choice.
+   */
+  hint: PropTypes.string,
+  /**
+   * Optional tooltip text content to include alongside the legend and hint.
+   */
+  tooltip: PropTypes.string,
+  /**
+   * If provided, a Feedback element is rendered containing this text.
+   */
+  feedback: PropTypes.string,
+  /**
+   * Main text used to describe this group, used in Fieldset's Legend element.
+   */
+  legend: PropTypes.string,
+  /**
+   * Toggle switch token overrides.
+   */
+  toggleSwitchTokens: getTokensPropType('ToggleSwitch'),
+  /**
+   * Current validation status of the group, passed to the feedback element if there is one.
+   */
+  validation: PropTypes.oneOf(['error', 'success'])
+}
+
+export default ToggleSwitchGroup

package/src/ToggleSwitch/index.js

@@ -1,3 +1,4 @@
 import ToggleSwitch from './ToggleSwitch'
+import ToggleSwitchGroup from './ToggleSwitchGroup'
 
-export default ToggleSwitch
+export { ToggleSwitch, ToggleSwitchGroup }

package/src/Tooltip/Tooltip.jsx

@@ -3,13 +3,22 @@ import { Dimensions, Platform, Pressable, StyleSheet, Text, View } from 'react-n
 
 import PropTypes from 'prop-types'
 import { applyShadowToken, applyTextStyles, useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, selectTokens, variantProp } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  selectTokens,
+  variantProp,
+  viewProps
+} from '../utils'
 import Backdrop from './Backdrop'
 import getTooltipPosition from './getTooltipPosition'
 import TooltipButton from '../TooltipButton'
 import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectTooltipStyles = ({
   backgroundColor,
   paddingTop,
@@ -100,7 +109,7 @@ const defaultControl = (pressableState, variant) => (
  * - Tooltips may also be useful when vertical space is an issue.
  */
 const Tooltip = forwardRef(
-  ({ children, content, position = 'auto', copy = 'en', tokens, variant }, ref) => {
+  ({ children, content, position = 'auto', copy = 'en', tokens, variant, ...rest }, ref) => {
     const [isOpen, setIsOpen] = useState(false)
 
     const controlRef = useRef()
@@ -209,7 +218,7 @@ const Tooltip = forwardRef(
       control === defaultControl ? { top: 10, bottom: 10, left: 10, right: 10 } : undefined
 
     return (
-      <View style={staticStyles.container}>
+      <View style={staticStyles.container} {...selectProps(rest)}>
         <Pressable
           onPress={toggleIsOpen}
           ref={controlRef}
@@ -256,6 +265,7 @@ const Tooltip = forwardRef(
 Tooltip.displayName = 'Tooltip'
 
 Tooltip.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the
    * pressable state and tooltip variant as an argument.

package/src/TooltipButton/TooltipButton.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { View } from 'react-native'
-
 import PropTypes from 'prop-types'
 import { useThemeTokens, applyOuterBorder } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils'
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 import Icon from '../Icon'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectInnerContainerStyles = ({ borderRadius, width }) => ({ borderRadius, width })
 
 const selectIconTokens = ({ iconSize, iconColor /* iconScale = 1 */ }) => ({
@@ -19,13 +20,13 @@ const selectIconTokens = ({ iconSize, iconColor /* iconScale = 1 */ }) => ({
  * In fact though, it isn't actually a pressable - it's meant to be used as pressable's content.
  * Due to this any interaction states (e.g. pressed, hover, etc.) has to be passed down to it as a prop.
  */
-const TooltipButton = ({ pressableState, tokens, variant }) => {
+const TooltipButton = ({ pressableState, tokens, variant, ...rest }) => {
   const themeTokens = useThemeTokens('TooltipButton', tokens, variant, pressableState)
 
   const { icon: IconComponent } = themeTokens
 
   return (
-    <View style={applyOuterBorder(themeTokens)}>
+    <View style={applyOuterBorder(themeTokens)} {...selectProps(rest)}>
       <View style={selectInnerContainerStyles(themeTokens)}>
         {IconComponent && <Icon icon={IconComponent} tokens={selectIconTokens(themeTokens)} />}
       </View>
@@ -34,6 +35,7 @@ const TooltipButton = ({ pressableState, tokens, variant }) => {
 }
 
 TooltipButton.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Used as appearances when resolving theme tokens.
    */

package/src/Typography/Typography.jsx

@@ -11,13 +11,17 @@ import {
   getTokensPropType,
   getMaxFontMultiplier,
   headingTags,
+  selectSystemProps,
   textTags,
+  viewProps,
   getA11yPropsFromHtmlTag
 } from '../utils'
 /**
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectTextStyles = ({
   fontWeight,
   fontSize,
@@ -64,17 +68,17 @@ const Typography = forwardRef(
       maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
     }
 
-    const a11y = {
+    const selectedProps = selectProps({
       ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
-      ...a11yProps.select(rest)
-    }
+      ...rest
+    })
 
     return block ? (
-      <View ref={ref} {...a11y}>
+      <View ref={ref} {...selectedProps}>
         <Text {...textProps}>{children}</Text>
       </View>
     ) : (
-      <Text ref={ref} {...textProps} {...a11y}>
+      <Text ref={ref} {...textProps} {...selectedProps}>
         {children}
       </Text>
     )
@@ -83,7 +87,7 @@ const Typography = forwardRef(
 Typography.displayName = 'Typography'
 
 Typography.propTypes = {
-  ...a11yProps.types,
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Typography'),
   variant: variantProp.propType,
   /**

package/src/index.js

@@ -37,14 +37,14 @@ export { default as StepTracker } from './StepTracker'
 export { default as Tabs } from './Tabs'
 export { default as Tags } from './Tags'
 export * from './TextInput'
-export { default as ToggleSwitch } from './ToggleSwitch'
+export * from './ToggleSwitch'
 export { default as Tooltip } from './Tooltip'
 export { default as TooltipButton } from './TooltipButton'
 export { default as Typography } from './Typography'
 
 export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider'
 export { default as BaseProvider } from './BaseProvider'
-export { default as ViewportProvider, useViewport } from './ViewportProvider'
+export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider'
 export {
   default as ThemeProvider,
   useTheme,

package/src/utils/a11y/semantics.js

@@ -150,8 +150,9 @@ export const getA11yPropsFromHtmlTag = (tag, nativeRole) => {
   if (nativeRole !== undefined && Platform.OS !== 'web') return { accessibilityRole: nativeRole }
 
   if (tag) {
-    const accessibilityRole = tagsToRoles[tag]
-    if (accessibilityRole) return { accessibilityRole }
+    // aria roles don't have native counterparts and RN may throw an error if an unrecognised role is passed
+    const ariaRole = Platform.OS === 'web' && tagsToRoles[tag]
+    if (ariaRole) return { accessibilityRole: ariaRole }
 
     const accessibilityLevel = getHeadingLevel(tag)
     if (accessibilityLevel) return { accessibilityRole: 'header', accessibilityLevel }

package/src/utils/children.jsx

@@ -47,7 +47,8 @@ export const unpackFragment = (child) => {
 
 const isStringOrNumber = (child) => typeof child === 'string' || typeof child === 'number'
 // Wrap an A11yText with neighouring text strings so it doesn't split them into multiple <Text>s
-const isWrapable = (child) => isStringOrNumber(child) || child.type === A11yText
+const isWrapable = (child) =>
+  isStringOrNumber(child) || child.type === A11yText || child.type?.name === 'FootnoteLink'
 const combineKeys = (childrenArray) =>
   childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, '')
 

package/src/utils/index.js

@@ -3,7 +3,7 @@ export * from './animation'
 export * from './children'
 export * from './input'
 export * from './pressability'
-export * from './propTypes'
+export * from './props'
 
 export { default as info } from './info'
 export { default as useCopy } from './useCopy'
@@ -12,3 +12,5 @@ export { default as useSpacingScale } from './useSpacingScale'
 export { default as useResponsiveProp } from './useResponsiveProp'
 export * from './useResponsiveProp'
 export { default as useUniqueId } from './useUniqueId'
+export { default as withLinkRouter } from './withLinkRouter'
+export * from './ssr'

package/src/utils/pressability.js

@@ -1,5 +1,5 @@
 import { Platform, StyleSheet } from 'react-native'
-import { pressProps } from './propTypes'
+import pressProps from './props/pressProps'
 
 /**
  * @typedef {import('react').ReactNode} ReactNode