@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/IconButton/IconButton.js

@@ -1,203 +0,0 @@
-import React 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';
-
-// function to get the dimentionals of the conditionals
-import { jsx as _jsx } from "react/jsx-runtime";
-const getPasswordDimensions = (password, width, height) => {
-  return password ? {
-    width,
-    height
-  } : {};
-};
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const selectOuterStyle = (_ref, password) => {
-  let {
-    backgroundColor,
-    outerBorderWidth,
-    outerBorderColor,
-    outerBorderGap,
-    borderRadius,
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    borderBottomLeftRadius,
-    borderBottomRightRadius,
-    shadow,
-    width,
-    height
-  } = _ref;
-  return [{
-    backgroundColor,
-    ...applyShadowToken(shadow),
-    ...applyOuterBorder({
-      borderRadius,
-      borderTopLeftRadius,
-      borderTopRightRadius,
-      borderBottomLeftRadius,
-      borderBottomRightRadius,
-      outerBorderWidth,
-      outerBorderColor,
-      outerBorderGap
-    }),
-    ...getPasswordDimensions(password, width, height),
-    ...Platform.select({
-      web: {
-        outline: 'none',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }
-    })
-  }, staticStyles.outer];
-};
-const calculatePadding = (padding, borderWidth) => padding && Math.max(0, padding - borderWidth); // Stable size as border changes
-
-const selectInnerStyle = (_ref2, password) => {
-  let {
-    borderColor,
-    borderWidth,
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    borderBottomLeftRadius,
-    borderBottomRightRadius,
-    borderRadius,
-    padding = 0,
-    borderTopWidth,
-    borderRightWidth,
-    borderBottomWidth,
-    borderLeftWidth,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom,
-    width,
-    height
-  } = _ref2;
-  return {
-    // Inner borders animate with the icon and should be treated like a themable feature of the icon
-    borderColor,
-    borderRadius,
-    borderWidth,
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    borderBottomLeftRadius,
-    borderBottomRightRadius,
-    borderTopWidth,
-    borderRightWidth,
-    borderBottomWidth,
-    borderLeftWidth,
-    padding: calculatePadding(padding, borderWidth),
-    paddingLeft: calculatePadding(paddingLeft, borderLeftWidth),
-    paddingRight: calculatePadding(paddingRight, borderRightWidth),
-    paddingTop: calculatePadding(paddingTop, borderTopWidth),
-    paddingBottom: calculatePadding(paddingBottom, borderBottomWidth),
-    ...Platform.select({
-      web: {
-        pointerEvents: 'none',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }
-    }),
-    ...getPasswordDimensions(password, width, height)
-  };
-};
-
-/**
- * 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__*/React.forwardRef((_ref3, ref) => {
-  let {
-    tokens,
-    variant = {},
-    icon: IconComponent,
-    href,
-    hrefAttrs,
-    testID,
-    accessibilityRole = href ? 'link' : 'button',
-    ...rawRest
-  } = _ref3;
-  const {
-    onPress,
-    ...rest
-  } = clickProps.toPressProps(rawRest);
-  const selectedProps = selectProps({
-    ...rest,
-    accessibilityRole
-  });
-  const handlePress = () => {
-    var _ref$current;
-    linkProps.handleHref({
-      href,
-      onPress
-    })({
-      nativeEvent: {
-        target: ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.id
-      }
-    });
-  };
-  const getTokens = useThemeTokensCallback('IconButton', tokens, variant);
-  const getOuterStyle = pressableState => selectOuterStyle(getTokens(resolvePressableState(pressableState), variant.password));
-  return /*#__PURE__*/_jsx(Pressable, {
-    ref: ref,
-    href: href,
-    onPress: handlePress,
-    hrefAttrs: hrefAttrs,
-    style: getOuterStyle,
-    ...selectedProps,
-    testID: testID,
-    children: pressableState => {
-      const themeTokens = getTokens(resolvePressableState(pressableState));
-      return /*#__PURE__*/_jsx(View, {
-        style: selectInnerStyle(themeTokens, variant.password),
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: IconComponent || themeTokens.icon,
-          title: selectedProps.accessibilityLabel,
-          tokens: selectTokens('Icon', themeTokens, 'icon'),
-          variant: variant
-        })
-      });
-    }
-  });
-});
-IconButton.displayName = 'IconButton';
-IconButton.propTypes = {
-  ...selectedSystemPropTypes,
-  variant: variantProp.propType,
-  tokens: getTokensPropType('IconButton'),
-  /**
-   * A unique identifier for testing purposes.
-   * Will be added as a `data-testid` attribute.
-   */
-  testID: PropTypes.string,
-  /**
-   * Defines the icon to be rendered
-   */
-  icon: PropTypes.elementType,
-  /**
-   * URL to navigate to when the `Iconbutton` is pressed
-   */
-  href: PropTypes.string,
-  /**
-   * URL options to navigate to when the `Iconbutton` is pressed
-   */
-  hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
-  /**
-   * Function to execute when the `Iconbutton` is pressed
-   */
-  onPress: PropTypes.func
-};
-const staticStyles = StyleSheet.create({
-  outer: {
-    alignSelf: 'baseline'
-  }
-});
-export default withLinkRouter(IconButton);

package/lib-module/IconButton/index.js

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

package/lib-module/InputLabel/InputLabel.js

