@telus-uds/components-base 0.0.2-prerelease.6 → 1.0.0

package/src/Tooltip/Tooltip.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { forwardRef, useEffect, useRef, useState } from 'react'
 import { Dimensions, Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 
 import PropTypes from 'prop-types'
@@ -81,7 +81,7 @@ const selectArrowStyles = (
 
 const selectTextStyles = (tokens) => applyTextStyles(selectTokens('Typography', tokens))
 const defaultControl = (pressableState, variant) => (
-  <TooltipButton variant={{ ...pressableState, ...variant }} />
+  <TooltipButton pressableState={pressableState} variant={variant} />
 )
 
 /**
@@ -99,157 +99,161 @@ const defaultControl = (pressableState, variant) => (
  * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
  * - Tooltips may also be useful when vertical space is an issue.
  */
-const Tooltip = ({ children, content, position = 'auto', copy = 'en', tokens, variant }) => {
-  const [isOpen, setIsOpen] = useState(false)
+const Tooltip = forwardRef(
+  ({ children, content, position = 'auto', copy = 'en', tokens, variant }, ref) => {
+    const [isOpen, setIsOpen] = useState(false)
 
-  const controlRef = useRef()
-  const [controlLayout, setControlLayout] = useState(null)
-  const [tooltipDimensions, setTooltipDimensions] = useState(null)
-  const [windowDimensions, setWindowDimensions] = useState(Dimensions.get('window'))
-  const [tooltipPosition, setTooltipPosition] = useState(null)
+    const controlRef = useRef()
+    const [controlLayout, setControlLayout] = useState(null)
+    const [tooltipDimensions, setTooltipDimensions] = useState(null)
+    const [windowDimensions, setWindowDimensions] = useState(Dimensions.get('window'))
+    const [tooltipPosition, setTooltipPosition] = useState(null)
 
-  const getCopy = useCopy({ dictionary, copy })
-  const themeTokens = useThemeTokens('Tooltip', tokens, variant)
+    const getCopy = useCopy({ dictionary, copy })
+    const themeTokens = useThemeTokens('Tooltip', tokens, variant)
 
-  const { arrowWidth, arrowOffset } = themeTokens
+    const { arrowWidth, arrowOffset } = themeTokens
 
-  useEffect(() => {
-    const subscription = Dimensions.addEventListener('change', ({ window }) => {
-      setWindowDimensions(window)
-    })
+    useEffect(() => {
+      const subscription = Dimensions.addEventListener('change', ({ window }) => {
+        setWindowDimensions(window)
+      })
 
-    return () => subscription?.remove()
-  })
+      return () => subscription?.remove()
+    })
 
-  const toggleIsOpen = () => setIsOpen(!isOpen)
-  const close = () => setIsOpen(false)
+    const toggleIsOpen = () => setIsOpen(!isOpen)
+    const close = () => setIsOpen(false)
 
-  const getPressableState = ({ pressed, hovered, focused }) => ({
-    pressed,
-    hover: hovered,
-    focus: focused
-  })
+    const getPressableState = ({ pressed, hovered, focused }) => ({
+      pressed,
+      hover: hovered,
+      focus: focused
+    })
 
-  const onTooltipLayout = ({
-    nativeEvent: {
-      layout: { width, height }
-    }
-  }) => {
-    if (
-      tooltipDimensions === null ||
-      tooltipDimensions.width !== width ||
-      tooltipDimensions.height !== height
-    ) {
-      setTooltipDimensions({
-        width: Platform.select({
-          web: width + 0.3, // avoids often unnecessary line breaks due to subpixel rendering of fonts
-          native: width
-        }),
-        height
-      })
+    const onTooltipLayout = ({
+      nativeEvent: {
+        layout: { width, height }
+      }
+    }) => {
+      if (
+        tooltipDimensions === null ||
+        tooltipDimensions.width !== width ||
+        tooltipDimensions.height !== height
+      ) {
+        setTooltipDimensions({
+          width: Platform.select({
+            web: width + 0.3, // avoids often unnecessary line breaks due to subpixel rendering of fonts
+            native: width
+          }),
+          height
+        })
+      }
     }
-  }
 
-  useEffect(() => {
-    if (isOpen) {
-      controlRef.current.measureInWindow((x, y, width, height) => {
-        setControlLayout({ x, y, width, height })
-      })
-    } else {
-      setControlLayout(null)
-      setTooltipDimensions(null)
-      setTooltipPosition(null)
-    }
-  }, [isOpen])
+    useEffect(() => {
+      if (isOpen) {
+        controlRef.current.measureInWindow((x, y, width, height) => {
+          setControlLayout({ x, y, width, height })
+        })
+      } else {
+        setControlLayout(null)
+        setTooltipDimensions(null)
+        setTooltipPosition(null)
+      }
+    }, [isOpen])
 
-  useEffect(() => {
-    setIsOpen(false)
-  }, [windowDimensions])
+    useEffect(() => {
+      setIsOpen(false)
+    }, [windowDimensions])
 
-  useEffect(() => {
-    if (
-      (tooltipPosition !== null && !tooltipPosition?.isNormalized) ||
-      !isOpen ||
-      controlLayout === null ||
-      tooltipDimensions == null
-    ) {
-      return
-    }
+    useEffect(() => {
+      if (
+        (tooltipPosition !== null && !tooltipPosition?.isNormalized) ||
+        !isOpen ||
+        controlLayout === null ||
+        tooltipDimensions == null
+      ) {
+        return
+      }
 
-    const updatedPosition = getTooltipPosition(position, {
-      controlLayout,
+      const updatedPosition = getTooltipPosition(position, {
+        controlLayout,
+        tooltipDimensions,
+        windowDimensions,
+        arrowWidth,
+        arrowOffset
+      })
+
+      // avoid ending up in an infinite normalization loop
+      if (tooltipPosition?.isNormalized && updatedPosition.isNormalized) {
+        return
+      }
+
+      setTooltipPosition(updatedPosition)
+    }, [
+      isOpen,
+      position,
       tooltipDimensions,
+      controlLayout,
       windowDimensions,
       arrowWidth,
-      arrowOffset
-    })
+      arrowOffset,
+      tooltipPosition
+    ])
 
-    // avoid ending up in an infinite normalization loop
-    if (tooltipPosition?.isNormalized && updatedPosition.isNormalized) {
-      return
-    }
+    const control = children !== undefined ? children : defaultControl
+    const pressableStyles =
+      control === defaultControl ? Platform.select({ web: { outline: 'none' } }) : undefined
+    const pressableHitSlop =
+      control === defaultControl ? { top: 10, bottom: 10, left: 10, right: 10 } : undefined
 
-    setTooltipPosition(updatedPosition)
-  }, [
-    isOpen,
-    position,
-    tooltipDimensions,
-    controlLayout,
-    windowDimensions,
-    arrowWidth,
-    arrowOffset,
-    tooltipPosition
-  ])
-
-  const control = children !== undefined ? children : defaultControl
-  const pressableStyles =
-    control === defaultControl ? Platform.select({ web: { outline: 'none' } }) : undefined
-  const pressableHitSlop =
-    control === defaultControl ? { top: 10, bottom: 10, left: 10, right: 10 } : undefined
-
-  return (
-    <View style={staticStyles.container}>
-      <Pressable
-        onPress={toggleIsOpen}
-        ref={controlRef}
-        onBlur={close}
-        style={pressableStyles}
-        hitSlop={pressableHitSlop}
-        accessibilityLabel={getCopy('a11yText')}
-        accessibilityRole="button"
-      >
-        {typeof control === 'function'
-          ? (pressableState) => control(getPressableState(pressableState), variant)
-          : control}
-      </Pressable>
-      {isOpen && (
-        <Backdrop onPress={close}>
-          <View
-            style={[
-              staticStyles.tooltip,
-              selectTooltipShadowStyles(themeTokens), // applied separately so that it doesn't cover the arrow
-              tooltipPosition && selectTooltipPositionStyles(tooltipPosition),
-              (tooltipPosition === null || tooltipPosition?.isNormalized) &&
-                staticStyles.tooltipHidden // visually hide the tooltip until we have a final measurement
-            ]}
-            onLayout={onTooltipLayout}
-            accessibilityRole="alert"
-          >
+    return (
+      <View style={staticStyles.container}>
+        <Pressable
+          onPress={toggleIsOpen}
+          ref={controlRef}
+          onBlur={close}
+          style={pressableStyles}
+          hitSlop={pressableHitSlop}
+          accessibilityLabel={getCopy('a11yText')}
+          accessibilityRole="button"
+        >
+          {typeof control === 'function'
+            ? (pressableState) => control(getPressableState(pressableState), variant)
+            : control}
+        </Pressable>
+        {isOpen && (
+          <Backdrop onPress={close}>
             <View
+              ref={ref}
               style={[
-                staticStyles.arrow,
-                tooltipPosition && selectArrowStyles(themeTokens, tooltipPosition)
+                staticStyles.tooltip,
+                selectTooltipShadowStyles(themeTokens), // applied separately so that it doesn't cover the arrow
+                tooltipPosition && selectTooltipPositionStyles(tooltipPosition),
+                (tooltipPosition === null || tooltipPosition?.isNormalized) &&
+                  staticStyles.tooltipHidden // visually hide the tooltip until we have a final measurement
               ]}
-            />
-            <View style={selectTooltipStyles(themeTokens)}>
-              <Text style={selectTextStyles(themeTokens)}>{content}</Text>
+              onLayout={onTooltipLayout}
+              accessibilityRole="alert"
+            >
+              <View
+                style={[
+                  staticStyles.arrow,
+                  tooltipPosition && selectArrowStyles(themeTokens, tooltipPosition)
+                ]}
+              />
+              <View style={selectTooltipStyles(themeTokens)}>
+                <Text style={selectTextStyles(themeTokens)}>{content}</Text>
+              </View>
             </View>
-          </View>
-        </Backdrop>
-      )}
-    </View>
-  )
-}
+          </Backdrop>
+        )}
+      </View>
+    )
+  }
+)
+Tooltip.displayName = 'Tooltip'
 
 Tooltip.propTypes = {
   /**

package/src/TooltipButton/TooltipButton.jsx

@@ -1,51 +1,47 @@
 import React from 'react'
 import { View } from 'react-native'
 
-import { useThemeTokens } from '../ThemeProvider'
+import PropTypes from 'prop-types'
+import { useThemeTokens, applyOuterBorder } from '../ThemeProvider'
 import { getTokensPropType, variantProp } from '../utils'
+import Icon from '../Icon'
 
-const selectOuterContainerStyles = ({
-  outerBorderColor,
-  outerBorderWidth = 0,
-  outerBorderGap = 0,
-  outerBorderRadius
-}) => {
-  const outerBorderOffset = -1 * (outerBorderWidth + outerBorderGap)
-
-  return {
-    marginTop: outerBorderOffset,
-    marginLeft: outerBorderOffset,
-    marginRight: outerBorderOffset,
-    marginBottom: outerBorderOffset,
-    borderColor: outerBorderColor,
-    borderWidth: outerBorderWidth,
-    padding: outerBorderGap,
-    borderRadius: outerBorderRadius
-  }
-}
 const selectInnerContainerStyles = ({ borderRadius, width }) => ({ borderRadius, width })
 
-const selectIconTokens = ({ iconSize, iconColor, iconScale = 1 }) => ({
+const selectIconTokens = ({ iconSize, iconColor /* iconScale = 1 */ }) => ({
   size: iconSize,
-  color: iconColor,
-  scale: iconScale
+  color: iconColor
+  // scale: iconScale TODO re-enable with icon component
 })
 
-const TooltipButton = ({ tokens, variant }) => {
-  const themeTokens = useThemeTokens('TooltipButton', tokens, variant)
+/**
+ * `TooltipButton` is a helper component used as a default control for the `Tooltip` component.
+ * 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 themeTokens = useThemeTokens('TooltipButton', tokens, variant, pressableState)
 
   const { icon: IconComponent } = themeTokens
 
   return (
-    <View style={selectOuterContainerStyles(themeTokens)}>
+    <View style={applyOuterBorder(themeTokens)}>
       <View style={selectInnerContainerStyles(themeTokens)}>
-        {IconComponent && <IconComponent tokens={selectIconTokens(themeTokens)} />}
+        {IconComponent && <Icon icon={IconComponent} tokens={selectIconTokens(themeTokens)} />}
       </View>
     </View>
   )
 }
 
 TooltipButton.propTypes = {
+  /**
+   * Used as appearances when resolving theme tokens.
+   */
+  pressableState: PropTypes.shape({
+    pressed: PropTypes.bool,
+    hover: PropTypes.bool,
+    focus: PropTypes.bool
+  }),
   tokens: getTokensPropType('TooltipButton'),
   variant: variantProp.propType
 }

package/src/Typography/Typography.jsx

@@ -1,31 +1,22 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { Platform, Text, View } from 'react-native'
+import { Text, View } from 'react-native'
 
 import { useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 import { applyTextStyles } from '../ThemeProvider/utils'
-import { a11yProps, variantProp, getTokensPropType } from '../utils/propTypes'
-
-/**
- * If passed a string like 'h1', 'h2' etc, returns the heading number as a string,
- * else returns false
- */
-function getHeadingLevel(heading) {
-  const match = typeof heading === 'string' && heading.match(/^h(\d)$/)
-  return match && match[1]
-}
-
+import {
+  a11yProps,
+  variantProp,
+  getTokensPropType,
+  getMaxFontMultiplier,
+  headingTags,
+  textTags,
+  getA11yPropsFromHtmlTag
+} from '../utils'
 /**
- * Enforces `fontScaleCap` theme tokens as the maximum font size text can become
- * after iOS or Android font scaling, to give consistent accessible maximum sizes
- * that don't make the content unusable
+ * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
-function getMaxFontMultiplier({ fontSize, fontScaleCap }) {
-  if (!fontScaleCap || !fontSize) return undefined
-  if (fontScaleCap <= fontSize) return 1
-  return fontScaleCap / fontSize
-}
 
 const selectTextStyles = ({
   fontWeight,
@@ -34,7 +25,8 @@ const selectTextStyles = ({
   lineHeight,
   fontName,
   textAlign,
-  textTransform
+  textTransform,
+  letterSpacing
 }) =>
   applyTextStyles({
     fontWeight,
@@ -43,55 +35,76 @@ const selectTextStyles = ({
     lineHeight,
     fontName,
     textAlign,
-    textTransform
+    textTransform,
+    letterSpacing
   })
 
 // General-purpose flexible theme-neutral base component for text
-const Typography = ({
-  children,
-  variant,
-  heading,
-  block = false,
-  align = undefined,
-  accessibilityRole = heading ? 'header' : 'text',
-  tokens,
-  ...rest
-}) => {
-  const viewport = useViewport()
-  const themeTokens = useThemeTokens('Typography', tokens, variant, { viewport })
-  const textProps = {
-    style: selectTextStyles(align ? { ...themeTokens, textAlign: align } : themeTokens)
-  }
-  if (Platform.OS !== 'web') textProps.maxFontSizeMultiplier = getMaxFontMultiplier(themeTokens)
+const Typography = forwardRef(
+  (
+    {
+      children,
+      variant,
+      heading,
+      tag = typeof heading === 'string' ? heading : undefined,
+      accessibilityRole = heading === true ? 'header' : undefined,
+      block = false,
+      align = undefined,
+      tokens,
+      dataSet,
+      ...rest
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const themeTokens = useThemeTokens('Typography', tokens, variant, { viewport })
+    const textProps = {
+      style: selectTextStyles(align ? { ...themeTokens, textAlign: align } : themeTokens),
+      dataSet,
+      maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
+    }
 
-  const headingLevel = getHeadingLevel(heading)
-  const a11y = {
-    ...a11yProps.select(rest),
-    accessibilityRole,
-    // On React Native Web, `aria-level` controls which heading tag (h1, h2 etc) is used.
-    // Must be hyphenated, not camel case; `accessibilityLevel` only works on RNW >=0.15.1
-    [headingLevel && 'aria-level']: headingLevel
-  }
+    const a11y = {
+      ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
+      ...a11yProps.select(rest)
+    }
 
-  return block ? (
-    <View {...a11y}>
-      <Text {...textProps}>{children}</Text>
-    </View>
-  ) : (
-    <Text {...textProps} {...a11y}>
-      {children}
-    </Text>
-  )
-}
+    return block ? (
+      <View ref={ref} {...a11y}>
+        <Text {...textProps}>{children}</Text>
+      </View>
+    ) : (
+      <Text ref={ref} {...textProps} {...a11y}>
+        {children}
+      </Text>
+    )
+  }
+)
+Typography.displayName = 'Typography'
 
 Typography.propTypes = {
   ...a11yProps.types,
   tokens: getTokensPropType('Typography'),
   variant: variantProp.propType,
   /**
-   * If truthy, will render a heading; if a html heading tag is provided, uses that tag on Web
+   * Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.
+   *
+   * Does not affect styling: <Typography heading="h2"> will render a <h2> that looks like plain text.
+   * Use both `heading` and `variant` props to render semantic headings that look like headings.
+   *
+   * In native apps, if this is `true` or any html heading tag string and accessibilityRole prop
+   * is not defined, the accessibilityRole will default to "heading".
+   */
+  heading: PropTypes.oneOf([...headingTags, true]),
+  /**
+   * Optional semantic HTML tag, to apply to the text on web. Does not change styling.
+   *
+   * `tag` and `heading` props set the same thing, so shouldn't be used together (`tag` overrides `heading`).
+   *
+   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
+   * is not defined, the accessibilityRole will default to "heading".
    */
-  heading: PropTypes.oneOf([true, 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+  tag: PropTypes.oneOf(textTags),
   /**
    * If true, forces the element to behave as a View block even if nested in other text
    */

package/src/index.js

@@ -1,20 +1,42 @@
+export { default as A11yText } from './A11yText'
 export { default as ActivityIndicator } from './ActivityIndicator'
 export { default as Box } from './Box'
 export * from './Button'
-export { default as Card } from './Card'
+export { default as Card, PressableCardBase } from './Card'
+export { default as Checkbox } from './Checkbox'
+export * from './Checkbox'
 export { default as Divider } from './Divider'
 export { default as ExpandCollapse, Accordion } from './ExpandCollapse'
 export { default as Feedback } from './Feedback'
+export { default as Fieldset } from './Fieldset'
 export { default as FlexGrid } from './FlexGrid'
+export { default as HorizontalScroll } from './HorizontalScroll'
+export * from './HorizontalScroll'
 export { default as Icon } from './Icon'
 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 Modal } from './Modal'
+export { default as Notification } from './Notification'
 export { default as Pagination } from './Pagination'
+export { default as Progress } from './Progress'
+export { default as Radio } from './Radio'
+export * from './Radio'
+export { default as RadioCard } from './RadioCard'
+export * from './RadioCard'
+export { default as Search } from './Search'
+export { default as Select } from './Select'
 export { default as SideNav } from './SideNav'
+export { default as Skeleton } from './Skeleton'
 export { default as Spacer } from './Spacer'
 export { default as StackView } from './StackView'
 export * from './StackView'
-export { default as TextInput } from './TextInput'
+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 { default as Tooltip } from './Tooltip'
 export { default as TooltipButton } from './TooltipButton'
@@ -23,6 +45,12 @@ 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 ThemeProvider, useTheme, useSetTheme, useThemeTokens } from './ThemeProvider'
+export {
+  default as ThemeProvider,
+  useTheme,
+  useSetTheme,
+  useThemeTokens,
+  getThemeTokens
+} from './ThemeProvider'
 
 export * from './utils'

package/src/utils/a11y/index.js

@@ -0,0 +1,2 @@
+export * from './textSize'
+export * from './semantics'