@telus-uds/components-base 2.0.0 → 2.0.2

package/src/Footnote/FootnoteLink.jsx

@@ -0,0 +1,110 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet, Platform, TouchableWithoutFeedback } from 'react-native'
+import dictionary from './dictionary'
+import {
+  htmlAttrs,
+  selectSystemProps,
+  useCopy,
+  viewProps,
+  wrapStringsInText,
+  variantProp
+} from '../utils'
+import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
+
+// The top property varies between devices due to how devices render the viewport.
+const selectTextStyle = ({ fontSize, lineHeight }) => ({
+  fontSize,
+  lineHeight: lineHeight !== 1 ? lineHeight : fontSize * 2,
+  ...Platform.select({
+    ios: {
+      top: -fontSize / 2
+    },
+    android: {
+      top: fontSize / 4
+    },
+    web: {
+      top: -fontSize / 2.8
+    }
+  })
+})
+
+const FootnoteLink = React.forwardRef(
+  ({ copy = 'en', content = [], onClick, tokens, variant = {}, ...rest }, ref) => {
+    const themeTokens = useThemeTokens('FootnoteLink', tokens, variant)
+    const textStyles = applyTextStyles(themeTokens)
+
+    const numbers = Array.isArray(content) ? content : [content]
+    const refs = numbers.map(() => React.createRef())
+
+    const handleOnClick = (index) => {
+      onClick(numbers[index], refs[index])
+    }
+    const getCopy = useCopy({ dictionary, copy })
+
+    return (
+      <View ref={ref} style={staticStyles.container}>
+        {numbers.map((num, index) => (
+          <View
+            accessibilityLabel={getCopy('a11yLabel')}
+            key={num}
+            ref={refs[index]}
+            {...selectProps(rest)}
+          >
+            <TouchableWithoutFeedback onPress={handleOnClick} accessibilityRole="button">
+              {wrapStringsInText(`${num}${index !== numbers.length - 1 ? ',' : ''}`, {
+                style: {
+                  ...textStyles,
+                  ...staticStyles.text,
+                  ...selectTextStyle(themeTokens)
+                }
+              })}
+            </TouchableWithoutFeedback>
+          </View>
+        ))}
+      </View>
+    )
+  }
+)
+
+FootnoteLink.displayName = 'FootnoteLink'
+
+const copyShape = PropTypes.shape({ a11yLabel: PropTypes.string.isRequired })
+
+FootnoteLink.propTypes = {
+  ...selectedSystemPropTypes,
+  variant: variantProp.propType,
+  /**
+   * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
+   * To provide your own, pass a JSON object with the key `a11yLabel`.
+   */
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), copyShape]),
+  /**
+   * The footnote number, or multiple numbers if passed as an array.
+   * If using an array, a comma-separated group of numbers will be rendered as superscript.
+   */
+  content: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.arrayOf(PropTypes.number),
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]).isRequired,
+  /**
+   * A callback function to handle the click of a FootnoteLink.
+   */
+  onClick: PropTypes.func.isRequired
+}
+
+export default FootnoteLink
+
+const staticStyles = StyleSheet.create({
+  text: {
+    position: 'relative',
+    textDecorationLine: 'underline'
+  },
+  container: {
+    flexDirection: 'row'
+  }
+})

package/src/Footnote/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    a11yLabel: 'Read legal footnote',
+    close: 'close',
+    heading: 'Terms and conditions'
+  },
+  fr: {
+    a11yLabel: 'Lire la note de bas de page légale',
+    close: 'fermer',
+    heading: 'Modalités et conditions'
+  }
+}

package/src/Footnote/index.js

@@ -0,0 +1,6 @@
+import Footnote from './Footnote'
+import FootnoteLink from './FootnoteLink'
+
+Footnote.Link = FootnoteLink
+
+export default Footnote

package/src/HorizontalScroll/HorizontalScroll.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 
@@ -32,7 +32,7 @@ export const selectHorizontalScrollTokens = (themeTokens, prefix) =>
  *
  * @TODO revisit `ScrollButton` after IconButton is stable.
  */
