@telus-uds/components-base 2.0.0 → 2.0.2

package/src/Tooltip/getTooltipPosition.js

@@ -1,8 +1,8 @@
-function normalizePosition(position) {
+function getAbsolutePosition(position) {
   const { left, right, bottom, top, width, ...rest } = position
 
   // adjust the coordinates so that it fits within the window
-  const normalized = {
+  const finalPosition = {
     left: Math.max(0, left),
     right: Math.max(0, right),
     top: Math.max(0, top),
@@ -12,21 +12,20 @@ function normalizePosition(position) {
   const getAbsoluteDiff = (value1, value2) => Math.abs(Math.abs(value1) - Math.abs(value2))
 
   // adjust the width by whatever has been subtracted from left or right
-  normalized.width =
+  finalPosition.width =
     width -
-    Math.abs(getAbsoluteDiff(left, normalized.left) - getAbsoluteDiff(right, normalized.right))
+    Math.abs(
+      getAbsoluteDiff(left, finalPosition.left) - getAbsoluteDiff(right, finalPosition.right)
+    )
 
-  if (normalized.top !== top) {
-    normalized.bottom += normalized.top - top
+  if (finalPosition.top !== top) {
+    finalPosition.bottom += finalPosition.top - top
   }
 
-  const isNormalized =
-    normalized.right !== right || normalized.left !== left || normalized.top !== top
-
   return {
-    ...normalized,
+    ...finalPosition,
     ...rest,
-    isNormalized
+    isNormalized: false
   }
 }
 
@@ -71,7 +70,7 @@ function getTooltipPosition(
   }
 
   const verticalBounds = {
-    top: controlY + controlHeight / 2 - tooltipHeight / 2,
+    top: controlY,
     bottom: windowHeight - (controlY + controlHeight / 2 + tooltipHeight / 2)
   }
 
@@ -151,7 +150,7 @@ function getTooltipPosition(
 
   // prefer 'below' over 'above', since we can always expand the document downwards,
   // and 'above' might cause issues on small viewports with large tooltips
-  return normalizePosition(
+  return getAbsolutePosition(
     leastOverflowing.position === 'above'
       ? findRectByPosition('below', boundingRects)
       : leastOverflowing

package/src/Tooltip/shared.js

@@ -20,6 +20,23 @@ const propTypes = {
    * Use to place the tooltip in a specific location (only if it fits within viewport).
    */
   position: PropTypes.oneOf(['auto', 'above', 'right', 'below', 'left']),
+  /**
+   * Display tooltip icon button as an inline element.
+   */
+  inline: PropTypes.bool,
+  /**
+   * Callback function triggered when the tooltip is pressed.
+   */
+  onPress: PropTypes.func,
+  /**
+   * The `id` of the tooltip button.
+   */
+  nativeID: PropTypes.string,
+  /**
+   * Set to `true` to open the tooltip on hover
+   */
+  activateOnHover: PropTypes.bool,
+  tooltipButtonTokens: getTokensPropType('TooltipButton'),
   tokens: getTokensPropType('Tooltip'),
   variant: variantProp.propType
 }

package/src/TooltipButton/TooltipButton.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View } from 'react-native'
+import { View, StyleSheet, Platform } from 'react-native'
 import PropTypes from 'prop-types'
 import { useThemeTokens, applyOuterBorder } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
@@ -7,12 +7,16 @@ import Icon from '../Icon'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
-const selectInnerContainerStyles = ({ borderRadius, width }) => ({ borderRadius, width })
+const selectInnerContainerStyles = ({ borderRadius, width, backgroundColor }) => ({
+  borderRadius,
+  width,
+  backgroundColor
+})
 
-const selectIconTokens = ({ iconSize, iconColor /* iconScale = 1 */ }) => ({
+const selectIconTokens = ({ iconSize, iconColor, iconScale = 1 }) => ({
   size: iconSize,
-  color: iconColor
-  // scale: iconScale TODO re-enable with icon component
+  color: iconColor,
+  scale: iconScale
 })
 
 /**
@@ -20,19 +24,41 @@ const selectIconTokens = ({ iconSize, iconColor /* iconScale = 1 */ }) => ({
  * 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, ...rest }) => {
+const TooltipButton = React.forwardRef(({ pressableState, tokens, variant, ...rest }, ref) => {
   const themeTokens = useThemeTokens('TooltipButton', tokens, variant, pressableState)
 
   const { icon: IconComponent } = themeTokens
 
   return (
-    <View style={applyOuterBorder(themeTokens)} {...selectProps(rest)}>
+    <View
+      style={[
+        applyOuterBorder(themeTokens),
+        themeTokens.outerBorderWidth && {
+          margin: -themeTokens.outerBorderWidth
+        },
+        staticStyles.bubblePointerEvents
+      ]}
+      {...selectProps(rest)}
+      ref={ref}
+    >
       <View style={selectInnerContainerStyles(themeTokens)}>
         {IconComponent && <Icon icon={IconComponent} tokens={selectIconTokens(themeTokens)} />}
       </View>
     </View>
   )
-}
+})
+
+TooltipButton.displayName = 'TooltipButton'
+
+const staticStyles = StyleSheet.create({
+  bubblePointerEvents: {
+    ...Platform.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
+  }
+})
 
 TooltipButton.propTypes = {
   ...selectedSystemPropTypes,

package/src/Typography/Typography.jsx

@@ -1,9 +1,8 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import { Text, View } from 'react-native'
+import { Text, View, Platform } from 'react-native'
 
-import { useTheme, useThemeTokens } from '../ThemeProvider'
-import { useViewport } from '../ViewportProvider'
+import { useResponsiveThemeTokens, useTheme, useThemeTokens } from '../ThemeProvider'
 import { applyTextStyles } from '../ThemeProvider/utils'
 import {
   a11yProps,
@@ -15,17 +14,30 @@ import {
   textTags,
   textProps,
   viewProps,
-  getA11yPropsFromHtmlTag
+  getA11yPropsFromHtmlTag,
+  StyleSheet,
+  createMediaQueryStyles
 } from '../utils'
+import { useViewport } from '../ViewportProvider'
 /**
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
 
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps])
 const [selectTextProps, selectedTextPropTypes] = selectSystemProps([textProps])
-
 const selectTextStyles = (
-  { fontWeight, fontSize, color, lineHeight, fontName, textAlign, textTransform, letterSpacing },
+  {
+    fontWeight,
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    textAlign,
+    textTransform,
+    letterSpacing,
+    textDecorationLine,
+    gradient
+  },
   themeOptions
 ) =>
   applyTextStyles({
@@ -37,11 +49,23 @@ const selectTextStyles = (
     themeOptions,
     textAlign,
     textTransform,
-    letterSpacing
+    letterSpacing,
+    textDecorationLine,
+    gradient
   })
 
+const HALF_FONT_SIZE = 2
+const QUARTER_FONT_SIZE = 4
+
+const selectMobileSubSupStyles = ({ fontSize }, type) => ({
+  fontSize: fontSize / HALF_FONT_SIZE,
+  lineHeight: fontSize,
+  position: 'relative',
+  top: type === 'sub' ? fontSize / QUARTER_FONT_SIZE : -fontSize / QUARTER_FONT_SIZE
+})
+
 // General-purpose flexible theme-neutral base component for text
-const Typography = forwardRef(
+const Typography = React.forwardRef(
   (
     {
       children,
@@ -53,22 +77,105 @@ const Typography = forwardRef(
       align = undefined,
       tokens,
       dataSet,
+      strikeThrough = false,
       ...rest
     },
     ref
   ) => {
     const viewport = useViewport()
-    const themeTokens = useThemeTokens('Typography', tokens, variant, { viewport })
     const { themeOptions } = useTheme()
 
+    const { enableMediaQueryStyleSheet } = themeOptions
+
+    const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
+    const themeTokens = useTokens(
+      'Typography',
+      tokens,
+      variant,
+      !enableMediaQueryStyleSheet && { viewport }
+    )
+    const maxFontSizeMultiplier = enableMediaQueryStyleSheet
+      ? getMaxFontMultiplier(themeTokens[viewport])
+      : getMaxFontMultiplier(themeTokens)
+    const textDecorationLine = strikeThrough ? 'line-through' : 'none'
+
+    const generateGradientString = (gradientObj) => {
+      let gradientStr = ''
+
+      const {
+        type,
+        angle,
+        stops: [stopOne, stopTwo],
+        specification
+      } = gradientObj
+
+      if (type === 'radial') {
+        gradientStr = `radial-gradient(${specification}`
+        gradientStr += `, ${stopOne.color} ${stopOne.stop * 100}%, ${stopTwo.color} ${
+          stopTwo.stop * 100
+        }%`
+      } else if (type === 'linear') {
+        gradientStr = `linear-gradient(${angle}deg`
+        if (angle === 135) {
+          gradientStr += `, ${stopOne.color}, 75%, ${stopTwo.color}`
+        } else {
+          gradientStr += `, ${stopOne.color}, ${stopTwo.color}`
+        }
+      }
+
+      gradientStr += ')'
+      return gradientStr
+    }
+
+    const getStyleWithGradient = (styles) => {
+      return styles.gradient
+        ? {
+            ...styles,
+            color: 'transparent',
+            backgroundImage: generateGradientString(styles.gradient),
+            backgroundClip: 'text'
+          }
+        : styles
+    }
+
+    let textStyles
+    let mediaIds
+
+    if (enableMediaQueryStyleSheet) {
+      const transformedThemeTokens = Object.entries(themeTokens).reduce(
+        (acc, [vp, viewportTokens]) => {
+          acc[vp] = selectTextStyles(
+            {
+              textAlign: align,
+              textDecorationLine,
+              ...viewportTokens
+            },
+            themeOptions
+          )
+          return acc
+        },
+        {}
+      )
+      const mediaQueryStyles = createMediaQueryStyles(transformedThemeTokens)
+      const { ids, styles } = StyleSheet.create({
+        text: mediaQueryStyles
+      })
+      textStyles = styles.text
+      mediaIds = ids.text
+    } else {
+      textStyles = selectTextStyles(
+        {
+          textAlign: align,
+          textDecorationLine,
+          ...themeTokens
+        },
+        themeOptions
+      )
+    }
+
     const resolvedTextProps = {
       ...selectTextProps(rest),
-      style: selectTextStyles(
-        align ? { ...themeTokens, textAlign: align } : themeTokens,
-        themeOptions
-      ),
-      dataSet,
-      maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
+      maxFontSizeMultiplier
     }
 
     const containerProps = {
@@ -78,18 +185,33 @@ const Typography = forwardRef(
     }
 
     const resetTagStyling = (child) => {
-      if (typeof child === 'object' && (child?.type === 'sub' || child?.type === 'sup')) {
-        const sanitizedChild = React.cloneElement(child, {
-          style: {
-            ...child?.props?.style,
-            lineHeight: 0
-          }
-        })
-
-        return sanitizedChild
+      if (typeof child !== 'object' || !(child?.type === 'sub' || child?.type === 'sup')) {
+        return child
       }
 
-      return child
+      const childStyles = child?.props?.style || {}
+      const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize
+      const isMobile = Platform.OS === 'ios' || Platform.OS === 'android'
+      const isSubSup = child?.type === 'sub' || child?.type === 'sup'
+
+      const mobileStyles =
+        isMobile && isSubSup ? selectMobileSubSupStyles(themeTokens, child?.type) : {}
+      const defaultStyles = !isMobile && isSubSup ? { fontSize: supFontSize, lineHeight: 0 } : {}
+
+      const sanitizedChild = React.cloneElement(
+        isMobile && isSubSup ? (
+          <View>
+            <Text style={[childStyles, mobileStyles]}>{child.props.children}</Text>
+          </View>
+        ) : (
+          child
+        ),
+        {
+          style: { ...childStyles, ...defaultStyles }
+        }
+      )
+
+      return sanitizedChild
     }
 
     const sanitizeChildren = () => {
@@ -100,12 +222,26 @@ const Typography = forwardRef(
       return resetTagStyling(children)
     }
 
+    const dataSetValue = mediaIds ? { media: mediaIds, ...dataSet } : dataSet
+
     return block ? (
       <View ref={ref} {...containerProps}>
-        <Text {...resolvedTextProps}>{sanitizeChildren(children)}</Text>
+        <Text
+          {...resolvedTextProps}
+          style={getStyleWithGradient(textStyles)}
+          dataSet={dataSetValue}
+        >
+          {sanitizeChildren(children)}
+        </Text>
       </View>
     ) : (
-      <Text ref={ref} {...containerProps} {...resolvedTextProps}>
+      <Text
+        ref={ref}
+        {...containerProps}
+        {...resolvedTextProps}
+        style={getStyleWithGradient(textStyles)}
+        dataSet={dataSetValue}
+      >
         {sanitizeChildren(children)}
       </Text>
     )
@@ -118,6 +254,10 @@ Typography.propTypes = {
   ...selectedTextPropTypes,
   tokens: getTokensPropType('Typography'),
   variant: variantProp.propType,
+  /**
+   * Renders the text with "text-decoration: 'line-through'" applied.
+   */
+  strikeThrough: PropTypes.bool,
   /**
    * Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.
    *
@@ -149,7 +289,11 @@ Typography.propTypes = {
   /**
    * Same children allowed as a React Native <Text> node
    */
-  children: PropTypes.node
+  children: PropTypes.node,
+  /**
+   * Data attributes to be added to the element
+   */
+  dataSet: PropTypes.object
 }
 
 export default Typography

package/src/Validator/Validator.jsx

@@ -0,0 +1,230 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet, Platform } from 'react-native'
+import { inputSupportsProps, selectSystemProps } from '../utils'
+import { TextInput } from '../TextInput'
+import StackView from '../StackView'
+import InputSupports from '../InputSupports'
+import { useThemeTokens } from '../ThemeProvider'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([inputSupportsProps])
+
+const selectCodeTextInputTokens = ({ outerBorderColor, outerBackgroundColor }) => {
+  return {
+    outerBorderColor,
+    outerBackgroundColor,
+    icon: null
+  }
+}
+
+const Validator = React.forwardRef(
+  ({ value = '', inactive, mask = '', onChange, tokens = {}, variant = {}, ...rest }, ref) => {
+    const defaultRef = React.useRef()
+    const codeRef = ref ?? defaultRef
+
+    const { supportsProps } = selectProps(rest)
+    const strValidation = supportsProps.validation
+    const [individualCodes, setIndividualCodes] = React.useState({})
+    const [text, setText] = React.useState(value)
+    const validatorsLength = 6
+    const prefix = 'code'
+    const sufixValidation = 'Validation'
+
+    const [isHover, setIsHover] = React.useState(false)
+    const handleMouseOver = () => {
+      setIsHover(true)
+    }
+
+    const handleMouseOut = () => {
+      setIsHover(false)
+    }
+
+    const themeTokens = useThemeTokens('TextInput', tokens, variant, { hover: isHover })
+
+    const [codeReferences, singleCodes] = React.useMemo(() => {
+      const codes = []
+      const valueCodes = {}
+      for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+        codes[prefix + i] = React.createRef()
+        valueCodes[prefix + i] = ''
+        valueCodes[prefix + i + sufixValidation] = ''
+      }
+      return [codes, valueCodes]
+    }, [])
+
+    const handleSingleCodes = (codeId, val, validation) => {
+      singleCodes[codeId] = val
+      singleCodes[codeId + sufixValidation] = validation
+      /* eslint-disable no-unused-expressions */
+      setIndividualCodes({
+        ...individualCodes,
+        [codeId]: val
+      })
+    }
+
+    const changeDataMasking = (boxElement) => {
+      let charMasking = ''
+      const element = boxElement
+      if (mask && mask.length === 1) charMasking = mask
+      else if (mask && mask.length > 1) charMasking = mask.substring(0, 1)
+
+      if (charMasking) element.value = charMasking
+    }
+
+    const handleChangeCode = () => {
+      let code = ''
+      for (let i = 0; i < validatorsLength; i += 1) code += singleCodes[prefix + i]
+      if (typeof onChange === 'function') onChange(code, singleCodes)
+    }
+
+    const handleChangeCodeValues = (event, codeId, nextIndex) => {
+      const codeElement = codeReferences[codeId]?.current
+      const val = event.nativeEvent?.value || event.target?.value
+
+      if (Number(val).toString() === 'NaN') {
+        codeElement.value = singleCodes[codeId] ?? ''
+        return
+      }
+
+      handleSingleCodes(codeId, codeElement?.value ?? singleCodes[codeId], 'success')
+      handleChangeCode()
+      if (nextIndex === validatorsLength) {
+        codeElement.blur()
+        changeDataMasking(codeElement)
+        return
+      }
+      if (codeElement?.value?.length > 0) {
+        codeReferences[prefix + nextIndex].current.focus()
+        changeDataMasking(codeElement)
+      }
+    }
+
+    const handleKeyPress = (event, currentIndex, previousIndex) => {
+      if (!(event.keyCode === 8 || event.code === 'Backspace')) return
+      if (currentIndex > 0) {
+        codeReferences[prefix + currentIndex].current.value = ''
+        codeReferences[prefix + previousIndex].current.focus()
+      }
+      handleSingleCodes(prefix + currentIndex, '', '')
+      handleChangeCode()
+    }
+
+    const getCodeComponents = () => {
+      const components = []
+
+      for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+        const codeId = prefix + i
+        const codeInputProps = {
+          nativeID: codeId,
+          keyboardType: 'numeric',
+          ref: codeReferences[codeId] ?? null,
+          validation: strValidation || singleCodes[codeId + sufixValidation],
+          tokens: selectCodeTextInputTokens(themeTokens),
+          onFocus: () => codeReferences[codeId]?.current?.select() ?? null,
+          onKeyPress: (event) => handleKeyPress(event, i, i - 1),
+          onMouseOver: handleMouseOver,
+          onMouseOut: handleMouseOut,
+          inactive
+        }
+        codeInputProps.validation || delete codeInputProps.validation
+
+        components.push(
+          <View key={codeId} style={staticStyles.codeInputWidth}>
+            <TextInput {...codeInputProps} />
+          </View>
+        )
+      }
+      return components
+    }
+
+    React.useEffect(() => {
+      /* eslint-disable no-unused-expressions */
+      if (Number(value).toString() !== 'NaN') setText(value)
+    }, [value])
+
+    /* eslint-disable react-hooks/exhaustive-deps */
+    React.useEffect(() => {
+      for (let i = 0; i < validatorsLength; i += 1) {
+        if (mask && text[i]) codeReferences[prefix + i].current.value = mask
+        else codeReferences[prefix + i].current.value = text[i] ?? ''
+        handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '')
+      }
+    }, [text])
+
+    /* eslint-disable react-hooks/exhaustive-deps */
+    React.useEffect(() => {
+      const handlePasteCode = (event) => {
+        setText('')
+        const clipBoardText = event.clipboardData.getData('text')
+        if (Number(clipBoardText).toString() !== 'NaN') setText(clipBoardText)
+      }
+
+      const handleCopy = (event) => {
+        let clipBoardText = ''
+        for (let i = 0; i < validatorsLength; i += 1)
+          singleCodes[prefix + i] && (clipBoardText += singleCodes[prefix + i])
+        event.clipboardData.setData('text/plain', clipBoardText)
+        event.preventDefault()
+      }
+
+      if (Platform.OS === 'web') {
+        for (let i = 0; i < validatorsLength; i += 1) {
+          codeReferences[prefix + i].current.addEventListener('paste', handlePasteCode)
+          codeReferences[prefix + i].current.addEventListener('copy', handleCopy)
+          codeReferences[prefix + i].current.addEventListener('input', (event) =>
+            handleChangeCodeValues(event, prefix + i, i + 1)
+          )
+        }
+      }
+
+      return () => {
+        if (Platform.oldValue === 'web') {
+          for (let i = 0; i < validatorsLength; i += 1) {
+            codeReferences[prefix + i]?.current?.removeEventListener('paste', handlePasteCode)
+            codeReferences[prefix + i]?.current?.removeEventListener('copy', handleCopy)
+            codeReferences[prefix + i]?.current?.removeEventListener('input', (event) =>
+              handleChangeCodeValues(event, prefix + i, i + 1)
+            )
+          }
+        }
+      }
+    }, [])
+
+    return (
+      <InputSupports {...supportsProps}>
+        <StackView space={2} direction="row" ref={codeRef}>
+          {getCodeComponents()}
+        </StackView>
+      </InputSupports>
+    )
+  }
+)
+Validator.displayName = 'Validator'
+
+Validator.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * The value is a 6-digit code, may be only numeric characters, non numeric character aren't renderize
+   */
+  value: PropTypes.string,
+  /**
+   * If true, the component is inactive and non editable.
+   */
+  inactive: PropTypes.bool,
+  /**
+   * Show masked characters and obscure the actual input. For example: '*'
+   */
+  mask: PropTypes.string,
+  /**
+   * Use to react upon input's value changes. Required when the `value` prop is set. Will receive the input's value as an argument.
+   */
+  onChange: PropTypes.func
+}
+
+export default Validator
+
+const staticStyles = StyleSheet.create({
+  codeInputWidth: {
+    width: 43
+  }
+})

package/src/Validator/index.js

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

package/src/ViewportProvider/ViewportProvider.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { viewports } from '@telus-uds/system-constants'
 import { ViewportContext } from './useViewport'
@@ -10,7 +10,7 @@ import useViewportListener from './useViewportListener'
 const ViewportProvider = ({ children }) => {
   // Default to the smallest viewport for mobile-first SSR. On client side, this is updated
   // by useViewportListener in a layout effect before anything is shown to the user.
-  const [viewport, setViewport] = useState(viewports.keys[0])
+  const [viewport, setViewport] = React.useState(viewports.keys[0])
   useViewportListener(setViewport)
   return <ViewportContext.Provider value={viewport}>{children}</ViewportContext.Provider>
 }