@@ -1,146 +0,0 @@
-import React 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, useTheme, 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, themeOptions) => applyTextStyles({
-  ...selectTokens('Typography', tokens),
-  themeOptions
-});
-const selectHintStyles = (_ref, themeOptions) => {
-  let {
-    hintColor,
-    hintFontName,
-    hintFontSize,
-    hintFontWeight,
-    hintLineHeight
-  } = _ref;
-  return applyTextStyles({
-    color: hintColor,
-    fontName: hintFontName,
-    fontSize: hintFontSize,
-    fontWeight: hintFontWeight,
-    lineHeight: hintLineHeight,
-    themeOptions
-  });
-};
-const selectGapStyles = _ref2 => {
-  let {
-    gap
-  } = _ref2;
-  return {
-    marginRight: gap
-  };
-};
-const InputLabel = /*#__PURE__*/React.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';
-  const {
-    themeOptions
-  } = useTheme();
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(View, {
-      ref: ref,
-      style: staticStyles.container,
-      ...selectProps(rest),
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [selectLabelStyles(themeTokens, themeOptions), selectGapStyles(themeTokens), staticStyles.label],
-        children: /*#__PURE__*/_jsx(LabelContent, {
-          forId: forId,
-          children: label
-        })
-      }), hint && isHintInline && /*#__PURE__*/_jsx(Text, {
-        style: [selectHintStyles(themeTokens, themeOptions), hasTooltip && selectGapStyles(themeTokens), staticStyles.label],
-        nativeID: hintId,
-        children: hint
-      }), hasTooltip && /*#__PURE__*/_jsx(View, {
-        style: [staticStyles.tooltipAlign, {
-          height: themeTokens.fontSize * themeTokens.lineHeight,
-          color: themeTokens.color
-        }],
-        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

@@ -1,28 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
-const LabelContent = /*#__PURE__*/React.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

@@ -1,18 +0,0 @@
-import React 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__*/React.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

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

package/lib-module/InputSupports/InputSupports.js

@@ -1,108 +0,0 @@
-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 useInputSupports from './useInputSupports';
-import { getTokensPropType } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    copy = 'en',
-    label,
-    hint,
-    hintPosition = 'inline',
-    feedback,
-    feedbackTokens = {},
-    feedbackProps = {},
-    tooltip,
-    validation,
-    nativeID
-  } = _ref;
-  const {
-    space
-  } = useThemeTokens('InputSupports');
-  const {
-    inputId,
-    hintId,
-    feedbackId,
-    a11yProps
-  } = useInputSupports({
-    feedback,
-    hint,
-    label,
-    validation,
-    nativeID
-  });
-  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,
-      tokens: feedbackTokens,
-      ...feedbackProps
-    }) : null]
-  });
-});
-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,
-  /**
-   * Additional tokens to override the default feedback tokens.
-   */
-  feedbackTokens: getTokensPropType('Feedback'),
-  /**
-   * Additional props to pass to the `Feedback` component.
-   */
-  feedbackProps: PropTypes.object,
-  /**
-   * 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']),
-  /**
-   * ID for DOM element on web
-   */
-  nativeID: PropTypes.string
-};
-export default InputSupports;

package/lib-module/InputSupports/index.js

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

package/lib-module/InputSupports/useInputSupports.js

@@ -1,31 +0,0 @@
-import useUniqueId from '../utils/useUniqueId';
-const joinDefined = array => array.filter(item => item !== undefined).join(' ');
-const useInputSupports = _ref => {
-  let {
-    label,
-    feedback,
-    validation,
-    hint,
-    nativeID
-  } = _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: nativeID || inputId,
-    hintId,
-    feedbackId,
-    a11yProps
-  };
-};
-export default useInputSupports;

package/lib-module/Link/ChevronLink.js

@@ -1,68 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { selectTokens, getTokensPropType, linkProps } 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__*/React.forwardRef((_ref, ref) => {
-  let {
-    direction = 'right',
-    children,
-    tokens = {},
-    variant,
-    dataSet,
-    ...otherlinkProps
-  } = _ref;
-  const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant);
-  const applyChevronTokens = linkState => {
-    const {
-      leftIcon,
-      rightIcon,
-      iconDisplace,
-      height,
-      fontSize,
-      ...otherTokens
-    } = getChevronTokens(linkState);
-    const linkTokens = selectTokens('Link', otherTokens);
-    return {
-      ...linkTokens,
-      height,
-      blockFontSize: tokens.fontSize ?? fontSize,
-      icon: direction === 'right' ? rightIcon : leftIcon,
-      iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
-    };
-  };
-  const getTokens = useThemeTokensCallback('Link', applyChevronTokens, variant);
-  return /*#__PURE__*/_jsx(LinkBase, {
-    ...otherlinkProps,
-    iconPosition: direction,
-    tokens: getTokens,
-    dataSet: dataSet,
-    ref: ref,
-    children: children
-  });
-});
-ChevronLink.displayName = 'ChevronLink';
-ChevronLink.propTypes = {
-  ...LinkBase.propTypes,
-  children: PropTypes.node,
-  variant: PropTypes.exact({
-    size: PropTypes.oneOf(['large', 'small', 'micro']),
-    alternative: PropTypes.bool,
-    inverse: PropTypes.bool
-  }),
-  ...linkProps.types,
-  tokens: getTokensPropType('ChevronLink', 'Link'),
-  /**
-   * Changes direction of chevron icon
-   */
-  direction: PropTypes.oneOf(['left', 'right'])
-};
-export default ChevronLink;

package/lib-module/Link/InlinePressable.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import Pressable from "react-native-web/dist/exports/Pressable";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import PropTypes from 'prop-types';
-
-/**
- * @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
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const InlinePressable = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    inlineFlex = true,
-    style,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/_jsx(Pressable, {
-    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.oneOfType([PropTypes.node, PropTypes.func]),
-  inlineFlex: PropTypes.bool,
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func])
-};
-const staticStyles = StyleSheet.create({
-  inline: {
-    // Stop Pressable defaulting to (block) flex
-    display: 'inline'
-  },
-  inlineFlex: {
-    display: 'inline-flex'
-  }
-});
-export default InlinePressable;