@telus-uds/components-base 0.0.2-prerelease.3 → 0.0.2-prerelease.7

package/lib/Feedback/Feedback.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import PropTypes from 'prop-types';
+import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectTokens, variantProp } from '../utils';
+import StackView from '../StackView';
+
+const selectStyles = tokens => selectTokens('Feedback', tokens);
+
+const selectTitleTextStyles = ({
+  titleFontSize,
+  ...tokens
+}) => applyTextStyles(selectTokens('Typography', { ...tokens,
+  fontSize: titleFontSize
+}));
+
+const selectContentTextStyles = ({
+  contentFontSize,
+  ...tokens
+}) => applyTextStyles(selectTokens('Typography', { ...tokens,
+  fontSize: contentFontSize
+}));
+
+const selectIconTokens = ({
+  iconSize,
+  iconColor
+}) => ({
+  size: iconSize,
+  color: iconColor
+});
+
+const selectIconContainerStyles = ({
+  iconGap
+}) => ({
+  paddingRight: iconGap
+});
+/**
+ * A feedback box commonly used with form fields.
+ *
+ * ### Standalone usage
+ * While its primary use is to facilitate feedback states for other form components such as `TextInput`,
+ * you may use it standalone.
+ *
+ * ### Complex content
+ * You may pass any React tree as the children of this component, bear in mind that a render function
+ * is better suited for styling children based on Feedback's variant.
+ *
+ * ### Using a render function
+ * When a function is passed for rendering content, it will receive the feedback text styles and
+ * variant as arguments.
+ *
+ * ### Accessibility
+ * All accessibility props set on this component will be applied to the outer container.
+ */
+
+
+const Feedback = ({
+  title,
+  children,
+  id,
+  validation,
+  tokens,
+  variant,
+  ...rest
+}) => {
+  const themeTokens = useThemeTokens('Feedback', tokens, { ...variant,
+    validation
+  });
+  const {
+    space
+  } = themeTokens;
+  const {
+    icon: IconComponent
+  } = themeTokens;
+  const titleTextStyles = selectTitleTextStyles(themeTokens);
+  const contentTextStyles = selectContentTextStyles(themeTokens);
+  const content = typeof children === 'string' ? /*#__PURE__*/React.createElement(Text, {
+    style: contentTextStyles
+  }, children) : children;
+  const accessibilityProps = a11yProps.select({
+    accessibilityRole: validation === 'error' ? 'alert' : undefined,
+    ...rest
+  });
+  return /*#__PURE__*/React.createElement(View, Object.assign({
+    style: selectStyles(themeTokens)
+  }, accessibilityProps, {
+    nativeID: id
+  }), /*#__PURE__*/React.createElement(StackView, {
+    space: space
+  }, title !== undefined && /*#__PURE__*/React.createElement(View, {
+    style: staticStyles.title
+  }, IconComponent && /*#__PURE__*/React.createElement(View, {
+    style: selectIconContainerStyles(themeTokens)
+  }, /*#__PURE__*/React.createElement(IconComponent, {
+    tokens: selectIconTokens(themeTokens)
+  })), /*#__PURE__*/React.createElement(Text, {
+    style: titleTextStyles
+  }, title)), content && typeof content === 'function' ? content({
+    textStyles: contentTextStyles,
+    variant
+  }) : content));
+};
+
+Feedback.propTypes = {
+  /**
+   * Emphasized summary of the feedback. If an icon is set, it is rendered next to the title.
+   */
+  title: PropTypes.string,
+
+  /**
+   * Feedback content rendered below the title. A render function `({textStyles, variant}) => {}` is supported.
+   */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
+
+  /**
+   * Use to visually mark the Feedback as valid or invalid.
+   */
+  validation: PropTypes.oneOf(['error', 'success']),
+
+  /** @ignore */
+  id: PropTypes.string,
+  tokens: getTokensPropType('Feedback'),
+  variant: variantProp.propType
+};
+export default Feedback;
+const staticStyles = StyleSheet.create({
+  title: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+});

package/lib/Feedback/index.js

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

package/lib/Icon/Icon.js

@@ -2,28 +2,31 @@ import React from 'react';
 import { Platform, View } from 'react-native';
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, variantProp } from '../utils/propTypes';
+import { getTokensPropType, scaleWithText, variantProp } from '../utils';
 
 const Icon = ({
   IconSvg,
   variant,
   label,
   titleId,
-  tokens = {}
+  tokens,
+  scalesWithText = false
 }) => {
   const themeTokens = useThemeTokens('Icon', tokens, variant);
+  const size = scalesWithText ? scaleWithText(themeTokens.size) : themeTokens.size;
   const iconContent = /*#__PURE__*/React.createElement(IconSvg, {
     title: label,
     titleId: titleId,
-    size: themeTokens.size,
+    size: size,
     color: themeTokens.color
   });
   return Platform.OS === 'web' ? /*#__PURE__*/React.createElement(View // eslint-disable-next-line react-native/no-inline-styles
   , {
     style: {
-      // TODO: https://github.com/telus/universal-design-system/issues/487
-      transition: 'transform 200ms',
-      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : ''].filter(exists => exists).join(' ')
+      // TODO: systematise animations.
+      // https://github.com/telus/universal-design-system/issues/487
+      transition: 'transform 200ms, color 200ms',
+      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' ')
     }
   }, iconContent) : iconContent;
 }; // Auto-generated SVG icon components wrap Icon and pass through these props:

