@telus-uds/components-base 0.0.2-prerelease.4 → 0.0.2-prerelease.8

package/src/Link/LinkBase.jsx

@@ -1,14 +1,6 @@
-import React, { useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import {
-  Text,
-  Platform,
-  StyleSheet,
-  Pressable,
-  PixelRatio,
-  View,
-  TouchableWithoutFeedback
-} from 'react-native'
+import { Text, Platform, StyleSheet } from 'react-native'
 import {
   a11yProps,
   hrefAttrsProp,
@@ -16,37 +8,47 @@ import {
   linkProps,
   getTokensPropType
 } from '../utils/propTypes'
+import { resolvePressableTokens } from '../utils/pressability'
 
-import { useThemeTokens, applyTextStyles } from '../ThemeProvider'
-
-const selectContentStyles = ({ color }) => ({
-  color
-})
+import InlinePressable from './InlinePressable'
+import { applyTextStyles, applyOuterBorder } from '../ThemeProvider'
+import { IconText, iconComponentPropTypes } from '../Icon'
 
 const selectOuterBorderStyles = ({
   outerBorderColor,
   outerBorderWidth,
   outerBorderGap,
-  outerBorderRadius,
+  borderRadius,
   outerBorderOutline
 }) =>
   // A view wrapper with a border on native messes up inline text alignment
   // so for now make focus styles strictly web-only
   Platform.OS === 'web'
     ? {
-        margin: -1 * (outerBorderGap + outerBorderWidth) || 0,
-        padding: outerBorderGap,
         // Allow theme to define outline, or, turn off outline and use border if rounded corners required
         outline: outerBorderOutline,
-        borderWidth: outerBorderWidth,
-        borderColor: outerBorderColor,
-        borderRadius: outerBorderRadius
+        ...applyOuterBorder({
+          outerBorderColor,
+          outerBorderWidth,
+          outerBorderGap,
+          borderRadius
+        }),
+        // Stops focus ring stretching horizontally if parent has display: block
+        // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
+        display: 'inline-flex'
       }
     : {}
 
-const selectTextStyles = ({ textLine, textLineStyle }) => ({
+const selectTextStyles = ({ color, textLine, textLineStyle }) => ({
+  color,
   textDecorationLine: textLine,
-  textDecorationStyle: textLineStyle
+  textDecorationStyle: textLineStyle,
+  ...Platform.select({
+    web: {
+      // TODO: https://github.com/telus/universal-design-system/issues/487
+      transition: 'color 200ms'
+    }
+  })
 })
 
 const selectBlockStyles = ({ blockFontWeight, blockFontSize, blockLineHeight, blockFontName }) =>
@@ -57,18 +59,11 @@ const selectBlockStyles = ({ blockFontWeight, blockFontSize, blockLineHeight, bl
     fontName: blockFontName
   })
 
-const selectIconStyles = ({
-  iconSize,
-  iconGapBefore,
-  iconGapAfter,
-  iconScale,
-  iconTranslateX
-}) => ({
-  scale: iconScale,
+const selectIconTokens = ({ color, iconSize, iconTranslateX, iconTranslateY }) => ({
+  color,
   translateX: iconTranslateX,
-  size: iconSize,
-  gapBefore: iconGapBefore,
-  gapAfter: iconGapAfter
+  translateY: iconTranslateY,
+  size: iconSize
 })
 
 /**
@@ -98,135 +93,62 @@ const LinkBase = ({
   onPress,
   icon,
   iconPosition = icon ? 'left' : undefined,
-  iconVariant,
+  iconProps,
   variant,
-  tokens,
+  tokens = {},
   children,
   accessibilityRole = 'link',
   ...props
 }) => {
-  const handlePress = linkProps.handleHref({ href, onPress })
-
-  const [isFocused, setIsFocused] = useState(false)
-  const handleFocus = () => setIsFocused(true)
-  const handleBlur = () => setIsFocused(false)
-
-  const [isHovered, setIsHovered] = useState(false)
-  const handleHoverIn = () => setIsHovered(true)
-  const handleHoverOut = () => setIsHovered(false)
-
-  const [isPressed, setIsPressed] = useState(false)
-  const handlePressIn = () => setIsPressed(true)
-  const handlePressOut = () => setIsPressed(false)
-
   const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
   const linkPropSet = linkProps.select({
     accessibilityRole,
     href,
-    onPress: handlePress,
-    onPressIn: handlePressIn,
-    onPressOut: handlePressOut,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onMouseEnter: handleHoverIn,
-    onMouseLeave: handleHoverOut,
-    ...hrefAttrsProp.spread(hrefAttrs),
+    onPress: linkProps.handleHref({ href, onPress }),
+    hrefAttrs,
     ...rest
   })
 
-  const themeTokens = useThemeTokens('Link', tokens, variant, {
-    focus: isFocused,
-    hover: isHovered,
-    pressed: isPressed,
-    iconPosition
-  })
-  const IconComponent = icon || themeTokens.icon
-  const hasIcon = !!IconComponent
-
-  const textStyles = selectTextStyles(themeTokens)
-  const outerBorderStyles = selectOuterBorderStyles(themeTokens)
-  const contentStyles = selectContentStyles(themeTokens)
-  const blockStyles = selectBlockStyles(themeTokens)
-  const iconStyles = selectIconStyles(themeTokens)
-
-  // TODO: re-apply support for inline links
-  const isNested = false
+  const resolveLinkTokens = (pressState) =>
+    resolvePressableTokens(tokens, pressState, { iconPosition })
 
   // On web, this makes focus rings wrap only the link, not the entire block
   const blockLeftStyle = Platform.OS === 'web' && staticStyles.blockLeft
 
-  // Apply typographic text styles if not inheriting, and block positioning if a block
-  const blockTextStyles = !isNested && blockStyles
-
-  if (!hasIcon) {
-    // onPressIn / onPressOut only work if on TouchableWithoutFeedback, onFocus only works if on Text
-    const { onPress: _onPress, onPressIn, onPressOut, ...textProps } = linkPropSet
-    return (
-      // TouchableWithoutFeedback modifies its child so this stack is all (touchable) Text: no Views
-      <TouchableWithoutFeedback onPressIn={onPressIn} onPressOut={onPressOut} onPress={_onPress}>
-        <Text
-          {...textProps}
-          style={[outerBorderStyles, blockLeftStyle, contentStyles, blockTextStyles, textStyles]}
-        >
-          {children}
-        </Text>
-      </TouchableWithoutFeedback>
-    )
-  }
-
-  // Scale icon with text, but with a cap so text isn't squashed at large scales
-  const iconScale = Math.min(PixelRatio.getFontScale(), 2)
-
-  const iconTokens = {
-    size: iconStyles.size ? iconStyles.size * iconScale : undefined,
-    color: contentStyles.color ?? undefined,
-    scale: iconStyles.scale ?? undefined,
-    translateX: iconStyles.translateX ?? undefined
-  }
-
-  const iconContent = <IconComponent tokens={iconTokens} variant={iconVariant} />
-
-  const iconBlock = isNested ? (
-    // TODO: when reimplementing inline support, insert an appropriate space character
-    // based on the value of gapBefore and gapAfter on native (no inline margins/padding)
-    iconContent
-  ) : (
-    <View
-      style={[
-        iconPosition === 'left' && { marginRight: iconStyles.gapAfter * iconScale },
-        iconPosition === 'right' && { marginLeft: iconStyles.gapBefore * iconScale }
-      ]}
-    >
-      {iconContent}
-    </View>
-  )
-
-  // TODO: this doesn't work well when nested inline but does allow block-links to have icons align
-  // properly on Android which purely inline links can't do. Add an isNested case that is similar to
-  // https://github.com/telus/universal-design-system/pull/233
   return (
-    <Pressable
+    <InlinePressable
       {...linkPropSet}
-      style={[outerBorderStyles, blockLeftStyle, staticStyles.rowContainer]}
+      style={(linkState) => {
+        const themeTokens = resolveLinkTokens(linkState)
+        const outerBorderStyles = selectOuterBorderStyles(themeTokens)
+        const hasIcon = Boolean(icon || themeTokens.icon)
+        return [outerBorderStyles, blockLeftStyle, hasIcon && staticStyles.rowContainer]
+      }}
     >
-      {iconPosition === 'left' && iconBlock}
-      <Text
-        style={[
-          contentStyles,
-          blockTextStyles,
-          textStyles,
-          Platform.select({
-            web: {
-              // TODO: https://github.com/telus/universal-design-system/issues/487
-              transition: 'color 200ms'
-            }
-          })
-        ]}
-      >
-        {children}
-      </Text>
-      {iconPosition === 'right' && iconBlock}
-    </Pressable>
+      {(linkState) => {
+        const themeTokens = resolveLinkTokens(linkState)
+        const textStyles = selectTextStyles(themeTokens)
+        const iconTokens = selectIconTokens(themeTokens)
+
+        // TODO: may need to apply some smarter text inheritance here if inline to avoid native
+        // issues like double-application of line heights breaking align-items: baseline
+        const blockTextStyles = selectBlockStyles(themeTokens)
+
+        const IconComponent = icon || themeTokens.icon
+        const { iconSpace } = themeTokens
+
+        return (
+          <IconText
+            icon={IconComponent}
+            iconPosition={iconPosition}
+            space={iconSpace}
+            iconProps={{ ...iconProps, tokens: iconTokens }}
+          >
+            <Text style={[textStyles, blockTextStyles, staticStyles.baseline]}>{children}</Text>
+          </IconText>
+        )
+      }}
+    </InlinePressable>
   )
 }
 
@@ -238,7 +160,7 @@ LinkBase.propTypes = {
   /**
    * Optional variant that may be passed down to the link's icon if there is one
    */
-  iconVariant: variantProp.propType,
+  iconProps: PropTypes.exact(iconComponentPropTypes),
   /**
    * A function component for an SVG icon to render inside the link. Inherits size and color from
    * the link and any Typography the link is nested inside.
@@ -250,7 +172,7 @@ LinkBase.propTypes = {
   iconPosition: PropTypes.oneOf(['left', 'right']),
   /**
    * On Web if href is passed, React Native Web maps this object's props to
-   * `rel`, `target` and (>= RNW 0.15.0) `download` attrs.
+   * `rel`, `target` and `download` attrs.
    */
   hrefAttrs: PropTypes.shape(hrefAttrsProp.types)
 }
@@ -263,6 +185,9 @@ const staticStyles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-start'
+  },
+  baseline: {
+    alignSelf: 'baseline'
   }
 })
 

package/src/Link/TextButton.jsx

@@ -1,24 +1,36 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import { useThemeTokensCallback } from '../ThemeProvider'
 import LinkBase from './LinkBase'
 
+/**
+ * `TextButton` is a button that looks like a Link. It uses the same theming and variants as
+ * Link but has the accessibility role of a `Button`. It should be used for actions that
+ * take place on the current page, or for navigation within an app.
+ */
 const TextButton = ({
   onPress,
   children,
-  variant = {},
+  variant,
+  tokens,
+  // TODO: this may need to use `link` role on Web in the case of being passed both `href` and
+  // `onPress` in an omniplatform app that uses React Navigation's useLinkProps for internal nav.
   accessibilityRole = 'button',
   ...linkProps
-}) => (
-  <LinkBase
-    onPress={onPress}
-    accessibilityRole={accessibilityRole}
-    variant={{ component: 'TextButton', ...variant }}
-    {...linkProps}
-  >
-    {children}
-  </LinkBase>
-)
+}) => {
+  const getTokens = useThemeTokensCallback('Link', tokens, variant)
+  return (
+    <LinkBase
+      onPress={onPress}
+      accessibilityRole={accessibilityRole}
+      tokens={getTokens}
+      {...linkProps}
+    >
+      {children}
+    </LinkBase>
+  )
+}
 
 TextButton.propTypes = {
   ...LinkBase.propTypes,
@@ -26,6 +38,8 @@ TextButton.propTypes = {
 }
 
 // Remove incompatible Link prop (if this build includes propTypes)
+// TODO: test if this works with web navigation in omniplatform React Navigation
+// https://github.com/telus/universal-design-system/issues/665
 // eslint-disable-next-line react/forbid-foreign-prop-types
 if (TextButton.propTypes?.href) delete TextButton.propTypes.href
 

package/src/Link/index.js

@@ -1,5 +1,6 @@
 import ChevronLink from './ChevronLink'
 import Link from './Link'
+import LinkBase from './LinkBase'
 import TextButton from './TextButton'
 
-export { ChevronLink, Link, TextButton }
+export { ChevronLink, Link, LinkBase, TextButton }

package/src/List/List.jsx

@@ -0,0 +1,47 @@
+import React, { cloneElement, Children } from 'react'
+import { View, Platform } from 'react-native'
+import PropTypes from 'prop-types'
+import { getTokensPropType, variantProp, componentPropType } from '../utils'
+import { a11yProps } from '../utils/propTypes'
+import ListItem from './ListItem'
+
+/**
+ * A Unordered List component has a child a ListItem that
+ * allows icon, dividers and customized typography
+ */
+const List = ({ children, showDivider, tokens, variant, ...rest }) => {
+  const accessibilityRole = Platform.select({ web: 'list', default: 'none' })
+  const a11y = a11yProps.select(rest)
+  const items = Children.map(children, (child, index) => {
+    if (child.type.name === ListItem.name) {
+      return cloneElement(child, {
+        showDivider,
+        isLastItem: index + 1 === Children.count(children),
+        tokens,
+        variant
+      })
+    }
+    return child
+  })
+
+  return (
+    <View accessibilityRole={accessibilityRole} {...a11y}>
+      {items}
+    </View>
+  )
+}
+
+List.Item = ListItem
+
+List.propTypes = {
+  ...a11yProps.types,
+  tokens: getTokensPropType('List'),
+  variant: variantProp.propType,
+  children: componentPropType('ListItem'),
+  /**
+   * In case it is not the last item allow display divider
+   */
+  showDivider: PropTypes.bool
+}
+
+export default List

package/src/List/ListItem.jsx

@@ -0,0 +1,187 @@
+import React from 'react'
+import { View, Platform, Text, StyleSheet } from 'react-native'
+import PropTypes from 'prop-types'
+import { useThemeTokens, applyTextStyles } from '../ThemeProvider'
+import { getTokensPropType, variantProp } from '../utils'
+
+const selectBulletStyles = ({ itemBulletWidth, itemBulletHeight, itemBulletColor }) => ({
+  width: itemBulletWidth,
+  height: itemBulletHeight,
+  borderRadius: itemBulletHeight / 2,
+  backgroundColor: itemBulletColor
+})
+
+const selectBulletContainerStyles = ({ itemBulletContainerWidth, itemBulletContainerAlign }) => ({
+  width: itemBulletContainerWidth,
+  alignItems: itemBulletContainerAlign,
+  justifyContent: itemBulletContainerAlign
+})
+
+const selectItemIconTokens = ({ itemIconSize, itemIconColor }) => ({
+  size: itemIconSize,
+  color: itemIconColor
+})
+
+const selectSideItemContainerStyles = ({ listGutter }) => ({
+  marginRight: listGutter
+})
+
+const selectItemStyles = ({ itemFontWeight, itemFontSize, itemLineHeight, itemFontName }) =>
+  applyTextStyles({
+    fontWeight: itemFontWeight,
+    fontSize: itemFontSize,
+    lineHeight: itemLineHeight,
+    fontName: itemFontName
+  })
+
+const selectItemBlockStyles = ({ interItemMargin }) => ({
+  marginBottom: interItemMargin
+})
+
+const selectDividerStyles = ({ dividerColor, dividerSize, interItemMarginWithDivider }) => ({
+  borderBottomWidth: dividerSize,
+  borderColor: dividerColor,
+  marginBottom: interItemMarginWithDivider,
+  paddingBottom: interItemMarginWithDivider
+})
+
+/**
+ * ListItem is responsible for rendering icon or a bullet as side item
+ */
+const ListItem = ({
+  tokens,
+  variant,
+  icon,
+  iconColor,
+  iconSize,
+  showDivider,
+  children,
+  isLastItem
+}) => {
+  const themeTokens = useThemeTokens('List', tokens, variant)
+
+  const itemStyles = selectItemStyles(themeTokens)
+  const itemBlockStyles = selectItemBlockStyles(themeTokens)
+  const dividerStyles = selectDividerStyles(themeTokens)
+  const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens)
+  const itemBulletStyles = selectBulletStyles(themeTokens)
+  const iconTokens = selectItemIconTokens(themeTokens)
+  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
+  const accessibilityRole = Platform.select({ web: 'listitem', default: 'item' })
+
+  const areChildrenStrings = () => {
+    if (Array.isArray(children)) {
+      return children.every((child) => typeof child === 'string')
+    }
+
+    return typeof children === 'string'
+  }
+
+  const renderItem = () => {
+    if (areChildrenStrings()) {
+      return <Text style={itemStyles}>{children}</Text>
+    }
+
+    return <View>{children}</View>
+  }
+
+  /**
+   * Function responsible returning styling, in case the item is the last shouldn't
+   * add extra margin on the bottom, if "showDivider" is true it should add a divider
+   * and custom margin and padding, otherwise just adds a margin to the bottom
+   */
+  const getContainerStyle = () => {
+    if (isLastItem) {
+      return undefined
+    }
+
+    if (showDivider) {
+      return dividerStyles
+    }
+
+    return itemBlockStyles
+  }
+
+  /**
+   * Renders item bullet or Icon in case it's defined
+   * in case children are string the icon is centered otherwise
+   * it will align itself at start of the container
+   */
+  const renderMarker = () => {
+    const IconComponent = icon || <></>
+
+    if (icon) {
+      return (
+        <View
+          style={[
+            sideItemContainerStyles,
+            areChildrenStrings() ? staticStyles.centeredIcons : undefined
+          ]}
+        >
+          <IconComponent
+            tokens={{
+              ...iconTokens,
+              size: iconSize || iconTokens.size,
+              color: iconColor || iconTokens.color
+            }}
+          />
+        </View>
+      )
+    }
+
+    return (
+      <View style={[sideItemContainerStyles, itemBulletContainerStyles]}>
+        <View style={itemBulletStyles} testID="unordered-item-bullet" />
+      </View>
+    )
+  }
+
+  return (
+    <View
+      style={[staticStyles.itemContainer, getContainerStyle()]}
+      accessibilityRole={accessibilityRole}
+    >
+      {renderMarker()}
+      {renderItem()}
+    </View>
+  )
+}
+
+const staticStyles = StyleSheet.create({
+  itemContainer: {
+    flexDirection: 'row'
+  },
+  centeredIcons: {
+    justifyContent: 'center'
+  }
+})
+
+ListItem.propTypes = {
+  tokens: getTokensPropType('List'),
+  variant: variantProp.propType,
+  children: PropTypes.node.isRequired,
+  /**
+   * Renders side item icon
+   */
+  icon: PropTypes.func,
+  /**
+   * Will set display icon color
+   */
+  iconColor: PropTypes.string,
+  /**
+   * Allow the user define the icon size if not defined the theme's file
+   */
+  iconSize: PropTypes.number,
+  /**
+   * @ignore
+   * Defined by parent if it's last item on the list
+   */
+  isLastItem: PropTypes.bool,
+  /**
+   * @ignore
+   * In case it is not the last item allow display divider
+   */
+  showDivider: PropTypes.bool
+}
+
+export default ListItem

package/src/List/index.js

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