@telus-uds/components-base 1.8.3 → 1.9.0

package/lib-module/IconButton/IconButton.js

@@ -0,0 +1,122 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import { applyOuterBorder, useThemeTokensCallback, applyShadowToken } from '../ThemeProvider';
+import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, resolvePressableState, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
+import Icon from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
+const selectOuterStyle = _ref => {
+  let {
+    backgroundColor,
+    borderRadius,
+    outerBorderWidth,
+    outerBorderColor,
+    outerBorderGap,
+    shadow
+  } = _ref;
+  return [{
+    backgroundColor,
+    ...applyShadowToken(shadow),
+    ...applyOuterBorder({
+      borderRadius,
+      outerBorderWidth,
+      outerBorderColor,
+      outerBorderGap
+    }),
+    ...Platform.select({
+      web: {
+        outline: 'none',
+        display: 'inline-flex'
+      }
+    })
+  }, staticStyles.outer];
+};
+
+const selectInnerStyle = _ref2 => {
+  let {
+    borderColor,
+    borderWidth = 0,
+    borderRadius,
+    padding = 0
+  } = _ref2;
+  return {
+    // Inner borders animate with the icon and should be treated like a themable feature of the icon
+    borderColor,
+    borderRadius,
+    borderWidth,
+    padding: Math.max(0, padding - borderWidth) // Stable size as border changes
+
+  };
+};
+/**
+ * A pressable themeless base component that handles pressable states and passes tokens
+ * based on these to an outer border and a base Card component. Not intended to be used in
+ * apps or sites directly: build themed components on top of this.
+ */
+
+
+const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    tokens,
+    variant,
+    icon: IconComponent,
+    href,
+    hrefAttrs,
+    accessibilityRole = href ? 'link' : 'button',
+    ...rawRest
+  } = _ref3;
+  const {
+    onPress,
+    ...rest
+  } = clickProps.toPressProps(rawRest);
+  const selectedProps = selectProps({ ...rest,
+    accessibilityRole
+  });
+  const handlePress = linkProps.handleHref({
+    href,
+    onPress
+  });
+  const getTokens = useThemeTokensCallback('IconButton', tokens, variant);
+
+  const getOuterStyle = pressableState => selectOuterStyle(getTokens(resolvePressableState(pressableState)));
+
+  return /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
+    href: href,
+    onPress: handlePress,
+    hrefAttrs: hrefAttrs,
+    style: getOuterStyle,
+    ...selectedProps,
+    children: pressableState => {
+      const themeTokens = getTokens(resolvePressableState(pressableState));
+      return /*#__PURE__*/_jsx(View, {
+        style: selectInnerStyle(themeTokens),
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: IconComponent,
+          title: selectedProps.accessibilityLabel,
+          tokens: selectTokens('Icon', themeTokens, 'icon')
+        })
+      });
+    }
+  });
+});
+IconButton.displayName = 'IconButton';
+IconButton.propTypes = { ...selectedSystemPropTypes,
+  variant: variantProp.propType,
+  tokens: getTokensPropType('IconButton'),
+  icon: PropTypes.elementType.isRequired,
+  href: PropTypes.string,
+  hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
+  onPress: PropTypes.func
+};
+const staticStyles = StyleSheet.create({
+  outer: {
+    alignSelf: 'flex-start'
+  }
+});
+export default withLinkRouter(IconButton);

package/lib-module/IconButton/index.js

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

package/lib-module/InputLabel/InputLabel.js