package/lib/Icon/IconText.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Platform, View } from 'react-native';
+import { iconComponentPropTypes } from './Icon';
+import { getStackedContent } from '../StackView';
+import { spacingProps } from '../utils';
+/**
+ * Returns an icon and some text with a sized gap between them. This is a utility component
+ * intended for use when creating components, not intended for use in applications on its own.
+ *
+ * IconText does not wrap its children, so should be used either:
+ *  - inline within a <Text> element
+ *  - within a container with `flexDirection: 'row'`
+ */
+
+const IconText = ({
+  space,
+  iconPosition = 'left',
+  icon: IconComponent,
+  iconProps,
+  children
+}) => {
+  const iconContent = IconComponent && /*#__PURE__*/React.createElement(IconComponent, Object.assign({
+    scalesWithText: true
+  }, iconProps)); // Inline images on Android are always baseline-aligned which makes them look misaligned - offset it.
+  // See abandoned issue https://github.com/facebook/react-native/issues/6529
+
+  const size = iconProps?.tokens?.size;
+  const iconAdjusted = Platform.OS === 'android' && iconContent && size ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      transform: [{
+        translateY: size * 0.2
+      }]
+    }
+  }, iconContent) : iconContent;
+  return getStackedContent(iconPosition === 'left' ? [iconAdjusted, children] : [children, iconAdjusted], {
+    space,
+    direction: 'row'
+  });
+};
+
+IconText.propTypes = {
+  /**
+   * Amount of space to separate the text content and icon. Uses the themes's spacing scale
+   * (see useSpacingScale for more info).
+   */
+  space: spacingProps.types.spacingValue,
+
+  /**
+   * Whether the icon should be to the left of the content or the right of the content.
+   */
+  iconPosition: PropTypes.oneOf(['left', 'right']),
+
+  /**
+   * A valid UDS icon component imported from a UDS palette.
+   */
+  icon: PropTypes.func,
+
+  /**
+   * Props that will be passed to the icon component. By default the icon's `scalesWithText`
+   * prop will be set as "true" so that the icon continues to match the size of the text
+   * if users use accessibility settings to increase text size.
+   */
+  iconProps: PropTypes.exact(iconComponentPropTypes),
+
+  /**
+   * Content to be rendered alongside the Icon component. Usually this should be a
+   * `<Typography>` component, or a component that renders `<Text>`.
+   */
+  children: PropTypes.node
+};
+export default IconText;

package/lib/Icon/index.js

@@ -1,3 +1,4 @@
 import Icon, { iconComponentPropTypes, iconSvgPropTypes } from './Icon';
+import IconText from './IconText';
 export default Icon;
-export { iconComponentPropTypes, iconSvgPropTypes };
+export { iconComponentPropTypes, iconSvgPropTypes, IconText };

package/lib/InputLabel/InputLabel.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import PropTypes from 'prop-types';
+import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { getTokensPropType, selectTokens, variantProp } from '../utils';
+import LabelContent from './LabelContent';
+import Tooltip from '../Tooltip';
+
+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
+});
+
+function InputLabel({
+  label,
+  forId,
+  hint,
+  hintPosition = 'inline',
+  hintId,
+  tooltip,
+  tokens,
+  variant
+}) {
+  const themeTokens = useThemeTokens('InputLabel', tokens, variant);
+  const hasTooltip = tooltip !== undefined;
+  const isHintInline = hintPosition === 'inline';
+  return /*#__PURE__*/React.createElement(View, {
+    style: [staticStyles.container, !isHintInline && staticStyles.containerWithHintBelow]
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label]
+  }, /*#__PURE__*/React.createElement(LabelContent, {
+    forId: forId
+  }, label)), hint && isHintInline && /*#__PURE__*/React.createElement(Text, {
+    style: [selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens)],
+    nativeID: hintId
+  }, hint), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, {
+    content: tooltip
+  }), hint && !isHintInline && /*#__PURE__*/React.createElement(Text, {
+    style: [selectHintStyles(themeTokens), staticStyles.hintBelow],
+    nativeID: hintId
+  }, hint));
+}
+
+InputLabel.propTypes = {
+  label: PropTypes.string.isRequired,
+  forId: PropTypes.string,
+  hint: PropTypes.string,
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
+  hintId: PropTypes.string,
+  tooltip: PropTypes.string,
+  tokens: getTokensPropType('InputLabel'),
+  variant: variantProp.propType
+};
+export default InputLabel;
+const staticStyles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  containerWithHintBelow: {
+    flexWrap: 'wrap'
+  },
+  label: {
+    flexShrink: 0
+  },
+  hintBelow: {
+    flexBasis: '100%',
+    flexShrink: 0
+  }
+});