-const HorizontalScroll = forwardRef(
+const HorizontalScroll = React.forwardRef(
   ({ ScrollButton, tokens, itemPositions, children, ...rest }, ref) => {
     const {
       nextIcon,
@@ -48,8 +48,8 @@ const HorizontalScroll = forwardRef(
       'HorizontalScroll'
     )
 
-    const [containerWidth, setContainerWidth] = useState(0)
-    const [contentWidth, setContentWidth] = useState(0)
+    const [containerWidth, setContainerWidth] = React.useState(0)
+    const [contentWidth, setContentWidth] = React.useState(0)
     const handleContentWidth = (width) => setContentWidth(width)
     const handleContainerLayout = ({
       nativeEvent: {
@@ -59,7 +59,7 @@ const HorizontalScroll = forwardRef(
 
     // Update the scroll position only when scrolling actions ends to minimally rerender
     // and update which buttons are conditionally rendered.
-    const [scrollOffset, setScrollOffset] = useState(0)
+    const [scrollOffset, setScrollOffset] = React.useState(0)
     const handleScrollEnd = ({
       nativeEvent: {
         contentOffset: { x }
@@ -72,7 +72,7 @@ const HorizontalScroll = forwardRef(
     const showNextButton = scrollOffset < scrollMax
     const showPreviousButton = scrollOffset > 0
 
-    const scrollRef = useRef(null)
+    const scrollRef = React.useRef(null)
     const scrollTo = (targetX) => {
       if (typeof scrollRef.current?.scrollTo === 'function') {
         const x = getItemPositionScrollTarget(
@@ -102,8 +102,8 @@ const HorizontalScroll = forwardRef(
     /* eslint-disable-next-line no-param-reassign */
     itemPositions.scrollOffset = scrollOffset
 
-    const hasWidths = itemPositions.contentWidth > 0 && itemPositions.contentWidth > 0
-    useEffect(() => {
+    const hasWidths = itemPositions.contentWidth > 0
+    React.useEffect(() => {
       if (hasWidths) itemPositions.setIsReady(true)
       // itemPositions is a ref object so this should occur only when elements' widths are set in state
     }, [hasWidths, itemPositions])

package/src/HorizontalScroll/HorizontalScrollButton.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View } from 'react-native'
 import { variantProp, getTokensPropType, useCopy, copyPropTypes, a11yProps } from '../utils'
@@ -18,7 +18,7 @@ const selectContainerStyles = ({ offset }) => ({
  *
  * @TODO when IconButton is complete and stable revisit this and update interaction state styles.
  */
-const HorizontalScrollButton = forwardRef(
+const HorizontalScrollButton = React.forwardRef(
   ({ direction = 'next', icon, offset, onPress, variant, tokens, copy }, ref) => {
     const themeTokens = useThemeTokens('HorizontalScrollButton', tokens, variant)
     const getCopy = useCopy({ dictionary, copy })

package/src/HorizontalScroll/ScrollViewEnd.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useEffect } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { ScrollView } from 'react-native'
 import debounce from 'lodash.debounce'
@@ -12,11 +12,11 @@ const DEBOUNCE_MS = 100
  * so we need to work around it with debouncing on `onScroll`. See:
  * https://github.com/necolas/react-native-web/issues/1021
  */
-const ScrollViewEnd = forwardRef(({ onScrollEnd, onScroll, ...props }, ref) => {
+const ScrollViewEnd = React.forwardRef(({ onScrollEnd, onScroll = null, ...props }, ref) => {
   // Return debounced function directly from useCallback so it has .cancel method etc.
   // Linter complains this stops it automatically scanning the deps, but we can check them manually.
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debounceScrollEnd = useCallback(
+  const debounceScrollEnd = React.useCallback(
     debounce((event) => onScrollEnd(event), DEBOUNCE_MS),
     [onScrollEnd]
   )
@@ -28,7 +28,7 @@ const ScrollViewEnd = forwardRef(({ onScrollEnd, onScroll, ...props }, ref) => {
   }
 
   // Cancel any lingering debounce timeouts on dismount
-  useEffect(() => debounceScrollEnd.cancel)
+  React.useEffect(() => debounceScrollEnd.cancel)
 
   return (
     <ScrollView
@@ -46,8 +46,4 @@ ScrollViewEnd.propTypes = {
   onScroll: PropTypes.func
 }
 
-ScrollViewEnd.defaultProps = {
-  onScroll: null
-}
-
 export default ScrollViewEnd

package/src/HorizontalScroll/ScrollViewEnd.native.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { ScrollView } from 'react-native'
 
@@ -7,7 +7,7 @@ import { ScrollView } from 'react-native'
  *
  * React Native has two scroll end handlers, we want to treat them both the same.
  */
-const ScrollViewEnd = forwardRef(({ onScrollEnd, ...props }, ref) => (
+const ScrollViewEnd = React.forwardRef(({ onScrollEnd, ...props }, ref) => (
   <ScrollView
     ref={ref}
     {...props}

package/src/Icon/Icon.jsx

@@ -1,13 +1,21 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { Platform, View } from 'react-native'
 import PropTypes from 'prop-types'
 
 import { useThemeTokens } from '../ThemeProvider'
 import { getTokensPropType, scaleWithText, variantProp } from '../utils'
 
-const Icon = forwardRef(
+const Icon = React.forwardRef(
   (
-    { icon: IconComponent, accessibilityLabel, variant, tokens, scalesWithText = false, dataSet },
+    {
+      icon: IconComponent,
+      accessibilityLabel,
+      variant,
+      tokens,
+      scalesWithText = false,
+      style = {},
+      dataSet
+    },
     ref
   ) => {
     const themeTokens = useThemeTokens('Icon', tokens, variant)
@@ -18,6 +26,31 @@ const Icon = forwardRef(
       <IconComponent title={accessibilityLabel} size={size} color={themeTokens.color} />
     )
 
+    const paddingStyles = variant?.padding
+      ? {
+          padding: themeTokens.width,
+          width: themeTokens.size + themeTokens.width * 2, // sets the diameter of the circle which is the size of the icon plus twice the general padding established to obtain a perfect circle
+          height: themeTokens.size + themeTokens.width * 2
+        }
+      : {}
+
+    const getIconContentForMobile = () => {
+      if (Object.keys(paddingStyles).length) {
+        return (
+          <View
+            style={{
+              backgroundColor: themeTokens.backgroundColor,
+              borderRadius: themeTokens.borderRadius,
+              ...paddingStyles
+            }}
+          >
+            {iconContent}
+          </View>
+        )
+      }
+      return iconContent
+    }
+
     return Platform.OS === 'web' ? (
       <View
         ref={ref}
@@ -32,14 +65,18 @@ const Icon = forwardRef(
             themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''
           ]
             .filter((exists) => exists)
-            .join(' ')
+            .join(' '),
+          ...style,
+          backgroundColor: themeTokens.backgroundColor,
+          borderRadius: themeTokens.borderRadius,
+          ...paddingStyles
         }}
         dataSet={dataSet}
       >
         {iconContent}
       </View>
     ) : (
-      iconContent
+      getIconContentForMobile()
     )
   }
 )
@@ -55,7 +92,17 @@ export const iconComponentPropTypes = {
   /**
    * controls whether the icon size should be proportionate to any accessibility-related font scaling.
    */
-  scalesWithText: PropTypes.bool
+  scalesWithText: PropTypes.bool,
+  /**
+   * Custom style object to be applied to the icon component.
+   * This is useful for overriding the default icon style but for cases where desires styles are not available as tokens.
+   *
+   * Note: This prop is only used in web.
+   *
+   * @example
+   * <Icon style={{ color: 'red' }}
+   */
+  style: PropTypes.object
 }
 
 Icon.propTypes = {

package/src/Icon/IconText.jsx

@@ -1,7 +1,6 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import { Platform, View } from 'react-native'
-
+import { Platform, View, Text, StyleSheet } from 'react-native'
 import Icon, { iconComponentPropTypes } from './Icon'
 import { getStackedContent } from '../StackView'
 import { spacingProps } from '../utils'
@@ -14,7 +13,7 @@ import { spacingProps } from '../utils'
  *  - inline within a <Text> element
  *  - within a container with `flexDirection: 'row'`
  */
-const IconText = forwardRef(
+const IconText = React.forwardRef(
   ({ space, iconPosition = 'left', icon: IconComponent, iconProps, children }, ref) => {
     const iconContent = IconComponent && (
       <Icon ref={ref} icon={IconComponent} scalesWithText {...iconProps} />
@@ -22,16 +21,44 @@ const IconText = forwardRef(
 
     // Inline images on Android are always baseline-aligned which makes them look misaligned - offset it.
     // See abandoned issue https://github.com/facebook/react-native/issues/6529
-    const size = iconProps?.tokens?.size
-    const iconAdjusted =
-      Platform.OS === 'android' && iconContent && size ? (
-        <View style={{ transform: [{ translateY: size * 0.2 }] }}>{iconContent}</View>
-      ) : (
-        iconContent
+    const size = iconProps?.tokens?.size ?? 0
+    const valueTranslateY = iconProps?.tokens?.translateY
+    /**
+     * These calculations were carried out using a set of linear equations to calculate that the
+     * position of the icon "->"" is aligned to the first line of the tooltip text on IOS and Android.
+     * The issue was mainly on IOS, the translateY style didn't match with the old calculations.
+     */
+    const resultY = valueTranslateY ? Math.floor(-1 * (valueTranslateY - 4)) : 0
+
+    const iconAdjustedAndroid = (
+      <View style={{ transform: [{ translateY: valueTranslateY ? size * 0.2 : size * 0.01 }] }}>
+        {iconContent}
+      </View>
+    )
+
+    const iconAdjustedIOS = (
+      <View style={{ transform: [{ translateY: valueTranslateY ? resultY : size * 0.01 }] }}>
+        {iconContent}
+      </View>
+    )
+
+    const mobile = Platform.OS === 'android' ? iconAdjustedAndroid : iconAdjustedIOS
+    const adjustedContainer = Platform.OS === 'web' ? iconContent : mobile
+
+    const adjustedContainerWithPosition = (
+      <View style={staticStyles.adjustedContainer}>{adjustedContainer}</View>
+    )
+
+    if (iconPosition === 'inline') {
+      return (
+        <Text>
+          {children} {adjustedContainerWithPosition}
+        </Text>
       )
+    }
 
     return getStackedContent(
-      iconPosition === 'left' ? [iconAdjusted, children] : [children, iconAdjusted],
+      iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer],
       { space, direction: 'row' }
     )
   }
@@ -39,16 +66,15 @@ const IconText = forwardRef(
 IconText.displayName = 'IconText'
 
 IconText.propTypes = {
-  /* eslint-disable react/no-unused-prop-types */ // eslint is having hard time seeing these props through forwardRef
   /**
    * Amount of space to separate the text content and icon. Uses the themes's spacing scale
    * (see useSpacingScale for more info).
    */
   space: spacingProps.types.spacingValue,
   /**
-   * Whether the icon should be to the left of the content or the right of the content.
+   * Whether the icon should be to the left of the content, the right of the content or inline with the content.
    */
-  iconPosition: PropTypes.oneOf(['left', 'right']),
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
   /**
    * A valid UDS icon component imported from a UDS palette.
    */
@@ -67,4 +93,10 @@ IconText.propTypes = {
   /* eslint-enable react/no-unused-prop-types */
 }
 
+const staticStyles = StyleSheet.create({
+  adjustedContainer: {
+    position: 'absolute'
+  }
+})
+
 export default IconText

package/src/IconButton/IconButton.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, Platform, StyleSheet, View } from 'react-native'
 
@@ -18,31 +18,107 @@ import {
 } from '../utils'
 import Icon from '../Icon'
 
+// function to get the dimentionals of the conditionals
+const getPasswordDimensions = (password, width, height) => {
+  return password ? { width, height } : {}
+}
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
-const selectOuterStyle = ({
-  backgroundColor,
-  borderRadius,
-  outerBorderWidth,
-  outerBorderColor,
-  outerBorderGap,
-  shadow
-}) => [
+const selectOuterStyle = (
+  {
+    backgroundColor,
+    outerBorderWidth,
+    outerBorderColor,
+    outerBorderGap,
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    shadow,
+    width,
+    height
+  },
+  password
+) => [
   {
     backgroundColor,
     ...applyShadowToken(shadow),
-    ...applyOuterBorder({ borderRadius, outerBorderWidth, outerBorderColor, outerBorderGap }),
-    ...Platform.select({ web: { outline: 'none', display: 'inline-flex' } })
+    ...applyOuterBorder({
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outerBorderWidth,
+      outerBorderColor,
+      outerBorderGap
+    }),
+    ...getPasswordDimensions(password, width, height),
+    ...Platform.select({
+      web: {
+        outline: 'none',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    })
   },
   staticStyles.outer
 ]
 
-const selectInnerStyle = ({ borderColor, borderWidth = 0, borderRadius, padding = 0 }) => ({
+const calculatePadding = (padding, borderWidth) => padding && Math.max(0, padding - borderWidth) // Stable size as border changes
+
+const selectInnerStyle = (
+  {
+    borderColor,
+    borderWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderRadius,
+    padding = 0,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    width,
+    height
+  },
+  password
+) => ({
   // 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
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
+  borderTopWidth,
+  borderRightWidth,
+  borderBottomWidth,
+  borderLeftWidth,
+  padding: calculatePadding(padding, borderWidth),
+  paddingLeft: calculatePadding(paddingLeft, borderLeftWidth),
+  paddingRight: calculatePadding(paddingRight, borderRightWidth),
+  paddingTop: calculatePadding(paddingTop, borderTopWidth),
+  paddingBottom: calculatePadding(paddingBottom, borderBottomWidth),
+  ...Platform.select({
+    web: {
+      pointerEvents: 'none',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }),
+  ...getPasswordDimensions(password, width, height)
 })
 
 /**
@@ -50,14 +126,15 @@ const selectInnerStyle = ({ borderColor, borderWidth = 0, borderRadius, padding
  * 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(
+const IconButton = React.forwardRef(
   (
     {
       tokens,
-      variant,
+      variant = {},
       icon: IconComponent,
       href,
       hrefAttrs,
+      testID,
       accessibilityRole = href ? 'link' : 'button',
       ...rawRest
     },
@@ -74,7 +151,7 @@ const IconButton = forwardRef(
 
     const getTokens = useThemeTokensCallback('IconButton', tokens, variant)
     const getOuterStyle = (pressableState) =>
-      selectOuterStyle(getTokens(resolvePressableState(pressableState)))
+      selectOuterStyle(getTokens(resolvePressableState(pressableState), variant.password))
 
     return (
       <Pressable
@@ -84,15 +161,17 @@ const IconButton = forwardRef(
         hrefAttrs={hrefAttrs}
         style={getOuterStyle}
         {...selectedProps}
+        testID={testID}
       >
         {(pressableState) => {
           const themeTokens = getTokens(resolvePressableState(pressableState))
           return (
-            <View style={selectInnerStyle(themeTokens)}>
+            <View style={selectInnerStyle(themeTokens, variant.password)}>
               <Icon
-                icon={IconComponent}
+                icon={IconComponent || themeTokens.icon}
                 title={selectedProps.accessibilityLabel}
                 tokens={selectTokens('Icon', themeTokens, 'icon')}
+                variant={variant}
               />
             </View>
           )
@@ -107,15 +186,32 @@ IconButton.propTypes = {
   ...selectedSystemPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('IconButton'),
-  icon: PropTypes.elementType.isRequired,
+  /**
+   * A unique identifier for testing purposes.
+   * Will be added as a `data-testid` attribute.
+   */
+  testID: PropTypes.string,
+  /**
+   * Defines the icon to be rendered
+   */
+  icon: PropTypes.elementType,
+  /**
+   * URL to navigate to when the `Iconbutton` is pressed
+   */
   href: PropTypes.string,
+  /**
+   * URL options to navigate to when the `Iconbutton` is pressed
+   */
   hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
+  /**
+   * Function to execute when the `Iconbutton` is pressed
+   */
   onPress: PropTypes.func
 }
 
 const staticStyles = StyleSheet.create({
   outer: {
-    alignSelf: 'flex-start'
+    alignSelf: 'baseline'
   }
 })