@telus-uds/components-base 1.3.0 → 1.5.0

package/lib-module/Link/LinkBase.js

@@ -0,0 +1,210 @@
+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 = ({
+  outerBorderColor,
+  outerBorderWidth,
+  outerBorderGap,
+  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' ? {
+  // 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 = ({
+  color,
+  textLine,
+  textLineStyle
+}) => ({
+  color,
+  textDecorationLine: textLine,
+  textDecorationStyle: textLineStyle,
+  ...Platform.select({
+    web: {
+      // TODO: https://github.com/telus/universal-design-system/issues/487
+      transition: 'color 200ms'
+    }
+  })
+});
+
+const selectBlockStyles = ({
+  blockFontWeight,
+  blockFontSize,
+  blockLineHeight,
+  blockFontName
+}) => applyTextStyles({
+  fontWeight: blockFontWeight,
+  fontSize: blockFontSize,
+  lineHeight: blockLineHeight,
+  fontName: blockFontName
+});
+
+const selectIconTokens = ({
+  color,
+  iconSize,
+  iconTranslateX,
+  iconTranslateY
+}) => ({
+  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(({
+  href,
+  icon,
+  iconPosition = icon ? 'left' : undefined,
+  iconProps,
+  variant,
+  tokens = {},
+  children,
+  accessibilityRole = 'link',
+  ...rawRest
+}, ref) => {
+  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
+  }); // 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,
+    ref: ref,
+    style: linkState => {
+      const themeTokens = resolveLinkTokens(linkState);
+      const outerBorderStyles = selectOuterBorderStyles(themeTokens);
+      const hasIcon = Boolean(icon || themeTokens.icon);
+      return [outerBorderStyles, blockLeftStyle, 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,43 @@
+var _TextButton$propTypes;
+
+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(({
+  onPress,
+  children,
+  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
+}, 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
+}; // 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 = TextButton.propTypes) !== null && _TextButton$propTypes !== void 0 && _TextButton$propTypes.href) delete TextButton.propTypes.href;
+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,55 @@
+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(({
+  children,
+  showDivider,
+  tokens,
+  variant,
+  ...rest
+}, ref) => {
+  const accessibilityRole = Platform.select({
+    web: 'list',
+    default: 'none'
+  });
+  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__*/_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,213 @@
+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 = ({
+  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 selectCommonIconStyles = ({
+  iconMarginTop
+}) => ({
+  marginTop: iconMarginTop
+});
+
+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 = /*#__PURE__*/forwardRef(({
+  tokens,
+  variant,
+  icon,
+  iconColor,
+  iconSize,
+  showDivider,
+  children,
+  isLastItem,
+  ...rest
+}, ref) => {
+  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 commonIconStyles = selectCommonIconStyles(themeTokens);
+  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
+  const accessibilityRole = Platform.select({
+    web: 'listitem',
+    default: 'item'
+  });
+
+  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, commonIconStyles],
+        children: /*#__PURE__*/_jsx(IconComponent, {
+          size: iconSize || iconTokens.size,
+          color: iconColor || iconTokens.color
+        })
+      });
+    }
+
+    return /*#__PURE__*/_jsx(View, {
+      style: [sideItemContainerStyles, itemBulletContainerStyles],
+      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
+  }
+});
+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;