package/lib/InputLabel/LabelContent.native.js

@@ -0,0 +1,8 @@
+// Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
+function LabelContent({
+  children
+}) {
+  return children;
+}
+
+export default LabelContent;

package/lib/InputLabel/LabelContent.web.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function LabelContent({
+  children,
+  forId
+}) {
+  return /*#__PURE__*/React.createElement("label", {
+    htmlFor: forId
+  }, children);
+}
+
+export default LabelContent;
+LabelContent.propTypes = {
+  children: PropTypes.string,
+  forId: PropTypes.string
+};

package/lib/InputLabel/index.js

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

package/lib/InputSupports/InputSupports.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import InputLabel from '../InputLabel';
+import Feedback from '../Feedback';
+import StackView from '../StackView';
+import { useThemeTokens } from '../ThemeProvider';
+import useUniqueId from '../utils/useUniqueId';
+
+const joinDefined = array => array.filter(item => item !== undefined).join(' ');
+
+function InputSupports({
+  children,
+  label,
+  hint,
+  hintPosition = 'inline',
+  feedback,
+  tooltip,
+  validation
+}) {
+  const {
+    space
+  } = useThemeTokens('InputSupports');
+  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]),
+    // introduced in RNW 0.15.0
+    accessibilityInvalid: hasValidationError // introduced in RNW 0.15.0
+
+  };
+  return /*#__PURE__*/React.createElement(StackView, {
+    space: space
+  }, label && /*#__PURE__*/React.createElement(InputLabel, {
+    label: label,
+    hint: hint,
+    hintPosition: hintPosition,
+    hintId: hintId,
+    tooltip: tooltip,
+    forId: inputId
+  }), typeof children === 'function' ? children({
+    a11yProps,
+    inputId
+  }) : children, feedback && /*#__PURE__*/React.createElement(Feedback, {
+    id: feedbackId,
+    title: feedback,
+    validation: validation
+  }));
+}
+
+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/InputSupports/index.js

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

package/lib/InputSupports/propTypes.js

@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+const inputSupportProps = {
+  types: {
+    /**
+     * The input label.
+     */
+    label: 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']),
+
+    /**
+     * 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'])
+  },
+  select: ({
+    label,
+    hint,
+    hintPosition,
+    feedback,
+    tooltip,
+    validation,
+    ...rest
+  }) => ({
+    props: {
+      label,
+      hint,
+      hintPosition,
+      feedback,
+      tooltip,
+      validation
+    },
+    rest
+  })
+};
+export default inputSupportProps;

package/lib/Link/ChevronLink.js

@@ -1,21 +1,46 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Link from './Link';
+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.
+ */
 
 const ChevronLink = ({
   direction = 'right',
   children,
-  variant = {},
+  tokens,
+  variant,
   ...linkProps
-}) => /*#__PURE__*/React.createElement(Link, Object.assign({
-  variant: {
-    component: 'ChevronLink',
-    ...variant
-  },
-  iconPosition: direction
-}, linkProps), children);
+}) => {
+  const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant);
 
-ChevronLink.propTypes = { ...Link.propTypes,
+  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__*/React.createElement(LinkBase, Object.assign({}, linkProps, {
+    iconPosition: direction,
+    tokens: getTokens
+  }), children);
+};
+
+ChevronLink.propTypes = { ...LinkBase.propTypes,
+  tokens: getTokensPropType('ChevronLink', 'Link'),
   direction: PropTypes.oneOf(['left', 'right'])
 };
 export default ChevronLink;

package/lib/Link/InlinePressable.native.js

@@ -0,0 +1,78 @@
+/* eslint-disable camelcase */
+import React, { useState } from 'react';
+import { Text, TouchableWithoutFeedback } from 'react-native';
+/**
+ * @typedef {import('react-native').PressableProps} PressableProps
+ */
+// TouchableWithoutFeedback and Pressable have similar but not identical props APIs
+
+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 = ({
+  onPress,
+  children,
+  style,
+  ...rest
+}) => {
+  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__*/React.createElement(TouchableWithoutFeedback, Object.assign({
+    onPress: onPress,
+    onPressIn: handlePressIn,
+    onPressOut: handlePressOut,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }, pressablePropsToTouchable(rest)), /*#__PURE__*/React.createElement(Text, {
+    style: currentStyle
+  }, typeof children === 'function' ? children(pressState) : children));
+};
+
+export default InlinePressable;