@telus-uds/components-base 1.1.0 → 1.3.1

package/lib-module/Icon/Icon.js

@@ -0,0 +1,61 @@
+import React, { forwardRef } from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { useThemeTokens } from '../ThemeProvider';
+import { getTokensPropType, scaleWithText, variantProp } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Icon = /*#__PURE__*/forwardRef(({
+  icon: IconComponent,
+  accessibilityLabel,
+  variant,
+  tokens,
+  scalesWithText = false,
+  dataSet
+}, ref) => {
+  const themeTokens = useThemeTokens('Icon', tokens, variant);
+  const size = scalesWithText ? scaleWithText(themeTokens.size) : themeTokens.size;
+
+  const iconContent = /*#__PURE__*/_jsx(IconComponent, {
+    title: accessibilityLabel,
+    size: size,
+    color: themeTokens.color
+  });
+
+  return Platform.OS === 'web' ? /*#__PURE__*/_jsx(View, {
+    ref: ref // eslint-disable-next-line react-native/no-inline-styles
+    ,
+    style: {
+      // 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(' ')
+    },
+    dataSet: dataSet,
+    children: iconContent
+  }) : iconContent;
+});
+Icon.displayName = 'Icon';
+export const iconComponentPropTypes = {
+  variant: variantProp.propType,
+  tokens: getTokensPropType('Icon'),
+
+  /**
+   * Descriptive label used in web SVG title tag for accessibility
+   */
+  accessibilityLabel: PropTypes.string,
+
+  /**
+   * controls whether the icon size should be proportionate to any accessibility-related font scaling.
+   */
+  scalesWithText: PropTypes.bool
+};
+Icon.propTypes = { ...iconComponentPropTypes,
+
+  /**
+   * A valid UDS icon component imported from a UDS palette
+   * (e.g.) `import { MyIcon } from @telus-uds/palette-<brand>/build/web/icons`
+   */
+  icon: PropTypes.elementType.isRequired
+};
+export default Icon;

package/lib-module/Icon/IconText.js

@@ -0,0 +1,81 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import View from "react-native-web/dist/exports/View";
+import Icon, { 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'`
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+const IconText = /*#__PURE__*/forwardRef(({
+  space,
+  iconPosition = 'left',
+  icon: IconComponent,
+  iconProps,
+  children
+}, ref) => {
+  var _iconProps$tokens;
+
+  const iconContent = IconComponent && /*#__PURE__*/_jsx(Icon, {
+    ref: ref,
+    icon: IconComponent,
+    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 === null || iconProps === void 0 ? void 0 : (_iconProps$tokens = iconProps.tokens) === null || _iconProps$tokens === void 0 ? void 0 : _iconProps$tokens.size;
+  const iconAdjusted = Platform.OS === 'android' && iconContent && size ? /*#__PURE__*/_jsx(View, {
+    style: {
+      transform: [{
+        translateY: size * 0.2
+      }]
+    },
+    children: iconContent
+  }) : iconContent;
+  return getStackedContent(iconPosition === 'left' ? [iconAdjusted, children] : [children, iconAdjusted], {
+    space,
+    direction: 'row'
+  });
+});
+IconText.displayName = 'IconText';
+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-module/Icon/index.js

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

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;