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

package/lib/Link/InlinePressable.web.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+/**
+ * @typedef {import('react-native').PressableProps} PressableProps
+ */
+
+/**
+ * InlinePressable is an alternative to React Native's Pressable that works better when nested
+ * inline inside Text. It accepts the same props as React Native's Pressable.
+ *
+ * On Web it simply passes its props to Pressable and defaults to `inline-flex` instead of `flex`.
+ *
+ * @param {PressableProps} PressableProps
+ */
+// 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
+}) => /*#__PURE__*/React.createElement(Pressable, Object.assign({
+  style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style]
+}, props), pressState => typeof children === 'function' ? children(pressState) : children);
+
+const staticStyles = StyleSheet.create({
+  inline: {
+    // Stop Pressable defaulting to (block) flex
+    display: 'inline-flex'
+  }
+});
+export default InlinePressable;

package/lib/Link/Link.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useThemeTokensCallback } from '../ThemeProvider';
 import LinkBase from './LinkBase';
 
 const Link = ({
@@ -6,16 +7,16 @@ const Link = ({
   children,
   accessibilityRole = 'link',
   variant = {},
+  tokens,
   ...linkProps
-}) => /*#__PURE__*/React.createElement(LinkBase, Object.assign({
-  href: href,
-  accessibilityRole: accessibilityRole,
-  variant: {
-    component: 'Link',
-    ...variant
-  }
-}, linkProps), children);
-
-Link.propTypes = { ...LinkBase.propTypes
+}) => {
+  const getTokens = useThemeTokensCallback('Link', tokens, variant);
+  return /*#__PURE__*/React.createElement(LinkBase, Object.assign({
+    href: href,
+    accessibilityRole: accessibilityRole,
+    tokens: getTokens
+  }, linkProps), children);
 };
+
+Link.propTypes = LinkBase.propTypes;
 export default Link;

package/lib/Link/LinkBase.js

@@ -1,14 +1,11 @@
-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, variantProp, linkProps, getTokensPropType } from '../utils/propTypes';
-import { useThemeTokens, applyTextStyles } from '../ThemeProvider';
-
-const selectContentStyles = ({
-  color
-}) => ({
-  color
-});
+import { resolvePressableTokens } from '../utils/pressability';
+import InlinePressable from './InlinePressable';
+import { applyTextStyles } from '../ThemeProvider';
+import { IconText, iconComponentPropTypes } from '../Icon';
 
 const selectOuterBorderStyles = ({
   outerBorderColor,
@@ -25,15 +22,26 @@ Platform.OS === 'web' ? {
   outline: outerBorderOutline,
   borderWidth: outerBorderWidth,
   borderColor: outerBorderColor,
-  borderRadius: outerBorderRadius
+  borderRadius: outerBorderRadius,
+  // 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 = ({
+  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 = ({
@@ -48,18 +56,16 @@ const selectBlockStyles = ({
   fontName: blockFontName
 });
 
-const selectIconStyles = ({
+const selectIconTokens = ({
+  color,
   iconSize,
-  iconGapBefore,
-  iconGapAfter,
-  iconScale,
-  iconTranslateX
+  iconTranslateX,
+  iconTranslateY
 }) => ({
-  scale: iconScale,
+  color,
   translateX: iconTranslateX,
-  size: iconSize,
-  gapBefore: iconGapBefore,
-  gapAfter: iconGapAfter
+  translateY: iconTranslateY,
+  size: iconSize
 });
 /**
  * Renders a pressable text link, with optional icon. This is rendered as a block element
@@ -90,35 +96,13 @@ 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
@@ -126,91 +110,49 @@ const LinkBase = ({
   const linkPropSet = linkProps.select({
     accessibilityRole,
     href,
-    onPress: handlePress,
-    onPressIn: handlePressIn,
-    onPressOut: handlePressOut,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onMouseEnter: handleHoverIn,
-    onMouseLeave: handleHoverOut,
+    onPress: linkProps.handleHref({
+      href,
+      onPress
+    }),
     ...hrefAttrsProp.spread(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; // 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 resolveTokens = 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;
+  return /*#__PURE__*/React.createElement(InlinePressable, Object.assign({}, linkPropSet, {
+    style: linkState => {
+      const themeTokens = resolveTokens(linkState);
+      const outerBorderStyles = selectOuterBorderStyles(themeTokens);
+      const hasIcon = Boolean(icon || themeTokens.icon);
+      return [outerBorderStyles, blockLeftStyle, hasIcon && staticStyles.rowContainer];
+    }
+  }), linkState => {
+    const themeTokens = resolveTokens(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 {
-      onPress: _onPress,
-      onPressIn,
-      onPressOut,
-      ...textProps
-    } = linkPropSet;
-    return (
-      /*#__PURE__*/
-      // TouchableWithoutFeedback modifies its child so this stack is all (touchable) Text: no Views
-      React.createElement(TouchableWithoutFeedback, {
-        onPressIn: onPressIn,
-        onPressOut: onPressOut,
-        onPress: _onPress
-      }, /*#__PURE__*/React.createElement(Text, Object.assign({}, textProps, {
-        style: [outerBorderStyles, blockLeftStyle, contentStyles, blockTextStyles, textStyles]
-      }), children))
-    );
-  } // 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 = /*#__PURE__*/React.createElement(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 : /*#__PURE__*/React.createElement(View, {
-    style: [iconPosition === 'left' && {
-      marginRight: iconStyles.gapAfter * iconScale
-    }, iconPosition === 'right' && {
-      marginLeft: iconStyles.gapBefore * iconScale
-    }]
-  }, iconContent); // 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 /*#__PURE__*/React.createElement(Pressable, Object.assign({}, linkPropSet, {
-    style: [outerBorderStyles, blockLeftStyle, staticStyles.rowContainer]
-  }), iconPosition === 'left' && iconBlock, /*#__PURE__*/React.createElement(Text, {
-    style: [contentStyles, blockTextStyles, textStyles, Platform.select({
-      web: {
-        // TODO: https://github.com/telus/universal-design-system/issues/487
-        transition: 'color 200ms'
+      iconSpace
+    } = themeTokens;
+    return /*#__PURE__*/React.createElement(IconText, {
+      icon: IconComponent,
+      iconPosition: iconPosition,
+      space: iconSpace,
+      iconProps: { ...iconProps,
+        tokens: iconTokens
       }
-    })]
-  }, children), iconPosition === 'right' && iconBlock);
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [textStyles, blockTextStyles, staticStyles.baseline]
+    }, children));
+  });
 };
 
 LinkBase.propTypes = { ...a11yProps.types,
@@ -221,7 +163,7 @@ LinkBase.propTypes = { ...a11yProps.types,
   /**
    * 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
@@ -248,6 +190,9 @@ const staticStyles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-start'
+  },
+  baseline: {
+    alignSelf: 'baseline'
   }
 });
 export default LinkBase;

package/lib/Link/TextButton.js

@@ -1,25 +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
-}) => /*#__PURE__*/React.createElement(LinkBase, Object.assign({
-  onPress: onPress,
-  accessibilityRole: accessibilityRole,
-  variant: {
-    component: 'TextButton',
-    ...variant
-  }
-}, linkProps), children);
+}) => {
+  const getTokens = useThemeTokensCallback('Link', tokens, variant);
+  return /*#__PURE__*/React.createElement(LinkBase, Object.assign({
+    onPress: onPress,
+    accessibilityRole: accessibilityRole,
+    tokens: getTokens
+  }, linkProps), children);
+};
 
 TextButton.propTypes = { ...LinkBase.propTypes,
   onPress: PropTypes.func.isRequired
 }; // 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/lib/Link/index.js