@@ -0,0 +1,148 @@
+import React, { forwardRef } from 'react';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps } from '../utils';
+import LabelContent from './LabelContent';
+import Tooltip from '../Tooltip';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
+const selectLabelStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
+
+const selectHintStyles = _ref => {
+  let {
+    hintColor,
+    hintFontName,
+    hintFontSize,
+    hintFontWeight,
+    hintLineHeight
+  } = _ref;
+  return applyTextStyles({
+    color: hintColor,
+    fontName: hintFontName,
+    fontSize: hintFontSize,
+    fontWeight: hintFontWeight,
+    lineHeight: hintLineHeight
+  });
+};
+
+const selectGapStyles = _ref2 => {
+  let {
+    gap
+  } = _ref2;
+  return {
+    marginRight: gap
+  };
+};
+
+const InputLabel = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    copy = 'en',
+    label,
+    forId,
+    hint,
+    hintPosition = 'inline',
+    hintId,
+    tooltip,
+    tokens,
+    variant,
+    ...rest
+  } = _ref3;
+  const themeTokens = useThemeTokens('InputLabel', tokens, variant);
+  const hasTooltip = tooltip !== undefined;
+  const isHintInline = hintPosition === 'inline';
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      ref: ref,
+      style: staticStyles.container,
+      ...selectProps(rest),
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label],
+        children: /*#__PURE__*/_jsx(LabelContent, {
+          forId: forId,
+          children: label
+        })
+      }), hint && isHintInline && /*#__PURE__*/_jsx(Text, {
+        style: [selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens), staticStyles.label],
+        nativeID: hintId,
+        children: hint
+      }), hasTooltip && /*#__PURE__*/_jsx(View, {
+        style: [staticStyles.tooltipAlign, {
+          height: themeTokens.fontSize * themeTokens.lineHeight
+        }],
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          content: tooltip,
+          copy: copy
+        })
+      })]
+    }), hint && !isHintInline && /*#__PURE__*/_jsx(Text, {
+      style: [selectHintStyles(themeTokens), staticStyles.hintBelow],
+      nativeID: hintId,
+      children: hint
+    })]
+  });
+});
+InputLabel.displayName = 'InputLabel';
+InputLabel.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+
+  /**
+   * The input label.
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * The id attribute of the input which this label refers to.
+   */
+  forId: PropTypes.string,
+
+  /**
+   * A short description of the expected input.
+   */
+  hint: PropTypes.string,
+
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
+
+  /**
+   * The id attribute passed down to the hint element.
+   */
+  hintId: PropTypes.string,
+
+  /**
+   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+   */
+  tooltip: PropTypes.string,
+  tokens: getTokensPropType('InputLabel'),
+  variant: variantProp.propType
+};
+export default InputLabel;
+const staticStyles = StyleSheet.create({
+  container: {
+    flexShrink: 1,
+    flexDirection: 'row',
+    alignItems: 'baseline'
+  },
+  label: {
+    flexShrink: 1
+  },
+  hintBelow: {
+    flexBasis: '100%',
+    flexShrink: 0
+  },
+  tooltipAlign: {
+    alignSelf: 'flex-start',
+    justifyContent: 'center'
+  }
+});

package/lib-module/InputLabel/LabelContent.js

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const LabelContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    forId
+  } = _ref;
+  return /*#__PURE__*/_jsx("label", {
+    ref: ref,
+    htmlFor: forId,
+    style: staticStyles.inheritCursor,
+    children: children
+  });
+});
+LabelContent.displayName = 'LabelContent';
+LabelContent.propTypes = {
+  children: PropTypes.string,
+  forId: PropTypes.string
+}; // Note that <label> is not React Native, so we can't use `StyleSheet.create` here
+
+const staticStyles = {
+  inheritCursor: {
+    cursor: 'inherit'
+  }
+};
+export default LabelContent;

package/lib-module/InputLabel/LabelContent.native.js

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View"; // Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
+
+import { jsx as _jsx } from "react/jsx-runtime";
+const LabelContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children
+  } = _ref;
+  return ref ? /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    children: children
+  }) : children;
+});
+LabelContent.displayName = 'LabelContent';
+LabelContent.propTypes = {
+  children: PropTypes.node
+};
+export default LabelContent;

package/lib-module/InputLabel/index.js

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

package/lib-module/InputSupports/InputSupports.js

@@ -0,0 +1,96 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import InputLabel from '../InputLabel';
+import Feedback from '../Feedback';
+import StackView from '../StackView';
+import { useThemeTokens } from '../ThemeProvider';
+import useInputSupports from './useInputSupports';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const InputSupports = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    copy = 'en',
+    label,
+    hint,
+    hintPosition = 'inline',
+    feedback,
+    tooltip,
+    validation
+  } = _ref;
+  const {
+    space
+  } = useThemeTokens('InputSupports');
+  const {
+    inputId,
+    hintId,
+    feedbackId,
+    a11yProps
+  } = useInputSupports({
+    feedback,
+    hint,
+    label,
+    validation
+  });
+  return /*#__PURE__*/_jsxs(StackView, {
+    space: space,
+    ref: ref,
+    children: [label && /*#__PURE__*/_jsx(InputLabel, {
+      copy: copy,
+      label: label,
+      hint: hint,
+      hintPosition: hintPosition,
+      hintId: hintId,
+      tooltip: tooltip,
+      forId: inputId
+    }), typeof children === 'function' ? children({
+      inputId,
+      ...a11yProps
+    }) : children, feedback && /*#__PURE__*/_jsx(Feedback, {
+      id: feedbackId,
+      title: feedback,
+      validation: validation
+    })]
+  });
+});
+InputSupports.displayName = 'InputSupports';
+InputSupports.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+
+  /**
+   * The input label.
+   */
+  label: PropTypes.string,
+
+  /**
+   * A short description of the expected input.
+   */
+  hint: PropTypes.string,
+
+  /**
+   * Position of the hint relative to label.
+   */
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
+
+  /**
+   * A detailed description of validation error/success or additional instructions.
+   * Visual variant is determined based on the `validation` prop.
+   */
+  feedback: PropTypes.string,
+
+  /**
+   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+   */
+  tooltip: PropTypes.string,
+
+  /**
+   * Use to visually mark an input as valid or invalid.
+   */
+  validation: PropTypes.oneOf(['error', 'success'])
+};
+export default InputSupports;

package/lib-module/InputSupports/index.js

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

package/lib-module/InputSupports/useInputSupports.js

@@ -0,0 +1,32 @@
+import useUniqueId from '../utils/useUniqueId';
+
+const joinDefined = array => array.filter(item => item !== undefined).join(' ');
+
+const useInputSupports = _ref => {
+  let {
+    label,
+    feedback,
+    validation,
+    hint
+  } = _ref;
+  const hasValidationError = validation === 'error';
+  const inputId = useUniqueId('input');
+  const hintId = useUniqueId('input-hint');
+  const feedbackId = useUniqueId('input-feedback');
+  const a11yProps = {
+    accessibilityLabel: label,
+    accessibilityHint: joinDefined([!hasValidationError && feedback, hint]),
+    // native only -> replaced with describedBy on web
+    accessibilityDescribedBy: joinDefined([!hasValidationError && feedback && feedbackId, // feedback receives a11yRole=alert on error, so there's no need to include it here
+    hint && hintId]),
+    accessibilityInvalid: hasValidationError
+  };
+  return {
+    inputId,
+    hintId,
+    feedbackId,
+    a11yProps
+  };
+};
+
+export default useInputSupports;

package/lib-module/Link/ChevronLink.js

@@ -0,0 +1,52 @@
+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((_ref, ref) => {
+  let {
+    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

@@ -0,0 +1,44 @@
+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((_ref, ref) => {
+  let {
+    children,
+    style,
+    inline = false,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
+    style: pressState => [staticStyles[inline ? 'inline' : 'inlineFlex'], 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'
+  },
+  inlineFlex: {
+    display: 'inline-flex'
+  }
+});
+export default InlinePressable;

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

@@ -0,0 +1,89 @@
+/* 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 = _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
+ */
+// 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((_ref2, ref) => {
+  let {
+    onPress,
+    children,
+    style,
+    ...rest
+  } = _ref2;
+  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

@@ -0,0 +1,28 @@
+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((_ref, ref) => {
+  let {
+    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;