@telus-uds/components-base 1.7.1 → 1.8.2

package/lib-module/Link/ChevronLink.js

@@ -1,51 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { selectTokens, getTokensPropType } from '../utils';
-import LinkBase from './LinkBase';
-/**
- * `ChevronLink` is a convenience wrapper around the `Link` component to enable "directional" links.
- * It effectively pre-binds left and right icons, and a directional translation of the icon on hover.
- *
- * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-const ChevronLink = /*#__PURE__*/forwardRef(({
-  direction = 'right',
-  children,
-  tokens,
-  variant,
-  dataSet,
-  ...linkProps
-}, ref) => {
-  const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant);
-
-  const applyChevronTokens = linkState => {
-    const {
-      leftIcon,
-      rightIcon,
-      iconDisplace,
-      ...otherTokens
-    } = getChevronTokens(linkState);
-    return { ...selectTokens('Link', otherTokens),
-      icon: direction === 'right' ? rightIcon : leftIcon,
-      iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
-    };
-  };
-
-  const getTokens = useThemeTokensCallback('Link', applyChevronTokens, variant);
-  return /*#__PURE__*/_jsx(LinkBase, { ...linkProps,
-    iconPosition: direction,
-    tokens: getTokens,
-    dataSet: dataSet,
-    ref: ref,
-    children: children
-  });
-});
-ChevronLink.displayName = 'ChevronLink';
-ChevronLink.propTypes = { ...LinkBase.propTypes,
-  tokens: getTokensPropType('ChevronLink', 'Link'),
-  direction: PropTypes.oneOf(['left', 'right'])
-};
-export default ChevronLink;

package/lib-module/Link/InlinePressable.js

@@ -1,37 +0,0 @@
-import React, { forwardRef } from 'react';
-import Pressable from "react-native-web/dist/exports/Pressable";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-/**
- * @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
-
-import { jsx as _jsx } from "react/jsx-runtime";
-const InlinePressable = /*#__PURE__*/forwardRef(({
-  children,
-  style,
-  ...props
-}, ref) => /*#__PURE__*/_jsx(Pressable, {
-  ref: ref,
-  style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style],
-  ...props,
-  children: pressState => typeof children === 'function' ? children(pressState) : children
-}));
-InlinePressable.displayName = 'InlinePressable';
-const staticStyles = StyleSheet.create({
-  inline: {
-    // Stop Pressable defaulting to (block) flex
-    display: 'inline-flex'
-  }
-});
-export default InlinePressable;

package/lib-module/Link/InlinePressable.native.js

@@ -1,85 +0,0 @@
-/* eslint-disable camelcase */
-import React, { forwardRef, useState } from 'react';
-import Text from "react-native-web/dist/exports/Text";
-import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
-/**
- * @typedef {import('react-native').PressableProps} PressableProps
- */
-// TouchableWithoutFeedback and Pressable have similar but not identical props APIs
-
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const pressablePropsToTouchable = ({
-  unstable_pressDelay,
-  android_disableSound,
-  android_ripple,
-  // Unsupported, discard it
-  ...props
-}) => ({ ...props,
-  touchSoundDisabled: android_disableSound,
-  delayPressIn: unstable_pressDelay
-});
-/**
- * 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.
- *
- * There are a lot of React Native bugs around Views/Pressables nested in Text, e.g.:
- *
- * - https://github.com/facebook/react-native/issues/23601#issuecomment-468069822
- * - https://github.com/facebook/react-native/issues/30375
- * - https://github.com/facebook/react-native/issues/31955
- *
- * On Native, these can be avoided using a `Text` wrapped in a `TouchableWithoutFeedback`; the latter
- * injects additional handlers such as onPressIn to `Text`, resulting in a tree that is purely `Text`.
- *
- * Note that this should only be used on Native, not Web, because React Navigation's Web navigation
- * functions don't work in Touchables (but do work in Pressable) due to different event handling.
- *
- * @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 = /*#__PURE__*/forwardRef(({
-  onPress,
-  children,
-  style,
-  ...rest
-}, ref) => {
-  const [isFocused, setIsFocused] = useState(false);
-
-  const handleFocus = () => setIsFocused(true);
-
-  const handleBlur = () => setIsFocused(false);
-
-  const [isPressed, setIsPressed] = useState(false);
-
-  const handlePressIn = () => setIsPressed(true);
-
-  const handlePressOut = () => setIsPressed(false);
-
-  const pressState = {
-    pressed: isPressed,
-    focus: isFocused,
-    // limited support on native
-    hover: false // not yet supported on native
-
-  };
-  const currentStyle = typeof style === 'function' ? style(pressState) : style;
-  return /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
-    onPress: onPress,
-    onPressIn: handlePressIn,
-    onPressOut: handlePressOut,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    ref: ref,
-    ...pressablePropsToTouchable(rest),
-    children: /*#__PURE__*/_jsx(Text, {
-      style: currentStyle,
-      children: typeof children === 'function' ? children(pressState) : children
-    })
-  });
-});
-InlinePressable.displayName = 'InlinePressable';
-export default InlinePressable;

package/lib-module/Link/Link.js

@@ -1,27 +0,0 @@
-import React, { forwardRef } from 'react';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import LinkBase from './LinkBase';
-import { jsx as _jsx } from "react/jsx-runtime";
-const Link = /*#__PURE__*/forwardRef(({
-  href,
-  children,
-  accessibilityRole = 'link',
-  variant = {},
-  tokens,
-  dataSet,
-  ...linkProps
-}, ref) => {
-  const getTokens = useThemeTokensCallback('Link', tokens, variant);
-  return /*#__PURE__*/_jsx(LinkBase, {
-    href: href,
-    accessibilityRole: accessibilityRole,
-    tokens: getTokens,
-    ref: ref,
-    dataSet: dataSet,
-    ...linkProps,
-    children: children
-  });
-});
-Link.displayName = 'Link';
-Link.propTypes = LinkBase.propTypes;
-export default Link;

package/lib-module/Link/LinkBase.js

@@ -1,223 +0,0 @@
-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
-}) => ({
-  color,
-  ...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 selectDecorationStyles = ({
-  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 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 decorationStyles = selectDecorationStyles(themeTokens);
-      const hasIcon = Boolean(icon || themeTokens.icon);
-      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

@@ -1,34 +0,0 @@
-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,
-  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

@@ -1,5 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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;