@telus-uds/components-base 1.8.2 → 1.8.5

package/lib-module/Link/LinkBase.js

@@ -0,0 +1,243 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import Text from "react-native-web/dist/exports/Text";
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, selectSystemProps, variantProp, viewProps } from '../utils/props';
+import { resolvePressableTokens } from '../utils/pressability';
+import { withLinkRouter } from '../utils';
+import InlinePressable from './InlinePressable';
+import { applyTextStyles, applyOuterBorder } from '../ThemeProvider';
+import { IconText, iconComponentPropTypes } from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
+
+const selectOuterBorderStyles = _ref => {
+  let {
+    outerBorderColor,
+    outerBorderWidth,
+    outerBorderGap,
+    borderRadius,
+    outerBorderOutline
+  } = _ref;
+  return (// 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' ? {
+      // Allow theme to define outline, or, turn off outline and use border if rounded corners required
+      outline: outerBorderOutline,
+      ...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 = _ref2 => {
+  let {
+    color
+  } = _ref2;
+  return {
+    color,
+    ...Platform.select({
+      web: {
+        // TODO: https://github.com/telus/universal-design-system/issues/487
+        transition: 'color 200ms'
+      }
+    })
+  };
+};
+
+const selectBlockStyles = _ref3 => {
+  let {
+    blockFontWeight,
+    blockFontSize,
+    blockLineHeight,
+    blockFontName
+  } = _ref3;
+  return applyTextStyles({
+    fontWeight: blockFontWeight,
+    fontSize: blockFontSize,
+    lineHeight: blockLineHeight,
+    fontName: blockFontName
+  });
+};
+
+const selectDecorationStyles = _ref4 => {
+  let {
+    color,
+    textLine,
+    textLineStyle
+  } = _ref4;
+  return {
+    color,
+    textDecorationLine: textLine,
+    textDecorationStyle: textLineStyle,
+    ...Platform.select({
+      web: {
+        // TODO: https://github.com/telus/universal-design-system/issues/487
+        transition: 'color 200ms'
+      }
+    })
+  };
+};
+
+const selectIconTokens = _ref5 => {
+  let {
+    color,
+    iconSize,
+    iconTranslateX,
+    iconTranslateY
+  } = _ref5;
+  return {
+    color,
+    translateX: iconTranslateX,
+    translateY: iconTranslateY,
+    size: iconSize
+  };
+};
+/**
+ * Renders a pressable text link, with optional icon. This is rendered as a block element
+ * only (see 'Current Limitations'). On Web, renders an `<a>` anchor tag if `href` is provided.
+ *
+ * ## Current limitations
+ *
+ * - Not yet integrated with widely-used Telus navigation packages. This will probably
+ *   require adding a `navigate` prop that aliases onPress so this can be passed to
+ *   router's Link components' `Component` or `as` props but this needs testing
+ *   as part of https://github.com/telus/universal-design-system/issues/24
+ *
+ * - Doesn't work inline e.g. in paragraphs. Support for inline links in native and
+ *   web was implemented in https://github.com/telus/universal-design-system/pull/233
+ *   but removed and will need to be restored at some point. When inline link support
+ *   is restored, icons in inline links on Android will be slightly off-centre
+ *   vertically (see )
+ *
+ * - Doesn't support :visited styles on web. Support for :visited styles was
+ *   implemented in https://github.com/telus/universal-design-system/pull/234 but
+ *   dropped in favour of investigating if a full-featured CSS-in-JS package could or
+ *   should be used more widely (e.g. styled components)
+ */
+
+
+const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
+  let {
+    href,
+    icon,
+    iconPosition = icon ? 'left' : undefined,
+    iconProps,
+    variant,
+    tokens = {},
+    children,
+    accessibilityRole = 'link',
+    ...rawRest
+  } = _ref6;
+  const {
+    onPress,
+    ...props
+  } = clickProps.toPressProps(rawRest);
+  const {
+    hrefAttrs,
+    rest
+  } = hrefAttrsProp.bundle(props);
+  const selectedProps = selectProps({
+    accessibilityRole,
+    href,
+    onPress: linkProps.handleHref({
+      href,
+      onPress
+    }),
+    hrefAttrs,
+    ...rest
+  });
+
+  const resolveLinkTokens = pressState => resolvePressableTokens(tokens, pressState, {
+    iconPosition
+  });
+
+  const defaultThemeTokens = resolveLinkTokens({});
+  const hasIcon = Boolean(icon || defaultThemeTokens.icon); // On web, this makes focus rings wrap only the link, not the entire block
+
+  const blockLeftStyle = Platform.OS === 'web' && staticStyles.blockLeft;
+  return /*#__PURE__*/_jsx(InlinePressable, { ...selectedProps,
+    inline: hasIcon // assuming links without icons should be inline (even if they are long)
+    ,
+    ref: ref,
+    style: linkState => {
+      const themeTokens = resolveLinkTokens(linkState);
+      const outerBorderStyles = selectOuterBorderStyles(themeTokens);
+      const decorationStyles = selectDecorationStyles(themeTokens);
+      return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
+    },
+    children: 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 /*#__PURE__*/_jsx(IconText, {
+        icon: IconComponent,
+        iconPosition: iconPosition,
+        space: iconSpace,
+        iconProps: { ...iconProps,
+          tokens: iconTokens
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [textStyles, blockTextStyles, staticStyles.baseline],
+          children: children
+        })
+      });
+    }
+  });
+});
+LinkBase.displayName = 'LinkBase';
+LinkBase.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Link'),
+  variant: variantProp.propType,
+
+  /**
+   * Optional variant that may be passed down to the link's icon if there is one
+   */
+  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.
+   */
+  icon: PropTypes.func,
+
+  /**
+   * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link.
+   */
+  iconPosition: PropTypes.oneOf(['left', 'right']),
+
+  /**
+   * On Web if href is passed, React Native Web maps this object's props to
+   * `rel`, `target` and `download` attrs.
+   */
+  hrefAttrs: PropTypes.shape(hrefAttrsProp.types)
+};
+const staticStyles = StyleSheet.create({
+  blockLeft: {
+    alignSelf: 'flex-start'
+  },
+  rowContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start'
+  },
+  baseline: {
+    alignSelf: 'baseline'
+  }
+});
+export default withLinkRouter(LinkBase);

