@telus-uds/components-base 1.0.1 → 1.3.0

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/Tags/Tags.jsx

@@ -8,13 +8,7 @@ import Icon from '../Icon'
 import { StackWrap, getStackedContent } from '../StackView'
 import { useViewport } from '../ViewportProvider'
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
-import {
-  a11yProps,
-  pressProps,
-  variantProp,
-  getTokensPropType,
-  selectTokens
-} from '../utils/propTypes'
+import { a11yProps, pressProps, variantProp, getTokensPropType, selectTokens } from '../utils/props'
 import { useMultipleInputValues } from '../utils/input'
 import { getPressHandlersWithArgs } from '../utils/pressability'
 

package/src/ThemeProvider/useThemeTokens.js

@@ -2,9 +2,9 @@ import { useCallback } from 'react'
 import useTheme from './useTheme'
 import { getComponentTheme, getThemeTokens, resolveThemeTokens, mergeAppearances } from './utils'
 /**
- * @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/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,17 +1,14 @@
 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,
-  pressProps,
-  variantProp,
-  getTokensPropType,
-  selectTokens
-} from '../utils/propTypes'
+import { a11yProps, pressProps, variantProp, getTokensPropType, selectTokens } from '../utils/props'
 import { useInputValue } from '../utils/input'
+import { useUniqueId } from '../utils'
 
 const selectButtonTokens = (tokens) =>
   selectTokens('Button', {
@@ -54,12 +51,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 +93,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 +171,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/props'
+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

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/index.js

@@ -17,7 +17,7 @@ export * from './Icon'
 export { default as IconButton } from './IconButton'
 export { default as InputLabel } from './InputLabel'
 export * from './Link'
-export { default as List } from './List'
+export { default as List, ListItem, ListBase } from './List'
 export { default as Modal } from './Modal'
 export { default as Notification } from './Notification'
 export { default as Pagination } from './Pagination'
@@ -37,7 +37,7 @@ 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'

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/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,4 @@ 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'

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