@@ -1,4 +1,5 @@
 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/lib/List/List.js

@@ -0,0 +1,52 @@
+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 /*#__PURE__*/cloneElement(child, {
+        showDivider,
+        isLastItem: index + 1 === Children.count(children),
+        tokens,
+        variant
+      });
+    }
+
+    return child;
+  });
+  return /*#__PURE__*/React.createElement(View, Object.assign({
+    accessibilityRole: accessibilityRole
+  }, a11y), items);
+};
+
+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/lib/List/ListItem.js

@@ -0,0 +1,207 @@
+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 /*#__PURE__*/React.createElement(Text, {
+        style: itemStyles
+      }, children);
+    }
+
+    return /*#__PURE__*/React.createElement(View, null, children);
+  };
+  /**
+   * 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 || /*#__PURE__*/React.createElement(React.Fragment, null);
+
+    if (icon) {
+      return /*#__PURE__*/React.createElement(View, {
+        style: [sideItemContainerStyles, areChildrenStrings() ? staticStyles.centeredIcons : undefined]
+      }, /*#__PURE__*/React.createElement(IconComponent, {
+        tokens: { ...iconTokens,
+          size: iconSize || iconTokens.size,
+          color: iconColor || iconTokens.color
+        }
+      }));
+    }
+
+    return /*#__PURE__*/React.createElement(View, {
+      style: [sideItemContainerStyles, itemBulletContainerStyles]
+    }, /*#__PURE__*/React.createElement(View, {
+      style: itemBulletStyles,
+      testID: "unordered-item-bullet"
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(View, {
+    style: [staticStyles.itemContainer, getContainerStyle()],
+    accessibilityRole: accessibilityRole
+  }, renderMarker(), renderItem());
+};
+
+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/lib/List/index.js

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

package/lib/Pagination/PageButton.js

@@ -1,28 +1,11 @@
 import React from 'react';
-import { Text } from 'react-native';
 import PropTypes from 'prop-types';
 import ButtonBase from '../Button/ButtonBase';
-import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
+import { useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps, copyPropTypes, getTokensPropType, hrefAttrsProp, linkProps, selectTokens, variantProp } from '../utils';
-import useCopy from './useCopy';
+import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
 
-const selectTextStyles = ({
-  color,
-  fontName,
-  fontSize,
-  fontWeight,
-  lineHeight,
-  textLine
-}) => applyTextStyles({
-  color,
-  fontName,
-  fontSize,
-  fontWeight,
-  lineHeight,
-  textDecorationLine: textLine
-});
-
 function PageButton({
   label,
   onPress,
@@ -41,8 +24,6 @@ function PageButton({
 
   const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
 
-  const getTextStyles = buttonState => selectTextStyles(getTokens(buttonState));
-
   const activeProps = isActive ? {
     selected: true,
     ...a11yProps.nonFocusableProps,
@@ -67,11 +48,7 @@ function PageButton({
   };
   return /*#__PURE__*/React.createElement(ButtonBase, Object.assign({}, buttonProps, {
     tokens: getButtonTokens
-  }, activeProps), buttonState => {
-    return /*#__PURE__*/React.createElement(Text, {
-      style: getTextStyles(buttonState)
-    }, label);
-  });
+  }, activeProps), label);
 }
 
 PageButton.propTypes = {