package/lib-module/Link/TextButton.js

@@ -0,0 +1,35 @@
+import React, { forwardRef } 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.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+const TextButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    onPress,
+    children,
+    variant,
+    tokens,
+    accessibilityRole = 'button',
+    ...linkProps
+  } = _ref;
+  const getTokens = useThemeTokensCallback('Link', tokens, variant);
+  return /*#__PURE__*/_jsx(LinkBase, {
+    onPress: onPress,
+    accessibilityRole: accessibilityRole,
+    tokens: getTokens,
+    ref: ref,
+    ...linkProps,
+    children: children
+  });
+});
+TextButton.displayName = 'TextButton';
+TextButton.propTypes = { ...LinkBase.propTypes,
+  onPress: PropTypes.func.isRequired
+};
+export default TextButton;

package/lib-module/Link/index.js

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

package/lib-module/List/List.js

@@ -0,0 +1,62 @@
+import React, { cloneElement, forwardRef, Children } from 'react';
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import PropTypes from 'prop-types';
+import { a11yProps, componentPropType, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import ListItem from './ListItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+/**
+ * An unordered List component has a child a ListItem that
+ * allows icon, dividers and customized typography
+ */
+
+const List = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    showDivider,
+    tokens,
+    variant,
+    accessibilityRole = Platform.select({
+      web: 'list',
+      default: undefined
+    }),
+    ...rest
+  } = _ref;
+  const items = Children.map(children, (child, index) => {
+    var _child$type, _child$type2;
+
+    // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
+    const isListItem = componentName => Boolean(componentName === ListItem.displayName);
+
+    if (isListItem(child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) || isListItem(child === null || child === void 0 ? void 0 : (_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name)) {
+      return /*#__PURE__*/cloneElement(child, {
+        showDivider,
+        isLastItem: index + 1 === Children.count(children),
+        tokens,
+        variant,
+        ...child.props
+      });
+    }
+
+    return child;
+  });
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    accessibilityRole: accessibilityRole,
+    ...selectProps(rest),
+    children: items
+  });
+});
+List.displayName = 'List';
+List.propTypes = { ...selectedSystemPropTypes,
+  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-module/List/ListItem.js

@@ -0,0 +1,248 @@
+import React, { forwardRef } from 'react';
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import PropTypes from 'prop-types';
+import { useThemeTokens, applyTextStyles } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps, wrapStringsInText } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
+const selectBulletStyles = _ref => {
+  let {
+    itemBulletWidth,
+    itemBulletHeight,
+    itemBulletColor
+  } = _ref;
+  return {
+    width: itemBulletWidth,
+    height: itemBulletHeight,
+    borderRadius: itemBulletHeight / 2,
+    backgroundColor: itemBulletColor
+  };
+};
+
+const selectBulletContainerStyles = _ref2 => {
+  let {
+    itemBulletContainerWidth,
+    itemBulletContainerAlign
+  } = _ref2;
+  return {
+    width: itemBulletContainerWidth,
+    alignItems: itemBulletContainerAlign
+  };
+};
+
+const selectItemIconTokens = _ref3 => {
+  let {
+    itemIconSize,
+    itemIconColor
+  } = _ref3;
+  return {
+    size: itemIconSize,
+    color: itemIconColor
+  };
+};
+
+const selectSideItemContainerStyles = _ref4 => {
+  let {
+    listGutter,
+    iconMarginTop
+  } = _ref4;
+  return {
+    marginTop: iconMarginTop,
+    marginRight: listGutter
+  };
+}; // Align bullets with the top line of text the same way icons are aligned
+
+
+const selectBulletPositioningStyles = _ref5 => {
+  let {
+    itemIconSize
+  } = _ref5;
+  return {
+    width: itemIconSize,
+    height: itemIconSize
+  };
+};
+
+const selectItemStyles = _ref6 => {
+  let {
+    itemFontWeight,
+    itemFontSize,
+    itemLineHeight,
+    itemFontName
+  } = _ref6;
+  return applyTextStyles({
+    fontWeight: itemFontWeight,
+    fontSize: itemFontSize,
+    lineHeight: itemLineHeight,
+    fontName: itemFontName
+  });
+};
+
+const selectItemBlockStyles = _ref7 => {
+  let {
+    interItemMargin
+  } = _ref7;
+  return {
+    marginBottom: interItemMargin
+  };
+};
+
+const selectDividerStyles = _ref8 => {
+  let {
+    dividerColor,
+    dividerSize,
+    interItemMarginWithDivider
+  } = _ref8;
+  return {
+    borderBottomWidth: dividerSize,
+    borderColor: dividerColor,
+    marginBottom: interItemMarginWithDivider,
+    paddingBottom: interItemMarginWithDivider
+  };
+};
+/**
+ * ListItem is responsible for rendering icon or a bullet as side item
+ */
+
+
+const ListItem = /*#__PURE__*/forwardRef((_ref9, ref) => {
+  let {
+    tokens,
+    variant,
+    icon,
+    iconColor,
+    iconSize,
+    showDivider,
+    children,
+    isLastItem,
+    accessibilityRole = Platform.select({
+      web: 'listitem',
+      default: undefined
+    }),
+    ...rest
+  } = _ref9;
+  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 itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
+  const iconTokens = selectItemIconTokens(themeTokens);
+  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
+
+  const renderItem = () => /*#__PURE__*/_jsx(View, {
+    style: staticStyles.wrap,
+    children: wrapStringsInText(children, {
+      style: itemStyles
+    })
+  });
+  /**
+   * 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__*/_jsx(_Fragment, {});
+
+    if (icon) {
+      return /*#__PURE__*/_jsx(View, {
+        style: sideItemContainerStyles,
+        children: /*#__PURE__*/_jsx(IconComponent, {
+          size: iconSize || iconTokens.size,
+          color: iconColor || iconTokens.color
+        })
+      });
+    }
+
+    return /*#__PURE__*/_jsx(View, {
+      style: [sideItemContainerStyles, itemBulletContainerStyles],
+      children: /*#__PURE__*/_jsx(View, {
+        style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
+        children: /*#__PURE__*/_jsx(View, {
+          style: itemBulletStyles,
+          testID: "unordered-item-bullet"
+        })
+      })
+    });
+  };
+
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: [staticStyles.itemContainer, getContainerStyle()],
+    accessibilityRole: accessibilityRole,
+    ...selectProps(rest),
+    children: [renderMarker(), renderItem()]
+  });
+});
+ListItem.displayName = 'ListItem';
+const staticStyles = StyleSheet.create({
+  itemContainer: {
+    flexDirection: 'row'
+  },
+  wrap: {
+    flex: 1
+  },
+  bulletPositioning: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+ListItem.propTypes = { ...selectedSystemPropTypes,
+  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-module/List/index.js

@@ -0,0 +1,5 @@
+import List from './List';
+import ListItem from './ListItem';
+List.Item = ListItem;
+export { List as ListBase, ListItem };
+export default List;