@telus-uds/components-base 0.0.2-prerelease.7 → 1.0.1

package/src/IconButton/IconButton.jsx

@@ -0,0 +1,114 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { Pressable, Platform, StyleSheet, View } from 'react-native'
+
+import { applyOuterBorder, useThemeTokensCallback, applyShadowToken } from '../ThemeProvider'
+import {
+  variantProp,
+  linkProps,
+  resolvePressableState,
+  hrefAttrsProp,
+  getTokensPropType,
+  selectTokens
+} from '../utils'
+import { a11yProps } from '../utils/propTypes'
+import Icon from '../Icon'
+
+const selectOuterStyle = ({
+  backgroundColor,
+  borderRadius,
+  outerBorderWidth,
+  outerBorderColor,
+  outerBorderGap,
+  shadow
+}) => [
+  {
+    backgroundColor,
+    ...applyShadowToken(shadow),
+    ...applyOuterBorder({ borderRadius, outerBorderWidth, outerBorderColor, outerBorderGap }),
+    ...Platform.select({ web: { outline: 'none', display: 'inline-flex' } })
+  },
+  staticStyles.outer
+]
+
+const selectInnerStyle = ({ borderColor, borderWidth = 0, borderRadius, padding = 0 }) => ({
+  // Inner borders animate with the icon and should be treated like a themable feature of the icon
+  borderColor,
+  borderRadius,
+  borderWidth,
+  padding: Math.max(0, padding - borderWidth) // Stable size as border changes
+})
+
+/**
+ * A pressable themeless base component that handles pressable states and passes tokens
+ * based on these to an outer border and a base Card component. Not intended to be used in
+ * apps or sites directly: build themed components on top of this.
+ */
+const IconButton = forwardRef(
+  (
+    {
+      tokens,
+      variant,
+      icon: IconComponent,
+      href,
+      hrefAttrs,
+      onPress,
+      accessibilityRole = href ? 'link' : 'button',
+      ...rest
+    },
+    ref
+  ) => {
+    const a11y = a11yProps.select({
+      ...rest,
+      accessibilityRole
+    })
+    const handlePress = linkProps.handleHref({ href, onPress })
+
+    const getTokens = useThemeTokensCallback('IconButton', tokens, variant)
+    const getOuterStyle = (pressableState) =>
+      selectOuterStyle(getTokens(resolvePressableState(pressableState)))
+
+    return (
+      <Pressable
+        ref={ref}
+        href={href}
+        onPress={handlePress}
+        hrefAttrs={hrefAttrs}
+        style={getOuterStyle}
+        {...a11y}
+      >
+        {(pressableState) => {
+          const themeTokens = getTokens(resolvePressableState(pressableState))
+          return (
+            <View style={selectInnerStyle(themeTokens)}>
+              <Icon
+                icon={IconComponent}
+                title={a11y.accessibilityLabel}
+                tokens={selectTokens('Icon', themeTokens, 'icon')}
+              />
+            </View>
+          )
+        }}
+      </Pressable>
+    )
+  }
+)
+IconButton.displayName = 'IconButton'
+
+IconButton.propTypes = {
+  ...a11yProps.types,
+  variant: variantProp.propType,
+  tokens: getTokensPropType('IconButton'),
+  icon: PropTypes.elementType.isRequired,
+  href: PropTypes.string,
+  hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
+  onPress: PropTypes.func
+}
+
+const staticStyles = StyleSheet.create({
+  outer: {
+    alignSelf: 'flex-start'
+  }
+})
+
+export default IconButton

package/src/IconButton/index.js

@@ -0,0 +1,3 @@
+import IconButton from './IconButton'
+
+export default IconButton

