@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/cjs/Link/ChevronLink.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _LinkBase = _interopRequireDefault(require("./LinkBase"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * `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.
+ */const ChevronLink = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    direction = 'right',
+    children,
+    tokens = {},
+    variant,
+    dataSet,
+    ...otherlinkProps
+  } = _ref;
+  const getChevronTokens = (0, _ThemeProvider.useThemeTokensCallback)('ChevronLink', tokens, variant);
+  const applyChevronTokens = linkState => {
+    const {
+      leftIcon,
+      rightIcon,
+      iconDisplace,
+      height,
+      fontSize,
+      ...otherTokens
+    } = getChevronTokens(linkState);
+    const linkTokens = (0, _utils.selectTokens)('Link', otherTokens);
+    return {
+      ...linkTokens,
+      height,
+      blockFontSize: tokens.fontSize ?? fontSize,
+      icon: direction === 'right' ? rightIcon : leftIcon,
+      iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
+    };
+  };
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Link', applyChevronTokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, {
+    ...otherlinkProps,
+    iconPosition: direction,
+    tokens: getTokens,
+    dataSet: dataSet,
+    ref: ref,
+    children: children
+  });
+});
+ChevronLink.displayName = 'ChevronLink';
+ChevronLink.propTypes = {
+  ..._LinkBase.default.propTypes,
+  children: _propTypes.default.node,
+  variant: _propTypes.default.exact({
+    size: _propTypes.default.oneOf(['large', 'small', 'micro']),
+    alternative: _propTypes.default.bool,
+    inverse: _propTypes.default.bool
+  }),
+  ..._utils.linkProps.types,
+  tokens: (0, _utils.getTokensPropType)('ChevronLink', 'Link'),
+  /**
+   * Changes direction of chevron icon
+   */
+  direction: _propTypes.default.oneOf(['left', 'right'])
+};
+var _default = exports.default = ChevronLink;

package/lib/cjs/Link/InlinePressable.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * @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
+ */const InlinePressable = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    inlineFlex = true,
+    style,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
+    style: pressState => [typeof style === 'function' ? style(pressState) : style, staticStyles[inlineFlex ? 'inlineFlex' : 'inline']],
+    ...props,
+    children: pressState => typeof children === 'function' ? children(pressState) : children
+  });
+});
+InlinePressable.displayName = 'InlinePressable';
+InlinePressable.propTypes = {
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  inlineFlex: _propTypes.default.bool,
+  style: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array, _propTypes.default.func])
+};
+const staticStyles = _StyleSheet.default.create({
+  inline: {
+    // Stop Pressable defaulting to (block) flex
+    display: 'inline'
+  },
+  inlineFlex: {
+    display: 'inline-flex'
+  }
+});
+var _default = exports.default = InlinePressable;

package/lib/cjs/Link/InlinePressable.native.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _TouchableWithoutFeedback = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TouchableWithoutFeedback"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable camelcase */
+
+/**
+ * @typedef {import('react-native').PressableProps} PressableProps
+ */
+
+// TouchableWithoutFeedback and Pressable have similar but not identical props APIs
+const pressablePropsToTouchable = _ref => {
+  let {
+    unstable_pressDelay,
+    android_disableSound,
+    android_ripple,
+    // Unsupported, discard it
+    ...props
+  } = _ref;
+  return {
+    ...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
+ */
+const InlinePressable = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    onPress,
+    children,
+    style,
+    ...rest
+  } = _ref2;
+  const [isFocused, setIsFocused] = _react.default.useState(false);
+  const handleFocus = () => setIsFocused(true);
+  const handleBlur = () => setIsFocused(false);
+  const [isPressed, setIsPressed] = _react.default.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__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {
+    onPress: onPress,
+    onPressIn: handlePressIn,
+    onPressOut: handlePressOut,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    ref: ref,
+    ...pressablePropsToTouchable(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      style: currentStyle,
+      children: typeof children === 'function' ? children(pressState) : children
+    })
+  });
+});
+InlinePressable.displayName = 'InlinePressable';
+InlinePressable.propTypes = {
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  style: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array, _propTypes.default.func]),
+  onPress: _propTypes.default.func
+};
+var _default = exports.default = InlinePressable;

package/lib/cjs/Link/Link.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ThemeProvider = require("../ThemeProvider");
+var _LinkBase = _interopRequireDefault(require("./LinkBase"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Link = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    href,
+    children,
+    accessibilityRole = 'link',
+    variant = {},
+    tokens,
+    dataSet,
+    ...linkProps
+  } = _ref;
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Link', tokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, {
+    href: href,
+    accessibilityRole: accessibilityRole,
+    tokens: getTokens,
+    ref: ref,
+    dataSet: dataSet,
+    ...linkProps,
+    children: children
+  });
+});
+Link.displayName = 'Link';
+Link.propTypes = _LinkBase.default.propTypes;
+var _default = exports.default = Link;

package/lib/cjs/Link/LinkBase.js

@@ -0,0 +1,283 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _props = require("../utils/props");
+var _pressability = require("../utils/pressability");
+var _utils = require("../utils");
+var _InlinePressable = _interopRequireDefault(require("./InlinePressable"));
+var _ThemeProvider = require("../ThemeProvider");
+var _Icon = require("../Icon");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.linkProps, _props.viewProps, _props.contentfulProps]);
+const selectOuterBorderStyles = _ref => {
+  let {
+    outerBorderColor,
+    outerBorderWidth,
+    outerBorderGap,
+    borderRadius,
+    outerBorderOutline
+  } = _ref;
+  return {
+    outline: outerBorderOutline,
+    ...(0, _ThemeProvider.applyOuterBorder)({
+      outerBorderColor,
+      outerBorderWidth,
+      outerBorderGap
+    }),
+    borderRadius
+  };
+};
+const selectTextStyles = _ref2 => {
+  let {
+    color,
+    blockFontSize
+  } = _ref2;
+  return {
+    color,
+    ...(0, _ThemeProvider.applyTextStyles)({
+      blockFontSize
+    }),
+    ..._Platform.default.select({
+      web: {
+        // TODO: https://github.com/telus/universal-design-system/issues/487
+        transition: 'color 200ms'
+      }
+    })
+  };
+};
+const selectBlockStyles = (_ref3, themeOptions) => {
+  let {
+    blockFontWeight,
+    blockFontSize,
+    blockLineHeight,
+    blockFontName
+  } = _ref3;
+  return (0, _ThemeProvider.applyTextStyles)({
+    lineHeight: blockLineHeight,
+    fontWeight: blockFontWeight,
+    fontSize: blockFontSize,
+    fontName: blockFontName,
+    themeOptions
+  });
+};
+const selectDecorationStyles = _ref4 => {
+  let {
+    color,
+    textLine,
+    textLineStyle,
+    alignSelf
+  } = _ref4;
+  return {
+    color,
+    textDecorationLine: textLine,
+    textDecorationStyle: textLineStyle,
+    alignSelf,
+    ..._Platform.default.select({
+      web: {
+        // TODO: https://github.com/telus/universal-design-system/issues/487
+        transition: 'color 200ms'
+      }
+    })
+  };
+};
+const selectIconTokens = _ref5 => {
+  let {
+    color,
+    iconSize,
+    blockFontSize,
+    iconTranslateX,
+    iconTranslateY
+  } = _ref5;
+  /**
+   * These calculations were carried out using a set of linear equations to calculate that the
+   * position of the icon "->"" is aligned to the first line of the tooltip text.
+   * The base equation is: X/4 + Y/4 - 4 - |X - Y| = Z
+   * where X = blockFontSize, Y = iconSize and Z = translateY
+   */
+  const translateY = iconTranslateY ?? blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize);
+  return {
+    color,
+    translateX: iconTranslateX,
+    translateY,
+    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__*/_react.default.forwardRef((_ref6, ref) => {
+  let {
+    href,
+    icon,
+    iconPosition = icon ? 'left' : undefined,
+    iconProps = {},
+    variant,
+    tokens = {},
+    children,
+    accessibilityRole = 'link',
+    ...rawRest
+  } = _ref6;
+  const {
+    onPress,
+    ...props
+  } = _props.clickProps.toPressProps(rawRest);
+  const {
+    hrefAttrs,
+    rest
+  } = _props.hrefAttrsProp.bundle(props);
+  const selectedProps = selectProps({
+    accessibilityRole,
+    href,
+    onPress: _props.linkProps.handleHref({
+      href,
+      onPress
+    }),
+    hrefAttrs,
+    ...rest
+  });
+  const resolveLinkTokens = pressState => (0, _pressability.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.default.OS === 'web' && staticStyles.blockLeft;
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlinePressable.default, {
+    ...selectedProps,
+    inlineFlex: 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, staticStyles.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, themeOptions);
+      const IconComponent = icon || themeTokens.icon;
+      const {
+        iconSpace
+      } = themeTokens;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
+        icon: IconComponent,
+        iconPosition: iconPosition,
+        space: iconSpace,
+        iconProps: {
+          ...iconProps,
+          tokens: iconTokens,
+          style: staticStyles.bubblePointerEvents
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          style: [textStyles, blockTextStyles, staticStyles.baseline, staticStyles.bubblePointerEvents],
+          children: typeof children === 'function' ? children(linkState) : children
+        })
+      });
+    }
+  });
+});
+LinkBase.displayName = 'LinkBase';
+LinkBase.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _props.getTokensPropType)('Link'),
+  /**
+   * href for the Link
+   */
+  href: _propTypes.default.string,
+  /**
+   * AccesibilityRole for the link base
+   */
+  accessibilityrole: _propTypes.default.string,
+  /**
+   * Children nodes that can be added
+   */
+  variant: _props.variantProp.propType,
+  /**
+   * Optional variant that may be passed down to the link's icon if there is one
+   */
+  iconProps: _propTypes.default.exact(_Icon.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.default.elementType,
+  /**
+   * When `icon` is provided, use `iconPosition` to place the Icon to the left, right or inline with Link.
+   */
+  iconPosition: _propTypes.default.oneOf(['left', 'right', 'inline']),
+  /**
+   * On Web if href is passed, React Native Web maps this object's props to
+   * `rel`, `target` and `download` attrs.
+   */
+  hrefAttrs: _propTypes.default.shape(_props.hrefAttrsProp.types)
+};
+const staticStyles = _StyleSheet.default.create({
+  blockLeft: {
+    alignSelf: 'flex-start'
+  },
+  rowContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start'
+  },
+  baseline: {
+    alignSelf: 'baseline'
+  },
+  bubblePointerEvents: {
+    ..._Platform.default.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
+  },
+  outerBorderStyles: {
+    ...(_Platform.default.OS !== 'web' && {
+      margin: 0,
+      marginHorizontal: 2,
+      padding: 0
+    }),
+    ...(_Platform.default.OS === 'android' && {
+      paddingHorizontal: 2,
+      paddingTop: 2
+    })
+  }
+});
+var _default = exports.default = (0, _utils.withLinkRouter)(LinkBase);

package/lib/cjs/Link/TextButton.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ThemeProvider = require("../ThemeProvider");
+var _LinkBase = _interopRequireDefault(require("./LinkBase"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * `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 = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    onPress,
+    children,
+    variant,
+    tokens,
+    accessibilityRole = 'button',
+    ...linkProps
+  } = _ref;
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Link', tokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, {
+    onPress: onPress,
+    accessibilityRole: accessibilityRole,
+    tokens: getTokens,
+    ref: ref,
+    ...linkProps,
+    children: children
+  });
+});
+TextButton.displayName = 'TextButton';
+TextButton.propTypes = {
+  ..._LinkBase.default.propTypes,
+  /** onPress function */
+  onPress: _propTypes.default.func.isRequired,
+  /** Children node that can be added */
+  children: _propTypes.default.node.isRequired,
+  variant: _utils.variantProp.propType,
+  /** Accesibility role for TextButton */
+  accessibilityRole: _propTypes.default.string
+};
+var _default = exports.default = TextButton;

package/lib/cjs/Link/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ChevronLink", {
+  enumerable: true,
+  get: function () {
+    return _ChevronLink.default;
+  }
+});
+Object.defineProperty(exports, "Link", {
+  enumerable: true,
+  get: function () {
+    return _Link.default;
+  }
+});
+Object.defineProperty(exports, "LinkBase", {
+  enumerable: true,
+  get: function () {
+    return _LinkBase.default;
+  }
+});
+Object.defineProperty(exports, "TextButton", {
+  enumerable: true,
+  get: function () {
+    return _TextButton.default;
+  }
+});
+var _ChevronLink = _interopRequireDefault(require("./ChevronLink"));
+var _Link = _interopRequireDefault(require("./Link"));
+var _LinkBase = _interopRequireDefault(require("./LinkBase"));
+var _TextButton = _interopRequireDefault(require("./TextButton"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }