@telus-uds/components-base 1.2.0 → 1.4.0

package/lib-module/IconButton/IconButton.js

@@ -0,0 +1,115 @@
+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 = ({
+  backgroundColor,
+  borderRadius,
+  outerBorderWidth,
+  outerBorderColor,
+  outerBorderGap,
+  shadow
+}) => [{
+  backgroundColor,
+  ...applyShadowToken(shadow),
+  ...applyOuterBorder({
+    borderRadius,
+    outerBorderWidth,
+    outerBorderColor,
+    outerBorderGap
+  }),
+  ...Platform.select({
+    web: {
+      outline: 'none',
+      display: 'inline-flex'
+    }
+  })
+}, staticStyles.outer];
+
+const selectInnerStyle = ({
+  borderColor,
+  borderWidth = 0,
+  borderRadius,
+  padding = 0
+}) => ({
+  // 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(({
+  tokens,
+  variant,
+  icon: IconComponent,
+  href,
+  hrefAttrs,
+  accessibilityRole = href ? 'link' : 'button',
+  ...rawRest
+}, ref) => {
+  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,131 @@
+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";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
+const selectLabelStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
+
+const selectHintStyles = ({
+  hintColor,
+  hintFontName,
+  hintFontSize,
+  hintFontWeight,
+  hintLineHeight
+}) => applyTextStyles({
+  color: hintColor,
+  fontName: hintFontName,
+  fontSize: hintFontSize,
+  fontWeight: hintFontWeight,
+  lineHeight: hintLineHeight
+});
+
+const selectGapStyles = ({
+  gap
+}) => ({
+  marginRight: gap
+});
+
+const InputLabel = /*#__PURE__*/forwardRef(({
+  label,
+  forId,
+  hint,
+  hintPosition = 'inline',
+  hintId,
+  tooltip,
+  tokens,
+  variant,
+  ...rest
+}, ref) => {
+  const themeTokens = useThemeTokens('InputLabel', tokens, variant);
+  const hasTooltip = tooltip !== undefined;
+  const isHintInline = hintPosition === 'inline';
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: [staticStyles.container, !isHintInline && staticStyles.containerWithHintBelow],
+    ...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)],
+      nativeID: hintId,
+      children: hint
+    }), hasTooltip && /*#__PURE__*/_jsx(View, {
+      style: staticStyles.tooltipAlign,
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        content: tooltip
+      })
+    }), hint && !isHintInline && /*#__PURE__*/_jsx(Text, {
+      style: [selectHintStyles(themeTokens), staticStyles.hintBelow],
+      nativeID: hintId,
+      children: hint
+    })]
+  });
+});
+InputLabel.displayName = 'InputLabel';
+InputLabel.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * 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: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'baseline'
+  },
+  containerWithHintBelow: {
+    flexWrap: 'wrap'
+  },
+  label: {
+    flexShrink: 0
+  },
+  hintBelow: {
+    flexBasis: '100%',
+    flexShrink: 0
+  },
+  tooltipAlign: {
+    alignSelf: 'center'
+  }
+});

package/lib-module/InputLabel/LabelContent.js

@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const LabelContent = /*#__PURE__*/forwardRef(({
+  children,
+  forId
+}, ref) => /*#__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,16 @@
+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(({
+  children
+}, ref) => 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,88 @@
+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(({
+  children,
+  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, {
+      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]),
+
+  /**
+   * 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,31 @@
+import useUniqueId from '../utils/useUniqueId';
+
+const joinDefined = array => array.filter(item => item !== undefined).join(' ');
+
+const useInputSupports = ({
+  label,
+  feedback,
+  validation,
+  hint
+}) => {
+  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,51 @@
+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

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

@@ -0,0 +1,85 @@
+/* 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

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