package/src/InputLabel/InputLabel.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -27,52 +27,71 @@ const selectHintStyles = ({
 
 const selectGapStyles = ({ gap }) => ({ marginRight: gap })
 
-function InputLabel({
-  label,
-  forId,
-  hint,
-  hintPosition = 'inline',
-  hintId,
-  tooltip,
-  tokens,
-  variant
-}) {
-  const themeTokens = useThemeTokens('InputLabel', tokens, variant)
+const InputLabel = forwardRef(
+  ({ label, forId, hint, hintPosition = 'inline', hintId, tooltip, tokens, variant }, ref) => {
+    const themeTokens = useThemeTokens('InputLabel', tokens, variant)
 
-  const hasTooltip = tooltip !== undefined
-  const isHintInline = hintPosition === 'inline'
+    const hasTooltip = tooltip !== undefined
+    const isHintInline = hintPosition === 'inline'
 
-  return (
-    <View style={[staticStyles.container, !isHintInline && staticStyles.containerWithHintBelow]}>
-      <Text
-        style={[selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label]}
+    return (
+      <View
+        ref={ref}
+        style={[staticStyles.container, !isHintInline && staticStyles.containerWithHintBelow]}
       >
-        <LabelContent forId={forId}>{label}</LabelContent>
-      </Text>
-      {hint && isHintInline && (
         <Text
-          style={[selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens)]}
-          nativeID={hintId}
+          style={[selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label]}
         >
-          {hint}
+          <LabelContent forId={forId}>{label}</LabelContent>
         </Text>
-      )}
-      {hasTooltip && <Tooltip content={tooltip} />}
-      {hint && !isHintInline && (
-        <Text style={[selectHintStyles(themeTokens), staticStyles.hintBelow]} nativeID={hintId}>
-          {hint}
-        </Text>
-      )}
-    </View>
-  )
-}
+        {hint && isHintInline && (
+          <Text
+            style={[selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens)]}
+            nativeID={hintId}
+          >
+            {hint}
+          </Text>
+        )}
+        {hasTooltip && (
+          <View style={staticStyles.tooltipAlign}>
+            <Tooltip content={tooltip} />
+          </View>
+        )}
+        {hint && !isHintInline && (
+          <Text style={[selectHintStyles(themeTokens), staticStyles.hintBelow]} nativeID={hintId}>
+            {hint}
+          </Text>
+        )}
+      </View>
+    )
+  }
+)
+InputLabel.displayName = 'InputLabel'
 
 InputLabel.propTypes = {
+  /**
+   * The input label.
+   */
   label: PropTypes.string.isRequired,
+  /**
+   * The id attribute of the input which this label refers to.
+   */
   forId: PropTypes.string,
+  /**
+   * A short description of the expected input.
+   */
   hint: PropTypes.string,
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
   hintPosition: PropTypes.oneOf(['inline', 'below']),
+  /**
+   * The id attribute passed down to the hint element.
+   */
   hintId: PropTypes.string,
+  /**
+   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+   */
   tooltip: PropTypes.string,
   tokens: getTokensPropType('InputLabel'),
   variant: variantProp.propType
@@ -84,7 +103,7 @@ const staticStyles = StyleSheet.create({
   container: {
     display: 'flex',
     flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'baseline'
   },
   containerWithHintBelow: {
     flexWrap: 'wrap'
@@ -95,5 +114,8 @@ const staticStyles = StyleSheet.create({
   hintBelow: {
     flexBasis: '100%',
     flexShrink: 0
+  },
+  tooltipAlign: {
+    alignSelf: 'center'
   }
 })

package/src/InputLabel/LabelContent.jsx

@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+const LabelContent = forwardRef(({ children, forId }, ref) => (
+  <label ref={ref} htmlFor={forId} style={staticStyles.inheritCursor}>
+    {children}
+  </label>
+))
+LabelContent.displayName = 'LabelContent'
+
+LabelContent.propTypes = {
+  children: PropTypes.string,
+  forId: PropTypes.string
+}
+
+// Note that <label> is not React Native, so we can't use `StyleSheet.create` here
+const staticStyles = {
+  inheritCursor: { cursor: 'inherit' }
+}
+
+export default LabelContent

package/src/InputLabel/LabelContent.native.jsx

@@ -1,6 +1,15 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+
 // Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
-function LabelContent({ children }) {
-  return children
+const LabelContent = forwardRef(({ children }, ref) =>
+  ref ? <View ref={ref}>{children}</View> : children
+)
+LabelContent.displayName = 'LabelContent'
+
+LabelContent.propTypes = {
+  children: PropTypes.node
 }
 
 export default LabelContent

package/src/InputSupports/InputSupports.jsx

@@ -1,58 +1,42 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 
 import PropTypes from 'prop-types'
 import InputLabel from '../InputLabel'
 import Feedback from '../Feedback'
 import StackView from '../StackView'
 import { useThemeTokens } from '../ThemeProvider'
-import useUniqueId from '../utils/useUniqueId'
+import useInputSupports from './useInputSupports'
 
-const joinDefined = (array) => array.filter((item) => item !== undefined).join(' ')
+const InputSupports = forwardRef(
+  ({ children, label, hint, hintPosition = 'inline', feedback, tooltip, validation }, ref) => {
+    const { space } = useThemeTokens('InputSupports')
 
-function InputSupports({
-  children,
-  label,
-  hint,
-  hintPosition = 'inline',
-  feedback,
-  tooltip,
-  validation
-}) {
-  const { space } = useThemeTokens('InputSupports')
+    const { inputId, hintId, feedbackId, a11yProps } = useInputSupports({
+      feedback,
+      hint,
+      label,
+      validation
+    })
 
-  const hasValidationError = validation === 'error'
-
-  const inputId = useUniqueId('input')
-  const hintId = useUniqueId('input-hint')
-  const feedbackId = useUniqueId('input-feedback')
-
-  const a11yProps = {
-    accessibilityLabel: label,
-    accessibilityHint: joinDefined([!hasValidationError && feedback, hint]), // native only -> replaced with describedBy on web
-    accessibilityDescribedBy: joinDefined([
-      !hasValidationError && feedback && feedbackId, // feedback receives a11yRole=alert on error, so there's no need to include it here
-      hint && hintId
-    ]), // introduced in RNW 0.15.0
-    accessibilityInvalid: hasValidationError // introduced in RNW 0.15.0
+    return (
+      <StackView space={space} ref={ref}>
+        {label && (
+          <InputLabel
+            label={label}
+            hint={hint}
+            hintPosition={hintPosition}
+            hintId={hintId}
+            tooltip={tooltip}
+            forId={inputId}
+          />
+        )}
+        {typeof children === 'function' ? children({ a11yProps, inputId }) : children}
+        {feedback && <Feedback id={feedbackId} title={feedback} validation={validation} />}
+      </StackView>
+    )
   }
-
-  return (
-    <StackView space={space}>
-      {label && (
-        <InputLabel
-          label={label}
-          hint={hint}
-          hintPosition={hintPosition}
-          hintId={hintId}
-          tooltip={tooltip}
-          forId={inputId}
-        />
-      )}
-      {typeof children === 'function' ? children({ a11yProps, inputId }) : children}
-      {feedback && <Feedback id={feedbackId} title={feedback} validation={validation} />}
-    </StackView>
-  )
-}
+)
+InputSupports.displayName = 'InputSupports'
 
 InputSupports.propTypes = {
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),

package/src/InputSupports/useInputSupports.js

@@ -0,0 +1,30 @@
+import useUniqueId from '../utils/useUniqueId'
+
+const joinDefined = (array) => array.filter((item) => item !== undefined).join(' ')
+
+const useInputSupports = ({ label, feedback, validation, hint }) => {
+  const hasValidationError = validation === 'error'
+
+  const inputId = useUniqueId('input')
+  const hintId = useUniqueId('input-hint')
+  const feedbackId = useUniqueId('input-feedback')
+
+  const a11yProps = {
+    accessibilityLabel: label,
+    accessibilityHint: joinDefined([!hasValidationError && feedback, hint]), // native only -> replaced with describedBy on web
+    accessibilityDescribedBy: joinDefined([
+      !hasValidationError && feedback && feedbackId, // feedback receives a11yRole=alert on error, so there's no need to include it here
+      hint && hintId
+    ]),
+    accessibilityInvalid: hasValidationError
+  }
+
+  return {
+    inputId,
+    hintId,
+    feedbackId,
+    a11yProps
+  }
+}
+
+export default useInputSupports

package/src/Link/ChevronLink.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
 import { useThemeTokensCallback } from '../ThemeProvider'
@@ -11,24 +11,34 @@ import LinkBase from './LinkBase'
  *
  * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
  */
-const ChevronLink = ({ direction = 'right', children, tokens, variant, ...linkProps }) => {
-  const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant)
-  const applyChevronTokens = (linkState) => {
-    const { leftIcon, rightIcon, iconDisplace, ...otherTokens } = getChevronTokens(linkState)
-    return {
-      ...selectTokens('Link', otherTokens),
-      icon: direction === 'right' ? rightIcon : leftIcon,
-      iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
+const ChevronLink = forwardRef(
+  ({ direction = 'right', children, tokens, variant, dataSet, ...linkProps }, ref) => {
+    const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant)
+    const applyChevronTokens = (linkState) => {
+      const { leftIcon, rightIcon, iconDisplace, ...otherTokens } = getChevronTokens(linkState)
+      return {
+        ...selectTokens('Link', otherTokens),
+        icon: direction === 'right' ? rightIcon : leftIcon,
+        iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
+      }
     }
+
+    const getTokens = useThemeTokensCallback('Link', applyChevronTokens, variant)
+    return (
+      <LinkBase
+        {...linkProps}
+        iconPosition={direction}
+        tokens={getTokens}
+        dataSet={dataSet}
+        ref={ref}
+      >
+        {children}
+      </LinkBase>
+    )
   }
+)
 
-  const getTokens = useThemeTokensCallback('Link', applyChevronTokens, variant)
-  return (
-    <LinkBase {...linkProps} iconPosition={direction} tokens={getTokens}>
-      {children}
-    </LinkBase>
-  )
-}
+ChevronLink.displayName = 'ChevronLink'
 ChevronLink.propTypes = {
   ...LinkBase.propTypes,
   tokens: getTokensPropType('ChevronLink', 'Link'),

package/src/Link/{InlinePressable.web.jsx → InlinePressable.jsx}

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { Pressable, StyleSheet } from 'react-native'
 
 /**
@@ -15,8 +15,9 @@ import { Pressable, StyleSheet } from 'react-native'
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
 // eslint-disable-next-line react/prop-types
-const InlinePressable = ({ children, style, ...props }) => (
+const InlinePressable = forwardRef(({ children, style, ...props }, ref) => (
   <Pressable
+    ref={ref}
     style={(pressState) => [
       staticStyles.inline,
       typeof style === 'function' ? style(pressState) : style
@@ -25,7 +26,8 @@ const InlinePressable = ({ children, style, ...props }) => (
   >
     {(pressState) => (typeof children === 'function' ? children(pressState) : children)}
   </Pressable>
-)
+))
+InlinePressable.displayName = 'InlinePressable'
 
 const staticStyles = StyleSheet.create({
   inline: {

package/src/Link/InlinePressable.native.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import React, { useState } from 'react'
+import React, { forwardRef, useState } from 'react'
 import { Text, TouchableWithoutFeedback } from 'react-native'
 
 /**
@@ -38,7 +38,7 @@ const pressablePropsToTouchable = ({
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
 // eslint-disable-next-line react/prop-types
-const InlinePressable = ({ onPress, children, style, ...rest }) => {
+const InlinePressable = forwardRef(({ onPress, children, style, ...rest }, ref) => {
   const [isFocused, setIsFocused] = useState(false)
   const handleFocus = () => setIsFocused(true)
   const handleBlur = () => setIsFocused(false)
@@ -61,6 +61,7 @@ const InlinePressable = ({ onPress, children, style, ...rest }) => {
       onPressOut={handlePressOut}
       onFocus={handleFocus}
       onBlur={handleBlur}
+      ref={ref}
       {...pressablePropsToTouchable(rest)}
     >
       <Text style={currentStyle}>
@@ -68,6 +69,7 @@ const InlinePressable = ({ onPress, children, style, ...rest }) => {
       </Text>
     </TouchableWithoutFeedback>
   )
-}
+})
+InlinePressable.displayName = 'InlinePressable'
 
 export default InlinePressable

package/src/Link/Link.jsx

@@ -1,23 +1,29 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 
 import { useThemeTokensCallback } from '../ThemeProvider'
 import LinkBase from './LinkBase'
 
-const Link = ({
-  href,
-  children,
-  accessibilityRole = 'link',
-  variant = {},
-  tokens,
-  ...linkProps
-}) => {
-  const getTokens = useThemeTokensCallback('Link', tokens, variant)
-  return (
-    <LinkBase href={href} accessibilityRole={accessibilityRole} tokens={getTokens} {...linkProps}>
-      {children}
-    </LinkBase>
-  )
-}
+const Link = forwardRef(
+  (
+    { href, children, accessibilityRole = 'link', variant = {}, tokens, dataSet, ...linkProps },
+    ref
+  ) => {
+    const getTokens = useThemeTokensCallback('Link', tokens, variant)
+    return (
+      <LinkBase
+        href={href}
+        accessibilityRole={accessibilityRole}
+        tokens={getTokens}
+        ref={ref}
+        dataSet={dataSet}
+        {...linkProps}
+      >
+        {children}
+      </LinkBase>
+    )
+  }
+)
+Link.displayName = 'Link'
 
 Link.propTypes = LinkBase.propTypes