@telus-uds/components-base 1.0.0 → 1.2.0

package/src/Pagination/PageButton.jsx

@@ -8,8 +8,10 @@ import {
   copyPropTypes,
   getTokensPropType,
   hrefAttrsProp,
+  linkProps,
   selectTokens,
-  variantProp
+  variantProp,
+  withLinkRouter
 } from '../utils'
 
 import useCopy from '../utils/useCopy'
@@ -57,12 +59,7 @@ const PageButton = forwardRef(
 PageButton.displayName = 'PageButton'
 
 PageButton.propTypes = {
-  // Spreading any props into a secondary component accessed like Pagination.PageButton
-  // crashes a Docusaurus props table, but only in production, not in development
-  onPress: PropTypes.func,
-  href: PropTypes.string,
-  // If the above is fixed, the above can be replaced with this which includes full a11y etc:
-  // ...linkProps.types,
+  ...linkProps.types,
   label: PropTypes.string,
   isActive: PropTypes.bool,
   copy: copyPropTypes,
@@ -70,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/StackView/StackView.jsx

@@ -98,6 +98,7 @@ StackView.displayName = 'StackView'
 
 StackView.propTypes = {
   ...a11yProps.propTypes,
+  ...viewProps.types,
   tokens: getTokensPropType('StackView'),
   variant: variantProp.propType,
   /**

package/src/StackView/StackWrap.jsx

@@ -4,6 +4,12 @@ import { Platform } from 'react-native'
 import StackWrapBox from './StackWrapBox'
 import StackWrapGap from './StackWrapGap'
 
+// In Jest/CI/SSR, global CSS isn't always available and doesn't always have .supports method
+const cssSupports = (...args) =>
+  typeof window !== 'undefined' &&
+  typeof window.CSS?.supports === 'function' &&
+  window.CSS.supports(...args)
+
 // CSS.supports needs an example of the type of value you intend to use.
 // Will be an integer appended `px` after hooks and JSX styles are resolved.
 const exampleGapValue = '1px'
@@ -20,12 +26,7 @@ const StackWrap = forwardRef((props, ref) => {
   // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
   const gap = props.gap ?? space
 
-  const canUseCSSGap =
-    Platform.OS === 'web' &&
-    gap === space &&
-    // In Jest/CI, global CSS isn't always available and doesn't always have .supports method
-    typeof CSS?.supports === 'function' &&
-    CSS.supports('gap', exampleGapValue)
+  const canUseCSSGap = Platform.OS === 'web' && gap === space && cssSupports('gap', exampleGapValue)
 
   return canUseCSSGap ? (
     // If possible, use the cleaner implementation that applies CSS `gap` styles to the container.

package/src/StackView/StackWrapBox.jsx

@@ -91,6 +91,7 @@ StackWrapBox.displayName = 'StackWrapBox'
 
 StackWrapBox.propTypes = {
   ...a11yProps.propTypes,
+  ...viewProps.types,
   tokens: getTokensPropType('StackView'),
   /**
    * Sets the `flexDirection` of the container

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({