@telus-uds/components-base 1.1.0 → 1.2.0

package/src/Link/LinkBase.jsx

@@ -6,9 +6,11 @@ import {
   hrefAttrsProp,
   variantProp,
   linkProps,
-  getTokensPropType
+  getTokensPropType,
+  clickProps
 } from '../utils/propTypes'
 import { resolvePressableTokens } from '../utils/pressability'
+import { withLinkRouter } from '../utils'
 
 import InlinePressable from './InlinePressable'
 import { applyTextStyles, applyOuterBorder } from '../ThemeProvider'
@@ -92,7 +94,6 @@ const LinkBase = forwardRef(
   (
     {
       href,
-      onPress,
       icon,
       iconPosition = icon ? 'left' : undefined,
       iconProps,
@@ -101,10 +102,11 @@ const LinkBase = forwardRef(
       children,
       accessibilityRole = 'link',
       dataSet,
-      ...props
+      ...rawRest
     },
     ref
   ) => {
+    const { onPress, ...props } = clickProps.toPressProps(rawRest)
     const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
     const linkPropSet = linkProps.select({
       accessibilityRole,
@@ -200,4 +202,4 @@ const staticStyles = StyleSheet.create({
   }
 })
 
-export default LinkBase
+export default withLinkRouter(LinkBase)

package/src/Pagination/PageButton.jsx

@@ -10,7 +10,8 @@ import {
   hrefAttrsProp,
   linkProps,
   selectTokens,
-  variantProp
+  variantProp,
+  withLinkRouter
 } from '../utils'
 
 import useCopy from '../utils/useCopy'
@@ -66,4 +67,4 @@ PageButton.propTypes = {
   tokens: getTokensPropType('PaginationPageButton')
 }
 
-export default PageButton
+export default withLinkRouter(PageButton)

package/src/Pagination/Pagination.jsx

@@ -1,7 +1,13 @@
 import React, { forwardRef } from 'react'
 import { View, Text, StyleSheet } from 'react-native'
 
-import { componentPropType, copyPropTypes, getTokensPropType, variantProp } from '../utils'
+import {
+  componentPropType,
+  copyPropTypes,
+  getTokensPropType,
+  variantProp,
+  withLinkRouter
+} from '../utils'
 import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 import Box from '../Box'
@@ -20,7 +26,19 @@ const selectTextStyles = ({ color, fontName, fontSize, fontWeight, lineHeight })
   })
 
 const Pagination = forwardRef(
-  ({ children, copy = 'en', variant, tokens, sideButtonVariant, sideButtonTokens }, ref) => {
+  (
+    {
+      children,
+      copy = 'en',
+      variant,
+      tokens,
+      sideButtonVariant,
+      sideButtonTokens,
+      LinkRouter,
+      linkRouterProps
+    },
+    ref
+  ) => {
     const viewport = useViewport()
     const { truncateAbove, gap, ...themeTokens } = useThemeTokens('Pagination', tokens, variant, {
       viewport
@@ -58,16 +76,22 @@ const Pagination = forwardRef(
           copy={copy}
           variant={sideButtonVariant}
           tokens={sideButtonTokens}
+          LinkRouter={LinkRouter}
+          linkRouterProps={linkRouterProps}
         />
       ),
       ...items.map((child, itemIndex) => {
         const buttonLabel = `${itemIndex + 1}`
         const itemProps = getItemProps(itemIndex)
+        const ItemLinkRouter = itemProps.LinkRouter ?? LinkRouter
+        const itemLinkRouterProps = { ...linkRouterProps, ...itemProps.linkRouterProps }
 
         if (shouldRenderButton(itemIndex)) {
           return (
             <PageButton
               {...itemProps}
+              LinkRouter={ItemLinkRouter}
+              linkRouterProps={itemLinkRouterProps}
               label={buttonLabel}
               copy={copy}
               isActive={isItemActive(itemIndex)}
@@ -88,6 +112,8 @@ const Pagination = forwardRef(
           copy={copy}
           variant={sideButtonVariant}
           tokens={sideButtonTokens}
+          LinkRouter={LinkRouter}
+          linkRouterProps={linkRouterProps}
         />
       )
     ]
@@ -112,6 +138,7 @@ PageButton.displayName = 'PageButton'
 Pagination.PageButton = PageButton
 
 Pagination.propTypes = {
+  ...withLinkRouter.propTypes,
   children: componentPropType('PageButton'),
   copy: copyPropTypes,
   variant: variantProp.propType,

package/src/Pagination/SideButton.jsx

@@ -7,7 +7,7 @@ import ButtonBase from '../Button/ButtonBase'
 import { IconText } from '../Icon'
 import { useThemeTokensCallback } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
-import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens } from '../utils'
+import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens, withLinkRouter } from '../utils'
 
 import dictionary from './dictionary'
 import useCopy from '../utils/useCopy'
@@ -82,4 +82,4 @@ SideButton.propTypes = {
   ...linkProps.types
 }
 
-export default SideButton
+export default withLinkRouter(SideButton)

package/src/Radio/Radio.jsx

@@ -2,8 +2,6 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 
-// @todo move `LabelContent` outside of the `InputLabel` and fix
-// the issue with the cursor not being pointer on Web
 import RadioLabel from '../InputLabel/LabelContent'
 import RadioButton, { selectRadioButtonTokens } from './RadioButton'
 import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'

package/src/Tabs/Tabs.jsx

@@ -4,7 +4,7 @@ import ABBPropTypes from 'airbnb-prop-types'
 
 import { useThemeTokens } from '../ThemeProvider'
 import StackView from '../StackView'
-import { getTokensPropType, variantProp, useHash, useInputValue } from '../utils'
+import { getTokensPropType, variantProp, useHash, useInputValue, withLinkRouter } from '../utils'
 import HorizontalScroll, {
   horizontalScrollUtils,
   HorizontalScrollButton
@@ -19,7 +19,18 @@ const { selectHorizontalScrollTokens, useItemPositions } = horizontalScrollUtils
  */
 const Tabs = forwardRef(
   (
-    { tokens, itemTokens, scrollButtonTokens, variant, value, initialValue, onChange, items = [] },
+    {
+      tokens,
+      itemTokens,
+      scrollButtonTokens,
+      variant,
+      value,
+      initialValue,
+      onChange,
+      items = [],
+      LinkRouter,
+      linkRouterProps
+    },
     ref
   ) => {
     const { space, ...themeTokens } = useThemeTokens('Tabs', tokens, variant)
@@ -49,26 +60,40 @@ const Tabs = forwardRef(
         accessibilityRole="tablist"
       >
         <StackView space={space} direction="row">
-          {items.map(({ href, label, id, ref: itemRef }, index) => {
-            const itemId = id ?? label
-            const isSelected = Boolean(currentValue && currentValue === itemId)
-            const handlePress = (event) => setValue(itemId, event)
-            return (
-              <TabsItem
-                ref={itemRef}
-                key={itemId}
-                href={href}
-                variant={variant}
-                tokens={itemTokens}
-                onPress={handlePress}
-                selected={isSelected}
-                itemPositions={itemPositions}
-                index={index}
-              >
-                {label}
-              </TabsItem>
-            )
-          })}
+          {items.map(
+            (
+              {
+                href,
+                label,
+                id,
+                ref: itemRef,
+                LinkRouter: ItemLinkRouter = LinkRouter,
+                linkRouterProps: itemLinkRouterProps
+              },
+              index
+            ) => {
+              const itemId = id ?? label
+              const isSelected = Boolean(currentValue && currentValue === itemId)
+              const handlePress = (event) => setValue(itemId, event)
+              return (
+                <TabsItem
+                  ref={itemRef}
+                  key={itemId}
+                  href={href}
+                  variant={variant}
+                  tokens={itemTokens}
+                  onPress={handlePress}
+                  selected={isSelected}
+                  itemPositions={itemPositions}
+                  index={index}
+                  LinkRouter={ItemLinkRouter}
+                  linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
+                >
+                  {label}
+                </TabsItem>
+              )
+            }
+          )}
         </StackView>
       </HorizontalScroll>
     )
@@ -77,8 +102,10 @@ const Tabs = forwardRef(
 Tabs.displayName = 'Tabs'
 
 Tabs.propTypes = {
+  ...withLinkRouter.PropTypes,
   items: PropTypes.arrayOf(
     PropTypes.shape({
+      ...withLinkRouter.PropTypes,
       href: PropTypes.string,
       label: PropTypes.string,
       id: PropTypes.string,

package/src/Tabs/TabsItem.jsx

@@ -9,7 +9,9 @@ import {
   variantProp,
   getTokensPropType,
   linkProps,
-  a11yProps
+  a11yProps,
+  clickProps,
+  withLinkRouter
 } from '../utils'
 import Spacer from '../Spacer'
 import { horizontalScrollUtils } from '../HorizontalScroll'
@@ -73,7 +75,6 @@ const selectContainerStyles = ({
 const TabsItem = forwardRef(
   (
     {
-      onPress,
       href,
       variant,
       tokens,
@@ -86,10 +87,13 @@ const TabsItem = forwardRef(
         ? // Web links can't be aria-selected but can be aria-current
           { current: selected ? 'page' : false }
         : { selected },
-      ...rest
+      ...rawRest
     },
     ref
   ) => {
+    // Convert onClick etc to onPress etc if used in an integration
+    const { onPress, ...rest } = clickProps.toPressProps(rawRest)
+
     const getTokens = useThemeTokensCallback('TabsItem', tokens, variant)
     const resolveTokens = (pressableState) =>
       resolvePressableTokens(getTokens, pressableState, { selected })
@@ -105,9 +109,9 @@ const TabsItem = forwardRef(
     const openHref = href && linkProps.handleHref({ href })
     const handlePress =
       onPress || openHref
-        ? () => {
-            if (onPress) onPress()
-            if (openHref) openHref()
+        ? (...args) => {
+            if (onPress) onPress(...args)
+            if (openHref) openHref(...args)
           }
         : undefined
 
@@ -209,4 +213,4 @@ const staticStyles = StyleSheet.create({
   }
 })
 
-export default TabsItem
+export default withLinkRouter(TabsItem)

package/src/ToggleSwitch/ToggleSwitch.jsx

@@ -1,8 +1,10 @@
 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,
@@ -12,6 +14,7 @@ import {
   selectTokens
 } from '../utils/propTypes'
 import { useInputValue } from '../utils/input'
+import { useUniqueId } from '../utils'
 
 const selectButtonTokens = (tokens) =>
   selectTokens('Button', {
@@ -54,12 +57,40 @@ 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
+    },
     ref
   ) => {
     const getTokens = useThemeTokensCallback('ToggleSwitch', tokens, variant)
+    const themeTokens = getTokens()
 
     const { currentValue, setValue } = useInputValue({
       value,
@@ -68,43 +99,58 @@ 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)
+      <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}
+        >
+          {(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 =
-            themeTokens.width - themeTokens.switchSize - themeTokens.trackBorderWidth * 2
-          const switchOffset = buttonState.selected ? slideEnd : slideStart
-          const switchPositionStyle = { transform: [{ translateX: switchOffset }] }
+            // 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} />}
+            return (
+              <View style={[staticStyles.track, trackStyles]}>
+                <View style={[staticStyles.switch, switchStyles, switchPositionStyle]}>
+                  {IconComponent && <IconComponent {...iconTokens} />}
+                </View>
               </View>
-            </View>
-          )
-        }}
-      </ButtonBase>
+            )
+          }}
+        </ButtonBase>
+      </StackView>
     )
   }
 )
@@ -131,11 +177,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,203 @@
+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, pressProps, variantProp, getTokensPropType } from '../utils/propTypes'
+import { useMultipleInputValues } from '../utils/input'
+
+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 a11y = a11yProps.select({
+      accessibilityRole,
+      ...rest
+    })
+    const itemA11yRole = a11y.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}
+        {...a11y}
+      >
+        {getStackedContent(toggleSwitches, { space, direction: 'column' })}
+      </Fieldset>
+    )
+  }
+)
+ToggleSwitchGroup.displayName = 'ToggleSwitchGroup'
+
+ToggleSwitchGroup.propTypes = {
+  ...a11yProps.propTypes,
+  ...pressProps.propTypes,
+  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